Later dit jaar introduceren we een geheel nieuwe versie van de Hardware.Info website, codenaam Hardware.Info 7.0. Eerder las je al waarom we een geheel nieuwe site ontwikkelen en welke aanpassingen er zullen zijn aan onze naam en ons logo. Vandaag lichten we weer een ander tipje van de sluier op: we gaan het hebben over hoe Hardware.Info 7.0 geschikt zal zijn voor zowel kleine, maar ook grote schermen!
Onze huidige website - voor de liefhebbers, versie 6.19 - stamt in de basis uit november 2015. Hét grote nieuws destijds was dat Hardware.Info voor het eerst responsive werd. Dat houdt in dat een website zich qua lay-out aanpast aan de grootte van het gebruikte scherm. Hierdoor was de site vanaf dat moment niet alleen geschikt voor desktops en laptops, maar ook voor smartphones. De in functionaliteit zeer beperkte aparte mobiele site waar wij en lezers het tot dat moment mee moesten doen, kon met pensioen.
Hardware.Info 6.0 uit 2015 was de eerste versie geschikt voor meerdere schermformaten.
Het aantal gebruikers van een desktop, laptop of tablet is tegenwoordig een minderheid.
De overstap naar een website die geschikt was om weergegeven te worden op smartphones en andere mobiele apparaten was destijds hard nodig, want het aantal bezoekers vanaf een mobiel apparaat was gestaag richting de 20% gegroeid. Tegenwoordig denken we nog wel eens met weemoed terug aan dergelijke percentages. Op dit moment benadert het percentage bezoekers dat Hardware.Info vanaf een smartphone bezoekt de 55%. Het aantal gebruikers van een desktop, laptop of tablet is dus inmiddels een minderheid!
De responsive website zoals we die sinds Hardware.Info 6.0 tot op de dag van vandaag hebben is in de basis de desktop versie van de website, waarbij we via zogenaamde CSS-trucs de lay-out aanpassen en verschillende items verbergen om de site op die manier geschikt te maken voor kleinere schermen. De huidige site is dan ook nooit ontworpen met smartphones in het achterhoofd. Hierdoor werkt sommige functionaliteit geheel niet op mobiele apparaten (zoals onze vergelijkingstabellen), is andere functionaliteit zeer gebruiksonvriendelijk (zoals de categoriepagina’s binnen de prijsvergelijker) en op talloze plekken is informatie die op de desktop site wél zichtbaar is, dat niet op de mobiele site. In 2015, met minder dan 20% mobiele bezoekers en vrijwel niemand die mobiel winkelde (en dus gebruik maakte van prijsvergelijkers), was dat nog een acceptabele compromis; anno 2019 is dat absoluut niet meer het geval.
Bij Hardware.Info 7.0 zijn smartphones van begin af aan de primaire focus geweest bij alle ontwerpen. Ons doel was eenvoudig te omschrijven, maar niet om te bereiken: alle functionaliteit die we op een groot scherm aanbieden moet ook beschikbaar zijn op smartphones én minstens even gebruiksvriendelijk zijn. Zeker bij zaken als de categoriepagina’s van de prijsvergelijker is dat een uitdaging, maar een die inmiddels goed gelukt is!
Ook beter op grotere schermen!
Gebruikers van desktops en laptops, we zijn jullie niet vergeten. In tegendeel: ook voor grote schermen moet de nieuwe site geschikt zijn! Waar de afgelopen jaren smartphones meer en meer gebruikt werden, zagen we bij desktops een trend dat monitoren juist steeds groter worden én hogere resoluties bieden. Full HD (1920x1080) is voor zowel desktops als laptops inmiddels de standaard resolutie geworden.
De huidige versie van Hardware.Info is maximaal 1050 pixels breed. Daarin is Hardware.Info niet uniek: veel websites hebben een maximale breedte van rond de 1000 pixels, om op die manier goed te passen op (oudere) schermen van bijvoorbeeld 1024, 1280 of 1366 pixels in de breedte. Wie full-screen en zonder schaling werkt op een Full HD scherm heeft hierdoor aardig wat onbenutte ruimte links en rechts: geen wonder dat we de afgelopen jaren heel, heel vaak het verzoek hebben gekregen de site breder te maken. Goed nieuws: dat gaan we doen! Hardware.Info krijgt een maximale breedte van maar liefst 1440 pixels. Daarmee gaan we een stuk beter gebruik maken van je grote monitor.
Responsive bij Hardware.Info 7.0: drie varianten die alle meeschalen
Responsive én fluïde
Hardware.Info wordt dus geschikter voor kleinere én grotere schermen, maar voor alles wat er tussenin zit ook. Dat komt omdat de nieuwe site niet alleen responsive is, maar ook veel meer fluïde, wat inhoudt dat de site zich exact aanpast aan de gebruikte resolutie.
Hoe zit dat precies? Op dit moment, bij Hardware.Info 6.0, zijn er in feite drie versies van de site. Heb je een horizontale resolutie van 1076 pixels of meer, dan krijg je de volledige site met een vaste breedte van 1050 pixels. Heb je een horizontale resolutie van tussen de 1020 en 1075 pixels, dan krijg een variant hiervan zonder zijranden. Bij een horizontale resolutie van 768 tot en met 1019 breed krijg je wat we de “tablet versie” van de site noemen, maar ook die heeft een vaste breedte van 730 pixels. Bij horizontale resoluties tot aan 767 pixels krijg je de smartphone versie, de enige variant die met de breedte van het scherm meebeweegt.
Bij Hardware.Info 7.0 hebben we ook drie versies, maar zijn deze alle drie fluïde. De desktopversie krijg je vanaf een horizontale resolutie van 1051 pixels en schaalt dus door tot 1440 pixels. Daartussen schaalt de site naar exact de beschikbare breedte. De tweede versie, primair bedoeld voor tablets, loopt van 768 tot 1050 pixels en is ook volledig fluïde. De smartphone-versie is er voor resoluties tot aan 767 pixels, waar we resoluties vanaf 375 pixels in de breedte volledig ondersteunen. Hierbij maken we onze excuses aan gebruikers van een iPhone SE: dit is de enige nog enigszins courante smartphone waarvan de horizontale webbrowser resolutie (320 pixels) té klein is om Hardware.Info 7.0 goed weer te geven.
Vaarwel aan de tabbladen
In toekomstige updates gaan we dieper in op hoe we Hardware.Info 7.0 geschikter hebben gemaakt voor kleinere schermen, maar één belangrijk aspect doen we meteen uit de doeken: de nieuwe site heeft geen enkele pagina met tabbladen meer! Op dit moment gebruiken we op onder meer de productpagina’s en categoriepagina’s tabbladen om verschillende soorten informatie te groeperen. Deze gaan we vaarwel zeggen. In de eerste plaats zien we in onze webstatistieken dat deze tabbladen slechts matig gebruikt worden, maar bovenal is het met alle moderne mobiele apparaten simpeler om te scrollen dan tussen tabbladen te wijzigen en te wachten totdat een nieuwe pagina geladen is. Om die reden plaatsen we straks alle relevante informatie over een onderwerp op één pagina - uiteraard op een slimme manier gegroepeerd en waar nodig met interne navigatie binnen de pagina.
Hoge pixeldichtheid
Naast veel betere ondersteuning voor verschillende schermformaten, gaat Hardware.Info 7.0 ook beter gebruik maken van hoge resoluties en pixeldichtheden! Dat is goed nieuws voor gelukkige gebruikers van bijvoorbeeld laptops met een 4K-scherm. Hardware.Info 7.0 wordt volledig geoptimaliseerd voor zogenaamde high-dpi schermen. Dat is gedaan met verschillende vernieuwingen.
Allereerst zijn alle pictogrammen in de site aangepast naar het SVG-formaat, oftewel vectorafbeeldingen. Hierdoor blijven deze gestoken scherp, hoezeer ze ook worden vergroot. Datzelfde geldt voor award logo’s, logo’s van webshopkeurmerken en meer.
Om de site beter geschikt te maken voor HiDpi-schermen zijn de "teaser"-afbeeldingen in Hardware.Info 7.0 beschikbaar in resoluties variërend van 125x75 tot en met 1500x900 pixels.
Daarnaast worden foto’s op de website naast de standaard resolutie ook in 4x hogere resolutie aangeboden. Hierdoor is alles ook wanneer je je monitor op 200% schaling hebt staan, gewoon scherp in beeld. Dit geldt voor foto’s in nieuwsberichten en reviews, maar bijvoorbeeld ook voor productfoto’s en de zogenaamde teaser afbeeldingen op de frontpage en andere overzichten. Ook alle andere afbeeldingen worden geüpgradet naar hoge-resolutie-varianten: zo is je wellicht al opgevallen dat de productgroep iconen recent zijn aangepast in de huidige site: deze zijn hiermee klaar in hoge resolutie voor Hardware.Info 7.0. Ons prijsvergelijkerteam is druk in de weer om van alle aangesloten webshops ook logo’s bij Hardware.Info 7.0 in hoge resolutie te kunnen tonen. We zijn achter de schermen al enige tijd bezig foto's in hogere kwaliteit te uploaden, maar uiteraard zullen oudere artikelen soms van minder hoge resolutie beeld voorzien zijn. Alle nieuwe producties zijn echter HiDPI!
Hoe ver je ook inzoomt, alles blijft scherp doordat alle iconen in Hardware.Info 7.0 SVG's zijn.
Van alle markten thuis
Of je nu een klein scherm of een groot scherm hebt, en of je nu een normale of hoge pixeldichtheid hebt, in alle gevallen zal Hardware.Info 7.0 er mooi uitzien en bovenal gebruiksvriendelijk werken!
Over twee weken plaatsen we weer een nieuwe Hardware.Info 7.0 update en gaan we in op verschillende inhoudelijke keuzes.
