kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Media Queries


Druckversion und print.css einer Website

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

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

Responsify.it – Responsive Grid Template

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

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

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

Responsinator – mobile Viewports simulieren

Der Responsinator ist ein weiteres Tools zur Simulation von Viewports für responsive Websites. Wie auch bei den meisten anderen Diensten gebt ihr eine URL ein und erhaltet als Ausgabe die Ansicht der verschiedenen mobilen Endgeräte wie iPhone, Android oder Kindle. Innerhalb der Geräte lässt sich die Website zusätzlich scrollen, so dass ihr sowohl den Falz beurteilen, als auch die vollständige Website überprüfen könnt.

Beitrag zu Ende lesen