Основы отзывчивой верстки

Необходимость адаптивной верстки

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

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

Адаптивный (Adaptive) и отзывчивый (Responsive) дизайн

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

Адаптивный (Adaptive) дизайн основан на определение разрешения экрана пользователя на стороне сервера, обратно пользователю отправляется уже оптимизированная страница и стили.

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

Адаптивность в целом ускоряет загрузку, некоторые cms и crm-системы использую такую технологию, но настроить ее сложнее. С точки зрения верстальщика сложнее отзывчивая верстка, так как в уме приходится держать одновременно несколько макетов и настраивать их вид в css.

Настройка viewport

Значение метатега viewport задается в части head html-кода страницы. Этот параметр показывает, на каком разрешении удобно будет смотреть ваш сайт на мобильных устройствах.

Три основных настройки viewport прописываются в content и влияют на отображение страницы следующим образом:

• width=360px - минимальный размер viewport, на который настроен макет (или width=device-width - принимать размер viewport как на устройстве)
• initial-scale=1 - масштаб экрана, обычно принимают за 1
• user-scalable=1 - возможность масштабировать viewport пользователем, (user-scalable=no - запрет)

Если не прописать meta viewport, то по умолчанию его значение может быть выбрано браузером width=device=1024 и user-scalable=1, но в таком случе вы можете получить непредсказуемые результаты.

Браузер непредсказуемо увеличил некоторые блоки текста пытаясь вписать макет 1366px во viewport 640px

Пример верстки

Скачайте Тестовый блок (testBlock.html), ctrl+s - сохраните страницу. Вы можете сами легко добавить в него дополнительные медиа-запросы или изменить viewport.

• Для масштабируемости будем задавать размеры в относительных единицах (em и %). Скрывать и показывать блоки будем установив свойство display: none
• Зададим значения meta viewport content=360px, initial-scale=1.0, user-scalable=1.
• Начнем с максимального разрешения. Установим стили в части < style> html-кода для .testBlock свойства width 100% и max-width: 1366px, font-size 16px
• Сначала (по умолчанию 1366px) отформатируем страницу для максимального viewport и альбомной ориентации (landscape), будут применяться стили сверху таблицы стилей. Снизу вставим media-запросы в следующем порядке: ориентация - портретная, от большего viewport к меньшему (1200px, 960px, 640px, 360px)

Тестовый блок

Проверьте, под какой экран подогнан макет тестового блока

Под максимальное разрешение viewport 1366px

Диапазон от 1200px и выше. Обычно устройства с таким высоким значение viewport - это настольные компьютеры с мониторами или ноутбуки, некоторые планшеты.

Под разрешение viewport 1200px

Диапазон 960px - 1200px. Так смотрят на iPad при альбомной ориентации и на ноутбуках. Для мониторов это разрешение слишком маленькое, для большинства смартфонов тоже не типично.

Под разрешение viewport 960px

Диапазон 640px - 960px. Так смотрят на iPad при портретной ориентации, на iPhone 6/7/8/X, Samsung Galaxy при альбомной ориентации экрана, как правило это современные смартфоны. На смартфонах для портретной ориентации такое разрешение нетипично.

Под разрешение viewport 640px

Диапазон 360px - 640px. Так смотрят на iPhone 6/7/8/X, Samsung Galaxy при портретной ориентации экрана, как правило это современные смартфоны. Так смотрят на Moto G4, Galaxy S5, iPhone 5/SE при альбомной ориентации экрана.

Под разрешение viewport 360px

Диапазон 0px - 360px. Так смотрят на Moto G4, Galaxy S5, iPhone 5/SE при портретной ориентации экрана. На альбомной ориентации с таким низким разрешением сейчас почти никто не смотрит.

Альбомная ориентация (Landscape)

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

Портретная ориентация (Portrait)

Так смотрят web-сайты в основном на смартфонах потому что соотношение ширине к длине экранов позволяет поместить на станицу больше информации и текст удобнее читается. Значение viewport большинства современных смартфонов от 360 до 640px. На настольных ПК и ноутбуках в таком режиме web-сайты практически не смотрят.

Проверка оптимизиции web-страниц

Результаты всегда лучше проверять на реальном устройстве, но если такой возможности нет, вы можете проверить другими способами, например, в devTools браузера google chrome или в поиске.

Проверка в devTools google chrome

Не забудьте, что браузеры кэшируют стили, если они включены в секцию head html-кода. Чтобы очистить кэш на ПК откройте devTools нажав ctrl+shift+i, далее удерживайте кнопку обновить страницу, в меню выберете жесткая перезагрузка. Чтобы сбросить кэш на мобильных устройствах вам надо зайти на страницу в режиме инкогнито.

Очистка кэша в браузере

Изменять размер экрана в devTools можно двигая скролл. Для проверки на смартфоне нажмите на иконку toggle device bar (ctrl+shif+m), выберите устройство и ориентацию экрана.

Проверка оптимизации на различных устройствах в Chrome

Проверка в поиске

Такие инструменты для продвижения сайтов как google search console или yandex webmaster подскажут вам, какие страницы оптимизированы, а на каких присутствуют ошибки.

Проверка удобства для мобильных страниц в google и yandex

Статистика по типам устройств

Чтобы узнать с каких устройств посещают ваш сайт, воспользуйтесь yandex metrika, в отчете смотрите диаграмму посетителей по типам устройств. Более детальную информацию можно получить с помощью аналитики.

Яндекс Метрика. Статистика по типам устройств.

Выводы

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