Kapitel 5: Utvärdera din egen webbplats


Du läser nu boken Webb­strategi för alla.
Gå till bokens innehålls­förteckning ›

Det finns massor med erbjudanden från specialiserade konsultfirmor där du kan få din webbplats utvärderad från alla möjliga perspektiv. Vissa deltester är förstås otroligt komplicerade, kräver massor med förkunskaper eller särskilda verktyg, men vissa delar kan de flesta göra helt själva. Det du kan testa ska du testa själv för att höja din webbplats lägstanivå.

Här kommer en lång lista med deltest för en enkel hälsokontroll av en webbplats!

Till stor del kan du nog göra denna utvärdering på egen hand. I denna del kommer vi gå igenom vad som behöver testas som minimum, varför du gör det och vad du ska titta efter. Jag misstänker att du i vissa delar kan behöva ta hjälp av kollegor eller läsa på lite om de ämnen du inte ännu har koll på. Google är din vän och jag ska försöka använda ord som gör det lätt att googla efter mer information om du nu skulle behöva det.

Så här dokumenterar du ditt test

Utvärdering utgår från webbplatsens startsida. Ta gärna stickprov på undersidor om respektive bedömning behöver det eller du vet om någon sida som du fattat misstanke mot. Hjälp för att dokumentera ditt test kan du hitta på tba.nu/webbtest

Då verktygen för att utvärdera webbplatser ibland försvinner, och nya bättre dyker upp, kan du alltid ta en titt på tba.nu/webbtest för att se vilka verktyg och knep jag själv använder för stunden.

Oavsett om du använder de mallar jag föreslår för dokumentation eller har något eget sätt är det vettigt att:

  • Ange datum för testet så du kan gå tillbaka till gamla test.
  • Ge respektive punkt ett betyg, exempelvis 1.3 icke godkänt alternativt godkänd för att betygsätta punkt 1.3 om längd på sidtitel.
  • Skriv in en kommentar till punkten om så behövs för att tala om vilken sida det gällde eller andra detaljer värda att nämna.

Nu följer utvärderingspunkterna.

1. Sökmotoroptimering

Bra sökmotoroptimering handlar om att en webbplats är tillgänglig för sökmotorns robotar, att informationen på webbplatsen är korrekt beskriven och ingenting saknas.

1.1 Indexerbar för sökmotorer

Om en webbsida inte är tillgänglig för sökmotorer blir den svår att hitta för användare av sökmotorer. Det gör att man inte får någon vidare bra utdelning på den tid man lägger på att jobba med webbplatsens innehåll.

Så här kollar du efter fel:

  • Webbläsartillägg, som SEO Doctor, kommer protestera om sidan har inställningar som gör att den inte går att indexera.
  • Webbplatsens HTML-kod har metadata-tagg som säger noindex, alternativt att en metadata-tagg för canonical finns och värdet inte alls överensstämmer med sidans adress.
  • Kontrollera om det finns en fil som heter robots.txt i roten på webbplatsen. I en sådan fil kan det ibland finnas instruktioner till sökmotorn som gör att webbplatsen helt eller delvis inte indexeras. Exkludering skrivs med prefixet disallow och sedan anges en adress som inte ska med i sökmotorerna.
Bild 94: Webbläsartillägget SEO Doctor ger 99 % i betyg för inladdad sida.

Bild 94: Webbläsartillägget SEO Doctor ger 99 % i betyg för inladdad sida.

1.2 Duplicerat innehåll

Information och texter ska vara så unika som möjligt. Exempelvis är det inte bra med flera sidor med identiska sidtitlar, rubriker eller innehåll. I största möjliga utsträckning ska varje sida vara unik.

Så här kollar du efter fel:

  • Google Webmaster Tools har en vy för sidor med likartat innehåll.

1.3 Håll om möjligt sidtitelns längd under 75 tecken

Titeln på en sida bör vara kort för att den ska vara enkel att läsa. Man har en begränsad längd i en sökmotors resultatsida att visa upp sidans titel.

Så här kollar du efter fel:

  • Webbläsartillägg, som SEO Doctor, kommer protestera om sidtiteln är lång.
  • Räkna tecken inom title-taggen i HTML-koden.

1.4 Sidtitel är lättläst och förståelig i sökmotorns resultatsida

