1. Responsive webdesign
Ivan Potančok
@ivusko
2000 - 2010
freelance webdesigner
2010 +
CEO @ vibration.sk

3. Čo robím

4. Čo robím

5. Čo robím

6. Trendy v histórii
Plain text
HTML
Tabuľkový layout
FLASH – je responsive
XHTML + CSS 2
Fluid layout
Interakcia cez JS
CSS frameworky + GRID
HTML 5 + CSS 3
Responsive webdesign

8. Problém

9. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

10. Prispôsobe
nie dizajnu
podľa
veľkosti
zariadenia
• Tablety
• Smart
phones
• Robíme tie
weby
predsa pre
ľudí

11. Na čo to je dobré
• Ukážka
• vhodná pre
– prezentačné stránky = všetky wp stránky
– eshopy
• neodporúčam
– väčšie portály, webové aplikácie
– samostatné štýly, menšie obrázky, menej reklamy
– zjednodušená funkcionalita
– príklad – katalóg nepotrebuje v mobilnej verzii
komplet navigáciu a content, stačí mu vyhľadávanie
– obsah zobrazujem v inej šablóne

12. Základ
• Flexibilný layout založený na gride
• Flexibilné obrázky a médiá
• Media queries

13. Čo potrebujeme?
• firebug alebo developer tools v chrome
• kalkulačku
• papier (axure rp, fireworks, …)
• čas
• editor

15. Twenty eleven
– Dobrý základ
– Doplníme vlastné štýly
– Uvidíme, čo prinesie šablóna twenty twelve
Ale čo keď už máme web a nie je
responsive?

16. Postup pri zmene na responsive
• Všetky šírky boxov zmeníme z px na %
• Základ je nezaokrúhľovať desatinné miesta v %
• Odstránime width a height obrázkov z html
$(document).ready(function() {
$("img").removeAttr("width");
$("img").removeAttr("height");
});

17. Základný layout
#page {
/* width:1000px; */
max-width: 1000px; /*(100%)*/
#menu {
/*width:180px; */
width:18%; /*(180/1000 = 0,18)*/
float:left;
#content {
/*margin-left:20px;
width: 800px */
margin-left: 2%;
width:80%;
float:left;
}

20. Typografia
Algoritmus … Target / context = result
body{
font-size: 100%;
}
h1{
font-size:2em; 24px / 12px = 2em
}

21. Media
img, embed, object, video{
max-width:100%;
}
ie6
img{
width:100%;
}

22. Media types - Old skul
<link rel=“stylesheet” href=“global.css” media=“all” />
<link rel=“stylesheet” href=“screen.css” media=“screen” />
<link rel=“stylesheet” href=“print.css” media=“print” />

23. Media Queries – Nu skul
• CSS3
@media only screen and (max-width: 768px) {
#page {
max-width:740px;
}
}

24. Media Queries
@media screen and
(min-device-width: 480px) and
(orientation: landscape){ …}

25. Nastavíme viewport
• <meta name="viewport" content="width=device-
width; initial-scale=1.0; maximum-scale=1.0; user-
scalable=0;" />

26. Komplikácie
• menu
• cudzí content – fb, youtube
• testovanie – developer tools, zariadenia,
emulátory
• background-size – slabá podpora

27. Podpora prehliadačov
• Väčšina prehliadačov <5 rokov
• IE - problém
– css3-mediaqueries.js
– respond.js

28. Nevýhody
• Užívateľ si nemôže vybrať, ktorú verziu chce
vidieť
• Nezmenšuje sa objem prenesených dát

29. Ukážky
• http://hicksdesign.co.uk/
• http://vibration.sk
• http://patriotband.sk
• http://ucimezdravovarit.sk
• http://gmail.com
• http://calendar.google.com

30. Zhrnutie
• zaberie to trochu viac času
• nič zložité
• treba na to myslieť už pri návrhu dizajnu
• pridaná hodnota
• diskusia
• Twitter > @ ivusko
• Web: > ivusko.sk, vibration.sk