Style guide

Best practice for arbejde med hjemmesider på Health:

Sideopsætning

Skabelon

På de eksternt rettede sider bruger vi sideskabeloner i 2016-design.
På de internt rettede sider henvendt til medarbejdere eller studerende bruger vi sideskabeloner i 2015-design.

Layout

På Health sætter vi oftest sider op med skabelon-layout med venstre- og uden højre spalte (vælges på fanen "Udseende").
Derefter indsætter vi oftest kolonne-element 2-1.

Forsider

På Health laver vi forsider til institutter, centre og fakultet efter en fast skabelon.

Vi indsætter 3 banner-elementer (type 2) i stedet for et fokusfelt øverst på siden. Bannerelementerne fremhæver udvalgt indhold, som ikke svarer til et menupunkt på det øverste niveau i menuen.

Vi sætter en minimumshøjde på bannerelementerne, så alle tre bannere flugter både for oven og for neden.

Længere nede på siden ligger oftest en nyhedsliste og en kalenderliste side om side, og i højre side fremhæves det mest efterspurgte indhold via 3-5 knapper. 

Højre spalte

Vi bruger højre spalte til kontaktoplysninger, relateret indhold og tilmeldingsknapper.

Kontaktoplysninger

Vi har i udgangspunktet altid en kontaktperson på hver side - gerne præsenteret med visitkort fra PURE.
Læs mere om kontaktoplysninger 

Relateret indhold

Ønsker man at vise relateret indhold, præsenteres det i højre spalte under overskriften "Se også" (engelsk: "More infomation")

Tilmeldingsknapper

Tilmeldingsknapper oprettes via knap-elementet og placeres i udgangspunktet øverst i højre spalte.
Læs mere om knapper

Kontaktoplysninger

Vi har i udgangspunktet altid en kontaktperson på hver side - gerne præsenteret med visitkort fra PURE. Kontaktpersonen vises under overskriften "Kontakt".

Telefon

Når vi skriver telefonnumre manuelt - altså når de ikke bliver vist via PURE - skriver vi dem efter denne model:

Telefon: 12 34 56 78

E-mail

Skriver man en e-mail adresse, skriver man på danske sider:

E-mail: eksempel@au.dk 

Og på engelske sider:

Email: eksempel@au.dk 

Kort

Man kan vælge at sætte et link til et kort ind på sin side sammen med kontaktoplysningerne.

Til dette formål kan man med fordel bruge AU's bygningskort, hvor man også kan hente links til kort, der viser en udvalgt bygning.

Overskrifter og tekster

Overskrifter

Det er vigtigt i forhold til søgemaskineoptimering af websider, at man formaterer sine overskrifter med overskriftsformateringerne (H1, H2 eller H3)

I udgangspunktet skal en side kun have én overskrift med formateringen H1. Resten af overskrifterne på siden formateres med H2 eller H3.

Tekster

  • Kend din målgruppe og skriv i deres sprog
  • Del teksten op i korte afsnit med overskrift
  • Start med det vigtigste og skriv kort og klart
  • Skriv aktivt, ikke passivt (ikke: ”Ansøgningen behandles…”, men ”Vi behandler din ansøgning…”)
  • Undgå relative udtryk som ’i år’ og ’i morgen’ – fordi din tekst ofte ligger på web i lang tid
  • Undgå også angivelser af placeringer på hjemmesiden (fx 'i menuen til venstre' eller 'via linket til højre'), da placeringer ændrer sig, når man bruger mobile enheder
  • Brug gerne punktopstillinger med 3-7 punkter

Tænk på, at læsere af hjemmesider oftest skimmer teksterne og meget sjældent læser hele siden igennem.

Folde-ud-elementer

Folde-ud-elementer fungerer godt til indhold, der skal ligge som et tilbud til læseren, der så kan vælge, om det er noget, han eller hun vil gå dybere ned i. De er også gode til at danne overblik over indholdet på en side med mange lange tekster.

Vi anbefaler, at man altid overvejer, om det er nødvendigt at pakke sit indhold ind i et folde-ud-element, før man gør det. Elementet giver brugeren et ekstra klik og skjuler umiddelbart noget indhold for brugeren.

Vi lægger ikke helt korte tekster eller enkelte links ind i folde-ud-elementer.

Vi bruger H2 til overskrifter på folde-ud-elementer.

Fokusfelter

I takt med at AU har fået udviklet banner- og knap-elementer, bruger vi på Health fokusfelterne mindre og mindre.

Fokusfelterne kan fungere i toppen af en hjemmeside i deskop-version, men de fungerer ikke på mobile enheder, da de skalerer dårligt og ikke er klikbare.

Vælger man at bruge fokusfelter, anbefaler vi, at man overvejer, hvad fokusfeltet skal bidrage med for brugeren.

Vi bruger ikke fokusfelter i højre spalte på en webside, og vi bruger ikke fokusfelter som ensfarvede felter. Vi anbefaler i stedet banner-element 1, banner-element 2 eller knapper.

Billeder

På Health bruger vi kun billeder, hvis de direkte understøtter budskabet på siden. Billeder er ofte et forstyrrende element, når man se en webside på en mobil enhed, så derfor overvejer vi nøje, om billedet overhovedet er nødvendigt, før vi sætter det på en webside. 

Bruger man billeder på sin webside, anbefaler vi, at de sættes til kun at blive vist på desktop - medmindre de tjener et vigtigt formål på mobilvisningen.

Vejledning til billeder

Knapper

Sådan bruger vi knapper

På Health bruger vi knapper til tilmelding og ansøgning.
Derudover bruger vi knapper, når vi vil fremhæve et eller flere links.

Oftest er knapper placeret i højre spalte.

Vi blander ikke almindelige tekst-links og knapper mellem hinanden.

Opsætning af knapper

Vi bruger knap-elementet (button 2015), når vi laver knapper. 
Vi laver ikke knapper som html-elementer.

Vi sætter pil på knapperne i højre side

Teksten på knapper står til venstre

Ikoner og farver

Vi sætter kun ikoner på knapper, hvis ikonet meget klart understøtter funktionen på knappen. Ellers lader vi hellere være. benytter man et ikon ét sted, skal man konsekvent benytte det til den samme funktion alle andre steder.

Farver

  • Vi bruger farven "standard", hvis knappen linker til en anden side på det samme site.
  • Vi bruger den mørkeblå farve, hvis knappen linker til en eksternt rettet AU-side.
  • Vi bruger farven cyan-blå, hvis knappen linker til en medarbejderside.
  • Vi bruger den grønne farve, hvis knappen linker til en side på studieportalerne.
  • Vi bruger den grå farve, hvis knappen linker til en ekstern side uden for AU.
    (En undtagelse er links til sider i Region Midt, hvor vi bruger den orange farve.)
  • Vi retter os efter anbefalingerne til farvebrug på knapper

Vejledning til knapper

Links

  • Linktekster skal være beskrivende og skal kunne stå alene, så brugeren ved, hvor linket fører hen. Undgå linktekster som "klik her" eller "læs mere".
  • Links til filer og links, der går til eksterne sider uden for AU, sætter vi til at åbne i nyt vindue.
  • Efter links til PDF'er skriver vi (PDF). Vejledning til at linke til filer 
12388 / i30