Webdesign für Mobilgeräte
Web auf Achse

Neue Werkzeuge

Webdesign für Mobilgeräte

Gestaltung für mobile Endgeräte gehört bekanntermaßen zu den problematischeren Aufgaben im Leben eines Webdesigners. Einer der Gründe ist die nach wie vor magere Auswahl an Tools, die der Unmenge an potenziellen Standards recht hilflos gegenüberstehen. Dies möchte Adobe mit der neuen Creative Suite ändern. Bei der Versionsnummer setzt Adobe im Gegensatz zum Konkurrenten Macromedia auf Nummern statt auf Jahreszahlen. Die neue Suite ist dementsprechend Nummer 2 oder kurz CS 2. Die einzelnen Programme schmücken sich ebenfalls mit diesem Kürzel. Für diesen Workshop liegt Internet Professionell eine Beta-Version vor. Sie ist komplett in Englisch gehalten, vermittelt aber schon einen ersten Eindruck von der Funktionalität.

Die Ankündigungen zur Creative Suite versprechen verbesserte SVG-Unterstützung in Illustrator und Golive. Dazu kommen WML, XHTML Mobile Profile und einige andere Standards. Auch das Erstellen von MMS wird per Smil-Editor und MMS-Optimizer einfacher. Dementsprechend ist das Ziel dieses Workshops, ein einfaches, aber durchgängiges Design für verschiedene mobile Endgeräte und Anwendungen zu schaffen. Thema ist ein fiktives Portal rund um die thailändische Küche.

Standards und Displays

Webdesign für Mobilgeräte

Bevor Sie sich aber ins Abenteuer stürzen, einige Worte zu den Problemen im mobilen Bereich. Die Liste der von der Creative Suite unterstützten mobilen Standards ist schon beeindruckend lang. Das zeigt aber auch, wie heterogen und zerklüftet die mobile Welt aktuell ist. Fast jedes mobile Endgerät hat andere Bildschirmmaße. Die Auflösungen variieren von 96 Pixel auf dem Handy bis hin zu 300 Pixel bei einem Smartphone oder PDA. Auch bei Schwarz-Weiß oder Farbe gibt es große Unterschiede.

Dazu kommt die Menge der Beschreibungssprachen und Techniken für mobile Browser. Wo HTML und XHTML auf dem Desktop vor sich hin werkeln, kann das Handy auf WML, XHTML Basic oder Mobile Profile oder gar auf eigene Dialekte wie cHTML (compact HTML) setzen. WML unterscheidet sich dabei deutlich von den HTML-Varianten: Eine WML-Seite besteht aus einem Deck, das einzelne Cards enthält. Cards entsprechen dabei den Handy-Seiten. WML kommt hauptsächlich bei Handys zum Einsatz. PDAs und Smartphones beherrschen meist HTML-Versionen und unter Umständen auch mobiles ? also abgespecktes ? CSS. Manche Anbieter wie E-Plus mit I-Mode setzen auch auf nicht standardisierte Varianten wie cHTML.

Glücklicherweise muss sich der Designer nicht darum kümmern, welches mobile Endgerät welche Sprache zu sehen bekommt. Dies erledigt der Programmierer mit vielen Mühen serverseitig, indem er die unterstützten Mime-Typen aus dem HTTP-Header des mobilen Browsers klaubt. Auch die Übertragung von Logos und Ähnlichem per WAP-Push oder HTTP-Push soll nicht Thema dieses Artikels sein.

Im Handy: Animationen

Webdesign für Mobilgeräte

