Wie lässt sich das responsive Design einer eigenen Markenwebsite an Smartphone-Bildschirme anpassen?

Eine Markenwebsite sollte sich an Smartphone-Bildschirme anpassen. Dabei wird die Desktop-Seite nicht einfach proportional verkleinert. Stattdessen werden Navigation, Bilder, Texte und Conversion-Elemente entsprechend dem verfügbaren Platz neu angeordnet. Ob die Lösung funktioniert, zeigt sich daran, ob Besucher auf dem Smartphone Produkte problemlos finden, Informationen verstehen und eine Anfrage senden oder einen Kauf abschließen können – nicht nur daran, ob die Seite vollständig angezeigt wird.

Bei der Projektplanung sollte die mobile Anpassung parallel zur Seitenstruktur, zur Inhaltsvorbereitung und zur Entwicklungsabnahme berücksichtigt werden. Wird die fertige Desktop-Version erst nachträglich für Smartphone-Bildschirme verkleinert, können komplexe Navigationen, zu lange Formulare und horizontal ausgerichtete Tabellen mit technischen Daten Nacharbeiten erforderlich machen. Sinnvoller ist es, zunächst die wichtigsten Seiten und Conversion-Pfade festzulegen und anschließend Layout und Tests zu planen.

Zuerst festlegen, welche Inhalte auf dem Smartphone Vorrang haben

Auf einem Smartphone ist der Platz begrenzt. Deshalb müssen die Informationen einer Seite nicht mechanisch in derselben visuellen Reihenfolge wie auf dem Desktop übernommen werden. Die Prioritäten lassen sich anhand der Aufgaben festlegen, die Besucher nach dem Aufrufen der Seite erledigen möchten: Die Marken-Startseite sollte das Unternehmen und seine wichtigsten Produkte schnell verständlich machen; auf Produktdetailseiten sollten Produktname, aussagekräftige Bilder, wichtige Spezifikationen und der Anfragezugang im Vordergrund stehen; ein grenzüberschreitender Onlineshop muss Preise, Auswahlmöglichkeiten für Produktausführungen, Lagerstatus und die Schaltfläche zum Kauf klar anzeigen.

Bei einer Produktseite für Industrieanlagen können auf dem Desktop beispielsweise Produktbilder, eine Zusammenfassung der Spezifikationen und ein Kontaktformular gleichzeitig angezeigt werden. Auf dem Smartphone lassen sich die Inhalte vertikal anordnen: Zuerst werden das Produkt und die wichtigsten Parameter gezeigt, anschließend eine gut sichtbare Anfrage-Schaltfläche. Detaillierte Spezifikationen und Downloads können weiter unten folgen. Informationen dürfen neu angeordnet werden, aber notwendige Angaben, die für eine Kaufentscheidung wichtig sind, sollten nicht allein zur Seitenverkürzung entfernt werden.

In dieser Phase sollte auch geklärt werden, wer für die Inhalte verantwortlich ist: Müssen mobile Überschriften gekürzt werden? Werden Produktbilder zusätzlich im Hochformat benötigt? Können Spezifikationstabellen aufgeteilt werden? Führt die Anfrage-Schaltfläche zu einem Formular oder zu einer anderen Kontaktmöglichkeit? Wenn diese Fragen früh geklärt werden, lassen sich wiederholte Anpassungen vermeiden, falls sich nach dem Design herausstellt, dass das Material ungeeignet ist.

Mit flexiblen Layouts verschiedene Bildschirmgrößen unterstützen, statt nur ein Smartphone zu berücksichtigen

Beim responsiven Design werden flexible Raster, relative Breiten und Media Queries eingesetzt, damit sich das Layout an unterschiedliche Ansichtsfenster anpasst. Mehrspaltige Produktkarten auf dem Desktop können mit schmaler werdendem Bildschirm schrittweise auf zwei oder eine Spalte wechseln; Seitenleisten können in den Hauptinhaltsbereich verschoben werden. Navigationsmenüs lassen sich einklappen, doch ihre Bezeichnungen und die Art, wie sie geöffnet werden, sollten weiterhin verständlich sein.

