Responsives Webdesign für Online-Shops: Tipps und Tricks für aufgeklärte Händler

Responsives Webdesign ist ein neues Buzz-Wort unter E-Commerce-Experten und sicher sind auch Sie in den letzten Wochen und Monaten häufiger auf diesen Begriff gestoßen. Doch was hat es mit dieser neuen Form der Gestaltung von Internet-Seiten auf sich und warum spielt sie im Hinblick auf den geschäftlichen Erfolg von Online-Händlern eine immer wichtigere Rolle? Wir erklären responsives Webdesign auf einfache Weise, stellen Ihnen eine unkomplizierte Checkliste zur Bedarfsermittlung zur Verfügung und versorgen Sie mit praktischen Profi-Tipps für Ihre eigenen Seiten.

Responsive Webdesign auf verschiedenen Endgeräten

Responsive Webdesign auf verschiedenen Endgeräten am Beispiel des Portals Erfahrungen.de

Was versteht man unter responsivem Webdesign?

Eigentlich bedeutet Responsivität Ansprechempfindlichkeit. Gebräuchlich war der Begriff bisher vor allem in der Medizin, der Psychologie und der Politik. Mediziner bezeichnen damit die Empfindlichkeit eines Organs auf äußere Einflüsse. Psychologen und Pädagogen beschreiben so die Bereitschaft von Eltern, auf die Interaktionsversuche ihrer Kinder einzugehen. In der Politik schließlich bezeichnet die Responsivität die leider eher seltene Fähigkeit eines gewählten Volksvertreters, die Bedürfnisse und Wünsche seiner Wähler bei der Gesetzgebung zu berücksichtigen. Meistens tendiert diese unmittelbar nach der Wahl ja bekanntlich gegen Null.

Doch wie hat es der Begriff seit kurzer Zeit bis in den E-Commerce geschafft und was versteht man eigentlich unter einem responsiven Webdesign? Ganz einfach: Web-Entwickler bezeichnen hiermit die Fähigkeit einer Internetseite, flexibel darauf zu reagieren, mit welchem individuellen Endgerät sie aufgerufen wird. Mit anderen Worten: Das Design der Seite ändert sich, wenn sie mit einem herkömmlichen PC, einem Tablet oder einem Smartphone aufgerufen wird, um dem einzelnen Online-Nutzer immer eine optimale Sicht auf die Web-Auftritte zu gewähren. Schauen wir uns einmal an, warum das heute eigentlich so wichtig ist und warum Sie als Online-Händler nicht darauf verzichten sollten, gründlich über dieses Thema nachzudenken.

Warum wird die mobile Internetnutzung eigentlich immer wichtiger?

Responsive Webdesign auf einem Desktop-Monitor

Website-Darstellung auf Desktop-Flachbildschirm

Vielleicht gehören Sie ja selber schon zu der wachsenden Verbrauchergruppe, die das Internet nicht nur mit dem klassischen PC oder dem Notebook benutzt, sondern die auch per Tablet oder Smartphone ausgedehnte Ausflüge ins World Wide Web unternimmt. Wenn dies der Fall ist, dann ist es Ihnen sicher schon passiert, dass Sie mit einem der mobilen Endgeräte eine nicht hierauf optimierte Seite im Netz besucht haben. Dort mussten Sie sich dann über ein völlig zerfetztes Design, winzige Schriften, unbrauchbare Navigationselemente und absurde Größen von Bildern und grafischen Elementen ärgern und haben Ihren Besuch wahrscheinlich innerhalb von kurzer Zeit genervt abgebrochen.

Responsives Webdesign auf älterem Smartphone (Samsung Galaxy S2)

Responsives Webdesign auf älterem Smartphone (Samsung Galaxy S2)

Betrachten wir einmal die aktuelle Situation auf Seiten der Verbraucher. Während Sie als Internetprofi wahrscheinlich Wert darauf legen, Ihre Besuche im Web an einem großen Bildschirm und mit einer vernünftigen Maus und Tastatur zu verbringen, tendieren die heutigen Konsumenten immer stärker dazu, kleine Tablets und noch kleinere Smartphones als vollwertige Rechner zu betrachten und mit diesen auch ausgiebig das Internet zu besuchen. Viele Verbraucher mögen es vor allem, das Web auch von unterwegs aus nutzen zu können. Andere wiederum greifen beim Sofa-Abend vor dem Fernseher aus Bequemlichkeit immer häufiger zum Tablet als zum Notebook oder zum Tischrechner. Wie auch immer die Beweggründe im Einzelnen aussehen mögen: Fakt ist, dass sich ein stetig wachsender Teil des Internet-Traffic bereits heute über Mobilgeräte abspielt. Wenn Sie diesen Trend als Online-Händler ignorieren, werden Sie zweifellos bald den Anschluss verlieren, da aktuelle Studien schon jetzt zeigen, dass immer mehr Online-Nutzer mit Mobilgeräten im Internet einkaufen. Marktforscher haben außerdem herausgefunden, dass eine riesige Gruppe von Konsumenten in der nächsten Zeit die Anschaffung neuer mobiler Endgeräte plant.

Responsives Webdesign auf aktuellem iPhone 5c

Darstellung auf aktuellem iPhone 5c

Schieben Sie es also nicht auf die lange Bank, Ihren Shop an diese geänderten Voraussetzungen anzupassen. Wenn Sie hier den passenden Zeitpunkt versäumen, wird Ihnen die Konkurrenz schon in kurzer Zeit uneinholbar voraus sein. Und wenn Sie sich bereits mit der mobilen Nutzung Ihrer Seiten beschäftigen, dann sollten Sie Ihre Zeit und Ihr Geld nicht mit halben Sachen vergeuden. Eine separate Erstellung von verschiedenen Seitenversionen für unterschiedliche Endgeräte und Display-Größen ist ineffizient und kostspielig, da Sie bei jeder kleinen Änderung gleich mehrere Seiten anpassen müssen. Ein responsives Webdesign ist da die deutlich bessere Wahl.

Checkliste: Braucht Ihr Shop responsives Webdesign?

Responsives Webdesign auf Tablet

Responsives Webdesign auf Tablet (Nexus 7)

Lassen Sie uns gemeinsam herausfinden, ob sich der Einsatz von responsivem Webdesign für Sie und Ihr Unternehmen lohnt. Hierzu haben wir eine kleine Checkliste vorbereitet, anhand derer Sie schnell herausfinden können, wie wichtig diese neue Gestaltungs-Maxime für Ihren eigenen Web-Shop ist. Lesen Sie die folgenden Kurzbeschreibungen aufmerksam durch. Wenn Sie mindestens einen der beschriebenen Punkte für sich bestätigen können, dann sollten Sie das Update auf responsives Webdesign nicht mehr allzu lange heraus zögern. Je mehr Punkte bei Ihnen auf Zustimmung stoßen, umso dringender ist der Umstieg.

Wird Ihre Webseite bereits jetzt häufig von mobilen Geräten aufgerufen?

Werfen Sie einmal einen aufmerksamen Blick in die Auswertung des Traffics Ihrer Shop-Seiten und finden Sie dadurch heraus, wie hoch schon jetzt der Anteil von Smartphone- oder Tablet-Benutzern unter Ihren Besuchern ist. Wenn Ihre Seiten nicht entsprechend optimiert sind, dann vergraulen Sie diese Besucher übrigens konsequent. Denn niemand möchte sich heute mit unlesbaren Schriften, schwer bedienbaren Inhalten oder einer verschobenen Navigation auseinandersetzen.

Planen Sie für die nächste Zeit ohnehin einen Relaunch Ihrer Seiten?

Wenn es ohnehin bereits auf Ihrer Agenda steht, dass Sie die Shop-Seiten Ihres Unternehmens in absehbarer Zeit überarbeiten lassen wollen, dann sollten Sie auf keinen Fall zögern, bei dieser Gelegenheit direkt auf responsives Webdesign umzustellen. Zwar nimmt der Umstieg etwas mehr Zeit in Anspruch, allerdings ist der damit verbundene Aufwand mit Sicherheit geringer, als Sie im Moment befürchten. Sprechen Sie Ihren Entwickler einfach einmal unverbindlich auf responsives Webdesign an und lassen Sie sich ein Angebot unterbreiten.

Werden die Inhalte auf Ihren Seiten häufig geändert?

Wenn sich der Content auf Ihren Shop-Seiten regelmäßig ändert, etwa durch einen eigenen Blog, durch regelmäßige Änderungen am Sortiment oder durch viele Sonderangebote und Vorteilsaktionen, dann lohnt sich der Umstieg auf responsives Webdesign ganz besonders. Immerhin müssen ansonsten für jede gewünschte Änderung immer direkt mehrere Seiten korrigiert werden, was sich im Laufe der Zeit zu einem erheblichen Aufwand summiert. Besser ist in diesem Fall der Einsatz einer responsiven Gestaltung.

Legen Sie großen Wert auf die Suchmaschinen-Optimierung?

Wenn SEO in Ihrem Unternehmen eine Rolle spielt – und wir können uns im Online-Handel kaum vorstellen, dass dies nicht der Fall ist – dann gibt es einen weiteren Grund, kurzfristig auf ein responsives Design umzustellen. Google und Co. mögen es nämlich ganz besonders, wenn Internetseiten konsequent auf die Bedürfnisse von Besuchern ausgerichtet sind. Und die mobile Nutzung von Inhalten zählt nun mal zu den großen und wichtigen Wünschen der Verbraucher von heute.

Ist Usability für Sie mehr als nur eine leere Worthülse?

Als erfahrener Online-Händler kennen Sie natürlich den Zusammenhang zwischen Usability und Conversion-Rate. Sie wissen genau, dass Besucher nur dann bei Ihnen einkaufen, wenn Sie sich auf Ihren Seiten rundum wohlfühlen. Ist das Surf-Erlebnis dagegen gestört, wenden sich Verbraucher schnell ab und besuchen stattdessen lieber einen Ihrer Konkurrenten. Es gibt kaum eine zuverlässigere Methode, um Interessenten zu vergraulen, als Ihnen Inhalte anzubieten, die auf den jeweiligen Endgeräten nicht optimal dargestellt werden.

Unsere Checkliste soll Sie dabei unterstützen, zu ermitteln, wie dringend Ihr Bedarf für einen Umstieg auf responsives Webdesign ist. Wenn Sie mindestens eine unserer Aussagen bestätigen konnten, dann sollten Sie einen Wechsel zu der neuen Gestaltungsform von Internetseiten nicht auf die lange Bank schieben. Die folgenden Tipps helfen Ihnen bei einer optimalen Umstellung und zeigen Ihnen, worauf Sie vor allem achten sollten.

Tipp 1: Keine festen Layout-Grids

Viele Web-Designer lieben feste Layout-Grids, bei denen sämtliche Elemente von Seiten immer an einer verbindlich definierten Position auftauchen. Von dieser Idealvorstellung müssen sich Ihre Entwickler ab dem Umstieg auf responsives Webdesign leider verabschieden. Stattdessen arbeitet man hier mit prozentualen Pixelwerten, um auf jedem Endgerät eine optimale Darstellung zu erzeugen.

Tipp 2: Keine festen Schriftgrößen

Feste Schriftgrößen sind im klassischen Webdesign und bei der Produktion von Print-Medien eine feine Sache. Im responsiven Webdesign sollten sie allerdings tabu sein. Während nämlich eine Schriftgröße von 12pt auf einem Desktop-Bildschirm noch recht bequem gelesen werden kann, bedeutet Sie auf dem Display eines Smartphones eine wirkliche Zumutung für den User. Auch in diesem Fall muss stattdessen mit prozentualen Werten gearbeitet werden.

Tipp 3: Keine festen Bildgrößen

Große Abbildungen verleihen Internetseiten, die auf einem großen Screen betrachtet werden, Charakter und Stil. Auf winzigen Displays wird es allerdings schnell zum Ärgernis, wenn ein stimmungsvolles Headerbild nicht nur Ewigkeiten lang gescrollt werden muss, damit der Blick auf den eigentlichen Inhalt frei wird, sondern auch zu erheblichen Ladezeiten führt. Bei mittleren Auflösungen sollte man von daher mit reduzierten Bildgrößen arbeiten und diese bei kleinen Auflösungen im Zweifelsfall lieber ganz weglassen.

Tipp 4: Ladezeiten spielen eine wichtige Rolle

Wenn es um die Programmierung von Internetseiten für die Darstellung auf Desktop-PCs und Notebooks geht, spielen Ladezeiten heute eine eher untergeordnete Rolle. Schnelles Internet ist fast überall verfügbar und die Rechenleistung der einzelnen Systeme ist meist mehr als ausreichend, um selbst aufwendige Internetseiten flüssig und schnell darzustellen. Bei der mobilen Nutzung des World Wide Web kann das allerdings ganz anders aussehen. Überprüfen Sie Ihre mobilen Inhalte daher gründlich auf ihre Ladezeiten hin, bevor Sie sie veröffentlichen.

Tipp 5: Bemessen Sie den Content optimal

Versetzen Sie sich bei der Planung Ihrer konkreten Inhalte immer in den jeweiligen Nutzer und führen Sie sich dabei vor Augen, dass eine bestimmte Menge an Texten, Gestaltungselementen und Bildern auf dem Desktop oder auch dem Tablet noch eine gute Figur macht, während sie für den Nutzer eines Smartphones zu einer unerfreulichen „Scroll-Orgie“ führt. Passen Sie den Umfang Ihrer Inhalte vor diesem Hintergrund an die individuelle Kategorie des Endgerätes an und verzichten Sie im Zweifelsfall auf etwas Content, um dem Mobil-Nutzer eine bequemere Bedienung zu ermöglichen.

 

Über den Autor

Sebastian Huke

Sebastian Huke

Artikel des Autors

Sebastian Huke ist bereits seit 2011 Redakteur und Marketing-Manager beim E-Commerce-Magazin INTERNETHANDEL und seine Begeisterung für neue Geschäftsideen ist kein Geheimnis. Daher betreut er im Magazin sowie im Unternehmensblog die Bereiche Geschäftsideen und Gründung. So stellt Sebastian Huke regelmäßig neue Start-ups vor, führt Interviews, erarbeitet Gründerstorys und verfasst auch themenübergreifende Artikel in den Bereichen Online-Handel und Marketing.