Home > kruimelpad

vorige 60 volgende

inhoud

Op weg naar het einde... inspectie!

Om ons tot de model-pagina te beperken is het twitterblok weer uitgezet.

Zo langzamerhand komt het eind in zicht, dus nu moet er nog eens zorgvuldig getest worden. We lopen de checklist langs om op alle slakken zout te leggen.

reset pagina en window-formaat

Resoluties

  • Deze lange pagina en de korte variant (test: schakel toelichting uit) doen het op alle resoluties, met of zonder javascript.
  • De staande figuur past zich volgens plan vanzelf aan aan de hoogte en breedte van het scherm, de kolommen zijn altijd even hoog, en de pagina loopt altijd door tot (minstens) de onderkant van het scherm. Bij gebruik van de rechter scrollbar (op/neer) is er geen overtollige ruimte onderaan de pagina.
  • Test bv. gewijzigd window (schakel ook steeds deze toelichting aan/uit voor het effect op korte pagina's):
    1024*768px (alleen testbaar bij hogere resoluties),
    1280*1024px (alleen testbaar bij hogere resoluties),
    minder hoogte (simulatie extra horizontale browser-toolbars),
    minder breedte (simulatie verticale browser-sidebar).
  • Zelfs op een schermformaat van 800*600px is de pagina nog prima bruikbaar! Er komt wel een horizontale scrollbar, maar deze is alleen nodig om de rechterkolom te zien. Of men naar de linker of de rechter zijkolom heeft gescrolld, maakt voor de inhoud in het midden niets uit. De inhoud is in beide gevallen leesbaar zonder l/R scrollen. Het menu is ook altijd volledig in beeld, en de header blijft mooi ogen. Bij L/R scrollen blijft de staande Marjanne altijd (semi-transparant) in beeld.
    Test hier: 800*600px resolutie.
  • Wat wel opvalt, is dat bij een resolutie van 1024*768px of minder de header en het menu samen zeker de helft van het scherm in beslag nemen, of nog meer. Je kunt nauwelijks iets van de inhoud lezen, of je moet al naar beneden scrollen voor de rest.

  • Voor het ToDo-lijstje: een minder hoge header maken voor lage resoluties, en deze d.m.v. javascript dan automatisch laten plaatsen.
    (Ook hier weer: uiterlijke verfraaiing, de pagina verliest geen functionaliteit als javascript uit mocht staan.)

Browsers

  • Getest en in orde bevonden op: Internet Explorer 7, Chrome, Firefox, Opera en Safari: alles werkt.
  • Volgens de online Netrenderer komt de opmaak ook in IE8 en IE9 goed uit de bus. De hover- en klik-functies kunnen daar niet getest worden: voor het ToDo-lijstje.
  • Soms geeft IE een flits bij het wisselen van pagina. Daar kan wat aan gedaan worden: ToDo!
  • Internet Explorer 6? IE6 wordt op dit moment nog maar door minder dan 2% van de surfers gebruikt. De staande figuur is er niet vanwege problemen van IE6 met absolute/relatieve/fixed positionering (maar de staande figuur kan gemist worden).
    Om dezelfde reden werkt het script voor de pagina-vulling niet (maar dat kan gemist worden). De semi-transparante png's zijn niet semi-transparant (daar zou een png-fix voor toegepast kunnen worden; zie ook overzicht png-fixen); maar dat kan gemist worden: het is niet erg omdat de staande figuur er toch niet is.
    De submenu's kunnen niet zonder meer uitklappen: daarvoor zou het "sfHover" javascript gebruikt kunnen worden als de hoofd-items niet naar een eigen pagina gaan (waarop de sub-items ook vermeld worden).
    Maar voor het overige: de layout blijft overeind en de pagina is ook in IE6 gewoon bruikbaar!
  • Pure tekst-browsers of voorleesbrowsers: in principe akkoord. Een aantal verbeteringen komen aan bod bij "Toegankelijkheid - WCAG" hieronder.

Letterformaat

  • Alle font-sizes zijn tot dusverre opgegeven in de relatieve maateenheid em, wat in elke browser opschalen door de bezoekers mogelijk maakt. De layout stort dan nietin elkaar.
  • NB: het gebruik van em in plaats van px moet doorgezet worden bij nadere vormgeving van de inhoud!
  • Een uitzondering vormt het Twitterblok. Hier zijn de letterformaten afkomstig van het geïmporteerde twitter-stylesheet "widget.css": deze zijn wèl in px opgegeven. Om dat te veranderen, zou diep ingegrepen moeten worden in de (ingewikkelde) twitter-styles, wat een aparte klus is en buiten het kader valt van dit paginamodel.

Bestandsgrootte / images

  • Voor de html-pagina, de css en de javascripts zijn de benodigde bestanden minimaal van omvang. De bestandsgrootte van de pagina heeft vooral te maken met het gebruik van de afbeeldingen.
  • Eerst moeten de images bekeken worden op hun uiterlijk en kwaliteit (en zo nodig bijgewerkt worden): om goed in de uiteindelijke opmaak te passen. ToDo!
  • Daarna moeten de images geoptimaliseerd worden: ook ToDo!

Javascript

  • Het eerste deel van het javascript zorgt ervoor dat de footer altijd onderaan het scherm komt te staan en de kolommen-achtergrond zo nodig wordt opgerekt. Het tweede deel verzorgt het mooi maken van het twitterblok.
  • Het script moet als laatste in de html-code gezet worden, d.w.z. na de <div id="rechtsboven"> (die in de opmaak over alles heen geplakt wordt) en vlak voor de </body></html> tags.
  • Het gebruikte javascript is "unobtrusive": het is geen voorwaarde en staat niet in de weg als javascript niet ingeschakeld staat.
  • NB-1:
    Attentiepunt is, dat er op de pagina's ook nog andere javascripts kunnen komen te staan, en de verschillende scripts elkaar niet in de weg mogen zitten. Het zal wel los lopen, maar voor de veiligheid toch altijd even testen als een ander script wordt toegevoegd.
  • NB-2:
    Met name geldt dat voor javascripts die ook eigen css binnenhalen (als extra ingevoegd css-bestand, of via techniek in het script zelf). De binnengehaalde css zou de pagina-css kunnen verstoren!
    Eventueel moeten van een externe site afgetapte css-bestanden niet direkt van aldaar gedownload worden, maar in gewijzigde vorm op de eigen server ondergebracht worden.
    Een alternatief kan soms zijn om de externe css via de eigen css of via eigen javascript te overrulen.
    Het laatste is toegepast voor het twitterblok: de geïmporteerde css is aangepast via zowel eigen javascript als eigen css.
  • Het javascript op de pagina moet nog naar een separaat .js-bestand: ToDo.

Toegankelijkheid - WCAG

  • De WCAG accessibility-richtlijnen zijn automatisch getest en in orde bevonden.
  • De automatische toetsen kunnen echter niet alles testen! Een deel moet handmatig getest worden, zoals bijvoorbeeld het kleurgebruik. De complete checklist komt tevoorschijn bij gebruik van de automatische "Cynthia Says" test.
  • Een test met uitgeschakeld css, met een pure tekst-browser (zie resultaat van: "Lynx Viewer") en met de voorlees-simulator "Fangs" (een Firefox add-on) laat zien dat de pagina-structuur verbeterd kan worden. De twee zijkolommen kunnen bijvoorbeeld een eigen (hidden) kopregel krijgen, want nu is niet duidelijk waar ze beginnen en eindigen. Er kan ook een op scherm verborgen navigatie-blokje komen, met bladwijzers naar de diverse pagina-onderdelen. ToDo!

HTML-code

  • Dit model is valid xhtml1.0 Strict. Attentiepunt: bij invoeren van de inhoud hoeft dit niet altijd zo te blijven!
  • NB-1:
    Als gebruik gemaakt wordt van externe links die in een nieuw tabblad moeten openen (via het attribuut target="_blank") is het bijvoorbeeld geen valid xhtml Strict meer, en moet gebruik gemaakt worden van het Doctype "Transitional" (zie ook Doctypes bij w3.org):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
  • NB-2:
    Ook via (externe) scripts ingevoerde elementen kunnen veroorzaken dat het geen valid xhtml Strict meer is.
  • De html-code kan her en der nog wat opgeschoond worden om ook later nog goed herkenbaar te zijn: ToDo!

CSS-code

  • Dit model is valid css2.1. Attentiepunt: bij invoeren van de inhoud hoeft dit niet altijd zo te blijven!
  • De aanvullende styling van onderdelen van linkerkolom, middenkolom en rechterkolom kan gemakkelijk plaatsvinden door de elementen of een nieuwe class of id te laten voorafgaan door de id van de betreffende kolom:
#linkerkolom p,
#rechterkolom p {
font-size: .9em;
}
#middenkolom p {
font-size: .95em;
}
#linkerkolom .omlijn {
border: 1px solid white;
}
enz.
  • NB:
    Als (via javascript) externe css-bestanden worden geïmporteerd, kunnen die gebreken vertonen. Deze altijd even checken op onregelmatigheden, en desnoods ingrijpen door er een eigen aanvullend stylesheet van te maken waarin e.e.a. is gecorrigeerd.
    Zie ook de opmerkingen hierboven bij javascript.
  • De css-code moet nog ondergebracht worden in een separaat stylesheet, dat in de html wordt aangehaakt. ToDo!

