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

Опубликованно 21.12.2017 18:06

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

І це тільки найпоширеніші. Не забудьте про різні дозволи екранів ;)

Останній аргумент: це того варте!

Категория: Автотехника