Schermgrootte onafhankelijk ontwerpen.

[Enjoydotcom]

Afgelopen week heb ik mijn site een opfrisbeurt gegeven.
www.pipplycards.com

De enige feedback die ik tot nu toe kreeg was:
- tekst is moeilijk te lezen> Oke, dan moet ik wat doen aan de achtergrond kleuren.
en
- de formaten klopen niet op mijn scherm.
Welke maat haar scherm had is mij niet bekend, Twitter feedback is fijn maar onvolledig en vrijblijvend. Hoe maak ik de site zo, zodat het formaat van een scherm / de gebruikte browser er niet toe doet?

Wat ik zelf heb gemerkt, is dat op de explorer op mijn werk, er lelijke blauwe lijntjes staan. Deze dacht ik verwijderd te hebben door de border op "0" te zetten. Mijn eigen explorer is het weg, maar op mijn werk nog niet. Uiteraard heb ik daar al het geheugen gewist.
Hoe krijg ik die vakjes weg?

 

[csshunter]

Hoi Enjoydotcom,
Ja, het contrast tussen achtergrond en voorgrond is veel te klein. Hierbij spelen ook een rol: de ene monitor is de andere niet (verschil van kwaliteit, verschil van setting, enz.), de opstelling van het beeldscherm (tegenover het raam, of licht in de rug, enz.), de tijd van de dag (daglicht / lamplicht), en natuurlijk het gezichtsvermogen van de bezoeker (bv. ouderen kunnen veel slechter contrast onderscheiden).
Het huidige verschil in helderheid tussen achtergrond en tekst is 39. De drempelwaarde is: minstens een verschil van 125. - Het huidige verschil in kleur is 120; drempelwaarde: 500. Zie: Color Contrast Analyser.
Om toegankelijk te zijn voor iedereen (ook opa's en oma's!), moet bij witte letters de achtergrond ongeveer in deze donkerte zijn:

= = = = = = = = = =

Hoe maak ik de site zo, zodat het formaat van een scherm / de gebruikte browser er niet toe doet?

Ik zou rekening houden met een beeldscherm van 1024*678px, dat geeft op dit moment te zien:

Het links-rechts moeten scrollen wordt vooral veroorzaakt door het menu. Als je de maximale breedte van alles 980px maakt, kan het er nog net op (wat extra ruimte is nodig voor de scrollbalk aan de rechterkant).
Hier kan ook het background-image op afgestemd worden. Dat mag wel breder zijn, maar het horizontale middenstuk moet goed ogen op 1024*768px. Vervolgens kan je dat met css horizontaal centreren, dan gaat het ook goed bij andere resoluties:

body {
    background-image: url(images/Achtergrond.png) 50% 0;
    }

= = = = = = = = = =

... explorer ... lelijke blauwe lijntjes ... Hoe krijg ik die vakjes weg?

Op IE7 zie ik ze niet. Welke IE-versie vertoont het, en waar zitten die blauwe lijntjes?

= = = = = = = = = =
Hé, de stylesheet-link verwijst naar Joyce op mijn C-schijf (aangenaam kennis te maken ), i.p.v. naar een bestand op de server!

<link href="file:///C|/Users/Joyce/Pipply site/oneColElsCtr.css" rel="stylesheet" type="text/css" />

Zou daar al het ongerief in zitten?

Met vriendelijke groet,
CSShunter