Optimal 03/2014: Responsive Design

Ausgabe

# 3 | 2014

Kundenmagazin der kernpunkt GmbH

RESPONSIVE WEBDESIGN Was kann es wirklich? ›› Im Interview: Jan Eickmann, Stefan Borchert, Thomas Fischer ›› Responsive Webdesign: Herausforderungen für Online-Marketer ›› Case Study: Kundenkommunikation bei NetCologne ›› Responsive E-Commerce: OXID und Demandware

Inhalt

›› Responsive Webdesign: Herausforderungen für Online-Marketer 4 ›› Im Interview: Jan Eickmann, Stefan Borchert, Thomas Fischer 6 ›› Case Study: Kundenkommunikation bei NetCologne 12 ›› Responsive Online-Shops: OXID und Demandware 14

Impressum: kernpunkt GmbH, Oskar-Jäger-Str. 170, 50825 Köln | Verantwortlich für den Inhalt: Matthias Steinforth | Auflage: 1.600 Stück | Erscheinung: vierteljährlich | Layout: Verena Stark | Redaktion: Tanja Kiellisch, Matthias Steinforth, Dominik Neumann | Bildmaterial: kernpunkt GmbH, istockphoto.com, Wirtgen Group, e-Spirit AG, Inxmail GmbH, Google Inc., Oracle Eloqua, NetCologne GmbH, Oxid eSales AG, Demandware Inc., Twitter Inc. www.kernpunkt.de

2

Optimal | Kundenmagazin der kernpunkt GmbH

Vorwort

VER ÄND ERU NG

Alles verändert sich. In unserer Branche geschieht das besonders rasant. Ohne einen neuen Trend, eine noch ausgereiftere Technologie oder neuen Apps vergeht kein Tag. Da heißt es am Ball bleiben, um sich permanent mit neuen Ideen auseinanderzusetzen. Mir persönlich macht das viel Spaß. Veränderung ist gut, denn sie hält den Kopf frisch und das Herz neugierig, auch wenn es teilweise anstrengend ist.

Diesen Leitsatz verfolgen wir auch bei kernpunkt. Wenn Sie uns in letzter Zeit einmal besucht haben, wird Ihnen aufgefallen sein, dass wir uns räumlich vergrößert haben.

Im Erdgeschoss gehören uns nun weitere Räume, die ich zusammen mit meinem Team aus Kundenbetreuung, Vertrieb und Marketing bezogen habe. So entzerrt sich unsere räumliche Situation und wir haben noch mehr Platz für die neuen Kollegen aus den Bereichen Projektleitung und Konzeption.

Ihnen wird aufgefallen sein, dass wir auch unser Vorwort geändert haben. Unser erstes – und letztes – Video-Vorwort fand leider nicht so viele Zuschauer wie gehofft. Die Klickzahlen sprechen eine eindeutige Sprache. Da diese sehr niedrig waren und der Aufwand eines Video-Drehs zu hoch, haben wir uns entschlossen, das Video-Vorwort erst einmal auf Eis zu legen und zum klassischen Vorwort zurückzukehren. Das ist der Vorteil am Online-Marketing: Wir können ausprobieren, messen und verändern, was nicht gut läuft.

Ich wünsche Ihnen viel Spaß bei der Lektüre. <

› Matthias Steinforth, Geschäftsführung Marketing und Vertrieb

# 2 # 3 | 2014

3

Schwerpunkt

RESPONSIVE DESIGN Die drei Herausforderungen für Online-Marketer Von Tanja Kiellisch Online-Nutzer greifen verstärkt mobil auf Internetseiten zu. Sowohl Informations- und Unterhaltungsangebote als auch Online-Shops stehen vor der Herausforderung, die damit verbundene Erwartungshaltung zu erfüllen.

Grundsätzlich schafft ein nutzerzentriertes Online-

auf einspaltig verschoben. Buttons wechseln ihre Po-

Angebot die besten Voraussetzungen für eine hohe

sition immer genauso, dass der Nutzer sie auch ohne

Conversion und zufriedene Nutzer. Dabei muss auch

Mauszeiger bedienen kann. Diese Flexibilität setzt eine

die Nutzungssituation des Besuchers berücksichtigt

genaue Planung und Konzeption der Website voraus.

werden. Ob dieser zu Hause auf dem Sofa, im Büro

Von vornherein muss auf eine schlanke Informations-

am Schreibtisch oder stehend an einer Bushaltestelle

architektur sowie auf reduzierte Texte und Bilder ge-

verweilt, während er ein Online-Angebot aufsucht, hat

achtet werden. Das ist nicht nur für den mobilen Abruf

maßgeblichen Einfluss darauf, wie Online-Inhalte prä-

vorteilhaft. Auch stationäre Seiten profitieren von einer

sentiert werden sollten. Für den Online-Nutzer hat das

übersichtlichen und sortierten Ansicht, die sich auf die

Online-Angebot immer gleich gut zu sein, ohne dass er

