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

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

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

Смотрите также: «21 шаг к внутренней оптимизации сайта«.

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

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

В новой версии Яндекс.Вебмастера появился инструмент для экспресс-проверки отдельных страниц на «мобилопригодность». В это понятие Яндекс включает наличие тега viewport, текст размером не менее 12pt, полностью помещающийся на экране без горизонтальной прокрутки контент, а также отсутствие содержимого, не поддерживающегося мобильными устройствами. На случай, если неадаптированных страниц окажется слишком много, предусмотрено специальное уведомления в разделе технического аудита.

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

  1. Mobile Friendly быстро проверит, адаптирован ли ресурс под смартфоны и планшеты;
  2. Основная цель PageSpeed Insights — выявление проблем со скоростью загрузки страниц. Однако во вкладке с результатами для мобильных есть и графа с баллами, набранными в плане удобства просмотра;
  3. В Search console имеется целый раздел для мониторинга проблем с мобильностью («Поисковый трафик—>Удобство просмотра на мобильных устройствах»).

Еще больше полезных инструментов от популярных поисковых систем:

Что сделать для оптимизации сайта под мобильные устройства?

«Резиновая» верстка

Если задать размер какого-либо элемента в стандартных единицах изменения (тех же пикселях), то он будет иметь одинаковую ширину-высоту, независимо от устройства. На практике это означает уехавшие за границу экрана изображения, горизонтальную прокрутку и плохо читаемый текст.

Гибкая верстка подразумевает использование значений, указанных в процентах. То есть width:50% всегда будет занимать только половину ширины экрана, на каком бы устройстве он ни показывался. Особенно важны значения в процентах именно для параметра width, ведь он является частой причиной не поместившихся в область просмотра изображений или блоков и появления горизонтальной прокрутки.

Viewport

Мета-тег viewport служит для информирования браузера о размерах и масштабе страницы. Он указывается в контейнере <head> и является обязательным шагом для «мобилизации» сайта. Без этого тега мобильные браузеры отобразят страницу такой, какой он была бы на компьютере, но с учетом крошечного экрана вы получите вырвиглазно маленькие неудобные элементы и текст.

@media

Директиву @media можно использовать для настройки оформления для разных устройств и разрешений экрана.

Например, чтобы определенные стили отображались только на экранах с разрешением не более 960px, нужно добавить в контейнер <head> такие строчки:

А чтобы оформление срабатывало на устройствах с альбомной (горизонтальной) ориентацией экрана, нужно добавить такую конструкцию:

Таким же образом можно задавать различные типы устройства, их технические характеристики, минимальное и максимальное разрешение и пр. Примеров можно привести массу, однажды я соберусь с силами и сведу их в одну большую статью. Подпишитесь на новости, чтобы не пропустить. А пока взгляните на материал о возможностях использования тега div. Там самый последний пример как раз описывает подробности применения @media для настройки уникального оформления для разных типов устройств.

Мобильная версия v.s. адаптивный шаблон

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

Один из простейших способов приспособить ресурс под просмотр с гаджетов — использовать специальное мобильное оформление. На WordPress с данной задачей прекрасно справятся плагины: Jetpack, WP Touch и другие.

Плюсы:

  • простота использования: активируется одним нажатием мыши, плюс пара основных настроек (и то не всегда);
  • возможность в любое время включать/отключать.

Минусы:

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

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

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

Плюс: красивое оформление без лишней нагрузки на сайт.

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

© 2016, blogstu.ru. Все права защищены. Копирование материалов сайта запрещено.

Поделиться:
Сохранить:

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

  1. Кристина:

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

    [Ответить]

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

четырнадцать + 15 =