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

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

Павел ШУДНЕВ

По статистике, на конец прошлого года доля мобильных устройств по миру в целом составила чуть более 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, но и для более популярного в России сервиса Яндекс, и любого другого поисковика.

Другие статьи
О разработке лендинга Uber
Мы получили заказ от петербургского подразделения Uber на разработку адаптивного лендинга для привлечения новых водителей. Задачу нам предстояло решить «под ключ»: написать тексты для лендинга, разработать 6 версий дизайна и выполнить работы по программированию – включая back-end, связанный с обработкой заявок. Читать далее
7 советов как сделать лендинг пейдж лучше
Чем лучше выглядит ленгдинг пейдж, чем более продумано его содержание и структура, тем выше вероятность того, что посетитель совершит нужное вам целевое действие и станет вашим потенциальным клиентом. Ниже приводим семь советов из области дизайна, которые позволят сделать ваш лендинг пейдж лучше. Читать далее
Что такое адаптивный дизайн сайта?
Как и следует из названия статьи, адаптивный дизайн сайта – это дизайн, который адаптируется под устройства, с которых просматривается сайт: компьютеры, планшеты и смартфоны. Чтобы сайт на любом устройстве выглядел хорошо, разрабатывается несколько вариантов дизайна – для каждого устройства. Читать далее
Почему разработчикам выгодно предлагать платные CMS
Зачастую разработчики сайтов рекомендуют платные системы администрирования сайтов (CMS) как более надежные. Если же называть вещи своими именами, смысл такого предложения отнюдь не в надёжности, а в возможности больше заработать. Читать далее