Просмотров: 1580
Адаптивный дизайн сайта. Как обойтись без него?
Наш ответ: при разработке сайта - никак.
“Мобильная революция” произошла уже давно. И трафик с мобильных устройств больше десктопного, и даже покупки в интернет-магазинах с мобильных устройств грозят догнать “десктопные” уже в ближайшее время.
Где люди используют мобильные устройства? По статистике:
- 84% дома
- 80% в свободное время в течение дня
- 76% в очередях и в процессе ожидания
- 69% в процессе шоппинга
- 64% на работе
- от 62% до 84% (по данным разных исследований) во время просмотра ТВ-программ
- 47% во время подготовки к работе
На сегодняшний день существуют два способа реализации сайтов для мобильных устройств – мобильная версия сайта и адаптивный дизайн и верстка.
В адаптивном веб-дизайне (responsive web design), используют CSS-фреймворки, позволяющие адаптировать верстку, изображения и другие элементы как для большого монитора, так и для мобильного устройства. В отличие от мобильной версии, которая, по сути является отдельным сайтом, адаптивный дизайн имеет тот же URL, что и основной сайт. А сам сайт предоставляет пользователю весь функционал полной версии сайта.
При разработке такого сайта изначально продумывается прототипы дизайна под различные разрешения экрана.
Чтобы проверить адаптивный ли дизайн у сайта или нет, можно взять браузер за край и сжать его по горизонтали. Адаптивный сайт должен начать подстраиваться под новый размер браузера, а у обычного сайта, появится горизонтальная прокрутка. В определенный момент возникает ситуация, когда меню сайта схлопывается в одну единственную кнопку, которая называется “бургер” или “боян” из-за схожести дизайна.
Такие моменты перехода называют контрольной точкой или точкой перегиба. Если сжимать дальше (минимальный размер 460 пикселей), то можно увидеть как сайт будет отображаться на айфоне. Есть несколько точек перегиба, в которых меняется дизайн. Таким простым способом можно определить адаптивность сайта.
По принципу «сначала мобильные» нужно начинать с разработки версии для мобильного устройства (например, айфона), то есть с размер макета 460 х 960. Второй размер для планшета 768×1024, третий — разрешения ноутбука 1280×802. Последний контрольный размер 1600×992. Под эти разрешения нам нужно разрабатывать наши дизайн-макеты.
Чего же хотят пользователи разных устройств от сайта? Одного и того же - быстроты и удобства.
- Быстрая загрузка
- Удобство пользователя
Время загрузки остается критическим фактором для процента конверсий отказов для веб-приложений. Современные пользователи не любят ждать. По данным blog.compass.co, конверсия в процессе загрузки в среднем падает со скоростью 12% в секунду, а если дело затягивается больше, чем на 6 секунд, число отказов резко увеличивается вдвое. Современные разработчики, впрочем, не принимают это близко к сердцу: средняя скорость загрузки мобильной страницы сейчас составляет ни больше ни меньше как 19 секунд! в первую очередь из-за того, что мобильные версии страниц, по большей части, чересчур забиты контентом и не адаптированы для мобильных устройств.
Все же понемногу проблема решается. Об этом свидетельствует, в частности, растущая популярность метода lazy loading, при котором графический контент подгружается поэтапно, по мере того, как пользователь пролистывает страницу, тем самым сокращая время ожидания.
Неадаптированный для мобильного устройства сайт - верный шанс сломать глаза, пытаясь прочесть неописуемо мелкий текст. Пользователь вправе ожидать, что он может воспользоваться всеми возможностями сайта с любого устройства без вреда для здоровья - просмотреть новости, совершить покупку, порадовать себя картинками или пообщаться. Это касается, в первую очередь, технических моментов (61% пользователей не возвращаются на сайт, если при работе с ним возникали сбои; 57% поменяют свое мнение и о бизнесе в целом в худшую сторону). Также играет роль и единая стилистика отображения сайта на разных устройствах. По данным Alexa, в 2017 г. у 80% топовых сайтов дизайн уже был должным образом оптимизирован для всевозможных типов девайсов.
Адаптивный дизайн в 2018. Тенденции и новации
Веб-разработчики все больше ориентируются на принцип “сначала мобильные” (“mobile first”) - сначала разрабатывая концепты сайта для мобильных, а потом уже для десктопов.
Второй важный принцип современной веб-разработки - это “адаптивность контента”. Разработчик должен отталкиваться от идеи, что самый важный параметр любого сайта - контент. Он максимально важен и должен хорошо отображаться на любых устройствах. Когда начинаешь рисовать дизайн сначала для большого экрана, есть вероятность, что напичкаешь его совершенно ненужным контентом. Пропадают акценты. Помимо заголовков на первый план может выйти корзина или какие-то кнопки. Когда пользователь заходит на сайт, он не понимает с чего начать. Два этих принципа помогают избежать этих ошибок в веб-разработке.
Простой пример. Вы можете увидеть, насколько удобен ваш сайт для пользователей с помощью сервиса проверки оптимизации страниц для мобильных от Google
Чтобы узнать, какое количество пользователей заходит на ваш сайт с мобильных устройств можно воспользоваться Яндекс.Метрикой.
Формируем отчет: Отчеты → Стандартные отчеты → Технологии → Устройства.
Смотрим получившийся отчет, ужасаемся, несемся понижать ставки для мобильных устройств в Директе, пока наш верстальщик не сделает для вашего сайта по-настоящему адаптивную верстку.
“По одежке встречают” - это правило работает не только в отношении людей, но и в отношении сайтов. Современный дизайн сайта зиждется на удобстве пользователя, а значит не может не быть адаптивным.
