Scott
Как мы уже знаем, веб-дизайн не ограничивается только ПК. Сегодня доступно множество портативных устройств, и пользователи хотят получать удовольствие от работы на любом из них. Однако требуется некоторая оптимизация дизайна, чтобы он соответствовал экранам разных размеров. Поэтому перед дизайнерами и разработчиками встает огромная задача - помочь пользователям получить удобный доступ к контенту.
Гибкий (responsive) и адаптивный (adaptive) веб-дизайн — два подхода к отображению сайта на экранах разных размеров. В первом случае макет плавно подстраивается под доступную ширину, во втором — выбирается один из подготовленных вариантов. Разберём, чем они отличаются и как выбрать подход для проекта.
Часть 1. Что такое гибкий и адаптивный дизайн
Гибкий веб-дизайн (responsive) подстраивает макет под ширину окна браузера. Гибкие сетки и изображения меняют размеры, а медиазапросы позволяют перестраивать расположение элементов в заданных точках. Такой подход помогает использовать доступное пространство; читаемость текста и удобство управления нужно проверять на разных ширинах.
Источник: Web Flow
Адаптивный дизайн (adaptive) использует несколько заранее подготовленных макетов для определённых условий, например диапазонов ширины экрана. Вместо непрерывного изменения композиции сайт переключает варианты. На узком экране часть навигации можно убрать в меню-гамбургер. Само такое меню не определяет подход: его используют и в гибких, и в адаптивных макетах.
Источник: Web Flow
Часть 2. Чем отличаются responsive и adaptive
Сравним подходы по устройству макета, трудозатратам и требованиям к реализации.
Источник: UX Planet
1. CSS
В гибкой вёрстке CSS управляет относительными размерами элементов, сеткой и точками изменения макета — брейкпоинтами. В адаптивном подходе нужно описать правила выбора
и отображения подготовленных вариантов. Для этого не обязательно создавать отдельный сайт или полностью новый файл CSS для каждого устройства.
2. Масштабируемость
Гибкий макет рассчитан на диапазон ширин: например, несколько колонок на большом экране могут перестраиваться в одну на телефоне.
Для адаптивного макета команда готовит отдельные варианты и определяет, когда их показывать. Обязательного набора из шести размеров нет: точки переключения выбирают по содержимому и проверяют также промежуточные ширины.
3. Скорость
Название подхода не определяет скорость сайта. На загрузку влияют размер изображений, объём JavaScript, шрифты, сетевые запросы и работа сервера.
В обоих случаях важно загружать подходящие ресурсы и проверять страницу на реальном мобильном устройстве.
4. Рабочая нагрузка
При гибком подходе команда разрабатывает общие правила перестроения интерфейса. При адаптивном — поддерживает несколько вариантов композиции.
Трудозатраты зависят от сложности компонентов, числа состояний и различий между вариантами; один подход не всегда проще другого.
5. SEO
Google рекомендует responsive web design как наиболее простой в реализации и поддержке вариант: он использует один URL и один HTML-код для разных устройств.
Адаптивный макет сам по себе не требует двух URL. Отдельные мобильные адреса и динамическая выдача HTML — другие решения, которые нельзя смешивать с правилами расположения элементов. Для поиска важны доступность мобильного содержания, метаданные и корректная индексация.
Часть 3. Как выбрать подход для проекта
При выборе между гибким и адаптивным макетом учитывайте задачи пользователей и условия проекта:
- Требования проекта: выясните, достаточно ли перестроить одни и те же компоненты или на разных устройствах нужны существенно разные композиции.
- Аудитория: изучите, на каких устройствах и при какой ширине окна люди выполняют основные задачи. Проверьте, остаются ли доступны содержание и действия в каждом случае.
- Бюджет: оцените стоимость не только первой вёрстки, но и дальнейшего обновления компонентов, текстов и всех вариантов макета.
- Сроки: учитывайте готовые компоненты команды и объём проверки. Быстро собранный вариант всё равно нужно проверить с реальным содержанием.
Скорость загрузки: сравните реальные страницы на мобильной сети. Оптимизируйте изображения, шрифты и скрипты независимо от того, какой подход к макету выбран.
Источник: Adobe XD
Часть 4. Бонус: Бесплатный инструмент для совместного проектирования
Хотите узнать, какой инструмент может удовлетворить ваши потребности в адаптивном веб-дизайне? Тогда не ищите дальше и используйте Pixso в качестве инструмента для совместной разработки. В Pixso можно импортировать файлы дизайна из Figma и Sketch. В него встроена функция автоматической верстки, которая помогает создавать адаптивные дизайны, подходящие для ваших целевых пользователей. Вы можете создавать интерфейсы специально для любого устройства, используя все доступные функции дизайна и плагины. В Pixso можно использовать шаблоны и работать над файлами вместе с командой.
Pixso также позволяет просматривать взаимодействия с прототипами без загрузки каких-либо приложений. Независимо от того, связан ли ваш дизайн-проект с адаптивным или отзывчивым веб-дизайном, вам потребуется инструмент для проектирования, который предлагает множество функциональных возможностей. Общие компоненты и обсуждение макетов помогают команде согласовать работу перед разработкой. Экономьте свое время и позволяйте всем членам вашей команды эффективно работать вместе, используя инструмент совместного проектирования Pixso.
Вывод: проверяйте макет на разных устройствах
Гибкий макет полезен, когда одни и те же компоненты должны работать в широком диапазоне размеров. Несколько подготовленных вариантов позволяют отдельно проработать существенно разные композиции.
Выбирайте подход по задачам проекта и проверяйте основной пользовательский сценарий на разных устройствах.