Eftersom sökmotorerna inte har oändlig plats för en sidas titel är det viktigt att man anger det unika och viktigaste med respektive sida först i dess titel.

Så här kollar du efter fel:

  • Testa att söka efter dina sidor på de större sökmotorerna, både via en skrivbordsdator och mobil. Utvärdera om titlarna lyckas kommunicera poängen med respektive sida.

1.5 Sidtitel innehåller relevanta sökord som beskriver sidan

Man kan inte räkna med att en internetanvändare läser allt man skriver. Därför måste din sidtitel vara kort, kärnfull och bekräfta ord användaren söker efter så tidigt som möjligt i sidans titel.

Så här kollar du efter fel:

  • Testa att söka efter dina sidor på de större sökmotorerna, både via skrivbordsdator och mobil. Utvärdera om titlarna innehåller tänkbara sökord som din målgrupp kan tänkas använda.

1.6 Korrekta rubriknivåer används

Endast ett huvudrubrik-element och minst en underrubrik. Underrubriker bör bilda en korrekt dokumentstruktur utan att man hoppat över nivåer. Använder webbplatsen HTML5 ska du försöka ha så få huvudrubriker som möjligt för att det ska vara tydligt vad som är viktigast.

Så här kollar du efter fel:

  • Webbläsartillägg, som SEO Doctor, kommer varna om det endast finns en huvudrubrik och inga underrubriker.
  • Visa HTML-koden för dina sidor och kolla så <h1> såväl som <h2> finns. Kolla samtidigt att rubriknivåer inte direkt går från exempelvis en h1 till h3.

1.7 Sökmotorvänliga adresser

Bild 95: Tillfälliga saker som “phpsession” har inget i en adress att göra.

Bild 95: Tillfälliga saker som “phpsession” har inget i en adress att göra.

Adressen till en webbsida är viktig för hur den kan användas utom webbplatsägarens kontroll. Bland annat dess längd för att det ska gå att memorera den eller läsa upp den. Men också för att adressen ibland blir en länk när den läggs upp på nätet och då blir orden i adressen en förståelig länktext.

Så här kollar du efter fel:

  • Surfa runt på din webbplats på jakt efter adresser som känns jobbiga att memorera ens för en kort stund, inte beskriver innehållet, inte går att läsa ut webbplatsintern struktur för eller på annat sätt känns tveksam.

1.8 Beskrivningstext finns

Text som beskriver sidan, så kallad meta-description, är en mycket kort sammanfattning av en webbsidas innehåll och syfte. Även om den texten inte alltid visas upp för dina besökare är det en möjlighet att associera sidan med kvalitativa sökord och synonymer. Ibland visas denna text upp som brödtext under länken i sökmotorernas resultatsida.

Så här kollar du efter fel:

  • Webbläsartillägg, som SEO Doctor, brukar recensera längd eller förekomst av beskrivningstext. Det går också bra att kolla manuellt i HTML-koden efter något som liknar nedan:<meta name=”description” content=”En massa text.” />

1.9 Rimligt antal länkar

Allt för många länkar på en sida indikerar flera saker, bland annat för en sökmotor ett misstänkt beteende men också rörig struktur och att en besökare kan få svårt att få en översikt – särskilt på en liten skärm. Färre än 100 länkar är att föredra på samtliga sidor oavsett om länkarna pekar på sidor inom eller utom webbplatsen.

Så här kollar du efter fel:

  • Leta runt på din webbplats efter sidor som har onormalt många länkar. Webbläsartillägget Accessibility Evaluation Checker har en navigationsrapport som räknar länkar på en sida.

1.10 Bilder har alternativtexter

Bilder som har ett innehåll som kompletterar sidans text behöver beskrivas för besökare som inte kan se dem. Bland de som inte kan se bilder finns sökmotorer, blinda och de som av någon anledning inte laddar in bilder när de surfar – kanske på grund av svajig internetuppkoppling.

En bild som bär ett innehåll ska ha en beskrivande alternativtext, eller en tom alternativtext om inget lämpligt finns att beskriva. Särskilt viktigt är detta för länkade bilder då bildens alternativtext kommer att bli länkens text.

