Responsive web design & SEO

- SEO. read

13 mei

Save or share

Zo’n twee jaar geleden stak de term responsive design voor het eerst de kop op. In 2010. Een nieuwe vorm van front-end development voor websites. Development is hier misschien niet echt het juiste woord in deze context. Ik duid vooral op het grafisch mogelijk maken om content cross-device aan te bieden op een ‘gemakkelijke’ en praktische, maar ook grafische manier. Een schitterend idee. Een schitterende progressie, maar hoe zit dat met het SEO verhaal? Laten we er even induiken en de ganse mobile zooi op tafel gooien ;) Ready?

Ok, hou je vast voor een ritje mobile en SEO in een responsive context.

Wat is responsive web design precies en hoe is het ontstaan?

Responsive design betekent dat het front-end gedeelte van je website, het grafische gedeelte dus, gebaseerd is op een fluid grid. Zo’n fluid grid is een CSS grid die het mogelijk maakt om alle objecten op je webpagina in relatieve breedtes en posities te plaatsen. Dat betekent dat je met één layout en grafische template zowel desktop, tablets en smartphones dezelfde website content kan voorschotelen met een aangepast design. Meestal verschuiven de knopjes dan en wordt de grootte van het lettertype aangepast etc.

Zo ziet het er dan uit:

How responsive web design works

Wil je weten hoe dat er dan precies uitziet? Rek hier even het browser venster uit of verklein het eens. Deze site heeft ook een responsive design ;-)

Het idee achter responsive layouts

Het basis idee van responsive layouts? Progressive enhancement. De basis moet de content zijn en die moet beschikbaar zijn ongeacht het type device. Daaraan aangepast komt de grafische opmaak en structuur (hier bedoel ik geen IA, maar HTML structuur).

Voor de mensen die het ietwat technischer willen. Responsive layouts zijn er gekomen na het ontstaan van media queries in CSS3. de @media rule zorgde ervoor dat er bepaalde types van apparaten konden aangesproken worden om te stylen. Zeer handig dus! Zo kan je design er helemaal anders uitzien per type device. Flexibele afmetingen sturen voor afbeeldingen bijvoorbeeld, nog iets wat mogelijk was en geïntegreerd wordt in zo’n web designs. De grootte van de afbeelding schaalt mee met het herschalen van het design per device.

Waar past HTML5 dan in het plaatje?

Eigenlijk heeft HTML5 hier niet echt iets mee te maken, maar aangezien de evolutie snel gaat, worden de meeste responsive designs opgebouwd in HTML5 en binnenkort CSS4 (mei 2012).

Het voordeel van HTML5? Semantische opbouw, wat ook weer net iets gemakkelijker is voor de front-ender voor de opbouw van z’n CSS file en uitwerking.

Hoe responsive designs worden opgebouwd?

Aangezien basic mobiele apparaten (in dit geval GSM’s met een beperkte browser) geen media queries begrijpen, worden responsive designs opgebouwd vanuit een mobiel standpunt en niet vanuit een desktop view en die dan te downgraden. Waarom niet? Het is veel moeilijker om te starten vanaf een grafisch complexe structuur (desktop view) en daar dingen weg te nemen of te herzien om dan uiteindelijk tot een mobiele versie te komen (voor de smartphones).

The success of a page should be measured by one criteria: Does the visitor do what you want them to do?
– Aaron Wall

Het begint dus altijd (in het beste geval dan toch) met een mobiele versie om daarop verder te bouwen en zaken extra te voorzien, indien nodig, per overtreffende trap van apparaat. Hier komt vooral UX bij kijken hé. Je wil een andere ervaring geven op een mobiele apparaat tegenover de ervaring op een desktop bijvoorbeeld. Zo ga je bepaalde blokken eerder vooruitschuiven op desktop en mobiel héél clean en to-the-point houden.

Wat zijn de verschillen met een mobiele website?

Het is best simpel. Een website met een responsive front-end is een site die dezelfde content serveert ongeacht het apparaat. Het grafische gedoe zorgt voor de schaling enz zo verder. Een mobiele site is een site los van de desktop versie die opgemaakt is om content te serveren op maat van, je kan het al raden, een mobiel apparaat. Een tablet of smartphone, maar meestal een smartphone. Het kan perfect beiden zijn hé.

Simpel hé?

