Drücke die Tasten ◄ ► für weitere Artikel  

Webflow: Intuitives Online-Tool für Responsive Webdesign beendet Closed Beta

Responsive Webdesign, das sich automatisch der Displaygröße anpasst, ist heute Standard – doch der Programmieraufwand dahinter ist hoch, die Struktur responsiver Seiten komplex. Mit Webflow hat jetzt eine Online-Plattform die Closed Beta beendet, die vieles leichter machen will. An Bord hat der Service Werkzeuge und Hilfsmittel für HTML5 und CSS3 sowie einen hervorragenden WYSIWYG-Editor.

Webflow: Intuitives Online-Tool für Responsive Webdesign beendet Closed Beta
Responsive Webdesign mit WYSIWYG-Editor: Die Demo von Webflow ist bereits online.

Ein bisschen erinnere Webflow (Derzeit funktioniert das Tool nur mit Google Chrome und Chrome Canary zuverlässig, doch auch mit Safari oder Firefox lassen sich etliche Funktionen ausprobieren.) an Adobe Edge, schreibt Jolie O'Dell von VentureBeat. Kein schlechter Vergleich. Der „Playground“, wie die Programmierer ihr Tool getauft haben, bietet neben dem eigentlichen Arbeitsbereich zwei Sidebars. Mit der linken kann der Nutzer zwischen verschiedenen Ansichten hin- und herschalten (Desktop- Tablet- und Phone-Ansicht), auf der rechten bietet Webflow etliche Werkzeuge zur Gestaltung von Webseiten. Durch die Fülle an CSS3-Klassen kann man entweder mit Hilfe einer grafisch angelegten Übersicht oder mit der Listenansicht navigieren. War das Hinzufügen eigener Klassen in der Demo-Version noch deaktiviert, biete Workflow diese Funktion jetzt in der finalen Version.

Responsive Webdesign per Drag & Drop

Wer dabei irgendwann den Überblick verliert, dem bietet Webflow den sogenannten „X-Ray-Mode“. In dem blendet das Tool alle Farben aus und reduziert das Design auf das Nötigste. Ein tolles Feature gegen die eigenen Betriebsblindheit. Wirklich oft brauchen werden Nutzer diese Funktion jedoch nicht, so aufgeräumt und intuitiv wie Webflow daher kommt. Per Drag & Drop lassen sich Elemente verschieben, mit Hilfe der Regler in der rechten Sidebar können Elemente vergrößert, Abstände verändert, Schriftarten zugewiesen oder Farben ausgewählt werden – und vieles mehr. Ein Toggle schaltet darüber hinaus wahlweise das zugrunde liegende Grid ein und aus, ein Vorschau-Modus zeigt dem Nutzer, wie sein Projekt aktuell aussieht.

Responsive Webdesign – mit einem Klick zum fertigen Projekt

Einen Überblick über alle Features, die Webflow an Bord haben soll, haben die Entwickler auf ihrer Seite zusammengestellt. Eines davon ist der Export der fertigen Daten: Ist ein Projekt abgeschlossen, genügt ein Klick und Webflow spuckt alle nötigen HTML5- und CSS3-Dateien aus. Und auch andersherum soll Webflow funktionieren, eine Import-Funktion für existierende Seiten sei in Planung, ließen die Köpfe hinter Webflow, Vlad und Sergie Magdalin, kürzlich über Twitter verlauten.

Wer sich vor dem Ausprobieren erst einmal mit Webflow vertraut machen will, für den gibt es etliche Tutorials, die die grundlegenden Funktionen erklären:

Weiterführende Links zum Thema „Responsive Webdesign“

209 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
9 Antworten
  1. von Karsten am 24.03.2013 (11:41Uhr)

    Eine Info über die Verwendung dieses Tools im Zusammenhang mit CMS-Systemen wie z.B. Drupal, WordPress wäre interessant.

  2. von Codio: Schicke Cloud-IDE für Webentwick… am 05.04.2013 (11:29Uhr)

    [...] Webflow: Intuitives Online-Tool für Responsive Webdesign – t3n News [...]

  3. von 6 Druckvorlagen zum Entwerfen von Respon… am 12.04.2013 (09:46Uhr)

    [...] Webflow: Intuitives Online-Tool für Responsive Webdesign – t3n News [...]

  4. von Von Webdesignern für Webdesigner: 7 Job… am 15.04.2013 (14:57Uhr)

    [...] Webflow: Intuitives Online-Tool für Responsive Webdesign – t3n News [...]

  5. von Wordpress Test – FROONT – Re… am 17.05.2013 (09:19Uhr)

    [...] Webflow: Intuitives Online-Tool für Responsive Webdesign [...]

  6. von MarkusGerke am 20.05.2013 (22:59Uhr)

    Kennt jemand eine Illustrator- und Photoshop-Alternative, die ähnlich wie webflow online funktioniert? Außer pixlr ...

  7. von Philipp am 06.08.2013 (10:28Uhr)

    @ MarkusGerke:

    Macaw startet bald in die Beta, wird ne APP und nicht online sein, scheint aber viel mehr wie Photoshop zu funkitionieren.


    Webflow macht leider keinen so guten Eindruck wie Macaw. Man ist auf 960px Designs beschränkt und muss wirklich jedem Element, dass eine andere Gestaltung als die Standard-Styles bekommen soll einen Klassennamen verpassen, was ich sehr nervig fand.

  8. von DearNon am 21.01.2014 (11:39Uhr)

    also teuer ist das ja. nur eine website und dann ohne html export für $14.00/month

    ach du scheiße!

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch.. ... » weiterlesen

SVGMagic: Automatischer SVG-Fallback für deine Webseite
SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ... » weiterlesen

Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander
Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander

Duo ist ein Browser, der dabei helfen soll, Responsive Webdesign zu testen. Dazu stellt er eine mobile Ansicht neben einer Desktop- oder Tablet-Ansicht dar. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen