Responsive design in Magento 2

categorie / Blog / Kennisdeling / Magento 2

Magento 2 uitgelicht – what’s new?

Dit is het tweede artikel in onze serie over Magento 2: de nieuwste versie van het e-commerce pakket dat wij als basis gebruiken bij het ontwikkelen van webshops. In ons vorige artikel hebben we de verbeteringen en toevoegingen van het beheerpaneel op een rijtje gezet. Deze week willen we graag wat meer uitleggen over het nieuwe responsive design dat Magento 2 heeft gekregen. Responsive design houdt in dat de weergave en grootte van een website zich automatisch aanpassen aan de vorm en grootte van je scherm. Dezelfde website ziet er dus anders uit op een smartphone dan wanneer je ‘m op een laptop bezoekt. Als dat niet gebeurt, worden de teksten al snel onleesbaar vanaf een smartphonescherm en moet je eindeloos veel scrollen en zoeken om bij de juiste informatie te komen. Niet handig. Dat moeten de ontwikkelaars van Magento ook gedacht hebben.

Responsive design in Magento

De vraag naar beter werkende templates voor mobiele apparaten bestond al enige tijd. Zo werd er al eens een thema speciaal voor mobiel gebruik ontwikkeld en werd er bij Magento 1.9 responsive webshop Madison Island gelanceerd. Het voordeel van een responsive thema is dat op elk apparaat dezelfde code kan worden ingeladen. Hierdoor kunnen dezelfde functionaliteiten behouden worden en hoeft er maar één omgeving onderhouden worden. Dat scheelt tijd en geld. Het enige nadeel is dat er soms overbodige data worden ingeladen die misschien niet op alle schermen nodig zijn. Dat kan van invloed zijn op de snelheid. Wanneer je twee verschillende versies van je webshop maakt, dus één voor desktop en één voor mobiel gebruik, heb je dat probleem niet. Het maakt de webshop ook gebruiksvriendelijker, omdat de code speciaal voor dat apparaat ontwikkeld is. Maar het brengt natuurlijk wel weer extra kosten met zich mee. Toch is bij de ontwikkeling van Magento 2 voor responsive design gekozen.

Technische verschillen tussen Magento 1 en 2

De gebruiksvriendelijkheid van Magento is met versie 2.0 enorm vooruitgegaan. Ten eerste: het beheerpaneel is vanaf nu ook te gebruiken vanaf een mobiel apparaat. Een hele verbetering! En hiernaast zijn er nog een aantal belangrijke verschillen tussen Magento 1 en 2. We hebben ze voor je op een rijtje gezet.

Mobile first

Magento 2 is ‘mobile first’ ontworpen. Mobile first is een benadering voor het ontwikkelen van websites en webshops. Het wil zeggen dat de ontwikkeling is begonnen voor apparaten met een klein scherm, met alleen de belangrijkste functionaliteiten erin. Vanuit hier worden versies voor grotere schermen ontworpen, die natuurlijk steeds rijker worden omdat er meer content en functionaliteiten op het scherm passen. Door mobile first te ontwikkelen, kan voor ieder type scherm een gebruiksvriendelijke versie van de website weergegeven worden.

Breakpoints

Magento 2 heeft andere breakpoints ten op zichte van Magento 1. Een breakpoint is een breedtemaat in pixels waarop een responsive website van indeling aanpast. Daarmee kun je dus voor elk formaat scherm de beste indeling ontwerpen. Magento 2 heeft zes standaard breakpoints, waar Magento er maar 5 had. Ook is de grootste breakpoint groter en de kleinste breakpoint kleiner dan in Magento 1. Meer verschillende schermen kunnen daarmee dus bediend worden. Overigens kunnen er handmatig custom breakpoints toegevoegd worden, indien gewenst. Voor elk scherm dus een passende webshop!

CSS pre-processor

CSS is de code die gebruikt wordt voor de opmaak van een website of webshop. Een CSS pre-processor is een computerprogramma waarmee ontwikkelaars CSS code kunnen genereren, organiseren, hergebruiken en onderhouden. Het kost hierdoor minder tijd om aanpassingen in een ontwerp te maken. In Magento 2 wordt de pre-processor LESS gebruikt; een verbetering ten opzichte van Magento 1. Met LESS kunnen we voor elk formaat scherm, en dus elk type apparaat, een apart CSS bestand genereren. Hierdoor hoeft het volledige CSS bestand niet op smartphones ingeladen te worden. Dat resulteert dus in een kortere laadtijd!

Magento 1.9 vs. Magento 2.0

Laten we de vergelijking tussen Magento 1 en 2 in de praktijk gaan maken. Magento 1.9 bevatte het responsive thema Madison Island voor webshops. Magento 2.0 bevat het Luma thema. Het grootste verschil is dat het Luma thema mobile first is ontwikkeld. Madison Island is dat niet; dat is eerst voor desktop ontwikkeld en vervolgens is daar code aan toegevoegd om weergave op mobiele apparaten te ondersteunen. Dat resulteert vooral in een iets betere User Interface en User Experience, een hogere snelheid en een snellere laadtijd van de pagina’s. Toch presteert Madison Island prima. De header met alle productcategorieën past zich goed aan aan schermgroottes, de producten worden goed weergegeven op smartphones en bij het afrekenen zijn alle belangrijke pagina-onderdelen altijd zichtbaar. Niet onbelangrijk, want ook op de allerlaatste stap in het bestelproces kan er afgehaakt worden als de werking niet optimaal is. Bij het Luma thema is dit duidelijk het uitgangspunt geweest. Zo wordt het menu met alle productcategorieën pas actief als het gebruikt wordt en worden de productafbeeldingen pas groot ingeladen op het moment dat je erop in wilt zoomen. Ook de elementen op de check-out pagina worden pas geladen op het moment dat je hiernaar doorklikt. Allemaal om de laadtijd van de pagina’s kort te houden en de snelheid hoog.

Conclusie

Beide Magento theme’s zijn uitermate geschikt om als basis te gebruiken voor een eigen custom theme. Maar het verschil in focus op mobile is wel duidelijk: Het Luma thema biedt ‘out of the box’ net iets meer dan het Magento 1 thema Madison Island. De content wordt een stuk overzichtelijker weergegeven op zowel mobiele apparaten als op een desktop. En er is meer eenheid in de wijze waarop content wordt geboden, waardoor een bezoeker dezelfde beleving ervaart op verschillende apparaten. Magento 2 haakt hiermee goed in op de trend in de markt, want kopen via mobiel wint flink terrein. Daarnaast heeft de ‘mobile first’ ontwikkeltechniek bij Magento 2 niet alleen gezorgd voor een betere User Interface en User Experience, maar ook voor een hogere snelheid en laadtijd van de webpagina’s. Dat alles vertaalt zich uiteindelijk tot een hogere conversie. En dat moet reden genoeg zijn!

Hebben we jouw interesse gewekt?

We vertellen je graag meer over de mogelijkheden onder het genot van een goede kop koffie!

Neem contact op

Hebben we jouw interesse gewekt?We vertellen je graag meer over de mogelijkheden onder het genot van een goede kop koffie!

Jorden van den Beuken account manager
Giwanni Schaap account manager