Alle som lager nettsider bør gå gjennom de syv trinnene jeg nevner i dette blogginnlegget, selv om du lager en nettside for 1 million brukere eller en nettside for 10 brukere. Uansett må jeg ta for gitt at du lager nettsidene fordi du antar at målgruppen din har nytte av den, og ikke bare fordi du ‘føler for å lage nettside’.

La oss gå gjennom en forenklet nettsideprosess i 7 trinn:

Hvem og hva?

Hvem lager du nettsiden din for? Har du ikke et avklart forhold til hvem målgruppen din er, er steg 1 et godt tidspunkt for å tenke gjennom dette.

Se for deg 2–4 personer din bedrift er avhengig av for å overleve, og som vil kunne bruke nettsidene deres til ting som i dag gjøres via telefon, e-post, over disk eller i møter.

Eksempel 1:
For en bensinstasjon vil dette være en trailersjåfør (Trine) som vil bestille et bensinkort, og feks en familiefar som vil finne telefonnummeret deres slik at han kan ringe dere en søndag for å høre om dere har lettrømme.

Eksempel 2:
For en bistandsorganisasjon vil du kanskje treffe en ungdom (Markus) som er nysgjerrig på frivillig arbeid i Colombia i sommerferien, ei mor som ønsker å finne et fadderbarn i India og en ansatt i Norad som vil laste ned årsrapporten deres.

Lag noen enkle skisser til deg selv, der du noterer deg et navn på hver av målgruppene og noen linjer om hvorfor du er avhengig av dem i ditt daglige arbeid, samt gjerne hvilke kanaler dere treffes via i dag.

Så må vi for hver av målgruppene lage oss «oppgaver» som de kommer til nettsiden for å løse. Husk at hver person kan ha flere oppgaver, eller kompliserte oppgaver som kan føre til ulike steg eller ulike sider på den endelige nettsiden.

Eksempel 1:
Som trailersjåfør Trine trenger jeg å finne priser på bensinkort, info om firmakonto og et bestillingsskjema, fordi jeg ønsker å forenkle bensinkjøpet mitt.

Eksempel 2:
Som tenåring Markus ønsker jeg å finne ut kostnader, muligheter og annen praktisk informasjon om frivillig arbeid i Colombia, fordi jeg lurer på om det er noe jeg kan gjøre som et friår mellom videregående og videre studier.

Kjernesider

Neste steg handler om å lage deg en oversikt over hva du trenger av innhold for å løse oppgaven til den enkelte. Dette kaller vi kjernesider.

Når vi lager kjernesider skal vi ha med tre typer info:

Innganger
Hvor kommer personen fra? Google? Med hvilke søkeord? Facebook? Lenke fra andre nettsider?

Innhold
Hvilket innhold trenger du å presentere for personen for at hen skal få løst oppgaven sin? Husk at oppgaven kan løses ved å vise både tekster, bilder, video, ved å lenke til andre sider, embedde? Instagram-feed, lage et søkefelt, skjemaer, osv

Utganger
Hva vil vi at personen skal gjøre når de har sett informasjonen på siden? Skal de fylle ut skjemaet? Følge oss på Facebook? Klikke på en tommel for å vise at innholdet var interessant? Kjøpe noe? Laste ned et dokument?

Et tips: Finner du gode utganger kan du også i neste runde måle kvaliteten på siden din. Hvor mange % av brukerne gjør de ulike tingene? Får de løst oppgaven sin?

Eksempel 1:

Ved å lage disse kjernesidene lager du kun innhold som du tenker er relevant for målgruppen din. Du må også huske at kjernesider ofte er mer enn én side. For eksempel vil Trines kjerneside være et skjema, samt en kvitteringsside.
En side med en søkeknapp trenger et søkeresultat, etc.

Når du har tegnet ut alle kjernesidene vil du ut fra dette også kunne lage forsiden din. De aller fleste vil mest sannsynlig komme rett inn i kjernesiden sin fra Google eller sosiale medier. Likevel er det ofte noen i målgruppen din som har sin «inngang» via forsiden din. Feks presse og returnerende kunder.

Jeg tenker ofte på forsiden som en kombinasjon av en innholdsfortegnelse og en merkevarebyggende reklameplakat, for alle disse besøkende som går til nettsiden din kun for å forstå «hva ditt selskap holder på med» og «om dere er seriøse».

