Responsive webdesign

Responsive webdesign (RWD) is een configuratie waarbij de server altijd dezelfde HTML-code naar alle apparaten verstuurt en waarvoor CSS wordt gebruikt om de weergave van de pagina op het apparaat te wijzigen. Deze configuratie wordt automatisch door de algoritmen van Google herkend wanneer de Googlebot-user-agents toestemming hebben om de pagina en de bijbehorende items (CSS, JavaScript en afbeeldingen) te crawlen.

Met responsive webdesign wordt op alle apparaten dezelfde code weergegeven en wordt de weergave aangepast op basis van de schermgrootte.

In het kort

  • Gebruik de tag meta name="viewport" om de browser te instrueren hoe de content moet worden aangepast.
  • Bekijk de site Web Fundamentals voor meer documentatie.

meta name="viewport" gebruiken

Voeg een metatag aan het head-gedeelte van het document toe om de browser te melden dat de pagina wordt aangepast op basis van het apparaat:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

De tag meta viewport geeft de browser instructies hoe de afmetingen en schaling van de pagina moeten worden aangepast op basis van de breedte van het apparaat. Wanneer het element meta viewport niet aanwezig is, geven mobiele browsers de pagina standaard weer met de breedte voor een desktopscherm (doorgaans ongeveer 980 px, maar dat kan per apparaat verschillen). Mobiele browsers proberen vervolgens de content er beter te laten uitzien door een groter lettertype te gebruiken en door de content aan te passen aan de grootte van het scherm of door slechts dat deel van de content weer te geven dat op het scherm past.

Voor gebruikers betekent dit dat de lettergrootte niet consistent is en dat ze moeten dubbeltikken of met hun vingers moeten inzoomen om de content te kunnen zien en interacties met de content te kunnen aangaan. Google beoordeelt een pagina mogelijk niet als geschikt voor mobiele apparaten wanneer dergelijke handelingen moeten worden uitgevoerd op een mobiel apparaat.

Aan de linkerkant ziet u een pagina waarvoor een meta viewport is gespecificeerd. De mobiele browser gaat daarom uit van een desktopbreedte en schaalt de pagina op basis van het scherm, waardoor de content moeilijk leesbaar is. Aan de rechterkant ziet u dezelfde pagina met een viewport die overeenkomt met de breedte van het apparaat. Hierdoor wordt de pagina niet door de mobiele browser geschaald en is de content goed leesbaar.

Neem voor responsieve afbeeldingen het element <picture> op.

Als algemene regel kunt u aanhouden dat als uw site werkt in een recente browser, zoals Google Chrome of Apple Mobile Safari, deze ook zou moeten werken met onze algoritmen.

Waarom responsive webdesign

We raden u om de volgende redenen aan responsive webdesign te gebruiken:

  • Maakt het makkelijker voor gebruikers om uw content te delen en met één URL naar uw content te linken.
  • Helpt de algoritmen van Google om op accurate wijze indexeringseigenschappen aan de pagina toe te wijzen in plaats dat moet worden aangegeven dat er overeenkomende desktoppagina's of mobiele pagina's bestaan.
  • Het vergt minder tijd om meerdere pagina's voor dezelfde content te onderhouden.
  • Reduceert de kans op veelgemaakte fouten die van invloed zijn op mobiele sites.
  • Gebruikers hoeven niet te worden omgeleid voor een weergave die is geoptimaliseerd voor het desbetreffende apparaat, waardoor de pagina sneller wordt geladen. Daarnaast is omleiding op basis van user-agents foutgevoelig en kan dit ten koste gaan van de gebruikerservaring op uw site (bekijk het gedeelte Valkuilen bij het detecteren van user-agents voor meer informatie).
  • Bespaart bronnen wanneer Googlebot uw site crawlt. Pagina's met responsive webdesign hoeven slechts één keer door één Googlebot-user-agent te worden gecrawld, in plaats van de pagina meerdere keren door verschillende Googlebot-user-agents te moeten laten crawlen om alle versies van de content op te halen. Deze verbetering in de crawlefficiëntie kan er indirect aan bijdragen dat Google een groter deel van de content van de site indexeert en actueel houdt.

Als u geïnteresseerd bent in responsive webdesign, kunt u om te beginnen onze blogpost op Webmaster Central en de site Web Fundamentals bezoeken.

JavaScript

Wanneer u sites bouwt die geschikt zijn voor mobiele apparaten, moet u goed nadenken over het gebruik van JavaScript om de weergaven en het gedrag op verschillende apparaten te wijzigen. Een typisch gebruiksvoorbeeld van JavaScript is het bepalen van de versie van de advertentie of van de afbeeldingsresolutie die op de pagina moet worden weergegeven.

