Web development case: Stayokay

8 maart 2008, 05:17

Eerder publiceerde Ruben Bos de serie ‘Webdesign Rules!’ op Marketingfacts, waarin hij de rol van techniek binnen het proces van web development op de achtergrond plaatste. Een bewuste keuze, gezien de doelstelling van het boek waarop zijn artikelen gebaseerd waren: web development centraal stellen vanuit het perspectief van de opdrachtgever, en deze handvatten geven om dit proces goed te kunnen begeleiden. Ondanks het gelijk van zijn insteek, kan het voor marketeers en andere beslissers toch heel nuttig zijn om meer over de technische aspecten van web development te weten te komen. Door de juiste techniek toe te passen wordt de toegankelijkheid van de site vergroot.

Om te demonstreren hoe de techniek binnen een website van invloed kan zijn op de marketing van uw product of dienst, kiezen we ervoor een case te beschrijven, namelijk Stayokay.

Stayokay wilde op het web een aantal nieuwe wegen inslaan. In dat kader werd ons gevraagd de website aan te pakken. Dit resulteerde in een complete en schaalbare site die er goed uitziet, maar minstens zo belangrijk: zeer toegankelijk is door slim gebruik van CSS en rekening te houden met semantiek.

CSS

CSS (Cascading Style Sheets) is een techniek die informatie over de vormgeving van pagina’s separaat opslaat, waarna dit in de HTML-code geladen wordt. Met behulp van CSS is het dus mogelijk informatie over de vormgeving los te koppelen van de pagina’s zelf. Voordeel van deze techniek is dat bij een wijziging van de huisstijl niet de vormgeving en layout van elke pagina aangepast hoeven te worden. Sterker nog, als de huisstijl van de organisatie compleet wordt omgegooid en CSS op de juiste wijze is toegepast, kunnen de vormgeving, stijl en lay-out van de gehele website aangepast worden door wijzigingen door te voeren in slechts één document.

Hostels Stayokay

CSS wordt steeds vaker en beter toegepast, omdat de desktop of laptop niet meer de enige apparaten zijn waarmee websites bezocht worden. Doelstelling wordt daarom om maar één hoeveelheid aan informatie correct weer te geven op verschillende apparaten. Een voorbeeld waarin dit goed is toegepast? De mobiele variant van Marketingfacts (Marketingfacts Mobiel), waarvoor gebruik wordt gemaakt van een andere CSS dan die in de “normale” website. Hierdoor vallen bepaalde onderdelen van de website weg, behalve de belangrijkste content: de artikelen!

Web 3.0: semantiek als basis

Bij een goed gebruik van CSS worden de eerste stappen gezet naar een web 3.0 website. Waar web 2.0 gaat over user generated content, verregaande gebruikerservaring, social networking en het delen van informatie, legt web 3.0 de nadruk op semantiek. Semantiek gaat over het geven van betekenis aan onderdelen op het web. Door aan ieder brokje informatie op een website een goede beschrijving toe te kennen wordt er betekenis gecreëerd. Zo zou dit artikel niet alleen als tekst worden herkend, maar ook als blog artikel.

Een semantisch goed gebouwde site is klaar voor de toekomst. Klaar om geïnterpreteerd te worden door verschillende browsers, apparaten en gebruikers. Bovendien kunnen zoekmachines beter omgaan met semantisch goede sites: ze weten waar bepaalde informatie te vinden en te interpreteren. Zo hecht de zoekmachine meer belang aan de titel van een tekst, dan aan de body. Met deze informatie wordt de relevantie van bepaalde zoekresultaten beoordeeld. En hoe relevanter, hoe hoger in de resultaten…

Ook geo-engines als Google Earth kunnen beoordelen of een site relevante content bevat, zodat het gemakkelijk gepresenteerd kan worden op haar kaarten. Andere toepassing: het bekijken van een site met een mobiele telefoon, waarbij aanklikken van een telefoonnummer op de site de mogelijkheid geeft meteen te bellen.

Deze enorme hoeveelheid aan mogelijke toepassingen vraagt om een goed gefundeerde site. Een site waarin de vormgeving, het gedrag en de structuur van elkaar zijn gescheiden. Zo ontstaat een toegankelijke site voor meerdere toepassingen.

