Как сделать адаптивный сайт: дизайн и верстка под разные разрешения экрана

Адаптивная верстка сайта или RWD – разработка программного кода, обеспечивающего автоматическую трансформацию web-page в зависимости от гаджета. Все элементы ресурса динамично подстраиваются под размеры любого устройства и браузерного окна – в итоге получается цельная структура на одном домене, положительно влияющая на продвижение. Узнаем, как сделать адаптивный сайт на Html и CSS.

Как адаптировать сайт под разные разрешения экрана

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

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

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

Преимущества адаптивного сайта

Переход на адаптивный дизайн обеспечит правильную и цельную картинку на всех популярных устройствах – ПК, планшете, смартфоне. Это дает несколько преимуществ:

• экономия времени и сил – иначе, пришлось бы создавать и продвигать отдельные версии сайта;
• улучшение SEO – каждая страница сайта имеет один урл, без редиректов на десктопную или мобильную версию;
• увеличение показов в отчетах Гугл Аналитикс и Метрике – за счет синхронизации запросов с десктопа и мобильных устройств;
• упрощение работ по сайту – при необходимости достаточно модифицировать базовые CSS-стили.

Но не все так радужно – адаптивная верстка имеет свои недостатки:

• плохое качество изображений в мобильной версии – приходится использовать обходные решения, такие как Sencha или Adaptive Images;
• сложность разработки – требуются навыки опытного верстальщика.

Внимание! Адаптивная верстка не страдает из-за большого количества CSS-стилей и JavaScript файлов. Она не показывает уменьшенных копий сайта, как отзывчивый (респонсивный) веб-дизайн – просто сервер распознает тип гаджета пользователя и отображает облегченную версию блога. Можно сравнить с Турбо страницами Яндексами.

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

Заполучить адаптивный дизайн можно несколькими способами:

1. Заказать разработку профессионалам. Идеальный вариант, если нет желания вникать в тонкости верстки самому. Необязательно обращаться в агентство – можно найти толкового фрилансера на биржах за гораздо меньшие деньги.

2. Купить готовый шаблон. Многие дизайнеры выставляют свои работы на продажу – например, в репозитарий WordPress или Simbla. Правда, такой дизайн не будет эксклюзивом, но если разбираетесь в коде, то можно внести некоторые правки и уникализировать шаблон. Можно также создать такой сайт на каком-нибудь конструкторе.

3. Создать на фреймворке. Это готовый каркас шаблона со всеми основополагающими для адаптивной верстки файлами и сеткой. Ими же часто пользуются дизайнеры, чтобы сэкономить время. Среди популярных фреймворков: Bootstrap, Tailwind, Material-UI и другие. Подробнее о html и css framework расскажем в конце статьи.

4. Написать универсальный код. Тут без обучения не обойтись. Но большинство курсов свободно выложено в сети, и они бесплатные. Вот один из курсов на английском языке.

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

Что такое адаптивная вёрстка для сайта

8 обязательных правил RWD:

1. Поточность. Подразумевает смещение и выстраивание блоков на сайте друг под другом при просмотре с мобильных устройств.
2. Относительность ЕИ. Единицы измерения в такой верстке меняются в зависимости от устройства. Размеры, масштабы и координаты задаются относительно элемента – например, по верхней границе.
3. Контрольные точки. Обязательный принцип адаптивной верстки, когда точка фиксирует содержимое страницы и не дает ему «уползать» за границы экрана.
4. Min/Max границы. Эти свойства позволяют настроить верстку так, чтобы не было растянутостей.
5. Вложенность. Когда элементов много, то их помещают в один контейнер, чтобы легче было осуществлять контроль над объектами. Касается это кнопок, логотипов и других элементов, которые не нужно адаптировать под настройки экранов.
6. Легкие шрифты. Они должны иметь малый вес, иначе страница будет долго грузиться.
7. Комбинирование растровой и векторной графики. Сжатые векторные изображение поддерживают не все браузеры.
8. Медиа-запросы. Без них невозможно представить адаптивную верстку. Именно по media queries применяются условия для каждого типа устройства.

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

Как сделать адаптивную верстку сайта с помощью HTML и CSS

Теперь подробнее о том, как делается адаптивная верстка с помощью перечисленных языков разметки. 

Настройка viewport

Одно из главных условий – настройка Viewport. Это область, которая видна пользователю без прокрутки экрана. Так вот, при отсутствии адаптивного дизайна содержимое будет выпадать за границы разрешения устройства. Поэтому Viewport задается соответствующим образом. Например, вот один из вариантов.

Здесь видно, что команда width подстраивает страницу под экран конкретного гаджета, и масштабирование определяется автоматически. Коэффициент увеличения/уменьшения определяет параметр initial-scale. В нашем примере ему присвоено значение 1.0, поэтому устройства и CSS приравниваются относительно друг друга, независимо от размера. 

Использование медиа-запросов

Выше мы писали, что без них невозможно представить разработку адаптивного дизайна. Это правила CSS, которые управляют стилями в соответствие с техническими характеристиками гаджетов. Например, определяют какие элементы отобразить на мобильном устройстве, а какие скрыть. Медиа-запросы подчиняются стандартному синтаксису – выглядит он вот так. 

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

Примеры использования медиа-запросов:

1. Задаем min-width в 990px.

2. Задаем ширину в 1200px.

3. Устанавливаем максимальную ширину изображения.

Создание стилей для разных разрешений экрана

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

Теперь про стили под отдельные разрешения. Рекомендуем подготовить несколько файлов CSS, каждый из которых содержит отдельные размеры для разных мониторов. Например, вот так выглядит стиль для средних экранов.

Дальше с помощью link добавляем еще 2 файла: small.css и big.css. И делаем так, чтобы пользователь сам выбрал, какой масштаб ему подходит.

Остается подключить скрипт, который будет переключать файл стилей.

Есть и другой способ, где подключается автоматическое масштабирование. Это делается с помощью JavaScript. Пример такого кода.

Адаптивные изображения и размеры шрифтов

Такие картинки хорошо масштабируются – поэтому соответствуют любому размеру браузера. Выше мы показали, как задать им ширину с помощью медиа-запросов – ставим 100% от пользовательского экрана.

Что касается шрифтов, то сделать их адаптивными можно с помощью параметра vw – ширины видового экрана. 1vw равен 1% от ширины видового экрана. oot

HTML и CSS-фреймворки для создания адаптивной верстки

Как и обещали, перечислим популярные фреймворки для создания адаптивной верстки сайта. Грубо говоря, это сервисы с набором шаблонов разметки, CSS таблиц и JS скриптов.

1. Bootstrap. Сервис от Twitter предоставляет все необходимые инструменты для разработки mobile-friendly – различные сетки, большую библиотеку, поддержку известных браузеров.

2. Foundation. Сервис от ZURB. Есть резиновые и адаптивные сетки, библиотека несколько скромнее, чем у Bootstrap, но подойдет для быстрой разработки.

3. Wirefy. Здесь вы найдете много адаптивных фреймов, но надо знать html и CSS.

4. FitVids. Небольшой скрипт, автоматически подбирающий нужный размер для видео в зависимости от монитора пользователя.

5. Adaptive Images. Отличный фреймворк для создания адаптивных картинок.

Ошибки при создании адаптивной вёрстки

Ниже о типичных ошибках, которые допускают новички, и способах их избежать.

1. Урезанный контент. Например, такое было даже на Турбо страницах Яндекса, когда они еще запустили бета-версию. На мобильных устройствах не отображались таблицы – вебмастер должен был сам что-то там наколдовать в коде, чтобы они появились. Сегодня эта проблема полностью решена. Так вот, не прячьте совершенно ничего из контента, если он не помещается на маленьком экране – доработайте код. Например, заложите больше места для заголовков, проставив в текстовые блоки длинный «рыбный» текст.

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

3. Уменьшенные элементы. Мобильные устройства меньше десктопа – на них кнопки и другие элементы становятся маленькими. Пользователи вряд ли захотят увеличивать экран, чтобы разглядеть, что там написано – они просто уйдут к конкурентам. Проектируйте интерфейс правильно – все должно отображаться в крупном кегле. Часто ошибка возникает при сжатии картинки на котором имеется текст, который тоже уменьшается и становится нечитаемым. Решение – не используйте такие изображения или внесите правки в код.

4. Поведенческие факторы. В спешке новички часто забывают о ПФ – а это на сегодня важный критерий ранжирования. Перед запуском сайта с адаптивной версткой, обязательно выясните, какие действия пользователи совершали чаще всего. Может быть, они увеличивали картинку товара или спотыкались на оформлении покупки. Такой анализ рекомендуется проводить регулярно и исправлять недочеты.

5. Длина строки. Когда верстальщик разрабатывает дизайн по стратегии Mobile First, у него могут получиться слишком длинные строки, так как у мобильных гаджетов узкий экран, и контент обычно располагается в одну колонку. Дизайнер занимает текстом всю ширину колонки, оставляя небольшие поля. Но когда переходит к версии для ПК, на автомате также растягивает текстовый блок. И строка получается длинной и неудобной. Чтобы такого не произошло, выдерживайте стандартные значения длины строки – до 60-70 символов.

И самое главное – многие совершают ошибку при тестировании. Либо вообще его не проводят, либо делают это не до конца. Обязательно проверьте специфику работы сайта на нескольких популярных браузерах – не исключено, что он будет плохо отображаться в некоторых из них. То же самое касается функционирования на различных ОС – Windows, iOS, Unix и т. д.

Примеры адаптивных сайтов

Много качественных адаптивных сайтов можно увидеть в Рунете. Перечислим 5 самых популярных ресурсов, а вы самостоятельно изучите:

• kommersant.ru;
• l34.news;
• medusa.io;
• alfabank.ru;
• aviasales.ru.

Заключение

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

FAQ