Введение в адаптивный веб-дизайн: псевдоэлементы, медиа-запросы и многое другое

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

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

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

Это глупый подход.

Mashable назвал 2013 год годом адаптивного веб-дизайна. Почему? Более 30% их трафика приходится на мобильные устройства. Они прогнозируют, что к концу года это число может достичь 50%. В целом в Интернете 17,4% веб-трафика приходилось на смартфоны в 2013 году. В то же время на использование Internet Explorer, например, приходится всего 12% всего браузерного трафика, что примерно на 4% меньше, чем в прошлом году (согласно в W3Schools). Если вы оптимизируете для конкретного браузера, а не для глобальной популяции смартфонов, вы теряете лес за деревьями. И в некоторых случаях это может означать разницу между успехом и неудачей — адаптивный дизайн влияет на показатели конверсии, SEO, показатели отказов и многое другое.

Адаптивный подход к веб-дизайну

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

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

С технической точки зрения решение кроется в этом руководстве по адаптивному дизайну: использование медиазапросов CSS, псевдоэлементов, гибких наборов сеток и других инструментов для динамической настройки на заданное разрешение.

Медиа-запросы в адаптивном дизайне

Типы мультимедиа впервые появились в HTML4 и CSS2.1, что позволило разместить отдельные CSS для экрана и печати. Таким образом, можно было установить отдельные стили для отображения страницы на компьютере по сравнению с ее распечаткой.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

или

 @media screen { * { background: silver } }

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

Это определение возможно через настройку основных свойств: max-width , device-width , orientation и color . Возможны и другие определения; но в этом случае наиболее важными моментами, на которые следует обратить внимание, являются минимальное разрешение (ширина) и настройки ориентации (пейзаж или портрет).

В приведенном ниже примере адаптивного CSS показана процедура запуска определенного файла CSS в зависимости от ширины страницы. Например, если максимальное разрешение экрана текущего устройства составляет 480 пикселей, будут применены стили, определенные в main_1.css.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

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

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

«Умный зум»

Мобильные браузеры используют так называемое «умное масштабирование», чтобы предоставить пользователям «превосходный» опыт чтения. По сути, интеллектуальное масштабирование используется для пропорционального уменьшения размера страницы. Это может проявляться двумя способами: (1) масштабирование по инициативе пользователя (например, двойное касание экрана iPhone для увеличения текущего веб-сайта) и (2) первоначальное отображение увеличенной версии веб-страницы на нагрузка.

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

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Установив для initial-scale значение 1, мы контролируем начальный уровень масштабирования страницы (то есть величину масштабирования при загрузке страницы). Если вы спроектировали веб-страницу так, чтобы она была адаптивной, то ваш гибкий, динамичный макет должен разумно заполнять экран смартфона, не требуя начального масштабирования.

Кроме того, мы можем полностью отключить масштабирование с помощью user-scalable=false .

Ширина страницы

Допустим, вы хотите предоставить три разных адаптивных макета страницы: один для настольных компьютеров, один для планшетов (или ноутбуков) и один для смартфонов. Какие размеры страницы следует использовать в качестве предельных значений (например, 480 пикселей)?

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

• 320 пикселей
• 480 пикселей
• 600 пикселей
• 768 пикселей
• 900 пикселей
• 1024 пикселей
• 1200 пикселей

Однако существует ряд различных определений ширины. Например, 320 и выше имеют пять приращений CSS3 Media Query по умолчанию: 480, 600, 768, 992 и 1382 пикселей. Наряду с данным примером в этом руководстве по адаптивной веб-разработке я мог бы перечислить по крайней мере десять других подходов.

С любым из этих разумных наборов приращений вы можете настроить таргетинг на большинство устройств. На практике обычно нет необходимости отдельно обрабатывать все вышеупомянутые примеры ширины страницы — семь различных разрешений, вероятно, являются излишеством. По моему опыту, чаще всего используются 320 пикселей, 768 пикселей и 1200 пикселей; этих трех значений должно быть достаточно для таргетинга на смартфоны, планшеты/ноутбуки и настольные компьютеры соответственно.

Псевдоэлементы

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

Во-первых, скрытие некоторых элементов ( display: none; ) может быть отличным решением, когда речь идет об уменьшении количества элементов на экране для макета смартфона, где почти всегда не хватает места.

Но помимо этого, вы также можете проявить творческий подход с помощью псевдоэлементов CSS (селекторов), например, :before и :after . Примечание: повторюсь, псевдоэлементы поддерживаются всеми основными браузерами.

Псевдоэлементы используются для применения определенных стилей к определенным частям элемента HTML или для выбора определенного подмножества элементов. Например, псевдоэлемент :first-line позволяет вам определять стили исключительно для первой строки определенного селектора (например, p:first-line будет применяться к первой строке всех p ). Точно так же псевдоэлемент a:visited позволит вам определить стили для всех элементов a ссылками, ранее посещенными пользователем. Ясно, что они могут пригодиться.

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

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

Используя только псевдоэлементы :before и :after , мы достигаем следующего:

Чтобы узнать больше о магии псевдоэлементов, Крис Койер написал хорошую статью CSS-Tricks.

Итак, с чего мне начать?

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

Первый шаг, который вы должны сделать, это организовать все элементы вашей веб-страницы в соответствии с размерами экрана.

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

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

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

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

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

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

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

Другие элементы адаптивного дизайна

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

 img { max-width: 100% }

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

Несколько слов о системах Fluid Grid

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

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

Заключение

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