У сфері веб-дизайну ми швидко зрозуміли, що нам не впоратися з усіма можливими розмірами екранів всіх можливих мобільних «девайсів». Найпростіше, а в той же час і витончене рішення – «адаптивний дизайн» (від англ. Responsive design).

Адаптивний дизайн – це такий підхід в дизайні, що «адаптується» до поведінки користувача та його системи грунтуючись на розмірі екрану, платформи, орієнтації екрану і т.д. Такий підхід поєднує в собі суміш різних сіток і верств, зображень і правильного використання CSS media queries. Наприклад, якщо користувач заходить на сайт з iPad замість звичного лептопа, сайт повинен «підлаштуватися» під розмір екрану, зменшити розміри зображень і, скажімо, прибрати флеш елементи.

Але адаптивний дизайн це не тільки «підстроювання» під розмір екрану. Це, все-таки, новий підхід у самій розробці дизайну. Давайте детальніше зупинимося на ключових елементах адаптивного дизайну.

Розмір екрану

На даний момент існує безліч розмірів екранів і їх орієнтації – книжкової або альбомної. Мало того, тепер мобільні пристрої можуть змінювати орієнтацію сторінки від книжкової до альбомної при повороті. А серед власників великих моніторів поширеним є «вільний» розмір, тобто не на повний екран – а як кожному зручно, тобто фактично розмір броузера може бути яким завгодно. Адаптивний дизайн розробляється таким чином, щоб коректно і красиво виглядати при будь-якому розмірі екрану.

Динамічні зображення

При зміні розміру важливу роль відіграють зображення – вони повинні також змінюватися. Простим і ефективним підходом буде установка властивості max-width CSS в 100%. Хоч властивість max-width поки не підтримується IE, існує також і інша проблема – швидкість завантаження сторінки. А точніше, великі і якісні зображення призначені для перегляду на ПК, а не на смартфоні. На допомогу приходить правильне використання CSS media queries – які також дозволяють змінювати не тільки зображення, а й саме розташування елементів на сторінці.

Адаптивний макет

При зміні розміру екрану корисно також змінити весь макет в цілому. Це просто і ефективно зробити використовуючи CSS media queries. Потрібно написати основний CSS стиль, а за допомогою CSS media queries уточнити CSS стиль для різних дозволів екрану. Наприклад

<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)” href=”mobile.css” />

Даний стиль буде завантажений і застосований, якщо він 1) відображається на екрані (не “для друку” і т.д.) і 2) максимальна ширина екрану складає 480 пікселів. Нові «фішки» CSS3 також підтримують усіляку смакоту а-ля «device-width», «min-device-width», «orientation» і т.д.

JavaScript

Важливу роль відіграє правильне використання JavaScript’а. Приміром, бібліотека css3-mediaqueries.js додасть підтримку CSS3 media queries в старі броузери (IE 5 +, Firefox 1 +, Safari 2). Якщо ж Ви прихильник jQuery – можете використовувати простий код:

Спрощення контенту

Зміна розміру зображень, структури сайту, макета і т.д. – Це все дуже добре, але в деяких випадках – не найкраще рішення. Якщо кожен елемент Вашого сайту «підігнати» під різний розмір… на простому мобільнику з шириною екрану в 320 пікселів – він буде тааааким довгим! Правильно – іноді варто і зовсім прибрати деякі елементи. Наприклад, при перегляді на ПК посеред головної сторінки великий рекламний елемент з гарним зображенням. При розмірі екрану в 320 пікселів, думаємо варто обмежитися просто текстовим посиланням.

Отже, ключові елементи при зменшенні розміру екрану:

- Спростіть навігацію
- Сфокусуйтеся на контенті
- Зовсім приберіть рекламу і банери
- Не розбивайте інформацію на колонки
- Заховайте великі елементи
- Замініть деякі елементи контенту посиланнями на нього

На щастя, атірбут «display: none;» сьогодні підтримує будь-який броузер!

Перехід до тачскрінів

За недавній час тачскріни досягли піку популярності. Вони дуже популярні на мобільних пристроях не тільки невеликого розміру – багато нетбуків і лептопів, а навіть і декстопні комп’ютери підтримують сенсорний ввід. Хороший адаптивний дизайн враховує особливості тачскрінів – відсутність курсору. Є безліч дрібниць, які роблять дизайн приємним і зручним при використанні на сенсорних тач-пристроях. Наприклад, завжди підкреслюйте посилання – немає курсору, а значить і не «наведеш» його на посилання. По можливості уникайте лівостороннього меню – «правші» тримають свої девайси лівою рукою і будуть так чи інакше зачіпати навігацію.

Висновок

Звичайно, не варто відноситься до даних порад дуже серйозно. Адаптивний дизайн не вирішить Ваших проблем, він просто зробить Вашого користувача трішки щасливішим.

Приклад

Як приклад розглянемо сайт, на якому Ви читаєте цю статтю – власне, сайт компанії ВебМарк. Розглянемо поведінку сайта при різних роздільчих здатностях (а Ви можете прямо зараз змінити розмір Вашого браузера і побачити той же результат на власні очі):

Екрани 1240 пікселів і більше:

Екрани до 640 пікселів:

Зміни:
- Спрощена навігація
- Заховані деякі елементи
- Контент переоформлений в 2 колонки замість 4х
- Зменшені лого та інші зображення

Екрани до 468 пікселів:
Зміни:
- Ще більш спрощена навігація
- Заховані деякі елементи
- Контент переоформлений в 1 колонку замість 2х
- Додані додаткові елементи керування

