Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[CROATIAN] RWD in practice @ WebCamp Zagreb

Lucijan Blagonić
November 24, 2012

[CROATIAN] RWD in practice @ WebCamp Zagreb

7 things we learned from creating responsive websites.

Lucijan Blagonić

November 24, 2012
Tweet

More Decks by Lucijan Blagonić

Other Decks in Design

Transcript

  1. Responzivan web dizajn u praksi Lucijan Bla onić Bla onić

    Brothers @lucijanbla onic WebCamp Za reb 2012 320 480 600 768 992 1382
  2. Fluid rids, flexible ima es, and media queries are the

    three technical in redients for responsive web desi n, but it also requires a different way of thinkin . Ethan Marcotte / A List Apart http://www.alistapart.com/articles/responsive-web-desi n
  3. Danas Microsoft, En ad et, The Next Web, Mashable, Read

    Write Web, Smashin Ma azine, ISO, Coca-Cola…
  4. At ISO.or , iPad is #1 used mobile device, up

    312% from last year. #2 is iPhone, up 190%. Andy Clarke / via Twitter https://twitter.com/malarkey/status/270884545061081088
  5. At ISO.or , mobile traffic has doubled in twelve months.

    November 2011 was 21,892 views. November 2012 is already 43,038. Andy Clarke / via Twitter https://twitter.com/malarkey/status/270885152685707264
  6. /* CSS Mobile first */ h1 { color:#ff0000; } p

    { color:#444; } /* You can split CSS into separate files */ @media only screen and (min-width: 600px) {} @media only screen and (min-width: 768px) {} @media only screen and (min-width: 992px) {} @media only screen and (min-width: 1382px) { /* Here be dra ons */ } PRAKTIČNI DIO 3
  7. /* CSS */ /* Remember to comment calculations */ article

    { width: 65.957446808511%; /* 620 / 940 */ } aside { width: 31.914893617021%; /* 300 / 940 */ } PRAKTIČNI DIO 5
  8. Slike i video Optimizirajte slike i video za različite rezolucije.

    Definirajte max-width:100%; Možete koristiti i plu ine kao npr. fitvideo.js 7
  9. HDPI Slike za uređaje s HDPI ekranima. /* More info

    https:// ist. ithub.com/3446599 */ @media only screen and (min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { /* Place code here */ } 7
  10. 1 2 3 4 5 6 7 Sadržaj Wireframin Mobile

    first HTML5 Fluidne mreže Tipo rafija Multimedija
  11. 1 2 3 4 5 6 7 Pripremite sadržaj Odradite

    wireframin Krenite Mobile first Primijenite HTML5 Koristite fluidne mreže Pripazite na tipo rafiju Optimizirajte multimediju
  12. 1 2 3 4 5 6 7 Pripremite sadržaj Odradite

    wireframin Krenite Mobile first Primijenite HTML5 Koristite fluidne mreže Pripazite na tipo rafiju Optimizirajte multimediju Testirajte } 8