Сравнение способов создания мобильной версии сайта

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

Обсудим же какая технология создания мобильного сайта лучше.

Google выступает за адаптивный web дизайн, в то время как Якоб Нильсен — известный консультант юзабилити,  поддерживает создание специализированных мобильных версий сайтов (но в последствии это мнение было раскритиковано некоторыми дизайнерами).

Третий вариант, который также набирает популярность, это веб-сервер создающий соответствующую версию  HTML и CSS из того же URL в зависимости от устройства с которого запрашиваются страницы сайта. Этот способ был назван «адаптивный дизайн + компонент на стороне сервера«.

В рамках этой статьи мы рассмотрим каждый из данных методов. Каждый конкретный способ будет рассмотрен в своем разделе. Для тестирования сайтов используется мобильное устройство iPhone 4 using iOS 5.0.

Отзывчивый web дизайн

Отзывчивый web дизайн обычно использует CSS3 Media Queries для адаптации шаблона страницы к размерам области просматриваемой пользователем. Можно использовать один и тот же HTML для отображения на различных устройствах, будь то настольный компьютер, планшет, мобильное устройство, ТВ и д.р.

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

  • Идентичность содержимого: сайт содержит один и тот же контент и HTML разметку не зависимо от используемого устройства, обеспечивая пользователю те же возможности. Этот способ приобретает все большую популярность т.к. для все большего количества пользователей смартфон становится основным устройством доступа в интернет.
  • Единый URL для страниц: благодаря этому проще делиться ссылками на контент. Не нужно перенаправлений на версию сайта оптимизированную для устройств.

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

  • Контент не полностью оптимизирован для мобильных устройств: материалы сайта будут не полностью оптимизированы для мобильных устройств, т.к. мобильное устройство отображает туже информацию, что и его коллега-десктоп. Сравните это с отдельными мобильными сайтами сделанными специально для мобильных устройств.
  • Меньшая производительность: средняя web страница по состоянию на январь 2013 года имеет размер 1.3 MB. Может показаться, что использование адаптивного дизайна предотвратит не нужные загрузки, но на практике большинство сайтов с адаптивным web дизайном имеют такой же или больший размер . 86% сайтов проверенных исследователем производительности мобильных устройств Гай Поджарный имеют сопоставимый размер или даже больший, как сообщается в его докладе.
  • Навигация по сайту может усложниться: мобильным пользователям обычно требуется выполнять иные задачи чем пользователям ПК. Так же для них может оказаться привычнее использовать конкретные модели пользовательского интерфейса. Пока вы не настроите структуру навигации подходящую для каждого устройства могут наблюдаться проблемы.

Примеры адаптивного дизайна

Starbucks

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

Сайт Starbucks — превосходный пример показывающий все плюсы и минусы адаптивного дизайна. Весть его контент доступен с мобильного устройства, каждая страница имеет единственную ссылку и отсутствуют редиректы.

К сожалению сайт тяжеловат при загрузке (около 15 секунд на смартфоне с 3G) и требуется много скроллить для того чтобы просмотреть всю страницу.

Показатели производительности:

  • Среднее время загрузки: 14.99 секунд
  • Средний размер страницы: 1,193.88 Кб
  • Количество запросов HTTP: 142

World Wildlife Fund

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

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

Тем не менее, время загрузки немного великовато для 3G смартфона (около 7 секунд). Кроме того некоторые страницы не оптимизированы для мобильных устройств и затруднительными для отображения на устройствах.

Показатели производительности:

  • Среднее время загрузки: 6.91 секунд
  • Средний размер страницы: 885.97 Кб
  • Количество запросов HTTP: 72

The Boston Globe

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

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

Показатели производительности:

  • Среднее время загрузки: 5.55 секунд
  • Средний размер страницы: 605.27 Кб
  • Количество запросов HTTP: 87

 

Ресурсы по теме

 

Мобильный сайт

Некоторые сайты имеют отдельную версию оптимизированную для мобильных устройств.

Наиболее распространенная реализация — переадресация полноразмерного сайта на сабдомен (например  mobile.examplesite.com для examplesite.com.)

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

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

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

  • Несколько URL для каждой страницы: делится страницей в социальных сетях проблемно, т.к. мобильный пользователь делится ссылкой на мобильную версию, а пользователи ПК кликая по ссылке получают туже мобильную версию сайта. Для предотвращения дублирования контента и проблем SEO, необходимо использовать мета теги rel="alternative" rel="canonical". Так же, когда мобильный пользователь ищет что-либо в Google и кликает по ссылке для десктоп версии сайта в результатах поиска, он может увидеть полноразмерную версию сайта либо будет перенаправлен на мобильную версию сайта. Если мобильная версия этой страницы не существует, то может появиться сообщение об ошибке.
  • Различный контент и функционал: Цель создания выделенного мобильного сайта, является адаптация сайта специально для мобильных пользователей. Это может означать сокращенный контент и ограниченный функционал, что приводит к различным результатам.
  • Путаница в контенте: вы имеете два разных набора контента, которые могут сделать всю стратегию контента ночным кошмаром.
  • Требуется перенаправление: мобильные пользователи должны перенаправлятся к мобильной версии сайта. Перенаправление увеличивает время загрузки страницы. Это так же может сказаться на SEO продвижении вашего сайта.

Примеры мобильных сайтов

Walmart (mobile.walmart.com)

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

