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

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

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

Чтобы помочь вам разобраться в особенностях подхода, мы собрали советы, как сделать адаптивный дизайн, на известных профессиональных ресурсах: 99designs, The Next Web, WIRED.

Не ищите «стандартные разрешения экранов»

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

• Маленькие: ширина до 600px. Это для телефонов.
• Средние: 600px–900px. К таким устройствам относятся фаблеты, планшеты и небольшие нетбуки.
• Большие: 900px. Это ноутбуки и мониторы.

Другую версию мы слышали от представителя крупной российской веб-студии. Они разрабатывают дизайн под 5 разрешений:

• 320x568px
• 360x640px
• 768x1024px
• 768x1366px
• 1080х1920px

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

Разными бывают не только устройства, но и браузеры

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

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

Начинайте с мобильной верстки

Выражение mobile first уже набило оскомину, но актуальность не потеряло. Больше всего проблем возникает с текстом и логотипом. И тут очевидно, что если текст читается на телефоне, то у вас будет меньше проблем на планшетах, а затем — на десктопе.

Изображения должны подходить под все устройства

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

Верстка мобильного меню — это отдельный вопрос

Чаще всего элементы меню на мобильных устройствах убирают в иконку «Гамбургер»:

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

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

В плане навигации на мобильных устройствах специалисты чаще всего хвалят решения YouTube:

Учитывайте жесты

На планшетах и мобильных устройствах людям нравится управлять контентом с помощью жестов:

• Tap (Тап) — это клик
• Swipe (Свайп) — прокручивание экранов влево-вправо
• Scroll (Скролл) — прокручивание экрана вверх-вниз
• Long Press (Долгое нажатие) — как клик правой кнопкой мыши
• Pinch (Стягивание)
• Spread (Растягивание)
• Double tap (Двойное нажатие)
• Сильное нажатие

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

Согласно гайдлайнам Apple, минимальный размер элементов для тапа — 44x44px. Правда, этот стандарт часто нарушается, и веб-дизайнеры уменьшают показатель до 25x25px.

Не делайте адаптивные макеты под устройства абсолютно разными

Это особенно опасная ошибка, если вы делаете не резиновую верстку, а отдельный HTML под каждый макет.

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

Найдите крутого разработчика в помощь

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

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

А если вас интересует сайт как объект бизнеса, а не дизайна, изучите инструкцию Комплето к разработке сайтов.