Tekstkolom op nieuwspagina's getweakt

Een veelgehoorde klacht over de nieuwe layout was de breedte van de tekstkolom op de nieuwspagina's. Vanwege de noodzaak om large rectangle-advertenties in de nieuwspagina's te kunnen integreren werd in eerste instantie gekozen voor een smallere tekstkolom van 410 pixels en een relatief brede rechterkolom van 336 pixels, die tevens riant ruimte bood aan verwijzingen naar categorieën, tags, gerelateerde artikelen en een poll. Deze indeling maakte het mogelijk om de rectangle op een nette wijze te integreren en op een prominente positie te plaatsen. Tevens werd voorkomen dat de inhoud van de tekstkolom zou verspringen op het moment dat de rectangle in de layout geplaatst werd. Omdat de advertenties via javascript van de advertentieserver worden opgehaald, gebeurt het plaatsen van advertenties in de pagina altijd achteraf. Pas na het laden van de pagina is bekend welke advertentieformaten weergegeven moeten worden. Tevens voorkomt het achteraf ophalen dat een trage advertentieserver de snelheid waarmee de pagina wordt opgebouwd, kan frustreren.

De schuldige

De kritiek op de smalle tekstkolom in de nieuwspagina's maakte duidelijk dat er een andere oplossing voor het probleem gezocht moest worden. De oplossing die ons het meest geschikt leek was om de tekstkolom wat breder te maken en de tekst langs de rectangle uit te lijnen. De rectangle zou dan gedeeltelijk overlap hebben met de tekstkolom. Helaas zijn de mogelijkheden voor het uitlijnen van tekst rond zogeheten pull-outs in css een stuk beperkter dan in een willekeurig dtp-programma.

Tino werd opgezadeld met het vinden van een oplossing. Die is er een paar uur later gekomen in de vorm van een rechts uitgelijnd dummy-element in de tekstkolom dat een bepaalde afmeting aanneemt op het moment dat er een rectangle weergegeven moet worden. Op die manier wordt in de tekstkolom de benodigde witruimte gecreeërd. In de nieuwe indeling heeft de tekstkolom een breedte van 478 pixels. Een bijkomend voordeel hiervan is dat afbeeldingen uit oudere nieuwsberichten, die veelal een breedte van 450 of 475 pixels hadden, weer in hun geheel zichtbaar zijn.

Een nadelige consequentie van de nieuwe methode is dat er na het laden van de pagina een verspringing optreedt op het moment dat de rectangle in de pagina wordt geplaatst. Deze verspringing vindt op een snelle verbinding en in normale situaties met een snelle respons van de advertentieserver zodanig snel plaats dat het effect nauwelijks zichtbaar is. Bovendien komt het zelden voor dat er werkelijk een rectangle wordt weergegeven.

Oplossing

Reacties (38)

[Gustaaf437]

Nu nog Multi-column CSS 3 er aan toevoegen. Dat zou helemaal geweldig zijn. Dat het breder is is wel fijn, maar maakt het ook weer minder leesbaar. Dus voor de FireFox en Safari 3 gebruikers zou je die multi-column kunnen implementeren. Zie ook: http://www.css3.info/preview/multi-column-layout.html

[Femme]

Multi-column layouts lijken mij niet bijzonder nuttig voor het weergeven van tekst op een beeldscherm. Ik kan me bijzondere situaties voorstellen waarin het bruikbaar is, maar het probleem dat ze verhelpen in drukwerk bestaat niet op een beeldscherm met een scrollbar.

[jdevalk]

Ben ik niet met je eens Femme... Het probleem wat ze namelijk ook oplossen is dat tekst kolommen vaak te breed zijn voor mensen om nog lekker te kunnen lezen...

(Ben biassed overigens, ben de eigenaar van de site die Gustaaf noemt )

[Femme]

Te brede kolommen is een probleem dat de ontwerper moet voorkomen door een (maximale) breedte mee te geven die zodanig is dat de leesbaarheid optimaal is. Om die reden ben ik ook niet zo'n voorstander van liquid layouts waarmee het risico bestaat van zeer lange, slecht leesbare tekstregels.

Een multi-kolom layout kan aardig zijn als de inhoud volledig op één scherm past zonder scrollen. Zodra je moet scrollen en aan de onderkant van de kolom weer naar boven moet om verder te lezen mist het zijn doel volledig. Ik vraag me verder ook af of gebruikers gewend zijn om teksten op een beeldscherm in kolommen te lezen. Kolommen worden normaliter gebruikt om verschillende soorten informatie te scheiden.

[jdevalk]

css3 heeft in principe mogelijkheden om te zorgen dat je niet hoeft te scrollen voor de volgende kolom, want, dat ben ik met je eens, is heel lelijk.

Gebruikers zijn gewend aan sites die konden worden gebouwd met IE6, helaas zijn ze daardoor nogal beperkt... Dus ik denk niet dat we ons daarop vast moeten pinnen, mensen wennen wel aan nieuwe dingen.

[Cameleon73]

Dus jij zegt: screw IE6, bouw 't alleen voor CSS3 compatibele browsers? Lijkt me niet handig.

[Verwijderd]

Mwah, volgens mij gaat IE6 toch wel behoorlijk uitgefaseerd worden door IE7. Het is een 'verplichte' upgrade voor XP, en het zit standaard in Vista. Met IE6 hoef je dus steeds minder rekening te houden.

[martijnvanegdom]

