Full Responsive Website – Cosa Significa?

Tratto da smashingmagazine.com

Quasi ogni nuovo cliente in questi giorni desidera una versione mobile del proprio sito web. Dopotutto, è praticamente essenziale: un design per BlackBerry, un altro per iPhone, iPad, netbook, Kindle – e anche tutte le risoluzioni dello schermo devono essere compatibili. Nei prossimi cinque anni, probabilmente dovremo progettare per una serie di invenzioni aggiuntive. Quando finirà la follia? Ovviamente mai.

Nel campo della progettazione e sviluppo Web, stiamo rapidamente arrivando al punto di non essere in grado di tenere il passo con le infinite nuove risoluzioni e dispositivi. Per molti siti Web, la creazione di una versione del sito Web per ogni risoluzione e nuovo dispositivo sarebbe impossibile, o almeno poco pratica.

Dovremmo semplicemente subire le conseguenze della perdita di visitatori da un dispositivo, a vantaggio di ottenere visitatori da un altro? O c’è un’altra opzione?

Cos’è Il Responsive Web Design?

Il responsive web design è l’approccio che suggerisce che la progettazione e lo sviluppo dovrebbero rispondere al comportamento e all’ambiente dell’utente in base alle dimensioni dello schermo, alla piattaforma e all’orientamento.

La pratica consiste in un mix di griglie e layout flessibili, immagini e un uso intelligente delle query multimediali CSS. Quando l’utente passa dal proprio laptop all’iPad, il sito Web dovrebbe passare automaticamente per adattarsi alla risoluzione, alle dimensioni dell’immagine e alle capacità di scripting.

Si potrebbe anche dover considerare le impostazioni sui propri dispositivi; se hanno una VPN per iOS sul loro iPad, ad esempio, il sito web non dovrebbe bloccare l’accesso dell’utente alla pagina. In altre parole, il sito web dovrebbe avere la tecnologia per rispondere automaticamente alle preferenze dell’utente. Ciò eliminerebbe la necessità di una diversa fase di progettazione e sviluppo per ogni nuovo gadget sul mercato.

Il Concetto Di Responsive Web Design

Ethan Marcotte ha scritto un articolo introduttivo sull’approccio, Responsive Web Design , per A List Apart. Nasce dalla nozione di progettazione architettonica reattiva, in base alla quale una stanza o uno spazio si adatta automaticamente al numero e al flusso di persone al suo interno:

“Recentemente, una disciplina emergente chiamata” architettura reattiva “ha iniziato a chiedersi come gli spazi fisici possano rispondere alla presenza di persone che li attraversano.
Attraverso una combinazione di robotica incorporata e materiali di trazione, gli architetti stanno sperimentando installazioni artistiche e strutture murarie che si piegano, Flessibilità ed espansione man mano che la folla si avvicina.
I sensori di movimento possono essere associati a sistemi di controllo del clima per regolare la temperatura di una stanza e l’illuminazione ambientale mentre si riempie di persone. Le aziende hanno già prodotto la “tecnologia del vetro intelligente” che può diventare automaticamente opaca quando gli occupanti raggiungono una certa soglia di densità, dando loro un ulteriore livello di privacy “.

Trapianta questa disciplina nel web design e abbiamo un’idea simile ma completamente nuova. Perché dovremmo creare un design Web personalizzato per ogni gruppo di utenti; dopotutto, gli architetti non progettano un edificio per ogni dimensione e tipo di gruppo che lo attraversa? Come l’architettura reattiva, il web design dovrebbe adattarsi automaticamente. Non dovrebbe richiedere innumerevoli soluzioni su misura per ogni nuova categoria di utenti.

Ovviamente, non possiamo usare sensori di movimento e robotica per ottenere questo risultato come farebbe un edificio. Il responsive web design richiede un modo di pensare più astratto. Tuttavia, alcune idee vengono già messe in pratica: layout fluidi, query multimediali e script in grado di riformattare le pagine Web e di eseguire il markup senza sforzo (o automaticamente ).

Ma il responsive Web design non riguarda solo risoluzioni dello schermo regolabili e immagini ridimensionabili automaticamente , ma piuttosto un modo completamente nuovo di pensare al design. Parliamo di tutte queste funzionalità, oltre a ulteriori idee in fase di realizzazione.

Regolazione Della Risoluzione Dello Schermo

Con più dispositivi sono disponibili risoluzioni, definizioni e orientamenti dello schermo variabili. Ogni giorno vengono sviluppati nuovi dispositivi con nuove dimensioni dello schermo e ciascuno di questi dispositivi può essere in grado di gestire variazioni di dimensioni, funzionalità e persino colore. Alcuni sono in orizzontale, altri in verticale, altri ancora completamente quadrati. Come sappiamo dalla crescente popolarità di iPhone, iPad e smartphone avanzati, molti nuovi dispositivi sono in grado di passare dalla modalità verticale a quella orizzontale a piacimento dell’utente. Come progettare per queste situazioni?

Oltre a progettare sia in orizzontale che in verticale (e consentire a questi orientamenti di cambiare possibilmente in un istante al caricamento della pagina), dobbiamo considerare le centinaia di diverse dimensioni dello schermo. Sì, è possibile raggrupparli in categorie principali, progettare per ciascuno di essi e rendere ogni progetto flessibile quanto necessario. Ma questo può essere travolgente, e chissà quali saranno le cifre di utilizzo tra cinque anni? Inoltre, molti utenti non massimizzano il proprio browser , il che di per sé lascia troppo spazio alla varietà delle dimensioni dello schermo.

Morten Hjerde e alcuni dei suoi colleghi hanno identificato le statistiche su circa 400 dispositivi venduti tra il 2005 e il 2008. Di seguito sono riportati alcuni dei più comuni:

Tutto più flessibile

Alcuni anni fa, quando i layout flessibili erano quasi un “lusso” per i siti web, le uniche cose che erano flessibili in un design erano le colonne del layout (elementi strutturali) e il testo. Le immagini potrebbero facilmente rompere i layout e persino elementi strutturali flessibili rompono la forma di un layout se spinti abbastanza. I design flessibili non erano poi così flessibili; potevano dare o prendere qualche centinaio di pixel, ma spesso non potevano passare da un grande schermo di computer a un netbook.

Ora possiamo rendere le cose più flessibili. Le immagini possono essere regolate automaticamente e abbiamo soluzioni alternative in modo che i layout non si interrompano mai (sebbene possano diventare schiacciati e illeggibili durante il processo). Sebbene non sia una soluzione completa, la soluzione ci offre molte più opzioni. È perfetto per i dispositivi che passano dall’orientamento verticale a quello orizzontale in un istante o quando gli utenti passano dallo schermo di un computer di grandi dimensioni a un iPad.

Vuoi Saperne di più?