Så här kollar du efter fel:

  • Webbläsartillägg, som SEO Doctor, kommer att påpeka om en bild saknar alternativtext. Annars kan du manuellt surfa runt och kolla i HTML-koden om img-taggarna har attributet alt satt till något meningsfullt. Utsmyckningsbilder ska inte ha en beskrivande alternativtext utan se ut som följer:
    <img alt="" src="bild.jpg"/>

1.11 Strukturerad beskrivning av information

Finns innehåll som helt eller delvis kan beskrivas vad den är? Detta används av sökmotorer för att presentera ett företags geografiska plats, lista dess händelser och kontaktuppgifter bland annat.

Så här kollar du efter fel:

  • Webbläsartillägg, som Operator, kommer visa i din webbläsare om en sida har strukturerad data.
  • Kolla manuellt en sida i taget med Googles verktyg för strukturerad data.
  • Kontrollera i Googles Webmaster Tools vilka sidor som upptäckts ha strukturerad data.

2. Webbanalys

För att kunna dra slutsatser från en analys av en webbplats behöver man spara undan information på förhand så det finns något att analysera. Det är därför viktigt att man följer med i vad som är möjligt inom webbanalys.

2.1 Aktuell spårning av besökare

För att kunna göra en bra analys i efterhand av hur en webbplats används är det viktigt att samla in relevant data. Det finns variation av hur spårningskoden ska se ut och ibland tillkommer saker som går att spåra. Därför är det viktigt att hålla sin spårningskod aktuell.

Så här kollar du efter fel:

  • Manuellt jämför föreslagen spårningskod från leverantören med den man använder, samt kontrollerar om det finns intressanta nyheter att ta del av.
  • Webbläsartillägg, som SEO Doctor, kommer tala om ifall spårningskod inte verkar finnas på en webbsida.

2.2 Spårar användning av sökfunktion

Om man samlar statistik för användandet av webbplatsens egen sökfunktion kan man dra slutsatser och oftast förbättra användarnas upplevelse. Om inte annat är det värdefullt att samla in vad besökarna letar efter inför att man i framtiden vill göra en sökanalys.

Så här kollar du efter fel:

  • Kontrollera att ditt statistikverktyg, exempelvis Google Analytics, klarar av att samla in data om webbplatsinterna sökningar. Det är oftast en relativt enkel inställning i statistikverktyget som inte kräver justering av själva webbplatsen.

3. Prestanda

Att optimera för prestanda är att ge besökare en så god upplevelse som möjligt. Besökarna har olika tekniska förutsättningar i form av uppkopplingshastighet, typ av uppkoppling och möjligheter i sina webbläsare.

3.1 Rimlig tid för inladdning av sidan hos en besökare

Dels hur lång tid det tar innan första byten skickas men också en avvägning mellan nödvändig datamängd och total sidladdningstid. Med andra ord en bedömning om upplevelsen kan göras bättre/snabbare. Vad du anser är en rimlig tid är upp till dig, men en vanlig sida bör i alla fall vara inladdad på mindre än 2 sekunder på en skrivbordsdator. På en mobil kan du ha 5 sekunder som bortre gräns.

Så här kollar du efter fel:

  • Webbläsartillägg, som Lori, visar denna information för din egen upplevelse på en skrivbordsdator.
  • Tittar efter vy i webbstatistiken för att se kvantitativ statistik från riktiga besökare på din webbplats.

3.2 Komprimering av textfiler

Komprimering handlar om att se till att det som skickas till besökaren är så litet som möjligt. En liten informationsmängd går snabbare att föra över.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, kommer visa i din webbläsare om webbplatsen du utvärderar inte skickar filer i ett komprimerat format.

3.3 Användning av webbläsarens cache

Man vill inte skicka oförändrade filer på nytt till besökare som redan har laddat hem dem, det tar onödig tid och försämrar upplevelsen. Detta gäller särskilt filer som sällan eller aldrig uppdateras. Exempelvis logotyper och ikoner.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, kommer visa i din webbläsare om webbplatsen du utvärderar inte instruerar webbläsarens cache om filers förväntade livslängd.

3.4 Skript och stilmall skickas i kompakt format

För att en webbsida inte ska vara onödigt seg att presentera sig för besökaren vill man att så många mellanslag, radbrytningar m.m. ska tas bort ur koden.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, kommer visa i din webbläsare om webbplatsen du utvärderar inte skickar filer i ett minifierat format.

3.5 Bilder är optimerade för snabb överföring

