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
Mooi hoor :) Nu ook de pricewatch nog wat leesbaarder en wat duidelijkere knopjes voor sommige toepassingen en wie weet gaat de nieuwe site dan wel net zo prettig werken als de oude.

Ik zoek me soms groen en geel en wordt afgeleid door allerlei flitsende in het oog springende objecten. 8)7
In welk opzicht vind je de pricewatch niet leesbaar dan? Want daar is vziw juist vrij weinig in aangepast kwa layout tov de vorige situatie.

En heb je nog voorbeelden van de dingen die je niet goed kon vinden in eerste instantie, want ook die zijn dan blijkbaar niet goed geplaatst? :)
Fantastisch dat er zo goed naar het commentaar van gebruikers wordt geluisterd. Ik had het niet verwacht nu tweakers zo groot is geworden, mijn complimenten :) . Ook is het zo veel handiger met afbeeldingen, ze zijn nu ze wat groter kunnen zijn veel beter zichtbaar.

De oplossing is zeer fraai, en het leest IMO nu veel lekkerder. De nieuwe site is nu (voor mij tenminste) echt "af", en zeker beter dan de oude. Als tweakers zo naar de gebruikers blijft luisteren in de toekomst is dat echt het meest goede wat jullie als management kunnen doen. Sterker nog, ik ben volgensmij nog nooit, zo'n grote organisatie/bedrijf/site tegen gekomen die zo goed naar zijn gebruikers luisterd.

En als laatste natuurlijk kudo's voor Tino voor het maken van zo'n mooie oplossing. _/-\o_

[Reactie gewijzigd door XplodingForce op 22 juni 2007 01:00]

@bericht

Ja.. dit is natuurlijk een oplossing van niks he!!
ik kan me niet voorstellen dat deze oplossing lang zal blijven.

Kijk nu eens naar de ruimte die je hier (in "plan") voor een nieuws bericht heb en naar de ruimte die je in een normaal nieuws bericht heb.. Hier heb je al meer ruimte dan in een gewon nieuws bericht.. maak datzelfde nou ook gewoon in een normaal nieuws bericht!!

Of beter.. maak het:
1. Smaller zoals hier
2. voeg een "collapse" knopje toe waarmee je die hele (rechter) zijbalk weg kan halen.

Ik snap jullie niet.. jullie maken een layout op 1024x786 compatible en maken het niews deel alleen maar KLEINER i.p.v. groter.. kwa nieuws (waar deze site voornamelijk voor is) is de huidige layout naar mijn mening een mislukking tenzij er iets wordt gedaan aan die rechter balk zoals ik al eerder aangaf.

daarnaast begint de hoeveelheid flash banners ook uitermate irritant te worden (stilstaande flash dingen of niet veel beweging is niet erg maar hele filmpjes die af worden gespeeld zoals onlangs die k*t kpn reclame over opslag).
De breedte van de tekstkolom in het nieuws is mijn inziens perfect en misschien wel beter dan de breedte in de reviews. De reviews zijn net zo breed gebleven als de oude layout echter is wel het lettertype verkleind van 13px naar een gangbare 12 pixels, dus er komt meer tekst op een regel dan voorheen. In de nieuwskolom past nu ongeveer eventeel tekst op een regel als voorheen in de oude site.

De reden om in het nieuws niet dezelfde breedte als in de reviews en .plans te gebruiken is omdat er in het nieuws meer informatie wordt getoond in de rechterkolom. In een smallere rechterkolom is er onvoldoende ruimte om de gererelateerde artikelen en een poll op een mooie wijze weer te kunnen geven. Ook zou het effect van het 'hoekje' op pagina's met een rectangle groter zijn.

Het is verder nooit de bedoeling geweest om de tekstkolommen breder te kunnen maken in de 1024px-layout. Dat komt de leesbaarheid namelijk niet ten goede. Wel wordt de extra ruimte gebruikt om gerelateerde informatie bij een artikel beter inzichtelijk te maken en om meer informatie in de Pricewatch te kunnen tonen. Tevens was de extra ruimte hard nodig voor een tweekoloms layout (+ tracker) op de frontage.
is een hide knopje voor die rechterkolom niet een goed idee?
er zit nu zoveel ajax in Tweakers (zelfs het hele linker menu is aanpasbaar) dat het ook wel mogelijk moet zijn om de rechter kolom ook aanpasbaar te maken.

[Reactie gewijzigd door markg85 op 22 juni 2007 20:13]

Dit is niet handig, omdat je dan bij het schrijven continu rekening moet gaan houden met 2 breedtes. Als je dat niet precies goed doet verkloot je de layout totaal. Ook is het echt niet lekkerder als het nog breder wordt. Dan wordt het gewoon te breed, en te is nooit goed.
tjah dat zal wel... zoals het nu is vind ik het niet erg mooi. de rest van tweakers is dat wel maar dit drukt t wel aardig omlaag. Hou hier anders eens een poll over.

EDIT:://

sorry maar "Dit is niet handig, omdat je dan bij het schrijven continu rekening moet gaan houden met 2 breedtes." gaat totaal niet op. ik heb een stuk tekst bekeken (in de source) en er staat werkelijk niet 1 nieuwe regel in een nieuwsbericht. alleen (in dit geval nieuws: Brein wint kort geding; beraadt zich over stappen tegen Leaseweb) 2 allinea's dus die breedte kan worden aangepast zonder ook maar iets aan de nieuwsberichten te moeten veranderen zonder dat het lelijk(er) wordt.

[Reactie gewijzigd door markg85 op 23 juni 2007 20:33]

Spijtig, dit vind eigenlijk meer een slordig uitzicht hebben :s

Op dit item kan niet meer gereageerd worden.


Apple iPhone XS Red Dead Redemption 2 LG W7 Google Pixel 3 XL OnePlus 6T 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