Адаптивный дизайн: история, принципы, исследования

Адаптивный дизайн — это такой дизайн, который обеспечивает корректное отображение сайта в сети Интернет на любых устройствах (компьютер, телефон, планшет и т.д.). Он дает возможность динамически подстраиваться всем веб-страницам под те размеры окна браузера, которые заданы.

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

Немного истории

Итан Маркотт – имя первого человека, который ввел такое понятие как отзывчивый веб-дизайн, а именно так переводится адаптивный язык с английского языка – responsive web-design. Он написал об этом в 2010 года в своей статье, со временем он также издал книгу «Responsive Web Design», которая полностью посвящена данной веб-технологии.

Аарон Густафсон издал не менее интересную книгу под названием «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement», в ней подробно описывается метод progressive enhancement – что в переводе с английского значит – «постепенное улучшение», который является важной деталью адаптивного дизайна.

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

Причины возникновения адаптивного дизайна

• С каждым годом количество разрешений устройств, откуда можно выйти в Интернет, растет со страшной скоростью.
• Понятно, что разнообразие устройств, с доступом к сети Интернет, возрастает с непомерной скоростью. И у всех этих устройств разные размеры экрана и разрешения – то есть отображаться сайт на каждом из них будет по-своему. Именно поэтому так важно сделать так, чтобы ваш интернет-ресурс одинаково хорошо смотрелся, а также правильно отображался у любого пользователя, так как каждый из них – потенциально ваш клиент.
• В наше время сложно представить себе жизнь без мобильного телефона, откуда можно зайти в Интернет.
• Сегодня процент людей, которые выходят в Интернет с мобильных устройств – просто колоссально! По статистическим данным за 2015 год (а за год, как вы понимаете, эта цифра только увеличиться), 56% пользователей Рунета пользуются мобильным Интернетом, заходя туда с планшетов и смартфонов. (фото 2) Игнорировать эту аудиторию нельзя, и здесь нужно еще учитывать один очень важный психологический момент. Если человек не смог зайти с телефона на ваш сайт, или же он некорректно отобразился на его устройстве, больше он делать уже этого не будет. Он, скорее, пойдет к вашим конкурентам, у которых все работает как надо, поэтому у вас есть всего один шанс заполучить данную аудиторию – сделать сайт, который будет одинаково хорошо отображаться и на мобильных устройствах.
• Такие «киты» поисковых систем как Яндекс и Google сами рекомендуют создавать сайты с адаптивным дизайном.

Дело в том, что это дает возможность не дублировать страницы, и, таким образом, вся ссылочная масса будет содержаться на одном домене. И еще один момент, с 2015 года именно мобильная версия сайта непосредственно влияет на его продвижение в поисковых системах. Были запущены новые алгоритмы, которые учитывают этот фактор: Google Mobile Friendly и Яндекс Mobile Friendly.

Основные принципы гибкого дизайна:

• Для начала именно дизайнер должен продумать, как будет выглядеть сайт не только на ПК, но и на мобильном устройстве. Для этого контент максимально сокращают, оставляя самое важное и удаляют соответственно второстепенные информационные блоки.
• Применяется гибкий макет, основанный на сетке (flexible, grid-based layout);
• Используются гибкие изображения (flexible images);
• Можно работать с так называемыми медиа-запросами (media queries);
• Проектирование под мобильные устройства начинается с самых ранних этапов («mobile first»);
• Применение постепенного улучшения – то самое, о котором в свое время писал Аарон Густафсон;
• Желательно использовать flat-design, что дает возможность просматривать сайт даже с простых мобильных телефонов, с небольшим экраном и невысокой скоростью интернет-канала.

Чем хорош адаптивный дизайн?

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

• По данным Google’s own guidelines, адаптивный дизайн сайта значительно улучшает SEO-позиции, так как именно эти интернет-ресурсы лучше всего отображаются в поисковой выдаче.
• С дизайнерской точки зрения, такой дизайн дает возможность сфокусироваться на деталях.

Чем плоха мобильная версия (приложение) сайта?

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

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

Почему сайты типа m.samplesite.com – отходят в прошлое?

Здесь на первый план выходят психологические причины. Удивительно, но ощущения у пользователей от сайтов типа www.samplesite.com и соответственно мобильной версии на поддомене m.samplesite.com – совершенно разные. И если вы хотите, чтобы выход вашего бренда в сети Интернет был целостным и последовательным – становится ясно, почему не стоит так делать. И дабы не быть голословными, приведем некоторые статистические данные на эту тему.

• По сведениям Pure Oxygen Labs, за 2015 год произошло сокращение сайтов с поддоменом «m» на 20%. И в это же время количество адаптивных сайтов выросло на 37%.
• По исследованию Web Performance Today, 35% пользователей все равно, если предоставляется такая возможность, переходят на полную версию сайта.
• По данным этого же исследования, люди проводят на полной версии сайта в 5, 5 раз больше, чем на аналогичной версии с поддоменом «m».
• И напоследок – из того же исследования – 79% доходов от продаж посредством мобильных устройств сделаны пользователями, которые находились вначале на полной версии сайта. (диаграмма и график)
• Кроме того, сайтам, созданным на резиновом дизайне, не нужно время на редирект, а, как вы понимаете, это самое время нужно для перехода с полной версии сайта, на версию с поддоменом «m».
• Размер экрана у мобильных устройств – неодинаковый, для смартфонов, например, это 320х240, а для планшетов – 768х1024 (и выше). Поэтому невозможно использовать один макет, потому что он просто не подойдет для всех размеров экрана.

Вывод: с каждым днем людей, которые пользуются мобильными устройствами для выхода в Интернет – растет. Ожидается, что к 2020 году более миллиарда пользователей отдадут свое предпочтение именно этим гаджетам. Поэтому иметь сайт с адаптивным дизайном – жизненно необходимо всем компаниям, которые хотят оставаться на плаву.

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