How-To: Tips for Performance Optimization for Content & Commerce Sites

29 Jul

Statistics from a fairly recent Comscore report show that mobile usage now represents 65 percent of all digital media time. Nonetheless mobile data plans still come with a steep price tag and are limited in data volume. At the same time modern web design for the last couple of years has been focussing on establishing a story telling approach, building brand worlds and delivering real life experiences online. This relies on an enormous amount of pictures, videos, sounds and graphics. Delivering as much high quality content as possible with the least of amount of data therefore seems to be more important than ever. Google has reacted early on by figuring in page load times as one of their many ranking factors.

Our front-end developer Marcin Krzemiński has taken the time and compiled some interesting statistics regarding file sizes and delivery times. He also shows in detail how the front-end team has optimized the performance of our Symfony based shop. They are also interesting for content sites using eZ Platform/eZ Enterprise.

Intro

As web developers we are responsible for delivering content fast, keeping in mind the balance between speed and quality of all the assets including text. As of June 2016 an average page size is 2.4 mB (2486 kB) which is quite a lot considering considering the above mentioned 65% digital media time and the still expensive mobile data plans.

  • HTML – 58 kB
  • CSS – 76 kB
  • Scripts – 402 kB
  • Fonts – 74 kB
  • Videos – 302 kB
  • Other – 11 kB
  • Images – 1522 kB (1.5MB!)

Source: http://httparchive.org/interesting.php?a=All&l=Jun%201%202016

Comparison of asset sizes over the last years

Jun 2015 – 2087 kB / http://httparchive.org/interesting.php?a=All&l=Jun%201%202015

  • HTML – 55 kB
  • CSS – 63 kB
  • Scripts – 334 kB
  • Fonts – 98 kB
  • Video – 208 kB
  • Other – 4 kB
  • Images – 1312 kB

Jun 2014 – 1783 kB / http://httparchive.org/interesting.php?a=All&l=Jun%201%202014

  • HTML – 56 kB
  • CSS – 51 kB
  • Scripts – 287 kB
  • Fonts – 62 kB
  • Other – 123 kB
  • Images – 1128 kb
all assets size in last 3 years

Average Page Size

assets size in last 3 years

Here’s a chart with last 3 years compared. As you can see every year amount of data per asset type is growing. No matter if it’s CSS, JavaScript and especially images. Look how big number is taken by images.

assets-size

Comparing those stats we can clearly see that as developers we write more CSS, JavaScript but the biggest numbers comes to images size which is about 200 kB bigger every year. These numbers show clearly how important performance optimisation is.

In order to improve performance there is a lot factors including:

  • compress (uglify) CSS and JavaScript files
  • concatenate (merge multiple into one) CSS and JavaScript files
  • reduce number of HTTP requests (CSS, JavaScript, images, Fonts, etc)
  • Gzip / deflate data over the wire
  • image optimisation

Performance optimisations for silver.eShop and eZ Platform/eZ Studio based sites

Assetic

Assetic helps us compress and concat CSS and JavaScript files. Using assetic is beneficial for reducing number of HTTP request as well as number of data that is transferred during request / response tango. Here’s how we keep it:

CSS
{% block stylesheets %}
 {% stylesheets
 'bundles/silversolutionseshop/css/style.css'
 %}
 {% endstylesheets %}
{% endblock %}

Note: We use Sass to manage our Stylesheets

JavaScript
{% block javascripts %}
 {% javascripts
 ...
 'bundles/silversolutionseshop/vendor/jquery-2.1.3.min/index.js'
 'bundles/silversolutionseshop/vendor/foundation/js/foundation/foundation.js'
 'bundles/silversolutionseshop/vendor/underscore/underscore.js'
 'bundles/silversolutionseshop/vendor/backbone/backbone.js'
 ...
 'bundles/silversolutionseshop/js/app.js'
 %}
 {% endjavascripts %}
{% endblock %}

In order to compress files we use some useful and well known NPM packages:

We keep those packages inside ezpublish/Resources/node_modules directory and here’s how our config_prod.yml file is configured:

assetic:
    filters:
        uglifycss:
            bin: '%kernel.root_dir%/Resources/node_modules/.bin/uglifycss'
            node: '%siso_eshop.nodejs%'
            apply_to: \.css$
        uglifyjs:
            bin: '%kernel.root_dir%/Resources/node_modules/.bin/uglifyjs'
            node: '%siso_eshop.nodejs%'
            apply_to: \.js$

As you may notice NPM has a dependancy of Node.js which also needs to be installed on the environment where our shop instance is running.

Related links:

Charts

Before / after assetic filters

Before and after assetic filters

Asset type Before After % saved
JavaScript 751 kB 486 kB ~35%
CSS 414 kB 325 kB ~22%

data excluding third party assets like Facebook, Olark chat, etc

Number of HTTP requests

Number of HTTP Requests saved using Assetic

