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

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.
Le motivazioni per iniziare o meno una personalizzazione del genere dobbiamo valutarle comunque come detto nell'articolo precedente. Diverso il discorso relativo alla determinazione del tipo di dispositivo.
La ricerca di un'ottimizzazione per lo schermo (tramite media queries) è probabilmente più flessibile e ci permette di non dover creare due siti sostanzialmente separati magari anche nella struttura.
L'alternativa è invece più accurata, permette un'ottimizzazione più spinta e in certi casi anche un risparmio di tempo di sviluppo, specie per progetti di grandi dimensioni.
Per il rilevamento ci si basa solitamente sull'user agent comunicato dal browser. Bisogna però tenere conto che anche questa regola ha dei limiti.
Per prima cosa un utente esperto può facilmente disabilitare o cambiare il proprio user agent aggirando il controllo. È un problema secondo me piuttosto limitato in quanto chi lo fa conosce le conseguenze, ma può risultare utile tenere a mente di affiancare comunque qualche riga di media query senza privarsene del tutto.
Il rilevamento dell'user agent normalmente si basa su alcune parole chiave in esso contenute, ad esempio iphone, phone, mobile, android o ipad. Esistono anche plugin già pronti, scritti in javacript, PHP e molti altri linguaggi.
Una buona conoscenza delle differenze tra questi dispositivi potrebbe aiutarci a creare un sito estremamente ottimizzato. Un esempio calzante è la differenza di comportamento tra diversi browser mobile per quanto riguarda i blocchi "fixed".
Un div fixed deve essere fissato al viewport in qualsiasi condizione. Il problema è: quale viewport, visuale o di layout? La risposta è visuale. Questo spiega perchè i blocchi fixed abbiano tanti problemi di visualizzazione sui dispositivi mobile. I due viewport, salvo casi molto particolari, corrispondono nei desktop ma non nel mobile.
Questo spiega perchè talvolta i blocchi fixed si spostano spostando il viewport sugli smartphone. Questo comportamento si verifica, tra gli altri, sugli iPhone fino al 4 e sull'ipad 2, entrambi con OS non aggiornato. Il problema esiste anche su alcuni dispositivi Android e nel tempo ha suscitato diverse polemiche tra gli sviluppatori che si aspettavano un comportamento dei blocchi fixed simile al desktop.
Come risultato i produttori sono corsi ai ripari collegando i blocchi fixed al viewport di layout, e su alcuni dispositi Android sono nati rimedi ibridi e approssimativi che spostano i blocchi fixed dopo aver terminato lo scroll del viewport creando animazioni indesiderate e poco fluide.
Questo era solo un esempio dei tanti, ma conoscere questi problemi può aiutarci a risolverli o aggirarli quando decidiamo di identificare lo user agent.
Per finire, è bene dare sempre all'utente la possibilità di decidere di tornare alla visualizzazione desktop se decidiamo di imporre quella mobile in caso di identificazione. Questo darà all'utente una scelta per assecondare i gusti personali e ci toglierà parecchi dubbi sulla necessita di imporre una certa visualizzazione. In questo caso possiamo memorizzare la scelta in un cookie apposito per evitare all'utente di decidere la visualizzazione ad ogni accesso.

  Condivi su Facebook Share on Google+      Tag:  Css  Layout  Grafica  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
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