Vårt lag BabbelOn.se tävlar med ett bidrag där vi gjort webbplatsen modern och utnyttjat det allra senaste inom webbteknik och sociala tjänster. För dig som är lite mer tekniskt intresserad bjuder jag på några tankar och tips när det gäller god webbstandard.
Innan jag börjar diskutera ämnet kan det vara viktigt att förstå vad ordet webbstandard betyder. Wikipedia har då självfallet en väldigt bra sammanfattning:
“Webbstandard är en term för att beskriva standarder och tekniska specifikationer för webben. På senare år har termen använts allt oftare för att understryka behovet av gemensamma standarder och tillvägagångssätt vid konstruktion av webbplatser och filosofin bakom en öppen och semantisk webb.”
Jag skriver det här inlägget för att jag idag fortfarande stöter på webbsidor som inte följer webbstandarder. Det gäller även några bidrag som fortfarande är med och tävlar i Webbstjärnan, vilket jag tycker är lite pinsamt.
[reds anm: flera av de verktyg (tex WordPress, Joomla och MediaWiki) som Webbstjärnan supportar följer i grunden etablerad webbstandard. Sen är det en annan femma om alla som bygger sina webbplatser med dom verktygen gör modifikationer utan att ta hänsyn till det som gästförfattaren tar upp].
I dagsläget är det nästan essentiellt för en webbplats att använda sig av webbstandarder. Annars blir sajten både dyrare och ineffektivare att underhålla. Till och med användarvänligheten drabbas.
CSS ger flexibel design
Säg att du exempelvis har utvecklat en webbplats med hjälp av Tables (vilket du inte bör göra). Om du efter något år bestämmer dig för att designa om sajten är det väldig tidkrävande, eftersom man i princip måste skriva om all markupkod (se Wikipedia om Märkspråk). Dessutom innebär det en större html-fil, som i sin tur innebär mer användning av bandbredden på servern. Det kan resultera i en fetare faktura (speciellt för stora webbplatser).
HTML-filen (filen som innehåller din HTML-kod) ska enligt webbstandard endast definiera sidans innehåll, strukturen och logiken. Det vill säga, den filen ska endast innehålla en markup och inte någon slags styling. All design och stil ska definieras i en separat CSS fil (Cascading Style Sheet).
Genom att använda CSS-filer blir webbplatsens utformning, stil och kod väldigt flexibel och lättare att underhålla. Storleken på filerna blir mindre och hemsidan laddas då fortare, samt drar mindre bandbredd.
En annan fördel med en standardiserad webbplats är att den är kompatibel med fler webbläsare. Moderna webbläsare förväntar sig en nämligen kod som följer webbstandarder.
Vad gäller namn på id och klasser bör man välja namn som beskriver funktionaliteten istället för hur innehållet presenteras. Då blir koden flexiblare. Det är nämligen mer sannolikt att presentationen ändras, än att funktionen gör det.
Skönt och semantiskt
Zengarden är en rätt känd webbplats som demonstrerar skönheten med CSS-design. Webbplatsen kan visas med helt olika formgivningar, helt enkelt genom att man byter ut CSS-filen till någon av de hundratal CSS-filer som folk runtom i världen har laddat upp. Förstår du då hur flexibelt det är att designa webbplatser på det sättet?
En term som är relaterad till webbstandarder är Semantic Markup. I korta drag innebär det att man använder html-taggar som bäst beskriver innehållet. Använder man Semantic Markup blir hemsidan användarvänligare. Om jag tex ska skapa en ordnad lista på saker jag gör på morgonen, kan en sådan uppmärkning se ut så här:
<h1>Saker jag gör på morgonen</h1>
<ol>
<li>Vakna.</li>
<li>Äta frukost.</li>
<li>Borsta tänderna.</li>
<li>Byta om.</li>
<li>Springa till bussen.</li>
</ol>
Hade jag istället valt att strukturera texten med font-taggen hade det kanske sett ut på samma sätt. Men för tex webbläsare, sökmotorer som automatiskt hämtar innehåll på din sida och Screen Readers (används ofta av synskadade), kommer innehållet läsas som en enda lång text, vilket det inte är. Detta är således inte användarvänligt.
Fler tips
Hur vet man då vad som är standard och ”best practice”? Det finns en massa bra hemsidor som ger tips på saker man bör tänka på. En väldigt bra sådan är Web Do’s & Dont’s som samlar artiklar om detta ämne.
Här är fem exempel på tips som vi har använt oss av för vår webbplats (BabbelOn.se). Naturligtvis rekommenderar jag dom även för dig. Läs gärna hela artiklarna för en djupare förståelse och för fler argument.
- Som sagt, använd aldrig tabeller för att layouta (Never use HTML tables for layout)
- Stryk aldrig under text som inte är en länk, det förvirrar bara användaren (Don’t underline text that is not a link).
- Laga inte kodningsfel i efterhand, förhindra de i förväg istället. Ett sätt att göra detta på är exempelvis via en så kallad ”CSS Reset”. (Don’t fix, prevent).
- Kombinera CSS-klasser (Combine CSS classes).
- Använd det kortare alternativet när du skriver CSS-kod, för att minska på filstorleken (Use the CSS shorthand).
Jag vill även passa på att tipsa om den läsvärda boken Designing with Web Standards (3rd Edition) av Jeffrey Zeldman, som tar upp det senaste inom ämnet.
Nadan Gergeo är en av lagmedlemmarna i tävlingsbidraget BabbelOn.se. Han går på 3NV, IT-Gymnasiet Södertörn. Deras gymnasium har uppmärksammat dem såpass att de nyligen funderat på att använda BabbelOn som en beta-test för ett annat nystartat skolprojekt ”Student Helpdesk”.
