Bra rubriker är livsviktiga och syns överallt

En rubrik säger mer än tusen ord. I bästa fall.

En webbsidas dokumentrubrik (<title>) är bland det viktigaste på nätet. Nästan lika viktigt som adressen. Precis som adressen så används rubriken utanför din webbplats. Det innebär att någon annan kan publicera adressen och rubriken på sin egen webbplats, utan att du kan påverka.

Om du exempelvis ändrar adress, så måste du meddela personen att adressen är ändrad. Om det är många som länkar blir det väldigt mycket jobb. Likaså är det med rubriken. Du kan alltid ändra innehållet utan att påverka de som länkar till dig, men du kan inte alltid ändra adressen eller dokumentrubriken.

Dokumentrubriken används nämligen till:

  • Bokmärken. Besökare sparar sina favvosajter och måste enkelt kunna urskilja flera inom samma ämne.
  • Fönstertitel. I webbläsarens fönster syns titeln på webbsidan.
  • Tabbar. I till exempel Firefox kan man öppna webbsidor i nya tabbar och då är dokumentrubriken det enda man ser.
  • Historik. De webbsidor du har surfat på tidigare visas i historiken. Om inte dokumentrubriken beskriver webbsidan korrekt är det omöjligt för besökaren att hitta tillbaka.
  • Aktivitetsfältet. Om du öppnar många program i Windows så representeras varje program av en ikon och titel.
  • Sökresultat. När webbsidan visas i sökresultatet hos Google så är det dokumentrubriken som visas. Eller du kanske tycker det låter intressant när det står ”untitled” jämt och ständigt?

Hur kan jag tjäna pengar på min webbplats?

I en artikel från SitePoint, Make Money From Your Content Site, skriver författaren att det finns fem sätt att tjäna pengar från en webbplats:

  • Traditionell bannerannonsering. Det må vara på väg ut, men en bra utformad kampanj är fortfarande inget att leka med.
  • Annonsering med pay-per-click (kontextuell). Ungefär som Google AdSense, där du placerar en bit javascript-kod på din webbplats och får pengar för besökare som klickar på länkarna.
  • Prenumerationer. Regelbundna nyheter eller artiklar kan vara värt att ta betalt för om det inte finns någon annanstans. Men du, håll lite gratis så att du inte tar betalt för allt. Besökarna måste ju först upptäcka det du har, sedan får du skapa mervärde genom prenumerationer.
  • Samarbeten och partnerprogram. Genom att samarbeta med andra kan man diskutera intäkterna. Annars har exempelvis bokhandeln Amazon färdiga ”affiliate-program” du kan använda. Då får du pengar för personer som köper böcker via dina länkar.
  • Textlänkar. Annonser med vanliga länkar på din webbplats är effektiva eftersom de samtidigt marknadsförs högre (bättre) i sökmotorer.

Vad är tillgänglighet?

Enkelt svar: Att inte sätta upp hinder för användaren.

Därmed kan man säga att användbarhet går hand i hand med tillgänglighet. En webbplats som inte sätter upp hinder, bör ofta vara enkel att använda.

Hur vet man om en webbplats är enkel att använda? Man sätter en person framför webbplatsen och ber dem lösa en vanlig uppgift (på en annonsmarknad kan det ju vara att lägga in en annons i rätt kategori). Om det går utan problem så har du hög användbarhet. Går det mindre bra får du göra om det som vållade problem.

Enkelt? Javisst. Men det är få som verkligen tar sig tid att göra det.

En bra webbplats uppfyller endast ett behov

En bra webbplats uppfyller ett (1) behov.

Givetvis får webbplatser ge mer värde för besökaren, men huvudsyftet för en webbplats ska inte vara att uppfylla alla önskningar. Det är bättre att koncentrera sig på en enda sak och göra det bäst av alla.

När besökaren frågar ”vad kan jag göra här?” ska du ha ett enkelt svar till hands. Ungefär som de stora webbplatserna jag visar nedan:

  • blocket.se kan du annonsera ut prylar.
  • google.se kan du söka på nätet.
  • aftonbladet.se kan du läsa nyheter (kvällstidningsnyheter ska väl tilläggas).
  • lunarstorm.se kan du möta andra och umgås.

