seminario web mobile_2012
DESCRIPTION
Capire il mondo del mobile dal dispositivo alle tecnologie per sviluppare contenuti webTRANSCRIPT
![Page 1: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/1.jpg)
IL WEB MOBILE
Multicanalità e layout fluido
![Page 2: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/2.jpg)
Chi sono
![Page 3: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/3.jpg)
Nel 2013 il traffico della rete da parte dei dispositivi mobili sarà maggiore di quello dei computers.
http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats
![Page 4: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/4.jpg)
1999
![Page 5: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/5.jpg)
![Page 6: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/6.jpg)
![Page 7: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/7.jpg)
Nel 2002 viene sviluppato il WAP 2.0 che ha adottato XHTML-BASIC/MP Mobile Profile e il famoso protocollo TCP/IP HTTP per la comunicazione. XHTML-MP è molto simile all’ XHTMLIl Wap 2.0 ha introdotto i Wireless CSS (WCSS) che sono una versione di CSS 2.1 per integrare gli stili ad xhtml-mp.
Oggi molti telefoni come l’iPhone, Android, etc. non hanno problemi a leggere il markup utilizzato dai siti web per visualizzare il sito sui dispositivi desktop.
Mobile Web Application Best Practices
http://www.w3.org/TR/mwabp/
![Page 8: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/8.jpg)
![Page 9: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/9.jpg)
2001
![Page 10: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/10.jpg)
2003
![Page 11: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/11.jpg)
2006
![Page 12: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/12.jpg)
![Page 13: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/13.jpg)
2007
![Page 14: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/14.jpg)
2010
![Page 15: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/15.jpg)
2010
![Page 16: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/16.jpg)
2010
![Page 17: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/17.jpg)
![Page 18: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/18.jpg)
Il mercato degli smartphoneUno smartphone è un telefono che ha un OS riconoscibile su cui l'utente può installare delle applicazioni.
Il mercato degli smartphone è suddiviso in molti sotto-mercati, ciascuno dei quali ha un proprio pubblico
![Page 19: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/19.jpg)
Si deve fare attenzioneIl problema è che la maggior parte dei web designer e developer cade esattamente nel mercato di fascia alta.
![Page 20: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/20.jpg)
Il mercato dei browser mobile
http://gs.statcounter.com/
![Page 21: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/21.jpg)
![Page 22: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/22.jpg)
![Page 23: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/23.jpg)
1. background-image: -webkit-linear-gradient(#fff, #000); 2. background-image: -moz-linear-gradient(#fff, #000); 3. background-image: -ms-linear-gradient(#fff, #000); 4. background-image: -o-linear-gradient(#fff, #000); 5. background-image: linear-gradient(#fff, #000);
![Page 24: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/24.jpg)
Il 7 giugno 2005, lo sviluppatore Dave Hyatt di Safari annunciò sul suo blog che Apple stava rendendo open source WebKit,
![Page 25: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/25.jpg)
![Page 26: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/26.jpg)
Laddove gli altri browser scaricano semplicemente HTML, CSS e JavaScript, lo interpretano e lo rendono,.Quando si richiede una pagina in Opera Mini, quella richiesta va su uno speciale Server di Opera Mini.
Il server scarica le risorse, le interpreta ed esegue il rendering della pagina. Poi invia un'immagine ( altamente compressa ) della pagina risultante al vostro telefono. Voi vedete l'immagine attraverso il Client di Opera Mini.
Il vantaggio è che il client di Opera Mini necessità di una piccola quantità di memoria, il che lo rende particolarmente adatto ai dispositivi economici di fascia bassa.
Opera Mobile era importante perché era il Default browser per molti dispositivi Windows Mobile.Attualmente IE mobile utilizza il motore di Explorer 9
![Page 27: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/27.jpg)
![Page 28: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/28.jpg)
CREIAMO IL SITO WEB
![Page 29: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/29.jpg)
Differenze desktop - mobile
![Page 30: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/30.jpg)
Dimensioni schermo
![Page 31: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/31.jpg)
NUOVE GESTURE
implementabili con librerie javascript
http://eightmedia.github.com/hammer.js/
![Page 32: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/32.jpg)
![Page 33: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/33.jpg)
Microsoft Windows Phone 7 touch guideliness
![Page 34: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/34.jpg)
![Page 35: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/35.jpg)
Velocità di connessione
![Page 36: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/36.jpg)
Differenze desktop - mobileOltre ad esserci differenze legate alle dimensioni fisiche/hardware ci sono anche differenze che riguardano il contesto in cui utilizziamo i dispositivi, il loro utilizzo sociale, le esigenze che soddisfano e soprattutto il modo in cui lo fanno.
portatile
personale
sempre a disposizione
utilizzabile all’istante
connesso
![Page 37: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/37.jpg)
Cercare / Consultare
![Page 38: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/38.jpg)
Giocare
![Page 39: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/39.jpg)
Check-in / Status
![Page 40: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/40.jpg)
Aggiornare / Creare
![Page 41: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/41.jpg)
![Page 42: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/42.jpg)
AMBIENTI D’UTILIZZO
![Page 43: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/43.jpg)
84% use them at home
![Page 44: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/44.jpg)
•! 80% use them during miscellaneous downtime throughout the day
•! 74% use them while waiting in lines or waiting for appointments
•! 69% use them while shopping
•! 64% use them at work
•! 62% use them while watching TV (a different study claims 84%)
•! 47% use them during their commute
![Page 45: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/45.jpg)
USER AGENT
Versione desktop Versione mobile
![Page 46: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/46.jpg)
USER AGENTPossiamo affidarci ad uno script in php che ci permetterà di analizzare l’User Agent; ovvero le informazioni che ogni dispositivo include nel proprio http header, riguardo al tipo di browser e sistema operativo. Il seguente codice ci permetterà di identificare dispositivi basati su Android, iOS, BlackBerry e WebOS e di reindirizzarli verso la nostra versione mobile del sito oppure verso uno specifico foglio di stile .
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone || $android || $palmpre || $ipod || $berry == true){header('Location: http://sito.org/mobile.html'); //redirect verso pagina mobile}?>
WURFL: database che detiene tutti gli USER AGENT per device mobili, fornisce un API da utilizzare nel vostro codice.
![Page 47: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/47.jpg)
La prima regola perchè il vostro sito venga visualizzato correttamente sui telefoni è aggiungere il giust Doctype (xhtml-mp), codice di caratteri (utf-8), e il MIME Type (application/html+xml).
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Site Name</title><meta http-equiv="content-type" content="application/xhtml+xml" /><link rel="stylesheet" type="text/css" href="style.css"/>
</head>
Per quello che concerne la struttura del body cercate di costruire semanticamente (nell’ordine in cui le cose appaiono) ed evitate tabelle e frames. Limitare l’uso di risorse esterne come i popups.
![Page 48: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/48.jpg)
<! DOCTYPE html >
Forse è più semplice usare il doctype dell’HTML5
![Page 49: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/49.jpg)
960 px
1024 px
![Page 50: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/50.jpg)
Apple – Safari Web Content Guide
![Page 51: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/51.jpg)
mobile web design:Prima di tutto la dimensione degli schermi varia molto ma quello che più c’interessa è la larghezza, quindi bisogna creare un layout fluido.
Un layout fluido vi aiuta con i dispositivi con lo schermo orientabile.
Mantenetevi sulla grandezza in larghezza minima di 120 px (240 px solo se è per smartphone) ed una massima di 480 px (iPhone orientato a landscape)
#page {margin: 0 auto; min-width: 120px;! }
Evitate menu a più livelli perchè su piccoli schermi non sarebbero mostrati correttamente.Mettete Link d’uscita per la home, la sezione precedente e successiva, alla fine di ogni pagina in modi che il visitatore non debba scrollare fino in cima.
![Page 52: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/52.jpg)
![Page 53: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/53.jpg)
![Page 54: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/54.jpg)
Information architecture:
Semplicità! anche con connessione 3G serve sempre molto tempo per caricare una pagina quindi la pazienza dei visitatori da cellulare è piuttosto corta.
Tagliate tutto quello che non è rilevante e usate categorie ben specificate: se il visitatore sa cosa sta aspettando è più probabile che attenda il caricamento.
Risorse e banda di connessione:
sono 2 dei maggiori limiti dei telefoni cellulari. Evitate object e javascript quando possibile perchè non sono supportati sui primi telefoni, ma anche ora che lo sono prosciugano la batteria.
![Page 55: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/55.jpg)
Limitate l’uso di immagini perchè aggiungono peso alla pagina, inoltre dovete considerare quale sarebbe la dimensione ideale. Il modo corretto di ridimensionare le immagini è farlo su lato server e specificarne la grandezza.
Quando potete usate sempre sprites images e “alt text” nel caso l’immagine non carichi.
<img src="apericlub_t.jpg" alt="apericlub">
Peso della pagina, restare tra i 10kb e i 25kb ai telefoni di base, per gli smartphones va bene anche 50kb e per i touch-phones anche 100kb.
Caching è un altro fattore che vi aiuta con la velocità di caricamento, cercate di evitare che le risorse comuni siano sempre scaricate e inserite una stringa per controllare la cache.
<meta http-equiv="Cache-Control" content="max-age=300"/>
Safari sull’iPhone registra nella cache solo file di dimensioni minori di 25kb.
![Page 56: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/56.jpg)
Iniziate aggiungendo il viewport all’interno dell’ in modo che la pagina si adatti perfettamente allo schermo:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Visualizzazione della pagina con lo script Visualizzazione della pagina senza script
![Page 57: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/57.jpg)
Una buona pratica è mantenere la user experience simile a quella generale dell’iPhone anche attraverso il sito.
Possiamo sfruttare le nuove regole CSS3 che non potete usare sugli altri telefoni. La più comoda e usata ovviamente sono i bordi arrotondati e le ombre:div { color: #bcbcbc;padding: .5em; border-radius: 6px; }
#div {color:#eee; text-shadow:#000 0 -1px 1px; font:bold 0.6 em"Helvetica", sans-serif}
![Page 58: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/58.jpg)
Quando applicate gli stili ai font è meglio non specificare la grandezza in pixels, casomai in em o percentuali,
#div {
color:#eee; font:bold 0.6 em"Helvetica Neue", Helvetica, sans-serif
}
Sono stati introdotti i tag “tel:” e “sms:” nei link potete attivare quelle funzioni nel telefono se cliccate lanciano direttamente la chiamata o la messaggistica.
<a href="tel:43802948">call us</a>
<a href="sms:12125551212">Send SMS to 1(212)555-1212</a>
![Page 59: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/59.jpg)
Il secondo passo è nascondere la barra degli indirizzi visto che abbiamo già così poco spazio. Basta una riga di javascript:
window.scrollTo(0, 1);
Create una icona springboard, una specie di enorme favicon per rendere riconoscibile il vostro sito se viene aggiunto ai segnalibri dell’homescreen. Dev’essere di 57×57 px
<!-- For iPhone 4, iPad 3 with high-resolution Retina display: --> <link href="img/h/apple-touch-icon.png" rel="apple-touch-icon-precomposed" sizes="114x114">
<!-- For first-generation iPad: --> <link href="img/m/apple-touch-icon.png" rel="apple-touch-icon-precomposed" sizes="72x72">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link href="img/l/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
![Page 60: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/60.jpg)
RESPONSIVE DESIGN
![Page 61: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/61.jpg)
1
2
3
![Page 62: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/62.jpg)
1
2
3
![Page 63: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/63.jpg)
1
2
3
![Page 64: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/64.jpg)
ESEMPIO : A LIST APARThttp://www.alistapart.com/articles/responsive-web-design/
by Ethan Marcotte
![Page 65: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/65.jpg)
Le “media queries”http://www.w3.org/TR/css3-mediaqueries/
Il W3C ha creato le media queries come parte della specifica CSS3. Una media query si rivolge a qualsiasi tipo di device. Le media queries sono una tecnica client-side per inviare un foglio di stile su misura tenendo conto della larghezza dello schermo del dispositivo. Per fare ciò, potremmo incorporare una query nell'attributo media di un foglio di stile collegato.
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="shetland.css" />
![Page 66: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/66.jpg)
@media (max-width: 480px) { .immagine { width: 300px }
Stiamo chiedendo al device se la sua risoluzione orizzontale (max-device-width) è uguale o minore di 480px.
Se questo test passa—in altre parole, se stiamo vedendo il nostro lavoro su un device con uno schermo piccolo come l'iPhone—allora il device renderà l’immagine larga 300px.
Altrimenti il link sarà ignorato in toto.
![Page 67: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/67.jpg)
@media (-webkit-min-device-pixel-ratio:2){! ! ! #box_body{
background:url(images/bg_mobile2.png) no-repeat; background-size: 320px 473px; }
}
Adattare le immagini con il Retina display:
#box_body {
background:url(images/bg_mobile.png) no-repeat; height:473px; width:320px
}
![Page 68: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/68.jpg)
I browser desktop come Safari 3+, Chrome, Firefox 3.5+ e Opera 7+, supportano tutti nativamente le media query analizzate nell'articolo, così come anche i più recenti browser per cellulari come Opera Mobile e Mobile WebKit.
Ovviamente, le versioni più vecchie dei browser desktop, non supportano le media query.
Internet Explorer le supporta con IE9,
Per implementare il supporto per browser antiquati Javascript offre una soluzione:
css3-mediaqueries.js una libreria che permette a IE 5+, Firefox 1+ e Safari 2+ di applicare le Media Query CSS3
quando viene inclusa attraverso blocchi @media.
![Page 69: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/69.jpg)
http://jquerymobile.com/ http://www.sencha.com/products/touch/
Qualche framework consigliato:
![Page 70: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/70.jpg)
MOBILE FIRST
![Page 71: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/71.jpg)
12
3
![Page 72: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/72.jpg)
“My goal was initially just to make a mobile companion, but I became convinced it was possible to create a version of Facebook that was actually better than the website”
La navigazione nel web mobile non è un derivato da quella tradizionale desktop, ma può essere un’opportunità per migliore semplificando l’esperienza di navigazione.
Joe Hewitt, il lead developer dell’applicazione per iPhone di Facebook
“The simple guideline is whatever you are doing—do mobile first,”
Google Chairman Eric Schmidt
![Page 73: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/73.jpg)
il menu di flickr versione desktop e versione mobile
![Page 74: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/74.jpg)
Limiti del responsive
http://2010.dconstruct.org/
![Page 75: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/75.jpg)
display:none! !
Le immagini vengono caricate ma il div non compare.
carichiamo 370 kb di immagini inutilmente
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
![Page 76: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/76.jpg)
mettendo le immagini in percentuale, il riadattamento delle dimensioni consuma CPU
http://2011.dconstruct.org/
![Page 77: Seminario web mobile_2012](https://reader031.vdocuments.pub/reader031/viewer/2022013011/5482290bb4af9f3c208b4793/html5/thumbnails/77.jpg)
FINE
Immagini:
http://www.slideshare.net/yiibu
http://www.flickr.com
http://www.abookapart.com/
www.stedesign.com