Anatomie mobilního webu

144
-1

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
144
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • WML 1998
    XHTML-MP 2001
    iPhone 1st generation 2007
  • HTML5 2004
    Android 2008
    RWD 2010
  • 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>
  • V průměru rychlosti 3G sítí dosahují hodnoty kolem 4 Mbit/s
  • 1MB = 2s
    + 50 http requestu (latence)
    + proxy, firewall (brana operatora)
    + vykresleni, inicializace (slaby procesor)
    Co když jsme navíc v pohybu?
  • WURFL je Device Description Repository (DDR)
  • 19 http dotazů a 250KB kvůli tlačítkům pro FB, Twitter a Google+
  • Anatomie mobilního webu

    1. 1. Anatomie mobilního webu Responsive Design + Server Side Components (RESS) Filip Mareš
    2. 2. (R)evoluce mobilního webu WML XHTML-MP MOBILNÍ VERZE RWD
    3. 3. Evoluce mobilního webu WML XHTML-MP MOBILNÍ VERZE RWD
    4. 4. RWD? Responsive Web Design! • • • • • Fluid grid MediaQueries Flexible images Retina display Zobrazení na výšku/na šířku
    5. 5. RWD řeší spoustu problémů • • • • • Jeden kód Jeden obsah Jeden deployment Jedna URL Jeden web RWD
    6. 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. 7. Máme 5 sekund něčí pozornosti. Dokážeme je smysluplně využít?
    8. 8. Server Side Components! WTF?
    9. 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. 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. 11. RWD je pouhou špičkou ledovce!
    12. 12. RWD je pouhou špičkou ledovce!
    13. 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?
    14. 14. Dotazy?

    ×