Если вы интересуетесь адаптивным веб-дизайном, но не знаете с чего начать — эта статья для вас! Это первая часть трилогии «Адаптивный сайт за неделю», в которой Пол Роберт Ллойд рассказал о проектировании адаптивного дизайна, так просто, словно это рецепт приготовления супа.

Мнение: Григорий Коченов Креативный директор Agima

Мы часто сталкиваемся с тем, что клиенты и сами разработчики боятся вообще браться за такие проекты. Пора показать, что все может быть просто. Рецепт в помощь :)

Кажется, выражение «адаптивный веб-дизайн» уже прочно вошло в обиход — на то есть свои причины: с каждым днем новых устройств выхода в интернет становится все больше, каждый со своими возможности и функциями, а это значит, что теперь стало неразумно создавать сайты с фиксированной шириной.

Мнение: Григорий Коченов Креативный директор Agima

Важно отметить, что резиновые сайты в их классическом понимании нас тут не спасут. От 320 до 1920 — такой разброс может обеспечить только адаптивный подход. Термин «адаптивный» несколько отличается от английского «responsive», но у нас он уже прижился и дословный перевод «responsive» как «отзывчивый» смотрится как-то глупо. Странно, что переводчики издательства Манн, Иванов и Фербер этого не учли (http://mann-ivanov- ferber.ru/books/book-apart/responsive-web-design/).

Правда в том, что и раньше в этом смысла особого не было. До настоящего момента лучшей практикой считалась разработка ряда решений, исходя из разрешения экрана или методов ввода. Если вы когда-нибудь создавали веб-сайт шириной 960рх, только чтобы просмотреть его на нетбуке друга (это взято из болезненного опыта), вы поймете, почему это не было самым разумным решением. Теперь, в эпоху смартфонов и планшетов, становится ясно, что традиционными методами мы уже многого не добьемся.

К счастью, с появлением CSS media queries и пониманием того, что веб — это самостоятельная среда, мы начали принимать настоящую природу платформы, чествуя, что универсальность — ее сильная, а не слабая сторона.

Цикл статей «Адаптивный сайт за неделю» позволит вам максимально углубиться в технологию создания адаптивных сайтов. Разработанный Этаном Маркотом метод включает: резиновые макеты, гибкие изображения и media queries, которые позволяют нам создавать сайты, адаптирующиеся под любые устройства.

Я наглядно разберу этот метод на примере простой медиагалереи. Для примера я создам небольшой веб-сайт посвященный моей недавней поездке по территории США, и вы, не стесняясь, можете менять в нем код и дизайн на свое усмотрение.

Мнение: Григорий Коченов Креативный директор Agima

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

Дизайн для неизвестного

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

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

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

Привычный рабочий процесс заканчивается, когда мы начинаем оценивать, как макеты с новым дизайном будут подстраиваться под разные условия. Как при использовании любого нового инструмента или технологии стоит рассматривать более плотные и гибкие способы совместной работы, (такие как, например, AGILE). Большинство сложнейших вопросов, связанных с адаптивным веб-дизайном, могут решиться очень просто посредством обсуждений, экспериментов и итераций.

Прагматичный подход к дизайну

Во-первых, мы начинаем разработку визуального оформления сайта с варианта для монитора обычного ПК. Во-вторых, мы формируем общий стиль сайта и всю его визуальную эстетику, часто основываясь на анализе ключевого контента. Например, если мы разрабатываем сайт о еде — мы начнем со страницы рецептов; если новостной сайт — с информационной страницы.

Мнение: Григорий Коченов Креативный директор Agima

Очень странный подход. Я бы поменял очередность и сначала бы стал думать о структуре, а потом уже о рисовании дизайна. Слова «если мы разрабатываем сайт о еде — мы начнем со страницы рецептов» — это явное упрощение. Клиенты обычно хотят все и сразу и надо структурно разобраться в контенте, прежде чем вообще открывать фотошоп.

И не только потому, что это важная страница на сайте, а в том числе и потому, что она, скорее всего, содержит достаточно структурированный контент, чтобы на основе него мы могли создать типографическую палитру. Мы также думаем о том, как эта структура будет вести себя, подстраиваться под разные устройства — даже если мысль об этом, на данном этапе, второстепенна.

Полезный способ провести стресс-тест дизайну сайта — адаптировать страницу под самое узкое разрешение экрана (320рх в ширину). Скорее всего, вы обнаружите, что некоторые детали дизайна требуют переосмысления, чтобы правильно отображаться при такой ширине. Вот несколько примеров:

Мнение: Григорий Коченов Креативный директор Agima

Лучше сразу иметь в виду, что есть разрешение 320 и есть 1024, а бывает и 1600 и понимание того, как будет выглядеть сайт на этих разрешениях должно быть до того, как мы приступаем к дизайну. И стресс-тест тогда будет пройден лучше. Элемент стресса мы убираем :)

