Guida alla creazione di un blog di successo: permettere la ridimensionabilità di font e layout

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

I'm a Wally addict!!!

Non sapevo cosa fare per passare il tempo....

Podcast image on Ipod dashboard Podcast image expanded on Ipod

ed ecco portata la faccia di WallyM (all'anagrafe Wallace B. McClure) sul mio Ipod, come immagine del file MP3 coi i suoi podcasts...

powered by IMHO 1.3

Sviluppare Ajax con l'aiuto di Yahoo!

E' una notizia un po' vecchia, di un mesetto fa circa: Yahoo! ha rilasciato alla community di sviluppatori le sue librerie javascript per la gestione delle connessioni via XMLHttpRequest, la gestione del drag-n-drop, la gestione degli eventi, ecc...
Ed in questa occasione ha anche aperto il blog YUIBLOG, il Yahoo! User Interface Blog.

Perchè lo riporto solo ora? Perchè oggi ho avuto modo di usare un pezzo di questa libreria, per la precisione la libreria Connection Manager.

Questa permette, con una sola riga di codice, di fare una chiamata XHR e di ottenerne il risultato, sia in maniera asincrona che i maniera sincrona:

var cObj = YAHOO.util.Connect.asyncRequest('GET','http://www.yahoo.com',callback,null);
La libreria in questione non è nulla di particolare, e probabilmente chiunque con un po' di conoscenza di javascript e XHR avrebbe potuto scriverla in una giornata, ma trovarsela già fatta è sempre un risparimo di tempo. Inoltre sapere che quelle 200 righe di codice sono le stesse che fanno andare Yahoo mail o Launch danno fiducia: sicuramente saranno state bene testate :-)

[Tags: , , , ]

Atlas Go-Live!!!

Al MIX di Las Vegas, la conferenza sul Web 2.0, è stato appena annunciato il rilascio della CTP di Marzo di Atlas.

La buona notizia, è che... è Go-Live... cioè può essere usato in produzione!!!

[ Tags: | | ]

powered by IMHO 1.3

«March»
SunMonTueWedThuFriSat
2627281234
567891011
12131415161718
19202122232425
2627282930311
2345678