Создайте адаптивный сайт за неделю: адаптивный дизайн (часть 1)

Содержание

• Дизайн для неизвестного
• Прагматичный подход к дизайну
• Стать агностиком макета
• Постепенное кодирование
• Погружение в наценку

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

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

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

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

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

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

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

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

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

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

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

Это не означает, что у дизайнеров нет возможности думать о том, как дизайн может работать вне рамок какого-либо конкретного устройства.

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

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

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

• Типография: Большие заголовки могут хорошо работать с более широкими макетами, но на экранах меньшего размера они могут занимать много места по вертикали и, следовательно, требуют дополнительной прокрутки. По мере изменения длины строки вам следует также учитывать высоту строки и другие типографские методы.
• Ссылки: Как ваш дизайн будет работать на устройствах с сенсорным экраном? Хотя у нас пока нет простого способа их обнаружить (это означает, что мы должны учитывать прикосновение во всех аспектах нашего дизайна), проектирование для более узкого экрана может дать нам возможность подумать о целевых областях для ссылок и других интерактивных элементов. . В рекомендациях iOS рекомендуется, чтобы они составляли не менее 44 пикселей / точек в квадрате, что является хорошим показателем.
• Навигация: Вероятно, это будет самый неудобный компонент любого адаптивного дизайна, особенно если на вашем сайте много разделов и глубокая иерархия. Брэд Фрост написал обзор некоторых различных подходов к навигации, которые в настоящее время рассматриваются.
• Лишний контент: Какой-то контент не требуется? Нужно ли показывать другой контент только в определенных сценариях? Я не призываю скрывать контент в зависимости от того, какое устройство использует пользователь, но такие методы, как условная загрузка (которую мы рассмотрим позже на этой неделе), могут помочь нам обслуживать небольшие страницы, которые загружают дополнительный контент только при необходимости.

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

Стать агностиком макета

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

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

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

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

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

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

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

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

Погружение в наценку

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

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

Посмотреть наш портфель размеченных паттернов

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

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

Завтра: Мы будем действовать осторожно и начнем применять первый аспект адаптивного дизайна: типографику и плавные сетки.