Webbplatser och e-tjänster

För att det ska vara lätta för stockholmarna att känna igen stadens verksamheter behöver även våra webbplatser ha ett liknande utseende. En viktig sak att tänka på är tillgänglighetsaspekten. Målet är att stadens webbplatser ska uppfylla W3C:s tillgänglighetsriktlinjer WCAG 2.0 nivå AA och E-delegationens riktlinjer till motsvarande nivå.

 

Riktlinjerna WCAG 2.0
E-delegationens riktlinjer


Här följer de grafiska riktlinjerna för stadens webbplatser.

Grid

En vertikal grid har tagits fram för olika digitala enheter så att det ska se enhetligt ut. Gridden består av 12 kolumner för desktop och iPad och 6 kolumner för mobiltelefoner.

Griddens bredd

Desktop

Gridd – 1200 px
Kolumnbredd – 78 px
Mellanrum – 20 px

Surfplatta
Stående – 768 px
Liggande – 1024 px

Mobiltelefon
Stående – 320 px
Liggande – 480 px
Kolumnbredd – 20 px
Mellanrum – 4 px

Typografi

Storlekar desktop

H1 MEGA – Stockholm Type Bold 72/80
H1 SUPER – Stockholm Type Bold 48
H1 – Stockholm Type Bold 36/40
H2 – Stockholm Type Bold 26/32
H3 – Stockholm Type Regular 24/32
H4 – Stockholm Type Regular 20/24
H5 – Open Sans Semibold 16/24
H6 – Open Sans Semibold 13
Ingress – Open Sans Light 24/32
Brödtext – Open Sans Regular 16/24
Citat – Stockholm Type Bold 20

Storlekar mobil

H1 MEGA – Stockholm Type Bold 30/32
0H1 SUPER – Stockholm Type Bold 30/32
H1 – Stockholm Type Bold 30/32
H2 – Stockholm Type Bold 26/32
H3 – Stockholm Type Regular 24/32
H4 – Stockholm Type Regular 20/24
H5 – Open Sans Semibold 16/24
H6 – Open Sans Semibold 13
Ingress – Open Sans Light 20/26
Brödtext–Open Sans Regular 16/24

Typsnitt via font-tjänst

Open Sans finns på Googles font-tjänst. För Stockholm Type på webben har staden en egen font-tjänst.

Baslinjeraster

Ett baslinjeraster används för att avstånd mellan till exempel rubrik och text eller mellan stycken blir samma överallt. Baslinjerastret har en höjd på 8 pixlar perbasenhet.

Avstånd mellan:

  • H1 och ingress – 4 basenheter (i samma stycke)
  • ingress och brödtext – 4 basenheter (i samma stycke)
  • stycken – 5 basenheter
  • H2 och brödtext – 2 basenheter
  • H3, H4, H5 och brödtext – 1 basenhet

Färger

För att skapa samma färgintryck med god kontrast i våra digitala kanaler har vi tagit fram en färgpalett för webben med RGB och HEX-värden för respektive färg.
Färgpalett för digitala kanaler

Sidhuvud

Placering och storlek på logotypen i sidhuvudet på olika enheter.

Desktop

Höjden på logotypen är 48 px och avståndet ovanför logotypen är 3 basenheter, alltså 24 px. Logotypen är placerad på kolumnen längst till vänster i gridden.

Ett streck som är lika högt som logotypen skiljer den från namnet i sidhuvudet. Strecket är placerat 52 px från logotypen och namnet 20 px från strecket. Namnet är centrerat i höjdled mot strecket.

Surfplatta

På surfplattor används endast skölden. Höjden på skölden är 96 px och avståndet ovanför skölden är 6 basenheter, alltså 48 px. Skölden är placerad på kolumnen längst till vänster i gridden.

Ett streck som är lika högt som skölden skiljer den från namnet i sidhuvudet. Strecket är placerat 40 px från logotypen och namnet 30 px från strecket. Namnet är centrerat i höjdled mot strecket.

 Mobil

