Webontwerp

Techniek

Ongemerkt was ik in het voorbereidingstraject uitgekomen op de te gebruiken techniek. Ik had ooit, jaren geleden, eerder een internetsite gehad. Deze had ik toentertijd gebouwd en gepubliceerd met Frontpage. Eigenlijk zonder verder nadenken, kocht ik een nieuwe versie van dat programma.

In hoog tempo produceerde ik pagina na pagina, schreef mijn teksten en pastte verschillende opmaakkenmerken toe. Ik controleerde geregeld in Internet Explorer, mijn browser, hoe mijn pagina's er uit kwamen te zien.

Dit gedeelte van het maakproces was zeer creatief. Ik werd niet belemmerd door (gebrek aan) kennis en kon me volledig uitleven. De site groeide heel snel tot enkele tientallen, optisch aantrekkelijke, pagina's. De onderlinge samenhang was gewaarborgd door gebruik te maken van een nagenoeg zichzelf bouwend navigatie menu, dat ik had opgenomen in een frameset, gescheiden van de inhoudelijke pagina's. Met behulp van JavaScriptjes had ik wat optische effecten op mijn menu's toegepast. Ik was tevreden met het resultaat.

Toegankelijkheid

Ik bedacht me wel dat er meer en andere browsers waren dan alleen Internet Explorer. Op enig moment tijdens het ontwikkelen van mijn site heb ik er verschillende gedownload. Ondermeer Netscape v7.1, Opera v7.11 en Firebird v0.6. Het werd tijd om mijn product eens te bekijken met die browsers.

OH! HELP! Wat een gruwel! Wat een volslagen puinhoop toonde die browsers me. Mijn God! Wat had ik verkeerd gedaan?

Ik was gestuit op het aspect 'toegankelijkheid' van mijn pagina's in wording. Toegankelijk betreft het je eigen maken van een (wat mij betreft) heel nieuw paradigma op publicaties en publiceren. Net als heel veel mensen bestaat het grootste deel van de publicaties, waar ik me mee geconfronteerd zie, uit publicaties op papier. Papier heeft de aangename gewoonte om een vast formaat te hebben en heel geduldig allerlei inkt op exact de plaats op te nemen waar het gewenst is en dat dan ook niet meer te veranderen. Zo is zeker dat iedereen die het papier onder ogen krijgt exact hetzelfde ziet als ieder ander.

Bij het internet gaat deze vlieger niet op. Het bestaan van verschillende type schermen, schermgrootte, verschillende grafische browsers, verschillende tekstbrowsers en zelfs browsers die pagina's voorlezen of vertalen naar braille, betekent dat je bij het schrijven en vormgeven voor het net een heel ander uitgangspunt moet aanhouden, dan voor publiceren op papier. Eerlijk gezegd heb je er geen enkel idee van hoe jouw pagina's bij je bezoekers aan gaan komen.

Sta maar eens stil bij de verschillen tussen het scherm van een gewone lap-top, met een breedte van 1.024 px, en het inimini schermpje van een PDA met misschien maar 220px breedte beschikbaar.

Het beste uitgangspunt om publicaties voor het internet goed te maken, is het loslaten van opmaak tijdens het schrijven en bouwen er van. Zonder enige opmaakkenmerken (tekstbrowsers en voorlees/braillebrowsers) moet de pagina nog steeds eenvoudig te begrijpen zijn, prima toegankelijk voor een geïnteresseerde bezoeker. Opmaak is er voor de leut. Het is geen doel op zich. De inhoud moet zichzelf kunnen dragen.

In november 2004 heb ik een artikel geschreven over Accessibility en Usability, Toegankelijkheid en Bruikbaarheid, waar ik uitvoerig op dit onderwerp inga.

Scheiden van inhoud, structuur en opmaak

Naarstig ging ik op zoek naar methoden om mijn pagina's in alle browsers eenzelfde uiterlijk mee te kunnen geven. Ik werd daarin uiteraard teleurgesteld. Dat is namelijk volstrekt onmogelijk. Neem alleen al het verschil tussen het uiterlijk van deze site in Opera v7.11 en een tekstbrowser zoals Lynx (gesimuleerd), zoals in de illustraties bij deze paragraaf wordt aangetoond. Als je Internet Explorer gebruikt als browser, is de kans heel groot dat je nu nog weer een ander beeld hebt op jouw scherm, dan in deze twee plaatjes is gevat.

De teleurstelling maakte al gauw plaats voor een overweldigend gevoel creatieve mogelijkheden te willen exploreren die wel mogelijk waren. Het betekende echter wel, dat ik FrontPage weer moest verlaten. Ik zou me meer en meer moeten verdiepen in de eigenlijke broncode van mijn pagina's om de gewenste effecten met de juiste mate van beheersing toe te kunnen passen.

Cascading Style SheetsStylesheets

Bovendien was ik niet bereid om mijn pagina's zomaar, kaal, aan te bieden aan mijn bezoekers. Het oog wil ook wat. Zeker moderne browsers kunnen de meest schitterende dingen laten zien, grafisch.

Ik stuitte op het begrip Cascading Style SheetsStylesheets, CSS. Dit betreft de techniek waarmee opmaakkenmerken van elementen in een pagina volstrekt gescheiden kunnen worden van de markup, van de structuur, van een html-pagina. In de meest perfecte toepassing zijn alle opmaakkenmerken opgenomen in één apart bestandje en wordt dat bestandje in iedere html-pagina aangeroepen, zodat de gedefinieerde stijlen in de gehele site, op iedere individuele, unieke pagina, steeds weer hetzelfde wordt toegepast.
Cascading verwijst naar de eigenschap van style sheetsstylesheets om steeds alle opmaakkenmerken die voor een element zijn gedefinieerd, ook als die uit verschillende bronnen moeten komen, in volgorde toe te passen op dat element.