Klinkt simpel, maar er zijn zoveel opties. Zo kan je bijvoorbeeld, kort door de bocht, aannemen dat je content voor mobiele users anders moet zijn dan desktop gebruikers en je zou kunnen twijfelen tussen een aparte mobiele site of dan toch die responsive tour op te gaan. Mits programmatie kan alles hé. Content aanpassen aan het type device, altijd mogelijk, maar laten we het niet te moeilijk maken en basic houden.

Responsive : centrale content dezelfde op iedere device

Mobiel: content aangepast aan het device (in dit geval smartphones)

Ok, laten we het nu even over de voor-en nadelen hebben.

Voordelen responsive web design

  • Op ieder device dezelfde content
  • Beheerbaar door één centraal CMS
  • Eén CSS en HTML template die alles opvangen
  • SEO? No worries vanwege geen duplicate content of aparte website voor mobile
  • Google Analytics is één code. Gemakkelijk!

Nadelen responsive web design

  • Geen aparte content voor device types (tenzij je al gaat programmeren)
  • Geen mogelijkheid tot het opzetten van een mobiele campagne (tenzij je al gaat programmeren of een aparte bestemmingsurl los van het menu gaan voorschotelen via advertenties of zoiets)
  • Als er iets fout loopt, ligt alle content voor iedere device plat (grafisch bedoel ik dan)
  • A/B testing is niet meer zo simpel (vooral je rescaling moet je in het achterhoofd houden – een boel extra werk dus)
  • Meestal ook een pak duurder qua design en front-end werk (af te checken met het webbureau)

Voordelen mobile websites

  • Aparte content die volledig los kan staan van de website per type device mogelijk (kan zelfs zonder programmatie in plain HTML)
  • Kan zeer snel opgezet worden (mits een goede basis CSS & HTML template)
  • Apart inzetbaar voor campagnes of bepaalde platformen indien gewenst
  • A/B testing is hier een stuk gemakkelijker op te zetten

Nadelen mobile websites

  • Kan beheerd worden vanuit één centraal CMS, maar is meestal niet zo vanwege het aantal uur extra werk voor de implementatie in het CMS
  • Meestal extra werk om een template op te maken die matcht met het uitzicht/grafische weergave (kleuren etc) zoals de desktop versie
  • SEO is even goed nadenken om duplicate content (als die er is) en indexatie in zoekmachines te vermijden
  • Kan ook een kostelijk grapje worden afhankelijk van je eisen qua design omdat dit aparte implementatie vraagt (af te checken met webbureau)
  • Vergeten dat je mobiele website bestaat (dat kan :))
  • Google Analytics code? Wat doe je daarmee? Apart of niet?
Ik ben zeker dat ik nog enkele zaken vergeet. Toch… dit zijn de belangrijkste met in het achterhoofd:
  • Aantal uren werk tegenover de (extra) kost
  • Gemak van beheer
  • Mogelijkheid om te spelen met content per device per campagne tegenover de (extra) kost

Bon, … let’s talk SEO!

Even eerst wat research over mobile crawlers en zo

Het is vooral interessant om in het achterhoofd te houden dat mobiele gebruikers een ander zoekgedrag hebben, alvast dat denken we. Hou ook in het achterhoofd dat vooral het device, maar nog meer de plaats vanaf waar er gezocht wordt (fysiek as in vanaf thuis uit de luie zetel of op de baan). De zoekintentie van de gebruiker is volledig anders.

Mobile crawlers aka Mobile searchbots

Er zijn enkele artikels die je zeker eens moeten lezen. Dit artikel over het soort redirects voor mobiele content is een interessante. De drie types redirects worden in procenten uitgedrukt afgeleid van de top één miljoen US based websites door QuantCast. Eigenlijk spreken ze over de mobile-crawler van Google, maar dat is de essentie niet van het artikel. Hoef je nu even niet aan te denken.

In het kort? De types redirects en hun voor- en nadelen:

  • Server-side redirects: scoren in Google met je desktop versie en daarna het device checken om door te sturen naar een andere url met een goeie layout opgemaakt voor het type device (meestal twee urls of meer) – Best ok qua SEO aanpak
  • Javascript redirects: redirect via Javascript – in SEO termen: ai ai ai, niet doen
  • Cloacking of Dynamic serving: dit is de repsonsive aanpak – SEO zit hier goed

