В последней серии (« Понимание адаптивного веб-дизайна ») я определил основные характеристики этого нового и важного адаптивного подхода к мобильному, независимому от устройств дизайну. Теперь давайте подготовим почву для более конкретной работы.
Мы видели, что во время процесса адаптивного проектирования необходимо учитывать множество аспектов: размер экрана, операционную платформу, поведение пользователя и т. Д. Мы изучили различные варианты измерения шрифтов на веб-сайте и рассмотрели лучший способ приблизиться к типографии с точки зрения адаптивного веб-дизайна. Мы изучили характеристики четырех различных типов макетов и их соответствующих областей реализации. Мы рассмотрели некоторые распространенные проблемы, с которыми может столкнуться веб-дизайнер при управлении адаптивными изображениями (и указали на возможные решения). Наконец, мы исследовали проблему кросс-браузерной совместимости и предложили различные способы ее достижения.
Теперь пришло время продемонстрировать некоторые реальные технические приложения адаптивного веб-дизайна и создать реальный адаптивный веб-сайт.
Цели
Давайте начнем с определения целей этой новой серии и выделим то, что вы узнаете. Благодаря этому уроку …
- Вы узнаете, как создать адаптивный макет дизайна с учетом основных особенностей веб-сайта, потребностей пользователей и способов эффективного сочетания адаптивной графики и веб-дизайна. Макет веб-сайта не будет уникальным для одной платформы, и он предоставит пример возможной структуры портала с нескольких точек зрения — представление представления на трех разных устройствах: смартфонах, планшетах и настольных ПК.
- Вы узнаете, как в полной мере использовать преимущества современных веб-технологий, а именно HTML5 и CSS3, шаг за шагом применяя их к каждому компоненту вашего веб-контента.
- Вы увидите, как реализовать некоторые правила, связанные с адаптивным веб-дизайном, применяя то, что мы концептуально проанализировали в предыдущих статьях.
Медиа-запросы
Одной из основ или адаптивного дизайна являются медиа-запросы , которые в конечном итоге делают сайт доступным и доступным для наибольшего числа пользователей, включая тех, кто не использует последние версии популярных браузеров, таких как Internet Explorer, Mozilla Firefox и Chrome.
Давайте начнем с того, что запачкаем руки медиа-запросами; они представляют собой один из наиболее важных инструментов, который веб-дизайнер должен сделать своим сайтом адаптивным и мобильным.
Медиа-запросы состоят из двух основных частей :
- @ media screen — первая часть медиазапроса — это тип поддержки. Вы можете узнать этот синтаксис из написания своих собственных стилей CSS, особенно если вы использовали этот метод ранее при разработке параметров печати для своего веб-сайта.
- ( min-width: 500px ) — Вторая часть — это сам запрос. Он включает в себя функцию, которая должна быть оценена (в данном случае минимальная ширина окна браузера) и соответствующее значение, чтобы проверить, что правило было применено (в данном случае, значение 500px).
Думая об адаптивном веб-дизайне, мы склонны фокусироваться исключительно на свойстве width, но есть немало других атрибутов, которые следует учитывать при проектировании для экранов различных размеров. Есть еще много допустимых свойств, связанных с медиа-запросами. Они есть:
- ширина / высота — с помощью этих свойств вы можете установить ширину и высоту области отображения, включая любую полосу прокрутки. Вы можете использовать префиксы мин и макс.
- device-width / height — эти свойства устанавливают ширину и высоту поверхности рендеринга, то есть ширину и высоту всего экрана устройства, а не просто области отображения документа. Даже в этом случае вы все равно можете использовать префиксы min и max.
- ориентация — устанавливает вертикальную или горизонтальную ориентацию. Указав конкретные правила в таблице стилей CSS, вы сможете определить, как различные элементы веб-страницы будут отображаться на устройстве, в данном случае, в зависимости от ориентации устройства, которое мы используем. Затем мы можем указать тип ориентации; пейзаж и портрет, которые позволяют нам изменять макет вашего дизайна в соответствии с текущей ориентацией браузера.
- aspect-ratio — это свойство, которое устанавливает соотношение между шириной и высотой отображения документа. Даже в этом случае вы все равно можете использовать префиксы min и max.
- device-aspect-ratio — этот атрибут контролирует соотношение между шириной и высотой устройства. Допускаются префиксы min и max.
- цвет — это применяет определенные стили CSS для всех цветовых устройств. Допускаются префиксы min и max, но очень мало черно-белых устройств (помимо недорогих Kindles) остаются популярными вариантами просмотра
- индекс цвета — описывает количество цветов в палитре, поддерживаемых устройством. Может иметь минимальный и максимальный префиксы.
- monochrome — это свойство указывает количество бит на пиксель монохромного устройства (в градациях серого).
- Resolution — Resolution устанавливает разрешение (то есть плотность пикселей) устройства вывода. Значения разрешения могут быть выражены в DPI (точек на дюйм) или в DPCM (точек на сантиметр).
- scan — допустимое свойство для телевизионных экранов, которое указывает тип сканирования, чересстрочный или прогрессивный. Значения могут быть точно прогрессивными или чересстрочными.
- grid — Grid указывает, является ли устройство типом растрового изображения или эквивалентом «сетки».
Контрольные точки
После этого краткого обзора основных (и часто недостаточно используемых) свойств медиазапросов давайте продолжим, указав, какие точки останова лучше всего реагируют и как их определить для данного проекта.
Точки останова с точки зрения адаптивного веб-дизайна — это ширины браузера, в которых есть объявление медиа-запроса для изменения макета, когда браузер находится в пределах заявленного диапазона ширины. Более конкретно, точка останова — это точка на линии, которая начинается с 0, где происходит изменение (с помощью CSS) в макете страницы. Точки останова определяются с помощью числовых значений и единиц измерения на основе медиазапросов, введенных в ваши таблицы стилей CSS.
В целом, каждый отзывчивый веб-сайт имеет минимум две точки останова — одну для планшетов и одну для мобильных устройств. Каждая точка останова соответствует медиа-запросу. В медиа-запросе ниже я написал CSS, который вступает в силу только тогда, когда минимальная ширина окна браузера (min-width) равна определенному значению (которое может быть 320px, 480px, 768px и т. Д.).
Вот пример одной из этих стандартных точек останова:
@media only screen and (min-width : 320px) {
/* Styles */
}Но сколько точек останова нужно создать веб-дизайнеру? Это зависит от характеристик веб-сайта, его макета и методов, которые вы решили реализовать, чтобы превратить ваши планы дизайна во что-то действительно интерактивное и адаптивное. По сути, мы могли бы ответить на предыдущий вопрос следующим образом: точка останова для каждого устройства, которое вы намеренно поддерживаете.
Точки останова по устройствам
Сегодня преобладающая практика имеет тенденцию устанавливать точки останова на основе размера экрана (или окна браузера) следующих популярных типов устройств:
- Смартфон (с книжной или альбомной ориентацией)
- Планшет (с книжной или альбомной ориентацией)
- Netbook
- Монитор настольного ПК с высоким или очень высоким разрешением
Переводя эту схему в пиксели, вы можете увидеть, как для категорий смартфонов и планшетов принятые «стандартные» размеры в основном соответствуют размерам экрана iPhone и iPad:
- 320px — iPhone в портретной ориентации
- 480px — iPhone в альбомной ориентации
- 768px — iPad в портретной ориентации
- 1024px — iPad в горизонтальной ориентации (а также нетбуки, поскольку эти устройства обычно имеют разрешение по горизонтали 1024px).
Кто-то может возразить, что не все смартфоны и планшеты являются айфонами или айпадами, и они, несомненно, будут правы. Но в этом случае размер экрана устройства Apple больше используется в качестве ориентира для большей категории устройств. Более того, создание точки останова для каждого устройства было бы абсолютно абсурдным.
Хорошей практикой может быть определение набора основных точек останова, возможно, в сочетании с некоторыми вторичными точками останова, чтобы приспособить документ к конкретным устройствам. Вы также можете подумать о создании пользовательской точки останова; это очень просто, но требует знакомства с медиа-запросами, поэтому я предлагаю сначала поработать с базовыми медиа-запросами и общими контрольными точками.
Чрезвычайно важно протестировать динамические макеты, включая сами точки останова, и CSS, который выполняется при определенных условиях размера экрана. Если вы не располагаете обоими этими аспектами своего адаптивного дизайна в хорошем состоянии, вы в конечном итоге столкнетесь с явными проблемами компоновки и функциональности, которые делают ваш веб-сайт менее адаптивным, чем если бы вы не предприняли никаких действий для мобильных устройств. Проверьте свои проекты полностью!
Вывод
Я представил основные цели серии, и, прежде всего, я дал краткое, но полное введение в критические компоненты медиазапросов и контрольных точек останова. В следующей статье я начну с планирования и создания макета для каждого из трех основных типов устройств, на которых будет разрабатываться, тестироваться и отображаться наш веб-сайт.
Хотите узнать больше о адаптивном веб-дизайне? Ознакомьтесь с новой книгой SitePoint « Адаптивный веб-дизайн Jump Start» !