Адрес сайта-примера: autovyhlop.ru

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

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

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

Разработка и продвижение интернет-магазина

А что же такое мобильная версия сайта?

мобильная версия сайта

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

В отличие от адаптивной верстки, мобильная версия сайта недаром именуется «версией». Фактически, это дубль сайта, вынесенный на поддомен типа m.adressaita.ru или mobile.adressaita.ru и живущий самостоятельной жизнью. Администратору такого сайта приходится управлять двумя сайтами — основным и мобильным.

Поэтому сейчас, слыша от заказчика вопрос «Как сделать мобильную (или адаптивную) версию сайта?», приходится уточнять, действительно ли имеется в виду «версия» или просто требуется создание адаптивного сайта. Не путайте эти термины и вы.

С каких пор адаптивная верстка сайта стала важна для поисковиков и почему?

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

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

Пример внедрения адаптивной верстки и положительный эффект

Сайт автомастерских по замене катализаторов Autovyhlop продвигался у нас уже больше года. К моменту решения о создании адаптивного сайта мы уже добились неплохих результатов, повысив посещаемость из поиска почти вдвое с 3000 до 5500.

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

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

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

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

Результаты внедрения адаптивной верстки (мобильной версии сайта)

Новая адаптивная верстка особенно пришлась по вкусу Google. Сначала наши доработки повлияли на позиции сайта в поисковой выдаче. Многие запросы, топтавшиеся около первой страницы, быстро перебрались в первую десятку.

В Яндексе

В топ-3 переместился 21 запрос.
Столько же запросов вошло в топ-10.

В Google

В топ-3 переместился 31 запрос.
В топ-10 попали еще 52 запроса.

Отлично — что сказать!

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

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

Динамика прироста трафика

Еще несколько цифр по этому проекту приведены в отдельном кейсе. Посмотрите сравнение стоимости перехода из поиска со стоимостью клика в Директе.

Вы все еще не адаптивны? Тогда мы идем к вам!

Хотите проверить свой сайт на адаптивность? Воспользуйтесь инструментом Google. Если результат проверки не удовлетворил ни вас, ни Google и вы понимаете, что пора сделать мобильную версию сайта (адаптивную верстку) — обращайтесь к нам! Сделаем в лучшем виде!

Заказать обратный звонок