Skyss.no skal være det viktigste grensesnittet for kommunikasjon mellom kunden og Skyss. På skyss.no skal kundene finne det de trenger av informasjon og tjenester for å kunne reise kollektivt i Hordaland. Skyss.no skal også være en markedsføringskanal for merkevaren Skyss.


Generelt

Skyss.no har responsivt design for å gi en bedre brukervennlighet på mobil og nettbrett. Ettersom skyss.no har responsivt design, tilpasser nettsidene seg automatisk til ulike skjermstørrelser. Kundene finner den samme informasjonen på desktop, nettbrett og mobil i en prioritert rekkefølge. Skyss.no følger «mobile first»-prinsippet.


Responsivt design

Elementene på siden vil automatisk strekkes, krympes eller flyttes for å tilpasses den tilgjengelige skjermplassen.


Universell utforming

Vi tilstreber å følge Difi sine krav til universell utforming.


Språk

Alt innhold på skyss.no skal være på nynorsk, i tillegg til engelsk i en speilet versjon (ikke komplett, kun de viktigste sidene er også på engelsk). Gjelder også kampanjebokser.


Analyse

Skyss bruker Google Analytics til statistikk og analyse.


Navigasjon og orientering

Skyss.no skal ha maksimalt 4 hovedmenypunkt på desktop og nettbrett og 3 menypunkt på mobil. Hvert av disse skal maksimalt ha 6 underpunkt. Dette er som følge av «mobile first»-prinsippet og at det skal være enkelt å navigere i menyen fra mobil.


Klikkbare elementer

Det er ulike typer klikkbare elementer på skyss.no. «Call-to-action»-knapper: røde knapper med hvit tekst inni. Knappene tilpasses etter tekstens lengde.


Faner

Klikkbare faner er røde og grå. Røde faner er aktive. Grå faner er inaktive og fargekode #cccccc.


Kampanjebokser

Kampanjebokser er klikkbare elementer som har som hensikt å få særlig oppmerksomhet rundt viktige budskap og kampanjer. Vi kan selv justere antallet store og små kampanjebokser, men har i hovedsak en stor og to små kampanjebokser publisert. I kampanjeboksene er det i hovedsak et bilde eller en film, med en forklarende tekst under.


Bilder

skyss.no skal kun profilbilder brukes. Bildene skal være et identitetsskapende virkemiddel for å fremme Skyss sin profil og budskap. Alle bilder skal ha navn og alternativ tekst ved mouse-over. Fotohenvisning på profilfoto er ikke nødvendig på skyss.no. Unntak: I Driftsmeldinger og Nytt frå Skyss-saker kan andre bilder enn profilbilder brukes. Alle bilder skal være 72 dpi.


Piktogrammer

Piktogrammer brukes for å lette forståelsen av innholdet og forsterke budskapet på skyss.no. Piktogrammer benyttes i forbindelse med knapper, utvalgte linker og i kart, og skal alltid være fra profilhåndboken. Piktogrammene følger Skyss sin fargepalett. Grå klikkbare piktogrammer skrifter farge til rødt ved mouse-over.


Kart

Google maps er en integrert funksjon på skyss.no. Vi kan legge inn egne piktogrammer på markører i kartet. Vi har piktogram for billettautomat, kundesenter, parkering og hittegods i bruk i kartene.


Menystruktur mobil

Her prioriteres tre hovedmenyer med seks undermenyer


Menystruktur desktop

Her prioriteres fire hovedmenyer med seks undermenyer.


Typografi på nett

Arial fonten brukes på hjemmesiden til Skyss, samt i e-post og elektroniske maler (Word, PPT og Excel). Arial fonten er standardfonten på alle maskiner og er valgt på grunn av sin likhet til profilfonten. Slik vil den være med å ivareta et helhetlig inntrykk i alle kanaler.


Fontstil (overskrifter, lenker, lister, tabeller)

Font: Arial Overskrifter: H1 (bruker aldri av redaktører, er styrt fra koden pga universell utforming) font-size: 32px; font-size: 2rem; H2 Stor overskrift =

font-size: 24px; font-size: 1.5rem; H3 Overskrift avsnitt =

font-size: 19px; font-size: 1.1875rem; H4 font-size: 16px; font-size: 1rem; H5 font-size: 15px; font-size: .9375rem; H6 font-size: 14px; font-size: .875rem;



Fargebruk

Fargebruk på skyss.no følger Skyss sine profilfarger og vi legger vekt på å ha en lys og lett nettside. For å skape dette uttrykket er det lagt hovedvekt på hvitt samt gråtonene fra profilen.


Lenkefarge Driftsmeldingar og Nytt frå Skyss er #cf462a


Knappefarge, listepunktsfarge, understrek meny er også #cf462a


All tekst, overskrifter artikler, menypunkter, Driftsmeldingar og Nytt frå Skyss #231f20


Ikoner og bakgrunn i Reiseplanlegger #555555


Bakgrunnsfarge i menyen og et par andre knapper (som for eksempel båtknapp) er #e9e9e


Lenker


Alle lenker er i sort og understreket, etterfulgt av en rød pil. I tillegg skifter lenken farge til rød-oransje ved mouse-over.