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

4 - Ancora viewport

Proseguiamo con la discussione sul viewport.
Quali motivi ci dovrebbero spingere a voler controllare il viewport? Be' più di uno.
@media screen and (max-width: 500px)

Per prima cosa l'applicazione delle media queries è dipendente dalle dimensioni del viewport visuale. Di conseguenza una regola di impaginazione basata su una dimensione massima di 500px non verrà applicata se il nostro smartphone avrà deciso di settare il proprio viewport a 780px. Come conseguenza avremo un sito che risulterà responsive su un browser desktop in cui abbiamo ridotto la finestra, ma continueremo a dover zoomare sul nostro smartphone.
Il meta tag viewport ci permette, ad esempio, di rendere il viewport di dimensioni pari allo schermo e di impedirne lo zoom. Con una
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
Questa versione ridondante impone al dispositivo di adattare la larghezza del viewport a quella dello schermo, impedendone inoltre lo zoom. Così facendo abbiamo garantito alle media queries la possibilità di scattare agli intervalli corretti secondo la dimensione dello schermo.
Come detto così facendo l'utente non può più zoomare. Questa scelta è corretta?
Non esiste una risposta unica e di conseguenza bisogna scegliere come agire tramite compromessi. Se l'utente ha difficoltà visive potrebbe voler zoomare. Ma quanti utenti hanno difficoltà visive? Meglio sacrificare la navigabilità per alcuni e migliorarla per molti? Che target ha il nostro sito? Se tratta, per esempio, di ottica, avremo più utenti che preferiscono zoomare?
E gli altri utenti? Siamo sicuri che preferiscano un sito ordinato e monolitico?
La realtà è complessa e bisogna valutare molti parametri. Tra questi bisogna anche valutare che il gesto dello zoom con due dita è ormai diventato più che comune e gli schermi dei dispositivi mobili stanno diventando sempre più grandi. Anche questi parametri vanno soppesati, specie valutando il rapido rinnovamento dei dispositivi mobili.
Diversi studi infatti mettono in risalto la correlazione tra chi naviga di più e chi cambia più spesso il proprio smartphone. Anche questi parametri hanno una rilevanza.
Non esiste dunque una linea guida comune ma una serie di variabili da stimare, pesare e valutare.

  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
3 - viewport
Filosofia del responsive

3 - viewport

Occorre spendere qualche parola anche per quanto riguarda la gestione del viewport.


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