Dec-23: Ximaars Kolommetjes

Peter Petepel was doende met een nieuw WordPress-thema en in die discussie schoot me te binnen dat ik vroeger op mijn website een (in mijn ogen) mooie methode had bedacht, die nog altijd geen navolging heeft gevonden. Tenminste ik ken geen websites of weblogs die het zo doen. Een weblog met een zijkolom is niets nieuws en best handig. Daar zet je dingen in die op elke webpagina terug komen. Destijds deed ik dat met mijn website ook, maar toen nog met frames (hier een pagina uit het webarchief). Frames zijn inmiddels taboe, ook al kon je er veel mee.
Maar wat ik ook deed was de hoofdkolom verdelen in 2 kolommen om zo te zorgen dat je geen te lange regels zou krijgen. Kranten doen dat ook. Het leest echt waardeloos als ze het niet deden. Bij regellengtes van 60 karakters of meer is het prettiger als de text wordt opgedeeld in kolommen.
In dit stukje doe ik het dan ook om aan te geven hoe ik dat rond 2002 op mijn website aanpakte. Omdat de meeste beeldschermen nog immer breder zijn dan hoog is het niet handig om verhalen in kolommen door te laten lopen tot onderaan (zoals kranten doen). Je (of in elk geval ik) leest dan ongemerkt in de rechterkolom al een stuk mee. Daar bedacht ik de ‘vierkante’ kolommen voor. Dus iets van 10 regels links lezen, daarna 10 regels rechts lezen en dan daaronder weer 10 regels links enz. Toch werd dat niet goed begrepen en daarom bedacht ik een aangepaste versie met 10 regels links, 10 regels rechts, dan een paar regels over de volle breedte (liefst verkleind door een fotootje ernaast en dan weer 10 regels links en 10 regels rechts.
Ik maak geen WordPress- (of andere) thema’s, maar zo moeilijk is dit toch niet? Het lukt me zelfs hier bij de gratis WordPress.com. Of ben ik de enige die een hekel aan lange regels heeft?


Voor lettergroottes in Browsers (px) en Word (pt):

abcdgilmoswz01589 ABCDGILMOSWZ Arial xx-small
abcdgilmoswz01589 ABCDGILMOSWZ Arial 7pt
abcdgilmoswz01589 ABCDGILMOSWZ Arial 9px
.
abcdgilmoswz01589 ABCDGILMOSWZ Arial x-small
abcdgilmoswz01589 ABCDGILMOSWZ Arial 7.5pt
abcdgilmoswz01589 ABCDGILMOSWZ Arial 10px
.
abcdgilmoswz01589 ABCDGILMOSWZ Arial small
abcdgilmoswz01589 ABCDGILMOSWZ Arial 10pt
abcdgilmoswz01589 ABCDGILMOSWZ Arial 13px
.
abcdgilmoswz01589 ABCDGILMOSWZ Arial medium
abcdgilmoswz01589 ABCDGILMOSWZ Arial 12pt
abcdgilmoswz01589 ABCDGILMOSWZ Arial 16px
abcdgilmoswz01589 ABCDGILMOSWZ Times 16px
abcdgilmoswz01589 ABCDGILMOSWZ Trebuchet 16px
.
abcdgilmoswz01589 ABCDGILMOSWZ Arial large
abcdgilmoswz01589 ABCDGILMOSWZ Arial 13.3pt
abcdgilmoswz01589 ABCDGILMOSWZ Arial 18px
.
abcdgilmoswz01589 ABCDGILMOSWZ Arial x-large
abcdgilmoswz01589 ABCDGILMOSWZ Arial 18pt
abcdgilmoswz01589 ABCDGILMOSWZ Arial 24px
.
abcgilosw0159 ABCGILOSW Arial xx-large
abcgilosw0159 ABCGILOSW Arial 24pt
abcgilosw0159 ABCGILOSW Arial 32px

In browsers (HTML) worden letterhoogtes in pixel (px) gebruikt en in tekstverwerkers als Word of in Mailprogramma’s is point (pt, punt) gebruikelijk. 1.0pt is 1.33333px.

Verder gebruikt men ook procenten en em waarbij 100% gelijk is aan 1.0em . Deze zijn echter relatief ten opzichte van wat als standaard is ingesteld. Als de standaard 16px is, dan is dat 100% of 1.0em en is 200% of 2.0em gelijk aan 32px.

Gebruik overigens lettergroottes die niet teveel afwijken van wat gangbaar is. Gebruikers kunnen tegenwoordig zelf prima inzoomen om de letters van alle websites in 1x te vergroten of te verkleinen afhankelijk van hun schermgrootte, schermresolutie en oogafwijking. Het is niet prettig om dat steeds per website of blog te doen omdat een maker daarvan zogenaamd behulpzaam wil zijn.

Standaard is tegenwoordig 16px, wat gebruikt wordt door wikipedia. Dat geldt voor een zogenaamde schreefloze letter als Arial, Trebuchet of Tahoma. Voor letters als Times, die wel schreven (platvoetjes) heeft is 18px ook prima, daar deze letter kleiner uitvalt.

Advertenties

Geplaatst op 2014-12-23, in Webmatig en getagd als , , , , , , , , , . Markeer de permalink als favoriet. 18 reacties.

  1. Suuuuuper Xi..
    Van het bestaan weet ik, een zekere Blogger Franbu (aardig testblog, een bijna Nederlands Blog in het Duits geschreven ;-)) had er een keer voorbeeld-tests mee uitgevoerd.

    Jammergenoeg gebruikt niemand het, en hebben veel blogs meer dan 12 woorden per regel, wat het leesgemak aantast. Ook volgens alle Grafische Handboeken, maar “het web” (veel webontwerpers) dwingt mensen moeite te doen iets te lezen wat fysiek gezien lastig is.

    (En dan gebruikt mijn browser slechts de helft van mijn beeldschermbreedte.)

  2. @Jolie: Ik had je reactie verwacht. ;-)

    Waarschijnlijk bedoel je dit blogbericht:
    https://franbutest2.wordpress.com/2014/11/24/experiment-06-layout-von-text-neben-untereinander-stehenden-bildern

    De regels zijn daar erg in elkaar gedrukt, maar volgens mij komt dat omdat ie zijn berichten naar een ander platform heeft verplaatst.

    Deze optie zou je heel mooi in zo’n adaptief thema kunnen verwerken, waarbij er bij het verbreden steeds meer kolommen naast komen om bijvoorbeeld zo’n veel te breed scherm van jou te kunnen vullen. ;-)

  3. De huidige trend om blogs en andere websites in één kolom te doen, wordt aangedreven door de behoefte om zo’n site op alle soorten devices (smartphone, minitablet, iPad en wat dies meer zij) te kunnen lezen. Ik geef toe dat veel sites ‘uit elkaar vallen’ op een groter PC-scherm en dat daarvoor een meerkoloms pagina wonderen zou doen. Er zijn dus diverse voors- en tegens. Voor mijzelf vind ik de leesbaarheid op verschillende soorten schermen en schermgrootten wel van belang.

  4. Dit is zeker in wordpress mogelijk. Alleen vind ik het zelf niet lekker lezen en je raakt het overzicht kwijt van je artikelen. Zoek maar eens op WordPress Newspaper Theme…

  5. @Sjoerd: Het leek mij ook niet moeilijk. Dit is wat ik van het Newspaperthema kan vinden: http://themeforest.net/item/newspaper/5489609
    Daar zit een optie ‘blocks’ bij, maar ook daar doen ze het niet zoals ik het bedoel. Dwz Ik zie het alleen op hun voorpagina en niet op de onderliggende artikelen. Mischien kan dat wel, maar ik zie het nergens. Zal nog eens verder zoeken bij blogs die dit thema gebruiken.

    Dat het hier niet prettig leest is niet zo gek. Het voorbeeldje heb ik simpel gehouden. De blokken zijn in de hoogte wat te kort uitgevallen, omdat ik niet meer text kon verzinnen. Het is ook beter om de stukjes van een eigen titel te voorzien en uitvullen te gebruiken. Daarbij laat dit thema me niet de volledige vrijheid van tabellen toe, ze overriden mijn cellspacing settings.

  6. @Blewbird: Ik stel ook voor dat het systeem automatisch het aantal kolommen per schermbreedte aanpast. Echt moeilijk is dat niet.

    Los daarvan schreef ik bij Petepel ook al dat de echte smartfoongebruiker volgens mij vrijwel geen blogs leest. Dat duurt hem of haar te lang en dus houdt het met Twitter (korte kreten) en Facebook (inhoudsloosgedoe) al snel op. Foto’s zou nog kunnen, maar dat kost ze waarschijnlijk ook teveel aan data. In de trein heb ik nog nimmer een smartfoongebruiker op een blog zien lezen, maar ik kan het natuurlijk mis hebben.

  7. Hihi Ximaar :-) Ja, dat zijn van die dingen waar ik inderdaad vaak over nadenk ;-)

    Klopt, dat was een van die interessante kolom-testen van Franbu- Knap gevonden, want mijn blog +links is down ;-( (E. zit te *****-en met de server. Hebben we verdorie 2 machines, haalt ie ze allebei uit de lucht ;-( Pure verstrooidheid.)

    Enfin, ik snap de reacties van Blewbird en van Sjoerd; wat jij ook zegt: “in een adaptief thema”, dan kan het wel/juist goed… Bij verbreding: meer kolommen.

    Qua code vind ik het een drama, dat je tegenwoordig niet meer met 1 code kunt volstaan, maar dat je eigenlijk niet meer aan detectie ontkomt: “Welk device gebruikt iemand, Mobiel, Tablet, Desktop?” OK: dat levert werkgelegenheid voor programmeurs.
    Maar als je zowel vormgeving als programmeerwerk doet, word je eigenlijk gedwongen om 2 razendsnel ontwikkelende vakgebieden bij te houden. Vind ik balen.

    En als het slecht geprogrammeerd is, kunnen zulke grafische stunts inderdaad onleesbare pagina opleveren.
    Maar dat levert 1Koloms-code ook… Er zijn idioten bij die een detectie gebruiken om je inch van je monitor uit te lezen en dan de pagina ZO opmaken dat je het browservenster niet smaller kunt maken. Hou het dan op z’n minst flexibel, zou ik zeggen.

    (P.s. slecht nieuws: de voeding van onze webserver is doorgebrand, mijn blog blijft voorlopig down. :(

  8. Leuk om hier het gesprek verder voort te zetten v.w.b. de krantenkolommen.
    Ik heb een hele tijd geleden dat ook een tijdje op mijn blog gedaan. Eerst door een obscuur theme te installeren waarvan de naam volgens mij Gonzo Daily is. Daarna heb ik verscheidene plugins gebruikt die het allemaal net niet hadden. Toen ben ik er maar mee gestopt.
    Lange regels vind ik ook niet al te fijn lezen maar ben er inmiddels wel aan gewend geraakt. Ik probeer op mijn eigen blog de kolombreedte beperkt te houden en de juiste balans te vinden tussen lettergrootte en regellengte.

  9. @Peter: Die Gonzo Daily uit 2009 vond ik ook, maar wordt al 2 jaar niet meer bijgehouden en volgens WordPress zijn er compatibiliteitsproblemen mee. Maar ook die deelt alleen het voorblad in 3 krantenkolommen in en ik heb niet de indruk dat je er op die manier de onderliggende artikelen mee kon indelen.

    En natuurlijk went alles. Zelf ben ik een soort beelddenker die net geen dyslect is en ik weet dat ik absoluut niet de enige ben. Ik zal er dan ook altijd mijn best voor doen om mensen die meer moeite hebben met lezen op deze manier te ondersteunen. Als voorbeeld heb ik de kolommen op uitvullen gezet, maar ik weet ook dat dat niet scoort bij mij en m’n lotgenoten. Het ergste is nog een hele pagina uitgevuld zonder ook maar een enkele witregel. Daar begin ik niet eens aan. Het verklaart overigens ook waarom ik regelmatig foto’s of grafieken plaats, daar heb ik meer mee en zie het als een broodnodige afwisseling.

  10. Ja lange zinnen in een blog vind ik ook erg irritant. Ik maak zelf korte zinnen met alinea’s er tussen. Wat je zei bij Mindjoy daar kan ik me erg in vinden. Bloggen moet geen verplichting worden en het moet maar net uit komen. Net als inderdaad bijvoorbeeld het koken/eten… Leuke site, hier kom ik vaker kijken! Groetjes Marij

  11. Mijn oplossing voor regels met teveel woorden: de letters groter maken, dan staan er minder woorden op een regel. Zo doe ik dat in mijn serieuze blogs.

  12. @Emigrant: Dat is ook zeker een oplossing, maar grote verschillen in lettergrootte tussen blogs onderling en andere webpagina’s vind ik ook niet echt lekker. Eigenlijk begon de discussie bij Peter daarover. Hij had flink grote letters en heeft die inmiddels verkleind.

  13. @Marij: Leuk dat je langs komt. Ik heb je URL aangepast. Die van WordPress deed nix en deze van webnode ga ik eens beter bekijken.

  14. @Ximaar: Deze ochtend kwam ik op de website van Nicole Montagne => http://nicolemontagneschrijven.com/weblog-over-kijken/
    Zij gebruikt het Duet thema wat kolom-opmaak gelijk een krantenpagina ondersteunt.

  15. @Peter: Ik heb de link aangepast, die stond naar Carel de Mari en die gebruikt 2012. Duet had ik nog niet eerder gezien. Die heeft idd een indeling mogelijkheid van 2 kolommen voor de hoofdkolom. Die kolommen lopen wel door tot onderaan en dan moet je 2x zoveel scrollen als wanneer je ‘per schermhoogte’ eerst een stuk links en dan rechts doet. Probleem daarbij is dat je niet weet wat de schermhoogte van een bezoeker is en daarom gaf ik aan om het op een regel of 10, mogelijk 15 te houden zodat het op elk scherm past.

  16. @Ximaar: Oeps, stom van die link. Dank voor het aanpassen. En inderdaad lijkt het alsof het totale blog in twee stukken gedeeld wordt. Maar het is al iets ;-)

  17. Leuk. Ik kom nog eens terug om te vernemen hoe je dat doet, die kolommen. Ik heb geen programmeerverstand. Jammer want het lijkt me een leuk vak. Te laat! Ook zie ik in je tekst lichtgrijze cijfers verschijnen en weer verdwijnen. Wat is dat voor een goocheltruc?

  18. @Margo: Dat was een vreselijk grapje om de leesvolgorde aan te geven. Zelf kan ik totaal niet tegen zoiets, maar nu vond ik het wel leuk. Het zijn zogenaamde gif-annimaties die je als achtergronplaatje achter een textvak in een tabel kan plaatsen. Zelfs de gratis WordPress.com laat dat toe.

    Voor mij was dit niet lastig om uit te maken. Nam een halfuurtje. Ik heb erg veel geprogrammeerd en de meeste programmeertalen lijken op elkaar. Bij dit HTML/XML/CCS-gedoe moet je alleen erg goed opletten dat je de juiste leestekens gebruikt, anders werkt het niet. Ik heb voor een paar talen een cursus gehad, maar dat zijn talen die niet meer worden gebruikt. Ze hadden ook niets te doen met PC’s. Dit soort talen voor websites of macro’s in Excell heb ik mezelf aangeleerd en dat viel me alles mee.

    Toch zijn er mensen die dit veel beter kunnen, maar die hebben dan weer geen clou waarom ze het zouden moeten gebruiken. Je ziet het dus weinig.

Reaxi (laat het e-mailvak leeg):

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s