Il web design reattivo

Vi sarà probabilmente capitato di leggere almeno una volta su un sito web una dicitura del tipo “Sito ottimizzato per una risoluzione di 1024×768 pixel”. Questa frase sta ad indicare che il layout del sito è stato progettato per essere correttamente visualizzato con un monitor che abbia una risoluzione minima pari appunto a 1024x768px. Gli utenti che possiedono monitor di risoluzione maggiore, vedranno correttamente il sito ma in modo leggermente diverso, a seconda del tipo di layout:

nel caso di layout fisso, il sito viene visualizzato come se il monitor avesse una risoluzione di 1024×768, ma sarà maggiore lo “spazio vuoto” ai due lati del sito (se il sito è centrato nella pagina) o a destra del sito (se il sito è allineato a sinistra della pagina). E’ di gran lunga la soluzione più adottata finora;
nel caso di sito a layout liquido invece, il sito rimane sostanzialmente lo stesso, con la differenza che i contenuti si “espandono” per occupare lo spazio disponibile.

Fino ad oggi queste due soluzioni sono state sufficienti per fronteggiare il problema delle differenti risoluzioni dei monitor degli utenti. Negli ultimi tempi però la situazione è diventata più complessa, in quanto col successo commerciale di netbook e smartphone ed il prevedibile successo dei computer tablet, la gamma delle dimensioni dei dispositivi con i quali un utente può accedere al web si è decisamente ampliata.

Prendendo come riferimento la linea di prodotti Apple, si parte dai 3,5” dell’iPhone per arrivare ai 24”/27” dell’iMac, passando per i 9,7” dell’iPad, gli 11”/13” del nuovo Macbook Air e i 13”/15”/17” del Macbook Pro. In che modo si può superare questa nuova frontiera del web design moderno?

Alcuni mesi fa è stato pubblicato su A List Apart un articolo scritto da Ethan Marcotte dal titolo Responsive Web Design (tradotto in italiano come web design reattivo). Da allora sui blog dedicati al web design si è fatto un gran parlare di questo nuovo concetto, mutuato dall’architettura moderna e che sembra candidarsi a risolvere il problema di cui ci stiamo occupando.

Un sito web reattivo, in estrema sintesi, è un sito capace di reagire, di ottimizzarsi in tempo reale alle dimensioni del browser con il quale viene visualizzato. In questo breve video potete constatare come il sito di esempio (una demo costruita dallo stesso Marcotte per illustrare il responsive web design) si modifica a mano a mano che la finestra del browser viene rimpicciolita: lo spazio per i testi e le immagini dei contenuti a destra si riducono progressivamente, e quando la finestra inizia ad essere troppo piccola, si riposizionano sotto la navigazione.

Vuoi un nuovo sito? Richiedi subito un preventivo gratuito.

Realizzare un sito di questo tipo è possibile principalmente grazie a due elementi:

Layout liquido. Il successo che sta avendo il web design reattivo ha riportato in auge il layout liquido, al quale finora è stato decisamente preferito il layout fisso. In sostanza, in un layout liquido le dimensioni degli elementi di una pagina web sono espresse in misure percentuali e non fisse, e dunque variano proporzionalmente alla dimensione del browser.
Media queries. Senza scendere in dettagli troppo tecnici, le media queries sono uno strumento potente e relativamente nuovo che permette al web designer di modificare l’aspetto di una pagina web in presenza di determinate condizioni. E’ possibile per esempio fare scelte grafiche e di layout diverse a seconda delle correnti dimensioni del browser. Per spiegarvi meglio, ecco un altro video di esempio.

Eh si, il nuovo blog di Meetweb è reattivo! Come si vede dal video, quando la dimensione del browser comincia a diventare molto piccola (nello specifico, minore di 580px), il titolo in alto “web, comunicazione e marketing” scompare per dare risalto ai contenuti più importanti, ossia i post. La possibilità di nascondere quel titolo è data proprio dall’uso delle media queries.

Il grande vantaggio del responsive web design: realizzare la versione di un sito web ottimizzata per iPhone.

Uno dei motivi per cui il concetto del responsive web design sta avendo così tanto successo è la possibilità di utilizzarlo per creare la versione ottimizzata di un sito mobile (per i dispositivi mobili, in particolare per l’iPhone). Non tutti sono d’accordo però sull’uso di questa possibilità. C’è chi crede infatti che la versione mobile di un sito tradizionale debba essere pensata come un sito a sè stante, diverso: i contenuti non devono essere semplicemente adattati o riposizionati ma “scremati”, ridotti, scelti per l’utente che li consulta in mobilità.

