cjohansen.no

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!

Tweet this

Muligens relatert

• Hvor er din h1?
• Gode grensesnitt: (X)HTML
• Gode grensesnitt: CSS
• Gode grensesnitt: Tilgjengelighet
• Gode grensesnitt: JavaScript
• Gode grensesnitt: Siste punkter om webstandarder
• Grensesnittsytelse
• Hva utgjør en god title-tag?
• Domener, webanalyse og digital synlighet

Ny kommentar

Navn: *

E-mail: *

URL:

Kommentar:

Dette feltet er ment å beskytte cjohansen.no mot spam. Vennligst oppgi tallet 718 i feltet.

Noe HTML tillatt: strong, em, blockquote, pre, code, ul, ol og li. Lenker ikke tillatt, men URL-er autolenkes. Inline kode-eksempler med <code>, kodeblokker med <pre>.