For CSS number is the same since we use Sass. On the output we always have one CSS file. When it comes to JavaScript the difference is huge. Using assetic and server configuration properly we reduced number of HTTP request from 48 to 3 in production mode.

Sass and Gulp

This is not directly related to the performance topic but it’s worth to mention that we use Sass in order to keep our stylesheets nice and organised. Thanks to Gulp and some packages we are able to deliver well organised CSS including always up to date vendor prefixes.

Components driven front-end

When working on a complete redesign and rework of our front-end layer both technically and visually we had to take a lot of things into the consideration. On of them was if we should help ourselves and use one of the popular frameworks out there. We decided to go with ZURB’s Foundation for Sites which is really nice to work with. One of the nicest things about it is that we can create a custom build out of components we really need. Having this principal in mind we have extend a lot of Foundation’s components as well as created a bunch of our own which are missing. Thanks to this approach our standard design is divided into small components which is beneficial in terms of file size for client’s work. We can easily enable / disable a component when it’s required. This leads to smaller file size on the end which is beneficial from the performance perspective.

Headers

Each type of assets wheatear it’s an HTML file, JavaScript, CSS or image should have different expiration time. It means that over certain amount of time the asset should be taken from the server, not from browser cache. It can have huge impact on the site performance and that’s why it so important. For files that are not changed often you should set long expiration time. We recommend using longer expiration for files like images, fonts.

This is usually done in the VirtualHost configuration and may look like:

ExpiresActive On
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 hour"
ExpiresByType application/shockwave-flash "access plus 1 hour"
ExpiresByType text/css "access plus 1 year"
<LocationMatch "^/var/[^/]+/storage/images/.*">
# eZ Publish appends the version number to image URL (ezimage
# datatype) so when an image is updated, its URL changes to
ExpiresActive on
ExpiresDefault "now plus 10 years"
...

Mod deflate

Apache configuration can be powered by a mode_deflate module which can be used to compress data using gzip compression before the data is send to the user. Having data compressed on the server means there is less data to transfer which results into faster page lead. Here’s how you can configure this in your Virtual Host:

AddOutputFilterByType DEFLATE text/css application/x-javascript application/javascript text/plain text/html text/xml application/xml

Using this approach we can gzip all CSS, JavaScript, HTML as well ass XML files.

Related reading:

Image optimisation

As mentioned at the beginning of this blog post images is the asset that is growing every year in terms of file size. That’s why it is super important to approach images topic the right way. In terms of project from front-end perspective there are two types of images.

