Hallo zusammen, diese Woche möchte ich euch den „Google Web Designer“ vorstellen! Bevor ihr nun an Programme wie Frontpage oder Dreamweaver denkt… Keine Sorge, es handelt sich hier nicht um einen „Homepage Baukasten“ 😉 Viel eher geht es um ein Programm, welches uns bei der Erstellung animierter Banner und Werbung hilft. Natürlich komplett auf Basis von HTML5, CSS und Javascript!

Google Web Designer? Mehr Informationen, bitte!

Der Google „Web Designer“ ist vor kurzem erst in der Beta-Version erschienen und bringt eine ähnliche Oberfläche mit wie z.B. „Adobe Flash Professional“ und weitere Programme, bei denen animiert wird.
Unter anderem gibt es Tools zum erstellen und modifizieren von Objekten, eine Zeitleiste und detaillierte Objekt-Informationen mit sämtlichen Eigenschaften des aktiven Objektes.
Über die Tools lassen sich Objekte erstellen und auf allen Achsen drehen und bewegen. Mit Hilfe der Zeitleiste definieren wir wann welche Objekte welche Animationen ausführen… Keine Sorge, das klingt komplizierter als es ist 🙂

Wie genau funktioniert die Zeitleiste?

Wer ein mal mit einem Animationsprogramm gearbeitet hat, kann sich ungefähr vorstellen wie es funktioniert: Auf der Zeitleiste werden sogenannte „Keyframes“ erstellt. Anschließend definiert man pro Keyframe eine Stufe der Animation – Dadurch haben wir festgelegt, zu welchem Zeitpunkt welche Animation ausgeführt wird.

Was lässt sich animieren?

Im Grunde steht uns die komplette Palette an CSS Eigenschaften zur Verfügung… Vor allem aber die CSS3 Features sind interessant: Objekte können auf allen drei Achsen bewegt und gedreht werden! Google verspricht dabei, dass das Ergebnis auf allen Geräten funktioniert – inklusive verschiedener Bildschirmauflösungen (Responsive!).

Wie schaut der generierte Code aus?

Zugegeben, der generierte Code ist ein ziemlicher Haufen CSS und Javascript… Während die CSS Regeln noch relativ nachvollziehbar sind, dürfte es beim Javascript schwer fallen… Es ist ein (auf den ersten Blick) wilder Mix aus JSON Konfigurationen, einer internen API und komprimiertem Code.
An dieser Stelle müssen wir dem Programm vertrauen 😉

Was kann man sonst noch anstellen?

„Nur“ animieren wäre etwas langweilig, vor allem für Google. Daher können die verschiedenen erstellten Elemente auf diverse Events reagieren… Wie z.B. das laden der Seite, berührung (bzw. Klick), ändern der Ausrichtung (Bei Smartphones und Tablets), „schütteln“ usw. Allerdings beschränken sich die Ereignisse dabei auf Weiterleitungen und das erreichen von Google Analytics Zielen / Messwerten.
Für den Desktop scheint außerdem nur wenig dabei zu sein… Vielleicht fährt Google hier eine ähnliche Strategie wie Bootstrap: „Mobile first“.

„Web Designer“ ohne wirkliches Web Design?

Bei näherer Betrachtung stellt sich dieser Punkt als „vielleicht doch nicht so wahr“ heraus… Immerhin kann man in Googles Web Designer eigenen (HTML-, Javascript- und CSS-) Code schreiben und mit Hilfe der „Designansicht“ die HTML Elemente positionieren… Doch wenn ich das richtig erkenne geschieht diese Positionierung stets „absolut“ und dürfte sich somit streng genommen nicht eignen.
Ich fürchte dieses Thema ist etwas schwierig – Es kommt dabei immer auf die Person an, die mit der Software arbeitet.

Lasst uns nicht vergessen: Es handelt um eine Beta-Version… Wer weiß, was noch kommt?

Bedienung?

Die grundlegende Bedienung ist recht einfach gehalten und erinnert dabei an Programme wie Photoshop oder eben Flash. Viele Elemente lassen sich intuitiv erstellen, bearbeiten und animieren.

Doch die Software gibt mir persönlich noch ein paar Rätsel auf – So kann ich (scheinbar) nicht auf alle Elemente Events anwenden… Oder zumindest nicht, wenn ich beim erstellen eines neuen Dokuments keine Vorlage (Banner, Expandable, Interstitial) ausgewählt habe.
Außerdem gibt es einige eingebaute „Komponenten“ wie z.B. verschiedene Galerien („360° Galerie“, „Karussel-Galerie“, …), eine (Google Maps?) „Karte“ oder ein „Video“ / „Youtube Video“ – doch ich konnte keine dieser Komponenten sinnvoll zum laufen bringen. Vielleicht dienen diese als „Mockup“ (bzw. „Platzhalter“)…?

Ich schätze ich werde einfach noch etwas Zeit in dieses Tool investieren müssen und vielleicht auf weitere Versionen warten. Bisher konnte ich noch keinen tatsächlichen Mehrwert erkennen (bis auf die einfache Animation von HTML Elementen).

Ich hoffe ich konnte euch mit dem Google Web Designer etwas interessantes neues zeigen und kann euch auch nächste Woche wieder hier begrüßen! Bis dahin wünsche ich euch eine angenehme Herbst-Woche und natürlich Happy Coding!