Stabiele basis met Magento 2 en SCSS

Css vormt samen met html de basis van de voorkant van je Magento Enterprise shop en met de komst van Magento 2 is het gebruik van een CSS Preprocessor onvermijdelijk. Een CSS Preprocessor is een techniek die het managen van CSS bestanden gemakkelijker maakt door middel van het gebruik van bijvoorbeeld nesting, variabelen, mixins en functies. De drie bekendste Pre-processors zijn SASS, LESS en Stylus. Op de eerste twee gaan we in combinatie met de implementatie van Magento 2 dieper op in. Hierin wordt voor SASS de verbeterde versie SCSS aangehouden. Lees meer

Samen groeien: BabyPlanet & Guapa

Onlangs is de nieuwe site van BabyPlanet live gegaan. Wederom een Magento 2 shop van ons die het levenslicht ziet!

Toen BabyPlanet bij Guapa aanklopte was er een niet-responsive webshop op basis van Magento 1. Daarbij was de webshop nog niet echt een verlengstuk van de 5 fysieke vestigingen van BabyPlanet. Genoeg redenen om ook de webshop als ‘vestiging’ te gaan behandelen en er dus een BabyPlanet waardige winkel van te maken.

Lees meer

Magento 2 Enterprise verovert de B2B markt

Als je het onze specialisten vraagt is Magento al jaren een goede keuze voor de toepassing binnen het B2B landschap. Mits je gedegen te werk gaat, de juiste keuzes durft te maken en gedegen koppelingen laat schrijven door een specialist. Klantspecifieke prijzen en delen van de catalogus die voor een deel van je klanten zichtbaar zijn. Allemaal prima in te bouwen afhankelijk van de wensen van de organisatie en haar stakeholders. Nu is het Magento 2 tijdperk aangebroken en mogen wij ons (als officiële enterprise partner) langzaam gaan buigen over de Alpha release van de B2B suite. die halverwege 2017 op de roadmap staat voor een release binnen het Enterprise spectrum. Lees meer

Responsive WebDesign (RWD): 2 cases uitgelicht

Een losse mobiele site van uw e-commerce platform is een oplossing om uw webshop snel en eenvoudig mobiel ready te krijgen. Budget technisch gezien is dit niet de ultieme oplossing voor uw e-commerce platform omdat er op twee locaties content moet worden bijgehouden (de mobiele site en op de desktop variant). Met de snelle technologische ontwikkelingen komen er steeds meer verschillende devices op de markt met verschillende resoluties. Zolang hier nog geen vast stramien in zit of komt, zal bij elke afwijkende resolutie het platform moeten worden aangepast. Dit kost veel tijd en extra kosten die u liever niet maakt. Daar komt bij dat als u het platform niet voor de nieuwe devices optimaliseert dit kan leiden tot groot conversie verlies.

Responsive Web Design (RWD) daarin tegen haalt de informatie uit één code en herkent de resolutie van het scherm waarmee het e-commerce platform wordt bekeken. Komen er nieuwe apparaten en nieuwe resolutie standaarden op de markt? RWD past zich hier automatisch op aan mits het goed is ingezet. RWD is niet automatisch de garantie tot succes. Net als de lancering van een nieuw e-commerce platform neemt een sterk responsive e-commerce platform aandacht en planning in beslag. Op het moment dat deze aandacht en planning er niet is kan dit leiden tot langzame prestaties, slechte architectuur en dat neemt weer extra kosten met zich mee.

Voordat u kunt starten met een ‘succesvolle’ RWD integratie is het belangrijk om eerst de zakelijke-, strategische- en ontwikkel doelen goed op elkaar af te stemmen. Naast het afstemmen van de doelen en voordat het e-commerce platform kan worden geoptimaliseerd voor RWD is het belangrijk om de Customer Journey volledig in kaart te krijgen.

Optimaliseren voor Responsive:

