Nieuws

5 tips voor een betere mobiele pagina

Een effectieve mobiele campagne is afhankelijk van diverse factoren. Eerder spraken we over wat voor een invloed de zwaarte van een advertentie heeft op de zichtbaarheid ervan. Nu geven we vijf tips voor het optimaliseren van de mobiele landingspagina.

EEN WITTE PAGINA

Stel je voor. Je ziet een hele vette video in een mooi interscroller formaat. Na 10 seconden is de video afgelopen en wil je weten: wat, waar, hoe en wanneer? Je klikt op de button en komt terecht op een witte pagina. De browserbalk is nog steeds aan het laden. Je geeft het nog een paar seconden, maar je geduld is op. Het is graag of niet.

Zo gaat het ook bij de doelgroep. Je had hun interesse, maar nu ben je het kwijt. Wat een sunt! Gelukkig hebben we een paar tips om dit te voorkomen.

#1 OPTIMALE AFBEELDINGEN

Volgens cijfers van de HTTP Archive wordt de zwaarte van een gemiddelde site voor 64% bepaald door de afbeeldingen. Dit is dan ook een goede plek om te beginnen. Het is ook relatief simpel, maar jammer genoeg is er geen one-size-fits-all oplossing. Dit komt omdat elk formaat unieke eigenschappen heeft.

Figuur 1: Gemiddelde zwaarte van de gemiddelde website per content type, 1 november 2015 (HTTP Archive).

Gemiddelde zwaarte van de gemiddelde website per content type, 1 november 2015 (HTTP Archive).

Opslaan voor web

In Photoshop is er de functie ‘Opslaan voor Web’ waarmee je afbeeldingen kleiner maakt voor het web. De juiste afmetingen is natuurlijk afhankelijk van het doel van de afbeelding. Als die niet een scherm hoeft te vullen, kan die nog een heel stuk kleiner.

JPEG, PNG, SVG of GIF?

En welk bestandsformaat kies je? Voor een afbeelding met veel kleurtinten is het meestal het beste om JPEG te kiezen. Deze kan middels compressie een stuk lichter worden gemaakt. Dit gaat ten kosten van de kwaliteit van de afbeelding. Tijdens de compressie worden kleuren die veel op elkaar lijken hetzelfde gemaakt. Hierdoor wordt de afbeelding minder scherp, maar het zal je verbazen hoeveel je kan comprimeren zonder zichtbaar kwaliteitsverlies.

JPEG heeft echter ook zijn beperkingen. Zo laat JPEG geen transparantie toe en geen animatie. Wanneer je transparantie nodig hebt, kan je het beste PNG gebruiken. Voor een bewegende afbeeldingen is GIF de uitkomst. Voor simpele afbeeldingen zoals de meeste logo’s is SVG de beste uitkomst, deze is namelijk vector-based in plaats van pixel-based. Dit maakt de afbeelding ongelofelijk licht en kan je blijven inzoomen zonder dat de afbeelding blokkerig wordt.

Het merkbeeld is pas laat zichtbaar bij een baseline afbeelding.

Het merkbeeld is pas laat zichtbaar bij een baseline afbeelding.

Progressief en baseline (normale) JPEG

Niets is vervelender dan een afbeeldingen die maar voor de helft inladen. Helemaal onhandig is het wanneer jouw merkbeeld onderaan beeld staat, zoals het voorbeeld hierboven. Je gebruikt dan een baseline afbeelding en dat betekent dat het lijn voor lijn wordt ingeladen. Er is een oplossing: progressive afbeeldingen. Deze laten eerst een blurred versie zien. De doelgroep kijkt niet naar een leeg scherm en haakt minder snel af. 

01-02_baseline_vs_progressive

Baseline JPEG versus Progressive JPEG (Six Revisions)

#2 VAN HTTP1 NAAR HTTP2

Vraag de beheerder van de webserver om het nieuwe HTTP/2.0-protocol aan te zetten, indien mogelijk. Het staat voor hypertext transfer protocol en vertelt de server welke informatie het moet laten zien in je browser. Het HTTP/1.0-protocol stamt uit het begin van de jaren ‘90. Sinds die tijd zijn websites een stuk complexer en zwaarder geworden. Daarom is begin 2015 HTTP/2.0 geïntroduceerd.

Twee van de belangrijkste nieuwe functies zijn ‘multiplexing’ en ‘prioritization’. Multiplexing laat een server alle elementen tegelijkertijd laden zodat een grote afbeelding de rest niet ophoudt. Binnen HTTP/2.0 is het mogelijk om elementen te groeperen en een bepaalde groep prioriteit te geven, of wel ‘prioritization’. Ook kan je aangeven dat een bepaalde groep alleen nuttig is om te laden als een andere groep al klaar is. Zo kan je een soort stamboom maken van ‘logische’ volgorde. Dit maakt het toepassen van de volgende tip een stuk makkelijker.

#3 PRIORITEIT VOOR ‘ABOVE THE FOLD’ CONTENT

Above the fold refereert naar het deel van de site dat in beeld is zonder dat een gebruiker verder scrollt. Vraag de webdeveloper om prioriteit te geven aan ‘above the fold’ afbeeldingen en grote afbeeldingen. Dit voorkomt dat je doelgroep naar een leeg wit scherm kijkt terwijl de site laadt. Binnen HTTP/2.0 kan een developer dit doen door prioriteit te geven aan een stream van frames. Als je dat nog niet aan hebt staan op je webserver kan de webdeveloper er ook voor zorgen dat content die niet meteen nodig is later ingeladen wordt. Hiermee bereik je hetzelfde effect.

Responsive web

Welke website elementen laat je zien op een responsive website?

#4 OPTIMALISEER DE RESPONSIVE WEBSITE

Responsive websites zijn tegenwoordig een grote trend, maar er zijn maar weinig responsive websites die echt goed rekening houden met de verbindingssnelheid en de onderdelen van de pagina niet inladen bij lage bandbreedtes. Dit kan je testen middels de ontwikkelaarstool in Chrome. Ga in de browser naar: ‘Weergave’ > ‘Ontwikkelaar’ > ‘Hulpprogramma’s voor ontwikkelaars’. Hiermee kan je een smartphone of tablet simuleren. Controleer vooral welke elementen wel zichtbaar zijn op de desktop, maar niet op mobiel. Daarna kan je onder de ‘Netwerk’ tab achterhalen of niet zichtbare elementen wél geladen worden.

#5 GEBRUIK DE WEB CACHE

De cache van je webbrowser zorgt ervoor dat webinhoud lokaal wordt opgeslagen in de browser. Hierdoor zal de website bij een tweede bezoek veel sneller inladen, omdat de browser het dan niet opnieuw hoeft te downloaden via het internet. Dit is wellicht minder interessant bij een campagne-pagina die compleet los staat van de gewone website omdat het dan bijna altijd om een eerste bezoek gaat.

Handige tools:

  • Google PageSpeed Insights: webdienst van Google die een site analyseert en tips geeft hoe die verbeterd kan worden.
  • Google Developer Tools: een functie binnen Google Chrome waarmee je inzicht kan kijken in hoe je website wordt geladen.

Sla de handen inéén met de webdeveloper en optimaliseer die landingspagina. Nog steeds met de handen in het haar of een specifieke vraag? We kijken graag met je mee naar mogelijke verbeterpunten. Bel naar 020 702 8200 of mail naar contact@mobpro.com.

Discussie

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

Time limit is exhausted. Please reload CAPTCHA.