SlideShare une entreprise Scribd logo
1  sur  14
Anatomie mobilního webu
Responsive Design + Server
Side Components (RESS)

Filip Mareš
(R)evoluce mobilního webu

WML

XHTML-MP

MOBILNÍ
VERZE

RWD
Evoluce mobilního webu

WML

XHTML-MP

MOBILNÍ
VERZE

RWD
RWD? Responsive Web Design!
•
•
•
•
•

Fluid grid
MediaQueries
Flexible images
Retina display
Zobrazení na výšku/na šířku
RWD řeší spoustu problémů
•
•
•
•
•

Jeden kód
Jeden obsah
Jeden deployment
Jedna URL
Jeden web

RWD
Trocha statistiky
• 71% uživatelů očekává načtení webu na
mobilu minimálně stejně rychle jako na
desktopu.
• 74% uživatelů opustí načítanou stránku na
mobilu, pokud se nezobrazí do 5 sekund.
• 86% responsivních webů stahuje stejný objem
dat na mobilu, jako na desktopu.
• Průměrná velikost stránky je 1MB
Máme 5 sekund něčí pozornosti.
Dokážeme je smysluplně využít?
Server Side Components! WTF?
Server Side Components
• Detekce zařízení na straně serveru a její
zpřístupnění klientovi
• Rozdílná šablona pro hlavičku a patičku
• Parametrizované CSS
• Parametrizované JavaScripty
• Parametrizované obrázky
Další možnosti optimalizace
•
•
•
•

Větší využití vektorové grafiky
CSS3 efekty a transformace – HW akcelerace
Dotahování obsahu na vyžádání
Využití JavaScriptových API určených primárně
pro mobilní zařízení (geolocation, offline)
• Nepoužívat dynamická tlačítka sociálních sítí
RWD je pouhou špičkou ledovce!
RWD je pouhou špičkou ledovce!
Dejme lidem to, co chtějí!
• Proč by chtěl někdo navštívit web přes mobil?
• Jak můžeme uživateli na cestě zajistit lepší
UX?
• Proč by mohl někdo chtít navštívit web z herní
konzole / TV / auta / ledničky?
• Co by mohl uživatel tabletu dělat na webu
odlišně od desktopového?
• A jak to všechno skloubit dohromady v rámci
jednoho projektu?
Dotazy?

Contenu connexe

Similaire à Anatomie mobilního webu

Similaire à Anatomie mobilního webu (20)

TNPW2-2016-05
TNPW2-2016-05TNPW2-2016-05
TNPW2-2016-05
 
Seznam na mobilu
Seznam na mobiluSeznam na mobilu
Seznam na mobilu
 
TNPW2-2014-05
TNPW2-2014-05TNPW2-2014-05
TNPW2-2014-05
 
TNPW2-2014-02
TNPW2-2014-02TNPW2-2014-02
TNPW2-2014-02
 
TNPW2-2016-02
TNPW2-2016-02TNPW2-2016-02
TNPW2-2016-02
 
TNPW2-2013-02
TNPW2-2013-02TNPW2-2013-02
TNPW2-2013-02
 
TNPW2-2013-07
TNPW2-2013-07TNPW2-2013-07
TNPW2-2013-07
 
Responzivní webdesign (pro MS Fest)
Responzivní webdesign (pro MS Fest)Responzivní webdesign (pro MS Fest)
Responzivní webdesign (pro MS Fest)
 
TNPW2-2012-02
TNPW2-2012-02TNPW2-2012-02
TNPW2-2012-02
 
Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)
 
SEO v roce 2017 – technikálie
SEO v roce 2017 – technikálieSEO v roce 2017 – technikálie
SEO v roce 2017 – technikálie
 
TNPW2-2016-07
TNPW2-2016-07TNPW2-2016-07
TNPW2-2016-07
 
State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)
 
TNPW2-2013-09
TNPW2-2013-09TNPW2-2013-09
TNPW2-2013-09
 
(Téměř) Vektorový web
(Téměř) Vektorový web(Téměř) Vektorový web
(Téměř) Vektorový web
 
TNPW2-2012-07
TNPW2-2012-07TNPW2-2012-07
TNPW2-2012-07
 
Implementace cloudových řešení hris
Implementace cloudových řešení hrisImplementace cloudových řešení hris
Implementace cloudových řešení hris
 
TNPW2-2012-05
TNPW2-2012-05TNPW2-2012-05
TNPW2-2012-05
 
Joomla!
Joomla!Joomla!
Joomla!
 
TNPW2-2013-05
TNPW2-2013-05TNPW2-2013-05
TNPW2-2013-05
 

Anatomie mobilního webu

  • 1. Anatomie mobilního webu Responsive Design + Server Side Components (RESS) Filip Mareš
  • 4. RWD? Responsive Web Design! • • • • • Fluid grid MediaQueries Flexible images Retina display Zobrazení na výšku/na šířku
  • 5. RWD řeší spoustu problémů • • • • • Jeden kód Jeden obsah Jeden deployment Jedna URL Jeden web RWD
  • 6. Trocha statistiky • 71% uživatelů očekává načtení webu na mobilu minimálně stejně rychle jako na desktopu. • 74% uživatelů opustí načítanou stránku na mobilu, pokud se nezobrazí do 5 sekund. • 86% responsivních webů stahuje stejný objem dat na mobilu, jako na desktopu. • Průměrná velikost stránky je 1MB
  • 7. Máme 5 sekund něčí pozornosti. Dokážeme je smysluplně využít?
  • 9. Server Side Components • Detekce zařízení na straně serveru a její zpřístupnění klientovi • Rozdílná šablona pro hlavičku a patičku • Parametrizované CSS • Parametrizované JavaScripty • Parametrizované obrázky
  • 10. Další možnosti optimalizace • • • • Větší využití vektorové grafiky CSS3 efekty a transformace – HW akcelerace Dotahování obsahu na vyžádání Využití JavaScriptových API určených primárně pro mobilní zařízení (geolocation, offline) • Nepoužívat dynamická tlačítka sociálních sítí
  • 11. RWD je pouhou špičkou ledovce!
  • 12. RWD je pouhou špičkou ledovce!
  • 13. Dejme lidem to, co chtějí! • Proč by chtěl někdo navštívit web přes mobil? • Jak můžeme uživateli na cestě zajistit lepší UX? • Proč by mohl někdo chtít navštívit web z herní konzole / TV / auta / ledničky? • Co by mohl uživatel tabletu dělat na webu odlišně od desktopového? • A jak to všechno skloubit dohromady v rámci jednoho projektu?

Notes de l'éditeur

  1. WML 1998 XHTML-MP 2001 iPhone 1st generation 2007
  2. HTML5 2004 Android 2008 RWD 2010
  3. CSS: background-size JavaScript: retina.js HTML: Responsive images comunity group <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>
  4. V průměru rychlosti 3G sítí dosahují hodnoty kolem 4 Mbit/s
  5. 1MB = 2s + 50 http requestu (latence) + proxy, firewall (brana operatora) + vykresleni, inicializace (slaby procesor) Co když jsme navíc v pohybu?
  6. WURFL je Device Description Repository (DDR)
  7. 19 http dotazů a 250KB kvůli tlačítkům pro FB, Twitter a Google+