Responsive Web Design & Mobile
-
Upload
giovanni-buffa -
Category
Education
-
view
76 -
download
7
Transcript of 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
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