Il blog di Luma

Visto che il web è un organismo mutevole e sempre in evoluzione, è importante costruire siti che crescano e si modifichino con esso invece di rimanere indietro quando un cambiamento si affaccia all’orizzonte.
Un markup pulito e il seguire gli standard web non solo vi aiuta a farlo, ma sulla lunga distanza è un risparmio di tempo e soldi.

Come il web si espande, anche le tecnologie che sfrutta crescono parallelamente. Sebbene l’HTML sia un linguaggio relativamente vecchio, lungo la strada ha acquisito alcuni supporti fondamentali.

Prima Javascript, poi CSS, XML e in seguito AJAX. L’avvento di HTML 5 è dietro l’angolo e già Firefox, Safari, Opera e Chrome lo supportano quasi completamente (naturalmente il solito Internet Explorer è un passo indietro come al solito).
In questo articolo daremo uno sguardo indietro sugli standard web: cosa sono, cosa significano e alcuni consigli utili per aiutarvi ad affrontare questa importante e spesso troppo trascurata questione.

Cosa significa avere un markup “pulito”?

In poche parole, significa ordinato, aderente agli standard, e che utilizza i tag e le strutture di ciascun linguaggio con lo scopo per il quale sono state create.

Un HTML ordinato fa un uso moderato di tag, evita il superfluo e raggiunge lo scopo con il minimo markup necessario. Evita attributi inutili, come CSS inline, e lascia ogni documento strutturato e organizzato.

Allo stesso modo, un CSS ordinato evita inutili ripetizioni, sfrutta l’ereditarietà (ricordate che CSS sta per Cascading Style Sheet) e riutilizza le classi ogni volta che è possibile.

Aderenza agli standard significa che le vostre pagine possono essere validate con gli standard messi a disposizione dal W3C per quanto riguarda l’HTML, CSS e XML. Significa utilizzare i validatori gratuiti del W3C per controllare gli errori, correggerli e testare nuovamente il documento finche non siete il più vicini possibile ad un documento valido al 100%.

Perchè mi dovrebbe interessare? Funziona, non basta?

Ogni progetto ha una scadenza ben precisa e ogni cliente voleva che il sito fosse in rete da ieri. Così come sviluppatori e designers siamo sotto pressione costante per lavorare più velocemente ed in modo efficiente.

E’ facile cadere nella trappola di pensare che veloce significhi trascurato e che un markup pulito, aderente agli standard richieda troppo tempo. E’ facile dire semplicemente “funziona e questo è quello che conta”.

Come no, funziona… per ora, per voi. E il prossimo anno o tra tre anni? O con i nuovi browsers? e l’accessibilità?
Pensate veramente che i maggiori motori di ricerca si atterranno ai vostri metodi particolari e sciatti? Sono molto pignoli, e se non siete attenti alle specifiche potrete dire addio ad un posizionamento decente.

E cosa dire del prossimo povero disgraziato che dovrà mettere le mani sulle pagine che avete creato? Cosa succederà se verrete investiti da un autobus o se verrete rapiti dagli alieni? Qualcun altro deve continuare da dove voi avete lasciato e guarderà il vostro codice cercando di trovarci un senso. Sarà facile, o gli farete venire il malditesta e maledire il vostro nome?

Fatelo bene la prima volta. Questa non è una noiosa paternale. Vi farà veramente risparmiare tempo e soldi e renderà più semplice il lavoro di chi verrà dopo di voi.
Potreste pensare che sia più sbrigativo inserire del CSS inline invece di aggiungere una nuova classe nel vostro foglio di stile. E potreste pensare che sia più semplice buttare là altro HTML senza considerare la struttura generale del documento.

Quando però verrà il momento di aggiornarlo o di ridisegnare l’intero sito, impiegherete molto più tempo a raccapezzarvi nel codice sconclusionato che avete prodotto piuttosto che occuparvene accuratamente in un primo momento. Quando create un nuovo foglio di stile, quelle irritanti righe di codice inline che avete frettolosamente aggiunto torneranno a tormentarvi e impiegherete delle ore a ricercarle e a toglierle.

Estensibilità, Accessibilità, Commutabilità e Test futuri

La navigazione per cellulari sta crescendo come Godzilla pompato di steroidi atomici. Invece di essere relegata ad una elité di fanatici del Blackberry di 5 anni fa, oggi chiunque usa il proprio telefono per navigare sul web.

La tecnologia assistenziale Рscreen readers per non vedenti e dispositivi dotati di interfacce alternative per i diversamente abili Р̬ ormai comune, e naturalmente non volete perdere un cliente o allontanare del traffico solo perch̬ non ne avete tenuto conto.

Il vostro sito sarà probabilmente tradotto in una mezza dozzina di lingue in modo che lettori da tutto il mondo possano trovare i vostri contenuti. Grazie all’Internet Archive, la cache di Google e altri metodi, le pagine pubblicate oggi saranno in giro per molto, molto tempo dopo che saranno state rimosse dalla rete.

Un markup pulito e aderente agli standard farà in modo che il vostro sito possa lavorare in ognuna di queste situazioni.

Cose da fare e cose da evitare

• USARE I TAG PER IL LORO SCOPO. Ad esempio: h1 è al primo livello di importanza nella pagina, seguono poi h2, h3 e così via. Ci dovrebbe essere un solo tag h1 per pagina.
• NOMINATE LE CLASSI E GLI ID IN MODO SEMANTICO, e chiedervi se qualcun altro capirà a cosa serve la Classe/ID solamente dal nome. Quale convenzione ha più senso: #box12 o #comment-footer?
• FATE UN USO PROFICUO DELL’EREDITARIETA’ NEL CSS. Ad esempio: se usate un font in un container, non avete bisogno di specificarlo ancora per ogni elemento child a meno che questo non debba utilizzare un font diverso. Questa pratica manterra il vostro CSS snello e veloce da caricare.
• VALIDATE IL VOSTRO HTML, CSS E XML e correggete quanti più errori possibile. Fate attenzione anche ai messaggi di avviso generati.
• CONTROLLATE IL CODICE GENERATO DA EDITOR WSWYG e ripulitelo se necessario. E’ risaputo che generano codice pieno di elementi superflui e non validi.
• NON inserite stili inline o tag e attributi estranei solo perchè siete di fretta.
• NON fidatevi se il documento “funziona”. Solo perchè la pagina viene visualizzata non vuol dire che il markup sottostante sia aderente agli standard, senza problemi o adatto ai motori di ricerca.

Traduzione dell’articolo Why Does Clean Markup Matter in Web Design? comparso su Webdesigner Depot.

Bookmark It