В блог

Как адаптировать сайт под мобильные устройства: пошаговая инструкция

01.06.2022
  • UI / UX дизайн
  • Инсайты
  • Лайфхаки
  • Советуем
  • 45 просмотров
  • 12 минут

Вступление

Сегодня больше половины транзакций в сети осуществляются с использованием мобильных устройств. Согласно статистике «Similarweb Introduces», мобильный трафик за период с 2017 по 2021 год уже вырос на 50%. И продолжает неуклонно расти. В связи с ростом мобильного трафика компаниям, заинтересованным в продвижении продукции/услуг через интернет, необходимо адаптировать свои веб-ресурсы для смартфонов и планшетов. О том, как это сделать легко и быстро, мы расскажем в этой статье.
Изображение: maestro / shutterstock.com

Проблемы, которые решает адаптация сайта

Оптимизация сайта под мобильные устройства позволяет корректно отображать ресурс на любых носителях. С ее помощью можно решить ряд функциональных проблем сайта, сказывающихся на его популярности, как у пользователей, так и у роботов поисковых сетей Яндекс, Google и т.п. 

Проблема 1: Некорректное отображение текста и элементов

Почему некоторые, даже хорошо работающие сайты с продуманной структурой бывает неудобно просматривать с мобильного телефона или планшета? Потому что первоначально они разрабатывались для просмотра с персональных компьютеров и ноутбуков, то есть с устройств с высоким разрешение и большим экраном. Открыв тот же самый сайт на смартфоне, человеку приходится увеличивать как шрифт текста, так и каждый переходной элемент сайта. Адаптация позволяет решить эту проблему путем видоизменения формата сайта.

Проблема 2: Отсутствие популярности ресурса

Адаптированный сайт, будучи простым и приятным в использовании, не отталкивает потенциального клиента, а привлекает его, заставляя посещать сайт снова и снова. Посетители особо удачных адаптированных версий сайта советуют его знакомым по принципу сарафанного радио: «Смотри, как удобно они сделали!».

Проблема 3: Низкое ранжирование сайта в поисковой выдаче

Адаптивность важна для повышения ранжирования сайта в поисковых системах. Иными словами, чем лучше адаптирован сайт, тем выше будет его позиция в поисковой выдаче.
Изображение: maestro / shutterstock.com

Проблема 4: Низкая конверсия

Адаптивный сайт — это сайт, каждый элемент которого будет видимым и удобным вне зависимости от того, с какого типа устройств его просматривает пользователь. А это значительно повышает конверсию сайта и репутацию ресурса.

Проблема 5: Неработающий таргетинг

Если вы используете таргетинговую рекламу и не адаптировали сайт под нужды пользователей мобильных устройств, то результат перехода по ссылкам будет плачевен. Судите сами: кому захочется тратить время на то, чтобы приобретать товар/услугу на неудобном, плохо работающем сайте. Поэтому адаптация сайта под мобильные устройства может напрямую влиять на поток клиентов.

Приступаем к адаптации

Комплексная адаптация сайта — это сложный технический процесс, который лучше поручить специалисту (веб-разработчику или веб-дизайнеру). Тем не менее, простейшую верхнеуровневую адаптацию можно сделать и самостоятельно.  Существует три основных вида адаптации сайта:
  • Создание адаптивного дизайна. 
  • Преобразование сайта в мобильную версию.
  • Создание динамической демонстрации. 
Давайте рассмотрим каждый из способов по отдельности, выделим их преимущества и недостатки.

Создание адаптивного дизайна

