Адаптивный дизайн, это именно тот вид работ, при которых дизайнеру просто необходимо иметь минимальные знания о верстке и в том числе об адаптивной. Именно тут, как никогда нужно четко понимать концепцию «потока», а так же принципы расположения, отображения и позиционирования элементов на странице. И уже основываясь на знании о том, как ведут себя элементы в потоке, если вдруг изменится разрешение экрана или его пропорции, хороший дизайнер рисует несколько макетов с адаптивным дизайном.
Рисуется, как правило 2-3 макета (десктоп, планшет, телефон). Всегда необходим макет для десктопа (широкоформатного монитора), разрешение в ширину, как правило, 1600 или 1920 пикселей. И дальше уже, в зависимости от пожеланий и возможностей рисуются либо отдельно макеты для планшета и телефона, либо они комбинируются вместе и получается 1 макет для мобильных устройств.
Поведение элементов
Стандартным поведением элементов при изменении ширины экрана является соответствующее ему изменение ширины блочных элементов и перенос строчных. Представьте себе картинку на весь экран и под ней текст. При уменьшении ширины, картинка будет уменьшаться, а текст будет переноситься на строчки ниже. Так и происходит со всеми элементами в потоке.
Если в макете для десктопов присутствуют некие колонки, то в макете для планшетов этих колонок должно стать меньше, а в макете для телефонов колонка должна остаться всего одна. То есть чем уже становится экран в ширину, тем меньше колонок мы должны видеть. Это классический подход к адаптиву. В итоге в телефонном макете все элементы должны располагаться в столбик один за другим, при этом их порядок не должен меняться. В каком порядке колонки шли слева направо, в таком же порядке они должны идти сверху вниз.
Порядок элементов
Очень важно понимать, что нарушать порядок элементов крайне нежелательно. Еще раз: все элементы в потоке идут сверху вниз и слева направо, если мы, конечно же, изначально не меняем этот порядок специальным образом (обычно для стран, где текст идет справа налево). То есть, если в первоначальном макете некие элементы располагались одним образом, то менять их порядок в другом макете крайне нежелательно. Скорее всего верстальщик найдет способ как их расположить иначе, для этого есть множество хитрых уловок, но в целом такие приемы могут приводить к ошибкам косякам в дальнейшем, поэтому их стоит избегать.
Например, в макете для десктопа был блок из трех элементов. Слева располагалась картинка, а справа от нее заголовок и под ним текст. Дизайнер решил, что в мобильной версии нужно расположить элементы следующим образом: сначала заголовок, под ним текст и в самом низу, под ними — картинка. Это в корне меняет порядок и добавляет уйму головной боли верстальщику. В изначальном макете порядок был: картинка, заголовок, текст. Но дизайнер изменил этот порядок на: заголовок, текст, картинка.
Это пример того, как делать не надо. В данном случае у нас было изначально 2 колонки. В первой колонке была картинка, а во второй заголовок с текстом. Если мы сокращаем число колонок до одной, то первой должна оставаться картинка, так как колонка с ней была первой.
Особенные элементы
Под особенными элементами я имею ввиду меню, модальные окна и прочие элементы, которые довольно сильно меняют свой вид на мобильных устройствах, относительно десктопа.
Классическое горизонтальное меню при недостаточной ширине экрана принято скрывать, а отображать лишь иконку из трех полосок, как устоявшийся символ. При нажатии на иконку отображается то же самое меню, но уже в вертикальном виде, пункты идут один под другим в том же порядке, как они до этого шли слева направо.
Самое главное иконку рисовать примерно на том же месте, где до этого было меню. Если оно было справа в шапке, то и иконка должна оставаться там же.
Модальные окна фиксированной ширины в дизайне на декстопе, в мобильной версии принято разворачивать на полный экран. В этом случае так же главное помнить о порядке элементов в модальном окне и оставлять его таким же, как он и был до этого. Я предупреждаю об этом, потому что зачастую при разворачивании такого окна на весь экран, иногда появляется много места, которое хочется как-то заполнить, и дизайнеры начинают переставлять элементы внутри окна, чтобы они максимально логично занимали свободное пространство. К сожалению, хоть с эстетической точки зрения это может выглядеть хорошо, но с технической это будет полным бардаком. Вы можете обсудить данный момент с верстальщиком и найти компромисс, но если такой возможности нет: лучше оставьте все элементы на своих местах.
Анимация, видео, скрипты
Сегодня даже не каждый десктопный компьютер может похвастаться хорошей производительностью и быстрым интернетом, чего уж говорить о мобильных устройствах. Поэтому необходимо тщательно избегать всех элементов, которые имеют большой вес или могут заметно снизить производительность на телефонах или планшетах. Это прежде всего видео, тяжелые картинки (в том числе фоновые), различного рода анимация и скрипты.
В основном, работа по оптимизации производительности, это конечно задача верстальщика и программиста. Однако дизайнер уже на уровне создания макета должен закладывать концепцию «облегченности». Можно заменить все тяжелые фоновые картинки на что-то попроще, например на паттерны или монотонный фон, какие-то элементы вообще убрать. Не включать на страницу видео, которое должно проигрываться автоматически. Не закладывать анимацию или какое-либо сложное поведение.
Итог
В целом, общий посыл к адаптивному дизайну таков:
- Чем проще, тем лучше. Сложности вызывают торможение на мобильных устройствах и перерасход трафика пользователя. Вы можете развернуться по полной в широкоформатном макете, но не в мобильном.
- Соблюдайте порядок. Порядок элементов должен быть одинаков во всех макетах. Если же вам очень нужно его изменить, то согласуйте эти изменения с верстальщиком. Иначе вы можете просто сами подложить себе мину и перерисовывать все равно придется, но вы еще потратите время другого человека и затормозите процесс.