[row]
[column lg=”3″ md=”12″ sm=”12″ xs=”12″ ]
[icon type=”fa fa-sort-amount-desc” color=”#cbcbcb” fontsize=”200″]
[/column]
[column lg=”8″ md=”12″ sm=”12″ xs=”12″ ]

Breng uw Customer Journey in kaart.
Het optimaliseren voor de verschillende apparaten begint met uw doelgroep.

Vragen die beantwoord moeten zijn voor de optimalisatie:

  • Hoeveel procent van het verkeer komt via mobiele apparaten op uw webshop?  (Als 20-30% van uw verkeer binnenkomt op mobiele apparaten is het aan te raden om te gaan optimaliseren )
  • Welke apparaten / browsers worden gebruikt door uw gebruikers? Belangrijk bij Responsive WebDesign is om rekening te houden met dat de responsive technieken die onverenigbaar zijn met oudere browsers (met name IE8 en ouder). Tevens geven de top-apparaten ons inzicht in het aantal breekpunten die nodig zijn voor het ontwerpen van het e-commerce platform.
  • Via welke touchpoints komt het bezoek binnen op uw e-commerce platform. Deze punten geven ons inzicht in de belangrijke pagina’s binnen het platform.


[/column]
[/row]

[row]
[column lg=”8″ md=”12″ sm=”12″ xs=”12″ ]

Bepaal de Content Strategie
Bij RWD is niet de vraag ‘hoe komt het eruit te zien’ maar ‘wat laten we zien’. Welke inhoud is nu belangrijk. Grote uitdaging voor RWD integratie is het veranderen van denkwijze over de indeling van de inhoud. Welke inhoud is belangrijk voor de gebruiker; hoe wordt de indeling van de content. Mobile First is een methode die gebruikt wordt om de interacties zo te ontwerpen door vanuit het kleine scherm te denken, de interactie voor alle apparaten moet hetzelfde zijn. Mobiele versie van het e-commerce platform is niet een uitgeklede versie van de desktop versie, maar een andere manier van interactie van het platform.

Belangrijk bij de mobile first methode is het definiëren van de belangrijke interacties van de webshop. Naast de interacties is belangrijk de functionaliteiten te prioriteren en de informatie efficiënter te organiseren voor de mobiele weergave en deze zo te schalen naar een effectieve functionele plaats op de grotere schermen. Gebruikers van de webshop verwachten om elke actie vanuit elk apparaat is uit te voeren. Belangrijk bij een webshop is bijvoorbeeld dat het filteren van zoekresultaten, het lezen van reviews, het opslaan van wenslijsten, en check-out nodig om universeel toegankelijk.
[/column]
[column lg=”3″ md=”12″ sm=”12″ xs=”12″ ]
[icon type=”glyphicon glyphicon-knight” color=”#cbcbcb” fontsize=”200″]
[/column]
[/row]

[row]
[column lg=”4″ md=”12″ sm=”12″ xs=”12″ ]
[icon type=”fa fa-terminal” color=”#cbcbcb” fontsize=”200″]
[/column]
[column lg=”8″ md=”12″ sm=”12″ xs=”12″ ]

Optimalisatie van code en afbeeldingen
De uitdaging van het ontwikkelen van RWD is het gebruik van codestandaarden die de snelheid van laden niet beïnvloeden. Op mobiel zou een webshop net zo snel moeten laden als op de desktop. Dit alles voor de optimale mobiele ervaring.

Om de optimale mobiele ervaring te optimaliseren zijn er wat onderdelen waar o.a. rekening mee kan worden gehouden:

  • De code optimaliseren en prioriteit bepalen voor het inladen hiervan.
  • Juiste formaat afbeeldingen per apparaat.
  • Gebruik van open web fonts, deze zijn minder zwaar om in te laden dan custom fonts
  • Maak gebruik van lokale content caching

[/column]
[/row]

 

Uitgelichte cases: 

GABINOVA
Door het toenemende bezoek vanaf mobiel en tablet, het verhoogde bounce percentage en de achterblijvende conversies was het voor Gabinova tijd het e-commerce platform volledig over te zetten op RWD. Nu een half jaar na de lancering van het vernieuwde platform zijn de eerste resultaten al ruim zichtbaar voor Gabinova.nl:

Showcase gabinova

Desktop
Kwartaal 1 2015 – ten opzichte van 2014
Aantal sessies + 21%
Paginaweergaven + 27%
Bounce percentage + 0,26%
Gemiddelde order waarde + 15%
Conversie + 365%

 

Tablet
Kwartaal 1 2015 – ten opzichte van 2014
Aantal sessies + 29%
Paginaweergaven + 50%
Bounce percentage – 2,59%
Gemiddelde order waarde + 15%
Conversie + 124%

 

Mobiel
Kwartaal 1 2015 – ten opzichte van 2014
Aantal sessies + 89%
Paginaweergaven + 205%
Bounce percentage – 0,30%
Gemiddelde order waarde + 181%
Conversie + 725%

 

Waterpijp-online

Waterpijp-online was toe aan een nieuwe look en feel van het e-commerce platform. Om klaar te zijn voor de toekomst hebben we eerst gekeken naar wie zijn de klanten nu echt? Welke apparaten en browsers worden het meest gebruikt onder deze doelgroep? Waterpijp-online heeft inmiddels een volledig responsive design. In onderstaande resultaten ziet u heel duidelijk dat bij de doelgroep van Waterpijp-online een daling is in het tablet gebruik ten opzichte van vorig jaar. Het mobiele gebruik daarentegen is enorm gestegen, hier speelt Waterpijp-online goed op in met het responsive design. Dit heeft ervoor gezorgd dat de conversie met maar liefst + 252% gestegen.

Showcase-website-Waterpijp

Desktop
Kwartaal 1 2015 – ten opzichte van 2014
Aantal sessies + 18%
Paginaweergaven + 9%
Bounce percentage +/- 0%
Gemiddelde order waarde + 10%
Conversie + 29%

 

Tablet
Kwartaal 1 2015 – ten opzichte van 2014
Aantal sessies – 9%
Paginaweergaven + 42%
Bounce percentage + 1,41%
Gemiddelde order waarde – 8 %
Conversie – 9%

 

Mobiel
Kwartaal 1 2015 – ten opzichte van 2014
Aantal sessies + 62%
Paginaweergaven + 47%
Bounce percentage – 3,11%
Gemiddelde order waarde + 19 %
Conversie + 252%

 

Wilt u meer informatie over deze cijfers? Of wilt u weten wat wij voor u kunnen betekenen?

Contact

Wat is Product Information Management en wat kan mijn bedrijf ermee?

Wellicht bent u er al bekend mee, het systeem dat voor een overkoepelende informatie opslag zorgt: Product Information Management (PIM). PIM is de technologie die gebruikt wordt om productinformatie centraal op te slaan en te verwerken in uw multichannel en crossmediale omgeving. Er zijn meerdere open source product informatie management frameworks beschikbaar op dit moment. De 2 grote frameworks zijn Pimcore en Akeneo.

Deze PIM’s kunnen product specifieke informatie opslaan en beheren. Ook kunnen ze gekoppeld worden aan leveranciers, derde partijen, e-commerce- en backoffice systemen. Hierdoor kan uw PIM een centrale spil worden in uw organisatiePIM voorbeeld waardoor u altijd dezelfde informatie aan uw klanten toont.

In uw PIM kunt u de informatie beheren en aanpassen en vervolgens verspreiden via de verscheidene kanalen die u aan uw PIM gekoppeld heeft. Dit proces noemt men Master Data Management (MDM). Dankzij MDM heeft u altijd de juiste informatie voor de klanten ongeacht welk kanaal u gebruikt.

Functionaliteiten voor uw Data

Wanneer u de objecteigenschappen in de PIM goed gebruikt, kunt u op een efficiënte manier uw gegevens verrijken vanuit verschillende databases, zoals uw backoffice, e-commerce platform en ERP systemen.  Uw PIM beheert al deze informatie in één domein specifieke hoofdindex. U kunt in uw PIM gebruik maken van verschillende functies zoals versiebeheer, asset management, object management en class management.  Hierdoor wordt het mogelijk om te gaan werken met Master Data, oftewel de leidende data voor al uw kanalen.

De belangrijkste functionaliteiten zijn:

  • Master Data kan beheerd worden door de goede informatie management functies
  • Koppelbaar met meerdere webservices en informatiebronnen
  • Webservices voor de verspreiding van content zijn geïntegreerd
  • Kan gekoppeld worden aan verschillende Extract, Transform, Load (ETL) oplossingen

Functionaliteiten voor de distributie

Een PIM kan naast de opslag en het beheer van uw data en informatie u ook helpen bij het verspreiden van uw data naar uw marketing en (e-)commerce kanalen. Een PIM is uitermate geschikt voor Cross-Media–Publishing. De PIM ondersteunt uw Master Data Management waardoor de belangrijkste en up-to-date gegevens direct beschikbaar zijn. Via uw PIM is het mogelijk om deze gegevens cross-mediaal te verspreiden. Zowel voor de online als voor je offline (drukwerk) marketing campagnes zijn de gegevens te gebruiken. De productinformatie kan doorgegeven worden aan producten zoals: Adobe InDesign®  en Quark Xpress. Ook kan u vanuit uw PIM direct PDF’s generen.

Om op een efficiënte manier documenten te maken zoals prijslijsten en catalogi kan u uw open-source PIM laten integreren met bijvoorbeeld EasyCatalog, een product van 65bit Software Limited. De combinatie van deze systemen zorgt voor een gestroomlijnde informatieverstrekking van web naar print.

Kort samengevat zijn de belangrijkste features:

  • Verschillende webservices kunnen geïntegreerd worden met uw data
  • Mogelijkheden tot XML-streams met gegevens
  • Adobe InDesign® Markup Language (IDML) bestanden genereren vanuit uw PIM
  • Data doorgeven aan Adobe InDesign®  en Quark Xpress

Data integreren in de PIM

Als de PIM is opgezet dan zit er nog geen informatie in en moet deze gevuld worden. De integratie van deze data is een van de key features van een PIM. Zonder een gedegen data integratie heeft de PIM eigenlijk geen functie. Vaak zal de data uit het ERP pakket gehaald worden wat nu gebruikt wordt voor het beheer van de productinformatie.

Het in- of uitvoeren van deze informatie kan gedaan worden door gebruik te maken van de Application Programming Interface (API) van uw PIM of via de webservices van uw PIM. Om ETL processen automatisch te laten draaien kunt u uw PIM verbeteren met plug-ins. Ook kunnen er koppelingen worden gelegd met derde partijen.

In het kort:

  • Vele integratiemogelijkheden van ERP pakketen en webservices
  • Een API met veel mogelijkheden
  • Webservices die geïntegreerd zijn in de PIM voor het verspreiden van content
  • Meerdere open-source ETL oplossingen

Integratie met uw Magento webshop

Ook kunt u uw Magento webshop integreren met uw PIM,  lees hierover meer op onze PIM koppelingen pagina. Voor Akeneo Magento en Pimcore Magento hebben we al specifieke pagina’s voor u gemaakt.

Dit artikel verscheen eerder op Twinklemagazine.nl.

Guapa in de Emerce eGuide 2014!

eGuide Emerceemerce eguide

Het is zover, de vijfde editie van de eGuide is uitgegeven door Emerce. Deze editie staat bevat meer dan 250 pagina’s met vele cases, deskundige visies, workshops en tips. Het boek is voor opdrachtgevers van online projecten. De eGuide komt voor uit de gelijknamige website, www.eguide.nl, waarop alle e-commerce bureaus staan vermeld, ze cases presenteren en het laatste nieuws delen.

Case: Koelstra

Guapa kan hier natuurlijk niet missen. Op pagina 110 staan we met een korte omschrijving, wie zijn wij en wat doen wij? Dit wordt aangevuld met de case van Koelstra. In deze case zijn een aantal van de vele functionaliteiten die Guapa heeft ontwikkelt omschreven.

Voor meer cases verwijzen we u graag naar ons Magento portfolio. Vragen? Neem gerust contact met ons op.

Lees hieronder het volledige artikel.
 

eGuide-Guapa-Media klein

 

Wilt u zelf ook een exemplaar ontvangen? Bestel het eGuide jaarboek 2014!
 
 

Magento Maatwerk Schanskorf editor voor Gabinova

In maart dit jaar lanceert Gabinova een nieuwe webshop in zes landen, dit doen ze op een vernieuwende en geheel eigen wijze. Guapa ontwikkelt in opdracht van Gabinova een complex stuk Magento maatwerk.

[testimonial author=”Robert Bakker (Gabinova)”]De keuze voor Magento lag voor de hand. Guapa is voor ons dé partij op gebied van Magento en online marketing, zij lopen in alles voorop en doen er alles aan om onze webshops te laten converteren[/testimonial]

De vraag van de klant

Maak het voor bezoekers van onze webshops mogelijk om op maat hun eigen schanskorven te bestellen. Denk hierbij aan lengte, hoogte en diepte en de keuze van de diversiteit aan stenen. Daarnaast zijn er meerdere accessoires te bestellen bij een maatwerk schanskorf. Hier moet ook rekening mee worden gehouden.

De uitwerking

Met de bovenstaande vraag zijn wij bij Guapa aan de slag gegaan en hebben wij de maatwerk editor ontwikkeld welke is terug te vinden in alle gelederen van de Magento webshops die Gabinova op dit moment voert. De editor is gemakkelijk vanaf elke pagina te gebruiken, men vult zelf lengte en hoogte in (hierop wordt een check uitgevoerd om er zeker van de zijn dat er altijd een veelvoud van 0,5 wordt ingevoerd, dit in verband met de maaswijdte van de korven) daarna kan men middels een slider de diepte selecteren. Als dit door de gebruiker is gedaan wordt men met 1 muisklik meegenomen naar de editor zelf, hier worden de gegevens die men in de vorige stap heeft ingevoerd direct overgenomen (2 keer invullen is 1 keer te veel). De editor rekent zelf uit hoeveel m3 inhoud de korf heeft en hoeveel kilo stenen er nodig zijn om de korf mooi te kunnen vullen. Er wordt direct een prijs getoond voor de korf, de stenen en de accessoires afzonderlijk. Daarnaast kan men vanuit elke stap het gekozen maatwerk direct in de winkelwagen te plaatsen. Vervolgens kan men in de volgende stap de stenen naar wens kiezen, dit kan zelfs door diverse soorten en hoeveelheden zelf te kiezen.

De editor in beeld

Het resultaat

15,5% van het totale bezoek heeft de editor gebruikt en 3,4% van de bezoekers die de editor heeft gebruikt is ook daadwerkelijk over gegaan tot aankoop. Op dit moment lopen er verschillende A/B-testen om te na te gaan op welke wijze het conversiepercentage kan worden verhoogd door middel van de editor.

Kunnen wij iets voor u betekenen?

Neem dan contact met ons op.

Contact opnemen