Адаптивная верстка это: Адаптивная вёрстка: что это | Блог Roistat

Адаптивная вёрстка: что это | Блог Roistat

Содержание

• Что такое адаптивная вёрстка и адаптивный дизайн сайта
• Зачем бизнесу адаптивная вёрстка сайта
• Чем адаптивная вёрстка отличается от респонсив-дизайна и мобильной версии сайта
• 4 сервиса для проверки адаптивности онлайн
• Адаптивная вёрстка: что нужно запомнить

Что такое адаптивная вёрстка и адаптивный дизайн сайта

Адаптивная вёрстка или дизайн — создание страниц сайта, автоматически подстраивающихся под размер, разрешение и ориентацию экрана устройства. Для разных девайсов готовят разные дизайны, при входе на сайт автоматически загружается оптимизированный под устройство макет. Цель — сделать сайт удобным для посещения как с компьютеров, так и со смартфонов, планшетов.

Хотите освоить сквозную аналитику?

Посетите регулярный мастер-класс по аналитике от Roistat.

Подключиться

Для этого дизайнер готовит несколько макетов будущего сайта под разные типы и модели мобильных и стационарных устройств. Страницу со сложным дизайном могут отрисовать шесть и более раз. У простых дизайнов могут быть всего два макета — вертикальный и горизонтальный.

Разработчик при вёрстке задаёт макетам нужные размеры и разрешение экрана.

Когда посетитель переходит на сайт, система видит, с какого устройства открыта страница, и показывает нужный макет интерфейса.

Главная страница сайта Профи, десктопная версияГлавная страница сайта Профи, мобильная версия

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

Иногда наоборот — в дизайне под мобильные устройства только уменьшают иконки и более компактно размещают элементы сайта.

В некоторых случаях сайту нужна только одна версия страницы. Например, под смартфоны, если трафик на страницу идёт только с Instagram.

Зачем бизнесу адаптивная вёрстка сайта

Аудитория мобильных устройств растёт. По данным Statista, доля мобильного интернет-трафика составляет более 55% от общего веб-трафика. Чтобы не терять потенциальных клиентов, пользователям смартфонов должно быть комфортно читать текст на сайте, оставлять заявку на покупку, отправлять товары в корзину.

Чем адаптивная вёрстка отличается от респонсив-дизайна и мобильной версии сайта

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

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

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

Мобильной версией называют отдельный сайт компании, сделанный для мобильных устройств. У такого сайта есть свой URL, например, у ВКонтакте есть https://m.vk.com/. При этом открыть мобильную версию можно как со смартфона, так и с ПК.

Рассказали в словаре, что такое мобильная версия сайта.

Визуально и функционально мобильные версии сайта могут отличаться от десктопных страниц.

Производство мобильных версий дорогое. Дизайнерам и разработчикам нужно отрисовать и сверстать ещё один сайт. Отдельный URL для мобильных девайсов может путать пользователей — нужно помнить, какой адрес вводить, чтобы посмотреть контент сайта со смартфона.

4 сервиса для проверки адаптивности онлайн

1.  Google Mobile-Friendly Test — бесплатный инструмент, который проверяет адаптивность сайта на мобильных устройствах. Google показывает, как выглядит мобильная версия страницы, и сообщает об ошибках в вёрстке, если они есть:

2. Яндекс.Вебмастер, «Проверка мобильных страниц» — проверяет мобильную версию сайта владельца по 6 критериям:

• наличие тега viewport;
• отсутствие горизонтальной прокрутки;
• отсутствие flash-элементов;
• отсутствие java-апплетов;
• отсутствие silverlight-плагинов;
• удобство чтения текста с мобильных устройств.

3. I love adaptive — покажет, как сайт отображается на разных популярных устройствах, в том числе на новых мобильных девайсах системы ios и Android. Дополнительно можно задать собственный кастомизированный размер страницы для проверки.

4. Browserling — сервис проверки кроссбраузерности и кроссплатформенности сайта.В бесплатной версии сервиса можно проверить только Internet Explorer 11, для разрешения 1024×768 на Windows 7, тест будет ограничен 3 минутами. В платной версии — от $19 в месяц — можно выбрать разные версии ОС от Windows и Android и 6 браузеров.

Также рассказали в блоге, как проверить юзабилити сайта.

Адаптивная вёрстка: что нужно запомнить

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

