Z praxe mobilního webdesignu (Webexpo 2011)

Z praxe mobilního

webdesignu

Friday, September 23, 11

Martin MichálekShortcat studio

twitter.com/machal


e-Slovensko.cz„smartphonizace” desktopu

2

1

3

Mobilní Scukextra mobilní web

Pražská kinajeden web, různé pohledy


www.e-slovensko.cz„smartphonizace” desktopu

1



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

?



Informační obžerstvíPřebujelý layout Pomalé načítání

123

Problémy desktopového webu při prohlížení na mobilech


@media screen and (max-width: 480px) { ...}

CSS



123



@media screen and (max-width: 480px) {

.zbytne_prvky { display: none; }

}

CSS


❌

✖


❌

✖✖

✖✖ ✖✖




123



#content,#side { width: auto; float: none;}

Destrukce layoutuCSS


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Layout v šířce zařízeníHTML



Javascriptem upravíme navigaci



Vypadá to hezky jen na první pohled.


1. problém — rychlost načítání


2. problém — struktura stránky


Je možné „desktopové“ weby

zpětně upravit pro mobily?

?


„Smartphonizovat” půjde jen nejjednodušší weby.

Proč?

TODO: redesign


Foto: Hummer.com


Foto: Hummer.com

Hummer efekt:Z neúsporně

vymyšlenéhoúsporné neuděláte.


Foto: Hummer.com

Hummery mezi weby vyžadují buď zvláštní

mobilní verzi nebosešrotování.


Webové Hummery


m.scuk.czextra mobilní web

2


1) Technická náročnost desktopu — mapy

Proč zvláštní mobilní Scuk.cz?


2) Jiný způsob použití — geolokace

Proč zvláštní mobilní Scuk.cz?


Pražská kinajeden web, různé pohledy

2


Tiskárna

BIO OKO: jeden web, více pohledů

Stará Nokia


Smartphone



Tablet



Desktop



Výhody jednoho webu

1) Argument proti informačnímu obžerství

2) Jeden web, jedny náklady


Pro designéry platí „mobile first“. Je to ale správný postup i pro frond-end vývojáře?

?


vzhled

layout

reset + typo

HTML + default CSS

Desktop

CSS

Vrstvy designu webu dříve


vzhled

layout

reset + typo

HTML + default CSS

Smartphone TabletKřápy Desktop

Vrstvy designu webu nyníCS

S


Kdy začít při návrhu webů počítat

s mobilními zařízeními?

?


Nejpozději 23. 9. 2011.


To bylo včera.


Díky!

twitter.com/machal


Z praxe mobilního webdesignu (Webexpo 2011)

Design