Размер экрана компьютера для сайта

Оптимизация веб-сайтов под большие экраны

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

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

Бесплатные уроки HTML для начинающих

Помимо текстовых уроков, Вы также сможете найти на нашем сайте полезные видео уроки по HTML. Простые и понятные примеры и объяснения помогут Вам в кратчайшие сроки освоить этот базовый язык «сайтостроения».

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

В зависимости от размеров экрана — гибко, но надо перепроверять на разных экранах

Чтобы не зависеть от размера пикселей, а масштабировать элементы в зависимости от размера экрана, придумали другие единицы измерения:

• vh — это 1% от высоты окна;
• vw — это 1% от ширины окна.

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

В этом случае браузер сделает так:

1. Посмотрит, что за единица измерения — vw, значит нужна ширина экрана.
2. Узнает, какой ширины в пикселях окно, в котором открывается эта страница.
3. Поделит её на 100, чтобы узнать размер одного vw в пикселях.
4. Умножит это значиние на 50, чтобы понять размер в пикселях нужного нам элемента.
5. Установит это значение в пикселях при вёрстке.
6. Если в процессе просмотра у браузера поменяется размер экрана — он сам всё пересчитает и отрисует заново.

Используем страницу из предыдущего раздела и немного переделаем её — установим такой размер блоков:

• первый блок — 10vw
• второй блок — 20vw
• третий — 50vw

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

Ещё есть vmin и vmax, которые работают так:

• vmin находит минимальное значение из пары (vh, vw);
• а vmax находит максимальное значение из пары (vh, vw).

Это нужно, например, для адаптивной вёрстки, когда вам требуется привязаться к короткой стороне экрана и в зависимости от её размеров построить всю остальную страницу.

Осторожность с резиновым макетом

Резиновый макет в определенном смысле разрешает упомянутую выше проблему. Это когда ширина страницы способна растянуться под ширину экрана и потому учтены предварительно все версии дисплеев.

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

Представьте себе, что вы занимаетесь чтением книги со строкой около семьдесят сантиметров длины. Удобно вам будет читать ее? Скорее всего нет, ведь средний формат книги предполагает не больше 60-80 символов на строке. Именно поэтому, подобная технология создания сайта не приемлема.

Если вы создаете резиновый макет, то вам стоит позаботиться о посетителе — поставить ограничение, примерно 1200-1300 пикселей максимальной ширины страницы.

Экран и область просмотра в адаптивном дизайне

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

Для мобильного просмотра веб-мастеры в зависимости от потребностей бизнеса выбирают способ отображения сайта: разрабатывают отдельную мобильную версию, делают адаптивную верстку или динамическую — RESS (Responsive Design + Server Side). Для корректного отображения проекта на разных моделях планшетов и десктопов также нужен адаптив под разные разрешения.

Размер, разрешение экрана, плотность пикселей у разных устройств отличаются. Выделяют такие показатели:

• диагональ экрана — размер дисплея в дюймах, измеряется от угла к углу;
• размер экрана в точках — количество точек, их устройство использует для координат;
• полное число пикселей (Rendered Pixels), которое визуализирует устройство. Значение считают с помощью множителя 1x, 2x, 3x, который устройство использует к размеру экрана в точках;
• физические пиксели — фактическое разрешение экрана в пикселях; в экранах Retina, которые используют современные модели техники Apple, более высокое разрешение изображения на экране с меньшим количеством физических пикселей.

К примеру, возьмем смартфоны: у IPhone 3 с диагональю 3.5″ физическое разрешение экрана 320x480px, а плотность пикселей 163ppi. Разрешение соответствует диагонали, плотность пикселей невысокая. Если отобразить на нем текст, набранный размером 16px, он будет читаться так же хорошо, как и на экране компьютера. Модель IPhone 6 Plus с дисплеем Retina использует более высокое разрешение изображения на экране с меньшим количеством физических пикселей, полноэкранное изображение — 1242x2208px.

Экран IPhone 6 Plus. Источник: kylejlarson.com

Из-за высокой плотности пикселей тот же текст, набранный в размере 16px, будет выглядеть на экране IPhone 6 Plus значительно мельче, чем на дисплее IPhone 3 . Чтобы сделать страницу с таким текстом пригодной для чтения, нужно отмасштабировать ее, увеличив в три раза.

Отношение пикселей зависит от плотности дисплея:

• плотность менее 200 DPI (точек на дюйм) — соотношение 1.0;
• от 200 до 300 DPI — 1.5.
• более 300 DPI — соотношение представляет собой плотность/150 точек на дюйм.

В основе адаптивного дизайна лежат принципы подвижности и пропорциональности. Веб-мастеры создают макеты в высоком разрешении, располагая контент по модульной сетке из 12, 16 или 24 колонок Bootstrap, и используют адаптивную верстку. Сервер отправляет одинаковый HTML-код на все устройства, но размеры элементов CSS масштабирует под устройства с помощью CSS-правила @viewport и мета-тега «viewport» в HTML. Это позволяет добиться четких изображений и читабельного текста.

Адаптивность есть во всех современных требованиях к PSD-макетам сайта. Пример требований by andrey-hohlov на GitHub.

О важности вопроса

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

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

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

Итак, какой же должна быть ширина сайта в пикселях?

Какой способ верстки и ширину сайта выбрать?

