Агентство по A/B-
и MVT-тестированиям

Главная

Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде!

Михаил Деркач

28 Ноя 2017

Время чтения: 4 минуты

Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде!

Вы узнаете:

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

2. Почему адаптивная верстка – это важно

3. Влияние адаптивной верстки на конверсию

Поделиться

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

К сожалению, многие заказчики не в курсе, что это такое и в чем польза это самой “адаптивности”. Как следствие - использование "адаптивной верстки" игнорируется. А зря! Но обо всем по порядку.

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

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

Стоит упомянуть мобильную версию сайта, но это должен быть отдельный проект с тщательно проработанным UI/UX и действительно необходим. Т.е. если у вас лендинг, то отдельная мобильная версия не требуется вообще, но в случае интернет-магазина с высоким трафиком мобильная версия может быть строго необходима.
Работу адаптивной верстки иллюстрирует анимация ниже:

Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде!

Еще одна иллюстрация преимуществ адаптивных сайтов:

Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде!

Поведение адаптивного сайта и статического в зависимости от экрана

Адаптивная верстка отобразит сайт без проблем на любом устройстве!

2. Почему адаптивная верстка – это важно

Прочитав раздел выше, у вас может возникнуть вполне резонная мысль:
“Хорошо, зачем мне это? У меня сайт о *вставить нужное* и его будут смотреть только с компьютеров”. Вот тут вы глубоко ошибаетесь. Разобьем мысль на две части и разберем каждую.

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

“У меня сайт о *вставить нужное* и его будут смотреть только с компьютеров”
По данным StatCounter, в октябре 2016 года 48,7 % посещений зарегистрировано с ПК и 51,3 % с мобильных устройств. Анализу были подвергнуты 15 млн посещений 2,5 млн сайтов. Это глобальная статистика.
Касательно России, то Mediascope приводит две инфографики. Обратите внимание на две последние колонки. Показательно, не правда ли?

Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде!

Mediascope так же добавляет следующую информацию:

Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде!

15% прироста пользователей на мобильных устройствах за 1 год и 46% доли в целом! Данные цифры нельзя игнорировать, т.к. предпосылок к снижению роста нет. Косвенно это можно подтвердить, взглянув на статистику продаж смартфонов.

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

Мобильный трафик превысил ПК и продолжает расти

3. Влияние адаптивной верстки на конверсию

Сразу стоит сделать акцент на том, что адаптивная верстка реально повлияет на конверсию, если проведена комплексная работа над сайтом: SEO, рекламная кампания, ускорение и оптимизация и так далее.

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

Если вы самостоятельно начнете поиск по данному вопросу, то вы можете попасть под влияние “экспертного мнения”. Вы можете узнать, что что адаптивная верстка - это пшик, навязанный Google,Yandex.Yahoo. И она не влияет CTR, выдачу и т.д. и т.п. И самое страшное, что данные сообщения будут датированы примерно 2016 годом.

Смею Вас заверить, что это не так потому, что:
1) Данные сообщения не подкреплены никакой статистической составляющей и нет ссылок на те самые сайты, которые ничего не получили от мобильной верстки
2) Поставьте себя на место пользователя и представьте, на каком сайте вам приятно находиться, глядя на примеры ниже.

Хорошие примеры:

Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде! Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде! Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде!

Плохие примеры:

Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде! Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде! Адаптивная верстка или почему Ваш сайт должен выглядеть хорошо везде!

прим.: скриншоты сделаны на Samsung Galaxy A5 (2017)

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

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

Итог

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

Есть лендинг или сайт?

Получите бесплатный анализ и:

  • Узнайте слабые места, где теряете клиентов
  • Получите рекомендации, где и что исправить
  • Получите бесплатную консультацию маркетолога
Получите бесплатный пошаговый курс от поиска
идей до запуска эффективного A/B-теста