På mobiler används endast skölden. Höjden på skölden är 64 px och avståndet ovanför skölden är 4 basenheter, alltså 32 px.

Skölden är placerad på kolumnen längst till vänster i gridden.

Ett streck som är lika högt som skölden skiljer den från namnet i sidhuvudet. Strecket är placerat 16 px från logotypen och namnet 30 px från strecket. Namnet är centrerat i höjdled mot strecket.

Färg på sidhuvudet

Sidhuvudet kan ha olika färger.

 

Navigering

Här beskrivs de olika typerna av navigeringar som finns.

Huvudmeny

Länkarna i huvudmenyn är en lista av länkar med en avskiljande linje emellan. Den sida som användaren befinner sig på, markeras i menyn med fet text i svart, samt de tillhörande linjerna är svarta. Dessa textlänkar ska aldrig vara understrukna.

Rubriken: H4, Stockholm Type Regular, 20pkt, Svart (“#333333”)
Länkar: Open Sans Regular, 16pkt, Blå (“#006EBF”)
Sida man befinner sig på: Open Sans Bold, 16pkt, Svart (“#333333”)

Navigationspuff på startsidan

Dessa puffar länkar från startsidan till olika ämnen och teman. Puffarna ska innehålla en bild som representerar verksamheten, ämnet eller temat, en beskrivande rubriklänk med pil som aldrig är understruken samt en ingress.

Rubrik: H3, Stockholm Type Regular, 24pkt, Blå (“#006EBF”)
Ingress: Open Sans Regular, 16pkt, Svart (“#333333”)

Navigationspuff på undersidor

Dessa puffar används som navigering mellan olika undersidor på ett ämne eller ett tema. Puffarna ska innehålla en bild som representerar sidans innehåll, en beskrivande rubriklänk med pil som aldrig är understruken samt en ingress.

Rubrik: H4, Stockholm Type Regular, 20pkt, Blå (“#006EBF”)
Ingress: Open Sans Regular, 16pkt, Svart (“#333333”)

Med fördel kan en rubrik sättas ovanför puffen, eller puffarna. Den rubriken ska vara: H3, Stockholm Type Regular, 24pkt, Svart (“#333333”)

Snabblänk

Puffar som länkar från startsidan, ämnen eller teman, till relaterade sidor och webbplatser. Puffarna ska innehålla en beskrivande rubriklänk med pil som aldrig är understruken och en ingress.

Rubriklänk: H4, Stockholm Type Regular, 20pkt, Blå (“#006EBF”)
Ingress: Open Sans Regular, 16pkt, Svart (“#333333”)

Med fördel kan en rubrik sättas ovanför puffen, eller puffarna. Den rubriken ska vara: H2, Stockholm Type Bold, 26pkt, Svart (“#333333”)

Kort i enhetslistningar

Enhetslistningskorten leder från enhetslistan till respektive enhet. Korten ska ha en bild från enheten, en rubriklänk med enhetens namn, adress och avstånd (beroende på filtrering).
Underst på kortet finns en länk med funktionen att spara enheten till användarens favoriter.

Puffen består av bild, rubriklänk och brödtext samt textlänk med ikon. Länkarna ska aldrig vara understrukna.

H4, Stockholm Type Regular, 20pkt, Blå (“#006EBF”)
Brödtext, Open Sans Regular, 16pkt, Svart (“#333333”)
Spara som favorit, Open Sans Regular, 16pkt, Blå (“#006EBF”)

Listan presenteras alltid under en rubrik som inkluderar sökresultatet.

Textlänkar

Alla typer av länkar som förekommer i brödtext och brödsmulor. Dessa textlänkar ska alltid vara understrukna.

Exempel på länk i brödtext

Brödtext, Open Sans Regular, 16pkt, Blå (“#006EBF”)

Exempel på länk i brödsmula

Brödtext, Open Sans Regular, 16pkt, Blå (“#006EBF”)

Textlänkar med ikon

De typer av länkar som har en tillhörande ikon, till exempel en länk till ett dokument eller en funktion. Dessa textlänkar ska aldrig vara understrukna.

Exempel på länk med dokumentikon

Brödtext, Open Sans Regular, 16pkt, Blå (“#006EBF”)

Exempel på länk med en funktion

Brödtext, Open Sans Regular, 16pkt, Blå (“#006EBF”)

Textlänkar i lista

När flera länkar listas så har dessa en avskiljande linje mellan länkarna. Dessa används oftast som en samling länkar från artikelsidor till andra artikelsidor. Listan kan vara i en eller två spalter. Dessa textlänkar ska aldrig vara understrukna.

Brödtext, Open Sans Regular, 16pkt, Blå (“#006EBF”)

Sidfot

Sidfoten kan antingen vara grå eller svart men alltid med S:t Erik i nedre vänstra hörnet. Länkar i sidfoten är en lista av länkar. Dessa har en avskiljande linje mellan. Dessa textlänkar ska aldrig vara understrukna.

H4, Stockholm Type Regular, 20pkt, Vit (“#ffffff”)
Brödtext, Open Sans Regular, 16pkt, Vit (“#ffffff”)

Syskonnavigering

Syskonnavigeringen ligger längst ner ovanför sidfoten. Länkar ligger horisontellt,. Dessa textlänkar ska alltid vara understrukna.

H4, Stockholm Type Regular, 20pkt, Vit (“#ffffff”)
Brödtext, Open Sans Regular, 16pkt, Vit (“#ffffff”)

Komponenter

En webbplats består ju av många olika komponenter såsom länkar, listor, knappar, tabeller , formulär med mera. I pdf-filen nedan  hittar du olika komponenter.

Blandade komponenter (pdf-fil)

 

Funktionsikoner

Funktionsikonerna förtydligar de olika funktioner på webbplatsen såsom ett förstoringsglas för sökfunktionen, en tratt för filtrering eller en pratbubbla för kontakt. I pdf-filen nedan hittar du de olika funktionsikonerna.

Funktionsikoner (pdf-fil)

Ikoner för webb

I vår grafiska profil ingår ikoner som används som illustrationer. För webb finns anpassade ikoner med tunnare linjer som fungera bättre även i mindre enheter.
Ikoner för webb

Domännamn

Alla webblösningar som utvecklas i staden ska läggas under stockholm.se-domänen. Det innebär att webbplatsens adress blir ”adress.stockholm.se”, där adress är namnet på webbplatsen. Detta är också en förutsättning för att webblösningen ska kunna använda stadens font-tjänst för att få rätt typsnitt på webben.

För att beställa uppsättning av ett domännamn skickar du information om uppsättningen av webbplatsen till redaktion@stockholm.se.

När vi skriver ut namn till olika webbplatser eller sidor så gör vi alltid det som hänvisningar direkt efter stockholm.se-domänen. För stadens webbplats för företagare så blir det alltså: stockholm.se/foretag.

Även om webbplatsens logiska adress i det här fallet är foretag.stockholm.se så ska alltid en hänvisning på stockholm.se sättas upp för att göra det tydligt att det är Stockholms stad som är avsändare, i till exempel tryckt information.

Har webbplatsen har gått över till .stockholm så kan man använda ”Enkel adress” i Episerver för att skapa domännamnet.

Alla stadens adresser ska vara på svenska. Det ska vara tydligt för besökaren vilket ämne webbplatsen berör genom domännamnet eller länkadressen. Hitta inte på egennamn eller interna förkortningar.

E-tjänster

Det är viktigt att man tydligt ser att e-tjänsterna hänger ihop med stockholm.se. Med hjälp av typsnitt, färger och layout skapar du igenkänning.
E-tjänster – Styleguide

Namngivning

När du väljer ett namn till din e-tjänst tänk på att användaren direkt ska förstå vad den ska användas till.

  • Namnet ska avspegla vad man kan göra och vilket område det handlar om. Till exempel Hitta parkering eller Sök radonmätning.
  • Ordet Stockholm behöver inte finnas med i namnet.
  • Hitta inte på egennamn eller interna förkortningar.

Uppdaterad