En er moet nog veel meer gebeuren. Het belangrijkste is dat de vormgeving naar het Nederlands moet worden vertaald. Ook ben ik nog niet tevreden over het beeldmateriaal en de toegankelijkheid van statische pagina’s. En verder lijkt het me handig om alle berichten met terugwerkende kracht van tags te voorzien en een tagcloud toe te voegen. Zo blijkt maar weer: een website is nooit af…

Bij WordPress is speciale aandacht besteed aan zoekmachinevriendelijke pagina’s en aan het spamvrij houden van het gastenboek en het contactformulier. Hiervoor zijn verschillende WordPress-plugins ingezet, waaronder Akismet, All in One SEO Pack, WP Comment Sorter, Google XML Sitemaps, en niet te vergeten het krachtige en gebruiksvriendelijke cFormsII.

Nog niet zichtbaar op de site is NextGEN Gallery, een fantastische plugin om WordPress-websites uit te breiden met diashows.

Dankzij een zelfgeschreven conversieprogramma is het gelukt om het gastenboek van de oude website naar WordPress om te zetten.

Het nieuwe ontwerp zal op het eerste gezicht niet sensationeel ogen, maar is niettemin het resultaat van langdurig brainstormen, eindeloos bijschaven en jarenlang klantencontact. Allereerst moest de website als geheel een zonnige en kleurrijke uitstraling hebben, die bezoekers meteen in vakantiestemming brengt. In de nieuwe kleurstelling zijn de oude kleuren, de Intertrek-huisstijl en de brochure van vorig jaar verwerkt.

Verder is veel aandacht besteed aan de presentatie van elke wandelreis. De belangrijkste kenmerken (bezienswaardigheden, type reis, prijs, vertrekdata, karakteristieke beelden) moesten in één oogopslag te zien zijn. Op basis van deze eerste indruk kan de bezoeker snel een keuze maken: uitgebreide reisinfo opvragen, meer foto’s bekijken, de pagina printen, de reis boeken, of contact opnemen met Intertrek (voorbeeld). Over elke knop is nagedacht.

Een bijkomend nieuwtje is de mogelijkheid om elke bestemming te bekijken via Google Maps. Bij een groot deel van de reizen is een kaartje toegevoegd in de rechterkolom.

Bij de technische realisatie van de site is zoveel mogelijk rekening gehouden met algemeen geldende webstandaarden. Toch hebben we na lang beraad een concessie gedaan: het gebruik van Javascript was noodzakelijk om formulieren in popupvensters te openen en om reispagina’s overzichtelijker en compacter te houden met behulp van tabjes.

Laterna heeft de site daarom van de grond af aan opnieuw gebouwd met HTML en CSS, en het resultaat overgezet naar WordPress. Net als bij Lopende Zaken is hard gewerkt om de site ook perfect te krijgen in de belangrijkste Mac-browsers, Safari en Firefox. Een belangrijk hulpmiddel daarvoor is BrowserCam, een betaalde dienst die je site laat zien op elk gewenst platform, in elke gewenste browser en in elke gangbare beeldschermresolutie.

Voor technisch onderlegde lezers volgen hier enkele browserproblemen waarmee ik te maken kreeg:

• Op sommige pagina’s rouleert de foto linksboven met een overvloei-effect. Daarvoor had ik in eerste instantie een Flash-animatie gebruikt, gemaakt met het handige FlashSlider. Dit bleek echter in Firefox een onoplosbaar probleem op te leveren: als je met behulp van layers een element bovenop een Flash-animatie plaatst – in dit geval de kop martijndegroot.communicatie – dan verdwijnt dat element in Firefox steevast ónder de animatie.
  De oplossing: de Flash-animatie vervangen door een stuk Javascript, de Ultimate Fade-in slideshow. Dit op zich voortreffelijke script leverde weer een ander, heel curieus browserprobleem op in Safari (bij elke fotowisseling wordt de z-index van de foto 1 opgehoogd, waardoor de kop na zekere tijd alsnog verdwijnt), maar die waren op te lossen door de kop martijndegroot.communicatie een hele hoge z-index te geven.
• Ook de horizontale navigatiebalk leverde problemen op in Safari: de witte onderkopjes verschenen niet als je met je muis over de cijfers 1.0 t/m 4.0 bewoog. Na een paar uur puzzelen de oorzaak gevonden: in Safari blijk je met Javascript wel de CSS-eigenschappen van een gegeven blok te kunnen manipuleren, maar niet als die eigenschappen geërfd zijn van een groter blok, de zogeheten parent.
• De broodtekst liet weer een bug in Internet Explorer zien: bij cursieve teksten verschoof de rechtermarge naar rechts. Dit probleem en de oplossing worden beschreven op Positioniseverything.net. Opgelost met een extra CSS-regel overflow: hidden.
• Nog een overflow-probleem in de lichtkrant-achtige regels onder de broodtekst. Het CSS-kenmerk overflow: hidden blijkt in de meeste browsers niet te werken als de tekst op nowrap staat en ook nog relatief wordt gepositioneerd. Met dank aan mailinglijst WebProf vond ik een ‘hack’ voor Internet Explorer, maar in Opera (Windows) en Safari (Mac) bleef het probleem bestaan. De enige uitweg: deze regels links en rechts handmatig afkappen. Niet bijster elegant, maar als tijd en budget op zijn, dan is een pragmatische oplossing beter dan helemaal geen oplossing.

Ter vergelijking: de oude Flash-website staat voorlopig nog even hier geparkeerd.

Bijna iedereen die websites ontwerpt, ontwikkelt in de loop der jaren een duidelijk herkenbaar stijltje. Zo hou ik zelf van strak en stijlvol, zonder veel ornamenten. Maar soms is het heel leerzaam om eens over de grenzen van je eigen stijl heen te kijken.

Lopende Zaken, een projectbureau op het gebied van recreatie, geschiedenis en culturele planologie, schakelde Laterna in voor het ontwerpen en bouwen van een nieuwe site. Bij de briefing bleek de opdrachtgever sterke wensen te hebben: de vormgeving moest kleurrijk zijn, veel beeldmateriaal bevatten en passie voor cartografie uitstralen.

Laterna maakte vijf totaal uiteenlopende ontwerpschetsen, waaruit Lopende Zaken een uitkoos als basis voor de website. Het gekozen ontwerp werd verder visueel uitgewerkt, waarbij een deel van de vele ideeën en suggesties van de opdrachtgever een plaats kreeg. De spil van de site wordt gevormd door het enorme portfolio van het bureau, dat zowel tekstueel (knop Projecten) als visueel (klik op het kaartje in het linkerkader) kan worden bekeken.

Veel aandacht is besteed aan browseronafhankelijkheid. Op verzoek van de opdrachtgever heb ik de site ook geschikt gemaakt voor de Safari-browser op de Mac. Dat bleek geen triviale eis, maar dankzij extra scripting en veel geduld is dat uiteindelijk toch gelukt.

Uiteindelijk hebben we gekozen voor betalen via de telefonische betaaldienst Mollie, die bijvoorbeeld ook gebruikt wordt door Nieuwsbank.nl. De betaling is in hooguit twee minuten geregeld: je belt een 0900-nummer, je toetst een zescijferige code in en je krijgt meteen toegang tot de route, die je vervolgens kunt uitprinten. De kosten worden automatisch verrekend via je telefoonrekening. Je hebt geen creditcard of abonnement nodig en de transactie verloopt geheel anoniem.

Een ideale betaalmethode? De praktijk zal het leren.

Santiago.nl, de website van het Genootschap van Sint Jacob, is deze week vernieuwd. Weliswaar is de layout niet veranderd, maar de ‘achterkant’ van de site is daarentegen wel ingrijpend verbouwd. Laterna heeft namelijk met behulp van Movable Type deze site van een contentmanagementsysteem voorzien. Hierdoor worden de redacteuren en andere vrijwilligers van deze pelgrimsvereniging minder afhankelijk van de twee webmasters en kunnen ze ook zelf nieuwe content en updates invoeren.

Daarnaast heeft Laterna het afgelopen jaar het Genootschap veelvuldig geadviseerd over de verdere ontwikkeling van de site, het beheer en internetontwikkelingen in het algemeen. In een later stadium worden de vormgeving en de verdere technische uitbouw onder handen genomen.

Ik schreef dat je WordPress niet alleen voor weblogs kunt gebruiken, maar ook als een simpel contentmanagementsysteem voor een bescheiden zakelijke website. Is het inderdaad zo simpel, vroeg die opdrachtgever zich af?

Mijn eerste test is te bekijken op www.klog.nl. Het enige wat ik nog niet voor elkaar heb, is de volgorde van de statische pagina’s rechts. Waarschijnlijk zie ik hierbij iets heel simpels over het hoofd.

De volgende stap: een theme downloaden en kijken hoe deze testsite met voornamelijk statische pagina’s er dan uit komt te zien. Wordt vervolgd!

Het ontwerp maakte Remco zelf in Photoshop, Laterna paste het aan voor de meest gangbare beeldschermresoluties en vertaalde het naar browseronafhankelijke HTML en CSS. De fotogalerijen worden automatisch gegenereerd door een PHP-script, waardoor het eenvoudig is om bestaande galerijen aan te passen en nieuwe aan te maken.

Hoewel de schermafdruk anders doet vermoeden, is de hele site zonder ‘frames’ gebouwd. Dit zorgt voor een betere opname in Google en maakt het mogelijk om te dieplinken naar afzonderlijke galerijen. Verder is het e-mailadres op de contactpagina onleesbaar gemaakt voor ‘spambots’.

De site voldoet aan de officiële HTML-standaard en ook aan bijna alle overheidsrichtlijnen, op punt R-pd.8.18 na (e-mailadres coderen).

» www.remcovanblokland.nl