2. Для респонсив-дизайна не нужно готовить несколько макетов сайта. Программный модуль растягивает или сжимает страницы под размеры устройства. Мобильная версия — отдельный сайт компании, сделанный для мобильных устройств.

3. Проверить адаптивность сайта можно с помощью сервисов: Google Mobile-Friendly Test, Яндекс.Вебмастер, I love adaptive, Mattkersley, Browserling.

Адаптивная вёрстка сайта: что это, преимущества

Чтобы сайт хорошо отображался на экране компьютера, планшета и телефона, используют адаптивную вёрстку. Рассказываем о её особенностях и принципах.

• Что такое адаптивная вёрстка сайта
• Преимущества сайта с адаптивной вёрсткой
• Принципы адаптивного дизайна сайта
• Разрешения экранов для адаптивной вёрстки
• Инструменты для адаптивной вёрстки
• Как сделать адаптивный дизайн
• Ошибки при разработке адаптивной вёрстки
• Совет эксперта

Что такое адаптивная вёрстка сайта

Адаптивная вёрстка сайта — это способ обеспечить оптимальное отображение интерфейсов на устройствах с разным разрешением экранов. Вёрсткой занимается фронтенд-разработчик.

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

У адаптивного дизайна длинная история. В ней можно выделить три этапа.

Этап 1: мобильные версии сайтов. Началось всё с появления интернета на мобильных устройствах в начале 2000-х годов. Как только появилась возможность выходить в интернет с телефона, крупные компании начали делать мобильные версии сайтов.

Мобильная версия — это отдельный сайт, созданный разработчиками с нуля и повторяющий целиком или частично десктопную версию. Её разработка дорогая и сложная, поэтому примеров не так много.

Самый известный пример — мобильная версия вконтакте, которая появилась в 2010 году и с тех пор развивается параллельно с основным сайтом.

На первой картинке — скрин из мобильного приложения вконтакте. На второй — мобильная версия сайта, которая открывается через браузер телефона

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

Так выглядит неадаптивный сайт: его отображение одинаково и на компьютере, и на телефоне

Аудитория пользователей мобильного интернета быстро росла: в 2015 году в России им пользовалось уже 40 млн человек. Появилась потребность сделать их пребывание на сайтах комфортным, но не затратным для компаний.

Этап 2: «резиновая» вёрстка. Следующим этапом на пути к адаптивному дизайну стала «резиновая» вёрстка и «резиновые сайты», в которых ширина всех элементов менялась при изменении ширины страницы.

Сайт становился «резиновым» благодаря разработчику, который указывал ширину элементов не в пикселях, а в процентах. Дизайнер разрабатывал для этого только один макет.

Так выглядит «резиновый» сайт: ширина карточек меняется по мере сужения экрана, но порядок их расположения сохраняется

«Резиновые» сайты лучше выглядели на экранах мобильных телефонов, если были простыми. Например, если кроме заголовка, картинок и текста в одну колонку на них ничего не было.

Если сайт был сложнее — например, элементы располагались не в одну колонку, а в пять, — на экране телефона всё становилось мелким и нечитаемыми. Поэтому «резиновые» сайты не решили проблему адаптивности до конца.

Этап 3: адаптивная вёрстка. После «резиновой» вёрстки появилась адаптивная. Её суть в том, чтобы не сжимать сайт под размеры экрана, а создать для каждого экрана отдельный макет.

Адаптивный сайт портала «Арзамас» — есть версия для компьютера, планшета и телефона. Всё это — три разных макета

При создании адаптивного сайта дизайнер рисует как минимум два макета: для десктопной версии и мобильной. Но может потребоваться и больше макетов, например для планшета или ноутбука с узким экраном. Фронтенд-разработчик тоже верстает не один макет, а несколько.

Материал по теме:

Как сделать продающий лендинг: советы продуктового дизайнера

Преимущества сайта с адаптивной вёрсткой

Сайты конкурируют за внимание и время пользователей. Хорошо, если человек долго находится на странице: читает текст, рассматривает картинки, выбирает товар или услугу.

Чем дольше пользователь взаимодействует с контентом, тем больше вероятность, что он совершит целевое действие. Например, позвонит и запишется на консультацию, купит товар, оставит отзыв. Адаптивный дизайн сайта делает любое действие доступным не только с компьютера, но и с телефона.