wesentlichen und für den Nutzer relevanten Aspekte

aktiv nach mobil optimierten Seiten oder Apps suchen

konzentriert.

muss. Webseiten müssen also in der Lage sein, sich automatisch auf eine bestimmte Erwartungshaltung hin

Es scheiden sich die Geister daran, ob der Nutzer für

flexibel anzupassen. Von dieser Anspruchshaltung sind

jede Nutzungssituation entsprechend individuelle In-

sowohl Design als auch Inhalt betroffen. Die diesem

halte erhalten sollte. Eine Möglichkeit ist, einen Online-

„Nutzer-Briefing“ am ehesten gerecht werdende Online-

Auftritt generell so aufzubauen, dass sich der Nutzer an

Form ist die responsive Website.

jedem Ort der Welt gleich gut dort auskennt und stets dieselben Inhalte erhält, diese dann eben in veränderter

Herausforderung 1: Die responsive Website

Form und nutzerfreundlich aufbereitet.

Ein responsiver Online-Auftritt passt sich dem Abruf

4

mit unterschiedlichen Endgeräten flexibel an. Dabei

Es kann aber auch sein, dass die Nutzer an unterschied-

verändert sich neben der Größe des sichtbaren Be-

lichen Orten auch nur bestimmten Content suchen. Un-

reichs auch die Positionierung der Navigationsstruktur,

terwegs ist vielleicht eine Wegbeschreibung oder eine

die zum Beispiel von der linken Seite in den Kopf der

direkte Kontaktaufnahme wichtiger, als beispielsweise

Seite rutscht und auch inhaltlich reduziert werden kann.

Unternehmensneuigkeiten oder Produkvorstellungen zu

Genauso können Bilder verkleinert werden oder sie

lesen. Abends auf dem Sofa hingegen könnten Unter-

verschwinden bei der kleinsten Gerätegröße komplett.

haltungsangebote, informative Artikel oder Shopping-

Texte werden automatisch von drei- oder zweispaltig

angebote interessant sein. Die Entscheidung, ob Inhalte

Optimal | Kundenmagazin der kernpunkt GmbH

separiert werden sollen, sollte davon abhängig ge-

Herausforderung 3: Mobile Bestellprozesse

macht werden, welchen inhaltlichen Fokus die Website

Ein einwandfrei funktionierender Bestell- oder Trans-

verfolgt und wie umfangreich ihre Inhalte sind. Gegebe-

aktionsprozess ist unabdingbar für den Kaufabschluss.

nenfalls reicht bereits eine generelle Reduzierung der

Bei dem kleinsten Problem brechen die Interessenten

Inhalte und die Fokussierung auf das Wesentliche, um

den Einkauf ab. Wichtig ist, die Seiten kurz zu halten

allen Nutzeransprüchen gerecht zu werden.

und unnötiges Scrollen zu verhindern. Es sollten nicht mehr als vier Schritte notwendig sein, um die Bestel-

Herausforderung 2: E-Mail-Marketing

lung abzuschließen: Warenkorbansicht, Eingabe bzw.

Der Anteil an mobil gelesenen Newslettern steigt wei-

Überprüfung der Kontaktdaten, Auswahl der Versand-

ter stark an. Um herauszufinden, wie groß der mobile

art, Bestellübersicht. Alle Eingabe- und Bedienfelder

Leserkreis am eigenen Newsletter ist, sollte ein Analy-

sollten großzügig und übersichtlich gestaltet sein. Zu

se-Tool Einsatz finden. Ist die Anzahl prägnant, muss

klein gehaltene Formulare und Ansichten frustrieren

dringend darüber nachgedacht werden, den Newsletter

den potenziellen Käufer. Eine Fortschrittsanzeige, die

für diese Leserschaft zu optimieren. Ansonsten ist die

idealerweise noch klickbar ist, sollte zum Standard ge-

Ansicht eines Newsletters auf einem mobilen Endgerät

hören. In den Warenkorb gehören Produktabbildungen,

unter Umständen sehr unbefriedigend für den Nutzer.

die einfach per Finger vergrößert werden können, ge-

Die Optimierung kann über ein separat zur Verfügung

nauso wie die Möglichkeit, die Anzahl der ausgewählten

gestelltes Layout für den mobilen Zugriff geschehen,

Artikel verändern zu können. Wichtig ist auch, den Wa-

aber besser noch unter Verwendung von Responsive

renkorb geräteübergreifend nutzen zu können, denn der

Design.

Online-Einkauf vollzieht sich heutzutage etappenweise und wird an unterschiedlichen Nutzungsorten initiiert

Die technische mobile Optimierung für Newsletter kann

wie abgeschlossen. Eine Registrierung vor Bestellung

recht umfangreich ausfallen, da die Newsletter-Ansicht

mit eigenem Kundenkonto sollte möglich, aber nicht

für jedes Endgerät und Betriebssystem individuell an-

Pflicht sein. Je einfacher und kürzer ein Bestellprozess

gepasst werden muss. Das wird mithilfe von CSS-Me-

gestaltet ist, desto stärker ist die Kaufbereitschaft.

dia-Queries gelöst, also programmierte Gestaltungsanweisungen für den Newsletter. Nahezu alle namhaften

Insgesamt stehen Anbieter vor vielen Herausforde-

Anbieter von Newsletter-Software stellen solche Tem-

rungen, Ideen und Möglichkeiten, ihren Online-Auftritt

plates zur Verfügung. Diese können bei Bedarf ange-

für ihre sehr heterogenen Zielgruppen anzupassen.

passt werden. Bei der inhaltlichen Ausgestaltung des

Je souveräner, moderner und ausgefeilter ein Online-

Newsletters sollte darauf geachtet werden, Texte und

Auftritt gelebt wird, desto selbstverständlicher werden

Betreffzeilen nicht zu lang und Bilder nicht zu groß wer-

Interessenten und Kunden ihn aufsuchen und ihm treu

den zu lassen. Buttons müssen gut sichtbar und groß

bleiben. <

genug abgebildet sein, damit sie auch durch Touch-Bedienung funktionieren.

Die Verlinkung ganzer Teaser oder Passagen kann eine hilfreiche Conversion-Maßnahme sein. Der Versand von mobilen Newlettern eröffnet zudem neue Möglichkeiten für Kampagnen. Mobile Coupons beispielsweise erfreuen sich immer größerer Beliebtheit.

Was nie vergessen werden darf: Nicht nur der Newsletter selbst, sondern im Anschluss auch die Landing-Page muss mobil optimiert sein. Ansonsten ist der OnlineAuftritt nicht konsistent.

# 3 | 2014

5

Nachgefragt

Jan Eickmann, Stefan Borchert, Thomas Fischer

„DAS SETZT DER NUTZER VORAUS.“ Es wird Zeit, umzudenken. Online-Nutzer wählen anstelle eines Hauptkanals viele verschiedene Endgeräte für den Online-Zugriff. Dabei erwarten sie einen einheitlichen und auf ihre Nutzungssituation abgestimmten Online-Auftritt.

Wie sollen Unternehmen auf diese Anforderungen reagieren? Ein Gespräch mit Jan Eickmann, Stefan Borchert und Thomas Fischer.

Optimal: Wie stark wird Responsive Design derzeit von Unternehmen angefragt?

Jan: Bei neuen Projekten wird das Thema als selbstverständlich angesehen und wird nicht mehr explizit angefragt.

Eigentlich ist Responsive Design ja erst einmal nur eine technische Lösung, um überhaupt auf mobilen Endgeräten präsent zu sein. Werden die Unternehmen genauer befragt, heißt die Anforderung eigentlich: „Wir müssen mobile Endgeräte bedienen“.

O: Muss bei dem responsiven Umbau von umfangreichen Websites nicht auf viele Inhalte verzichtet werden?

Stefan: Verzichten muss man in den seltensten Fällen. Viel wichtiger ist wirklich, dass der Nutzer eine auf sein Endgerät optimierte Darstellung erhält. Denn das setzt der Nutzer inzwischen auch voraus.

Jan: Ich glaube, es geht nicht um Verzichten. Die Frage ist weniger, was zeige ich mobil an, sondern wie priorisiere ich meine Inhalte mobil.

O: Wobei ich mobil vielleicht noch ganz andere Fragestellungen habe als stationär.

Jan: Ja, da kann man sich drüber streiten. Ich glaube, so unterschiedlich sind die gar nicht. Klar gibt es gewisse Themen, die mobil noch mal relevanter sind als stationär. Aber

6

Optimal | Kundenmagazin der kernpunkt GmbH

Stefan Borchert kombiniert Design mit Funktion

Jan Eickmann (rechts im Bild) ist Leiter der Strategie bei kernpunkt. Er erarbeitet und realisiert gemeinsam mit Art-Director Stefan Borchert (links im Bild) und Frontend-Entwickler Thomas Fischer Konzepte für nutzerzentrierte Online-Auftritte

machen die Leute mobil wirklich so viel anders auf den Sei-

Stefan: Responsive Design hat nicht immer mit Reduk-

ten? Abgesehen davon, dass jemand eine Anfahrtsadresse

tion zu tun. Ich habe schon einen gewissen Spielraum. Wir

oder ähnliches braucht – was mache ich denn mobil noch,

gestalten Webseiten ja nicht, um sie besonders bunt oder

was ich auf dem Desktop nicht mache? Ich schaue unter-

auffällig zu machen. Wir machen sie nutzbar. Das steht bei

wegs ja nicht nur mal eben schnell etwas nach, sondern ich

Responsive Design genauso im Vordergrund, wie für den

sitze auch zu Hause auf dem Sofa und recherchiere etwas.

Desktop-Rechner oder für jedes andere Endgerät.

O: Wie aufwändig ist die Umsetzung von responsivem Design?

„Das ist der Tod jeder Website.“

