Руководство по адаптивному веб-дизайну для профессионалов

Содержание

• Адаптивные изображения
• Представление
• Условная и ленивая загрузка
• Адаптивная типографика
• Медиа-запросы в JavaScript
• Прогрессивное улучшение
• Макет
• Макет сетки CSS
• Ну наконец то

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

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

1. Адаптивные изображения
2. Повышение производительности
3. Адаптивная типографика
4. Медиа-запросы в JavaScript
5. Прогрессивное улучшение
6. Макет

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

«Так ... как насчет этих продвинутых методов?» - спросите вы. Я думаю, Стивен Хэй резюмировал это лучше всего, когда сказал: «Лучшая техника RWD - это начать с отказа от каких-либо передовых методов RWD. Начните со структурированного контента и постепенно продвигайтесь вверх. Добавляйте точку останова только тогда, когда дизайн ломается, а контент диктует это, и ... вот и все ».

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

Адаптивные изображения

Жидкие среды были ключевой частью RWD, когда он был впервые определен Итаном Маркоттом. ширина: 100%; , максимальная ширина: 100%; все еще работает сегодня, но ландшафт адаптивных изображений стал намного сложнее. С увеличением количества размеров экранов, плотности пикселей и поддерживаемых устройств мы стремимся к большему контролю.

Группа сообщества отзывчивых изображений (RICG) определила три основные проблемы:

1. Размер изображения в килобайтах, которое мы отправляем по сети.
2. Физический размер изображения, которое мы отправляем на устройства с высоким разрешением.
3. Обрезка изображения в виде художественного оформления для определенного размера области просмотра.

Йоав Вайс с помощью Indiegogo проделал большую часть работы над реализацией Blink - форком WebKit от Google, и к тому моменту, когда вы это прочтете, он будет поставляться в Chrome и Firefox. Safari 8 будет поставлять srcset, однако атрибут sizes присутствует только в ночных сборках, а изображение> еще не реализовано.

С появлением чего-то нового в нашем процессе веб-разработки может быть сложно начать работу. Давайте рассмотрим пример шаг за шагом.

img! - Объявить резервное изображение для всех браузеров, не поддерживающих изображения -> src = "horse-350.webp"! - Объявить все размеры изображений в srcset. Включите ширину изображения с помощью дескриптора w, чтобы сообщить браузеру ширину каждого изображения. -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Размеры информируют браузер о макете нашего сайта. Здесь мы говорим, что для любого окна просмотра размером 64ems и больше используйте изображение, которое будет занимать 70% области просмотра -> sizes = "(min-width: 64em) 70vw,! - Если окно просмотра не то big, то для любого окна просмотра размером 37,5 мкм и больше используйте изображение, занимающее 95% области просмотра -> (min-width: 37,5em) 95vw,! - и если окно просмотра меньше этого, используйте изображение, занимающее 100% области просмотра -> 100vw "! - всегда имеет альтернативный текст. -> alt =" A horse "/>

С точки зрения производительности не имеет значения, используете ли вы min-width или max-width в атрибуте sizes, но порядок в источниках имеет значение. Браузер всегда будет использовать первый подходящий размер.

Кроме того, помните, что мы жестко запрограммировали атрибут sizes, чтобы они были напрямую определены в нашем дизайне. Это может вызвать проблемы при продвижении вперед. Например, если вы измените дизайн своего сайта, вам нужно будет еще раз просмотреть все img> или picture> s и заново определить размеры. Если вы используете CMS, это можно преодолеть в процессе сборки.

В WordPress уже есть плагин, который может помочь. Он определяет srcset для стандартных разновидностей изображений WP и позволяет вам объявлять размеры в центральном месте. Когда страница создается из базы данных, она заменяет все упоминания на img> разметкой изображения.

Базовый

• Подумайте, действительно ли вам нужно включать изображение. Является ли изображение основным содержанием или декоративным? На одно изображение меньше будет означать более быстрое время загрузки
• Оптимизируйте изображения, которые вам нужно включить, с помощью ImageOptim
• Установите заголовки срока действия для ваших изображений на сервере или в файле .htaccess (подробности см. В разделе «Производительность»).
• PictureFill обеспечивает поддержку полифиллов для изображений

Передовой

• Ленивая загрузка изображений с помощью плагина jQuery Lazy Load
• Используйте HTMLImageElement.Sizes и HTMLPictureElement для обнаружения функций.
• Расширенный плагин PictureFill WP, который можно найти на Github, позволит вам определять собственные значения ширины и размеров изображений.

