kulturbanause Blog

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

Media Queries


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

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

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