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

Мы все слышали статистику: 2014 — это год, когда все больше людей для доступа в Интернет используют смартфоны, чем компьютеры или ноутбуки. Дизайн для мобильных — это будущее. Вы не хотите, чтобы ваш сайт остался позади, но как именно запрограммировать сайт для этого мобильного Интернета? Есть три основных варианта, каждый из которых имеет свои преимущества и недостатки. В этой статье рассмотрим плюсы и минусы каждого из них, чтобы выбрать лучший путь для развития своего сайта.

Вариант 1: Адаптивный дизайн

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

Плюсы :

  1. Только одна версия каждой страницы. Страница адаптируется к типу устройства для отображения содержимого (определяется тип устройства, а затем выводится различное содержание).
  2. Данный подход значительно упрощает обслуживание сайта.
  3. Отзывчивый дизайн не полагается на обнаружение агента пользователя, как это делают другие два варианта. Обнаружение User-Agent (т.е. обнаружения какой браузер или устройство запрашивает веб-страницу) не плохо само по себе, но оно не совершенно, и если есть сбой в процессе, пользователи могут получить неправильную версию вашего сайта. Кроме того, это освобождает поисковых пауков от необходимости сканировать ваш сайт, под различными User-Agent — это значит, что ваш сайт будет лучше индексироваться.
  4. Адаптивный дизайн сайта, как правило, загружается в браузерах быстрее. Потому что все устройства получают одинаковое содержание, нет процесса обнаружения возможного перенаправления запроса из-за агента пользователя. Каждый знает, что скорость имеет значение.

Минусы:

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

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

Хороший пример адаптивного дизайна — это сайт Saitoseoteka.ru:

saitoseoteka-adaptivniy-sayt

Мобильная версия изменяет сайт довольно красиво.

Вариант 2: Динамическая сервировка

Суть динамической сервировки или переадресации состоит в том, что сначала определяется User-Agent посетителя (т.е. какое устройство он использует для просмотра вашего сайта), а затем выполняется перенаправление на уровне сервера на нужный УРЛ. Динамическая переадресация может быть сделана несколькими способами.

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

Второй тип, двунаправленное перенаправление — когда пользователи перенаправляются также и с мобильной версии на обычную. Части кода, отвечающие за такой редирект иногда называют управляющими тегами. При реализации подобного указывается тег rel=»alternate» на обычной версии, указывая на мобильный сайт; и на мобильном сайте, размещается тег rel=»alternate», указывающий на основную полную версию сайта.

Плюсы:

  1. Так как перенаправление осуществляется на уровне сервера, будет только один URL для каждой страницы.
  2. Динамическая переадресация также хорошо работает для обычных телефонов — мобильных, которые содержат фиксированный набор функций, но не так широки, как смартфоны. Например, мобильные телефоны, как правило, не могут загружать приложения, но, как правило, имеют определенные возможности просмотра веб-страниц. Большая разница в том, что мобильные телефоны не могут обрабатывать CSS, так что они не могут хорошо справиться с отзывчивым дизайном. Поэтому важно знать свою аудиторию и какой тип мобильных устройств они используют.
  3. Если вы хотите иметь отдельный набор ключевых слов специально для ваших мобильных пользователей, то эта опция позволит вам сделать это, так как у мобильных пользователей и пользователей обычной версии выводится разный код HTML.

Минусы:

  1. Такая реализации удваивает количество работы, потому что нужно делать отдельный сайт для мобильных устройств, с отдельным набором индексируемого HTML, требующий отдельного SEO.
  2. Необходимый перечень строк значений пользовательских агентов также требует постоянного обслуживания, так как новые строки должны быть добавлены, когда выпускают новое мобильное устройство.
  3. Наконец, имейте в виду, что вы должны будете использовать «HTTP-заголовок Vary«, если ваш сайт выдаёт контент динамически. Заголовок помогает получить содержание должным образом и помогает движку сайта правильно его кэшировать. Google показывает подробную информацию о том, как добавить этот заголовок (https://developers.google.com/webmasters/smartphone-sites/details#dynamicserving) .

Вариант 3: мобильный сайт

Этот вариант, как следует из названия, включает в себя создание отдельного домена специально для мобильных пользователей. Наиболее распространенными примерами являются m.domain.ru или mobile.domain.ru. Это популярный вариант для крупных предприятий розничной торговли. Такой метод включает в себя разработку контента, специально для посетителей с помощью мобильного (и нет перенаправления на уровне сервера).

Плюсы:

  1. Для больших сайтов с количество страниц в сотни тысяч или миллионы, внедрение адаптивного дизайна вызовет слишком много работы. В случае мобильного сайта — можно будет постепенно наращивать мобильную версию сайта (он как отдельный сайт) и работы будет гораздо меньше.
  2. Как и при динамическом перенаправлении, сайт для мобильных устройств выглядит лучше на мобильных телефонах, чем сайт с адаптивным дизайном. В зависимости от демографии вашего сайта, это не может быть критерием; но для некоторых предприятий, это имеет важное значение.

Минусы:

  1. Ваш мобильный сайт не выиграет от любого положительного роста профиля обратных ссылок на основной сайт (если вы не реализовали двунаправленную переадресацию). Так что если вы хотите чтобы ваши мобильные пользователи могли найти вас в органическом поиске, этот момент может быть особенного негативным.
  2. Ваш мобильный сайт будет требовать некоторую дополнительную работу по SEO. Вы должны будете представить отдельные карты XML Sitemap для Google и Яндекс. Кроме того, потребуется редактировать свои мета-теги. Мобильные мета-теги должны быть короче, чем для сайта обычной версии.

Вот пример, когда мобильный сайт сделано правильно. NYTimes.com имеет основной сайт для посетителей с настольных ПК:

obichniy-sayt-nytimes-com

И mobile.nytimes.com для мобильных посетителей:

mobilnaya-versiya-sayta-nytimes-com

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

Выводы

Чтобы сделать правильный выбор для вашего сайта, не забудьте спросить себя, сколько из ваших посетителей, используют мобильные устройства для доступа к сайту. Проверьте аналитику. Если общий процент мобильного трафика находится около уровня 5%, то вы, вероятно, можете не спешить внедрять дизайн для мобильных.

Если прогнозы оправдаются, то использование мобильных продолжит увеличиваться. Тогда те, чьи сайты не будут корректно отображаться на мобильных устройствах, потеряют значительную часть поискового трафика и не только. Делайте сайты «для людей» и будем вам счастье!

3 комментария

  1. Спасибо) а почему именно там рекомендуете? какие плюсы ?

  2. Заказать здесь https://greenmedia.org/create.html

  3. Здравствуйте! Подскажите где заказать мобильную версию?

Оставить комментарий

Your email address will not be published. Required fields are marked *