Konzeption

Die Konzeption bezeichnet die gesamte Planungsphase einer Website. Angefangen bei der Frage nach der Zielgruppe, über das verwendete Navigationskonzept, den Viewport, die Farbgebung, eventuelle technische Voraussetzungen, die Struktur der Website etc., sollte alles vor Beginn des Layouts im sog. Briefing zusammengefasst werden. Die meisten Fehler im Webdesign beruhen auf einer schlechten, unvollständigen oder gar fehlenden Konzeption. Als Hilfsmittel in der Konzeptionsphase werden Skizzen, Mockups, Wireframes und Prototypen eingesetzt.

Content Choreography mit caption-side: bottom;

caption-side-css

Das HTML-Element <caption> beschreibt den Inhalt einer Tabelle. Leider wird das dazugehörige align-Attribut in HTML5 nicht länger unterstützt. Doch wir haben mit CSS die Möglichkeit einem HTML-Element das Verhalten bestimmter Tabellen-Elemente zuzuweisen. Im Umfeld von Content Choreography ist hier die Eigenschaft caption-side interessant. Mit ihr können zwei aufeinander folgende Inhalte getauscht werden – und das funktioniert in allen relevanten Browsern funktioniert in allen modernen Browsern, außer dem Internet Explorer.

Beitrag zu Ende lesen

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

Mobile First + Progressive Enhancement

mobile-first

Das mobile Internet hat die Art und Weise wie wir Websites entwickeln grundlegend verändert. Vor einiger Zeit habe ich einen Artikel über den veränderten Workflow im Responsive Design veröffentlicht und erklärt, warum wir umdenken müssen, mit welchen Herausforderungen wir uns konfrontiert sehen und welche Lösungsansätze es gibt.
Doch nicht nur die Erstellung eines flexiblen Layouts ist wichtig. Auch die Performance-Optimierung, die Browserkompatibilität und die Informationsarchitektur sind entscheidend für den späteren Erfolg der Website.
In diesem Artikel möchte ich beschreiben, inwiefern sich die Sichtweise bei der Konzeption und Entwicklung von Websites verändert hat.

Beitrag zu Ende lesen

Einführung in das Flexbox-Modell von CSS

flexbox

Vor dem Hintergrund flexibler Website-Layouts werden die Rufe nach Alternativen zu Floats & Co. immer lauter. Eine dieser Alternativen ist das sog. Flexbox-Modell von CSS, das vor dem Hintergrund „Content Choreography“ und „Responsive Webdesign“ bald sehr interessant werden dürfte. In diesem Beitrag möchte ich euch Flexbox kurz vorstellen und die grundlegende Funktionsweise erklären.

Beitrag zu Ende lesen

Der Workflow im Responsive Web Design – Prototyping & Co.

responsive-workflow

Die Entwicklung vom lokalen Desktop-Computer zum allgegenwärtigen „mobile Web“ zwingt uns dazu Webdesign-Projekte heute anders zu planen, zu gestalten und technisch umzusetzen als noch vor ein paar Jahren. Die schier unüberschaubare Anzahl an Displaygrößen, Geräten, Browsern und individuellen Einstellungen macht den bisherigen Workflow ineffizient, führt zu falschen Erwartungshaltungen bei Kunden und ist für langfristig angelegte Web-Projekte nicht mehr empfehlenswert. Die Anforderungen haben sich verändert und wir sollten darauf reagieren.

Beitrag zu Ende lesen