Типографика: большие заголовки хорошо работают в широком макете, но на маленьких экранах они занимают много вертикального пространства и поэтому требуют дополнительной прокрутки. В соответствии с изменением ширины колонки, должна меняться высота строки и остальные элементы типографики.

Мнение: Григорий Коченов Креативный директор Agima

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

Ссылки: как ваш дизайн будет работать на тачскринах? Пока у нас нет простого способа определения подобных экранов (нам стоит учитывать сенсорные устройства во всех элементах нашего дизайна), разработка дизайна для устройств с минимальным разрешением даст нам возможность задуматься об основных местах для размещения ссылок и других интерактивных элементов. В гайдлайнах iOS рекомендуется использовать для них квадраты, площадью хотя бы 44рх/точек, что вполне неплохой вариант, и на него можно ориентироваться.

Мнение: Григорий Коченов Креативный директор Agima

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

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

Мнение: Григорий Коченов Креативный директор Agima

Недавно здесь же на CMS Magazine (http://www.cmsmagazine.ru/library/items/graphical_design/create-website-style-guide/) была статья, где рассматривались варианты работы с навигацией на адаптивных сайтах. Похоже на заметку Бреда Фроста, но более понятно. На примере общих схем.

Дополнительный контент: какой контент можно назвать лишним? Есть ли такой контент, который необходим только в определенных ситуациях? Я не сторонник того, чтобы просто скрыть часть текста в зависимости от девайса, на котором пользователь будет просматривать сайт, но технологии вроде «загрузка в зависимости от обстоятельств» (данную технологию мы рассмотрим в следующих статьях) могут помочь нам просматривать небольшие страницы, которые подгружают дополнительный контент только тогда, когда это требуется.

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

Мнение: Григорий Коченов Креативный директор Agima

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

Становимся равнодушными к расположению

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

Структурные диаграммы страниц: В то время как прототипы страниц часто навязывают нам расположение тех или иных блоков на странице (в том числе и на конкретных устройствах), структурные диаграммы наоборот описывают каждый компонент в отдельности и располагают их в документе в порядке приоритета.

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

Мнение: Григорий Коченов Креативный директор Agima

Обычно по главному макету стиль понятен. Важно лишь показать — адекватно ли смотрятся те или иные элементы на других устройствах. Тут пригодятся черновики, о которых я говорил выше.

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

Мнение: Григорий Коченов Креативный директор Agima

Хороший подход, очень активно используемый в подходе design thinking. Стикеры очень удобны для формирования разного рода системы — можно за 2 секунды все переставить и перестроить. Отличный метод!

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

Прогрессивное написание кода

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

Еще одна важная вещь, перед тем, как мы начнем. Важно помнить основополагающий принцип среды, в которой мы работаем — универсальность. А это разработка не только для современных устройств, но и необходимость предусматривать совместимость с устройствами вчерашнего дня и девайсами, которые появятся только завтра. Джон Эллсоп описал, почему этот принцип имеет такое значение в посте «Следующие 6 миллиардов»:

«Эти ближайшие шесть миллиардов — дети из сельских районов Индии, Африки, Китая, где доступ к электропитанию и сети имеет нерегулярный характер. Это кто-то на Суматре перед ящиком Wintel (компьютер с OC Windows на базе процессора Intel) десятилетней давности. Это люди, которые говорят на сотнях различных языков, и имеют десятки видов письменности. Это люди — первые в своей семье, которые могут читать и писать. Это 20% людей во всем мире, которые не могут читать или писать. Пока».

Мы можем проследить наши представления о веб, рассматривая разную моду (за неимением лучшего примера), которая уже завладела и нашей профессией: веб-стандарты, доступность, ненавязчивый JavaScript ... — все это вариации одной темы, посвященной прогрессивному улучшению. То же самое относится и к адаптивному веб-дизайну. Чтобы создать действительно адаптивный сайт, нужно создать сайт, который дружественен к устройствам будущего.

Мнение: Григорий Коченов Креативный директор Agima

Мы не в Индии и не в Африке, но и у нас в России мобильный телефон часто первое и основное средство для выхода в сеть. И даже если не принимать во внимание этот пафос — мобильные неминуемо станут, и во многих странах уже стали главной платформой. Это игнорировать невозможно. Future-friendly web — правильный подход.

Ныряем в разметку

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

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

Посмотреть папку шаблонов разметки

Будь я проклят, но у нас уже получился адаптивный сайт! Наш контент адаптируется под границы любого устройства, от новенького iPad до устаревших моделей мобильных телефонов. Сайт даже работает в таких сугубо текстовых браузерах, как Lynx.

Благодаря основополагающим принципам универсальности, веб адаптивен по умолчанию. Это здорово, но это также означает, что все, что мы теперь сделаем в коде, может поставить под угрозу эту естественную адаптивность.

Читайте в следующей статье: первые шаги при создании сайта с адаптивным веб-дизайном — типографика и сетка.

Мнение: Артем Гриценко Ведущий аналитик Agima

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

Оригинал: http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1