Continuando sul tema dell'usabilità , analizziamo una caratteristica molto importante: permettere agli utenti di ridimensionare i caratteri.
Avevo già affrontato velocemente questo argomento nel primo articolo della serie sul design del blog, ma ora vorrei affrontarlo più ampiamente perchè è molto importante dare all'utente la possibilità di adattare un sito al suo monitor o alla sue capacità visive (immaginate gli ipovedenti).
Inoltre avere un sito che non "si rompe" (cioè non perde l'impaginazione e la formattazione) se l'utente ingrandisce i caratteri è anche una messa mostra di un sapiente uso degli standard CSS e XHTML, ed è qundi molto "cool" avere un sito ridimensinabile :-)
Perchè è necessario avere un sito ridimensionabile?
Sui monitor di grosse dimensioni, se l'utente ingrandisce la finestra del browser e il sito ha un layout a dimensione fissa, vedrà sicuramente il sito su una colonna, e tutto il resto della finestra con solo lo sfondo del sito.
All'opposto se si sviluppa un sito per una risoluzione più grande rispetto a quella dell'utente che lo sto leggendo, appariranno, inevitabilmente, delle orrende scrollbar orizzontali.
Inolte, se siete stati così bravi da non specificare in maniera assoluta le dimensioni dei font (si, basta questo per rendere ridimensionabile il testo), un layout bloccato in larghezza rende invano il vostro buon proposito. Immaginate un font "Molto Grande" in una colonna di larghezza fissa 250px: l'utente vederebbe 3 caratteri per riga... non una bella soluzione.
Come esempio di blog dal design semplice, ma che è stato ottimizzato pensando a queste problematiche vi indico quello di un blogger appena passato a SubText da CommunityServer 1.1. Questo blog usa la skin Piyo, sviluppata da me e da mia moglie prendendo ispirazione da quella ufficiale di Blojsom.
Questo blog è visibile con due modalità: "fixed size" e "elastic".
Se sperimentate ad ingrandire la dimensione dei font (con Firefox basta ruotare la rotellina del mouse tentendo premuto il tasto Ctrl) noterete che nella modalità "fixed" i testi si ingrandiscono, ma i titoli si posizionano su 3 righe.
Se invece passate alla modalità "elastic" noterete che l'area contenutistica del sito si espande fino a riempire tutta la dimensione della finestra, e che il rapporto tra testo e dimensione della finestra torna simile a quanto il testo era in dimensione normale.
Se per rendere ridimensionabile il testo basta specificare le dimensioni dei font in maniera relativa invece cha assoluta, usando small e medium invece che 10px e 15px, per rendere ridimensionabile il layout, e farlo in maniera tale che tutto non si "spacchi" è necessario usare vari accorgimenti nello sviluppo tramite CSS.
Un ottima reference per questi trucchi è Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS.
Questo libro affronta le varie problematiche connesse con lo sviluppo di siti sviluppati interamente con CSS: nel farlo inoltre ha anche un approccio didattico, cioè spiega un poco la teoria che sta alla base dei CSS. Ma non è un libro per tutti: è un manuale avanzato che spiega come risolvere i vari problemi di compatibilità tra i browser, usando vari trucchi che sfrtuttano vari bugs nel parsing dei foglii di stile.
Tra i vari trucchi, ad esempio, ricorda di non usare come sfondo di box, applicato usando i CSS, delle immagini fatte su misura, ma di farle decisamente più grandi, per permettere al box di espandersi senza far intravedere lo sfondo della pagina (vedete ad esempio i "tabs" usati nell'admin di SubText).
powered by IMHO 1.3
posted @ mercoledì 22 marzo 2006 12:31