Thomas: Das ist natürlich komplexer und man muss damit rechnen, dass das länger dauert als die Entwicklung einer

O: Unterscheidet sich die Entwicklung von responsivem

nicht-responsiven Seite.

und stationärem Design?

O: Wahrscheinlich macht es auch Sinn, im Zuge eines

Stefan: Die Konzeptionsphase ist etwas länger, da alle Auf-

Relaunchs manche Funktionen zu überdenken?

lösungen im Blick behalten werden müssen. Ich muss mir

Thomas: Das meiste lässt sich schon gut abbilden. Aber

überlegen, wie etwas an welchem Endgerät aussieht und

aufgrund des Platzmangels muss die Seite unter Umstän-

wie sich alles verschieben kann. Ich brauche von vornhe-

den prägnant umgebaut werden. Tabellen zum Beispiel, die

rein einen Plan, wie sich die Website verhalten soll. Das

fest in der Breite sind, umbrechen zu lassen, sind eine wah-

dauert halt ein bisschen.

re Herausforderung.

O: Für Laien: Wie funktioniert Responsive Design tech-

O: Das heißt, der Designer muss sehr gut überlegen, wie

nisch?

Inhalte dargestellt werden. Kann man sich überhaupt

Thomas: Wirklich geboren ist es erst mit den neuen Web-

noch kreativ ausleben, wenn man sich bei der Gestaltung

techniken, also HTML5, CSS3 und natürlich Javascript. In

einer Website hauptsächlich auf die funktionale Kompo-

den neuen Versionen können Bedingungen hineingeschrie-

nente konzentrieren muss?

ben werden, die auf Eigenschaften der Geräte des Nutzers # 3 | 2014

7

Nachgefragt

reagieren können.

zu kämpfen gehabt. Wenn Du Dir vorstellst, dass sich zum

O: Das heißt, Du musst alle möglichen Auflösungen be-

Beispiel der Hersteller einer Schokolade emotional präsen-

rücksichtigen, die theoretisch abgefragt werden kön-

tieren will, geht das natürlich maßgeblich über Bilder. Dann

nen?

kann Responsive Design ein entsprechendes Problem dar-

Thomas: Wir arbeiten mit Breakpoints, meist mit vier ver-

stellen, wenn nicht an die Details gedacht wird.

schiedenen Auflösungen. Wir bauen quasi vier Versionen

O: Wobei sich hier auch wieder die Frage stellt, ob der

der Website.

Nutzer überhaupt emotional abgeholt werden soll, oder

Jan: Eigentlich sind das Auflösungsbereiche.

ob in dem Moment nicht reine Produktinfos ausreichen.

Thomas: Ja, zum Beispiel 0-480 Pixel, 481 bis 768 Pixel,

Jan: Ich glaube, das zwingt uns noch mehr dazu, uns Ge-

769 Pixel bis 980 Pixel, 981 Pixel bis unendlich.

danken darüber zu machen, wer die Seite in welcher Le-

O: Führt responsives Design zu längeren Ladezeiten?

benslage nutzt.

Thomas: Auf jeden Fall. Zwei Drittel der responsiven Sei-

Stefan: Der Zweck steht letztendlich noch viel stärker im Fo-

ten, die es derzeit gibt, sind einfach untauglich. 70% der

kus. Was will ich mit meiner Website erreichen? Und das

Seiten benötigen über vier Sekunden Ladezeit, teilweise

kann auch am Desktop oder am Handy dasselbe sein, das

sogar bis zu 80 Sekunden. Das ist natürlich der Tod jeder

muss sich nicht zwangsweise unterscheiden.

Website. Da muss optimiert werden.

O: Welchen Tipp gebt ihr Unternehmen mit auf den Weg, die kurz vor einem Relaunch stehen?

Jan: Sich von der Vorstellung lösen, der Nutzer sitzt nur an einem Gerät. Responsive Design ist für viele Websites eine gute Lösung, aber nicht für alle. Im B2B-Umfeld greifen derzeit übrigens auch rund 10% der Nutzer mobil zu, also auch da ist es eine wichtige Überlegung. <

Der Nutzer steht bei Jan Eickmann immer im Mittelpunkt

Jan: Mobiltauglichkeit heißt ja nicht nur, die Website funktioniert auf jedem Endgerät, sondern sie funktioniert auch bei schlechter Verbindung, irgendwo im Wald, mitten auf dem Feld. Die 100 MBits, die man in der Stadt vielleicht hat, sind ja nicht überall Realität. Da geht es dann genau um diese Ladezeit. Die Seiten müssen entsprechend gebaut werden, um sie mit guten Ladezeiten auszustatten.

„100 Mbits sind nicht überall Realität.“ Thomas: Klassisches Beispiel ist ein Bühnen-Slider am Kopf einer Seite. Wenn man für den Zugriff mit dem mobilen Device kleinere Bilder zur Verfügung stellt, hat man die Ladezeiten direkt schon prägnant reduziert.

Stefan: Damit haben früher vor allem die großen Marken