in December 2011 heeft Google toch ietwat gelost over hun Google-Mobile bot. Ze checken de pagina’s met een emulatie van de SAMSUNG-SGH-E250 en de iPhone (4.1). Opvallend dat die ene een GSM is geen internet browsing toelaat. Dan controleren ze de content op structuur denk ik dan? De pure HTML? WAP? Eerlijk gezegd, dat ben ik dus niet zeker.

Even in de stats duiken.

Google Mobile bot

Vreemd genoeg zijn er pas vanaf de start van het live plaatsen  van mijn responsive design bezoekjes geweest door de Google-Mobile bot. Toeval? Misschien. Vreemd? Zeer zeker, want ik had al twee jaar de WPtouch plugin runnen. Mobiele content kreeg een apart theme geserveerd. December tot mid april: geen bezoek. Na start responsive web design: wel bezoek.

Het probleem is dat je niet veel kan maken uit die cijfers. Acht bezoeken tegenover +1.500 bezoeken per week gemiddeld door andere bots alles samen, die dan nog heel wispelturig zijn… niets om conclusies uit te trekken.

Responsive of toch aparte mobiele site? Wat kies je best?

Dit hangt terug af van wat de intentie is van je bezoeker en natuurlijk ook je business. Laten we dat even opsplitsen in twee scenario’s zodat ik je goed op weg kan helpen. De beslissing ligt in jouw kant, ik geef enkel de argumenten ;)

Dingen om in het achterhoofd te houden:

  • Wie is mijn doelgroep?
  • Wat voor content heb ik?
  • Zoekt mijn doelgroep op verplaatsing?
  • Hoeveel budget heb ik?
  • Moet ik snel kunnen schakelen of niet?
Voor we de twee vergelijken, eerst nog even dit. Goed om weten dat tablet users WIFI prefereren boven 3G. Zoals het overal bijna te vinden is, tegen de regels van de statistiek in, maar het geeft een richtlijn zonder effectieve cijfers. US based cijfers die je vermoedelijk wel kan doortrekken voor Europa, in zekere mate. Gooi Twitter, maar eens open en zie hoeveel mensen vanaf een iPad tweeten tijdens TV programma’s. Dus… die zitten thuis. Wifi only is natuurlijk een pak goedkoper dan 3G.
Smartphones daarentegen, die worden eerder gebruikt om gerichte content op te zoeken. Je kan gerust spreken van een pro-actief gebruik tegenover een lean back tot lean-in gebruik bij de iPad.

Wanneer responsive?

Stel je hebt een pure informatieve website. Een blog of een website die over de laatste nieuwtjes van bepaalde producten gaat. Dan kan je perfect een responsive design inschakelen. Content staat hier centraal en je moet niets voorschotelen voor een bepaald type device met andere content.

Vermoedelijk zal je doelgroep vooral desktop en tablet users zijn. Misschien hier en daar nog wel wat verloren zielen die via hun smartphone op je site terechtkomen als je SEO goed zit.

Als je iets speciaal wil doen met locatie, kan je dat er nog altijd iets laten bij programmeren. Geen nood.

Responsive werkt in de meeste gevallen, zo goed als voor iedere website.

Wanneer aparte mobile website?

Dit is een moeilijke keuze. De grens tussen responsive design is klein, maar het is soms gemakkelijker een mobiele website op te zetten wanneer je:

  • Een tijdelijke mobiele campagne moet opzetten
  • Je iets totaal anders van content wil serveren voor tablet of smartphone users
  • Je geen resources hebt om een responsive design te laten maken
  • Je slechts een budget hebt om één of een kleine campagne te voeren
Stel je bent een restaurant. Hmmm. Moeilijke keuze hé. Een responsive website kan in dit geval perfect werken. Vooral je openingsuren en adres en de menukaart zullen de interessantste pagina’s zijn voor je bezoeker.
Stel je hebt 1000 euro budget en je wil een kleine campagne opzetten. Wat ga je doen? Responsive is geen optie. Dat is te duur. Om snel te schakelen (stel je campagne moet live tegen eind volgende week), kies je voor een mobiele website. HTML + wat CSS in een flexible grid layout en klaar is kees.

Bron: Enemy of Good Enough

