От автора: в этой статье автор покажет, как адаптивный дизайн может работать на экранах любого размера, главное правильно все распланировать. Для работы с большими экранами понадобится пара дополнительных медиа запросов, а также вы узнаете, что в веб-шрифтах куда больше потенциала, чем вы думали.
Увеличение количества экранов с ультра высоким разрешением и числа устройств с технологией smart TV привели к тому, что пользователи все чаще заходят на сайты с поистине огромных экранов. Большая часть веб-сайтов не оптимизирована под такие размеры. Но если вы создаете адаптивный сайт, то в нем уже заложены технологии масштабирования, которые нам сегодня понадобятся. В этой статье мы рассмотрим основные сложности и подходы к оптимизации веб-сайтов на больших экранах.
Как определить экран большого размера
Первое, что необходимо сделать, это определиться с тем, какие размеры подпадают под определение «большие». По данным сайта W3Counter самое распространенное разрешение устройств — 1366×768 пикселей. Следующее за ним — 1920×1080. Оба значения относятся в первую очередь к компьютерным мониторам, и большинство веб-сайтов без проблем адаптируются под эти размеры.
Поднимаясь дальше, следующее распространенное разрешение – 2560 пикселей в ширину. Эта ширина соответствует большинству HD мониторов от 27 дюймов. От этой точки у большинства сайтов начинаются проблемы из-за переизбытка свободного пространства.
Небольшая выборка популярных веб-сайтов, открытых на экране с разрешением 2560×1600 пикселей
К примеру, на изображении выше показана выборка из нескольких популярных веб-сайтов, скриншоты были сняты с экранов с разрешением 2560×1600 пикселей. Сразу заметно, что ни один из сайтов не оптимизирован под такое разрешение: текст слишком мелкий, контент зажат в маленьком пространстве так, что сложно сосредоточиться. Из-за большого пустого пространства вокруг макета, все кажется слишком мелким. Все это влияет на разборчивость и на пользовательский опыт.
Так что же мешает дизайнерам и разработчикам оптимизировать сайты под большие экраны? Ответ на этот вопрос целиком зависит от команды разработчиков. У такого разрешения есть несколько технических проблем. Давайте разберем эти проблемы.
Проблемы больших дисплеев
Основная проблема оптимизации больших дисплеев лежит в области масштабирования и управления контентом. Если разбить проблемы на две категории, то основные проблемы это:
Хореография контента
Хореография контента – это то, как контент пропорционально адаптируется к размеру экрана, обеспечивая наилучшее расположение при любой ширине. Чем больше экран, тем менее пропорциональным будет выглядеть контент. Проблема связана с несколькими причинами: 1) нагромождение, которое начинает отвлекать внимание, 2) слишком много пустого пространства вокруг сайта делает контент слишком мелким, 3) из-за того, что все маленькое страдает читаемость.
В общем-то, принцип адаптации контента под маленькие экраны простой: контент расставляется в одну колонку и по необходимости частично меняется дизайн. Но вот для больших экранов принцип радикально отличается и зависит от контента и доступного пространства. Если не адаптировать контент на больших экранах под чрезмерное свободное пространство, контент будет казаться слишком мелким по сравнению с окружением. Но если заполнить пустое пространство с помощью дополнительных колонок, вы рискуете перегрузить пользователя контентом, его будет слишком много.
Изображения
С изображениями на больших экранах связан ряд уникальных задач. Так как большинство больших экранов также имеют большое разрешение, нам придется создать дополнительные версии всех изображений. Кроме того, нам придется следить за тем, как изображения ведут себя внутри макета. Изображения, не увеличивающиеся с экраном, будут оставлять пустое пространство между элементами, а слишком большие изображения будут отнимать пространство у других элементов, перегружая пользователя. Так как идеального решения под все размеры нет, вы должны аккуратно подходить к изображениям и исходить из нужд контента.
Техники оптимизации
Мы определили проблемы, которые появляются при работе с большими дисплеями, теперь давайте разберем несколько способов оптимизации нашего контента под такой масштаб.
Для демонстрации способов оптимизации я создал сайт. Учитывая заголовок статьи, я выбрал соответствующую тематику – Звезду Смерти 2. Дальше я буду показывать куски кода из демо, весь же код можно посмотреть в демо на CodePen.
Способ оптимизации контента под большие дисплеи зависит от самого контента. Можно просто изменять макет, извлекать преимущества из большого свободного пространства и отображать контент. А можно адаптивно увеличивать контент, чтобы он занимал пропорциональное пространство. Ну и можно совмещать оба варианта. В нашем демо мы будем адаптивно масштабировать контент, предоставляя пользователям наилучший опыт серфинга сайтов на больших экранах.
Планирование
Первый этап по оптимизации сайта под большой экран заключается в планировании. Планируя все наперед, вы сведете к минимуму все возможные сюрпризы и будете уверены, что все будет работать как надо. У вас не будет неожиданных проблем, которые будет сложно решить, когда разработка уже будет в самом разгаре. Если вы визуализируете макет и поведение контента в графическом редакторе, то создайте подходящие холсты под большие экраны и стандартные разрешения. Если же вы любите создавать дизайны в браузере, тогда зарисуйте свои идеи того, как контент будет вести себя на больших экранах.
Для нашего демо я сделал зарисовку макета и контента и понял, как разбить сайт на секции, а также как структурировать веб-страницу под эти секции. Потом я набросал дизайн в Sketch, который помог мне определиться со шрифтами, цветом и пропорциями. Главное здесь не вдаваться в детали и не заботиться об идеально выверенных значениях в пикселях – все самое важное, интерактивность, масштабируемость и даже размер шрифта должно решаться уже в браузере.
Изначальная зарисовка и наброски дизайна Звезды Смерти 2
Работа с относительными единицами измерения
Относительные единицы измерения, такие как проценты, EM и REM играют первостепенную роль в адаптивных сайтах, так как с их помощью можно заложить гибкое основание. Используя относительные единицы измерения, мы сохраним пропорции вне зависимости от размера шрифта, выбранного пользователем. Относительные единицы измерения являются полной противоположностью точным значениям в пикселях, не увеличивающимся в соответствии с настройками пользователя. Это приводит к потере пропорций в случае, если пользователь захочет увеличить или уменьшить размер шрифта.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Разрешения $bp-small: 48em; // 768px $bp-medium: 64em; // 1024px $bp-large: 85.375em; // 1366px $bp-xlarge: 120em; // 1920px $bp-xxlarge: 160em; // 2560px // Медиа запросы $mq-small: "(min-width: #{$bp-small})"; $mq-medium: "(min-width: #{$bp-medium})"; $mq-large: "(min-width: #{$bp-large})"; $mq-xlarge: "(min-width: #{$bp-xlarge})"; $mq-xxlarge: "(min-width: #{$bp-xxlarge})"; $mq-retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"; |
Взять, к примеру, медиа запросы для нашей Звезды Смерти 2. Задав медиа запросы в единицах измерения EM, мы сохраняем пропорции дизайна. Если пользователь изменит масштаб страницы, в браузере не появится раздражающая полоса прокрутки.
Масштабирование текста
Помимо медиа запросов относительные единицы измерения помогают при работе с текстом. Если всему тексту на сайте задать единицы измерения EM, то можно будет глобально контролировать размер шрифта, задав тегу body свойство font-size. Особенно полезно при работе с большими экранами, так как такой способ позволяет пропорционально увеличивать размер шрифта всей страницы с увеличением размера экрана. Таким образом решается проблема чересчур мелкого текста на экране.
Реализовывать данный метод мы начнем с того, что зададим несколько переменных. Из кода ниже видно, что первый шаг – это определиться с базовым значением размера шрифта. В нашем случае это 1em, т.е. мы используем значение браузера по умолчанию. Значение по умолчанию можно легко изменить в браузере, но обычно это 16px. Также в паре с размером шрифта нам нужно задать высоту строки line-height. В коде видно, что у данного свойства не заданы единицы измерения. Мы используем так называемое значение без единиц измерения, таким образом дочерние элементы будут рассчитывать свою высоту строки относительно их размера шрифта и не будут наследовать эти значения от родителей.
1 2 3 4 5 6 |
// Размер шрифта $base-font-size: 1em; // Высота строки $base-line-height: 1.5; $header-line-height: 1.25; |
Далее мы применяем оба значения к тегу body и постепенно увеличиваем их с увеличением размера экрана. Как я выше сказал, если размер шрифта контента был задан в относительных единицах EM, то увеличиваться будет весь текст на сайте.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
body { font-size: $base-font-size; line-height: $base-line-height; @media #{$mq-medium} { font-size: $base-font-size*1.2; line-height: $base-line-height*1.2; } @media #{$mq-large} { font-size: $base-font-size*1.3; } @media #{$mq-xlarge} { font-size: $base-font-size*1.4; } @media #{$mq-xxlarge} { font-size: $base-font-size*1.6; } } |
Так как же сильно масштабирование текста влияет на соблюдение пропорций экрана? Оказывается существенно. Взгляните на рисунок ниже. Слева размер шрифта не увеличивается и не привязан к тегу body, справа размер шрифта масштабируется глобально. Оба примера открыты на экране шириной 2560 пикселей. Масштабируемая версия не только более разборчива, все элементы на странице были пропорционально увеличены и занимают теперь куда большее пространство.
Скриншот с экрана шириной 2560 пикселей показывает разницу между глобально немасштабирующимся текстом (слева) и глобально масштабируемся (справа)
Ограничение масштабируемости контента
В наборе инструментов по адаптивному веб-дизайну есть несколько способов наравне с пресловутым «контейнером», способных сдержать разрастание контента. У контейнеров всего одна задача – контролировать максимально допустимую ширину, до которой контент может расширяться. К примеру, код ниже, наиболее распространенный способ в CSS:
1 2 3 4 |
.container { margin: 0 auto; max-width: 1024px; } |
Способ работает, но он не позволяет масштабировать контент под большие экраны из-за строго заданной максимальной ширины. Даже если достаточно увеличить max-width, это не поможет при изменении ширины окна браузера. Лучше всего – задать левый и правый margin при помощи относительных единиц и постепенно увеличивать эти значения с увеличением размера экрана. В результате контент будет зависеть от ширины экрана и выглядеть намного лучше на ультра больших экранах.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.container { margin: 0 4%; @media #{$mq-medium} { margin: 0 8%; } @media #{$mq-large} { margin: 0 12%; } @media #{$mq-xlarge} { margin: 0 18%; } } |
Управление изображениями
То, как вы будете работать с изображениями на больших экранах, полностью зависит от нужд вашего проекта, но вам придется создать подходящие версии изображений высокого разрешения, чтобы они не казались слишком маленькими. Мы выберем другой подход, в зависимости от назначения изображения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.detail { height: 0; padding-bottom: 40%; margin: 0 0 $base-spacing*2; background-image: url(/Death-Star/detail_sml.jpg); background-position: center center; background-size: cover; @media #{$mq-xlarge} and #{$mq-retina} { background-image: url(/Death-Star/detail_sml%402x.jpg); } @media #{$mq-medium} { background-image: url(Death-Star/detail_med.jpg); } @media #{$mq-medium} and #{$mq-retina} { background-image: url(/Death-Star/detail_med%402x.jpg); } // еще медиа запросы } |
С фоновыми изображениями все просто: прикрепляем фоновое изображение к подходящему элементу, задаем элементу размеры и указываем копии изображения более высокого разрешения с помощью медиа запросов. На изображении выше видно, как это реализовано в демо. Обратите внимание, что мы задали свойство height: 0, добавили нижний паддинг, а свойству background-size установили значение cover. Тут используется так называемая техника Uncle Dave’s Ol’ Padded Box, которая позволяет нам сохранять соотношение сторон при помощи паддинга в процентах на основе ширины родительского блока.
А для инлайновых изображений появилась HTML спецификация, которая позволяет расширить тег img списком различных версий изображения для разных размеров. Браузер сам подбирает наиболее подходящее изображение. В коде ниже показано, как это делается. В теге img при помощи атрибутов srcset и sizes задаются дополнительные ссылки на изображения и их размеры, что позволяет браузеру переключать разрешение изображения в зависимости от размера экрана и плотности пикселей, тем самым выбирается наиболее подходящее изображение.
1 2 3 4 5 6 7 8 9 10 11 |
<header role="banner" class="header"> <div class="header__img"> <img srcset="./death-star_sml%402x.jpg 400w, ./death-star_lrg.jpg 600w, ./death-star_sml%402x.jpg 800w, ./death-star_lrg%402x.jpg 1200w" sizes ="(min-width:1336px) 75vw, 50vw" alt="Death Star 02"> </div> </header> |
Вы могли заметить, что мы выбросили атрибут src. Это потому, что для поддержки srcset и sizes в браузерах, которые пока не могут работать с данными атрибутами, мы должны были подключить полифил. В полифиле прописано, если браузер не поддерживает новые атрибуты, то будет использован старый src, т.е. дважды указывать его нет смысла. Чтобы у нас случайно не было двух атрибутов src, автор полифила рекомендует не указывать данный атрибут и использовать только srcset.
Заключение
Наш долг обеспечить пользователям наилучший опыт на любых экранах. При оптимизации контента под большие разрешения мы не должны ограничиваться только распространенными разрешениями. При должном планировании мы можем задействовать уже имеющиеся в адаптивном дизайне веб-сайта инструменты для адаптации контента под большие экраны.
Автор: Jon Yablonski
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (1)