Forum
17.06.2016, 16:36

Was bedeutet Responsive?

Hallo zusammen!

Länger schon arbeiten wir gemeinsam mit einem Pilotkunden an einer Full-Responsive-Version POWERGAP Shop-Frontends, die bald allen vorgestellt wird.

Der Begriff Responsive fällt ja immer öfter und uns fällt auf, dass Onlinehändler mit dem Begriff teilweise nicht wirklich etwas anfangen können, oder ihn bisher sogar fehlinterpretieren. Daher hierzu ein kleiner Beitrag, der etwas Licht in dieses Thema bringen soll und auch zum Nachdenken animiert, ob das zu Ihrem ecommerce passt?

Was ist Responsive Webdesign?

Ich spare mir die Mühe das zu erklären, weil es genügend Seiten dazu gibt.
Beispiel: www.responsive-webdesign.mobi
Auf Seiten wie www.mediaevent.de findet man auch eine Erklärung zum Begriff Breakpoints!

Bevor Sie weiterlesen, sollten Sie diese 2 Seiten zumindest als Grundlage überflogen haben.

Ist POWERGAP schon jetzt Responsive?

Für viele bestimmt überraschend: JA!
Zwar nur mit einem einzigen Breakpoint, der nicht über Media-Queries im CSS gelöst ist, sondern per Trennung über die Geräte-Ermittlung, jedoch den selben Zweck erfüllt. Unser mobiles Frontend ist schon im Jahr 2012 erschienen und hat dafür gesorgt, dass auf Smartphones auch von unterwegs ein echtes Einkaufserlebnis möglich wurde.

Seit dem ist natürlich viel passiert und es kamen Geräte hinzu (Tablets, Smart-TVs) auf denen Webseiten teilweise nicht gut aussahen. Immer dann gab es automatisch auch bei POWERGAP stets angepasste Designs. Immer wenn Shops neu gestyled wurden, haben wir uns darauf einstellen müssen. Beispielsweise wurden Buttons aber auch Schriften immer größer weil die hohen Auflösungen von Monitoren dazukamen aber eben auch weil Tablets mit Fingern bedient werden und man z.B. darauf achten muss Buttons nicht zu nah aneinander zu platzieren. Nachladen statt Blättern ist in erster Linie auch für die bessere Bedienung am Tablet entstanden, macht aber auch auf einem Desktop-PC eine gute Figur.

Was wird in der neuen Full-Responsive-Version von POWERGAP anders?

Nun, zunächst bekommt der Shop keine feste Breite mehr. Öffnet also stets mit einer Breite von 100% im Browser. Es kommen je nach Seite bis zu 7 Breakpoints zum Einsatz. Halte ich ein Tablet hochkant oder quer sehe ich also ein anderes Shoplayout.

Wir wären nicht POWERGAP, wenn wir bei der Gelegenheit nicht wieder 2 Schritte weiter gedacht hätten. Innovation entsteht nicht durch abkupfern, sondern dadurch das abgekupferte mit eigenen Ideen deutlich zu verbessern. Usability für den Besucher bleibt dabei das wichtigste Thema. Intuition in der Bedienung. Keine Hürden in den Weg legen. Unbewusst einen klaren und einfach zu handhabenden Einkauf zu ermöglichen. Diese Stichworte bedeuten in der Entwicklung enorme Aufwände. Man verbringt Wochen damit Ideen wieder zu verwerfen, neu zu gestalten, umzuprogrammieren. Am Ende soll es schließlich perfekt sein und Ihre Mitbewerber einmal mehr in den Schatten stellen.

Responsive Vor- und Nachteile

+ evtl. besseres SEO? (unbestätigt!)
Es gibt Stimmen die behaupten festgestellt zu haben, dass Suchmaschinen diese Technik mit höheren Rankings belohnen. Was zumindest Google bestätigt ist, dass eine mobile Anzeige bei Smartphones eine Rolle spielt. In wie weit Responsive zusätzliches Potenzial abruft bleibt Spekulation.

+ Optimale Anzeige der Seiten auf allen Geräten
Diesen Vorteil muss man etwas relativieren. Optimal ist die Anzeige schon heute auf jedem Standard-Desktop und Smartphone. Selbst der Browser eines Tablets bildet jeden Shop einwandfrei ab, da der Browser selbst auf 100% skaliert und das ohne die Bildqualität zu verschlechtern! Schauen Sie sich Ihren eigenen Shop auf einem iPad an. Mal hochkant, mal quer. Sie werden merken, hmmm, sieht ja alles ganz gut aus. Einzig was ein Full-Responsive besser macht, ist bei bestimmten Auflösungen dann z.B. die Schriftgrade zu erhöhen oder eben Objekte anders zu positionieren und damit besser erfassbar zu machen. Stelle ich ein iPad hochkant, wird im klassischen HTML5-Design die Schrift kleiner skaliert. Schlechter lesbar. Bzw. ein Besucher muss dann mit 2 Fingern den relevanten Bereich vergrößern. Hier hat Responsive die Nase vorn, allerdings nicht so deutlich wie manchmal behauptet.

+ modernerer Look
Eindeutig wirkt so ein Responsive Design moderner, wenn gleich viele Funktionen auch pseudo-responsive in einem bisher üblichen HTML5-Layout eingebaut werden können. Der Gesamteindruck ist eindeutig professioneller.

- Entwicklungskosten deutlich teurer
Das Stylen von Webseiten geschieht ja hauptsächlich per CSS und die dynamischen Dinge eben mit Javascript. Baut man eine Webseite, würde man (je nach Bedarf) bei z.B. 7 Breakpoints das CSS praktisch ver-7-fachen! Gute Entwickler vermeiden natürlich Redundanzen und schaffen es deutlich schlanker. Der Hauptkostenfaktor ist die Zeit, die man benötigt um alle 7 Ansichten zu testen und die Umsprünge perfekt einzustellen. Oder zwecks guter Ladezeiten aus einem Bild für ein Banner dann eben 3 unterschiedliche machen. Hier kommt es vor allem auf die Erfahrung desjenigen an, der die Arbeiten am CSS und Javascript macht.
In Sachen Kosten ist das etwa so wie beim Unterschied zwischen einem 250.000 € Lamborghini und einem Bugatti für 2.500.000 €. Die 0,4 Sekunden Unterschied von 0 auf 100 und einige noch perfekter verarbeiteten Ausstattungen rechtfertigen beim gesunden Menschenverstand keine 10 fach so hohe Investition. Wer aber das Geld dafür übrig hat, greift trotzdem zum Bugatti.

- Responsive Know-How beim Onlinehändler Voraussetzung
...oder eben Abhängigkeit von einem Dienstleister und dabei höhere Kosten. Wer heute selbst im Shop HTML-Banner baut und formatiert, wird bei Responsive vor eine neue Aufgabe gestellt. Banner und HTML-Seiten in dieser Technik herzustellen setzt ein erhöhtes Wissen voraus und gleich wie fit Ihr Mitarbeiter ist, es dauert alles deutlich länger.

- Zusatzentwicklungen deutlich aufwendiger / teurer
Auch Entwicklungen die Sie sich für das Frontend zusätzlich von uns wünschen sind deutlich teurer. Das sollte man bei der Entscheidung für Responsive einkalkulieren.

Brauche ich für meinen Shop ein Responsive-Design?

Eine gute Frage. Rein optisch lassen sich HTML5-Shops auch ohne Responsive auf einen ähnlichen modernen Look bringen. Die Vorteile habe ich eben beschrieben. Bitte auch zu bedenken, dass Full-Responsive keinen zusätzlichen Umsatz generiert. Der Shop sollte der Zeit angemessen gestaltet sein. Wer schon 5 Jahre kein Redesign gemacht hat, braucht dringend was neues, denn hier fängt es an sich deutlich im Umsatz bemerkbar zu machen. Normal sind 2-3 Jahre. Wer z.B. kein mobiles Frontend hat, verliert schon allein durch die SEO-Nachteile zu viel.

Ein aktuell gut gemachter HTML5-Shop wird sich im Umsatz zum Full-Responsive nichts geben. Dazu sind die Unterschiede zu marginal. Es sei denn man kann damit das SEO beeinflussen. Aber ehrlichgesagt bezweifle ich das ein wenig, denn die Shops, die in ihrer Branche ganz oben stehen sind nicht zwangsläufig responsive. Habe eben bei Google mal einfach ein paar Stichworte eingegeben und da sind die Responsive Shops eher die Ausnahme. Wahrscheinlich aber auch weil noch nicht so stark verbreitet.

In jedem Fall würde ich es von den eigenen Umsätzen abhängig machen. Shops die 5 oder 10 Bestellungen am Tage haben und damit noch im Aufbau sind, sollten die Mehrkosten besser ins Marketing investieren. Hat man 50 oder 100 Bestellungen und mehr, sind in der Regel genug Reserven da. Meist bezahlt man dann monatlich mehr Gebühren an ebay, google usw., als eben ein neues Resposive Design kostet. Ab einer bestimmten Größenordnung, würde ich die Frage also mit "Ja Sie brauchen Responsive" beantworten.

Ich hoffe ich konnte mit diesem Beitrag ein wenig zu diesem Thema aufklären. Mit Hochdruck arbeiten wir in den letzten Zügen an der neuen POWERGAP Responsive Version. Der Startschuss ist für den 01.07. angesetzt. Für heute wünscht Ihnen das gesamte Team ein schönes Wochenende.


Forum-Archiv

Alle Beiträge aus:

2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002,