Da das mobile Web stetig wächst und Google bestätigt, dass Seiten nach ihrer Reaktionsfähigkeit eingestuft werden, ist es entscheidend, dass sich Ihre Website an eine Vielzahl unterschiedlicher Geräte und Bildschirmgrößen anpassen lässt.

Aber beim responsiven Webdesign geht es um mehr als nur darum, Ihr Layout zu dehnen oder zu stauchen, um es anzupassen. Es geht darum, eine einzelne Website auf verschiedene Weise bereitzustellen und dabei Inhalt und Funktionalität beizubehalten.

Vor diesem Hintergrund finden Sie hier sieben Best-Practice-Tipps für responsives Webdesign.

1. Denken Sie reaktionsschnell

Als responsives Webdesign begann, begannen die Designer mit der Planung für die größten Bildschirme und reduzierten sie dann, bis sie den kleinsten erreicht hatten. Allzu oft enthielten sie ausgefallene Elemente, die nicht gut auf einen kleineren Bildschirm passten, was dazu führte, dass die mobile Version eine verwässerte Kopie des Originals war und sich wie ein nachträglicher Einfall anfühlte. Heutzutage stellen mobile Geräte das größte Verkehrsaufkommen für viele Websites dar, daher erwarten und verdienen mobile Benutzer die gleiche Qualität des Browsing-Erlebnisses wie andere Benutzer. Aber das bedeutet nicht, dass die größeren Bildschirmgrößen auch ignoriert werden sollten. Viele Menschen verwenden immer noch einen großen Desktop und noch mehr springen den ganzen Tag zwischen verschiedenen Bildschirmen hin und her.

Der beste Weg, dies zu bewältigen, besteht darin, einen „Mobile First“-Ansatz zu verfolgen, zuerst für den kleinsten Bildschirm zu entwerfen und dann nach Bedarf Elemente hinzuzufügen, wenn Sie die Bildschirmgröße erhöhen.

Konzentrieren Sie sich auf das Design für die beliebten Breakpoints, aber berücksichtigen Sie auch die Lücken dazwischen – jeden Tag kommen neue Geräte auf den Markt und eine heute kaum genutzte Bildschirmgröße könnte nächsten Monat das neue große Ding sein. Und denken Sie daran, Leute zu berücksichtigen, die ihre Tablets im Hochformat verwenden – dies kann unter das Radar geraten und am Ende wie ein zerquetschter Desktop oder ein einfaches mobiles Layout mit viel verschwendetem Platz aussehen.

2. Achten Sie auf den Inhalt

Tappen Sie nicht in die Falle eines „Fit-to-Size“-Ansatzes, bei dem Sie sich darauf konzentrieren, alle Elemente auf einer Seite unterzubringen, ohne ihren Kontext zu berücksichtigen. Konzentrieren Sie sich zunächst auf die wichtigsten Inhalte und Funktionen und gehen Sie brutal damit um, welche Elemente in Frage kommen. Wenn Sie die verschiedenen Bildschirmgrößen nach oben verschieben, hinterfragen Sie ihre Einbeziehung in jeder Phase – wenn Sie zu lange darüber nachdenken müssen, muss es wahrscheinlich nicht vorhanden sein. Sobald Sie sich über die gewünschten Inhalte und Funktionen im Klaren sind, können Sie mit der Arbeit am Layout beginnen. Die schiere Vielfalt an Bildschirmgrößen bedeutet, dass das traditionelle Konzept „above the fold“ so gut wie tot ist. Die Leute sind ans Scrollen gewöhnt – das Aufkommen von Seiten wie Facebook und Twitter hat dafür gesorgt – also gestalten Sie Ihre Seiten so, dass sie zum Scrollen anregen, aber die wichtigsten Informationen am oberen Bildschirmrand behalten. Dazu gehören Kontaktdaten, CTAs und auf E-Commerce-Websites die überaus wichtige Schaltfläche „In den Warenkorb“.

Priorisieren Sie Elemente basierend auf ihrer Bedeutung für den Benutzer. Wenn Sie also Text neben einem Bild auf einem Desktop platzieren können, überlegen Sie sorgfältig, welches am besten die Aufmerksamkeit Ihrer Benutzer auf einem mobilen Gerät auf sich zieht, und stellen Sie sicher, dass dies an erster Stelle steht. Andere Elemente, wie etwa ein begleitendes Blog-Bild auf einer Vorschauseite, könnten bei der mobilen Version ganz weggelassen werden, sodass der Fokus auf den Inhalten selbst verbleibt.

3. Experimentieren Sie mit skalierbarer Navigation

Die Navigation ist einer der herausforderndsten Aspekte des responsiven Webdesigns, aber auch einer der wichtigsten. Im Gegensatz zu den meisten Webdesign-Regeln ist dies ein Ort, an dem Sie nicht konsistent sein müssen – große, komplexe Menüs, die auf großen Bildschirmen verwendet werden, funktionieren einfach nicht auf Mobilgeräten, daher ist es vollkommen akzeptabel, eine andere Art der Navigation für verschiedene Bildschirme zu erstellen Größen. Die versteckte Navigation ist auf vielen mobilen Websites beliebt, wobei ein einfaches Symbol wie der Burger das Vorhandensein des Menüs anzeigt. Sie können das Menü entweder nach unten über den Inhalt unten schieben oder es auf dem gesamten Bildschirm überlagern lassen. Eine weitere Option ist das horizontale Wischen, bei dem der Inhalt offensichtlich von der Seite des Bildschirms verschwindet und Benutzer darüber streichen können, um ihn zu aktivieren.

Wofür Sie sich auch entscheiden, verneinen Sie die Konsistenz nicht vollständig – Ihr Menü sollte sich in Bezug auf die visuellen Eigenschaften ähnlich anfühlen wie andere Versionen, auch wenn es andere Funktionen hat.

4. Alles über Bilder

Die Qualität von Bildern auf Websites ist entscheidend, da sie einen großen Teil des ersten Eindrucks eines Besuchers von einer Website ausmachen. Große Bilder wirken sich jedoch negativ auf die Download-Geschwindigkeiten von Mobilgeräten mit ihren geringeren Bandbreitenfähigkeiten aus. Ähnlich wie beim Inhalt sollten Sie die Aufnahme jedes Bildes für jede Bildschirmgröße hinterfragen und nur die unbedingt notwendigen einfügen, während Sie Elemente wie Schieberegler, die mehrere große Bilder enthalten, überdenken.

Optimieren Sie Ihre verbleibenden Bilder, machen Sie sie mit adaptiver Größenanpassung flexibel und speichern Sie sie im geeigneten Format. Denken Sie daran, dass Sie die Funktion „Bild vergrößern“ auf einem Mobiltelefon wahrscheinlich nicht benötigen, da das Bild wahrscheinlich sowieso im Vollbildmodus angezeigt wird. Wenn Sie Bildergalerien einfügen müssen, entscheiden Sie sich für die Navigation mit langem Bildlauf oder verwenden Sie horizontales Wischen, um zwischen ihnen zu wechseln.

5. Denken Sie an Typografie

Die von Ihnen gewählte Typografie erfordert sorgfältige Überlegung, da viele Schriftarten, die auf einem mittleren oder großen Bildschirm funktionieren, zu schwer zu lesen sind, wenn sie für kleinere Bildschirmgrößen verkleinert werden. Testen Sie daher immer gründlich auf verschiedenen Bildschirmen. Stimmen Sie Ihre Überschriften sorgfältig ab – ihre Funktion muss offensichtlich sein, obwohl sie bei zu großer Größe zu dominant wirken können – und sorgen Sie für einen angemessenen Kontrast zwischen Hintergrundfarbe und Schrift.

Achten Sie beim Aufsteigen auf die verschiedenen Bildschirmgrößen auf die Zeilenlänge Ihrer Inhalte – eine zu lange Zeile kann schwer lesbar sein. Halten Sie die Zeilenlänge bei etwa 60–75 Zeichen und füllen Sie den Platz auf breiteren Bildschirmen mit einer Seitenleiste oder Bildern aus.

6. Für Touchscreens optimieren

Responsive Webdesign muss nicht nur unterschiedliche Bildschirmgrößen berücksichtigen; es muss auch für verschiedene Eingabemethoden optimiert werden. Und Touchscreens können knifflig sein, daher ist es am besten, großzügig mit der Größe der Schaltflächen und Links umzugehen und einen anklickbaren Bereich von etwa 44 Punkten im Quadrat anzustreben. Sie müssen auch Ihre Benutzererfahrung für Touchscreens optimieren. Ja, sie sind von Natur aus intuitiv, aber subtile Navigationshilfen wie Wischgesten sind eine wertvolle Ergänzung.

7. Testen Sie auf tatsächlichen Geräten

Auch wenn die Planung Ihres Designs ein entscheidender Schritt ist, verlassen Sie sich nicht nur auf die Theorie. Es gibt mobile Emulatoren, die Ihnen helfen, Ihre Designs und CSS-Breakpoints zu überprüfen, aber nichts geht über das Testen an der Realität – viele dieser Emulatoren replizieren nur die verschiedenen Bildschirmgrößen, aber nicht die Funktionalität verschiedener Betriebssysteme. Stellen Sie sicher, dass Sie eine Vielzahl unterschiedlich großer Bildschirme zum Spielen und eine Reihe verschiedener Benutzer haben, und testen Sie Ihre Designs gründlich. Dies bringt oft eine neue Sichtweise und bestätigt, dass Sie auf dem richtigen Weg sind, oder zeigt Ihnen, wo Verbesserungen vorgenommen werden können.

Responsive Webdesign entwickelt sich ständig weiter und wächst, und wir haben hier nur an der Oberfläche gekratzt. Best Practices für diesen Bereich ändern sich ebenfalls häufig, daher lohnt es sich, mit den neuesten Entwicklungen Schritt zu halten. Denken Sie daran, dass viele Benutzer eine schwache Bandbreite, eine niedrige Auflösung und eine geringe Rechenleistung auf ihren Geräten haben, daher sollte Ihre Website einfach, gut organisiert, sauber und benutzerfreundlich sein und auf einer Vielzahl von verschiedenen Bildschirmen gut aussehen.