- PVSM.RU - https://www.pvsm.ru -
Не так уж и давно наличие адаптивного или мобильного сайта стало не трендом а реальной необходимостью — трафик с устройств продолжает расти, а пользователи уже начинают отказываться от больших компьютеров в пользу смартфонов и планшетов. Для создания таких сайтов сейчас, в основном, используются три метода: адаптивная верстка, разработка отдельной мобильной версии и RESS. Johan Johansson опубликовал [1] сравнение этих методов, которое мы перевели и представляем вашему вниманию. Под катом много текста и картинок.
Кажется, споры насчет технологий создания мобильных сайтов в ближайшее время не утихнут. В этих вопросах Google, например, придерживается разработки адаптивного веб-дизайна [2], в то время как Якоб Нильсен, известный консультант по юзабилити, выступает за создание отдельных мобильных сайтов [3].
Третий вариант, который уже становится популярным — когда веб-сервер генерирует соответствующие HTML и CSS в зависимости от устройства по параметрам, получаемым из URL.
В этой статье мы рассмотрим каждый из этих методов и приведем реальные примеры.
Для тестирования был использован iPhone 4 с IOS 5,0.
Адаптивный веб-дизайн обычно использует CSS3 Media Queries для настройки макета веб-страницы, основываясь на размере области просмотра. Можно использовать один и тот же HTML для отображения различных макетов веб-страницы для настольных компьютеров, планшетов, мобильных устройств, телевизоров и т.д.
Сайт Starbucks является отличным примером, демонстрирующим плюсы и минусы адаптивного веб-дизайна. Весь их контент доступен на мобильных устройствах, каждая страница использует один и тот же URL, нет никакого перенаправления.
К сожалению, их сайт является тяжелым для загрузки (около 15 секунд на 3G-смартфоне), и необходимо много прокручивать, чтобы прочесть всю страницу.
Результаты:
Среднее время загрузки: 14,99 секунд
Средний размер страницы: 1,193.88 KB
Количество запросов HTTP: 142
Сайт Всемирного фонда дикой природы является хорошим примером реализации адаптивного веб-дизайна. Навигация оптимизирована для мобильных задач.
Тем не менее, время загрузки на 3G-смартфоне оставляет желать лучшего (это занимает около 7 секунд). Кроме того, некоторые внутренние страницы (например, их форма подтверждения ) не были оптимизированы для мобильных устройств и остались неудобными для использования на мобильном устройстве.
Результаты:
Среднее время загрузки: 6,91 секунд
Средний размер страницы: 885,97 KB
Количество запросов HTTP: 72
Сайт Boston Globe — возможно, один из лучших масштабных проектов с адаптивным дизайном. Сайт использует “резиновые” изображения и оптимизирует JavaScript, чтобы он не отразился на производительности на мобильных устройствах.
Результаты:
Среднее время загрузки: 5,55 секунд
Средний размер страницы: 605,27 KB
Количество запросов HTTP: 87
Чтобы сделать сайт удобным для мобильных пользователей, некоторые веб-мастера создают отдельные сайты. Наиболее распространена история с перенаправлением мобильных пользователей на специальный поддомен (например, mobile.examplesite.com для examplesite.com ).
(mobile.walmart.com)
Отдельный мобильный сайт Walmart показывает невероятно быстрое время загрузки — всего 1.35 секунды
Результаты:
Среднее время загрузки: 1,35 секунд
Средний размер страницы: 272,29 KB
Количество запросов HTTP: 45
(www.amazon.com / GP / AW / h.html)
Как и у Walmart, страницы мобильного сайта Amazon загружаются быстрее, чем при адаптивном дзайне ( 2,25 секунды).
Странно, однако, что не все страницы на сайте имеют мобильные версии. Например, если вы ищете в Google с помощью смартфона, многие результаты будут относиться к “большой” версии сайта без редиректа на мобильную версию. Кроме того, если вы обратитесь к мобильной странице с десктопного компьютера, вас не перенаправят на полную версию.
Результаты:
Среднее время загрузки: 2.25 секунд
Средний размер страницы: 103,66 KB
Количество запросов HTTP: 16
(www.bbc.co.uk / мобильный)
Страницы сайта BBC для мобильных устройств грузятся быстрее по сравнению с адаптивными (3,40 секунд), но почти половина этого времени занимает перенаправление пользователей (1,65 секунды).
В отличие от сайта Amazon, если вы пытаетесь получить доступ к странице для мобильных устройств с десктопного компьютера, вы будете автоматически перенаправлены обратно на “большую” версию сайта.
Результаты:
Среднее время загрузки: 3,40 секунд
Средний размер страницы: 56,04 KB
Количество запросов HTTP: 22
Этот метод создания мобильных сайтов использует программирования на стороне сервера, чтобы создать CSS и HTML для различных устройств. То есть мобильные пользователи получают один набор кода, в то время как пользователям десктопных компьютеров выводится другой набор кода.
Это сделано с целью повысить эффективность сайта и лучше всего работает в связке с адаптивной версткой.
Такой метод был назван адаптивный веб-дизайн + ПО на стороне сервера (RESS).
При использовании этого метода, важно, чтобы был включен тип заголовков Vary HTTP (подробно об этом написано в справке Google, руководство по созданию оптимизированных веб-сайтов ), так что поисковые роботы будут посещать как настольные и мобильные версии.
В мобильной версии используется сочетание HTML и CSS, оптимизированное для мобильных ПК, в то время как настольная версия использует значительно больше HTTP запросов и JavaScript.
Навигация также специально продуманна конкретно для мобильных задач.
Результаты:
Среднее время загрузки: 3,46 секунд
Средний размер страницы: 163,12 KB
Количество запросов HTTP: 28
Как и в CNN, для мобильной версии eHow настроены HTML и CSS. Навигация верхнего уровня одинаковая для обоих сайтов, делается акцент на поиск и семь основных рубрик.
Результаты:
Среднее время загрузки: 6,15 секунд
Средний размер страницы: 188,95 KB
Количество запросов HTTP: 31
Мобильная и настольная версии SlideShare совершенно разные. Мобильная версия использует адаптивный веб-дизайн, в то время как настольная — нет.Каждый сайт использует разный HTML и CSS. Например, в мобильной версии значительно меньше присутствует JavaScript. Каждый сайт также использует различные структуры навигации.
Результаты:
Среднее время загрузки: 6,15 секунд
Средний размер страницы: 188,95 KB
Количество запросов HTTP: 31
Теоретически, адаптивный веб-дизайн является лучшим решением. Но на практике большинство таких сайтов реализованы неправильно и приводят к увеличению времени загрузки.
Мои тесты показывают, что лучшее время загрузки — у мобильных сайтов, но есть значительные недостатки в такой реализации задачи.
По моему мнению, лучше всего использовать комбинацию из адаптивного веб-дизайна и RESS. В этом случае мы получаем все плюсы “резиновой верстки” и решаем две больших проблемы: использования множества файлов и медленную загрузку.
Но есть сайты, которые объективно лучше изначально делать адаптивными. Например, это корпоративные визитки или другие сайты без сложной функциональности. И мы считаем, что разработчик должен иметь выбор. Поэтому сайт под управлением NetCat может работать в одном из трех режимов: обычный сайт, мобильная версия обычного сайта и адаптивный сайт (и все модули системы также поддерживают эти режимы).
Что касается RESS, то это интересный подход, но он не снимает всех проблем, связанных с адаптивной версткой. К тому же, часто пользователю смартфона лучше предложить выбор, смотреть ему обычный сайт или мобильный, потому что сценарии использования веба на телефонах могут быть разные. Например, я с телефона часто захожу на Афишу. Если я хочу выбрать фильм или кафе, я захожу на обычную версию сайта, если посмотреть, где идет нужный мне фильм или узнать какой-то адрес — на мобильную. И я доволен тем, что сайт не решает за меня, в каком виде смотреть контент, а дает выбор.
Резюмируя: я считаю, что для большинства задач подход «обычный сайт плюс мобильная версия» является путем наименьшего сопротивления, благо современные CMS позволяют резко минимизировать расходы на создание второго сайта. Но однозначной победы какого-то из конкурирующих подходов в ближайшее время не будет.”
Какие методы вы используете для создания мобильных сайтов? Поделитесь своими мыслями на эту тему в комментариях или отметьте вариант опроса.
Автор: loginovskaya
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-razrabotka/28131
Ссылки в тексте:
[1] опубликовал: http://sixrevisions.com/mobile/methods-mobile-websites/
[2] разработки адаптивного веб-дизайна: https://developers.google.com/webmasters/smartphone-sites/details
[3] создание отдельных мобильных сайтов: http://www.useit.com/alertbox/mobile-vs-full-sites.html
[4] Источник: http://habrahabr.ru/post/170807/
Нажмите здесь для печати.