Адаптивная верстка: что это, зачем нужна и как сделать на сайте

Содержание:

1. Что такое адаптивная верстка
2. Зачем нужна адаптивная верстка
3. Преимущества перед другими подходами
4. Принципы и основы адаптивного веб-дизайна
5. Как сделать адаптивную верстку сайта
6. Готовые инструменты и фреймворки
7. Адаптивная верстка основных элементов
8. Типичные ошибки и проблемы адаптивной верстки
9. Проверка и тестирование
10. Где заказать адаптивный дизайн
11. Вопросы и ответы

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

1. Что такое адаптивная верстка

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

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

2. Зачем нужна адаптивная верстка

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

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

Адаптивный дизайн дает целый ряд преимуществ:

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

Поисковые системы отдают предпочтение сайтам с адаптивным дизайном. В индексе Google даже есть специальная пометка mobile-friendly для удобных мобильных страниц. Также адаптивность - один из факторов ранжирования.

3. Преимущества перед другими подходами

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

отдельная мобильная версия на другом домене (обычно m.site.com),
приложение для смартфонов и планшетов.

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

С приложениями еще сложнее. Нужно создавать отдельные программы под iOS и Android. Причем для разных моделей и размеров экрана. Это очень трудозатратно и дорого. Адаптивная верстка лишена этих проблем. Здесь мы имеем один сайт, который универсален для всех устройств. Это просто и удобно для разработки и дальнейшего управления.

4. Принципы и основы адаптивного веб-дизайна

Можно выделить несколько главных принципов адаптивной верстки:

Mobile-first подход. Проектировать и верстать сайт в первую очередь для смартфонов, а уже потом добавлять блоки и элементы для больших экранов.
Гибкий макет на основе CSS. Относительные единицы, проценты вместо фиксированных размеров в пикселях. Это позволяет растягивать и сжимать элементы при смене ширины окна.
Медиа-запросы для подстройки дизайна. Использование @media правил для изменения стилей на разных размерах экрана. Например, можно скрыть сайдбар на мобильных.
«Резиновые» изображения и другие медиа-элементы. Свойство max-width: 100% ограничивает ширину картинки размерами блока и позволяет ей сжиматься на narrow экранах.
Векторная графика вместо растровой. SVG и шрифтовые иконки масштабируются без потери качества и весят меньше, чем PNG или JPG.

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

Проще всего работать с "плоским" одноколоночным макетом. Но при необходимости можно задействовать и более интересные приемы:

перекомпоновка и скрытие блоков,
замена горизонтальных меню на выпадающие,
"резиновый" multi-column макет,
адаптивные изображения с разными версиями под размеры экрана.

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

5. Как сделать адаптивную верстку сайта

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

Переходим к HTML-верстке и CSS-оформлению. Сразу же задаем блокам относительную ширину и "резиновые" отступы в процентах или em/rem единицах. Проверяем результат при разных размерах окна браузера.

Теперь очередь медиа-запросов. Они позволяют применять CSS-правила в зависимости от характеристик устройства. Обычно используют ширину экрана. Например, такой медиа-запрос применит CSS только для экранов уже 480px:

@media (max-width: 480px) {
.sidebar { display: none; /* Скроем сайдбар на мобильных */ } }

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

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

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

6. Готовые инструменты и фреймворки

Чтобы не изобретать велосипед, можно воспользоваться готовыми CSS-фреймворками для адаптивной верстки. Они содержат сетки, стили и скрипты для быстрого создания адаптивных сайтов.

Самые популярные фреймворки:

Twitter Bootstrap,
Zurb Foundation,
Skeleton,
UIkit.

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

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

Для проверки адаптивности готового сайта используют онлайн-инструменты типа:

Google Mobile-Friendly Test,
Responsinator,
Screenfly Responsive Testing.

Они эмулируют отображение страниц на разных устройствах и помогают найти проблемы в дизайне. Хотя полноценное тестирование на реальных девайсах все же необходимо.

7. Адаптивная верстка основных элементов

Давайте рассмотрим примеры того, как адаптируются под мобильные устройства ключевые элементы сайта:

Шапка и главное меню - основа навигации по сайту. На десктопах обычно используют горизонтальную панель с пунктами меню и логотипом. Но на узких экранах лучше спрятать лишние элементы в выпадающее меню-гамбургер.
Блоки с основным контентом чаще всего располагают в одну колонку и ограничивают максимальную ширину для удобочитаемости. Сайдбары скрывают или переносят в подвал страницы на мобильных.
Если на сайте используются галереи, слайдеры или карусели изображений, то они должны быть адаптивными. Картинки не должны вылезать за границы экрана. Можно ограничить их ширину или даже подгружать отдельные мобильные версии.
Формы и другие интерактивные элементы требуют особого внимания при адаптивной верстке. Важно, чтобы поля ввода, кнопки, чекбоксы были достаточно большими для нажатия пальцем. Выпадающие списки лучше заменять на нативные мобильные элементы.

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

8. Типичные ошибки и проблемы адаптивной верстки

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

Cамые распространенные из них:

Мелкий нечитаемый текст. Если не увеличить размер шрифта для мобильных экранов, то читать такой текст будет очень неудобно. Не говоря уже о ссылках, по которым невозможно попасть пальцем.
Неоптимизированные изображения. Загрузка тяжелых картинок на смартфоне может занимать много времени, особенно при медленном интернете. Нужно уменьшать размер и вес графики, использовать адаптивные изображения.
Некликабельные элементы. Мобильным пользователям неудобно попадать по маленьким кнопкам и ссылкам. Увеличивайте размер интерактивных элементов и расстояние между ними. Оптимальный минимум — 44х44 пикселя.
Всплывающие окна. Назойливые попапы, перекрывающие основной контент, раздражают пользователей. На мобильных в принципе лучше отказаться от таких элементов или хотя бы дать возможность легко их закрыть.
Горизонтальная прокрутка. Если контент не помещается по ширине экрана и появляется полоса прокрутки, это признак того, что верстка неадаптивная. Используйте медиа-запросы и настраивайте отображение блоков под разные размеры экрана.

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

9. Проверка и тестирование

Есть несколько способов протестировать адаптивную верстку сайта:

Функция эмуляции мобильных устройств в браузерах Chrome и Firefox. Позволяет переключаться между устройствами разных размеров и проверять внешний вид сайта.
Онлайн-сервисы типа Responsinator или Screenfly. Достаточно ввести адрес сайта и выбрать устройство, как сервис покажет примерный вид страниц. Полезно для быстрого теста на разных размерах экрана.
Реальные смартфоны и планшеты, особенно популярных моделей и брендов. Это самый достоверный способ понять, как реальные люди видят ваш сайт. Обязательно проверяйте не только отображение, но и удобство пользования.
Инструменты тестирования в Google Search Console. Этот сервис анализирует страницы на адаптивность и выдает рекомендации по исправлению найденных проблем.

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

10. Где заказать адаптивный дизайн

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

Что вы получите, заказав адаптивную верстку в SwD:

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

Можете оставить заявку в форме обратной связи, согласившись на обработку персональных данных, либо пишите в Telegram, WhatsApp или VK.

11. Вопросы и ответы

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

Какие разрешения нужны для адаптивной верстки?

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

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

0