HTML5 cross-platform and device development: web app per tutti gli schermi

HTML5 cross-device:
Web apps per tutti gli schermi

Marco Casario
CTO Comtaste
www.linkedin.com/in/marcocasario

martedì 29 gennaio 13

Chi sono
Marco Casario
CTO Comtaste
www.linkedin.com/in/marcocasario

Copyright 2012 Comtaste S.r.l. 2


I miei ultimi libri



I miei corsi
Rich Web Apps con HTML5

training.codemotion.it



Case Studies


Progetto BANCA D'ITALIA

Copyright 2012 Comtaste S.r.l. - CONFIDENZIALE - 9


Progetto Noemalife – Galileo Mobile


Progetto Poste Italiane


Cross platform & device Strategy


Le opzioni
RESPONSIVE NATIVO
Siti d’informazione e blogs Softwares

Portfolio Videogiochi

Magazine Finanza

WEB STORE

OTTIMIZZATO IBRIDO
Softwares
Retail
Videogiochi
Search
Multimedia
Software As a Service

Copyright 2012 Comtaste S.r.l. - CONFIDENZIALE - 15


The Boston Globe



Lufthansa Airline



NETFLIX



Responsive Web Apps


Deﬁnizione (Wikipedia)

Responsive web design (often abbreviated to RWD) is an approach to web design in
which a site is crafted to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a wide range of
devices (from desktop computer monitors to mobile phones).



Elementi di una Responsive Web App

LAYOUT PATTERNS

MEDIA QUERIES

VIEWPORT

ALTRE CONSIDERAZIONI



Layout Patterns – Le Griglie

Il design si adatta al comportamento dell’utente in base
alla dimensione dello schermo, la piattaforma e
l’orientamento attraverso una serie di griglie



Layout Patterns - Tipologie



Layout Patterns



Layout Patterns – Grid Generator



Media Queries

Sviluppate dal W3C sull’esperienza dei media types

Permettono un controllo granulare degli stili

Con le Media Queries puoi controllare:
•Larghezza e altezza della ﬁnestra del browser
•Larghezza e altezza del device
•Orientamento (landscape or portrait mode)
•Risoluzione



Media Queries – Internal CSS
@media only screen and (max-device-width: 480px) {
    div#content {
        width: 400px;
    }

    div#header {
        background-image: url(media-queries-phone.jpg);
        height: 85px;
        position: relative;
    }

    div#header h1 {
        font-size: 120%;
    }



Media Queries – External CSS

<link rel="stylesheet" type="text/css"
media="only screen and (max-device-width: 480px)“
href=“smartphones.css" />



Media Queries – Conditions

@media only screen and (min-device-width: 320px) and (max-
device-width: 480px) {

/* iPhone, Android rules here */

}



Media Queries – Conditions

@media only screen and (device-width: 768px) and
(orientation: landscape)

{
/* rules for iPad in landscape orientation */
}



Media Queries – Retina Display

Con l’introduzione dei Retina Display bisogna tener
conto anche di queste risoluzioni attraverso la proprietà
media query -webkit-device-pixel-ratio media query:

<link rel="stylesheet"
media="only screen and -webkit-min-device-pixel-ratio: 2"
href="highres.css">



Media Queries – Testing
http://protoﬂuid.com



Viewport

Introdotto da Apple

Suggerisce la viewport iniziale, lo zoom e la risoluzione

Questo perchè Safari di default mostra una versione a
980px di larghezza della pagina web anche se il layout è
più stretto.



Viewport

<meta name="viewport" content="width=device-width" />

Con questo tag forzo Safari a “ﬁdarsi” del mio layout e a
non applicare lo zoom.



Responsive Frameworks



Esistono già diverse decine di Responsive Frameworks
che aiutano a:

• Creare griglie ﬂuide
• Gestire elementi multimediali
• Generare Media Queries a breakpoints stabiliti



Responsive Grid System
http://responsive.gs/



Foundation 3
http://foundation.zurb.com/



YAML 4
http://www.yaml.de/



Bootstrap
http://twitter.github.com/bootstrap/



Mobile Boilerplate
http://html5boilerplate.com/mobile/



Skeleton
http://www.getskeleton.com/



Testing & Mesuring


Browsers
Browsers con remote tools:

• Opera Mini con DragonFly
• Chrome Developer Tools
• BlackBerry browser per Playbook



Risoluzione – Display alta densità

I device di ultima generazione creano molti problemi e
possono renderizzare male le immagini.

Questo perchè 1 px in CSS corrisponde a parecchi
pixels sul device.

Tipicamente questi device hanno un PPI (pixels per inch)
superiore ai 160




Per gestire le immagini per questi tipi di dispositivi si
utilizza uno Scale factor o DPR (Device Pixel Ratio)

Si calcola in questo modo:

Device Pixels / CSS Pixels

Il risultato di dispositivi retina per Apple è 2x
per Android è 1.5x




Perchè supportare questi dispositivi ?




Come si gestisce questo problema ?

Utilizzando le Responsive Images o usando immagini più
grandi e forzando la loro dimensione con l’attributo
width.




Altre regole da seguire:

- Usare dove possibile CSS3 e Web Fonts
- Usare Icon Fonts
- Usare SVG per la graﬁca




Fate attenzione a:

- uso della bandwidth
- supporto dei browser di vecchia generazione



Adaptive Images
Adaptive Images detects your visitor's screen size and
automatically creates, caches, and delivers device
appropriate re-scaled versions of your web page's
embeded HTML images.



Adaptive Images - W3C
Esistono già diverse soluzioni ed approcci al problema,
anche se sono articolate e non sempre risolvono
interamente il problema.

Esiste un progetto standard del W3C ma che ancora non
è supportato dai browser (dati di Novembre 2012)

www.responsiveimages.org



Adaptive Images – Picture tag
<picture alt="Cat Dancing">

<source media="(min-width: 45em)" srcset="large-1.jpg
1x, large-2.jpg 2x">

<source media="(min-width: 18em)" srcset="med-1.jpg
1x, med-2.jpg 2x">

<source srcset="small-1.jpg 1x, small-2.jpg 2x">

<img src="/small-1.jpg">
</picture>



Adaptive Images – CSS3
#selector {

        background-image: url(no-image-set.png);

        background-image:
-webkit-image-set (url(myimage.jpg) 1x,
url(myimage-hires.jpg) 2x);

        /* other preﬁxes for -moz, -o and -ms go here */





Adaptive Images

http://adaptive-images.com/


Adaptive Images – Pictureﬁll
<div data-picture data-alt=“Cambodia image">

<div data-src="small.jpg"></div>

<div data-src="medium.jpg" data-media="(min-width:
400px)"></div>
<div data-src="large.jpg" data-media="(min-width:
800px)"></div>
<div data-src="extralarge.jpg" data-media="(min-width:
1000px)"></div>

https://github.com/scottjehl/picturefill



Adaptive Images
Attenzione all’uso di responsive images:

Diﬀerenti tipi di immagine richiedono diﬀerenti tipi di
risoluzioni, a scapito della banda richiesta.

Es.
una avatar image (di piccole dimensioni) assume i
seguenti pesi:
1x = 58Kb
2.x = 188Kb

Soluzione: usare immagini a 1.5x



Adaptive Images
Il consiglio è quello di cercare di servire solo una
risoluzione per le immagini.



Emulatori

Ne esistono tantissimi, molti dei quali gratuiti.

Sono utili come prima fase di testing e non possono
essere considerati aﬃdabili al 100%

http://www.mobilexweb.com/emulators



Connessione – Detect client side

W3C Network Information API: provides an interface for
Web Applications to access the underlying network
information (connection info) of the device.

Usa la proprietà navigator.connection.type che ritorna
WIFI, CELL_2G, CELL_3G

if
(navigator.connection.type==navigator.connection.WIFI)
{}



Connessione – Detect server side

Usa le informazioni nell’header

Intercetta il carrier usando Massive's Operator
Identiﬁcation Platform

http://werwar.com/



HTTP Testing – Bandwidth throttling



Redirect – Do not !

Evitare i redirect

Il sito sarà più SEO-friendly

Alcuni browser mobile possono presentare dei problemi



Gestures – Touch not Click

I device touch hanno un ritardo nel click tra i 300 e i
500 ms prima di essere eseguiti !

Utilizza l’evento onTouchEvent (datatype ACTION_UP)

Attenzione all’evento onTouchStart perchè a volte il tap
risulta troppo responsive ma causa lo scrolling ad essere
inusabile.



Gli ultimi consigli

Eﬀettua il defer del codice dopo l’evento onload

Se hai molto contenuto da caricare usa un loading
custom

Utilizza tecniche di server-side detection

Parsare Javascript richiede tempo (da 1ms a 100ms per
1Kb)



Gli ultimi consigli

Ti serve veramente un framework ?

Jquery impiega 8 secondi ad essere parsato su alcuni
dispositivi.



Gli ultimi consigli

Jquery Mobile non è un piccolo
framework, è un UI framework ed usa il
core di Jquery.



Gli ultimi consigli

Usa micro frameworks o creati le tue mini
libraries

XUI, zepto.js, microjs



Gli ultimi consigli

Se usi JSON (dovresti) ricorda che il
JSON.parse è quasi 2 volte più veloce
della funzione eval()



Gli ultimi consigli

Usare l’application cache:

<html manifest="example.appcache“>



Gli ultimi consigli

Usare il local storage

Ricorda che lo storage di stringhe è 2 volte più veloce
dello tarage di oggetti

Su mobile puoi considerare ﬁno a 2 Mb.



Gli ultimi consigli

Scegliere il font giusto

www.typekit.com (commerciale)
Adobe Edge Webfonts (free)
http://www.google.com/webfonts (free)



Go Responsive:
Web apps per tutti gli schermi


HTML5 cross-platform and device development: web app per tutti gli schermi

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a HTML5 cross-platform and device development: web app per tutti gli schermi

Semelhante a HTML5 cross-platform and device development: web app per tutti gli schermi (20)

Mais de marcocasario

Mais de marcocasario (15)

HTML5 cross-platform and device development: web app per tutti gli schermi