Z praxe mobilního webdesignu (Webexpo 2011)

4,253 views

Published on

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?

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,253
On SlideShare
0
From Embeds
0
Number of Embeds
310
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Z praxe mobilního webdesignu (Webexpo 2011)

  1. 1. Z praxe mobilního webdesignuFriday, September 23, 11
  2. 2. Martin Michálek Shortcat studio twitter.com/machalFriday, September 23, 11
  3. 3. e-Slovensko.cz 1 „smartphonizace” desktopu Mobilní Scuk 2 extra mobilní web Pražská kina 3 jeden web, různé pohledyFriday, September 23, 11
  4. 4. 1 www.e-slovensko.cz „smartphonizace” desktopuFriday, September 23, 11
  5. 5. Friday, September 23, 11
  6. 6. ? V čem je problém „desktopových“ webů při prohlížení na mobilech?Friday, September 23, 11
  7. 7. Friday, September 23, 11
  8. 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. 9. SS C @media screen and (max-width: 480px) {  ... }Friday, September 23, 11
  10. 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. 11. SS C @media screen and (max-width: 480px) { .zbytne_prvky { display: none; } }Friday, September 23, 11
  12. 12. ✖ ❌Friday, September 23, 11
  13. 13. ✖ ✖ ❌ ✖ ✖ ✖ ✖Friday, September 23, 11
  14. 14. Friday, September 23, 11
  15. 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. 16. S S C Destrukce layoutu #content, #side { width: auto; float: none; }Friday, September 23, 11
  17. 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. 18. Friday, September 23, 11
  19. 19. Javascriptem upravíme navigaciFriday, September 23, 11
  20. 20. Friday, September 23, 11
  21. 21. Vypadá to hezky jen na první pohled.Friday, September 23, 11
  22. 22. 1. problém — rychlost načítáníFriday, September 23, 11
  23. 23. 2. problém — struktura stránkyFriday, September 23, 11
  24. 24. ? Je možné „desktopové“ weby zpětně upravit pro mobily?Friday, September 23, 11
  25. 25. de si gn O DO : re T „Smartphonizovat” půjde jen nejjednodušší weby. Proč?Friday, September 23, 11
  26. 26. Foto: Hummer.comFriday, September 23, 11
  27. 27. Hummer efekt: Z neúsporně vymyšleného úsporné neuděláte. Foto: Hummer.comFriday, September 23, 11
  28. 28. Hummery mezi weby vyžadují buď zvláštní mobilní verzi nebo sešrotování. Foto: Hummer.comFriday, September 23, 11
  29. 29. Webové HummeryFriday, September 23, 11
  30. 30. 2 m.scuk.cz extra mobilní webFriday, September 23, 11
  31. 31. Proč zvláštní mobilní Scuk.cz? 1) Technická náročnost desktopu — mapyFriday, September 23, 11
  32. 32. Proč zvláštní mobilní Scuk.cz? 2) Jiný způsob použití — geolokaceFriday, September 23, 11
  33. 33. 2 Pražská kina jeden web, různé pohledyFriday, September 23, 11
  34. 34. BIO OKO: jeden web, více pohledů Tiskárna Stará NokiaFriday, September 23, 11
  35. 35. BIO OKO: jeden web, více pohledů SmartphoneFriday, September 23, 11
  36. 36. BIO OKO: jeden web, více pohledů TabletFriday, September 23, 11
  37. 37. BIO OKO: jeden web, více pohledů DesktopFriday, September 23, 11
  38. 38. Výhody jednoho webu 1) Argument proti informačnímu obžerství 2) Jeden web, jedny nákladyFriday, September 23, 11
  39. 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. 40. Vrstvy designu webu dříve Desktop layout CSS vzhled reset + typo HTML + default CSSFriday, September 23, 11
  41. 41. Vrstvy designu webu nyní Křápy Smartphone Tablet Desktop layout CSS vzhled reset + typo HTML + default CSSFriday, September 23, 11
  42. 42. ? Kdy začít při návrhu webů počítat s mobilními zařízeními?Friday, September 23, 11
  43. 43. Nejpozději 23. 9. 2011.Friday, September 23, 11
  44. 44. To bylo včera.Friday, September 23, 11
  45. 45. Díky! twitter.com/machalFriday, September 23, 11

×