Адаптивный дизайн vs мобильная версия: почему адаптивный победит?

Специалисты компании Brander собрали главные "за" и "против" адаптивного дизайна вместо мобильной версии сайта. "За" оказалось больше
Забезпечте стрімке зростання та масштабування компанії у 2024-му! Отримайте алгоритм дій на Business Wisdom Summit.
10 квітня управлінці Арсенал Страхування, Uklon, TERWIN, Епіцентр та інших великих компаній поділяться перевіреними бізнес-рішеннями, які сприяють розвитку бізнесу під час війни.
Забронировать участие

Will Critchlow еще в ноябре прошлого года анонсировал, что на блоге Distilled появился новый адаптивный дизайн, но о чем я подумал совсем недавно, так это о том, что мы не знаем его основные характеристики, не знаем чем такой дизайн хорош в действительности.

В последние несколько месяцев в кругах интернет-маркетологов об этом часто говорят, но станет ли такой дизайн стандартом индустрии?

Ответ для неусидчивых: да.

Что есть адаптивный веб-дизайн и чем он хорош?

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

Звучит так, что лучше не придумаешь, не правда ли? Все началось с основательной и простой теории Ethan Marcotte, изложенной в статье 2010-го года под названием "Адаптивный веб-дизайн". Вместо того, чтобы создавать дизайн в рамках 800 пикселей, центрируемых на экране дизайнерам предложено создавать страницы из элементов, размер, форма и месторасположение которых зависит от ширины экрана пользователя. Собственно, через запросы к CSS media элементы получают информацию о разрешении экрана и подстраиваются под него.

Для начала простой пример: у нас есть 9 элементов, подписанных от A до I. На небольшом экране, например, планшета или старого компьютера с небольшим монитором, элементы будут располагаться в сетке 3*3.

Если экран шире, элементы могут располагаться таким образом:

А на смартфонах они будут выглядеть так:

Теперь посмотрим "живые", прямо скажем, лучшие примеры, как оно работает. Начнем с сайта Microsoft.

Когда экран сравнительно небольшой, сайт выглядит так:

В дизайне Microsoft все элементы сайта отображаются на всевозможных платформах.

Но чем все-таки отличаются сайты, просматриваемые через мобильные браузеры — им не достает пространства, да и "браузерной памяти", чтобы вмещать большое количество разнообразного контента. Именно поэтому Smashing magazine избавляется от "ненужного", как только экран становится меньше.

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

Как это будет выглядеть на iPad?

Когда экран сравнительно уже, Smashing Magazine оставляет поиск и рекламу справа, но меню оказывается вверху — это попросту удобнее для пользователя и так оно смотрится компактнее.

А вот так сайт смотрится на Kindle Fire:

Поиск перекочевал в верхнюю часть экрана, но меню осталось слева, чтобы до основного контента было легче добраться.

А вот так сайт смотрится на смартфоне:

Как видим, ничего лишнего. Навигация "перевоплотилась" в выпадающее меню. Поиск перекочевал в хэдер.

Как видите, проектируя адаптивный дизайн вы руководствуетесь целым арсеналом решений, способствующих комфортному старому-доброму "сайтсерфингу" :)

Чем адаптивный дизайн хорош с точки зрения SEO?

Юзабилити

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

Если у вас укороченная мобильная версия сайта или эта версия во многом отличается от десктопной, пользователь может быть неприятно удивлен и раздосадован — он ведь ожидает найти на сайте в мобильной версии то, что уже находил в десктопной. Если у вас и вовсе нет мобильной версии сайта, 61% посетителей предпочтут найти какой-нибудь более удобный сайт. У вас увеличится процент отказов и сайт будет хуже ранжироваться. Если же у вас адаптивный веб-дизайн, посетители найдут контент, который ищут в лучшем виде.

Дублирование контента

Не волнуйтесь, мобильная версия сайта с тем же контентом — не повод для санкций алгоритма Google Panda, но у вас все равно в сети — 2 сайта с тем же контентом. Есть вероятность, что кто-то из пользователей будет направлен не на "ту" версию сайта. Если у сайта адаптивный дизайн — весь контент в одном месте, без дублирования.

Ранжирование в мобильном поиске

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

Линкбилдинг

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

Легкая слава

