Zurück zur Übersicht

Inhalt

Artikel teilen

Beliebte Beiträge

Responsive Design – Benutzerfreundlichkeit auf allen Geräten

Ob im Büro, im Café, der Bahn oder dem Flugzeug: Überall wird mittlerweile gearbeitet, dank der vielen modernen Technologien. Smartphones, Tablets und Notebooks sind aus der heutigen Arbeitswelt nicht mehr wegzudenken. Sie ermöglichen ortsunabhängiges Arbeiten, nicht mehr gebunden an einen großen PC oder den Telefonanschluss im Büro. Doch haben Sie sich schon einmal Gedanken über das Erscheinungsbild Ihres Shops auf mobilen Endgeräten gemacht? Für eine optimale Darstellung in jedem Format ist das Responsive Design zuständig.

Es gibt immer mehr Smartphones und Tablets auf dem Markt. Die neuen Modelle bieten auch mehr Optionen. Tablets mit angedockter Tastatur ermöglichen nahezu das gleiche Arbeitserlebnis wie ein Laptop. Daher wird damit auch immer häufiger gearbeitet. Mails von unterwegs verschicken oder Präsentationen vorbereiten? Kein Problem. Zu Einschränkungen kommt es jedoch teilweise bei der User Experience. Da die Bildschirmauflösungen der mobilen Geräte anders sind als die von Computerbildschirmen, werden nicht alle Websites optimal dargestellt. Ist auch Ihr Online-Shop davon betroffen? Auf folgende Aspekte sollte das Responsive Design abzielen:

  • Darstellung,
  • Performance und
  • Bedienbarkeit.

Sie verstehen gerade nur Bahnhof und können sich die Bedeutung von responsivem Design noch nicht genau vorstellen? Dann ein kleines Experiment: Falls Sie diesen Artikel von einem großen Desktop (Laptop oder Computer) aus abrufen, schnappen Sie sich Ihre Maus und ziehen Sie das Browser-Fenster in verschiedene Größen. Was passiert? Aus groß mach klein! Unsere Website ist responsiv gestaltet. Das heißt, Grafiken, Bilder und Co. verkleinern sich jeweils mit dem Browser-Fenster. So ist auch der Zugriff von kleinen Bildschirmen aus easy und ohne Abstriche machbar. Sie möchten mehr über das geräteübergreifende Design erfahren? Dann sollten Sie weiterlesen.

Ideale Usability auf jedem Gerät

Mit einem responsiven Design sind Websites und Online-Shops geräteübergreifend aufgebaut und auf jedem Display bestmöglich abrufbar – egal, ob Smartphone, PC oder Tablet. Mithilfe von HTML und CSS3 wird die perfekte Auflösung und Aufteilung für das jeweilige Endgerät angepasst. Programmiertes Design für kleine Bildschirme gewährleistet eine gute Usability, besonders bei der Bedienung per Touchscreen.

Damit die Darstellung Ihres Online-Shops besonders ansprechend ist, wird jedoch nicht nur an der Auflösung gefeilt. Auch Menüs und Navigationsleisten werden teilweise anders dargestellt. Besonders benutzerfreundlich ist es, wenn diese beispielsweise während des Scrollens ausgeblendet werden. Dann ist auf dem Display mehr Platz für die Produkte Ihres Shops.

Welche Eingabemöglichkeiten gibt es?

Na, was fällt Ihnen da als Erstes ein? Ganz klassisch: die gute alte Tastatur. Schnellschreiben ist hier kein Problem – egal, ob große oder kleine Finger. Daneben die Maus. Zielsicher sind Kategorien angeklickt und man wird schnell durch den Bestellvorgang geleitet. Für mobiles Design müssen Sie umdenken.

Mittlerweile ist der Touchscreen beträchtlich in den Vordergrund gerückt. Einfaches Klicken auf Handy oder Tablet per Fingertipp: komfortabel, schnell und ebenso zielgenau. Damit das in Ihrem Online-Shop ebenso gewährleistet werden kann, ist Responsive Design notwendig. Bei diesem Design werden die verschiedenen Eingabemöglichkeiten beachtet und die Funktionen des Shopsystems haargenau auf die jeweiligen Bedienelemente angepasst.

Bedienelemente Responsive Design

Nicht alles ist fürs Smartphone gemacht

Einige Elemente, die aus den Browsern für PCs bekannt sind, sind auf dem Smartphone nicht abrufbar. Da gibt es beispielsweise die Maus. Die ist auf einem großen Bildschirm eine altbekannte Eingabehilfe. Geht man mit dem Mauszeiger in einem Online-Shop über ein Menü, faltet sich ein Drop-Down-Menü aus. Diesen sogenannten „Hover-Effekt“ gibt es auf einem Touchscreen nicht – einfach, weil die Maus nicht da ist. Tippt man auf einem Touchscreen etwas an, gelangt man sofort zu der Seite, ohne dass sich vorher weitere Optionen öffnen. So müssen beim Responsive Design also auch Menüleisten, Buttons und Verlinkungen angepasst werden. Damit jeder Klick und Tipp sitzt.

