Лого vc.ru

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

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

Генеральный директор 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-устройств). Поэтому необходимо тщательно выбирать исполнителей. 

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

Статьи по теме
Новый сайт Apple: изменения и программная реализация11 сентября 2014, 10:37
Подсказки в интерфейсе: сложность адаптации под различные типы устройств20 августа 2014, 16:42
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Дмитрий, давайте сразу к конструктивному диалогу.

А что же вы свой сайт нормальным на айфоне не сделаете?? Скрин с айфона, кстати)))

Но вы не до конца раскрыли вопрос. Если есть задача сделать мобильный сайт сейчас, не значит, что нужно пилить отдельный сайт. Есть возможность АДАПТИРОВАТЬ текущий desktop сайт с помощью JavaScript-adaptive технологии. Именно так мы и адаптировали уже более 70 сайтов! — eski.mobi/worx

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

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

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

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

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

Ах да, кстати, не так страшен сам адаптив под современные смартфоны и планшеты, как хаки под всякие старые андроиды и прочие чудеса природы. Я вот недавно думал, что допиливать современный сайт под ие7-8 это мучения, но когда я решил сделать сайт полностью рабочим (и не обделенным) на своей мобилке с 2.3 андроидом (да еще и в разных браузерах), я познал настоящую боль.

Для таких случаев, у нас в договоре прописаны ТТ: IE 9+, Anrdoid 4,1+, IOS 5+. Более старые версии осмечиваются отдельно, чаще всего, таким образом получается с клиентом достигать взаимопонимания, что поддержка редких браузеров не эффективна.
Я не вижу смысла адаптировать сайты под старые версии, такие как 2.3, обычно это бюджетные старые телефоны, которые в лучшем случае кроме функции звонка используют камеру и плеер. И чаще всего на этом устройстве установлен браузер от производителя со своими "сюрпризами".

Ну у меня конкретных требований под старые андроиды при разработке не было, но хотелось чтобы на своем телефоне все выглядело ок. Телефон Huawei u8860, который я покупал года 3 назад наверное (а планшету acer a500 вообще скоро года 4 стукнет). И менять это старье пока смысла никакого, интернеты серфит вообще без проблем, а мобильные приложения меня не интересуют.
А 4.1+ андроид это как то слишком просто если честно :)

0

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

0

Пох на мобильные сайты. Но что за чудесные доски на фото? Это пол, стол? Самодельный или можно где купить?

0

Ну ёпрст! Я стол такой хотел.

0

Меня наверное логин выдает, но все же.
Соглашусь с мнениями выше, что адаптивный дизайн в наше время это действительно необходимая вещь, так как около трети браузинга делается с помощью телефонов и планшетов. Сейчас даже есть тизерки, которые показываются только для мобильной аудитории... (таргетинг 98%)
По поводу разработки хочу только бросить пару ссылок по теме:
www.adamkaplan.me/grid/ - отличный, а главное простой туториал, объясняющий суть и фишки адаптивной верстки.
lab.yurbasik.org.ua/ - собственно мой проект, где я собираю отовсюду бесплатные адаптивные шаблоны. Приглашаю в гости аудиторию ЦП.

Почему рассматриваются лишь 2 варианта предоставления контента с сайта? Возможно стоило бы добавить и вариант с приложением для телефонов/планшетов, которое бы предоставляло возможность читать свежие публикации и в оффлайне.

0

Тоже долго думали о том, какую версию сайта лучше делать. Остановились на адаптивном. redroid.ru/
Получилось красиво, но с небольшими тормозами, ибо ещё не все так гладко. Flexbox, например, тормозит в хромиуме :( Ждём фикса, а пока надеемся, что читатели терпят. Так что перед тем, как делать адаптивку, нужно ещё позаботиться и о технологиях, которые будут там применяться :)

Это, у вас там не с флексбоксом проблемы, а с листерером на ресайз, в котором туча проверок и циклы

Лол, я думал такие ошибки только новички совершают. Им надо просто debounce на ресайз поставить (это когда функция через N милисекунд, после того как это действие перестали делать).
Вот самый простой для понимания пример реализации (как раз для ресайза окна):
davidwalsh.name/javascript-debounce-function

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

