Responsive Web Design

about:me

• @tglazar
• about.me/glazar

Obecnie jestem zatrudniony przez dobrych ludzi w Interia.pl

Skąd to się wzięło?

• Architektura
• Smartfony, telewizory, lodówki
• Wzór:

  obiekt ÷ kontekst = wynik

tak jak Bóg i Photoshop przykazali

Czym to właściwie jest?

• Design dla urządzeń mobilnych niezależny od urządzenia!

To elastyczna siatka (z elastycznymi grafikami) wykorzystująca media queries do stworzenia adaptacyjnego layoutu.

Elastyczna siatka

Elastyczna siatka

Elastyczna siatka

• Siatka ma 7 kolumn, każda po 124px z marginesem 20px = 988px
• Ustawiamy kontekst:

  body {
    font-size: 100%; /* o tu; ~16px */
    font-family: Arial, Verdana sans-serif;
  }
  #page {
    max-width: 988px; /* i tu */
    /* można też w %: 988px ÷ 16px = 61.75% */
  }

Elastyczna siatka

• Szeokość bloków i rozmiar tekstu zależy od kontekstu:

  #title {
    font-size: 1.5em;      /* 24px ÷ 16px = 1.5em */
    margin: 0 0 0 14.575%; /* (124px + 20px) ÷ 988px = 0.14575 */
    width: 70.85%;         /* 700px ÷ 988px = 0.7085 */
  }

Elastyczna siatka

• Gotowe rozwiązania
  • The Golden Grid System
  • 1140px CSS Grid
  • Fluid grid calculator

Elastyczne grafiki

• Można tak:

  img, video, object {
    width: 100%;      /* dla IE6 */
    max-width: 100%;
  }

• Ale wtedy telefon dostanie ciężkie zdjęcie
• Starsze przeglądarki źle skalują obrazki (na Windowsie)

Elastyczne grafiki

• Rozwiązaniem dla skalowania jest:
  • AlphaImageLoader() dla IE
  • albo skrypt Ethana Marcotte

Elastyczne grafiki

• Odpowiedni obrazek do odpowiedniego urządzenia:
  • Skrypt Filament Group

    <img src="small.jpg?full=large.jpg">

  • sencha.io

    <img src="http://src.sencha.io/http://www.myapp.com/myimg.jpg">

Media queries

• CSS2

  <link rel="stylesheet" type="text/css" href="style.css"
  media="screen">
  <link rel="stylesheet" type="text/css" href="print.css"
  media="print">

Media queries

• CSS3

  <link rel="stylesheet" type="text/css" href="style.css"
  media="screen and (max-width: 320px)">

• albo

  @media screen and (max-width: 320px) {
    ...
  }

• Specyfikacja

A gdzie to działa?

• IE9, Opera 9.5+, Safari 3+, Firefox 3.5+, Chrome, Opera Mobile, iOS, Android
• Dla reszty odpowiedni skrypt

Dlaczego to może nie być takie fajne?

• Urządzenia mobilne ściągają dane, których mogą nie wyświetlać
  • Ukryte bloczki
  • Źle zaplikowane tła w CSS
• Dedykowane aplikacje/strony mogą mieć lepszą użyteczność

!important

• Zaczynaj od urządzeń mobilnych
• Rozmiary w % albo em'ach
• Wzór:

  obiekt ÷ kontekst = wynik

Pytania?

Źródła & czytanki

• Grafika siatki Ethan Marcotte
• Responsive Web Design Ethan Marcotte
• More Than Scaling: How to Make the Leap From Mobile to Desktop
• Media Queries galeria stron używających media query
• News Redux Andy Rutledge