Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

Чуйний і адаптивний 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), суть якого також в пристосуванні веб-сайту до вирішення пристрою. Тоді чому ж відрізняються ці два підходи? Одні вважають ці поняття синонімами, інші зовсім різним. Так в чому ж правда?

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

Повернутися назад

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

Чи всім сайтам необхідний чуйний дизайн?
Тоді чому ж відрізняються ці два підходи?
Так в чому ж правда?

Новости

Как сделать красивую снежинку из бумаги
Красивые бумажные снежинки станут хорошим украшением дома на Новый год. Они создадут в квартире атмосферу белоснежной, зимней сказки. Да и просто занимаясь вырезанием из бумаги снежинок разнообразной

Пиротехника своими руками в домашних
Самые лучшие полезные самоделки рунета! Как сделать самому, мастер-классы, фото, чертежи, инструкции, книги, видео. Главная САМОДЕЛКИ Дизайнерские

Фольгированные шары с гелием
Для начала давайте разберемся и чего же выполнен фольгированный шар и почему он летает дольше?! Как вы помните, наши латексные шарики достаточно пористые, поэтому их приходится обрабатывать специальным

Все товары для праздника оптом купить
Как сделать правильный выбор в работе, бизнесе и жизни, о котором никогда не придется жалеть. Мы хотим рассказать вам об удивительной и очень простой технике 7 вопросов, которые позволят оценить ситуацию

2400 наименований пиротехники
В последние десятилетия наша страна может похвастаться появлением нескольких десятков отечественных производителей, специализирующихся на выпуске пиротехники. Если вы сомневаетесь, какой фейерверк заказать,

Как сделать из бумаги самолет
 1. Самолеты сделанный по первой и второй схеме являются самыми распространенными. Собирается такое оригами своими руками достаточно быстро, несмотря на это самолет летит достаточно далеко за счет свое

Надувные шарики с гелием с доставкой
На праздники часто бывают востребованы воздушные шарики, надутые гелием. Обычно, их покупают уже готовыми (надутыми) и привозят на праздник. Или, приглашают специалистов, которые приезжают и надувают

Аниматоры на детские праздники в Зеленограде
Уж сколько раз твердили миру…Что готовиться ко дню рождения нужно заранее, а не бегать в предпраздничный день угорелой кошкой. Нельзя впихнуть в 24 часа дела, рассчитанные на недели. К празднику нужно