Лей на нутру

и выиграй приз, который

выберешь сам!

Хочу приз! Spot
Gift Spot Gamepad VR Helmet Pill weights Plus iphone Pill Pink dot Pink dot Playstation Pink Line

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS

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

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

  • плавный переход; 
Как сделать адаптивную верстку сайта с помощью CSS и HTML
  • код стилей заголовков; 
Как сделать адаптивную верстку сайта с помощью CSS и HTML
  • стиль для body;
Как сделать адаптивную верстку сайта с помощью CSS и HTML
  • стилевой класс, управляющий шириной контейнера;
Как сделать адаптивную верстку сайта с помощью CSS и HTML
  • код для шапки;
Как сделать адаптивную верстку сайта с помощью CSS и HTML
  • стили для сайдбара;
Как сделать адаптивную верстку сайта с помощью CSS и HTML
  • CSS для футера.
Как сделать адаптивную верстку сайта с помощью CSS и HTML

HTML

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

  • добавьте в head необходимые строки — шрифты, jQuery, prefixfree и прочее;
Как сделать адаптивную верстку сайта с помощью CSS и HTML
  • добавьте в header структуру контейнера;
Как сделать адаптивную верстку сайта с помощью CSS и HTML
  • оберните превью статей article;
Как сделать адаптивную верстку сайта с помощью CSS и HTML
  •  добавьте в сайдбар рубрики, последние комменты, контактную форму и прочее;
Как сделать адаптивную верстку сайта с помощью CSS и HTML
  • оптимизируйте футер.
Как сделать адаптивную верстку сайта с помощью CSS и HTML

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

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

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

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

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

Брейкпоинты

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

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

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

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

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

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

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

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

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

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

Simon Collison

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

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

Stephen Caver

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

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

Food Sense

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

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

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

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 или других популярных биржах.

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

Заключение

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

Чем характеризуется адаптивная верстка?

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

Как правильно ее делать?

Выше мы привели список из 8 пунктов, которые надо соблюдать при разработке АВС.

Можно ли автоматизировать этот процесс с помощью плагинов?

Да, можно. Однако намного эффективнее заказать разработку специалистам. 

Сколько стоят услуги по адаптивной верстке сайта?

Цена услуги не такая высокая — от 3000 рублей.

Адаптивная и резиновая верстка — это одно и то же?

Нет, резиновая верстка уступает АВС, так как часто нарушаются пропорции в дизайне, и не все элементы изменяются без потери качества

Чем Responsive отличается от Adaptive и Liquid?

Выше мы подробно сравнили различные типы версток.

Оцените статью по 5-бальной шкале
Afftimes
Ваша реклама №2