Ein Webdesign für unterschiedlichste Bildschirmauflösungen zu gestalten, kann zeitraubend sein. Adobe verspricht mit Edge Reflow dafür eine Lösung zu entwickeln. Mit seiner frei skalierbaren Montagefläche zeigt das Tool dem Designer live das Verhalten seines Layouts bei veränderter Bildschirmbreite. Durch HTML5- und CSS3-Techniken, insbesondere durch breakpoints, kann das Layout für Desktop und Mobilgeräte angepasst werden. Mittels Verknüpfungen mit anderen Creativ Cloud Tools will Adobe das Erstellen von responsive Websites effizienter gestalten. Ein Plugin für den Export des Layouts aus Photoshop in Edge Reflow wurde kürzlich bereitgestellt. Edge Inspect CC zeigt wie sich das Layout auf den unterschiedlichen Endgeräten verhält. Der Programmiercode soll unkompliziert in Website-Editoren wie Edge Code, Muse oder Dreamweaver übernommen werden können.
Workflow
Wie viele andere haben auch wir getestet, ob Edge Reflow halten kann, was es verspricht und inwiefern sein Potential unseren Workflow unterstützen kann. Durchaus kann es eine Brücke zwischen Gestalter, Entwickler und auch dem Kunden schlagen, was das Verständnis für das Verhalten der Website bei veränderter Bildschirmbreite betrifft. Schon in einem sehr frühen Stadium kann an einem Wireframe-Modell das Website-Konzept auf seine responsiven Eigenschaften geprüft werden. Es sollte dabei aber beachtet werden, dass mit Edge Reflow keine Interaktivität gezeigt werden kann, da ein reines HTML/CSS-Gerüst erzeugt wird. Um zum Beispiel das Verhalten eines Menüs zu simulieren, muss weiterhin auf einen Klick-Dummy zurückgegriffen werden. Für den Gestalter stellt sich die Frage, ob er erst in seinem vertrauten Design-Programm ein Webdesign kreiert und dann zu Edge Reflow wechselt oder - wie der modernere/effizientere Weg sein sollte - zunächst in Edge Reflow den Seitenaufbau festlegt und dann mittels Design-Programm ausgestaltet. Für die weiteren Schritte in Richtung Umsetzung bringt das Tool einige Vorteile, da nun schon ein über die Devices hinweg definierter Seitenaufbau und eine Sammlung der benötigten Grafiken vorliegen. Natürlich hängt es von der individuellen Herangehensweise und der weiteren Optimierung des Programms ab, an welchem Schritt im Arbeitsablauf Edge Reflow zum Einsatz kommt und inwiefern der generierte Code direkt vom Programmierer genutzt werden kann.
Bedienung
Das Tool ist nun seit fast einem Jahr als offene Beta-Version nutzbar, es gab reichlich Feedback und kontinuierlich Updates. Dieser offene Entwicklungsprozess hat Edge Reflow sehr gut getan. Wir haben den Eindruck, dass sehr genau auf die Nutzer gehört wird und neue Webstandards schnell eingepflegt werden. Trotzdem haben wir uns mit reichlich „Kinderkrankheiten“ rumgeärgert. Als Gestalter möchte man den Komfort anderer Tools nicht missen. Eine konsequente Rückgängig-Funktion gehört da genauso dazu, wie eine frei anordenbare Programmoberfläche z.B. auf zwei Monitore. Hilfreich wäre auch eine Bibliothek, die einmal definierte Style-Sets speichert und wiederverwendbar macht. Da das Programm alle Inhalte direkt als HTML-Elemente umsetzt, ist es vergleichsweise umständlich diese wie gewohnt zu selektieren, zu duplizieren oder zu gruppieren. Ärgerlich ist jedoch, dass sich sehr oft und unbemerkt Größen- und Positionswerte der Objekte ändern. Dies liegt vor allem daran, dass Edge Reflow beim Löschen oder Erstellen eines Objekts versucht "intelligent" das Layout anzupassen. Oft ist dies nicht nachvollziehbar und auch nicht gewollt. Bei all den Kritikpunkten soll aber beachtet werden, dass hier noch keine Vollversion vorliegt und sich vieles sicher recht leicht beheben lässt. Für uns spannend wäre zudem noch die weitere Verknüpfung mit Front-End-Frameworks wie Bootstrap und eine ausgereiftere Integration andere Adobe Tools wie Edge Animate.
Fazit
Wir sind davon überzeugt, dass Edge Reflow ein wichtiger Schritt in Richtung effiziente Website-Entwicklung ist. Natürlich hängt der Einsatz auch stark von den Anforderungen des Kunden und der Fähigkeit ab, zunächst nicht in "Screens" sondern in Wireframes denken zu können.
Nutzen Sie auch Edge Reflow? Was sind Ihre Erfahrungen, für welchen Workflow lohnt sich der Einsatz? Wie gut funktioniert die Integration in bestehende Abläufe und Tools?