Ga naar de inhoud

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.

Inception


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.

Gerelateerde inhoud

Steun onafhankelijke journalistiek

Als abonnee van Vers Beton kun je alle artikelen onbeperkt lezen en delen met je eigen netwerk. Je bent al lid vanaf € 7,50 per maand, de eerste maand lees je gratis.

Misschien vind je dit ook interessant

  • Met kleine stapjes bewegen we samen van Big Tech weg

    • Vers Beton

    Commentaar We zijn niet de enige die moeite hebben met de huidige tech-infrastructuur, zo bleek…

  • Wat gebeurt er met Vers Beton als we vandaag Instagram en Facebook zouden verlaten?

    • Vers Beton

    Wat gebeurt er als Vers Beton Instagram en Facebook zou verlaten? Komen we dan nog bij jou onder de aandacht? Weten nieuwe lezers ons nog te vinden? Wij zijn niet de enige die hiermee worstelen. Misschien verlies jij ook je (vage) contacten nu iedereen massaal overstapt naar andere platforms of er helemaal van verdwijnt. Wat gaan we daar aan doen?

  • Het Grote Vers Beton Jaaroverzicht van 2024

    • Vers Beton

    Wat gebeurde er zoal in 2024 in Rotterdam? Waar schreef Vers Beton over en welke impact hebben we gemaakt? En ook: hoe vergaat het onze eigen organisatie? Hoofdredacteur Eeva Liukku blikt terug.

  • Alle artikelen

De Stadsagenda

  • Over zichtbaarheid, invloed en toekomstkracht: Vrouwen in Architectuur keert terug! Met inspirerende panels, tours en workshops verken je hoe onderzoek, representatie en praktijk kunnen bijdragen om de positie van vrouwen in de architectuur te versterken. Denk mee en bouw mee aan een inclusiever vakgebied.

    Venue: Festivalhart Schiemond
    Datum:
  • Rotterdam is een belangrijke broedplaats voor zowel jonge als gevestigde ontwerpbureaus, die samen aan allerlei complexe lokale, nationale en internationale ruimtelijke vraagstukken werken. Tijdens de Open Bureaudag loop je vrij rond bij alle bureaus en maak je kennis met innovaties, experimenten en vernieuwing in de ontwerppraktijk.

    Venue: Verschillende bureaus in Rotterdam
    Datum:
  • Kom langs en beleef de ruwe schoonheid van Festivalhart Schiemond – van modder uit de Maas tot duurzame bouwexperimenten en zomerse vibes aan het water.

    Venue: Festivalhart Schiemond
    Datum:
  • Bekijk de agenda

De leukste vacatures in en om Rotterdam