8

Optimal | Kundenmagazin der kernpunkt GmbH

Thomas Fischer kennt die technischen Kniffe bei responsiven Webseiten › Interview online lesen und weiterempfehlen: kernpunkt.de/magazin

Projekte

Im Portrait

Modern und responsiv

RELAUNCH FÜR DIE WIRTGEN GROUP Die Wirtgen Group präsentiert ihre fünf Marken und die damit verbundenen rund 50 Länderseiten künftig mit überarbeiteten Online-Auftritten. Mit einem modernen und großzügigen Layout verstehen es die Baumaschinenhersteller, das Thema Straßenbau in Szene zu setzen und bauen auf die Emotionalisierung ihrer Produkte.

Dafür sorgen zum Beispiel auf www.wirtgen.de und www. kleemann.info große Bühnen am Kopf der Seite genau wie kurzweilige Teaser und ausführliche Produktdarstellungen. Letztere zeigen Liebe fürs Detail: Einzelne Elemente auf den jeweiligen Abbildungen sind anklickbar. Es öffnet sich eine Box, die weitere Informationen und auch Videos über das Produkt bereithält. Selbstverständlich stehen auf den Produktseiten Broschüren in mehreren Sprachen zum Download sowie weiterführende Links bereit. Alle Webseiten werden auf Basis von FirstSpirit 5 realisiert und sind responsiv. Bereits online ist neben

Sina Lienig Telefon: +49 221 - 569 576 - 416 E-Mail: s.lienig@kernpunkt.de Ausbildung: Ich bin Mediendesignerin und habe den Studienabschluss „Bachelor of Arts in Media Design“.

Job bei kernpunkt: Ich bin Art Direktorin.

Darum arbeite ich bei kernpunkt: Sehr wichtig für mich: Die tolle Atmosphäre zwischen den Kollegen.

www.wirtgen.de die einem Facelift unterzogene Website

Das schiebe ich immer wieder auf: Seidenblusen bügeln

www.voegele.info. In den nächsten Monaten sehen wei-

und Auto aussaugen.

tere Marken sowie die Vertriebs- und Servicegesellschaften ihrem Relaunch entgegen, modernisieren ihr CMS

Das unternehme ich an einem verregneten Sonntag: Kaf-

und frischen ihr Corporate Design auf.

fee kochen, Plumeau zur Couch tragen und fernsehen oder lesen. Oder mein Freund und ich packen uns in wetterfeste Kleidung und trotzen dem Regen mit einem Spaziergang oder Café-Besuch.

Wenn ich Superkräfte hätte wären das: Fliegen! Als eingefleischter Harry Potter-Fan wünsche ich mir ohnehin seit Erscheinen des ersten Bands einen fliegenden Besen. Das wäre also total super! Oder gilt zaubern können auch als Superkraft?!

Mein letzter Urlaub: Ist zu lange her. Mit der AIDA auf Frühjahrs-Kanaren-Tour.

Apple oder Android? Apple.

Frischer Online-Auftritt für Wirtgen

Die Mittagspause verbringe ich am liebsten: Immer mit meinen Kollegen, oft mit einem Avocado-Brot und zwei geschälten Möhren oder einem Salat.

Mein Internet-Geheimtipp: Schon etwas älter, aber immer wieder interessant zum Stöbern: http://www.thefwa.com/ Alternativ dazu aber auch: http://www.awwwards.com/ # 3 | 2014

9

Lösungen

DESIGN MIT SYSTEM Responsive Seiten umsetzen und steuern

Integrierte Multi-perspective Preview (MPP)

Einfache und schnelle Redaktion

FIRSTSPIRIT CMS

INXMAIL

Highlights

Highlights

› Content-fokussiert und responsiv

› Responsive Design und Responsive Content

› Automatisierte Anpassung an Endgeräte

› Individuelle und vorgefertigte Newsletter-Templates

› Multi-perspective Preview (MPP)

› Analyse mobiler Zugriffe

Was kann es?

Was kann es?

FirstSpirit unterstützt Redakteure und Marketers zu-

Mit Inxmail Professional lassen sich sehr schnell und

verlässig bei der effizienten Steuerung ihrer digitalen

unkompliziert individualisierte und mobil optimierte

Multi-Channel-Kommunikation. Anhand der integrier-

Mailings und Newsletter erstellen. Neben Individual-

ten Multi-perspective Preview (MPP) lassen sich bei-

Templates stehen hierfür auch vorgefertigte Newslet-

spielsweise nicht nur jegliche Content-Varianten direkt

ter-Templates zur Verfügung, die sich in Darstellung

im CMS prüfen und optimieren, sondern auch die

und Bedienverhalten automatisch an das Endgerät

Darstellung gewünschter Inhalte einfach steuern.

des Empfängers anpassen. Auch die Inhalte können

FirstSpirit unterstützt durch seine flexible Architektur

abhängig vom jeweiligen Endgerät des Empfängers

