Сравнение Методов Создания Мобильных Версий Сайтов

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

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

Под катом много текста и картинок.

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

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

Третий вариант, который уже становится популярным, — это когда веб-сервер генерирует соответствующий HTML и CSS в зависимости от устройства на основе параметров, полученных из URL-адреса.

В этой статье мы рассмотрим каждый из этих методов и приведем реальные примеры.

Для тестирования использовался iPhone 4 с iOS 5.0.

Адаптивный веб-дизайн

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

Преимущества

• С безопасность содержимого : ваш сайт сохраняет содержимое и HTML-разметку независимо от используемого вами устройства.

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

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

Недостатки

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

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

• Медленная работа : По данным января 2013 года, средняя веб-страница сегодня весит около 1,3 МБ.

  Теоретически такого размера можно избежать, используя адаптивный дизайн, но на практике 86% «резиновых сайтов» весят именно столько, а то и больше.

• Может быть сложно ориентироваться на сайте : Задачи мобильных пользователей обычно отличаются от обычных.

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

Примеры:

Старбакс

Весь их контент доступен на мобильных устройствах, на каждой странице используется один и тот же URL-адрес, нет перенаправлений.

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

Результаты : Среднее время загрузки: 14,99 секунды.

Средний размер страницы: 1193,88 КБ.

Количество HTTP-запросов: 142

Всемирный фонд дикой природы

Навигация оптимизирована для мобильных задач.

Однако время загрузки на 3G-смартфоне оставляет желать лучшего (около 7 секунд).

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

Результаты : Среднее время загрузки: 6,91 секунды.

Средний размер страницы: 885,97 КБ.

Количество HTTP-запросов: 72

Бостон Глобус

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

Полученные результаты: Среднее время загрузки: 5,55 секунды.

Средний размер страницы: 605,27 КБ.

Количество HTTP-запросов: 87

Отдельный мобильный сайт

Самая распространенная история связана с перенаправлением мобильных пользователей на специальный поддомен (например, mobile.examplesite.com вместо examplesite.com).

Преимущества:

• Легче вносить изменения в сайты для мобильных и настольных компьютеров.

  : Изменения могут коснуться только мобильной версии или только обычной версии.

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

• Легче ориентироваться : Структура навигации и контента предназначена для задач, выполняемых мобильными пользователями.

Недостатки:

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

  Чтобы избежать дублирования контента, оптимизаторы должны использовать метатеги rel="alternative" и rel="canonical".

  Кроме того, когда пользователь мобильного поиска Google нажимает на ссылку в результатах, он будет перенаправлен на настольную версию или перенаправлен на мобильную версию.

  Но если мобильной версии этой страницы не существует, он получит сообщение об ошибке.

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

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

• Требуется перенаправление : Мобильные пользователи должны быть перенаправлены на оптимизированную версию и наоборот. Перенаправления добавляются ко времени загрузки страницы.

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

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

Уолмарт

Полученные результаты: Среднее время загрузки: 1,35 секунды.

Средний размер страницы: 272,29 КБ.

Количество HTTP-запросов: 45

Амазонка

Однако странно, что не все страницы сайта имеют мобильные версии.

Например, если вы выполняете поиск в Google с помощью смартфона, многие результаты будут для «большой» версии сайта без перенаправления на мобильную версию.

Кроме того, если вы заходите на мобильную страницу с настольного компьютера, вы не будете перенаправлены на полную версию.

Полученные результаты: Среднее время загрузки: 2,25 секунды.

Средний размер страницы: 103,66 КБ.

Количество HTTP-запросов: 16

Би-би-си

В отличие от сайта Amazon, если вы попытаетесь получить доступ к мобильной странице с настольного компьютера, вы будете автоматически перенаправлены обратно на «большую» версию сайта.

Полученные результаты: Среднее время загрузки: 3,40 секунды.

Средний размер страницы: 56,04 КБ.

Количество HTTP-запросов: 22

RESS: вывод разных HTML и CSS по одному URL-адресу

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

Это сделано для повышения эффективности сайта и лучше всего работает в сочетании с адаптивной версткой.