Kan du säga vad din webbplats gör för dina besökare? Kan du göra det i en enda, enkel, mening?

Bry dig inte om vad folk tycker om utseendet

Många frågar ”vad tycker du om min webbplats?” och får till svar i stil med ”ganska fult, jag gillar inte de röda strecken – gröna hade varit snyggare”. Sådan kritik är inget att ha.

Vi människor är alla olika och gillar olika saker. Det person A tycker är snyggt har person B garanterat en annan uppfattning om. Det går inte att säga att ”grönt är snyggare än rött”. Det är en smaksak. Sådan kritik finns ingen mening att ta till sig.

Däremot är ”grönt, i stället för rött, passar bättre till texten och är lättare att läsa” betydligt bättre. Det gynnar alla om texten är lättare att läsa. Men det gynnar bara ett fåtal om gröna strecken är gröna i stället för röda.

Så, fråga aldrig vad de tycker om utseendet på din webbplats. Fråga om det enkelt kan hitta det de söker, om de tycker att färgerna matchar innehållet (till exempel fotboll = grön, fiske = blått, bilar = stålgrått) och så vidare. Det är betydligt viktigare än om det är ”snyggt”.

För mycket information är ett hinder på tillganglighet.se

När jag letade lite efter tillgänglighet på nätet så hamnade jag på www.tillganglighet.se. Det är nästan så att man sätter hjärtat i halsgropen.

Skärmpdump från tillganglighet.se

Visserligen verkar webbplatsen mest förespråka tillgänglighet i det vanliga livet, men man kan ju inte förstå varför webbplatsen inte får vara mer tillgänglig.

Efter ett litet test på förstasidan kan vi konstatera:

  • Flera bilder saknar (eller använder felaktig) alt-text.
  • Bilderna saknar dessutom attributen width och height som förklarar storleken på bilderna. Det innebär att när sidan laddas kommer bilderna att dyka upp allt eftersom och på så vis ”hoppar” texten runt tills allt laddat färdigt.
  • Förstasidan väger totalt 93 kB med alla bilder. Under 20 kB vore idealet, men hälften är godkänt.
  • Layouten utformas med hjälp av tabeller, när det borde göras med css i stället.
  • På grund av tabellayout har de använt bilder stora som en pixel (”osynliga”) för att utforma sidan som de vill. Det kan undvikas helt med css.

Bortsett från detta har vi ”information overload”. Vi får helt enkelt för mycket information på en gång och på grund av bristande typografi går det inte urskilja vad som är rubriker eller vad som går att klicka på. Ibland blir länkarna understrukna när man håller musen över dem. Ibland inte.

När man designar måste man vara konsekvent. Om utvalda ställen får sitt alldeles egna utseende (”där ser det snyggt ut”) skapar det bara förvirring. Vad vi behöver är en hel webbplats som fungerar likadant på vilken sida vi än är på. Och det ska absolut inte ändra sig för vilken del av den enskilde webbsidan man tittar på. Det är därför css-layout är så bra. Det går att göra en central fil som alla webbsidor använder. En ändring i filen och ändringen visas på alla webbsidor omedelbart. Smidigt, enkelt och framför allt rätt.

Öppna inte länkar i nytt fönster

Gör det aldrig. När man klickar på en länk ska den öppnas i samma fönster.

För fem år sedan hade jag sagt annorlunda. Men nu har användandet av nätet utvecklats (läs: våra webbläsare har fått flikar och annat smart) och vi kan på enklare sätt styra vilka webbsidor vi vill ha öppna och var de ska öppnas. Jag kör personligen alltid med ett klick på skrollhjulet för att öppna nya flikar i webbläsaren Firefox. Fönster som kastas upp i ett nytt fönster (kontra ny flik) är lika irreterande som popup-annonser.

Regeln är alltså enkel. Samma, samma. Inte ens pdf-filer eller zip-filer får öppnas i nya fönster. ”Men då kanske besökaren blir förbannad?” säger du. Nej, då ska du säga att det är en pdf-fil du länkar till. Besökaren ska på förhand veta vad som väntar, och kunna göra valet före han eller hon klickar. Inte efter.

