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 Performace-Optimierung, Touch-Screen-Design und »Retina-Optimierung« gehören zu diesem sehr umfangreichen Themenkomplex.

Web-Typografie: Perfekte Zeilenlängen im Responsive Design

responsive-typo

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?

static-google-maps

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

Video-Training »Modernes Webdesign mit Jonas Hellwig«

Modernes Webdesign mit Jonas Hellwig

In den vergangenen Jahren haben sich sowohl die Konzeption als auch die Gestaltung und die technische Umsetzung von Websites stark verändert. Themen wie responsive Design, Prototyping, flexible Rastersysteme und modulares Design haben einen sehr hohen Stellenwert eingenommen. Die Grenze zwischen Gestaltung und Technik ist größtenteils aufgelöst. Ich freue mich daher sehr, euch mein neues Video-Training mit dem Titel »Modernes Webdesign mit Jonas Hellwig« vorstellen zu dürfen. Die DVD ist ab sofort im Buchhandel, sowie bei Amazon erhältlich.

Demo-Videos und Inhaltsverzeichnis

Responsive »Pinterest-Style« Layout mit CSS3

Responsive Pinterest Grid

Layouts in versetzter Kachel-Optik (Pinterest-Style) sind aktuell sehr beliebt. Insbesondere für die Bilddarstellung eignet sich dieser Layouttyp sehr gut. Wenn ihr selbst ein Design in diesem Stil umsetzen möchtet, werdet ihr merken, dass es ein paar Hindernisse gibt. Insbesondere wenn das Gestaltungsraster flüssig und mit unterschiedlich vielen Spalten auf den verschiedenen Gerätetypen aufgebaut sein soll scheiden einige Hilfsmittel aus.
In diesem Beitrag archiviere ich den Code für ein flexibles »Pinterest-Style« Layout ohne den Einsatz von JavaScript. Mit Media Queries verändern wir die Anzahl der Spalten.

Beitrag zu Ende lesen

Content Choreography für responsive Websites

content-choreography

In der Smartphone-Ansicht einer Website werden die Inhalte i. d. R. »gestapelt«. Alle Elemente werden linear untereinander angeordnet und die Reihenfolge der einzelnen Bereiche (z.B. Header, Hauptnavigation und Inhaltsbereich) entspricht der Reihenfolge der Elemente im HTML-Dokument.
Da dieses Verhalten bei komplexeren Projekten schnell zu Schwierigkeiten führen kann, sucht die Webdesign-Community nach Lösungen um die Reihenfolge bei Bedarf verändern zu können. Das Stichwort lautet »Content Choreography«.

Beitrag zu Ende lesen

CSS Grid Layout Module

grid-layout-module

CSS bietet verschiedene Ansätze um das Layout einer Website zu konstruieren. Neben Hilfstechnologien wie Floats, mit denen es ebenfalls möglich ist ein Layout aufzubauen, existieren auch einige »echte« Layout-Modelle die nur zu diesem Zweck entwickelt wurden. Der Unterschied ist, dass ihr mit Hilfe eines echten Layout-Modells deutlich flexibler seid was die Anordnung von Elementen über verschiedene Displaygrößen hinweg angeht. Neben dem Flexbox-Modell existiert auch das sog. CSS Grid Layout Module.

Beitrag zu Ende lesen

Berechnungen mit CSS calc()

css-calculations

Moderne Web-Layouts werden zunehmend komplex, gleichzeitig versuchen Entwickler den Code immer weiter zu verschlanken und zu optimieren. Insbesondere im Responsive Design verwendet eine Website beispielsweise mehrere Gestaltungsraster mit unterschiedlichen Spaltenzahlen. Das führt oft zu Problemen bei der Vergabe von CSS-Klassen. Eine schöne Möglichkeit den Code von solch überflüssigen CSS-Klassen zu befreien bieten die Kalkulationsmöglichkeiten mit Hilfe der CSS-Eigenschaft calc(). Ähnlich sieht es aus, wenn Pixelwerte von Prozentwerten abgezogen werden sollen. Beispielsweise um Werbebanner in einem ansonsten flüssigen Layout zu platzieren.

Beitrag zu Ende lesen