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

Если говорить понятным языком, то сайты, которые будут иметь мобильные, адаптивные версии, которые будут правильно отображаться на мобильных устройствах (проверить как отображается сайт и соответствует ли всем требованиям можно в статье “Проверить сайт на мобильных устройствах. 5 лучших сервисов“), будут повышаться в выдаче и лучше ранжироваться, будет существовать отдельный мобильный поиск и десктопный. Всех нюансов алгоритма никто не знает, поэтому на 100% говорить и обещать ничего не буду.

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

Так как грядут большие изменения, я решил написать статью о 3-х способах адаптации сайта под мобильные устройства. Данные способы хорошо поддерживаются как поисковой системой Google так и Яндекс.

К содержанию ↑

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

Давайте перечислим данные методы:

  1. Адаптивный дизайн. При данном способе, дизайн сайта и весь его функционал адаптируется под все виды разрешений экранов. Сайт подстраивается под экраны разных устройств (ПК, смартфоны, планшеты), при этом url – адреса остаются неизменными и сервер отправляет одинаковый html код всем устройствам, не зависимо от разрешения.
  2. Динамический показ или еще называют RESS (Responsive Design + Server Side). Реализация данного метода не очень проста, так как url – адрес для всех устройств одинаковый, а html код отдаваемый сервером разный. При данном способе если зайти на ресурс под разными User Agent’ами, то можно увидеть, что код таки разный для различных разрешений и устройств.
  3. Разные url или еще называют отдельная мобильная версия. При использовании данного способа, для различных устройств и разрешений выводиться разный html код и страницы имеют разные url адреса. Как правило сайт имеет основную версию сайта на домене loleknbolek.com и мобильную версию, рассчитанную на мобильные устройства на поддомене m.loleknbolek.com или mobile.loleknbolek.com.

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

К содержанию ↑

Преимущества и недостатки каждого из способов адаптации под мобильные устройства

Адаптивный дизайн

Как уже говорилось – это конфигурация сайта при которой сервер отправляет на все виды устройств одинаковый html код. Для адаптации сайта обычно используют CSS медиа запросы (Media Queries), которые прописываются для необходимых расширений экрана.

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

Преимущества адаптивного дизайна:

  • Используется один url для всех устройств. Один url хорош тем, что нам не нужно будет делать 301 редиректы с мобильной версии, так же наличие одного url хорошо скажется на самом продвижении вест вес будет хранится на одной странице.
  • Удобство и быстрота разработки. Если сайт не адаптирован под мобильные устройства – это не проблема. С помощь. медиа запросов можно быстро и удобно решить все данные проблемы. Так же в решении данной задачи хорошо могут помочь Фреймворки, которые уже содержат в своих библиотеках стили для адаптивного дизайна (к примеру Twitter Bootstrap).
  • Алгоритмы Google автоматически распознают данный способ, если все агенты пользователя Googlebot могут сканировать содержимое страницы (JavaScript, HTML, CSS).

Недостатки адаптивного дизайна:

  • Скорость загрузки страницы. Все тяжелые элементы ролики, графика, эффекты – должны быть заменены на более легкие. Так же необходимо сжимать html, css, JavaScript код и графические элементы, в противном случае, скорость загрузки страницы будет хромать и пользователь не сможет увидеть всей картины. Как проверить и увеличить скорость загрузки сайта, можно посмотреть в статье “Скорость загрузки сайта, проверить и увеличить ее“.
  • Одинаковый функционал на всех устройствах. Как правило гугл рекомендует при адаптивном дизайне оставлять все элементы и не скрывать их. Но задачи для пользователей на ПК и мобильных устройствах отличаются, поэтому пользователи мобильных устройств должны получать более упрощенную версию, но это противоречит рекомендациям Google.
  • Не возможно отключить адаптивный дизайн. Если мобильную версию сайта можно отключить или перейти на стандартную версию ПК, то адаптивный дизайн отключить не возможно и пользователь телефона будет видеть только версию для данного устройства.

Динамический показ или RESS (Responsive Design + Server Side).

Как уже было сказано выше, url адрес не меняется при данном способе, но сервер отдает разный код для устройств (ПК, планшеты, телефоны). Рекомендуется, что бы сайт посетил Googlebot для смартфонов и просканировал его.

Динамический показ - RESS
Динамический показ – RESS

Преимущества RESS (Responsive Design + Server Side):

  • Возможность использовать разную верстку для разных устройств на разных ОС (Android, iOS) или разных разрешений (ПК, смартфоны, планшеты).
  • Возможно сжатие или удаление кусков кода html, JavaScript, за счет того, что для каждого устройства может быть своя версия верстки.
  • Google в большом количестве проектов использует именно данный способ.

Недостатки RESS (Responsive Design + Server Side):

  • Не всегда определяется мобильное устройство. Бывают случаи, что сервер не может определить устройство с которого заходят на сайт и не правильно выдает ему код.
  • Сложность и затратность разработки. Так как для каждого устройства используется своя верстка, то это затратно и трудно.

Разные url или отдельная мобильная версия сайта.

Как уже говорил, в этой конфигурации содержание для ПК содержится на одном url адресе (loleknbolek.com), а для планшетов и мобильных устройств на другом, как правило поддомене (m.loleknbolek.com).

Мобильная версия для сайт - loleknbolek.com
Мобильная версия для сайт

Преимущества отдельной мобильной версии для сайта:

  • Удобно для пользователя. Как правило мобильная версия намного проще чем версия для ПК, потому пользователям легче с ней работать.
  • Скорость загрузки. Так как мобильная версия весит на много меньше, то соответственно и скорость загрузки будет быстрой, что пользователю не нужно будет ждать некоторое время.
  • Возможность перехода на десктопную версию. В большинстве случаев с мобильной версии можно перейти на ПК версию.
  • Легкая поддержка. Мобильная версия – это отдельный сайт, поэтому при изменении кода не затрагивается основной сайт.

Недостатки отдельной мобильной версии для сайта:

  • Разные url адреса. Мобильная и десктопная версия имеют разные url адреса, поэтому необходимо для ПК версии указывать альтернативный url, а для мобильной версии канонический адрес. И такую процедуру необходимо проводить со всеми страницами, а если их много, то соответственно и времени на данную работу будет затрачено не мало.
  • Ограниченность в функционале. Мобильная версия намного проще, чем десктопная, поэтому много фишек не используется.
  • Неудобство для пользователей. Необходимо запоминать два адреса как десктопной так и мобильной версии сайта.
  • Время на создание. Большие проекты тратят много времени на создание мобильной версии, особенно если текст отличается от того, что задан в версии для ПК.
К содержанию ↑

Какой способ выбрать?

Точного ответа дать не может никто, но если проанализировать большое количество сайтов, то можно понять, что такие сайты как:

  • Блоги, коммерческие сайты, сайты визитки, информационные сайты, не большие интернет – магазины (до 500 товары) – лучше всего использовать адаптивный способ.
  • Интернет – магазины, игровые порталы, кинотеатры, одним словом большие проекты – лучше всего использовать RESS или отдельную мобильную версию.

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

Поделиться