Over het ontwerpen van een mobiele website

Je website mobiel maken: wel of niet (en zo ja: hoe dan?)

Het is duidelijk: we zitten hoe langer hoe meer op onze mobieltjes te internetten. Maar betekent dat nu ook dat het tijd is om als website-beheerders onze website mobiel te maken, dat wil zeggen een mobiele versie van onze site te bouwen?

Ik denk dat dat een vraag is die je niet in zijn algemeenheid kunt beantwoorden, maar dat je als beheerder goed naar de statistieken van je website moet kijken. Pas dan kun je zeggen of het in jouw geval zinvol is om tijd en moeite te steken in het bouwen van een mobiele website.

Neem bijvoorbeeld mijn eigen statistieken (van Google Analytics). Onder 'Bezoekers - Browsermogelijkheden - Schermresoluties' kan ik zien met welke schermresoluties bezoekers mijn website hebben bekeken. Hieruit blijkt dat nog geen 1% van mijn bezoekers mijn site bekijkt met een schermresolutie van 480 pixels of minder. Bij een van mijn andere sites (espresso-machine-gids.com) ligt dit percentage wat hoger: ruim 2%.

Normaal gesproken zou ik dergelijke percentages te laag vinden om actie te ondernemen, maar omdat ik het onderwerp 'website mobiel maken' wel een onderwerp vind dat op Mijn-eigen-website.nl thuishoort, heb ik toch maar de moeite genomen om van beide sites een mobiele versie te bouwen. Voor elke van deze sites ben ik echter op een andere manier te werk gegaan.

De lay-out van een mobiele website

Welke manier je ook kiest, waar je mee moet beginnen is een speciale lay-out maken voor kleinere beeldschermen. Een menubalk aan de linkerkant van je scherm, zoals veel websites hebben, is niet handig voor mobiele browsers. Het is beter om de navigatieknoppen bovenaan neer te zetten. Of – wat je ook kunt doen – is bovenaan je pagina gewoon een link naar een aparte menupagina opnemen.

