Ik heb hoegenaamd niet de pretentie te zeggen dat ik een ontwerper ben, maar ik weet wel wat ik lelijk vind en wat ik mooi vind. En ik ben te trots om een prefabtemplate te nemen, zelfs al is die misschien wel vele keren mooier dan wat ik ook zelf kan maken.
Dat zijn zowat de parameters waarbinnen ik de layout van mijn weblog moeizaam telkens opnieuw probeer een stamp te geven: zeer bewust van wat goed is, zeer bewust dat wat ik maak niét het beste is dat kan gemaakt worden, en daar zwaar onder lijdend. Euh, relatief zwaar dus, ‘t is niet alsof ik er nachten van wakker lig.
Commentaar als dat van Thomas en dat van Erlend komt dan ook extra hard aan: ja, ik wéét dat ik geen Khoi Vinh ben, hoe graag ik dat ook zou zijn.
…maar omdat Thomas er om vroeg, al betwijfel ik dat iemand er van wakker ligt: hoe ik de verhoudingen (ahem) van deze layout (ahem) bekomen heb.
1. Probleemstelling
- Schermgrootte 1024×768
- Ads van 160 pixel breed die ik buiten de normale inhoud wil houden
- Tekstkolom die ca. 540 pixel breed moet zijn wegens veel belden op 500 of meer pixels in archief.
- Geen enkel element, behalve de header, heeft een vaste hoogte.
2. Wiskunde
Vertrekkend van 1024 pixels breed, eerst alle pixels eraf schaven die er hoedanook af moeten (gegeven dat ik de ads er helemaal buiten wil houden dus).
- browser chrome = ca. 34 pixels, rest 990 pixels
- 15 pixels links en rechts voor ruimte en om browser chrome verschillen op te vangen, rest 960 pixels
- 160 pixels ads + 10 pixels ademruimte, rest 780 pixels
Die 780 pixels zijn onder te verdelen in twee kolommen. De realiteit van vijf jaar weblog is dat er niets in het archief ook maar enige verhouding aanhoudt, en vooral: dat ik niet van plan ben om Flickr-foto’s telkens een andere breedte dan 500 pixels te geven.
En dus is de verhouding geworden 9/13 op 4/13: 540 pixels voor de tekst en 240 pixels voor de commentaren.
3. Voilà
Ik zou kunnen gekozen hebben voor een rationele verhouding, in veelvouden van iets, of met gulden snedes of zo, maar nee. Dit was gewoon wat er over bleef.
Ik zou kunnen, in de commentaren bijvoorbeeld, nog iets creatiefs doen met verhoudingen, maar die gravatars van 80 op 80 pixels werken tegen.
*
* *
Euh, maar als één van die stuurlui aan wal een layout willen maken gegeven de genoemde beperkingen, en in ruil daarvoor eeuwige dank en name dropping en vette “gemaakt door”-boodschappen links en rechts wil zien: houd u niet in hé. Houd u niet in.
Reacties
10 reacties op “Grid”
layout op zich vind ik wel leuk, maar je zou je tweede kolom moeten laten doorlopen tot onder, nu is er een heel stuk grijs naast je grote layout, en op zich is dat wel lelijk (ik bedoel dus niet de reclame, maar die met de disclaimer in he)
Je zoekt een nieuwe look, maar in essentie zie ik maar 1 wezenlijke wijziging: 3 kolommen i.p.v. 2, met links de posts (zoals vroeger), en de sidebar nu gesplitst in 2 (een sidebar met het één en ander en dan een derde kolom voor advertenties). Heb je al eens de volgorde van de kolommen gewijzigd ? Bvb. Links een sidebar, dan centraal de posts en rechts advertenties met eventueel een paar zaken zoals een colophon e.d. Indien je dan ook de grijze kleur wit maakt, dan geeft dit een totaal ander zicht.
Of m.a.w. ik zou eerst wat meer experimenteren met de schikking en dan pas kleuren, typografie etc. kiezen.
Allemaal mooi, maar door die ads buiten het “main content” vak te plaatsen, wordt dat centraal gedeelte niet mooi gecentreerd. Persoonlijk zou ik het dus cleaner (en rustiger) vinden als het hoofdvak gecentreerd werd, en de ads daar nog rechts van ..
En verder: de gravatars vallen buiten de kolom (langs links) en extreem lange links vallen eraf (langs rechts).
Maar dat zijn details natuurlijk. Overal design = ok 🙂
@konijn: nah, als ik centreer, dan vallen de ads buiten de pagina, en daar zijn de adverteerders niet content mee.
De gravatars: tijdelijk probleem, ik was een aantal stijlen voor
ulenolenliaan het beprutsen.Lange links: tja. Wat moet ik daar eigenlijk mee doen? Een overflow:hidden op zetten? Of een geprogrammeerde oplossing misschien? Ik denk er eens over na.
Ah, inderdaad. Op 1024×768 zal het nu mooi zijn. Maar voor mensen die zoals ik op 1600 x 1200 zitten, ziet het er een beetje onevenwichtig uit ..
Maar dat is uiteraard niets om rekening mee te houden 🙂
Ik voel uw pijn.
voel de mijne op 1920*1200 :p
ja maar ja maar, ik heb niks gezegd over uwe ingenieuze grid hé 🙂 Het is vooral de header, de die clean look niet altijd ten goede komt.
Misschien de foto’s in de header omzetten naar grijswaarden met een sterk contrast?
[…] 9.https://blog.zog.org/2005/10/naam-in-japanse-tek…31 10.https://blog.zog.org30 11.https://blog.zog.org/2007/06/grid.html25 12.blockedReferrer17 13.https://blog.zog.org/2007/06/grote-werken.html16 […]
ik vind em ‘schuune’, stukken mooier dan vorige keer.
hier zijn er nog wat stylingsfoutjes op safari, maar bin ik lees meestal in de reader, so who cares.
ik hou van eenvoud. en eigen stijl 🙂 en keischoon lettertype. simpel maar mooi.