Martin is sharing his mobile webdesign experience. Examples include popular Czech mobile website for foodies — m.scuk.cz — and others. He will try to answer these questions: — Why "desktop" websites fail on mobile? — Can we adapt "desktop" websites for mobile? — Designers say "mobile first" and it is true. But is it true for front-end developers?

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

5. Friday, September 23, 11

6. ?
V čem je problém
„desktopových“ webů při
prohlížení na mobilech?
Friday, September 23, 11

7. 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

14. 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

18. Friday, September 23, 11

19. Javascriptem upravíme navigaci
Friday, September 23, 11

20. Friday, September 23, 11

21. Vypadá to hezky
jen na první pohled.
Friday, September 23, 11

22. 1. problém — rychlost načítání
Friday, September 23, 11

23. 2. problém — struktura stránky
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

26. Foto: Hummer.com
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

29. Webové Hummery
Friday, September 23, 11

30. 2
m.scuk.cz
extra mobilní web
Friday, September 23, 11

31. Proč zvláštní mobilní Scuk.cz?
1) Technická náročnost
desktopu — mapy
Friday, September 23, 11

32. Proč zvláštní mobilní Scuk.cz?
2) Jiný způsob použití
— geolokace
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

36. BIO OKO: jeden web, více pohledů
Tablet
Friday, September 23, 11

37. BIO OKO: jeden web, více pohledů
Desktop
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

43. Nejpozději 23. 9. 2011.
Friday, September 23, 11

44. To bylo včera.
Friday, September 23, 11

45. Díky!
twitter.com/machal
Friday, September 23, 11