Der Breakpoint für einen Layoutwechsel sollte sich nach den Inhalten richten und nicht nur für ein bestimmtes Smartphone-Modell festgelegt werden. Verkleinern Sie beim Prüfen schrittweise das Browserfenster und beobachten Sie, ob Überschriften ungewöhnlich umbrochen werden, Karten zu dicht stehen oder Schaltflächen überlaufen. An den Stellen, an denen Probleme auftreten, sollte das Layout angepasst werden. Auch der Viewport des mobilen Browsers muss korrekt eingestellt sein, beispielsweise mit width=device-width. Andernfalls wird die Seite möglicherweise in einem breiteren virtuellen Viewport gerendert und anschließend als Ganzes verkleinert.

Bei der Anpassung von Bildern müssen sowohl die Größe als auch die enthaltenen Informationen berücksichtigt werden. Für Produkt-Hauptbilder kann eine adaptive Breite verwendet werden; außerdem sollten Bilddateien in geeigneter Größe für den jeweiligen Anzeigebereich bereitgestellt werden. Bei Markenbannern ist zu prüfen, ob Text und Produktmotiv nach dem Zuschneiden weiterhin sichtbar sind. Ein Bild sollte nicht lediglich den Bildschirm ausfüllen, wenn dadurch Modellnummern, Gerätedetails oder Aktionsinformationen abgeschnitten werden.

Tabellen werden leicht übersehen. Breite Spezifikationstabellen können in einzelne Angaben aufgeteilt oder in einem horizontal scrollbaren Bereich mit einem deutlichen Hinweis angezeigt werden. Die gesamte Seite sollte jedoch nicht wegen einer Tabelle horizontal scrollen. Bei Vergleichen von Spezifikationen muss außerdem gewährleistet sein, dass Nutzer nach dem Verschieben der Tabelle die Parameterbezeichnungen den jeweiligen Werten weiterhin zuordnen können.

Sicherstellen, dass Anfragen oder Käufe auf dem Smartphone tatsächlich abgeschlossen werden können

Probleme bei mobilen Conversions treten nicht nur bei Schaltflächen auf. Wenn Besucher nach dem Tippen auf „Angebot anfordern“ auf zu viele Formularfelder stoßen, die eingeblendete Tastatur Eingabefelder verdeckt oder nach dem Absenden keine Rückmeldung erhalten, kann der Geschäftsprozess dennoch unterbrochen werden, auch wenn die Seite passend dargestellt wird.

Formularfelder sollten auf die Informationen beschränkt sein, die für die anschließende Bearbeitung erforderlich sind. Bei einer ersten Anfrage können zunächst Kontaktdaten, der Produktbedarf und notwendige Beschaffungsinformationen erfasst werden; ausführlichere technische Anforderungen lassen sich je nach Bedarf später im Gespräch ergänzen. Für Felder wie E-Mail-Adresse und Telefonnummer sollten die passenden Eingabetypen für Mobilgeräte verwendet und klare Fehlermeldungen angezeigt werden. Nach dem Absenden sollte ein Erfolgs- oder Fehlerstatus erscheinen, damit Nutzer nicht wiederholt auf die Schaltfläche tippen.

Schaltflächen und Links sollten leicht erreichbar sein und ausreichend Abstand zueinander haben. Eine am unteren Bildschirmrand fixierte Schaltfläche für Anfragen oder Käufe kann die Suche erleichtern. Es muss jedoch geprüft werden, ob sie Preise, Formulare, Datenschutzhinweise oder Systembedienelemente verdeckt. Auch bei eingeblendeter Bildschirmtastatur dürfen fixierte Elemente die Eingabe nicht beeinträchtigen.

Bei grenzüberschreitenden Websites müssen auch die tatsächlichen Geschäftsanforderungen geprüft werden. Texte sind je nach Sprache unterschiedlich lang; Schaltflächen und Navigation dürfen daher nicht nur für eine Sprache gestaltet werden. Bei Sprachen mit Schreibrichtung von rechts nach links müssen Layout, Symbolrichtungen und Formularreihenfolge gesondert überprüft werden. Auch die Auswahl von Produktausführungen, die Anzeige der Versandkosten und der Checkout-Prozess eines Onlineshops müssen auf dem Smartphone vollständig durchlaufen werden; die Abnahme darf sich nicht auf die Produktseite beschränken.

Performance und Barrierefreiheit in den Lieferumfang aufnehmen

