Mobilní webMobilní web
Zdeněk Zicha
@zdenekzicha
bb
P č děl t b dProč dělat web do m bil ?mobilu?
Zb t k ětZbytek světa
“Mobilní trh západní Evrop
j d k A i kýje dva roky za Americkým.
forrester.com, 19.3.2012,
Kde je asi ten český?
py
””
M bil í ži t lé SMobilní uživatelé Seeznamu
Web pro mobilní intp
budoucnost
ternet má
M bil í tř díMobilní prostředí
Proh
Operačn
VýrobcVýrobc
lížeč
í systém
ce HWce HW
Inspirace @ppk
Jak přistupovat k náp p
webu
ávrhu mobilního
M bil fi tMobile first
Lukke Wroblewski
M bil fi tMobile first
• Růst => Příležitost
O í S tř dě• Omezení => Soustředěn
• Schopnosti => InovaceSchopnosti Inovace
íní
M bil fi t OMobile first - Omeze
N tí á tř ditNutí nás soustředit s
íení
t d t t ése na to podstatné
M bil fi t S hMobile first - Schop
• API operačních systému
GPS• GPS
• ......
tipnosti
M bil fi t i ři ýMobile first i při výv jivoji
K t t kt é jKontext ve kterém jj ží li bjsme používali web
M bil í k t tMobilní kontext
SSuper.cz na pc a na bila mobilu
Vý j bil íhVývoj mobilního webebu
W b f jWeb co funguje na
• Nejjednodužší řešení
N í č é ž t b d• Není zaručené, že to bud
• Doba načítáníDoba načítání
• Použitelnost
bilmobilu
d f tde fungovat
S t t á bilSamostatná mobiln
• Poměrně jednoduché řeš
Při ů b jh ší• Přizpůsobeno nejhorším
íní verze
šení
u
Chytrá
bil ímobilní
verzeverze
Složité řešení
Ná č é iNáročné na inf t ktnfrastrukturu
Stránka se genStránka se gen
schopností telefschopností telef
eruje podleeruje podle
fonufonu
J k t f j SJak to funguje v Se
Co je to za zařízení?
Proxy DUživatel
Mobil
Desktop nebo tabletDesktop nebo tablet
eznamu
Detekce Rendrování
R iResponsive
• Na první pohled jednodu
J d b h• Jeden obsah
• Omezená podpora zařízeOmezená podpora zaříze
uché řešení
eníení
N i í lNe responzivní, ale d ti íe adaptivní
Zdroj: bradfrost.com
RESSRESS
RESSRESS
• Responsive v kontextu
P á ůž l• Poznáme a můžeme ovl
stránka
css
stránka
obsah
JavaS
Kolik obsahu
i it j k k líivnit jak se vykreslí …
obrázkyobrázky
videa
cript
videa
fontfont
Web Mobilní verze
Náročnost na
vývoj :) :)
Podpora
telefonů :( :( /:)telefonů :( :( /:)
D t áDatová
náročnost
:( :)(
Požadavky na
obsah
:) :(
Chytrá mobilní
verze
RWD RESS
:( :) :(
:) :( /:) :):) :( /:) :)
:(
:)
:(
:)) )
(
:( :)
:(
C j á tCo je správna cesta
• Cestu by neměl určovat
potřeby produktupotřeby produktu.
?a?
technologický trend, ale
Děkuji za pozornDěkuji za pozorn
@zdenekzicha
nostnost…