Приветствую вас, уважаемые читатели SEO блога Pingo. Продолжая тему SEO в современных условиях, нельзя не упомянуть про оптимизацию сайта под мобильные устройства. А потому в данном материале мы поговорим про то, что такое адаптивная верстка сайта и как она работает, рассмотрим влияние на SEO и изучим колоритный кейс, показывающий влияние адаптивной верстки на результат продвижения.
Что это такое и каков принцип действия?
Что такое адаптивный дизайн сайта? Это универсальный дизайн (извиняюсь за тавтологию), обеспечивающий корректность отображения содержимого на различных устройствах — компьютерах, планшетах, смартфонах и т.п. Адаптивная версия сайта позволяет ему быть максимально удобным для пользователя независимо от используемого разрешения.
Прежде всего, не стоит путать простой резиновый дизайн с адаптивным. В случае с отзывчивым дизайном сайт ведет себя как гармошка — сужается и расширяется, подстраиваясь под разрешение экрана посетителя. Как итог — на малых разрешениях он становится нефункционален — по кнопкам не попасть, текст нормально не прочитать — приходится постоянно увеличивать отдельные участки, пользоваться горизонтальной прокруткой и т.п.
Адаптивный же дизайн способен перестраивать себя, принимая тот структурный вид, который лучше всего подходит для отдельное взятого устройства и разрешения. В процессе такой реструктуризации часть блоков может скрываться, менять своё положение или полностью видоизменяться.
Данный блог имеет адаптивный дизайн. Сузьте по ширине окно вашего браузера и сможете понаблюдать, какие изменения всвязи с этим претерпевает сайт. Тестировать адаптивный дизайн можно и посредством специального сервиса от Google.
Варианты адаптации дизайна
Сразу скажу — я не верстальщик. С этой областью я на «вы», а потому могу в некоторых понятиях «плавать» в процессе объяснения. Так что сильно не ругайтесь. Этот материал не о том, как правильно отрисовать и сверстать адаптивный сайт, так как это настолько самостоятельные и масштабные темы, что их не раскрыть и в целой серии статей.
Как отрисовать макеты адаптивного сайта по сетке и как затем их правильно сверстать, указав CSS-стили блоков и отдельных элементов под различные разрешения, — могу посоветовать посмотреть тут и тут, ну или в любом другом тематическом блоге.
Также можно довериться специалистам, которые занимаются адаптацией сайтов под мобильные устройства. Они подскажут, какие блоки оставить для повышения конверсии, а какие скрыть для более быстрой загрузки страниц, ну и, конечно же, сверстают каждый такой блок под все устройства.
Моя же цель рассказать о том, что это значит и как оно может быть полезно в плане поисковой оптимизации сайта. Итак, как правило, выделяют несколько подходов к построению адаптивности.
Адаптация с переносом блоков. Используется чаще всего для многоколоночных сайтов. По мере сужения ширины экрана, вертикальные блоки переформатируются в горизонтальные с одновременным переносом вниз, под основную контентную область.
Переключение макетов. Трудозатратный, но и наиболее качественный вариант, при котором под каждое разрешение экрана отрисовывается и верстается свой макет.
Отзывчивый адаптивный дизайн. Самый оптимальный, на мой взгляд, вариант. Он близок к адаптации с переносом блоков, но с той лишь разницей, что блоки резинятся и по достижении минимально допустимой ширины экрана, перестраиваются.
Мобильная версия сайта или адаптивный дизайн — что лучше?
Споров на этот счет много. Лично я предпочитаю именно адаптивный дизайн. Google советует тоже самое. Яндекс же витьевато как-то написал в своём блоге: «мобильная версия хорошо, а адаптивная верстка — лучше». Так что делайте выводы сами. Давайте коротко пробежимся по плюсам и минусам, которые в целом покажут, чем отличается мобильная версия от адаптивной и что лучше.
Адаптивный сайт
- Одна страница — один URL. Нет свистопляски с поддоменами и подпапками под отдельные урлы страниц мобильной версии. Никакой мороки с индексацией. Работа идет с одной страницей. Очень удобно.
- Стоимость. Как правило, значительно дешевле разработки отдельной мобильной версии.
- Нет возможности переключения на десктопную версию. Если адаптированное состояние посетителю неудобно, то он с этим, в отличие от мобильной версии, ничего поделать не сможет.
- Скорость загрузки. В адаптивном состоянии многие элементы скрываются, но сайт, его вес, предназначенный для десктопа, вынужден прогружаться и на мобильном устройстве.
Мобильная версия
- Гибкость. Выстроить эту версию сайта можно как угодно, максимально заточив её под интересы вашей мобильной аудитории. Без оглядки на основной сайт.
- Упомянутая ранее возможность переключения и скорость загрузки. Тут эта проблема отсутствует. Здесь же антиподом адаптивной версии выступает более высокая стоимость разработки.
- Несколько адресов. Приходится работать в два потока. Усложнение работы с сайтом.
RESS
Адаптивная верстка или мобильная версия — не единственные варианты. Третий пункт, который хотелось бы упомянуть, — RESS (Responsive Design Server Side). Технология, используемая Google на своих сервисах. Принцип прост — в зависимости от устройства посетителя, подгружается тот или иной подходящий для него шаблон.
Получается та же адаптация с переключением макетов, но лишенная минусов адаптивной верстки в виде скорости загрузки или невозможности переключения на десктопную версию. Про этот вариант много не скажу — слышал, но не применял на практике, но в целом штука интересная и современная, хотя и самая трудоёмкая в плане реализации.
Влияние адаптивной верстки на SEO
Итак, подопытный — сайт, предлагающий услуги по продаже и установке систем умного дома в Санкт-Петербурге. Довольно старый ресурс с пошатнувшимся здоровьем:
В процессе его переработки был отрисован новый дизайн, структурно не отличающийся от прежнего. Да, в целом посимпатичнее, но все блоки, интерактивные элементы, навигация и т.д. остались на своих прежних местах. Ничего нового не добавлялось.
Говорю это для того, чтобы подчеркнуть чистоту эксперимента — новая версия сайта не тянула за собой проработку юзабилити. Просто причесывание на современный лад, легкий тюнинг и адаптация. Вот итог:
При этом рост был обеспечен не только за счет мобильной аудитории — ранжирование на десктопе также явно улучшилось.
Общий показатель отказов также снизился на 5%. Вот тут как раз в основном за счет мобильной аудитории (7% на мобайле и 3% на десктопе).
Больше всего обновкой впечатлился Google. Яндекс — тоже, но так как у сайта исторически трафик с гугла всегда был выше, то и реакция по нему вышла контрастнее.
Стоит ли использовать в поисковой оптимизации?
Да, разумеется. Универсальность сайта в плане удобства его восприятия обычными и мобильными посетителями — очевидный фактор ранжирования, весомость которого с каждым днем растет. Влияние адаптивной верстки на результат продвижения было продемонстрировано выше.
И даже если специфика вашей тематики предполагает наличие очень маленького процента мобильной аудитории — адаптивный сайт все равно себя в итоге окупит.