Shares

Безсумнівно, чутливий веб-дизайн (responsive web design) — це трендові напрям в веб-розробці, який вже зараз вважається хорошим тоном, а в майбутньому, напевно, буде обов’язковою умовою для якісного сайту. Отже, що таке чуйний веб-дизайн?

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

Вперше поняття чуйного веб-дизайну (англ. responsive web design) ввів Етан Маркотт в одній зі своїх статей у травні 2010 року.

Згодом він випустив книгу під назвою «Responsive Web Design» (у російському перекладі — «Чуйна веб-дизайн«), присвячену даній технології.

чуйний веб-дизайн

У даній книзі Етан Маркотт позначив «три слона» чуйного дизайну:

  • Гнучкий макет на основі сітки (flexible, gridbased layout).
  • Гнучкі зображень (flexible images).
  • CSS3 медиазапросы (CSS3 media query)
  • 1. Гнучкий макет на основі сітки

    Для чуйного веб-дизайну, html-сітки (фреймворки) необхідні саме гнучкості і універсальності розмітки — так маючи один html-код і змінюючи лише CSS файл можна легко реалізовувати відмінну сумісність з різними екранами пристроїв.

    Є безліч CSS-фреймворків, але самі зручні, функціональні і часто використовувані такі:

    5 популярних CSS фреймворків:

    • Responsive Grid System — простий і зручний CSS-фреймворк з 12, 16, 24 колонками.
    • Responsive HTML5 Aeon Framework — зрозумілий 12-колоночный фреймворк з усіма останніми «фичами» css3 і html5.
    • Foundation 3 — функціональний, зручний CSS-фреймворк з 12 колонок, готових прототипів, останніми веб-стандартами.
    • Bootstrap — знаменитий багатофункціональний HTML/CSS-фреймворк, розроблений для Twitter.
    • Gumby — новий респонсив 960Grid CSS Framework.

    Гнучкі зображення

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

    Реалізувати гибкокость зображень дуже просто за допомогою CSS3 :
    img {
    max-width: 100%;
    height: auto;
    }

    Примітка. Щоб гнучкі зображення працювали в IE8 потрібно додати властивість width:auto. Тому спеціально для IE8 можна застосувати IE-хак:

    @media \0screen {
    img {width: auto; /* for ie 8 */}
    }

    Правило max -width: 100% можна застосовувати і до більшості елементів з фіксованою шириною, таких як відео– та інші медіа-файли. Фактично ми можемо додати в селектор ще й інші медиаэлементы:
    img,
    embed,
    object,
    video {
    max-width: 100 %;
    }

    CSS3 медиазапросы

    CSS3 медиазапросы — це фішка чуйного веб-дизайну! З допомогою цих чарівних CSS медиазапросов можна вказувати браузерам які CSS класи застосовувати для того чи іншого екранного дозволу. Крім того, медиазапросы дозволяють не тільки орієнтуватися на конкретний клас пристроїв, але і аналізувати фізичні характеристики пристрою, що використовується для відображення сторінок.

    Наведемо деякі приклади CSS медиазапросов:
    /для екранів 980 пкс і менше/
    @media screen and (max-width: 980px) {
    #page {width: 95%;}
    #content {width: 70%;}
    #sidebar {width: 25%;}
    }

    /для екранів 700 пкс і менше/
    @media screen and (max-width: 700px) {
    #page {width: auto; float:none;}
    #sidebar {width: auto; float:none;}
    }

    /для екранів 480 пкс і менше/
    @media screen and (max-width: 480px) {
    #header{height: auto;}
    #sidebar {display:none;}
    }

    Примітка. Так, це усіма веб-розробниками «улюблений» IE. Версії нижче IE8 не підтримують медиазапросы, тому необхідно додати наступний «рятівний код»- теги сторінки:

    Матеріал підготовлений ТопОбзор. За матеріалами книги «Чуйний веб-дизайн», Етан Маркотт.

    При використанні цього матеріалу активне посилання на http://www.topobzor.com обов’язкова.

    Схоже

    Share on Facebook Share
    6
    Share on TwitterTweet
    0
    Share on Google Plus Share
    Share on Pinterest Share
    0
    Share on LinkedIn Share
    Share on Digg Share
    6
    Total Shares
    comments powered by HyperComments!