Tweakers.net heeft maandag een vernieuwde site met een update van de vormgeving en een uitbreiding van de contentrubrieken geïntroduceerd. De nieuwe layout, ontwikkeld onder de codenaam 'NGv2', is een evolutie van het voorgaande ontwerp dat in juni 2007 werd gelanceerd. In deze .plan geven we je een rondleiding langs de vernieuwingen.
Uitgangspunten
De lancering van de vorige layout - codenaam "NG" - was de meest ingrijpende functionele en uiterlijke wijziging in de geschiedenis van Tweakers.net. Het betrof niet alleen een wijziging van de vormgeving maar ook functionele verbetering van bijna alle pagina's en inhoudelijke verbreding in de vorm het Pro-channel over ict-pro en het Life-channel over games, internet en consumentenelektronica. Na de lancering van NG werd alles in het werk gesteld om zoveel mogelijk feedback van gebruikers in de site te verwerken. Voor veel verbeterpunten was dat mogelijk, voor enkelen waren er echter grote veranderingen van de layout noodzakelijk. In de maanden na de launch van NG werd tevens duidelijk dat de channels een andere rol zouden gaan vervullen dan oorspronkelijk voorzien. Dit vergde wijzigingen in de vormgeving en de navigatie die niet eenvoudig in de oude layout aangebracht konden worden.
Eén van de opmerkingen die veelvuldig door de gebruikers werd gemaakt, was dat de layout met twee kolommen voor de content en links de tracker in weinig contrasterende kleuren als druk en onoverzichtelijk werd ervaren. Vanwege de noodzaak om veel informatie op de pagina's te kunnen plaatsen waren de marges tussen de kolommen bovendien erg krap. In de nieuwe site is gekozen voor een ruimere en overzichtelijker opzet. Tevens is er gezocht naar een vormgeving die een grotere herkenbaarheid en een groter onderscheidend karakter heeft dan het relatief anonieme vorige ontwerp.
Ten aanzien van de channels werd besloten om deze niet langer als subsites door te ontwikkelen. In plaats daarvan zouden de channels geïntegreerd worden in de categorische indeling van de hoofdsite. Dankzij een forse uitbreiding van de redactie in het afgelopen jaar is het mogelijk geworden om over steeds meer techonderwerpen verslag te doen. Het Life-channel kon daarom opgesplist worden in specifiekere rubrieken.
Als laatste werd de implementatie van de nieuwe layout aangegrepen om de vormgeving en de inhoud van de frontpage en de rubrieksindexen te verfijnen.
Layout
Om de overzichtelijkheid te verbeteren is er in de nieuwe site gekozen voor een vormgeving die de aandacht sterk concentreert op de eigenlijke content van de pagina. De tracker is visueel ondergeschikt gemaakt door hem op de donkere achtergrond te plaatsen. Het contrast tussen de tekst in de tracker en de achtergrond is laag en wordt groter bij een mouseover op de tracker en het hoveren over links in de tracker. De content en het navigatiemenu zijn in een vlak geplaatst met een voor Tweakers.net-kenmerkende winkelhaakvorm, die ook in de tweede, derde en vierde generaties van de layout werd gebruikt.
![]() | ![]() |
Oud | Nieuw |
Een belangrijk streven was om meer lucht in de layout aan te brengen door grotere marges te hanteren. Tegelijkertijd wilden we voorkomen dat grotere marges ten koste zou gaan van de ruimte voor de content en de tracker. Uit een in februari uitgevoerd onderzoek naar de beeldscherm- en browserresoluties van de gebruikers, bleek dat bijna 91 procent van de bezoekers een beeldschermresolutie van 1152 pixels of breder gebruikt. Driekwart van de gebruikers had zijn browser op 1152 pixels of breder geschaald. De cijfers wijzen uit dat er meer dan voldoende draagvlak was voor een layout met een grotere optimale breedte dan de geldende standaard van 1024 pixels. Met zoveel ondersteuning voor resoluties breder dan 1024 zou het jammer zijn om ruimte, die anders verspild zou worden door eindeloos repeterende achtergrondplaatjes, niet op een zinvolle wijze aan te wenden.
Er is daarom gekozen voor een layout die weliswaar compatible is met 1024 pixels, maar zijn optimale weergave bereikt bij een resolutie van ongeveer 1190 pixels. Tussen beide bevindt zich een stap op 1152 pixels die dezelfde functionaliteit biedt als de optimale weergave, echter met minder grote marges. De twee contentkolommen worden in alle versies op dezelfde wijze getoond, enkel heeft de 1024-versie een smallere tracker en krappe marges zoals in de vorige layout. Een muisbeweging over de tracker herstelt hem in zijn optimale proporties. Onze css- en javascriptkunstenaar Tino heeft ervoor gezorgd dat de weergave naadloos wordt aangepast aan de breedte van het browserwindow.
![]() | ![]() | ![]() |
Optimaal | 1152 breed | 1024 breed |
De werking van het navigatiemenu is grotendeels gelijk gebleven aan het menu in de vorige layout. Belangrijke verschillen zijn dat de de header niet meer meekleurt met de actieve channel en dat links in het navigatiemenu niet meer per channel verschillen. De header heeft altijd de voor Tweakers.net kenmerkende rood met zwarte kleurstelling en menuopties verwijzen altijd naar dezelfde rubrieksonafhankelijke locatie. De eventuele rubriek waartoe de content van de pagina behoort, is herkenbaar aan een gekleurde balk onder de header en aan een gekleurde pijl onder het logo. De knoppen in het navigatiemenu zijn wat groter geworden om de bediening ervan gebruiksvriendelijker te maken. De header is los geplaatst in het contentvlak om het gevoel van ruimtelijkheid te verhogen.
Het Tweakers.net-logo is ongewijzigd gebleven. Wel verschijnt hij in een andere vorm in de layout. Als een rijzende zon steekt het logo uit boven de zwarte balk met de groepsnavigatie. De vorm van de steeksleutel en het gezicht in het logo zijn daarbij herkenbaar gebleven. Op subtiele wijze zijn achter het logo de signaallijnen van een printplaat zichtbaar.
Onder het logo bevindt zich het menu met de rubrieken. Het menu maakt duidelijk voor welke onderwerpen Tweakers.net staat en verhoogt door zijn opvallender plaatsing de aantrekkingskracht van de rubrieksindexen.
Rubrieken
De channels vervullen in de nieuwe site een minder prominente rol. De subsites zijn komen te vervallen. In de nieuwe site zijn de channels onderdeel van de categorische indeling van de redactionele artikelen en worden deze benut als hulpmiddel om de content op de site in te delen en herkenbaar te maken. We spreken daarom niet meer van channels maar van rubrieken.

