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.

Wir haben zunächst das inhaltliche Konzept an den Anfang gestellt, erst danach kommt die Grafik an die Reihe. Der Abstimmungsprozess mit den Kunden ist dadurch einfacher geworden. Wir müssen nicht mehr so viel über Geschmacksfragen diskutieren und können gestalterische Entscheidungen an den Inhalten festmachen. Wir haben dadurch eine bessere Gesprächsbasis mit den Kunden und können uns besser verständlich machen.

Weiterlesen →

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. Denn damit die Icons auf den neuen, hochauflösenden Displays nicht pixelig aussehen, sollte man solche Bilder in höherer Auflösung hinterlegen.
Ein Icon, das auf einer Fläche von 32×32 Pixel dargestellt wird, muss also doppelt so groß sein (64x64Pixel) um auf einem Retina-Bildschirm noch scharf auszusehen. Damit steigt die Datenlast, denn die Dateien sind auf einmal gar nicht mehr so klein.
Weiterlesen →

Responsive Images: Ladezeit sparen mit Vektorgrafiken (SVG)

Webseiten im Responsive Design haben einen schlechten Ruf, wenn es um die Performance geht. Nicht ganz zu unrecht, viele Seiten sind sehr datenlastig. Das liegt in der Regel an den Bilddaten, die auch auf hochauflösenden Displays gut aussehen sollen.

Es gibt vier einfache, aber sehr wirkungsvolle Methoden, Bilddaten schlank zu halten. Die Stichwörter dazu sind eine gute Bildkompression, CSS3-Effekte*, Iconfonts und das SVG-Grafikformat. SVG ist die Abkürzung für „Scalable Vector Graphics“.
[* Ein Artikel dazu erscheint demnächst]

Weiterlesen →

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 unbedingt verdient hat, aus der Mottenkiste geholt zu werden.

Bei Webseiten, die für möglichst viele Geräte und unterschiedliche Nutzungsszenarios funktionieren sollen, ist die Performance ein entscheidender Faktor. Eine Seite, die nur schleppend oder gar nicht lädt, macht den Besuchern keinen Spaß. Auch Suchmaschinen mögen lange Ladezeiten nicht. Gute Performance ist also ein essentieller Faktor für der Erfolg einer Seite. Weiterlesen →

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 verbreitet, auch wir schreiben das so in unsere Themes. Aber genau genommen ist das ein Workaround: Nur wenn width=device-with dasteht, können Android-Geräte die Anweisung device-width überhaupt verstehen. Aber diese Methode hat auch ihre Nachteile. Weiterlesen →

Responsive Design: CSS für den Internet-Explorer 7 und 8

Zurzeit teste ich ein neues WordPress-Theme mit einem Responsive Design in verschiedenen Browsern. Bei diesem Theme arbeite ich mit HTML5, CSS3 und Media Queries. Moderne Browser können diese Angaben lesen, ältere IE-Versionen aber haben damit Probleme. IE7 und IE8 können weder HTML5-Syntax noch Media Queries interpretieren.

Nun kann man darüber streiten, ob man diese betagten Browser überhaupt noch berücksichtigen muss. Der Anteil des IE7 ist inzwischen verschwindend klein, auch der IE8 ist auf dem Rückzug. Da Windows zusammen mit System-Updates automatisch und ungefragt den Browser aktualisiert, dürfte es nicht mehr viele User geben, die mit dem IE8 oder gar dem IE7 unterwegs sind.

Aber immerhin, es gibt sie. Und je nach Thema und Inhalt der Website kann es wichtig sein, alle mitzunehmen. Auch diejenigen, die mit älteren Rechnern im Web surfen.

Weiterlesen →

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? In der Regel orientieren man sich dabei an den Geräten, auf denen die Website dargestellt werden soll. Die Bildschirme von Smartphones und Tablets sind soundso breit, also nehmen wir diese Werte als Breakpoints. 

Aber welche Geräte von welchen Herstellern wählen wir dafür aus? Nach welchen Kriterien gehen wir vor? Und was passiert, wenn neue Geräte auf den Markt kommen? Schreiben wir dann wieder neue Breakpoints ins Stylesheet?
In diesem Artikel möchte ich alte und neue Methoden betrachten, mit denen man die „richtigen“ Breakpoints für ein Responsive Web Design zu finden. Weiterlesen →

„Mobile First“ – Responsive Design von unten

Normalerweise geht der Weg andersherum: An die fertige Website wird eine mobile Version „angedockt“. Rein technisch ist das machbar und in vielen Fällen auch die einzig gangbare Lösung – wenn eine Website nur angepasst werden soll und kein komplettes Redesign bekommen soll.

Wenn aber tatsächlich ein Relaunch geplant ist und man die Chance hat, ganz von vorn anzufangen, ist die „Mobile-First“-Methode der richtige Weg.
Weiterlesen →