En bild som läggs ut på nätet behöver ha en balans mellan bildkvalitet och rimlig filstorlek. Ofta går ens bilder att förminska ytterligare utan att ett för ögat synlig försämring av bildkvalitet uppstår.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, kommer tala om utifall bilder på sidan kan optimeras ytterligare.

3.6 Rimligt antal bakgrundsbilder, skript och stilmallar

Om webbplatsen är beroende av många filer för att kunna visas upp korrekt uppstår en förlängd väntetid för besökaren. Varje fil tar en stund innan den börjar laddas ner och därför vill man ha en balans i antalet filer som krävs. I många fall kan man kombinera många mindre filer till en enda större vilket ger färre filer i kön för nedladdning.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, meddelar om de anser att det är för många filer att ladda ner och som borde gå att kombinera till färre filer, eller placeras på ett CDN.

3.7 Anrop till filer och sidor som inte finns

Varken besökarna eller sökmotorer vill få fram felsidor eller att det saknas filer sidan är beroende av för sin presentation. Även om sidan kanske ser korrekt ut på skärmen kan det rent tekniskt göras anrop till filer som inte finns vilket bidrar till långsammare sidvisning.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, brukar rapportera om någon fil som anropas inte finns. Kan vara svårt att upptäcka saknade bilder eller egna teckensnitt.
  • Webmaster Tools har en vy för adresser som ger 404-fel eller systemfel i 500-serien.
  • Vissa publiceringssystem, exempelvis EPiServer i sitt rapportcenter, har inbyggda funktioner för länkkontroll.
  • Kontrollera att alla viktiga länkar från andras webbplatser till din leder till fungerande sidor.

3.8 Minimalt med skript och stilmallsinformation i en sidas kod

Alla frekvent använda funktioner och instruktioner om utseende behöver placeras på ett sätt som gör dem återanvändbara mellan de olika sidorna. Med andra ord ska man i den enskilda sidan ha så lite information som möjligt som är gemensam med andra sidor. Den gemensamma koden/instruktionen lägger man i en extern fil för gemensam återanvändning.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, kan klaga på för mycket inline-kod.
  • Man kan manuellt kolla om det ligger en massa script– eller style-taggar inbäddat i HTML-koden. Även frekvent användning av style-attribut på HTML-element är något att se upp för.

3.9 Bilder skalas inte ner med hjälp av stilmall eller HTML

En stor bild är i regel långsammare än en liten att ladda hem för en besökare. Därför är det bra om bilder som används på webben har den faktiska storlek i pixlar som de har när de visas för besökarna. Tänk igenom om du ser detta som en responsiv bildförbättring eller om du tycker det är ett prestandaproblem.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, kommer tala om att det finns potential att spara laddningstid om onödigt stora bilder skickas.

3.10 Identiska filer används inte

Filer som gör eller innehåller samma sak ska inte hämtas flera gånger. Exempel på detta är att använda flera olika versioner av skript-bibliotek samtidigt för en sida eller att de hämtas från olika adresser. Ibland förekommer det att man av misstag har exempelvis logotyp-filen på flera olika adresser vilket gör att flera filer med identiskt innehåll kan skickas till besökaren helt i onödan.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed, kan påpeka lite kryptiskt att konsekvent adressering behövs. Det tyder på att identiska filer hämtats från olika adresser.

3.11 Rimlig nivå av skript i sidans huvud

I många fall rekommenderas det att man har spårningsskript och andra externa beroenden sist i sidans källkod. På grund av att dessa kan vara beroende av varandra är det något man bör planera redan vid konstruktionen av webbplatsen eller vid en revidering. Det är särskilt viktigt för mobila besökare att man planerat när skript ska köras, eller om de laddas in först när de behövs.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, kommer att påpeka om det är osedvanligt mycket Javascript som blockerar sidans möjlighet att visa upp sig.

3.12 Innehållsnätverk används vid behov

Många webbplatser använder gemensamma funktioner, bland annat för att samla statistik och ge en rikare upplevelse i form av exempelvis bildkaruseller. Istället för att ha egna kopior av de filerna som krävs kan man använda ett innehållsnätverk (CDN) för att få bättre prestanda på webbplatsen. Detta är särskilt relevant för de som ännu inte jobbat med att minimera antalet filer.

