Что такое адаптивный дизайн? (Пояснительное видео и инфографика)
На то, чтобы адаптивный веб-дизайн (RWD) стать мейнстримом, так как Кэмерон Адамс впервые представил концепция в 2010 году. Идея была гениальной — почему мы не можем создавать сайты, которые адаптируются к области просмотра устройства, на котором они просматриваются?
Что такое адаптивный дизайн?
Адаптивный веб-дизайн — это подход к дизайну, который гарантирует, что веб-сайт обеспечивает оптимальное качество просмотра на любом устройстве, независимо от размера экрана или разрешения. Он включает в себя использование гибких макетов, макетов на основе сетки и медиа-запросов для создания сайта, который подстраивается под размер экрана, на котором он просматривается. Это означает, что веб-сайт, разработанный с использованием адаптивного веб-дизайна, будет хорошо выглядеть и работать на настольном компьютере, планшете или смартфоне.
Другими словами, такие элементы, как изображения, можно настраивать, а также расположение этих элементов. Вот видео, в котором объясняется, что такое адаптивный дизайн, а также почему ваша компания должна его внедрить. Если вы разрабатываете новый дизайн сайта или веб-приложение, адаптивный веб-дизайн является обязательным, а не вариантом, учитывая, что более половины всего веб-трафика поступает с мобильных устройств с различной шириной и высотой области просмотра.
Адаптивный дизайн также оптимален для веб-дизайнеров, которым не нужно создавать независимые интерфейсы, уникальные в зависимости от устройства или области просмотра. Адаптивный веб-дизайн может быть выполнен с использованием CSS.
Отзывчивый дизайн Запросы окна просмотра CSS
Вот пример таблицы стилей, которая настраивает размер шрифта в зависимости от области просмотра с помощью медиа-запроса:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
Браузеры сами осознают свой размер и загружают таблицу стилей сверху вниз. Запрашивая применимые стили для размера экрана, вы можете установить определенные элементы стиля для каждой минимальной и максимальной ширины устройства. Это не означает, что вам нужно создавать разные сайты для каждого размера экрана, вам просто нужно перемещать необходимые элементы с помощью медиа-запросов.
Ориентация на мобильные устройства сегодня является базовым стандартом. Лучшие в своем классе бренды думают не только о том, удобен ли их сайт для мобильных устройств, но и о полном удобстве для клиентов.
Люсинда Дункальф, генеральный директор Monetate
Вот инфографика от Monetate иллюстрируя потенциальные преимущества создания одного адаптивного дизайна для нескольких устройств:
Является ли ваш сайт адаптивным?
Один из простых способов проверить, является ли ваш сайт отзывчивым, — просто увеличить или уменьшить окно браузера, чтобы увидеть, перемещаются ли элементы в зависимости от ширины браузера.
Для большей точности наведите Google Chrome браузер на ваш сайт. Выбирать Просмотр> Разработчик> Инструменты разработчика из меню. Это загрузит кучу инструментов на панели или в новом окне. Нажмите на маленький значок слева от строки меню инструментов разработчика, который выглядит как значок мобильного телефона и планшета. Вы можете выбрать некоторые стандартные устройства и даже изменить, хотите ли вы просматривать страницу горизонтально или вертикально.
Вы можете использовать параметры навигации вверху, чтобы изменить вид с альбомной на портретную, или даже выбрать любое количество предварительно запрограммированных размеров области просмотра. Возможно, вам придется перезагрузить страницу, но это самый крутой инструмент в мире для проверки ваших адаптивных настроек и обеспечения отличного вида вашего сайта на всех устройствах!