От автора: адаптивный Веб Дизайн или RWD последнее время всегда на слуху, и он оказал огромное влияние на индустрию в целом. Всего несколько лет назад дизайну было достаточно хорошо смотреться под 4 или 5 различных размера экрана. Сегодня же все изменилось.
По статистике в 2014 году пользователи с мобильных устройств опередили десктопных, и этот тренд будет только расти, а следовательно, у веб-сайтов должна быть своя мобильная стратегия, чтобы быть успешными. Более того, с появлением большого количества различных устройств и размеров экранов дизайн должен быть более гибким, чем когда-либо ранее.
Раньше хватало парочки вариантов обслуживания мобильных пользователей: люди использовали поддомен с буквой «m» или полностью полагались на мобильные приложения. Однако самые последние исследования на сегодняшний день показывают, что данные решения не столь последовательны и экономически выгодны, как адаптивный дизайн.
Что такое адаптивный веб-дизайн?
Как следует из названия Адаптивный Веб-Дизайн адаптируется к размеру экрана браузера пользователя, устройства или платформы. По сути, это дизайн, который может подстроиться и выглядеть привлекательно на любом разрешении экрана.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнее
Адаптивный веб-дизайн в 2015 году уже вышел далеко за эти рамки, однако люди до сих пор ассоциируют данный дизайн с тремя первичными концепциями, описанными в книге «Лучшие практики адаптивного дизайна»:
Гибкие сетки – Организация контента без четко заданной ширины, которая состоит из пересекающихся вертикальных и горизонтальных полос. Сетка используется для структурирования контента в предсказуемой и последовательной манере, размер и позиционирование элементов можно настраивать.
Гибкие изображения – Любой визуальный контент или медиа файл, который подстраивается под размер экрана пользователя. Обычно, это изображения, расположенные внутри гибкой сетки, которой задано CSS правило max-width: 100%. С точки зрения непрофессионала данный подход делает так, что изображения не могут быть больше сетки, внутри которой они находятся, но в то же время изображения могут менять свой размер, не теряя при этом соотношение сторон. Дабы избежать долгой загрузки, дизайнеры могут сжимать разрешение изображений для маленьких экранов. Другой способ это установить ширину изображения в процентах от ширины страницы в целом.
Медиа запросы – Модуль CSS3, который контролирует применение стилей внутри медиа атрибута. Условием для применения различных стилей служит ширина экрана, его высота, ориентация и т.д.
Эти три краеугольных камня образуют основу того, что мы называем адаптивным веб-дизайном. Тем не менее, есть и другие подходы, которые в большей или меньшей степени синонимичны с понятием RWD. Техника Mobile-first, техника прогрессивного улучшения и ненавязчивый JavaScript это те техники, которые с уверенностью перейдут в новый год. Будет интересно наблюдать, как много понятий данный термин вберет в себя в будущем. Уже сейчас люди не понимают адаптивный дизайн с упором на большее количество размеров экранов.
Недавно даже был разговор о том, чтобы расширить понятие адаптивного веб-дизайна и включить в него уникальные возможности устройств (как особые команды тач скрина). Само понятие, как ни парадоксально, становится таким же гибким, как описываемая им концепция.
Почему нужно продолжать использовать адаптивный веб-дизайн?
Разнообразие устройств, используемых для просмотра веб-сайтов только растет, а следовательно, пользователи и дальше буду воспринимать как должное то, что они заходят на свои любимые сайты с различных устройств. Если вы хотите обеспечить пользователей хотя бы минимально приемлемым функционалом, ваш дизайн должен адаптироваться под размер экрана пользователя.
Что важнее, RWD — предпочтительный метод, который делает веб-сайт более доступным практически всем:
Пользователи ненавидят редиректы, а загрузка специального приложения это вообще навязывание товара, особенно когда речь идет об ограниченном пространстве на мобильном устройстве.
Множество сайтов на одном домене сложнее обслуживать и обновлять. В долгосрочной перспективе с добавлением нового кода вы прибавляете себе работы с обслуживанием сайта. Вам придется или в два раза больше работать, или использовать решения на стороне сервера, что более затратно, нежели адаптивный сайт.
С другой стороны, хорошо спроектированный адаптивный дизайн решает все эти проблемы. Если у вас один набор изображений, сетка и т.п. автоматически подстраиваются под размер экрана пользователя, то UX по определению будет намного лучше, чем при переключении между двумя отдельными сайтами. И если вам необходимо обслуживать и обновлять всего один код, это намного менее затратно в денежном и временном плане. Преимущества адаптивного веб-дизайна хорошо задокументированы:
Повышает количество пользователей, продажи и конверсию. По данным исследования Aberdeen Group сайты с RWD в среднем повышают конверсию на 11% в отличие от неадаптивных.
Выстраивает контент под каждый размер экрана в определенном приоритете (особенно заметно на маленьких экранах), что неизбежно делает сайт более привлекательным.
Поистине инновационный дизайн, так как вам больше не нужно зацикливаться на каждом новом размере экрана для устройства.
Улучшает SEO: Google официально рекомендует адаптивные сайты.
Дает пользователям единое качество обслуживания – никто не хочет быть второсортным.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееПозволяет фокусироваться на деталях, и это здорово, потому что (если вы хороший дизайнер) вы должны заботиться о деталях.
Старые способы постепенно отмирают
Поддомены с буквой «m» или отдельные версии сайтов для мобильных пользователей практически отмирают.
Сайты типа m.samplesite.com и www.samplesite.com дают разные ощущения от использования на различных устройствах. Когда основная цель это последовательность, целостность становится понятно, почему данные решения не идеальны. Тем не менее, нет ничего точнее статистики, которая доказывает снижение количества сайтов на поддомене «m».
Pure Oxygen Labs сообщили, что за последний год количество сайтов с «m» поддоменом сократилось на 20%, с 79% в 2013 до 59 в 2014, в то время как адаптивные сайты выросли на 37%.
Пользователи все равно переходят на полную версию – Исследование Web Performance Today показало, что около трети (35%) пользователей предпочитают переходить на полную версию сайта, если есть такая возможность.
На полной версии пользователи тратят больше времени – То же самое исследование говорит о росте времени посещения полной версии сайта в 5.5 раз. Также они вычислили, что 79% доходов от мобильных продаж приходят от пользователей, сидящих на полной версии сайта.
SEO/Google проблемы – Согласно Google’s own guidelines адаптивные сайты отображаются выше в поисковой выдаче. Если не использовать поддомен «m», то можно сразу улучшить SEO.
Время редиректа – В теории «m» сайты загружаются быстрее, но адаптивным сайтам не нужно тратить время на редирект с полной версии на «m» версию сайта (если пользователь сам не вбивает URL мобильной версии сайта). Вкупе с другими недостатками оно стоит того?
У мобильных устройств не один и тот же размер экрана – Как бы иронично не звучало, но то, что раньше было величайшим преимуществом мобильных версий сайта, теперь является величайшим их недостатком. «m» сайты проектируются под определенный размер экрана, однако мобильные устройства могут иметь разное разрешение от 320х240 для некоторых смартфонов и до 768х1024 (и выше) на планшетах. Нет смысла использовать один макет для всех размеров экрана.
Итог: «m» сайты это плохая идея, так как их обслуживание более дорогое, и они портят пользователю ощущения от сайта. В 2016 году вы увидите, как они продолжат исчезать из поля зрения, а их нишу занимает адаптивный дизайн. Существует множество примеров, когда сайты переключились на RWD, что сделало их более успешными после перезапуска. Рассмотрим пример из исследования Google – Британский интернет провайдер Plusnet.
Пример: Plusnet
Когда аналитики Plusnet указали на значительно возросший мобильный трафик, они начали продумывать серьезные изменения в веб-сайте.
В примере Google видно, что цифры впечатляющие, и они начали расти очень быстро. А точнее, мобильный трафик рос на один процентный пункт (относительно общего трафика) каждый месяц. Как только стало очевидно, что данная тенденция сохранится в обозримом будущем, лица, принимающие решения в Plusnet пришли к выводу, что им следует больше инвестировать в мобильную стратегию.
Они предпочли перейти на адаптивный веб-дизайн, потому что «почувствовали, что адаптивный веб-дизайн был лучшим решением для развития контента, который будет работать на всех устройствах на одной платформе, а не на множестве сайтов. И то, что данный подход самый инновационный из доступных на сегодняшний день.»
Вместе с введением RWD Plusnet решил больше инвестировать в мобильный маркетинг. Даже учитывая, что их сайт не вершина визуального дизайна, один только переход на адаптивный веб-дизайн оказался настолько мощным бизнес шагом, что он принес впечатляющие результаты.
Время конверсии сократилось почти в два раза (40%), продажи со смартфонов и планшетов выросли в более чем 10 раз за последние годы. Теперь показатель конверсии для нового мобильного сайта выше, чем старый показатель для всех устройств вместе взятых.
Результаты довольно типичны, если у вас раньше вообще не было мобильной стратегии, а потом вы сразу переключились на RWD. Когда Time Magazine перезапустились с адаптивным дизайном, число уникальных посещений домашней страницы выросло на 15%, со временем этот показатель упал до 7.5%, а процент отказов сократился на 26%.
Хороший адаптивный дизайн сулит хороший бизнес. Если вы хотите быть хорошим дизайнером, вы всегда должны обосновывать причины своего дизайна.
Основная мысль
Выводы очень просты. Количество людей, пользующихся мобильными устройствами велико как никогда, и оно будет только расти. Более половины населения подписаны на мобильные интернет-сервисы, а к концу 2020 данная цифра вырастет еще на миллиард людей.
Но как мы уже говорили, простых медиа запросов, гибких сеток и изображений не достаточно для обеспечения лучшего пользовательского опыта. От дизайнеров в 2016 году и дальше будет требоваться открытый разум и гибкий подход в паре с развивающимся интернетом.
Адаптивный дизайн это больше, чем просто тонкая настройка макета. Это полное переосмысление способа подачи контента. Гораздо более сложной задачей является определение правильной подачи нужного контента правильному пользователю именно на его устройство в нужное время.
Автор: Jerry Cao
Источник: //thenextweb.com/
Редакция: Команда webformyself.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнее
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!
Смотреть видео
Комментарии (1)