De keuze hangt af van wat je wil doen op lange of korte termijn en wat je budget is. Meer niet.
Als je puur op SEO vlak een keuze moet maken, dat is iets anders. Dan raad ik je zeker aan te kiezen voor een responsive website.
Mocht je toch voor een aparte mobiele website kiezen voor een lange termijnaanpak, hou dan zeker in het achterhoofd dat tablet users het niet fijn vinden te landen op een website gemaakt voor smartphones. Dus… die zal je moeten een aangepaste grafische look voorschotelen tegenover smartphone users. In principe kan je dan een derde versie maken van je website, maar dat is te zot voor woorden. Als je de twee combineert (smartphone en tablet) op één mobiele website, leunt je aparte grafische opmaak per device terug weer dicht aan bij een responsive design. Moeilijk kiezen hé  ;)
Wanneer zou ik  persoonlijk gaan voor een aparte mobiele website? Enkel als het een korte campagne site moet zijn of een aparte landingspagina voor smartphone users met de nodige zaken: openingsuren, adres, bestel/bel-knop, …

SEO voor Responsive websites

SEO voor responsive websites is eigenlijk simpel. Dat is hetgene je al doet voor je ‘gewone’ website. Er is geen aparte mobiele index in Google, als je dat denkt. De mobiele content wordt ook geserveerd op relevantie, vermoedelijk nog iets meer op locatie afhankelijk van de zoekopdracht.

Hoe zit dat met Google Analytics?

Google Analytics, daar hoef je je ook geen zorgen over te maken. De data van de mobiele bezoekers komt binnen op je standaard profiel. Alles in één profiel. Gemakkelijk om dan te segmenteren etc.

SEO & mobiele websites of campagne sites

Eén van de belangrijkste zaken bij een aparte mobiele website is vooral de url. Die is namelijk anders dan de originele desktop versie. En nét dat is het pijnpunt van zo’n aparte website. Je moet met een heleboel zaken rekening betreft duplicate content, subdomeinen en Google Analytics.

Dit zijn twee veel voorkomende scenario’s:

  1. Een aparte mobiele website met dezelfde content (met of zonder fysieke pagina’s)
  2. Een aparte mobiele website met andere content (met of zonder fysieke pagina’s)

Dezelfde content (met of zonder fysieke pagina’s)

Aangezien je dezelfde content serveert op een andere url, los van de grafische look, is dit theoretisch gezien duplicate content. Die wil je natuurlijk vermijden. Aangezien de content dezelfde is, heeft het niet veel zin om beiden te laten indexeren. De kracht zit hem hier in het cachen van de pagina’s. Aangezien de desktopversie de meest courante is om te scoren in zoekmachines, focus je op deze om trafiek te krijgen. Caching staat los van indexatie.

Zonder indexatie

  1. Plaats een noindex, follow op iedere mobiele pagina
  2. Plaats een 301 of een 302 naar de mobiele pagina wanneer de user een mobiele user is
  3. Redirect de desktop user mocht hij ooit landen op een mobiele pagina naar dezelfde desktop versie van de pagina
Als je deze drie stappen volgt, zit je safe.

Een canonical tag per mobiele pagina is geen sluitende oplossing, aangezien ze bij Bing het ook niet aanraden en zelf zeggen een betere oplossing te hebben. Uitsluiten in de Robots.txt is ook een optie, maar dat is ook niet 100% sluitend. noindex, follow werkt nog steeds het beste.

Tip: mirrored url’s kunnen helpen om Google beter inzicht te geven in je mobiele pagina’s.

Voorbeeld:

www.example.com/pagina-1/ wordt via mobiel www.example.com/m/pagina-1/ of m.example.com/pagina-1/

Toch laten indexeren

  1. Plaats een 301 of een 302 naar de mobiele pagina wanneer de user een mobiele user is, maar!… je moet privately cacheable meegeven in je headers
  2. Redirect de desktop user mocht hij ooit landen op een mobiele pagina naar dezelfde desktop versie van de pagina

Andere content met of zonder fysieke pagina’s

Dit is de gemakkelijkste natuurlijk. In principe is dit andere content en dus hoef je je geen zorgen te maken. Hierbij enkel een check programmeren om te zien of de user een mobiele user is en die anders terug sturen naar de desktop versie. Hier zou ik aanraden om voor een 302 redirect te gaan.

