Nieuws overzicht

Vinkje voor responsive Connexxion

Met gelaagd hamburger menu

Datum publicatie: 24-12-2015

Met 1,5 miljard reizigerskilometers zijn de klanten van Connexxion veel onderweg. Connexxion vroeg ons daarom hun sites aan te passen op gebruik met smartphones. Maar ook aan de desktop gebruikers wordt gedacht. Voor hen ontwierpen we nieuwe CSS-animaties: van kruisje naar vinkje bijvoorbeeld.

Makkelijk laden

Op basis van een flink aantal uitgangspunten is de site van Connexxion nu helemaal aangepast voor de mobiele gebruiker en desktop gebruiker tegelijk. Connexxion.nl, Breng.nl, OvregioIJsselmond.nl en Hermes.nl zijn adaptive en fluid responsive. Bovendien zijn ze makkelijker te laden, wat voor de mobiele gebruiker wel zo prettig is.

Design naar techniek

Connexxion heeft om te beginnen de ontwerpers van Puurpxl gevraagd een nieuwe design te maken in samenwerking met ons. Vanuit Netivity zorgden we vervolgens dat dit nieuwe design werd omgezet naar een interactieve, responsive front-end. Hiervoor gebruikten we verschillende technieken zoals bootstrap framework, LESS, Gulp en AJAX.

Skins

We werkten voor Connexxion onder andere met skins. De verschillende concessieverleners waarvoor Connexxion het openbaar vervoer verzorgt, hebben zo allemaal hun eigen huisstijl kleuren. Door skins te gebruiken heeft de site overal dezelfde functionaliteiten en interactie, maar wel met een eigen look and feel.

Font en vector

Ook hebben we ervoor gekozen de icoontjes zoals de pijltjes op de site niet met een afbeelding weer te geven, maar als font in een vector format. Voordeel is dat afbeeldingen elke keer afzonderlijk moeten worden ingeladen en de fonts niet, wat dus laadtijd scheelt. Bovendien is een font als vectorbestand meer compatible met diverse browsers en is het in elk formaat scherp. Een belangrijk voordeel voor een site die gemaakt is met het oog op adaptive- en responsiveness.

Navigatie

De navigatie op de site zowel voor mobiel als desktop heeft bij ons nog eens extra aandacht gekregen. We wilden graag in aansluiting op het design van Puurpxl ook bijdragen aan het uitnodigende karakter van de site van Connexxion. We hebben daarom het menu onder handen genomen.

Gelaagde hamburger

Het zogenoemde hamburger menu (de drie horizontale streepjes) dat nodig is bij navigatie op de site bij gebruik op een smartphone of tablet, is meerlaags opgebouwd en dat is relatief nieuw. Ook bij de nieuwe site van fonQ wordt dat gebruikt. Binnen het menu kan verder worden verfijnd zonder dat er meteen een nieuwe pagina verschijnt. Bezoekers hoeven minder te klikken en zoeken, waardoor het tijd scheelt en prettiger is in gebruik.

Animaties

Vooral kenmerkend voor de hele aanpak van de site zijn misschien nog wel de door onszelf ontworpen CSS-animaties. Omnichannel gedacht willen we voor deze mobile first georiƫnteerde site ook op desktop een zelfde soort prettige ervaring.

Vinkje

Het 'loepje' bij het zoeken, het 'plusje' voor het uitklapscherm en het 'kruisje' voor bijvoorbeeld het cookie-akkoord, animeren nu op de homepage. Het 'kruisje' wordt bijvoorbeeld een 'vinkje', wat al zichtbaar is als je er met je muis overheen gaat (hooveren).

Mening

Connexxion vraagt zijn klanten om hun reactie op de nieuwe site. Laat vooral weten wat je er van vindt!


Nieuws overzicht
Meer weten?

Heb je vragen of wil je meer weten over en van onze producten?

Neem contact op
Kom jij werken bij Netivity?
5  vacatures

Wij gebruiken cookies om het gebruik van de website geanonimiseerd te analyseren.
Meer weten? Bekijk onze cookieverklaring.

Sluit melding