OnePageTileDesign Homepage

Maximaal 1 click verwijderd van alle belangrijke informatie op uw website! 

Vanaf het begin van het internet worden websites gemaakt zoals honderden jaren er voor een krant werd gemaakt: verticaal. In plaatst van met een schone lei te beginnen en voor het nieuwe medium internet een nieuwe vorm van publiceren te ontwikkelen werd er al snel gekozen om de verticale manier van nieuws overbrengen te continueren. 

De meeste websites verticaal opgebouwd en hoe meer content er wordt gedeeld via een website hoe meer je naar beneden moet scrollen om alles te bekijken. Van de bezoekers bekijkt 99% de website op een horizontaal georiënteerde display om verticaal gepubliceerde content te bekijken.

Om het de bezoeker van de website nog moeilijker te maken om meteen de belangrijkste inhoud van een website tot zich te nemen zijn er in de loop van de tijd een heleboel elementen toegevoegd aan de homepage. Elementen die er voor zorgen dat er boven de z.g.n. ‘paginavouw’ vaak een heleboel niet relevante informatie te zien is.

Boven de paginavouw vindt de bezoeker in 99,99% van de websites een logo, het menu, USP’s, een zoekvenster, soms banners en vergeet vooral ook niet de slide shows met foto’s. Alles bij elkaar neemt dit vaak minstens 66% van de ruimte van de website boven de paginavouw in beslag.
De werkelijk inhoud waar de bezoeker voor naar de website komt wordt pas zichtbaar na een actie van de bezoeker.

Na meer dan 200 websites te hebben gemaakt begon ik me steeds af te vragen of dit niet anders kon. 

Kan je essentiële informatie van een bedrijf niet heel snel tonen en allemaal in een keer boven de paginavouw?

Is het mogelijk om standaard elementen zoals het menu en de slider te verwijderen of op een andere manier toe te passen of te tonen? 

Hoe zou het ontwerp van een website gemaakt worden als er nooit kranten of andere media die verticaal georiënteerd zijn hadden bestaan?

Mijn insteek was om alles te proberen te vergeten wat ik wist van het publiceren van content en met een compleet wit blad te beginnen. Mijn doel was om een homepage te ontwerpen waarop alle essentiële content in een keer te zien zou zonder actie van de bezoeker.

Meerdere keren zat ik voor een wit A4tje en begon ik met schetsen maar vaak kwam ik niet verder dan een paar vierkantjes naast en onder elkaar. Omdat ik ook niet echt een hele geweldige ontwerper ben strandde deze pogingen vaak snel. Na een aantal pogingen dacht ik dat het wellicht onmogelijk was om een functionele homepage te maken die er ook nog eens geweldig uitziet. Het idee was er dus wel alleen de vorm waar in dit idee moest worden gegoten was er nog niet.

Tot de keynote van Apple op 20 april 2021. Daar vond ik de vorm waar mijn idee in gegoten kon worden. Na elke product presentatie werd er een soort van overzicht getoond van alle specificaties van dat product. 

Deze specificaties werden getoond in een matrix van 6 rijen (horizontaal) en 9 kolommen (verticaal). Door dat het breder was dan hoog was dit een geweldig uitgangspunt voor het ‘OnePageTileDesign’.  Als Apple alle specificaties van een nieuw product kwijt kon in deze matrix dan zou dit ook wel voldoende zijn voor een gemiddelde website om al hun belangrijkste informatie te delen.

Als eerste bouwde ik 1 van de spec-sheets van Apple na in HTML en CSS om te kijken of ik dezelfde rijen en kolommen indeling kon maken met Bootstrap. Bootstrap gebruik ik normaal ook om een website responsive te maken.

Want buiten dat de nieuwe ‘OnePageTileDesign’ homepage er geweldig uit moest zien op laptops en desktops computers moest de homepage ook op mobiele telefoons en tablets logisch gepresenteerd kunnen worden.

Nadat het na enige inspanningen lukte om een matrix te maken van 54 tegels en deze perfect in hoogte en breedte te tonen op alle schermen van mobiele telefoon tot desktop met een 4K scherm. Tijd voor een echte test. Mijn bedoeling was om alles wat belangrijk is op de website van BrandNewFresh.com in een keer te tonen op de ‘OnePageTileDesign’ homepage.

Ik maakte ook nog opzet 2 en opzet 3 om te kijken wat de mogelijke indelingen van het matrix konden zijn.

Ik begon in het midden bovenaan met een blok van 3 x 3 tegels voor ons logo en onze tagline. Daarna begon ik alle onderdelen die het meest bekeken worden op onze website op een logische plaats in de matrix te zetten.

Daar waar ik zelf geen goed ontwerp kon verzinnen ben heb ik de vormgeving die de vormgevers van Apple hadden ontworpen als basis gebruikt.

Na een middag puzzelen hadden alle belangrijke onderdelen een plaats gekregen in het matrix. Vervolgens  begon het uitzoeken van de lettergroottes van de koppen en de kleinere teksten op de verschillende schermbreedten en -hoogten.

Na een snelheidstest met Google’s PageSpeed Insights deed werd ik nog enthousiaster. Scores op Mobiel (91/100) en Desktop (91/100) waar menig design een puntje aan kan zuigen.

Tenslotte
Is dit werkelijk de beste manier om een homepage te maken en alle zonder klikken en scrollen belangrijke informatie al bezoekers te presenteren?
Zou een homepage er zo uitzien als we geen honderden jaren geschiedenis zouden hebben van vertical content presenteren aan lezers?

Is dit een manier van content presenteren die helemaal in dienst staat van de bezoeker i.p.v. eindeloze teksten voor SEO voor Google of Sliders of andere informatie waar geen bezoekers eigenlijk naar kijkt maar die we maar plaatsen ‘omdat de andere websites dit ook doen’?

Ik ben benieuwd of andere website bouwers of website eigenaren net zo enthousiast worden van dit idee als ik.

Zouden er websites zijn met nu een reguliere homepage die niet door deze opzet vervangen zou kunnen worden?

Ik ben benieuwd, quin@brandnewfresh.com