Представление

Чтобы получить максимально быструю воспринимаемую производительность на наших страницах, нам нужны все HTML и CSS, необходимые для рендеринга верхней части нашей страницы при первом ответе сервера. Это магическое число составляет 14 Кбайт и основано на максимальном размере окна перегрузки в течение первого времени приема-передачи (RTT).

Патрик Хаманн, технический руководитель фронтенда в Guardian, и его команда сумели преодолеть барьер в 1000 мс, используя сочетание фронтэнда и бэкэнда. Подход Guardian заключается в том, чтобы обеспечить доставку необходимого контента - статьи - пользователю как можно быстрее и в пределах магического числа 14 КБ.

Давайте посмотрим на процесс:

1. Пользователь нажимает ссылку Google на новость
2. Единичный запрос на блокировку отправляется в базу данных для статьи. Никаких связанных историй или комментариев не требуется
3. Загружен HTML-код, содержащий критический CSS.
4. в голове>
5. Выполняется процесс «разрезания горчицы», и загружаются любые условные элементы, основанные на характеристиках устройства пользователя.
6. Любой контент, связанный с самой статьей или поддерживающий ее (изображения связанных статей, комментарии к статьям и т. Д.), Загружается на место с ленивой

Такая оптимизация критического пути рендеринга означает, что длина заголовка> составляет 222 строки. Тем не менее, критически важный контент, который увидел пользователь, по-прежнему находится в пределах начальной полезной нагрузки 14 КБ при сжатии с помощью gzip. Именно этот процесс помогает преодолеть барьер рендеринга в 1000 мс.

Условная и ленивая загрузка

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

Один из способов - отложить загрузку чего-либо до тех пор, пока пользователь не проявит намерение использовать эту функцию. Это будет считаться условным. Вы можете отложить загрузку значков социальных сетей до тех пор, пока пользователь не наведет указатель мыши на значки или не коснется их, или вы можете избежать загрузки iframe Google Map на меньших окнах просмотра, где пользователь, вероятно, предпочтет ссылку на специальное картографическое приложение. Другой подход - «разрезать горчицу» - подробности см. В рамке выше.

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

Базовый

• Включите сжатие для файлов и установите заголовки срока действия для всего статического содержимого (netm.ag/expire-260)
• Используйте плагин jQuery с отложенной загрузкой. Это загружает изображения при приближении к области просмотра или через определенный период времени.

Передовой

• Установите Fastly или CloudFlare. Сети доставки контента (CDN) доставляют ваш статический контент пользователям быстрее, чем ваш собственный сервер, и имеют несколько уровней бесплатного пользования.
• Включите SPDY для браузеров с поддержкой http2, чтобы использовать преимущества http2, такие как параллельные HTTP-запросы.
• Social Count позволяет условную загрузку ваших социальных иконок
• Использование Static Maps API позволит вам отключить интерактивные карты Google для изображений. Взгляните на пример Брэда Фроста по адресу netm.ag/static-260.
• Шаблон включения Ajax загружает фрагменты содержимого из атрибута data-before, data-after или data-replace.

Адаптивная типографика

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

Стивен Хэй предлагает установить размер шрифта HTML на 100 процентов (читай: просто оставьте как есть), потому что каждый браузер или производитель устройства устанавливает разумно читаемое значение по умолчанию для определенного разрешения или устройства. Для большинства настольных браузеров это 16 пикселей.

С другой стороны, Мур использует блок REM и размер шрифта HTML, чтобы установить минимальный размер шрифта для определенных элементов содержимого. Например, если вы хотите, чтобы имя статьи всегда составляло 14 пикселей, установите это как базовый размер шрифта в элементе HTML и установите .byline {font-size: 1rem;}. При масштабировании body: font-size: в соответствии с областью просмотра вы не повлияете на стиль .by-line.

Также важна хорошая длина строки чтения - стремитесь к 45-65 символам. Есть букмарклет, который вы можете использовать для проверки своего содержания. Если вы поддерживаете несколько языков в своем дизайне, длина строки также может отличаться. Мур предлагает использовать: lang (de) article {max-width: 30em}, чтобы скрыть любые проблемы.

Чтобы поддерживать вертикальный ритм, установите margin-bottom против блоков содержимого, ul>, ol>, blockquote>, table>, blockquote> и так далее, на то же значение, что и ваша line-height. Если ритм прерывается введением изображений, вы можете исправить это, добавив Baseline.js или BaselineAlign.js.

Базовый

