Vers & Vloeibaar

Hi, ik ben Florian Schroiff, webdesigner. U kent mij misschien van We Own Rotterdam, een ander Rotterdam-gerelateerd project waar ik aan meewerk. Voor de officiële launch van Vers Beton heb ik in de laatste maanden een nieuw jasje en nieuwe functionaliteiten voor deze website gebreid. Dit verhaal wordt een beetje technisch, maar misschien vindt u dit even interessant als ik.

Vloeibaar grid

De grootste verandering is het gebruik van een vloeibaar grid. Als u uw browservenster groter en kleiner maakt kunt u zien wat ik bedoel: de website groeit en krimpt met het venster mee. Dit betekent dat de site op smartphones, tablets, laptops en desktops ideaal weergegeven wordt en overal goed leesbaar is.
Voor de technisch geïnteresseerde mensen: ik gebruik als basis het 320 and up framework. De schaalbare slider heet “Dynamic Carousel”. Voor het schalen van video’s wordt fitvids.js ingezet.

Logo
Het nieuwe logo is een strak, staalblauw stencil. De vorm is afgeleid van de betonmixertruck, en refereert door de stencilletters aan de bouw, de haven en aan oude emaille borden. Het kleurpalet is industrieel, recht door zee en fris.
Ontwerper Eva Lindeman heeft drie versies van het logo gebouwd, plus een vignet. Twee versies worden op deze site ingezet: een kleinere voor de mobiele weergave en een grotere voor de desktop weergave. Naast het logofont (Geogrotesque Stencil van Emtype) koos zij ter versterking van de Vers Beton-identiteit het lettertype Proxima Nova. Door de grote letterfamilie leent dit font zich perfect voor het ‘zetten’ van deze website. Daarnaast heeft het de juiste scherpte voor een Rotterdamse nieuwssite.

Typografie
Op deze site worden webfonts ingezet die via Typekit en vanuit onze eigen server ingeladen worden.
Typekit levert verschillende gewichten van Mark Simonsons geweldige superfamily Proxima Nova, met name de Proxima Nova Extra Condensed Bold Italic en Regular voor de markante koppen en de gewone Proxima Nova voor de broodtekst.
De icoontjes die op verschillende plekken ingezet worden zijn ook een webfont, Pictos van Drew Wilson. Praktisch voor mij: ik kon tijdens het ontwikkelen van de site met allerlei kleuren en maten van de iconen spelen zonder er telkens weer een plaatje van te moeten maken. Praktisch voor u: tijdens het openen van de site wordt slechts één webfontbestand geladen (in plaats van talloze plaatjes).
Voor het laden van de fonts maakt de site gebruik van de door Typekit en Google in samenwerking ontwikkelde Webfont Loader. Dit geeft mij meer controle over het eindresultaat en de mogelijkheid om maatregelen te treffen als de fonts een keer niet geladen kunnen worden.

Structuur
Op de overzichtspagina’s (waar meerdere artikelen tegelijkertijd te zien zijn) wordt in de toekomst meer van korte introducties gebruik gemaakt. Om het hele artikel te lezen wordt u verzocht om door te klikken naar de artikelpagina.
De artikelpagina bevat alleen nog maar de inhoud en de reacties. Oftewel: geen afleiding en een rustige leesomgeving. Het is een handige manier om onze langere stukken nog een keer te herlezen.
Ons blogsysteem WordPress biedt sindskort de mogelijkheid om verschillende inhoudstypes op verschillende manieren vorm te geven. Hiervan wil de redactie in toekomst meer gebruikmaken. Ik heb voor de verschillende inhoudstypes verschillende icoontjes ingezet:

• Standaard = Ster
• Korte melding = Bliksem
• Video = Camera
• Foto = Oog
• Galerie = Plaatjes
• Link = Wereldbol
• Quote = Aanhalingstekens

Zoekfunctie
Die is er nog niet echt, maar komt eraan. Wel krijgt u een zoekveld te zien als u een niet-bestaande pagina probeert te openen.

Compatibiliteit
In de laatste versies van Internet Explorer, Firefox, Chrome en Safari werkt alles prima. Ook in de voorgaande versies van deze browsers blijft de site bruikbaar. Als u Javascript uit hebt staan is alles veel minder mooi, maar blijft de site toch 100% leesbaar. Ook doen de meeste functies het dan nog.
Lof en klachten? Ik lees ze graag in de reacties. Als het om ingewikkelde technische klachten gaat kunt u beter een e-mail sturen aan [email protected].
Hopelijk geniet u met deze nieuwe website tijdens het lezen net zo veel als ik tijdens het bouwen hiervan.