Пока адаптивный дизайн — "горячая" тема, ваш сайт будет замечен.

Что в итоге?

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

После внедрения адаптивного дизайна на сайт Distiller, рост трафика в месяц составил более 400%.

Это, конечно, крутой пример, и внедрение адаптивного веб-дизайна не гарантирует вам столь яркий эффект. Однако если все сделать правильно, ваши показатели улучшатся (не могут не!).

Контраргумент

Адаптивный дизайн — не Святой Грааль интернет-маркетинга. Есть недостатки, которые стоит проанализировать прежде, чем внедрить адаптивный дизайн.

Выберите время

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

Громоздкие страницы

Если на вашем сайте много контента, нужно понимать, что при адаптивном дизайне все это останется. Вы представляете сайт газеты The New York Times на смартфоне?

Именно поэтому у NYTimes.com и CNN.com есть укороченные мобильные версии сайтов. Если у вас подобный портал, лучше поступите так же.

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

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

В каком случае адаптивный веб-дизайн — оптимальное решение?

Давайте проведем рисеч в Google Analytics.

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

Задайтесь вопросом: "Как выглядит мой сайт на их экранах?"

Перейдите в меню на Standard Reports > Audience > Mobile > Devices и кликните на "Screen Resolution". Посмотрите на топ-10 разрешений и проверьте, как смотрится ваш сайт при каждом из них. Для этого используйте Screenfly. Даже если в половине случаев мобильная версия сайта смотрится вполне сносно, вам нужно задуматься о второй половине :)

Находят ли пользователи моб. платформ на вашем сайте то, что ищут?

Обратите внимание на процент отказов с моб. устройств (Standard Reports > Mobile > Overview) Как быстро пользователи покидают ваш сайт? Насколько процент отказов с моб. устройств отличается от процента отказов с ПК? По идее эти показатели должны быть примерно на одном уровне.

Если время позволяет, сделайте SEO-аудит, сфокусировавшись на пользователях моб. платформ, чтобы определить, как ваш сайт для этой аудитории должен выглядеть. Aleyda Solis написала простой гайд для подобных аудитов. Главный совет: переходите к адаптивному дизайну постепенно — можно начать с адаптивного дизайна для ПК и планшетов, например.

Ethan Marcotte пишет, что подходящие дизайн-темы уже начали появляться в популярных CMS — WordPress, Drupal и Joomla.

5 ошибок, которых лучше избежать

1. Вес картинок

На многих сайтах — просто отличные фото, которые без проблем грузятся на ПК, но не так круто все выходит для пользователей мобильного интернета. Статистика беспощадна: 74% пользователей покинут сайт через 5 секунд, если контент не успеет за это время загрузиться. Убедитесь, что картинки весят максимально мало (я знаю, круто звучит!).

2. Дизайн для всех разрешений экранов

Многие дизайнеры с удовольствием выберут 1 разрешение смартфона, 1 — планшета и 1 — ПК и сделают "адаптивный" дизайн для устройств под эти стандарты. Но есть стопицот разных гаджетов и все они разнятся между собой. Адаптивный дизайн — это про изменяющиеся в своих размерах элементы на сайте.

3. Всегда показывайте весь контент

Довольно сложно уместить весь сайт в версии для смартфонов и планшетов, но в этом и смысл адаптивного дизайна. Как показано в примерах выше, единственным контентом, которым можно смело пренебречь, является реклама (по крайней мере, это не то, что нужно пользователям на самом видном месте). Также можно "поиграться" с навигацией (упростить ее). Но не прячьте основной контент сайта — пользователи моб. платформ ищут примерно то же, что и пользователи ПК. Им не нужны костыли!

4. Оптимизируйте для прикосновений пальцами

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

5. Тестируйте во всех браузерах

Помните, как в старые-добрые времена, приходилось тестировать отображение сайта в IE и Firefox? Теперь вам нужно пройти вот такой ряд браузеров:

ПК:

○ IE9 для Windows 7

○ IE10 для Windows 8 (без Flash)

○ Firefox

○ Chrome

○ Safari

Планшеты/смартфоны

○ Safari

○ Default Android browser

○ Chrome beta

○ Dolphin

○ Opera

○ Firefox

И это только самые распространенные. Не забудьте про разные разрешения экранов ;)

Последний аргумент: это того стоит!