0

Простите, по фотке Дмитрия Андреевича разве не видно, что там не матерый синиор? ^^

0

Ой, я вначале не рассмотрел вообще. Ну я сам кстати точно не сениор, у меня года опыта еще пока и нету.

0

Тут пару статей назад был парень, который увеличивает свой доход 3-4 раза в год, искренне верил, что чуть зная того и того, можно быть синиором. Мораль— главное уметь себя продать)

0

мы тут все любители! Дизайн и верстка с нуля без какого либо опыта :) Спасибо за наводки, будем править!

я про тормоза при скролле, а не ресайзе :( Или Вы о чём?

0

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

Мобильного клиента? Это же опечатка?
А сайт действительно должен развиваться поэтапно. Подтверждая все модификации бизнес метриками.

0

В целом все по делу, но хочу высказаться в защиту stand alone версии.

К сожалению, это практически единственный способ начать работать с мобильной аудиторией для малого бизнеса. Такой бизнес по определению денег имеет мало и дополнительные 10-15% продаж для них часто спасение. К примеру, возьмем региональный интернет-магазин, обрабатывающий 10 заказав в день - денег зарабатывают на з/п основателю и одному помощнику. Как думаете у них есть 150+ тыс. рублей на переделку сайта под адаптив?

Второй момент. Ок, мы готовы сразу делать сайт адаптивным (на старте бизнеса), но не бесплатно же. Ну вы понимаете, о чем дальше речь пойдет...

И это не касаясь того, представление разработчика может быть ошибочным и разработанный сайт будет хуже конвертироваться. У меня был опыт, когда простой лендинг приносил 30% регистраций, а новый, красивый и технологичный - 20%. Такие эксперименты бизнес может и не пережить.

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

Поддержка двух сайтов - все зависит от типа сайта, если мы говорим про корпоративный сайт на 10 страниц, то проблемы нет. Если про интернет-магазин или местечковый новостной портал, то у нас есть всякие json, yml, xlm. С читаю, что надо стремиться исключить ручную работу с мобильной версией.

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

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

Дополнительный URL - это простая техническая задача, достаточно в автоматическом режиме определять соответствие между страницами десктопной и мобильной версий. Тот же Форбс может это спокойно делать по идентификатору в урле, а для других случаев можно сопоставлять заголовки страниц и даты обновления контента.

Скорость загрузки - действительно, если для определения типа устройства мы используем js, то первая (!) загрузка будет чуть дольше. Но опять таки, можно все делать на уровне запросов еще до отгрузки сайта. Но это уже не про бюджетные решения.

Проблемы с SEO - вы же слышали про robots.txt?

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

Так что ребята, не хороните самостоятельные мобильные версии. Я уверен, что их время еще настанет и мы увидим расширение их доли.

>150+ тыс. рублей на переделку сайта под адаптив?
Мои глаза - О_О

0

Для некоторых сайтов 150 тыс - это мало)
Рассуждать и стоимости сайта или дизайна, это как рассуждать о цене машины. Можно ладу купить за 300 тыс, а можно бугати вейрон за 60 миллионов.
Хотя то и то - просто автомобиль)

0

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

0

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

Сейчас обсуждают
Vsevolod Volchansky
Chat Helpdesk

Ему про Фому, он про Ерему))

«Тинькофф банк» анонсировал открытие сети центров разработки
0
FrostBite
ProGamer.ru

Всем. Я за нацию технологий и творчества.

Власти России намерены снизить беспошлинный порог для ввоза интернет-посылок до 500 евро с середины 2018 года
0
Alex Samoylenko

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

Mushroom Wars 2: рассказ российских разработчиков о том, какой путь прошла игра от концепта до релиза
0
reggaejunkiejew

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

Дом, который построил Питер Тиль
0
Anton Kuchumov
WorkOut

Спасибо, из всего списка как раз хотел начать с неё.

Лучшие книги 2016 года — выбор Билла Гейтса
0
Показать еще