Checklista för webbpublicering

Checklistan kan komplettera de testprotokoll som webbutvecklarna, för större webbplatser i alla fall, har för att verifiera att ett webbprojekt håller rätt kvalitet. Dessutom har ni säkert checklistor för det kommunikativa, det vill säga hur tilltalet ska vara och vilka skrivregler man ska följa.

Eftersom jag själv inte hittat någon lista för de halvtekniska faktorerna som påverkar besökarna sammanställde jag nedan lista till jobbet. På min arbetsplats kommer vi i kommande webbprojekt att skicka med utvalda punkter från checklistan som acceptanskriterier på varje leverans från webbkonsulterna - detta så inga onödiga oklarheter ska uppstå kring det som drabbar våra besökare.

Om du driver en större webbplats är det en bra idé att intressera dig lite för vilka tester utvecklarna har för att försäkra dig om att rätt kvalitet uppnås. Dessa tester kan vara allt från helt manuella till fullständigt automatiserade. Vissa av punkterna i checklistan påverkas nämligen av det arbetsflöde som webbutvecklarna har och vissa av punkterna är enkelt att lösa genom konfiguration av Jenkins eller andra verktyg för kontinuerlig integration (mer om teknikaliteter i kommande bloggposter).

Startpaket för din checklista till webbplatsen

Denna lista ska du kunna kontrollera själv för att säkerställa att webbplatsen fungerar som du vill. Självklart kan du byta ut mätvärden om du vill sikta högre eller lägre. Välj ut vilka punkter du tycker är rimligt att varje undersida på webbplatsen ska leva upp till och diskutera dem med din webbutvecklare (ibland behöver man nämligen resonera annorlunda).

1. Passera tillgänglighetsriktlinjen WCAG 2.0 AA (så det är tillgängligt och användbart, nu och i framtiden).
2. Webbsida ska laddas in fullständigt på mindre än 1 sekund. Mäts enligt de egenskaper som användare inom webbplatsens tilltänkta målgrupp har, exempelvis placerad inom Sverige med 4G-uppkoppling (om långsammare än 1 sekund tappar användaren känsla av flyt och upplever att de väntar).
3. Google Pagespeed Mobilt minst 80 av 100 (så det inte blir långsamt på en mobil eller mobil uppkoppling).
4. Antal CSS-filer max 3, men helst färre (fler filer innebär längre väntetid utan att tillföra något för alla besökarna).
5. Antal JavaScript-filer max 3, men helst färre (fler filer innebär längre väntetid utan att tillföra något för alla besökarna).
6. Antal gränssnittsbilder 3 eller färre (använda CSS Sprites, fler filer innebär längre väntetid utan att tillföra något för alla besökarna).
7. Bilder som används i webbdesignen ska:
   a. Vara i den storlek/upplösning som visas på webbsidan och inte skalas om via klientteknik som HTML, JavaScript och CSS - om inte dokumentation kring högupplöst bildhantering finns (det kan ordentligt minska tyngden på filer).
   b. Vara sparade i det format som möjliggör minst filstorlek i relation till bildkvalitet.
   c. Vara sparad för webben.
   d. Körts genom programvara för icke-förstörande optimering.
8. Inte använda fonter som behöver laddas ned (om inte den grafiska manualen kräver ett särskilt teckensnitt finns ingen anledning att slöa ner för besökarna).
9. Validerande på W3C för HTML, CSS och Javascript - varningar tolereras, ej omotiverade fel (icke-validerande kod riskerar att försämra användbarheten).
10. Minifierad frontend-kod (det vill säga HTML, CSS, Javascript) vilket innebär att onödiga mellanslag och tabbar tas bort (det går fortare att ladda ner det om den är minifierad).
11. Textfiler skickas komprimerat/GZippat (då kan man inte sällan spara ner upp till 90 % av datamängden att skicka till besökaren).
12. Följa alla mätbara gränssnittsrelaterade prio 1 på webbriktlinjer.se (de som fanns vid projektstart, nollmätning eller uppdatering beroende på vad som framgår i ens dokumentation).
13. Default förväntad livslängd 30 dagar på filer (för att dra nytta av webbläsarcache så gamla filer inte överförs i onödan till återkommande besökare).

Bonus: Embryot till en redaktörs checklista för varje enskild publicering

1. Bilder ska alltid vara under 65 Kb i filstorlek (för att tunga bilder tar lång tid att ladda in).

Som du inser när du läser checklistan finns saker man behöver lägga till beroende på hur ens webbplats är tänkt att användas. Exempelvis de som har valt att köra mobile first så bör en punkt in på checklistan för att man inte använder, eller länkar till, PDF-filer på webbplatsen.

Under de kommande dagarna blir det ett blogginlägg per dag med diskussion om respektive punkt, hur man kan resonera kring dem och vilken nivå som är önskvärd.

Presentation: Snabbt och användbart webbgränssnitt

Jag gjorde en rewrite av denna serie av bloggposter för en presentation på jobbet.

Presentationen på Slideshare

Dagens läsning på #blogg100:

• Om näthat
• Att bokbranschen kan behöva förnya sig - svårt att hitta etablerade författares böcker (newluxury.se/samhalle/jag-rear-ut-min-sjal/)
• Google delar upp Google+