Адаптивный сайт
Адаптивный сайт — это сайт, дизайн и вёрстка которого автоматически подстраиваются под размер экрана и тип устройства: компьютер, планшет, смартфон. При этом версия одна и для десктопа, и для мобильных экранов, отдельные сайты под каждое устройство не нужны.
Этим он отличается от мобильной версии — сайта на поддомене (например, m.site.ru), который живёт параллельно с основным и требует собственной разработки, поддержки и обновления.
Для чего клинике адаптивный сайт
По разным оценкам, до 70% визитов на сайты приходится на мобильные устройства, а в медицинской нише доля ещё выше: клинику чаще ищут со смартфона. При этом Google использует mobile-first индексацию — оценивает и ранжирует сайт по его мобильной версии, а Яндекс учитывает мобильное удобство как фактор ранжирования. Неадаптивный сайт теряет позиции в выдаче, а вместе с ними и первичных пациентов из поиска.
Есть и репутационный аспект: в медицине выбирают того, кому доверяют, а недостатки сайта, который на телефоне разъезжается и не даёт записаться, пациент невольно проецирует на саму клинику.
Как работает адаптивный дизайн
Чтобы пользователю было удобно пользоваться сайтом с любого устройства, применяем ряд инструментов, которые делают дизайн гибким и способным подстроиться под любые размеры экрана, не потеряв читабельности, эффектности и функциональности. Подробнее о применении этих инструментов — ниже.
Зачем нужны брейкпойнты
Брейкпоинты (контрольные точки, точки слома) — значения ширины экрана, на которых меняется раскладка страницы. Например, при пересечении отметки 768px трёхколоночная сетка услуг складывается в одну колонку, а горизонтальное меню прячется в «бургер».
Типовой набор: 1920px (большие мониторы), 1280px (ноутбуки), 768px (планшеты), 480px (смартфоны). Точки под конкретный проект подбирают по статистике аудитории в Яндекс Метрике: с каких разрешений экрана пациенты реально записываются. От числа точек зависит и количество раскладок: лендингу одной услуги — скажем, МРТ или чекапа — хватит двух, десктопной и мобильной; сайту многопрофильной клиники с каталогом врачей, расписанием и онлайн-записью понадобится четыре, иногда пять.
Технически брейкпоинты реализуются через медиазапросы (media queries) — правила CSS, срабатывающие при заданной ширине окна. CSS — язык стилей: он задаёт цвета, шрифты, размеры и расположение блоков, а сам контент описывает HTML-разметка. Запись @media (max-width: 768px) { … } читается так: «если ширина окна не больше 768 пикселей, применить стили в скобках». Внутри переопределяется всё, что должно измениться на узком экране.
Работа гибкой сетки
При смене экрана элементы меняют расположение: четыре карточки врачей в ряд на десктопе становятся двумя рядами по две на планшете и колонкой на смартфоне. Сайдбар с лицензиями и сертификатами уезжает под основной контент. Второстепенные блоки скрываются целиком.
Технически такую перестройку выполняют Grid и Flexbox — два встроенных в CSS механизма раскладки, доступные в любом современном браузере. Верстальщик описывает с их помощью, сколько колонок на странице и в каком порядке идут блоки, а внутри медиазапроса меняет эту схему одним правилом; переписывать HTML-разметку не нужно.
Размеры задаются в относительных единицах, поэтому шрифты и блоки сами подстраиваются под ширину экрана: современный CSS умеет держать элемент в диапазоне «не меньше и не больше заданного» без единого брейкпоинта.
Метатег viewport и адаптивные изображения
Viewport. Мобильный браузер по умолчанию показывает страницу уменьшенной копией десктопной. Добавление строки в код сайта указывает браузеру отображать страницу в масштабе устройства. Без неё бессмысленны медиазапросы, о которых шла речь выше: браузер просто не узнает реальную ширину экрана.
Адаптивные изображения. Картинке нужен размер под каждый экран: версия для большого монитора в разы тяжелее той, что нужна смартфону, и на мобильном интернете такая страница заметно тормозит. Решение — атрибут srcset и элемент
Юзабилити
Пальцем попасть в цель труднее, чем курсором, экран смартфона меньше монитора, а держат телефон обычно одной рукой. Из этих ограничений следуют три требования к мобильному интерфейсу.
- Первое: размер элементов: отраслевой минимум — 44×44px, кнопки и ссылки мельче вызывают промахи.
- Второе: размер текста: на мобильном он начинается от 16px. Всё, что мельче, заставляет растягивать экран пальцами, а для аудитории клиник, где существенная доля пациентов старше 50 лет, это критично вдвойне.
- Третье: зона большого пальца: при управлении одной рукой досягаема нижняя треть экрана, верхние углы — нет. Кнопка «Записаться на приём» и номер телефона должны находиться там, куда палец дотягивается без усилий, — поэтому на мобильных версиях медицинских сайтов так хорошо работает закреплённый виджет со звонком и записью.
Как сделать адаптивный сайт
Макеты
Рисовать отдельный макет по каждую раскладку при этом не нужно — достаточно двух крайних ширин, обычно 360 и 1440px; промежуточные состояния верстальщик выводит по логике этих двух. Макеты собираем в Figma с настройками поведения (auto layout и constraints): такой макет показывает, как блок ведёт себя при изменении ширины — тянется, переносится на новую строку, держит отступ.
Обязательная проверка — крайняя ширина каждого диапазона. Если макет нарисован на 1440px, а брейкпоинт стоит на 1280px, смотрим на 1281px: это самая узкая ширина, при которой ещё действует десктопная раскладка, — здесь наползают заголовки и ломаются сетки. Лучше поймать это на этапе дизайна, чем после запуска.
Тестирование
Адаптивность проверяется в несколько шагов, от быстрого к трудоёмкому. Начинаем с режима устройств в панели разработчика браузера (клавиша F12; есть в Chrome, Firefox, Яндекс Браузере) — он эмулирует экраны смартфонов и планшетов. Страницу прогоняем по всем брейкпоинтам, а затем плавно растягиваем окно за край: так видно, что происходит между контрольными точками.
Дальше — аудит производительности, например в PageSpeed Insights: сервис оценивает скорость мобильной версии и перечисляет тяжёлые ресурсы, которые тормозят загрузку. Затем — проверка на двух-трёх реальных устройствах, потому что эмулятор не покажет, читается ли прайс без очков и попадает ли палец в кнопку записи. Последний шаг — проверка мобильных страниц в Яндекс Вебмастере (раздел «Инструменты»): она показывает, считает ли страницу пригодной для мобильных сам поисковик, от которого клиника получает трафик.
Mobile-first — порядок работы, при котором проектирование начинается с макета для смартфонов, а десктопную версию строят из него. Расширить лаконичный мобильный макет просто: добавляются колонки, свободное пространство, крупные изображения. Обратный путь — ужимание насыщенного десктопного макета в узкую колонку — почти всегда оборачивается компромиссами и переделками. Исключение — проекты с преимущественно десктопной аудиторией: медицинские информационные системы (МИС), рабочие кабинеты персонала, B2B-порталы поставщиков.
На каждом шаге ищем два симптома сломанного адаптива: горизонтальный скролл (его не должно быть ни на одной ширине) и элементы, которые нельзя прочитать или нажать без увеличения масштаба.
Типичные ошибки и ответы на вопросы
Общие ошибки для любых сайтов
1. Пропорциональное уменьшение вместо перестройки. Сайт «влез» в экран телефона целиком — формально он помещается, но все уменьшилось до нечитаемого — записаться невозможно.
2. Мелкий шрифт. Кегль 12–14px на смартфоне — ниже порога в 16px из требований юзабилити — вынуждает масштабировать страницу. Мобильный текст держат на уровне десктопного или крупнее.
3. Тесные тач-цели. Кнопки меньше 44×44px и слипшийся список специальностей в меню гарантируют промахи.
4. Горизонтальный скролл. Обычно его создаёт один элемент с фиксированной шириной — чаще всего таблица прайса, embed-карта или фото.
5. Запрет масштабирования. Параметр user-scalable=no в метатеге viewport блокирует привычный жест «раздвинуть пальцами» — пользователь не может увеличить текст. Для возрастной аудитории клиник это прямой удар по доступности.
6. Контент, спрятанный за ховером. Выпадающее меню услуг или подсказки, которые раскрываются при наведении курсора, на смартфоне недоступны — у тачскрина нет курсора. Все важное должно открываться по тапу.
7. Неоптимизированные изображения. Одна картинка на все экраны заставляет смартфон качать десктопный вес — та самая проблема, которую решает srcset.
Характерные ошибки для медицинских сайтов
1. Прайс-лист в PDF или широкой таблице. На смартфоне он нечитаем, а прайс для пациента часто и есть цель визита.
2. Форма записи с 8–10 обязательными полями. На мобильном каждое лишнее поле снижает долю заполненных форм; для первичного обращения достаточно имени и телефона.
3. Всплывающие окна. Чаты, акции, cookie-баннеры на маленьком экране перекрывают контент и кнопку записи одновременно.
4. Тяжелые сканы документов. Лицензии и документы, обязательные по закону, выложены изображениями по 3–5 МБ и убивают скорость загрузки.
| Вопрос | Ответ |
|---|---|
| Можно ли адаптировать уже готовый сайт клиники? | Да, вопрос в цене. Если сайт свёрстан по-старому — все ширины жёстко заданы в пикселях под один размер монитора, — переделка вёрстки сопоставима по трудозатратам с разработкой заново, и разумнее совместить адаптацию с редизайном. Свежий проект на современном CSS адаптируется заметно дешевле. |
| Чем адаптивный дизайн отличается от «резинового»? | У «резинового» сайта блоки заданы в процентах и просто растягиваются под ширину окна, структура страницы не меняется. Для простых страниц в одну колонку этого достаточно, но каталог врачей или прайс на сотни позиций превращается на телефоне в нечитаемую мозаику. Адаптивный сайт на контрольных точках перестраивает саму раскладку, поэтому остаётся удобным при любой сложности интерфейса. |
| Конструкторы вроде Tilda делают адаптив автоматически? | Типовые блоки — да. Но автоматика не отменяет проверку нестандартных блоков. Таблицы цен, калькулятор стоимости, виджеты онлайн-записи и встроенные карты на мобильных регулярно ломаются или уезжают за край экрана. Поэтому лендинг из готовых блоков можно публиковать смело, а каждую уникальную таблицу или виджет — сначала проверить на реальном телефоне. |
| Чем адаптивный сайт лучше мобильного приложения? | Это разные инструменты. Сайт доступен по ссылке из поиска без установки, индексируется и стоит на порядок дешевле; новый пациент приходит на него. Приложение оправдано для удержания: личный кабинет, результаты анализов, push-напоминания о приёме. Адаптивный сайт — обязательная база, приложение — надстройка для клиник с большим потоком повторных пациентов. |
Проверьте свой сайт за 5 минут
Откройте сайт клиники со смартфона и попробуйте записаться на приём, не увеличивая страницу пальцами. Если по пути встретился горизонтальный скролл, нечитаемый прайс, форма на десять полей или кнопка, в которую не попасть с первого раза, — сайт теряет первичных пациентов прямо сейчас. Дальше два пути: точечная доработка мобильной версии или адаптация в связке с редизайном; что выгоднее в конкретном случае, покажет аудит.
Читайте также о том, что такое продающие страницы.
Как мы работаем
Подробно о том, как работаем и какую терминологию используем.