Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

Door

Architect

Tekstkolom op nieuwspagina's getweakt

38 Linkedin Google+

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.

Large rectangle voorbeeld
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.

Nieuwspagina aangepaste layout met rectangle
Oplossing

Reacties (38)

Wijzig sortering
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.
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..
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.
Met wat javascript werkt het zelfs in IE6 ;)
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 21 juni 2007 14:28]

Tekstgrootte is nu kleiner.
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.
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 :+ )
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 :)
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) O+
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?
Gave "large rectangle" O+
Als abonnee ben ik blij hiermee :) De ads moeten in je site integreren, niet omgekeerd.
top, zo is het allemaal weer prima leesbaar :)
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 Ozis_Apoes op 22 juni 2007 19:36]

Dat is een issue die alleen in IE6 speelt.
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)
We zijn die gevallen aan het inventariseren en die zullen inderdaad tzt aangepast gaan worden :)
Fraaie oplossing

Op dit item kan niet meer gereageerd worden.


Apple iPhone X Google Pixel 2 XL LG W7 Samsung Galaxy S9 Google Pixel 2 Far Cry 5 Microsoft Xbox One X Apple iPhone 8

Tweakers vormt samen met Tweakers Elect, Hardware.Info, Autotrack, Nationale Vacaturebank en Intermediair de Persgroep Online Services B.V. © 1998 - 2018 Hosting door True

*