Tweakers.net NG: what's new?

De meest in het oog springende vernieuwing in Tweakers.net NG is, hoe kan het anders, de vormgeving. De vorige layout werd gelanceerd in 2002 in een tijdperk waarin monitoren met een horizontale resolutie van 1024 pixels breed of hoger nog niet volledig waren ingeburgerd. Daarom werd er destijds gekozen voor een layout van 800 pixels breed. Deze smalle layout zorgde voor diverse beperkingen, met name in de positionering van de items op de frontpage en de weergave van productinformatie in de Pricewatch. Omdat er geen ruimte was voor twee volwaardige kolommen moesten reviews noodzakelijkerwijs weergegeven worden op een slecht zichtbare plaats onderaan de pagina. In de Pricewatch zorgde de smalle layout voor problemen met het weergeven van lange productnamen.

Anno 2007 maakt vrijwel iedereen gebruik van een monitor met een horizontale resolutie van 1024 pixels of meer. In november 2006 werden gedurende een aantal dagen statistieken verzameld van de beeldscherm- en browservensterresolutie van de bezoekers. Daaruit bleek dat het marktaandeel van kleine beeldschermen was gedaald tot enkele procenten. Opmerkelijk was overigens het feit dat een overgrote meerderheid van de bezoekers zijn browser in fullscreen modus draaide. Dit terwijl het marktaandeel van schermen met een hoge resolutie van 1600 pixels breed of meer relatief groot was.

Om zoveel mogelijk ruimte te scheppen voor de content werd de breedte van de nieuwe layout strak afgemeten op de maximale ruimte die beschikbaar is onder Windows-besturingsystemen met de standaard breedte van de scrollbars en een resolutie van 1024x768. De bredere layout maakte het mogelijk om op alle pagina's te werken met een tweekolomslayout voor de content, naast vast gepositioneerde trackers. Deze tool, die kenmerkend is voor de layouts van Tweakers.net, biedt de bezoekers een overzicht van de laatste wijzigingen op de site. De contentkolommen kunnen op verschillende wijzen ingedeeld worden. Zo wordt er op de frontpage, in de archieven en op de Pricewatch-indexpagina's gebruiktgemaakt van twee kolommen van gelijke breedte. De normale pagina's hebben een brede kolom voor tekst en een smalle kolom voor gerelateerde informatie. De rechterkolom wordt op deze pagina's benut om verwijzingen te geven naar gerelateerde pagina's en acties die de gebruiker kan uitvoeren, zoals het plaatsen van een reactie bij nieuwsberichten en het schrijven van productreviews bij een product in de Pricewatch.

Een veelgehoorde klacht over de vorige layout was de matige overzichtelijkheid. Vooral minder ervaren gebruikers vonden de artikelen, producten en bijzondere functionaliteit, zoals het plaatsen van productreviews, moeilijk vindbaar. Dit probleem heeft bijzondere aandacht gekregen in de nieuwe layout. Er werd gekozen voor een minimalistische vormgeving zonder onnodige opsmuk. Koppen doen hun werk door afwijking in lettertype, lettergrootte en kleur. Bullets, randen en 3d effecten, die het paginabeeld enkel drukker maken, zijn achterwege gelaten. Het navigatiemenu is afgestemd op een effectief gebruik van ruimte en heeft een dubbele functie. Het menu biedt een overzicht van de bestemmingen in de site en maakt tegelijkertijd op visuele wijze kenbaar in welk onderdeel van de site de bezoeker zich bevindt. Een gedetailleerde weergave van de locatie wordt gegeven in het breadcrumb-pad dat op alle pagina's aanwezig is. De achtergrondkleur van het menu geeft de gebruiker informatie over het channel waarin hij zich bevindt en creeërt door kleurgebruik een sfeer die specifiek is voor elk channel. In de rechterkolom zijn op pagina's met artikelen, producten en reviews van gebruikers op vaste plekken links te vinden naar gerelateerde informatie en de acties die de gebruiker bij het betreffende artikel of product kan uithalen, bijvoorbeeld het plaatsen van een reactie of een productreview.

Bij de lancering van de vorige layout was er de nodige kritiek van mensen die vonden dat de vormgeving te zakelijk en afstandelijk was geworden. In NG wordt wederom de voor Tweakers.net herkenbare kleurencombinatie rood-wit-zwart gebruikt. De layout is gecentreerd zodat deze beter gepositioneerd is op hoge resoluties. In het nieuwe beeldmerk zijn de elementen tweaking, het scherpzinnige en kritische individu, en de community verwerkt. Er werd gekozen om bekende elementen uit het verleden - de steeksleutel en het 'poppetje' Henk - in abstracte vorm te laten terugkeren. Door het contrasterende kleurgebruik in het logo, de donkere achtergrond (die tevens de leesbaarheid in donkere omgevingen verbeterd) en de verder strakke en eenvoudige vormgeving wordt een balans gevonden tussen een informele en zakelijke uitstraling.

De styling van Tweakers.net door de jaren heen

De overige elementen in de layout bestaan overwegend uit grijstinten waarbij de kleuren van de koppen opvallend en tevens channelspecifiek zijn. Het contrast van de items in de tracker is bewust laag gehouden om zo min mogelijk de aandacht af te leiden van de feitelijke inhoud van de pagina. Links en lijsten in de rechterkolom zijn voorzien van herkenbare iconen, waarbij dankbaar gebruik is gemaakt van de Silk iconset van FamFamFam.

Door het efficiënt gebruik van tekst, graphics, html en stylesheets werd de totale grootte van de pagina's sterk gereduceerd. Zonder advertenties heeft de nieuwe frontpage een omvang van ongeveer 96KB, inclusief graphics, javascripts en stylesheets. De html is met en zonder compressie respectievelijk 10KB en 46KB groot. In de oude layout was dit 164KB voor het totaal en respectievelijk 13KB en 74KB voor de gecomprimeerde en ongecomprimeerde html-pagina. Dit terwijl de nieuwe layout veel uitgebreidere mogelijkheden biedt. Zo kunnen de instellingen van de tracker vanaf heden door alle ingelogde gebruikers gepersonificeerd worden door middel van sliders en drag and drop. Dankzij het gebruik van ajax is het effect van wijzigingen direct zichtbaar in de layout. Ajax wordt tevens gebruikt om stemmen op polls te verwerken, reacties te plaatsen en moderaties uit te voeren.

Zoekformulieren in onder andere de Pricewatch en Vraag & Aanbod werden opgeruimd door de zoekopties in tabbladen onder te brengen. Op deze wijze kunnen er veel zoekmogelijkheden aangeboden worden terwijl er efficiënt met ruimte wordt omgesprongen. Met name in de Pricewatch is dit van belang.