E’ un’opinione condivisibile, ma probabilmente è valida per certi siti più che per altri. E’ possibile pensare che un utente in mobilità si colleghi al sito web di un negozio per conoscerne l’indirizzo o gli orari di apertura più che la sua storia o la sua filosofia; ma un utente che per esempio si collega ad un sito di news giornalistiche probabilmente è sempre alla ricerca di un articolo, sia che lo visiti dal proprio iPhone che dal computer desktop della sua casa.

Il web design reattivo in azione.

Il modo migliore per capire il responsive web design è vederlo in azione. Visitate i quattro siti di esempio elencati qui sotto, e ridimensionate il browser per vedere come essi si adattano proporzionalmente alle nuove dimensioni. Oppure visitateli direttamente con il vostro iPhone per vedere la differenza con la versione desktop.

http://stephencaver.com/

http://colly.com/

http://teixido.co/

http://www.hicksdesign.co.uk/

Vuoi un nuovo sito web? Richiedi subito un preventivo gratuito

Se stai pensando che ci vuole un nuovo design per il tuo sito web, compila la form per ricevere un preventivo gratuito.

Nome *

Cognome *

Azienda *

Email *

Telefono *

Website *

Come ci hai conosciuto? *

Dipendenti *

Nota informativa sulla privacy autorizzazione Dlgs 196/2003

Oggetto: informativa sul trattamento dei Vostri dati personali ai sensi dell'articolo 13 del Dlgs 196/2003, recante il codice in materia di protezione dei dati personali.
 
Il D.Lgs. 196/2003 (codice sulla privacy) prevede che chi effettua trattamenti di dati personali è tenuto ad informare il soggetto interessato, su quali dati vengano trattati e su taluni elementi qualificanti il trattamento: esso deve avvenire con correttezza liceità e trasparenza, tutelando la Vostra riservatezza ed i Vostri diritti.
In ossequio a tale norma Vi forniamo le seguenti informazioni:
 
Natura dei dati trattati
Trattiamo i Vostri dati anagrafici e fiscali, nonché i dati di natura economica che sono necessari per lo svolgimento dei rapporti contrattuali, in essere o futuri, con la Vostra società.
Non siamo in possesso di alcun Vostro dato qualificabile come sensibile (art. 4 lettera d) del codice) o giudiziario (art. 4 lettera e) del codice).
 
Finalità del trattamento
I Vostri dati vengono trattati in relazione alle esigenze contrattuali, ed ai conseguenti adempimenti degli obblighi legali e fiscali, nonché per consentire una efficace gestione dei rapporti finanziari e commerciali.
I dati verranno trattati per tutta la durata del rapporto contrattuale ed anche successivamente, per l'espletamento di obblighi di legge e per finalità amministrative e commerciali.
 
Modalità del trattamento
Il trattamento dei dati avviene mediante l'utilizzo di strumenti e procedure idonei a garantirne la sicurezza e la riservatezza e potrà essere effettuato sia mediante supporti cartacei, sia con l'ausilio di mezzi informatici.
 
Obbligo o facoltà di conferire i dati
Per quanto concerne i dati che siamo obbligati a conoscere, al fine di adempiere agli obblighi previsti da leggi, da regolamenti e dalla normativa comunitaria, ovvero da disposizioni impartite da Autorità a ciò legittimate dalla legge e da organi di vigilanza e controllo, il loro mancato conferimento da parte Vostra comporta l'impossibilità di instaurare o proseguire il rapporto, nei limiti in cui tali dati sono necessari all'esecuzione dello stesso.
Per quanto riguarda i dati che non siamo obbligati a conoscere, il loro mancato ottenimento sarà da noi valutato di volta in volta, e determinerà le conseguenti decisioni, rapportate all'importanza per la nostra organizzazione dei dati richiesti e non conferiti.
 
Ambito di conoscenza dei Vostri dati
Le seguenti categorie di soggetti possono venire a conoscenza dei Vostri dati, in qualità di responsabili o incaricati del trattamento, nominati dalla scrivente, titolare del trattamento:
·   dirigenti, amministratori e sindaci
·   uffici di protocollo e segreteria interni
·   consulenti esteri e commercialisti
·   istituti di credito ed assicurazioni
·   società di revisione - revisori contabili
·   addetti alla contabilità ed alla fatturazione
·   addetti alla commercializzazione dei servizi
·   agenti e rappresentanti.
 