Nee hoor helemaal niet verplicht je kun gewoon kiezen of het wilt of niet.. Daarnaast zolang IE 6 nog meer dan 10% gebruikt word.. moet je er rekeneing mee blijven houden..

[crisp]

We houden ook wel rekening met IE6, maar wel tot een bepaalde grens. Zo mis je bijvoorbeeld al bepaalde hover effectjes omdat IE6 geen :hover ondersteuning biedt in CSS.

[Fuzzillogic]

Met wat javascript werkt het zelfs in IE6

[Blaise]

Ik vind de tekst nu al veel te breed en heb moeite om de volgende regel te vinden. Regels bevatten nu ongeveer 16 woorden. Bovendien zijn ze 'justified' uitgelijnd, dat ziet er wel mooi uit, maar is slecht voor de leesbaarheid.

Meerdere tekstkolommen zijn denk ik ook niet de oplossing. Eén smallere tekstkolom wel.

[Reactie gewijzigd door Blaise op 23 juli 2024 00:54]

[drZymo]

In de nieuwe indeling heeft de tekstkolom een breedte van 478 pixels. Een bijkomend voordeel hiervan is dat afbeeldingen uit oudere nieuwsberichten, die veelal een breedte van 450 of 475 pixels hadden, weer in hun geheel zichtbaar zijn.

Oftewel als je er nu last van hebt, dan had je dat vroeger ook .

[Blaise]

Tekstgrootte is nu kleiner.

[crisp]

Onderzoeken naar leesbaarheid richten zich qua regelbreedte niet zozeer op het aantal karakters maar op de fysieke breedte van de regel. Bredere regels lezen sneller dan smallere, maar het is lastiger om het begin van de volgende regel te vinden indien de regels te breed worden.

Uiteraard zijn dit subjectieve criteria; blijkbaar vinden veel mensen de iets bredere opzet toch prettiger lezen.

[FabianNL]

Tja, ik wil niet ze zeikerd uithangen, maar ik vind hem ook erg breed nu moet ik zeggen hoor. Ik had totaal geen last van de 'smalle' tekstkolom zoals ie eerst was, al is het misschien ook toch weer ff wennen?

(En ja, jullie kunen het idd ook gewoon nóóit goed doen )

[Vaudtje]

Voor leesbaarheid is een te smalle kolom ook weer erg vervelend, aangezien je als lezer normaal gesproken ook ene stuk vooruit 'scant' bij wat je aan het lezen bent.
Ik ben zelf een vrij snelle lezer en ergerde me daarom aan de smalle layout: doordat er al snel een regeleinde aankwam kon ik niet ver vooruit lezen en komt het artikel enigszins staccato over. Het is een vrij subtiel verschil, maar ik ben hier blij mee

[Room42]

Nou, ik vind deze bredere tekstkolom een van de beste verbeteringen sinds de nieuwe layout! Puntje voor Femme en zijn Crew (en het luisteren naar de klanten, natuurlijk)

[Verwijderd]

Ziet er netjes uit, nu afwachten tot ik er één live te zien krijg.

[Kalief]

Pas na het laden van de pagina is bekend welke advertentieformaten weergegeven moeten worden.

Dat is apart, dus jullie kunnen van te voren niet voorspellen met welk formaat advertenties jullie worden opgezadeld? Dan bepaalt de adverteerder dus uiteindelijk de layout en daarmee ook een deel van de content. Gaat die invloed niet wat ver?

[Femme]

Er wordt bij het ontwerp van de pagina's rekening gehouden met de advertentieformaten die weergeven moeten kunnen worden. Hier zijn we uiteraard van op de hoogte. Pas achteraf, nadat een pagina is geserveerd, weten we welke formaten er werkelijk zichtbaar zullen zijn op een pagina. Dit gaat volledig client-side omdat de advertenties via javascript bij de advertentieserver worden opgehaald. Bijna alle sites gebruiken deze werkwijze. Wij hebben 'm enkel zodanig geoptimaliseerd dat de gebruiker er zo min mogelijk vertraging van ondervind. De adverteerders hebben gewoon de keuze uit een aantal vooraf bepaalde advertentieformaten.

[Verwijderd]

Ziet er strak uit.

[cryforhelp]

Gave "large rectangle"

[WhiteDog]

Als abonnee ben ik blij hiermee De ads moeten in je site integreren, niet omgekeerd.

[WaarAnders]

top, zo is het allemaal weer prima leesbaar

[Verwijderd]

Mooi gedaan.

Nu is er voor mij alleen nog het probleem dat je geen apparte regels teksts kan selecteren, wat voor mij het lezen van artikels en reacties een stuk gemakkelijker maakte. Geen idee of dit al aangekaart was, daarom zet ik het hier maar neer.

@crisp: bedankt voor het antwoord, dat verklaart het een en het ander.

[Reactie gewijzigd door Verwijderd op 23 juli 2024 00:54]

[crisp]

Dat is een issue die alleen in IE6 speelt.

[anonimoes]

Een prima verbetering wat mij betreft!
Ik ben alleen bang dat nog niet alle oude content nu ook past, bijvoorbeeld dit artikel met tabel. Het is nu welliswaar een stuk beter maar er valt nog steeds een klein stukje weg... (Maar ik heb begrepen dat het de bedoeling is alle oude content aan te passen aan de nieuwe layout waar dat nodig is dus dit zal een tijdelijk probleem zijn gok ik)

[crisp]

We zijn die gevallen aan het inventariseren en die zullen inderdaad tzt aangepast gaan worden

[Peleus2K]

Fraaie oplossing