Responsive Webdesign

Das Thema »Responsive Webdesign« (RWD) beschreibt u.a. die Möglichkeit, Websites für unterschiedliche Displaygrößen zu optimieren. Die Website basiert dabei auf einem flüssigen Gestaltungsraster, mit dessen Hilfe Größenunterschiede zwischen ähnlichen Displaygrößen ausgeglichen werden können. An bestimmten Punkten bricht das Layout jedoch um, und verändert deutlich seine Struktur. Das ist notwendig um auch Größenunterschiede zwischen verschiedenen Geräteklassen (z.B. Tablet und Smartphone) aufzufangen. Dieser Punkt, der sog. Breakpoint, wird mit Hilfe der CSS-Technologie der Media Queries realisiert. Neben dem Layout behandelt das Thema »Responsive Design« auch die Grafiken und Inhalte einer Website. Auch hier muss für die notwendige Flexibilität gesorgt werden, was häufig eine größere Herausforderung darstellt als das eigentliche Layout. Auch Themen wie Performance-Optimierung, Touch-Screen-Design und »Retina-Optimierung« gehören zu diesem sehr umfangreichen Themenkomplex.

Container Queries & Element Queries im Responsive Web Design

Eine der drei Grundvoraussetzungen, die Ethan Marcotte 2010 in seinem legendären Artikel »Responsive Webdesign« als Grundlage für selbiges aufgeführt hat, sind die Media Queries. Mit Media Queries kann man das Layout einer Website anhand von Geräteeigenschaften verändern. Beispielsweise, wenn der Viewport eine bestimmte Größe über- oder unterschreitet. Seit 2010 ist einige Zeit vergangen und es hat sich in der Praxis herausgestellt, dass für die Veränderung des Layouts die Viewportgröße nicht immer der ideale Ausgangspunkt ist. Häufig wäre es besser, wenn ein Element immer dann verändert werden könnte, wenn der Raum für dieses spezielle Element einen bestimmten Punkt über- oder unterschreitet. Genau das sollen sog. Element Queries bzw. Container Queries erledigen. Und noch vieles mehr.

Beitrag zu Ende lesen

Responsive Sticky Footer

Wenn der Inhalt einer Website kürzer ist als der Viewport hoch ist, kommt es häufig zu der Fehldarstellung. Es entsteht ein Freiraum unter der Fußzeile, da diese sich an der Länge des Inhalts orientiert. Mit Hilfe eines sog. »Sticky Footers« wird die Fußzeile immer am Ende der Seite bzw. am unteren Ende des Viewports positioniert. In diesem Beitrag zeigen wir verschieden Lösungen.

Beitrag zu Ende lesen

Die Navigation im Responsive Web Design

Hamburger Icon

Aufgrund der vielen verschiedenen Bildschirmgrößen und Geräte muss eine moderne Webseite flexibel auf die individuellen Bedürfnisse des Endnutzers reagieren. Einer der schwierigsten Punkte im Responsive Web Design ist dabei die Navigation. Damit eine Webseite auf verschiedenen Geräten benutzerfreundlich navigiert werden kann, brauchen wir ein Konzept, das es uns ermöglicht die Navigation entsprechend der Bildschirmgröße und des Bedienkonzepts (Mouse/Touch) anzupassen. Zu diesem Zweck gibt es unterschiedliche Musterlösungen - auch »Navigation Pattern« genannt – die wir in diesem Beitrag detailliert erklären.

Beitrag zu Ende lesen

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

Jonas Hellwig im Interview zu »Gestaltung & Code«

Im Oktober startet die »WebTech Conference« in München. Im Interview mit dem Journalisten Thomas Wießeckel spricht Webdesigner Jonas Hellwig über Gestaltung und Code, ein Thema, das er auch als Trainer auf der »WebTech Conference« und der »International PHP Conference« umfassend beleuchtet.

Dieses Interview ist zuerst in gekürzter Form bei t3n erschienen. Hier könnt ihr die fehlenden zwei Drittel nachlesen.

Beitrag zu Ende lesen

Quantity Queries – 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

Die CSS-Eigenschaft »object-fit« – Flexible Grafiken im HTML-Markup

Mit der CSS-Eigenschaft object-fit lassen sich Bilder und Videos, die im HTML-Markup liegen zentrieren und zuschneiden. Die CSS-Eigenschaft background-size, für die Positionierung von CSS-Hintergrundbildern dürfte jedem soweit ein Begriff sein. Mit der Eigenschaft object-fit ist diese Positionierung auch mit Grafiken und Videos, die im HTML-Code liegen möglich.

Beitrag zu Ende lesen