Что такое адаптивный дизайн и его значение для SEO


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

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

Что такое адаптивный дизайн сайта? Это универсальный дизайн (извиняюсь за тавтологию), обеспечивающий корректность отображения содержимого на различных устройствах — компьютерах, планшетах, смартфонах и т.п. Адаптивная версия сайта позволяет ему быть максимально удобным для пользователя независимо от используемого разрешения.

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

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

Что такое адаптивный дизайн и его значение для SEO

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

Варианты адаптации дизайна

Сразу скажу — я не верстальщик. С этой областью я на «вы», а потому могу в некоторых понятиях «плавать» в процессе объяснения. Так что сильно не ругайтесь. Этот материал не о том, как правильно отрисовать и сверстать адаптивный сайт, так как это настолько самостоятельные и масштабные темы, что их не раскрыть и в целой серии статей.

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

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

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

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

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

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

Мобильная версия сайта или адаптивный дизайн — что лучше?

Споров на этот счет много. Лично я предпочитаю именно адаптивный дизайн. Google советует тоже самое. Яндекс же витьевато как-то написал в своём блоге: «мобильная версия хорошо, а адаптивная верстка — лучше». Так что делайте выводы сами. Давайте коротко пробежимся по плюсам и минусам, которые в целом покажут, чем отличается мобильная версия от адаптивной и что лучше.

Адаптивный сайт

  1. Одна страница — один URL. Нет свистопляски с поддоменами и подпапками под отдельные урлы страниц мобильной версии. Никакой мороки с индексацией. Работа идет с одной страницей. Очень удобно.
  2. Стоимость. Как правило, значительно дешевле разработки отдельной мобильной версии.
  3. Нет возможности переключения на десктопную версию. Если адаптированное состояние посетителю неудобно, то он с этим, в отличие от мобильной версии, ничего поделать не сможет.
  4. Скорость загрузки. В адаптивном состоянии многие элементы скрываются, но сайт, его вес, предназначенный для десктопа, вынужден прогружаться и на мобильном устройстве.

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

  1. Гибкость. Выстроить эту версию сайта можно как угодно, максимально заточив её под интересы вашей мобильной аудитории. Без оглядки на основной сайт.
  2. Упомянутая ранее возможность переключения и скорость загрузки. Тут эта проблема отсутствует. Здесь же антиподом адаптивной версии выступает более высокая стоимость разработки.
  3. Несколько адресов. Приходится работать в два потока. Усложнение работы с сайтом.

RESS

Адаптивная верстка или мобильная версия — не единственные варианты. Третий пункт, который хотелось бы упомянуть, — RESS (Responsive Design Server Side). Технология, используемая Google на своих сервисах. Принцип прост — в зависимости от устройства посетителя, подгружается тот или иной подходящий для него шаблон.

Получается та же адаптация с переключением макетов, но лишенная минусов адаптивной верстки в виде скорости загрузки или невозможности переключения на десктопную версию. Про этот вариант много не скажу — слышал, но не применял на практике, но в целом штука интересная и современная, хотя и самая трудоёмкая в плане реализации.

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

Итак, подопытный — сайт, предлагающий услуги по продаже и установке систем умного дома в Санкт-Петербурге. Довольно старый ресурс с пошатнувшимся здоровьем:

Что такое адаптивный дизайн и его значение для SEO

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

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

Что такое адаптивный дизайн и его значение для SEO

При этом рост был обеспечен не только за счет мобильной аудитории — ранжирование на десктопе также явно улучшилось.

Что такое адаптивный дизайн и его значение для SEO

Общий показатель отказов также снизился на 5%. Вот тут как раз в основном за счет мобильной аудитории (7% на мобайле и 3% на десктопе).

Что такое адаптивный дизайн и его значение для SEO

Больше всего обновкой впечатлился Google. Яндекс — тоже, но так как у сайта исторически трафик с гугла всегда был выше, то и реакция по нему вышла контрастнее.

Что такое адаптивный дизайн и его значение для SEO

Стоит ли использовать в поисковой оптимизации?

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

И даже если специфика вашей тематики предполагает наличие очень маленького процента мобильной аудитории — адаптивный сайт все равно себя в итоге окупит.




Смотрите также:

Комментарии (0)
Оставить комментарий

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent




Заполняя данную форму и нажимая кнопку «Добавить», вы соглашаетесь с политикой конфиденциальности сайта.