Voer een zoekterm in

Test je website: hoe ziet die er op mobile device uit?

Contented_Responsive_website_zelftest

Test je website: hoe ziet die er op mobile device uit?

Een bedrijf starten of onderneming beginnen kan tegenwoordig niet meer zonder een mooie website. Dat is geen nieuws. Anno 2016 vindt het merendeel van de sales online plaats. Zoekmachine optimalisatie (SEO) speelt hierbij een grote rol. We schreven over het verband tussen SEO en Sales al eerder. Daarnaast is het belangrijk om jouw website goed toonbaar te maken op bijvoorbeeld mobiele telefoons, tablets en andere apparaten. We noemen dit responsive of adaptive websites. In dit blog kun je op een eenvoudige manier in 5 stappen testen hoe jouw website er op verschillende zogenaamde devices uitziet. Ook benieuwd?

Het verschil tussen responsive en adaptive

Eerst maar eens de definities van een responsive website en een adaptive website. Wat is het verschil tussen deze twee begrippen?

Een responsive website reageert op de afmetingen van de browser waarmee je de website opent. Dat wil zeggen dat de website die je bezoekt, altijd in je scherm past. De site schaalt zich op een vloeiende manier als het ware naar jouw apparaat. De website ziet er qua layout meestal zelfs ook anders uit. Op onze website is dat ook zo. Je ziet een verschil in layout in de menustructuur en navigatie op de website. Je ziet ook verschillende functies per device. Op de blogpagina van Contented bijvoorbeeld, kun je op je mobiele telefoon blogs delen via WhatsApp. Dit lukt op de desktopvariant van onze website waarschijnlijk wat lastiger.

Een adaptive website gaat eigenlijk nog een stapje verder dan responsive website. Bij een adaptive website past de website zich aan aan de browser waarin je de website opent. Per situatie is de website dus verschillend. Al deze verschillende varianten moeten overigens ook worden gebouwd. Een verschil met een responsive website is dat bij een adaptive website alle varianten afmetingen moeten worden geladen als je de website bezoekt. Pas daarna ‘wordt besloten’ welk design getoond wordt, op basis van het device waarmee jij de site bezoekt. Dit kan een tragere website opleveren. Wel kun je bij een adaptive website, zaken tonen die per device makkelijk zijn. Denk bijvoorbeeld aan een ‘belknop’ als iemand buiten loopt en via een mobiele telefoon een taxi wil b(est)ellen. Of denk aan een knop voor een routeplanner, als iemand zoekt naar een ‘restaurant in de buurt’.

Het verschil tussen een responsive website en een adaptive website, is goed zichtbaar als je een website bezoekt. Vloeit de website naar het design dat je ziet, dan is het meestal een responsive site. Springt de website naar de passende variant, dan is het waarschijnlijk een adaptive site.

Doe het voor je klant!

Tot zover de theorie of responsive en adaptive websites. Advies vanuit Contented is helder en duidelijk: maak je website in elk geval mobielvriendelijk! Doe het voor je bezoekers van je site. Een website die niet responsive op adaptive is, kan in deze tijd echt niet vinden wij. Jouw klanten of potentiële klanten verwachten anno 2016 dat een website via mobile devices mooi, snel en duidelijk wordt weergegeven. Mensen klikken weg als de website ze niet aanstaat! Dat kost jou geld en omzet. Er wordt zelfs geschreven dat je slechts 8 seconden hebt om online de aandacht te pakken (en te houden). Je vindt het zelf toch ook prettig als een website goed wordt getoond, wanneer je bijvoorbeeld een zomervakantie aan het boeken bent?

De zelftest in 5 stappen

Goed. Stel dat je wel achter je pc zit, de ouderwetse desktop. Hoe kun je dan eenvoudig zien hoe een website er op verschillende devices uitziet? We leggen het uit met een aantal screenshots van onze eigen website. Doe het in 5 eenvoudige stappen! Het is goed om te doen. Ga allereerst naar www.contented.nl.

Homepagina_Contented_Responsive

Afbeelding 1: homepagina Contented.nl.

Vervolgens klik je op het ‘hamburgertje’ rechtsboven in je scherm.

Homepagina_Contented_Responsive_Hamburger

Afbeelding 2: klik op het ‘hamburgertje’ rechtsboven (zie rode pijl).

Er verschijnt een uitklapmenu in je beeldscherm. Ga naar ´Meer hulpprogramma´s´ en daarna naar ´Hulpprogramma´s voor ontwikkelaars´. Schrik niet van de hoeveelheid letters, tekens en HTML-codes. We leggen je uiteindelijk ook weer uit hoe je je scherm weer ‘normaal’ krijgt.

Homepagina_Contented_Responsive_Hulpprogramma

Afbeelding 3: ga naar ‘hulpprogramma´s voor ontwikkelaars’.

Klik nu linksonder op ‘Toggle device toolbar’. Er verschijnt hier een keuzemenu waarin je jouw mobile device kunt selecteren.

Homepagina_Contented_Responsive_Toggle_device

Afbeelding 4: klik op ‘Toggle device toolbar’ (zie rode pijl).

Selecteer hier jouw mobile device. Wanneer jouw gewenste device hier niet bijstaat kun je klikken op ‘Edit’. Er verschijnt dan nog een hele lijst met telefoons, tablets en soorten devices.

Homepagina_Contented_Responsive_Devices

Afbeelding 5: selecteer jouw mobile device (zie rode pijl).

 

Door nogmaals op ‘Toggle device toolbar’ te klikken, ga je weer terug naar de desktopafmetingen van de website die je bekijkt. Klik in het midden rechts in beeld op het zwarte kruisje om deze functionaliteit weer af te sluiten.

Kortom, een responsive of adaptive website is anno 2016 zeker een must als het gaat om mobielvriendelijke websites. Doe het voor je klant! Investeer in een goede, werkende website die jouw bezoekers boeit, blijft boeien en faciliteert tijdens hun online zoektocht. Je zult zien dat dit helpt, ook met het oog op jouw eigen omzet. Heb je vragen of opmerkingen? We horen het graag!

 

Geen reacties

Plaats een reactie

Hallo, ik wil graag reageren op dit blog. Ik vind namelijk dat ...