Stayokay

De website van Stayokay is wat ons betreft een voorbeeld van een dergelijke toegankelijke site. Ten eerste is de site toegankelijk gemaakt voor diverse instellingen van beeldschermen. Uiteraard voor het ‘gewone’ beeldscherm, ook als javascript en Flash niet geactiveerd zijn. Maar ook voor PDA’s en mobiele telefoons, die vaak geen javascript of Flash aankunnen, is de site prima bereikbaar. Overigens is (nog) geen aparte mobiele variant voor Stayokay gemaakt. Dus qua vormgeving zou daar nog winst te behalen zijn.

Ook zijn enkele gadget-achtige functies toegevoegd op basis van semantische technieken. Stel: je bent als Spaanse backpacker op weg naar Nederland en wilt een goede slaapplek vinden in Nederland. Via een zoekmachine vind je de site van Stayokay bij de eerste zoekresultaten, vanwege optimalisatie van de website. Op de site beland je bij het hosteloverzicht. Met behulp van een microformat plugin in Firefox kan je direct alle hosteladressen opslaan op je iPod. Met een gerust hart neem je de trein, luister je een muziekje en tegen de tijd dat je de grens over komt blader je de adressen eens rustig door om te kijken waar je gaat overnachten.

SXSW

Voor het toepassen van CSS zit Stayokay.com als enige Nederlandse inzending bij de finalisten van South by South West (SXSW). Het SXSW Interactive Festival is een vijf dagen durend jaarlijks evenement vol paneldiscussies, keynotes, een Trade Show en ander spektakel. Het festival staat in het teken van opkomende nieuwe technologieën. Bezoekers van het evenement – voor een groot deel actief in de creatieve industrie – worden overladen met hands-on ervaringen met de nieuwste technologieën, trainingen, en langetermijnvisies van vakgenoten. Alles staat in het teken van vrij denken en het delen van creatieve energie.

Achtergrond informatie

CSS

Semantisch web

Mircroformats

Safari mircroformat plugin

Mangrove doet verslag van SXSW via Marketingfacts en via blog.mangrove.nl.

Roel Schiefelbusch
Managing Partner bij Mangrove

Roel Schiefelbusch is managing partner bij full service internetbureau Mangrove.

Categorie
Tags

9 Reacties

    Barry

    Wellicht ook een tip voor Stayokay: Op de voorpagina staat een grote uiting voor 10% vroegboekkorting, geldig t/m 31 januari 2008… En “Als je een arrangement uit de brochure 2008 boekt vóór 1 februari is de prijs nog vriendelijker!”…. Tsja…


    8 maart 2008 om 13:57
    schief

    Dank voor de reacties. Ook al kunnen ze negatief over komen (Ruben), ze helpen ons om de kwaliteit verder te verhogen. Zelfs wij zijn niet onfeilbaar ;-). In sommige opmerkingen kan ik me vinden. Voor bepaalde zaken zijn ook bewust keuzes gemaakt, dus ik loop de opmerkingen even langs.

    @JW URL’s kunnen inderdaad meer zoekmachine- / gebruikersvriendelijker, eens. Dit is een nice-to-have voor ons CMS. De H3 tag wordt wel gebruikt, maar blijkbaar niet op de pagina waarvan je de bron bekeek, denk ik. Op de homepage worden ze gebruikt voor de titels van de last-minutes. Van de title tags bij

    @Ruben Waarom denk je dat een CSS nerd niet onder de indruk zou zijn? Welke HTML is volgens jou overbodig? De site is zonder javascript goed te bezoeken en alle belangrijke functies werken. Ja, we gebruiken ook javascript voor andere zaken, die dan wellicht niet dezelfde gebruikerservaring met zich meebrengen, dat klopt. Dat zijn de extra’s. Zet je javascript eens uit en ga eens een dagje surfen. Je merkt dan dat heel veel sites of belangrijke functies ervan uitvallen. Dat wordt zo veel mogelijk voorkomen. Qua ontwikkeltijd is dat niet gunstig, want het is zeker niet de makkelijkste weg om te bewandelen, maar het heeft absoluut zijn voordelen. Om dit met alle ‘extra’s’ te doen, kan kostentechnisch weer over the top zijn. Wat URL’s betreft, zie reactie aan JW. Er is wel een print CSS, maar ik zie wat je bedoelt! Goeie tip om dat nog even te checken. Overigens is de site gebouwd door ervaren Front-enders. Ben blij dat ze bij SXSW interactive er anders over dachten wat CSS betreft, anders konden we die nominatie wel op onze buik schrijven. 😉

    @Barry Scherp. Hij staat genoteerd!

    Er zullen vast meer op- en aanmerkingen zijn. We horen ze graag, want discussie helpt om scherp te blijven. Er zijn zo veel aspecten aan web development, buiten alle ontwikkelingen, dat ook wij nooit zullen ophouden te leren.


    8 maart 2008 om 15:54
    RubZie

    Roel: ik doel op de overload aan divs die overal omheen zitten, elk content element heeft wel 3, soms nog meer, containers. Dat duidt volgens mij op heel inefficiënte code en zal het moeilijk maken makkelijk een andere css gebaseerde layout te tonen.

    Ik heb de site met javascript gebruikt en het eerste wat ik aanklikte werkte niet. Dan kun je wel zeggen dat alle belangrijke functies werken, maar ja… In dit geval is het gewoon slordigheid zo te zien, die image browser zet overal a href’s omheen maar de links doen in Firefox 2.0/osx10.5.2 niks (egmond hostel).

    De print css is er inderdaad wel maar hij is niet speciaal voor stayokay gemaakt, hij is bijna leeg zelfs.

    Kun je iets meer over de SxSW nominatie vertellen, wat is dat en waar kunnen we er meer over lezen? Lijkt me interessant!

    Dat het ervaren fontenders zijn wil ik best geloven. Maar grafische elementen ook resizeable maken en zorgen dat mooi vormgegeven blokjes ook verticaal kunnen schalen is toch echt basic spul. Als je met een “CSS case” komt en accessibility zegt hoog in het vaandel te hebben, is dit gewoon niet goed genoeg imho. True: het is beter dan sommige andere sites, maar dat lijkt me niet het criterium hier.


    8 maart 2008 om 18:34
    Harmen Voortman

    Ik zie niet in hoe de title bij een href gebruikt kan worden voor spam. Bij ons cms vullen we daar automatisch de titel van de pagina/content achter de link in. Als iemand weet waarom het gebruik van title spamgevoelig is, wil ik het graag weten.


    9 maart 2008 om 07:42
    schief

    @Ruben je geeft zelf al aan ‘volgens mij’… Ik denk dat je daar maar eens een discussie met een bouwer over moet hebben. Er zijn vele keuzes te maken in zo’n proces, waardoor je op sommige gebieden concessies doet, maar wel met allerlei kernwaarden in het achterhoofd. Zo zijn niet alle tabellen volledig schaalbaar, maar kan de site prima bezocht worden met grotere lettergrootte. Ook geef je nu iets aan dat je basic vindt, maar afbeeldingen mee laten schalen is iets waarvan andere zullen zeggen dat dat absoluut not done is. Een twistpunt dus. En de niet werkende link is denk ik geen link, maar een mouse-over voor een grotere afbeelding links ervan. Of bedoel je toch iets anders?

    In het arrtikel onderaan vind je meer informatie over SXSW Interactive en de nominatie. In de categorie CSS is Stayokay 1 van de 5 finalisten.


    9 maart 2008 om 08:01
    schief

    @Frank Nee, daar zijn we het over eens; de url kan mooier/makkelijker. Het is een kwestie van tijd en prioriteiten wat betreft ontwikkeling van ons CMS. Sommige zaken zien we als meer urgent. Eén van de belangrijkste redenen om het wel door te voeren is zoekmachinevriendelijkheid, maar daarin scoren we gelukkig al goed zonder de re-write van de url. Neemt niet weg dat het wel hoog op het verlanglijstje staat! Web 3.0 is qua term wellicht buzz-word, maar ook maar een naampje aan een ontwikkeling die toch wel veel potentie heeft. Nog een lange weg te gaan en er zijn meer zaken die daarin een rol spelen, eens.


    10 maart 2008 om 07:34
    Maarten Muller

    Onderhouden ze de website zelf?

    Vroegboekkorting tot 31 januari

    Pagina Stayokaycard – actievoorwaarden korting

    Enkel in te leveren in de maanden november 2007 t/m maart 2008

    Succes met het verzilveren van de nominatie!


    10 maart 2008 om 08:15
    Mike van Hoenselaar

    Ziet erg idd fris uit.

    Mijn 2 centen dan nog maar erbij:

    ALs ik kijk naar interactie van de gebruiker dan vind ik deze dingen nog wel beter kunnen.

    – Er wordt op een detailpagina van een hostel een bepaalde kleur gecommuniceert, deze komt nergens terug in het voortraject (of ik heb er helemaal naast gekeken). Behalve het kaartje dan. Wat is hier trouwens de reden van? (gevonden: het is city, water en natuur) Zorg er dan voor dat deze buttons al standaard deze kleur hebben. Dan is dat meteen duidelijk voor de gebruiker.

    – Bij het uit staan van je JS en dan het zoeken naar hostels kom je eerst op een tussenpagina met de melding ‘Klik op verder om doorgeleid te worden naar de boekingsomgeving van StayOkay’ en daarna kun je pas boeken. Als er maar 1 resultaat gevonden wordt kan deze volgens mij best direct weergegeven worden.

    – Bij het selecteren van een hostel kom je op de detailpagina en (positief: het hostel is al ingevuld) daar kan ik nergens direct boeken(conversie mis ik dus), lijkt me HEEL erg belangrijk. Wel door alsnog weer eens te zoeken(huh? of ja er staat zoeken en boeken alweer, maar als je op verder klikt dan boek je idd meteen, bij uitstaan van JS weer niet). Maar die stap gaat dus helemaal niet werken als er dalijk meer hostels in 1 plaats komen. Waarom niet gewoon bovenaan een mooie dikke knop, Boek nu!, en onderaan een mooie reminder met ‘Boek dit hostel’ zodat als de mensen de moeite hebben genomen om de pagina te lezen dat ze beloond worden om een actie uit te kunnen voeren, deze mis ik nu.

    – Ik klik op arrangementen en ik blijf bij het menu op hostels hangen.

    – Bij de detailpagina krijg je 6 foto’s te zien die bij een hover veranderen, waarom het handicoon als er geen actie is als ik erop klik, met CSS zo veranderd. Wel even rekening mee houden dat als ik geen JS heb dat er het plaatje vergroot wordt weergegeven of zo.

    – stayokcard pagina, er wordt in een verhaaltje gemeld dat je het moet doen! ok dat wil ik, er staat zelfs bestel nu! maar hoe? ik had hem bijna niet aangevraagd, maar ik had maar aangenomen dat het links onder ‘stayokay card’ moest zijn. Zorg dan voor een liijst met dezelfde opties in tekstvorm of zo. Dan heb een hogere CTR denk ik.

    -bij invullen van formulier een blauwe background, hmmm kan…

    -actievoorwaarden lijken mij niet goed gecommuniceerd, Gestalt werkt hier niet lekker. die stippelijntjes had ik denk ik vervangen door een leuke vormgegeven list. Heb je ook nog eens dat mensen ze sneller lezen. Beflessen wil je tenslotte niet.

    – Veel gemaakte fout: aan iedereen!! meet maar eens hoe vaak mensen zoeken op niks. Als je nu op Zoek klikt (onderaan??) dan krijg je een lege pagina met alles zoekresultaten. Een gemiste kans lijkt me.

    Ok ik laat het even hierbij. Als ik goed zou zoeken dan zou ik vast nog veel meer interactieproblemen vinden. De design en technische aspecten daargelaten 🙂

    Maar al met al ziet hij er goed uit en het concept is goed, laat dat duidelijk zijn.


    10 maart 2008 om 09:42

Marketingfacts. Elke dag vers. Mis niks!