De uitdaging
Maak een html-structuur en een stylesheet met als uitgangspunt:
- Screenshots van Firefox op ware grootte: 1024*768px en 1280*1024px (screenshots van bv. Internet Explorer 7 laten een ander beeld zien).
- Reserve-kopie originele homepage: homepage.htm
Makkes
Het origineel kent de volgende onvolkomenheden:
- Algemeen:
Geen valid html, geen valid css, voldoet niet aan toegankelijkheidsrichtlijnen WCAG, voldoet niet aan Quickscan Webrichtlijnen (score 36/47), aanzienlijke img-bestandsgrootte (460kB = 1,5 minuut voor een telefoon-modem). - Layout:
De staande figuur komt niet kompleet niet ten voeten uit in beeld bij het openen van de pagina in een in venster kleiner dan 1024px hoog.
De staande figuur verdwijnt achter de header bij vensters kleiner dan 1024px breed.
De zijkolommen hebben ongelijke hoogtes, en lopen niet door tot onderaan de pagina. - Browsers:
Het menu is niet klikbaar in Firefox, Chrome, Opera en Safari. Het kruimelpad in deze browsers evenmin.
In Internet Explorer 7 en in IE8 heeft de linkerkolom geen transparantie (in IE9 en andere browsers wel).
In Internet Explorer is het voor de bezoeker niet mogelijk om alleen het letterformaat te vergroten. Bij inzoomen voor groter letterformaat in Firefox verdwijnt het menu achter de figuur rechtsboven.
Bedoeling
Het formaat van de staande Marjanne moet zich aanpassen aan de schermgrootte, en altijd zo veel mogelijk aan de linkerkant staan. Bij overlapping door het middenstuk moet dit middenstuk semi-transparant zijn, zodat de figuur nog zichbaar is. Beide zijkolommen moeten doorlopen tot onderaan de pagina. Het menu is een dropdown-menu met één niveau submenu.
Program van eisen
Verder in het program van eisen:
- Geschikt voor alle resoluties, gecentreerd, 990px breed.
- Geschikt voor "alle browsers" = tenminste Firefox, Chrome, Opera, Safari, en Internet Explorer 7, 8 en 9.
- Geschikt voor vergroting van het letterformaat door de bezoeker (zonder zoom van het totaal).
- Zo klein mogelijke bestanden (aan html, css en images) voor snel inladen van de pagina op het scherm.
- In principe niet afhankelijk van javascript.
- Doctype: XHTML1.0 strict (beste standaard).
- Valid HTML en valid CSS2.1.
- Toegankelijk, gebruiksvriendelijk en Google-vriendelijk.
- Toegankelijk volgens de WCAG 2.0 (Web Content Accessibility Guidelines, prioriteit 1+2+3), test met "Cynthia Says".
- 47/47 score op Quickscan Webrichtijnen.
Program van wensen
Niet perse noodzakelijk, maar wel zo mooi:
- Als extra sport erbij: als het maar enigszins kan, géén Conditional Comments gebruiken om één of meer versies van Internet Explorer de standaarden te laten volgen en hetzelfde te laten doen als wat andere browsers al vanzelf doen.
Edit: no tables!
Helemaal vergeten bij het program van eisen te zetten, omdat het bij mij tot de vanzelfsprekendheden hoort:
- Geen gebruik van tabellen voor de opmaak.