Het Tropenmuseum kreeg meer en meer mobiele bezoekers en wilde hier iets mee. De standaard lay-out voor desktopcomputers bood duidelijk geen optimale beleving aan gebruikers met kleine schermen. In eerste instantie dacht het musem aan een aparte mobiele website, maar koos uiteindelijk voor een alternatief: de bestaande website ombouwen naar een website die zich aanpast aan z’n omgeving met een zogenaamde adaptieve lay-out.
Het resultaat is te zien door de site van het Tropenmuseum te openen in een moderne desktopbrowser en het venster smaller en breder te maken. Of door de site op mobiel én een desktop computer tegelijk te bekijken.
Waarom geen klassieke mobiele site?
Bij een klassieke mobiele website wordt de mobiele gebruiker weggestuurd van de standaard website. Hij komt vervolgens terecht op een ander domein waar een, meestal, uitgeklede versie van de originele site te vinden is. Deze techniek is geschikt voor wat oudere mobieltjes die niet om kunnen gaan met standaard webtechnieken. Voor gebruikers met hedendaagse smartphones – zoals Androids en iPhones - is deze techniek vaak een ergernis. In plaats van de volledige site krijg je een site met marginale data en minimale functionaliteit, terwijl je nu juist een apparaatje in handen hebt waar heel veel mee kan.
Een adaptieve website
Het Tropenmuseum heeft voor een andere aanpak gekozen. Op een adaptieve website past alleen de lay-out zich aan aan het apparaat van de bezoeker, de content zelf blijft onveranderd, net zoals het domein. Dit betekent dat iemand met een iPad precies dezelfde content te zien krijgt als een bezoeker met een Android-toestel of als iemand met een oude desktopcomputer. De lay-out is echter telkens geoptimaliseerd voor het betreffende apparaat: een desktopbezoeker krijgt de standaard driekolomslayout te zien, op een iPad in portretmodus verhuist de rechterkolom naar onderen en op een klein scherm zoals een iPhone verandert er een heleboel.
De site van het Tropenmuseum op vier verschillende resoluties waarbij de layout zich aanpast aan de grootte van het scherm
Een klein scherm, dat past toch nooit?
Verreweg het lastigste was de lay-out voor mobieltjes. Hoe prop je 3 kolommen in zo’n klein schermpje? Hoe toon je de hoofdnavigatie? Hoe toon je een eventuele subnavigatie? Hoe zorg je er voor dat deze navigaties niet de content wegdrukken? Hoe ga je om met items die in 3 kolommen worden weergegeven?
Ja, dat past!
Op de homepage is de hoofdnavigatie van groter belang dan op de overige pagina’s: de homepage fungeert in deze site voor een groot deel als hub naar overige delen van de site. We hebben ervoor gekozen om de navigatie als een lijst met knoppen te tonen zodat de gebruiker snel dieper de site in kan verdwijnen. Op andere pagina’s is de content het belangrijkst. Hier hebben we ervoor gekozen de navigatie in eerste instantie niet te tonen: als de gebruiker deze nodig heeft, dan kan hij hem eenvoudig uitklappen. Ook voor alle andere designproblemen hebben we een passend patroon gevonden. Items die in 3 kolommen staan, worden op een klein scherm in een enkele kolom getoond waarbij de plaatjes links van de tekst staan. Het gehele item is ook klikbaar: handig voor touchgebruikers met dikke vingers.
Hier zien we de weergave navigatie op een mobiel. Links de standaard homepage, daarnaast de standaard weergave van een content pagina en daarnaast de verschillende navigaties uitgeklapt.
Techniek
Het mooie aan het hedendaagse mobiele web is dat het bijna uitlsuitend gebruikt wordt door mensen met een modern apparaat met daarop een uiterst geavanceerde browser. Het browserlandschap op mobieltjes wordt nauwelijks vervuild door dinosauriërs die maar niet willen uitsterven. We hebben dus gebruik kunnen maken van geavanceerde CSS-technieken die niet begrepen worden door oude browsers. Deze oude browsers negeren deze code in z’n geheel en tonen dus het oude vertrouwde design, voor deze gebruikers verandert er niks. De stijlen die bepalen dat de lay-out verandert staan in zogenaamde media-queries: aparte stylesheets die alleen gelezen worden als er aan bepaalde voorwaarden voldaan wordt. In dit geval een afwijkende resolutie.
Browser sniffing
Een groot voordeel van deze techniek is dat de browser zelf bepaalt hoe de site eruit komt te zien. Er is geen complexe logica op de server nodig om te bepalen wat voor soort site er naar de gebruiker gestuurd moet worden, iedereen krijgt gewoon dezelfde site voorgeschoteld, de weergave van deze site is dus gewoon afhankelijk van de mogelijkheden die de browser biedt: hoe geavanceerder de browser hoe beter geoptimaliseerd. Klinkt eigenlijk best logisch toch?
Pelpina Trip 
Arnout Hasselaar 
Tabletdoekjes 
nikki 
Karel Oude Rengerink 
Mooi artikel, mooi voorbeeld en mooi uitgewerkt, maar helaas wordt 1 belangrijk nadeel niet genoemd: laadtijd.
Zolang alle varianten van een site in 1 pagina zijn verwerkt wordt er op een mobiel veel meer geladen dan nodig. Ik schrijf dit commentaar nu vanuit de trein en heb net meer dan een minuut moeten wachten voor ik wat zag. Dat is wat te lang… Schaalbaarheid is goed voor de tablets (die veelal op wifi worden gebruikt), maar ik pleit daarnaast wel voor een losse mobiele site ivm laadtijd. Op deze site moet uiteraard wel op de homepage direct in beeld een link naar de volledige site te vinden zijn. In 2013 of 2014 wil ik van dit standpunt wellicht afwijken als de 4g dekking landelijk is. Tot die tijd niet site niet alleen klein in resolutie maken, maar ook klein in kb/mb!
De vraag die daarna opkomt is natuurlijk of adaptive layout alleen afdoende is, of dat er ook channel-specifieke content zou moeten worden aangeboden. M.a.w., wil je altijd dezelfde content aanbieden op ieder device?
De site geeft overigens in IE8 direct een JavaScript fout.
Moet zeggen dat de laadtijd bij mij geen probleem oplevert (3g). Vind het erg mooi uitgevoerd. Lay-out verandert zelfs als ik mijn telefoon draai naar landscape.
[...] This post was mentioned on Twitter by Frankwatching, Merijn de Rooy, Herman van Oorschot, Gert Brouwer, Mobiel & Smartphone and others. Mobiel & Smartphone said: Flexibele lay-out: website Tropenmuseum geschikt voor elk scherm: Het Tropenmuseum kreeg meer en me… http://bit.ly/eBjApn #mobiel #gsm [...]
Zou graag het resultaat bekijken en vergelijken, naar hij laadt alleen maar op de desktop. Via de Iphone is hij niet benaderbaar (zit op wifi dus dat kan het probleem niet zijn).
@Lorentz Stout: Ik ben het natuurlijk helemaal met je eens dat performance steeds belangrijker wordt. Je conclusie dat er voorlopig dus nog mobiele sites nodig zijn deel ik echter niet. Zie bijvoorbeeld de reactie van Michel Vennema. Laadproblemen via mobiele netwerken liggen niet altijd aan de website en in het geval van het Tropenmuseum zou de laadtijd bij een redelijke dekking prima moeten zijn. Een uitgeklede site zou jouw probleem niet direct verhelpen denk ik en bij een hoop gebruikers juist voor extra frustratie zorgen.
Mooi om te zien dat dit principe ook wordt toegepast in Nederland inmiddels, hulde aan Mirabeau voor deze stap!
Ik sluit me echter aan bij Lorentz betreffende het argument van de laadtijden. Het is fijn dat Michel Vennema op een plek in Nederland is waar 3G dekking goed is, maar op mijn werkplek op Schiphol op m’n iPhone met 3G duurt het ruim een halve minuut om alle content op de pagina in te laden. Dat is zonde van de verder goede experience van de site.
Waar ik nog benieuwd naar ben en wat ik niet helemaal met zekerheid kan filteren uit dit artikel; is er gekozen voor een Mobile First aanpak bij de ontwikkeling van een nieuwe site, of is het bestaande ontwerp ook daadwerkelijk doorgevoerd voor andere resoluties? Zou je iets kunnen zeggen over de extra inzet die hiervoor nodig is geweest?
Mooi werk!
@Jeroen: helaas konden we niet voor een Mobile First aanpak kiezen, de site bestaat al jaren, we hebben slechts wat extra regels CSS toegevoegd.
@Marc van Neerven: ik ben geen groot voorstander van channel-specifieke content, ik kan eerlijk gezegd erg weinig use cases verzinnen voor het Tropenmuseum die je wel op een mobiel maar absoluut niet op een ander apparaat zou willen tonen.
Mooie site, echter duurt het laden op mijn Iphone4 erg lang.
Mooi voorbeeld van hoe je CSS effectief kunt toepassen. Op ‘n Samsung i9000 ziet het er prachtig uit, zowel in portrait als in landscape. En laadt het ook vrij snel. Maar dat kan natuurlijk ook aan het toestel liggen. ;-)
Op ‘n Nokia E51 is er echter geen verschil met ‘gewone’ websites. Ouderwets verticaal EN horizontaal scrollen dus. De E51 heeft een scherm van 240X320 pixels is nog geen 3 jaar oud. Is dit dit toestel een voorbeeld van “een dinosauriër die maar niet wil uitsterven”?
Hoe dan ook, ik ben het met Vasilis eens dat de huidige generatie websites bedoeld voor mobile devices nauwelijks recht doet aan de mogelijkheden waarover de huidige generatie smartphones beschikt. En dan moet de ‘tsunami aan tablet computers’ nog op gang komen…
Wij hebben ook een website die geschikt is voor elke schermbreedte op basis van cssgrid met 12 kolommen die in elke willekeurige combinatie gebruikt kunnen worden : http://www.museumravenstein.nl
Is nog niet helemaal naar wens.
[...] This post was mentioned on Twitter by Chrisdemoor, Chrisdemoor. Chrisdemoor said: hier een voorbeeld zoals het eigenlijk altijd zou moeten: één websites met verschillende "voorkanten" afhankelijk van …http://lnkd.in/MwrBVa [...]
Hele mooie oplossing, complimenten. Erg leuk om te zien hoe de site aangepast wordt als je je browserscherm aanpast in breedte.
De scepsis ten aanzien van channel-specifieke content deel ik niet. Het verschil tussen (bv) desktop en smartphone is niet alleen een kwestie van presentatie en laadtijd; je hebt ook te maken met hoe je doelgroep van die apparaten gebruik maakt. Je kunt er ook van uit gaan dat het onderwijs en reisorganisaties vrijwel niet via mobiel op zoek gaan naar een geschikte locatie voor een (school)reisje. Ook kun je er van uit gaan dat mobiele gebruikers doelgerichter zijn en minder entertainmentbehoefte hebben dan desktop-gebruikers, zéker bij toeristische attracties. Bovendien is de kans vele malen groter dat ze het apparaat gebruiken wanneer ze op weg zijn naar je museum, of in de buurt zijn en een bezoek overwegen. Ik denk dat onevenredig veel mobiele bezoekers het dan ook zouden waarderen als bij het Tropenmuseum het adres, telefoonnummer en openingstijden op de homepage zouden staan, en dat de routebeschrijving max 1 klik verder staat.
Zet maar eens een prominente site search bovenaan de pagina en vergelijk de ingevulde trefwoorden bij desktop, tablet en smartphone. Je zult zeker verschil in informatiebehoefte zien.
Overigens komt dit goed naar voren bij KLM. die op mobile.klm.com een totaal andere insteek biedt dan op http://www.klm.com. Op de gewone site staan zaken als “Plan en boek” en “Bereid uw reis voor” centraal, op de mobiele versie gaat het meer om “Check in” en “Flight status”. Dan heb je als organisatie goed door hoe verschillende devices vanuit een andere informatiebehoefte worden gebruikt.
T.a.v. de Tropenmuseum-site nog twee kleine praktische dingetjes:
De misschien wel belangrijkste pagina voor de mobiele versie – routebeschrijving – is slecht leesbaar doordat de Google Maps-kaart breder is dan de meeste schermen, waardoor ook de tekst buiten beeld loopt. Bovendien een suggestie: voeg niet alleen een kaartje toe maar ook een link naar Google Maps, zodat mensen met een Google Maps App door het klikken de locatie automatisch in hun app kunnen openen.
De site search is wel enorm lastig te bedienen doordat de “vind”-knop helemaal bovenaan de pagina staat. Elke keer als ik op mijn touchscreen probeer te klikken, denkt de browser dat ik iets met de adresbalk of tabbladen wil doen (HTC Hero/Dolphin Browser). Is het overigens geen idee om bij mobiel browsen, de site search op andere pagina’s onderaan de pagina te plaatsen i.p.v. helemaal niet aan te bieden?
@Raph de Rooij: voor mobieltjes met oude browsers zoals jouw Nokia geldt eigenlijk hetzelfde als voor elke browser: de browser toont wat hij kan tonen. In jouw geval is dat niet veel bijzonders maar hij is, neem ik aan, in elk geval gewoon bruikbaar.
@Anders Floor: Dank je wel voor je complimenten en je nuttige suggesties, daar gaan we wat mee doen. Over channel-specifieke content zijn we het duidelijk niet helemaal met elkaar eens maar voor een groot deel ook weer wel: ik ben het helemaal met je eens dat je content voor mobiel anders aan moet bieden, bijvoorbeeld door de contactinformatie beter naar voren te halen (erg goed advies, thanks) maar met de aannames die je doet ben ik het echt maar voor een deel eens.
Ja het klopt dat je bepaalde content liever op een desktopcomputer tot je neemt maar als je die even niet tot je beschikking hebt dan zoek je die informatie over dat schoolreisje gewoon even op je mobiel. Je zit toch een uur in die trein. De aannames over mobiel gebruik zijn altijd zo absoluut terwijl het gebruik juist, net als met laptops en tablets, juist zo enorm divers is. Ik zie het dus niet als een geheel ander gebruik, nee, het is het klassieke gebruik plus nog heel wat extra gebruik. Sites worden wat mij betreft dus niet uitgekleed voor mobiel maar juist rijker gemaakt.
Een mobiele website kan uiteraard best andere content tonen, echter ik vind dat er wel altijd een mogelijkheid moet zijn om ook de site in de normale vorm te tonen, en helaas verzuimen sommige websites dat nogal eens.
Hallo Vasalis,
Erg interessant artikel en een zeer hot topic!
Hoe kijk jij nu aan tegen het gebruik van mobilele platformen die apparaat-specifieke content pushen ob basis van een enkele markup file? (bv. Netbisquits, Sevenval)
De claim van deze leveranciers is dat het niet alleen gaat om layout, maar ook het optimaliseren van technologie (HTML 5, Js, Flash etc.)en dat de site wordt afgestemd op de interface van het device (touch, keyboard, of de trackball van Blackberry. En natuurlijk is het zonde van de bandbreedte om scripts e.d. mee te sturen als je van te voren kunt weten dat de gebruiker er niets mee kan.
Passen jullie dergelijke platforms ook wel een toe?
Op basis van welke criteria zou je besluiten of je eenvoudigweg voor CSS gaat of voor een meer geavanceerd mobile publishing platform?
@Jan Horlings: Als je weet dat een aanzienlijk deel van je webbezoekers gebruik maakt van dit soort verouderde telefoons dan zou je er voor kunnen kiezen om alleen voor deze bezoekers een aangepaste site te bouwen. Maar ik zelf ben daar zeer terughoudend mee.
Met de voor het Tropenmuseum gebruikte techniek is optimalisatie voor bijvoorbeeld touch ook eenvoudig te realiseren, detectie van ondersteunde technieken is ook zeer eenvoudig te doen met weinig Kb’s. Optimalisatie voor adaptive layouts is niet zo zwaar als men misschien wel denkt.
Bovendien gaan de leveranciers van aparte mobiele sites er van uit dat mobiele gebruikers altijd op een krakkemikkig netwerk zitten. Ik twijfel er aan of dat wel zo is.
[...] wrote yesterday about how he altered the layout of the Tropenmuseum website to adapt to different screen [...]
Mooie oplossing en op de juiste manier geïmplementeerd. Overigens is dit iets wat je ook met extra tooling kan regelen op je website, zie ook hoe Tweakers.net dit heeft geïmplementeerd. Zij maken in deze gebruik van Wurfl open-source community project om browser detectie uit te voeren en de bezoeker één van de 6 smaken voor te schotelen, zie:http://tweakers.net/devicedetect
De standaard browser versie heeft in deze 3 kolommen en afhankelijk van het type device worden de kolommen en functionaliteit minder.
Al geruime tijd heeft de Helenahoeve een site welke geschikt is voor elk device. Naast het feit dat de Helenahoeve meerdere ontwerpen kent, laadt de site bovendien snel. Zie ook http://overdewebsite.helenahoeve.nl
http://twitter.com/wqaag stelt dat:
The #websitequality of tropenmuseum.nl is good.
The #websitequality of helenahoeve.nl is excellent.
[...] http://www.frankwatching.com/archive/2011/02/21/flexibele-lay-out-website-tropenmuseum-geschikt-voor... [...]
Beste Vasilis,
Goed artikel en roept reacties op van mede-specialisten, ook interessant om de diverse meningen erbij te lezen.
Zonder in detail te treden is het een weldoordachte en gestroomlijnde oplossing met gunstige implementatie mogelijkheden, chapeau.
Wat mij betreft prima artikel welke een prima implementatie beschrijft.
[...] steeds naar de optimale weergave wordt gezocht. Meer over deze site en visuals is te vinden in het artikel over het tropenmuseum van [...]
Hi Vasilis en anderen,
Complimenten voor de inrichting. Ik ben het met je eens dat de gebruikerservaring in dezen op mobiel stukken is verbeterd. Overigens is bijvoorbeeld op ah.nl dit ook al erg strak toegepast. Wij zelf zijn ook deze toepassing aan het gebruiken dus goed om te lezen hoe jullie dat ervaren.