Design & Prototyping für Responsive Webdesign – Edge Reflow

Durch die Entwicklung von Responsive Websites ergeben sich neue Anforderungen an das Layouten eines Screendesigns. Was bisher bei statischen Seiten mit Photoshop relativ gut möglich war – auch wenn Photoshop nie als Tool zur Erstellung von Webdesigns entwickelt wurde – stösst nun an seine Grenzen, da in Photoshop lediglich rein statische und pixelbasierte Layouts möglich sind.

Um dem Kunden ein fluides, responsives Layout mit verschiedenen Breakpoints/Mediaqueries vorzustellen, müssten also diverse Ansichten einzeln in Photoshop erstellt werden, was einen sehr hohen Arbeitsaufwand bedeutet.

Aus diesem Grunde ist in der letzten Zeit das “Designen im Browser” immer mehr zum Thema geworden. Auch wenn ich mich hiermit noch nicht zu 100% anfreunden kann, so ist es mit heutigen Möglichkeiten in HTML und CSS besser, flexibler und schneller möglich, z.B. Button mit Verläufen und Schatten oder fluide Elemente zu erstellen.

Um viell. nicht den ganz großen Schritt von Photoshop zum Designen im Browser zu machen, ist Adobe dabei, Edge Reflow zu entwickeln, welches die Lücke zwischen diesen beiden Möglichkeiten schliessen soll.

Über Edge Reflow ist es möglich, einzelne Elemente wie Rectangles (div) auf einer Bühne/Stage zu platzieren, diesem Element aber eben keine statischen Pixelwerte sondern % oder aber em-Werte zu verpassen. Dieses hat zur Folge, dass sich das element auf der Bühne fluid verhält.

Der eigentliche Clou ist aber, dass man zudem Breakpoints definieren kann, um dann die Inhalte/Elemente auf seiner Bühne neu zu platzieren.

Leider konnte in der Sneak Preview auf der Create the Web Tour noch nicht sehr viel gezeigt werden, da sich das Tool noch mitten in der Entwicklung befindet, trotzdem bin ich mir sicher, dass Adobe hier eine richtigen Schritt für das zukünftige Layouten und Erstellen von Prototypen von (responsive) Webdesigns geht und eine derzeit offene Lücke schliesst.

Nach Aussagen von Jay von Adobe soll der Code, der am Ende dabei rausfällt, sehr gut sein. Für ein Prototyping wird es wohl allemal reichen, ob das ganze auch für den Liveeinsatz zu gebrauchen ist, wage ich noch zu bezweifeln, lasse mich aber gerne eines besseren belehren.

Auf alle Fälle freue ich mich auf die ersten Testversionen und werde weiter berichten.