Het goed gebruikmaken van een external style sheet leidt er toe, dat de codes daarvan op één plaats verzameld zijn. Enerzijds is dat in het voordeel van de bezoeker van de site. De style sheet hoeft voor alle pagina's die in een site zijn opgenomen maar één maal te worden gedownload. Omdat de opmaakkenmerken uit de pagina's zelf zijn verwijderd, zijn de pagina's kleiner. Het scheelt dus dataverkeer en downloadtijd.
Anderzijds heeft het gebruiken van een style sheet voor de auteur het immense voordeel, dat het aanpassen van het uiterlijk van de site op één plaats kan gebeuren. Of een site nou ruim dertig of ruim drieduizen pagina's heeft. Één bestandje aanpassen en alle pagina's zijn tegelijk veranderd.

Zie bijvoorbeeld de pagina waarmee ik de geschiedenis van mijn site vastleg, door successieve stijlbladen die ik door de jaren heen heb gebruikt, over dezelfde pagina heen te laten leggen. Steeds is de paginainhoud en -structuur geheel dezelfde, en toch verandert het uiterlijk van de pagina met een simpele druk op de knop.

Hyper Text Markup Language

Langzamerhand drong ook tot me door, dat een goed begrip over HTML noodzakelijk was in relatie tot de toegankelijkheid. Met een doordacht gebruik van html kon ik mijn pagina's de juiste structuur meegeven.

Een doordachte structuur. Die bestaat er vooral uit dat de markup in de pagina's betekenisvol moet zijn. Het gebruiken van koppen en subkopjes brengt structuur aan. Het gebruiken van tabellen uitsluitend als een pagina tabular data bevat en niet om een pagina op te maken. Het logisch plaatsen van lijsten als menu's.

Ook het consequent gebruiken van de attributen alt en title bij ondermeer afbeeldingen en hyperlinks maakt deel uit van het opzetten van een doordachte structuur. Net als het doordacht, weloverwogen invullen van een paginatitel en van enkele van de vele META-tags.

Behalve de aparte pagina's over HTML en over CSS in deze sectie van mijn site, besteed ik ook aandacht aan paginastructuur en de semantiek van markup in een artikel dat ik in november 2004 schreef over deze onderwerpen onder de titel Eenvoud, over hoe doordacht en gestructureerd werken het makkelijk maakt voor alle partijen, ontwerper, bezoeker en zoekmachine tegelijk.

Scripts en Java

Tot slot is het heel goed nadenken over het al dan niet gebruiken van scripts, zoals JavaScript, of invoegtoepassingen, zoals Java Applets, een must. Er zijn browsers, die niet kunnen omgaan met scripts en invoegtoepassingen, en of gebruikers die het uitvoeren van scripts en Java door hun browser expliciet hebben uitgeschakeld. Het van scripts afhankelijk maken van het hoofdmenu van een site is bij nader inzien dan opeens niet zo'n heel prima idee meer.
Ook zie je nogal wat sites waarvan het navigatiemenu is opgebouwd uit talloze kleine Java Applets. Ook dit menu's zijn voor veel mensen (en ook voor de indexeerrobotjes van zoekmachines als Google onbruikbaar en het grootste gedeelte van een site die op het correct functioneren van deze Applets vertrouwt, blijft buiten bereik voor de lekenbezoeker.

Als scripts en Applets al worden gebruikt in een site, is het belangrijk om onmisbare functies van een site, zoals het navigatiemenu, niet afhankelijk te maken van het al dan niet client side kunnen uitvoeren van de instructies die in het script staan of van kleine invoegtoepassingen als Java Applets. Ik heb me niet meer verdiept in scriptgebruik, vooral omdat ik met een goede combinatie van HTML en CSS de visuele effecten die ik me wenste zonder problemen kon bereiken.

Server side Scripting is helemaal een aparte tak van sport, waar ik tot nu toe helemaal niet aan toe ben gekomen. Enerzijds is dat omdat ik het slechts incidenteel mis (bijvoorbeeld de functie 'include' zou ik best willen gebruiken). Anderzijds omdat ik mijn pagina's op dit moment bij een internetprovider heb ondergebracht, die server side scripting niet of slechts in zeer beperkte mate toestaat.

WYSIWYG

Ik begreep inmiddels dat WYSIWYG volstrekt niet kan, als het gaat om publiceren op het web en alle programma's die claimen een WYSIWYG- editor te zijn, liegen dat ze barsten.

Vergeet WYSIWYG. Als je WYSIWYG wenst, overweeg dan het uitgeven van een boek of publicaties op het internet uitsluitend met PDF, waarbij je voor lief neemt dat lang niet iedereen je pagina's zal kunnen vinden of, eenmaal gevonden, kan openen en bekijken.
Probeer niet langer om een complex programma onder de knie te krijgen. Leer HTML en CSS en vertrouw op je eigen intuïtie de dingen goed te kunnen, zelfstandig, onafhankelijk van enig duur pogramma.

Na enige weken dat ik de tijd had gehad me te verdiepen in de mogelijkheden die HTML in combinatie met CSS me gaf, liet ik FrontPage en het gebruik van JavaScripts definitief vallen. Ik concentreerde me op de techniek die onder HTML en CSS zat en ging zeer actief op zoek naar kennis. Alle kennis die ik vond, probeerde ik onmiddellijk toe te passen in mijn site, die ik van voren af aan opnieuw bouwde.