Адаптивный и отзывчивый дизайн
Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн.
Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.
Прилагательные «адаптивный» и «отзывчивый» чаще всего употребляются как синонимы. Адаптивность достигается за счёт использования разных CSS-стилей оформления страницы, которые используются на разных размерах окна браузера и при разных разрешениях экрана.
Альтернативный подход — это создание отдельного сайта под мобильные устройства, но этот путь на сегодняшний день не самый правильный, так как он не так удобен для пользователей и к тому же увеличивает стоимость поддержки этих сайтов.
Использование «десктопной» версии сайта на мобильных устройствах обычно вызывает сложности. Поэтому и используется адаптивный подход — для телефонов и планшетов разрабатывается отдельный дизайн и сайт «подстраивается» под размер экрана пользователя.
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения.
Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет-соединение. Рассмотрим самые распространённые.
Адаптивные изображения позволяют не только экономить трафик, но и обеспечивают более высокое качество отображения на устройствах в зависимости от физического размера и от плотности пикселей экрана.
Мы создаём сайты, которые адаптируются под экраны мобильных устройств.
Использование отзывчивого или адаптивного дизайна позволяет сайту отображаться по-разному на обычных мониторах и на экранах различных мобильных устройств в зависимости от их размера. Как правило, разрабатывается три отдельных варианта дизайна — для обычных ПК, для планшетов и для смартфонов.
Мы разрабатываем адаптивные сайты, удобные при их просмотре на мобильных устройствах и с быстрой загрузкой даже через плохой канал связи
Cтатьи по теме:
Все технологии фронтенд-разработки: язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript
Чек-лист проверки фронтенда
БЭМ и независимые блоки
Валидность и семантичность HTML
HTML5 — новая версия стандарта
Ускоряем работу сайта: оптимизация HTML
Ускоряем работу сайта за счёт оптимизации CSS
Тематические технологии:
