На данном этапе мы умеем делать исключительно статические сайты: у всех элементов дизайна заданы как минимум фиксированная ширина, размер шрифта и положение.
Подобное оформление может неплохо смотреться, но лишь на ограниченном диапазоне устройств. Что же делать, когда нужен сайт, который должен хорошо выглядеть как на мобильном устройстве, так и на планшете с компьютером? Тут и понадобится адаптивная верстка!
Перед ознакомлением с текстом лекции желательно вспомнить о том, из чего скалдываются размеры элемента на странице, и как их можно задавать. Также важно ввспомнить о том, какие относительные единицы измерения существуют в CSS.
Адаптивная вёрстка сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и смартфонов.
Разные макеты под компьютер, плашнет и телефон
Мобильный интернет-трафик растёт с каждым годом растёт, и, чтобы эффективно обрабатывать этот трафик, нужно предлагать пользователям адаптивные сайты с удобным интерфейсом.
Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах.
Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly.
В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.
Проверить отображение страницы на мобильных устройствах можно на сервисах Яндекс.Вебмастер и Google Developers.
Пример выдачи сайтов в мобильной версии поисковика
Адаптивная вёрстка предполагает отсутствие горизонтальной полосы прокрутки и масштабируемых областей при просмотре на любом устройстве, читабельный текст и большие области для кликабельных элементов. С помощью различных приёмов можно управлять компоновкой и расположением блоков на странице, перестраивая шаблон таким образом, чтобы он адаптировался под разные размеры экранов устройств.
Существует и еще один подход к проектированию комфортного для пользователя дизайна. Для понимания разницы между отзывчивым и адаптивным дизайном приведу два определения рядом:
Responsive Design (RWD) — отзывчивый дизайн — проектирование сайта с определенными значениями свойств, например, гибкая сетка макета, которые позволяют одному макету работать на разных устройствах;