Kundenbindung durch Responsives Webdesign: Tipps und Beispiele für Fachverlage, Foto Michal Kulesza

Tipps für Fachverlage: Wie präsentiere ich mein Unternehmen in der mobilen Welt?

Mit vielen Beispielen: Bessere Kundenbindung durch Responsive Webdesign

Vielleicht ist der Begriff „Responsive Webdesign“ für Sie schon ein alter Hut. Heutzutage können die meisten Internetuser etwas mit dem Begriff anfangen. Doch warum haben sich dann so viele Unternehmen immer noch nicht des Themas angenommen? Und warum präsentieren sich zahlreiche Unternehmen auch in der immer wichtiger werdenden mobilen Welt nur mit ihrer für den Desktop-Computer optimierten Website?

Wir werfen in diesem Artikel einen Blick auf die Welt der (Fach-)Verlage und zeigen auch anhand von Beispielen, was Kundenbindung mit responsiven Webdesign zu tun hat.

Es fällt sofort auf: Wenige Verlage legen Wert auf einen Internetauftritt, der von allen Endgeräten gleichermaßen gut bedienbar ist.

Gleichermaßen gut bedienbar bedeutet, alle Inhalte sind sowohl für Desktop-Computer als auch für Tablets und Smartphones optimiert und einfach zu bedienen.

Die Webpräsenzen verschiedener Verlage sind häufig schon in der Desktop-Version unübersichtlich, mit zu vielen Informationen bestückt und schlecht strukturiert. Von einer mobilen Version ist ganz zu schweigen.

Warum der klassische Aufbau einer Website ein Fallstrick in der mobilen Welt ist

Nehmen wir ein klassisches Beispiel:

  • eine Navigation, angeordnet oben oder an der linken Seite,
  • Content im mittleren Bereich,
  • der Footer mit Impressum, Kontakt, Anfahrt etc. unten auf der Seite,
  • letztlich das entscheidende Merkmal einer nicht responsiven Website: Die Seite ist auf eine bestimmte Breite skaliert und ausgerichtet.

Wenn diese Breite unterschritten wird, wird der Inhalt an den Seiten abgeschnitten. Ruft man diese Seite mit einem Smartphone auf, lässt sich ohne Zoomen nichts lesen. Denn: Die Seite wird im relativen Verhältnis auf die Größe des Smartphones runtergerechnet.

Im heutigen Zeitalter nimmt aber vor allem die Bedeutung von Smartphones immer weiter zu, denn sie werden immer leistungsfähiger und ermöglichen somit eine weitgehend barrierearme Internetnutzung – sofern die aufgerufene Website den Ansprüchen dafür gerecht wird. Daher ist es wichtig, dass jede Seite auch mobil gut aufrufbar ist.

Beispiel Nummer 1: der FISCHER Verlag

Die Website des FISCHER Verlags ist ein gutes Beispiel für eine klassische Website in der Desktop-Version, die mithilfe des responsiven Designs aber auch in der mobilen Version übersichtlich und gut gestaltet ist.

Kundenbindung durch Responsive Webdesign - Tipps und Beispiele für Fachverlage - FISCHER Verlag Tabletversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage - FISCHER Verlag Tablet
FISCHER Verlag Mobilversion
Kundenbindung durch Responsive Webdesign - Tipps und Beispiele für Fachverlage - FISCHER Verlag Mobil

 

Der Begriff „Responsive Webdesign“ und seine Funktion

Beim responsiven Webdesign handelt es sich um eine Technologie, die das Layout einer im Browser aufgerufenen Website dem jeweiligen Endgerät in Größe und Anordnung anpasst. Je kleiner der Viewport des Endgerätes (die Größe des Anzeigebereichs), desto weniger Platz ist vorhanden, um Informationen gut lesbar darzustellen.

Das Ziel von responsivem Webdesign ist es, alle benötigten Informationen der Website auf Smartphone, Tablet und Desktop gleichermaßen gut und übersichtlich darzustellen und dabei das Ausgangsdesign zu bewahren.  


Seit April 2015 ist dieses Thema gerade im Zusammenhang mit Google sehr wichtig geworden. Warum? Egal, wie suchmaschinenoptimiert Ihre Website auch ist, Google stuft Websites mit responsivem Design hochwertiger ein als ohne. Dementsprechend ist die Chance, dass Ihre Website bei Google weit oben gerankt wird viel höher, wenn Ihre Seite responsive ist.

Website-Optimierung: einfache Veränderungen mit großer Wirkung erzielen

Es gibt ein paar grundlegende und einfach umzusetzende Umsetzungskriterien, die jede Seite ansprechend responsive darstellen lassen.