Lag innholdet

Nå er det på tide å lage selve innholdet på siden din. Ja, riktig. Du har ikke designet noe enda. Og godt er det.

Prøv å forfatte gode formuleringer og tenk gjennom hvordan innholdet på de ulike siden kan fattes i korthet på best mulig måte. Husk at å skrive for nett handler om å skrive på samme måte som folk søker i Google. Du må bruke ordene som kundene dine bruker, siden det er disse ordene de skal finne deg via.

Har du områder for søkeresultater, webshop, nyheter, etc? Tenk gjennom hvilken informasjon som den besøkende trenger å se rundt hver av disse produktene, for så å klikke seg inn for å lese mer.

Rangér også denne informasjonen for hva som er viktigst, slik at du, når du skal designe, prioriterer og fremhever riktig felt.

Lag wireframes

I neste trinn skal vi lage konseptskisser (som kalles wireframes, på tøff engelsk). Da skal vi tegne. Enten på skjerm eller på papir.

Nå skal du lage en disposisjon av innholdet ditt. Hva skal hvor? Hvordan bør bildet stå i forhold til teksten? Hva skal øverst og hva skal nederst?

Begynn med å tegne hver kjerneside for mobilskjerm. Da må du nemlig prioritere hardt på hva som er viktigst og som dermed havner i første skjermhøyde. Men, heldigvis: brukerne i 2017 er ikke redde for å scrolle.

Etterhvert som du tegner kjernesidene vil du også fort oppdage hvilke valg du må ha i menyen, hva som må være klikkbart og hvilke sider  som skal ha hvilken type header (ofte logo, meny, søk etc i toppen av siden) og footer (kontaktinfo, juridiske merknader etc. i bunn av siden).

Husk at konseptskissene ikke trenger å inneholde design. Konseptskissene skal kun vise hvilke elementer som er viktigst, hva som er klikkbart, hva som bør presenteres som punktlister og hvor stor en video bør være i forhold til bildet på en side, osv.

Tips: Ønsker du å gjøre dette digitalt vil jeg anbefale at du tar en titt på balsamiq. Der kan du designe nettsider, uten at du får anledning til å legge på fine fonter, bakgrunner, etc. Men blyant og papir, gjerne med post-it-lapper på, fungerer også helt supert!

Design nettsiden din

Når du skal lage webdesign for nettsiden din forstår jeg om du ikke føler deg tilpass. Likevel har du allerede gjort en viktig jobb i forrige trinn, som gjør at om du hopper over trinn fem og går rett på sekseren vil folk finne det de leter etter. Samtidig vil nok bedriften din fremstå relativt mye mer seriøs om en nettside er pent designet.

Selv om du ikke er noen designer kan du likevel komme rundt dette:

Se på andre nettsider og la deg inspirere av dem. Bruker du vanlige designmønstre vil også brukerne dine mest sannsynlig kjenne seg bedre igjen på nettsiden din.

Feks:

