HTML-guide til udvikling af integrationsløsninger til Borger.dk

• Det fælles designsystem

Designregler

Her gennemgås designprincipperne for integrationer. Det er meget vigtigt at principperne overholde for at sikre en god brugeroplevelse.

Borger.dk benyttet webframeworket Bootstrap 2.3.2 og HTML-guiden arver derfor en del heraf. Kendskab til Bootstrap er derfor en fordel men ikke en nødvendighed, når man arbejder med guiden.

Stylesheet

Alle løsninger skal benytte det samme stylesheetet bdk-app-master.css (minificeret).

Det tilrådes kraftigt at linke til stylesheetet. Alternativt kan der laves en lokal kopi, der opdateres hyppigt.

Det er ikke tilladt at ændre i bdk-app-master.css tilpasninger skal altid foretages i et separat stylesheet.

Validt og velformet HTML

HTML-kode skal være valid html og være velformet og semantisk korrekt.

I det omfang det er muligt og giver mening er det dog tilladt at berige integrationer med Javascript, så længe det ikke indvirker negativt på brugeroplevelsen og guidens øvrige principper.

Bootstrap indeholder en række komponenter og javascriptbibliotekter, der er kompartible out of the box, hvorfor det er hensigtsmæssigt at tage udgangspunkt i disse.

Tilgængelighed

Løsninger skal overholde principperne for WCAG 2.0 level AA. Det er tilladt at benytte benytte WAI-ARIA.

Understøttede browsere

• Internet Explorer 8+
• Firefox 4+
• Google Chrome 15+
• Safari 4+
• iOS Safari
• Android browser

Guiden indeholder i vid udstrækning elementer, der ikke er fuldt understøttede i alle browsere. Det er tilladt at benytte sådanne elementer progressivt, så længe de ikke er nødvendige for funktioner eller ødelægger look and feel.

Visning på små skærme (mobil og tablet)

Det hostede stylesheet sikrer, at designet reagerer, når skærmen bliver mindre.

Det er dog nødvendigt, at man sikrer sig, at integrationen vises tilfredsstillende på små skærme (480px til 320px). En god visning fungerer teknisk men har også et interaktionsdesign, der er velegnet til små skærme. Generelt kan små skærme ikke håndtere samme kompleksitet som store skærme. Løsninger med eksempelvis flere menuer kan være vanskelige at omsætte på tilfredsstillende vis til mobile platforme.

En god prakis kan derfor være at designe løsningen til små skærme først og derefter sikre, at den også vises tilfredsstillende på store skærme ved eksempelvis at berige løsningen med yderligere ikke-essentielt funktionalitet/indhold. Hermed sikres, at de esssentielle elementer medtages og at brugeroplevelsen er i højsædet.

HTML-guiden benytter følgende breakpoints:

Navn	Breakpoints
Stor skærm	1200px og op
Normal skærm	980px og op
Tablet (portræt)	768px og op
Smartphone til tablet	767px og ned
Smartphone	480px og ned

Gridbaseret design

Borgerguiden og integrationer skal indpasset i et grid, der består af rækker med hver 12 kolonner. Klassen row-fluid definerer rækker og klasserne span* (hvor * er tal mellem 1 og 12, hvis sum er lig 12) angiver kolonnerne.

	<div class="row-fluid">
		<div class="span4">Her bruges fire kolonner ud af tolv</div>
		<div class="span8">Her bruges otte kolonner ud af tolv</div>
	</div>    

En række skal bestå at 12 kolonner. Har man kun behov for færre kolonner skal man benytte offset .

	<div class="row-fluid">
		<div class="span4">Her bruges fore kolonner</div>
		<div class="span4 offset4">Her bruges fire kolonner med et offset på fire kolonner</div>
	</div>      

Det er muligt at indlejre rækker i kolonner. Når kolonner indlejres etableres et nyt under-grid med 12 kolonner.

	<div class="row-fluid">
		<div class="span6">Her bruges 6 kolonner</div> 
		<div class="span6">
			Her bruges 6 kolonner, men der er en række indlejret herunder, som får i alt 12 kolonner.
			<div class="row-fluid">
				<div class="span6">
					Her bruges 6 kolonner
				</div>
				<div class="span6">
					Her bruges 6 kolonner
				</div>
			</div>
		</div>
	</div>