Verder is het zo dat mobiele surfers vaker op zoek zijn naar specifieke informatie, in plaats van dat ze zomaar zitten te browsen. Probeer dus mee te denken met je bezoekers en zet de belangrijkste informatie voorop. (Op de mobiele versie van mijn vragenpagina's heb ik het zoekvak uit de linkerkolom om die reden bovenaan het hoofdscherm geplaatst.)

Over het algemeen geldt dat je de lay-out van je mobiele versie het beste wat simpeler kunt houden, zodat je bezoekers steeds in dezelfde richting kunnen scrollen en op die manier zonder probleem alle content kunnen lezen.

In de praktijk kan dit dus inhouden dat je twee versies van elke pagina maakt. Dat heb ik bijvoorbeeld ook gedaan voor mijn website over espresso-machines. De gewone homepage vind je op http://www.espresso-machine-gids.com/index.html en de mobiele versie op: http://www.espresso-machine-gids.com/mob_index.html.

Voor Mijn-eigen-website.nl ben ik op een andere manier te werk gegaan. Van elke pagina bestaat maar één versie, maar ik heb meerdere stylesheets gemaakt. Bekijk je de website op een gewoon beeldscherm, dan wordt mijn gewone stylesheet geladen; bekijk je de site op een klein beeldscherm (kleiner dan 480 pixels breed), dan wordt de inhoud gepresenteerd op basis van een ander stylesheet, dat ik speciaal ontwikkeld heb voor weergave op kleinere apparaten.

Eerste manier: website mobiel maken met een script

Zoals ik al heb verteld, heb ik voor mijn website Espresso-Machine-Gids.com van elke pagina een speciale mobiele versie gebouwd. (Nou heeft deze site niet zo heel veel pagina's, dus dat was niet zo heel veel werk.)

voorbeeld van een webpagina die geschikt is gemaakt voor mobiele apparaten

Maar de bezoekers blijven natuurlijk altijd op de 'gewone' pagina's binnenkomen. Zíj weten niet dat er een speciale mobiele versie bestaat, en ik heb ook geen links naar die mobiele versie op mijn site gezet. Wat er nu moet gebeuren, is dat er moet worden vastgesteld met wat voor soort apparaat een bezoeker deze site bezoekt, en dat hij moet worden doorgestuurd naar de mobiele versie als dit een mobiel toestel blijkt te zijn. Hiervoor heb je een script nodig.

Het script dat ik heb gebruikt, is afkomstig van de website DetectMobileBrowser.com. Hier vind je verschillende soorten scripts die je kunt gebruiken. Ik heb het javascript gedownload, en dat in de head van elke webpagina geplakt tussen de tags <script type="text/javascript"> en </script>. Helemaal onderaan dit script heb ik de url neergezet van de pagina waar mijn bezoeker heen gestuurd moet worden, in het geval van mijn homepage is dat: http://www.espresso-machine-gids.com/mob_index.html
Dit moet voor elke pagina gebeuren: dus in elke pagina zet ik dit script neer, en zet ik erin naar welke pagina de gebruiker doorgestuurd moet worden.

Wil je een voorbeeld zien, dan roep je gewoon een van mijn pagina's van deze site op (bijvoorbeeld http://www.espresso-machine-gids.com/index.html) en bekijk je even de broncode van die pagina. De broncode krijg je te zien door in Internet Explorer te klikken op Beeld - Bron. In Firefox of Chrome kun je gewoon de toetscombinatie Ctrl-U indrukken.

Bij deze methode moet je erop letten dat je af en toe een nieuw script downloadt en in je webpagina's zet. Want in dit script staan de verschillende browsers en apparaten genoemd die doorgestuurd moeten worden. En deze lijst verandert natuurlijk regelmatig.

Tweede manier: website mobiel maken met stylesheets

Bij Mijn-eigen-website ben ik op een andere manier te werk gegaan. Deze site bevat heel veel pagina's, en ik wilde niet voor elke pagina een aparte, mobiele versie maken. Dus heb ik een kopie van mijn gewone stylesheet gemaakt, en dat heb ik 'mobiel.css' genoemd.

Deze kopie zag er dus in eerste instantie precies hetzelfde uit als mijn gewone stylesheet. Maar daarna ben ik het gaan veranderen: van alle elementen waarvan ik wilde dat ze er anders uitzagen in de mobiele versie ben ik de kenmerken gaan veranderen. Om even een voorbeeld te geven: het bovenste gedeelte van mijn site (met de witte letters erin) heeft in mijn gewone stylesheet de volgende kenmerken:
width: 100%; height: 88px; background-color: #008000; border-top: 10px solid #006699;
Maar in mijn mobiele stylesheet heb ik de groene band wat minder hoog gemaakt:
width: 100%; height: 36px; background-color: #008000; border-top: 10px solid #006699;

En zo ben ik alle elementen van mijn site langs gegaan. De Google-advertenties wil ik helemaal niet op de mobiele versie laten zien, dus die heb ik de eigenschap display: none; gegeven. Ook het menu aan de linkerkant heb ik diezelfde eigenschap gegeven, en in plaats daarvan heb ik een speciale pagina gemaakt voor het menu. Bovenaan elke pagina heb ik verder een link naar deze 'menu-pagina' neergezet. En die link heeft op zijn beurt in mijn gewone stylesheet weer de eigenschap display: none; gekregen, omdat ik wil dat hij alleen op de kleinere schermen wordt getoond.

Is het stylesheet voor de mobiele versie klaar, dan moet je een link daarnaartoe opnemen in de head van je pagina's. Er kunnen dus meerdere links naar stylesheets in je head staan. De code voor de link naar het mobiele stylesheet komt er zó uit te zien:

Nu kun je testen of alles goed werkt in je browser (Firefox of Chrome). Want of een pagina wordt vormgegeven op basis van je gewone stylesheet of op basis van je mobiele stylesheet, hangt nu niet meer af van de vraag met welk toestel of apparaat je de pagina bekijkt, maar van de vraag hoe groot het venster is waarmee je de pagina bekijkt. En maak je dat venster klein genoeg, dan 'verspringt' je pagina op een gegeven moment vanzelf naar de andere lay-out.

Er is echter een groot nadeel aan deze tweede manier: hij werkt niet in Internet Explorer. Om deze manier ook nog in IE te laten werken, heb je het volgende script nodig.:

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 481) {
        $("#size-stylesheet").attr("href", "mobiel.css");
    } else {
       $("#size-stylesheet").attr("href", "basis.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

(Het bovenstaande script heb ik een beetje aangepast; het origineel is afkomstig van CSS-tricks.com.)

Kopieer dit script, en sla het op onder de naam 'resolution-test.js'. Upload het nu naar je server.

Dan plak je de volgende twee regels in de head van je html-pagina's:

En de link naar het mobiele stylesheet wordt dan:

(NB: de eerdergenoemde stylesheet-link haal je helemaal weg.)

Heb je dat gedaan en alle bestanden opnieuw geüpload naar de server, dan verspringen in álle browsers – dus óók in Internet Explorer – je webpagina's naar de 'mobiele' lay-out als je het browserscherm maar voldoende verkleint. De reden dat ik de eenvoudige manier (zonder script) toch heb genoemd, is omdat ik ervan uitga dat toekomstige versies van IE de simpele manier vroeg of laat ook zullen ondersteunen.

Ik ben zelf echter niet zo tevreden over de manier waarop dit script werkt. Zoals je misschien hebt gemerkt, laat Internet Explorer een fractie van een seconde de mobiele versie zien, voordat hij verspringt naar de gewone versie, ook al is je browserscherm groot genoeg. Dit script heb ik dan ook alleen op de huidige pagina gezet, zodat je zelf kunt ervaren hoe het werkt. Op de andere pagina's van mijn site staat dit script niet; dus die pagina's kunnen alleen naar de mobiele versie verspringen als je een andere browser dan Internet Explorer gebruikt.

Van website mobiel maken terug naar de homepage