Webrichtlijnen

  • Dit model komt met een score 46/47 vrijwel ongeschonden door de Quickscan Webrichtlijnen.
  • Alleen moet nog een php-header met de charset toegevoegd worden: ToDo!

Nog iets vergeten?

  • Ja, een favicon mag natuurlijk niet ontbreken: ToDo!
  • Inhoud: spelling en tikfouten nalopen; ToDo!
  • Google-optimalisatie: ToDo!
  • Test-inhoud invoegen om te kijken wat er gaat gebeuren: ToDo!
  • Als er toch php-pagina's van gemaakt worden, kunnen de vaste pagina-onderdelen er met een php-include in gezet worden. Dan blijft er op de pagina's van de site in wezen alleen maar de in te vullen inhoud van de pagina over. ToDo!
  • Na elke wijziging blijven testen op valid css, valid html, WCAG en Webrichtlijnen: ToDo!

ToDo lijstje

Kleine header voor lage resoluties, plus bijbehorend javascriptje.
Real life testen in IE8 en IE9.
Flits bij pagina-wissel in IE wegwerken.
Images zo nodig bijwerken.
Images optimaliseren.
Toegankelijkheid en hidden navigatie verbeteren.
HTML-code opschonen.
CSS-code en javascript in apart stylesheet/js-bestand.
PHP-header met charset aanmaken.
Favicon maken en in de html zetten.
Spelling en tikfouten nalopen.
Google-optimalisatie.
Test-inhoud uitproberen.
PHP-includes voor menu en zijkolommen.
Na elke wijziging testen op css, html, WCAG en Webrichtlijnen.

Conclusie

Conclusie van deze inspectie: "bijna klaar" en toch nog veel te doen! :-)

vorige 60 volgende

[linkerkolom]
[vultekst]
[vultekst]
[vultekst]
[laatste kolomregel]
[rechterkolom]
[vultekst]
[vultekst]
[laatste kolomregel]