Mobile Webseiten leicht gemacht: Responsive Webdesign Tools
2014-09-03 11:32 (Kommentare: 0)
Drei Webdesign Tools, die erlauben per WYSIWYG-Editor professionelle responsive Webseiten zu erstellen. Der nötige Code, um eine Webseite responsive zu machen, ist kompliziert. Ohne Kenntnisse von Java-Script und CSS kommen Designer meist nicht weit. Erleichtert wird die Arbeit durch Frameworks wie Bootstrap – doch es geht noch einfacher: Moderne Responsive Webdesign Tools ermöglichen es, via WYSIWYG-Editor die flexiblen mobilen Webseiten zu erstellen.
Das Ziel: Ohne viel Coding-Handarbeit zur Website
Das Erstellen des nötigen Codes für eine responsive Website fordert einem Webdesigner auf dem klassischen Weg umfangreiches Know-how in HTML, CSS und JavaScript ab. Das treibt die Kosten und den Zeitaufwand für die Erstellung nach oben. Durch Einsatz von Frameworks kann der Aufwand gesenkt werden. Diese unterstützen Entwickler beim Bau robuster Seiten mit vergleichsweise geringem Aufwand.
Doch ohne Einarbeitung und weitgehendes Verständnis für den Code ist auch mittels Frameworks keine Webseitenerstellung denkbar. Einen Schritt weiter geht die neue Generation der Tools, die es erlaubt, mittels WYSIWYG-Editor zu arbeiten. Neben dem bekannten Adobe Edge Reflow Editor gibt es auch web-basierende Lösungen wie Webflow und Froont.
Adobe Edge Reflow CC
Adobe Edge Reflow CC ist Teil der Adobe Creative Cloud. Wer diese nutzen will, zahlt in der Regel monatlich einen Obolus. Hohe einmalige Kosten verursacht das Tool nicht. Eine Installation der Software auf dem Rechner ist jedoch notwendig.
Die Integration von Photoshop CC ist gut, Text, Shapes und Assets können in Photoshop-Dokumenten erstellt und in Reflow weiterverwendet werden. Wer sich gut mit den Adobe Tools Photoshop und InDesign auskennt, wird sich in Reflow schnell zurechtfinden. Es ähnelt den Programmen in der Bedienung. Was so manchem gefallen wird: Bei Reflow lassen sich Elemente zeichnen - im Gegensatz zu vielen anderen Tools werden diese nicht per Drag and Drop hinzugefügt.
Eine weitere Stärke von Reflow ist die Integration von Breakpoints. Diese lassen sich per Klick hinzufügen. Und bei dem responsive Layout steht die komplette Bandbreite zur Verfügung und ist nicht auf drei Device-Größen für Smartphone, Tablet und PC beschränkt. Ein Manko bleibt jedoch auch bei Adobe die Integration von Formularen und die Erstellung von CMS-Templates. In beiden Fällen ist Handarbeit gefragt.
Link: creative.adobe.com/products/reflow
Webflow
Die Kosten bei Webflow hängen vom gewählten Plan ab. Neben einer stark eingeschränkten kostenlosen Einsteigerversion gibt es in unterschiedlichen Preis- und Leistungsklassen Angebote. Bis hin zum Team-Plan für das Erstellen von Webseiten in der Gruppe. Auch das ist praktisch: Webflow läuft browserbasierend. Softwaredownload und Installation entfallen so.
Das vergleichsweise junge Webflow richtet sich an erfahrene Designer, die Know-how für HTML und CSS mitbringen. Einsteiger, die einen simplen WYSIWYG-Editor für responsive Webseiten suchen, dürften bei mancher Option verwirrt oder überfordert sein. Kenner von Bootstrap 3.0 haben einen Vorteil: Das Webtool basiert darauf.
Der Designer arbeitet bei Webflow via Drag and Drop mit Blöcken. Das erlaubt nicht so filigrane Designs wie ein Grafikprogramm, doch die Arbeit ist effizient und das Ergebnis gut. Dank Code-Editor und Embed-Widget lassen sich eigener Code oder zusätzliche Custom Elemente leicht einfügen. Die Integration von Webflow-Designs in ein CMS ist ähnlich problematisch wie beim Adobe-Tool.
Link: webflow.com
Froont
Froont hat sich in einigen Kreisen einen Namen als Alternative zu Adobe Reflow gemacht. Die Preise und Pläne fangen bei einer kostenlosen Version an und gehen hoch bis zum Agentur-Account. Dieser verfügt über Vorzüge wie eine unlimitierte Anzahl an privaten oder öffentlichen Projekten. Enterprise-Angebote für Teams und ein Academic Plan für Studenten und Lehre runden das Angebot von Froont ab. Dank In-Browser-Konzept ist genauso wie bei Webflow eine Installation der Software auf dem eigenen Laptop nicht nötig.
Die Arbeit mit Froot basiert auf Drag and Drop. Per Widget lassen sich eigene Bilder, HTML-Code und Elemente wie Social-Share-Buttons unkompliziert einbinden. Zahlreiche Video-Tutorials helfen Einsteigern und Fortgeschrittenen beim Erstellen von Webseiten. Das Einfügen von CSS Code aus Photoshop ist ebenso möglich wie das Einbinden von Google-Fonts. Auf Kenntnisse in CSS, JavaScript und HTML kann für einfache Designs verzichtet werden.
Besonders ist bei Froont der Community-Gedanke. Neben privaten Projekten gibt es auch öffentliche. Das sind Projekte, die geteilt werden. Diese kann jeder aufgreifen und nutzen oder weiterentwickeln. Manko bei Foont ist ebenfalls die von Hause aus fehlende Integration in externe CMS.
Link: froont.com