Кроме того, что адаптивная вёрстка сайта помогает компаниям удерживать клиентов, у неё есть ещё несколько преимуществ:

● Сайт выглядит аккуратно.
Сайты с адаптивным дизайном корректно отображаются на экранах с любым разрешением. При адаптивной вёрстке элементы не наползают друг на друга, не получаются слишком мелкими или крупными.

● Сайт удобен для разной аудитории.
В 2019 году пользователи одинаково часто заходили в интернет с телефонов и компьютеров. В 2022 году с телефонов заходит уже более 65% пользователей, с компьютеров и ноутбуков — около 30%, а с планшетов — 2%.

Доля визитов с разных устройств по данным Яндекс Метрики

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

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

Принципы адаптивного дизайна сайта

В адаптивной вёрстке выделяют следующие принципы:

1. Контент десктопной и мобильной версии сайта дублируется. Всё, что пользователь может увидеть с компьютера, должно быть доступно и с телефона. Если какой-то информации не хватает в мобильной версии, придётся включать компьютер, искать сайт, а на нём — нужную информацию.

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

2. Дизайн не меняется. Шрифты, цвета, логотипы должны быть одинаковыми в десктопной и мобильной версиях. Например, если в десктопной версии сайта использован голубой цвет, не стоит делать главным цветом мобильной версии зелёный. Если пользователь уже заходил на сайт с компьютера, то не узнает его в телефоне и подумает, что неправильно ввёл запрос или попал не на тот сайт.

3. Сохраняется иерархия элементов. Иерархия заголовков, подзаголовков, текстовых блоков, иллюстраций и кнопок выстраивается на основе цели сайта.

Например, если на сайте продаются термокружки, нужно сначала рассказать о товаре, закрыть возражения и только потом разместить форму заказа. Цель сайта — продать товар, а целевое действие — оформление заказа.

Если десктопная версия свёрстана по логике «товар — возражение — заказ», при оптимизации под мобильные устройства нет смысла переносить блок с заказом на первое место. Это изменит путь пользователя и не подтолкнёт его к целевому действию.

4. Высота и ширина кликабельных элементов — не менее 44 пикселей. По десктопной версии сайта пользователь перемещается с помощью мыши. По мобильной версии можно перемещаться только с помощью пальца. Область нажатия — 44–48 пикселей. Если кнопка или знак подсказки меньше этих значений, пользователю будет сложно попасть по ним.

5. Функционал десктопного сайта повторяется. Если с компьютера доступны фильтры и разные режимы отображения товаров — например, списком и карточками, — в мобильной версии этот функционал должен быть повторён.

Если дизайнер урежет функционал, пользователь вряд ли выделит время, чтобы обратиться к десктопной версии. Скорее всего, он покинет сайт и найдёт решение своей проблемы у конкурентов с оптимизированным под мобильные устройства сайтом.

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

Когда дизайнер начинает адаптировать сайт под разные разрешения, ему стоит помнить про две вещи: компактность и наведение.

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

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

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

Чтобы пользователь мог быстро перейти к самому важному и интересному на сайте, при оптимизации сайта под мобильные устройства карточки можно прятать в горизонтальный скролл.

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

Запомнить принципы адаптивного дизайна нетрудно. Применять их на практике и разобраться в тонкостях адаптивной вёрстки помогают наставники курса «Дизайнер интерфейсов». Первый модуль можно пройти бесплатно.

Освойте профессию UI/UX-дизайнера с нуля за 8 месяцев

Создайте 6 проектов мобильных и веб-приложений для своего портфолио. После обучения получите первый оплачиваемый заказ в «Мастерской» — студии дизайна внутри Практикума. Сделайте первый шаг и попробуйте бесплатную вводную часть курса «Дизайнер интерфейсов».

Разрешения экранов для адаптивной вёрстки

Основных разрешений для адаптивной вёрстки три:

1600 пикселей — для компьютеров;
960 пикселей — для планшетов;
375 пикселей — для телефонов.

Это усреднённые значения. Ширина может меняться в зависимости от сайта, идеи и технических особенностей. Ещё эти значения называют брейкпоинтами (от англ. breakpoint) — то есть разрешениями, при которых сайт меняет отображение на экране.

Например, пользователь заходит на сайт с ноутбука с шириной экрана 1280 пикселей, а потом вдвое сужает окно браузера. Как только ширина станет меньше 960 пикселей, отображение сайта поменяется.

По брейкпоинтам алгоритм на сайте определяет, какой шаблон выбрать для отображения

В популярном фреймворке разработчиков Bootstrap сейчас представлено шесть брейкпоинтов: 1920, 1200, 992, 768, 576 и 376 пикселей.

Пример адаптивного дизайна с учётом шести брейкпоинтов. Элементы одни и те же, но их расположение подстраивается под ширину экрана

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

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

Инструменты для адаптивной вёрстки

Основной инструмент — это графический редактор Figma. Дальше название этого онлайн-сервиса будем писать кириллицей.

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

Попасть в раздел с фреймами можно из панели управления или с помощью горячей клавиши F

Как сделать адаптивный дизайн

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

Метод, когда мобильная версия создаётся раньше десктопной, называется Mobile First.

Ксения Крылова
В моей практике был случай, когда 90% покупателей посещали сайт с телефона. Мы взялись за его обновление и даже не думали над десктопом, а сразу перешли к мобильной версии.

Чаще всего адаптивный веб-дизайн начинается с десктопной версии, а потом дизайнер адаптирует её под разрешение телефона. Некоторые дизайнеры любят метод Mobile First и делают наоборот, но это вопрос вкуса.

Когда десктопная версия готова, сделать адаптивную вёрстку несложно. Для этого достаточно перенести все элементы на макет с нужным разрешением и пропорционально их уменьшить. Пункты меню и фильтры можно скрыть под кнопками.

При адаптации сайта для мобильных дизайнер последовательно переносит и уменьшает все элементы

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

Если какие-то элементы не помещаются на экран или выглядят несоразмерными интерфейсу, в режиме предпросмотра это можно заметить

Ошибки при разработке адаптивной вёрстки

❌ Сжатые изображения. При адаптивной вёрстке с фотографиями и иллюстрациями можно поступать двумя способами: кадрировать или пропорционально уменьшать.

При кадрировании изображение не сжимается. Пользователь начинает видеть часть изображения, а не всё целиком.

В этом примере изображение кадрируется по краям. При уменьшении экрана пользователь видит только центральную часть

При пропорциональном уменьшении части изображения не отсекаются — вся картинка становится мельче.

Чем уже экран, тем меньше изображение

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

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

❌ Мелкий кегль. Кегль шрифта — размер буквы по вертикали в пикселях. На десктопных версиях сайтов обычно используется кегль от 16 до 18 пикселей, а подписи к фотографиям можно сделать кеглем 14 или 15.

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

Ксения Крылова
В мобильной версии я не советую уменьшать кегль. Наоборот, лучше сделать его немного больше, если это уместно.

❌ Мало места для заголовков. Иногда разработка адаптивного дизайна начинается ещё до того, как для сайта написаны все тексты. Поэтому дизайнер может ошибиться, когда будет проектировать области заголовков и подзаголовков.

Есть риск заложить для них мало места — например, всего одну строку или две, но неполных. Если текст не влезет, придётся двигать все элементы макета и менять их расположение.

Ксения Крылова
Рекомендую оставлять для заголовков больше места и ставить в текстовые блоки длинный «рыбный» текст.

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

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

Но если для мобильной версии такой вариант годится, то для десктопной — нет.

На широком экране строка получается слишком длинной, и её неудобно читать. Взгляд сначала долго двигается по одной строке, а потом долго перемещается из её конца в начало следующей. В итоге чтение занимает больше времени и требует больше внимания.

Идеальная длина строки для десктопных сайтов — 60–70 символов с пробелами. А если это мобильная версия, лучше не делать строки длиннее 40–60 символов.

Совет эксперта

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

Статью подготовили:

Поделиться

Читать также:

Что такое юзабилити и как его улучшить

Читать статью

Модульная сетка в дизайне лендингов: как сверстать макет быстрее и проще

Читать статью

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

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

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

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

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

1. Что такое адаптивный дизайн?
2. Что такое адаптивный дизайн?
3. Плюсы и минусы адаптивного дизайна
4. Плюсы и минусы адаптивного дизайна
5. Ключевые выводы

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

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

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

По словам Эми Шейд из Nielsen Norman Group, UX-дизайнеры, участвующие в создании адаптивного дизайна, должны тесно сотрудничать с разработчиками, чтобы макет можно было использовать на экранах разных размеров. Пользовательский опыт будет меняться вместе с элементами страницы, поэтому для UX-дизайнера важно убедиться, что сайт сохраняет удобство использования при переформатировании. Один из способов сделать это — убедиться, что самый важный контент имеет приоритет на разных устройствах, особенно на самых маленьких размерах экрана.

В адаптивном дизайне для каждого экрана устройства создается свой макет веб-сайта. По мере загрузки сайт распознает размер экрана и отображает макет, созданный для этого окна просмотра. Фактически, вы можете создать различный пользовательский интерфейс для каждого из шести распространенных размеров экрана от очень маленького до очень большого: 320 пикселей, 480 пикселей, 760 пикселей, 960 пикселей, 1200 пикселей и 1600 пикселей.

Однако, поскольку разработка веб-сайта для шести различных размеров экрана заняла бы невероятно много времени, работу можно ограничить, обратившись к пользовательской аналитике для существующей версии сайта, чтобы определить размеры экрана, на которых пользователи чаще всего обращаются к нему. Например, если аналитика показывает, что большинство пользователей используют сайт на своих Apple iPad и мобильных телефонах Samsung Galaxy, вы должны разработать пользовательский интерфейс специально для этих двух размеров экрана, а не для всех шести возможных размеров экрана.

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

С другой стороны, адаптивные веб-сайты требуют от разработчиков большего количества кода, и даже когда UX-дизайнер и разработчик тесно сотрудничают, чтобы убедиться, что макет можно использовать на как можно большем количестве устройств, невозможно контролировать макет на каждом одно устройство. В результате могут быть определенные устройства, на которых веб-страница не организована так, чтобы обеспечить наилучшее взаимодействие с пользователем. Кроме того, поскольку код для всего веб-сайта доставляется независимо от того, с какого устройства осуществляется доступ к сайту, адаптивный сайт может загружаться медленнее. Это также может поставить под угрозу пользовательский опыт.

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

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

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

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

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

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

5. Основные выводы

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

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

Теперь, когда вы знаете разницу между отзывчивым и адаптивным дизайном, вы можете узнать больше. Если это так, вы найдете эти статьи полезными:

• 5 блестящих примеров дизайна UX
• Как провести редизайн UX
• 9 вдохновляющих примеров каркасов веб-сайтов и приложений

Адаптивный и адаптивный дизайн: какой выбрать?

Автор: Kitakabee, участник сообщества — 20 декабря 2022 г.

Содержание

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

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

Что такое адаптивный дизайн?

Адаптивный веб-дизайн — это динамический макет, использующий медиа-запросы для калибровки формата сайта в соответствии с типом устройства. Адаптивный дизайн обычно строится на гибкой сетке с одним макетом, который интуитивно адаптируется к интерфейсу. Точки останова CSS имеют решающее значение для адаптивного дизайна для масштабирования элементов дизайна.

Преимущества и недостатки адаптивного дизайна

Преимущества  

• Этот подход более экономичен с точки зрения затрат и времени, поскольку дизайнеры сосредоточены на создании единого макета.
• Его также легче поддерживать и обновлять, поскольку он использует один URL-адрес для каждой страницы.
• Оптимизация для SEO.
• Обеспечивает единообразие пользовательского интерфейса на всех устройствах.
• Поскольку этот подход более популярен, многие готовые шаблоны доступны с расширенными функциями на популярных CMS, таких как WordPress или Joomla.

Недостатки 

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

Примеры адаптивных веб-сайтов

• Dropbox

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

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

• Shopify

Всемирно известный сайт электронной коммерции поддерживает единый процесс проектирования для всех интерфейсов. Гамбургер-меню для мобильной версии заменено на полноценную панель навигации для настольных версий. Для мобильной версии Shopify использует более светлую цветовую палитру в пользовательском интерфейсе, что дает ощущение расширения на самых маленьких экранах. Они также изменили положение своей кнопки CTA на разных экранах. В мобильных версиях вы можете найти его под полем формы, а в версиях для планшетов и компьютеров — справа.

• Slack

Веселая и необычная платформа для обмена сообщениями хорошо интегрирует ориентированный на человека подход в основной дизайн интерфейса. Макет дизайна с тремя столбцами для настольной версии меняется на макет с одним столбцом для мобильных пользователей. Slack также персонализировал кнопку CTA для разных экранов. В версиях для мобильных устройств и планшетов он расширяется по всей ширине столбца с текстом «Получить Slack для iOS», а в версии для ПК кнопка призыва к действию немного меньше и расположена в верхнем левом поле с текстом «Попробовать бесплатно». ».

