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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Сообщить об ошибке

Отменить
1253
How-to Читать 10 минут 31 января 2019

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

Адаптация сайта под смартфоны и планшеты
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ИСПРАВЛЕНИЕ
Инструкцию одобрил
Tech Head of SEO в TRINET.Group
Адаптация сайта под смартфоны и планшеты необходима, поскольку больше 48% пользователей (по данным Яндекс.Радара) пользуются интернетом именно с мобильных устройств. Для поисковых систем адаптивность сайта — один из важных факторов ранжирования.

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

Оптимизация сайта для мобильных устройств позволяет корректно отображать ресурс на различных разрешениях планшетов или смартфонов. Сайт необходимо адаптировать по следующим причинам:
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:
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 предусматривают бесплатное использование для создания одного сайта:
Тарифные планы Wirenode
Пройдем регистрацию в сервисе:
Регистрация в Wirenode
После заполнения полей, выбора типа аккаунта и введения капчи нажмем «Create my account».

Инструмент предлагает создать новый моб. сайт при наличии на нем RSS-ленты. После ввода URL-адреса ресурса нажмем «Mobilize Blog»:
Создание мобильной версии сайта в Wirenode
После этого укажем домен и перейдем к редактированию:
Редактирование мобильной версии блога в Wirenode
В сервисе доступен предварительный просмотр мобильного сайта:
Предварительный просмотр мобильной версии
Можно выбрать одну из трех моделей телефонов:
Внешний вид сайта на разных устройствах
После редактирования в десктопный вариант нужно добавить виджет, информирующий о том, что доступна мобильная версия, которая находится на другом домене:
Виджет о наличии мобильной версии сайта Wirenode

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

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

Чтобы выбрать тему с адаптивным дизайном для собственного проекта, перейдем в подраздел «Темы» раздела «Внешний вид» и нажмем «Добавить новую»:
Добавление темы в WordPress
В фильтрах характеристик выберем «Адаптивный дизайн» и нажмем «Применить фильтр»:
Темы с адаптивным дизайном для WordPress
Получим список тем с адаптивным дизайном, среди которых можно выбрать наиболее подходящую для собственного проекта:
Поиск тем в админ-панели WordPress
Также для Wordpress можно использовать следующие плагины:
Плагин AMP для WP — Ускоренные мобильные страницы
Google Accelerated Mobile Pages (AMP) — библиотека с открытым программным кодом, помогающая создавать быстро загружающиеся упрощенные версии страниц сайта, которые хорошо выглядят на смартфонах.

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

Установим и активируем плагин, затем перейдем к его настройке — для этого зайдем в подраздел «Settings» раздела «AMP». Загрузим логотип и сохраним изменения, нажав «Save changes»:
Создание AMP-версии в плагине WordPress
Затем перейдем в раздел «Design» для работы над внешним видом мобильной версии:
Дизайн мобильной версии в плагине AMP для WP
Выберем тему оформления:
Выбор темы в плагине AMP для WP
После выбора темы можно изменить цвета и шрифты в разделе «Global», настроить хэдер и футер, например, добавить кнопку звонка во вкладке «Header». В разделе «Social» можно добавить кнопки социальных сетей.

После завершения настройки активируем в разделе «Advance Settings» перенаправление на AMP-версию сайта для мобильных устройств:
Переадресация на мобильную версию в плагине AMP для WP
После этого ресурс на портативных устройствах будет выглядеть таким образом:
Пример AMP-страницы для WordPress
Также в WordPress можно использовать плагин WPtouch. Перейдем в раздел «Плагины», выберем «Добавить новый», найдем WPtouch с помощью поиска и нажмем «Установить»:
Плагин WPtouch для WordPress
После этого активируем плагин и перейдем к его настройке:
Активация плагина WPtouch
В плагине можно настроить тему:
Настройка темы в плагине WPtouch
Здесь можно отрегулировать цветовую схему сайта, добавить при необходимости иконку. Доступен предварительный просмотр внесенных изменений в эмуляторе мобильного телефона:
Превью мобильной версии сайта в плагине WPtouch
После внесения изменений на реальном смартфоне сайт выглядит так:
Мобильная версия сайта в плагине WPtouch для WordPress
В подвале отображаются кнопки переключения мобильной и компьютерной версий:
Переключение мобильной и десктопной версии сайта
Помимо указанных, можно использовать следующие плагины:

  • PageBuilder — конструктор для создания адаптивного дизайна:
Плагин PageBuilder для WordPress
  • Mobile Smart — определяет, с какого устройства зашел посетитель, и показывает десктопную либо мобильную версию ресурса:
Плагин Mobile Smart для WordPress
  • WP Mobile Edition — позволяет создавать мобильную версию на субдомене:
Плагин WP Mobile Edition для WordPress

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

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

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

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

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

Чтобы проверить, как выглядит сайт при различных разрешениях экрана, воспользуемся онлайн-инструментами, к примеру, Screenfly:
Проверка отображения сайта в Screenfly
Инструмент позволяет выбрать нужный тип устройства — компьютер, планшет, смартфон или телевизор, а также указать разрешение его экрана:
Выбор типа устройства для просмотра сайта в Screenfly
Сайт, рассматриваемый в данном примере, не адаптирован под мобильные устройства:
Некорректное отображение сайта на смартфоне

Заключение

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

Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Мнение авторов гостевого поста может не совпадать с позицией редакции и специалистов компании Serpstat.

Оцените статью по 5-бальной шкале

4 из 5 на основе 1 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

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

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

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

Я хочу больше лимитов