Har du mängder med egenskapade statiska filer, som bilder och annan media, kan en egen subdomän likt media.minwebbplats.se avlasta.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, talar om ifall du har behov av ett CDN. Ett CDN kan vara en god idé för filer som många andra webbplatser använder, exempelvis jQuery, Modernizr med flera.

4. Tillgänglighet och användbarhet

Tillgänglighet och användbarhet handlar om att bry sig om sina besökare och tillmötesgå deras behov. Man har inte kontroll över besökarens förutsättningar så för att webbplatsens syfte ska gå att uppfylla behöver den vara tillgänglig för så många som möjligt. Den bör vara så lättförståelig att besökarna har tid att göra de önskvärda aktiviteterna man som avsändare har som målsättning, som exempelvis att köpa något, istället för att försöka förstå vad som erbjuds och hur man tar sig fram.

4.1 Webbsidan validerar vald kodstandard

Bild 96: W3C erbjuder en utmärkt valideringskontroll.

Bild 96: W3C erbjuder en utmärkt valideringskontroll.

Att en webbsida validerar är viktigt av många orsaker. En av dem är att det minskar risken för tekniska hinder för dina besökare oavsett om besökaren har någon funktionsnedsättning eller inte. Valideringsrapporter brukar delas upp i fel och varningar.

Omotiverade fel ska man inte ha och flertalet varningar är viktiga att ta tag i.

Så här kollar du efter fel:

  • Webbläsartillägg för validering eller W3C:s valideringstest.

4.2 Använder korrekt rubrikstruktur

Bild 97: Webbläsartillägg som Accessibility Evaluation Toolbar kan hjälpa till att mäta tillgänglighet.

Bild 97: Webbläsartillägg som Accessibility Evaluation Toolbar kan hjälpa till att mäta tillgänglighet.

Att sidan har riktiga rubriker (h1 – h6 i HTML-koden) är ett stöd bland annat för besökare som inte ser sidan. Rubriker kan användas som genvägar och innehållsförteckning för de med skärmläsare, och även sökmotorer.

Allt för vanligt är att man använder fetstilad text eller på annat sätt får vanlig text att se ut som en rubrik, eller har stor textmassa som saknar underrubriker.

Så här kollar du efter fel:

  • Webbläsartillägg, som Accessibility Evaluation Toolbar, erbjuder mängder med rapporter för en sida. Går att kolla manuellt genom att gå igenom HTML-koden i jakt på rubriktaggar som H2, H3 och så vidare.

4.3 Länkars text är beskrivande

När en användare ögnar igenom en sida och hittar en länk behöver länkens text förklara vad länken leder till. Man kan inte förutsätta att ens besökare läser text som finns runtomkring länken.

Det är vanligt att länkars klickbara text är formulerad som ”läs mer här” eller ”gå hit” vilket inte indikerar om varken orsak till länken eller vad som finns bakom den.

Så här kollar du efter fel:

  • Webbläsartillägg, som Accessibility Evaluation Toolbar, erbjuder en navigationsrapport som sammanfattar en sidas länkar. Eller så kollar man manuellt länk för länk.

4.4 Länktitlar används till icke-väsentlig information

Titeln för en länk är den lilla flaggan med information som kan dyka upp om man håller musmarkören över länken en stund. Den funktionen är till för att ge ett mervärde om länken vilket kan användas för att beskriva hur tung en PDF-fil är att ladda ner, bland annat. Om den klickbara texten upprepas i länktiteln eller om den inte tillför något kommer det bara bli ett onödigt irritationsmoment för besökaren. Tänk på att detta ytterst sällan ses av de med pekskärm.

Så här kollar du efter fel:

  • Webbläsartillägg, som Accessibility Evaluation Toolbar, erbjuder navigationsrapporter som sammanfattar en sidas länkar. Eller så kollar man manuellt varje länk, genom att hovra muspekaren, eller tittar i HTML-koden i jakt efter attribut som alt eller title.

4.5 Favorit-ikon finns

En favorit-ikon (favicon) är en liten bild som används i adressfältet, i flikar i webbläsaren och bokmärken bland annat. Den är viktig för att underlätta navigering mellan flikar och igenkänning bland bokmärken.

Så här kollar du efter fel:

  • Tittar i adressfältet, eller fliken, i en webbläsare om det finns en unik ikon för webbplatsen.

