kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Responsive Webdesign


Schriftgrößen in vw – Bilder mit Texten proportional skalieren

Textinhalte die optisch in oder vor einem Bild positioniert werden sollen, stellen in einem flexiblen Layout eine große Herausforderung dar. Das Problem besteht darin, dass Bilder meist proportional skaliert werden, wohingegen Texte einfach nur an anderer Stelle umbrechen. Dadurch entsteht ein schwer steuerbares Ungleichgewicht.

Individuelle Breakpoints für jedes Bild sind zwar technisch möglich, in der Praxis jedoch meist nicht realistisch. Auch wäre es denkbar, den Text direkt mit in die Grafik zu speichern, doch aus Gründen der Suchmaschinenoptimierung, Editierbarkeit und Übersetzbarkeit ist eine solche Lösung ebenfalls inakzeptabel.

In diesem Beitrag erklären wir, wie Texte, die optisch vor einem Bild platziert wurden, gemeinsam mit dem Bild proportional skaliert werden können.

Beitrag zu Ende lesen

Quantity Query – Layout-Veränderungen über die Anzahl an Elementen steuern

Im responsive Design wird i.d.R. mit Hilfe von Breakpoints das Layout umstrukturiert, sobald eine bestimmte Displaygröße erreicht ist. Schwierig wird es allerdings, wenn man zum Zeitpunkt der Entwicklung nicht weiß, wie breit ein bestimmtes Element ist. Beispielsweise weil die Ausgabe dynamisch erfolgt oder weil ein Kunde über das CMS selbstständig Inhalte ergänzen kann. Hier kommen die sog. Quantity Queries (Mengenabfragen) ins Spiel: Mit ihrer Hilfe kann die Darstellung verändert werden, sobald eine festgelegte Anzahl an Elementen unter- und/oder überschritten wird.

Beitrag zu Ende lesen

jQuery: Gleiche Höhe für Elemente

In flexiblen Web-Layouts kann die Höhe von Elementen eine Herausforderung darstellen. Beispielsweise findet man auf vielen Websites nebeneinander angeordnete Teaser-Elemente mit Text und einem »Weiterlesen«-Button. Redaktionell sollte man natürlich darauf achten, dass die Texte gleich lang sind, aber je nach Breite des Displays brechen die Wörter anders um, was wiederum dazu führt, dass die Buttons nicht immer auf gleicher Höhe sitzen. Mit CSS lässt sich das Problem nur schwer lösen, daher möchte ich in diesem Beitrag ein praktisches jQuery-Snippet archivieren.

Beitrag zu Ende lesen

Layout-Pattern im Responsive Web Design

Um eine Webseite für verschiedene Geräte und Bildschirmgrößen zu optimieren gibt es unterschiedliche Konzepte nach denen sich der Inhalt einer Seite verhalten kann. Um auf allen Größen eine gute Figur zu machen verschiebt sich der Inhalt nach gewissen »Layout-Pattern«. Die meistgenutzten Layout-Muster zeigen wir in diesem Beitrag anhand von Beispielen.

Beitrag zu Ende lesen

Responsive Images – <picture>, srcset, sizes & Co.

Flexible Bilder sind ein wichtiger Bestandteil von responsiven Websites. Doch leider stellte genau dieses Thema Web Designer in den vergangenen Jahren vor enorme Herausforderungen. Ohne Scripte war es bisher nicht möglich Bilder ohne Performance- oder Qualitätsverluste auf allen Displaygrößen darzustellen. Und selbst mit der Unterstützung von Scripten waren einige Änderungen – z. B. die Veränderung des Bildausschnitts – eine mehr als lästige Aufgabe. Mit <picture>, srcset & sizes sind neue HTML-Elemente und -Attribute in die Spezifikation gewandert, mit deren Hilfe sich viele Probleme bald lösen werden.

Beitrag zu Ende lesen

Web-Typografie: Perfekte Zeilenlängen im Responsive Design

Das Layout einer Website hat u.a. die Aufgabe, Informationen bestmöglich zugänglich zu machen. Insbesondere die Web-Typografie spielt dabei eine wichtige Rolle. Damit ein Text gut lesbar ist, sollten die Zeilen eine optimale Länge haben. Im Responsive Design muss dazu meist die Schriftgröße über die verschiedenen Displaygrößen hinweg verändert werden, damit die Zeilen auf allen Geräten im optimalen Bereich liegen. Auf Smartphones ist Text daher i.d.R. kleiner als auf großen Monitoren.

Beitrag zu Ende lesen