responsive webdesign - vibration.sk

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

description

wordcamp 2012 Slovakia

Transcript of responsive webdesign - vibration.sk

Page 1: responsive webdesign - vibration.sk

Responsive webdesign

Ivan Potančok@ivusko

2000 - 2010

freelance webdesigner

2010 +

CEO @ vibration.sk

Page 2: responsive webdesign - vibration.sk
Page 3: responsive webdesign - vibration.sk

Čo robím

Page 4: responsive webdesign - vibration.sk

Čo robím

Page 5: responsive webdesign - vibration.sk

Čo robím

Page 6: responsive webdesign - vibration.sk

Trendy v histórii

Plain textHTML Tabuľkový layoutFLASH – je responsiveXHTML + CSS 2Fluid layoutInterakcia cez JSCSS frameworky + GRIDHTML 5 + CSS 3Responsive webdesign

Page 7: responsive webdesign - vibration.sk
Page 8: responsive webdesign - vibration.sk

Problém

Page 9: responsive webdesign - vibration.sk

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

Page 10: responsive webdesign - vibration.sk

Prispôsobenie dizajnu podľa veľkosti zariadenia• Tablety• Smart

phones• Robíme tie

weby predsa pre ľudí

Page 11: responsive webdesign - vibration.sk

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

Page 12: responsive webdesign - vibration.sk

Základ

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

Page 13: responsive webdesign - vibration.sk

Čo potrebujeme?

• firebug alebo developer tools v chrome • kalkulačku• papier (axure rp, fireworks, …)• čas• editor

Page 14: responsive webdesign - vibration.sk
Page 15: responsive webdesign - vibration.sk

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?

Page 16: responsive webdesign - vibration.sk

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");

});

Page 17: responsive webdesign - vibration.sk

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;

}

Page 18: responsive webdesign - vibration.sk
Page 19: responsive webdesign - vibration.sk
Page 20: responsive webdesign - vibration.sk

Typografia

Algoritmus … Target / context = result

body{font-size: 100%;

}h1{

font-size:2em; 24px / 12px = 2em}

Page 21: responsive webdesign - vibration.sk

Media

img, embed, object, video{max-width:100%;

}

ie6 img{

width:100%;}

Page 22: responsive webdesign - vibration.sk

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” />

Page 23: responsive webdesign - vibration.sk

Media Queries – Nu skul

• CSS3@media only screen and (max-width: 768px) {

#page {max-width:740px;

}}

Page 24: responsive webdesign - vibration.sk

Media Queries

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

Page 25: responsive webdesign - vibration.sk

Nastavíme viewport

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

Page 26: responsive webdesign - vibration.sk

Komplikácie

• menu• cudzí content – fb, youtube• testovanie – developer tools, zariadenia,

emulátory• background-size – slabá podpora

Page 27: responsive webdesign - vibration.sk

Podpora prehliadačov

• Väčšina prehliadačov <5 rokov• IE - problém

– css3-mediaqueries.js– respond.js

Page 28: responsive webdesign - vibration.sk

Nevýhody

• Užívateľ si nemôže vybrať, ktorú verziu chce vidieť

• Nezmenšuje sa objem prenesených dát

Page 29: responsive webdesign - vibration.sk

Ukážky

• http://hicksdesign.co.uk/• http://vibration.sk• http://patriotband.sk• http://ucimezdravovarit.sk• http://gmail.com• http://calendar.google.com

Page 30: responsive webdesign - vibration.sk

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