Отзывчивый веб-дизайн

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

В процессе работы над последними проектами с отзывчивым подходом я обнаружил, что, если объединить этапы проектирования и разработки, такая коллективная работа будет более эффективной. Я называю этот новый этап «проектоработкой». (Шутка.)

Вначале команда дизайнеров представляет макет страницы всей группе. Как правило, это дизайн для стационарных компьютеров (рис. 5.3), хотя иногда мы можем начать с мобильного представления дизайна. Цель заключается в том, чтобы дать всей группе импульс для обсуждения того, как этот дизайн будет согласоваться с различными диапазонами разрешений и типами ввода. Возникают самые разнообразные вопросы: «Как это слайд-шоу будет работать с сенсорным интерфейсом?», «Этот модуль всегда будет свернутым по умолчанию или пользователи стационарных компьютеров увидят больше информации?», «Как этот элемент станет выглядеть (и функционировать), если в браузере не будет JavaScript?»

^{Рис. 5.3. Начнем с изучения готового дизайна для стационарного компьютера и попробуем понять, каким образом он должен измениться для различных браузеров или устройств}

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

«И это до окончательного утверждения дизайна?» – спросите вы. Да. Наша цель состоит в том, чтобы выйти за пиксельные ограничения Photoshop и начать воплощать дизайн, который будет менять свои размеры в зависимости от размеров окна браузера. Поэтому команда разработчиков приступает к созданию отзывчивого дизайна: преобразовывает фиксированную сетку в «резиновую», обсуждает способы гибкого представления различных медиатипов и использует медиазапросы для адаптации нашего дизайна к различным диапазонам разрешений.

После этого мы начинаем менять размеры окна браузера и анализировать соответствующие изменения нашего дизайна (рис. 5.4). Некоторые расширения, как, например, Web Developer Toolbar для Firefox и Chrome (http://bkaprt.com/rwd/49/), на этом этапе могут быть исключительно полезны. Если у вас есть список разрешений (табл. 5.1), вы можете сохранить их в расширении для быстрого доступа в будущем (рис. 5.5).

^{Рис. 5.4. Как я уже говорил, изменение размеров окна браузера позволяет быстро протестировать качество дизайна. Но это лишь первый шаг}

^{Рис. 5.5. Меню Resize в Web Developer Toolbar позволяет изучить содержимое в разрешениях для различных устройств}

Но вспомните: в предыдущей главе мы говорили о том, что изменение размеров окна браузера – это только промежуточный этап. Если вы действительно хотите проверить, как ваша страница будет отображаться на том или ином устройстве, ничто не заменит само устройство. (Если вы интересуетесь приложением для тестирования на мобильных устройствах, я настоятельно рекомендую вам почитать статью Питера-Пола Коха Smartphone Browser Landscape («Многообразие браузеров для смартфонов»), которую вы сможете найти на A List Apart: http://bkaprt.com/rwd/50/. В принципе, даже если вы не собираетесь покупать кучу разных телефонов, все равно почитайте, оно того стоит).

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