Soll es ein wenig bewegter werden, verringern sich die Probleme nicht. Handy-Spiele entstehen meist in Java. Im Web führt hier Flash. Diese Position möchte Macromedia auch auf mobilen Endgeräten erreichen und hält mit Flash Lite dagegen (www.macromedia.com/software/flashlite). In diesem Spiel ist allerdings auch noch SVG (Scalable Vector Graphics) dabei. Diese Technik, die auf dem Desktop eher ein Nischendasein fristet, kann auf mobilen Endgeräten punkten, da sie herstellerunabhängig ist. SVG bietet zwei mobile Varianten: Tiny und Basic. Beide sind abgespeckte Versionen des SVG-Standards, aber beide sind auch vollständig als Profil standardisiert (www.w3.org/Graphics/SVG). Die Unterschiede finden Sie im Kasten »SVG-Vielfalt« auf der folgenden Seite erläutert. Im Moment nimmt vor allem die Unterstützung von SVG Tiny (Version 1.1) zu. Opera hat zum Beispiel Tiny-Unterstützung in seinen Webbrowser integriert.

Für SVG Tiny hat sich Adobe mit der Animationsschmiede Ikivo zusammengetan (www.ikivo.com/press/news_archive/Adobe.html). Ikivo liefert mit seinem Animator die fehlende Funktionalität zur Creative Suite, denn Illustrator unterstützt zwar die Erstellung von SVG und Golive ist für die Interaktivität und das Scripting zuständig, aber Animation beherrscht keines von beiden.

Logos mit Illustrator

Webdesign für Mobilgeräte

Wenn es um mobiles Design geht, ist meist Illustrator die erste Anlaufstelle. Für diesen Workshop entstehen hier Logo und Schriftzug. Für das Logo kommt eine ausgesprochen praktische neue Funktionalität zum Einsatz, nämlich Live Trace. Zugegeben, das Wort live wird im neuen Illustrator etwas inflationär eingesetzt: Neben dem Trace-Werkzeug gibt es auch Live Paint. Beide Werkzeuge sind aber wirklich sehr praktisch. Live Paint unterteilt Zeichnungen in logische Teile, die sich einzeln bearbeiten und füllen lassen. Live Trace dient dazu, Pixelgrafiken in Vektoren umzuwandeln. Hier setzt Illustrator neue Maßstäbe für Vektorgrafikprogramme.

Als Grundlage für das vorliegende Beispiel dient das Foto einer Hibiscus-Blüte (hibiscus.tif auf der Heft-CD). Am schnellsten importieren Sie es per Drag and Drop. Das Bild sollte markiert sein. Dann rufen Sie über Object, Live Trace, Tracing Options das Tracing-Werkzeug auf. Sie können das Tracing hier auch mit Make direkt durchführen, allerdings ist es meist sinnvoll, die Einstellungen zu überprüfen. Das Angenehme ist dabei, dass Sie sich während des Änderns der vielfältigen Einstellungen direkt eine Vorschau anzeigen lassen können.

Die Live-Vorschau ist wirklich eine beachtliche Neuerung. Denn bisher bietet das weder Macromedia Freehand noch Adobe Streamline, das schon ältere Tracing-Programm von Adobe. Natürlich gibt es gerade bei komplexeren Einstellungen eine kleine Wartezeit, aber dennoch wird hier die Arbeit des Designers deutlich beschleunigt.

Bei Outline-Zeichnungen oder Kolorier-Aufgaben hilft dann Live Paint. Damit füllen und färben Sie Bereiche des Bildes sehr schnell. Im vorliegenden Beispiel ist das jedoch nicht nötig. Sie müssen allerdings die Hintergründe rund um die Blume weglöschen, da sie für das Logo nicht notwendig sind. Dies geht übrigens deutlich einfacher als in der Pixelgrafik.

Schriftzug

Webdesign für Mobilgeräte