Адаптивный дизайн — самый простой и эффективный способ общей адаптации веб-ресурса. Его суть состоит в том, что сам по себе код сайта HTML остается без изменений. Наша задача — видоизменить дизайн сайта, сделав его адаптивным.
Изображение: maestro / shutterstock.com
Для этого мы можем:
  • Значительно увеличить шрифт текста, представленного для ознакомления посетителям сайта.
  • Разделить дизайнерские блоки на сайте (при их наличии), уменьшив их количество по горизонтали (это избавит посетителя от нужны листать сайт влево-вправо).
  • Сделать контекстное меню открывающимся/всплывающим, не забыв при этом сделать каждый пункт меню читаемым.
  • Уменьшить формат изображений и GIF-изображений на сайте до такого, какой будет удобен посетителям для просмотра с экрана их смартфонов.
  • Сделать маркированные списки на сайте доступными для прочтения и восприятия (для это цели их часто приходится видоизменять).
Теперь пошагово выполняем каждое из указанных действий:
  1. Открываем доступ к коду страницы (или ее исходному ресурсу). Речь идет о параметрах CSS, JScript, изображениях всех форматов и тому подобное.
  2. Вписываем в код страницы специальный метатег под названием "Viewport". Он позволит нам настроить ширину страницы под нужды того или иного устройства, в нашем случае - мобильного. Параллельная переадресация при использовании этого метатега самостоятельно не применяется.
  3. После инжекта метатега (HTML-код которого Вы легко можете найти в открытых источниках), создаем разметку и настраиваем CSS-фреймворк, используя инструкции и свойства кода.
ВАЖНО! Каждое из перечисленных действий выполняется вне зависимости от типа сайта и его дизайна. Случается, что полученная веб-версия становится более компактной благодаря смещению формата по горизонтали, но не становится адаптивной из-за наложения блоков друг на друга и некорректного переноса шрифтов. В ходе адаптивного дизайна некоторые крупные элементы нужно скрывать/заменять на более компактные для мобильных устройств.
Изображение: Десктопная версия сайта логистической компании / allitec.ru
Изображение: Мобильная версия сайта логистической компании / allitec.ru
Что мы получаем в итоге? Узнаваемый при просмотре с экрана мобильного телефона или планшета сайт. 

Создание мобильной версии сайта

Создание мобильной версии сайта предполагает совсем иной подход к решению задачи адаптации. Его суть состоит в написании новой страницы сайта. При этом будет использован другой код, а сайту нужно будет присвоить иной адрес, отличный от старого. ВАЖНО! При создании мобильной версии сайта обязательным условием станет вписывание в код сайта тега типа "Link rel=»alternate" с добавлением действующего адреса мобильного сайта. Зачем нужен этот тег? После создания второй веб-страницы и присвоения ей доменного имени, автоматическая система идентификации поисковых систем (у Яндекса и Гугла уж точно) посчитает оба сайта за дубликат одного и, скорее всего, заблокирует один из доменов к выдаче. У поисковиков это называется антиспам-политикой.

Динамическая демонстрация

Динамическая демонстрация по своей сути объединяет оба предыдущих метода адаптации. При ее использовании вы сохраняете единственный адрес для мобильной и ПК-версий сайта, но код формата HTML все же меняется. Каждый из трех, приведенных выше, способов адаптации сайта под мобильные устройства

Как самостоятельно адаптировать сайт под мобильные устройства

Если у вас есть свободное время и желание, то заняться созданием адаптивной веб-версии сайта можно самостоятельно. Для этого вам понадобятся хотя бы базовые знания HTML-кодировки. Ищите информацию в открытых источниках: отличным кладезем информации станут форумы программистов и веб-инженеров, на которых часто делятся полезными советами и инструкциями. Также вы можете использовать специальные онлайн-конструкторы по созданию сайтов. Самым популярным из них является к Tilda. 

Создание сайта на Tilda

