Адаптивный дизайн: как сайт подстраивается под экран

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

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

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

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

Главное преимущество такого подхода — посетитель на любом устройстве получает полноценный сайт, не ограниченный урезанной «мобильной версией», и при этом ему удобно им пользоваться.

Как это работает технически

Не обязательно разбираться в коде, чтобы понимать принципы. Но знание базовых механизмов помогает грамотно ставить задачу разработчику и принимать работу.

Контрольные точки

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

Гибкая сетка

Ширина блоков задаётся не в жёстких пикселях, а в долях от доступного пространства. Благодаря этому страница плавно тянется и сжимается между контрольными точками, а не «прыгает» от одного фиксированного состояния к другому.

Гибкие изображения

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

Подход «сначала мобильные»

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

Что меняется на разных экранах

Адаптация — это не просто сжатие. Некоторые элементы меняют форму, некоторые переезжают, некоторые на маленьком экране прячутся за кнопкой.

Элемент	Компьютер	Смартфон
Меню	Горизонтальная строка с пунктами	Кнопка-«гамбургер», раскрывающая список
Карточки услуг или товаров	3–4 в ряд	1–2 в ряд или горизонтальная прокрутка
Таблицы	Полная ширина	Прокрутка внутри блока или перестройка в карточки
Боковая колонка	Справа или слева от контента	Под основным контентом
Контакты	В шапке и подвале	Кнопка связи, доступная в одно касание
Формы	Поля в две колонки	Поля в одну колонку, крупные

Ошибки, которые портят адаптивный сайт

Формально адаптивным сейчас называют почти любой сайт. Но между «не разваливается на телефоне» и «удобно пользоваться с телефона» — большая разница. Вот что чаще всего встречается при проверке.

• Горизонтальная прокрутка. Какой-то элемент — таблица, картинка, длинное слово — шире экрана, и вся страница начинает ездить вбок.
• Слишком мелкий текст. На смартфоне основной текст должен быть не меньше 16 пикселей, иначе его приходится увеличивать жестом.
• Кнопки и ссылки вплотную друг к другу. Пальцем невозможно попасть в нужную, человек промахивается и раздражается.
• Скрытый важный контент. Чтобы «разгрузить» мобильную версию, прячут цены, преимущества или форму заявки — и получают падение конверсии.
• Тяжёлые изображения. На телефон грузится та же огромная картинка, что и на монитор, и страница открывается мучительно долго.
• Всплывающие окна без крестика. На маленьком экране окно закрывает всё, а кнопка закрытия оказывается за его пределами.
• Промежуточные экраны. Сайт проверили на телефоне и компьютере, но забыли про планшет и маленький ноутбук — там блоки налезают друг на друга.

Зачем это бизнесу

Адаптивность давно перестала быть «приятным бонусом». Для большинства коммерческих сайтов это вопрос денег.

1. Мобильный трафик. Во многих сферах — от услуг для дома до кафе и салонов — большая часть посетителей приходит со смартфонов. Неудобный сайт для них равен отсутствию сайта.
2. Поисковое продвижение. Яндекс и Google учитывают удобство страницы на мобильных устройствах при ранжировании. Сайт, который плохо выглядит на телефоне, проигрывает конкурентам в выдаче.
3. Реклама. Если объявление в Яндекс Директе показывается на телефоне и ведёт на неадаптированную страницу, вы платите за клик, который почти наверняка не превратится в заявку.
4. Единое управление. Одна версия сайта — один набор контента. Не нужно дублировать изменения в двух местах и следить за синхронизацией.
5. Доверие. Сайт, удобный на любом устройстве, производит впечатление современной и внимательной к клиентам компании.

Как заказать адаптивный сайт и принять работу

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

• Попросите показать макеты не только для компьютера, но и для смартфона — хотя бы для главной и ключевых страниц.
• Уточните, на каких устройствах и в каких браузерах будет проверяться сайт перед сдачей.
• При приёмке пройдите основные сценарии с телефона: найти услугу, узнать цену, оставить заявку, оформить заказ.
• Проверьте скорость загрузки на мобильном интернете, а не только по Wi-Fi.

Если сайт уже работает, но на телефонах выглядит плохо, не обязательно заказывать всё заново. Часто можно сделать адаптивную вёрстку существующего сайта — стоимость такой работы начинается от 12 000 руб. и зависит от количества уникальных шаблонов страниц.

Вывод

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

Если хотите, чтобы ваш сайт одинаково хорошо работал на компьютере и смартфоне, обращайтесь в «Студию-125». Мы проверим текущую версию, покажем проблемные места и предложим решение. Ориентиры по стоимости — на странице цен.