Responsive Design

Workflow bei Responsive Design Projekten

Seit wir Webseiten im Responsive Design machen, hat sich unser Workflow verändert. Es ist noch gar nicht lange her, da begann jedes Webprojekt mit Photoshop und Fireworks. Inzwischen kommt die Grafik erst viel später ins Spiel und der Browser spielt eine immer größere Rolle.

Weiterlesen
Responsive Design

Klein und scharf: Iconfonts

Webdesigner arbeiten gern mit Symbolen. Eine kleine Lupe im Suchfeld, ein Pfeil, ein Warenkorbsymbol. Jedes dieser Symbole ist ein Bildelement, das entweder per image-Tag oder per CSS (background-image) eingebunden wird.
Diese Bildchen sind in der Regel sehr klein, nur ein paar Kilobyte gross. Dadurch fallen sie beim Laden der Seite kaum ins Gewicht. Naja, bisher war das so.

Weiterlesen
Responsive Design  WordPress

Bilder für Responsive Designs effizient komprimieren

Gestern bin ich auf einen interessanten Artikel auf filamentgroup.com gestoßen, in dem es um das Problem der Bildgrößen im Responsive Design geht. Hier war ausnahmsweise nicht von Javascript- und PHP-Tricks die Rede, mit denen man Bilder in unterschiedlichen Größen ausliefern kann. Im Artikel geht es – ganz altmodisch – um Bildkompression.
Eigentlich ein alter Hut, aber einer, der es verdient hat, aus der Mottenkiste herausgeholt zu werden.

Weiterlesen
Responsive Design

Media Queries: device-width & width – wo ist der Unterschied?

Über Media Queries kann man die Breite des Browserfensters (= width) und die des gesamten Bildschirms (= device-width) abfragen. Wobei in der Praxis meist nicht zwischen diesen beiden Werten unterschieden wird, sie werden in einen Topf geworfen. Dazu trägt man im Viewport-Metatag im head der Seite folgendes ein: meta name=“viewport“ content=“width=device-with“ Diese Anweisung ist weit […]

Weiterlesen
Responsive Design

Neue Ideen zu Breakpoints im Responsive Web Design

Wer sich mit Responsive Web Design beschäftigt landet früher oder später bei der Frage: Mit welchen Breakpoints soll ich arbeiten? Breakpoints definieren die Stellen, an denen sich das Layout einer Website ändert, wenn die Inhalte auf Geräten mit unterschiedlich großen Displays dargestellt werden sollen.

Weiterlesen