Hoe bouw je een website die uit één pagina bestaat?

Nu mijn proefschrift bij de drukker ligt zijn er nog een aantal zaken die afgerond moeten worden. Zo heb ik in het proefschrift een verwijzing staan naar een online website waar (ter zijner tijd) ook de digitale versies van het proefschrift te vinden zullen zijn.

Die website wilde ik niet te ‘zwaar’ maken, dus geen WordPress of ander uitgebreid CMS. Maar ik wilde wel iets van en navigatie-optie in de site hebben. Ik dacht daarbij aan een zogeheten “one-page website”. Dat moest toch wel te realiseren zijn? Uiteindelijk wel. Maar het heeft wat meer tijd gekost dan ik gehoopt had. Ik ben eerst op zoek gegaan naar voorbeelden en de bijbehorende programmacode. Er is voldoende online te vinden. Zo is er een website genaamd one page love met veel voorbeelden, maar er zijn er meer en er zijn ook overzichten van tutorials.

Poging #1
Uiteindelijk na wat rondzoeken kwam ik uit bij deze tutorial. Die zag er heel mooi uit en niet al te ingewikkeld. Dat bleek tegen te vallen. Het voorbeeld ging namelijk uit van 4 deelpagina’s. En ik wilde er 6 hebben, met net wat andere namen. Om dat voor elkaar te krijgen moest ik in de JavaScript code op zoek naar die onderdelen die ik moest aanpassen en/of uitbreiden. Idem voor wat betreft de CSS (stylesheets). Het voorbeeld had verschillende kleuren achtergronden, ik wilde gewoon wit. Maar de letters van de navigatiebalk waren ook wit en dus moest ik uitzoeken hoe het mechanisme met wisselende knopkleuren werkte.
Uiteindelijk kreeg ik dat allemaal wel voor elkaar, maar bij het vullen bleek de oplossing toch niet bruikbaar.

Ten eerste zag de site er op een iPhone vreselijk uit. De afbeeldingen en lettertypes waren veel te groot voor het kleine schermpje en de navigatiestructuur werkte niet meer zoals het hoorde. Niet goed.
Maar ook op de laptop paste niet alles. De structuur ging namelijk uit van heel weinig tekst. De pagina’s mochten niet groter zijn dan je beeldscherm. En ik moest hier en daar de nodige hoeveelheid tekst inplakken. Dat ging niet.

Poging #2
Ik geef uiteraard niet meteen op, dus ging ik verder op zoek. Gewaarschuwd door het probleem met de iPhone besloot ik het zoeken om te draaien en uit te gaan van een oplossing die op mobiele devices zeker zou werken. Ik kwam uiteraard bij jQuery Mobile. Dat is een dat op maat gemaakt is voor mobiel en ook redelijk uitziet op de laptop.
Wat hier nu precies fout ging weet ik niet, maar ik kon het resultaat goed bekijken in IE 9, maar niet in Google Chrome op diezelfde laptop. Ook op de iPad werd wel de tekst, maar niet de opmaak getoond. Vreemd, want de voorbeelden van de site werden wél getoond. Ik heb het nog geprobeerd met een lokale kopie van de CSS-bestanden, maar het mocht niet baten. Het zal vast iets zijn wat ík fout deed, maar ik kwam er niet uit.
Helaas, een andere keer opnieuw proberen.

Poging #3
Driemaal is scheepsrecht. Na nog wat verder zoeken kwam ik deze tutorial tegen. Hier is de pagina, veel meer dan bij de eerste en tweede poging uit van een lange pagina waar je vrij doorheen kunt bladeren, gecombineerd met een navigatiebalk.
Grote voordeel was dat hier alle tekst in past en hoewel de tekst op de iPhone en iPad niet altijd even groot zijn, is het werkbaar. De afbeeldingen passen netjes op de pagina en met wat inzoomen kun je het best lezen.

Mocht je ervaring hebben met een vergelijkbare oplossing of een oplossing die beter zou moeten werken in deze situatie, dan hoor ik het graag!
Je kunt het resultaat hier bekijken.