Недавно опять столкнулся с недопониманием со стороны заказчика, что такое адаптивный дизайн и зачем он нужен. Думал, такие вопросы уже давно остались в прошлом, но, видимо, необходимо пояснить. Давайте разбираться вместе.
Что такое адаптивный дизайн/верстка
Адаптивный дизайн сайта — это способность сайта подстраиваться под размеры экрана устройства посетителя так, чтобы пользователь максимально доступно мог получить информацию (сделать заказ / набрать ваш номер / вернуться на сайт снова — нужное подчеркнуть). При этом меняются размеры и оформление блоков, часть информации скрывается или, наоборот, становится доступна, облегчается графическая составляющая для получения быстрой загрузки через мобильные сети и т.д.
Зачем он нужен
Мы живем в 2019 году, когда смартфон есть почти у каждого. Все больше людей предпочитает по-быстрому найти нужную информацию в телефоне, компьютеры используются больше для работы. По данным глобальной статистики top.mail.ru, в прошлом году 52% посетителей просматривала сайты с мобильных устройств. По данным на апрель 2019 года, доля посещений с мобильных устройств выросла до 70%.
Поисковые роботы давно обратили внимание на эту тенденцию, и ранжируют сайты в результатах поиска, опираясь на их оптимизацию под мобильные устройства. Если сайт не адаптивен, даже занимаясь его усиленным продвижением, можете забыть про первую страницу.
А как же мобильные сайты?
Мобильный сайт — это отдельный сайт, пусть и упрощенный по сравнению с основным. Он требует затрат на разработку и сопровождение, а в условиях непрерывного роста стоимости разработки, эти вложения никогда не окупятся. Намного выгоднее сделать адаптивным основной сайт. Что касается приложений для смартфонов, многие пользователи предпочитают заходить на сайт, вместо установки приложения. Да и сначала это приложение необходимо скачать, так что без адаптивного дизайна не обойтись.
Как проверить свой сайт
Самый простой и быстрый способ — открыть его на своем телефоне. Если по какой-то причине вы не можете этого сделать, вот способ, который сработает почти в любом браузере компьютера:
- открываете свой сайт;
- нажимаете F12 — должна открыться консоль разработчика;
- ищете такую или похожую иконку
(режим адаптивного дизайна); - Нажимаете на нее и смотрите, при необходимости выбираете в выпадающем списке нужное устройство;
- чтобы выключить режим, снова нажимаете F12.
Если Вы видите что-то похожее на первую картинку — все в порядке. Если больше похоже на вторую — пора озаботиться адаптацией дизайна вашего сайта:
