Есть ли жизнь без адаптивности сайта?

«Без нее мне и жизнь не мила!» — наверное, именно так стоит начать рассказ об отношениях адаптивной верстки и пользователя. Да и поисковые системы любят ее больше, чем обычную. Почему же вокруг нее сейчас кипят такие страсти?

Виды верстки для адаптации контента

Для начала разберемся с понятиями.

Верстка сайта — это создание кода страниц в соответствии с дизайн-макетом. Этот код полностью описывает структуру страницы, положение элементов, цвет шрифтов и фона и многое другое. Например, заголовок на главной странице нашего сайта

в виде кода выглядит вот так:

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

Мобильная версия

По сути, мобильная версия — это тот же сайт, но с урезанным (для увеличения скорости загрузки страниц) функционалом. Обычно у него отдельный адрес на поддомене — www.m.site.ru/.

Мобильная версия сайта Aliexpress и версия для ПК

Плюсы

• быстро загружается;
• информация адекватно показывается на мобильных телефонах (ничего не «съезжает»);
• удобно для пользователей; любят поисковые системы (особенно после введения mobile friendly поиска).

Минусы

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

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

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

«Резиновая» верстка сайта Читай города для мобильного и ПК

Плюсы

• подходит для любого экрана, изменяет размер элементов под него;
• делается достаточно быстро, а значит, стоит дешевле.

Минусы

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

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

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

   Адаптивная верстка сайта Давыдовское на мобильном и ПК

Плюсы

• удобна для использования не только с компьютера, но и с мобильных и планшетов;
• при необходимости можно скрыть некоторые элементы;
• хорошо влияет на продвижение в mobile-friendly-поиске;
• выглядит современно.

Минусы

• удорожает создание сайта, но дешевле, чем разработка мобильной версии.

Какую верстку выбрать

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

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

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

Если вы не знаете, как ваш сайт отображается на других устройствах, то проверить его можно:

• C помощью Google speed test: он покажет, насколько сайт адаптирован под мобильные (в процентах), и даст рекомендации по улучшению. Кстати, в Яндекс.Вебмастере тоже появился сервис проверки. Чтобы им воспользоваться, зайдите под своим логином в папку вашего сайта, выберите в меню «Инструменты» > «Проверка мобильных страниц».
• Через сервисы, имитирующие разные устройства. Я обычно пользуюсь сервисом ScreenFly.
• Просто открывать сайт на разных устройствах и смотреть, насколько корректно он отображается. На самом деле, это лучший вариант, так как виртуальные сервисы не всегда правильно показывают верстку.

Если в ходе проверки вы обнаружили «съехавшие» кнопки или криво расположенные тексты, сразу напишите вашему программисту, так как подобные ошибки пагубно влияют на конверсию. Ну а если у вас до сих пор нет адаптивной версии сайта, то самое время ее сделать!