Vernieuwde website Martijn de Groot Communicatie

Communicatieadviseur Martijn de Groot heeft al sinds 2005 een eigen website, ontworpen door SAFvisuals. Deze prachtige maar volledig in Flash gebouwde site bleek echter slecht vindbaar in Google. Ook wilde Martijn de site zelf kunnen onderhouden.

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.