Основы адаптивного дизайна сайта

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

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

В двух словах, адаптивный веб-дизайн (RWD) — это подход, который позволяет дизайну и коду соответствовать размеру экрана устройства. Это дает вам оптимальный обзор, независимо от того, смотрите ли вы на 4-дюймовый мобильный телефон на Android, iPad mini или 40-дюймовый дисплей.
Сравните, как выглядит сайт в статичном виде, и с адаптивным дизайном:

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

Почему адаптивный дизайн так важен?

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

Основным ключом к адаптивному дизайну является знание вашей аудитории и какое устройство они используют для просмотра вашего сайта. Сколько из вашего текущего трафика с ПК, планшета или мобильного? Примерно 56 % трафика на сайтах США на сегодняшний день поступает с мобильных устройств. Сегодня в мире около 2,6 миллиардов пользователей смартфонов, а к 2020 году их будет более 6 миллиардов. Мобильный дизайн никогда не был важнее, чем сейчас.
Очень важно разработать свой сайт под разные устройства, но задача становится сложнее при адаптации к различным браузерам. Каждый крупный браузер имеет свою мобильную версию и отображает сайты по-разному. Что еще сложнее, есть множество версий браузеров, которые нужно обслуживать, и вы не можете быть уверены, что все будут в последней версии. Поэтому важно, чтобы дизайн работал и отвечал на различные версии браузера.
Вы растеряны и не знаете, как адаптировать ваш сайт? Не беспокойтесь, задача адаптировать дизайн для всех версий браузера, а также аппаратных устройств – вечная проблема индустрии. Лучший ответ — просто проверить свой сайт на максимально возможном количестве устройств, как можно более старых и старых. (И нанять супер-гуру-разработчика!)

На какие параметры сайта рассчитывать?

Нет никаких стандартных параметров сайта. Есть сотни устройств и размеров моделей, и разрешения экрана постоянно меняются. И каждый сайт должен привлекать пользователей на разных устройствах. Например, вы с большей вероятностью прочтете рецепт на своем мобильном устройстве (когда вы на кухне) но скорее всего будете искать учебник Photoshop на ПК (когда захотите узнать, как сделать что-то в Photoshop).
Вы можете узнать, какие браузеры и размеры веб-страниц наиболее актуальны для вашего сайта с помощью Google Analytics. Как же создать дизайн для огромного количества браузеров и размеров устройств и не сойти при этом с ума?

Попробуйте создать как минимум 3 формата

У адаптивного дизайна сайта должно быть не менее 3 макетов для разной ширины браузера. Конкретные числа, которые мы приводим в качестве примера, — это то, что используется на 99designs, но могут быть и другие.

Маленький: до 600 пикселей. Так будет отображаться контент большинства телефонов.
Средний: 600 – 900 пикселей. Так будет выглядеть контент на большинстве планшетов, некоторых крупных телефонах и небольших дисплеях нетбуков.

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

О чем стоит задуматься:

    • Опыт пользователя стоит на первом месте: адаптивный дизайн должен быть чем-то большим, чем преобразование дисплея ПК в мобильный экран. Мы должны учитывать опыт пользователей, их деятельность и нужный им контент, который они ищут с мобильного устройства.
    • Не разрабатывайте дизайн только под последние мобильные новинки с определенным размером экрана. Вместо этого сконцентрируйтесь на своем контенте. Как формат и элементы будут работать на ПК, и как эти же элементы будут адаптироваться друг к другу на мобильном устройстве?
    • Действие: иерархия контента очень важна, особенно на мобильных устройствах. Не забывайте, что меньше значит больше! Мобильный браузинг по сравнению с ПК сфокусирован на более ограниченном пространстве, поэтому пользователям должно быть максимально понятно, как читать ваш сайт, что вы хотите до них донести и что он собой представляет. Также подумайте о главном действии страницы. Если вашей целью является заставить людей нажимать кнопку «связаться с нами», то не скрывайте ее на странице под плитами текста. На этой основе и стоит разрабатывать ваш дизайн и контент.

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

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

Тач-панель открывает новые возможности для дизайна. Людям нравится взаимодействовать с контентом с помощью рук — это дает пользователю чувство причастности. На мобильных телефонах и планшетах пользователи могут нажимать на экран для масштабирования или же перемещать изображения по экрану. Взаимодействие значительно влияет на дизайн. Например, если у вас есть галерея изображений, постарайтесь избежать использования стандартной карусели (маленькие точки), чтобы люди могли перемещаться по каждому изображению. Подумайте о размере пальца человека и о том, как сделать из этого полезное решение для пользовательского интерфейса. Согласно Apple: минимальный удобный размер настраиваемых элементов интерфейса составляет 44 x 44 px. Этот предел часто нарушается, а реальный используемый предел составляет около 25 пикселей. Консольные проекты для ПК должны адаптироваться к простому, интуитивно понятному интерфейсу для небольшого мобильного экрана. Всегда помните об этом при разработкедля разных устройств. Дизайн должен быть гибким, чтобы быть удобным для пользователей всех устройств. Тесное взаимодействие с разработчиками, чтобы понять, что возможно сделать для небольших экранов, поможет в создании дизайна.

Создайте как минимум 3 версии для разной ширины браузера. Мы используем под 600px, 600px-900px, 900px +. Между этими ширинами ваш контент может свободно масштабироваться либо вы можете сохранить 3 заданных формата. Наличие 3 (или более) заданных форматов и добавление полей при необходимости обычно легче реализовать, чем гибкое масштабирование. Однако гибкое масштабирование может обеспечить лучший опыт работы с большим количеством устройств.

Инструменты и ресурсы

  • Ваш браузер может показаться слишком очевидным инструментом для этого, но это самый удобный способ предварительного просмотра ваших проектов в Интернете. Установите несколько разных браузеров, чтобы получить достаточный диапазон обратной связи. Затем начните менять размер окон браузера.
  • Ваше мобильное устройство — еще один очевидный инструмент для использования, который пригодится для предварительного просмотра ваших проектов, потому что он показывает вам, как именно будет выглядеть ваш сайт в нужных вам условиях.
  • Гибкие сетки основаны на разработке формат сайта под процентные значения вместо заданных пикселей. Например, ширина содержимого на экране ПК может составлять 930 пикселей, но вы хотите настроить таргетинг на дизайн до 320 пикселей на мобильных устройствах. Чтобы преобразовать это в масштабируемую фигуру, результат будет равен 320/930 = 34,4%. Когда вы применяете это к размеру мобильного экрана, элементы в макете дизайна будут изменять размер по отношению друг к другу. Нам нравится сетка One% CSS.

Редактор Google — хороший ресурс для быстрого предварительного просмотра вашего сайта на нескольких устройствах.
Медиа-запросы — это тип кода, который будет реализован на вашем сайте при его создании. Важно включить это в код, потому что он создает условия для того, чтобы дизайн волшебным образом приспосабливался к размеру экрана. Например. «Когда размер экрана равен 480px или меньше, измените план компоновки планшета». Попробуйте сейчас, просто сделав окно браузера меньше (если вы на ПК). Вы увидите, что контент автоматически перераспределится по экрану.
Не волнуйтесь, вы не одни — вся индустрия ломает голову над этими вещами. Лучшее, что вы можете сделать – держать руку на пульсе новостей в области UI/UX, согласовывать дизайн с контентом, делать ваши изображения гибкими, обеспечивать удобную навигацию и помнить о том, что комфорт пользователя превыше всего.

Интересные статьи