First we have all static images like logo, favicon, spinners etc. To optimise these kind of images we use tools like ImageOptim (https://imageoptim.com/mac) or TinyPNG (https://tinypng.com/). If you’re not fan of these just Google for „optimise images“ or any similar search term and I bet you’ll find the right tool for your needs.

Second we have product photos. We tend to use a few image sizes for these files. In order not to load one huge file for each product or article we have couple of different configurations and serve proper files based on the view requirement. For example we might need different file for product list than for product detail page. Our team has developed and image converter tool that is using ImageMagick (http://www.imagemagick.org/script/index.php) and some .yml configuration. On top of it it’s important to set the quality for the output image. We suggest to set the quality between 60-75% in terms of JPEG compression.

Example of .yml configuration:

image_variations:
    thumb_smallest:
        reference: null
        filters:
            - { name: geometry/scalefillarea, params: [81, 61] }
            - { name: geometry/crop, params: [81, 61, 0, 0] }
    thumb_small:
        reference: null
        filters:
            - { name: resize/both, params: [150, 113] }
            - { name: background/white, params: [] }
            - { name: gravity/center, params: [] }
            - { name: extent, params: [150, 113] }
    image_zoom:
        reference: null
        filters:
            - { name: geometry/scaledownonly, params: [1600, 1200] }

Here’s how we use it in Twig:

<img src="/{{ st_imageconverter(product_image, 'thumb_small') }}" alt="Product name">

Conclusion

As an e-commerce platform manufacturer we feel responsible for delivering products that loads fast on every device. We make sure that mobile experience is as pleasant as desktop. In order to make it work as we expect we optimise performance on each layer: front-end, backend, server. Here’s what you should think about in terms front-end performance optimisation:

  • Reduce number of HTTP request by merging (concatenation) multiple files into one.
  • Reduce the number to bytes that are send over the wire by compressing files.
  • Optimise images for different views.
  • Enable gzip for CSS, JavaScript, HTML.
  • Set proper expiration time for files.

B2B Praxis: Top 5 Tipps zur Auswahl eines Shopsystems

25 Jul

Tipps zur Auswahl eines B2B-Shopsysetm

Anfang Juli hatte iBusiness zur virtuellen Entscheiderkonferenz zum Thema „B2B-Commerce und Digitale Transformation“ eingeladen. Ania Hentz gab als B2B-Spezialistin Tipps zur Auswahl des passenden Shopsystems für erfolgreichen B2B-Commerce. Sie machte deutlich, wie wichtig es ist, den Kundennutzen stets im Blick zu halten und mittels einer Integration in die bestehenden Geschäftsprozesse die Kunden auch online optimal zu bedienen. Hier zusammengefasst ihre Top 5 für die Auswahl der passenden e-Commerce Lösung

Tipp 1: Achten Sie auf optimierte Bestellabläufe

Versetzen Sie sich in die Situation Ihrer Kunden und bieten Sie Ihren Kunden die passenden Funktionen für komfortables Bestellen an. Für Kunden in Bereichen mit einer hohen Bestellfrequenz  kann es sich zum Beispiel anbieten, alle bestellten Waren der letzten Wochen übersichtlich anzuzeigen und daraus direkt einen individuellen Bestellvorschlag abzuleiten. Aus den am häufigsten bestellten Waren kann automatisch „Mein Sortiment“ erstellt werden, welches den Bestellprozess für den Kunden beschleunigt.

Wenn Sie ein großes Sortiment online anbieten, sollte sie überlegen, wie die Bestellung von mehreren hundert Positionen vereinfacht werden kann. Der Upload von Bestelllisten, Schnellbestellformulare zur Eingabe von Artikelnummern oder eine Mobile mit Barcode Scanner können hier weiterhelfen.

Tipp 2: Prüfen Sie die Komplexität Ihres Preismodells

ERP-Systeme bieten vielfältige Möglichkeiten der Preisdefinition und viele Unternehmen nutzen diese Möglichkeiten für kundenindividuelle Konditionen. Die Umsetzung vorhandener B2B-Preismodelle stellt Shopsysteme regelmäßig vor große Probleme. Das Nachprogrammieren komplexer Preismodelle in einem Shop ist aufwendig und kann zu Abweichungen in den Preisen führen z.B. durch Rundungsdifferenzen. Der Bezug individueller Preise in Echtzeit aus dem ERP kann von vielen Anbietern nicht performant genug realisiert werden. Daher sollten Sie bei der Shopauswahl das Thema Preisfindung frühzeitig und eingehen prüfen, um ihr Preismodell auch im Onlineshop anbieten zu können. > Mehr dazu im Blogartikel „Individuelle Preise im B2B eCommerce“

Tipp 3: Der Shop sollte die Unternehmensprozesse Ihrer Kunden unterstützen

Der Kunde ist König. In einem B2B-Shop geht es um weit mehr als nur Bestellungen. Ein guter Shop unterstützt die Prozesse der Kunden indem er z.B. Bestellberechtigungen, Budgetgrenzen oder Sortimentseinschränkungen beachtet. Aber auch die direkte Übertragung von Bestellungen an das ERP-System des Kunden per sogenanntem Punch Out oder OCI Schnittstelle kann ein entscheidender Wettbewerbsvorteil sein. Bieten Sie Ihren Kunden Funktionen an, die entscheidende Abteilungen wie den Einkauf unterstützen.

Tipp 4: Integrieren Sie den Shop in Ihre Geschäftsprozesse

Genauso wichtig, wie die Geschäftsprozesse Ihrer Kunden ist die Integration Ihrer eigenen Geschäftsprozesse mit dem Shop. Automatisierte Abläufe sparen Zeit und Geld und bieten gleichzeitig Ihren Kunden hochaktuelle Daten und Informationen. Ein gut durchdachter Shop kann Ihre Mitarbeiter entlasten und gleichzeitig einen besseren Kundenservice bieten. Prüfen Sie mit welchen Funktionen Sie den Kundenservice verbessern können. Die Einführung eines neuen B2B Shops ist immer auch eine gute Gelegenheit die eigenen Prozesse zu überprüfen und zu verbessern.

Tipp 5: Ein Shop alleine reicht nicht aus

Ein flexibler B2B-Shop ist ein guter Anfang, reicht jedoch heute längst nicht mehr aus. Im Unternehmen heute gibt es eine Vielzahl an Kontaktpunkten mit dem Kunden, bei denen diverse EDV-Systeme involviert sind: die Website, der Außendienst, der Kundenservice, der Onlineshop, der Point-of-Sale, die Reklamationsabteilung, Marketingnewsletter, das Händlerportal u.v.m. Eine Shoplösung heute sollte mehr können und die digitale Entwicklung Ihres Unternehmens insgesamt unterstützen. Der Trend geht hin zu Plattformen, die unter einem Dach den Aufbau von B2B Shops, B2C Shops, Partnershops, Websites, Microsites, Intranetangeboten uvam. ermöglichen. Der Vorteil einer solchen integrierten Plattform liegt auf der Hand. Sie gewinnen durchgehende Informationen über jeden Besucher und Kunden über den gesamten Prozess hinweg. Diese Daten können für eine konsequente Weiterentwicklung des eigenen Angebots und der eigenen Prozesse genutzt werden.

Fazit: Denken Sie strategisch. Suchen Sie eine Lösung, die sich mit Ihrem Unternehmen entwickeln kann.

Sie sind auf der Suche nach einer e-Commerce-Lösung und brauchen Unterstützung bei der Entscheidungsfindung. Ania Hentz steht Ihnen mit Ihrer Erfahrung aus über 15 Jahren B2B e-Commerce gerne zur Verfügung.

Ania Hentz, Geschäftsführerin silver.solutions GmbH Ania Hentz
GeschäftsführerinFon: +49 (0)30.65.48.19.90
Fax: +49 (0)30.65.48.19.99
Mail: contact@silversolutions.de

 

B2B Best Practice: Unternehmensprozesse abbilden mit dem Kundencenter

5 Jul

Abstract for our English speaking visitors: To best serve your B2B customers a simple web-shop is not enough. The key to success is self-service. With self-service functions such as order approvals, credit limits, organisational roles & rights and automatic user registration you are helping your customers to perform their jobs more easily and more efficiently. And if you make their jobs easier they will be back to do business with you again. Our e-commerce solutions silver.eShop comes with an add-on called „Customer Center“ that does exactly that: it adds much requested self-service functions and raises the B2B performance of the shop.

Sobald eine Firma eine gewisse Größe erreicht hat, sind B2B Einkäufer in ihrem Unternehmen in Prozesse und Strukturen eingebunden und können nicht einfach mal so etwas online bestellen. Verschiedene Abteilungen benötigen unterschiedliche Materialien und Funktionen. Der Servicetechniker kauft gar nichts, er braucht nur die aktuellsten Datenblätter. Vorgesetzte sind für Freigaben und Budgets zuständig und am Ende hat das Controlling die Zahlen im Blick. Möchte ein Hersteller einen erfolgreichen B2B Shop anbieten, so sollte seine Shopsoftware diese Rahmenbedingungen auch abbilden können.

Selbst ist der Kunde: Automatische Freischaltung und übersichtliche Verwaltung

Für genau solche Fällte gibt es zur Shoplösung silver.eShop ein Zusatzmodul namens „Kundencenter“, welches mittels Rollen & Rechten sowie Freigabeworkflows die Unternehmensprozesse individuell abbilden kann. Das Kundencenter vereinfacht für den Shop-Betreiber die Arbeit, da die Kunden Ihre Daten und Mitarbeiter online selbst pflegen können und diese direkt mit dem ERP ausgetauscht werden.

silver.eShop - DLRG Benutzerverwaltung

Beispiel einer Benutzerverwaltung mit unterschiedlichen Rechten und Limits

Ist das Kundencenter einmal im Shop aktiviert, kann im ERP-System definiert werden, ob ein Kunde das Kundencenter verwenden darf oder nicht. Die Freischaltung kann dann ganz automatisch mit der Kundennummer, einer Rechnungsnummer sowie der E-Mail-Adresse erfolgen. Der Shop prüft anhand einer Anfrage an das ERP-System, ob dieser Kunde das Kundencenter nutzen darf. Ist dies der Fall, so wird im Shop das Unternehmen sowie ein Hauptkontakt angelegt, der zukünftig die Verwaltung der Shopzugänge für sein Unternehmen übernehmen kann. Unter „Mein Konto“ stehen dem Hauptnutzer im Bereich „Kundencenter“ dann die Funktionen „Bestellungen freigeben“ und „Benutzerverwaltung“ zur Verfügung.

silver.eShop - Kundencenter für Hauptkontakt

Kundencenter für Hauptkontakt im Service-Menü

In der Benutzerverwaltung kann der Hauptkontakt:

  • Neue Nutzer anlegen
  • Nutzer aktivieren oder deaktivieren
  • Namen oder Emailadressen ändern
  • Das Budget festlegen
  • Die Rechte und Rollen des Nutzers anpassen

Sollten im ERP-System bereits weitere Mitarbeiter des Kunden bekannt sein, so können diese direkt als Shopnutzer angelegt werden.

Alles im Griff: Budgetverwaltung und Workflows

Ein Hauptkontakt kann für jeden Mitarbeiter individuelle Budgetgrenzen festlegen. Im Standard kann eine maximale Bestellmenge sowie ein Auftragsvolumen je Auftrag definiert werden. Überschreitet ein Mitarbeiter bei einer Bestellung sein Budget, so wird er darüber informiert und sein Auftrag mit allen Angaben zunächst zur Freigabe an einen oder mehrere Personen gesendet.

silver.eShop - Freigabe Bestellungen

Beispiel einer Bestellung, die beim Vorgesetzten auf Freigabe wartet

Der Hauptkontakt kann einen oder mehrere Personen dafür festlegen. Ist keine Person für die Auftragsfreigabe definiert, so erhält der Hauptkontakt die Bestellung zur Freigabe. So kann im Urlaubsfall sichergestellt werden, dass ggf. ein Vertreter eine Bestellung freigibt.

Eine Bestellung, die freigegeben wird, enthält alle nötigen Angaben wie z.B. Lieferadressen, Zahlungs- und Lieferarten sowie Kommentare zum Auftrag. Dies spart Zeit und vermeidet fehlerhafte Aufträge. Bei Bedarf kann die freigebende Person Aufträge auch ändern. Wird ein Auftrag gesendet, so wird der Besteller darüber per Email informiert.

Ein Mitarbeiter kann jederzeit sehen, welche Bestellungen noch offen sind und welchen Status diese haben. Ferner wird die Kommunikation, die der Besteller während des Freigabeprozesses mit dem Verantwortlichen führt, übersichtlich dokumentiert. Wird eine Bestellung nicht freigegeben, so erhält der Besteller eine E-Mail. Er kann den Auftrag mit einem Kommentar und ggf. angepasster Stückzahl oder Gesamtsumme wieder an den Verantwortlichen zur erneuten Prüfung zurücksenden.

Fazit: Für jeden Kunden die passende Funktion

Bieten Sie Ihren Kunden nützliche Self-Service Funktionen, die entscheidende Abteilungen wie den Einkauf oder den Kundenservice gezielt unterstützen. Durch die Einhaltung der inviduellen Bestellprozesse geben Sie ihren Kunden die notwendige Sicherheit, dass keine unerlaubten Bestellungen getätigt werden können, bieten Anreize für höhere Bestellvolumen durch kundeninterne Bündelung von Bestellungen und verringern die Fehler- und Retourenquoten. Sie punkten durch außergewöhnlich guten Service, erhöhen die Kundenbindung und entlasten Ihren eigenen Innendienst. Zusätzlich erhöht sich die Datenqualität im ERP, da die Kunden ihre eigenen Kontaktdaten am besten kennen und über den Shop direkt ins ERP übergeben.

Viele große Unternehmen, die einen strategischen Lieferanten suchen, fordern Freigabeprozesse und eine Budgetverwaltung. silver.eShop ermöglicht auch die direkte Einbindung des ERP-Systems des Kunden für einen vollautomatischen Auftragsprozess. Sprechen Sie uns gerne darauf an!

Three Questions for … // Impressions from the eCommerce Berlin Expo

24 Mai
e-Commerce Berlin Expo, photo: sekcjaspecjalna.pl

e-Commerce Berlin Expo, photo copyright: sekcjaspecjalna.pl

As a Berlin based company specialised in e-commerce software and projects we are keeping a close eye on e-commerce events in our own hometown. Back in April two of our colleagues have paid a visit to a relatively new event called „e-Commerce Berlin Expo“. This Expo is part of a network of events hosted in capital cities of Central and Eastern Europe. According to their website the organizers are hoping to provide a platform for networking and for sharing knowledge and business opportunities. We asked Lucas Dima, new member of our silver.eShop development team, and Frank Dege, CTO, for their impressions of the event.

In your opinion, what was the main focus of the Expo? Was it all about web shops or did it cover a broader spectrum?

Lucas: I got the impression that is was mostly companies from Eastern Europe presenting their software and services to either shop vendors and/or shop owners. The event was relatively small but the exhibitors covered a broad range of topics from server solutions over e-mail and payment solutions up to content services for shop owners, for example content creation, translations or product photography.

Frank: Yes, I second Lucas‘ impression. It was a platform for Eastern European companies to introduce their products and services to the German audience. I discovered a few interesting companies that I hadn’t heard of before, for example the company Marketizator. Marketizator is offering A/B testing, surveys and personalisation with the aim to increase conversions and this for a very competitive price. It sounded like an interesting option for shop owners to get a foot into this whole topic.

Did you attend any talks? What were the most interesting topics for you?

Lucas: There were three auditoriums with a variety of companies and speakers covering all kinds of e-commerce topics. I watched a few interesting product presentations and discovered a couple of new to me e-commerce companies. We had some interesting conversations with service providers, for example with MonkeyData, who are specialising in analytics of e-commerce data in the cloud. That sounded quite interesting and promising to me. Also the presention of OroCommerce was quite interesting because it shone a light on the general requirements for B2B Commerce.

Frank: For me the talk from Yoav Kutner, founder and CEO of OroCommerce was the most interesting. With OroCommerce the former founders of Magento eCommerce are working on delivering a B2B eCommerce platform. On the podium Kutner emphasized how B2B commerce is NOT B2C commerce and how using a B2C shop software to deliver a B2B shopping experience will most likely result in headaches on all sides. He specifically went into detail about the complex pricing logic for B2B customers (which we talked about extensively on the blog back in January / DE) where B2C shops fail on a regular basis. Other B2B requirements include catalogue segmentation or individual products, corporate accounts or sales staff functions. For me this was interesting because all the features that were mentioned – and where OroCommerce is still in the development stages – have been standard with our e-commerce solutions silver.eShop pretty much from day one and are used by many, many customers.

Another interesting talk came from the Otto Group, one of Germany’s leading e-Commerce players. They could not emphasize enough how important relevant and unique content is today to sell products. To actually make the most of the content you’ve so painstakingly created you need a powerful but flexible content storage. It really does not give you any advantage if all your product information is held in one big media container. To distribute your product data and content you need them more structured and in smaller pieces. Which is exactly what we do with our shop, thanks to eZ Enterprise. On their blog eZ explains the benefit of having structured content in your CMS.

Would you like to attend this event again next year?

Lucas: Yeah, it was overall an interesting event and I would like to go again next year, given the chance. I could also imagine for silver.solutions to submit a proposal for a talk for next year’s eCommerce Berlin Expo.

Frank: Even with our busy schedules this was a day well spent. So yes, I think we will keep an eye out for next year’s eCommerce Berlin Expo and see if we can drop in again.

Thank you both for finding the time and answering my questions.

The brand new eZ Studio

9 Feb

In December 2015 eZ presented eZ Studio, a brand new and modern software tool for the popular CMS eZ Platform. We have already taken a closer look at what the next generation of content editing will look like.

eZ Studio

eZ Studio

From a design point of view this is a major upgrade from their previous versions. It has many modern features like drag and drop, real-time previews for multiple devices, a new way to interact with time-scheduled content via an intuitive timeline and more. But in my opinion the most important fact, besides all these new fancy features, is that the content itself is the main focus of the whole interface.

The content creator

eZ Studio content editor

eZ Studio content editor

The interface looks pretty modern. With the main content in the middle, all available tools are inline and easy to reach. At first the concept of inline tools may be confusing, because at a first glance it seems as though there are no formatting options available. But as soon as you click into the content area the tools available for this particular type of content are shown. In traditional text editors or word processors you may find all the available editing options over the editing area. Which easily distracts from the content itself. With the new inline-tools approach the user can focus on the content first. eZ Studio interface is doing just that, most options regarding the editing areas are hidden at first and only show up as an inline menu at a click of a mouse. Once you’ve adjusted to this new interface it is very nice and comfortable.

Different previews

Previews for multiple devices

Previews for multiple devices

The modern web is not just for the desktop computer anymore. Even though you may produce most of the content on a desktop device, the information is consumed on a wide range of devices like smartphones and tablets. eZ Studio handles this very well by directly offering three types of preview for your content. This way you can quickly see how your content will look like in those types of devices.

Edit content inline

New inline editing approach in eZ Studio

New inline editing approach in eZ Studio

This is actually a radical change from previous versions and also from other CMS where you get the classic HTML editor with all the editing options visible. This new approach is minimalistic. Less is more. You get only a few format elements, and if you need more you just can click on + and start adding elements. At first you may miss having all the usual buttons at glance, but how many of those buttons of your HTML editor do you really use regularly?

The page viewer/editor

eZ Studio page editor

eZ Studio page editor

The first thing that becomes apparent is that view and edit functionality are on the same page. This is quite nice because as a content editor you are able to see the full picture in the same place where you are creating and playing around with different content.

The landing page editor is also presented as a preview with all elements with a menu available for drag and drop. You can rearrange, preview and delete elements right there. Unfortunately they did not yet add an edit button. To edit a single content element from this interface you should switch back to view mode, then click on the element and then finally click edit again. Or of course you can switch back to the content editor and search for the document there, but then you will not be using this nice view/edit way of working with your content. For sure this minor annoyance will be fixed/added in future versions.

Also very handy is the preview in different devices, which is also available in this section, and will give you an impression of how the landing page will look on desktop, tablet and smartphone. This page viewer/editor has the same philosophy regarding content – content takes center stage.

Schedule blocks

Scheduled content - timeline lets you see the whole picture

Scheduled content – timeline lets you see the whole picture

A major change has been brought to scheduled content. This functionality is not new. It has been available with the eZ Flow module for quite some time now. But where the eZ Flow user interface has been a bit cryptic at times this completely new interface is very transparent and user friendly. Editors are now able to preview and edit content by using a timeline that appears on top. It is looking very good and the fact that you can see and edit content for certain points in time is quite practical.

Finally…

With this kind of interface eZ platform is taking a big step ahead of other CMS software solutions, both enterprise or small scale, which don’t have this kind of user experience that puts full focus on the content itself. If you want to see more you can watch eZ’s Demo video.

Happy content writing!

eZ Studio home page http://ezstudio.com

eZ Blog http://ez.no/Blog

Author: This article has been provided by Lucas Dima, software developer and specialist for user interface and artificial intelligence.

Individuelle Preise im B2B eCommerce – eine Hürde für viele Shopsysteme

29 Jan

Gerade eben konnte man im e-Commerce-Magazin lesen, dass die im B2B-Commerce üblichen kundenindividuellen Preise Shopsysteme vor große Herausforderungen stellen. Der Artikel skizziert kurz und knapp, wo die Schwierigkeiten liegen. Das Fazit fällt ernüchternd aus. Dem Autoren des Artikels zufolge scheidet eine Echtzeitberechnung kundenindividueller Preise aus Performance-Gründen aus. Und ein 1:1 Nachbau der ERP-Preislogik ist laut eines zitierten OXID Experten viel zu aufwändig und fehleranfällig.

Ist es wirklich nicht möglich, kundenindividuelle Preise in Echtzeit mit hoher Performanz im Onlineshop zu nutzen?

Nach mehr als 150 B2B eCommerce Projekten haben wir eine klare Antwort auf diese Frage: Ja es ist möglich und es ist auch zwingend notwendig.

Händler erwarten, dass sie auch im Onlinshop zu ihren individuellen Preisen und Bestellkonditionen bestellen können. Ohne wenn und aber.

Der Analyse des eingangs zitierten Artikels in Sachen Nachbau der Preislogik im Shop können wir jedoch nur zustimmen. Dieses Vorgehen ist aufwendig und riskant! Viele ERP Experten stehen bereits bei der Implementierung von Preislogiken im ERP vor großen Herausforderungen. Es ist schier unmöglich, komplexe, mehrdimensionale Preiskonditionen in einem Onlineshop nachzubilden. Ausnahmen bestätigen natürlich die Regel. Bei sehr einfachen Konditionen und Preisvarianten kann die gesamte Preisfindung unter Umständen unkompliziert im Onlineshop abgebildet werben. Unserer Erfahrung nach ist dies jedoch in der Mehrzahl der B2B Projekte nicht möglich.

Was ist also die Alternative? Die Alternative dazu ist es, dass der Shop die Logik des ERP Systems nutzt und die Preise dort berechnen lässt. Aber auch hier steckt der Teufel im Detail.

Preise für einen Stand-Alone Onlineshop im ERP berechnen – das wird schwierig

Viele am Markt bekannte eCommerce Lösungen und Onlineshop Systeme haben in der Regel erhebliche Probleme damit, die Businesslogik eines ERP-Systems zu nutzen. Dies ist verständlich, wurden sie doch als eCommerce Stand-Alone-Lösung entwickelt, welche vom Produktkatalog, der Artikelverwaltung bis hin zu Preisberechung und Versand-Tracking alles unter einem Dach abwickelt. Die Idee dahinter: der Kunde bekommt Shop und ein kleines ERP aus einer Hand. Für Kunden, die ein reines Online-Geschäft betreiben, ist dies eine ideale Lösung.

Für B2B Anbieter mit einer breiten Produktpalette, verschiedenen Vertriebskanälen und besonderen Konditionen für diverse Händlergruppen ist eine ERP-Anbindung an vielen Stellen unerlässlich. Dabei gerät die Anbindung eines solchen Shopsystems an ein ERP leider regelmäßig zum Albtraum:

  • Es kann zu langen Ladezeiten bei der Preisberechnung kommen.
  • Shoppreise weichen von den im ERP berechneten Preisen ab.
  • Der Versuch, individuelle Preise zu cachen, endet im „big data“ Desaster.
  • Preise werden teilweise per Ajax nachgeladen und belasten das ERP mehr als gedacht.
  • Das ERP-System wird unnötig belastet.
  • Ist das ERP nicht verfügbar, kann der Kunde oftmals nicht bestellen.

Wie kommen Preise zuverlässig und performant vom ERP zum Shop?

silver.solutions hat bei der Entwicklung des silver.e-shop konsequent den Ansatz „ERP first“ verfolgt. Der Shop wurde von vornherein für die Anbindung an ERP-Systeme entwickelt, ist jedoch nicht einfach ein Add-On oder ein Zusatzmodel zum ERP. silver.e-shop ist auch für sich allein genommen ein vollwertiges Shop-System, das bei Bedarf komplett eigenständig funktioniert. Ganz gezielt wird dort wo es sinnvoll und zwingend ist die Businesslogik des ERP genutzt, und an vielen anderen Stellen eben nicht.

Die Belastung des ERP wird durch ein optimiertes Zugriffskonzept stark reduziert. So wird beispielsweise bei einer Preisanfrage mit vielen Positionen nur eine einzige Anfrage ans ERP übermittelt anstatt vieler verschiedener Anfragen. Ganz generell werden Anfragen ans ERP nur dann gestellt, wenn es wirklich erforderlich ist.

Speziell entwickelte Module wie der Chained Price Provider, das ERP Message Modul, der Debitor Vorlagen Service oder optimierte Caching Verfahren sorgen für eine möglichst reibungslose und effiziente Kommunikation zwischen Onlineshop und ERP.

Und was ist, wenn das ERP einmal nicht erreichbar ist? Fallbackverfahren sorgen dafür, dass in diesem Fall der Shopbetrieb weiter geht und keine Bestellungen und Kunden verloren gehen.

Augen auf bei der Wahl des Shopsystems

Unterschiedliche Bedürfnisse erfordern unterschiedliche Lösungen. Bei der Wahl der geeigneten eCommerce-Lösung muss ganz genau geschaut werden, welche Prozesse müssen unterstützt werden und wie komplex sind die bereits im ERP implementierten Abläufe und Logiken. Für einige Kunden wird sich dabei herausstellen, dass einer der vielen am Markt etablierten Stand-Alone-Shops die passende Wahl ist. Besonders für B2B-Anbieter stellen sich jedoch oftmals Fragen, die mit einem Shop von der Stange so nicht einfach zu lösen sind. Hier kommen dann eCommerce Lösungen wie silver.e-shop ins Spiel. Eine intelligente Verknüpfung von ERP und Shop spart Kosten und vereinfacht die Arbeit für alle Beteiligten.

B2B Commerce // Kundenorientierte Inhalte und Angebote durch Personalisierung

21 Dez

Ein moderner Onlineshop zeichnet sich dadurch aus, dass er Kunden bedarfsgerechte Angebote und Inhalte unterbreitet und so mehr Umsätze generiert. Solche so genannten personalisierten Inhalte werden auch für Kunden im B2B-Bereich zunehmend wichtiger. Passende Empfehlungen basierend auf den bisherigen Einkäufen und besuchten Produktseiten sind hierbei ein viel genutztes Instrument. Was eine solche Recommendation Engine für Sie leisten kann, werden wir Ihnen im Frühjahr 2016 vorstellen.

Für die eCommerce Plattform silver.e-shop bereiten wir zur Zeit ein weiteres Werkzeug vor, das es Shopbetreibern ermöglicht, noch auf anderen Wegen Inhalte zu personalisieren – durch Kundensegmente und Filter.

Nutzersegmente erstellen in silver.e-shop – Backend

Nutzersegmente erstellen in silver.e-shop – Backend

Wie kann ich Kundensegmente erstellen?

Als Shop-Betreiber können Sie im Backend bestimmte Merkmale festlegen, anhand derer Nutzer einem Kundensegmente zugeordnet werden.

Solche Merkmale könnten z.B. sein:

  • Infos aus dem ERP: z.B. Kundengruppe, Kundennummer, Sperr-Kennzeichen, Branche, Land oder Postleitzahl
  • Infos zum Kaufverhalten: Anzahl Aufträge, Auftragswerte, Datum des letzten Kaufs, gekaufte Produktgruppen, Marken oder Produkte
  • Warenkorb-Abbrüche
  • Newsletter-Anmeldung
  • Nutzung von Marketing Gutscheinen

Die Segmente werden dynamisch erstellt, d.h. Kunden erscheinen durch Ihr Verhalten in den entsprechenden Segmenten. Auch neue Kunden werden automatisch zugeordnet.

Was mache ich im Shop mit den Kundensegmenten?

Im Shop können an diversen Stellen für ausgewählte Kundensegmente nun spezielle Banner, Angebote oder Informationen angezeigt werden. Erstellen Sie z.B. ein Segment mit Kunden, die länger als 6 Monate nichts bestellt haben. Um diese Kunden zum Kauf zu animieren, können Sie ihnen direkt einen Gutschein-Code anzeigen, der sofort eingelöst werden kann.

Banner mit individuellem Rabattcode im Onlineshop

Banner mit individuellem Rabattcode im Onlineshop

Wo können Kundensegmente noch zum Einsatz kommen?

Nun hat man im Shop differenzierte Kundensegmente und kann dort spezielle Kampagnen aussteuern. Aber selbstverständlich gibt es noch mehr Kanäle, auf denen man Kunden ansprechen möchte. So wäre es z.B. auch möglich, die Kunden einzelner Segmente zu exportieren und in ein Newsletter- oder Marketing-Tool einzuspielen. Mittels Email können so beispielsweise Kunden angeschrieben werden, die seit 3 Monaten nichts mehr gekauft haben. Hierbei müssen natürlich Datenschutzbestimmungen beachtet werden.

Sie möchten Kunden gezielt neue Zusatzprodukte  für ein bestimmtes Produkt anbieten? Erstellen Sie einfach ein Segment mit den Kunden, die in einem bestimmten Zeitraum ein bestimmtes Produkt gekauft haben und sprechen Sie diese direkt an!

Auch eine Verwendung in einem Direktmailing ist denkbar, um z.B. alle Nutzer einer bestimmten Maschine zur nächsten Fachmesse einzuladen.

Personalisierter Newsletter

Personalisierter Newsletter

Sie haben schon Ideen und besondere Anforderungen?

Kein Problem. Sie haben die Sicherheit, dass unsere Plattform und die verfügbaren Zusatzmodule die gängigsten Anwendungsfälle standardmäßig abdecken. Darüber hinaus finden wir für Sie auch die passende individuelle Lösung. Als Spezialist für B2B Onlinehandel kennen wir uns aus mit Spezialanforderungen, Branchenlösungen und der Integration von diversen Drittsystemen. → Fragen Sie uns und wir finden gemeinsam den besten Weg.