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 Femme Taken

Architect

Tekstkolom op nieuwspagina's getweakt

21-06-2007 • 12:20

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
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
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.
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 :) )
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.
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 :Y).
Ziet er netjes uit, nu afwachten tot ik er ťťn live te zien krijg.
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.

Op dit item kan niet meer gereageerd worden.


Call of Duty: Black Ops 4 HTC U12+ dual sim LG W7 Google Pixel 3 XL OnePlus 6 Battlefield V Samsung Galaxy S9 Dual Sim Google Pixel 3

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