kulturbanause Blog

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

Responsive Webdesign


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

Static Google Maps – bessere Karten im Responsive Design?

Vor einiger Zeit habe ich einen Beitrag verfasst, in dem erklärt wird, wie Google Maps in flexiblen Web-Layouts eingebettet werden kann. In diesem Beitrag möchte ich eine – für meinen Geschmack benutzerfreundlichere – Alternative vorstellen und gerne in den Kommentaren diskutieren. Googles Kartendienst wird hierbei als automatisch generierte, statische Grafik (Static Map) eingebunden und verlinkt auf den Kartendienst.

Beitrag zu Ende lesen

Responsive Webdesign und »Mobile First«

Normalerweise werden responsive Websites zuerst für den Desktop entworfen und anschließend mithilfe von Media Queries an die kleineren Displays mobiler Endgeräte angepasst. Beim »Mobile-First«-Ansatz wird diese Vorgehensweise umgedreht und im ersten Schritt die Inhalte und das Layout für mobile Endgeräte entwickelt. Das führt zu schlankerem CSS-Code und zu einer auf die wesentlichen Inhalte fokussierten Website. In diesem Artikel beschreiben wir die technische Umsetzung von »Mobile First«.

Beitrag zu Ende lesen

Responsive Webdesign mit Breakpoints und Media Queries

Responsive Websites basieren auf flexiblen Gestaltungsrastern und passen sich automatisch an die unterschiedlich großen Displays verschiedener (mobiler) Endgeräte an. Für die optimale Darstellung auf Tablets oder Smartphones werden dazu mithilfe von CSS Media Queries sog. Breakpoints definiert, an denen das Layout einer Website umbricht. In diesem Artikel zeige ich euch, wie die Desktopversion einer Website mit Hilfe von Breakpoints responsiv gestaltet wird, und welche Display-Eigenschaften neben der Displaygröße noch abgefragt werden können.

Beitrag zu Ende lesen