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
På 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 = <H2> font-size: 24px; font-size: 1.5rem; H3 Overskrift avsnitt = <H3> 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.