Progettare un sito internet con la risoluzione più adatta ai browser in commercio

Tanto per riprendere un discorso basilare, ma che non mai male ripetere.

La risoluzione di un monitor, e di conseguenza del browser sono differenti da computer a computer. Pertanto ne dobbiamo tenere conto quando progettiamo un sito internet. Sarà capitato, ai più inesperti, con un computer ultima generazione e un mega schermo fantastico, di progettare il primo sito bellissimissimo e di presentarlo al cliente con le migliori intenzioni, e poi sentirsi dire che fa schifo perchè è innavigabile. Stupore: come mai, che è così bello ed accessibile?

Avete forse tralasciato il discorso risoluzione. Essì, perchè se avete un monitor intergalattico e progettate un sito affinchè occupi in modo armonico un 1920×1200, scoprirete con sorpresa che sul monitor del vostro cliente compaiono doppie barre di scorrimento e vedrete solo una porzione di quanto pensavate. Tutto ciò perchè il vostro cliente ha un monitor 1024×768 nella migliore delle opzioni.

La regola

La regola impone che si progetti perlomeno per una risoluzione MASSIMA di 1024×768, pertanto con una larghezza massima di 960px. Perchè 960? perchè è studiato che siano i pixel giusti affinchè ci sia anche un po’ di margine dai bordi del browser, quale esso sia, lasciando respiro e perchè esistono anche griglie preimpostate che ci permettono di avere colonne e margini omogenei, ma siete liberi di gestirvi poi gli spazi anche senza griglia, come meglio credete.

Questa è però la migliore delle ipotesi. Esistono purtroppo ancora persone che possono usufruire di monitor a risoluzione 800×600 (scuole, università, etc) pertanto, se orizzontalmente è ancora accettabile “perdere” 160px* (la differenza fra 960 e 800px), poichè supponiamo che sia lo spazio occupato da una terza colonna di contenuti secondari o pubblicità, non è plausibile che verticalmente, nei primi 600px, non vi siano alcuni elementi fondamentali come:

  • il logo
  • il menu principale di navigazione
  • se presente, almeno uno “spicchio” di menu secondario di navigazione

Questo perchè, come è intuibile, se avessimo una risoluzione 800×600 e ci ritrovassimo una bella slide di immagini, magari anche con il logo del sito, ma senza opportunità di accedere al menu principale di navigazione, state sicuri che quell’utente lo perderemo.

I nuovi media

Le risoluzioni inferiori a 800×600 però, continueranno ad esistere nelle nostre statistiche. Non però perchè alcuni abbiano un monitor ante-guerra, ma perchè anzi significa che il nostro sito è stato navigato da palmari, cellulari e iphone. Come comportarci in questo caso?

Alcuni siti, se progettati in modo fluido (con dimensioni delle colonne non fisse) e senza molta grafica, potrebbero continuare ad essere fruibili anche senza ulteriori accorgimenti. Si tende però di solito a creare una versione “mobile” per i siti che andiamo a creare, ed in genere ciò si fa associando un foglio di stile adeguato e semplificato per tali risoluzioni. Semplificato nel senso che si tendono ad eliminare elementi di abbellimento o inutili per chi naviga da un cellulare e si rendono fruibili i puri contenuti, presentati seppure sempre in modo gradevole.

Con WordPress è possibile usare il plugin Mobilepress che ci crea un foglio di stile standard applicabile quando si naviga da mobile (lo riconosce automaticamente), ma per i siti statici o dinamici che siano, è sufficiente in realtà usare un attributo particolare nello scrivere il tag “link”:

media=”screen” risponde al classico schermo, mentre
media=”handheld” risponde ai dispositivi mobili.

Conclusioni e risorse

Progettiamo pertanto fin dall’inizio con le dimensioni giuste in testa, e testiamo comunque le varie risoluzioni una volta buttato giù l’html, in modo da verificare che tutto funzioni correttamente.

Browize ci permette di ridimensionare il nostro browser in modo automatico. Sarà poi sufficiente navigare la nostra pagina per testarla.

Se usate firefox, l’add-on Web Developer ci permette di ridimensionare il browser con un solo click sull’apposita funzione presente sulla nostra barra di navigazione del browser (oltre a contenere altre funzioni utilissime di progettazione).

*eppur mi mangerei le mani invece di perderli

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

%d blogger hanno fatto clic su Mi Piace per questo: