Зачем нужен адаптивный дизайн сайта?

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

Павел ШУДНЕВ

По статистике, на конец прошлого года доля мобильных устройств по миру в целом составила чуть более 33% – треть от общего поискового трафика. Другими словами, каждый третий заход в Сеть в мире в 2014 году осуществлялся с мобильного устройства – смартфона или планшета. Можно сказать по-другому: на два захода в Интернет с ПК в прошлом году был один заход с мобильного устройства. Т.е. отношение было 2:1.

Рекордных значений мобильный трафик составил в прошлом году и в России. Еще летом 2014 года его доля в РФ впервые превысила 20% (для сравнения: в 2013 году она была около 13%). Т.е. в прошлом году в Интернет в России с мобильного устройства в среднем заходил каждый пятый пользователь. Другими словами, соотношение заходов в Сеть с двух типов устройств – ПК и мобильных – в 2014 году в России было 4:1.

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

При чем тут адаптивный дизайн?

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

  1. Дизайн сайта для ПК
  2. Дизайн сайта для смартфона в вертикальной ориентации
  3. Дизайн сайта для смартфона в горизонтальной ориентации
  4. Дизайн сайта для планшета в вертикальной ориентации
  5. Дизайн сайта для планшета в горизонтальной ориентации

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

Так как базовые вопросы адаптивного веб-дизайна рассмотрены в нашей статье Что такое адаптивный дизайн, далее мы рассмотрим преимущества данного решения – как для компании, так и для клиента.

Так уж ли нужен адаптивный дизайн?

Для начала давайте честно ответим на вопрос: всем ли нужен адаптивный дизайн? Нет, не всем. Если ваша аудитория заходит на ваш сайт почти на 100% с ПК и ноутбуков, то для такой компании особой необходимости разрабатывать адаптивный дизайн для сайта нет.

С другой стороны, если верить поисковым системам (об этой пойдет речь ниже), то адаптивный дизайн позитивно влияет на ранжирование сайта в результатах поиска… И если компания занимается поисковым продвижением, для нее это может быть актуально – даже если доля мобильного трафика ее аудитории небольшая.

Если же каждый пятый заход на сайт компании осуществляется с мобильного устройства, на мой взгляд, об адаптивном дизайне как минимум стоит задуматься. Помимо упомянутого выше удобства для пользователя (читайте – для вашего клиента), данный подход к веб-дизайну позитивно сказывается на восприятии компании клиентом.

На этом фото приведен пример вид обычного статичного российского сайта – со всеми «прелестями», которые для смартфонов категорически непригодны

Это НЕ адаптивный дизайн!

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

И, наоборот, когда человек просматривает с мобильного телефона сайт, который для телефона не предназначен – и который фактически для просмотра с телефона не пригоден (слишком мелкий шрифт, тяжело читать, постоянно нужно скролить и т.д.), это вызывает обратные ощущения. В ряде случаев это может привести к заходу на сайт конкурента… c последующим заказом услуги (покупкой товара).

О влиянии адаптивного дизайна на поисковое ранжирование сайта

В сервисе инструментов для веб-мастеров Google применительно к некоторым сайтам можно увидеть такую надпись:

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

Сайт не оптимизирован для мобильных устройств. Что бы это значило? Кликаем по ссылке «подробнее»:

site-moile-device

В этом тексте обращают на себя внимание фразы о том, что 100% страниц сайта неудобно просматривать на мобильных устройствах (обратите внимание: Google ОЧЕНЬ заботится об удобстве просмотра сайтов – и не только с мобильных устройств) и что все они «будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом».

В переводе на простой язык это значит, что:

  • Сайты без адаптивного дизайна или мобильной версии в результатах поиска с мобильных устройств будут ранжироваться крайне низко (будут находиться на последних страницах результатов поиска)
  • И, наоборот, сайты с адаптивным дизайном или мобильной версией (оптимизированные для мобильных устройств) в результатах поиска с мобильных устройств будут ранжироваться выше сайтов, которые не оптимизированы для смартфонов и планшетов

Поскольку все поисковые системы работают по схожему принципу, это будет справедливо не только для Google, но и для более популярного в России сервиса Яндекс, и любого другого поисковика.

Другие статьи
Три способа адаптации сайта для мобильных устройств
С точки зрения Google, есть всего три способа адаптации сайта для мобильных устройств: разные URL, динамический показ и адаптивный дизайн. Сходства и различия этих методов рассмотрим ниже. Читать далее
Как выбрать домен
Мои клиенты часто обращаются ко мне за советом, как правильно выбрать доменное имя. У меня на этот счет есть свои соображения, которыми я поделюсь ниже. Читать далее
Landing page: одна страница – одно действие
Лендинг пейдж, он же лендинг, он же landing page, посадочная страница или страница посадки, доказал свою эффективность на Западе, и сейчас активно набирает популярность в России. Ниже мы вкратце расскажем о том, что такое настоящий landing page, зачем он нужен и чем он отличается от обычного сайта. Читать далее
О разработке 7 региональных лендингов Uber
Мы разработали под ключ семь региональных лендинг пейджей компании Uber: для Омска, Перми, Челябинска, Уфы, Красноярска, Краснодара и Новосибирска. Помимо фронт-энда, мы также сделали серьезную работу с бэк-эндом, чтобы было максимально удобно работать с заявками из разных регионов, и легко оценивать эффективность рекламных кампаний. Читать далее