Het onderwerp games heeft zich in het afgelopen jaar zeer succesvol ontwikkeld en heeft in de nieuwe site daarom een eigen rubriek gekregen. Tevens is er een rubriek over mobiele telefonie toegevoegd. Het Life-channel is opgesplitst waarbij er een Electronics-rubriek is gereserveerd voor de onderwerpen die niet in Games en Mobile thuishoren. De Core- en Pro-rubrieken blijven gehandhaafd.
De categorie-indeling is op de nieuwe rubrieken aangepast. Omdat er niet meer naar subsites wordt gestreefd kon veel overlap in de categoriestructuur verwijderd worden. Bedrijfsnieuws zal bijvoorbeeld altijd in de Pro-rubriek vallen.
Frontpage en rubrieksindexen
Op de frontpage en de indexpagina's van de rubrieken is de meest in het oog springende wijziging een nieuwe carrousel voor de reviews met grotere afbeeldingen. Er is bewust gekozen voor een eenvoudige werking zonder fancy overgangseffecten die op de lange termijn vooral irritatie opwekken.
De populaire Pricewatch-producten worden nu getoond met een productafbeelding voor zover deze bij het betreffende product beschikbaar is. Op de rubrieksindexen wordt er tevens een overzicht getoond van hooggewaardeerde productreviews in de aan de rubriek gerelateerde productcategorieën. Hiermee willen we hoogkwalitatieve productreviews van users de aandacht geven die zij verdienen.

De functionaliteit op de overige pagina's is ongewijzigd gebleven. Wel profiteren de pagina's van de grotere beschikbare breedte. Dit zorgt er onder andere voor dat specificaties beter weergegeven kunnen worden in de productlijsten van de Pricewatch en dat er meer ruimte beschikbaar is voor het zoekfilter.
We hopen uiteraard dat de nieuwe layout positief ontvangen wordt en zullen onze uiterste best doen om eventuele bugs en onvolkomenheden zo snel mogelijk op te lossen.
Tweakers.net door de jaren heen
Ter afsluiting een overzicht van de layouts die Tweakers.net door de jaren heen heeft gebruikt. Van links naar rechts respectievelijk G1 uit 1998-1999, G2 uit 1999, G3 uit 1999-2002, G4 uit 2002-2007, G5 uit 2007-2008 en de zesde generatie die vandaag is geïntroduceerd.





