Kode

Hvorfor Clean Markup Matter i Web Design?

Fordi nettet er en skiftende og evigvarende organisme, er det vigtigt at opbygge steder, der kan vokse med det og nemt ride den nuværende i stedet for at drukne, når en ny bølge nærmer sig.

Ren markering og opbygning med webstandarder hjælper ikke kun dig med det, men vil spare både tid og penge i det lange løb.

Som nettet udvider, så teknologierne, som den bruger, vokser med det. Mens HTML har eksisteret i lang tid, har den erhvervet ganske få sidekicks undervejs.

Første Javascript, derefter CSS, XML og senere AJAX. Bred vedtagelse af HTML 5 er lige rundt om hjørnet, med Firefox, Safari, Opera og Chrome nyder næsten næsten fuld HTML 5-support (den langsomme kid på blokken, Internet Explorer, ligger bagud som normalt).

I denne artikel gennemgår vi grundlæggende webstandarder, hvad de er, hvad de betyder for dig og nogle vigtige tips til at hjælpe dig med at håndtere dette vigtige og ofte forsømte problem.

Hvad betyder det at have "Clean" Markup?

Simpelthen sagt betyder det fri for rod, standarder-kompatibel og bruger tags og strukturer for hvert sprog til deres tilsigtede formål.

Clutter-fri HTML gør sparsom brug af tags, eliminerer den fremmede og udfører sin opgave med så lidt markering som nødvendigt . Det undgår unødvendige attributter, såsom inline CSS, og efterlader hvert dokument struktureret og organiseret.

På samme måde burde det ubeskrivelige CSS undgå at gentage sig selv, drage fordel af arv (Husk, CSS står for Cascading Style Sheet) og genbrug klasser, når det er muligt.

Standarder-kompatibel betyder, at dine sider validerer med de standarder, der er fastsat af W3C til HTML, CSS og XML. Det betyder at bruge de gratis W3C-validatorer til at kontrollere fejl, korrigere dem og teste igen, indtil du er så tæt på 100% gyldig som muligt .

Hvorfor skal jeg passe? Det virker, er det ikke nok?

Hvert projekt har en aggressiv deadline, og hver klient vil gerne have deres hjemmeside lanceret i går. Så som webudviklere og designere er vi under konstant pres for at arbejde hurtigere og mere effektivt.

Det er let at falde i fælden at tænke hurtigt skal betyde sjusket , og det rene, standard-kompatible markup tager mere tid. Det er nemt at bare sige "det virker, og det er alt det, der betyder noget."

Sikker på, det virker ... for nu, for dig. Hvad med næste år eller tre år fra nu? Hvad med nye browsere? Hvad med tilgængelighed?

Tror du virkelig, at de store søgemaskiner vil holde sig til specielle, sjusket kodningsmetoder? De er finicky, og hvis du ikke er i overensstemmelse med standarder, sparker du din søgerrangering i ansigtet .

Hvad med den næste dårlige sap, der skal redigere disse sider, du har oprettet? Hvad sker der, hvis du bliver ramt af en bus, stoppe for at gå backpacking i Alaska eller blive bortført af udlændinge? Nogen anden skal afhente hvor du slap af, og han vil se på din kode og forsøge at få mening om det. Vil det være let, eller vil det give ham hovedpine og få ham til at forbande dit navn?

Gør det rigtigt første gang. Dette er ikke bare noget irriterende, faderlig lektie. Det vil faktisk spare dig både tid og penge, og få dem, der følger dig, få en lettere tid med ting.

Du tror måske, at det er hurtigere at bare falde i inline CSS i stedet for korrekt at tilføje en ny klasse til din stilark. Og du tror måske, at det er hurtigere at kaste i hvad HTML du kan spytte uden at overveje den overordnede dokumentstruktur.

Når det kommer tid til at opdatere dette dokument senere eller omdanne hele webstedet, vil du bruge meget mere tid på at gøre op for sjusket kode, end du nogensinde har gemt ved at skynde dig igennem det i første omgang. Når du opretter et nyt stilark, vil de irriterende inline-stilarter du hurtigt har tilføjet, komme tilbage for at hjemsøge dig, og du vil bruge timer på at jagte dem ned og strippe dem ud.

Extensibility, Accessibility, Translation og Future Proofing

Mobil browsing vokser som Godzilla på atom-steroider. I stedet for at blive henvist til de jet-indstillede Blackberry-narkomaner fra 5 år siden, bruger alle i dag deres telefon til at surfe på internettet.

Hjælpemidler - skærmlæsere til blinde og alternative grænsefladeapparater til handicappede - er almindelige, og du vil ikke miste et salg eller fremmedgøre trafik, bare fordi du ikke tog højde for det.

Dit websted vil sandsynligvis blive oversat til et halvt dusin sprog, da læsere fra hele verden finder dit indhold. Takket være Internetarkiv , Googles cache og andre, sider, du offentliggør i dag, vil være rundt i lang, lang tid, selv efter at de er blevet fjernet fra dit websted.

Ren markup og standarder-overholdelse vil gå langt for at sikre, at dine websteder fungerer i hver af disse scenarier.

Gør og don'ts:

  • Brug mærker som de er beregnet til. For eksempel: h1 er det første øverste element på siden, derefter h2, h3 og så videre. Der bør kun være et h1 tag pr. Side.
  • Gør navnet på dine CSS-klasser og id'er ved hjælp af meningsfulde udtryk, og spørg dig selv, om en anden vil vide, hvad en klasse / id gør fra sit navn alene. Hvilken navngivningskonvention giver mere mening: # box12 eller # comment-footer?
  • Gør god brug af CSS arv. For eksempel: Hvis du indstiller en skrifttype på en container, behøver du ikke at angive den igen på hvert barnelement, medmindre barnet skal bruge en anden skrifttype. Dette vil holde dine stilark lænede og hurtige at indlæse.
  • DO validere din HTML, CSS og XML og korrigere så mange fejl som muligt. Vær opmærksom på de genererede advarsler.
  • Gør dobbelt check WYSIWYG genereret kode og rydde op efter behov. De er berygtede for at spytte ud klodset, oppustet markup med masser af unødvendig, ugyldig junk.
  • Indsæt IKKE inline-stilarter eller fremmede tags og attributter bare fordi du er i rush.
  • Løs ikke for "det virker." Bare fordi en side gør det, betyder det ikke, at markeringen under emhætten er standardkompatibel, problemfri eller søgemaskinevenlig.

Yderligere læsning og ressourcer


Skrevet udelukkende til WDD af Jeff Couturier.

Følger du webstandarder på dine hjemmesider? Hvorfor eller hvorfor ikke? Venligst del dine kommentarer med os.

design webstandarder ryd markeringen op