Назва цієї техніки бере свої витоки з дитячої казки Братів Грімм про дівчинку (Goldilocks) і трьох ведмедів. Героїня з’їла кашу, яка не була ні дуже гарячою, ні дуже холодною.

Суть техніки полягає в тому, що Ви пропонуєте потенційному клієнтові вибір з декількох (зазвичай трьох) елементів. Зазвичай використовують ціну, або будь-яку іншу опцію Вашої продукції. Крім «основної» або «рекомендованої» опції, Ви надаєте клієнтові ще дві: дорожче і дешевше, або «бюджетний» і «покращений» варіанти, щоб зробити основну опцію більш привабливою. Ефект також полягає в тому, щоб схилити людей, які зазвичай вибирають найдешевший варіант, до більш «дорожчого» – тому, що посередині.

Нижче можна побачити, як багато хто (відомий і не дуже) використовує даний простий і ефективний метод:

1. Текст Вашого рекламного оголошення і заголовок сторінки повинні збігатися за змістом і доповнювати один одного.

2. Оскільки перше, що побачить відвідувач, буде заголовок (і підзаголовок) на сторінці, постарайтеся не засмутити його – а навпаки, ще більше зацікавити.

3. Подбайте про правильність усіх текстів на сторінці – як синтаксично, так і граматично. Повірте, користувач замислиться, перед тим, як купувати товар / послугу на сайті з помилками.

4. Завоюйте довіру користувача. Позитивні відгуки інших клієнтів, згадки в пресі (або на трастових сайтах), згадки гарантій та інші методи добре позначаться на конверсії.

5. Після того як користувач прочитає заголовок, будьте впевнені, що він буде знати що робити далі. Використовуйте ті слова і словосполучення, які відповідають рекламованому товару – «безкоштовно», «скачати», «замовити» і т.д. Ця кнопка / посилання повинне виділятися і бути в області видимості на екрані (у жодному разі не змушуйте користувача прокручувати сторінку в пошуках цієї кнопки).

6. Не варто перенасичувати цільову сторінку посиланнями на всілякі послуги, які Ви надаєте та які ще товари продаєте – це відверне увагу користувача. Скоротіть кількість посилань до мінімуму.

7. Використовуйте гарне фото товару, презентаційне відео, яскраву діаграму – будь-який доступний засіб, щоб змусити користувача ще більше зацікавитися Вашої послугою / товаром.

Не забувайте перевіряти Ваші цільові сторінки на відсоток конверсії. Сміливо міняйте елементи, тексти та ін, якщо це призводить до його підвищення!

Натиснувши на значок у вигляді лупи в результатах пошуку, користувач побачить зменшений знімок сторінки, а інформація, яку шукає користувач, буде підсвічена на знімку. Це дозволить користувачам візуально оцінити вміст сторінки, яку вони хочуть відвідати, а відповідно – зробити більш правильний вибір.

Тепер з упевненістю можна сказати, що дизайн сайту буде мати значний внесок у прийнятті користувачем рішення – відвідувати даний сайт чи ні?

Тепер з упевненістю можна сказати, що дизайн сайту буде мати значний внесок у прийнятті користувачем рішення – відвідувати даний сайт чи ні? А робота маркетологів тепер повинна зачіпати дизайн сайту на додаток до вибору стратегії просування за ключовими словами.

Також Google відзначає, що вплинути на вигляд мініатюри, яку бачить користувач, буде можливо тільки змінивши сам дизайн сайту (його візуальне оформлення). У цьому ми також бачимо позитивну сторону, тому що дизайн сайту і зручність його використання давно вже стали важливими для всіх користувачів Інтернету.

Перший крок при створенні сайту – аналіз web-дизайну сайту. Це необхідно проводити кожного разу при роботі з новим клієнтом для того, щоб визначити, яким повинен бути дизайн сайту і як він може в результаті вплинути на продуктивність Вашого бізнесу. І чим більш чітко визначити вимоги до дизайну, тим краще буде проведено аналіз web-дизайну сайту. Не посилайтеся на суб’єктивні вимоги до web-дизайну. Не можна визначити, який із сайтів найгарніший а який з web-дизайнів найкращий – це безглуздо. Авангардний web-дизайн зараз не популярний, більший успіх мають сайти з класичним web-дизайном.

Смаки у цільової аудиторії різноманітні, тому web-дизайн сайту повинен бути нейтральним і не дратувати з першого погляду відвідувачів.

Аналіз web-дизайну сайту можна проводити регулярно. Ваш сайт повинен показувати поточний стан Вашого бізнесу з урахуванням перспектив і вимог. Правильний аналіз web-дизайну – запорука успіху при створенні сайту а також його продуктивності, що, у наслідку, принесе Вам прибуток.

Пам’ятайте, що Ваш сайт повинен:

• перебувати в топі, для того, щоб цільова аудиторія відразу могла через пошукові системи потрапити на Ваш сайт;
• видавати, згідно запитів, повну, але в той же час лаконічну і потрібну відвідувачеві інформацію. І чим простіше буде Ваш сайт, тим зручніше і швидше відвідувач отримає все необхідне;
• мати зручну навігацію, щоб відвідувач міг без особливих труднощів переміщатися по сайту у пошуках необхідної інформації;

Все, що може здатися з першого погляду простим і легким не завжди настільки просте. Ще один критерій успішності Вашого сайту – хороша професійна підтримка сайту . Підтримка без достатніх відповідних знань і досвіду найчастіше призводять до падіння ефективності сайту, що призводить до зниження прибутковості Вашого бізнесу.