Stema Systems
De nieuwe website van Stema Systems is deels ontwikkeld door Qombine. De site biedt onder andere informatie over producten en projecten van het bedrijf.
- Bezoek website van Stema Systems
- Back-end gemaakt door: NOESTE IJVER
- Ontwerp gemaakt door: Ontwerp van Morgen
De nieuwe website van Stema Systems is het resultaat van een samenwerking tussen Ontwerp van Morgen, NOESTE IJVER en Qombine. De website is op 1 september 2015 gelanceerd.
Stema Systems is gespecialiseerd in de ontwikkeling, productie en levering van hoogwaardige meetsystemen voor hydrografie en oceanologie. Het hoofdkantoor van het bedrijf is gesitueerd in Geldermalsen. Op de nieuwe site staan de producten van Stema Systems centraal, maar er is ook ruimte voor bijvoorbeeld informatie over projecten, ondersteuning, partners en vacatures.
Ontwikkeling
Het uiterlijk van de site is ontwikkeld door Ontwerp van Morgen. Hierbij is uitgegaan van de huidige huisstijl en het bestaande logo van Stema Systems. Wel is de huisstijl uitgebreid, de vier verschillende productcategorieën (geophysical, hydrograhy, positioning en environmental) hebben ter identificatie bijvoorbeeld een eigen kleur gekregen.
Aan de hand van het uitgewerkte ontwerp is Qombine vervolgens aan de slag gegaan met de ontwikkeling van de website. Zoals gebruikelijk is het Bootstrap-framework als basis gebruikt. Het gebruikelijke menu is echter vervangen door Yamm 3, een megamenu. Qombine heeft dit menu gemodificeerd, zodat het -zoals ontworpen- over de gehele breedte van de site wordt getoond, in plaats van alleen over de breedte van de container. Aan de rechterzijde van de site is een tweede menu verborgen, met een klik op de oranje knop schuift dit menu tevoorschijn. Natuurlijk is deze website responsief en daarmee dus ook geschikt voor smartphones en tablets.
Nadat het leeuwendeel van het werk van Qombine voltooid was, is NOESTE IJVER aan de slag gegaan met de koppeling met WordPress. Hierbij is onder andere gewerkt aan de mogelijkheid om de website in meerdere talen te gebruiken, ook is de invoer van de producten van Stema Systems via een geautomatiseerd proces mogelijk gemaakt. Voor de slider op de hoofdpagina is gebruikgemaakt van de Master Slider, mede omdat deze plugin ondersteuning biedt voor hotspots en navigatie met sleepbewegingen. Dat laatste is vooral handig in combinatie met touchscreens.
Gebruikte technieken
Voor de vormgeving van de website heeft Qombine voor het eerst op grote schaal gebruikgemaakt van LESS, een extensie op CSS. LESS geeft ontwikkelaars onder andere de mogelijkheid om variabelen en functies in CSS te gebruiken. Op deze manier zijn bijvoorbeeld de kleuren per productgroep relatief eenvoudig in de stylesheet van de website geïntegreerd. Het gebruik van LESS was een hele ervaring, voor een volgend project is besloten om tegenhanger SASS een kans te geven.
De site bevat verschillende formulieren. Om te controleren of bezoekers de benodigde informatie invullen is de jQuery-plugin FormValidation ingebouwd. Deze plugin kan in realtime valideren en feedback geven.
Qombine maakte naast LESS voor dit project ook gebruik van de programmeertalen HTML, JavaScript en PHP.
