Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Z praxe mobilního webdesignu (Webexpo 2011)

4,391 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
  • Be the first to comment

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

×