Sjekkliste for grensesnittsutvikling

Hva utgjør god grensesnittsutvikling? Hvilke kriterier skal stilles til kvalitet? Følgende er forsøk på en liste over de viktigste faktorene når man implementerer grensesnitt i webbaserte tjenester. Listen setter fokus på tilgjengelighet, web-standarder, ytelse samt tilrettelegging for digital synlighet og webanalyse.

Listen er rettet hovedsakelig mot desktop-miljøer og konvensjonelle nettlesere, men mange av retningslinjene vil sørge for forbedret opplevelse også med håndholdte enheter, og andre måter å benytte innholdet på. Ytterligere tilrettelegging for applikasjoner med mye dynamisk innhold/funksjonalitet skal også legges til.

Hva skal vi med dette?

Formålet er å komme frem til en enkel sjekkliste som kan benyttes når man

jobber med å implementere nettjenester

mottar leveranser fra andre leverandører (kvalitetssikring)

trenger en kravspesifikasjon når man hyrer andre til å gjøre implementering både i grensesnittet og i publiseringssystemer/backend-applikasjoner

Med andre ord ganske ambisiøst.

Det gir for meg ingen mening å løsrive grensesnittet og se på det isolert. Listen tar i stedet for seg diverse egenskaper ved tjenesten som har direkte konsekvenser for brukerne av den. Dette dreier seg naturlig nok mye om grensesnitt, men også en del om serveren og applikasjonen som leverer tjenesten.

Oppdeling

Ettersom jeg innser at sjekklisten favner mange tema og i så måte utgjør en ganske lang tekst har jeg valgt å dele den opp og slippe ut deler her på berget etterhvert som jeg syns de er presentable. Noe av innholdet er nok ikke helt ukjent for lesere av denne bloggen, og listen er til en viss grad en samling av mye jeg har skrevet tidligere.

Dette innlegget vil bli redigert etterhvert som nye tillegg legges ut, så det til slutt funker som en hel referanse.

Sjekklisten

Listen oppdateres fortløpende basert på nye innlegg og eventuelle tilbakemeldinger.

Webstandarder

(X)HTML
- Velg riktig DOCTYPE
- Velg riktig smak: XHTML eller HTML
- Valider mot valgt DOCTYPE
- Bruk semantisk HTML; skill struktur, design og interaksjon
CSS
- Valider mot CSS 2.1
- Bruk eksterne stilsett
- Inkluder CSS toppen av HTML-fila
- Unngå overdreven bruk av klasser, ID-er og span/div
Tilgjengelighet
- WCAG: Velg nivå for tjenesten, sikt mot å klare ihvertfall prioritet 2 (AA)
- WCAG: Gjør automatisk validering på hele nettstedet
- WCAG: Sjekk manuelt opp punkter som ikke kan måles automatisk
JavaScript
- Bruk ikke-påtrengende ("unobtrusive") JavaScript
- Hold JavaScript ekstern
- Ikke bruk inline event-handlere i HTML
- Ikke stol på JavaScript
- Ha fallbacks eller alternativ versjon for de uten JavaScript
- Skriv forsvarlig kode
Diverse
- Spesifiser riktig tegnsett (som oftest UTF-8) med Content-Type-headeren og tilsvarende meta-tag
- RSS: Valider feeds
- RSS: Tilrettelegg for autodiscovery
- Formuler nettleserstøtte ved hjelp av progressiv forbedring
- Bruk CSS til å optimere sider for utskrift

Ytelse

Optimér grafikkelementer
- Prøv deg frem med antall farger, format og komprimeringsnivå
- Slå sammen flere bilder i CSS sprites
Minifiser CSS og JavaScript
Minimer HTTP-forespørsler
- Slå sammen CSS-filer
- Slå sammen JavaScript-filer
- Slå sammen flere bilder i CSS sprites
Fjern duplikert og utdatert CSS og JavaScript
Mål ytelsen
- Mål og identifiser hvor det går med mest tid
- Bruk Firebug og YSlow til å måle ytelse

Domenestruktur/ -strategi

Gi tilgang både med og uten www foran domenet (mittdomene.no og www.mittdomene.no)
Velg ett hoveddomene og rediriger all trafikk til dette med en 301 Moved Permanently
Hjelp brukere ved å tillate feilstavelser som så redirigeres til hoveddomenet. Eksempler er ww.mittdomene.no, www.mitdomene.no, www.mittdomene.no osv.
Foretrekk kataloger fremfor subdomener med mindre det er snakk om en helt adskilt tjeneste
Velg et .no-domene når du henvender deg til det norske markedet

Webanalyse

Sørg for at websiden har egne loggfiler på serveren. Dette letter serverside-statistikk
Pass på at trackingkode for klientside-statistikk ligger inne på samtlige sider
Dersom klientside-statistikken krever det, sørg for at alle sider har unike ID-er gjennom meta-tagger eller lignende

Digital synlighet

Alle sider må ha unik <title/>
Bruk logiske URL-er (eks: /blogg/kategorier) fremfor "system-URLer" (eks: /node.php?id=342&section=7). Dette er også langt mer brukervennlig (hvilken av de to husker du lettest?).
Ha en relevant og meningsfull <h1> på hver side
Samsvar mellom <title>, URL og <h1> kan gi ekstra boost
Ha unik og relevant <meta name="description" ... /> og <meta name="keywords" ... /> på alle sider

Oppdatering 28. mai

Har lagt til en lenke under CSS til enda en artikkel om kontekstuelle selectors. Har også oppdatert (X)HTML-innlegget med et tips om å bruke for-attributtet til label-elementer.

Jeg er veldig interessert i innspill, så legg gjerne igjen en kommentar!