Как адаптировать сайт под мобильные устройства
Особенности адаптации сайта под мобильные устройства
- Согласно исследованиям, большинство посетителей заходят на сайты с мобильных устройств. В 2018 году их количество составило 52%.
- Удобство использования проекта на мобильных гаджетах повышает лояльность аудитории и уменьшает количество отказов.
- Адаптивная версия увеличивает количество потенциальных клиентов и повышает продажи.
- Для поисковых систем адаптивность к мобильным устройствам — один из факторов ранжирования.
Адаптивная/мобильная версия должна обладать следующими свойствами:
- удобство всех элементов навигации, чтобы посетители могли на них с легкостью нажимать вне зависимости от разрешения устройства;
- использование только вертикальной прокрутки, простая опция поиска, меню перехода на главную страницу;
- отдельная карта сайта (в случае реализации мобильной версии), содержащая все те же страницы, что и основной сайт;
- удобство при заполнении форм и простота совершения всех конверсионных действий;
- структурированность текста для быстрого восприятия — наличие заголовков, разделов, маркированных списков и визуального контента;
- высокая скорость загрузки мобильных страниц. Проверить скорость можно посредством Google PageSpeed Insights;
- отсутствие элементов, работающих на Flash-технологии, всплывающих окон и рекламы;
- адаптивность размера изображений и видеоматериалов — в случае с видео поддерживается YouTube;
- разметка телефонного номера <a href="tel:+**********">8 (***)***-**-**</a>, функция удобного набора номера с сайта при клике на контактный номер телефона;
- чтение текста на любом элементе без затруднений.
Варианты оптимизации под мобильные устройства
- Шаблоны — подходящий вариант для информационных ресурсов, форумов, не очень крупных интернет-магазинов. Чтобы реализовать, необходим скрипт, определяющий вид устройства и отображающий в зависимости от него конкретный шаблон.
При использовании шаблонов дизайн сайта для мобильных устройств упрощается: удаляются неважные элементы, благодаря чему вес страниц уменьшается.
- Плагины и темы с адаптивным дизайном — самый удобный способ для проектов на WordPress и других популярных CMS.
2. Отдельная мобильная версия на субдомене — наиболее трудоемкий вариант, подходящий для крупных порталов, социальных сетей и интернет-магазинов с широким ассортиментом. Или конструкторы мобильной версии ресурсов.
Рассмотрим эти варианты подробнее.
Адаптивный дизайн
Элементы ресурса при этом будут сдвигаться по вертикали в зависимости от разрешения девайса.
Некоторые крупные элементы сайта при адаптивном дизайне необходимо скрывать для мобильных устройств или же заменять их на более компактные.
Десктопный вариант:



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


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





Мобильная версия для ресурсов WordPress


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




Принцип работы строится на том, что создается дубликат ресурса с использованием AMP HTML. При этом отключаются скрипты, которые замедляют скорость загрузки сайта, после чего средствами Google страницы сайта обрабатываются для наиболее быстрой загрузки.
Установим и активируем плагин, затем перейдем к его настройке — для этого зайдем в подраздел «Settings» раздела «AMP». Загрузим логотип и сохраним изменения, нажав «Save changes»:



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











Мобильная версия проекта на субдомене
Мобильная версия имеет облегченный вес и упрощенный дизайн, однако на ней должны быть доступны все страницы, которые есть на основной версии. Также в мобильной версии должна быть возможность перейти на основную версию.
Согласно рекомендациям Google, чтобы поисковики не считали контент на мобильной версии дублированным, необходимо в код каждой страницы полной версии добавить:
<link rel="alternate" href="http://m.domen.ru/страница/" >
<link rel="canonical" href="http://domen.ru/страница/" >


Проверка отображения ресурса на разных девайсах



Заключение
- Для большинства сайтов оптимально подойдет адаптивный дизайн, достаточно простой в реализации, однако требующий базовых знаний верстки мобильных сайтов.
- Можно использовать конструкторы мобильных сайтов, но в большинстве вариантов они будут платными, либо обладать определенными ограничениями.
- Для сайтов на WordPress проще всего получить адаптивную версию с помощью готовых шаблонов, либо плагинов.
- На крупных порталах часто используют поддомен для отдельной мобильной версии проекта.
Эта статья — часть модуля «Список задач» в Serpstat

о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач» |
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Используйте лучшие SEO инструменты
Подбор ключевых слов
Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта
Возможности Serpstat
Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов
Кластеризация ключевых слов
Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов
SEO аудит страницы
Проанализируйте уровень оптимизации документа используя SЕО аудит страницы
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.