Чуйний дизайн (responsive design) - це дизайн сайту адаптований під розміри пристроїв, які мають вихід в інтернет. На мій погляд це сучасний і дуже важливий крок у розвитку веб дизайну. Його виникнення було неминучістю, так як неможливо створювати окремі версії сайтів для кожного пристрою (наприклад телефонів різних моделей).
Всього лише 10 років тому всі сиділи за 15-дюймовим монітором з роздільною здатністю екрану 800х600 і були задоволені, а в інтернеті все макети сайтів були фіксованої ширини і будь-якої динаміки на сторінках не намічалося. Через кілька років з'явилися монітори з роздільною здатністю 1024х768 пікселів, і інтернет захопили веб-сторінки з рідким дизайном (fluid design - процентне співвідношення блоків сторінки). Його поява була просто необхідністю коректного відображення веб-сторінок як на 15-ти так і на 17-ти дюймових моніторах. Минуло ще пару років і світ побачив широкоформатні монітори і fluid design автоматично відпав при розробці інтернет-проектів (погодьтеся на 22 дюймовому моніторі колонка в 150px виглядає безглуздо). Стався крок назад і веб дизайнери знову повернулися до макетів фіксованої ширини, розташовані по центру вікна браузера.
І ось зараз 2012 рік у світі повно комунікаторів (смартфонів), планшетів, тачпадів, широкоформатних моніторів і розробка для цих пристроїв окремих дизайнів макетів і їх верстка, досить, дорога процедура. Ось тут на сцену і виходить чуйний дизайн, його завдання адаптувати розробляється макет під будь-які пристрої, при чому робиться це за допомогою запиту CSS3 media query. На даний момент цей запит підтримується всіма популярними браузерами: Google Chrome, Mozilla FireFox, Internet Explorer 9, Safari, Opera. Для браузерів IE7 і IE8 необхідно підключити пару скриптів JavaScript, я в основному використовую для цього css3mediaquery.js і html5shiv.js, але є й інші.
Я за службовим обов'язком і в міру своєї зіпсованості читаю дуже багато блогів, як зарубіжних так і російськомовних і серед веб дизайнерів йде активне обговорення на тему: «Чи варто використовувати Responsive design в своїх проектах?»
Багато негативно ставляться до цієї новизни пояснюючи це тим, що потрібно все протестувати, а потім вже використовувати, щоб бути впевненим, що все відображається без підступу. Я як front-end не розумію, що значить «все протестувати» я і так кожен проект тестую, проводжу аналіз намальованих макетів, щоб верстка була логічною і семантичної, використовую різні хакі для IE, якщо є така необхідність, і взагалі мене вражають розробники, які цього не роблять і дивуються, що щось з їх проектом не так.
Я належу до тих розробникам, які обома руками ЗА чуйний дизайн. Тому до дня народження свого племінника Назара я оновив дизайн свого блогу, тепер він буде чуйним, WordPress тему я розробляв сам, використовуючи теги HTML5 та CSS3 - назвав її HowToMake, хочу, щоб вона була прикладом семантичної верстки і чуйного дизайну. До речі, щоб наочно побачити що таке responsive design - зменшіть (змініть) розмір браузера або скористайтеся сервісами Responsivepx.Com або QuirkTools .
До речі з цієї статті я буду намагатися поповнювати рубрику Верстка цікавим матеріалом, пов'язаним з чуйним (адаптивним) дизайном, він допоможе Вам, та й буде нагадувати мені, як правильно і оптимально робити проекти, максимально адаптовані до будь-яких сучасних пристроїв.
В добру путь!
