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.

Hoewel de Firefox-hype afgelopen jaar wat minder is geworden en ook deze browser is in het nieuws gekomen door veiligheidsproblemen, blijkt Firefox nog steeds veiliger dan Internet Explorer. In beide browsers komen weliswaar ongeveer evenveel lekken voor, maar bij Firefox worden ze veel sneller gerepareerd:

De ontwikkelaars van Mozilla hadden – gemeten over 26 lekken – gemiddeld twee dagen nodig om een fout op te lossen. Bij Microsoft duurde het gemiddeld tien dagen, gemeten over vijftien lekken.

Aldus de wekelijkse nieuwsbrief van Computer!Totaal.