• Основывайте свой шрифт на 100-процентном теле
• Работа в относительных единицах em
• Установите поля в соответствии с высотой линии, чтобы сохранить вертикальный ритм в дизайне.

Передовой

• Повышение производительности загрузки шрифтов с помощью Enhance.js или отложенной загрузки шрифтов
• Используйте Sass @includes для семантических заголовков.
• Часто нам нужно использовать стиль h5 в виджете боковой панели, который требует разметки h2. Используйте типографические миксины Bearded, чтобы контролировать размер и сохранять семантику с помощью приведенного ниже кода:

.sidebar h2 {@include heading-5}

Медиа-запросы в JavaScript

С тех пор, как мы смогли управлять макетом в различных окнах просмотра с помощью медиа-запросов, мы искали способ связать это и с запуском нашего JavaScript. Есть несколько способов запустить JavaScript для определенной ширины, высоты и ориентации области просмотра, и некоторые умные люди написали несколько простых в использовании собственных JS-плагинов, таких как Enquire.js и Simple State Manager. Вы даже можете построить это самостоятельно, используя matchMedia. Однако у вас есть проблема, заключающаяся в том, что вам нужно дублировать медиа-запросы в CSS и JavaScript.

У Аарона Густафсона есть хитрый трюк, который означает, что вам не нужно управлять медиазапросами и сопоставлять их в CSS и JS. Первоначально идея пришла от Джереми Кейта, и в этом примере Густафсон довел ее до полной реализации.

Используя getActiveMQ (netm.ag/media-260), вставьте div # getActiveMQ-watcher в конец основного элемента и скройте его. Затем в CSS установите # getActiveMQ-watcher {font-family: break-0;} на первый медиа-запрос font-family: break-1; ко второму - font-family: break-2; к третьему и так далее.

Сценарий использует watchResize () (netm.ag/resize-260), чтобы проверить, изменился ли размер области просмотра, а затем считывает активное семейство шрифтов. Теперь вы можете использовать это для подключения улучшений JS, таких как добавление интерфейса с вкладками к dl>, когда это позволяет область просмотра, изменение поведения лайтбокса или обновление макета таблицы данных. Ознакомьтесь с кодом getActiveMQ по адресу netm.ag/active-260.

Базовый

• Забудьте о JavaScript для разных окон просмотра. Предоставлять пользователям контент и функции веб-сайта таким образом, чтобы они могли получить к нему доступ во всех окнах просмотра. Нам никогда не понадобится JavaScript

Передовой

• Расширьте метод Густафсона, используя Breakup в качестве предопределенного списка медиа-запросов и автоматизируя создание списка семейств шрифтов для getActiveMQ-watcher.

Прогрессивное улучшение

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

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

Макет

Легко сказать, что гибкий макет, но он имеет много разных подходов. Создавайте простые макеты сетки с меньшим количеством разметки, используя селектор: nth-child ().

/ * объявляем первую ширину мобильной сетки для сетки * / .grid-1-4 {float: left; ширина: 100%; } / * Когда размер области просмотра составляет не менее 37,5 мкм, установите сетку на 50% на элемент * / @media (min-width: 37,5em) {.grid-1-4 {width: 50%; } / * Очищать каждый второй элемент ПОСЛЕ первого. Это нацелено на 3-й, 5-й, 7-й, 9-й ... в сетке. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Удаляем предыдущий clear * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Очищать поплавок каждый 4-й элемент ПОСЛЕ первого. Это нацелено на 5-й, 9-й ... в сетке. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}

Попрощайтесь с использованием позиции и плавания для ваших макетов. Хотя до сих пор они хорошо служили нам, их использование для верстки было необходимой хитростью. Теперь у нас есть двое новых ребят, которые помогут исправить все проблемы с макетом - Flexbox и Grids.

Flexbox отлично подходит для отдельных модулей, управляя компоновкой частей контента в каждом из модулей. Мы пытаемся создать макеты, которые легче реализовать с помощью Flexbox, и это еще более верно для адаптивных сайтов. Чтобы узнать больше об этом, ознакомьтесь с руководством CSS Tricks для Flexbox или Flexbox Polyfill.

Макет сетки CSS

Сетка больше подходит для макета макроуровня. Модуль макета сетки дает вам отличный способ описать макет в CSS. Пока он все еще находится на стадии черновика, я рекомендую эту статью о макете CSS Grid от Рэйчел Эндрю.

Ну наконец то

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

Эта статья впервые появилась в выпуске 260 журнала сетевой журнал.