Что такое адаптивный дизайн

Что такое адаптивный дизайн

1280 775 admin

Адаптивный веб-дизайн (англ. Adaptive Web Design) — дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера. (Wikipedia)

1. Немного истории

Когда-то давно, когда сахар еще был сладким, а трава зеленой, сайты делились на два типа — web-сайты и wap-сайты. Первые были предназначены для просмотра с компьютеров, вторые — для просмотра с мобильных телефонов. Это было действительно удобно, web-сайты имели большой вес, широкий функционал и красивое оформление, wap-сайты же, напротив, весили мало и содержали в основном голый текст и иногда изображения. Оно и понятно, мобильные телефоны тогда были слабенькие, а мобильный интернет — медленный и очень дорогой.

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

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

2. Предпосылки появления адаптивного дизайна

  • Огромное разнообразие устройств и разрешений экранов
  • Рост производительности мобильных устройств
  • Удешевление и рост скорости мобильного интернета
  • Борьба поисковых систем с дублирующимися страницами по разным адресам

Было решено реализовать изменение дизайна элементов в зависимости от ширины экрана посредством медиа-запросов.

Для начала давайте добавим в блок head страницы следующий код:

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

А так же добавим к ссылке на таблицу стилей media="all", этим мы указываем, что данная таблица применима ко всем устройствам:

Уже внутри таблицы style.css мы будем указывать как именно изменить стиль элемента, если сайт открыт на планшете или телефоне, либо для конкретной ширины экрана.

3. Медиа-запросы

Итак, подготовку мы сделали, теперь давайте перейдем к примерам.

Ниже пример самого простого медиа-запроса.

После добавления в style.css этого кода он сработает только при условии, что размер экрана не более 600 пикселей. А именно, если мы откроем страницу с устройства с шириной экрана, например, 480 пикселей — боковая панель не будет отображаться.

Таким образом мы можем регулировать свойства и главное размер элементов в процентнах. К примеру, у нас есть страница с тремя промо-блоками в ряд. Ширина этих блоков будет равна 33.3%.

Давайте сделаем так, чтобы на планшетах отображалось два блока в ряд, а на телефонах — один блок. Для этого добавим в наш style.css следующий код:

Ширина блока 50% будет применяться для всех устройств при ширине области просмотра от 569px до 1024px включительно, а ширина 100% — при ширине области просмотра не более 568px.

[mk_image src=»https://yokoart.com.ua/wp-content/uploads/2017/11/adaptivniy_dizayn.png» image_size=»medium» lightbox=»true» margin_bottom=»20″]

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

4. Почему это необходимо?

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

Из минусов адаптивного дизайна по сравнению с мобильной версией можно выделить только увеличение веса страницы, но с массовым переходом на 3G интернет и огромное количество точек доступа Wi-Fi это не выглядит серьезным минусом.

5. Фреймворки

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

В этом фреймворке страница делится по сетке на 12 колонок, и если мы захотим изменить размер элемента на планшетах или телефонах — нам не нужно копаться в стилях, достаточно присвоить этому элементу нужный класс.

Для разработчиков это означает снижение затрат времени и труда на верстку адаптивного сайта.

Подробнее о сетке Bootstrap можно почитать на официальном сайте.

6. Заключение

Адаптивный дизайн является неотъемлемой частью любого современного сайта, ведь его применение гарантирует, что сайт будет выглядеть хорошо на любом устройстве — от мобильного телефона до телевизора.

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

Если вы только планируете создавать сайт — обязательно требуйте наличие адаптивного дизайна у исполнителя, а если сайт уже есть, но вы сомневаетесь нужен ли ему адаптивный дизайн — уверяю вас, нужен. Результат отобьет потраченные ресурсы, а пользователи будут вам благодарны.