Visa länkar i löpande text eller vid sidan om?

Peter Dahlgren 6 Comments

Var ska man lägga länkarna i en nyhetsartikel? Ska de ligga i den löpande texten, eller som en lista vid sidan om?

Jag tycker det bara finns ett sätt att göra i nästan alla fall. Lägg det i den löpande texten.

Länkarna får automatiskt större relevans när det förekommer i en mening. Men se till att länka viktiga ord.

Dessutom kan man plocka ut alla länkar automatiskt från den löpande texten och visa som en lista. Man kan alltså få det bästa ur två världar! Tvärtom går däremot inte.

Vilket sätt tycker du är bäst?

Nyttan med alt-texter i snyggt exempel

Peter Dahlgren 5 Comments

Ibland kan det vara bra att visa vanliga problem med exempel. Att alt-texter ska använvdas för att förbättra tillgängligheten för blinda är det många som vet. Men det underlättar också för oss som är seende.

Smålandsposten är i blåsvädret igen. I en filmrecension för Så som i himmelen har recensenten gett filmen ett betyg. Det är ett enkelt sätt att skilja bra filmer från sämre.

Men vad de gjort är att visa betyget som en bild. Som inte finns och saknar alt-text. På detta sättet är det totalt omöjligt att veta vilket betyg de gett filmen.

Viktig alt-text saknas, filmbetyg går inte att utläsa

Så här ser deras html-kod ut:

<img src="/images/lowest_betyg.gif" width="" height="" border="0">

Det enda betyget vi kan gissa oss till är tack vare att bildfilen heter lowest_betyg.gif (exemplarisk svengelska för övrigt). Troligtvis är det fråga om lägsta betyg. Men det hela hade enkelt kunna undvikas genom att lägga till följande lilla kod:

<img src="/images/lowest_betyg.gif" width="" height="" alt="Betyg 1 av 5" border="0">

Alt-texter ska alltid anges på bilder. Fyller bilden ingen mer funktion än att bara vara snygg, så ska du skriva alt="" eller ännu hellre använda css. Då slipper blinda höra den i sin skärmuppläsare.

En annan rolig sak är att attributen width och height är tomma. I Microsoft Internet Explorer får därför alt-texten ingen effekt, utan bilden visas med storleken 1 x 1 pixel. Det går alltså inte att läsa alt-texten som annars visas samtidigt.

Detta problemet hade aldrig behövt uppstå om de valt att följa standarden för att utveckla webbsidor. I xhtml 1.0 ska koden se ut som följande:

<img src="/images/lowest_betyg.gif" alt="Betyg 1 av 5" />

Eftersom width och height inte har något värde måste de plockas bort. Attributet border tar vi också bort eftersom det kan vi sköta med css i stället. Sedermera lägger vi till ett avslutande snedstreck eftersom alla taggar måste ”avslutas”.

Nu har vi konstaterat två saker:

  1. Alt-texter är viktiga, både för seende och blinda.
  2. Följ standarden, annars fungerar inte webbsidorna likadant överallt. I teorin i alla fall.

Låt besökarna hjälpa varandra med social navigering

Peter Dahlgren Leave a comment

Om du har en webbplats med mycket innehåll är det svårt för besökaren att hitta rätt. Då kan det vara bra med lite hjälp på traven.

Social navigering är ett bra sätt som innebär att användarna hjälper varandra. För att hitta rätt eller få svar på sina egna frågor tar man direkt, eller indirekt, hjälp av andra besökare på en webbplats.

Direkt hjälp kan man exempelvis få via ett forum. Person A ställer frågan ”är den här kameran bra?” och person B svarar. Indirekt hjälp kan fås via recensioner som andra besökare har skrivit.

Om du har en mängd artiklar som handlar om filmproduktion så kan det vara värdefullt med ”de som läst den här artikeln har också läst…”.

