Responsive website voor Stichting Onderwijsarbeidsmarkt MBO

Afgelopen tijd is Integrace druk bezig geweest met de realisatie van een responsive website voor de Stichting Onderwijsarbeidsmarktfonds MBO. SOM is een interactief platform in de MBO-sector waar werkgevers en werknemers zich samen inspannen voor een vruchtbare toekomst van het MBO.

Een belangrijk richtpunt van de stichting is het leggen van verbindingen tussen de verschillende MBO instellingen. De MBO-sector omvat alle agrarische opleidingscentra (AOC’s), regionale opleidingscentra (ROC’s) en vakscholen. Met de inspanningen van de stichting wordt gestreefd naar een optimaal klimaat binnen de sector voor het ontwikkelen en uitwisselen van theoretische en praktische kennis. Ook het in gang zetten van discussies over relevante vraagstukken binnen de sector is een ambitie van SOM, waarbij de stichting bijdraagt aan visievorming en een platform voor vernieuwende ideeën biedt.



Website

De nieuwe website van SOM bevat een homepage opener met bewegende fotorol. Op de homepage zijn een nieuws feature en een contentveld met informatie over de stichting gerealiseerd. Ook is er de mogelijkheid voor bezoekers om zich in te schrijven voor de nieuwsbrief en is er een poll met een door SOM te bepalen onderwerp. Onderaan alle pagina’s van de website worden een twitterfeed in het design van de website en een agenda feature weergegeven. Belangrijk aspect van de uitgebreide website is dat deze volledig responsive is ontworpen.



Responsive Web Design

Responsive webdesign (RWD) is een aanpak waarbij getracht wordt één website te ontwerpen die optimaal bruikbaar is op verschillende schermgrootten. Aangezien het gebruik van mobiele apparaten voor het bekijken van website afgelopen jaar aanzienlijk is gestegen, is het van belang dat een website ook op mobiele apparaten goed te ontvangen is. Een manier om dit te realiseren is om een mobiele website te bouwen, echter wordt een mobiele website opgezet voor één mobiel apparaat. 

 

In dat geval zou er dus voor iedere smartphone of tablet een aparte mobiele website gebouwd moeten worden om optimale gebruikservaring te creeëren. Responsive web design biedt hierin een uitkomst, omdat dit het mogelijk maakt één website te ontwikkelen die op elke grootte optimaal te bekijken is. Dit is mogelijk door het design flexibel te maken, met behulp van flexibele grids en afbeeldingen, CSS3 media queries, en breakpoints wanneer de browser kleiner wordt gemaakt of wanneer de site op een ander apparaat wordt bekeken.


Hierboven een simpel voorbeeld van de werking van een responsive website. Wanneer de website op een groot scherm wordt bekeken worden de side menu’s naast de content weergegeven. Wanneer de resolutie van het apparaat kleiner wordt, wordt het content veld kleiner, totdat deze niet optimaal meer te lezen is. Op de breekpunten worden de side menu’s naar beneden verplaatst zodat de content optimaal zichtbaar blijft.

SOM MBO responsiveness

Responsive webdesign toegepast op de website van SOM