Краткий курс — «Адаптивный сайт за неделю»: проектируем адаптивный дизайн (часть I)

http://www.cmsmagazine.ru/library/items/graphical_design/build-responsive-site-week-designing-responsively-part-1/

 

Краткий курс — «Адаптивный сайт за неделю»: проектируем адаптивный дизайн (часть I)

28.08.2012 | Автор: Paul Robert Lloyd, перевод: AGIMA

 

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

Мнение:
Григорий Коченов

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

  • Всегда есть четкое понимание, где компонент начинается и где заканчивается, без подробного инспектирования.
  • Перемещение блока безопасно и не повредит верстку как визуально и логически, так и синтаксически

 

Автор: Paul Robert Lloyd, перевод: AGIMA

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

Рекомендуем:

Основные проблемы адаптивного веб-дизайна и способы их решения

Недавно Джеймс Янг расспросил коллег-дизайнеров о самых сложных проблемах, которые приходится решать при разработке адаптивных сайтов. В этой статье он делится результатами исследования и собственными мыслями.
Создаём адаптивную тему на Drupal

Темы Drupal позволяют менять облик и эмоциональную составляющую вашего сайта. Сегодня Тим Миллвуд объяснит, как создать тему, которая будет выглядеть по-разному на экранах различных размеров.
Краткий курс — «Адаптивный сайт за неделю»: типографика и сетка (часть II)

Во второй части своего практического пособия по адаптивному веб-дизайну, Поль Роберт Ллойд расскажет нам, как преобразовать статичные дизайн-макеты сайта в адаптивные. Итак, скажем — нет пикселям, да — пропорциям! А если вы еще видели первую – настоятельно рекомендуем с ней ознакомиться.
Адаптивный словарь

Справочник по адаптивной верстке.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s