5 Tips om je website te optimaliseren voor smartphones
Tegenwoordig heeft bijna iedereen een smartphone en/of tablet in huis. Steeds meer website worden dus bekeken op een smartphone of tablet en dus op een kleiner scherm.
Waar de trend een aantal jaren geleden was dat de schermafmetingen en resoluties steeds maar toenamen, nemen deze in een flink tempo af. Hoewel de nieuwste generatie iPads een flinke resolutie hebben, blijft echter de schermafmeting een stuk kleiner dan een breedbeeldscherm van een notebook of laptop.
Met het optimaliseren van je website moet je hier rekening mee houden. Steeds meer verkeer gaat via een smartphone en als je website er niet goed uitziet op een smartphone, zal de conversie een stuk lager uitvallen.
Hoe kun je dan je website optimaliseren voor smartphones?
1 Gebruik een mobiel-vriendelijk WordPress theme
Veel theme’s in de WordPress Themebase zijn tegenwoordig responsive, mobiel-vriendelijk. De site past zich dan bij het verkleinen en vergroten van de browser aan aan het formaat. Op een mobiel zal de site er dan anders uitzien dan op een laptop. Zodanig dat alles altijd optimaal leesbaar is. Ook het “Zakelijk” WPNERD theme is responsive.
2 Gebruik plugins
Het handige van WordPress is dat je voor alles wat je nodig hebt altijd een prachtige plugin kunt vinden. Hoewel je altijd voorzichtig moet zijn met plugins, lees in dit artikel waarom, zijn er ook plugins die je site beter toegankelijk kan maken voor handhelds.
WordPress Mobile Pack. Deze plugin geeft je de totale controle over de mobiele versie van je site.
WP Mobile Detector. Met deze plugin kun je eenvoudig de mobiele versie van je website uitserveren aan bezoekers op een smartphone.
3 Maak je site responsive
Zoals bij puntje 1 al genoemd wordt is een responsive website vaak de beste optie. Dit is 1 website die zich aanpast aan het beeldformaat. Een plugin zoals onder punt 2 zal een aparte mobiele website tonen aan een bezoeker op een smartphone ipv een andere variant van dezelfde site.
Wil je een site responsive maken, dan heb je wel wat technische kennis nodig. In je CSS stylesheet kun je met mediaqueries werken.
@media only screen and (max-device-width: 480px) {
}Aan het einde van je stylesheet kun je de @media regels toevoegen. Bovenstaande regel geldt alleen voor devices met een max-breedte van 480px. Je kunt je styling tussen de { } plaatsen. Deze styling geldt dan alleen voor de devices niet breder dan 480 px. Op die manier kun je bijvoorbeeld een eerder gedefinieerde container van 960px breed voor een device opnieuw definieren, maar dan 400px breed. Op die manier kun je voor verschillende devices verschillende styling laten gelden.
4 Gebruik niet veel grote afbeeldingen
Hoewel mobiele telefoons ook wel weer steeds grotere schermen krijgen, is vaak een verbinding met een mobiele telefoon nog niet zo snel als je WiFi verbinding thuis. Veel grote foto’s zullen de laadtijd van een site behoorlijk vertragen op een mobiel. Daarnaast zijn veel responsive website gebaseerd op styling; grote foto’s zullen niet zichtbaar zijn op een mobiel, omdat ze met behulp van styling “display: none;” onzichtbaar worden gemaakt. Onzichtbaar, dus ze zijn er wel en worden wel gewoon ingeladen.
Beperk daarom het gebruik van grote achtergrondfoto’s etc.
5 Beperk je tekst
Bezoekers van je site op een mobiel zullen niet de hele tijd in- en uit gaan zoomen en van boven naar ver beneden scrollen om al je teksten te lezen. Kies daarom je teksten slim en maak ze informatief en supereffectief. Probeer je teksten zo kort mogelijk te houden zodat alles op een klein stukje website past. Op die manier blijft het ook overzichtelijk op een mobiel.
Er zijn dus verschillende manier om je website klaar te maken voor de doorzettende opmars van de smartphone. Het makkelijkst is om gewoon een kant en klaar theme te downloaden wat volledig responsive is. Laat de bezoekers dan maar komen!