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

Приветствую всех. Не за горами апдейт 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 (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 или отдельную мобильную версию.

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

Всем спасибо!

Оцените статью:

Очень плохоПлохоНормальноХорошоОтлично (17 Рейтинг: 4,76 из 5)
Loading...Loading...

Если Вам понравилась статья, поделитесь с друзьями в соц. сетях:

Вам также может понравиться...

Не хотите пропустить новую статью? Тогда подписывайтесь...

Комментариев: 5

  1. Доброжелатель:

    Да, ты помог.

  2. Денис:

    Мне тут недавно нужна была адаптация сайта под мобильные устройства, ибо лендинг заказал не у тех ребят, сто раз пожалел об этом, но времени не было, срочно нужно было запускать проект. Ну и наделали они мне там грязи разной)) Шапито с акробатами) Как то с телефона захожу, а там всё криво — косо, даже стыдно стало, чего люди то думали когда заходили по рекламе) В общем, быстренько тут вот заказал адаптацию сайта — mobile-version.ru. Сервис этот мне мой друг посоветовал, сказал что ребята шарят. Ну в общем то да, за 2 дня мне всё поправили. Скажу однозначно, контора вполне приличная.

  3. Bolek:

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

  4. Виктория:

    Статья хорошая и полезная, раскрывает действительно все удобные способы адаптации сайтов под мобильные версии. Немного о последнем. Для меня он наиболее оптимальный, этот способ и один из самых простых. Здесь подробно расписаны и плюсы, и минусы. Вопрос стоит в программе для адаптации. Я лично для своего сайта интернет-магазина использую
    mobile-version.ru. Устраивает эта программа из-за низкой стоимости и быстрой скорости выполнения. Да и один из важных критериев, что бы после адаптации сайт проходил тесты гугл и яндекс. тут с этим нет проблем, проходит всегда без проблем.

  5. Bolek:

    Спасибо, попробуем

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

Уважаемые пользователи!


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


С уважением, Администрация сайта.


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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Связаться с нами

Если у Вас возникли какие либо вопросы, предложения и пожелания для развития нашего ресурса, связаться с нами Вы можете по e-mail: loleknbolek.com@gmail.com, или заполните форму что находиться ниже.

Пишите мы будем рады Вам ответить!