Nun kommt nur noch ein passender Schriftzug dazu. Bei der Schriftart können Sie sich entweder für eine Standardschrift entscheiden, die auf den Zielsystemen normalerweise vorhanden ist, oder Sie wandeln den Text eines Logos in Pfade um. Dies klappt am einfachsten über das Kontextmenü und den Befehl Create Outlines. Über das Menü Effect können Sie SVG-Filter einsetzen. Diese tauchen dann auch in der Appearance-Palette auf. Allerdings ist hier Vorsicht geboten, wenn Sie den Export für SVG Tiny planen. Gerade durchsichtige Elemente unter einem Schlagschatten sind nur in der von Adobe als SVG Tiny+ angegebenen Variante möglich. Bei Filtern, die in bestimmten Spezifikationen nicht möglich sind, warnt Illustrator. Überhaupt ist der Export von SVG sehr komfortabel. Am schönsten, weil mit Vorschau, klappt es mit dem Befehl Save for Web aus dem File-Menü. Dort können Sie als Dateiformat SVG wählen. Dann haben Sie die Wahl zwischen den verschiedenen Spezifikationen: 1.0 und 1.1 sowie für den mobilen Einsatz SVG Tiny 1.1, 1.1+ und SVG Basic. Die Wahl wird hier meist auf Tiny fallen. Allerdings hängt das davon ab, für welches Endgerät Sie gestalten.

Die Illustrator-Datei mit dem Logo und Schriftzug dient gleichzeitig als Basis für eine Grafikdatei zum Beispiel im GIF-Format, die dann in mobilen XHTML-Seite
n eingesetzt werden kann. Auch hier erzielen Sie mit Save for Web beim Export gute Ergebnisse bei maximaler Kontrolle.

Schneller Wechsel zu Golive

Webdesign für Mobilgeräte

In Golive können Sie das SVG-Dokument öffnen und mit zusätzlicher Interaktivität versehen. Bemerkenswert ist der Javascript-Editor. In Sachen Animation gibt es zwar keine Möglichkeiten, dafür steht Ihnen aber eine Zeitleiste zur Verfügung, um eine Vorschau anzusehen und an beliebigen Stellen der SVG-Animation Interaktivität hinzufügen. Und natürlich können Sie auch die Quellcode-Ansicht verwenden, um das Logo mit handgetippten Befehlen zu bewegen.

Für die anderen Standards erstellen Sie jeweils neue Dokumente. Im zugehörigen Dialogfeld gibt es die eigene Unterabteilung Mobile. Im Bereich Pages offenbaren sich viele Möglichkeiten:

– XHTML Basic ist der mobile Standard gemäß dem W3C.
– XHTML MP steht für XHTML Mobile Profile und folgt einem Standard der Open Mobile Association (OMA).
– WML Deck erzeugt eine WML-Seite, die besonders für Handys nach wie vor häufig zum Einsatz kommt.
– Für I-Modes cHTML-Seiten stehen zwei Arten zur Verfügung.
– Und zu guter Letzt können Sie auch eine MMS erzeugen, die dann beispielsweise über ein MMS-Gateway verschickt wird.

Formatanpassung

Webdesign für Mobilgeräte

Die Grundgestaltung mit Logo und Grafik müssen Sie nun an das jeweilige Format anpassen. Meist erfordert WML zuerst einmal als Grafikformat WBMP. Dieses Format produziert sowohl Illustrator als auch Photoshop. WBMP hat allerdings einen Haken: es ist nur schwarz-weiß. Die Datei thailogo_bw.ai auf der Heft-CD zeigt ein entsprechend angepasstes Design.

Außerdem ist in Golive eine besondere Behandlung der WML-Seiten notwendig, da die Ansicht etwas ungewohnt ist. Die Tags werden dargestellt, und Elemente lassen sich nur in die jeweiligen Tags ziehen. Auch gibt es in der Toolbar keine WML-Befehle. Die Arbeit wird hier also nicht allzu stark erleichtert. Der Designer benötigt auf jeden Fall WML-Kenntnisse.

