Sai cosa accomuna La Gioconda, la foto del V-J Day a Times Square, un’App e una Landing Page?
La rettangolarità. Sembra un termine strano ed effettivamente lo è, lasciati spiegare cosa significa.
Le strategie visive contemporanee hanno origini antiche. Le foto o i post che carichiamo sui social, così come i prodotti digitali, non sono altro che i discendenti dei quadri che tanto ammiriamo nei musei e a cui attribuiamo una valenza quasi non terrena. Eppure le regole compositive, così come la percezione di un’immagine, sono rimaste inalterate.
Ma chi ha deciso che una foto, un quadro o un cellulare debbano essere per consuetudine rettangolari?
Facciamo un salto indietro nel tempo.
Fino al XV secolo, le rappresentazioni pittoriche, prendevano vita all’interno di tele ( e non solo ) dalle forme più disparate: circolari, ovali, trittiche, polittiche…ma tutto cambiò quando, nel 1494 in un documento veneziano, comparì una nuova parola: “quadro”, la quale si riferiva a un affresco eseguito in uno spazio di parete delimitato da due finestre.
La predilezione per il rettangolo, non dipese da un singolo evento, ma da una serie di circostanze e necessità tecniche e sociali.
Una di queste fu la nascita della stampa a caratteri mobili di Gutenberg ( 1450 ), dove i caratteri, obbligatoriamente messi su una griglia rettangolare, così come le illustrazioni, definirono l’impaginazione a righe e colonne che utilizziamo tutt’oggi, nella stampa, nei prodotti digitali, come ad esempio i siti web.
Il 500, inoltre, sancì l’inizio di un nuovo modo di concepire l’arte, non più sotto commissione di un solo gruppo elitario, ma aperto alla borghesia, vedendo così l’origine delle prime botteghe, dove per praticità e convenienza, i dipinti venivano venduti in cornici rettangolari.
La diffusione di questa “nuova arte”, alla portata di molti e sotto gli occhi di tutti, fece sì, nel corso dei secoli successivi, che il concetto di immagine fosse direttamente associato al rettangolo, diventando una vera e propria ossessione. Ciò che non era ortogonale o squadrato veniva considerato un errore, al punto tale che molte opere ( anche di artisti intoccabili come Tiziano ) furono ritagliate, per ricreare quella simmetria che ormai faceva parte dell’immaginario comune.
Non più una semplice forma geometrica, ma un vero e proprio modo di vedere il mondo.
Perché proprio il rettangolo? Il rettangolo è una finestra su quella che è la realtà, è pratico, ordinato e perfetto. Non a caso la Sezione Aurea ( il rapporto che indica la perfezione e l’armonia delle forme ), è costruita su dei rettangoli ed è alla base non solo di opere di epoche lontane, come il Partenone di Atene o L’Uomo Vitruviano di Leonardo Da Vinci, ma è un pattern ricorrente in natura.
Il culto del rettangolo ci ha accompagnati fino a oggi. Lo possiamo trovare nella fotografia e nella costruzione di essa, con la Regola dei Terzi. Nel cinema, dove un esempio lampante ne è Kubrick, con la sua ricerca maniacale di simmetria. E lo vediamo quotidianamente utilizzando i nostri device, ovvero i nostri computer, cellulari e tablet.
Il processo, che si è sviluppato nei secoli ed è entrato a far parte dell’immaginario comune, di adattare la realtà a una cornice rettangolare, oggi si è evoluto in quelle che sono le scelte di progettazione di un Sito Web, il quale deve risultare accessibile in qualsiasi tipologia di schermo rettangolare. Così nel 2010 si iniziò a parlare di Design Responsive, che può essere definito come:
“…quell’approccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all’ambiente dell’utente in base a fattori come le dimensioni dello schermo, la piattaforma e l’orientamento del device. La pratica consiste in un mix di griglie, layout e immagini flessibili, più un uso accorto delle media queries CSS.”
Per spiegarlo in parole più semplici, con il termine Responsive si intende: la capacità di un prodotto digitale di adattarsi graficamente in modo automatico al dispositivo con il quale viene visualizzato.
La responsività consente di avere un’esperienza di navigazione migliore, infatti, la UX ( User Experience ) di un sito, non può ritenersi corretta e soddisfacente, nel caso in cui l’utente, navigando da smartphone, sia obbligato a ridimensionare contenuti, o si trovi davanti a elementi sovrapposti o fuori misura.
A differenza del Design Adaptive, dove vengono progettate più versioni per una singola pagina Web, nel Design Responsive, vediamo la creazione di una singola versione del sito che andrà ad adattarsi autonomamente al device da dove viene visualizzata. Tale metodologia consente di risparmiare tempo, non presenta limiti di lettura e fa risultare la navigazione più fluida.
Ma come si progetta un sito Responsive?
7 regole per realizzare un Responsive Site in maniera ottimale:
1. Utilizzare delle griglie flessibili. Gli elementi non sono vincolati da unità come centimetri o pixel, ma vengono ridimensionati tramite unità relative, tipo le percentuali.
2. Utilizzare immagini e testi flessibili. Le immagini e i testi flessibili sono visualizzabili a diverse dimensioni. La loro “fluidità”, fa sì che non si vadano a sovrapporre agli altri elementi.
3. Stabilire dei Resolution Breakpoint. Servono a definire dei punti specifici, in cui la presentazione grafica si modificherà, per adattarsi alle dimensioni del dispositivo.
4. Semplificare il layout. Rendere il layout più semplice e meno carico, su device con dimensioni ridotte.
5. Nascondere elementi. Nel passaggio di visualizzazione da Desktop a dispositivo mobile, gli elementi non essenziali, possono essere nascosti.
6. Ricordarsi del touch. Progettare un’interfaccia adatta alle interazioni touch.
7. Media Query. Le Media Query, servono per gestire comportamenti diversi, su device diversi. Sono dei “fogli stile”, definiti sul CSS, che vanno a indicare cambiamenti nel design a seconda del tipo di dispositivo o basandosi su parametri di risoluzione o larghezza del browser.
Uno dei migliori e più noti esempi di Responsive Design, è il sito del “ The Boston Globe “, che riesce a gestire un’enorme quantità di elementi e informazioni, in maniera egregia, su qualsiasi dispositivo.
In conclusione, possiamo affermare, che i nostri device non sono altro che la versione moderna dei quadri del XVI secolo, con la stessa volontà di rappresentare parte della realtà, adattandola, nel modo migliore, a un contenitore rettangolare.
Vuoi la sicurezza che il tuo Sito Web sia Responsive? Contattaci per valutare insieme ai nostri Designer l’usabilità del tuo prodotto digitale.
Fonti:
-Responsive Web Design – What It Is And How To Use It:
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
Ultimi progetti