Tilda – это довольно старый и проверенный сервис по созданию сайтов. Несмотря на то, что Tilda позиционирует себя как универсальный конструктор, следует принять во внимание, что лучше всего он подходит для одностраничных сайтов (лендингов). Это связано с тем, что у Tilda простой и понятный, но вместе с тем довольно ограниченный функционал. Базовые функции предоставляются пользователям сервиса бесплатно, но за дополнительные фишки придется заплатить небольшую сумму.
Изображение: Tilda / tilda.ru
В интерфейсе Tilda вы сможете найти вкладку по созданию сайтов для мобильных приложений. На сайте реализован достаточно удобный пользовательский интерфейс, а также имеется доступный FAQ. К основным преимуществам сервиса относятся: 
  • широкий инструментарий, доступный каждому;
  • понятный пользовательский интерфейс;
  • высокая скорость работы;
  • интересный выбор дизайнерских решений (например, шрифты и оформление блоков);
  • выбор шаблонов для ориентирования.
Вместе с тем, сервис обладает и рядом особенностей:
  • ежемесячно взимаемая плата за использование расширенных функций сервиса;
  • принадлежность сайта платформе Tilda и использование ее внутреннего движка;
  • ограниченный функционал для создания объемных многостраничных сайтов;
  • ограниченное место на хостинге.

Другие конструкторы сайтов

Разумеется, Tilda является далеко не единственным сервисом, позволяющим нативно конструировать интернет-страницы. Мы разобрали принцип именно его работы по причине того, что сегодня Tilda занимает первую строчку в рейтинге самых популярных конструкторов сайтов. Другие конструкторы имеют схожий с Tilda интерфейс, разобраться в котором не составит труда. Предлагаем вам ознакомиться со списком наиболее популярных конструкторов:
  • Wix.com;
  • uKit.com;
  • Nethouse.ru;
  • Конструктор сайтов от Tinkoff.ru;
  • Bitrix24.ru.
Вы можете изучить каждый из них и выбрать наиболее удобный и подходящий для себя.

Как проверить готовый сайт на адаптивность

Допустим, вы уже создали адаптивную версию сайта для мобильных устройств. Теперь нужно проверить его работу на наличие ошибок/сбоев. Для полноценной проверки прямо с экрана компьютера отлично подойдет сервис Google Mobile Friendly. Он позволит посмотреть, как пользователи, посещающие сайт со смартфона или планшета, видят его.  При работе с браузера Google Chrome просто нажмите F12 и выберите соответствующую функцию в "Инструментах разработчика". Аналогичная процедура применяется в Yandex Browser. Еще более элементарный способ: просто зайти на сайт с мобильного устройства. Помните, что ваша задача на данном этапе — тщательно проверить весь объем работы функционала сайта, прочитать каждую строку.
Изображение: source / shutterstock.com

Заключение

Существует много способов адаптации сайта под мобильные устройства, и у каждого из них есть ряд особенностей. Нужный вариант выбирают в зависимости от специфики проекта: 
  • Большинству проектов подходит адаптивный дизайн, как самый простой в реализации способ адаптации, не требующий глубоких знаний мобильной верстки.
  • Конструкторы мобильных версий — тоже популярный вариант, подходящий многим проектам. Однако этот способ всегда сопряжен с необходимостью оплаты сервиса и определенными функциональными ограничениями.
  • Сайты на WordPress и других известных системах проще всего адаптировать с помощью встроенных шаблонов, плагинов.
  • Для крупных сложно сконструированных порталов чаще всего используют отдельный поддомен для мобильной версии ресурса.  
За экспертной оценкой ресурса и помощью в адаптации обращайтесь в наше агентство. Мы уже много лет помогаем компаниям адаптировать ресурсы под смартфоны и планшеты. А потому дадим экспертную оценку вашего сайта, поможем с выбором оптимального способа адаптации и его реализацией. Вам понравится работать с нами! ;) Не забывайте, что только качественная веб-страница будет занимать топовые места в поисковой выдаче и позволит вашей компании выйти на новый уровень продаж. Удачи!

Популярное

Все статьи

Подпишитесь на нашу рассылку

Нажимая на кнопку, вы даете согласие
на обработку персональных данных

Смотрите
наши проекты

Все проекты