Vers Beton 3.0: vectorgrafieken, jetpacks en koelkasten

Een nieuw jaar, een nieuwe versie van Vers Beton! Van juni 2011 tot januari 2012 hadden we de zeer provisorische versie 1.0, en sinds ons eerste grote evenement in de Unie de wat volledigere versie 2.0. Nu, ruim een jaar later, is Vers Beton volwassener geworden met de in de Aanschouw gelanceerde versie 3.0. Geestelijk vader Florian Schroiff vertelt daarom onder meer over vectorgrafieken, jetpacks en koelkasten.

Wat is anders?

Nieuw ontwerp

De hele website is nog steeds responsive, dus dat de weergave zich aanpast aan het toestel dat gebruikt wordt om naar de site te kijken. Sites worden tegenwoordig namelijk – naast op desktops, laptops, smartphones en tablets – ook op phablets, koelkasten, TV’s en in auto’s bekeken. Door de site ‘vloeibaar’ te maken wordt met dit gegeven rekening gehouden.
De homepage heeft vanaf heden twee kolommen met artikelen: links de lange stukken en rechts de korte artikelen, beeldartikelen en quotes. Bovendien vind je aan de rechterkant als vanouds de meest recente reacties, tweets en de nieuwe linkdump.
In het hoofdmenu zitten (eindelijk!) een zoekfunctie en dropdownmenu’s om meer soorten content te ontsluiten. Bovendien zijn er drie nieuwe paginatypes:

• Dossiers: handmatig samengestelde verzamelingen van artikelen over een thema
• Visueel archief: een overzicht van alle (prachtige) beelden die op Vers Beton gepubliceerd worden, inclusief de gegevens van de maker van het beeld.
• Kaart: een slimme weergave in Google Maps van alle plekken in Rotterdam waar we over geschreven hebben.

Ook de artikelpagina’s zijn onder handen genomen. De opzet is ruimer, de tekst beter leesbaar, en beeld en video’s krijgen meer aandacht. Bovendien vind je naast elk artikel een printervriendelijke versie, geoptimaliseerd voor het lezen op papier en ontdaan van overbodige pagina-elementen.
In het colofon is nu duidelijk te herkennen wie van de immer uitdijende redactie waarvoor verantwoordelijk is. Ook kan er per e-mail direct contact opgenomen worden voor het doorgeven van alle klachten én lof.
Verder nog wat kleine visuele toefjes en foefjes:

• In WebKit-browsers (zoals Safari en Chrome) krijgen de avatar-plaatjes naast reacties en tweets de vorm van het Vers Beton-hexagon
• De oogjes naast de ‘lees meer’-knoppen zijn geïnspireerd op de 10.000 eyes-campagne
• Het Vers Beton-logo en de betonmolen (beide gemaakt door topillustrator, -vormgever en -moeder van onze vier maanden oude zoon Eva Lindeman ) onderin de site  zijn in moderne browsers opgebouwd uit vectorgrafieken, waardoor ze oneindig opgeblazen kunnen worden zonder ooit onscherp te worden. Dit zorgt ervoor dat beide ook op schermen met een hoge resolutie optimaal worden weergegeven.

Nieuwe techniek

(nerd alert) Het CMS is nog altijd WordPress. Bij veel van de nieuwe functies (redactie, dossiers, geotags) maak ik gebruik van de absoluut geniale Advanced Custom Fields-plugin. Een andere belangrijke plugin is Jetpack, die er onder meer voor zorgt dat onze – deels zeer grote plaatjes – razendsnel vanuit de WordPress.com-cloud geladen worden.
De layout van VB3.0 is gebaseerd op Twitter Bootstrap. Ik heb veel moeite gedaan om de site niet te Bootstrap-achtig eruit te laten zien, en blijkbaar met succes.

@fschroiff Alle reden toe! Voor het eerst eens een Bootstrap website die geen Bootstrap uitstraalt 🙂
— Rutger Laurman (@lekkerduidelijk) February 22, 2013

Om nieuwste browserfuncties optimaal te benutten zonder oude browsers helemaal te vergeten, maakt VB3.0 gebruik van modernizr. Moderne browsers krijgen .svg vector-grafieken, oude browsers een snode .png.
De hexagon-kaders van de avatars zijn ook .svg’s. Deze zijn alleen in WebKit te zien omdat alleen WebKit de CSS-waarde ‘mask-image’  snapt.
De fonts (Proxima Nova in allerlei variaties) worden via Typekit ingeladen. Voor icoontjes maak ik gebruik van zelf gehoste Symbolset-icoonfonts.
De Twitterfeed (zoals op de homepage) is met Chirp.js gerealiseerd, de nieuwe slideshow-functie met View.js. Beide zijn afkomstig van ene Rogie.
Nieuwe metatags in de header zorgen ervoor dat artikelen die op Facebook gedeeld worden er nog mooier uitzien. Bovendien heeft Vers Beton sinds kort Tweet Cards’, wat betekent dat een mooie samenvatting verschijnt als een Vers Beton-artikel op Twitter gedeeld wordt.

En verder?

Ja, het moet altijd verder gaan… In de 6 dagen dat de nieuwe site in de lucht is heb ik al een aantal wijzigingen doorgevoerd. Een goed voorbeeld zijn de nieuwe editor-kopjes voor reacties, wat gebeurde dankzij een reactie van een lezer. Zulke input is daarom zeer welkom, al lukt het niet altijd (meteen) om alle ideeën te implementeren.
Lang niet alle wijzigingen zijn direct zichtbaar. Zo komen sommigen alleen een verbeterde performance of snellere laadtijd ten goede.
Oftewel: de site is nog lang niet af. Een goede website is namelijk altijd in flux. Wat er nu in ieder geval is, is een goede basis waar we lang mee vooruit kunnen.