• bruk blå farge på lenker (#006699)
• bruk fonten Georgia i 18 pkt og 26 pkt linjeavstand på brødtekst
• plassér logoen oppe til venstre og søket oppe til høyre
• legg et stort bilde med tekst og en viktig knapp over, øverst på forsiden

Altså: vanlige designmønstre = de tingene «alle» gjør på nett

Tips: Skal du webdesigne sjøl er Sketch verktøyet du bruker. Last ned prøveversjon her og se masse introduksjonsvideoer her. 

Finn en nydelig mal og tilpass den.

Når du vet hvilket innhold du skal ha og hvordan det skal disponeres kan du ta deg friheten til å finne en pen mal i WordPress, Webflow eller Squarespace og bruke denne.

NB! Mange begynner i feil ende og finner malen først. Da har du derimot plutselig overlatt trinn 1–4 til en tilfeldig maldesigner et sted i verden.

Det finnes millioner av fine maler der ute, så å finne rett mal kan ta lang tid. Men let og se om du finner en som passer kjernesidene dine, og tenk hvordan du enklest kan endre de ulike malene til å passe deg.

Sett bort punkt 5 til en webdesigner.

Kode nettsidene

Alle nettsider er i dag bygget opp av HTML og CSS, og veldig ofte Javascript. For å kode nettsiden din finnes det derimot flere muligheter som gjør at du kan slippe å måtte lære deg disse språkene.

Likevel vil du nok fort merke at det er nødvendig å kunne spesielt HTML for å få til detaljene på siden din, akkurat slik du vil.

Når du skal kode nettsider kan vi da si at du har tre muligheter:

Finne et verktøy som koder for deg: Gå til WordPress.com, sett opp en side og kjøp et WordPress-theme som ligger så nære det du ønsker deg.

Evt kan du gå til WordPress.org og laste ned WordPress og installere dette på et webhotell. Det finnes flere guider på nettet, feks på YouTube, om hvordan du gjør dette.

Eller du kan bruke Wix, Squarespace eller Webflow til å designe sidene dine. Disse løsningene lar deg drag-and-drop’e og legger på kodene i bakkant.

Lær deg HTML, CSS og Javascript. Det finnes masse fine guider der ute.

Finn en utvikler som kan hjelpe deg med å kode nettsidene dine.

– – –

Velger du variant A eller B er det viktig å huske på

• at sidene har gode meta-tagger, slik at nettsiden får best mulig SEO og at Facebook-delinger ser pene ut
• at du bruker «standardene» i webverden, f.eks ved å bruke H1-tagger til de viktigste titlene, å legge alt-tekst på alle bilder, osv
• prøve å skape kortest mulig kode, ved å gjenbruke mest mulig. Det gjør du ved at alle H1-titler er like, at du setter flest mulig styler på body-taggen, dvs stiler som «settes som utgangspunkt» for resten av siden og som blir arvet videre. Setter du «font-family: Arial;» på body-taggen, ofte kalles det også body i WordPress-theme-innstillingene, slipper du å velge Arial noe annet sted.

Hvor du skal lagre nettsidene (hoste dem) er et annet kapittel. Her har du hundrevis av valg. Spør utvikleren din hvilket miljø som passer best for din type side, med størrelsen og trafikken du kommer til å ha på nettsidene dine. (Vi bruker Heroku til Ruby, AWS til PHP, WordPress.com til enkle blogger og Webhuset for de som vil kjøre old-school og ønsker å kunne ringe hyggelige Bergensere for hjelp.)

Koble nettsidene til verden

Når nettsidene er ferdig kodet er du klar for å koble disse til resten av Internett. I praksis betyr det å sørge for at nettsidene finnes dersom man søker i Google. Og jo flere lenker du har til nettsiden din, enten fra Facebook, LinkedIn eller fra andre nettsteder, jo større sjanse er det for å sende de besøkende inn til akkurat din side.

Skap trafikk fra Facebook

På Facebook er segmenterte annonser gull for små bedrifter. Da slipper du å bruke annonsekroner på andre enn de som faktisk har interesse for budskapet ditt.

Sørg for treff fra Google

Nå kan vi takke oss selv for at vi har laget kjernesidene i trinn 2. Da vet vi allerede hvilke søkeord vi vil at den besøkende skal komme til oss via.

Google elsker konkrete nettsider. Og det har vi jo laget; egne sider for hvert smale område.

Husk derfor å sørge for at du bruker disse søkeordene i tittelen, i sidetittelen og i URLen på siden.

Med Google Analytics kan du også følge med på hvem og hvor mange som besøker siden din, hva de leser og ikke, hvor de kommer fra, om de sitter på mobilen eller på en PC fra 2005 osv.

Test og lansér

Og viktigst for punkt sju: Test alt du kan før du lanserer. Og sett av nok tid til denne delen – som jeg litt for ofte har vært for optimistisk for.

Test skjemaer, gjør testkjøp i nettbanken, legg inn blogginnlegg med fæle bilder, test sidene på mobil, nettbrett, gammel PC, ny Mac, ulike nettlesere, og så videre. Stresstest siden din til det maksimale.

Når du har testet alt du kan og har rettet alle feil kan du lansere nettsidene.

Illustrations Designed by Freepik

Forfatter: Johannes

Grunnlegger og daglig leder i Brainify, med 26 års erfaring som designer, konseptutvikler, prosjektleder, forretningutvikler og innholdsprodusent for kunder som Stortinget, Posten, Aker Solutions, Dagsavisen, Morgenbladet, Vårt Land, Redd Barna og Norad i tillegg til mange mindre bedrifter og frivillige organisasjoner. Vis alle innlegg av Johannes