Подбор контрольных точек для отзывчивого дизайна

21 Сер
21.08.2014

Пожалуй, начну с определения понятий. Повторение — мать учения ).
Для многих понятие адаптивный и отзывчивый дизайн являются одинаковыми и, зачастую, говоря “адаптивный” подразумевают “отзывчивый”. В одной из приведенных ниже статей автор описывает свое видение этих понятий. Оно и приведено ниже своими словами.

Адаптивный — сайт сверстан так, что в каждой контрольной точке (ширина, высота, ориентация) он изменяет свой внешний вид, а также изменяется функционально (т.е. не только СSS, но также и разметка, и JS).
Отзывчивый — сайт может быть адаптивным, но также будет иметь переменную / ликвидную верстку между контрольными точками, т.е. дизайн будет подстраиваться поб любое разрешение экрана.

Приступая к использованию технологии “отзывчивый дизайн”, каждый сталкивается с вопросом выбора контрольных точек для конкретного проекта. Некоторые выбирают контрольные точки согласно разрешений привычных устройств компании Apple (например, 320px для мобильных, 768px для планшетов, 1024px для компьютеров). Да только разрешений экранов такое множество, что выбрать несколько оптимальных точек для всех случаев и проектов невозможно.

Автор одной из статей, подход которого я полностью поддерживаю и сама использую, предлагает выбирать точки в зависимости от поведения контента при сужении размеров окна браузера. Данный подход является оптимальным, т.к. он учитывает индивидуальный особенности каждого проекта и заботится о всех пользователях, владеющих всевозможными устройствами. Основная суть такого выбора контрольных точек заключается в том, что создается резиновая верстка для компьютера, затем браузер сужается и наблюдается поведение блоков. Если при какой-то ширине браузера, блоки выглядят нечитабельно, падают, ломается верстка страницы, то выбирается предыдущий размер окна, когда еще все хорошо. И для ширины меньше выбранной переопределяются положение и размеры блоков. Далее снова уменьшаем размеры браузера, отлавливаем контрольные точки, когда верстка выглядит некрасиво, и исправляем с помощью media query.

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

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

Почитать:
Setting Breakpoints in Responsive Design
How I’m skinning my responsive cat
Responsive Design: Why You’re Doing It Wrong
Responsive Typography: The Basics

Теги: , , , , , ,