beta 1.0
Test
Elenco siti recensiti Segnala un errore Informazioni BLOG
Condivi su FacebookCondivi su Facebook Share on Google+Condividi su Google+ Richiedi preventivo refactory del tuo sito.Richiedi preventivo refactory del tuo sito. Metti RoadToResponsive nel tuo sitoMetti RoadToResponsive nel tuo sito
Tutti gli articoli






-

Filosofia del responsive

3 - viewport

Occorre spendere qualche parola anche per quanto riguarda la gestione del viewport.
Parto da una delle guide più esaustive ed interessanti che ho trovato online, in inglese, reperibile su www.quirksmode.org.
Merita di essere letta per intero e prestando attenzione, ma proverò a farla semplice in questo blog.
In parole povere la visualizzazione su mobile e desktop differisce per la gestione del viewport, o meglio dei due viewport. Concettualmente (e non solo) ne esistono due, il viewport visuale e quello di layout.
Il viewport di layout è solitamente coincidente con il documento e con le sue dimensioni, mentre il viewport visuale, più importante per i nostri fini, deve essere interpretato come una "lente di ingrandimento" attraverso cui guardiamo il viewport di layout.
Proseguendo con la semplificazione, il viewport visuale corrisponde (quasi) sempre con quello layout per quanto riguarda i desktop, mentre su mobile il discorso si complica.
Per venire incontro alle dimensioni ridotte dei dispositivi mobili il viewport visuale su questi viene spesso ridotto e sostanzialmente possiamo verificare la cosa zoomando con uno smartphone. Quando guardiamo un sito non ottimizzato spesso risulterà rimpicciolito a causa dello zoom, parti di testo potrebbero risultare illeggibili e necessitare dello zoom con due dita per tornare leggibili.
Questo è dovuto alla gestione del viewport visuale che risulta più largo delle dimensioni dello schermo.
Il disorso si complica ancora se tentiamo di intuire come il dispositivo gestisce le dimensioni di partenza del viewport visuale. Alcuni si basano sulla dimensione del viewport di layout, altri sulle dimensioni massime del documento, altri ancora si fissano a 320px o ancora alla metà delle dimensioni dello schermo.
Il risultato è che non è possibile fare assunzioni standard per quanto riguarda il viewport. Per contrastare questi problemi Apple ha introdotto il meta tag
VIEWPORT
poi seguìto dagli altri produttori. Ad oggi possiamo dire che la quasi totalità dei dispositivi la supporta.
Questo metatag ci permette di controllare il comportamento del viewport, per esempio deciderne le dimensioni. Possiamo forzarlo per renderlo pari alle dimensioni dello schermo del dispositivo, possiamo bloccarne o limitarne la possibilità di zoomare e altro ancora.

  Condivi su Facebook Share on Google+      Tag:  Css  Layout  Html
1 - considerazioni preliminari
Filosofia del responsive
02/12/2013

1 - considerazioni preliminari

Il titolo di questo blog può sembrare eccessivo, eppure ben rappresenta la complessità dell'argomento.
Partiamo da una premessa che troverete in ogni guida e probabilmente anche in un altro blog su questo sito:

«Il motivo principale della nascita del paradigma "responsive" è certamente quello di adattarsi ai dispositivi mobili.»


Tag:  Css  Layout  Html
2 - Da quale punto di vista
Filosofia del responsive

2 - Da quale punto di vista

Smontiamo ora una seconda premessa piuttosto comune:

Dopo aver realizzato un sito bisogna adattarlo ai dispositivi mobili, per esempio con le media queries.

Questo concetto non è limitato ma, a parer mio, sbagliato.
Un sito non deve adattarsi ai dispositivi mobili ma nascere per essi. Successivamente si penserà ad adattarlo agli altri dispositivi.


Tag:  Css  Layout  Html
4 - Ancora viewport
Filosofia del responsive

4 - Ancora viewport

Proseguiamo con la discussione sul viewport.
Quali motivi ci dovrebbero spingere a voler controllare il viewport? Be' più di uno.


Tag:  Css  Layout  Html
5 - Siti ad hoc e siti ottimizzati
Filosofia del responsive

5 - Siti ad hoc e siti ottimizzati

Un ultimo dubbio frequente riguarda la possibilità di creare siti ad hoc esclusivamente per dispositivi mobili.
I metodi per realizzarli sono diversi e possono anche prendere in considerazione l'utilizzo delle media queries oppure delle librerie jQuery specifiche per mobile.


Tag:  Css  Layout  Grafica  Html