Website onder de loep: www.beslist.nl (nieuwe website)

Omdat Beslist.nl een behoorlijk grote site is, vind ik het absoluut de moeite waard om hier een stukje over te schrijven. Een real-life voorbeeld van hoe het niet moet werkt vaak heel goed.

Ik heb begrepen dat de frontend van de nieuwe site van Beslist.nl grotendeels herschreven is.

In mijn post over CSS best practice schreef ik over een tweetal website die erg op elkaar leken en dingen hadden als float left  en float right.

Hoogst waarschijnlijk hebben de frontend developers bij Beslist.nl deze post niet gelezen. Wat ik zag? Zie je nu:

Default CSS-file

Wat zie ik?

Iets wat me gelijk opvalt is dat er geen globale of common CSS-file is.
Een gemiste kans. Waarschijnlijk dacht de auteur van de stylesheet dat er maar 1 pageview per bezoeker is. Ik vrees voor hem dat een site als beslist.nl dat niet heeft. De stylesheet wordt dus niet gecachet. Ja wel voor een volgend bezoek, maar niet voor de volgende pageview.

Optimalisatie dan, minder http requests?

Nee, dat zou ik niet denken. Omdat er wel veel IE-gerelateerde JavaScript-files zijn. Maar wellicht is dat het idee hierachter. Als je verder kijkt, naar de default.js, dan zie je inderdaad dat alles aan elkaar geplakt is. SWFobject aan jquery vast. Interessant idee. Wat jammer is hieraan, de code is niet geminimaliseerd (minified) (140 KB). Dat zou je wel willen als je alles aan elkaar plakt.

Als je verder kijkt in de code, dan zie je pas de echte rans.

Allereerst heb je een div met als id CenterBox en als class CenterBox_wide.
Het id heeft geen css-properties, maar de classname wel. Het begint al goed… width: 1222px !important.
Met een redesign moet je altijd proberen om dingen zo goed mogelijk op te zetten. !important is een teken van “ik weet het ook niet meer, dan maar dit”

Als eerste element binnen de CenterBox komt een div met als class absolute… Mmm dat doet toch niet waar ik bang voor ben wat het doet?
HELAAS! Wel dus. Oh en laat ik de inline style niet vergeten! brrr.. Dit begint op tijdsgebrek te lijken..

Maar ja, slechter dan dit kan het niet worden toch?
JAWEL! Binnen in die absolute div, zit een spacerdiv.. met een   om wat ruimte te maken van de rechterkant?
Ik begin me nu langzaamaan af te vragen, hoeveel tijd er in is gestoken.. In mijn jaren als frontend developer is me duidelijk geworden dat je niet moet bezuinigen op frontend. Daar ga je uiteindelijk op af.

Ok, laten we dit even negeren en een flink aantal regels naar onder springen…

Ja hoor. Ook daar. Beslist.nl gebruikt een soort CSS-reset. Alle elementen waar standaard een style aan hangt worden gereset. Een goed idee, absoluut!
Maar om dan een <p> te vinden waar een class nomargin aan gekoppeld is? Mijn god!
En de margin: 0 property, heeft ook nog eens een !important!

mm nu voel ik toch die negativiteit terugkomen :(

Ja hoor.. NOG ERGER! pr5, pl5, ml5? JA JUIST! padding-right: 5px, padding-left: 5px, margin-left: 5px…
Leuk als je merkt dat je iets toch 10 pixels padding wil geven. Waarschijnlijk wordt er in dit geval een inline style gebruikt om dit tet fixen.

Wat zou het moeten zijn?

Dingen die erg common zijn, zoals het menu, de footer, paginering, knoppen en blokken die op meerdere pagina’s voorkomen zou je eigenlijk in een common stylesheet willen prakken. Bij een eerste bezoek wordt ‘ie dan ingeladen en bij een volgende pageview wordt ie uit de cache gehaald.

Verder is het verstandig zoveel mogelijk aan CSS over te laten. Heb je elementen, bijvoorbeeld een statische balk rechts?

Doe dan zoiets:

<div id="static-bar">
  <h1>Mijn Beslist</h1>
  <div class="accordion">
    <h3>Algemeen</h3>
    <div>
      content ...
    </div>
  </div>
</div>

<style type="text/css">
  #static-bar {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 250px;
  }
  #static-bar h1 {
    color: #fff;
    background: #1999ca;
    height: 30px;
    line-height: 30px;
  }
  ...
</style>

Je zal zien dat je met deze aanpak veel schonere html hebt, veel duidelijkere css. En je zal ook zien dat je veel minder nodig hebt!
Ik denk dat mijn CSS best practice een hoop duidelijk maakt!

Conclusie

De nieuwe site van beslist is qua frontend slecht, er zijn geen andere woorden voor.
Er is te weinig tijd in gestoken en de persoon verantwoordelijk voor deze frontend is waarschijnlijk te licht voor deze taak.

Nieuwe ronde nieuwe kansen?

Speak Your Mind

*