Setter du spiker i nåleputa?
Det er mye å huske på når man skriver for web. Jeg har samlet en bunke nyttige tips for de som vil bli flinkere til å lage websider som er tilgjengelige for flere.
La publiseringsløsningen sørge for dekoreringen
Artiklene er finest når oppsettet er likt
La innledninger stå uten formatering. Like innledninger i alle artikler gir et helhetlig og ryddig inntrykk av et nettsted. Hvis du er misfornøyd med utseendet til innledningen, er det bedre å endre alle med css enn å endre på en så den blir ulik de andre. Snakk med nettredaktøren din om mulighetene for endringer.
Bare lenker skal ha lenkefarge og understreking
Vi har blitt vant til at understreket blå eller tilsvarende markert tekst er lenker. Tekst som er farget som lenke eller understrekede ord er lurelenker som denne og denne. Irriterende?
Titler er for folk. Fil- og mappenavn er for maskiner
Fil- og mappenavn bør være leselige i nettadressen og skal helst bare bestå av tegn fra
a til z, 0 til 9 og bindestrek.
I titlene kan du skrive mer fritt.
Mellomrom blir gjort om til %20 som gjør urlen lang og uleselig hvis det er mange av dem.
Det er flere tegn som kodes om på denne måten, så det er best å holde seg til trygge tegn.
Punktum skal helst bare brukes for å skille filnavnet fra filtypen, eks: bilde.jpg, index.html.
Menyene er basert på mappetitlene
Har du trøbbel med menyer som ser stygge ut, endre mappetitlene. La mappenavnene være. Du kan endre mappetittelen i redigerings-arkfanen.
Skriv beskrivende lenker og overskrifter
Folk som bruker nettet aktivt har det ofte travelt og er for det meste "letelesere". De leser sjelden teksten på en nettside fra topp til bunn, men leter etter informasjon ved å skumlese overskrifter, lenker og uthevet tekst. Derfor er det viktig at overskriftene henger sammen med tekstene, og at lenkene beskriver godt hvor du kommer når du trykker på dem. På den måten finner leteleserne fortere informasjonen de er ute etter.
Bruk overskrifter og utheving riktig
Hvis det fantes universitetskurs i skriving for web, burde dette være pensum i WEB001.
Bruk riktig struktur. Ikke hopp direkte fra h1 til h3. Det skaper trøbbel for folk med skjermopplesere og er dessuten uryddig og uprofesjonelt.
Italic og bold skal ikke brukes til overskrifter men til utheving av tekst. Italic egner seg dårlig på digitale flater ettersom den er litt utydelig, men bold skaper kontrast i teksten slik at den blir enklere å lese.
På samme måte kan du for eksempel ikke bruke h4 til å utheve tekst. H4 er en overskrift som bare kan brukes som underoverskrift etter h3 som bare kan brukes etter h2 som bare kan brukes etter h1.
Riktig struktur på en side er som følger:
Hovedoverskrift: <H1>
Dette er tittelen på siden i Vortex. Du trenger derfor aldri å sette denne selv.
Nivå 2 overskrift: <H2>
Dette er den første overskriften du skal sette selv på en side.
Nivå 3 overskrift: <H3>
Når du skal skrive om temaer som trenger en overskrift, men som hører inn under en tidligere overskrift, skal du bruke h3.
Nivå 4 overskrift: <H4>
Tilsvarende som med h3, skal denne overskriften brukes der du trenger en overskrift til et undertema.
Nivå 5 overskrift: <H5>
H4 er en ganske lite brukt overskrift, og h5 er enda sjeldnere i bruk. Regelen om struktur er fortsatt klar: Du skal ikke kaste inn en h5 rett under h2 bare fordi du liker størrelsen.
Nivå 6 overskrift: <H6>
Når du trenger h6 som overskrift, har du en ganske avansert struktur på dokumentet ditt. Vi har ikke støtte for flere nivåer enn 6, men det er allerede ganske vanskelig å skille dem fra hverandre, så hvis du trenger flere, er det kanskje på tide å forenkle dokumentet?
Alt-tekster
Gi brukeren et alternativ når innholdet presenteres som bilde, video eller lyd. Les om difi's krav om tilgjengelighet.
Legg merke til at jeg i bildeteksten under har skrevet noe man ikke nødvendigvis kan lese ut av bildet, mens alt-teksten forteller bare hva man kan se. I tillegg til å være nyttige for skjermopplesere, kan alt-tekster være nyttige for folk som bruker søkemotorer til å lete etter bilder med spesielt innhold. Søker du etter "svart katt", burde i teorien dette bildet dukke opp i resultatene.
<img src="bilder/cat.jpg" alt="Svart katt som hviler på dørstokken">
Bruk tabeller bare til ordnede data
| Smak | Mengde | Bestilt |
|---|---|---|
| "Sjokolade" | 100 | 150 |
| "Mint sjokolade" | 60 | 100 |
| "Pistasj" | 200 | 10 |
| "Jordbær" | 300 | 0 |
| "Vanilje" | 200 | 20 |
Husk tabellheadinger og titler slik at oppleserverktøy kan gi lytteren beskjed om hva som er hva.
Du trenger ikke sette alle tabelloverskriftene i bold, for tabeller har en egen rad og/eller kolonne for tabelloverskrifter.
Ved å gå inn i innstillingene til tabellen, kan du sette headinger riktig og samtidig spare tid.
Du finner Egenskaper for tabell ved å høyreklikke på tabellen i redigering.
Hvordan strukturere annet innhold?
Misforstått tabell
På 90-tallet var det mange utviklere som syns tabellen var fin til å strukturere innhold, men denne metoden gjorde sidene tunge å laste, vanskelige å endre og umulige å lese på mobil og nettbrett.
For strukturering av innhold kan du bruke div-er, faktabokser eller forsidebokser der det er hensiktsmessig. Be nettredaktøren om råd der du er i tvil. Jeg syns ofte det kan være vrient å få tekst og bilder til å oppføre seg som jeg vil i et dokument, så jeg skjønner at det kan være fristende å ty til en tabell for å få ting til å oppføre seg. Flytt i stedet litt på bildene, juster bildestørrelsen, legg til en faktaboks. Av og til kan det løse mye å legge til eller trekke fra en setning, men det er ikke alltid så lett.
For videre lesning kan jeg anbefale nettredaktørens sjekkliste: Hvordan skrive for nett
Skriv ut din egen uu-poster (pdf)
