[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d","\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f_\u0432\u0435\u0440\u0441\u0438\u044f","responsive_design","\u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439_\u0434\u0438\u0437\u0430\u0439\u043d","\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435_\u0441\u0430\u0439\u0442\u044b","\u043a\u0430\u043a_\u0441\u0434\u0435\u043b\u0430\u0442\u044c_\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439_\u0441\u0430\u0439\u0442","\u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0439_\u0434\u0438\u0437\u0430\u0439\u043d","adaptive_design","\u0435\u0432\u0433\u0435\u043d\u0438\u0439_\u043a\u0443\u0437\u044c\u043c\u0438\u043d","uprock"], "comments": 44, "likes": 21, "favorites": 0, "is_advertisement": false, "section_name": "default", "id": "5166" }
Редакция vc.ru
12 510

Работа с мобильными устройствами: какой способ разработки сайта лучше

Генеральный директор digital-агентства Uprock Евгений Кузьмин написал для ЦП материал о том, каким способом лучше представить свой проект на мобильных устройствах, стоит ли использовать адаптивную вёрстку или лучше поддерживать отдельную версию.

Уже сегодня половину трафика на российских сайтах составляют мобильные устройства. Потребление контента в интернете со смартфонов или планшетов стало одним из основных сценариев использования этих устройств: люди читают статьи, загружают фотографии, общаются и совершают покупки. Многие компании, которые обзавелись адаптивным сайтом или отдельной мобильной версией, смогли добиться увеличения трафика. Но несмотря на очевидные плюсы вёрстки под устройства, до сих пор не все ресурсы торопятся разрабатывать мобильную версию.

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

Цель этой статьи — опираясь на материалы тематических источников и личный опыт разработки, поставить точку в этом вопросе. 

Введение 

Выделим две основные категории реализации дизайна: мобильные сайты и адаптивные. Мобильная версия сайта – это отдельная версия, разработанная специально для смартфонов или планшетов. Контент такого сайта может полностью отличаться от представленного на своем «старшем» десктопном брате. Адаптивная же версия полностью перестраивает содержимое страницы в зависимости от устройства, меняя расположение контентных блоков, их содержание и способы взаимодействия (например, управление с помощью прикосновения к экрану). 

Мобильная версия сайта pda.yandex.ru

Мобильные версии сайтов разрабатывают уже давно — возможно, кто-то ещё помнит версию сайта http://pda.yandex.ru, где на манер первых поисковиков хранился каталог мобильных сайтов. В то время редкие «продвинутые» сайты имели 2 версии: десктопная (со всей функциональностью) и мобильная (урезанная, для гиков с коммуникаторами на Windows Mobile, Symbian или других мобильных ОС). Такое решение на тот момент закрывало потребности пользователей. 

Но уже с ростом популярности смартфонов и увлечением скорости мобильного интернета, в 2012 и 2013 годах начала активно продвигаться парадигма разработки адаптивных сайтов. Если быть откровенным, сначала я не увидел всего потенциала и встретил новые веяния с легким скепсисом. Это было связано с тем, что еще в 2000-е при разработке сайтов мы часто использовали «резиновую верстку», которая фактически является прародителем адаптивных сайтов. На тот момент приходилось учитывать большой парк мониторов, от совсем «олдскульных» ЭЛТ с шириной экрана 640 пикселей до первых ЖК-мониторов с разрешением 1280 пикселей (а в некоторых случаях и 1600 пикселей). Принцип резиновой верстки состоит в изменении ширины блоков и иногда масштабировании текста и фото. 

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

Сейчас часто можно встретить евангелистов подхода Mobile First, при котором при проектировании интерфейса сайта предлагается ставить в приоритет мобильную версию, а десктопную версию делать ее логичным продолжением. В Uprock выбор приоритетов не так категоричен — мы исходим из целей и задач проекта. В зависимости от выбора устройства отличаются и пользовательские сценарии. Например, часто для пользователя домашний компьютер является основным рабочим инструментом, с помощью которого гарантированно будут осуществляться сложные функции (оплата, переводы, отправка данных), а мобильные устройства используются для вторичных функций (получение информации, сохранение данных). С учетом этого расставляются приоритеты и проектируются все промежуточные состояния сайта. 

Конечно, иногда бывают случаи, когда мобильная версия более приоритетная. Например, когда мы создавали сайт-фотоконкурс для «Билайн» с интеграцией Instagram, почти 90% трафика приходило с мобильных устройств. Так что выбор решения исходит из самой задачи.

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

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

Преимущества в данном случае таковы: 

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

Недостатки:

  • Поддержка двух сайтов: приходится тратить дополнительные ресурсы на поддержку двух отдельных сайтов. Часто бывает ситуация, когда основной сайт постоянно претерпевает изменения, а на мобильную версию совсем не хватает времени, и в скором времени разница между сайтами становится значительной, вплоть до разной структуры и отсутствия ключевых разделов.
  • Полностью разные сайты для пользователя: так как это два разных сайта, то у них нередко встречается разная структура и навигация, а в результате пользователю приходится заново адаптироваться и держать в голове два разных способа обнаружения той или иной статьи или раздела.
  • Урезанная версия сайта: так как основная парадигма мобильной версии, в таком случае, дать только ключевую функциональность, она не закрывает все потребности пользователей. 
  • Дополнительный URL: каждая страница имеет два адреса (десктопный и мобильный), что затрудняет расшаривание страниц. Например, я часто натыкаюсь в ленте Facebook на ссылки подобного плана http://m.forbes.ru/article.php?id=268533 и при переходе вижу на ноутбуке «растянутую» страницу для мобильника. Правильно в таких случаях переадресовывать пользователя на десктопную версию. 
  • Скорость загрузки: автоматичекая переадресация на мобильную версию при входе со смартфона, также сказывается на времени загрузки страницы. 
  • Проблемы с SEO: два адреса у одной и той же статьи сказывается на ее эффективном отображении в поисковиках, а значит и на SEO. 
  • Разные мобильные версии для разных устройств: то есть, по-хорошему, кроме мобильной версии, вам еще нужно делать версию для планшета, retina-дисплеев и телевизора.

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

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

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

Adaptive design (адаптивный) 

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

Responsive design (отзывчивый) 

Объединяет в себе черты «адаптивного» и «резинового» дизайна. Он подстраивается под любое разрешение экрана, как при «резиновой» верстке, но также перестраивает и порядок контентных блоков. Это наглядно показано на сайте liquidapsive.com. Понять суть этого принципа можно, выбрав тип дизайна (статичный, резиновый, адаптивный и отзывчивый) в правом верхнем углу и изменив размер окна браузера. 

RESS

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

Есть и другие способы реализации, я выделил лишь основные. Непосредственно на реальных проектах мы предпочитаем использовать из каждого метода лучшее, комбинируя оптимизацию кода RESS и гибкость Resposive design. 

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

  • Один адрес у страницы: это положительно сказывается на шеринге страниц;
  • Наследственность: навигация, расположение контента похоже на всех устройствах, что положительно сказывается на адаптации пользователей к сайту Сохранность контента: контент в абсолютно полном объеме на всех устройствах;
  • Поддержка одного сайта: здесь все просто, вам не надо одновременно развивать несколько версий сайта;
  • Подстройка под любые устройства: грамотно спроектированный адаптивный дизайн подразумевает не только наличие мобильной версии, но и подстройку под такие устройства как ТВ, планшеты, игровые устройства (PSP);
  • Оптимизация под SEO и работу с поисковыми роботами: следует из наличия одной версии страницы, без ее дублирования и усложнения структуры сайта;

Недостатки: 

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

Резюме 

Отдельные мобильные версии сайтов хорошо подходят для ситуации, когда надо сделать ее сейчас, но в дальнейшем разработчикам придется расходовать ресурсы на поддержку двух сайтов, что часто приводит к тому что версии значительно отличаются, и десктопная версия значительно обгоняет по функциональности мобильную. Такое решение подойдет для сайтов, которые редко меняются — например, корпоративные представительства или промостраницы. В других же случаях рекомендуется использовать адаптивный дизайн, так как интернет предполагает под собой быстрое реагирование на актуальные события и смену функционала. Эффективный сайт – это гибкий инструмент, быстро подстраивающийся под любую ситуацию. В обратном случае, это всего лишь громоздкий набор CSS и «джипегов». 

Адаптивный дизайн хорошо подходит для онлайн-СМИ или веб-сервисов, где происходят частые структурные изменения (добавление/редактирование новых разделов или блоков). Разработка адаптивной версии сайта требует серьезной доработки десктопной версии или полного редизайна. Возможные недостатки адаптивной верстки проявляются только при плохом проектировании. Что вполне логично, так как хорошая реализация требует профессионального подхода, соответствующих навыков, и знания многих нюансов. 

При проектировании необходимо учитывать разные устройства, поведение пользователей с ними, а так же множество нюансов, такие как тач-управление, размеры, скорость загрузки, анимацию элементов и т.д., а также не потеряться в этом обилии деталей и сохранить преемственность интерфейса, чтобы не отпугнуть пользователя. Техническая реализация требует знаний способов оптимизации кода, предельную аккуратность и тщательное тестирование не только на разных браузерах, но и устройствах (чего только стоит парк Android-устройств). Поэтому необходимо тщательно выбирать исполнителей. 

А напоследок интересный и наглядный пример адаптивного дизайна:

#Интерфейсы #мобильная_версия #responsive_design #адаптивный_дизайн #мобильные_сайты #как_сделать_мобильный_сайт #отзывчивый_дизайн #adaptive_design #евгений_кузьмин #uprock

Статьи по теме
Новый сайт Apple: изменения и программная реализация
Подсказки в интерфейсе: сложность адаптации под различные типы устройств
Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления