kulturbanause Blog

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

Responsive Webdesign


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

Responsive Webdesign mit Adobe Edge Reflow CC + Tutorial

Responsive Webdesign stellt Designer vor eine Herausforderung: es müssen flexible Layouts auf Basis von Prozentwerten gestaltet werden, obwohl innerhalb der Grafikprogramme Pixelwerte verwendet werden. Designer müssen daher während der gesamten Gestaltungsphase im Hinterkopf haben, dass alle Spalten des Designs später in der Breite variabel sind. Der klassische Workflow stößt hier an seine Grenzen, da es wenig Sinn macht, zunächst unzählige statische Layouts zu entwerfen und diese anschließend in eine flexible Website umzuwandeln. Aus diesem Grund wird direkt zu Beginn des Projektes ein sog. interaktiver Prototyp erstellt, der die gesamte Flexibilität abbilden kann. Anschließend wird die Gestaltung der Website und die technische Umsetzung mit HTML, CSS und JavaScript parallel vorangetrieben. Edge Reflow CC bildet den Workflow im Responsive Webdesign ab und arbeitet eng mit Photoshop CC zusammen.

Beitrag zu Ende lesen

Flexible Ribbons mit CSS

Ribbons sind im Web ein sehr beliebtes Gestaltungselement und die Umsetzung mit CSS hat einige Vorteile. Einerseits eignet sich die CSS-Grafik für den Einsatz auf hochauflösenden Displays (HiDPI, Retina), andererseits kann dem Ribbon eine flexible Breite in Prozent zugewiesen werden. Das Zielelement kann somit im Responsive Webdesign verwendet werden und passt sich flexibel der Displaybreite an.

Beitrag zu Ende lesen

Adaptive Website vs. Responsive 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 »responsive« und »adaptive« ist, welche Missverständnisse es in diesem Zusammenhang gibt und welche welche Vor- und Nachteile die Varianten haben.

Beitrag zu Ende lesen

Die Layout-Typen einer Website: Fixed, Fluid & Elastic

Bei der Konzeption einer Website müsst ihr entscheiden, wie sich das Layout im Browser verhalten soll. Soll die Website immer gleich breit sein? Sollen sich die Elemente der Breite des Browserfensters anpassen? Soll sich das Layout gar proportional verkleinern? In diesem Artikel erfahrt ihr welche Vor- und Nachteile die verschiedenen Layout-Typen haben und welche Auswirkungen eure Entscheidung auf die mobile Variante einer Website hat.

Beitrag zu Ende lesen