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

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

1. Согласно исследованиям, большинство посетителей заходят на сайты с мобильных устройств. В 2018 году их количество составило 52%.
2. Удобство использования проекта на мобильных гаджетах повышает лояльность аудитории и уменьшает количество отказов.
3. Адаптивная версия увеличивает количество потенциальных клиентов и повышает продажи.
4. Для поисковых систем адаптивность к мобильным устройствам — один из факторов ранжирования.

Адаптивная/мобильная версия должна обладать следующими свойствами:

• удобство всех элементов навигации, чтобы посетители могли на них с легкостью нажимать вне зависимости от разрешения устройства;
  
• использование только вертикальной прокрутки, простая опция поиска, меню перехода на главную страницу;
  
• отдельная карта сайта (в случае реализации мобильной версии), содержащая все те же страницы, что и основной сайт;
  
• удобство при заполнении форм и простота совершения всех конверсионных действий;
  
• структурированность текста для быстрого восприятия — наличие заголовков, разделов, маркированных списков и визуального контента;
  
• высокая скорость загрузки мобильных страниц. Проверить скорость можно посредством Google PageSpeed Insights;
  
• отсутствие элементов, работающих на Flash-технологии, всплывающих окон и рекламы;
  
• адаптивность размера изображений и видеоматериалов — в случае с видео поддерживается YouTube;
  

• разметка телефонного номера <a href="tel:+**********">8 (***)***-**-**</a>, функция удобного набора номера с сайта при клике на контактный номер телефона;
  
• чтение текста на любом элементе без затруднений.

1. Адаптивный дизайн — оптимальное решение для небольших ресурсов, таких как лендинги, сайты-визитки, блоги, сайты услуг.

• Шаблоны — подходящий вариант для информационных ресурсов, форумов, не очень крупных интернет-магазинов. Чтобы реализовать, необходим скрипт, определяющий вид устройства и отображающий в зависимости от него конкретный шаблон.
  
  При использовании шаблонов дизайн сайта для мобильных устройств упрощается: удаляются неважные элементы, благодаря чему вес страниц уменьшается.
  
• Плагины и темы с адаптивным дизайном — самый удобный способ для проектов на WordPress и других популярных CMS.

2. Отдельная мобильная версия на субдомене — наиболее трудоемкий вариант, подходящий для крупных порталов, социальных сетей и интернет-магазинов с широким ассортиментом. Или конструкторы мобильной версии ресурсов.

Рассмотрим эти варианты подробнее.

Благодаря адаптивному дизайну ресурс будет удобен для использования на всех устройствах, сохраняя при этом сходный внешний вид с основной версией. Google рекомендует использовать именно такой вариант для адаптации проекта под переносные устройства.

Элементы ресурса при этом будут сдвигаться по вертикали в зависимости от разрешения девайса.

Некоторые крупные элементы сайта при адаптивном дизайне необходимо скрывать для мобильных устройств или же заменять их на более компактные.

Десктопный вариант:

Мобильный вариант:

Для настройки подойдут CSS-фреймворки — например, bootstrap, в котором можно оптимизировать сайт для мобильных устройств либо использовать медиа-запросы (CSS3 Media Queries).

Рассмотрим детальнее Bootstrap:

В данный популярный инструмент включены следующие компоненты:

• HTML и CSS-шаблоны;
  
• сетка;
  
• типографика;
  
• блоки навигации;
  
• веб-формы;
  
• кнопки;
  
• JavaScript-расширения.
  

При оптимизации сайта под телефон важно придерживаться инструкций Bootstrap. Краткий алгоритм действий:

1. Подключим к проекту файлы CSS, а также при необходимости — jQuery и JavaScript.
2. Проверим ресурс на соответствие последним стандартам веб-разработки: должен использоваться HTML5 и метатег viewport, предназначенный для контроля размера окна просмотра и масштаба страницы.
3. При сложностях с такими программами как, например, Google Maps, нужно переопределить box-sizing: border-box для необходимого виджета.
4. В код нужно добавить предопределенные классы Bootstrap Grid или использовать препроцессоры Sass для создания собственной разметки.

Подобных сервисов — десятки. В данной статье мы рассмотрим Wirenode — простой в использовании конструктор мобильных сайтов, бесплатный для персонального использования. Позволяет создать мобильную версию блога на отдельном домене, при условии, что на ресурсе есть RSS-лента.

Тарифы Wirenode предусматривают бесплатное использование для создания одного сайта:

Пройдем регистрацию в сервисе:

