responsive webdesign - vibration.sk
-
Upload
vibrationsk -
Category
Technology
-
view
1.905 -
download
6
description
Transcript of responsive webdesign - vibration.sk
Responsive webdesign
Ivan Potančok@ivusko
2000 - 2010
freelance webdesigner
2010 +
CEO @ vibration.sk
Čo robím
Čo robím
Čo robím
Trendy v histórii
Plain textHTML Tabuľkový layoutFLASH – je responsiveXHTML + CSS 2Fluid layoutInterakcia cez JSCSS frameworky + GRIDHTML 5 + CSS 3Responsive webdesign
Problém
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Prispôsobenie dizajnu podľa veľkosti zariadenia• Tablety• Smart
phones• Robíme tie
weby predsa pre ľudí
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
Základ
• Flexibilný layout založený na gride• Flexibilné obrázky a médiá• Media queries
Čo potrebujeme?
• firebug alebo developer tools v chrome • kalkulačku• papier (axure rp, fireworks, …)• čas• editor
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?
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");
});
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;
}
Typografia
Algoritmus … Target / context = result
body{font-size: 100%;
}h1{
font-size:2em; 24px / 12px = 2em}
Media
img, embed, object, video{max-width:100%;
}
ie6 img{
width:100%;}
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” />
Media Queries – Nu skul
• CSS3@media only screen and (max-width: 768px) {
#page {max-width:740px;
}}
Media Queries
@media screen and (min-device-width: 480px) and (orientation: landscape){ …}
Nastavíme viewport
• <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Komplikácie
• menu• cudzí content – fb, youtube• testovanie – developer tools, zariadenia,
emulátory• background-size – slabá podpora
Podpora prehliadačov
• Väčšina prehliadačov <5 rokov• IE - problém
– css3-mediaqueries.js– respond.js
Nevýhody
• Užívateľ si nemôže vybrať, ktorú verziu chce vidieť
• Nezmenšuje sa objem prenesených dát
Ukážky
• http://hicksdesign.co.uk/• http://vibration.sk• http://patriotband.sk• http://ucimezdravovarit.sk• http://gmail.com• http://calendar.google.com
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