Елена Кузнецова
Контент-менеджер

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

Адаптивная верстка сайта: что это такое

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

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

Ниже – пример, как ресурс выглядит с компьютера и со смартфона.

десктоп

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

мобайл

Что значит адаптивная верстка страницы

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

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

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

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

Почему и когда появились принципы адаптивной верстки

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

В 2015 году исследование Яндекса выявило, что уже больше 50% юзеров заходит в сеть с гаджетов наряду с десктопами, а почти 20% делает это только со смартфона/планшета.

В 2020 году гаджеты окончательно победили компьютеры. По данным компании Mediascope, опубликованных в СМИ, со смартфонов в сеть выходили 67% российских пользователей, еще 17% предпочитали планшеты. Десктопы и ноутбуки использовал лишь 51% населения.

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

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

Теперь рассмотрим, какими способами все это особенности воплощают в реальность.

Верстка адаптивного сайта: виды и методы с примерами кода

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

Фиксированная ширина макета

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

код
Пример кода для фиксированной ширины странички.

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

Скрам: что это за методология, принципы работы scrum-команды Читайте также Скрам: что это за методология, принципы работы scrum-команды

Резиновая верстка

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

кодировка
Пример кода для резиновой ширины.

Адаптивная верстка

Главная идея – заранее при разработке макета выбираются несколько размеров экранов, под которые подгоняется содержимое страницы. Например, 480px – мобильные устройства, 768px – планшеты, 1024px – десктопы. Таким образом мы получаем три фиксированных дизайна под разные дисплеи. И юзеру показывается самый подходящий под его конкретный смартфон макет. Этот прием обеспечивает адаптацию под различные мониторы. При этом может меняться кегль шрифта, кнопки могут быть показаны значками без надписей. Это достигается при помощи медиа-запросов (тег @media). Они запрашивают у браузера информацию о типе устройства, разрешении экрана. Ниже показан образец таких стилей. 

пример разметки

Первый запрос @media задает ширину блока для мониторов до 1680px по горизонтали – она составит 960px. Следующий блок кода определяет размер для дисплеев до 640px – для них div-элемент ужмется до 480 пикселей. 

Отзывчивая верстка

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

код

Здесь первый медиа-запрос указывает, что на экранах шириной до 1680px отображение странички – 80%. А второй, что для дисплеев менее 640px по горизонтали страничка сужается до 30%. 

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

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

Стратегия Mobile First

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

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

Основы и правила адаптивной верстки сайтов

Сама разработка состоит из следующих этапов:
  • Определяются brakepoint’s ширины экрана на которых будут происходить значительные изменения макета (тип меню, количество колонок и тд.)
  • Дизайнер разрабатывает макетные образцы под каждый breakpoint.
  • Дизайн согласуется с заказчиком проекта, вносятся правки и корректировки.
  • Верстальщик или фронтенд-разработчик верстает.

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

Относительные значения для объектов и отступов

Адаптивная разметка основана на том, что границы блоков и элементов всегда релевантны рабочему пространству на экране пользователя. Есть несколько способов достичь этой цели: указывать размерные значения в процентах, flex box, grid.

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

Относительные значения для шрифта

Здесь используют проценты (например, 80%), коэффициенты (например, 1,5). Кроме этих, еще применяют относительные единицы измерения (vh, wh, rem, em).

Прописывайте максимальные и минимальные размеры компонентов

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

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

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

Используйте возможность открыть картинку в отдельном полноэкранном фрейме для детального рассматривания.

Применяйте медиа-запросы

Выше мы описали, как работают запросы @media. При них можно использовать атрибуты, чтобы определять стили отображения для разных платформ. В том числе:

  • Смартфоны и прочие носимые гаджеты – handheld.
  • Печатающая периферия – print.
  • Гаджеты по системе Брайля (для слабовидящих пользователей) – атрибут braille.
  • Принтеры для указанной выше категории – embossed.
  • Проекторы – projection.
  • Мониторы –screen.
  • Синтезаторы речи – speech.
  • Телевизоры– tv.

Ниже показано, как при помощи атрибута задать ширину контейнера 50% для всех смартфонов.

кодировка
Пример медиа-запроса с заданным типом устройства.
Как создать сайт Тильда с нуля: подробная пошаговая инструкция Читайте также Как создать сайт Тильда с нуля: подробная пошаговая инструкция

Как проверить качество

Проще всего сделать ее в браузере на компьютере. Можно использовать несколько разных программ. 

  • Откройте созданный сайт в Chrome, Яндекс, Mozila или любом другом сервисе, который вы используете.
  • Нажмите правую кнопку мыши.
  • В открывшемся меню выберите «Инструменты разработчика» или «Исследовать элемент» (в зависимости от браузера).
сайт
  • Вверху справа кликните кнопку «Показать или скрыть панель инструментов устройства» – она выглядит как сдвоенная рамка.
элементы
  • В появившемся окошке наверху выбирайте разные размеры из списка, чтобы видеть, как в них показывается страница. В пункте «Редактировать» можно выбрать дополнительные гаджеты или задать свои параметры разрешения.

Не забывайте покрутить колесико «мышки», чтобы оценить макет при разном масштабе отображения.

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

Методы для упрощения верстки

Для этого можно использовать два типа инструментов:
  • Готовые шаблоны, которые слегка переделываются под нужды веб-мастера. Ресурсы с такими заготовками легко находятся соответствующим поиском в сети. Для их использования не обязательно уметь программировать, шаблоны редактируются при помощи конструктора. Есть платные дизайны, стоимость начинается от 4 долларов. Существуют и бесплатные, в которых придется мириться с наличием логотипа автора. Популярные сборники заготовок – Gator, Simbla, ColorLib, ThemeForest.
  • Конструкторы, которые включают необходимые инструменты для разработки индивидуального дизайна. В них входят различные скрипты для автоматического подбора правильных размеров для контейнеров, видео, изображений, кнопок и других элементов. Среди популярных тулкитов отметим Bootstrap, Wirefy, Webflow

Заключение

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

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

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

Оставить заявку
Оставить заявку
Получите консультацию и персональное предложение по развитию вашего бизнеса.
У меня есть промокод
Заявка отправлена!
Мы свяжемся с вами в ближайшее время.
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
0 Комментарий
Межтекстовые Отзывы
Посмотреть все комментарии