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

Популярная нынче адаптивная верстка сайта подразумевает такой дизайн страницы, при котором он трансформируется под любой тип экрана. Когда еще эта верстка не была придумана, разработчикам приходилось делать разом несколько web-page. Сегодня достаточно правильно прописать HTML, CSS и медиа запросы. О том, как сделать все это — тема нашей статьи.

Что это за верстка

Адаптивная верстка сайта или АВС — это заранее сформированная структура на базе html. Предусматривает она автоизменение web-page в зависимости от мониторов юзера. Если сказать проще, то это готовый шаблон, подстраиваемый под любой размер экрана. 

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

Главные преимущества АВС:

1. Улучшение ПФ. Благодаря тому, что сайт одинаково хорошо смотрится на всех устройствах, снижается количество отказов — важнейшей метрики ПФ.
2. Увеличение трафика. С АВС кроме десктопного сайт получает еще и мобильный трафик.
3. Высокий коэффициент конверсий. Адаптивность сайта влияет на конверсию — это доказано на практике. Клиенты с большей охотой купят товар, если страница будет максимально удобной для них. 
4. Точность web-аналитики. Удобнее отслеживать показатели роста, так как вместо двух версий сайта (десктопная и мобильная), установлена всего одна.
5. Эффективность SEO. Например, заметно снизится количество дублей, генерируемых мобильной версией сайта.

Ну и конечно, такой сайт всегда можно продать дороже. О том, как и где продать сайт с доходом.

Почему АВС лучше

Основные виды современных версток:

1. Fixed Layout или фиксированная. Все компоненты страницы имеют заданную ширину. Они не изменяются, а на маленьких экранах появляется дополнительная полоса прокрутки. Худший вариант реализации, так как информация отображается на смартфонах не совсем удобно для пользователей.
2. Elastic Layout или резиновая. Элементы web-page трансформируются в зависимости от конкретного монитора — растягиваются или сужаются. Однако и здесь не все идеально: резиновая верстка нарушает определенные пропорции в дизайне, и не все элементы могут меняться без потери качества. Например, растровые картинки.
3. Adaptive Layout или АВС. Элементы сайта подстраиваются под любое разрешение экрана. Все происходит динамически, благодаря использованию медиа-запросов, которые выявляют разрешение экрана пользователя.
4. Responsive Layout или отзывчивая. Комбинированный вариант — АВС объединяется с резиновой версткой. Другими словами, наряду с медиа-запросами используется также процентное задание ширины.

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

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

CSS

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

Примеры верстки по CSS кратко:

• плавный переход; 

• код стилей заголовков; 

• стиль для body;

• стилевой класс, управляющий шириной контейнера;

• код для шапки;

• стили для сайдбара;

• CSS для футера.

HTML

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

• добавьте в head необходимые строки — шрифты, jQuery, prefixfree и прочее;

• добавьте в header структуру контейнера;

• оберните превью статей article;

•  добавьте в сайдбар рубрики, последние комменты, контактную форму и прочее;

• оптимизируйте футер.

В завершении нужно задать общие стили CSS. 

Медиа запросы

Media queries — это важные правила для CSS. Они дадут возможность управлять стилями. Сегодня медиа-запросы поддерживаются всеми браузерами и предназначены для создания АВС.

Примеры медиа-запросов кратко:

• отображение кнопки для верхнего меню;

• скрытие верхнего меню;

• создание блочных элементов, расположенных друг под другом;

• позиционирование меню на увеличение высоты шапки;

• позиционирование формы поиска по левому краю;

• отмена позиционирования кнопок соцсетей;

• отмена обтекания для футера.

Брейкпоинты

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

• первый — 400-500 пикселей;
• второй — 500-800 пикселей;
• третий — 800-1000 пикселей.

Прохождение от одного пиксельного диапазона к другому — это и есть переходы через брейкпоинты.

Какие бывают разрешения экранов для АВС

При разработке АВС web-дизайнеры обязательно учитывают конечные размеры web-page. А вернее, задают максимальные пределы, превышение которых трансформирует дизайн сайта.

Для АВС есть несколько общепринятых размеров, в зависимости от конкретного устройства:

• 320/480 пикселей — смартфоны, телефоны;
• 768 пикселей — планшеты;
• 1024 пикселя — ноутбуки;
• 1280-1920 пикселей — ПК.

3 примера грамотной адаптивной верстки

Ниже три знаменитых сайта, при разработке которых использовали АВС.

Simon Collison

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

Stephen Caver

Простой, но первоклассный адаптивный дизайн. Состоит из крупного заголовка с жирным шрифтом, блочной структуры и традиционного макета. Дизайн web-page меняется в соответствие с конечным размером экрана пользователя.

Food Sense

Журнал про кулинарию с отличным дизайном и АВС. Макет трансформируется из стандартной левосторонней организации в простую последовательную ленту.

Если дизайн этих сайтов понравился, то можете скопировать сайты и переделать под себя. Конечно, придется отдельно разрабатывать для них АВС.

8 правил адаптивной верстки, о которых нужно помнить разработчику

Web-дизайнеры должны стремиться сохранять начальную концепцию верстки и при этом не удаляться от прямого назначения сайта. Крайне важно обеспечить функциональность ресурса и добавить такой код, который можно будет подстраивать под любой инструмент воспроизведения. Ниже 8 главных принципов АВС, о которых нельзя забывать.

Прочность версии

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

Пиксельные разрешения

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

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

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

Интервалы значений

Для пикселей важно указывать min и max как по ширине, так и по высоте. За счет этого содержание web-page останется в заданных рамках. Контент будет отображаться целиком, и пользователю не нужно будет скролить.

Вложенность

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

Шрифты

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

Графика

В зависимости от типа используемой графики на сайте, ее нужно делать растровой или векторной. Например, если детали графики крупные, а не мелкие — то можно использовать векторный вариант, и наоборот.  

Медиазапросы

Важно также поддерживать корректность медиазапросов. Для каждого из них важно использовать подходящие стили CSS.

Реально ли сделать адаптивный сайт на WordPress с помощью плагинов

На данный момент движок WP поддерживает несколько плагинов, с помощью которых можно сделать частичную АВС.

1. WP Lightbox 2. Мощное расширение, которое позволяет масштабировать сайт. Основное предназначение плагина — адаптировать показ медиафайлов.
2. Responsive Widgets. С помощью этого расширения на сайте можно поместить виджеты с разрешениями под несколько устройств.
3. WordPress Mobile Pack. Плагин для отображения АВС.
4. Hammy. Оптимизирует изображения.
5. WPTouch. Модуль для создания тем для мобильных устройств.

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

Цены на услуги по созданию адаптивной версии сайта

Стоимость услуги зависит от конкретной задачи:

1. АВС под ключ. От 3000-5000 рублей у фрилансеров, 10-15 тыс. рублей в студиях.
2. Верстка лендинга. От 1000 рублей у фрилансеров.
3. Внесение мелких правок. Студии за такую работу редко берутся, фрилансеры возьмут от 300 рублей.

Найти исполнителей можно на Kwork или других популярных биржах.

Заключение

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