Il documento discute il responsive web design (RWD), una tecnica che permette ai siti di adattarsi automaticamente ai vari dispositivi, e i browser utilizzati per la navigazione mobile. Inoltre, esamina il concetto di viewport e le proprietà CSS correlate, nonché l'importanza delle media queries per rendere i contenuti fruibili su diversi schermi. Viene anche menzionato il principio 'mobile first' e strumenti di testing per garantire una corretta visualizzazione su dispositivi mobili.

1. Responsive Design
& Mobile

2. – 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”.

3. Sistemi Operativi
e Browsers

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

5. Downloadable Browsers
Opera Mobile
Opera Mini
Firefox Mobile
Chrome Mobile
UC
UC Mini

6. Mobile Browsers
Safari Mobile
Android Webkit
Chrome Mobile
BlackBerry Webkit
IE Mobile
Opera Mobile
Opera Mini
UC
UC Mini
Symbian Webkit
Firefox Mobile
S40 Webkit
Xpress
Puffin
Amazon Silk

7. Proxy Browsers

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

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

10. Hybrid Browsers

11. Hybrid Browsers
Amazon Silk
Puffin
Chrome Mobile
Opera Mobile

12. iOS Browsers

13. – Apple App Store Policy
“Apps that browse the web must use the iOS
WebKit framework and WebKit Javascript”.

14. Android Browsers

15. Vendor
Google
Samsung
HTC
Motorola
Sony
Amazon
Xiaomi

16. Render Engines

17. Browser Render engine
Safari Mobile Webkit
Chrome Blink
Opera Mini Presto
Windows Phone Trident
Firefox Mobile Gecko
UC Mini, Xpress Gecko
… Webkit Webkit

18. Pixels

20. width: 200px;
Cosa succede ad un elemento impostando
?

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

22. dispositivi tradizionali:1px CSS == 1px Device

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

24. Viewport

25. width: 40%;
Cosa significa
?

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

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

28. Proprietà Descrizione
width
Larghezza del viewport espressa in pixels oppure in termini di device-width
(larghezza del dispositivo).
height
L’altezza del viewport espressa in pixels oppure in termini di device-height.
Generalmente questa proprietà non viene impostata.
initial-scale
Da 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)

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

30. @media

31. – 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”.

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

33. CSS

34. Il 99% di CSS funziona senza problemi sui dispositivi
mobile.
Alcune caratteristiche, tuttavia, differiscono dalla
controparte desktop.

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

36. Mobile First

37. Graceful degradation
Progressive enhancement

39. Graceful degradation

40. Progressive enhancement

41. Testing

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

44. Ghostlab - OSX/Win
Adobe Edge Inspect - OSX/Win/Linux
Remote Preview - OSX/Win/Linux

45. Manymo - Android
BrowserStack - iOS/Android/Opera
Samsung Developers - Android
Keynote Mobile Testing - iOS/Android/WP7
Open Device Lab

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