Diversi Web designers hanno fornito i loro progetti. Ciò che fa questo sito così interessante è che tutti i progetti sono basati sulla stessa pagina, tuttavia sono radicalmente differenti. I fogli di stile aiutano i designers a separare completamente i contenuti della pagina dallo stile di presentazione. Ciò permette molta libertà di espressione artistica.
Benchè lo scopo di CSS Zen garden fosse di creare una vetrina di design accessibili, i progetti sono piuttosto accessibili, sebbene alcuni siano stati creati con scopi più che altro artistici. L’HTML sottostante sarebbe completamente accessibile agli screen readers, benchè gli utenti vedenti possono trovare il design più all’avanguardia, visivamente un po’ confuso.
Qui c’è uno screen shot della pagina base (noiosa) HTML su cui tutte le pagine di CSS Garden si basano:
Tranquille
Qui c’è la stessa pagina dopo aver applicato il foglio di stile che l’autore ha chiamato “tranquille”:
Deep thoughts
Qui c’è la stessa pagina, con applicato un diverso foglio di stile. Questo, creato da Jason Estes, è chiamato “deep thoughts”:
Prêt-à-Porter
Questo è l’ultimo esempio da CSS Zen Garden che mostro. Si chiama “prêt-à-porter”, di Minz Meyer.Il designer ha creato una pagina molto corta, ma estremamente larga.Lo screen shot cattura circa metà della larghezza di questa pagina. Da un punto di vista di accessibilità, lo scroll orizzontale è altamente scoraggiante perché produce difficoltà alle persone ipovedenti che devono allargare la pagina, consentendo di vedere solo una piccola sezione della pagina alla volta. Comunque, da un punto di vista artistico, può creare un effetto interessante:
Nota: Per rendere questa pagina più accessibile, il designer dovrebbe semplicemente creare una versione dello stesso concetto orientata verticalmente, piuttosto che estendere le colonne oltre il margine destro.