Respnsive webdesign (Ivan Potančok)

Responsive webdesign

Ivan Potančok
@ivusko

2000 - 2010
freelance webdesigner
2010 +
CEO @ vibration.sk

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

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

Prispôsobe
nie 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

Respnsive webdesign (Ivan Potančok)

More Related Content

Viewers also liked

Similar to Respnsive webdesign (Ivan Potančok)

More from wcsk

Respnsive webdesign (Ivan Potančok)