Интернет, как мы знаем, меняется.В прошлом,
дизайнеры и разработчики перескались только в одной плоскости: на экране
монитора. В последние годы, однако, появилось множество интернет-устройств различных
форм и возможностей, и это значит что теперь мы должны проектировать наши
веб-сайты, таким образом что бы ими было удобно пользоваться на экранах
различных размеров, форм и разрешений, какие только моэжно себе представить.
Наши старые разметки с фиксированной шириной
экрана остались в прошлом. Так что же делать? Ответ, мой дорогой читатель,
лежит в адаптивном веб-дизайне (АВД).
Что такое адаптивный веб дизайн?
Идея адаптивного веб дизайна, термин кстате
принадлежит Этану Маркоту, заключается
в том, что наши веб сайты должны адаптивровать разметку страницы для
эффективного отображения на любом устройстве.
В его книге “Адаптивный Веб Дизайн”, он выделяет
три составные части адаптивного веб дизайна:
1. Текучий
грид
2. Текучие
изобраджения
3. Медиа
очереди
Поскольку данная публикация предназначена в
первую очередь для дизайнеров а не разработчиков, и поскольку я не хочу
написать по объему столько же, сколько и Этан, я не буду обсуждать эти три
вещи.
Однако, для вас, как дизайнера, важно понять
базовую концепцию АВД, что позволит вам лучше проектировать страницу, которая
после магии разработчика станет адаптивной. Очень рекомендую прочесть эти три
статьи Этана: Текучие
гриды, Текучие
изображения и Адаптивный веб
дизайн.
Иллюстрация Кевина Корнелла
Если вы прочитаете только одну, прочитайте
последнюю, написанную в Мае прошлого года. Прочитав ее, я, да думаю не только я
один, изменил представление о том, как выглядит Интернет. Работа Этана - гениальна, и я уверен, что каждый, кто
зарабатывает на жизнь с помощью Веба обязательно должен ее прочитать.
Роль дизайнера
Если вы являетесть дизайнером, который занимается
только лишь дизайном, т.е. вы не отвечаете за HTML и CSS сайта,
над которым вы работаете, большинство из того, о чем здесь идет речь, вам не
пригодится. Вы вообще можете вполне резонно задать вопрос а зачем вообще вам
знать о адаптивном веб-дизайне.
Я полагал, что кто бы ни занимался дизайном
сайта, он должен позже вдохнуть в него жизнь, с помощью HTML и CSS. Я понимаю, что это не
так для большинства проектов, и я уважаю возможности тех людей, которые
занимаются только вопросами дизайна или только сопудствующего программного
кода.
Важно также понимать, что веб-сайт это не только
дизайн, или не только код – это их совместное взаимозависимое сочетание. Для
того что бы действительно понять как создавать веб-сайт, вы должны понимать,
как дизайн позже будет взаимодейтсвовать с кодом, хотя бы в общих чертах.
Я напомню еще раз: эта статья для дизайнеров. В
последующих подразделах, я буду рассказывать для вас, как дизайнеров, что вы
должны изменить в своей работе для того что бы получить в итоге адаптивный веб
дизайн.
Грид-система и вы
Грид-система – это потрясающий пример фиксированного
дизайна, основанного на использовании грида к которому вы должны стремится.
Даже если вы не стремитесь получить адаптивный дизайн,
вам следует использовать что то вроде грид-системы. Как современный и
образованный дизайнер, вы должны понимать что такое грид и как можно его
использовать, поэтому я не буду заострять на этом внимание.
Одним из столбов адаптивного веб-дизайна является
текучий грид. Очевидно, это значит что ваш грид, который традиционно измеряется
в пикселях, сейчас должен быть переделан в процентное отношение к ширине
страницы. Рельная вычисляемая ширина каждого столбца в адаптивном сайте
изменяется все время с изменением размеров окна браузера и не может быть
гарантировано одинкаовой на различных устройствах.
Поэтому вы должны использовать грид при проектировании
адаптивного веб дизайна. Это необходимо, а не желательно. Вы не можете создать адаптивную
рзметку без дизайна построенного на гриде; и никаких вопросов, просто нельзя и
все.
Зная что ваш дизайн не будет иметь одинаковые размеры
для каждого столбца как на вашем рабочем экране, можно сделать некоторые другие
допущения, которые вы должны держать в уме для беспроблемного масшабирования
грида.
1. Попробуйте
отказаться от текстурированных границ ваших столбцов, как показано ниже.
Такие вещи будет
не совсем просто сделать для ваших разработчиков, потому что они не очень
хорошо масштабируются по горизонтали. Если вы сделаете колонку шире или уже,
текстурированные границы начнут плясать.
2. То же самое относится и с к горизонтальному
градиенту
Не делайте это по той же причине что и в предыдущем
пункте, а именно из-за невозможности масштабировать горизонтально. Да это
возможно с CSS3, но если вы предполагаете поддержку не только
самых свежих браузеров, то для них этот эффект будет бесполезен.
3. Если вы
используете текстурированный фон в колонке, убедитесь, что ее можно использовать
в режиме повторений. Можно: зерно, плитку, гранж и т.д. Нельзя: фотографии,
иллюстрации и все остальное которое нельзя использовать tile режиме
Размышения о пропорциях
При горизонтальном уменьшении масштаба рано или
поздно наступит момент, когда текст размещенный на странице окажется слишком
большим. Уверен что заголовок в 100pt выглядит здорово в вашем PSD, но он попросту не сможет
уместиться на экране iPhone например: он будет слишком большим и будет занимать
несколько строк, уменьшая доступное пространство для остального контента.
Здесь разработчик, использую CSS уменьшит
размер шрифта для более корректного отображение на экране. Это дизайнерское
решение, поэтому как дизайнер вы должны иметь здесь право голоса, верно?
Для того что бы помочь разработчику и вместе с
этим поддержать целостность своего оригинального дизайна, вы должны решить,
какой текст на странице должен оставаться неизменным, и не изменять своего
размера ни при каких обстоятельствах, а какой может изменяться. Хорошим примером
одноразмерного текста может быть основной текст или небольшие заголовки, которые
преставляют собой слега увеличенную версию основного текста.
Вам также необходимо решить, относительно изменяемого текста, как он
должен быть изменен.
Я опишу неправильный способ: x должен всегда быть на 20pt больше чем y. Такое
решение не только станет головной болью разработчика, но также будет бессмысленным на адаптивных панелях, потому
что вы мыслите в константах, значении никогда не изменится вне зависимости от
размера экрана. Для АВД, это серьезная ошибка, поскольку не принимает во
внимание существующую изменчивость веба.
А вот здесь представлен правильный способ: x должен
быть в полтора раза больше y.
Такой подход учитывает реальное значение дизайна: сделать текст большим или
маленьким в зависимости от размеров другого текста на странице. Постоянное
значение например 24pt или
67pt –
бессмысленно.
Когда вы с этим разобрались, убедитесь поделится
этой информацией с разработчиком. Это единственный способ быть увереным что
ваши дизайнерские решения, будут отображатся на рельаной странице
соответсвующим образом.
Сделайте дизайн модулярным
Последняя часть адаптивного паззла – это медиа
очереди. Если вы незнакомы с этим термином, медиа очереди – это способ
применения правил CSS к странице основанный на размере отображающего браузера.
У этой функциональности невероятная гибкость, благодаря
которой вы можете изменять и постраивать разметку страницы под различные варианты отображения
на различных браузерах.
Для того что бы преуспеть в этом вы должны
научится мыслить о различных частях сайта, например таких как главный контент,
сайдбар, заголовок и панель навигации, не как о частях большого паззла, который
может находится в одном определенном месте по отношению к другому, а как о
модулях, которые могут быть перемещены, уменьшены или увеличены перемешаны
между собой без потери их изначальной ценности и предназанчения.
Ниже представлен пример: представьте вы создаете
сайт которые выглядит так как показано ниже (я уверен вы работали с подобными
расположение елементов ранее):
Важной частью данного примера является
идентификация групп элементов которые должны находится вместе при любом
отображении. Например, все ссылки навигации должны оставаться в одном месте,
потому что иначе они потеряют смысл. Это модуль, секция информации которая
может быть перемещена в другое место без потери своей смысловой нагрузки.
Построении сайта с помощью подобных модулей
позволяет сделать более простым представление сайта на различных устройствах.
Например:
Посмотрите как перемещение модулей в другие места
не повлияло на то, что они по прежнему выполняют свою функцию по отображению
требуемой информации как планировалось изначально, но в более простой форме
предназначеной для отображения на мобильных устройствах с меньшим размером
экрана.
Вам ничего не придется менять в вашей разметке,
если страница базируется на модулях, это просто иной способ отображения той же
разметки. Надеюсь данная информация позволит вам принять более взвешеные
решения для ваших будущих проектов.
Выводы
Как и многое другое в интернете Адаптивный веб
дизайн – это эволюция, а не революция. Это просто следующий шаг в разработке
для Веб, а не переосмысление всего. Как дизайнеры, мы должны постоянно
адаптировать наши рабочие процессы к изменяющейся действительности, и это не
исключение.
Адаптивный веб дизайн – это будущее, или как
минимум, станет будущим, когда разработчики и дизайнеры сделают его таковым.
Как веб дизайнеры и разработчики, мы единственные, у кого есть власть воплотить
подобный стандарт в жизнь. Так сделайте
это, для себя, для меня и для всего
большого Интернета!
