Quando ho bruciato il vecchio monitor CRT, ho approfittato della disgrazia per acquistare un moderno LCD widescreen. Il mio schermo è un misero 19 pollici, non certo una periferica degna dell’Enterprise, ma nonostante questo capita spesso di imbattermi in alcune piccole incoerenze nei layout dei siti che visito, piccoli errori dovuti al fatto che chi ha progettato quel sito non aveva un monitor come il mio.
Ecco allora un prontuario pratico da tenere a portata di mano per evitare inconvenienti di questo tipo:
-
Text-Resize.
È banale ricordarlo, ma che il tuo layout sia fisso o liquido, essere predisposti per il text-resize è importantissimo. I widescreen sono molto larghi e la dimensione dei tuoi caratteri potrebbe essere troppo piccola in proporzione. Se il tuo layout è liquido, ad alte risoluzioni dello schermo, il testo rischia di disperdersi in lunghezza: in questo caso un piccolo ingrandimento rende le cose più facili. Di IE6 si possono ignorare e non correggere molte cose, ma il text-resize è vitale.
-
Non ripetere le immagini di sfondo.
Si trovano spesso elementi (header, body..) con una grande immagine di sfondo, progettati affinché alla risoluzione ottimale questa sia perfettamente dimensionata. Nei layout fissi è un problema che non esiste, ma in quelli liquidi od elastici l’eccessiva lunghezza della finestra può portare ad un ripetizione delle immagini di sfondo con conseguenze fastidiose. In questo caso bisogna ricordarsi di impostare sempre un regola di repeat nel background. È quello che accade in questa pagina dell’ottimo NelSenso.it. -
Ripetere le immagini di sfondo.
No, non è il contrario della regola sopra. Non proprio. Spesso si usa una grande immagine di sfondo al body che simula un ripetizione orizzontale, mentre in realtà non lo fa. Se il trucco funziona per risoluzioni standard, non è detto che funzioni sui widescreen. Un esempio è Photomatt. Può essere un’ idea cercare di dividere l’immagine di sfondo in due componenti, una centrale e una da ripetere, e applicare poi la prima al body e la secondo ad un div contenitore opportunamente dimensionato. -
Nascondere il testo.
Molte tecniche di image replacement spingono con margini negativi il testo fuori dalla zona del viewport per nasconderlo. In questo caso bisogna utilizzare sempre i pixel, perché l’em è una grandezza variabile, e assicurarsi di avere usato un margine sufficiente. Non fidatevi di -999px, potrebbe non bastare sempre. Questo è un errore che fa anche Yahoo. -
Solo un elemento liquido dentro un layout liquido.
Nei layout liquidi, l’elemento da dimensionare in percentuale dovrebbe essere sempre e solo quello che contiene i contenuti principali. Barre laterali, menu, e altri elementi decorativi hanno bisogno di una dimensione fissa perché, se liquidi, rischiano di occupare troppo spazio su un widescreen, svalutando il proprio contenuto e deviando l’attenzione dei visitatori da zone più importanti.
-
Evita il posizionamento assoluto rispetto al viewport.
Un altro motivo valido per evitare il posizionamento assoluto rispetto al viewport di elementi vitali del layout. Potete immaginare il perché.
Come preannunciato gli esempi che ho riportato sono pochi, ma abbastanza generalisti da poter essere utili. Ovviamente se ne avete di vostri mi farebbe piacere aggiungerli a questa lista così da ingrandire il vademecum. Fatemi sapere.
Se siete in cerca di qualche lettura più tecnica, vi posso consigliare una paio di articoli davvero interessanti:
- Preparing for Widescreen - Mike Mandaio. Sul blog dell’autore c’è una correzione successiva riguardo al javascript utilizzato.
- Switchy McLayout: an adaptative layout technique - Marc van Den Dobbelsteen
10 Commenti & 2 Trackbacks
Nel realizzare i miei layout, ho sempre preferito la soluzione “liquida” o “elastica”. Non sapevo del quinto punto, che ora mi porta a dover modificare il lavoro fatto fin’ ora sul tema che ti ho fatto vedere.
Cercherò di trovare una soluzione ottimale, non possiedo un widescreen sul mio PC, ma mio fratello sì, controllerò lì che sia tutto ok.
ottimo articolo Laburno.
Aggiungerei forse qualcosa sugli sfondi, ma ancora non ho la lucidità necessaria eheh, forse più tardi.
@ Davide: il quinto forse è opinabile fino ad una certa risoluzione. Sta di fatto che se i contenuti di un elemento non giustificano un crescente spazio orizzontale su cui distendersi non necessitano l’utilizzo di una dimensione percentuale.
@Laura: allora aspetto la prossima overdose di caffè :) (ovviamente se te ne fai…a me capita spesso!)
Eccomi, ci sono.
Volevo dire, che esistono dei trucchetti in giro per far sì che lo sfondo jpg di un sito si “spalmi” fino a coprire 100% x 100% della grandezza dello schermo.
Questa è un’arma a doppio taglio, nel senso che funziona con foto che anche ridimensionate innanzitutto non perdano troppo in qualità e definizione, e in secondo luogo se “strechate” in larghezza, come avviene per i widescreen, non risultino poi inguardabili.
Due esempi “miei”:
http://www.qimmo.eu/ (qui lo sfondo sono due Q riflesse) e anche strechate non danno problemi di estetica.
Idem qui: http://www.kalisperaviaggi.it/
dove l’immagine non presenta elementi (che so, una barca, un viso, etc) che strechati risultassero sgradevoli.
È vero. Buon consiglio ed ottimi esempi. Mi piace soprattuto la resa del primo con le due Q di sfondo.
Idea di mia sorella, anche lei webdesigner ^^
Ciao. ero in cerca di ispirazione ed idee in genere su come realizzare un nuovo layout per il mio blog, e ho trovato questo articolo che mi ha fatto riflettere sul fatto che i monitor 16:9 per pc si stanno diffondendo molto, soprattutto per i portatili …persiono io ho un 16:9 nel mio ma non gli ho dato mai tanto peso.
Grazie e ciao a tutti
[…] Progettare un layout a prova di Widescreen - Laburno (tags: widescreen layout css design webdesign development web) […]
Ciao Pasquale,
grazie del commento e benvenuto!
[…] problema 16:9 vs 4:3 non pare essere così insormontabile, seguendo qualche buon accorgimento (come quelli suggeriti da Laburno, per esempio). Quello che, a mio avviso, è sempre risultato essere più limitante è cercare di […]
Grazie per la citazione! ;)
Ottimo articolo!
Ciao NelSenso,
grazie a te del commento :) Spero di avervi dato un suggerimento utile!