und Skalierbarkeit nicht nur die einfache Umsetzung

ausgeliefert werden. Dabei wird zwischen verschie-

responsiver Webauftritte, sondern sorgt dabei glei-

denen mobilen Endgeräten unterschieden. Die detail-

chermaßen für eine herausragende Performanz und

lierte Reporting-Funktion zeigt, wie viele mobile Öff-

Usability im Front- und Backend.

nungen pro Versand verzeichnet werden und welche

Content Management auf allen Kanälen

Responsives Newsletter-Marketing

Betriebssysteme hierbei zum Einsatz kommen.

Mehr Info: kernpunkt.de/kompetenzen/firstspirit-cms Mehr Info: kernpunkt.de/kompetenzen/inxmail

10

Optimal | Kundenmagazin der kernpunkt GmbH

Die Mehrkanalfähigkeit eines Online-Auftritts steht und fällt mit der technischen Basis. Wir stellen Ihnen Lösungen vor, mit denen Sie auf allen Kanälen gut aufgestellt sind.

Übersichtliches und individuelles Dashboard

Erstellung von responsiven Kampagnen

GOOGLE ANALYTICS

ORACLE ELOQUA

Highlights

Highlights

Responsive Analyse und Auswertung

Management von responsiven Kampagnen

› Segmentierung mobiler Aktivitäten

› Template-Galerie für mobile Newsletter

› Conversion-Optimierung

› Import externer Mail-Editoren möglich

› Mobile Reports

› Zusatzmodul Eloqua4FirstSpirit

Was kann es?

Was kann es?

Mit Google Analytics lässt sich vor einem geplanten

Marketing Automatisierung mit Eloqua ermöglicht ziel-

Relaunch prüfen, ob der Wechsel in ein responsives

gerichtete und hoch automatisierte Newsletter-Kam-

Design überhaupt Sinn macht. Beispielsweise können

pagnen. Unter Verwendung spezieller Templates kön-

die mobilen Zugriffe mit den Desktop-Zugriffen vergli-

nen mobil optimierte Newsletter verschickt werden.

chen werden. Zur Überprüfung des responsiven Auf-

Dabei muss der Inhalt nur einmal erstellt werden. Elo-

tritts stehen zahlreiche Möglichkeiten zur Segmentie-

qua passt den Newsletter automatisch an das jeweilige

rung zur Verfügung. Eingesetzte Endgeräte, Browser,

Endgerät an. Noch einfacher ist die Erstellung von mo-

Betriebssysteme oder die mobile Conversion können

bilen Newslettern in Kombination mit dem CMS First-

bis ins Detail ausgeleuchtet werden.

Spirit. Die Redaktionsarbeit wird mit dem speziellen Modul Eloqua4FirstSpirit zu FirstSpirit ausgelagert und

Mehr Info: kernpunkt.de/kompetenzen/google-analytics

erlaubt Redakteuren, E-Mails templatebasiert zu gestalten. Das Versand- und Kampagnenmanagement sowie die Kampagnenauswertung verbleiben bei Eloqua.

Mehr Info: kernpunkt.de/kompetenzen/eloqua

# 3 | 2014

11

Case Study

Moderne Kundenansprache

ONLINE-KOMMUNIKATION FÜR NETCOLOGNE Die Website von NetCologne zeigt den Weg eines modernen Telekommunikationsunternehmens im Internet auf: Klare Strukturen und Prozesse, ein einfaches Bedienkonzept und gute Auffindbarkeit der Inhalte durch Suchmaschinen.

Die Nutzer von www.netcologne.de haben die Möglichkeit, fast alle Anliegen online statt in einer Filiale zu klären.

Interessenten und Kunden, die den Online-Auftritt des Kölner

ches Produkt Sie haben möchten, können über den „Jetzt

Unternehmens besuchen, haben ein bestimmtes Anliegen.

bestellen“-Button einfach in den B2B-Shop wechseln.

Ziel von NetCologne ist es, dieses Anliegen zu bedienen und gleichzeitig Produkt- und Unternehmensinformationen anbzubieten. Die Herausforderung liegt hierbei in der breitgefächerten Zielgruppe mit ihren unterschiedlichen Bedürfnissen. Die hohe Qualität des Angebots soll sich auch auf der Website widerspiegeln, so dass aus Online-Interessenten Online-Kunden werden.

Konversionsziele für unterschiedliche Zielgruppen Die Zielgruppe von NetCologne umfasst nahezu alle Menschen und Unternehmen der Region und reicht damit vom einzelnen Privatkunden bis hin zum Großkonzern. Daraus ergeben sich stark variierende Bedürfnisse und Ansprüche, denen die Website Rechnung trägt. Das Angebot wird nicht

Startseite von netcologne.de

nur nach Privat- und Geschäftskunden sowie Interessenten aus dem Bereich Wohnungswirtschaft unterteilt. Innerhalb

Übersichtlich und schnell für Privatkunden

des Geschäftskunden-Segments wird noch einmal zwischen

