Чуйний і адаптивний web-дизайн

Сучасні технології розвиваються неймовірно швидкими темпами. Сьогодні ми маємо можливість зайти в інтернет не тільки зі стаціонарного комп'ютера, ноутбука і телефону, але ще і з домашнього кінотеатру, навігатора машини і навіть з екрану бігової доріжки і холодильника! Розробка веб-дизайну сайтів , Як і веб-додатків, не встигає адаптуватися під ці зміни. Багато стали замислюватися, як зробити, щоб сайт відображався зручно на будь-якому дозволі екрану.

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

Деякий час дуже вдалою ідеєю вважався гнучкий, «гумовий» макет сайту, який розтягувався або стискалася в залежності від дозволу екрану пристрою. Однак це викривляло фотографії та утворювало порожні місця на сторінках.

Цікавим рішенням виявилося створення чуйного веб-дизайну, яке вирішувало деякі значущі проблеми.

Чуйний веб-дизайн (Responsive Web Design) - такий підхід у створенні сайту, який передбачає проектування і розробку відповідно до використовуваним дозволом екрану, його орієнтації і платформи. Іншими словами, веб-сайт повинен будуватися на таких технологіях, які автоматично реагували б на призначені для користувача настройки. На практиці чуйний веб-дизайн являє собою поєднання гумових зображень, включаючи відеоролики, гумового макета на пропорційній основі і Media Queries, які, власне, і відповідають за адаптацію макета під розміри призначеного для користувача екрану, а засобами CSS 3 цей дозвіл визначається і видається результат.

Даний підхід вперше був запропонований ще на початку 2009 року Ітаном Маркотт, який згодом опублікував цілу книгу «Responsive Web Design» (російського аналога поки немає).

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

Приклади чуйного дизайну сайту.

Food Sense

St Paul's School

Forefathers Group

Але чи все так добре, як здається на перший погляд? Таке рішення створення сайту викликає багато суперечливих думок серед верстальників і дизайнерів. Зокрема, вони виділяють наступні проблеми чуйного дизайну:

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

Головний принцип чуйного дизайну Mobile First - «Спершу мобільні», тобто спочатку розробляється версія сайту для мобільного пристрою, а потім на нього навертаються інші можливості розширення елементи.

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

Зовсім недавно ми говорили про адаптивному дизайні сайту (Adaptive Web Design), суть якого також в пристосуванні веб-сайту до вирішення пристрою. Тоді чому ж відрізняються ці два підходи? Одні вважають ці поняття синонімами, інші зовсім різним. Так в чому ж правда?

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

Статті по темі: