• Usability & design
    wordt gesponsord door

Web development case: Stayokay

Web development case: Stayokay

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.


Geplaatst in

Delen

0
0


Er zijn 12 reacties op dit artikel

  • Beste Roel,

    Inderdaad is de website qua techniek e.d. en ook qua HTML / CSS helemaal prima in orde. Wat mij betreft een prima website. Ik heb een paar kleine puntjes waar je wellicht nog kleine verbeteringen zou kunnen aanbrengen:

    1. URL's zijn voorzien van ID's en speciale tekens, wellicht zou je hier nog (indien mogelijk) 'mooie urls' van kunnen maken.


    2. Je gebruikt op sommige pagina's wel H1, H2 en H4 elementen maar je slaat H3 over, wellicht is het goed om toch een H3 te gebruiken om onderdelen van de site in juiste context te kunnen laten plaatsen voor zoekmachines.


    3. Volgens mij is het ook nog raadzaam om alle <a

    geplaatst op
  • Ik ben geen HTML/CSS guru, maar volgens mij zou een echte CSS nerd niet bepaald onder de indruk zijn van Stayok's broncode. Je claim dat deze site zonder HTML verandering van stijl zou kunnen veranderen, lijkt me heel onrealistisch in dit geval. Er zit veel onnodige HTML in de code, zoveel kan ik wel zeggen (vooral omdat ik nu zelf een site aan't ontwikkelen ben en daar van de HTMLer continu te horen krijg wat ie nu weer slimmer en schoner heeft gedaan).

    Zonder Javascript is de site deels onbruikbaar, dus ook dit is op technisch vlak zeker niet "netjes". Zie bijvoorbeeld de image browser op de hostel pagina. Als je daar zonder javascript iets aanklikt kom je op een lege pagina.

    Als je het lettertype van de site vergroot, valt hij ook uit elkaar. Dit doordat veel elementen niet meeschalen. Dit zie je in de navigatie en in veel content blokken die een vaste hoogte hebben gekregen.

    Wat betreft de URL's ben ik het met JW eens. Die zijn zo zoekmachine onvriendelijk dat ik zou twijfelen aan de hele technische implementatie van de site. Vriendelijke URL's (zeker niet alleen voor zoekmachines) zijn nu toch wel een vereiste.

    Ook het ontbreken van een print CSS (afdrukken lijkt me op een travel site zeer belangrijk) vind ik een slecht teken. Als je een pagina afdrukt, krijg je een onleesbare berg rommel.

    Sorry voor de wat negatieve reactie... Ik vind het goed dat jullie een case laten zien, maar mijn gevoel is dat de statements over CSS niet stroken met de realiteit. Ik ben benieuwd wat ervaren front end ontwikkelaars van de site vinden.

    geplaatst op
  • 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...

    geplaatst op
  • 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 <a

    geplaatst op
  • 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.

    geplaatst op
  • 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.

    geplaatst op
  • @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.

    geplaatst op
  • Leuk case. Mooie vormgeving, goed gebruik van foto's op een speelse manier en lekker overzichtelijke zonder te zakelijk over te komen. Helemaal top.

    De kritiek op het ontbreken van "human readable url's" is meer dan terecht. Het gebruik van index.php vraagtekentje pageID= vindt ik niet meer van deze tijd. De tabjes business, groups en international aan de bovenkant zou ik graag ook terugzien in de url. En "http://www.stayokay.com/hostels/amsterdam_stadsdoelen/" vindt ik echt veel mooier dan "http://www.stayokay.com/index.php?pageID=3207&hostelID=356017". Maar misschien is het ook maar gewoon een persoonlijke fetish van me. ;-)

    Voor wat betreft "the Semantic Web" en het buzzword (het jeukt) "web 3.0" moeten we helaas nog even geduld hebben totdat we html 5.0 (geen jeuk) als standaard kunnen toepassen bij de bouw van websites. Dan zijn we pas echt in staat om op een goede manier relevantie aan te brengen in de sitecontent. Tot die tijd kom je er niet omheen om voor verschillende doelgroepen verschillende templates te gebruiken, immers een mobiele versie verschilt ten opzichte van de website niet alleen door het gebruik van een andere stylesheet maar juist ook door andere / compacte content te renderen. Wat me vervolgens brengt op serverside xml parsing, maar dan duiken we misschien iets te ver onder de motorkap.

    NB. ik had het info email-adres niet plain in de source gezet...

    geplaatst op
  • @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.

    geplaatst op
  • 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!

    geplaatst op
  • Op het eerste gezicht ziet de site er mooi en fris uit, maar ik merk toch heel vaak (ook hier uit de reacties) dat een CMS systeem vaak problemen geeft met zoekmachine marketing.

    Het bedrijf waar ik voor werk heeft nog gewoon een plain HTML site ([url=http://www.voortman.net]/url]]http://www.voortman.net]/url]), ik zat er aan te denken om misschien in de toekomst alles over te zetten naar een CMS, maar zulk soort reacties houden me dan toch tegen. Wat zouden argumenten zijn om het wel te doen?

    geplaatst op
  • 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.

    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.