Z praxe mobilního
webdesignu
Friday, September 23, 11
Martin MichálekShortcat studio
twitter.com/machal
Friday, September 23, 11
e-Slovensko.cz„smartphonizace” desktopu
2
1
3
Mobilní Scukextra mobilní web
Pražská kinajeden web, různé pohledy
Friday, September 23, 11
www.e-slovensko.cz„smartphonizace” desktopu
1
Friday, September 23, 11
Friday, September 23, 11
V čem je problém „desktopových“ webů při prohlížení na mobilech?
?
Friday, September 23, 11
Friday, September 23, 11
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
@media screen and (max-width: 480px) { ...}
CSS
Friday, September 23, 11
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
@media screen and (max-width: 480px) {
.zbytne_prvky { display: none; }
}
CSS
Friday, September 23, 11
❌
✖
Friday, September 23, 11
❌
✖✖
✖✖ ✖✖
Friday, September 23, 11
Friday, September 23, 11
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
#content,#side { width: auto; float: none;}
Destrukce layoutuCSS
Friday, September 23, 11
<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
Friday, September 23, 11
Javascriptem upravíme navigaci
Friday, September 23, 11
Friday, September 23, 11
Vypadá to hezky jen na první pohled.
Friday, September 23, 11
1. problém — rychlost načítání
Friday, September 23, 11
2. problém — struktura stránky
Friday, September 23, 11
Je možné „desktopové“ weby
zpětně upravit pro mobily?
?
Friday, September 23, 11
„Smartphonizovat” půjde jen nejjednodušší weby.
Proč?
TODO: redesign
Friday, September 23, 11
Foto: Hummer.com
Friday, September 23, 11
Foto: Hummer.com
Hummer efekt:Z neúsporně
vymyšlenéhoúsporné neuděláte.
Friday, September 23, 11
Foto: Hummer.com
Hummery mezi weby vyžadují buď zvláštní
mobilní verzi nebosešrotování.
Friday, September 23, 11
Webové Hummery
Friday, September 23, 11
m.scuk.czextra mobilní web
2
Friday, September 23, 11
1) Technická náročnost desktopu — mapy
Proč zvláštní mobilní Scuk.cz?
Friday, September 23, 11
2) Jiný způsob použití — geolokace
Proč zvláštní mobilní Scuk.cz?
Friday, September 23, 11
Pražská kinajeden web, různé pohledy
2
Friday, September 23, 11
Tiskárna
BIO OKO: jeden web, více pohledů
Stará Nokia
Friday, September 23, 11
Smartphone
BIO OKO: jeden web, více pohledů
Friday, September 23, 11
Tablet
BIO OKO: jeden web, více pohledů
Friday, September 23, 11
Desktop
BIO OKO: jeden web, více pohledů
Friday, September 23, 11
Výhody jednoho webu
1) Argument proti informačnímu obžerství
2) Jeden web, jedny náklady
Friday, September 23, 11
Pro designéry platí „mobile first“. Je to ale správný postup i pro frond-end vývojáře?
?
Friday, September 23, 11
vzhled
layout
reset + typo
HTML + default CSS
Desktop
CSS
Vrstvy designu webu dříve
Friday, September 23, 11
vzhled
layout
reset + typo
HTML + default CSS
Smartphone TabletKřápy Desktop
Vrstvy designu webu nyníCS
S
Friday, September 23, 11
Kdy začít při návrhu webů počítat
s mobilními zařízeními?
?
Friday, September 23, 11
Nejpozději 23. 9. 2011.
Friday, September 23, 11
To bylo včera.
Friday, September 23, 11
Díky!
twitter.com/machal
Friday, September 23, 11