Att kunna använda tangentbordet för att navigera på en webbplats är ett måste för vissa, men för andra handlar det om god ergonomi. Tangentbordsnavigering innebär till exempel att man använder tabbtangenten för att hoppa mellan länkar och formulärelement, eller använder speciella snabbtangenter för att hoppa till nästa rubrik eller lista.

Så här kollar du efter fel:

  • Webbläsartillägg, som Accessibility Evaluation Toolbar, erbjuder navigationsrapporter som sammanfattar en sidas access keys. Dessutom kan man manuellt kolla hur bra det går att använda tabbtangenten för att hoppa mellan formulärfält, länkar etc.

4.7 Besökaren i fokus för utformning av texter

När text utformas på webben ska de först och främst tilltala besökaren som läsare, alla andra aspekter kommer i andra hand. Förutom att anpassa skrivandet till de speciella omständigheterna på webben, såsom viktigast först och rubriker istället för överskrifter, ska man akta sig för att fokusera på sökordsoptimering om det går ut över en mänsklig läsare.

Det är allt för vanligt med knepigt formulerade sidtitlar, rubriker och länkar. Inte sällan på grund av iver att nå högt upp på sökmotorerna. Besökare genomskådar detta lättare än många tycks tro och de får då ett mindre positivt intryck av webbplatsen.

Så här kollar du efter fel:

  • Sätt igång och kritiskt granska texterna. Är de skrivna primärt för en mänsklig läsare eller är det främst ett försök att locka in besökare. Att rubriker och övrig text är proppfull med tänkbara sökord är ett varningstecken.

4.8 Språk anges i källkoden

För att såväl sökmotorer som uppläsningsprogram enklare ska veta vilket språk som används bör man ange språk med ett lang-attribut på html-taggen, till exempel lang=”sv-sv” för svenska.

Så här kollar du efter fel:

  • Väljer att visa HTML-kod och letar efter HTML-elementets starttagg och kollar om det anger rätt språk.

4.9 Inte onödigt beroende till extrafunktioner

För att kunna få en webbplats tilltalande för så många som möjligt är det viktigt att ge en god upplevelse även för besökare som saknar stöd för viss teknik i sin webbläsare eller har svårt att använda viss teknik. Sådant som riskerar att ge en dålig upplevelse om det används på fel sätt är bland annat Flash, JavaScript och i viss mån CSS.

Man måste inte avstå från att använda teknik bara för att alla inte kan använda den, men genom att jobba utifrån minsta gemensamma nämnare och därefter förfina gränssnittet där stöd finns når man fler. Detta brukar kallas för progressive enhancement.

Så här kollar du efter fel:

  • Använd webbläsartillägg, eller gå in i webbläsarens inställningar manuellt, för att stänga av Javascript och CSS (stylesheets). Kommer innehållet i en bra ordning? Går det fortfarande att använda webbplatsen?

4.10 Anger storlek på bilder i HTML

Om besökarens webbläsare får instruktioner om bildens storlek behöver den inte rita om sidan igen när bilden är nedladdad vilket minskar upplevelsen av flimmer på skärmen. Därmed kan man få ett stabilare intryck av sidan och innehåll hoppar inte runt under tiden bilder laddas in.

Så här kollar du efter fel:

  • Webbläsartillägg, som PageSpeed och YSlow, rapporterar om en bild i HTML-koden inte försetts med sina dimensioner.
  • Surfa runt manuellt och noggrant uppmärksamma vad som händer runt bilder. Tänk på att det kan variera beroende på din enhets skärmstorlek, exempelvis har responsiva webbplatser färre kolumner på mobila skärmar och då kan detta få större inverkan.

4.11 Fungerar med och utan www. i adressen

Webbplatsen ska fungera oavsett om besökaren har angett www som prefix eller inte. Dessutom ska man se till att bara använda en av dessa varianter genom att skicka vidare besökaren till sidan på den adress man valt. Detta för att det ska fungera oavsett hur man kommer in men att man är tydlig med vad som anses vara korrekt adress.

Så här kollar du efter fel:

  • Testa att lägga till eller ta bort www. som prefix i webbläsarens adressfält, inte bara för startsidan. Kommer man fram till rätt sida? Används bara en variant? Så bra.

4.12 Endast en domän används för webbplatsen