Online-Besucher, die auf der Suche nach einem Telefon-

kleineren, mittleren und großen Unternehmen unterschie-

oder Internet-Anschluss für den Privatgebrauch sind, werden

den. Durch die unterschiedlichen Zielgruppen ergeben sich

schon auf der Einstiegsseite mit übersichtlichen und verständ-

verschiedene Konversionsziele. Während im Privatkunden-

lichen Produktpräsentationen empfangen. Die Produkte wer-

bereich die Produktbestellung bzw. -beauftragung im Vor-

den in aller Kürze in einer Vergleichstabelle aufgeführt. Der

dergrund steht, wird im Geschäftskundenbereich und im

Besucher erkennt so auf einen Blick die verschiedenen Tarif-

Segment Wohnungswirtschaft zunächst die Kontaktaufnah-

pakete. Bei Klick auf das jeweilige Tarifpaket können weitere

me, also die Generierung von Leads, fokussiert. Bei den

Details in Erfahrung gebracht werden. Anstelle von komple-

Geschäftskunden wächst mit steigender Unternehmensgrö-

xen Darstellungen erwarten den Nutzer übersichtliche und

ße auch die Komplexität der Kommunikationslösungen und

verständliche Produktpräsentationen in Form von Reiterkar-

damit der Bedarf nach maßgeschneiderter Information und

ten. Darüber hinaus werden die Highlights eines Produkts am

Beratung. Interessenten, die sich bereits sicher sind, wel-

Kopf der Seite zusammengefasst und komprimiert präsentiert.

12

Optimal | Kundenmagazin der kernpunkt GmbH

Multi-Channel-Kommunikation mit Responsive Design

Persönlich für Geschäftskunden

die Seite emotional auf und geben ihr den typischen Net-

Auf der Startseite „Geschäftskunden“ erfolgt der zentra-

Cologne-Look. Buttons und Störer sind gut sichtbar platziert

le Einstieg über die Unternehmensgröße. Drei Text-Bild-

und greifen die Corporate-Farben auf. Die gesamte Webseite

Teaser verlinken in die Bereiche „Kleine Unternehmen“,

wird mittels Responsive Design realisiert und garantiert so

„Mittlere Unternehmen“ und „Große Unternehmen“, wobei

eine Darstellbarkeit auf unterschiedlichsten Endgeräten vom

die in den Teaser integrierte Mitarbeiterzahl und ein kurzer

Desktop über verschiedene Tablets bis zu Smartphones. Die

Einleitungstext dem Geschäftskunden bei der Einordnung

NetCologne-Website basiert technisch auf dem Content-Ma-

des eigenen Unternehmens helfen.

nagement-System Drupal. <

Aufgrund der hohen Produktvielfalt und -komplexität wird im Geschäftskundenbereich stärker leistungsbezogen argumentiert. Die Produkte werden als Lösung für bestimmte Anforderungen vorgestellt. Durch den hohen Beratungsbedarf ist im Geschäftskunden-Segment die Kontaktaufnahme zentrales und messbares Konversions-Ziel.

Geschäftskunden werden gleich mehrere interessante Optionen geboten. Sie können nicht nur selbst eine telefonische oder schriftliche Anfrage stellen, sondern außerdem die Rückruf-Option oder den Service-Chat nutzen.

Klar und offen im Layout Beim Layout wurde vor allem auf Offenheit und Übersichtlichkeit geachtet. Großflächige Bilder, die aktuellen Marketingkampagnen von NetCologne entnommen sind, laden

Übersichtlicher Produktvergleich › Ausführliche Case Study unter kernpunkt.de/ergebnisse/netcologne-gmbh

# 3 | 2014

13

Produktvorstellung

OXID ESALES: DEM VERÄNDERTEN NUTZERVERHALTEN GERECHT WERDEN Responsive Design ist ein Trendthema im E-Commerce. Das veränderte Nutzungsverhalten der Besucher macht es zur Pflicht, die Darstellung des Onlineshops an verschiedene Endgeräte anzupassen, um eine gleichbleibende Usability zu bieten.

Responsiver Shop der medi GmbH & Co. KG auf Basis von OXID

Einfache Umsetzung mit dem Mobile Modul von OXID

Gut gerüstet mit OXID eShop

Es geht um Usability

Um E-Commerce-Unternehmen im Bereich Responsive De-

Generell müssen sich E-Commerce-Treibende beim Thema

sign zu unterstützen, bietet OXID eSales mehrere Responsi-

Responsive Design oder Mobile-Strategie bewusst machen,

ve-Templates über den internationalen Marktplatz OXID eX-

dass es nicht ausreicht, sich allein mit der Darstellung der

change an. Wer viele Besucher in seinem Shop identifiziert,

vom Desktop bekannten Shopoberfläche zu beschäftigen.

die mit Smartphones einkaufen, sich informieren oder im

„Die Überlegung muss sein, welche Use-Cases unterstütze

Rahmen einer Crosschannel-Integration mobile Zusatzfunkti-