Wens je die mobiele site toch niet in de index terug te zien, dan plaats je best de noindex, follow meta robot tag op iedere mobiele pagina met die redirect erbij hé.

Hoe zit dat met Google Analytics?

Het vervelende aan aparte mobiele website is het tracken van data. Je kan gerust kiezen voor een Server-side mobiel pakketje GA, maar eerlijk gezegd maakt dat niet veel verschil uit met de client-side versie (dat is de normale GA code zoals je die kent). Het werkt allebei even goed.

Voor Google Analytics kan je kiezen uit drie opties:

  1. Dezelfde GA code als de desktopversie op hetzelfde GA profiel
  2. Dezelfde GA code als de desktopversie op een apart GA profiel
  3. Andere GA code en dus apart GA profiel

Dezelfde GA code – Zelfde GA profiel

Je neemt dezelfde code als je desktopversie op in je mobiele pagina’s. Alles wordt dus in éénzelfde profiel getrackt. Op zich gemakkelijk te filteren mits wat aangepaste rapporten maken en segmenteren.

Stel je hebt je mobiele pagina’s op die mirror manier hier even boven aangepakt, dan kan je gerust een apart profiel aanmaken en een filter instellen die de trafiek enkel opneemt van dat mapje m. Best simpel en dan heb je de mobiele content ook nog eens apart los van je andere data.

Dezelfde GA code – Apart GA profiel

Je kan ook dezelfde code nemen maar het subdomein in de GA code aanpassen, als je alles bijvoorbeeld op een m.example.com hebt gezet. Dat kan ook. Dan maak je een extra profiel aan en filter je die op hostnaam. Ook simpel. Zo komt je data terecht in zowel je hoofdprofiel en ook je mobiel profiel dat je net hebt ingesteld (die met die filter op hostnaam).

Andere GA code – Apart GA profiel

Je kan ook een volledig aparte code aanmaken en een apart profiel maken. Zo staat alles los van je hoofdsite.

Nadeel? Je kan de data van de desktop en de mobile users ietwat onhandig vergelijken tegenover elkaar.

Voordeel? Voor een campagne site bijvoorbeeld is het dan wel héél duidelijk wat die campagne heeft opgebracht. Simpel en gemakkelijk.

Aandachtspunten & tips voor tests & maximum impact

Vooraleer je halsoverkop begint aan een mobiele website of de opdracht geeft een responsive design te laten maken, doe eerst even enkele tests om te zien of je website mobiel potentieel heeft.

Wat kan je doen als test?

  • Heb je al een bepaalde bestemmingspagina die veel conversies haalt? Maak een mobiele versie en gooi die eens in Adwords met focus op enkel mobiel verkeer. Best ff noindex, nofollow meta robot op de pagina zetten om indexatie tijdens de test te vermijden. Je weet meer nooit
  • Probeer ook eens met een contactpagina met adres en openingsuren. Doe daar ook eens een test mee als je al wat mobiele users op je website ontvangt
  • Een bel mij knop via mobiel, ook wel een test waard

Zo… hiermee kan je al goed mee aan de slag ;)

Laat zeker eens weten als je iets leuk hebt gemaakt en het iets heeft opgebracht.

Conclusie

  • Een responsive design is gemakkelijk en heeft veel voordelen op lange termijn voor SEO, Google Analytics en content publiceren in een vast stramien
  • A/B testing voor responsive website is een hoofdbreker, maar het is haalbaar. Er kruipt alleen (nogal wat) werk in.
  • Een mobiele site is waarschijnlijk de beste optie op korte termijn, voor kortstondige acties en testen
  • Onderschat het werk aan een mobiele website niet.
  • Alles staat en valt met je budget dat je beschikbaar hebt
  • Jij moet kiezen wat je doet
  • Test sowieso eerst vooraleer je mobile gaat! Mobiel gebruik is aan het groeien, maar staar je niet blind op de hype. Doe de kosten-baten oefening en wees eerlijk met jezelf
  • Responsive is vet! :) (dat is een persoonlijke mening)

Update: nog wat links

18 juni 2012

Als je nog wat zaken wil lezen over responsive design:

Bedankt om tot het einde te lezen

Zodra er een nieuwe post is, in je inbox?


Ik wil enkel bepaalde topics ontvangen


Meer van dit?

In de categorie SEO vind je nog veel meer!
Liever in alle posts graven? Dat kan ook.