In dit gedeelte worden de verschillende benaderingen met betrekking tot het gebruik van JavaScript beschreven en hoe ze zich verhouden tot het advies van Google om responsive webdesign te gebruiken.

Algemene configuraties

Drie populaire implementaties van JavaScript voor sites die geschikt zijn voor mobiele apparaten:

  • JavaScript-gestuurd: Bij deze configuratie wordt op alle apparaten dezelfde HTML-, CSS- en JavaScript-content weergegeven. Wanneer de JavaScript-code wordt uitgevoerd op het apparaat, wordt de weergave of het gedrag van de site aangepast. Als voor een website JavaScript is vereist, is dit de door Google aanbevolen configuratie.
  • Gecombineerde detectie: Bij deze implementatie gebruikt de website zowel JavaScript als detectie van apparaatmogelijkheden aan serverzijde om verschillende content weer te geven aan verschillende apparaten.
  • Dynamisch weergegeven JavaScript: In deze configuratie wordt voor alle apparaten dezelfde HTML weergegeven, maar wordt JavaScript weergegeven vanaf een URL die op dynamische wijze verschillende JavaScript-code weergeeft, afhankelijk van de user-agent van het apparaat.

Laten we elk van deze configuraties eens nader bekijken.

JavaScript-gestuurd

Bij deze configuratie geeft een URL dezelfde content (HTML, CSS, JavaScript, een afbeelding) weer op alle apparaten. Alleen wanneer de JavaScript-code wordt uitgevoerd op het apparaat, wordt de weergave of het gedrag van de site aangepast. Dit is vergelijkbaar met de manier waarop responsive webdesign (met behulp van CSS-mediaquery's) werkt.

Een pagina genereert bijvoorbeeld op alle apparaten dezelfde HTML die een <script>-element bevat waarmee een externe URL voor de JavaScript-code wordt aangevraagd. Alle apparaten die de URL voor de JavaScript-code aanvragen, ontvangen dezelfde code. Wanneer de code wordt uitgevoerd, detecteert JavaScript het apparaat en wordt er iets aan de pagina gewijzigd. Er wordt bijvoorbeeld een smartphonevriendelijke afbeelding of advertentiecode opgenomen in plaats van de desktopalternatieven.

Deze configuratie hangt nauw samen met responsive webdesign en onze algoritmen kunnen deze configuratie automatisch detecteren. Daarnaast is voor deze configuratie geen Vary HTTP-header vereist omdat de URL's van de pagina en de bijbehorende items content niet dynamisch weergeven. Vanwege deze voordelen is dit onze aanbevolen configuratie als het gebruik van JavaScript is vereist voor uw website.

Gecombineerde detectie

Gecombineerde detectie is een configuratie waarbij de server samenwerkt met JavaScript op de client om de mogelijkheden van het apparaat te detecteren en de content aan te passen die moet worden weergegeven.

Een site kan de weergave van de content bijvoorbeeld aanpassen op basis van het feit of het apparaat een desktopapparaat dan wel een smartphone is. In dit geval kan de website JavaScript opnemen waarmee de schermafmetingen worden gedetecteerd. Deze afmetingen worden vervolgens verzonden naar de server die de naar het apparaat verzonden code updatet of aanpast. Gewoonlijk slaat JavaScript de gedetecteerde apparaatmogelijkheden op in een cookie die de server leest bij daaropvolgende bezoeken vanaf hetzelfde apparaat.

Aangezien de server verschillende HTML retourneert aan verschillende user-agents, wordt gecombineerde detectie beschouwd als een type configuratie voor dynamische weergave. U kunt alle details in het gedeelte over dynamische weergave vinden, maar het komt erop neer dat de website de HTTP-reactieheader 'Vary: User-agent' moet bevatten wanneer een URL wordt aangevraagd die verschillende HTML-content weergeeft aan verschillende user-agents.

Dynamisch weergegeven JavaScript

Bij deze configuratie wordt op alle apparaten dezelfde HTML gegenereerd die een <script>-element bevat voor het opnemen van een extern JavaScript-bestand dat verschillende content kan hebben afhankelijk van de user-agent die de aanvraag indient. Dat wil zeggen, de JavaScript-code wordt dynamisch weergegeven.

In dat geval raden we aan dat het JavaScript-bestand wordt weergegeven met de HTTP-header 'Vary: User-agent'. Dit is een signaal aan internetcaches en Googlebot dat de JavaScript-code kan afwijken voor verschillende user-agents en is een signaal voor Googlebot om het JavaScript-bestand te crawlen met verschillende Googlebot-user-agents.

Feedback verzenden over...