Benutzerfreundlichkeit für moderne, responsive Website-Layouts

Modernes Webdesign verzichtet auf die Methoden, mit denen wir gestern eine Website erstellt haben. Wer braucht noch XHTML und CSS2, wenn uns schon lange moderne HTML5- und CSS3-Techniken zur Verfügung stehen? Natürlich es kann es für den einen oder anderen Altgedienten schwierig sein, sich von tief verwurzelten Techniken zu trennen und einem neuen Workflow begeistert entgegenzusehen. Dennoch werden auch gestalterisch Starrsinnige auf Dauer nicht an der Erkenntnis vorbei kommen, dass modernes und zugängliches Webdesign mehr Liebe zum Detail erfordert, wenn Benutzerfreundlichkeit über alle Geräte die Maxime ist.

Benutzerfreundlichkeit für moderne, responsive Website-Layouts

Die folgenden Design-Tipps sind  gedacht für jene, die sich mit dem Konzept der Zugänglichkeit im (responsiven) Webdesign beschäftigen möchten. Dabei werde ich nicht mehr von einem responsiven Webdesign sprechen, denn ich halte diesen Begriff für veraltet. Responsives Webdesign sollte heute bereits als Normalität angesehen werden. Daher spreche ich im folgenden nur noch von Webdesign oder von Webentwicklung und meine dabei stets responsive Ansätze. Heute sollte jede Website in einer ansprechenden Art und Weise in Handarbeit gestaltet werden, um ein möglichst großes Publikum erreichen zu können.

Vernünftig zu lesende Schriftarten verwenden

Text auf einer Website ist das wichtigste Element, denn jede Website transportiert eine Botschaft zu den Lesern. Wenn jedoch Besucher mit weniger guten Augen die Website besuchen und den Inhalt nicht erfassen können, ist das schlecht. Die einzige Botschaft, die dann transportiert wird, ist: »wir müssen leider draußen bleiben«. Daher ist es wichtig, der Schriftart, der Schriftgröße, dem Kontrast und der Zeilenhöhe ebenso Aufmerksamkeit zu widmen, wie dem Freiraum zwischen den Absätzen. All diese Dinge spielen eine wichtige Rolle bei der Lesbarkeit von Texten.

Schriftarten auf  Websites sollten sich in der Größe der Bildschirmauflösung anpassen können. Dies kann man schnell mit einer entsprechenden CSS-Notierung der Schriftgrößen in REM erreichen. Hier solltest du einige Tests machen, denn zu kleine Schriften auf einer Smartphone- oder Tablet-Ansicht zerstören schnell die Wirkung des Designs.

Perfekt gewählte Schriftgrößen im Responsive Webdesign

Als Beispiel nehmen wir uns hier die Website der Todoist-App. Die Seite verwendet verschiedene Schriftarten und Größen in Verbindung mit einem „Hero“-Hintergrundbild. Auf kleineren Geräten wird das Hintergrundbild anders gesetz. Die Smartphone-Ansicht unterscheidet sich allerdings signifikant. Was gut zu sehen ist, ist, dass sich die Schriftgrößen wunderbar anpassen.

Ein weiteres wirklich gutes Beispiel ist die Website von MightyText. Auch hier kann man beobachten, wie sich die Schriftgröße und die Zeilenhöhen einer kleineren Bildschirmauflösung  anpassen. Das nenne ich gelungenes (responsives) Webdesign.

MightyText

Gelungene Interaktionen

Der überwiegende Teil moderner Mibilnutzer hat kein Problem im Umgang mit einem modernen Smartphone oder Tablet. Touch, Swipe, Tippen und Halten und die anderen Techniken sind vielen Menschen bereits in Fleisch und Blut übergegangen. All diese Techniken sind Teil einer gelungenen, mobilen Benutzeroberfläche. Damit diese Techniken auf einem Smartphone gut funktionieren, bedarf es jedoch einiger Anpassungen. Einfach nur die Bilder und die Textgrößen anpassen, reicht nicht.

Browser-Kompatibilität prüfen

Die Browser-Kompatibilität ist heute nicht mehr die katastrophale Bedrohung von einst. Allerdings sollte trotzdem ein Test der Website mit allen mobilen Browsern erfolgen. Das Ziel ist hierbei, eine nahtlose Schnittstelle auf so vielen Geräten und Browsern wie nur möglich zu gestalten.

Optimal zu bedienende Navigation gestalten

Die Navigation ist eines der wichtigsten Elemente im Webdesign. Hier muss zuerst eine Form eines Navigations-Menüs gefunden werden, das gerade auf kleineren Bildschirmen mit Touch-Bedienung gut funktioniert. Auch hier kann Todoist wieder als Beispiel dienen. Die Seite verwendet ein modernes, verstecktes Menü. Erst bei Bedarf klappt der User das Menü auf und kann es ohne Probleme auch mit weniger filigran konstruierten Fingern auf einem Smartphone-Bildschirm nutzen. Eine Navigation dieser Art bietet eine hervorragende Benutzerfreundlichkeit.

Das vorbildliche Navigations-Menü von Todoist

Benutzerfreundlichkeit: Trenne dich vom Unwesentlichen

Responsive Benutzerfreundlichkeit heißt im Klartext Geschwindigkeit, Effizienz und Klarheit. Bei einer Website, die für große Bildschirme erstellt wurde, hat man ausreichend Raum für Elemente. Du kannst zwei Sidebars verwenden, etliche Werbebanner, viele Widgets und so weiter. Kurzum: Wenn man möchte, kann man das Layout vollstopfen. Abgesehen davon, dass dies auch bei einer für normale Bildschirme designten Website keine gute Idee ist, wird dieses Vorhaben bei einer für mobile Anwendung vorgesehenen Website total scheitern.

Ein responsives Design stellt auf einem Smartphone-Bildschirm alle Elemente untereinander dar. Um eine Website auf die Anwendung mit mobilen Geräten zu optimieren, heißt es, sich vom Unwesentlichen zu trennen. Nicht benötigte Inhalte sollten also entfernt werden.

Diese Elemente sind auf kleinen Auflösungen verzichtbar

Noch mal: für eine wirklich gut auf mobile Ansichten optimierte Website brauchen wir Geschwindigkeit, Effizienz und Klarheit. Alles nicht wirklich benötigte muss also weg. Zuerst einmal könnte das die Sidebar sein. Sie enthält zumeist nichts Wichtiges für Smartphone-User. Auch der Footer sollte entmüllt werden. Ist er überhaupt nötig? Oder ist nur die Anzeige der beiden wichtigen Links »Kontakt und Impressum« wirklich nötig? Ich tendiere immer zu letzterem.

Social-Sharing-Links können am unteren Ende des Bildschirms responsiv angebracht werden. Extragroße Banner gehören definitiv verkleinert und Werbung sollte nur sehr sparsam eingebunden werden. Vielleicht kann sogar nur ein sehr schnell ladender Werbeblock oberhalb des Logos Verwendung finden.

Auf kleinen Bildschirmen alles unwesentliche weglassen

Auf der Beispielseite ist nur ein einzelnes Werbeelement eingebunden, welches zudem noch auf Geschwindigkeit optimiert wurde. Es besteht lediglich aus einer verlinkten Grafik. Geschwindigkeit ist sehr wichtig auf den mobilen Ansichten, denn nicht jeder Smartphone-User hat das Hochgeschwindigkeitsnetz LTE zur Verfügung. Lädt die Website zu lang, wird der Vorgang abgebrochen und deine vielleicht sehr interessante Website nicht besucht.

Die Flexibilität der Inhaltsbereiche

Bei der Gestaltung eines ansprechenden Layouts solltest du stets deinem Instinkt vertrauen. Das beinhaltet auch das Nachdenken über die einzelnen Inhaltsbereiche. Wie werden sie sich bei einer bestimmten Auflösung verhalten? Versuche stets, die Website aus den Augen eines Besuchers zu sehen. Hierbei sind die Inhaltsbereiche sehr wichtig, denn sie müssen sich flexibel den einzelnen Auflösungen anpassen. Dabei funktionieren große Full-Size-Layouts nur selten ohne erhebliche Anpassungen auf kleineren Bildschirmen.

Hier bist du als Designer besonders gefragt, denn bereits in der Planungsphase einer Website sollten die mobilen Ansichten berücksichtigt werden.

Ein Beispiel sehr guter Flexibilität

Die Website von Storify bietet ein hervorragendes Beispiel für die Flexibilität der einzelnen Inhaltsbereiche. Wenn du diese Website scrollst, wirst Du viele Blockelemente bemerken, die abwechselnd links oder rechts aneinander liegen. Doch sobald die Website mit mobilen Geräten angesehen wird, ändern sich diese Bereiche und gliedern sich untereinander an. Die unwesentlichen Elemente werden ausgeblendet, nur das Wesentliche bleibt in der Ansicht auf mobilen Endgeräten erhalten.