Menüpunkte sollten also angepasst werden. Dazu gehört beispielsweise, dass Verlinkungen einfach mit dem Finger zu treffen sind. Ohne responsives Design kann es sein, dass kleine Buttons nicht getroffen werden oder der User erst zoomen muss, um Links richtig lesen zu können. Eine gute Lesbarkeit ist also definitiv ein Muss! Hierzu zählt auch die allgemeine Navigation in Ihrem Online-Shop. Können Ihre Kunden von mobilen Endgeräten aus direkt auf die vorherige Seite bzw. Kategorieseite zurückkehren, oder müssen sie hierfür „Such-den-Button“ spielen?

Mittlerweile gibt es sogar responsive Design-Vorlagen, dank derer sich das Design automatisch anpasst.

Sie sehen: Eine Website sollte, wenn möglich, auf allen Endgeräten Ihren ursprünglichen Look behalten. Einige Elemente funktionieren jedoch mobil einfach nicht. Wie zeigt man beispielweise an, dass ein Elemente klickbar ist – und das ganz ohne Maus?

Nicht gleich – aber ähnlich!

Für die perfekte Darstellung ist es wichtig, dass nicht nur Menüs und Taskleisten etwas abgewandelt werden – auch einige Funktionselemente und Texte sind anpassbar. Während auf einem großen Display Texte wenig Platz einnehmen, müsste man auf dem Smartphone an einem langen Text ewig herunterscrollen, um zu Ihren Produkten zu gelangen. Deshalb geht es beim Responsive Design auch um das Streichen, Kürzen oder Verschieben einzelner Elemente und Texte.

Darunter fallen insbesondere Bilder und Grafiken. Warum? Hier ein kurzer Denkanstoß: Surfen Sie häufig unterwegs via Smartphone oder Tablet? Mobile Daten sind nicht an jedem Ort gut. Wie sieht es bei Ihnen aus? Zeigt Ihr Handy überall LTE oder sogar 5G an? Oder stehen Sie auch öfter mal im Funkloch – mit Edge oder gedrosseltem Datenvolumen? Denn das haben fast alle mobilen Endgeräte gemeinsam: keine stetig gute Internetverbindung. Wenn Sie unter Edge einen Online-Shop aufrufen, welcher kein responsives Design besitzt, können die Ladezeiten einen leicht schläfrig machen. Große Bilder, aufwendige Grafiken und Co. begünstigen langes Buffering und stören beim Shopping. Wenn man bei jedem Zurückgehen und bei jeder Produktseite erneut eine Ewigkeit warten muss, bis die Seite geladen ist, geht man vielleicht doch lieber ins Geschäft oder verschiebt das Shopping auf später. Damit das nicht passiert und Ihre Kunden wirklich immer problemlos auf Ihre Website zugreifen können, bietet responsives Design die Lösung.

Performance ist das Zauberwort!

Damit Bilder und Icons die Ladezeiten Ihrer Website nicht sprengen, müssen sie für alle Endgeräte optimiert werden. So können verschiedene Bildgrößen pro Endgerät angegeben werden, die je nach Situation ausgegeben werden können. Um diese einzubinden, gibt es verschiedene Arten (<img> und <srcset>). Der Quellcode sollte möglichst klein gehalten werden. Das erreicht man, indem lediglich eine CSS-Datei ausgespielt wird und diese minifiziert. Dabei greifen Minifizierungstools. Die spucken aus dem Code lediglich eine einzelne kleine Datei aus. Dadurch, dass nur eine Datei verwendet wird, entstehen weniger http-Requests. So können Sie das Laden der Seite beschleunigen.

Eine kleine Faustregel: Richten Sie sich beim Responsive Design nach dem langsamsten Besucher Ihres Online-Shops und versuchen Sie, auch auf seinem Smartphone oder Tablet ein ruckelfreies Ergebnis hinzulegen.

Wie erreichen Sie 100-%ige Performance?

Dazu müssen Sie zunächst die Browser genauer einbeziehen. Denn das sind schließlich die Programme, über die Kunden auf Ihren Online-Shop zugreifen. Die bekanntesten und am häufigsten genutzten sind Chrome, Firefox, Safari, Edge, Opera und der Internet Explorer. Damit Ihre Kunden entspannt in Ihrem Shop stöbern können, müssen Sie Ihre Website für jeden Browser und die jeweiligen Browser-Versionen responsiv gestalten. Responsives Design erfolgt auf Basis von HTML und CSS3. Aber was wird davon im Browser eigentlich beeinflusst?

  • Bildschirmauflösung
  • Größe des Browserfensters
  • Menü-Anzeigen
  • Eingabe-Möglichkeiten
  • Anordnung von Bildern
  • Größe von Boxen

Nutzen Sie die Entwicklertools der Browser