ich auf welchem Endgerät in welcher Nutzungssituation? Da-

onalitäten anbieten möchte, sollte in Betracht ziehen, eine ei-

bei geht es allerdings nicht nur um die reine Optik, sondern

gene Mobile-Strategie zu verfolgen, die über den Ansatz „Ein

vielmehr um die Usability“, erklärt Roland Fesenmayr, CEO

Template für alle Endgeräte“ hinausgeht. Ein in Kooperation

der OXID eSales AG. Shopbetreiber sollten sich folgende

mit PayPal entstandenes Mobile Theme von OXID eSales,

Fragen stellen: Welche Elemente aus dem Shop werden in

das mit der aktuellen Shop-Software ausgeliefert wird, steht

welcher Ausprägung auf dem jeweiligen Endgerät darge-

hier für Smartphones zur Verfügung. Die Königsdisziplin stellt

stellt? Sind tatsächlich alle Elemente des Shops für mobile

die Entwicklung einer Native App für iOS und Android dar,

Nutzer relevant? Oder erhöht in diesem Fall eine reduzierte

die um ausgefeilte unternehmensspezifische Services erwei-

Oberfläche im Sinne einer Fokussierung auf das Wesentliche

tert werden kann. Wobei sich der Einsatz einer solchen App

die Customer Experience? Sind diese Fragen beantwortet,

aktuell ausschließlich im Enterprise-Umfeld finden lässt.

steht der Umsetzung eines erfolgreichen Responsive Designs nichts im Weg.

14

Optimal | Kundenmagazin der kernpunkt GmbH

gezeigt werden sollen, während ein konsistentes Markenerlebnis gewahrt wird. Die Inhalte werden einmal erstellt und passen sich dann automatisch an das Format bestimmter Mobil- oder Tablet-Geräte an. Die Händler können selbst ganz einfach bestimmen, ob sie diese Funktion nutzen wollen oder nicht.

Wachsende mobile Aktivität Laut einem aktuellen Bericht auf theguardian.com besuchen in Großbritannien mittlerweile 52% der Nutzer Online-Shops über ein mobiles Endgerät. 36% der Online-Käufe werden über ein Smartphone oder Tablet abgeschlossen, wobei Tablets hier noch beliebter sind. Derzeit laufen 924 Seiten auf der Demandware-Plattform. Unter dem Strich sind alle E-Commerce-Anbieter gut beraten, ein mobiles Angebot bereitzustellen. < Responsiver Online-Shop von Jack Wolfskin

Demandware: Channel-Management mit SiteGenesis Mit der Entscheidung für die Commerce-Plattform Demandware erhalten Händler eine Reihe von integrierten Services.

Neben der ausgereiften Technologie, mit der Online-Shops sicher und skalierbar funktionieren, stehen den Shop-Betrei-

An oder aus: Responsive Design zum Ankreuzen

bern zahlreiche Entwicklungs- und Marketing-Tools zur Verfügung. Nicht zuletzt besteht Zugriff auf ein Set von Applikationen, mit denen der Live-Gang schnell und unkompliziert vonstatten geht.

Eine dieser Applikationen ist die sogenannte SiteGenesis.

Als Standard-Applikation begegnen Shop-Betreiber SiteGenesis direkt zu Beginn ihres E-Commerce-Projekts. Es kombiniert Best Practices in Nutzerfreundlichkeit, Verkaufsförderung und technischer Architektur, um ertragreiche Seiten zu bauen. SiteGenesis unterstützt Händler mit Beispielen und Vorlagen zu den Themen Promotion und Marketing, dynamische Suche oder Preislisten. Die Applikation wird regelmäßig aktualisiert und technisch optimiert, um den dauerhaften Erfolg der Kunden sicherzustellen. SiteGenesis ist eine Out-of-the-Box-Lösung, die einen guten Start in das Thema E-Commerce sichert.

Inhalte einmal erstellen und automatisiert anpassen Multi-Channel-Management, und damit Responsive Design, ist bei Demandware bereits seit vielen Jahren ein wichtiges Thema. Über SiteGenesis kann deshalb einfach ausgewählt werden, welche Attribute oder Aktionen auf jedem Kanal an-

Mit der Demandware-Applikation SiteGenesis wachsen Online-Shops automatisch mit # 3 | 2014

15

Das bewegt die Online-Welt

Harald Schmidt

@BonitoTV

20.06.14 11:49

Einfach einmal im Gespräch nebenbei „Typo3“ erwähnen und schon ist man der King. #likeaboss 38 Retweets

56 Favoriten

„TYPO3 ist uns als Verantwortliche im Online-Marketing seit vielen Jahren ein Begriff. Dass allerdings einer der bekanntesten Talkmaster in Deutschland per Twitter die OpenSource-Technologie ins Gespräch bringt, zeigt, wie sehr das digitale Marketing im Alltag angekommen ist.“ Matthias Steinforth

16

Optimal | Kundenmagazin der kernpunkt GmbH