Die Anpassung an Smartphones ist nicht nur eine Frage der Darstellung. Große Karussellbilder, automatisch abgespielte Videos und zu viele Skripte von Drittanbietern erhöhen die Ladezeit und verzögern, wann Besucher Inhalte sehen und mit der Seite interagieren können. Die für den sichtbaren Bereich beim ersten Laden tatsächlich benötigten Ressourcen sollten Vorrang haben. Für Bilder außerhalb dieses Bereichs ist eine geeignete Lazy-Loading-Strategie festzulegen. Außerdem sollte verhindert werden, dass Bilder die Seite nach dem Laden plötzlich vergrößern und dadurch Fehleingaben verursachen.

Bei der Bildkomprimierung muss die Lesbarkeit erhalten bleiben: Bei Marken- und Stimmungsbildern kann die Dateigröße angemessen reduziert werden, Produktdetailbilder müssen jedoch wichtige Strukturen und Kennzeichnungen klar erkennbar lassen. Produktinformationen dürfen nicht durch eine zu starke Komprimierung verfälscht werden. Ebenso sollten auf Smartphones keine Originalbilder geladen werden, die deutlich größer sind, als für die Anzeige erforderlich.

Texte sollten ohne ständiges Vergrößern lesbar sein; zwischen Text und Hintergrund muss ein ausreichender Kontrast bestehen. Interaktive Bedienelemente benötigen eindeutige Bezeichnungen, und wichtige Informationen, die in Bildern enthalten sind, müssen auch als Text verfügbar sein. Bei der Prüfung ist außerdem sicherzustellen, dass die Seite normal vergrößert werden kann und die Schließen-Schaltfläche von Dialogfenstern nicht verdeckt wird.

Mobile Prüfungen in die einzelnen Projektphasen integrieren

Um Zeitplan und Qualität miteinander zu vereinbaren, können bereits in der Designphase die Smartphone-Layouts wichtiger Seiten wie Startseite, Produktübersicht, Produktdetails sowie Anfrage- oder Checkout-Prozess festgelegt werden. Anschließend lassen sich dieselben Regeln auf ähnliche Seiten übertragen. Komplexe Seiten sollten zuerst geprüft werden. So kann eine Produktdetailseite mit Spezifikationstabelle, Downloads und verschiedenen Ausführungen den Zeitplan stärker beeinflussen als eine gewöhnliche Inhaltsseite.

Der Abnahmeumfang sollte vorab in den Lieferanforderungen festgehalten werden, statt lediglich „unterstützt mobile Endgeräte“ anzugeben. Mindestens die abzudeckenden Bildschirmbreiten, Browser, Sprachversionen und zentralen Aktionen sollten definiert werden. Zu prüfen sind horizontales Überlaufen, Bildzuschnitt, das Öffnen der Navigation, das Absenden von Formularen, verdeckte Schaltflächen und die Ladezeit der Seite. Die Entwicklertools eines Browsers eignen sich zur schnellen Fehlersuche beim Layout, können aber die Prüfung auf echten Geräten mit Touchbedienung, Tastatur und Browseroberfläche nicht vollständig ersetzen.

Wenn nicht alle Gerätekombinationen getestet werden können, sollte die Priorisierung anhand vorhandener Besucherdaten der Website oder der Nutzungsszenarien in den Zielmärkten erfolgen. Dabei ist eine grundlegende Abdeckung verschiedener Bildschirmgrößen und gängiger Browser beizubehalten. Für jedes gefundene Problem sollten Seitenadresse, Gerät oder Viewport, Schritte zur Reproduktion sowie erwartetes und tatsächliches Ergebnis dokumentiert werden. Anschließend ist zu unterscheiden, ob die Ursache beim Template, beim Inhalt oder bei einer Komponente eines Drittanbieters liegt, bevor Umfang der Korrektur und Verantwortung für den erneuten Test festgelegt werden.

Die Abnahmekriterien für ein responsives Konzept beim Aufbau einer Markenwebsite sollten auf wiederverwendbaren Seitenregeln und überprüfbaren Geschäftsabläufen beruhen: Die Seite muss sich bei unterschiedlichen Bildschirmgrößen zuverlässig neu anordnen, wichtige Informationen dürfen nicht verloren gehen und Besucher müssen die vorgesehenen Aktionen tatsächlich ausführen können. So lassen sich sowohl die Kosten für die Anpassung später hinzugefügter Seiten kontrollieren als auch Nacharbeiten nach dem Start vermeiden, wenn Abläufe auf Mobilgeräten nicht funktionieren.