Адаптивный дизайн: лучшие практики и рекомендации

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

По данным Statista, в 2017 году на мобильный трафик приходилось 52,64% всего мирового трафика, а это означает, что веб-сайт, плохо оптимизированный для мобильных устройств, теряет примерно половину своего трафика . К концу 2018 года ожидается, что доля глобального трафика для мобильных устройств вырастет до 79%, что является исключительным ростом.

Компании, не имеющие мобильного веб-сайта, отстают с угрожающей скоростью, потому что 8 из 10 посетителей перестанут взаимодействовать с веб-сайтом, который плохо отображается на их устройстве. Пользователям слишком легко нажать кнопку «Назад» и вместо этого попробовать конкурирующий бизнес, и Google даже ранжирует веб-сайты, которые не отвечают, ниже в своем поиске .

Вы можете пройти тест Google для мобильных устройств здесь.

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

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

Чтобы создавать веб-сайты, которые могут конкурировать в современном Интернете, веб-дизайнеры должны быть экспертами в адаптивном веб-дизайне (RWD). С чего начать?

Мобильный подход к адаптивному веб-дизайну

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

1. Мобильные веб-сайты имеют больше проблем с удобством использования (в основном это связано с нехваткой экранного пространства), поэтому практичнее и эффективнее сосредоточить основное внимание на мобильном дизайне.
2. Увеличить мобильную версию проще , чем уменьшить настольную (опять же, из-за нехватки места на мобильных сайтах).
3. Веб-дизайн, ориентированный на мобильные устройства, помогает переоценить то, что необходимо визуально и функционально.

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

• Эта функция/функция действительно необходима?
• Как мы можем разработать что-то минималистичное сначала для мобильных устройств, а затем хорошо масштабируемое для настольных компьютеров?
• Стоит ли этот визуальный эффект времени, необходимого для загрузки на мобильном устройстве?
• Какова основная цель и какие визуальные элементы помогают пользователям ее достичь?

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

Какие разрешения экрана важны для адаптивного веб-дизайна?

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

• 360x640 (маленький мобильный): 22,64%
• 1366x768 (средний ноутбук): 11,98%
• 1920x1080 (большой рабочий стол): 7,35%
• 375x667 (средний мобильный): 5%
• 1440x900 (средний рабочий стол): 3,17%
• 720x1280 (большой мобильный): 2,74%

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

Например, разрешение 360x640 (соответствующее в основном устройствам Samsung с Android) за последний год выросло на 5,43%. Дизайнеры могут использовать ценную информацию, подобную этой, чтобы определить ключевые точки останова, прежде чем приступать к дизайну веб-сайта.

Какие веб-браузеры популярны сегодня?

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

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

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

• Хром: 55,04%
• Сафари: 14,86%
• UC-браузер: 8,69%
• Фаерфокс: 5,72%
• Опера: 4,03%
• Internet Explorer: 3,35%

Адаптивный дизайн заключается не только в том, чтобы «все подошло по размеру», но и в адаптации к возможностям аппаратного обеспечения устройства и веб-браузера , а также к разрешению устройства. Одним из примеров этого может быть то, что, хотя Google Chrome поддерживает свойство CSS overscroll-behavior: (которое определяет, что происходит, когда пользователь слишком сильно прокручивает страницу к краю области просмотра), оно не поддерживается ни в одном другом веб-браузере.

Лучшие практики адаптивного дизайна

Устранить трение

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

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

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

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

Дизайн для больших пальцев

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

Давайте рассмотрим несколько примеров:

• Люди обычно ожидают, что основная навигация рабочего стола будет вверху; однако на мобильных устройствах он должен быть внизу. Большие пальцы не достают до верха комфортно.
• Другие интерактивные элементы также должны быть легко доступны. Это означает, что они должны находиться в центре экрана, потому что большим пальцам труднее достать до краев и углов экрана устройства.
• Чтобы их было легко нажимать, важные ссылки и призывы к действию должны иметь высоту не менее 44 пикселей (маленькие цели касания плохо влияют на удобство использования).

Рекомендуемая литература: Основное руководство по удобству использования мобильных устройств.

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

Мобильное оборудование (например, камера устройства или службы GPS) специально не зарезервировано для нативных приложений, и, как упоминалось ранее, адаптивный веб-дизайн — это не просто «подгонка всего под себя». Это также касается адаптации к возможностям устройства. В случае мобильного веб-дизайна, поскольку мобильные устройства имеют простые в использовании камеры, некоторые микровзаимодействия, такие как ввод данных, на самом деле проще на небольших экранах, если веб-сайты используют преимущества доступного собственного оборудования.

Давайте рассмотрим несколько примеров:

• Сканирование кредитной карты/карты пополнения (поскольку формы часто сложны на мобильных устройствах)
• Обмен фотографиями в социальных сетях, потому что медиафайлы уже есть на вашем устройстве
• Двухфакторная аутентификация (потому что вы уже используете свое мобильное устройство)
• Быстрая проверка акций/аналитики (поскольку мобильные приложения упрощают получение информации)
• Голосовой поиск в Интернете (поскольку громкая связь проще, чем печатать)

Сделать макеты гибкими/адаптивными по умолчанию

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

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

Помните об этих советах при разработке гибких/адаптивных макетов:

• Процентные единицы позволят элементам быть плавными.
• Установка минимальной и максимальной ширины может включить сценарий «но не меньше/больше этого».
• Форматы изображений SVG можно масштабировать вверх и вниз без потери качества, и они не зависят от разрешения (в отличие от JPG и PNG, которые этого не делают).

Не забывайте об альбомной ориентации

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

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

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

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

Несмотря на то, что UX-дизайнеры обычно используют пиксели для разработки веб-сайтов, в реальной сети одна точка больше не обязательно равна пикселю, потому что разные устройства имеют разное разрешение. iPhone X, например, имеет 458 PPI (пикселей на дюйм), поэтому, когда размеры пикселей становятся меньше, мы можем добиться более четкой графики в том же физическом пространстве (Apple называет эту технологию «Retina», а Android называет ее «HDPI»).

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

Инструменты передачи дизайна, такие как Zeplin, Sympli, Marvel и InVision, могут помочь дизайнерам сотрудничать с разработчиками по вопросам, которые являются совместной обязанностью. В то время как дизайнеры выполняют дизайн, а разработчики выполняют код, в целом рабочий процесс проектирования продукта представляет собой командную работу, требующую тесного взаимодействия.

Советы и рекомендации по оптимизации производительности адаптивного дизайна

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

Ленивая загрузка не жизненно важных изображений и видео

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

Условная загрузка

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

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

Адаптивные изображения

Как упоминалось ранее, некоторые устройства отображают больше пикселей на дюйм, что может привести к размытости изображений, если они не экспортируются с правильным разрешением. В зависимости от разрешения устройства некоторым потребуются изображения в двойном (@2x), тройном (@3x) и даже в четыре раза (@4x) размере. Веб-браузеры теперь поддерживают элемент <picture> , который выбирает правильное разрешение изображения в зависимости от устройства.

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

Заключение

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

Современные инструменты проектирования, такие как Adobe XD, Marvel и InVision, позволяют командам тестировать прототипы на реальных устройствах, обсуждать отзывы в контексте и в целом сотрудничать в команде, пока макет не заработает во всех сценариях.

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт