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






02/12/2013 -

Filosofia del responsive

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

Terminare qui la motivazione è quantomeno azzardato, e cercherò in questi blog di spiegare il perchè.
Ho deciso di parlare di "filosofia" proprio per dare subito un'idea della complessità dell'argomento e per far immediatamente capire che l'argomento è vasto e soggetto a diversi punti di vista.
Partiamo subito estendendo il concetto di "responsive". Un sito deve adattarsi anche a grandi monitor e non solo ai piccoli schermi degli smartphone.
Per quanto possa sembrare banale questo concetto è spesso sottovalutato. La dimensione dei monitor desktop sta aumentando nel tempo, non esponenzialmente come i dispositivi mobili ma non è un indice ignorabile.
Per dare ulteriore peso a questo concetto è bene anche guardare alla prospettiva futura e agli standard che incontreremo.
I primi imputati sono gli schermi Retina disponibili sui prodotti Apple.
Facciamo subito un esempio concreto. Questi schermi possono raggiungere risoluzioni elevatissime, come 2880x1800 pixel. Queste risoluzioni sono talmente elevate che che la configurazione standard su questi dispositivi prevede un ingrandimento di contenuti al 200%, che porta la risoluzione effettiva a 1440x900 pixel.
Lo scopo di questi schermi è quello di rendere più nitido il testo e le immagini, e i brower inseguono già questa caratteristica per sfruttarla al meglio.
Proseguendo con gli esempi, un'immagine da 200x200 pixel può essere inserita in un browser riducendola a 100x100 pixel:
<img src="images/esempio.jpg" style="width:100px;" alt="100" />
Su uno schermo tradizionale perderemmo un pixel ogni due (con spreco di banda di trasferimento) mentre uno schermo Retina la visualizzerà comunque a piena risoluzione.
Se vogliamo risparmiare banda sono disponibili alcuni plugin javascript che si occupano di rilevare la presenza di un monitor Retina e di caricare immagini e sfondi adeguate alla doppia risoluzione di questi schermi.
In ambito Windows queste risoluzioni non sono ancora supportate come da Apple, ma monitor di grandi risoluzioni sono già disponibili per l'ambiente Windows.
Lo standar del futuro, già presente in molte sale cinematografiche digitali e in alcuni monitor di fascia alta, è il 4k, avente una risoluzione doppia rispetto ad uno schermo full HD e attestandosi a 3840×2160 pixel.
Un monitor del genere in ambiente Window ci costringerebbe, normalmente, a navigare zoomando almeno a 150%, pena la visualizzazione di contenuti "miniaturizzati" e spesso irraggiungibili.

Queste premesse ci servono per cominciare a rivalutare il concetto di responsive. Cominciamo a pensare anche al futuro (o ai più fortunati) e iniziamo a pensare alla nostra progettazione in questo senso.

  Condivi su Facebook Share on Google+      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
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