• Usability & design
    wordt gesponsord door

Als het aan Google lag, koos ze responsive

Als het aan Google lag, koos ze responsive

Zeg eens eerlijk, heb jij wel eens goed gekeken naar het aantal bezoekers dat gebruik maakt van een mobiel apparaat als ze je website bezoeken? Als je het afgelopen jaar selecteert in je analytics pakket is de kans groot dat dit segment behoorlijk gegroeid is. Niet zo gek natuurlijk, met alle nieuwe smartphones en tablets die er per dag bij komen. Maar wat krijgen deze bezoekers te zien als ze je website bezoeken? Heb je een aparte website voor mobiel? Krijgen ze de complete desktop versie te zien? Of heb je misschien zo’n ultra hippe responsive website die zich aanpast aan schermgroottes? Ow, en als je dan toch bezig bent met keuzes maken: wat doe je met je SEO? Wat is bij een mobiele site nou de juiste keuze met betrekking tot SEO? Gelukkig hoef je dat niet zelf uit te proberen en komt Google met het antwoord.

Verschillende technieken

Er zijn een hoop technieken die gevolgd kunnen worden, maar Google somt de 3 op die zij ondersteunt.

  1. Responsive design. Dat wil zeggen dat je één domein hebt die alle gebruikers bedient, onafhankelijk van het apparaat dat hij of zij gebruikt om je website te bezoeken. Het design past zich aan door middel van HTML en CSS aan de resolutie van het scherm. Misschien het beste te demonsteren aan de hand van een gaaf voorbeeld: http://forefathersgroup.com/. Bij responsive design hoef je geen andere SEO strategie te voeren dan die je al had voor de “desktop” versie van je website.
  2. User agent check. Alle bezoekers worden hierbij nog steeds bediend via één domeinnaam, maar aan de hand van de user agent van de gebruiker wordt verschillende content ingeladen. De user agent geeft aan of een bezoeker via desktop of mobiel de website bezoekt.
  3. Eigen domein. Hierbij bouw je een aparte versie van de website op een aparte domeinnaam, specifiek voor mobiele apparaten. Veelal een m.domein.nl oplossing.

Als het aan Google ligt, zouden ze het liefst zien dat het complete internet gebruik zou maken van responsive design. Dat geven ze dan ook aan als beste oplossing op hun eigen blog.

Switchboard tags

Je website opzetten met een responsive design is niet niks! Meestal zit je dan tegen een compleet re-design aan te kijken en dat is meestal “nothing to sneeze at”. Dan is het bouwen van een mobiele website op een m.domein.nl oplossing soms de makkelijkste keuze. Maar doe je het dan fout wat betreft SEO? Nee, zeker niet. Dus zijn er ook andere oplossingen? Jazeker, maar deze zijn een beetje onder gesneeuwd in het nieuws rondom de responsive stelling die Google heeft ingenomen. Google heeft een nieuwe set aan tags geïntroduceerd specifiek voor dit type website opbouw, de zogenaamde switchboard tags.

Hoe gebruik je switchboard tags?

Switchboard tags vertellen aan een zoekmachine dat de mobiele site en de desktop versie aan elkaar gerelateerd zijn. Op die manier kan Google de twee websites op de juiste manier indexeren en waarderen. Er zijn hierbij twee implementatie opties.

1. Tags gebruiken in de code
De eerste manier die wordt omgeschreven in de webmaster guidelines is het gebruik van tags op de pagina zelf.

Op de desktop versie zet je dan:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >

Op de mobiele versie van de pagina zet je dan:

<link rel="canonical" href="http://www.example.com/page-1" >

2. Gebruik maken van de XML Sitemap
De andere oplossing die wordt aangeboden is via de XML sitemap en de labeling die je daarin kunt gebruiken.

De desktop XML sitemap krijgt dat de volgende code:

<url>
<loc>http://www.example.com/page-1/</loc>
<xhtml:link
    rel="alternate"
    media="only screen and (max-width: 640px)"
    href="http://m.example.com/page-1" />
</url>

Op de mobiele versie van de pagina zet je opnieuw de canonical tag:

<link rel="canonical" href="http://www.example.com/page-1" >

Alle specifieke informatie vind je hier.

Dit is de oplossing! Nu ben ik klaar!

Nou, niet helemaal. Deze tags zullen er voor zorgen dat verkeer vanuit Google naar de juiste versie wordt gestuurd, maar wat als een bezoeker via zijn mobiel een linkje aanklikt op een andere website en niet via Google gaat? Daar zou een user agent redirect (oplossing 2 van Google) beter zijn. Wil je weten hoe mobiele bezoekers momenteel je website bekijken, dan zou ik aandachtig de gegevens van je analytics pakket bestuderen.

Opmerkelijk

Dat Google zich zo duidelijk uitspreekt over een oplossing wat betreft mobiel internet is aan de ene kant opmerkelijk, maar vanuit het oogpunt van usability en zoekresultaten ook weer heel logisch. Al je content en SEO inspanning zit onder één dak of één URL voor alle zoekmachines en gebruikers. Klinkt als een match made in heaven. Wat is jouw mobiele website strategie?

