Реагирующий веб-дизайн позволяет вашему веб-сайту адаптироваться к устройству, на котором его просматривают ваши пользователи. Структура сайта изменяется динамически, в зависимости от размера экрана и возможностей устройства. До недавнего времени отзывчивость была бонусом, но теперь она является неотъемлемой частью хорошего веб-дизайна!
В этой статье в блоге мы познакомим вас с основами отзывчивого веб-дизайна, исследуем принципы дизайна, которые делают сайт отзывчивым. Если вы новичок в изучении этой концепции, описанные здесь основы помогут вам начать работу. Создайте свою собственную веб-страницу, которая работает на нескольких устройствах - настольных, мобильных или планшетных!
Что такое отзывчивый веб-дизайн и почему это важно?
Если вы создаете веб-сайт, вы должны знать, что ваши зрители могут получить к нему доступ с различных устройств с различным размером экрана. Растет число веб-браузеров, использующих мобильные телефоны или планшеты для просмотра веб-страниц.
В приведенном ниже примере веб-сайт был разработан таким образом, чтобы отвечать на запросы пользователей. Как вы видите, компоновка и содержимое адаптируются к дисплею в соответствии с размером и разрешением экрана.
Если ваш сайт не реагирует, содержимое не будет хорошо размещено на экране с ограниченным размером экрана. Поэтому важно, чтобы макет веб-страницы мог быть адаптирован в соответствии с устройством.
Это просто о различных размеров экрана?
Цель заключается не только в том, чтобы сделать их гибкими, но и адаптивными к устройству, которое делает ваши веб-страницы доступными для просмотра. Размер экрана является основным фактором, но есть и другие соображения, такие как плотность пикселей дисплея, сенсорный экран и т.д.
Ваша цель должна заключаться в создании веб-сайта, который будет хорошо работать на любом устройстве, независимо от размеров области просмотра, разрешения и того, как пользователь с ним взаимодействует. Вы должны планировать и создавать макет, средства массовой информации и даже навигацию для максимального удобства использования на каждом устройстве.
Итан Маркоттт - отец отзывчивого веб-дизайна.
Когда вы слышите об отзывчивом веб-дизайне, вы можете подумать о нем как о стандарте дизайна или технологии. Однако, термин не такой уж он и есть. Это набор дизайнерских принципов, которых вы должны придерживаться при создании веб-страниц, чтобы сделать их более гибкими.
Итан придумал этот термин и изложил принципы, и широко известен как отец отзывчивого веб-дизайна. Итан Маркотт придумал принцип дизайна, который умело использует CSS для визуализации одной и той же веб-страницы на экранах разных размеров, без ущерба для удобства чтения и удобства использования.
Три основных ингредиента отзывчивого веб-дизайна
Использование CSS-запросов к медиафайлам для настройки стиля
В прошлом веб-дизайнеры зависели от "User-Agent sniffing" в динамическом обслуживании различных HTML/CSS кодов или от переадресации URL-адресов. CSS3 ввел новую технику под названием " "запрос СМИ".”
Используя @media вы можете включить определенный блок свойств CSS после проверки на определенное условие. Вы можете проверить следующие условия:
- Смотровое окно Ширина/высота
- Ширина/высота устройства
- Ориентация (портрет/ландшафт)
- Резолюция
Вы можете проверить условия и использовать запросы носителей для доставки определенных блоков стилей в соответствии с типом устройства.
Синтаксис для поиска медиафайлов
@media not|only mediatype and (expressions) {
CSS-Code;
}
Пример запроса СМИ
Существует множество примеров и удобный редактор "Попробуй сам", доступный на сайте W3Schools.
В примере ниже запрос @media используется для проверки ширины области просмотра 375 пикселей и более. Если она больше 375 пикселей, то над содержимым будет отображаться меню, а если меньше 375 пикселей, то меню переместится влево.
@media screen and (min-width: 375px) {
#leftsidebar {width: 150px; float: left;}
#main {margin-left:220px;}
}
Платформы на основе жидкостных сеток
Термин "Fluid Grid" описывает схему, в которой вместо использования фиксированных пиксельных значений кодируются все в относительных пропорциях другие элементы. В результате компоненты текут (текучесть) и адаптируются к устройству.
В традиционной компоновке элементы должны располагаться с помощью фиксированных решеток. Тем не менее, в настоящее время мы имеем дело с широким диапазоном размеров экрана. Такой подход приведет к тому, что ваши сайты будут выглядеть плохо. Рассмотрим пример традиционного подхода к компоновке CSS:
Подход Fluid Grid использует "относительные пропорции", т.е. вы кодируете высоту и ширину каждого элемента в процентах или относительных размерах. В приведенном ниже примере компоненты рассчитаны с использованием "процентного" подхода:
Изображения жидкости
При подходе, основанном на отзывчивом веб-дизайне, вы должны использовать CSS для определения максимальной ширины для всех изображений, но не минимальной ширины.
Указывая максимальную ширину, вы гарантируете, что изображение никогда не будет пикселировано выше значения, которое повлияет на качество его внешнего вида. Не определяя минимальную ширину, вы позволяете CSS уменьшить размер до любого значения (необходимого для вписывания в контекст).
CSS поддерживает соотношение сторон, поэтому изображение не будет выглядеть растянутым.
Мобильный первый дизайн
Использование мобильной связи превысило использование настольных компьютеров в 2017 году. С сегодняшнего дня, StatCounter показывает, что 50,87% пользователей просматривают веб-страницы с мобильных телефонов по сравнению с 44,78% с настольных компьютеров.
Такое увеличение использования мобильных устройств означает, что дизайнеры должны уделять больше внимания тому, как их сайты будут выглядеть на экранах мобильных устройств. Поэтому все больше и больше дизайнеров при проектировании следуют правилу "мобильный в первую очередь".
"Мобильный в первую очередь" - это методология проектирования, которая предполагает, что вы начинаете проектировать веб-сайт так, чтобы он выглядел наилучшим образом для мобильных устройств (поскольку имеет наибольшие ограничения), затем расширяетесь до планшетов и, наконец, настольных компьютеров.
Тестирование вашей конструкции - моделирование и исследование
Вы найдете множество онлайн-инструментов для моделирования различных требований различных устройств и тестирования вашего сайта. Когда вы разрабатываете отзывчивый сайт, вы должны использовать такие инструменты для моделирования и тестирования внешнего вида и поведения вашего сайта на различных устройствах.
Инструменты Firefox для разработчиков - Режим быстрого проектирования
Firefox предлагает разработчику инструмент для переключения Режим гибкого проектирования вкл/выкл. При включении этой функции область содержимого можно настроить на определенный размер экрана, как показано на рисунке ниже. Вы можете смоделировать различные размеры и протестировать вашу веб-страницу.
Chrome DevTools - Режим устройства
Если вы предпочитаете Chrome DevTools, используйте следующие инструменты Режим устройства для моделирования широкого диапазона размеров экрана и разрешения. Проверьте веб-страницы с включенным режимом Device Mode, чтобы убедиться, что вы создаете полностью отзывчивый веб-сайт.
Инструмент очень мощный и позволяет эмулировать геолокационные координаты, моделировать ориентацию устройства. Вы также можете эмулировать различные браузеры, чтобы проверить, как ваша веб-страница будет выглядеть/поведовать в других браузерах.
Если вам нужна помощь с гибким веб-дизайном, DayDigital поможет вам! Мы помогли нескольким компаниям создать потрясающие веб-сайты и отметить их присутствие в Интернете. Свяжитесь с нами прямо сейчас для получения бесплатной консультации!