Auch bei XHTML-Seiten ist es sinnvoll, die Spezifikationen zu kennen. Hier haben Sie aber auf jeden Fall mehr Möglichkeiten. Sie können zum Beispiel eine Hintergrundfarbe verwenden oder auch CSS einsetzen. Die Arbeit erfolgt hier wie gewohnt. Hilfreich ist es beispielsweise, das Browser-Profil für die Ansicht zu ändern. Dies geht über View, Browser Profile. Hier wird unter anderem ein Nokia-XHTML-Browser geboten. Trotz der erweiterten Möglichkeiten sollten Sie sich bei der Gestaltung zurückhalten. Das Logo ist zentrales Element, dazu kommen Text und eventuell Links. Das Layout sollte fließen. Versuche mit Tabellen scheitern meist an den unterschiedlichen Auflösungen.

Smil und MMS

Webdesign für Mobilgeräte

XHTML-Seiten lassen sich relativ einfach erstellen, da die meisten Webdesigner sowieso an Tags und Bedienung gewohnt sind. Und auch WML lässt sich bewältigen. Anders ist das bei MMS. Wenn Sie in Golive ein neues MMS-Dokument erstellen, benötigen Sie zuerst einmal Apples Quicktime-Player, denn dieser dient dazu, das Vorschau-Handy und den zeitlichen Ablauf der Smil-Animation darzustellen.

Die Ansicht für MMS ist dreigeteilt: Links oben sehen Sie die einzelnen Slides der Smil-Präsentation. Neue fügen Sie mit der Schaltfläche rechts unten hinzu. In den Textfeldern können Sie Text eingeben. Andere Elemente ziehen Sie in das Feld darüber. Um an diese Elemente zu gelangen, müssen Sie in der Toolbox allerdings erst Smil auswählen. Zur Verfügung stehen dann SVG Tiny, Grafiken, Klingeltöne und 3GPP-Videos. Eine weitere Einstellung erfolgt im Textfeld darunter: Sie geben an, wie viele Sekunden ein Slide eingeblendet wird. Hier merkt man, dass Smil auch die Grundlage zu den Animationsfähigkeiten in SVG bildet. Allerdings ist die Animation in Golive nicht allzu gelungen abgebildet. Die Zeitleiste links unten ist etwas hakelig zu bedienen. Dafür gefällt die Vorschau mit Handy auf der rechten Seite gut.

In der Werkzeugleiste können Sie die Handy-Art umstellen. Wenn Sie neue Elemente hinzufügen, wird automatisch ein Ordner erstellt. Mit dem MMS Optimizer haben Sie dann die Möglichkeit, das richtige Format für verschiedene Handy-Typen anzugeben. Sie finden ihn unter Special, MMS, MMS Optimizer. Im unteren Bereich fügen Sie Handy-Typen hinzu, für die Sie optimieren wollen. Im oberen Bereich wählen Sie die MMS, die Sie vorher als Smil-Datei gespeichert haben müssen. Angelegt werden dann verschiedene Ordner für die unterschiedlichen Handy-Typen. Die Verteilung der MMS muss zum Schluss ein MMS-Gateway übernehmen. Hier enden die Möglichkeiten der Creative Suite. Sie beschränkt sich streng nach Adobes Fokus auf die Gestaltung.

Fazit

Webdesign für Mobilgeräte

Designer werden die neuen Möglichkeiten für mobiles Design zu schätzen wissen. Allerdings ist die Funktionalität zum Beispiel für Smil noch hakelig zu bedienen. Bei den anderen Techniken wie SVG Tiny und Basic und Flash hilft die Golive-Suite durchaus, stößt allerdings ebenfalls bald an ihre Grenzen. Bei SVG sind dies vor allem die fehlenden Animationsfähigkeiten. Nur normales Flash wird unterstützt, nicht aber Flash Lite (www.macromedia.com/devnet/devices/flashlite.html). Diese Technik fördert hauptsächlich Macromedia selbst. Ein Grund dafür ist sicher, dass der Kampf rund um die mobilen Endgeräte gerade erst in die heiße Phase geht.

Die Beispiele aus dem Workshop finden Sie auf der Heft-CD und unter www.testticker.de/ipro/listings.