Первое – сайт должен быть максимально удобен и презентабелен для наиболее распространенного разрешения.

Общую статистику популярных разрешений можно найти в сервисах:

• w3counter.com – тут статистика в первую очередь по США; – это общая статистика. Также можно сегментировать статистику по категориям.

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

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

Например, если мы возьмем за основу информацию с сайта w3counter, самое популярное разрешение по ширине – это 1366px. Соответственно, эту ширину можно брать как максимум, больше которого увеличивать контент не стоит.

При этом учитывайте, что контент смотрится лучше, когда есть небольшие отступы по бокам. Плюс к этому, немного (порядка 24) пикселей нужно оставить под полосу прокрутки. Размер отступов выбирайте сами – обычно это порядка 50-80px.

Учитывая это, мы склоняемся к варианту фиксированной максимальной ширины. За среднюю цифру максимума можно взять примерно 1200px.

В качестве минимальной ширины, после которой появляется полоса горизонтального скролла, можно взять 960px. Меньше делать особого смысла нет.

Заключение

Адаптивная верстка позволяет сэкономить и не делать несколько дизайнов под каждый скрин — достаточно прописать правила для отдельных частей блоков. Сайты с таким дизайном получают одобрение и со стороны поисковиков. Например, Гугл официально заявил, что отдает предпочтение ресурсам, адаптированным под mobile-first.

Краткое резюме по статье

Это наиболее популярные устройства, с которых заходят пользователи. Смартфон (320-480px), планшет (600-1024 px), ноутбуки и компьютеры (1280 px и более).

Выше был приведен обзор сервиса Screenfly. Есть и другие инструменты — Google Mobile Friendly, Iloveadaptive, Adaptivator.

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

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

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

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

Как сделать адаптивную верстку

Вебмастер, который немного разбирается в HTML и CSS и имеющий некоторый опыт, при должном усердии сможет адаптировать даже давно работающий объемный сайт, но повозиться придется не мало. Давайте рассмотрим, как сделать адаптивный дизайн с минимальными затратами времени.

CSS-фреймворки

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

• Bootstrap . Самый популярный фреймворк, используемый в веб-разработке. Легко и быстро адаптирует сайт под любое устройство, используя 12-колоночную сетку. Доступно огромное количество готовых компонентов. Поддерживает 2 самых популярных CSS-препроцессора: Sass и Less, а также Normalize.css, обеспечивающий кроссбраузерность контента.
• Materialize . Платформа, созданная по всем принципам материального дизайна (использование «карточек», плавный переход между элементами, отсутствие острых углов, применение строгих макетов и анимаций). Инструмент содержит набор стилей и инструменты для их реализации. Используется 12-колоночная сетка. Поддерживается Sass.
• Bulma . Современный фреймворк, использующий Flexbox вместо сетки колонок — очень удачную реализацию «резиновых» контейнеров. Доступно большое количество готовых компонентов, поддерживается Sass.
• Pure . Компиляция небольших адаптивных модулей, которые можно использовать на любом ресурсе. Требует написания собственных кастомных стилей, так как в этом фреймворке их количество сведено к минимуму. Поддерживает 24-колоночную сетку. Не использует файлы JS.

Адаптируем текущий дизайн

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

Почти всегда строка с тегом Viewport выглядит следующим образом:

Параметр width дает браузеру команду подстроить страницу под экран устройства, с которого пользователь зашел на сайт. Масштабирование определяется автоматически. Initial-scale означает коэффициент масштабирования. Если ему присвоено значение 1, разрешение экрана устройства и CSS приравниваются друг к другу независимо от размера. Тег Viewport нужно прописать в head каждой страницы сайта.

Рассмотрим адаптацию работающего сайта на примере самого популярного фреймворка Bootstrap. Чтобы он работал на странице, в head нужно прописать и код его активации. В случае с последней, 5-й версией, это выглядит так:

Пример кода Bootstrap

Код для Bootstrap 4:

Пример кода Bootstrap 4

И последний штрих, без которого верстать адаптивный дизайн под размер экрана невозможно — добавление в разметку классы сетки Bootstrap. Разным устройствам в этом фреймворке присвоены разные префиксы класса, от чего и будем отталкиваться.

Классы сетки Bootstrap

Следует учитывать, что префикс .col- отвечает не только за минимальные значения, но и за автоматическую разметку на экранах любых размеров.

Пример колонок равной ширины. Добавить можно любое количество классов, при этом ширины всех колонок будут равными:

Пример колонок равной ширины

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

Фиксированная ширина колонок

Для адаптации содержимого под размер экрана используется следующий метод:

Адаптация содержимого под размер экрана

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

Фиксированные размеры колонок и адаптивный размер для остального содержимого

CSS3 Media Queries

Как дополнительный инструмент можно использовать медиа-запросы — правила CSS, управляющие стилями элементов исходя из технических характеристик устройства. Эти конструкции помогают определить, какие элементы отображать на каком устройстве, а какие скрыть. Медиа-запросы, которые появились в версии CSS3, сегодня определяют все современные браузеры. В этом случае тоже нужно прописать тег Viewport в head страницы.

Для медиа-запросов используется следующий синтаксис:

Синтаксис для медиа-запросов

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

@media all and (not handheld)

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

* Meta Platforms Inc. (и принадлежащие ей соц.сети Instagram, Facebook) признана экстремистской организацией, ее деятельность в России запрещена.