Z praxe                            mobilního                           webdesignuFriday, September 23, 11
Martin Michálek                             Shortcat studio                           twitter.com/machalFriday, September ...
e-Slovensko.cz            1              „smartphonizace” desktopu                           Mobilní Scuk           2     ...
1                              www.e-slovensko.cz                           „smartphonizace” desktopuFriday, September 23,...
Friday, September 23, 11
?                               V čem je problém                           „desktopových“ webů při                        ...
Friday, September 23, 11
Problémy desktopového webu             při prohlížení na mobilech                           1 Informační obžerství        ...
SS      C               @media screen and (max-width: 480px) {                  ...               }Friday, September 23, 11
Problémy desktopového webu             při prohlížení na mobilech                           1 Informační obžerství        ...
SS      C             @media screen and (max-width: 480px) {                 .zbytne_prvky {                    display: n...
✖                           ❌Friday, September 23, 11
✖                           ✖                               ❌                            ✖                             ✖  ...
Friday, September 23, 11
Problémy desktopového webu             při prohlížení na mobilech                           1 Informační obžerství        ...
S S       C                           Destrukce layoutu              #content,              #side {                width: ...
L        T M    H                           Layout v šířce zařízení        <meta          name="viewport"          content...
Friday, September 23, 11
Javascriptem upravíme navigaciFriday, September 23, 11
Friday, September 23, 11
Vypadá to hezky                           jen na první pohled.Friday, September 23, 11
1. problém — rychlost načítáníFriday, September 23, 11
2. problém — struktura stránkyFriday, September 23, 11
?                            Je možné                        „desktopové“ weby                    zpětně upravit pro mobil...
de si gn                                 O DO : re                                T                           „Smartphoniz...
Foto: Hummer.comFriday, September 23, 11
Hummer efekt:                              Z neúsporně                             vymyšleného                           ú...
Hummery mezi weby                           vyžadují buď zvláštní                            mobilní verzi nebo           ...
Webové HummeryFriday, September 23, 11
2                               m.scuk.cz                           extra mobilní webFriday, September 23, 11
Proč zvláštní mobilní Scuk.cz?                           1) Technická náročnost                              desktopu — ma...
Proč zvláštní mobilní Scuk.cz?                           2) Jiný způsob použití                                — geolokace...
2                                 Pražská kina                           jeden web, různé pohledyFriday, September 23, 11
BIO OKO: jeden web, více pohledů                             Tiskárna         Stará NokiaFriday, September 23, 11
BIO OKO: jeden web, více pohledů                                      SmartphoneFriday, September 23, 11
BIO OKO: jeden web, více pohledů                                        TabletFriday, September 23, 11
BIO OKO: jeden web, více pohledů                                       DesktopFriday, September 23, 11
Výhody jednoho webu                              1) Argument proti                           informačnímu obžerství       ...
?                             Pro designéry platí                           „mobile first“. Je to ale                      ...
Vrstvy designu webu dříve                                   Desktop                                      layout   CSS     ...
Vrstvy designu webu nyní                           Křápy      Smartphone     Tablet            Desktop                    ...
?                                Kdy začít při                             návrhu webů počítat                           s...
Nejpozději 23. 9. 2011.Friday, September 23, 11
To bylo včera.Friday, September 23, 11
Díky!                           twitter.com/machalFriday, September 23, 11
Upcoming SlideShare
Loading in …5
×

Z praxe mobilního webdesignu (Webexpo 2011)

3,631 views
3,520 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
3,631
On SlideShare
0
From Embeds
0
Number of Embeds
306
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

×