Vad finns det för knep för att öka den sociala navigeringen? Jo, man kan:

  • Starta ett forum. Att snacka med andra är det ultimata sättet att använda social navering. Men det kanske inte passar alla typer av webbplatser. Passar det på din?
  • Tipsa en vän. Att tipsa en vän är ett sätt att navigera socialt eftersom det hjälper vännen. Det är också ett bra sätt att marknadsföra sig automatiskt (så kallad viral marketing).
  • Kundrecensioner är en annan klassiker. Lägg upp en produkt och låt sedan besökarna betygsätta och skriva egna recensioner.
  • Sätt betyg. Allmän betygsättning är ganska intetsägande om innehållet, men en mer detaljerad fråga kan vara värdefull. ”Hjälpte den här artikeln dig att förstå hur dvd-spelare fungerar?”. En simepl ja/nej-fråga som kan ge besökaren vägledning om att artikeln faktiskt är läsvärd. Eller inte.
  • Min favorit är ”de som köpt den här produkten har också köpt…” plus ”liknande produkter”. Det brukar kallas rekommendationer och det finns till och med rekommendationssystem som man kan köpa. Dessa system fokuserar endast på att leta upp liknande produkter baserat på en algoritm. Olika leverantörer av rekommendationssystem har olika sätt att visa rekommendationer, så det gäller att veta vad man vill åstadkomma innan man köper ett sådant.

Jag vill nog påstå att Amazon.com är kung på social navigering. De använder detta överallt. När du tittar på detaljerna kring en bok dyker rekommendationer upp. ”Customers who bought this book also bought”. Du kanske undrar vad andra har tittat på? Amazon har svar på det också. ”Customers who viewed this book also viewed”. Till och med när du lägger till boken i kundvagnen så finns det en ikon som heter ”See more items like those in your cart”. Jag gillar det. Hela tiden tipsas man om liknande böcker.

Utöver det så kommer det erbjudanden om ”köp den här boken tillsammans med denna, så sparar du 7 dollar”. Och erbjudandet gäller två böcker som brukar köpas tillsammans (alltså baserat på deras försäljning). Helt suveränt.

En annan bra (svensk) webbplats som använder social navigering är Pricerunner. Det är en shoppingagent (ett roligt ord för övrigt ;)) som jämför priser på en produkt mellan butiker. Varje butik kan sedan få ett omdöme av besökarna (femskaligt betyg plus en skriven text). Desto högre betyg, ju större sannolikhet är det att besökaren får förtroende för butiken och handlar där. En etta i betyg av flera besökare är ofta ett varningstecken.

Det var social navigering det, mina damer och herrar. Kan du komma på några fler exempel där social navigering används?

Planera för en webbplats med Skoldatanätet

Peter Dahlgren Leave a comment

Surftips: Planera för en webbplats.

Beskrivningen lyder som följande:

Om du funderar på att göra eller beställa en webbplats eller kanske bygga om din gamla webbplats har du nytta av detta material. Här kan du läsa om hur du gör din webbplats användarvänlig och tillgänglig. Du får bland annat råd om hur du gör webbsidor läsbara och underlättar för användarna att hitta på din webbplats.

Det är Skoldatanätet, Myndigheten för skolutveckling, som står bakom den webbplatsen.

Skoldatanätet har många intressanta och nyttiga tjänster. En klassiker är ordlistan Lexin som finns på flera språk. Den använder jag nästan dagligen när jag stöter på främmande ord.

Tummen upp för skolutveckling!

Fler besökare men färre klick på annonser?

Peter Dahlgren Leave a comment

Ibland stiger antalet besökare väldigt snabbt. Logiskt nog borde även antalet klick på annonser stiga lika mycket. Men det gör det inte alltid.

Vad beror det på? Enligt undersökningar jag har läst så visar det sig att återkommande besökaren ”lär sig” var annonserna finns och medvetet undviker annonser.

Ett sätt att råda bot på det är att hela tiden organisera om och flytta annonserna. Det får däremot inte bli för ofta och för häftigt, för då kan webbplatsen upplevas som rörig. Det är en balansgång.

Hur gör du?

Plocka bort en bit av adressen och hamna högre upp

Peter Dahlgren Leave a comment

Låt säga att du har en adress på din webbplats som ser ut som /bilar/kombi/volvo/v70/. Den säger ju allt om innehållet. Men vad den också ska göra är att fungera i en hieraki.