Что такое адаптивный дизайн?

Вместо того, чтобы работать над единой структурой макета, адаптивный дизайн предлагает индивидуальные макеты для разных устройств. Сайт определяет размер интерфейса и загружает пользовательский макет, предназначенный для адаптации к этому конкретному размеру экрана. При таком подходе дизайнеры обычно создают шесть наиболее часто используемых разрешений экрана: 1600 пикселей, 1200 пикселей, 960 пикселей, 760 пикселей, 480 пикселей и 320 пикселей. Однако можно разработать больше пользовательских макетов, чтобы они соответствовали экранам других размеров.

Преимущества и недостатки адаптивного дизайна

Преимущества

• При обновлении существующего веб-сайта начинать с нуля иногда не представляется возможным. Сложные веб-сайты часто используют устаревший код. Следовательно, адаптивный подход к дизайну избавит вас от необходимости перекодировать ваш сайт.
• Веб-сайты, созданные с использованием этого подхода, обычно превосходят тесты скорости в 2–3 раза по сравнению с адаптивными сайтами.
• Улучшает взаимодействие с пользователем на разных устройствах, поскольку каждый макет настраивается для конкретных экранов.
• Использование этого подхода приводит к ускорению загрузки, поскольку макеты оптимизированы по категориям.
• У дизайнеров гораздо больше контроля над элементами дизайна.

Недостатки

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

Примеры адаптивных веб-сайтов

• Amazon

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

• IHG

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

• ИКЕА

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

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

Адаптивный дизайн	Адаптивный дизайн
Калибровка одного макета для разных устройств	Настройка различных макетов для разных устройств
Меньше времени и более рентабельный	Процесс и трудоемкость; следовательно, занимает больше времени и стоит дороже
Замедляет загрузку на мобильных устройствах	Ускоряет загрузку на всех устройствах
Минимальный контроль над элементами дизайна в разных макетах	Неограниченный контроль над элементами дизайна в разных макетах
Оптимизация для SEO; повышает эффективность сканирования и индексирования	Меньше SEO-оптимизации, индексация занимает больше времени из-за нескольких URL-адресов
Один URL-адрес для каждой страницы	Несколько URL-адресов для каждой страницы, в зависимости от количества созданных макетов
Идеально подходит для малых и средних компаний и новых предприятий	Лучше всего подходит для существующих компаний с существующими сложными веб-сайтами
Обслуживание сайта требует меньше усилий	Обслуживание сайта требует гораздо больше времени и усилий

 

Как протестировать адаптивные и адаптивные веб-сайты в BrowserStack?

Независимо от того, выберете ли вы Адаптивный или Адаптивный, необходимо протестировать ваш сайт на реальных устройствах. BrowserStack Live — это облачная платформа, которая предлагает в режиме реального времени анализ совместимости дизайна вашего веб-сайта на более чем 3000 устройствах и браузерах. Для этого вам сначала нужно зарегистрировать бесплатную учетную запись на BrowserStack.

Получите бесплатную учетную запись BrowserStack

• Войдите в свой профиль BrowserStack и перейдите на панель инструментов. Выберите ОС, устройство и версию браузера.

• Введите URL-адрес веб-сайта и выберите устройство и браузер. Дождитесь загрузки результатов живого теста.

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

Адаптивный или отзывчивый: как правильно выбрать

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

1. Содержимое заголовка : Содержание шапки — первое, что впечатляет посетителя. Он содержит основную информацию о бренде, предлагаемых продуктах, CTA и т. д. Хотя в настольной версии может быть много места для маневра, вы должны логически расставить приоритеты своей информации для меньшего экрана.
2. Размер шрифта и удобочитаемость : При выборе подхода к дизайну учитывайте, что для небольших экранов требуется другой размер шрифта, чем для больших экранов.
3. Значок меню и панель навигации : Хотя значок гамбургера является типичным выбором для устройств с небольшим экраном, расширенная панель навигации хорошо работает с настольными вариантами.
4. Визуальная иерархия: Поддержание согласованной визуальной иерархии на всех устройствах значительно повышает удобство работы пользователей. Важно последовательно структурировать элементы, чтобы пользователь, переключающийся с рабочего стола на мобильный, не запутался.