Що таке «Адаптивний веб-дизайн»?

При створенні сайту кожен більш-менш солідний клієнт хоче також і «мобільну» версію сайту. Однак, «мобільність» у наш час буває така різна – BlackBerry, iPhone, iPad, netbook, і т.д. Схоже, що в найближчому майбутньому цей список тільки поповниться новинками. Так що ж тримати окремі «мобільні» версії сайту для кожного мобільного пристрою? Звичайно ж, ні.

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

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

 responsive design

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

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

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

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

При зміні розміру важливу роль відіграють зображення – вони повинні також змінюватися. Простим і ефективним підходом буде установка властивості 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 – можете використовувати простий код:

$ (window). bind (“resize”, resizeWindow);
function resizeWindow (e) {
var newWindowWidth = $ (window). width ();
if (newWindowWidth <600) {$ (“link [rel = stylesheet]“). attr ({href: “mobile.css”});} else if (newWindowWidth> 600) {
$ (“Link [rel = stylesheet]“). Attr ({href: “style.css”});
}
}

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

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

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

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

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

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

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

Висновок

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

Приклад

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

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

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

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

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

Теги: , ,

Нет комментариев

Вы должны быть зарегистрированы

Потрібна розробка сайту, інтернет магазину чи просування сайту?
Дзвоніть (032) 242-33-39 або просто зв'яжіться з нами