404-side
En 404-feilmelding oppstår når siden brukeren prøver å åpne ikke finnes. Dette skjer ofte fordi en lenke er fjernet, eller når det er en skrivefeil i URLen.
Ta i bruk malen
Du finner malen i Figma og i kode. Alt i malen kan endres for å tilpasses din løsning eller tjeneste. Se eksempler på noen variasjoner for inspirasjon under.
Innhold
Vær klar og lett i språket. Det avvæpner erfaringsmessig irritasjonen over den brukne lenken. Vær likevel tydelig på hva den besøkende skal gjøre, for å komme tilbake til ønsket flyt, lenk gjerne tilbake til forsiden til løsningen din.
Du kan også inkludere en lenke til et sted der folk kan skrive inn om at siden er nede, dette er inkludert i sidemalen.
Responsivitet
På mobil brekker innholdet under hverandre, med illustrasjonen nederst, da denne er til pynt og ikke hjelper brukeren videre.
Husk på
- Skriv ryddig og klarspråklig
- Forklar feilen som har oppstått så godt som mulig
- Gi brukeren et neste steg - ikke la dem havne i en “dead end”
- Du kan godt være litt leken i språket og illustrasjon, men ta høyde for Oslo kommunes branding og språkprofil
Implementasjon i kode
<section class="pkt-grid pkt-grid--colgap-size-64">
<div class="pkt-cell pkt-cell--span12 pkt-cell--span6-laptop-up">
<h1 class="pkt-txt-54--phablet-up mb-size-24 mb-size-32--phablet-up">
Houston, we have a problem! Beklager, vi finner ikke siden du leter etter.
</h1>
<p class="mb-size-24 mb-size-32--phablet-up">
Det kan være at siden er slettet, eller at det er en feil i lenken du
fulgte for å komme hit.
</p>
<p class="mb-size-24 mb-size-32--phablet-up">
Om vi har lenket feil blir vi glade om du
<a href="#" class="pkt-link"> gir oss beskjed. </a>
</p>
<a href="/" aria-label="til forsiden" class="pkt-btn pkt-btn--primary">
<span class="pkt-btn__text">Gå til startsiden</span>
</a>
</div>
<div
class="pkt-cell pkt-cell--center-vertical pkt-cell--span12 pkt-cell--span6-laptop-up"
>
(sett inn illustrasjon her)
</div>
</section>