För att det inte ska uppstå osäkerhet hos dina besökare om vilken adress som gäller är det att föredra att man endast använder en enda domän för all sin närvaro på webben. Inte helt ovanliga exempel är att bloggar placeras på subdomäner som blogg.exempel.se eller undersidor med inloggningskrav finns på minasidor.exempel.se

Flera domäner är helt i sin ordning så länge som besökaren slipper se det eller drabbas. Exempelvis går det förstås bra att bilder hämtas från en egen domän för att optimera prestanda.

När det gäller intranät blir detta ofta ett uppenbart problem vid tillfället användare släpps in med inloggning även fast de inte sitter i organisationens nätverk. Då kan man upptäcka att vissa länkar på intranätet leder till interna domäner som inte är tillgängliga utifrån trots att de upplevs vara en del av intranätet.

Så här kollar du efter fel:

  • Surfa runt manuellt på webbplatsen och kolla om det dyker upp subdomäner eller helt andra domäner.

4.13 RSS-prenumerationer går att upptäcka

Om en webbplats erbjuder nyhetsprenumeration via tekniken RSS ska den märkas upp i kodens huvud för så kallad auto-discovery. Det betyder att eventuella prenumerationer listas bland sidans övriga metadata och är lätt att upptäcka rent tekniskt.

Så här kollar du efter fel:

  • Kollar om HTML-kod liknande den nedan finns, eller installerar ett webbläsartillägg som upptäcker RSS-flöden:<link href=”/rss/” type=”application/rss+xml” rel=”alternate” title=”Prenumerera” />

4.14 Användbar felsida

En så kallad 404-sida måste berätta vad som hände och hjälpa besökaren tillbaka till det som eftersöktes. För din egen skull bör även loggning ske för hur besökarna hamnade på felsidan, var de kom ifrån med mera.

Så här kollar du efter fel:

  • Ange en felaktig adress till en webbplats och se vad som händer. Kommer det fram en sida som talar om att ett fel uppstått? Syns det vems webbplats man befinner sig på? Får man hjälp att hitta det man sökte efter? Finns det uppenbara sätt att nå startsidan?

4.15 Inga överraskningar vid skrollande

Det är allt för vanligt att sidan slutar skrolla för att musmarkören, eller fingret på en pekskärm, hamnade i en karta eller iframe. Det är förstås mycket frustrerande och för de flesta besökare väldigt ologiskt.

Så här kollar du efter fel:

  • Har du kartor så placera muspekaren ovanför kartan och börja skrolla neråt. Började du zooma i kartan när muspekaren kom över kartan?
  • Pröva skroll på en enhet med pekskärm och utvärdera om beteendet är logiskt. Är eventuellt ett större problem om kartan/iframen inte är inom synlig yta på skärmen och besökaren sätter igång och snabbt skrollar nedåt.
  • Kontrollera också om du har så kallade iframes, alltså titthål i sidan där man hämtar in innehåll från annan plats, då dessa bland mycket annat försämrar användbarheten.

4.16 Tillräckligt avstånd mellan länkar, knappar etc

Ett vanligt användbarhetsproblem som vi alla kan drabbas av är att interaktiva element på en webbplats är placerade för tätt inpå varandra. Oftast blir detta ett problem vid länklistor där länkar staplats på höjden. Risken att klicka fel, med irritation som följd, är överhängande och med långsam laddningstid kan detta vara det som får besökaren att ge upp sitt besök.

Så här kollar du efter fel:

  • Syns i PageSpeed Insights (kallas tap targets) men kan även kontrolleras manuellt på valfri pekskärm där man tänker sig att använda den största tummen man sett för att felfritt träffa rätt länk – varje gång. Går det bra?

4.17 Acceptabel textstorlek

Hur stor texten är har blivit viktigare än någonsin nu när många använder webben när de är ute i dagsljus. Det ger utmaningar med storlek, kontrastförhållande mellan text och bakgrund bland annat.

Så här kollar du efter fel:

  • Syns i PageSpeed Insights men kan även kontrolleras manuellt genom att ta sin mobil för användning stillastående eller gåendes utomhus. Har du en surfplatta är det värt att testa även den då de brukar ha större problem med reflektioner på skärmen på grund av den större ytan. Är det lättanvänt?

4.18 Går att zooma in även på mobil

