Vermeide diese Fehler für die breaking points in deinem responsive Design

Eine moderne Website sollte ein responsives Design haben. Das heißt, die Darstellung sollte sich an das jeweilige Endgerät anpassen können. Denn zu unterschiedlich sind heute die Größen von Computer-, Tablet-, Smartphone- oder Smart-TV-Bildschirmen als dass es möglich wäre, die Homepage nur in einer vordefinierten Größe auszuspielen.

Damit die richtige Gestaltung gelingt, müssen sogenannte Break Points programmiert werden werden. Sie definieren, bei welcher Breite des Displays das System welche Darstellungsform auswählt. Hast Du beispielsweise eine Website, die ihre Inhalte in der Desktopversion mehrspaltig anzeigt, kannst Du durch das Setzen eines Break Points die Darstellung so konfigurieren, dass sie bei einem mobilen Nutzer auf eine einspaltige Anzeige umschaltet. Die Container oder Boxen, in denen die Inhalte angezeigt werden, werden dann untereinander und nicht mehr nebeneinander angeordnet.

Beschränke die Optimierung auf Kernzielgruppen

Aufgrund der hohen Anzahl der verschiedenen Displaygrößen ist es nahezu unmöglich, Break Points für alle Geräte zu definieren. Deswegen solltest Du Dich auf die wichtigsten Größen beschränken. Um eine Auswahl zu treffen, bietet Dir Google Analytics bereits wertvolle Daten: Denn Du kannst Dir anzeigen lassen, welche Auflösung die Nutzer verwenden. Daraus kannst Du schon einmal mehrere Kernzielgruppen erarbeiten, auf die die Darstellung optimiert sein sollte. Liegen die Bildschirmbreiten in einem gewissen Spektrum, das nur eine geringe Abweichung hat, ist es außerdem sinnvoll, sie zu gruppieren. Dabei solltest Du aber auch immer darauf achten, dass die Website für das Hoch- und das Querformat dieser Größe optimiert ist.

Manche Webdesigner gehen bei der Differenzierung einer Website aber auch weniger ins Details. Sie definieren Break Points lediglich für die hoch- und querformatige Auflösung eines iPads beziehungsweise eines iPhones, außerdem gehen sie von einer Standardauslösung von Laptops und von Smart TVs aus. So können sie bereits eine große Bandbreite von Usern abdecken, ohne sich mit ihren individuellen Geräten zur Nutzung zu befassen. Außerdem lassen sich diese Standardformaten bereits relativ leicht durch vorhandene Stylesheets umsetzen.

Beginne mit der Darstellung für die niedrigste Auflösung

Wenn Du Deine Website für die Nutzung durch mobile Geräte konzipierst, ist es sinnvoll sie zunächst für das Gerät mit der geringsten Auflösung zu programmieren. So legst Du die Kerninhalte fest, die Du bei allen weiteren Konfigurationen um zusätzliche Container mit Inhalten erweiterst. Wenn Du diese Strategie auswählst, beherzigst Du einen Grundsatz des Webdesigns: Inhalte haben Vorrang vor dem Design. Das gilt für Zeitungsportale mit viel Text gleichermaßen wie für Dating und Escort Seiten, wo die Bilder im Vordergrund stehen.

Denn Du gibst Damit Deinen wichtigsten Inhalten den Platz, den sie benötigen. Alles andere kannst Du dann so um sie herum anordnen, dass sie zusammenpassen und gut wirken. Das lässt Deine Webseite wie aus einem Guss entstehen. Sie sieht dann nicht so aus, als hättest Du einfach kompromisslos alles in die mobile Darstellung packen wollen. Das kann auch beinhalten, dass Du auf einige Bilder verzichtest. Den bei allen Überlegungen, solltest Du auch an das Datenvolumen der User denken.

Eine Gefahr lauert in dem Bereich, dass Inhalte von anderen Websites übernimmst, die nicht responsive sind. Bettest Du also Videos, interaktive Grafiken oder Widgets von anderen Anbietern ein, achte darauf, dass die Breite nicht mit einem konkreten Wert angegeben ist, sondern die Größe auf „100%“ eingestellt ist. Damit kannst Du sichergehen, dass der eingebettete Inhalt auch in Deiner vordefinierten Container passt und nicht über sie hinaus ragt. Dieser Definition der Größe folgen alle Inhalte in einem responsive Design.

In manchen Fällen ist die Silbentrennung sinnvoll

Aus diesem Grund kann es auch eine Überlegung sein, Formatierungen für die Silbentrennung zu setzen. Sie wurde im Webdesign lange Zeit vernachlässigt, macht nun aber durchaus Sinn. Denn je kleiner ein Bildschirm ist, desto wahrscheinlicher ist es, dass ein Wort nicht richtig in eine Zeile pass. Dafür sind zwei Szenarien vorstellbar: Erstens kann das Wort zu lang sein, um eine bereits begonnene Zeile zu füllen. Dann wird die Zeile umgebrochen und es entsteht in der vorherigen Zeile eine große Lücke. Sie kann bei einer Blockatzformatierung ein Stück weit ausgeglichen werden, aber bei einer linksbündigen Formatierung wirkt zu viel Weißraum unordentlich. Die zweite Möglichkeit ist, dass das Wort von sich aus schon zu lang ist, um in die Zeile zu passen. Wenn das System nicht weiß, dass es „Donaudampfschifffahrtskapitän“ trennen darf, wird es das Wort unweigerlich in eine Zeile packen, selbst wenn es damit die von Dir festgelegten Darstellungsgrößen sprengt.

Die Silbentrennung ist natürlich aufwendig zu programmieren, wenn Du sie für jedes einzelne Wort umsetzen willst. Du brauchst dafür nicht den einfachen Trennungsstrich, sondern musst einen Code setzen. Daher macht die Silbentrennung vor allem dann Sinn, wenn Du eine Website betreibst, die nur eine geringe Fluktuation der Inhalte hat. Betreibst Du ein Nachrichtenportal, das tägliche zahlreiche neue Texte veröffentlicht, solltest Du genau überlegten, ob der Aufwand gerechtfertigt ist.

Teste die Anpassungen

Nicht nur das Verkleinern der Inhalte ist wichtig, sondern auch, über das Vergrößern solltest Du Dir Gedanken machen. Gerade bei Bildern solltest Du darauf achten, dass sie auf extrem großen Monitoren gar nicht oder nur in einem engen Rahmen vergrößert werden. Andernfalls besteht die Gefahr, dass ihre Qualität unter der Transformierung leidet.

Egal für welche Konfigurationen Du Dich entscheidest, Du solltest die Darstellungen immer überprüfen. Dazu dazu bieten die gängigen Webbrowser Entwicklerfunktionen. Mit Ihnen kannst Du die Größe eines mobiles Gerätes simulieren. Die Größen kannst Du individuell einstellen. Damit bekommst Du einen praktischen Eindruck davon, wie die Website tatsächlich wirkt auf unterschiedlichen Geräten und musst Dich nicht ausschließlich auf die Theorie der Programmierung verlassen.