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

Apple iPhone XS Red Dead Redemption 2 LG W7 Google Pixel 3 XL OnePlus 6T (6GB ram) FIFA 19 Samsung Galaxy S10 Google Pixel 3

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