ImQuSo : Informatie over dit web ontwerp.

www.imquso.nl

Informatie over dit web ontwerp.

Dit webdesign verantwoord

Programma code

De website is geschreven in PHP. De teksten (links en rechts) staan als setje in een bestand (de pagina die opgevraagd word) om leesbare URLs te hebben. B.v. www.imquso.nl/webdesign.php Dat vinden zoekmachines plezierig.
De algemene functies voor html generatie staan in een centraal bestand en er is nog een (taal afhankelijk) configuratie bestand dat de relaties tusen de bestanden, bladzijden, hoodstukken, etc, definieerd.
Tijdens de html generatie wordt de template opgebouwd en de algemene teksten in de correcte taal getoond.
Verder is er nog PHP code die vanuit het configuratie bestand voor zoekmachines en 'crawlers' index/tree bestanden genereerd in diverse varianten.

Over dit web design

Het idee voor dit web design, een open geslagen boek, zat al wat langer in mijn hoofd maar was nog niet uitgewerkt. Maar nu er steeds meer breedbeeldschermen komen was het een optie. Maar de schaalbaarheid van de web paginas (tbv normale gebruikers) moest ten alle tijden gewaarborgd blijven. Ook het vergoten of verkleinen van de letters op het scherm moet geen (of beperkt) layout conflicten opleveren.
Een bladerend boek met flash was het idee, maar de standaard en commercieele flash componenten konden niet de functionaliteit leveren die nodig had vandaar deze gewone html implementatie.

De achtergrond

Met CCS de twee tekst kolommen/bladzijde maken met een schaalbare hoogte en breedte (fluid) was mogelijk maar het probleem van ongelijke bladzijde lengte kreeg ik niet netjes opgelost.
Vandaar maar gekozen voor een tabel met vijf kolommen en drie rijen, waarbij sommige hoogtes en breedtes Vast zijn terwijl andere Schaalbaar zijn.

  +-V-+---S---+-V-+---S---+-V-+
  V   |       |   |       |   |
  +---+-------+---+-------+---+
  |   | linker|   |rechter|   |
  S   | zijde |   | zijde |   |
  |   | inhoud|   |inhoud |   |
  +---+-------+---+-------+---+
  V   |       |   |       |   |
  +---+-------+---+-------+---+

De linker en rechter bladzijde inhoud moeten dus schaalbaar zijn terwijl de andere delen zo stabiel mogelijk moeten blijven.
Het boek is opgebouwd uit een tabel met achtergrond plaatjes. Vaste hoogte en breedte wordt afgedwongen door een dummy pixel plaatje van gedefinieerde breedte of hoogte. Er is bewust gekozen voor tabel achtergrond plaatjes omdat deze niet geprint worden en ook omdat alle tabel cellen een inhoud moeten kunnen hebben zoals b.v. tekst, tabs, bladnummer, etc.

De tabs

De tabs zijn ook in tabellen uitgevoerd omdat alle CSS varianten minimaal een beperking hadden in varianten (normaal, aanwijzen, geselecteerd) of schaalbaarheid. De tab verdeling links of rechts is te bepalen uit de volgorde van de bladzijdes en door de tabs (intern) te nummeren kun je ze ook een number afhankelijke uitwijken meegeven waardoor de indruk wordt gewekt dat ze ook op andere bladzijdes in het boek zitten.
De linker en rechter zij tabs blijven op gelijke hoogte bij het bladeren van het boek. De boven tabs worden gespliegeld tijdens het bladeren om het natuurlijk effect na te bootsen. De voorkant en achterkant van alle tabs hebben een andere kleur.

Inhoudsopgave

De inhoudsopgave, vorige bladzijde, volgende bladzijde en bladnummering wordt afgeleid van een configuratie bestand waarin o.a. de pagina/bladzijde/hoofdstuk relatie is vastgelegd.
De layout van de inhoudsopgave is CSS en van het web gehaald.

