Skeleton screens

Geschreven door: op zaterdag 28 september 2019

Leestijd: 2 minuten

Het is helaas niet onvermijdelijk om laadtijden te voorkomen op uw website, de gebruiker zou een trage verbinding kunnen hebben om welke reden dan ook. Skeleton screens is een mooi alternatief op een normale loading spinner. Een loading spinner zorgt namelijk voor een hoge bounce op uw website.

Door uw doordachte ontwerp al enigszins vorm te geven in de vorm van content placeholders in combinatie met animatie, kan dit voor de gebruiker al interesse wekken, waardoor het geduld van de gebruiker verlengd kan worden en de bouncepercentage verlaagd kan worden.

Dit concept noemen we skeleton screens, Apple heeft dit meegenomen in haar Human Interface Guidelines. Ook grote bedrijven als LinkedIn, Slack en Facebook maken gebruik van skeleton screens.

skeleton-linkedin.jpg

skeleton-slack.jpg

 

Hoe maak je dan skeleton screens?

In onderstaand voorbeeld maken we een aantal lijnen die we in kleur laten animeren in de vorm van een alinea. Hiermee geven we de gebruiker al het idee dat hier een alinea komt waar de gebruiker info kan vinden in de vorm van een alinea.

 

We maken eerst een aantal lijnen aan in de HTML, dit doen we als volgt.

<div class='text-input__loading'>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
</div>

 

We geven de lijnen vervolgens in CSS wat hoogte mee en een pulserende animatie om het laden duidelijk te maken.

.text-input__loading--line {
        height: 15px;
        margin: 15px;
        animation: pulse 1s infinite ease-in-out;
}

Vervolgens gaan we er voor zorgen dat het pulserende effect doorgevoerd wordt in de kleur van de lijn. Namelijk lichtgrijs op 0%, donkerder grijs op 50% en vervolgens weer lichtgrijs op 100%, zodat dit in een loop mooi animeert.


 

@keyframes pulse {
    0% {
        background-color: rgba(165, 165, 165, 0.1)

    }
    50% {
        background-color: rgba(165, 165, 165, 0.4)
    }
    100% {
        background-color: rgba(165, 165, 165, 0.1)
    }
}

Vervolgens geven we in de CSS aan hoe breed elke lijn mag zijn. Zo kun je dus de gebruiker het gevoel geven hoe de content er ongeveer uit gaat zien, let wel op je geeft de gebruiker een verwachting en die moet hier wel aan voldoen.

.text-input__loading div:nth-child(1) {
  width: 50px;
}

.text-input__loading div:nth-child(2) {
  width: 100px;
}

.text-input__loading div:nth-child(3) {
  width: 150px;
}

.text-input__loading div:nth-child(4) {
  width: 100px;
}

.text-input__loading div:nth-child(5) {
  width: 150px;
}

.text-input__loading div:nth-child(6) {
  width: 250px;
}

.text-input__loading div:nth-child(7) {
  width: 250px;
}

Zie hier mijn codepen om mijn code in te zien.


Andere blogartikelen

  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    Bekijk het artikel »
  • Succesvolle B2B Marketing met deze 5 Tools

    Geschreven door: op woensdag 12 augustus 2020

    Zoals mooi gevisualiseerd in het filmpje ‘The Man in the Chair’. De fundamenten onder marketing veranderen niet, de technologieën en bijbehorende tools wel. Lees hier 5 tools die wij inzetten om B2B M ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
AOC is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten