Adobe Edge

Adobe Edge

Von am 16.06.2012

Mit Adobe Edge lassen sich einfach Animationen erstellen, ähnlich wie man es mit Flash gewohnt ist, aber in HTML5! Im Gegensatz zu vielen anderen HTML5 Authoring-Tools zielt Edge nicht (nur) darauf ab Flash auf mobilen Geräten zu ersetzen. Mit Adobe Edge kann man Animationen erstellen, die auch in Nicht-WebKit Browsern laufen. Daher kann man mit Edge auch mehr, als nur „Flashbanner“ für mobile Geräte erstellen. Man kann beispielsweise bestehende Webseiten öffnen und editieren!

Außerdem funktioniert Edge mit JavaScript, was es auch einfach macht selbst JavaScript in Edge-Projekte zu integrieren und Funktion hinein zu bringen. Mit Edge lassen sich also nicht nur kleine Animationen, sondern ganze HTML5 Applikationen erstellen, quasi ein HTML5 Pendant zu Flash-Seiten. Ein Vorteil von HTML5 liegt klar auf der Hand: SEO. Reine Flash-Seiten sind auf Google kaum zu finden, da sämtliche Informationen in einem Objekt und für Google unzugänglich versteckt sind. Mit Edge bleiben Texte markier- und editierbar, selbst wenn sie gerade erscheinen oder irgendwo im Kreis fliegen. Und dabei hat man nicht nur Zugriff auf ein paar Systemschriften, sondern kann beliebige Web Fonts einbinden und sofort damit arbeiten.

Weitere nette Features von Adobe Edge sind die einfache Möglichkeit zur Erzeugung von Preloadern und Fallback-Inhalten, ohne selbst etwas programmieren zu müssen. Man kann sich einfach einen fertigen Preloader aussuchen und Screenshots an belieben stellen der Animation machen, weiter bearbeiten und dann als Fallback für ältere Browser einsetzen. Und es gibt die Möglichkeit fertige Projekte zu „exportieren“. Wenn man Edge-Projekte speichert hat man neben dem Edge-File natürlich das HTML und CSS und JS-Files. Hier wird vorrangig Wert auf die Editierbarkeit des erzeugten Codes gelegt, beim Veröffentlichen wird dieser dann stark komprimiert und unleserlich, dafür aber platzsparender. Und außerdem wird die .edge-Datei nicht noch einmal in den Ordner mit den veröffentlichten Inhalten gespeichert, weswegen man diesen Ordner dann einfach 1:1 auf seinen Webserver stellen kann.

Und was sind jetzt sinnvolle Einsatzszenarien für Adobe Edge? Man kann im Prinzip fast alles, was man derzeit mit Flash macht, mit Edge lösen und Inhalte dadurch leichter zugänglich machen. Es gibt allerdings noch Einschränkungen, die es nicht ermöglichen Flash einfach zu ersetzen. Beispielsweise lassen sich die erstellten Animationen nicht einfach beliebig in der Größe skalieren wie mit Flash. Bannerformate wie Sitebars, die sich dynamisch an die verfügbare Fensterhöhe anpassen sind also noch nicht möglich, laut Foreneinträgen aber schon in Planung für spätere Versionen von Flash. Dieses Problem ist aber auch mit anderen HTML5 Tools noch vorhanden und auf jeden Fall kniffliger, als wenn man Beispielsweise ein Bild über die volle Bildschirmbreite einbinden will. Gerade auf mobilen Geräten wäre das ja sehr interessant, weil für die meisten Bannerformate oder generelle HTML5-Inhalte 100% der Bildschirmbreite interessant sind.

Ein Edge Beispiel für eine iPad Präsentation

Derzeit wird im Edge Forum dazu geraten, „viewport“ dafür zu verwenden:
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
Dadurch wird der Bildschirmausschnitt so gewählt, dass der Inhalt 100% der verfügbaren Breite einnimmt.

So habe ich auch eine Edge Beispiel platziert, das als kurze iPad-Präsentation gedacht ist, aber auch am iPhone noch gut zu erkennen ist. Auf Klick bzw Touch erscheint ein Logo, und im nächsten Schritt einige Informationen dazu. Die Files zu diesem Beispiel sind hier im Anhang zu finden: Files Mobilot Fullscreen

The comments are closed.