Responsive Web Design & Mobile

Responsive Design & Mobile

– Wikipedia

“Il Responsive Web Design (RWD) indica una tecnica per la realizzazione di siti in grado di

adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati,

riducendo al minimo la necessità per l'utente di ridimensionamento e scorrimento dei

contenuti”.

Sistemi Operativie Browsers

OS Default Browsers

iOS Safari Mobile

Android Android Webkit o Chrome Mobile

BlackBerry BlackBerry Webkit

Windows Phone IE Mobile

Symbian Symbian Webkit

Firefox OS Firefox Mobile

Sailfish /

S40 S40 Webkit o Xpress

Altri Puffin, Amazon Silk, ecc.

Downloadable Browsers

Opera Mobile

Opera Mini

Firefox Mobile

Chrome Mobile

UC

UC Mini

Mobile BrowsersSafari Mobile

Android WebkitChrome Mobile

BlackBerry WebkitIE Mobile

Opera MobileOpera Mini

UCUC Mini

Symbian WebkitFirefox Mobile

S40 WebkitXpressPuffin

Amazon Silk

Proxy Browsers

– Wikipedia

“[…] permettere la visualizzazione di pagine web complesse su dispositivi dalle capacità computazionali estremamente limitate […]”.

1. L’utente richiede una pagina. Non viene fatta una normale richiesta HTTP ma una richiesta speciale al server proxy;

2. Il server proxy si premura di fare la reale richiesta;

3. Il server proxy legge e renderizza la pagina come fosse un normale browser;

4. Una volta renderizzata, la pagina viene compressa come fosse un’immagine o un PDF;

5. Il server proxy spedisce questo file al dispositivo;

6. Il browser visualizza il file all’utente. Se l’utente clicca su un link (qualsiasi) tutto il processo riparte dal punto 1.

Hybrid Browsers

Hybrid Browsers

Amazon Silk

Puffin

Chrome Mobile

Opera Mobile

iOS Browsers

– Apple App Store Policy

“Apps that browse the web must use the iOS WebKit framework and WebKit Javascript”.

Android Browsers

Vendor

Google

Samsung

HTC

Motorola

Sony

Amazon

Xiaomi

Render Engines

Browser Render engine

Safari Mobile Webkit

Chrome Blink

Opera Mini Presto

Windows Phone Trident

Firefox Mobile Gecko

UC Mini, Xpress Gecko

… Webkit Webkit

Pixels

width: 200px;

Cosa succede ad un elemento impostando

?

1. Device Pixels: i pixel fisici del dispositivo;

2. CSS Pixels: un livello di astrazione fatto apposta per i developer e utilizzato solo per CSS.

dispositivi tradizionali:1px CSS == 1px Device

schermi ad alta densità: 1px CSS == 4px Device

Viewport

width: 40%;

Cosa significa

?

1. Layout Viewport: le dimensioni della finestra calcolate dalle dimensioni massime impostate da CSS;

2. Visual Viewport: l’area del sito che viene visualizzata dall’utente. L’utente può manipolarla con lo zoom;

3. Ideal Viewport: le dimensioni del Layout Viewport che sono ideali per il dispositivo.

<meta name="viewport" content="" />

Proprietà Descrizione

widthLarghezza del viewport espressa in pixels oppure in termini di device-width

(larghezza del dispositivo).

heightL’altezza del viewport espressa in pixels oppure in termini di device-height.

Generalmente questa proprietà non viene impostata.

initial-scaleDa 0 a 10.0. Multipli che settano lo zoom della pagina. Il consiglio migliore è di settare il valore a 1.0 in modo che venga attribuita la larghezza totale del nostro

dispositivo in scala 1 a 1

minimum-scale Da 0 a 10.0. Indica il limite minimo di zoom-out che l’utente può effettuare

maximum-scale Da 0 a 10.0. Indica il limite minimo di zoom-in che l’utente può effettuare

user-scalable (yes/no) Permette di bloccare o lasciare libera la possibilità di zoomare.

minimal-ui Riduce al minimo la UI del browser (solo Safari Mobile su iOS7)

<meta name="viewport" content=“width=device-width, initial-scale=1“ />

@media

– Wikipedia

“Media Queries is a CSS3 module allowing content rendering to adapt to conditions such

as screen resolution. It became a W3C recommended standard in June 2012 and is a cornerstone technology of Responsive Web

Design”.

@media only screen and (min-width: 960px){}

@media only screen and (min-width: 768px) and (max-width: 959px){}

@media only screen and (max-width: 767px){}

@media only screen and (min-width: 480px) and (max-width: 767px){}

Desktop

Tablet - Portrait

Mobile - Portrait

Mobile - Landscape

CSS

Il 99% di CSS funziona senza problemi sui dispositivi mobile.

Alcune caratteristiche, tuttavia, differiscono dalla controparte desktop.

1. :hover/:active: concetti come “roll-over” e “active” su dispositivi touch semplicemente non esistono.

2. vw/vh: le unità di misura relative al viewport sono supportate, tuttavia non è dato a sapere a quale viewport fanno riferimento!

3. background-attachment/position:fixed: tutto ciò che è inerente allo scroll e alla posizione di elementi secondo la posizione dello scroll può essere mal interpretato o per nulla interpretato.

4. overflow:auto: gli elementi sono riconosciuti, tuttavia, visto che le scrollbar sui dispositivi mobile non vengono mostrate, diventa complicato per l’utente capire che c’è altro da visualizzare.

5. transition/animation: tutto ciò che è inerente all’accelerazione hardware è da ritenersi critico, e pertanto di attenta analisi e studio.

Mobile First

Graceful degradation

Progressive enhancement

Graceful degradation

Progressive enhancement

Testing

iOS Simulator - Safari Mobile - OSX

Android Emulator - Android Webkit - OSX/Win/Linux

Nokia Symbian - Symbian Webkit - OSX/Win/Linux

Blackberry Simulator - Blackberry Webkit - OSX/Win/Linux

Windows Phone 7 Simulator - IE Mobile - Win

Opera Mobile Emulator - Opera Mini - OSX/Win/Linux

Opera Developer - Opera Mobile - OSX/Win/Linux

Firefox Developer - Firefox Mobile - OSX/Win/Linux

Ghostlab - OSX/Win

Adobe Edge Inspect - OSX/Win/Linux

Remote Preview - OSX/Win/Linux

Manymo - Android

BrowserStack - iOS/Android/Opera

Samsung Developers - Android

Keynote Mobile Testing - iOS/Android/WP7

Open Device Lab

2015 Giovanni Buffa - CC by-nd 3.0

Fonte: The Mobile Handbook • https://shop.smashingmagazine.com/mobile-web-

handbook.html • https://shop.smashingmagazine.com/the-mobile-web-

ebook.html