Det finns en hel del webbplatser där skaparna tycks ha tänkt att nu när de gjort den så fin för mobil användning så ska väl inte in- och ut-zoomning behövas. Det är dessvärre en dum sak att stänga av möjligheten till zoom, exempelvis för de med motoriska svårigheter som kan behöva zooma in lite extra på länkar för att vara säkra på att träffa den de är ute efter.

Så här kollar du efter fel:

  • Gå in på webbplatsen med mobil och surfplatta. Går det att zooma på det sätt man normalt sett zoomar med den enheten?

4.19 Ikon för webbplats finns

Bild 98: Ikoner för hemskärm är viktigt för igenkänning.

Bild 98: Ikoner för hemskärm är viktigt för igenkänning.

En användare kan på många olika slags enheter lägga till en genväg till en webbplats på sin hemskärm. Du har säkert sett uppmaningar om att göra detta när du surfat med mobilen. Precis som en app-ikon behöver denna ikon hög grad av igenkänning. Det är vanligt med logotyper eller andra för användaren bekanta märken.

Tänk på att du har tillräckligt hög upplösning på bilden så den inte framstår som suddig eller ful på finare skärmar.

Så här kollar du efter fel:

  • Förutom att fästa webbplatsen på hemskärmen på din enhet kan man kolla i HTML-koden efter något som liknar exemplen nedan.

Exempel för iPhone/iPad, Android med flera
<link href=”/apple-touch-icon.png” rel=”apple-touch-icon” />
<link href=”/apple-touch-icon-precomposed.png” rel=”apple-touch-icon-precomposed” />

Exempel för Windows 8
<meta content=”#123456″ name=”msapplication-TileColor” />
<meta content=”/win8-tile-bild.png” name=”msapplication-TileImage” />

4.20 Användbara utskrifter

Bild 99: Länkar i utskrifter behöver skrivas så den med en papperskopia inte bara får understruken text som inte kan användas på papper.

Bild 99: Länkar i utskrifter behöver skrivas så den med en papperskopia inte bara får understruken text som inte kan användas på papper.

Inte för att man ska uppmana folk att göra utskrifter på papper men det finns ändå anledning till att ha koll på hur utskrifter ser ut och fungerar. Dels för att vissa personer läser PDF-utskriftsversioner på läsplattor (som ibland saknar internetuppkoppling vilket ställer till det med länkar) men också för arkivering man själv eller andra gör av ens webbplats.

Så här kollar du efter fel:

  • Skriv ut några olika typer av sidor, antingen på papper men hellre som PDF-utkast. Får all information plats? Kan man se var länkarna går?

5. Övrigt

5.1 Formulär och känslig info skickas via säker kanal

När ett formulär på webben postas tillbaka till webbservern sker det ibland på ett sätt som gör att alla fältens innehåll kan läsas i klartext om någon tjuvlyssnar på vad som skickas i nätet. Är det då ett inloggningsformulär kan lösenordet läsas av varje nätverksadministratör som övervakar nätverkets trafik. Men din besökare kan också sitta på ett oskyddat trådlöst nätverk på ett hotell eller råka ut för andra svagheter ofta kallat man in the middle-attacker vilket innebär att illvilliga kan avlyssna allt som skickas. Detta gäller även för webbsidor som besökaren tar emot, inte bara formulär som skickas, och känslig information i sidans innehåll kan teoretiskt sett avläsas vid transporten mellan server och besökarens dator.

Det varje webbplats bör göra är att skydda känslig trafik så det går via protokollet HTTPS. Det innebär att informationen sänds i en krypterad form via SSL/TLS.

Det är viktigt att besökaren själv kan verifiera att trafiken är skyddad så de vågar använda webbplatsen. Därför är det en bra idé att enhetligt köra med HTTPS på hela webbplatsen även om behovet bara finns på delar av webbplatsen. För att kontrollera att information som skickas säkert via egna API till besökarens enhet kan du behöva kontakta en utvecklare.

Så här kollar du efter fel:

  • Det finns olika sätt att se om en webbsida kommunicerar via HTTPS, ofta syns https:// eller en nyckel i adressraden. Man kan också gå in i HTML-koden och kontrollera att https:// används, eller att filer anropas med // om https:// används för webbsidan.

Fortsätt läsningen: referenser och tips på vidare läsning ›

Hoppa till andra kapitel