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

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

Павел ШУДНЕВ

По статистике, на конец прошлого года доля мобильных устройств по миру в целом составила чуть более 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 всего за два клика можно узнать, удобно ли просматривать ваш сайт на мобильных устройствах. На фоне официального занижения в результатах поиска неадаптивных сайтов, вопрос удобства просмотра с мобильных девайсов становится всё более актуальным. Читать далее
О разработке лендинга Uber
Мы получили заказ от петербургского подразделения Uber на разработку адаптивного лендинга для привлечения новых водителей. Задачу нам предстояло решить «под ключ»: написать тексты для лендинга, разработать 6 версий дизайна и выполнить работы по программированию – включая back-end, связанный с обработкой заявок. Читать далее
Что нужно знать при переносе сайта на другой домен?
Если вас интересуют переходы на ваш сайт из поисковых систем, то при переносе сайта на другой домен нужно сделать так, чтобы Google знал, что сайт переехал, а не думал, что его содержимое украли. Читать далее
Особенности разработки адаптивного дизайна сайта
В отличие от привычной работы по созданию дизайна сайта для одного типа устройств – компьютеров, у адаптивного дизайна другие, более сложные законы, и они диктуют принципиально другой подход к разработке. Теперь нужно учитывать мобильные устройства и их особенности: расстояние от точки просмотра, плотность пикселей, ориентацию, предполагаемую скорость подключения к Интернет. Читать далее