Мобильный сайт Walmart’s невероятно быстр — загружается за 1.35 секунды.

Показатели производительности:

  • Среднее время загрузки: 1.35 секунд
  • Средний размер страницы: 272.29 Кб
  • Количество запросов HTTP: 45

Amazon (www.amazon.com/gp/aw/h.html)

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

Мобильные сайты Walmart, Amazon’s быстрее чем страницы с адаптивным дизайном, которые мы тестировали.

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

Показатели производительности:

  • Среднее время загрузки: 2.25 секунд
  • Средний размер страницы: 103.66 Кб
  • Количество запросов HTTP: 16

BBC (www.bbc.co.uk/mobile)

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

 

Мобильный сайт BBC быстрее сайтов с адаптивным дизайном (3.40 сек), но почти половина этого времени уходит на перенаправление пользователя на мобильную версию (1.65 сек).

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

Показатели производительности:

  • Среднее время загрузки: 3.40 секунд
  • Средний размер страницы: 56.04 Кб
  • Количество запросов HTTP: 22

Информация по мобильным сайтам

 

RESS: различные HTML и CSS для одного URL

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

Основной целью данной реализации является повышение эффективности сайта.

Этот метод лучше всего работает в сочетании с адаптивным дизайном.

Эта реализация работает как отзывчивый web дизайн + сервер компонентов (RESS).

При использовании данного метода важно включать Vary HTTP заголовок (см Google инструкция по созданию мобильной версии сайта) т.к. роботы просматривают как мобильную версию сайта, так с сайт созданный для ПК.

Преимущества сервера компонентов RESS

  • Упрощенная навигация: навигационная структура созданного сайта может быть настроена для различных задач мобильных пользовтелей и пользователей ПК.
  • Менее раздутая страница: вместо того чтобы полагаться  на display:none; или visibility:hidden; для сокрытия элементов для мобильных устройств, они могут быть удалены из HTML или CSS. Это позволит уменьшить объем загружаемых данных и ускорить время загрузки.
  • Выше скорость загрузки:  ненужный JavaScript может быть удален из HTML, который освобождает CPU, память и кэш на мобильном устройстве.

Недостатки RESS

  • Дополнительная нагрузка на сервер: динамическое формирование HTML увеличивает нагрузку на сервер.
  • Требуется идентификатор устройства: мобильные пользователи должны быть определены системой как мобильные. Достоверность идентификации мобильного устройства не всегда достоверна.

Примеры RESS

CNN

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

Мобильная версия сайта использующая HTML и CSS оптимизированные для мобильных устройств, that’s optimized for mobile performance, в то время как версия для ПК использует значительно больше HTTP запросов и  JavaScript.

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

Показатели производительности:

  • Среднее время загрузки: 3.46 секунд
  • Средний размер страницы: 163.12 Кб
  • Количество запросов HTTP: 28

eHow

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

Как и CNN, HTML и CSS в мобильной версии сайта eHow настроена на производительность. Верхний уровень навигации единый для обоих сайтов, с акцентом на поиск и 7 их каналов.

Показатели производительности:

  • Среднее время загрузки: 6.15 секунд
  • Средний размер страницы: 188.95 Кб
  • Количество запросов HTTP: 31

SlideShare

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

Мобильная и настольная версии сайта SlideShare’s совершенно разные. Мобильная версия использует адаптивный web дизайн, в то время как версия для ПК — нет. Каждый сайт использует разные HTML и CSS. Мобильная версия в значительно меньшей степени использует JavaScript. Так же каждый сайт использует различную структуру навигации.

Показатели производительности:

  • Среднее время загрузки: 6.15 секунд
  • Средний размер страницы: 188.95 Кб
  • Количество запросов HTTP: 31

WordPress.com

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

Мобильная версия и версия для ПК сайта WordPress.com’s почти идентичны с некоторыми отличиями:

  • Мобильная версия имеет http-equiv атрибут, в то время как версия ПК — нет (<meta http-equiv="x-ua-compatible" content="IE=10">)
  • Используются различные шаблоны
  • В мобильной версии присутствует атрибут novalidate в теге <form>, в то время как версия ПК помещает его в тег <input>
  • Мобильная вресия имеет ссылку на новости в подвале, а ПК версия вовсе не имеет такой ссылки на странице
  • Некоторые сценарии JavaScript удалены из мобильной версии

Показатели производительности:

  • Среднее время загрузки: 2.77 секунд
  • Средний размер страницы: 188.40 Кб
  • Количество запросов HTTP: 19

Информация по RESS

  • Для пользователей Drupal: PHP class мобильного детектора может быть использован для идентификации устройства, при этом Drupal Theme Switch переключит шаблон на оптимизированный для мобильного устройства. Для добавления Vary HTTP в шапку сайта HTTP используйте drupal_add_http.
  • Для пользователей WordPress: самое простое решение WPTouch, но это расширение не добавляет Vary HTTP в шапку сайта. Аналогично можно использовать Any Mobile Theme Switcher для переключения на мобильную версию.

Резюме

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

Согласно тестам мобильная версия сайта имеет хорошее время загрузки, но часто реализована с недостатками. Использовать данный метод необходимо только в случае если производительность является главным приоритетом.

Оптимальным вариантом является комбинация адаптивного дизайна и различных HTML для разных URL (RESS). Это обеспечивает все преимущества адаптивного дизайна и сокращает время загрузки.

Материалы по теме