Vor einigen Tagen stellten wir mit Style Tiles einen Ansatz für das Rapid Prototyping von Websites vor, der auf Adobes Photoshop basiert. Ich setze in den meisten Fällen jedoch gerade für das schnelle Entwurfsdesign Adobe Fireworks ein. Der Workflow liegt mir irgendwie näher, was sicherlich zum Teil damit zu begründen ist, dass ich die Software seit mittlerweile 12 Jahren, früher noch unter Macromedia-Flagge, im Einsatz habe. Natürlich lassen sich mit Fireworks ohnehin responsive Designprototypen entwickeln. Matt Stow hat nun jedoch eine Extension vorgestellt, mit der responsives Prototyping deutlich vereinfacht wird.
Export Responsive Prototype: Grundsätzliches
Export Responsive Prototype v0.2.7 WIP, mit diesem sperrigen Namen versah Stow seine Extension, liegt in einer sehr frühen Beta vor. Es kommt im Einsatz unter Mac OS gelegentlich zu Abstürzen, wobei diese so heftig sind, dass Fireworks komplett geschlossen wird. Es empfiehlt sich also, will man Stows Extension testen, häufig manuell den Arbeitsfortschritt zu speichern. Windows-User sollen das Problem laut Stow nicht haben. Export Responsive Prototype setzt Fireworks ab der Version 9 voraus. Wenn ich richtig gezählt habe, entspricht das der Version CS3. Die Installation muss manuell erfolgen, die Extension ist noch nicht über Fireworks Exchange erreichbar. Derzeit ist die Extension kostenlos zu haben. Vermutlich wird das so bleiben, zumindest deutet Stow nichts anderes an.
Nach der Installation verfügt man im Fireworks-Menü Befehle über einen Punkt Prototype, der wiederum den Unterpunkt Export Responsive Prototype beinhaltet.
Export Responsive Prototype im Einsatz
Für den Einstieg empfiehlt es sich, Stows Beispieldatei ebenfalls herunter zu laden, um die Funktionsweise des Scripts besser verstehen zu können. Das Funktionsprinzip ist einfach. Innerhalb der Fireworks-PNG werden für jedes Zieldevice eigene Seiten angelegt, auf denen das jeweilige spezifische Design erfolgt. Anhand der Unterteilung in Seiten nimmt die Extension die Erstellung der Mediaqueries vor. Für die Beispieldatei sieht das so aus:
Jede Zielplattform erhält ihre eigene Seite in Fireworks
Stow hinterlegte hier drei Ziel-Designs, eines für den Desktopbrowser, eines für ein Tablet und eines für Smartphones. Jetzt wird mit den Standardwerkzeugen gearbeitet. Bereiche, die nicht von einem Segment (Slice) oder von einem Segment ohne Ziel-Definition im untenstehenden Eigenschaften-Dialog erfasst sind, werden mit Breiten in Prozentangabe versehen. Das Verhalten der anderen Segmente lässt sich über die Vergabe verschiedener Werte im jeweiligen Eigenschaften-Dialog zum Segment steuern.
Das folgende Beispiel zeigt, dass der Logo-Header von einem Segment erfasst wird, dem in den Eigenschaften der Wert „center“ zugewiesen ist. Der Erfolg dieser Maßnahme lässt sich leicht erahnen. Das so definierte Segment wird auf allen Zielplattformen zentriert dargestellt. Zu jeweils korrespondierenden Ergebnissen führt die Verwendung der Werte „left“, „right“ oder „fixed“, wobei sich „fixed“ nicht auf die Position des Segments, sondern seine Größe bezieht. Segmente mit der Definition „fixed“ werden nicht in prozentualer Größe, sondern in absoluten Pixeln dargestellt.
Das Logo-Segment ganz oben wurde als „center“ definiert.
Ist das gesamte Design segmentiert und definiert, wählt man aus dem Befehle-Menü Prototype > Export responsive prototype. Das Script liefert nun, wie man es von Fireworks kennt, eine funktionierende HTML-Seite mit eingebundenen Segmentgrafiken, wobei Stows Extension zusätzlich die erforderlichen Mediaqueries und das zugehörige CSS erstellt.
Stow erläutert das Prinzip im folgenden Video zwar recht einschläfernd, aber doch verständlich:
[youtube]http://www.youtube.com/watch?v=Y3RO0SKPpJ8[/youtube]