Comunicazione e diffusione
I Vostri dati non verranno da noi diffusi, con tale termine intendendosi il darne conoscenza a soggetti indeterminati in qualunque modo, anche mediante la loro messa a disposizione o consultazione.
I Vostri dati potranno da noi essere comunicati, con tale termine intendendosi il darne conoscenza ad uno o più soggetti determinati, nei seguenti termini: 
-a soggetti che possono accedere ai dati in forza di disposizione di legge, di regolamento o di normativa comunitaria, nei limiti previsti da tali norme
-a soggetti che hanno necessità di accedere ai Vostri dati per finalità ausiliare al rapporto che intercorre tra Voi e noi, nei limiti strettamente necessari per svolgere i compiti ausiliari (si citano a titolo indicativo gli istituti di credito e gli spedizionieri)
-a soggetti residenti in Paesi facenti parte della Comunità Europea ed a soggetti residenti in Paesi Extra-UE per motivi strettamente legati all'esecuzione dei contratti in essere con la vostra organizzazione.
-a soggetti nostri consulenti, nei limiti necessari per svolgere il loro incarico presso la nostra organizzazione, previo nostra lettera di incarico che imponga il dovere di riservatezza e sicurezza.
 
I Vostri diritti
Riportiamo di seguito l'estratto dell'articolo 7 Dlgs 196/2003, per ricordarVi che potete esercitare nei nostri confronti i seguenti diritti: ottenere la conferma dell'esistenza di dati personali che Vi riguardano, anche se non ancora registrati, e la comunicazione in forma intelligibile, l'indicazione dell'origine dei dati personali, nonché delle finalità e modalità del trattamento; l'indicazione della logica applicata nei trattamenti effettuati con l'ausilio di strumenti elettronici; l'aggiornamento, la rettificazione ovvero, quando vi avete interesse, l'integrazione dei dati; la cancellazione, la trasformazione in forma anonima o il blocco dei dati trattati in violazione di legge; la cancellazione, la trasformazione in forma anonima o il blocco dei dati di cui non è necessaria la conservazione, in relazione agli scopi per i quali i dati sono stati raccolti o successivamente  trattati; l'attestazione che l'aggiornamento, la rettificazione, l'integrazione, la cancellazione, la trasformazione in forma anonima o il blocco sono stati portati a conoscenza, anche per quanto riguarda il contenuto, di coloro ai quali i dati sono stati comunicati o diffusi, tranne che nei casi in cui tale adempimento si riveli impossibile o comporti un impiego di mezzi manifestamente sproporzionato rispetto al diritto tutelato; il diritto di opporvi, in tutto o in parte, per motivi legittimi, al trattamento dei dati personali che Vi riguardano, ancorché pertinenti allo scopo della raccolta; il di ritto di opporvi, in tutto o in parte, al trattamento di dati personali che Vi riguardano a fini di invio di materiale pubblicitario o di vendita diretta o per il compimento di ricerche di mercato o di comunicazione commerciale.
 
Responsabile del trattamento dei dati
Per esercitare tali diritti potete rivolgerVi al seguente responsabile, da noi all’uopo nominato ai sensi dell’articolo 13 lettera f) Dlgs 196/2003: Meetweb S.r.l. Via del Parco Margherita, 32 – 80121 Napoli – tel 081.19364584 – fax 081.2140697
Titolare e responsabili del trattamento
Titolare del trattamento è Meetweb S.r.l. i cui dati anagrafici sono riportati nell’intestazione della presente lettera.
L’elenco completo di tutti i responsabili per il trattamento dei dati personali, sia interni che esterni, da noi nominati è reperibile su Vostra richiesta presso i nostri uffici.
Meetweb S.r.l. – Il legale rappresentante

Accetto *

il blog di meetweb web, comunicazione e marketing

Cambia Layout

Il web design reattivo

Il grande vantaggio del responsive web design: realizzare la versione di un sito web ottimizzata per iPhone.

Il web design reattivo in azione.

Vuoi un nuovo sito web? Richiedi subito un preventivo gratuito

Articoli correlati

Scrivi un commento