Wird Ihre Website vom Smartphone aufgerufen, sollten folgende Aspekte aufzuweisen sein:

  • Navigationsleiste ausblenden und stattdessen oben ein Menü-Icon mit den gleichen Navigationspunkten einbinden, um die Seite trotz kleinerem Bildschirm übersichtlich zu gestalten
  • Nebeneinander angeordnete Textblöcke umbrechen lassen, damit sie sich untereinander anordnen
  • Kontaktinformationen schnell auffindbar anordnen
  • Ladezeiten verringern durch angepasste Datenmengen, Bildergrößen und Elemente
  • Finden Sie mit gängigen Webanalyse-Tools wie Google Analytics heraus, welche Seiten besonders häufig von Ihren Kunden mobil aufgerufen werden und optimieren Sie diese mit besonderem Augenmerk

Beispiel Nummer 2: der Deutsche Landwirtschaftsverlag (dlv)

Ein schönes Beispiel für eine gelungene responsive Website hat der Deutsche Landwirtschaftsverlag. Sowohl Desktop- als auch Tablet- und Smartphone-Größen haben ihre eigenen Versionen der Seite und sind optimal an die Größen der Endgeräte angepasst.

Kundenbindung durch Responsive Webdesign - Tipps und Beispiele für Fachverlage
Deutscher Landwirtschaftsverlag Desktopversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage - DLV Desktop
Deutscher Landwirtschaftsverlag Tabletversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage - DLV Tablet
Mobilversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage - DLV Mobil

 

Welches Ziel verfolgen Fachverlage mit ihrer Website?

Jedes Unternehmen verfolgt mit seiner Website ein Ziel. Neben der klassischen Selbstdarstellung soll der Kunde natürlich durch die Website einen Mehrwert haben, der ihm zugutekommt. Beides erreichen Sie nur, wenn der Besucher sich auf Ihrer Website wohlfühlt – am Computer sitzend oder unterwegs mit seinem Smartphone.

Nehmen wir ein Beispielszenario: Sie als Fachverlag verfolgen das Ziel, dass ein Besucher Ihrer Website ein (Probe-)Abonnement für eines Ihrer Produkte abschließt. Vermutlich ist der Besucher durch Werbemaßnahmen wie Newsletter, Printanzeigen oder andere Mailings eher zufällig auf Ihre Seite gestoßen und befindet sich gerade in der Bahn auf dem Weg von Hamburg nach Frankfurt.

Den Besucher zum Verweilen anregen

Findet er Ihre Seite

  • optisch und funktionsmäßig ansprechend,
  • kann er alle Seiten mit geringen Ladezeiten aufrufen und
  • interessieren ihn die Inhalte,

verweilt er vermutlich auf Ihrer Seite, denn es gibt keine Hürden für ihn zu überwinden. Das wirkt sich positiv auf sein weiteres Verhalten aus. Er kann sich dem Reiz des Angebots hingeben und ihm im besten Falle sofort nachgehen.

Wer durch eine Website in eine positive Grundstimmung verfällt und diese Website für vertrauenswürdig hält, ist eher bereit einen Newsletter zu abonnieren oder ein (Probe-)Abo für bspw. eine Zeitschrift abzuschließen. Nur so ist der Nutzer bereit, dem Unternehmen seine Kontaktdaten zu übermitteln.

Nur wer Vertrauen in ein Unternehmen und seine Seite hat, hinterlässt ihm seine Kontaktdaten.

Beispiel Nummer 3: DER SPIEGEL

Ein schönes Beispiel dafür ist das Abonnement, das ein Besucher auf der Seite des Spiegels abschließen kann. Sowohl am PC als auch mit dem Smartphone wird eine übersichtliche Darstellung geboten und man kann problemlos surfen.

Kundenbindung durch Responsive Webdesign - Tipps und Beispiele
DER SPIEGEL Desktopversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage -  DER SPIEGEL Desktop
Mobilversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage -  DER SPIEGEL Mobil

 

Wie Sie einen spannenden Weg zum Ziel erzeugen

Dadurch, dass die Inhalte auf Ihrer mobilen Website umbrechen und untereinander angeordnet werden, entsteht die sog. Onepage-Optik. Das bedeutet, dass der Benutzer auf einer Seite immer weiter nach unten scrollen muss, um den gesamten Inhalt der Seite sehen zu können.

Die Möglichkeit, ein Abonnement abzuschließen, muss am Ende einer Seite gegeben werden und nicht direkt zu Beginn, denn kein Benutzer schließt ein Abo ab, ohne dass er weiß, wofür er überhaupt eins abschließen soll. Es besteht aber die Gefahr, dass der Benutzer es gar nicht bis zum Ende der Seite schafft, wenn ihn die Inhalte langweilen. Das bedeutet zusammengefasst:

Die Inhalte einer mobilen Seite müssen kurz gefasst, aber inhaltlich vollständig und interessant gestaltet sein, damit ein Besucher nicht abspringt. Nur wenn Sie mit Ihren Inhalten überzeugen, erreicht ein Besucher sein und Ihr mögliches Ziel: das Abonnement. 

Beispiel Nummer 4: DoldeMedien Verlag GmbH

Die Zeitschrift eathealthy des DoldeMedien Verlags zeigt es: Durch das bedienerfreundliche Onepage-Design und den interessant aufbereiteten Content wird der Nutzer angesprochen und hat am Ende die Möglichkeit, sowohl ein Abo abzuschließen, als auch sich für einen Newsletter anzumelden – da das vorher Gesehene gefallen hat, wird man leicht dazu verführt, dieses auch zu tun.

Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage
eathealthy vom DoldeMedien Verlag GmbH Desktopversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage - eathealthy vom DoldeMedien Verlag GmbH Desktop
eathealthy vom DoldeMedien Verlag GmbH
Abo Mobilversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage - eathealthy vom DoldeMedien Verlag GmbH Mobil Abo
Newsletter Mobilversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage - eathealthy vom DoldeMedien Verlag GmbH Mobil Newsletter

 

Mehrarbeit, die sich bezahlt macht

Natürlich ist die Pflege einer responsiven Website und vor allem die Konzeptions- und Umsetzungsphase sehr zeit- und arbeitsintensiv. Da das Ganze nach der anfänglichen Umsetzungsphase auf einer optimierten technischen Struktur basiert, ist kein zusätzlicher Pflegeaufwand für Inhalte nötig.

Beispiel Nummer 5: Piper Verlag

Auch der Piper Verlag kann stolz seine Umsetzung einer responsiven Website zeigen. Hier lassen sich alle oben beschriebenen Szenarien wiederfinden.

Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage - Piper Verlag Desktopversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage - Piper Verlag Desktop
Mobilversion
Kundenbindung durch Responsive Webdesign: Tipps und Beispiele für Fachverlage - Piper Verlag Mobil

 

Ein letzter Gedanke zum Abschluss

Warum sollte ich Kunde eines Unternehmens werden, das sich im Web nicht richtig präsentieren kann? Ein Unternehmen mit einem starken Webauftritt auf allen Endgeräten verdient meine Aufmerksamkeit definitiv mehr! Es ist so, als ob man in ein Geschäft geht, um einen teuren Marken-Schal zu kaufen. Man fasst ihn an, um zu fühlen, ob die Qualität auch dem Preis entspricht. Wenn die Verkäuferin dabei auch noch freundlich und beratend zur Seite steht, ist der Schal so gut wie gekauft.

Ganz ähnlich sieht es heute in der digitalen Welt aus: Immer mehr Berührungspunkte einer Marke lassen sich mit der Webpräsenz der Marke assoziieren. Machen Sie etwas draus, Ihr Kunde wird es Ihnen danken.

Sie haben bereits eine responsive Website und haben gutes Feedback bekommen? Lassen Sie es uns wissen. Gerne berichten wir im BWH Online-Magazin darüber.

Teaserbild: Michał Kulesza



Was meinen Sie zu diesem Thema?


Ihre Meinung ist uns wichtig! *
*
*
*

* Pflichtangaben; Ihre E-Mail-Adresse wird nicht veröffentlicht.

Niko Bärsch04-01-17 16:21 Uhr
Danke für den netten Artikel! Ich verbreite ihn direkt bei Twitter.

Einen Überblick, welche allgemein relevanten Websites mittlerweile oder seit neustem responsiv sind, gibt übrigens seit einiger Zeit diese Facebook-Seite:
facebook.com/responsive.seiten

Wer Responsive-Seiten.de abonnieren möchte: Neue Postings gibt es nur ca. zweimal pro Woche - eure Timeline wird also nicht vollgespammt!
BWH Team04-01-17 16:26 Uhr
Danke für den Tipp und danke fürs Teilen. Da schauen wir glatt mal vorbei, denn wir sind weiterhin auf der Suche nach guten Beispielen, insbesondere von Fachverlagen.
Ansprechpartner
Über den AutorNathalie Brunneke studiert Integrated Media & Communication an der Hochschule Hannover. Ihre Arbeitspraxis bekommt sie in crossmedialen Projekten bei BWH.
Ansprechpartner
Über den AutorNathalie Brunneke studiert Integrated Media & Communication an der Hochschule Hannover. Ihre Arbeitspraxis bekommt sie in crossmedialen Projekten bei BWH.
Seite teilen
  • Facebook
  • Google+
  • Twitter
  • XING
Seite teilen
  • Facebook
  • Google+
  • Twitter
  • XING
Seite teilen
  • Facebook
  • Google+
  • Twitter
  • XING
Newsletter
Bleiben Sie immer auf dem aktuellen Stand mit unserem Newsletter
Jetzt anmelden
Der schnelle Weg zum Ziel
Sprechen Sie mit uns über Ihre Ziele, Wünsche, Ideen.

t  0511 94670-0
f  0511 94670-16
m  info@bw-h.de
Kontakt
Bleiben Sie mit uns über Fachthemen über Druck & Digital Publishing auf dem Laufenden!
Hinweis: Wir verwenden Ihre E-Mail-Adresse ausschließlich für den Versand des BWH-Newsletters.