Codice

Perché funziona la marcatura pulita nel Web design?

Poiché il web è un organismo mutevole e in continua evoluzione, è importante costruire siti che possano crescere con esso e cavalcare facilmente la corrente anziché affogare quando si avvicina una nuova ondata.

Il markup pulito e la creazione di standard web non solo ti aiutano a farlo, ma ti faranno risparmiare tempo e denaro a lungo termine.

Man mano che il web si espande, le tecnologie che utilizza crescono con esso. Mentre l'HTML è in circolazione da molto tempo, ha acquisito parecchi sidekicks lungo la strada.

Prima Javascript, poi CSS, XML e successivamente AJAX. L'ampia adozione di HTML 5 è dietro l'angolo, con Firefox, Safari, Opera e Chrome che godono già di un supporto HTML 5 quasi completo (il bambino lento sul blocco, Internet Explorer, è in ritardo rispetto al solito).

In questo articolo, esamineremo le basi degli standard web, cosa sono, cosa significano per te e alcuni suggerimenti importanti per aiutarti a gestire questo problema importante e spesso trascurato.

Cosa significa avere un markup "pulito"?

In poche parole, significa privo di ingombri, conformità agli standard e utilizzo dei tag e delle strutture di ciascuna lingua per lo scopo previsto.

L'HTML privo di ingombri rende scarso l'uso dei tag, elimina l'estraneo e porta a termine il proprio compito con il minor numero di markup necessario . Evita attributi inutili, come CSS inline, e lascia ogni documento strutturato e organizzato.

Allo stesso modo, CSS senza clutter dovrebbe evitare di ripetere se stesso, sfruttare eredità (ricorda, CSS sta per Cascading Style Sheet) e riutilizzare le classi quando possibile.

Conformità agli standard significa che le tue pagine sono conformi agli standard stabiliti dal W3C per HTML, CSS e XML. Significa utilizzare i validatori W3C gratuiti per verificare gli errori, correggerli e testare di nuovo fino a quando non sei il più vicino possibile al 100% .

Perchè dovrebbe interessarmi? Funziona, non basta?

Ogni progetto ha una scadenza aggressiva e ogni cliente vuole che il suo sito venga lanciato ieri. Così come sviluppatori e progettisti web siamo costantemente sotto pressione per lavorare in modo più rapido ed efficiente.

È facile cadere nella trappola di pensare in fretta, il che significa che è scadente , e che il markup pulito e conforme agli standard richiede più tempo. È facile dire semplicemente "funziona e questo è tutto ciò che conta".

Certo, funziona ... per ora, per te. Che mi dici del prossimo anno o di tre anni? E i nuovi browser? E l'accessibilità?

Pensi davvero che i principali motori di ricerca seguiranno metodi di codifica speciali e sciatti? Sono pignoli, e se non sei conforme agli standard, stai prendendo a calci in faccia la tua classifica di ricerca .

E il prossimo povero fiacco che deve modificare queste pagine che hai creato? Cosa succede se vieni investito da un autobus, esci per andare in giro in Alaska o ti viene rapito dagli alieni? Qualcun altro deve riprendere da dove hai interrotto e guarderà il tuo codice, cercando di dare un senso a ciò. Sarà facile, o gli darà mal di testa e gli farà maledire il tuo nome?

Fallo bene la prima volta. Questa non è solo una fastidiosa, paterna lezione di vita. In realtà ti farà risparmiare tempo e denaro, e far sì che quelli che ti seguono abbiano un momento più facile.

Potresti pensare che sia più veloce inserire semplicemente CSS inline invece di aggiungere correttamente una nuova classe al tuo foglio di stile. E si potrebbe pensare che sia più veloce lanciare qualunque HTML si possa sputare senza considerare la struttura complessiva del documento.

Quando verrà il momento di aggiornare il documento in seguito o di ridisegnare l'intero sito, trascorrerai molto più tempo a recuperare il codice sciatto di quanto non avresti mai salvato scorrendo in primo piano. Quando crei un nuovo foglio di stile, quei fastidiosi stili inline che hai aggiunto in fretta torneranno a perseguitarti e trascorrerai ore a cacciarli e spogliarli.

Estensibilità, accessibilità, traduzione e prove future

La navigazione mobile sta crescendo come Godzilla sugli steroidi atomici. Invece di essere relegati ai tossicodipendenti Blackberry di 5 anni fa, oggi tutti usano il loro telefono per navigare sul web.

La tecnologia assistiva - i lettori di schermo per i dispositivi di interfaccia ciechi e alternativi per portatori di handicap - è comune e non si vuole perdere una vendita o alienare il traffico solo perché non lo si è tenuto in considerazione.

È probabile che il tuo sito venga tradotto in una mezza dozzina di lingue, in quanto i lettori di tutto il mondo trovano i tuoi contenuti. Grazie al Internet Archive , Cache di Google e altri, le pagine che pubblichi oggi saranno in giro per molto, molto tempo anche dopo che sono state rimosse dal tuo sito live.

Il markup pulito e la conformità agli standard faranno molta strada per garantire che i tuoi siti funzionino in ciascuno di questi scenari.

Cose da fare e da non fare:

  • Usa i tag così come sono intesi. Ad esempio: h1 è il primo elemento di livello superiore nella pagina, quindi h2, h3 e così via. Dovrebbe esserci un solo tag h1 per pagina.
  • Dare un nome alle tue classi e ID CSS usando termini significativi e chiediti se qualcun altro saprà cosa fa una classe / ID dal solo nome. Quale convenzione di denominazione ha più senso: # box12 o # comment-footer?
  • FARE buon uso dell'eredità CSS. Ad esempio: se si imposta un carattere su un contenitore, non è necessario specificarlo di nuovo su ogni elemento figlio a meno che quell'elemento figlio non debba utilizzare un carattere diverso. Ciò manterrà le tue schede di stile snelle e veloci da caricare.
  • DO convalida il tuo codice HTML, CSS e XML e correggi il maggior numero possibile di errori. Prestare attenzione anche agli avvisi generati.
  • FARE doppio controllo WYSIWYG codice generato e ripulire se necessario. Sono noti per aver sputato un ingombrante e gonfio markup con un sacco di spazzatura inutile e invalida.
  • NON iniettare stili in linea o tag e attributi estranei solo perché sei di fretta.
  • NON accontentarsi di "funziona". Solo perché una pagina lo rende non significa che il markup sotto il cofano sia conforme agli standard, privo di problemi o adatto ai motori di ricerca.

Ulteriori letture e risorse


Scritto esclusivamente per WDD da Jeff Couturier.

Segui gli standard web nei tuoi siti web? Perché o perché no? Per favore condividi i tuoi commenti con noi.

design standard web mark up pulito