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

Навстречу отзывчивому процессу разработки

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

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

Зная о разнообразии аудитории сайта, клиент решил, что оптимальным вариантом будет придать ему немного отзывчивости. На стадии планирования команда дизайнеров тщательно изучила каждый элемент контента и задала вопрос: что этот материал дает пользователям мобильных устройств?

Наверное, можно было бы выразить это более завлекательно и интересно, но вообще-то маркетинг не мой конек. Мы стали задавать такие вопросы, потому что считаем, что подход «сначала мобильные» невероятно полезен в процессе создания веб-сайта. Вот как Люк объясняет смысл этого подхода (http://bkaprt.com/rwd/48/):

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

Легко заполнить окно десктопного браузера панелями инструментов социальных сетей, ссылками на похожие статьи, RSS-ссылками и облаками тегов. (Если я не ошибаюсь, то это называется «созданием дополнительной ценности».) Но как только мы вынуждены работать с экраном, размеры которого на 80 % меньше, чем наш обычный холст, несущественный контент и всякий хлам быстро отпадают, и мы можем сосредоточиться на действительно важных аспектах наших проектов.

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

Определяем разрешение

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

_{Табл. 5.1. Список устройств с различным разрешением}

Это не значит, что разрешения выше или ниже этого порога будут проигнорированы или что мы не будем обслуживать устройства, разрешения которых не указаны в списке. (В конце концов, отзывчивый макет строится на базе гибкой сетки, а значит, не будет зависеть от разрешения.) Но такой список помогает определить объем работ и область применения. Зная, какие устройства будут использоваться для отображения нашего дизайна, мы можем более эффективно выполнять свою работу.

Когда список готов, можно приступать к самому дизайну.

Итеративный совместный дизайн

В настоящее время бо́льшая часть проектов строится по принципу «каскадного» процесса разработки, который подра-зумевает разделение всей работы на отдельные, посвященные одной задаче этапы. У каждого агентства могут быть свои особенности, но в целом все придерживаются следующих четырех этапов: планирование, проектирование, разработка и, наконец, представление готового сайта. На каждом этапе создаются документы или файлы (например, карта сайта и каркасное представление на этапе планирования), которые должны быть одобрены клиентом прежде, чем начнутся работы по соответствующему этапу.

Опять же, процесс управления проектами может немного разниться от студии к студии. На этапе проектирования команда дизайнеров создает оригинальный макет в графическом редакторе (Photoshop, Fireworks и т. д.). После утверждения он передается команде разработчиков, которые и превращают его в статические шаблоны HTML.