Afbeelding: Bas Boerman


Delen

0
0


Er zijn 6 reacties op dit artikel

  • Ik heb ervoor gekozen om op basis van user agent mensen een speciale mobiele stylesheet aan te bieden, die overigens wel responsive is, zodat hij werkt op diverse formaten mobieltjes. Voor de iPad en andere grote tables volstaat in de meeste gevallen de normale CSS-sheet wel.
    Ook heb ik wat elementen eruit gehaald voor de mobiele versie, op basis van dezelfde check. Zo is bijvoorbeeld de sidebar dan wat korter, scheelt laadtijd.
    Het was even wat klooien met afbeeldingen in de posts met name. Mooi is dat je met wat programmeerwerk alle zware elementen er netjes uit kunt halen, laadt ie ook sneller en verbruikt minder data.
    Ik heb zelf nog een hele waslijst aan verbeteringen die ik kan doorvoeren, maar het begin is er ;-).

    Overigens zijn er genoeg online webapps die op basis van een RSS-feed bijvoorbeeld een mobiele site voor je kunnen genereren. Enzo.

    geplaatst op
  • @Annelies: dat vind ik ook een goede oplossing! Je hele site responsive maken is nog al een klus en waarom dan niet op basis van User Agent een responsive template maken.

    geplaatst op
  • @Siegfried: Is het een idee om alle links in deze tekst te laten openen in een nieuw tabblad? Vind het zelf makkelijk omdat 'de lezer' dan altijd 'jou' pagina open houd! Verder goed en interessant artikel!

    geplaatst op
  • @jeroen volgens de webrichtlijnen laten we dat aan de gebruiker. crtl + een klik lost dit vaak voor je op.

    Onze website is net responsive geworden. In 3 delen schrijven we erover in het ons weblog. De waarom, de hoe en de resultaten. De hoe is net vandaag online verschenen: http://www.voys.nl/weblog/responsive-design-deel-2-de-hoe-van-responsive-design.html

    Een aantal tips:
    1- gebruik een css/html framework of biolerplate. Er komt veel bij kijken als je dit goed wilt doen. Voor website is het Taiga Boilerplate een goede oplossing. Voor admin interfaces is Twitter Bootstrap handig.
    2- huur een specialist in. Design en techniek komen hier zo nauw samen dat een specialist voor ons een uitkomst was.

    geplaatst op
  • @Mark: inderdaad is het slim om een specialist in te huren voor responsive design. Mensen zien nog wel eens over het hoofd dat je naast het volledige ontwerp (bijv: 1024px breed), ook voor ieder van de tussenstappen designkeuzes moet maken (bijv. afbeeldingen kleiner tonen, logo wel of niet in bovenbalk, etc).
    Die designs zien er niet perse wereldschokkend anders uit dan het hoofddesign, maar het is voor de balans van de pagina wel goed om dit door een professional te laten doen, en (meestal) niet door je webprogrammeur. Op die manier zorg je ervoor dat de webpagina er op ieder apparaat goed uit ziet.

    (Voor wie niet bekend is met responsive design: de vormgeving verspringt in stappen, zgn breakpoints. Dus je hebt een vormgeving voor de smalste apparaten, en dan ga je in een aantal stappen tot de hoogste schermbreedte die je wilt ondersteunen. Sleep bijv. het genoemde voorbeeld (http://forefathersgroup.com/) smaller om de verspringingen duidelijk te zien)

    geplaatst op
  • Mooi artikel en ware punten. Ik ben het met jullie eens dat een responsive website de toekomst heeft. Het grote nadeel is inderdaad het ontwerp en het feit dat je direct veel informatie deelt op een klein scherm. Ik ben daarom van mening dat je je bewust moet zijn van twee soorten mobiele websites, ieder met een heel ander doel.

    Allereerst het tonen van informatie aan je mobiele bezoekers, dit kan prima met een responsive website. Contact gegevens of een productomschrijving zijn zo gevonden.

    Ten tweede de inzet van je mobiele website als marketingtool. Denk aan evenementpagina’s (compleet met programmering en plattegrond) of het offline sturen naar een online campagne via een QR code. Hier wil je niet dat de lezer grote lappen tekst te zien krijgt, moet scrollen of in- en uitzoomen. Ik denk dat je voor deze doeleinden beter gebruik kunt maken van losse mobiele mini websites, speciaal ontworpen voor 1 boodschap die na een bepaalde campagne een nieuwe invulling krijgen.

    geplaatst op

Plaats zelf een reactie

Log in zodat je (in het vervolg) nóg sneller kunt reageren

Vul jouw naam in.
Vul jouw e-mailadres in. Vul een geldig e-mailadres in.
Vul jouw reactie in.

Herhaal de tekens die je ziet in de afbeelding hieronder


Let op: je reactie blijft voor altijd staan. We verwijderen deze dus later niet als je op zoek bent naar een nieuwe werkgever (of schoonmoeder). Reacties die beledigend zijn of zelfpromotioneel daarentegen, verwijderen we maar al te graag. Door te reageren ga je akkoord met onze voorwaarden.