Media Queries

Bei einem Media Query handelt es sich um ein CSS3-Konzept, mit dem innerhalb eines Stylesheets gerätespezifische Eigenschaften abgefragt werden können. Zu diesen Eigenschaften gehören beispielsweise die Größe des Viewports, die Abmessungen des Bildschirms, die Auflösung des Displays oder die Ausrichtung eines mobilen Endgeräts (Hoch- oder Querformat). Media Queries sind elementarer Bestandteil des sog. “Responsive Webdesign“; mit ihrer Hilfe wird eine Website u.a. für verschiedene Bildschirmgrößen und Display-Typen (z.B. Retina-Displays) optimiert.

Media Queries sind eine Weiterentwicklung des Medientyps in CSS2. Mit Medientypen können allerdings nur Geräte ansich (z.B. Drucker oder Bildschirme etc.) angesprochen werden, nicht aber die Eigenschaften des Geräts.

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

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

Retina Media Queries / Media Query

Retina Media Queries

Wenn ihr die Gestaltung eurer Website für hochauflösende Displays optimieren möchtet, führt einer der unkompliziertesten Wege über spezielle Media Queries. Zunächst fragt ihr mit Hilfe des entsprechenden Media Query die Displayauflösung ab, anschließend werden hochauflösende Grafiken nachgeladen. Leider ist der Syntax für Android und iOS nicht einheitlich. Aus diesem Grund archiviere ich in diesem Beitrag die notwendigen Code-Snippets.

Beitrag zu Ende lesen

Adaptive Website vs. Responsive Website

responsive-adaptive-website

Es gibt verschiedene Ansätze eine Website mit Hilfe von Media Queries für verschiedene Displaygrößen zu optimieren. Einmal steht das Ausgabegerät im Vordergrund, einmal das Design bzw. die Information. Ich möchte erklären was der Unterschied zwischen einer Responsive Website und einer Adaptive Website ist, welche Vor- und Nachteile die Varianten haben und in welcher Form der Layouttyp wichtig ist.

Beitrag zu Ende lesen

Media Queries in der Admin-Bar anzeigen: WordPress Media Queries Monitor

wordpress-media-queries-plugin-admin-bar

Wenn Ihr für eine WordPress-Website ein „responsive“ Theme entwickelt, werdet ihr in der Coding-Phase wahrscheinlich ähnlich vorgehen wie ich. Zunächst entwickelt ihr die Desktop-Version der Website oder alternativ die mobile Variante – je nachdem welchem Prinzip ihr folgt. Anschließend wird die Seite für die anderen Bildschirmgrößen adaptiert. Ihr fügt nach und nach neue Media Queries hinzu und wechselt permanent zwischen dem Browser und dem Code-Editor. Den Browser zieht ihr dabei manuell groß und klein und testet so die verschiedenen Ansichten. Leider erkennt man in dieser Vorgehensweise nicht ohne weiteres welcher Media Querie gerade aktiv ist und wo Anpassungen am Code vorgenommen werden müssen. Insbesondere wenn ihr mit sehr vielen verschiedenen Breakpoints arbeitet kann das lästig sein.

Beitrag zu Ende lesen