Mais conteúdo relacionado Mais de Martin Michálek (20) Z praxe mobilního webdesignu (Webexpo 2011)1. Z praxe
mobilního
webdesignu
Friday, September 23, 11
2. Martin Michálek
Shortcat studio
twitter.com/machal
Friday, September 23, 11
3. e-Slovensko.cz
1 „smartphonizace” desktopu
Mobilní Scuk
2 extra mobilní web
Pražská kina
3 jeden web, různé pohledy
Friday, September 23, 11
4. 1
www.e-slovensko.cz
„smartphonizace” desktopu
Friday, September 23, 11
6. ?
V čem je problém
„desktopových“ webů při
prohlížení na mobilech?
Friday, September 23, 11
8. Problémy desktopového webu
při prohlížení na mobilech
1 Informační obžerství
2 Přebujelý layout
3 Pomalé načítání
Friday, September 23, 11
9. SS
C
@media screen and (max-width: 480px) {
...
}
Friday, September 23, 11
10. Problémy desktopového webu
při prohlížení na mobilech
1 Informační obžerství
2 Přebujelý layout
3 Pomalé načítání
Friday, September 23, 11
11. SS
C
@media screen and (max-width: 480px) {
.zbytne_prvky {
display: none;
}
}
Friday, September 23, 11
12. ✖
❌
Friday, September 23, 11
13. ✖
✖
❌
✖
✖
✖ ✖
Friday, September 23, 11
15. Problémy desktopového webu
při prohlížení na mobilech
1 Informační obžerství
2 Přebujelý layout
3 Pomalé načítání
Friday, September 23, 11
16. S S
C
Destrukce layoutu
#content,
#side {
width: auto;
float: none;
}
Friday, September 23, 11
17. L
T M
H
Layout v šířce zařízení
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0, maximum-scale=1.0">
Friday, September 23, 11
24. ?
Je možné
„desktopové“ weby
zpětně upravit pro mobily?
Friday, September 23, 11
25. de si gn
O DO : re
T
„Smartphonizovat” půjde
jen nejjednodušší weby.
Proč?
Friday, September 23, 11
27. Hummer efekt:
Z neúsporně
vymyšleného
úsporné neuděláte.
Foto: Hummer.com
Friday, September 23, 11
28. Hummery mezi weby
vyžadují buď zvláštní
mobilní verzi nebo
sešrotování.
Foto: Hummer.com
Friday, September 23, 11
30. 2
m.scuk.cz
extra mobilní web
Friday, September 23, 11
33. 2
Pražská kina
jeden web, různé pohledy
Friday, September 23, 11
34. BIO OKO: jeden web, více pohledů
Tiskárna Stará Nokia
Friday, September 23, 11
35. BIO OKO: jeden web, více pohledů
Smartphone
Friday, September 23, 11
38. Výhody jednoho webu
1) Argument proti
informačnímu obžerství
2) Jeden web,
jedny náklady
Friday, September 23, 11
39. ?
Pro designéry platí
„mobile first“. Je to ale
správný postup i pro
frond-end vývojáře?
Friday, September 23, 11
40. Vrstvy designu webu dříve
Desktop
layout
CSS
vzhled
reset + typo
HTML + default CSS
Friday, September 23, 11
41. Vrstvy designu webu nyní
Křápy Smartphone Tablet Desktop
layout
CSS
vzhled
reset + typo
HTML + default CSS
Friday, September 23, 11
42. ?
Kdy začít při
návrhu webů počítat
s mobilními zařízeními?
Friday, September 23, 11
45. Díky!
twitter.com/machal
Friday, September 23, 11