Z praxe mobilního webdesignu (Webexpo 2011)

Z praxe mobilního webdesignuFriday, September 23, 11

Martin Michálek Shortcat studio twitter.com/machalFriday, September 23, 11

e-Slovensko.cz 1 „smartphonizace” desktopu Mobilní Scuk 2 extra mobilní web Pražská kina 3 jeden web, různé pohledyFriday, September 23, 11

1 www.e-slovensko.cz „smartphonizace” desktopuFriday, September 23, 11

Friday, September 23, 11

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

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

SS C @media screen and (max-width: 480px) { ... }Friday, September 23, 11

SS C @media screen and (max-width: 480px) { .zbytne_prvky { display: none; } }Friday, September 23, 11

✖ ❌Friday, September 23, 11

✖ ✖ ❌ ✖ ✖ ✖ ✖Friday, September 23, 11

S S C Destrukce layoutu #content, #side { width: auto; float: none; }Friday, September 23, 11

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

Javascriptem upravíme navigaciFriday, 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 mobily?Friday, September 23, 11

de si gn O DO : re T „Smartphonizovat” půjde jen nejjednodušší weby. Proč?Friday, September 23, 11

Foto: Hummer.comFriday, September 23, 11

Hummer efekt: Z neúsporně vymyšleného úsporné neuděláte. Foto: Hummer.comFriday, September 23, 11

Hummery mezi weby vyžadují buď zvláštní mobilní verzi nebo sešrotování. Foto: Hummer.comFriday, September 23, 11

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 — mapyFriday, September 23, 11

Proč zvláštní mobilní Scuk.cz? 2) Jiný způsob použití — geolokaceFriday, September 23, 11

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í 2) Jeden web, jedny nákladyFriday, September 23, 11

? Pro designéry platí „mobile ﬁrst“. Je to ale správný postup i pro frond-end vývojáře?Friday, September 23, 11

Vrstvy designu webu dříve Desktop layout CSS vzhled reset + typo HTML + default CSSFriday, September 23, 11

Vrstvy designu webu nyní Křápy Smartphone Tablet Desktop layout CSS vzhled reset + typo HTML + default CSSFriday, September 23, 11

? Kdy začít při návrhu webů počítat s mobilními zařízeními?Friday, September 23, 11

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

http://webexpo.cz	168
http://webexpo.cz	168
http://webexpo.net	22
http://webexpo.net	22
https://twitter.com	8
http://twitter.com	8
http://paper.li	2
http://us-w1.rockmelt.com	2
http://www.twylah.com	1
https://si0.twimg.com	1

Z praxe mobilního webdesignu (Webexpo 2011)

by Martin Michálek

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 402

Statistics

Z praxe mobilního webdesignu (Webexpo 2011) Presentation Transcript