Seså, gör om alla din target="_blank" nu.

Bygg din webbplats med en person i baktanke

Många är det som förespråkar tillgänglighet utan att riktigt veta varför. ”Det ska fungera för alla” är en vanlig kommentar. Men det är svårt att ”ta” på tillgänglighet.

Ett bra sätt att öka förståelsen är att hitta på en person som ska använda webbplatsen. Det kallas att man skapar en persona. Vi kan ta ett exempel:

Karin, 30 år. Har nedsatt syn och kan därför inte läsa liten text. Efter en arbetsolycka har hon brutit ena armen och kan därför endast styra musen och tangentbordet med höger arm. Vänstersidan är drabbad av musarm till råga på allt. (Ju fler funktionshinder Karin har, desto mer får du anpassa din webbplats.)

Nu kan du helt plötsligt hitta saker som behöver förbättras när du tänker på Karin: Texten behöver exempelvis kunna förstoras. Eftersom hon har musarm vill hon kanske använda tangentbordet mer. Använder du kortkommandon för tangentbordet? Hamnar man på länkarna i rätt ordning när man tabbar?

Persona är alltså ett bra sätt att sätta en bild på ”de där funktionshindrade” och dra in dem från den grå massan. Helt plötsligt kan vi gå från ”Det ska fungera för alla” till ”Det ska fungera för Karin!”.

Ta bort dina länkar som leder till W3C validator

Ibland kan man se små länkar nere i sidfoten på webbplatser. Det står ”XHTML – CSS” och är länkad till valideringstjänsten hos w3c. Vad fyller det för funktion för besökaren?

Ta bort, bort, bort! Jag skiter i om webbsidan är gjord i strikt XHTML eller inte. Som besökare vill jag att den ska fungera överallt, men jag ska inte behöva informeras om det.

Uppdaterat 10 juli: Ännu värre blir det om man använder bilder, där alt-texten är ”Valid CSS!”. Detta kommer även dyka upp på Google i sökresultatet, vilket gör att dessa ord blir sökbara på sidan. Likadant är det med länkar.

Sökresultat med css och xhtml-länkar
Bilders alt-text visas som sökresultat på Google. Har besökaren nytta av att veta att sidan är gjord i ”Valid CSS!” innan man går in på den?

Åse och Mikael om tillgänglighet

Killarna och tjejerna på Hjälpmedelsinstitutet har rört ihop några bra (indirekta) tips för webbsidekreatörer.

Micke är blind och säger att det största problemet är alt-texter som saknas på bilder. Men han säger också:

Menyer som är gjorda med flash eller java, är också ett problem. Om det bara är bilder gör det inte så mycket, men om menyerna inte är tillgängliga, så går webbplatsen överhuvudtaget inte att använda.

Dessutom är webbsidor vars reklam ligger i ramar som uppdateras automatiskt ett stort problem. Talsyntesen läser upp innehållet varje gång sidan laddas om.

Åse är rörelsehindrad och vill kunna:

  • Ändra storleken på texten. Rörelsehindrad innebär ofta att man inte kan sitta så nära skärmen som man vill. Då är det en fördel om man kan förstora texten och att innehållet anpassar sig till föstoringen. I Åses fall är det däremot svårigheter med att fästa blicken.
  • Skrolla själv. När texten förstoras så tar den upp mer plats och kanske inte får plats på skärmen. Då vill Åse kunna skrolla som hon vill. Skrollisterna får alltså inte ersättas med någon javascript-variant.
  • Ändra reklamens placering. Popup-fönster är jobbiga att stänga. Reklam som ligger högt upp på sidan tar upp värdefull plats eftersom Åse använder ett program som fungerar som ett virtuellt tangentbord.
  • Se webbsidor i 640 x 480. Ofta hör man ju personer som går efter statistik och säger ”73 % av mina besökare använder upplösningen 1024 x 768 och därför anpassar jag den efter majoriteten”. Det kanske är så att de övriga med låg skärmupplösning inte kan ta del av innehållet.