Om du plockar bort v70 från slutet så ska alltså alla Volvobilar dyka upp. Och likaså om du tar bort en nivå till så ska samtliga kombibilar visas upp. Det är maximal tillgänglighet (och användbarhet) om man utifrån adressen kan navigera sig genom en webbplats. För vem vet, du kanske letar efter en kombi, fast en Saab i stället? Då är det ju bara att testa /bilar/kombi/saab/.

Om det är enkelt så innebär det att vi hittar det vi söker. Hittar vi det vi söker blir vi glada. Blir vi glada blir vi mer benägna att köpa. Köpa är bra. Då tjänar man pengar.

Alltså: enkelt för kunden = mer pengar till företaget. Tänk vad enkelt det är. 😉

Håll det enkelt och det fungerar för alla

Peter Dahlgren Leave a comment

Här kommer ett av mina hemliga tips som jag lovade.

Håll dig till det gamla. När det gäller nätet kan det vara bra att vara gammalmodig. Om du hela tiden använder den senaste tekniken (vad sägs om css 3 med xhtml 1.1?) så kommer inte alla att kunna använda dina webbsidor. Det är inte bra.

Men om du håller dig till gamla, beprövade metoder behöver du inte oroa dig. Det innebär inte automatiskt att du ska använda html 1 (som visserligen funkar överallt med absolut säkerhet), utan exempelvis vanliga länkar (<a href=””>Klick!</a>) i stället för en javascript-variant (<span onclick=””></span>). Det finns fler exempel, men lite får du ju faktiskt tänka själv. 😛

Enkelhet innebär ofta tillgänglighet. Ju enklare något är, desto mindre kan gå fel.

Håll koll på din statistik och lär dig besökarnas vanor

Peter Dahlgren Leave a comment

Det är många av er som har försökt komma åt www.backendmedia.se/tillganglighet. Den sidan har aldrig funnits, men jag har ändå lagt till en ompekning från den till www.backendmedia.se/category/tillganglighet. Då hamnar ni ju rätt oavsett hur ni gör (det gäller alla andra kategorier också för den delen).

För det gäller att ha koll på statistiken. Inte minst för att se hur många besökare man har (det är ju trots allt bara siffror). Utan även för att se vad besökarna faktiskt sysslar med.

Därefter får man anpassa som jag gjort. Om många personer väljer att göra något som inte stöds av webbplatsen, varför inte lägga in detta stödet?

Ett enkelt sätt att testa din webbplats tillgänglighet

Peter Dahlgren 4 Comments

Är din webbplats tillgänglig?

Ett enkelt sätt att testa det är att se hur den ser ut enbart med text. Då ser du den ur en sökmotors synvinkel, och även blinda.

Testa Lynx Viewer, den fungerar ungefär som den gamla hederliga webbläsaren Lynx, som bara visar text.

På måndag får du ytterligare ett av mina hemliga knep om hur man enkelt kan hålla en hög tillgänglighet. I helgen ska jag jobba innan jag tar semester.

Vilka meta-taggar måste jag använda?

Peter Dahlgren 1 Comment

Behöver man använda meta-taggar i html-koden? Vad fyller de för funktion?

Meta-taggar är till för att beskriva en webbsida. Metadata betyder nämligen just ”information om information”. Det kan vara saker som vem som har skrivit dokumentet, när det senast ändrades och en kort beskrivning av innehållet. Ibland kan man även använda nyckelord för att sökmotorer ska hitta dessa ord. Men det har missbrukats, och knappt någon sökmotor vill känna vid nyckelord inmatade i meta-taggarna.

Den enda taggen som används flitigt av Google är description. Den kan ibland visas i sökresultatet hos sökmotorer. Se nedan:

Description visas på Google

Meta-taggen ser ut så här och placeras mellan <head>:

<meta name="description" content="Konsten att bygga webbplatser som är enkla och användbara." />

Det är denna du ska koncentrera dig på. Men lägg inte in nyckelord här, utan skriv en slagkraftig beskrivning som ger känslan ”åh, det måste jag läsa mer om”. Det är trots allt människor som ska läsa den texten, inte sökmotorer.

Dessutom finns det flera länkkataloger som till exempel Dmoz som använder description. Då visas startsidans titel och beskrivningen från meta-taggarna.