Пора снова задуматься о счастье и благополучии: ваших и членов общества, потребляющих веб-содержимое и услуги, которые вы создаете. Сегодня мы поговорим о получении большего удовлетворения от устройств на батарейках…
…я говорю о громадном изобилии альтернативных устройств просмотра, словно лесной пожар, охватившем наше общество. Многие из нас, чтобы разобраться с поддержкой мобильных браузеров очень недальновидно относятся двойственно, например, делая полностью отдельные мобильные и настольные сайты, или используя CSS-тип медиа "handheld" (КПК), для предоставления отдельного стиля для мобильных устройств. Или мы определяли бы параметр "UserAgent" (UA, параметр, передаваемый браузером серверу вместе с запросом) и обслуживали бы браузер подходящим содержимым.
Но вёрстка для определённых браузеров не была удобной, поскольку IE и Netscape сражались с середины до конца 90-х годов прошлого века. Проблема усугублялась ещё сильнее, так как мы создавали немало отдельных версий сайта, желая поддерживать обоих соперников. С вёрсткой под определенные платформы не намного лучше: в наши дни это не только мобильные телефоны. В сравнении с настольными браузерами вариаций больше: у людей в руках множество переносных устройств различных размеров, с различными размерами экрана, разрешением и другими характеристиками.
Нам нужно думать иначе. Надо признать, что Интернету свойственна изменчивость и непредсказуемость, и верстать сайты, которые смогут слегка дышать и приспосабливаться к таким переменам, как разрешение и размер экрана. Обычно это называется "приспосабливающийся дизайн" или "отзывчивый дизайн": ниже я рассмотрю некоторые способы создания таких сайтов, с использованием таких технологий, как запросы "media" и "область просмотра" (viewport), и такие приёмы, как изменение величины составляющих частей вашего пользовательского интерфейса с помощью процентов.
Садитесь поудобнее и наслаждайтесь поездкой.
Инструменты адаптивного дизайна
У нас есть такие основные инструменты для приспосабливающейся вёрстки:
Плавающие величины: главным образом текучесть сетки и изображений достигается с помощью процентных величин. У нас также есть такая вещь, как "object-fit" ("подгонка объекта") – новое свойство CSS3, которое позволяет лучше управлять тем, как покажутся изображения.
media-запросы: управление планировкой путём выборочного применения CSS в зависимости от атрибутов media, таких как ширина экрана и браузера. Также есть новый media атрибут, который можно использовать с HTML5-видео элементом, для обслуживания с учётом видеофайлов, чтобы сказать, узко-экранным устройствам, которым не нужно или не желательно огромное видео.
Область просмотра (viewport): Позволяет вам контролировать, как мобильным устройствам показывать веб-приложения. Также, как и мета-тег "viewport" (область просмотра) на основе HTML, Opera тоже внедряет CSS контейнер @-o-viewport, чтобы взамен сделать то же самое внутри CSS.
Подробнее посмотрим на все эти чудеса позже, а сейчас давайте рассмотрим пример, написаный мной, чтобы вам всё это продемонстрировать.
Тантрические препятствия – психоделическое озорство Я всегда был большим поклонником психоделических образов и музыки, поэтому я пошёл дальше и сделал сайт "Тантрические препятствия", назвав его в честь альбома молодой психоделической британской группы "The Ozric Tentacles" (Щупальца Озрика). Посетите сайт Тантрические препятствия и сопутствующую страницу Тантрическое видео запустите вживую, прежде чем читать дальше. Чрезмерно пёстро? Невыносимо? На самом то деле я думал, что был достаточно сдержанным, учитывая то, что я мог бы сделать на психоделическую тему.
Сайт написан на HTML5, с типичным строением из элементов <header> (в русском веб-дизайне называется "шапкой"), <footer> (у нас называется "подвалом"), <nav> полосы (у нас "панель навигации"), элементов <section> ("раздел") для различных колонок и элементов <article> ("статья") для различных картинок и видеороликов. Он сложен с помощью "меток плавания" (floats) для колонок и статей, и, в основном, с процентными размерами, давшими ему высокую гибкость. Я очень мало использовал CSS3, за исключением media-запросов и веб-шрифтов ("Web Fonts"), так что это даже выглядит нормально в старых версиях IE (подробнее о совместимости браузеров позже).
Я использовал в общей сложности пять медиа-запросов, чтобы обеспечить приемлемое расположение на экранах различной ширины, и тег <meta> viewport ("область просмотра") чтоб сделать показ более приглядным на устройствах с маленьким экраном. Различные размещения заключаются в следующем:
Рисунок 1: нормальное расположение, прежде чем в игру вступят какие-либо media-запросы. Рисунок 2: растянутое широкоформатное размещение, которое появляется в браузере, когда ширина (вкладки браузера) превышает 1500 пикселей. Вы могли бы захотеть, поставить взамен максимальную ширину (max-width) для вашего тега <body> с содержанием, в зависимости от вашей ситуации. Только учитывайте, что строки содержания не должны быть слишком длинными, потому что при большой ширине они становятся трудночитаемыми. Рисунок 3: Более узкое расположение, идеально подходящее для ноутбуков и мониторов с небольшим разрешением, а планшетным компьютерам – в ландшафтном (горизонтальном) режиме. Он возникает, когда ширина (вкладки) браузера становится менее 1000 пикселей. Рисунок 4: первое одноколоночное расположение, которое задействуется в браузере, шириной до 700 пикселей. Пожалуй, это может сгодиться для планшетов в портретном (вертикальном) режиме? Рисунок 5: Такой же, как предыдущий макет, но заголовку и навигации, установленочуть менее 680 пикселей в ширину, потому расположение не ломается. Хитро, но работает. Рисунок 6: наиузкое расположение для мелких экранов, типично для мобильных телефонов. Оно вступает в игру при ширине 560 пикселей или ниже, и к тому же уменьшает в шапке заголовок, так что он будет оставаться на одной строке и при превращении навигационного меню в сетку 2 х 2.
(i) Вы можете подумать, что для одного примера media-запросов многовато, но я намеренно показываю довольно сложный пример, чтобы показать наглядный пример того, что возможно сделать этими инструментами. Каждый media-запрос просто опирается и заменяет то, что было раньше в таблице стилей.
Составные элементы гибкой планировки – жидкие сетки и жидкие картинки
(i) Примечание: в этой статье я опустил CSS правила и свойства, которые напрямую не касаются предмета данного обсуждения, чтобы сделать объяснения понятнее и сократить пространство. Вы можете рассмотреть полный исходный код и на работающем примере. (прим. пер. прикладываю исходный код HTML-страницы в приложении)
Отправной точкой для единиц гибкого макета (таких, как колонка и ширина изображения) служат процентные значения. Если я делаю ширину планировки фиксированной, я обычно устанавливаю определенный процент на "font-size" – размер шрифта (как правило, Mr Rutter's magic 62,5%), а затем устанавливаю все размеры в em-ах, так что весь макет будет сообразовываться пропорционально тому размеру. Однако в последнее время я начал играть со всё более и более гибкими планировками. В своём "психоделическом" примере я использовал тег "body" как оболочку для страницы, установил поля (margins) в 0, а также задействовал "min-width" (малейшую ширину) так что составные части не ломаются при совсем малой ширине, когда осуществляется медиа-запросы.
body { margin: 0; min-width: 320px; }
(i) Заметьте, что Firefox и Chrome автоматически применяют минимальную ширину страниц, если вы её не укажете в таблице CSS.
I have then floated the left and right columns left and right and given them percentage widths that total a little less than 100% to form a natural gutter in the middle:
Я тогда казалось левого и правого столбца слева и справа и дал им ширину в процентах, что общая чуть менее 100% к форме природного желоба в середине:
Я тогда плавал на левой и правой колонок влево и вправо и дал им в процентах ширины, что всего чуть меньше, чем 100% в форме природных канавы на середине:
Рисунок 1: нормальное расположение, прежде чем в игру вступят какие-либо media-запросы.
Рисунок 2: растянутое широкоформатное размещение, которое появляется в браузере, когда ширина (вкладки браузера) превышает 1500 пикселей. Вы могли бы захотеть, поставить взамен максимальную ширину (max-width) для вашего тега <body> с содержанием, в зависимости от вашей ситуации. Только учитывайте, что строки содержания не должны быть слишком длинными, потому что при большой ширине они становятся трудночитаемыми.
Рисунок 3: Более узкое расположение, идеально подходящее для ноутбуков и мониторов с небольшим разрешением, а планшетным компьютерам – в ландшафтном (горизонтальном) режиме. Он возникает, когда ширина (вкладки) браузера становится менее 1000 пикселей.
Рисунок 4: первое одноколоночное расположение, которое задействуется в браузере, шириной до 700 пикселей. Пожалуй, это может сгодиться для планшетов в портретном (вертикальном) режиме?
Рисунок 5: Такой же, как предыдущий макет, но заголовку и навигации, установленочуть менее 680 пикселей в ширину, потому расположение не ломается. Хитро, но работает.
Рисунок 6: наиузкое расположение для мелких экранов, типично для мобильных телефонов. Оно вступает в игру при ширине 560 пикселей или ниже, и к тому же уменьшает в шапке заголовок, так что он будет оставаться на одной строке и при превращении навигационного меню в сетку 2 х 2.