Этот метод получил название адаптивный веб-дизайн + серверное программное обеспечение (RESS).

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

Преимущества:

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

• Меньше элементов на странице : вместо того, чтобы скрывать элементы страницы для мобильных устройств, их можно удалить из HTML или CSS. Это уменьшит объем загружаемых данных и ускорит время загрузки.

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

Недостатки:

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

• Требуются определения устройств : Мобильных пользователей надо как-то идентифицировать, а технология обнаружения устройств пока недостаточно надежна.

Примеры РЭСС

Си-Эн-Эн

Полученные результаты: Среднее время загрузки: 3,46 секунды.

Средний размер страницы: 163,12 КБ.

Количество HTTP-запросов: 28

eHow

Полученные результаты: Среднее время загрузки: 6,15 секунды.

Средний размер страницы: 188,95 КБ.

Количество HTTP-запросов: 31

SlideShare

В мобильной версии используется адаптивный веб-дизайн, а в настольной — нет. Каждый сайт использует разные HTML и CSS. Например, мобильная версия содержит значительно меньше JavaScript. Каждый сайт также использует разные структуры навигации.

Полученные результаты: Среднее время загрузки: 6,15 секунды.

Средний размер страницы: 188,95 КБ.

Количество HTTP-запросов: 31

Краткое содержание

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

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

На мой взгляд, лучше всего использовать комбинацию адаптивного веб-дизайна и RESS. В этом случае мы получаем все преимущества «гибкой верстки» и решаем две большие проблемы: использование большого количества файлов и медленную загрузку.

А вот недостатки адаптивных сайтов довольно подробно описаны в статье.

Я бы еще добавил сложность подготовки контента после запуска сайта.

Представьте: секретарю поручено разместить в разделе «О компании» большую фотографию директора и таблицу с важными вехами истории развития.

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

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

Например, это корпоративные визитки или другие сайты без сложного функционала.

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

Таким образом, сайт под управлением NetCat может работать в одном из трёх режимов: обычный сайт, мобильная версия обычного сайта и адаптивный сайт (причем все модули системы также поддерживают эти режимы).

Что касается RESS, то это интересный подход, но он не решает всех проблем, связанных с адаптивной версткой.

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

Я, например, часто захожу в «Афишу» с телефона.

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

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

Подведем итог: я считаю, что для большинства задач подход «обычный сайт плюс мобильная версия» — путь наименьшего сопротивления, поскольку современные CMS позволяют резко минимизировать затраты на создание второго сайта.

Но в ближайшем будущем ни один из конкурирующих подходов не одержит явную победу».

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

В опросе могут участвовать только зарегистрированные пользователи.

Войти , Пожалуйста.

Какому методу вы следуете? 61,39% Адаптивный дизайн 698 31,05% Отдельный мобильный сайт 353 21,37% RESS (адаптивный дизайн + программное обеспечение на сервере) 243 Проголосовали 1137 пользователей.

282 пользователя воздержались.

Теги: #адаптивный дизайн #мобильные сайты #ress #разработка веб-сайтов #разработка мобильных приложений

• Генеральный Директор Nintendo Сатору Ивата Умер От Рака В Возрасте 55 Лет

  19 Oct, 24

• Управление Мобильными Устройствами С Помощью Microsoft Intune

  19 Oct, 24

• На Этой Неделе В Jquery, Том 4

  19 Oct, 24

• Все О Проекте Спутниковый Интернет. Часть 34. Spacex Планирует Купить Swarm Для Выхода На Рынок Iot

  19 Oct, 24

• Волхов: По Итогам Года

  19 Oct, 24

• Intel Iot Roadshow, Второй «Блин» Эдисона

  19 Oct, 24

• Wolfenstein 3D Теперь В Html5

  19 Oct, 24

• Черный Лорд И Судьба Пользователя

  19 Oct, 24

• О Viacom И Google

  19 Oct, 24

• Кардеры-Каннибалы: Group-Ib Выявила Крупнейшие Сети Фейковых Магазинов. Часть 1

  19 Oct, 24