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.

Druckversion und print.css einer Website

website-drucken

Eine optimierte Druckausgabe gehört auch in Zeiten von Responsive Design zum Standardrepertoire einer professionellen Website. Wenn der Code der Website »Mobile First« geschrieben wurde, ist die Anpassung des Layouts für den Druck sogar besonders einfach, da die Smartphone-Ansicht i.d.R. linear aufgebaut ist. Diese Darstellung wird auch in der Druckausgabe häufig gewünscht, weshalb weniger Anpassungen notwendig sind als bei »Desktop-First« geschriebenem Quellcode.
In diesem Artikel findet ihr einige hilfreiche CSS-Befehle für die Anpassung der Druckausgabe.

Beitrag zu Ende lesen

Vom Design zum responsive Design: Responsive Grid System

reponsive-grid-system-logo

Das Responsive Grid System ist eine Zusammenstellung von CSS-Klassen die euch helfen eine Website um ein flexibles Raster zu ergänzen und die Seite somit für Smartphones und Tablets zu optimieren. Das System lässt sich auch noch nach der Gestaltungs- oder Coding-Phase anwenden und zudem muss die Anzahl der Rasterspalten nicht global für die gesamte Seite festgelegt werden. Ein interessanter Ansatz.

Beitrag zu Ende lesen

Tabellen im Responsive Webdesign

tabellen-responsive-design

Wer schon einmal eine Website mit tabellarischen Inhalten für mobile Endgeräte optimieren musste weiß: Tabellen und responsive Webdesign passen nicht gut zusammen. Ich spreche hier natürlich nicht von Tabellen die für das Layout missbraucht wurden (es dürfte klar sein, dass Tabellen NIE im Layout verwendet werden) sondern von Inhalten die in Form eine Tabelle abgebildet werden sollen. Solche Tabellen eignen sich nicht gut für die Darstellung auf einem kleinen Bildschirm und werden recht schnell unübersichtlich.
Ich möchte euch in diesem Beitrag verschiedene Lösungsansätze für Tabellen im Responsive Design vorstellen und die jeweiligen Vor- und Nachteile aufzeigen.

Beitrag zu Ende lesen

Responsify.it – Responsive Grid Template

responsify-logo-icon

Mit dem Online-Tool Responsify.it könnt ihr ein umfangreiches Template als Grundlage für eine responsive Website erstellen. Über die Eingabemaske lassen sich verschiedene Breakpoints sowie die Anzahl der Spalten und der Abstand zwischen den Spalten einstellen. Die Wahl zwischen einem prozent- und einem pixelbasierten Raster habt ihr allerdings nicht, das Raster basiert immer auf flexiblen Spalten (was ja auch die schönere Variante ist).

Beitrag zu Ende lesen

Websites und Bilder für High-Resolution-Displays (Retina, HiDPI) optimieren

Kulturbanause App-Icon Retina

Displays mit hoher Pixeldichte, wie das Retina-Display von Apple, sind zunehmend verbreitet. Web- und App-Designer müssen sich auf diese Technologie einstellen und Quellcode, Layoutgrafiken und Inhalte optimieren. Welche Probleme das Retina-Display hervorruft und welche Lösungsansätze es gibt möchte ich in diesem Beitrag zusammenfassen.

Beitrag zu Ende lesen

Gridpak – Responsive Grid Generator

gridpak-responsive-grid-generator

Mit Gridpak wurde ein neues, sehr hilfreiches Tool zur Erstellung von flexiblen Gestaltungsrastern veröffentlicht. Gridpak bietet im Gegensatz zu anderen Tools dieser Art keine vordefinierten Raster sondern unterstützt Webdesigner dabei eigene flexible Gestaltungsgrundlagen zu erstellen.
Neben der Gesamtbreite des Rasters, der Anzahl an Spalten, sowie dem Innen- Außenabstand könnt ihr mit Gridpak individuelle Breakpoints festlegen. Diese Breakpoints werden anschließend über CSS3 Media Queries angesprochen.

Beitrag zu Ende lesen

Browser-Statistik + Multi-Screen-Raster: 978 Grid System

grid-system-978-responsive

Hilfsmittel für Responsive- bzw. Multi-Screen-Design schießen ja im Moment wie Pilze aus dem Boden. Ich zeigt euch hier so viele davon weil ich der Meinung bin, dass man nur dann das beste Tool finden kann wenn man auch eine Auswahl hat. Und abgesehen davon sind die Vorlieben und Anforderungen sehr individuell und man muss ganz einfach schauen welches Tool einem persönlich den Workflow am ehesten erleichtert.
Das 978 Grid System bietet ein flexibles Raster mit fünf vordefinierten Breakpoints. Mindestens genauso interessant sind jedoch die Browser-Statistiken die das Entwicklerteam als Grundlage für die sechs Breakpoint zu Rate gezogen hat.

Beitrag zu Ende lesen