После заполнения полей, выбора типа аккаунта и введения капчи нажмем «Create my account».

Инструмент предлагает создать новый моб. сайт при наличии на нем RSS-ленты. После ввода URL-адреса ресурса нажмем «Mobilize Blog»:

После этого укажем домен и перейдем к редактированию:

В сервисе доступен предварительный просмотр мобильного сайта:

Можно выбрать одну из трех моделей телефонов:

После редактирования в десктопный вариант нужно добавить виджет, информирующий о том, что доступна мобильная версия, которая находится на другом домене:

При оптимизации сайта для мобильных устройств в WordPress самым простым решением будет изменение темы на адаптивную либо установка плагина для мобильной версии. При использовании темы с адаптивным дизайном ресурс выглядит таким образом в полной версии:

А так — в мобильной:

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

Чтобы выбрать тему с адаптивным дизайном для собственного проекта, перейдем в подраздел «Темы» раздела «Внешний вид» и нажмем «Добавить новую»:

В фильтрах характеристик выберем «Адаптивный дизайн» и нажмем «Применить фильтр»:

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

Также для Wordpress можно использовать следующие плагины:

1. AMP для WP — Ускоренные мобильные страницы

Google Accelerated Mobile Pages (AMP) — библиотека с открытым программным кодом, помогающая создавать быстро загружающиеся упрощенные версии страниц сайта, которые хорошо выглядят на смартфонах.

Принцип работы строится на том, что создается дубликат ресурса с использованием AMP HTML. При этом отключаются скрипты, которые замедляют скорость загрузки сайта, после чего средствами Google страницы сайта обрабатываются для наиболее быстрой загрузки.

Установим и активируем плагин, затем перейдем к его настройке — для этого зайдем в подраздел «Settings» раздела «AMP». Загрузим логотип и сохраним изменения, нажав «Save changes»:

Затем перейдем в раздел «Design» для работы над внешним видом мобильной версии:

Выберем тему оформления:

После выбора темы можно изменить цвета и шрифты в разделе «Global», настроить хэдер и футер, например, добавить кнопку звонка во вкладке «Header». В разделе «Social» можно добавить кнопки социальных сетей.

После завершения настройки активируем в разделе «Advance Settings» перенаправление на AMP-версию сайта для мобильных устройств:

После этого ресурс на портативных устройствах будет выглядеть таким образом:

2. WPtouch

Также в WordPress можно использовать плагин WPtouch. Перейдем в раздел «Плагины», выберем «Добавить новый», найдем WPtouch с помощью поиска и нажмем «Установить»:

После этого активируем плагин и перейдем к его настройке:

В плагине можно настроить тему:

Здесь можно отрегулировать цветовую схему сайта, добавить при необходимости иконку. Доступен предварительный просмотр внесенных изменений в эмуляторе мобильного телефона:

После внесения изменений на реальном смартфоне сайт выглядит так:

В подвале отображаются кнопки переключения мобильной и компьютерной версий:

Помимо указанных, можно использовать следующие плагины:

• PageBuilder — конструктор для создания адаптивного дизайна:

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

Мобильная версия имеет облегченный вес и упрощенный дизайн, однако на ней должны быть доступны все страницы, которые есть на основной версии. Также в мобильной версии должна быть возможность перейти на основную версию.

Согласно рекомендациям Google, чтобы поисковики не считали контент на мобильной версии дублированным, необходимо в код каждой страницы полной версии добавить:

При этом в коде мобильной страницы устанавливается ссылка на каноническую версию:

Полная версия интернет-магазина:

Адаптированный сайт на субдомене мобильной версии:

Чтобы проверить, как выглядит сайт при различных разрешениях экрана, воспользуемся онлайн-инструментами, к примеру, Screenfly:

Инструмент позволяет выбрать нужный тип устройства — компьютер, планшет, смартфон или телевизор, а также указать разрешение его экрана:

Сайт, рассматриваемый в данном примере, не адаптирован под мобильные устройства:

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

1. Для большинства сайтов оптимально подойдет адаптивный дизайн, достаточно простой в реализации, однако требующий базовых знаний верстки мобильных сайтов.
2. Можно использовать конструкторы мобильных сайтов, но в большинстве вариантов они будут платными, либо обладать определенными ограничениями.
3. Для сайтов на WordPress проще всего получить адаптивную версию с помощью готовых шаблонов, либо плагинов.
4. На крупных порталах часто используют поддомен для отдельной мобильной версии проекта.