Denn darüber können Sie die Performance sowie die Anzeige Ihrer Website, auf die unterschiedlichen Endgeräte angepasst, testen. Mit der F12-Taste ist dieses Tool schnell aufgerufen. Dann wird das jeweilige Endgerät ausgewählt. Teilweise können Sie sogar die Geschwindigkeit des Internets nach Wunsch drosseln, so dass ein möglichst realistischer Eindruck der Performance entsteht.

Eine weitere Möglichkeit, mit der auch wir von DIXENO arbeiten, ist die Software Browserstack. Diese Testplattform ermöglicht ausführliche Tests der erstellten Website. Browserversionen, Betriebssysteme und Co. werden damit nachgestellt und das Responsive Design ordentlich auf die Probe gestellt. Auf welchem Gerät mit welchem Browser möchten Sie Ihre Internetpräsenz testen? Per Remote sieht man den Bildschirm und kann Online-Shops quasi unter Realbedingungen unter die Lupe nehmen.

Warum solche Tests wichtig sind? Es gibt CSS-Styles und Engines, die ebenso wie der Hover-Effekt, einfach nicht in jedem Browser funktionieren. Dabei unterscheiden sich nicht nur die Browser an sich, sondern auch die verschiedenen Versionen eines Browsers. Für responsive Design müssen also auch verschiedene CSS-Styles geschrieben werden. Nur dann sieht Ihre Seite in wirklich jedem Browser super aus. Dabei kann es schon mal sein, dass man auf Altbewährtes zurückgreifen muss. Denn nicht alle CSS-Eigenschaften funktionieren für jedes Layout. Neue Layout-Techniken haben zwar einiges drauf, sind jedoch nicht immer die beste und richtige Wahl für jeden Browser bzw. jede Browserversion. Um das herauszufinden, sind die Browsertests die beste Möglichkeit.

Das klingt alles gar nicht so einfach, ist aber mit unserer Hilfe kein Problem. Für unsere Experten bei DIXENO sind Entwicklertools tägliches Handwerkszeug. Wir sorgen dafür, dass Ihr Online-Shop sich auf jedem Gerät nur von seiner besten Seite zeigt.

Wie surfen Ihre Kunden?

Was für Kunden haben Sie? Ist Ihr Online-Shop in erster Linie auf Smartphone-Kunden ausgelegt? Dann bietet sich das Mobile First Responsive Web Design an. Dabei wird zunächst die Website für kleine Smartphones erstellt und optimiert, bevor alles an größere Systeme angepasst wird. Wenn Ihre Kunden in erster Linie von Desktops auf Ihren Shop zugreifen und Bestellungen tätigen, können Sie nach der Methode der Graceful Degration vorgehen. Die Websites werden erst im Nachhinein an die mobilen Endgeräte angepasst.

Nutzung verschiedene Bildschirmgrößen

Da mittlerweile beides gängig ist, sowohl der Zugriff vom Smartphone als auch von einem Desktop, sollten Sie Ihre Website auf jeden Fall responsiv aufbauen. Damit sind Sie auf der sicheren Seite und ermöglichen jedem User – egal, welche Zugriffsquelle er nutzt – das bestmögliche Ergebnis Ihres Online-Shops. Websites müssen dabei nicht komplett getrennt voneinander entwickelt werden. It’s magic – responsives Design kann sich nämlich automatisch auf die unterschiedlichen Bildschirmgrößen einstellen. Diese Funktion wird als „Form Follows Function“ bezeichnet.

Responsive Design und SEO ergänzen sich perfekt

Nicht nur das Auge isst mit – auch die Suchmaschine freut sich. Denn durch die praktische Bedienbarkeit erhöht sich die Verweildauer Ihrer Kunden, die via Smartphone oder Tablet auf Ihren Shop zugreifen. Dadurch steigt das Ranking Ihrer Seite. Ruckelt Ihr Online-Shop bei der mobilen Nutzung, sind die Ladezeiten zu hoch oder ist die Usability allgemein anstrengend, verlassen Kunden die Webseiten schnell wieder. Mit einem Shopsystem mit Responsive Design kann Ihnen das nicht so schnell passieren. Im SEO-Bereich können Sie durch Responsive Design also ordentlich punkten.

Responsive Design – Wir erklären’s Ihnen!

Ist Ihre Website modern programmiert? Möchten Sie mit Ihrem Online-Shop auf allen mobilen Endgeräten vom Anfang Ihres Shops bis zum Ende glänzen? Praktisches Design, gute Usability und angepasste Vorgänge ermöglichen Ihren Kunden auch von unterwegs schnelle und einfache Bestellungen.

Responsive Design ist für Sie noch ein Fremdwort? Wir erklären es Ihnen! DIXENO ist eine Full-Service-Agentur für die Erstellung, die Vermarktung und den Betrieb von Online-Shops. Von Online-Marketing über Digitalisierungskonzepte bis hin zu Shopsystemen kennen wir uns aus. Sprechen Sie uns an – unser Team steht Ihnen mit Rat und Tat zur Seite.

Anna Humpert
Online-Marketing