Vanochtend hebben we een nieuwe versie van de Hardware.Info en FotoVideo.nu website online gezet. Intern spreken we over Hardware.Info versie 5.3, maar de aanpassingen zijn zo ingrijpend dat we hebben getwijfeld om niet direct versienummer 6.0 te gebruiken: in totaal zijn 18.249 nieuwe regels code geïntroduceerd, terwijl 34.697 regels code zijn verdwenen. Maar één 6.0 introductie deze maand is wel voldoende, dus laten we niet proberen het spotlight te stelen en deze versie gewoon 5.3 noemen.
Wie de vorige alinea zorgvuldig bestudeerde, heeft het goed gezien: een vermindering van het aantal regels code! Dat was dan ook de bedoeling. Voor HWI 5.3 hebben we alle templates en CSS-code van alle pagina's op Hardware.Info en FotoVideo.nu volledig opnieuw gemaakt. De belangrijkste, maar niet enige, reden daarvoor was om beide sites meer op dezelfde leest te schoeien, ten einde toekomstige updates van functionaliteit eenvoudiger op beide sites beschikbaar te stellen.
Toen FotoVideo.nu in Hardware.Info 4.0-tijd (april 2011) werd geïntroduceerd, werkte de site al op fysiek dezelfde code als Hardware.Info, maar met eigen templates, die uiteraard wel gebaseerd waren op kopieën van die van Hardware.Info. Deze situatie zorgde er echter voor, dat nieuwe functionalteit niet zonder extra inspanning direct op beide sites beschikbaar kon komen. Het resultaat was dat beide sites de afgelopen tijd een beetje uit elkaar zijn gedreven. Vanaf deze versie 5.3 draaien Hardware.Info en FotoVideo.nu op exact dezelfde database, exact dezelfde code én exact dezelfde templates. Het resultaat is dat we nu veel sneller nieuwe functionaliteit voor beide sites tegelijkertijd kunnen ontwikkelen en dat FotoVideo.nu nu ook alle kleinere en grotere verbeteringen die we de afgelopen maanden aan Hardware.Info hebben doorgevoerd aan boord heeft. De twee sites moeten uiteraard wel hun eigen gezicht behouden: via aparte CSS hebben we ervoor gezorgd dat beide sites toch hun eigen, kenmerkende vormgeving hebben gehouden.
Er waren meer redenen om alle templates en CSS opnieuw te ontwikkelen. Allereerst gaf het ons de mogelijkheid om echt eens met een stofkam door alle pagina's te gaan en vele inconsistenties weg te halen. Het design van Hardware.Info tot nu toe is een doorontwikkeling van wat we in 2010 als Hardware.Info 4.0 introduceerden. Zoals dat gaat met doorontwikkelingen komen er op nieuwe pagina's nieuwe inzichten en is het resultaat dat er langzaam maar zeker verschillen insluipen, die uiteindelijk verwarrend werken. Zo kwamen we op één pagina bijvoorbeeld drie verschillende soorten knopjes tegen. In Hardware.Info 5.3 hebben we al die inconsistenties eruit gehaald, waardoor de site nu een veel mooier geheel is geworden. Daarnaast zijn op elkaar lijkende delen van de site (zoals bijvoorbeeld de overzichten op review- en nieuwsoverzichtspagina's) vanaf nu ook op gedeelde templates gebaseerd. Dat geeft twee voordelen: inconsistenties worden onmogelijk én verbeteringen doorvoeren gaat in de toekomst een stuk sneller.
Een derde reden om de templates en CSS geheel opnieuw te ontwerpen is de opkomst van hoge resolutieschermen. De introductie van de iPad 3 was voor de developer-afdeling bij Hardware.Info een eye opener. Niet zozeer omdat het onze programmeurs het zo'n interessant apparaat vinden - "een échte developer werkt op de commandline!" horen we altijd - maar meer vanwege het feit dat websites op het retina scherm in feite altijd vergroot worden weergegeven. Immers: de resolutie is veel hoger dan waar vrijwel alle websites voor gemaakt zijn. Op de iPad 3 zie je overduidelijk dat het anno 2012 geen goed idee meer is om plaatjes te gebruiken voor de interface. Beelden vergroot weergeven zorgt dan namelijk voor een wazig resultaat. De iPad 3 is maar een voorbode voor wat komen gaat: ook Windows 8 is bijvoorbeeld geschikt voor schermen met een hoog oplossend vermogen en 2013 wordt naar verwachting het jaar dat hoge resolutiebeeldschermen op notebooks én monitoren flink meer aandacht krijgen. De tijd dat websites vrijwel altijd pixel-perfect, 1-op-1 worden weergegeven is vermoedelijk spoedig voorbij.
Vandaar dat we ons een ambitieus doel stelden voor Hardware.Info en FotoVideo 5.3: géén afbeeldingen meer voor de interface. Op enkele logo's en iconen na is dat helemaal gelukt. We hebben er een complete CSS3-trukendoos voor moeten opentrekken, maar alle designelementen van Hardware.Info en FotoVideo.nu hebben we keurig zonder plaatjes kunnen reproduceren. Voor de kenners: we hebben veelvuldig gebruik gemaakt van rounded corners, box shadows, gradients, en pseudo-elements. Wie interesse heeft in CSS3 doet er goed aan om eens een middagje Hardware.Info te gaan firebuggen, we zijn ervan overtuigd dat we een mooie inspiratiebron kunnen zijn. De overstap naar CSS3 maakt dat je de site extreem kunt vergroten en dat alles nog altijd scherp blijft. Een bijkomend voordeel is dat we meer dan een megabyte aan interface afbeeldingen hebben weggegooid: voor bezoekers die de eerste keer op Hardware.Info komen staat de site er op die manier ook wat sneller.
We hebben Hardware.Info en FotoVideo.nu 5.3 zeer grondig en langdurig getest, maar onze ervaring leert dat een ingrijpende lancering als deze helaas nooit geheel bug-vrij te doen is. We zijn ervan overtuigd dat er, ondanks dat we ze zelf niet konden vinden, nog wel enkele foutjes ingeslopen zijn. Heb je problemen gevonden, meld ze alsjeblieft in onze bugsforum. We zijn uiteraard ook zeer benieuwd wat je vindt van de nieuwe site. Reacties zijn welkom in de comments!
Hieronder vind je enkele vergelijkende screenshots:
Header uitvergroot naar 200% - OUD:
Header uitvergroot naar 200% - NIEUW:
Knoppen in de sidebar uitvergroot naar 200% - OUD:
Knoppen in de sidebar uitvergroot naar 200% - NIEUW:
Footer uitvergroot naar 200% - OUD:
Knoppen in de sidebar uitvergroot naar 200% - NIEUW: 
Header rechtsboven uitvergroot naar 200% - OUD:
Header reachtsboven uitvergroot naar 200% - NIEUW:
Opmaak prijzentab productpagina - OUD:
Opmaak prijzentab productpagina - NIEUW:
