Page 1
Z praxe mobilního
webdesignu
Friday, September 23, 11
Page 2
Martin MichálekShortcat studio
twitter.com/machal
Friday, September 23, 11
Page 3
e-Slovensko.cz„smartphonizace” desktopu
2
1
3
Mobilní Scukextra mobilní web
Pražská kinajeden web, různé pohledy
Friday, September 23, 11
Page 4
www.e-slovensko.cz„smartphonizace” desktopu
1
Friday, September 23, 11
Page 5
Friday, September 23, 11
Page 6
V čem je problém „desktopových“ webů při prohlížení na mobilech?
?
Friday, September 23, 11
Page 7
Friday, September 23, 11
Page 8
Informační obžerstvíPřebujelý layout Pomalé načítání
123
Problémy desktopového webu při prohlížení na mobilech
Friday, September 23, 11
Page 9
@media screen and (max-width: 480px) { ...}
CSS
Friday, September 23, 11
Page 10
Informační obžerstvíPřebujelý layout Pomalé načítání
123
Problémy desktopového webu při prohlížení na mobilech
Friday, September 23, 11
Page 11
@media screen and (max-width: 480px) {
.zbytne_prvky { display: none; }
}
CSS
Friday, September 23, 11
Page 12
❌
✖
Friday, September 23, 11
Page 13
❌
✖✖
✖✖ ✖✖
Friday, September 23, 11
Page 14
Friday, September 23, 11
Page 15
Informační obžerstvíPřebujelý layout Pomalé načítání
123
Problémy desktopového webu při prohlížení na mobilech
Friday, September 23, 11
Page 16
#content,#side { width: auto; float: none;}
Destrukce layoutuCSS
Friday, September 23, 11
Page 17
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Layout v šířce zařízeníHTML
Friday, September 23, 11
Page 18
Friday, September 23, 11
Page 19
Javascriptem upravíme navigaci
Friday, September 23, 11
Page 20
Friday, September 23, 11
Page 21
Vypadá to hezky jen na první pohled.
Friday, September 23, 11
Page 22
1. problém — rychlost načítání
Friday, September 23, 11
Page 23
2. problém — struktura stránky
Friday, September 23, 11
Page 24
Je možné „desktopové“ weby
zpětně upravit pro mobily?
?
Friday, September 23, 11
Page 25
„Smartphonizovat” půjde jen nejjednodušší weby.
Proč?
TODO: redesign
Friday, September 23, 11
Page 26
Foto: Hummer.com
Friday, September 23, 11
Page 27
Foto: Hummer.com
Hummer efekt:Z neúsporně
vymyšlenéhoúsporné neuděláte.
Friday, September 23, 11
Page 28
Foto: Hummer.com
Hummery mezi weby vyžadují buď zvláštní
mobilní verzi nebosešrotování.
Friday, September 23, 11
Page 29
Webové Hummery
Friday, September 23, 11
Page 30
m.scuk.czextra mobilní web
2
Friday, September 23, 11
Page 31
1) Technická náročnost desktopu — mapy
Proč zvláštní mobilní Scuk.cz?
Friday, September 23, 11
Page 32
2) Jiný způsob použití — geolokace
Proč zvláštní mobilní Scuk.cz?
Friday, September 23, 11
Page 33
Pražská kinajeden web, různé pohledy
2
Friday, September 23, 11
Page 34
Tiskárna
BIO OKO: jeden web, více pohledů
Stará Nokia
Friday, September 23, 11
Page 35
Smartphone
BIO OKO: jeden web, více pohledů
Friday, September 23, 11
Page 36
Tablet
BIO OKO: jeden web, více pohledů
Friday, September 23, 11
Page 37
Desktop
BIO OKO: jeden web, více pohledů
Friday, September 23, 11
Page 38
Výhody jednoho webu
1) Argument proti informačnímu obžerství
2) Jeden web, jedny náklady
Friday, September 23, 11
Page 39
Pro designéry platí „mobile first“. Je to ale správný postup i pro frond-end vývojáře?
?
Friday, September 23, 11
Page 40
vzhled
layout
reset + typo
HTML + default CSS
Desktop
CSS
Vrstvy designu webu dříve
Friday, September 23, 11
Page 41
vzhled
layout
reset + typo
HTML + default CSS
Smartphone TabletKřápy Desktop
Vrstvy designu webu nyníCS
S
Friday, September 23, 11
Page 42
Kdy začít při návrhu webů počítat
s mobilními zařízeními?
?
Friday, September 23, 11
Page 43
Nejpozději 23. 9. 2011.
Friday, September 23, 11
Page 44
To bylo včera.
Friday, September 23, 11
Page 45
Díky!
twitter.com/machal
Friday, September 23, 11