Адаптивная вёрстка сайта: что это такое и для чего она нужна

Дизайн страницы оказывает существенное влияние на заинтересованность пользователей при первом посещении. Люди, видя красивое и удобное оформление, активнее потребляют контент, размещённый на странице. 

Адаптивная вёрстка позволяет не только подстраивать формат страницы под программные и аппаратные возможности посетителя, но и снижать нагрузку на сервер, уменьшая число обращений. 

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

Адаптивная вёртска – это один из вариантов формирования структуры страницы ресурса в Глобальной сети на основе HTML-разметки. Он предполагает динамическое изменение архитектуры страницы, в зависимости от параметров экрана посетителя.

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

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

Для чего нужна адаптивность?

Посетители воспринимают адаптивность как что-то естественное и само собой разумеющееся. Её отсутствие вызывает чувство отторжения в восприятии пользователя, который старается как можно быстрее покинуть не адаптивную страницу и вернуться к результатам поиска. 

Адаптивная вёрстка позволяет закрывать различные задачи:

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

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

3. Увеличение процента конверсии. Работа над качеством сервиса неизбежно приводит и к положительной динамике показателя конверсии. Зачастую, переход к адаптивной вёрстке позволяет увеличить этот показатель на десять или даже одиннадцать процентов.

4. Адаптивность принципиально лучше, чем разработка отдельных версий: для десктопов и для мобильных устройств. Вы потратите меньше времени, денег и сил, а результаты окажутся качественно выше, в сравнении с двумя проектами. Для любого владельца ресурса в Глобальной сети принципиально важно, чтобы его страницы собирали как можно больше трафика. Это сказывается на всех значимых параметрах, таких как вес, индекс цитирования, ранжирование в органической выдаче и тому подобных. Разбивать аудиторию на две страницы – экономически нецелесообразно. Ведь они начнут конкурировать между собой.

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

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

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

Виды вёрстки

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

1. Фиксированная – размеры всех элементов, размещённых на странице, наделяются фиксированными параметрами, которые остаются статичными независимо от внешних условий. Это традиционный вариант оформления ресурсов в Глобальной сети. Его использовали на заре интернета, когда HTML-код ещё писали вручную.

2. Резиновая – более поздняя модель оформления страниц. Резиновая вёрстка расширяет элементы сайта до максимальной ширины окна браузера. Широкого распространения она не снискала, но когда-то использовалась для разработки специфических ресурсов.

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

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

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

6. Гибкая – другое название – flex-вёрстка. Инновационная архитектура, которая стала возможной после реализации таблиц стилей CSS3. Считается, что именно за этой вёрсткой будущее Глобальной сети. Но как долго его придётся ждать – всё ещё остаётся загадкой. Разрабатывать сайты для сиюминутных целей с такой структурой невыгодно. Потому что ранжироваться они будут плохо, да и пользователи не готовы потреблять контент, оформленный подобным образом. 

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

Чем отличается адаптивная вёрстка от обычной?

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

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

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

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

Разберём более подробно, что же такое резиновая вёрстка сайтов. Много лет назад она активно применялась для некоторой адаптации опубликованного контента под аппаратные возможности пользователя. Для этого страница сайта занимала всё доступное пространство на экране. К сожалению, это также означало, что на весь монитор растягивались и полупустые технические страницы, из-за чего возникали ошибки и искажения. И именно снижение качества материалов, в результате сжимания или растяжения, привело к эволюции резиновой вёрстки в адаптивную.

Тем не менее резиновые страницы обладают и определёнными достоинствами:

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

• Резиновая вёрстка будет актуальна независимо от диагонали устройства, с которого просматриваются материалы. Особенно эффективно, если они существенно не теряют в качестве, при изменении масштаба.

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

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

Как правильно сделать адаптивную вёрстку?

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

Медиа-запросы стилей 

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

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

Жидкий макет

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

Проще всего жидкий макет объяснить следующим образом:

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

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

К изображениям в адаптивном шаблоне применяются особые требования. Во-первых, все они должны быть созданы в относительных единицах. Для этого используются так называемые «адаптивные пиксели». Точно такие же единицы измерения применяются и для настроек размера макета, отдельных блоков и интервалов между ними. Очень важно, чтобы готовый дизайн всегда мог успешно масштабироваться до целого числа, сохраняя корректный внешний вид для всего содержимого страницы. 

Размеры и общая адаптивность

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

Разработка адаптивной вёрстки предполагает, что четыре главных параметра любого элемента страницы должны выражаться в относительных единицах:

1. Ширина. Параметр width.

2. Высота. Параметр heights.

3. Отступы между блоками. Параметр margin.

4. Отступы между контентом и границей блока. Параметр padding.

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

Breakpoints

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

Размеры экранов

Общепринятой практикой является привязка контрольных точек к каноническим значениям плотности пикселей:

• Мониторы высокого класса – от 1920 px.

• Мониторы низкого класса – от 1280 px.

• Мобильные устройства высокого класса – от 320 px.

• Нетбуки – от 1024 px.

• Планшеты – от 768 px.

Готовые фреймворки

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

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

Формат шрифтов

Адаптивность страницы может достигаться только при условии задания двух отдельных относительных единиц:

1. Em – размер шрифта для конкретного блока внутри страницы. Благодаря этому параметру можно варьировать дизайн контента. Такой параметр применяют к заголовкам разделов и подразделов, названию и другим элементам, которые нужно выделить.

2. Rem – шрифт, который остаётся постоянным для всей страницы. Как правило, это основной текст.

Работать с этими относительными параметрами достаточно удобно. Если прописать, например, 2em, то вы получите текст, который будет вдвое крупнее основного. Стандартный 11 размер шрифта станет 22.

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

Зачастую бюджет разработки адаптивной вёрстки невозможно предсказать заранее. Каждый проект сугубо индивидуальный, поэтому предсказать точное время, которое потребуется на его реализацию, весьма проблематично. При этом профильные специалисты стараются работать с почасовой оплатой.

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

Если обратиться к фрилансерам, средние ценники на базовые услуги будут примерно следующими:

• Вёрстка сайта по готовому макету – от 5 тысяч рублей.

• Вёрстка простого лендинга со стандартными элементами – от 1 до 3 тысяч рублей.

• Вёрстка технически сложного лендинга – от 3 до 5 тысяч рублей.

• Вёрстка интернет-магазина – от 10 тысяч рублей.

• Вёрстка отдельной страницы – от 1 до 3 тысяч рублей.

• Интеграция адаптивной вёрстки на сайт заказчика – от 3 тысяч рублей.

• Вёрстка одного блока или экрана – от 500 рублей.

• Внесение простых правок – от 300 рублей.

• Добавление типовых элементов – от 1 тысячи рублей.

Услуги профессиональных студий обойдутся значительно дороже:

• Вёрстка сайта по готовому макету – для регионов цены могут находиться в пределах 10-15 тысяч рублей. Если обращаться в московские студии, то ценник будет от 30 или даже 40 тысяч рублей.

• Вёрстка лендинга – от 10 тысяч рублей.

• Вёрстка интернет-магазина – от 30 тысяч рублей.

• Интеграция адаптивной вёрстки на сайт заказчика – от 10 тысяч рублей.

• Вёрстка в топовых студиях – от 100 тысяч за один проект.

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