Адаптивный дизайн сайта — необходимость или роскошь?

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

Для начала разберемся, что собой представляет адаптивный дизайн сайта. Адаптивный дизайн — это гибкий структурный шаблон, адекватно отображаемый при любом размере экрана устройcтва. Расположение, оформление и вывод элементов структуры зависят от того, с какого именно устройства посетитель зашел на этот сайт. В построении сайта задействованы каскадные таблицы стилей, автоматически определяющие размер экрана и выдающие нужное для данного устройства оформление загружаемой страницы.

Что значит «адаптивный сайт»

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

Чем отличаются адаптивный и резиновый дизайн

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

Резиновый (отзывчивый или responsive) сайт подстраивается под размеры каждого устройства. Это единый код, в котором верстальщик прописывает, как изменяется структура страницы в зависимости от ширина экрана. Для этого используются так называемые «медиа запросы»:

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

Для адаптивного сайта нужно разработать отдельный макет под каждое устройство. Все они верстаются отдельно, и HTML-код будет разным. Как правило, дизайн подстраивают под пять размеров экрана:

• 320x568px
• 360x640px
• 768x1024px
• 768x1366px
• 1080х1920px

Когда пользователь подключается к сайту, сервер определяет тип устройства и выводит подходящий HTML. URL-адрес при этом остается неизменным.

Плюсы и минусы подходов к веб-дизайну

Адаптивный сайт	Резиновый сайт
Плюсы: Лучше работает в том случае, если функционал на устройствах сильно различается. Контент оптимизируется под каждое устройство, значит — можно увеличить скорость загрузки на мобильных. Можно разрабатывать шаблоны под разные устройства, не меняя основной сайт.	Плюсы: Подойдет тогда, когда функционал одинаков для всех устройств. Быстрее и дешевле по сравнению с адаптивным дизайном: вам нужно создать только один шаблон.
Минусы: Разрабатывать 5 макетов примерно в 5 раз дороже, чем один. Если проект ограничен во времени, лучше выбрать респонсив. Придется работать с сервером, а значит — подключать больше программистов.	Минусы: Скорость загрузки ниже, чем у адаптива. Загружаются все элементы для всех устройств. Основной сайт придется переработать под новый шаблон.

Как создать адаптивный сайт

1. Если это коммерческий сайт, начните с подготовительных работ, которые подробно описаны здесь.
2. Нарисуйте прототипы и дизайн для всех устройств.
3. При разработке помните: один верстальщик, скорее всего, не справится. Нужен разработчик, который напишет скрипт, чтобы определять тип устройства и выводить нужный HTML на экран пользователя.
4. Не делайте версии слишком разными. Пользователи не хотят знакомиться с абсолютно новым сайтом на мобильном или планшете.

Как проверить адаптивную версию сайта

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

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