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

Як це ні смішно звучить, але модні тенденції проглядаються у всім: зачіски, одяг, машины… веб-дизайн. Якщо пам'ятайте, то в один момент багато ресурси стали виглядати, як пародії сайту Apple. В яке-то час усi сходили з розуму від Flash-технологій, а потім так ж поголовно прибирали їх зі своїх проектів. Зараз ж з'являються прихильники Responsive web design або адаптивной верстки.

Перш ніж ми розберемося з термінологією, невелика передісторія. Чому всесвітня павутина так сильно надає вплив на нашу життя? Усi просто — практично у кожного людини є вільний доступ до комп'ютера з виходом в інтернет. Але на сьогоднішній день персональний комп'ютер поступово витісняється іншими пристроями. Зараз вже нікого не дивують тостери з Wi-Fi або бігові доріжки, підключені до інтернету.

Користувачів подібні тенденції тільки радують: на 52-дюймовом телевізорі можна подивитися погоду, не встаючи з дивана, або ж погуглить відповідь на виник суперечка, використовуючи наручні годинник! Але розробники від подібної ситуації можуть розраховувати тільки на головний біль. Якщо в кращі часи Internet Explorer-а панувала війна браузерів, то тепер настає кровопролитне бій пристроїв. Ось тому і заговорили про адаптивной верстці, яка покликана забезпечити красу сайту при будь-якому дозволі і розмірі екрану.

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

Адаптивна верстка ламає відпрацьований роками сценарій, вимагаючи постійного взаємодії дизайнера і фронт-енд розробника. По суті, проект регулярно допрацьовується, тестується на дружелюбність інтерфейсу до користувачу, а потім знову допрацьовується. Тільки після декількох подібних циклів до роботі приступає програміст і проводиться кінцеве тестування. Усi це значно заважає визначити точні терміни готовності сайту, да і вартість проекту зростає. Багато розробники віддають перевагу підхід до адаптивной верстці під назвою «Mobile first». Особливість його в тому, щоб від самого початку проектувати сайт для пристроїв з маленькими екранами. Відсутність великого простору дозволяє уникнути перенасичення інтерфейсу зайвими деталями.

Техніки створення адаптивного веб-дизайну 1. Гумова верстка.
Найбільш проста техніка, яка користується чималому популярністю. Її особливість в тому, що розміри блоків задаються в відсотках. На самих маленьких екранах контентная частина перебудовується в одну колонку. В статті на Хабре наводиться кілька практичних рад щодо того, як задати відносні розміри для тих або інших об'єктів. Відмінний приклад якісної гумової верстки — сайт готелю 137 Pillars House:

2. Media queries.
Media queries представляє собою нову специфікацію CSS3, яка дозволяє призначати блокам параметри для виведення в залежно від дозволу, ширини і висоти браузера. Ця техніка може повністю перетворити сторінку, змінюючи розташування і візуальне уявлення блоків. Так, замість рядки пошуку на телефоні, ви можете побачити всім знайому лупу, яка і викликає пошукове меню. Досить непогане опис реалізації простого проекту можна подивитися тут. Хороший приклад якісної адаптивной верстки з використанням media queries — сайт-портфоліо Бреда Савицки:

3. Адаптивные зображення.
Особливість техніки в тому, що максимальна ширина для зображення задається в 100%. Картинка завжди знаходиться в межах батьківського блоку і відображення залежить від його ширини. Технік для створення responsive images множество — і з кожним вдень їх стає усi більше. Щоб зображення мали привабливий зовнішній вид на будь-якому пристрої, необхідно підготовляти кілька картинок різного дозволу.
550x357 px:


200x130 px:

Переваги і недоліки адаптивной верстки Адаптивний веб-дизайн стає усi більше популярним по ряду причин:
— SEO-фахівці явно порадіють тому, що у сайту тільки один URL. Це спрощує і индексацию, і просування сайту, тому як Відсутнє дублювання контенту.
— Юзабіліті залишається на високому рівні, незалежно від використовуваного пристрою для виходу в інтернет. Зміни інтерфейсу залишаються майже непомітними для користувача, тому не приносять ніякого дискомфорту.
— Легкість доступу до контенту. Головна мета адаптивного веб-дизайну складається в тому, щоб вся інформація була доступна з будь-якого пристрою. В мобільних версіях сайту нерідко грішать відсутністю цілих розділів меню, що вкрай не подобається багатьом користувачам.

Недоліків адаптивной верстки трохи, але вони усi-так і присутні:
— Складність і тривалість процесу розробки, адже будь-яка недоробка може привести до неюзабельности ресурсу.
— Немає можливості вибирати версію для перегляду. Більшість мобільних версій мають функцію перемикання на повноцінний сайт. При адаптивном дизайні вибору у користувача не залишається. Це ще раз підвищує необхідність в якісної і продуманої роботі команди розробників.

Висновки Адаптивна верстка — це хороша тенденція, яку необхідно правильно використовувати. Технологія розрахована на ресурси, чия головна цінність в контенте. Тому різні блоги і новинні ресурси — ідеальна майданчик для експериментів з отзывчивым веб-дизайном. Але для складних інтерфейсів краще зупинитися на створенні мобільних версій, а ще краще — додатків для мобільних операційних систем.

P.S. Для бажаючих кодіть адаптивно може стати в нагоді ось ця стаття, де можна знайти і техніки створення гумових зображень, і нестандартні погляди на інтерфейс таблиць для маленьких екранів:

Кілька прикладів вдалого веб-дизайну для натхнення:

www.anderssonwise.com

www.madebysplendid.com

www.palantir.net

www.orestis.nl