Is jouw website nog niet responsive of weet je niet helemaal wat dit precies betekend? Dit artikel gaat je overtuigen waarom je toch echt een responsive website nodig hebt middels de veel gestelde vragen over een responsive website.
Bij een responsive website past de website zich aan aan het scherm formaat waarmee de bezoeker de website bekijkt. Hierdoor is er maar één website maar is die wel goed lees- en zichtbaar op elk schermformaat zonder in- of uit te zoomen. Of dit nou op een telefoon, tablet, smart TV of iMac is; dankzij de responsive design bied je altijd de optimale gebruiksvriendelijkheid.
Een mobiel vriendelijke website is essentieel voor een moderne website. Hoewel je een paar jaar geleden nog enkel een ‘normale’ website kon hebben is dit nu een erg slecht idee. Het exacte percentage verschilt wel per markt maar mobiel verkeer is circa 20-40% van al het verkeer voor veel websites. Als je dan geen mobiel vriendelijke website hebt mis je dit verkeer óf die verlaten direct weer de website.
Andere reden om een mobiele website te hebben is dat Google in de toekomst voorkeur gaat geven aan mobiele websites voor indexatie; dit is een indicatie dat dit in de toekomst nóg belangrijker gaat worden.
Dit is heel makkelijk, je hebt niet tientallen apparaten nodig. Open de gewenste website op je desktop en verklein vervolgens het scherm van de browser. Als de website layout direct verspringt naar het nieuwe formaat is deze reponsive.
Het voornaamste doel van een responsive website is een optimale ervaring bieden voor elk schermformaat. Stel je wil een website geschikt maken voor mobiel gebruik dan zijn er aantal opties elk met voor- en nadelen.
Het grootste voordeel van een responsive website is dat er één URL (website) is. Iemand die een link vanuit een email opent op zijn of haar telefoon hoeft niet doorgestuurd te worden naar de ‘mobiele’ variant.
Een goede manier om een website “mobiel vriendelijk” te maken is met een speciale mobiele website. Vaak is dit op een apart subdomein als “http://m.example.com”. Dit kan perfect werken want de website is vaak snel, bevat geen onnodige informatie en is goed getest op mobiele apparaten.
Het nadeel van deze methode is dat dit alleen ‘mobiel‘ is. Een responsive website past zich ook aan andere schermformaten als tablets (welke ook weer variëren van klein tot héél groot), Smart TVs, en grote desktops.
Voor de gebruiker is de meest prettige mobiele variant vaak een “native” app. Makkelijk te installeren vanuit een app store en direct te vinden op de smartphone!
De nadelen hierin zijn alleen makkelijk te vinden. Ten eerste is de markt verdeeld in twee grote spelers (Android, iPhone) met compleet verschillende technologieën. Ten tweede is er specialisten kennis nodig, een iPhone developer en een Android developer, welke vaak erg duur zijn.
Het nadeel van responsive is dat omdat er maar één broncode is dit invloed kan hebben op de website snelheid. Bij het bezoeken van de mobiele website wordt ook alle gegevens gedownload van de “desktop” variant. Deze worden alleen niet getoond.
Verder gaat er vaak vele tijd zitten in het goed maken van een responsive website omdat er rekening moet gehouden worden met veel verschillende schermformaten.
Het is zeker mogelijk om een huidige website geschikt te maken voor responsive. Het is vaak alleen niet de beste oplossing omdat er toch veel geprogrammeerd en vernieuwd moet worden. Hierdoor kiezen veel websites ervoor om direct ook andere front-end werkzaamheden uit te voeren zoals bijvoorbeeld het moderniseren van de buttons.
Over het algemeen is dit geen probleem. Reponsive design gebruikt CSS3 media queries en HTML5 wat niet ondersteund wordt in oudere Internet Explorer versies maar er zijn wel JavaScript oplossingen die deze functionaliteit kunnen toevoegen aan oudere browsers.
Breekpunten zijn de punten waarop een website van ‘formaat’ veranderd. Zo kan een website worden onderscheiden in mobiel formaat, tablet, desktop, grote desktop.
Met breekpunten kan je een andere layout hebben afhankelijk van het schermformaat.
Hoewel andere oplossing als een aparte mobiele website ook kunnen werken is responsive het makkelijkst en het flexibelst. De reden dat responsive zo goed werkt voor zoekmachine optimalisatie is dat de website maar één URL heeft die niet veranderd. Er hoeft geen speciale code toegevoegd worden om dubbele content te voorkomen. Nog een voordeel is dat en zoekmachine als Google dezelfde inhoud te zien krijgt als de eindgebruiker.
Er zijn veel dingen die ‘goed’ gedaan moeten worden op een reponsive website. Knoppen en linkjes moeten groot genoeg zijn om met een duim te kunnen raken, de website moet snel laden, tekst moet groot genoeg zijn en alles moet goed in het scherm passen.
Om hiermee te helpen zijn er veel tools zoals Google’s Mobielvriendelijke test. Hier kan je een website adres invullen en direct zien welke punten er zijn. Verder als je website is toegevoegd in het Google Search Console kan je per pagina zien welke ‘problemen’ er zijn zodat deze direct opgelost kunnen worden.
De Viewport meta tag is van groot belang omdat anders de browser niet weet dat een website reponsive is. Er zijn hiermee ook een aantal opties aan te passen.
Dit betekend dat de website zich aanpast aan de breedte van het apparaat (device-width). Hier kan ook een pixel aantal ingevuld worden als de website voor maar één breedte werkt.
Hiermee wordt de schaal van de website ingesteld. De aanvankelijke schaal waarmee zaken als tekst grote wordt uitgerekend. Standaard op “1”.
De maximum zoom; hiermee kan in- of uitzoomen worden uitgezet. Als dit bijvoorbeeld staat op maximum-scale=1 kan de gebruiker niet inzoomen.
Hier kan ‘yes’ of ‘no’ worden ingevuld. Als deze code niet geplaatst wordt staat dit standaard op ‘yes’. Als dit aangepast wordt kan een eindgebruiker niet inzoomen.
