IL WEB MOBILE

Multicanalità e layout fluido

Chi sono

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

1999

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/

2001

2003

2006

2007

2010

2010

2010

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

Si deve fare attenzioneIl problema è che la maggior parte dei web designer e developer cade esattamente nel mercato di fascia alta.

Il mercato dei browser mobile

http://gs.statcounter.com/

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);  

Il 7 giugno 2005, lo sviluppatore Dave Hyatt di Safari annunciò sul suo blog che Apple stava rendendo open source WebKit,

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

CREIAMO IL SITO WEB

Differenze desktop - mobile

Dimensioni schermo

NUOVE GESTURE

implementabili con librerie javascript

http://eightmedia.github.com/hammer.js/

Microsoft Windows Phone 7 touch guideliness

Velocità di connessione

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

Cercare / Consultare

Giocare

Check-in / Status

Aggiornare / Creare

AMBIENTI D’UTILIZZO

84% use them at home

•! 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

USER AGENT

Versione desktop Versione mobile

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.

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.

<! DOCTYPE html >

Forse è più semplice usare il doctype dell’HTML5

960 px

1024 px

Apple – Safari Web Content Guide

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.

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.

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.

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

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}

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>

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">

RESPONSIVE DESIGN

1

2

3

1

2

3

1

2

3

ESEMPIO : A LIST APARThttp://www.alistapart.com/articles/responsive-web-design/

by Ethan Marcotte

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" />

@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.

@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

}

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.

http://jquerymobile.com/ http://www.sencha.com/products/touch/

Qualche framework consigliato:

MOBILE FIRST

12

3

“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

il menu di flickr versione desktop e versione mobile

Limiti del responsive

http://2010.dconstruct.org/

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/

mettendo le immagini in percentuale, il riadattamento delle dimensioni consuma CPU

http://2011.dconstruct.org/

FINE

Immagini:

http://www.slideshare.net/yiibu

http://www.flickr.com

http://www.abookapart.com/

www.stedesign.com