Гумовий веб-дизайн. Що і куди будемо розтягувати?

31

Від автора: вітаю дорогих читачів мого блогу! Напевно багато з вас вже чули легенди про драконів, Санта-Клауса і незрозумілому звіра під назвою гумовий веб-дизайн, який здатний змінювати свою форму. Про першому персонажі вам повідають рукописи Джона Толкіна, про другому батьки, а ось інформацію про третьому я беру на себе. Як би дивно це не звучало, однак, в цій статті я спробую розжувати гумовий веб-дизайн і розповім про його переваги і недоліки.

При розробці сайту веб-майстер, в першу чергу, повинен відштовхуватися від цілей проекту. Якщо замовнику важливо, щоб веб-сторінка могла підлаштовуватися під будь екран монітора, то тут на допомогу прийде гумовий (адаптивний) дизайн.

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

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

Зародження гумового веб-дизайну

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

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

Гумовий і адаптивний веб-дизайн — це одне і те ж?

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

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

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

Переваги гумового веб-дизайну

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

Подібна особливість гарантує той факт, що веб-сторінка повністю займе браузерне вікно незалежно від того, відображається картинка на малятку HTC або на 20-ти дюймовому широкоформатному моніторі. Саме це і можна віднести до основної переваги гумового дизайну.

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

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

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

Недоліки гумового веб-дизайну

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

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

Приклади гумового і адаптивного веб-дизайну

Для наочності я хочу продемонструвати вам кілька вдалих прикладів гумового і адаптивного дизайнів від досить успішних розробників.

1. http://www.simplebits.com/

Для початку розглянемо гумовий сайт одного американського блогера, який займається паралельно веб-розробками. Повна версія сайту:

Мобільна версія сайту:

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

2. http://www.fork-cms.com/

Тепер пропоную ознайомитися з веб-сайтом, який адаптується під певний пристрій і в залежності від його розмірів повністю перебудовує власну структуру. Повна версія сайту:

Мобільна версія сайту:

Ось так-то. Сподіваюся, сьогоднішній матеріал був цікавий, і ви не дарма витратили свій час. Якщо це так, то залишайте коментарі з цього приводу та діліться власною думкою. Мені приємні і позитивні відгуки, так і експертні висновки майстрів веб-дизайну 2.0. Підписуйтесь на блозі, щоб не пропустити подальшу цікаву і корисну інформацію.

На цьому у мене все, скоро побачимося!