Responsive websites

Q&A over responsive websites: alles wat je wilt weten

Responsive websitesIs 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.

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.

Wat is responsive webdesign?

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.

Hoe belangrijk is een responsive website?

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.

Hoe kan ik zien of een website responsive is?

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.

Wat zijn de alternatieven van een responsive design?

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.

1) Speciale mobiele website

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.

2) Mobiele app

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.


Wat zijn de nadelen van een responsive website?

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.

Kan ik een bestaande website responsive maken?

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.

Werkt responsive ook in oudere browsers?

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.

Wat zijn breakpoints (breekpunten)?

Breekpunten zijn de punten waarop een website van ‘formaat’ veranderd. Zo kan een website worden onderscheiden in mobiel formaat, tablet, desktop, grote desktop.

  • 320 px mobiel (portret)
  • 480 px mobiel (landschap)
  • 768 px tablet (portret)
  • 1024 px tablet (landschap)
  • 1280 px of groter desktop

Met breekpunten kan je een andere layout hebben afhankelijk van het schermformaat.

Is responsive webdesign de beste keuze voor SEO?

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.

Wat maakt een goede responsive website?

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.

Wat betekenen de verschillende viewport meta tags?

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.

Wat is width=device-width?

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.

Wat is initial-scale?

Hiermee wordt de schaal van de website ingesteld. De aanvankelijke schaal waarmee zaken als tekst grote wordt uitgerekend. Standaard op “1”.

Wat is maximum-scale?

De maximum zoom; hiermee kan in- of uitzoomen worden uitgezet. Als dit bijvoorbeeld staat op maximum-scale=1 kan de gebruiker niet inzoomen.

Wat is user-scalable?

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.






                                                                                                                                                                                                                                                                                                                                                   

Auteur: dutchcuber
Aantal keer gelezen: 212x
Toegevoegd: 06-07-2017 10:13
Gewijzigd: 07-07-2017 09:16

Relevante links

Categorieën

Er zijn reeds 2142 artikelen toegevoegd op deze website.
De copyrights van infobron.nl zijn van toepassing!