Twee Talen

Elke pagina is in twee talen beschikbaar waarvan de inhoud in een apart bron bestand staat door alle 3 designs wordt gebruikt.
Intern worden dezelfde (soms design specifieke) functies aangeroepen maar met een taal indicatie om de algemene teksten in de goede taal te tonen. Door de gekozen oplossing is de nieuws inhoud is maar in een taal. (En ik wenste geen twee bestanden te maken).

Bladeren in het boek

Het effect van bladeren in het boek wordt verkregen door de zijkanten van het boek breder of smaller te maken afhankelijk van de bladzijden die getoond wordt. Hoge bladnummers hebben een smalle rechterkant, lage bladnummers hebben een smalle linkerkant.
Door de tabs logisch te laten inspringen wordt het bladeren nog meer geaccentueerd. Verder worden ook de boven en onderkant van het boek aangepast evenals de vouw in het midden.
Uiteraard dragen de bladnummers, de inhoudsopgave op blad 1 en de volgende-, vorige-pagina optie in de paginahoeken hier ook aan bij.

Navigatie

Het hoofdmenu is natuurlijk de inhoudsopgave. maar aan de linker en rechter zijkant worden ook tabs getoond met de hoofd menu keuzes (hoofdstukken).
Elke linker bladzijde heeft in de linksonderhoek en linksbovenhoek een vorige bladzijde optie.
Idem voor de rechter bladzijde maar dan in de rechtsonderhoek en rechtsbovenhoek met volgende bladzijde optie.
Uiteraard worden deze opties alleen getoond indien ze toepasbaar zijn. B.v bladzijde 1 heeft geen vorige pagina.
De paginanummers zijn ook een link naar additionele informatie.
Links onder in het venster is er een link naar de algemene website voorwaarden. Rechtonder in het venster is er een link naar dit design en onze famiie website.
Links boven in het venster is er via het afdrukker icoontje een link naar de textonly design.
Links boven in het venster is er via het luidspreker icoontje een directe link naar de echte inhoud ban de pagina.

Gerelateerde webdesigns

Het Design for mobile apparatuur

Personal Information Managers, telefoons en andere mobiele apparatuur wordt steeds meer gebruikt om web informatie te benaderen. Veel van deze apparaten hebben een klein scherm, een beperkt geheugen en een trage verbinding om maar een paar beperkingen te noemen.
Daarom hebben steeds meer bedrijven een speciaal GSM/mobile design waar men veel consessies doet aan de opmaak om zo efficient mogelijk de website informatie beschikaar te stellen voor dit soort gebruikers.
De webserver herkent een mobiel apparaat en stuurt deze door naar de speciale design(website).
Hier vind je de ImQuSO GSM Design of klik op het GSM pictogram en uiteraard is deze ook tweetalig.

Het Textonly design

Special voor internet verkenners die geen plaatjes ondersteunen (of deze optie is uitgeschakeld bij normale internet verkenners), is er een design dat geen plaatjes bevat en dus supersnel laad.
De inhoud is identiek aan het boek design.

Dit textonly webdesign is geoptimaliseerd voor mensen met een visuele beperking die een spraak functie gebruiken. Er is een link om alle menu's over te slaan (hebben alle drie de designs) maar bevat ook weinig 'overbodige informatie'.

Dit webdesign is ook geschikt voor mensen met een kleurenblindheid en is getest met programma's om de leesbaarheid voor diverse vormen van kleurenblindheid te valideren en resultaten zijn positief. Voor de meeste mensen met een gangbare vorm van kleurenblindheid bied deze website voldoende onderscheidend vermogen.
Ook deze inhoud is identiek aan het boek design.
Hier vind je de ImQuSO Text Only Design of klik op het afdrukker pictogram en uiteraard is deze ook tweetalig.

Website validatie

- 15 -

- 16 -

Webdesign by: Peter van de Kerkhof