Die Website auf großen Bildschirmen
Storify in der Ansicht auf großen Bildschirmen
Die Website auf einem Smartphone betrachtet
Storify auf kleinen Bildschirmen

Wenn das Layout schrumpft, braucht es mehr Finesse, um es ansprechend darstellen zu können. Du wirst mit Sicherheit nicht immer die perfekte Lösung finden. Doch es ist deine Aufgabe, einen gut funktionierenden Kompromiss im Sinne der Benutzerfreundlichkeit zu finden.

Benutzerfreundlichkeit und die Mobile First Strategie

Ein wirklich empfehlenswertes Buch zum Webdesign unserer Tage ist »Mobile First« von Luke Wroblewski. Es ist gut zu lesen und beschreibt anschaulich das Konzept hinter dem Mobile-First-Gedanken. Zumeist ist es wesentlich einfacher, mit einem ansprechenden mobilen Design für Smartphones zu beginnen, um sich dann langsam über die Tablets zu den großen Monitoren für Notebooks und PCs hochzuarbeiten.

Diese Art der Herangehensweise zwingt Dich, zuerst über die wichtigsten Schlüsselelemente nachzudenken. Danach bekommst du dann die Freiheit, je nach wachsendem Bildschirm ergänzende Elemente hinzuzufügen. Mobile First heißt, nur die wichtigsten Design-Elemente zu gestalten, und nach und nach daraus die Full-Size-Version zu entwickeln. So arbeitet die Website auf jeder Bildschirmauflösung optimal benutzerfreundlich.

Fazit

Mit der richtigen Herangehensweise ist (responsives) Webdesign bedeutend einfacher. Es ist erstaunlich, welche Ergebnisse man erreichen kann, wenn zuvor genau bedacht wurde, wie die Website auf welcher Auflösung aussehen soll. Webdesign ist keine leichte Aufgabe in der heutigen Zeit. Umso wichtiger ist es, stets am Ball zu bleiben und sich täglich den neuen Herausforderungen zu stellen. Denn statische Websites locken heute keinen Hund mehr hinter dem Ofen hervor. Hierzu braucht es Kreativität, Planung und die Sicht aus der Perspektive eines Besuchers.

Links zum Beitrag:

(dpe)

*= Affiliate Link: Dr. Web erhält eine Provision für Verkäufe über diesen Link. Für den Käufer ist das Produkt dadurch weder billiger noch teurer.

ist freier Journalist, Spezialist für WordPress und WordPress Sicherheit und schreibt seit 2012 für Dr. Web. Nebenbei ist er Autor mehrerer E-Books zu den Themen Lebenshilfe, Marketing und WordPress. Auf seinem Blog TechBrain.de schreibt er über das Schreiben und Bloggen und veröffentlicht nützliche WordPress-Snippets.

Sortiert nach:   neueste | älteste | beste Bewertung
Michael
Gast
7 Monate 1 Tag her

Danke für den insteressanten Artikel und die Hinweise zur Verwendung der Schrift. Ich bin auch der Meinung, dass die Schriftart und Grösse ein entscheidener Bestandteil eines schönen und gutem Design ist. Ich entwickle meine Designs mit LESS und wandle sie dann in CSS um und habe mir dazu eine Funktion erstellt, die die Schriftgrösse und Zeilenhöhe entsprechend berechnet. Im Less sieht das dann ungefähr so aus: p {.font-size(1.2);}

Und die Funktion dazu:
.font-size(@sizeValue) {
@remValue: @sizeValue;
@pxValue: (@sizeValue * 10);
font-size: ~“@{pxValue}px“;
font-size: ~“@{remValue}rem“;
}

Erik
Gast
6 Monate 17 Tage her

Hallo Michael

Wasist eigentlich Less, entwickle auch eigene Webseiten und finde diesen Artikel auch toll, möchte weitere Erfahrungen in eigenen Designs sammeln.

Besuch doch Mal meine Seite auf centifa.ch.

Freundliche Grüsse aus der Schweiz

Christian Posch
Gast
5 Monate 6 Tage her

Sehr guter und ausführlicher Beitrag.

Mit freundlichen Grüßen aus Österreich

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen