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.

Eksempel pÄ enkel 404-side med annen illustrasjon
Eksempel pÄ enkel 404-side med Oslo-bilde

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>