Koda

Varför Rengör Markup Matter i webbdesign?

Eftersom webben är en växande och ständigt utvecklande organism, är det viktigt att bygga platser som kan växa med det och lätt rida strömmen istället för att drunkna när en ny våg närma sig.

Ren markering och byggnad med webbstandarder hjälper dig inte bara att göra det här, utan kommer både att spara både tid och pengar på lång sikt.

När webben expanderar, så ökar tekniken som den använder sig av. Medan HTML har funnits länge har det fått en hel del sidekicks under vägen.

Första Javascript, sedan CSS, XML och senare AJAX. Bredt antagande av HTML 5 ligger precis runt hörnet, med Firefox, Safari, Opera och Chrome njuter nästan nästan fullt HTML 5-stöd (det långsamma barnet i blocket, Internet Explorer, ligger bakom som vanligt).

I den här artikeln granskar vi grunderna för webbstandarder, vad de är, vad de betyder för dig och några viktiga tips som hjälper dig att hantera detta viktiga och ofta försummade problem.

Vad betyder det för att "Clean" Markup?

Enkelt uttryckt betyder det att det är fria från rot, standardkompatibilitet och användning av taggar och strukturer för varje språk för sitt avsedda syfte.

Clutter-free HTML gör sparsam användning av taggar, eliminerar det yttre och uppnår sin uppgift med så lite uppmärksamhet som nödvändigt . Det undviker onödiga attribut, till exempel inline CSS, och lämnar varje dokument strukturerat och organiserat.

På samma sätt bör det vara svårt att upprepa sig själv, utnyttja arv (kom ihåg, CSS står för Cascading Style Sheet) och återanvänd klasser när det är möjligt.

Standarder-kompatibel innebär att dina sidor validerar med de standarder som anges av W3C för HTML, CSS och XML. Det innebär att du använder de fria W3C-godkännandena för att kontrollera fel, korrigera dem och testa igen tills du är så nära 100% som möjligt .

Varför skulle jag bry mig? Det fungerar, är det inte tillräckligt?

Varje projekt har en aggressiv deadline och varje klient vill att deras webbplats lanserades igår. Så som webbutvecklare och designers är vi under konstant press för att arbeta snabbare och effektivare.

Det är lätt att falla i fällan att tänka snabbt måste betyda slarvigt , och den rena, standardkompatibla markeringen tar mer tid. Det är lätt att bara säga "det fungerar och det är allt som spelar roll".

Visst, det fungerar ... för nu, för dig. Vad sägs om nästa år, eller tre år från nu? Vad sägs om nya webbläsare? Vad sägs om tillgänglighet?

Tror du verkligen att de stora sökmotorerna kommer att följa speciella, slarviga kodningsmetoder? De är finiga, och om du inte är kompatibel med standarder sparkar du din sökrankning i ansiktet .

Vad sägs om nästa dåliga sap som måste redigera de sidor du har skapat? Vad händer om du träffas av en buss, sluta gå backpacking i Alaska, eller bli bortförd av utlänningar? Någon annan måste plocka upp var du slutade och han kommer att titta på din kod och försöka få känsla av det. Kommer det vara lätt, eller kommer det ge honom huvudvärk och få honom att förbanna ditt namn?

Gör det rätt första gången. Det här är inte bara lite irriterande, faderlig livsläsning. Det kommer faktiskt att spara dig både tid och pengar, och gör de som följer dig har en lättare tid på saker.

Du kanske tror att det är snabbare att bara släppa in inline CSS istället för att korrekt lägga till en ny klass i ditt stilark. Och du kanske tror att det är snabbare att kasta i vilken HTML som helst du kan spita ut utan att överväga den övergripande dokumentstrukturen.

När det är dags att uppdatera det dokumentet senare eller omforma hela webbplatsen, spenderar du mycket mer tid på att göra upp för slarvig kod än vad du någonsin räddade genom att jag förstörde det. När du skapar ett nytt stilark kommer de irriterande inline-stilarna du snabbt har kommit tillbaka för att hemsöka dig och du spenderar timmar på att jaga dem och ta bort dem.

Extensibility, Accessibility, Translation and Future Proofing

Mobilbläsning växer som Godzilla på atom-steroider. I stället för att bli förflyttad till jet-inställningen Blackberry-missbrukare från 5 år sedan, använder alla idag sin telefon för att surfa på nätet.

Hjälpmedel - skärmsläsare för blinda och alternativa gränssnittsanordningar för handikappade - är vanligt, och du vill inte förlora en försäljning eller förmedla trafik bara för att du inte tog hänsyn till det.

Din webbplats kommer sannolikt att översättas till ett halvt dussin språk eftersom läsare från hela världen hittar ditt innehåll. Tack vare Internetarkiv , Googles cache och andra, sidor du publicerar idag kommer att vara kvar länge, även efter att de har tagits bort från din levande webbplats.

Ren markup och standardkompatibilitet kommer att gå långt för att säkerställa att dina webbplatser fungerar i alla dessa scenarier.

Gör och gör inte:

  • Använda taggar som de är avsedda för. Till exempel: h1 är det första högsta elementet på sidan, sedan h2, h3 och så vidare. Det bör bara finnas en h1-etikett per sida.
  • Gör namnet på dina CSS-klasser och id-nummer med hjälp av meningsfulla termer och fråga dig själv om någon annan kommer att veta vad en klass / ID gör från sitt namn ensam. Vilken namngivningskonvention ger större mening: # box12 eller # comment-footer?
  • Gör bra användning av CSS arv. Till exempel: Om du anger ett teckensnitt på en behållare behöver du inte ange det igen för varje barnelement om inte detta barnelement behöver använda ett annat teckensnitt. Detta kommer att hålla dina stilark luta och snabbt att ladda.
  • DO validera din HTML, CSS och XML och korrigera så många fel som möjligt. Var uppmärksam på varningarna som genereras också.
  • DO dubbelkontroll WYSIWYG genererad kod och städa upp efter behov. De är notoriska för att spotta ut skrymmande, uppblåst markup med massor av onödigt og ogiltigt skräp.
  • INTE injicera inline-stilar eller externa taggar och attribut bara för att du är i rush.
  • LÄS INTE för "det fungerar." Bara för att en sida gör det betyder det inte att markeringen under huven är standardkompatibel, problemfri eller sökmotorvänlig.

Ytterligare läsning och resurser


Skriven uteslutande för WDD av Jeff Couturier.

Följer du webbstandarder på dina webbplatser? Varför eller varför inte? Vänligen dela dina kommentarer med oss.

design webbstandarder städa upp markeringen