Da anni nel mondo del web design un sito è sempre stato il primo esempio da citare parlando di CSS e delle loro potenzialità. Ovviamente mi riferisco a CSS Zen Garden, un’idea del canadese Dave Shea, che ha permesso a tutti di capire cosa era possibile fare con i fogli di stile.
Se però non ve ne siete accorti, da tempo il sito non veniva più aggiornato con nuovi lavori. Soprattutto per l’impossibilità del suo ideatore di gestire l’enorme numero di contributi che gli vengono tuttora inviati ogni giorno.
Adesso però le cose sono cambiate, ed è proprio il caso di annunciare che CSS Zen Garden è tornato a nuova vita. Dave Shea con un post sul suo sito chiarisce la situazione ed annuncia i cambiamenti in atto: da ora in avanti non esisterà più la suddivisione tra Official Designs e All Designs.
In passato infatti tutti i lavori venivano conservati e catalogati, in un’immenso archivio destinato a diventare sempre più grande. Con l’aumentare delle segnalazioni la cosa era diventata ingestibile, ed ora saranno presi in considerazione solo i contributi migliori, gli Official Designs. Tutti gli altri saranno scartati, ma sarà sempre possibile riprovare.
Nel momento in cui scrivo ci sono già 4 nuove realizzazioni, non male considerando che il post di Dave Shea è del 25 Ottobre scorso.
Che ne pensate? Io sono felice di questa scelta: non sarà il massimo per chi sperava di vedere il proprio lavoro online anche tra quelli non ufficiali, ma almeno in questo modo un sito storico come CSS Zen Garden è tornato attivo.
Se avete dei lavori pubblicati segnalateli pure nei commenti, oppure raccontate la vostra esperienza.
Tempo di abbandonare il supporto a Internet Explorer 6 nella realizzazione di nuovi siti? La provocatoria proposta viene in uno degli ultimi post del nuovo Web Designer Wall, dallo stesso autore di N.Design Studio.
L’idea è che gli utenti che utilizzano IE6, quando inizieranno a visualizzare male i siti web, decideranno di cambiare e di liberarsi dal browser più odiato dai web designer. Ragionamento lineare, ma errato, perchè le cose non sono così semplici.
Parlando di numeri, secondo The Counter, gli utenti ad Agosto 2007 che utilizzano ancora IE6 sono ben il 50%. Cifra considerevole, che ci mostra come questo sia ancora il browser più utilizzato, nonostante l’uscita di Explorer 7 e la crescita di Firefox.
Cosa fare poi quando è il cliente ad utilizzare Explorer 6? Non è plausibile presentarsi suggerendogli di cambiare browser: dovrebbe essere sempre il web designer ad adattarsi alle esigenze altrui, non viceversa.
In sostanza abbandonando il supporto ad IE6 si rischiano numerosi problemi con tutti quegli utenti che non vogliono (o non sanno) aggiornarsi, i quali non esiteranno a dare la colpa a chi ha realizzato il sito.
E’ quindi troppo presto per abbandonare il supporto ad Explorer 6, ma una soluzione intelligente c’è. E’ possibile fornire a tutti i browser più moderni dei dettagli in più, soprattutto con l’uso di selettori dei CSS3, o dettagli grafici come l’ombra dei testi su Safari tramite la proprietà text-shadow. Con dei vantaggi visibili sarà più facile decretare una morte rapida per il browser di casa Microsoft.
So che molti vorrebbero poter agire diversamente, ma questo è sicuramente uno dei compromessi migliori. Se avete esperienze personali sull’utilizzo di Explorer 6 da parte di clienti, conoscenti, o se lo usate voi stessi e volete difenderlo, dite la vostra nei commenti.
Su internet i siti realizzati con i CSS sono in costante aumento, ed a testimoniarlo sono le gallerie showcase che raccolgono i migliori lavori. Ne esistono molte, alcune più autorevoli di altre, ed una è nata da poco tempo: CSSGlance.
Ne parlo per un valido motivo: è un lavoro tutto italiano con alcuni spunti interessanti per emergere dalla massa.
I siti segnalati vengono classificati in base a diversi parametri:
media dei voti, visto che ogni entry può essere giudicata dai visitatori
piattaforma CMS, con una netta predominanza di WordPress sulle altre
colore principale
tipologia di contenuto, dai blog alle web agency
tipo di layout: fisso, liquido o elastico
menu di navigazione orizzontale o verticale
numero di colonne
rispetto degli standard
utility varie, come la presenza di una photogallery
Quello che mi ha colpito è la presenza di una sezione dedicata ad articoli sul web design, cosa che non è presente nella maggior parte degli showcase, che si accontentano esclusivamente di mostrare siti.
Penso che insistendo in questa direzione, cercando di innovare con funzionalità originali, CSSGlance possa ritagliarsi un buono spazio nel panorama delle gallerie CSS. C’è ancora del lavoro da fare, ma le premesse sono interessanti.
Cosa ne pensate? Se avete idee e suggerimenti i creatori di CSSGlance potrebbero benissimo considerarli, dite la vostra!
Non tutti lo sanno, ma ogni browser consente di impostare un colore predefinito per lo sfondo ed il testo delle pagine web. Queste impostazioni vengono utilizzate quando il sito visitato non ha un colore già stabilito: di solito sono rispettivamente bianco e nero, ma un utente potrebbe preferire altre combinazioni.
Questo comporta possibili problemi quando in un sito il body non ha un colore di sfondo. Poniamo ad esempio che un utente abbia il rosso come background predefinito; questo è quello che vedrà andando sul sito bloggers.com:
Un altro esempio si trova stavolta su Modern Life is Rubbish che recentemente è stato anche ridisegnato.
Il problema si aggira facilmente ricordandosi sempre di dare al body un colore di sfondo:
body { background: #fff }
I due siti che ho fornito come esempio sono stati i primi che ho scoperto, ma se fate una ricerca non sarà troppo difficile trovare qualche altro caso clamoroso. Ricordatevi di questo particolare quando realizzate un sito, vi eviterà le lamentele dei clienti (e dei visitatori) che hanno dei colori preimpostati sul loro browser.
I CSS3 sono già da tempo disponibili con le loro nuove regole, l’unico problema come sempre è il supporto dei browser, sempre scarso soprattutto considerando Internet Explorer.
Mentre Firefox ed Opera già da alcune versioni permettono di utilizzare nuovi selettori dei CSS3, la Microsoft solo con IE7 ha iniziato a supportarli. E’ giunto quindi il momento di approfondire la questione: ci saranno sempre degli utenti che continueranno ad utilizzare Internet Explorer 6, ma poichè i nuovi browser ce lo permettono, perchè non osare nella scrittura dei fogli di stile?
Ho realizzato una semplice pagina di esempio con alcuni selettori, in particolare quelli che consentono di controllare un elemento dall’attributo e dal valore dell’attributo stesso.
Ecco un breve elenco.
elem[att]: permette di selezionare tutti gli elementi di tipo “elem” con attributo “att”, ad esempio a[title] cattura tutti gli elementi a che hanno un title.
elem[att=val]: seleziona tutti gli elementi con attributo “att” di valore esattamente uguale a “val”
elem[att~=val]: seleziona gli elementi con attributo “att” il cui valore sono più parole separate da spazi bianchi, di cui una è esattamente uguale a “val”
elem[att^=val]: seleziona gli elementi con attributo “att” il cui valore inizia con “val”
elem[att$=val]: seleziona gli elementi con attributo “att” il cui valore termina con “val”
elem[att*=val]: seleziona gli elementi con attributo “att” il cui valore contiene almeno una stringa con valore “val”
Queste sono solo alcune delle novità, ma è già un buon punto di partenza per giocare con il codice senza dover usare troppi div contenitori, classi e id. Consiglio di guardare l’esempio ed il relativo codice, più chiaro di molte parole.
E’ buona norma comunque ricordare di controllare anche la resa su IE6, fornendo un’alternativa per chi ancora utilizza questo browser.
Qualcuno l’avrà già notato, il validatore CSS del W3C è stato recentemente aggiornato ed alcune novità sono degne di nota.
Prima di tutto adesso supporta i CSS 2.1, visto che precedentemente il supporto di default era fermo ai CSS 2.0. E’ stata anche cambiata la veste grafica, con javascript che migliorano l’usabilità dell’interfaccia, ed è stato aggiunto il supporto a più lingue.
Restano alcuni problemi minori con javascript disabilitato, ma il servizio è pienamente fruibile, almeno dopo le prove che ho fatto.
Colgo l’occasione per ricordare una cosa importante: i warning che troverete praticamente sempre nei report vanno saputi interpretare. Un buon CSS non è detto che debba esserne privo.
Uno dei warning più comuni, ad esempio, riguarda la mancanza di un colore di sfondo quando è stato impostato il colore del testo, ma il validatore non può sapere che magari quel colore di sfondo è stato già specificato in un altro selettore.
Fate attenzione quindi, potete benissimo modificare il vostro foglio di stile per eliminare i warning, ma questo vi porterà ad un codice ridondante, spesso inutile, e sicuramente più pesante.
P.S.: per saperne di più sull’aggiornamento del validatore CSS, trovate maggiori informazioni sul blog dedicato
Il 2006 sta arrivando al termine, e come è giusto che sia iniziano ad uscire in rete alcune previsioni per il 2007 di web designers e sviluppatori.
Ho letto un interessante articolo a riguardo, che si sbilancia su 5 argomenti, dall’accessibilità all’utilizzo di AJAX nelle pagine web. Questa una sintesi, non necessariamente tradotta dall’originale:
1. AJAX e DHTML saranno usati con cautela
A quanto pare ci si sta rendendo conto che se si è capaci di fare una cosa, non è necessario integrarla per forza nei propri lavori. Nel 2007 dopo la grande crescita di pagine in AJAX, contenuti dinamici, e javascript in abbondanza, ci sarà probabilmente un passo indietro. Meglio ottimizzare le pagine ed evitare l’integrazione di script che pesano più del necessario.
2. Addio angoli arrotondati
Previsione abbastanza azzardata questa.. che vede l’abbandono dei famosi rounded corners per concentrarsi su altri elementi grafici: linee, texture e contrasto.
3. Accessibilità per tutti
Internet continua a crescere, ed in questo processo è evidente l’attenzione sempre maggiore verso gli standard web e l’accessibilità. Nel 2007 queste tematiche avranno ancora più importanza.
4. Diffusione di CSS2 e CSS3
Internet Explorer 7 inizierà a diffondersi, e questo aiuterà l’utilizzo nei CSS di regole e selettori fino ad oggi poco supportati. Non si arriverà probabilmente a sfruttare le potenzialità dei CSS3, ma IE6 resterà solo su una minoranza di computer.
Obbligatorio offrire un’esperienza migliore a tutti gli utenti che navigano con Firefox, Opera, Safari e IE7.
5. Nascita di nuovi talenti
Previsione abbastanza scontata: è facile immaginare la nascita di nuovi talenti nell’ambito del web design, degli standard web e della programmazione. Anche in questo campo, probabilmente arriveranno novità dall’Asia.
Queste sono le previsioni di Ted Drake, pubblicate sul suo blog. Interessanti, anche se quella sugli angoli arrotondati mi lascia abbastanza dubbioso.. sicuramente è un’opinione basata su gusti personali.
E voi quali idee avete sul 2007 che arriverà? Io ritengo molto verosimile la prima previsione: è ora di abbandonare librerie javascript che pesano anche più di 200kb!
Il 13 Novembre è stato pubblicato su A List Apart un articolo su come creare sfondi sfumati tramite i CSS, utilizzando un’unica immagine di sfondo.
L’idea è interessante, ma si basa su un presupposto: è necessario utilizzare un png trasparente per ottenere l’effetto desiderato. Ho già parlato in passato dei problemi che esistono attualmente con questo tipo di immagini, ed infatti la trasparenza non è supportata da Internet Explorer 6.
L’autore dell’articolo presenta una soluzione al problema basata sul filtro AlphaImageLoader, ma si dimentica di dire un particolare importante: in questo modo il CSS non sarà valido.
Discutibile anche la scelta di inserire l’immagine trasparente direttamente nel codice per poterla ridimensionare. In questo modo l’html prodotto ha un elemento presentazionale al suo interno che non ha senso di trovarsi lì. Io avrei fatto tutto dal foglio di stile, ripetendo l’immagine in orizzontale con un semplice repeat-x: background: url(grad_white.png) repeat-x;
Riassumendo, l’idea è molto interessante e sarà valida con IE6 fuori circolazione, ma non mi sentirei di consigliare questa tecnica così com’è, applicando almeno le modifiche citate.
Il 1° Novembre ci saranno due eventi in contemporanea: il CSS Reboot che molti ricorderanno nelle sue passate edizioni, e lo Standards Reboot.
In breve, raccoglieranno i siti di tutti coloro che apporteranno dei cambiamenti alla grafica entro questa data. La cosa inizia sicuramente a perdere buona parte del suo fascino originario, ma esserci non fa mai male, se si ha del tempo da spendere per l’iniziativa.
Questo sito salvo imprevisti (= mancanza di tempo) parteciperà, non prevedo uno stravolgimento del look, ma è l’occasione buona per migliorare l’aspetto di alcuni elementi ed apportare diverse novità.
Aggiornamento: sul blog di Christian Montoya c’è un interessante articolo a riguardo, con la sua opinione su questi eventi che stanno diventando sempre più simili ai soliti siti showcase.
Oltre a questo, vengo a sapere che CSS Reboot ha cambiato proprietario, ed a quanto pare il sito attuale presenta diversi problemi soprattutto lato server. Vedremo cosa succederà il 1° Novembre, chissà se assisteremo ad un bel collasso del sito.
Un recente articolo di A list apart mette ben in chiaro cosa ci si può aspettare quando si inizia ad utilizzare i CSS nello sviluppo di siti web. Non solo per cambiamenti minori, ma soprattutto per separare gli elementi presentazionali (layout, immagini di sfondo, decorazioni, tipografia..) dal codice vero e proprio.
Imparare ad utilizzare i fogli di stile richiede tempo e pazienza, ed è bene non arrivare impreparati all’appuntamento. Per questo ho trovato l’articolo molto interessante.
Per tutti coloro che hanno qualche problema con l’inglese tecnico o vogliono leggere un riassunto, ecco una traduzione (libera) che può chiarire le idee meglio di tante inutili discussioni sull’argomento CSS.
Lezione n°1: Tutto quello che sai è inutile.. o quasi
Iniziare a lavorare con i CSS comporta un rapido colpo di spugna. Duro da ammettere, ma è così. Bisogna prepararsi a fare tabula rasa e cominciare da zero per apprendere al meglio tutte le tecniche. Ovviamente restano valide tutte le conoscenze su design, programmazione, usabilità, ecc..
Lezione n°2: Niente apparirà allo stesso modo ovunque
Ovviamente il riferimento è alla renderizzazione dei vari browser. Tutt’ora è difficile raggiungere lo stesso identico risultato su Firefox, Internet Explorer, Opera, Safari.. differenze non sostanziali, ma spesso presenti.
Lezione n°3: Spesso sarà necessario scegliere il minore tra due mali
Nello sviluppo di un sito, si presenterà prima o poi la necessità di scendere a compromessi. Ci saranno siti in cui si dovrà rinunciare ad alcune funzionalità programmate in partenza, limitazioni relative all’accessibilità, e così via.
Lezione n°4: La perfezione si raggiunge non quando non c’è piu niente da aggiungere, ma quando non c’è più nulla da togliere
E’ facile convertire un sito da un layout a tabelle riempiendolo di div e tags inutili. Appesantire il codice non serve, ed è sempre meglio togliere tutti gli elementi non indispensabili in modo da avere una pagina il più semplice possibile.
Lezione n°5: Alcuni siti avranno bisogno di attenzione alla coerenza delle pagine
Se il graphic designer non si occupa di altri aspetti dello sviluppo di un sito, dovrete stare attenti che mantenga una certa coerenza in tutte le pagine. Avere troppi elementi unici per ogni pagina potrebbe portare ad una crescita delle spese, dannosa soprattutto in piccoli progetti.
Lezione n°6: Inevitabili tempi di sviluppo più lunghi
Attualmente i CSS non sono supportati alla stessa maniera da tutti i browser, e finchè non imparerete a memoria tutte le differenze, ci vorrà più tempo a testare il lavoro e verificare che sia coerente su ogni user agent. Avrete però grandi vantaggi nelle fasi successive di manutenzione ed aggiornamento.
Lezione n°7: Contenuti coerenti ed ordinati portano grandi benefici
Se siete stati attenti alla semantica del codice ed alla coerenza dei contenuti, avrete innumerevoli vantaggi: dal poter mantenere la struttura html inalterata nei futuri redesign del sito, alla navigazione da tastiera finalmente possibile.
Lezione n°8: I selettori discendenti sono un must
Il classico errore di chi è alle prime armi con i CSS è riempire il codice di div, e dare ad ogni elemento un contenitore o un id. E’ inutile, e spesso per risolvere ogni problema basta imparare a gestire i selettori discendenti. Se servono spiegazioni.. chiedetemi pure maggiori dettagli nei commenti!
Lezione n°9: Usare CSS hack a volte sarà indispensabile
Se per un progetto avrete tempi ristretti, e dovrete risolvere qualche errore di visualizzazione, la via obbligatoria sarà quella di utilizzare degli hack nei vostri fogli di stile. Non elegante, ma spesso necessario per rientrare in tempi e costi.
Lezione n°10: Risolvere dei bug potrebbe comportare altri problemi
Risolvendo un bug, è probabile che si presenti qualche nuovo problema, magari su un browser differente. Non è però una questione senza soluzione, basta saper trovare il modo giusto: per quanto riguarda soprattutto Internet Explorer, positioniseverything.net è essenziale.
Lezione n°11: Ci saranno sorprese nei layout a colonne
Con layout a 2-3 colonne, si presenteranno spesso problemi di visualizzazione. Per risolverli, in genere sarà necessario specificare sempre height e width di molti elementi, insieme alle proprietà float e clear. Questo va contro alla 4° lezione, ma non si era anche detto della necessità di trovare dei compromessi?
Lezione n°12: Le immagini di background faranno la differenza
Utilizzare immagini di sfondo tramite CSS spesso si rivelerà un’ottima soluzione per migliorare l’impatto grafico del sito. Senza considerare poi i vantaggi verso motori di ricerca e screen reader, che troveranno invece i contenuti testuali nel codice.
In conclusione
Siamo alla fine della guida: questi punti potranno essere considerati soggettivi, ma hanno tutti la loro importanza. Io stesso ne condivido più alcuni rispetto ad altri, ma tenerli sempre presenti quando ci si avvicina per la prima volta al mondo dei CSS non farà male.
Voi cosa ne pensate? Condividete tutto quello che ho scritto?
Da anni nel mondo del web design un sito è sempre stato il primo esempio da citare parlando di CSS e delle loro potenzialità. Ovviamente mi riferisco a CSS Zen Garden, un’idea del canadese Dave Shea, che ha permesso a tutti di capire cosa era possibile fare con i fogli di stile.
I CSS3 sono già da tempo disponibili con le loro nuove regole, l’unico problema come sempre è il supporto dei browser, sempre scarso soprattutto considerando Internet Explorer.