• Like
Z praxe mobilního webdesignu (Webexpo 2011)
Upcoming SlideShare
Loading in...5
×

Z praxe mobilního webdesignu (Webexpo 2011)

  • 2,750 views
Uploaded on

Martin is sharing his mobile webdesign experience. Examples include popular Czech mobile website for foodies — m.scuk.cz — and others. …

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?

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,750
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
23
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Z praxe mobilního webdesignuFriday, September 23, 11
  • 2. Martin Michálek Shortcat studio twitter.com/machalFriday, September 23, 11
  • 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. 1 www.e-slovensko.cz „smartphonizace” desktopuFriday, 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 navigaciFriday, 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ánkyFriday, 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.comFriday, September 23, 11
  • 27. Hummer efekt: Z neúsporně vymyšleného úsporné neuděláte. Foto: Hummer.comFriday, September 23, 11
  • 28. Hummery mezi weby vyžadují buď zvláštní mobilní verzi nebo sešrotování. Foto: Hummer.comFriday, September 23, 11
  • 29. Webové HummeryFriday, September 23, 11
  • 30. 2 m.scuk.cz extra mobilní webFriday, September 23, 11
  • 31. Proč zvláštní mobilní Scuk.cz? 1) Technická náročnost desktopu — mapyFriday, September 23, 11
  • 32. Proč zvláštní mobilní Scuk.cz? 2) Jiný způsob použití — geolokaceFriday, September 23, 11
  • 33. 2 Pražská kina jeden web, různé pohledyFriday, September 23, 11
  • 34. BIO OKO: jeden web, více pohledů Tiskárna Stará NokiaFriday, September 23, 11
  • 35. BIO OKO: jeden web, více pohledů SmartphoneFriday, September 23, 11
  • 36. BIO OKO: jeden web, více pohledů TabletFriday, September 23, 11
  • 37. BIO OKO: jeden web, více pohledů DesktopFriday, September 23, 11
  • 38. Výhody jednoho webu 1) Argument proti informačnímu obžerství 2) Jeden web, jedny nákladyFriday, 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 CSSFriday, September 23, 11
  • 41. Vrstvy designu webu nyní Křápy Smartphone Tablet Desktop layout CSS vzhled reset + typo HTML + default CSSFriday, 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/machalFriday, September 23, 11