Komplettes Buch Webdesign professionell Expertenstrategien und Tipps von Pixelpark, frogdesign und Echopool von Florian Dengler und Holger Volland Galileo Design 240 S., 2000, 4c, 44,90 Euro ISBN 3-934358-56-X

Ein Service von

Galileo Design

Bücher, die Sie auch interessieren werden

Die Buchcover enthalten Weblinks.

und weitere Titel im Programm zu _ Web Usability _ Website-Konzeption _ Webdesign _ Dreamweaver MX – Fireworks MX _ Photoshop 7 _ digital Video

Galileo Design >> www.galileodesign.de

Liebe Leserin, lieber Leser, wir freuen uns, dass Sie sich für ein Buch der Reihe Galileo Design entschieden haben. Galileo Design ist die Reihe für professionelle Screen-, Web- und GrafikDesigner und Experten im Prepress-Bereich. Unsere Bücher zeigen, wie man es macht – strikt aufgabenbezogen und mit Beispielmaterial professioneller Designer erschließen sie die Anwendung aller relevanten Tools und Techniken. Sie vermitteln das technische Know-how, und sie sind Ideengeber und überraschen mit originellen und inspirierenden Lösungen. Wissen teilt sich nicht nur sprachlich, sondern auch visuell mit. Satz und Layout tragen dem Rechnung. Und wo immer es dienlich ist, ist ein Buch vierfarbig gestaltet. Unsere Bücher sind eine Augenschule: indem sie gefallen, setzen sie Kreativität frei. Denn Designer lesen anders. Jedes unserer Bücher will Sie überzeugen. Damit uns das immer wieder neu gelingt, sind wir auf Ihre Rückmeldung angewiesen. Bitte teilen Sie uns Ihre Meinung zu diesem Buch mit. Ihre kritischen und freundlichen Anregungen, Ihre Wünsche und Ideen werden uns weiterhelfen. Wir freuen uns auf den Dialog mit Ihnen. Ihre Ruth Wasserscheid Lektorat Galileo Design Galileo Press Rheinaustraße 134 53225 Bonn [email protected] www.galileodesign.de

.

.

Florian Dengler Holger Volland

Webdesign Professionell Expertenstrategien und Tipps von Pixelpark, frogdesign und Echopool

.

Orientierung Um Ihnen beim Lesen die Orientierung zu erleichtern und ein besonderes Lesevergnügen zu ermöglichen, haben wir für unsere Reihe Galileo Design ein spezielles Layout entwickelt. Durch visuelle Hilfen wurde der Text in Funktionseinheiten gegliedert: Durch das farbige Registersystem ist es Ihnen ein Leichtes, auf die einzelnen Kapitel und Teile des Buchs zuzugreifen. In Blau gehaltene Texte beinhalten Zusatzinformationen, Denkanstöße oder besondere Hinweise. Texte mit roten Überschriften kennzeichnen Beispiele bzw. Schritt-für-Schritt-Anleitungen.

Spezielle Symbole in der Marginalspalte machen auf besonders wichtige Textstellen aufmerksam: Achtung-Icon Diese Abschnitte sprechen eine Warnung aus. Tipp-Icon Hier verraten unsere Autoren Tipps und Tricks zur Erleichterung Ihrer Arbeit. Hinweis-Icon Weiterführende Hinweise werden Ihnen so nahe gebracht. Step-Icon Step-by-Step können Sie unsere Beispiele nachvollziehen.

5 .

Inhalt

8 Noch ein Buch übers Web? 10 Noch ein Vorwort? 11 Die Autoren

40 Gestalterisches 42 Layout im Web 50 Textgestaltung 58 Farbe und Bild

12 Grundlagen des WWW

64 Animation im Netz

14 Vom Seitendesign zur Site-Regie 18 Interface Design 30 Interaktion

74 Essentielle Software 76 Adobe Photoshop 82 Macromedia Fireworks 88 Webeditoren 90 Macromedia Dreamweaver 104 Adobe GoLive 108 Microsoft FrontPage 2000 114 Macromedia Flash 126 Dynamisches HTML

6

Inhalt

.

134 Strategien im WWW

206 Anhang

136 Online-Werbung

208 Tipps und Tricks

152 Web-Announcing

214 Glossar

156 Intranet und Extranet

224 Index

160 E-Branding 168 Die Gestaltung von Online-Shops 182 Gestaltung von e-Finance-Websites 190 Portal-Sites 196 Datenbankbasierte Sites 202 Microdevices

Inhalt

.

7

Noch ein Buch übers Web? Eigentlich gibt es doch schon hundert Bücher über das Netz. Muss es da wirklich noch eins geben? Und was könnte an diesem anders sein?

Seit sieben Jahren beschäftige ich mich mit interaktiven Medien. Und täglich merke ich, dass ich viel zuwenig darüber weiss. Das Schöne daran ist, es wird sich nie ändern. Als wir damals anfingen, erste Animation in Director zu basteln, gab es noch kaum Literatur, niemanden, der uns sagen konnte, wie man gestochen scharfe Fotos auf 8 Bit reduziert und mit rudimentärem HTML schicke Seiten bastelt. Nächtelang saßen wir vor den Computern und haben Programme ausprobiert, den Technikern über die Schulter geschaut und die Erfindung rahmenloser Frames mit Sekt begossen. Mit der Professionalisierung des Webs haben auch wir uns professionalisiert und immer komplexere Konzepte und Ideen verwirklicht. Der permanente Austausch mit allen Bereichen, also der Projektleitung, der Konzeption, der Technik und natürlich dem Kunden war die wichtigste Arbeitsgrundlage. Die Grenzen zwischen Grafik, Konzept und Technik verschwanden schnell, man musste auf allen Gebieten Erfahrung sammeln, sonst konnte und kann man die Digitalen Medien nicht verstehen. Offenheit und Neugierde sind also die besten Voraussetzung für den Umgang mit diesem Thema.

8

Holger Volland und ich haben uns seit unserer gemeinsamen Arbeit bei Pixelpark immer sehr intensiv ausgetauscht, in gemeinsamen und getrennten Projekten, Seminaren, Vorträgen, Workshops oder abends bei Caipirinha im Bierhimmel. Der Entschluss, aus alledem, was wir unseren Kunden, Kollegen und Zuhörern immer erklären und erzählen, und dem, was wir von ihnen hören, ein Buch zu machen, war Anfang 2000 gefasst. Es ist ganz bewusst von zwei Autoren geschrieben, denn zum Thema »Webdesign« gibt es weder einen einzig richtigen Weg noch ist es gut, sich auf eine einzelne Meinung zu verlassen. Wer von dem Buch allerdings rein gestalterische Hinweise erwartet, wird enttäuscht werden. So vielfältig die Interaktiven Medien sind, so viele Perspektiven muss es auch geben. Man kann sicher nicht alles besprechen und wissen, aber dieses Buch soll helfen, den großen Überblick, aber auch detailliertes Fachwissen zu erlangen. Eines kann es allerdings nicht ersetzen: neugierig zu sein und einmal täglich durch das Netz zu surfen! Berlin, August 2000 Florian Dengler

Vorwort

.

.

Noch ein Vorwort? Eigentlich sollte man denken, ein Vorwort pro Buch sei genug. Da Florian Dengler und ich aber selten einer Meinung sind, gibt es also derer zwei.

Bei einem Kalifornien-Urlaub 1994 stieß ich auf das Buch »Internet Starter Kit«. Zu diesem Zeitpunkt gab es selbst in den USA noch keine Internet Cafés, und die Autoren schrieben euphorisch über Dinge wie »Gopher« oder »WAIS«. Die wichtigsten Anwendungen des Internet waren zu dieser Zeit e-mail und ftp, und das »WWW« war noch so klein, dass die Autoren Mutmaßungen über die Anzahl von Sites im WWW wagen konnten. Wir merken es alle: Das Netz hat sich verändert, das WWW ist zur umfangreichsten Informationsplattform der Welt geworden, und niemand, der heute Websites gestaltet, betreut oder in Auftrag gibt, könnte sagen, wie viele Sites es weltweit gibt. Die Geschwindigkeit des Internet-Wachstums ist mittlerweile so hoch, dass es erstaunt, wie viele Unternehmen sich immer noch fragen, ob sie aktiv ins Netz sollen. Doch während die einen noch grübeln, sind vor allem Großunternehmen schon weiter. Hier begegnen wir bei unserer Arbeit als Berater täglich Prozessen, die ganze Wertschöpfungsbereiche verändern oder neue erschaffen. Das Internet hat sich schon wieder gehäutet: Vom großen bunten Marketing und Vertriebsinstrument entwickelt es sich gerade weiter zum unsichtbaren Rückgrat einer neuen Wirt-

10

schaft, das in großen Bereichen ausschließlich von technischer Infrastruktur lebt. Design spielt in diesem »neuen« Internet kaum eine Rolle mehr, denn die sogenannten »Frontends« bilden nur die Spitze des Eisbergs. Warum sollte man mit dieser Erkenntnis im Jahr 2000 noch ein Buch schreiben oder gar lesen, dass sich mit Webdesign beschäftigt? Wie versteckt auch immer dieses neue Internet agieren wird, die Benutzung der Frontends wird immer durch Menschen erfolgen. Diese wenigen Stellen, an denen das Netz an die Oberfläche tritt, sind gleichwohl die wichtigsten und empfindlichsten. Denn an diesen Schnittstellen zwischen Mensch und Maschine gibt es Erfolg oder Misserfolg, also Handlung oder Abbruch. Unser Buch ist für jene gedacht, denen diese Schnittstelle das Wichtigste ist. Ob Sie nun freier Grafiker, Projektleiterin oder Marketingvorstand sind, wir hoffen, genau die richtige Mischung aus Praxisbeispielen und Hintergrundwissen zusammengetragen zu haben, um Ihnen bei Ihrer Arbeit eine Unterstützung zu bieten. Berlin, August 2000 Holger Volland

Vorwort

.

Die Autoren Florian Dengler Florian Dengler (30) ist als Vice President Digital Media Europe bei frogdesign verantwortlich für den Bereich Neue Medien in Europa. Dabei spielt besonders die Konvergenz der Bereiche Brand&Strategy, Product und Digitale Medien eine vorrangige Rolle. Bereits während seines Studiums in Communication Design am Art Center College of Design beschäftigte er sich relativ früh mit interaktiven Applikationen. Nach seiner Tätigkeit bei der Designagentur Carré Noir in Turin, wechselte er im Mai 1995 zur Berliner Multimedia-Agentur Pixelpark und arbeitete dort als Creative Director mit Kunden wie Siemens, Nestlé und Super-RTL. Seit 1998 betreute er als Creative Director International der Pixelpark AG das weltweite Designnetzwerk sowie Kooperationen mit Hochschulen und anderen Einrichtungen. Neben der Entwicklung eines Weiterbildungsprogramms für Designer und internationaler Personal- und Kundenakquise beschäftigte er sich vor allem mit der Weiterentwicklung und Gestaltung der neuen Medien auf allen Plattformen. Er schreibt, lehrt in Seminaren, sitzt in den Jurys vieler renommierten Award-Shows und ist einer der Vorsitzenden des Forums Design des DMMV.

Holger Volland Holger Volland (30) gründete 1998 zusammen mit Lisa Biehl und Kornelia Ruppmann die Unternehmensberatung echopool in Berlin. Als Geschäftsführer zeichnet er für die Entwicklung von Strategien verantwortlich, die Unternehmen den Übergang tradierter Geschäftsprozesse in die New Economy möglich machen. Während des Studiums der Informationswissenschaft in Berlin fokussierte er sich bereits 1992 auf die Planung und den Einsatz von Informationssystemen in der Wirtschaft. Nach seiner Arbeit für Deutsche Welle tv und KISS fm wechselte Holger Volland 1995 zum Multimedia-Pionier Pixelpark und war dort bis 1998 als Creative Director für die Beratung von Kunden wie dem Museum of Modern Art (MoMA) New York, der Deutschen Bank oder der Allianz Versicherungsgruppe zuständig. Neben Lehraufträgen an der Hochschule Wismar und der New Economy Business School, der Leitung von Seminaren und Veranstaltungsreihen bilden zahlreiche Veröffentlichungen einen wichtigen Schwerpunkt seines Engagements in Lehre und Forschung.

Autoren

.

11

Grundlagen des WWW

14 Vom Seitendesign zur Site-Regie 14 Das WWW

18 Interface Design 18 Linear versus nonlinear 19 Das Interface 25 Screendesign 26 Branding 27 Flexibilität, Modularität und Skalierbarkeit 28 Die Main Idea

12

Grundlagen des WWW .

30 Interaktion 30 Statische Navigation 31 Dynamische Navigation 32 Navigationswerkzeuge 37 Strukturierung einer Site: Flexibel, skalierbar, modular

Seiten einrichten .

13

Vom Seitendesign zur Site-Regie Die technische Entwicklung des WWW und die Auswirkungen auf die Gestaltung Um professionelle Sites zu gestalten, ist es durchaus sinnvoll, die Scheuklappen abzulegen und sich bereits vor der eigentlichen Gestaltung intensiv mit konzeptionellen und inhaltlichen Gedanken zu beschäftigen, die unmittelbaren Einfluss auf jede benutzerfreundliche und sinnvolle Gestaltung haben.

Viele der besten Webdesigner – vor allem die »alten Meister« aus den USA – betrachten sich selbst als Zwitterwesen aus Designer, Konzeptentwickler und Programmierer und haben teilweise jahrelange Erfahrung im Umgang mit dem Medium Internet. So spielt zum Beispiel bei der Entwicklung eines Navigationskonzeptes einer Website interdisziplinäres Verständnis für Design, Text und Inhalte eine große Rolle. Doch auch die Auseinandersetzung mit technischen Gegebenheiten wie Browserversionen, Übertragungswegen oder Serverdiensten ist eigentlich unumgänglich, um performante und gelungene Sites zu erstellen. Für viele Multimedia-Agenturen stellt diese Zusammenarbeit eine der größten Herausforderungen dar, der nur begegnet werden kann, indem der permanente Austausch der einzelnen Abteilungen und Kompetenzen fest in den Arbeitsablauf integriert wird. Auf Seiten der Unternehmen hat sich ebenfalls viel getan. Während es früher eine eigene »Webabteilung« gab, die eher technisch orientiert war, beschäftigen sich heute interdiszipli-

14

näre Teams aus Marketing, Vertrieb und Technik mit dem Thema. Die Auseinandersetzung mit Strategieentwicklung, Kundenbindungsmaßnahmen oder Business-Modellen gehört dabei für alle Beteiligten fast schon zum Alltag. Dennoch lohnt es sich, einen großen Schritt zurückzugehen, um zu sehen, welche Entwicklungen notwendig waren, um das WWW zu dem zu machen, was es heute darstellt: eine grenzenlose Kommunikationsplattform mit schier unerschöpflichen Möglichkeiten.

Das WWW In den 50er Jahren litten die Amerikaner sehr unter der fortgeschrittenen Weltraumforschung Russlands auf Grund des Sputnik-Programms. Um gleichziehen zu können, investierte das US-Verteidigungsministerium hohe Summen in ARPA (Advanced Research Projects Agency). Da zu jener Zeit Computer extrem teuer waren, beschloss man, Rechenleistung

Grundlagen des WWW

.

über ein Netzwerk landesweit (ARPAnet) zusammenzuschließen. Aus einem Netzwerk des Verteidigungsministeriums wurde im Laufe der Zeit ein wachsender Zusammenschluss von Rechnern vor allem zum Austausch von wissenschaftlichen Dokumenten. Viele der technischen Voraussetzungen, die noch heute als Basis für das World Wide Web dienen, wurden in den Jahren bis 1980 entwickelt. Das Internet Protokoll zum Beispiel (IP) dient noch heute zur Adressierung aller angeschlossenen Computer, und auch der Seitenaufbau via HTML und der Transport der multimedialen Daten mit Hilfe von HTTP sind Errungenschaften aus jener Zeit. Doch was hat das alles mit der Gestaltung von Websites zu tun? Informationsweitergabe mit Hilfe von HTML Das Hypertext Transfer Protocol ermöglicht den Austausch der am WWW beteiligten Rechner, da es als einheitliches Protokoll unabhängig von eingesetzten Rechnertypen, Betriebssystemen und Anschlussarten den Austausch multimedialer Daten wie Texte, Bilder, Töne und Filme steuert. Mit Hilfe von HTML werden die Inhalte einer Seite dargestellt. Entgegen der gängigen Meinung ist HTML jedoch keine Programmiersprache, sondern eine so genannte Seitenbeschreibungssprache. Die drei wichtigsten Voraussetzungen im Webdesign werden uns von dieser Seitenbeschreibungssprache diktiert: Reihenfolge, Relation und Unvorhersehbarkeit. Serienmäßige Gestaltung Generell wird eine HTML-Seite immer von links oben nach rechts unten aufgebaut und von den Browsern auch in dieser Reihenfolge gelesen. Für jeden Designer, der Erfahrung in

der Gestaltung von Printmaterialien hat, bedeutet dies eine komplette Umorientierung im Gestaltungsprozess, da alle gestalterischen Freiheiten, die wir aus der Arbeit mit Programmen wie Quark, Photoshop oder Freehand kennen, wegfallen. Plötzlich können wir nicht mehr die Seite als Ganzes betrachten und vorgesehene Elemente frei anordnen, sondern müssen uns der Leserichtung des Browsers beugen. Natürlich könnte man einfach im Rahmen der Möglichkeiten von HTML Elemente platzieren, wo immer man möchte. Zum Beispiel einen Artikel mit einem Bild beginnen lassen, darunter den Text und die Überschrift rechts daneben anordnen. Wenn nun diese Seite von einem Browser aufgerufen wird, lädt dieser erst mühsam das Bild, stellt danach den Text dar und die Überschrift ganz zum Schluss. Bei einer großen Seite und einem Zugang per Modem kann dieser Vorgang dann schon gerne einmal eine Minute dauern. Durch die (technisch) richtige Anordnung einzelner Elemente kann die Nutzbarkeit einer Seite jedoch deutlich verbessert werden: Bei jeder Website, die der Informationsvermittlung dient (also ca. 90 %), muss sich der Gestalter immer an der Reihenfolge der Informationswiedergabe orientieren, in unserem Beispiel also der Seriengestaltung von HTML folgen und die oben erwähnten Elemente in der Reihenfolge Überschrift, Copytext, Bild anordnen. Relativ statt absolut HTML ist relativ aufgebaut. Dies sieht man unter anderem an den vordefinierten Textgestaltungsformaten (z.B. Heading1 bis Heading6). Mit Hilfe dieser Formate war es zu den Anfängen des WWW möglich, wissenschaftliche Texte zu gliedern und den Inhalt – nicht aber das

Vom Seitendesign zur Site-Regie

.

15

F

Abbildung 1 Formatvorlagen für Überschriften in HTML

für diese Zwecke leider uninteressante Layout – optimal darzustellen. Als Grundlage für alle Formate ist deshalb der Fließtext definiert worden. Heading1 und alle weiteren Formate sind Ableitungen, deren Eigenschaften relativ zum Fließtext festgelegt wurden. Die Formatierung des ungestalteten Fließtextes wiederum erfolgt auf Browserseite, das heißt auf dem Rechner des Besuchers. Wie kann man nun als Gestalter mit diesen relativen Formaten umgehen? Nun, einerseits wurde HTML seit der ersten Version weiterentwickelt, sodass es nun theoretisch möglich ist, Schriftarten frei zu wählen und sogar einzubinden, mit der gewichtigen Einschränkung jedoch, dass nur diejenigen Besucher eine »richtige« Darstellung bekommen, die über neuere Versionen der Browser verfügen und die definierten Schriftarten auch installiert haben. Andererseits gibt es unzählige Tricks, wie man die relative Dimensionierung der Seitenelemente umgehen kann. Viele dieser Tipps haben wir in diesem Buch zusammengestellt, weitere kommen täglich hinzu und lassen sich vor allem durch ständiges Surfen und »Schnüffeln« in Quellcodes entdecken.

16

Unvorhersehbarkeit Die entsetzlichste Erkenntnis für einen Webdesigner kommt meist, wenn er eine wunderbare Seite gestaltet hat, diese danach auf einem fremden Rechner mit einer anderen Browserversion betrachtet und plötzlich alles anders aussieht als geplant. HTML wurde als Sprache entwickelt, um die Darstellung von Inhalten zu beschreiben, nicht aber deren Layout. Fast alles, was wir heute einsetzen können, um eine – wenigstens halbwegs – vorhersehbare Gestaltung zu erreichen, ist letztlich nichts als Flickwerk und Schmu, was nur deshalb nicht auffällt, weil die beiden meist verbreiteten Browser, der Netscape Communicator und der Internet Explorer, recht fehlertolerant sind. Doch lassen wir uns dadurch nicht beirren, schließlich befinden wir uns immer noch am Anfang.

Grundlagen des WWW

.

Vom Seitendesign zur Site-Regie

.

17

Interface Design Die Gestaltung der Schnittstelle Mensch – Maschine Interface Design ist weit mehr als nur Screendesign. Es geht darum, den User auf die Site zu ziehen, ihn dort zu behalten und ihn zum Wiederkommen zu bewegen.

Linear versus nonlinear Fast alle klassischen Medien haben einen klaren linearen Aufbau. Das bedeutet, sie besitzen einen Anfang, einen oder mehrere Höhepunkte und steuern auf ein Ende zu. Ein Film, bei dem der Schluss bekannt ist, macht keinen Spaß mehr, wer bei einem Buch zuerst die letzte Seite liest, wird sich spätestens nach der Hälfte der Lektüre darüber ärgern. Selbst bei Zeitschriften, die man gerne mal von hinten nach vorne blättert, überlegen sich die Gestalter des Blattes lange, wie der Aufbau und der Seitenfluss aussieht. Die interaktiven Medien sind in diesem Punkt grundverschieden. Es geht nicht mehr um das Abarbeiten verschiedener Stationen, sondern um das bewusste und gezielte Aufnehmen von Information Information, um eine neue Art der Unterhaltung oder die neuartige Nutzung von Services Services. Der Ansatz der Interaktion an sich bedeutet bereits, dass es keinen klaren vordefinierten Weg durch die Inhalte geben kann. Und da der User selbst bestimmt, welche Punkte ihn interessieren und welche nicht, was er zuerst lesen und worauf er später viel-

18

leicht zurückkommen will, kann man außer bei der Homepage kaum definieren, was er wann wahrnimmt. Selbst der Startcharakter der ersten Seite ist obsolet, sobald ein Link oder ein Bookmark auf eine Unterseite verweist. Der User steht nun auf einmal im Mittelpunkt punkt, und da jeder User verschieden ist, lässt sich kein allgemein gültiger festgeschriebener Weg durch das Angebot bestimmen. Diese Nonlinearität bedeutet, dass man bei der Konzeption und Gestaltung interaktiver Applikationen vollkommen anders denken und vorgehen muss. Der Gestalter wird zum Regisseur, er versucht vorwegzunehmen, welche Richtung der User einschlagen könnte, welche Wege er beschreiten wird und wie diese miteinander verbunden sind. Er muss aber auch damit rechnen, dass der User unlogische Wege einschlägt und sich nicht an antizipierte Verhaltensmuster hält. Um das zu vermeiden, ist dauernde Orientierung und Navigationsmöglichkeit nötig, will man den Nutzer nicht nach zwei Klicks verlieren. Andererseits hat man natürlich die Möglichkeit, ihn durch ge-

Seiten einrichten . .

schickte Gestaltung und Anordnung der Inhalte zu lenken, ohne dass er es bewusst wahrnimmt. Die einfachste Methode nonlinearer Navigation sind Hyperlinks Hyperlinks, die Stichwörter in Texten mit weiterführenden Informationen verbinden. Dieser Ansatz gehört zu den elementaren Bestandteilen des WWW, wobei hier der Benutzerführung und dem Orientierungssystem eine besondere Bedeutung zukommt. Der User muss immer wissen, wo er sich befindet und wie er wieder dorthin kommt, wo er gerade war. Mit höchstens zwei Klicks zu jedem wichtigen Inhalt ist deshalb eine der Maximen im Netz. Die wichtigste Frage zu Beginn Welcher User kommt wann und warum auf meine Site? Es ist es nur sehr selten sinnvoll, sämtliche Informationen, die sich auf der Site befinden, auf die Homepage zu legen und zu verlinken, sodass sich jeder einfach bedienen kann. Zu schnell werden große Mengen an Information unübersichtlich. Es empfiehlt sich, verschiedene Benutzergruppen und deren Bedürfnisse auszumachen: schnell an die wichtigsten Infos gelangen, sich treiben und von visuellen Impulsen leiten lassen, analytisch an Inhalte herangehen etc. Danach können Inhalte und Zugänge kategorisiert und festgelegt werden. Diese Verhaltensweisen sollten sich in der Anwendung abbilden, den verschiedenen Zielgruppen einen jeweils anderen Einstieg bieten und den Nutzer so fesseln, dass er nicht vorzeitig wieder aussteigt. Handlungsabläufe mit Einführung, Höhepunkt und Auflösung müssen gestaltet werden, aber nicht wie in klassischen Medien, sondern so, dass sie vom User immer wieder neu bestimmt werden können. Das er-

zielt man über die Gestaltung des Interfaces, der Schnittstelle zwischen dem Nutzer und dem Computer.

Das Interface Ein Interface hat verschiedene Aufgaben. Ist es gut, zeichnet es sich häufig dadurch aus, dass es in den Hintergrund tritt und die Inhalte so vermittelt, dass man sich über die Schnittstelle zum Rechner keine Gedanken macht. Grundsätzlich macht es Inhalte und Informationen erfassbar, es strukturiert, bildet Hierarchien Hierarchien, erlaubt es, sich durch die Inhalte zu navigieren, und bietet dem User die Möglichkeit, sich jederzeit zurechtzufinden. Die Strukturierung der Inhalte wird durch das Interface transparent und nachvollziehbar, man wird geführt, aber nicht bevormundet. Grundsätzlich ist festzustellen: Je strukturierter die Inhalte, desto komplexer darf die Site sein. Dabei gibt es verschiedene Möglichkeiten, Strukturen anzulegen und Inhalte zu verpacken:

Interface Design . .

19

F

Abbildung 1 Homepage CNN, http://www.cnn.com Der Vorreiter der klassisch kaskadierenden Nachrichtensite reißt auf der ersten Seite ein aktuelles Feature an und ermöglicht gleichzeitig sehr reduziert und nüchtern den Zugang zu allen anderen News und Bereichen.

H

Abbildung 2 Folgeseite CNN.com Der Artikel zum Teaser der ersten Seite folgt hier in aller Ausführlichkeit, zusätzlich untergliedert in einzeln wählbare Absätze und verlinkt mit Artikeln gleichen Themas. Es liegt nun am User, wie weit er sich in die Informationskaskaden vertieft.

Kaskaden Themen werden auf der ersten Seite angerissen, mit einer Headline, einer Subheadline, einer kurzen Zusammenfassung und eventuell einem Bild. Dabei gibt es immer die Möglichkeit, sich per Hyperlink auf eine Folgeseite zu klicken, auf der eine längere Version des Textes oder gar der ganze Inhalt abgebildet ist. Man

20

bewegt sich also vom Ganzen ins Detail Detail, meist mit der Möglichkeit, sich dann auch noch sehr viel weiter zu verlinken, zum Beispiel zu themenspezifischen Angeboten, die auf der Site selbst gar nicht bereit gehalten werden. Bestes Beispiel dafür sind fast sämtliche Newssites, die sich in ihrer Aufbereitung doch sehr ähneln.

Seiten einrichten . .

F

Abbildung 3 Messe Frankfurt: Place yourself

Halblinear Nicht alle Inhalte bieten sich an, komplett nonlinear abgebildet zu werden. Tutorials und Bedienungsanleitungen beruhen zum Beispiel darauf, Schritt für Schritt erfasst zu werden. Außerdem gibt es Inhalte, die so spezifisch sind, dass ihnen ein kaskadenartiger Aufbau nicht gerecht würde. In diesem Fall teilt man die Inhalte in Informationseinheiten auf, die einzeln gekennzeichnet werden, auch einzeln ansteuerbar sind, aber dennoch in einer ganz klaren Reihenfolge zu betrachten sind. Diese Anordnung bietet auch die Möglichkeit zu Verzweigungen, beispielsweise bei einem Fragebogen, der dadurch sehr viel user-spezifischer und schneller auszufüllen ist.

Formulare und Tutorials sollten immer linear oder halblinear angelegt werden. Die in Abbildung 3 gezeigte Seite der Messe Frankfurt wurde so konzipiert, dass sie von jeder Messe-Homepage aus anklickbar ist. Sie informiert über die Möglichkeiten, auf den Messeseiten als Werbepartner aufzutreten. Da sie prozessorientiert ist, klickt man sich zunächst linear durch jedes Kapitel, kann dann aber auch gezielt in Unterbereiche zurückkehren.

Interface Design . .

21

Abbildung 4 E Homepage der Barmer, http://www.barmer.de

Gruppierend Im Gegensatz zu den sich immer mehr spezialisierenden Sites, die ganz genau auf bestimmte User abgestimmt sind, versuchen viele Unternehmen, sehr unterschiedliche Zielgruppen mit ihrer Site abzufangen. Hier bietet es sich entweder an, vollkommen unterschiedliche Sites zu gestalten, die unterschiedliche URLs besitzen und auch über ganz unterschiedliche Kanäle kommuniziert werden. Oder aber man gestaltet, vor allem bei starken Namen und Brands, eine Homepage, die gleichsam als Portal den Nutzern jeweils ihren eigenen Bereich anbietet. Auf den Folgeseiten wird dann mit ganz unterschiedlichen Konzepten und Gestaltungsmitteln, die der jeweiligen Zielgruppe entsprechen, gearbeitet. Man gruppiert also die Inhalte in immer wieder neuer

Aufbereitung, zum Beispiel einmal für generell Interessierte, einmal für Studenten, einmal für Schüler und einmal für Arbeitnehmer. Es ist unerlässlich, Anspruch und Qualität in allen Bereichen auf gleichem Niveau und den Absender klar erkennbar zu halten. Gefährlich ist hier auch, sich so sehr an die Zielgruppe anzupassen, dass der Absender unglaubwürdig wird und man den User eher verärgert, als ihn anzusprechen. Betrachten wir als Beispiel die Webseite der Barmer Krankenkasse (Abb. 4). Schon auf der Homepage wird differenziert in unterschiedliche Zielgruppen: Barmer-Kunden, Jugendliche während der Berufswahl, Studenten und Arbeitgeber. Wählt man einen der drei Bereiche, verlässt man das Barmer-Basisangebot und erhält ganz spezielle Inhalte.

Anwendung von Gruppierend Hat eine Site sehr viele unterschiedliche Inhalte, sollte man diese gruppieren.

22

Seiten einrichten

.

F

Abbildung 5 Folgeseiten der Site

In Abb. 5 sehen Sie die Folgeseiten der Barmer, die Studenten-WG, E-Lok, Wegweiser für Unternehmen und »Die Barmer« zeigen. Die Seiten sind inhaltlich, farblich und gestalterisch stark unterschiedlich und sprechen so einzelne Zielgruppen an. Trotzdem gibt es klar definierte verbindende Elemente, die sie als Barmer-Netzweit-Seiten identifizieren.

User-spezifisch Im Gegensatz zum gruppierenden Zugang, der gleich am Anfang ganz klar differenziert und die User in eigene Bereiche führt, vermittelt der user-spezifische Zugang das Gefühl, sich auf einer einzigen Site zu bewegen, auf der man aber doch fast unmerklich einen vorbestimmten Weg beschreitet. Man unterscheidet hier weniger in bestimmte Zielgruppen Zielgruppen, die

sich in ihren Interessen unterscheiden, sondern in die Art und Weise, wie man sich Informationen beschafft und sich durch Inhalte bewegt. So gibt es zum einen den informationsorientierten Typen, der Information schnell und klar strukturiert geliefert bekommen will und sich von Grafik und Animation eher gestört fühlt. Dann ist da der visuelle Typ, dem ein Bild mehr sagt als tausend Worte und der lieber animierte Bilder ansieht, als sich durch Seiten von Text zu scrollen. Der spielerische Typ wiederum braucht Sound, Bewegung und die Herausforderung und ist dann auch

Vielfältige Zielgruppen Je unterschiedlicher und vielfältiger die Zielgruppen einer Site sind, desto mehr sollte sie auf die einzelnen Gruppen eingehen.

Interface Design

.

23

Abbildung 6 E Pixelpark-Homepage 1998/1999

bereit, Informationen aufzunehmen und sich mit Inhalten zu beschäftigen. Wenn man diese Arten, sich mit Inhalten auseinander zu setzen, definiert hat und sie auf die eigenen Inhalte überträgt, lässt sich eine Site sehr viel spannender und vielschichtiger aufbereiten, um so auch die unterschiedlichsten Typen anzusprechen. Bei den meisten Projekten wird schon zu Beginn die Entscheidung für den einen oder anderen Weg gefällt, entweder sehr strukturiert ohne Bilder, nur Systemtext, oder sehr marktschreierisch, bunt und überladen. Doch manchmal kann eine geschickte Kombination der verschiedenen Arten die besten Resultate erzielen. Die Site der Pixelpark AG, die hier als Beispiel dienen soll (Abb. 6) zielt auf verschiedene User-Typen ab. Da ist der Sprinter, der sich per Pull-down-Menü die Inhalte auf einen Blick holt, der Spaziergänger, der sich von visuellen Eindrücken leiten lässt und über die sich bewegende Navigationsleiste am rechten Bildrand navigiert, der weitergehend Interessierte,

24

der sich im Project Explorer Schritt für Schritt durch einen typischen Produktionsablauf begibt, und der »Heavy User«, der sich immer wieder aktuelle News (Stellenangebote, Presse) vom »Kiosk« holt. Die Inhalte der Folgeseiten (Abb. 7) sind im Grunde zwar immer die gleichen, aber unterschiedlich aufbereitet (in Länge und Wording) und verschieden gestaltet (in Form und Farbe), je nach Art der Informationsaufnahme.

Screendesign Das WWW ist nicht nur ein Medium der reinen Information. Doch surft man heute durchs Netz, ist man immer wieder erstaunt, wie wenig Wert viele Unternehmen, die Unmengen von Geld in Corporate Design, Werbung und Image stecken, auf die Gestaltung ihrer Website legen. Wo sonst nur hoch bezahlte Agenturen mit Millionenbudgets arbeiten, werden immer noch schnell mal ein paar Seiten ins

Seiten einrichten

.

F G Abbildung 7 Pixelpark, Folgeseiten 1998/1999

Netz gestellt, die im Leben noch kein erfahrener Gestalter gesehen hat. Trotzdem steigt das Bewusstsein natürlich, dass es sich bei den neuen Medien um einen gleichwertigen Kommunikationskanal handelt, der das Image genauso beeinflusst wie Anzeigen, Broschüren, Spots, Briefpapier oder Architektur. Gerade im Internet, wo die Konkurrenz nur einen Mausklick weiter liegt, ist es entscheidend, den User anzusprechen, ihn zu begeistern und ihn zum Weiterklicken und Anlegen von Bookmarks zu animieren. Das funktioniert nur, wenn eine Atmosphäre, ein Ambiente ge-

schaffen wird, das sich zum einen in die generelle Kommunikationsstrategie einfügt und zum anderen dem Vergleich zu anderen Auftritten standhält. Der Gestalter wird zum Regisseur, immer auf der Suche nach der richtigen Methode, bestimmte Inhalte zu vermitteln und den User zu begeistern. Leider ist davon gerade im jetzigen Stadium der Professionali-

Bitte merken Sie sich: Inhalte dürfen nicht einfach nur ins Netz gestellt werden: Sie müssen inszeniert werden.

Interface Design

.

25

sierung, zu einem Zeitpunkt, an dem im Netz wirklich Geld verdient werden kann, wenig zu merken. Gestaltungsraster werden schnell von anderen Sites übernommen, die Strategie bei der Entwicklung des Auftritts beschränkt sich häufig auf Umsatz und Nutzerzahlen. Dass diese aber durchaus positiv beeinflusst werden, indem man der Website ein unverwechselbares Gesicht gibt, wenn der Nutzer überrascht wird, und so in Erinnerung bleibt, wird erst langsam wieder erkannt. Es gibt sie natürlich, die Grundregeln des Screendesigns, immer wieder zitiert und erweitert. Gebot Nummer eins ist sicherlich immer noch die Geschwindigkeit. Schnelle Ladezeiten entscheiden meist schon beim Laden der Homepage, ob ein User weiterklickt oder schon vorher abbricht. Gerade bei Serviceund Informationssites kann man gut auf große Hintergrundbilder und emotionale Fotos der Firmenzentrale verzichten. Dabei kommt es aber stark auf den Umgang und die Bearbeitung der Bilder an, auf den Aufbau und die Informationsdichte der einzelnen Seiten. Die Grundlagen klassischen Designs gelten entgegen weit verbreiteter Hoffnungen auch im Netz. Nur weil man mit den neuen Medien arbeitet, heißt das nicht, dass man alles über Bord werfen muss, was bisher Gültigkeit hatte. Fünf verschiedene Schriften auf einem Screen sehen eben auch nicht besser aus als in einer Anzeige. Natürlich nimmt man Gestaltung auf dem Bildschirm anders wahr als auf Papier. Die Auflösung ist schlechter, der Farbaufbau ein anderer, die Fläche begrenzt. Gerade deswegen bedarf es professioneller Designer, die sich damit beschäftigen, dieses Medium zu formen und weiterzuentwickeln. Ob eine Site gut gestaltet ist, hat nichts mit Geschmack zu tun,

26

sondern mit einigen Parametern, die in den folgenden Kapiteln ausführlich erklärt werden. Die Möglichkeiten zur Gestaltung im Netz sind eher bescheiden. Umso wichtiger, sie sehr gut zu kennen! Für die Gestaltung einfacher Websites gibt es ganz klare grundsätzliche Gestaltungsmittel, die für sich alleine und in ihrer Kombination über den Erfolg oder Misserfolg der Site entscheiden können. Grundgerüst ist HTML HTML, die Hypertext Markup Language, mit welcher der Aufbau der einzelnen Seiten und ihr Konstrukt beschrieben und vom Browser so interpretiert wird, dass beim User eine zusammenhängende Website ankommt. Schrift Schrift, deren Farbe und die Hintergrundfarbe waren die ersten Gestaltungsmittel und setzen auch heute noch ganz klar Ausrichtung und Stimmung einer Site fest. Bilder Bilder, in verschiedenster Art und Weise eingesetzt, bedeuten zwar zusätzlichen Datentransfer, sind aber wohl das beste Mittel, um der Site ein »Gesicht« zu verleihen. Mit Hilfe von so genannten Tabellen werden die Inhalte und Gestaltungselemente auf einer Seite angeordnet und positioniert. Da jeder User selbst bestimmt, wie groß er sein Browserfenster aufzieht, ist es hier besonders wichtig, an alle möglichen Eventualitäten zu denken. Frames wiederum bestimmen, wann der User welche Kombination welcher Seiten sieht. Zu den einfachen Gestaltungsmitteln, die auch noch nicht sehr multimedial sind, gehören einfache Animationen Animationen, eine Abfolge von Einzelbildern, durch die sich die Möglichkeiten der Gestaltung und Informationsvermittlung deutlich erhöhen.

Seiten einrichten

.

Branding Neben der Informationsvermittlung, der Informationsstrukturierung und der User-Ansprache ist es unerlässlich, den Absender kenntlich zu machen, ein Image zu transportieren und der Site ein unverwechselbares Gesicht zu verleihen. Wichtigste Aufgabe klassischen Corporate Designs ist es, ein klares Bild des Unternehmens zu zeichnen, es so zu stärken, Durchgängigkeit und Wiedererkennbarkeit zu bewirken und sich ganz klar von den Wettbewerbern zu differenzieren. Im Netz scheint das oft anders zu sein. Nicht nur, dass man auf einigen Seiten nach zwei Klicks nicht mehr weiß, von wem die Site nun eigentlich ist, viel schlimmer ist es, wenn man drei Sites nebeneinander betrachtet und schon beim bloßen Abdecken des Logos Probleme mit der Zuordnung bekommt. Amerikanische Standards sowohl bei E-Commerce als auch bei Newssites werden fast identisch übernommen. Und auch wenn die Aufteilung der Site vielleicht wirklich momentan effektiv ist, so sollte man sich doch die Mühe machen, auch eigene Gestaltungsmerkmale mit einfließen zu lassen. Das alles ist Bestandteil des immer wichtiger werdenden Themas E-Branding (siehe auch Kapitel 19, »E-Branding«).

Flexibilität, Modularität und Skalierbarkeit Sind beim Punkt Branding und Corporate Design ganz klar klassische Designkompetenzen gefragt, bedeutet Screendesign natürlich auch, sich Herausforderungen zu stellen, die mit klassischem Design-Know-how nicht so einfach bewältigt werden können. Ein wichtiger

Faktor ist die Schnelligkeit und Schnelllebigkeit des Internet. Innerhalb der letzten fünf Jahre haben sich die Anforderungen permanent verändert, Relaunches, technische Updates, Erweiterungen von Websites sind an der Tagesordnung. Man muss sich permanent den technischen, vor allem aber den inhaltlichen Anforderungen stellen. Mittlerweile ist jedem klar geworden, dass man mit den neuen Medien Geld verdienen oder zumindest sparen kann. Und dass man schon innerhalb kürzester Zeit erfährt, ob die Ideen und Strategien Früchte tragen oder ob man die Zielgruppe mit seinem Vorhaben nicht erreicht hat. Oft wird nur mit kleinen Teilbudgets gestartet, mit dem Ziel, die Site zu erweitern, zu verändern, auszubauen, sobald man erste Erkenntnisse über das Nutzer-Feedback erhalten hat oder sich interne Strukturen verändern. Flexibilität, Modularität und Skalierbarkeit sind also systemimmanente Features, die von Anfang an bei Strategie, Konzeption und Gestaltung sowie technischer Realisierung beachtet werden müssen. Einfachstes Beispiel ist die Benutzerführung, die heute vielleicht fünf Punkte beinhaltet, morgen aber schon auf zehn erweitert wird. Bereiche kommen hinzu, andere fallen weg, Nutzer reagieren auf eine Navigation mehr als auf eine andere. Websites sind heute national, morgen regional oder international. Das bedeutet, dass man ganz am Anfang alle zu diesem Zeitpunkt vorhersehbaren Eventualitäten mit einplanen muss, auch wenn sie im ersten Schritt gar nicht umgesetzt werden. Es ist leider so: Eine gute Website ist niemals fertig. Bereiche müssen so eingebunden sein, dass sie im Falle eines Misserfolgs schnell verändert oder weggenommen werden können, ohne dass die ganze Site darunter leidet.

Interface Design

.

27

Ein Servicebereich, der erst nach vier Monaten dazukommt, weil das Backend noch nicht geklärt werden kann, ist besser als ein vorläufiger Hauptnavigationspunkt, der viel verspricht, aber nichts hält. Hinzu kommt die Tatsache, dass die Sites auf jedem Rechner, auf jedem System, in jedem Browser unterschiedlich dargestellt werden und man sich niemals auf eine einzige Darstellung verlassen darf. Das hat ganz deutlichen Einfluss auf die Gestaltung und bedeutet leider manchmal auch, dass man nicht immer das langfristige optimale Ergebnis für alle Zeiten erzielen kann, da man einfach zu viele Faktoren berücksichtigen muss, die erst in drei Monaten zum Tragen kommen. Wir befinden uns immer noch in den Kinderschuhen der interaktiven Medien. Kaum hat sich ein Bereich wie E-Commerce etabliert, kommen mit WAP und Breitband Themen auf uns zu, die wir grundlegend neu diskutieren müssen, natürlich auf der Basis dessen, was in den vergangenen Jahren entwickelt wurde. Aber es gilt doch, eine neue Sprache zu entwickeln, die dem Medium gerecht wird. Das klassische Beispiel ist die Umsetzung einer Broschüre eins zu eins im Netz. Nicht nur, dass die Inhalte vollkommen falsch konzipiert sind, indem sie zu lang oder zu unstrukturiert sind. Dazu kommt noch, dass Interaktivität, eines der Schlüsselelemente im Netz, kaum genützt wird, User-Feedback eher lästig als gewollt ist und die Gestaltung bezüglich Layout und Filegrößen kaum den Netzkriterien entspricht. Ein neues Medium erfordert eine neue Sprache Sprache, sie ist nur in Ansätzen vergleichbar mit der Sprache des Kinos, des Fernsehens, mit der von Zeitschriften und Büchern. Der große Unterschied ist die Interaktivität, die unmittelbare Verbindung von Medium und User, der Selbstbestimmtheit des Nutzers und der Digitalität

28

des Mediums an sich. Man muss das Medium nutzen, ihm gerecht werden, nicht versuchen, bekannte Sachverhalte ohne Reflexion und Transferleistung eins zu eins zu übertragen. Neuen Verhaltens- und Interaktionsweisen kann man nicht mit einer 3D-Nachbildung einer virtuellen Bank begegnen, bei der ich mich erst mühsam durchs Foyer scrollen muss, die kleinen Schilder an der Tür lesen und dann auf dem Schreibtisch des Sachbearbeiters meinen Aktenordner suchen muss.

Die Main Idea Es ist die Main Idea, also die Kernidee Kernidee, um die sich alles dreht. Diese Idee kann das Stichwort »Service« sein, was bedeutet, dass die Site ganz klar und strikt serviceorientiert ist und jeder Inhalt und jedes Gestaltungselement darauf überprüft wird. Beim Auftritt für den Fernsehsender Super-RTL, war die visuelle und inhaltliche Metapher »Multivision«, ein Screen, auf dem immer etwas passiert, sich Inhalte permanent austauschen, zusammen aber ein Gesamtbild ergeben, das immer passt und harmonisch ist. Das bedeutet ganz klare Anforderungen an Design und Inhalte, die beispielsweise alle in »Häppchen« verpackt werden müssen, und hat für den User, in diesem Falle Kids, wiederum den Vorteil, stets neue schnell zu erfassende Inhalte zu bekommen. Dieses Prinzip zieht sich durch die komplette Site, der Nutzwert ist hier immer neuer Spaß und Unterhaltung. Man muss vorsichtig sein, dass man bei der Wahl von Metaphern nicht zu platt wird und sie immer der Zielgruppe entsprechen. Chatrooms in Form einer lustigen Bar gehören hoffentlich bald der Vergangenheit an, die Ein-

Seiten einrichten

.

schränkungen, die man in Kauf nimmt, nur weil beim Eintritt in die Virtualität krampfhaft versucht wird, möglichst viel Bekanntes aus der wirklichen Welt mitzunehmen, machen es kaum möglich, das Medium so zu nutzen, wie man könnte. Die virtuelle Bar mit Barhockern und Barkeeper zum Beispiel lässt gar nicht erst zu, dass man sich Gedanken über Kommunikationsmöglichkeiten und Programmierungen jenseits von Metaphern für »laut reden« und »flüstern« macht. Deshalb gilt: Es klappt nur selten, die Realität eins zu eins ins Netz zu übertragen. Interfaces in Form einer Fernbedienung gibt es schon genug! Es ist dabei der Kern der Marke Marke, den man auf das Netz übertragen muss. Das ist nicht einfach, ein gutes Beispiel dafür ist jedoch der amerikanische Lieferservice UPS. Als Marktführer auf seinem Gebiet beschäftigte er sich lange Zeit mit der schnellen und zuverlässigen Lieferung von Gütern aller Art. Bis irgend-

jemand auf die grandiose Idee kam, die Datenbank, in der alle Bewegungen aller Lieferungen auf die Minute genau festgehalten werden, öffentlich zu machen und per Zugangscode ins Internet zu stellen. Nun kann ich genau verfolgen, wann mein Paket Berlin verlassen hat, wo es gerade steckt und dass es vielleicht schon seit zwei Tagen beim Empfänger ist, obwohl der versucht, mir Gegenteiliges zu erklären. Aber das war nur der erste Schritt, denn die Datenbanken sind zu weitaus mehr imstande, als einfach nur Wege zurückzuverfolgen. Ein passendes Konzept, ein gutes Interface und ein geeignetes Businessmodell könnten UPS zu einem noch nie da gewesenen Logistikunternehmen machen, das über das Netz Einblick in alle Phasen der Beschaffung, der Produktion und der Verteilung von Waren bietet, aber auch komplett neue Services offeriert, die sich heute so noch niemand vorstellen kann.

Beispielsite Unter http://www.ups.com findet man wirklichen Mehrwert im Netz. Die Site ist zwar schlecht gestaltet, aber das sei in diesem Falle verziehen.

Interface Design

.

29

Interaktion Navigation, Orientierung und Struktur Ein Navigationssystem liegt fast jeder Website zu Grunde, schließlich werden Besucher mit dessen Hilfe durch die Site geführt. Vor allem komplexe Sites benötigen unbedingt eine durchdachte Interaktionsstruktur.

EE

Bleiben Sie übersichtlich!

Ein gutes Navigationssystem hilft einerseits jedem Besucher, innerhalb kürzester Zeit auf die Inhalte zurückzugreifen, die er benötigt. Andererseits ermöglicht es auch den Betreibern, die Besucher zu steuern und möglichst lange auf der eigenen Website zu halten. Wir unterscheiden zwischen statischen und dynamischen Navigationskonzepten, wobei erstere immer noch die größte Verbreitung haben.

E

E

Statische Navigation Zu einer statischen Navigation gehören in der Regel: E Die Standortbestimmung (= Bereichskennung) E Die Links zu Parallelinhalten der gleichen Hierarchiestufe E Links zu übergeordneten Ebenen oder der Hauptnavigation Der Menüführung gebührt bei der Gestaltung von Navigationskonzepten eine zentrale Rolle, denn in der Regel bietet sie die beste Übersicht über alle angebotenen Inhalte.

30

E

Aufgaben der Menüführung: Orientierung schaffen Vor allem bei Sites mit hauptsächlich redaktionellem Inhalte wie Magazinen oder Unternehmensdarstellungen sollte der Besucher mittels der Navigationsstruktur eine Orientierung über die angebotenen Inhalte erhalten. So könnten z.B. Rubriken oder Produktbereiche Teil der Navigation sein und einen ersten Überblick bieten. Prioritäten setzen Auf komplexe Sites greifen häufig Besucher mit unterschiedlichen Anforderungen zu. So interessieren sich beispielsweise für die Site www.mobilcom.de sowohl Pressevertreter, Bewerber oder Investoren als auch Kunden. Da Letztere die häufigste Sorte von Besuchern sein dürften, ist die Menüführung auch ganz auf deren Bedürfnisse zugeschnitten, alle anderen Nutzertypen finden in der Regel einen eigenen Einstieg in ihren Bereich. Steuerung des Surfverhaltens Begriffe, die in einer Navigationsstruktur an prominenter oder oberster Stelle stehen, werden von den Besuchern am häufigsten

Seiten einrichten

.

G

Abbildung 1 Statische Navigation bei www.allianz-vermoegen.de

geklickt. Als Gestalter macht man sich dies zunutze, um auf neue Bereiche und Inhalte aufmerksam zu machen. Generell kann man jedoch feststellen, dass die klassische Menüführung immer häufiger zu Gunsten dynamischer Navigationskonzepte in den Hintergrund gerät.

Dynamische Navigation

G

Abbildung 2 Dynamische Navigation bei www.amazon.de

führung weitgehend zu verzichten und stattdessen die Bedürfnisse des Besuchers und die Anforderungen eines Bereiches als Grundlage für eine dynamische Navigation zu wählen. Von dynamischer Navigation spricht man dann, wenn weiterführende Links und benutzerführende Zeichen von einem aktuellen Zustand abhängig sind. Meist setzt dies eine Datenbank voraus, die bei jeder Seite regeln kann, ob und welche dynamischen Navigationspunkte dargestellt werden.

Durch den Einsatz von datenbankbasierten Systemen und die gestiegene Komplexität vieler Sites hat es oft Sinn, auf statische Menü-

Dynamische Navigation bei Shop-Systemen Die wichtigste Funktion einer Shopping-Plattform ist es, die Besucher zum Kauf anzuregen. Dabei ist es sinnvoll, auf den ersten Seiten eine größtmögliche Auswahl zu zeigen, die im besten Fall personalisiert ist, d.h. hauptsächlich Elemente beinhaltet, die den momentanen Nutzer interessieren (sofern man ihn kennt ...). Im Laufe des Kaufprozesses sollten dann die

Wahlmöglichkeiten zur Navigation immer weiter eingeschränkt werden, sodass kurz vor Abschluss nur noch lineare Möglichkeiten gegeben sind (»Jetzt bestellen«). Nach Abschluss des Verkaufes sollte dann wieder die ganze Vielfalt der Navigation zur Verfügung stehen, um weitere Kaufprozesse anzuregen (siehe auch das Kapitel E-Commerce).

Interaktion

.

31

F

Abbildung 3 Inhaltliche Metaphern wie Warenkorb, Lexikon, Kasse oder Postkarte können durch Icons noch gestützt werden, wie hier bei www.redseven.de.

Abbildung 4 E Beim Einsatz von Redaktionssystemen beliebt: Systemtext

Dynamische Navigation wird also bestimmt durch: E Ein »wissendes« System im Hintergrund E Die Erkenntnis, wo sich der Nutzer gerade befindet E Eine Antizipierung der Handlungswünsche des Nutzers Mit dynamischen Systemen wird es sehr viel einfacher, den Nutzer durch eine Website zu leiten. Je umfangreicher eine Site und je heterogener die Zielgruppe ist, desto mehr spricht für eine Dynamisierung der Benutzerführung. Der Einsatz dynamischer Navigationsformen macht es nötig, dass alle Beteiligten an einem Projekt nicht mehr in Navigationshierarchien denken, sondern in Situationen. Für die Erstellung von Konzepten bedeutet dies, für alle potenziellen Nutzungssituationen Storyboards zu erstellen, die zwar jeweils über gleiche Elemente verfügen, aber je nach Situation immer neu zusammengestellt werden.

32

Navigationswerkzeuge Einem Gestalter stehen unterschiedlichste Möglichkeiten zur Verfügung, um ein Navigationskonzept umzusetzen. Die Wahl des eingesetzten Werkzeuges hängt von unterschiedlichen Faktoren ab. Dazu gehören: E Ladezeit E Aufmerksamkeitsstärke E Gestalterisches Konzept E Interaktivität E Einlesen von Datenbankinhalten 1. Metaphern Sie nehmen Bezug auf bekannte Signale, die in der »realen Welt« häufig verwendet werden (Abb. 3). Dadurch ist die Lernkurve extrem niedrig, denn jeder Nutzer hatte in seinem Leben schon ein Mal einen »Warenkorb« oder einen Einkaufswagen in der Hand. Bei der Wahl geeigneter Metaphern ist zu bedenken, dass diese oft nicht in allen Kulturkreisen oder sozialen Gruppen gleich verstanden werden. Der Buchstabe »i«, in westlichen Kulturkreisen als Symbol für Information, ist zwar bei uns weit verbreitet,

Seiten einrichten

.

G

Abbildung 5 Besonders für die Hauptpunkte einer Navigation geeignet: gebrannte Schrift, hier bei www.netradio.com

ein Japaner oder Chinese dürfte mit der Entschlüsselung jedoch einige Zeit verbringen. Ein weiterer Nachteil visueller Metaphern ist, abgesehen von ihrer Ladezeit, die fast schon epidemische Verbreitung bestimmter Symbole wie der Lupe. Ein eigenständiges Design, das sich von der Konkurrenz deutlich absetzt, ist mit diesen Symbolen kaum noch zu erreichen. Da Bilder generell einen höheren Aufmerksamkeitswert haben als Text, werden Symbole vom Auge bevorzugt wahrgenommen, was hinderlich sein kann, wenn nur Nebenfunktionen wie »Suche« oder »Lexikon« damit belegt sind. 2. Systemtext Schon allein auf Grund der schnellen Ladezeiten von Texten ist das erste im WWW mögliche Navigationselement als Link am häufigsten zu finden. Systemtext zur Navigation ist leicht und jederzeit editierbar und kann daher komplett aus Datenbanken generiert werden. Nachteilig ist jedoch, dass dieser kaum zu gestalten ist und visuell nicht unbedingt im Vordergrund steht (Abb. 4).

3. »Gebrannte« Typo Hierunter versteht man Schrift, die in einem Bildbearbeitungsprogramm wie Photoshop oder Fireworks gesetzt und dann nicht zu verändern als Bild abgespeichert (»gebrannt«) wurde. Ein Hauptvorteil dieser Elemente sind ihre uneingeschränkten Gestaltungsmöglichkeiten in Bezug auf die verwendete Schriftart, den Zeilenabstand, das Spacing oder das Kerning. Da die Inhalte einer Website in der Regel als Text vorliegen, ist gebrannte Typo oft ein Hauptträger des Corporate Designs. Auf Grund der schlechten nachträglichen Editierbarkeit sollte jedoch darauf geachtet werden, dass nur dann Texte als Bild verwendet werden, wenn diese sich so gut wie nie ändern. 4. Systemelemente Elemente, die Bestandteil des Betriebssystems oder Browsers sind, werden Systemelemente genannt. Beim Aufbau der Seite werden nicht die Elemente selbst aufgerufen, wie etwa bei Bildern, sondern nur der Befehl, die Elemente aus dem Betriebssystem zu laden. Die Vorteile liegen klar auf der Hand: Sowohl was Schnelligkeit der

Interaktion

.

33

F

Abbildung 6 So unterschiedlich sehen Systemelemente unter Macintosh und Windows aus.

Abbildung 7 E Selten findet man Sites, die mit Systemelementen eher kreativ als informativ umgehen: www.artcenter.edu.

Darstellung als auch leichte Editierbarkeit angeht, gibt es kaum eine Möglichkeit der Navigation, die besser ist. Leider jedoch ist das Design vom jeweils verwendeten Betriebssystem abhängig und somit wenig planbar (Abb. 6). Während sich Checkboxes und Radio Buttons in erster Linie für die Gestaltung von Formularen eignen, findet man Pop-up-Menüs häufig dann wieder, wenn viele gleich geordnete Navigationselemente wie z.B. Produktgruppen oder Länder ausgewählt werden sollen.

34

5. Aktive Navigationselemente Immer dann, wenn bei der Berührung mit der Maus eine Reaktion eines Navigationselementes erfolgt, nennt man dies aktiv. Verbreitet ist vor allem der Rollover-Effekt, oft eingesetzt bei sehr komplexen Menüstrukturen, um dem Nutzer eine bessere Orientierung zu ermöglichen. Doch auch um weitere Informationen zu einem Menüpunkt zur Verfügung zu stellen, sind diese Elemente gut geeignet. Da Rollover in der Regel mit einem JavaScript verwirklicht wird, ist der Effekt nur mit zwei Bildern gleicher Größe zu erreichen, was dieselben Nachteile mit sich bringt wie der Einsatz von gebrannter Typo.

Seiten einrichten

.

Rollover-Effekte mit Dreamweaver 3.0 Mit modernen darstellungsbasierten HTML-Editoren ist es auch für Ungeübte kein Problem mehr, selbst Rollover-Effekte zu erstellen. Unter Dreamweaver funktioniert dies wie folgt:

1. Grundlagen Erstellen Sie in einem Bildbearbeitungsprogramm zwei gleich große Bilder, die sich beim Berühren mit der Maus austauschen sollen. Achtung: Wenn die Bilder nicht exakt gleich groß sind, werden sie verzerrt!

2. Rollover-Bild erstellen Öffnen Sie in Dreamweaver ein neues Dokument und wählen im Menü Einfügen den Unterpunkt Rollover-Bild einfügen, oder klicken Sie auf das entsprechende Objekt im Objekte-Fenster.

Geben Sie im darauf folgenden Fenster Ihre beiden Bilder an. Wenn Sie die Option Rollover-Bild Vorausladen wählen, beschleunigt sich im Browser der Effekt, da beide Bilder geladen werden, auch wenn anfangs nur das Originalbild angezeigt wird.

Interaktion

.

35

In unserem Beispiel verfahren wir mit weiteren Navigationsbegriffen und ihren Rollover-Gegenstücken genauso und speichern das Dokument dann ab.

2. Rollover-Bild erstellen Im Browser werden die Rollover-Austauschbilder bei Berührung mit der Maus angezeigt.

36

Seiten einrichten

.

Strukturierung einer Site: Flexibel, skalierbar, modular Als die Dresdner Bank 1999 ihre Website »relaunchte«, speckte sie diese auch inhaltlich ab. Übrig blieben nach der Überarbeitung über 3000 HTML-Seiten, ein paar hundert PDF-Dokumente und ebenso viele interaktive Werkzeuge. Man kann sich vorstellen, dass eine Website dieser Größenordnung nicht mehr in ihrer Gesamtheit über ein hierarchisches Menü navigierbar ist. Doch was kann getan werden, um wuchernden Inhalten und Navigationen Einhalt zu gebieten? Um eine Lösung zu finden, muss man sich fragen, von welchen Faktoren die Struktur einer Website abhängt. Dazu gehören: E Die Komplexität der Inhalte (horizontal und vertikal) E Die Zielgruppe(n) E Die Zielsetzungen einzelner Bereiche der Site E Die Möglichkeit permanenter Updates durch ein Redaktionsteam E Die Möglichkeit, Daten aus Datenbanken zu beziehen E Das eingesetzte Redaktionssystem E Das Layout Über diese Faktoren sollte man sich beim Aufbau der Site bewusst sein, denn strukturelle Änderungen im Nachhinein bedeuten immer dann, wenn ein Redaktionssystem eingesetzt wird, deutlich höheren Aufwand. Folgende Vorgehensweisen erleichtern es, die meist riesige Menge an Inhalten zu strukturieren: 1. Teamwork »Gestalter müssen sich nicht mit allen Inhalten auseinander setzen, Konzeptern und Textern ist es egal, wie die Navigation aus-

sieht, und Techniker interessieren sich nicht für das Design!« Leider hört man Ähnliches aus allen Lagern, und doch ist es ganz und gar nicht so: Nur wenn alle nötigen Kompetenzen zusammenarbeiten, kann eine sinnvolle und effiziente Struktur geschaffen werden, die allen Anforderungen an eine hervorragende Informationsvermittlung Genüge tut. 2. Zielgruppenorientierung Die meisten Sites haben mehr als eine Zielgruppe. Diese werden mittlerweile nicht mehr wie klassische Marketingzielgruppen (»20–28 Jahre, männlich, 3500 DM Monatsbrutto ...«) definiert, sondern durch die Situation, in der sie sich befinden. Man spricht deshalb auch von »situativen Zielgruppen«. Grob definiert handelt es sich dabei um die dem Besuch einer Site zu Grunde liegende Interessenlage. Zielgruppen können Journalisten, Investoren, bestehende Kunden, Interessenten, Bewerber, Partnerfirmen oder Gewinnspielteilnehmer sein. Vor der eigentlichen Strukturierung der Inhalte sollte man sich fragen, welche relevanten Zielgruppen die Site aufsuchen werden und welche Bedürfnisse diese haben. Am sinnvollsten ist es, diese Bedürfnisse der Gestaltung des Sitekonzeptes zu Grunde zu legen, um dann einzelne Storyboards zu entwickeln. So findet sich der bestehende Kunde mit dem Wunsch, eine Bedienungsanleitung anzusehen, um dann Zubehör zu erwerben, ebenso schnell zurecht wie die Bewerberin, die sich eine Anfahrtsskizze ausdrucken möchte.

Interaktion

.

37

E

Das Ziel ist One 2 One.

EE

Planen Sie vorausschauend.

38

3. Keinen Nutzer interessiert die Hierarchie eines Unternehmens Ob beispielsweise eine Bank unterschiedliche Verantwortliche und Geschäftsbereiche für das Immobiliengeschäft und den Firmenkundenservice hat, ist dem Unternehmer egal, der seine neuen Büroräume finanziert haben will. Denken Sie nicht in inhaltlichen Hierarchien, sondern versuchen Sie auch hier, die Ansprüche der Nutzer vorwegzunehmen. Das muss sich auch im Aufbau der Site niederschlagen: Im Idealfall bekommt jeder Nutzer genau die Inhalte geboten, die ihn, und nur ihn alleine, interessieren – unabhängig von Navigationshierarchien und Firmenstrukturen.

4. Skalierbarkeit und Flexibilität Auch wenn man beim Aufbau einer Site vieles beachten kann, die Zukunft wird man selten vorhersehen können: Neue Bereiche und Nutzergruppen können hinzukommen, Geschäftsbereiche können wegfallen, und plötzlich funktioniert der gesamte Aufbau der Site nicht mehr. Um Änderungen wird man nie herumkommen, doch hilft es durchaus, bereits am Anfang das Navigationssystem und den Aufbau einzelner Templates so zu gestalten, dass eine Skalierbarkeit von 50 % mehr oder weniger inhaltlichen Elementen problemlos vonstatten gehen kann.

Seiten einrichten

.

Interaktion

.

39

Gestalterisches

42 Layout im Web 42 Die Größe 45 Das Raster 47 Tables 48 Frames oder No-Frames

50 Textgestaltung 50 Einheitlichkeit 50 Satzlayout 51 Vordefinierte HTML-Stile 52 Verwendung von Schriftarten 54 Schriftgrößen 55 Einsatz von Cascading Style Sheets 56 Text als Bild

40

Gestalterisches

.

58 Farbe und Bild 58 Farbsysteme 59 Grundlagen der Farbverwendung unter HTML 60 Bildformate und Bildreduktion 63 Bildrechte

64 Animation im Netz 64 Die Aufgaben von Animationen im Netz 68 Die technische Umsetzung

Gestalterisches

.

41

Layout im Web Grundlagen der Gestaltung Dass Gestaltung im Netz anders funktioniert, ist klar. Aber worauf kommt es wirklich an, und wie kann man die gröbsten Fehler vermeiden?

Bildschirme funktionieren anders als Papier, Browser verhalten sich anders als Zeitschriften, und Internet-User bewegen sich anders durchs Netz als Fernsehzuschauer durch die Tagesschau. Diese eigentlich sehr einfache Erkenntnis führt zum Schluss dass man für den Screen und besonders für das WWW andere Gestaltungsmethoden anwenden muss bzw. dass zur klassischen Gestaltung viele neue Ansätze hinzukommen. Lange Texte am Bildschirm sind sehr unangenehm zu lesen, lieber druckt man sie aus, oder freut sich über Layouts, die dem Medium gerecht werden. Grundlage jeder Website sollte ein Raster sein, das festlegt, wo welche Bereiche der Seite positioniert werden, woran der User sich orientieren kann und wie man innerhalb einer klaren Aufteilung Spannung erzeugen kann.

42

Die Größe Beim Anlegen eines Grundrasters, das übrigens auch jedem Buch und jeder Zeitschrift zu Grunde liegt, soll man sich im Klaren sein, dass man sich grundsätzlich nie darauf verlassen kann, auf allen Browsern und allen Plattformen die identische Darstellung zu erzielen. Das fängt mit der Größe der Monitore an, die von 640 x 480 Pixel bis zu 1920 x 1080 Pixel reichen kann, und endet bei der individuellen Größe des Browserfensters, das sich der User beliebig groß aufzieht. Eine Site sollte so gestaltet sein, dass sie bei jeder nur möglichen Variante noch halbwegs gut aussieht und vor allem Navigation und Inhalt immer zu sehen sind. Bei der Optimierung geht man meistens von einer Größe von 800 x 600 Pixel aus, wobei man nicht davon ausgehen sollte, dass jeder Nutzer sein Browserfenster so weit geöffnet hat. Da die Mehrzahl der Monitore mittlerweile aber mindestens diese Größe hat, kann das Fenster auf alle Fälle auf dieses Format gebracht werden.

Gestalterisches

.

F

G Abbildung 1 Tati Online (www.tati.fr): Selbst bei 640 x 480 Pixel ist die Navigation im unteren Frame noch ganz zu sehen, der Inhalt allerdings nicht mehr.

F

G Abbildung 2 www.allianz-versicherung.de: Selbst bei minimalem Browserfenster sind Navigation und Inhalt noch voll nutzbar und zu erkennen.

Hilfreiche Sites Unter www.statmarket.com und www.webhits.de findet man aktuelle Zahlen und Statistiken zu Monitorgrößen, Browserversionen und allem, was einem User das Leben schwer macht.

Layout im Web

.

43

F G Abbildung 3 Bei Siemens-Knows.de ist der Content immer gleich groß, nur die weißen Frames am Rand verkleinern oder vergrößern sich. Optimiert ist allerdings auf 800 x 600 Pixel (www.siemensknows.de).

F G Abbildung 4 Die Site von Hard Candy (www.candy.com) ist komplett in Flash erstellt, skaliert sich also auf alle Größen.

44

Gestalterisches

.

G

Abbildung 5 Netscape- und Explorer-Fenster auf Mac und PC in 800 x 600 Pixel. Der rote Bereich zeigt die maximale Gestaltungsgröße.

Das Raster Das Layout einer Site wird meistens erst einmal in Photoshop erstellt. Man macht also einen Screenshot eines Browserfensters von 800 x 600 Pixel mit den gängigen Menüs und erhält so die Grundfläche zur Gestaltung. Und die erscheint einem dann meistens zu klein! Auf dieser festgelegten Fläche legt man nun ein Raster an, mit dem man die Navigation verschiedener Hierarchien und die Inhalte, also Bilder und Texte, ausrichtet. Dieses Raster sollte flexibel sein, sich also bei Verkleinerung des Fensters skalieren.

Man muss darauf achten, dass ein ganz grobes Grundraster allen Seiten zu Grunde liegt, um eine gewisse Durchgängigkeit zu gewährleisten. Je komplexer der Auftritt wird, umso stärker kann das Raster jedoch variiert werden. Und um Spannung zu erzeugen oder Inhalte besonders hervorzuheben, kann man das Raster durchaus auch brechen, allerdings sollte das bewusst geschehen und nicht rein zufällig passieren.

Layout im Web

.

45

G

Abbildung 6 Bei der Allianz wird der flexible Content-Bereich von zwei festen Spalten rechts und links umrahmt.

G

Abbildung 7 Der sehr designorientierte Auftritt von Habitat nimmt das Raster direkt als Gestaltungsmittel auf (www.habitat.net).

Feste Elemente Feste Elemente wie die Navigation und das Logo sollten sich aber möglichst immer an der gleichen Stelle befinden und nicht springen, da sie dem User zur Orientierung dienen.

46

Gestalterisches

.

G

Abbildung 8 E Die erste der beiden Tables hat eine prozentuale Größe und ist auch bei verkleinertem Browserfenster ganz zu sehen. Die untere hingegen verschwindet auf der rechten Seite.

Tables Um Elemente auf einer HTML-Seite zu positionieren, verwendet man so genannte Tables. Durch sie kann man Elemente ziemlich genau positionieren, allerdings immer nur relativ und nicht anhand von x- und y-Koordinaten. Tabellen kann man entsprechend dem Raster prozentual anlegen oder ihnen fixe Größen geben. Es bietet sich zum Beispiel an, der Tabelle, die alle Inhalte umfasst, eine Größe von 80 % zu geben. Der Container nimmt dann eine Breite von 80 % des Browserfensters ein, egal auf welche Breite es gezogen wird.

Text allerdings könnte man in fixe Tabellen setzen, da er ja nicht weiter als zehn bis fünfzehn Wörter pro Spalte laufen sollte, und es immer noch sehr häufig vorkommt, dass Texte bei breit aufgezogenem Browserfenster über die ganze Seite laufen und sehr schlecht zu lesen sind. Tables können beliebig kombiniert und verschachtelt werden, am Anfang lohnt es sich, immer mal wieder den Sourcecode von Seiten anzusehen, bei denen das Layout besonders gut gelöst ist.

Der Lesbarkeit zuliebe Texte sollten immer in Tabellen gesetzt werden, um die Lesbarkeit zu garantieren.

Layout im Web

.

47

G

Abbildung 9 E Komplexe Frame-Struktur bei den Nestlé Future-Brand-Investigators, die es ermöglicht, die Erscheinung des Auftritts sehr stark zu kontrollieren (www.nestle.fbi.de).

Frames oder No-Frames Während man auf einer HTML-Seite mit Tables gestaltet, hat man mit Frames die Möglichkeit, verschiedene HTML-Seiten gleichzeitig im Browser darzustellen. Das bietet sich besonders an, um die Navigation getrennt von den Inhalten zu halten und den Aufbau der Seite besser kontrollieren zu können. Mit Frames kreiert man eine so genannte Shell Shell, die entweder den ganzen Auftritt umgibt oder auch nur aus einer Kopfzeile besteht. Wichtig daran ist, dass sie während der ganzen Zeit, in der sich der User auf der Site befindet,

Zur Vorbereitung Klären Sie zu Beginn des Projektes mit allen Beteiligten, ob Frames eingesetzt werden oder nicht.

48

stehen bleibt und sich nicht bei jedem Klick neu lädt. Nur so hat der Nutzer wirklich das Gefühl, sich auf einer geschlossenen Site zu befinden, und der Fluss beim Surfen wird nicht durch das komplette Neuladen der Seite und den damit verbundenen grauen Zwischenscreens unterbrochen. Das Logo oder die Hausfarbe bleiben so permanent sichtbar. Außerdem ist es deutlich einfacher, sich an einer Navigationsleiste zu orientieren, die nicht mit dem Inhalt nach oben wegscrollt oder bei jedem Klick verschwindet und sich neu lädt. Das subjektive Gefühl für die Loading-Time ist auch deutlich kürzer, wenn nur der Inhalt wechselt. Doch es gibt natürlich auch einige Argumente gegen Frames, die immer wieder vehement vertreten werden.

Gestalterisches

.

F G Abbildung 10 Scrollt man bei No-Frame-Sites etwas weiter nach unten, verliert man den Absender und die Navigation (www.stern.de und www.dooyou.de).

Zu viele Frames auf einer Seite wirken sich nachteilig auf die Ladezeiten und den Aufbau aus. Mehr als drei Frames können da schon zu Beschwerden führen. Außerdem ist es schwieriger, die einzelnen Unterseiten in einem Frameset als Bookmarks zu setzen. Es wird nämlich immer der Frame »gebookmarkt« in dem man zuletzt geklickt hat. Im ungünstigsten Falle also der Navigations-Frame. Oder aber man bekommt immer nur die Einstiegsseite als Link, nie aber den Unterbereich. Dieser Problematik kann man allerdings mit Java-Script entgegenwirken. Die letzten Argumente gegen Frames sind zum einen die Unverträglichkeit mit vielen Datenbanken Datenbanken. Die meisten Seiten wie Stern-

Online, Spiegel-Online, CNN Online haben keine Frames, weil es deren Datenbank nicht erlaubt. Außerdem schließt man mit Frames bestimmte Nutzergruppen aus, deren Browser diese Technik nicht unterstützen. Einige Seiten bieten deshalb immer noch eine No-FrameVariante an. Wofür man sich letztendlich entscheidet, hängt von der Strategie des Auftritts und der anvisierten Zielgruppe sowie dem Anspruch der Site ab. Allerdings kann es nicht sein, dass so eine Entscheidung voreingenommen und überstürzt noch vor Beginn der Konzeptionsphase getroffen wird, ohne im Team darüber diskutiert zu haben.

Layout im Web

.

49

Textgestaltung Typografie und Layout von Texten im Browser HTML-Seiten sind die wohl feindlichste Umgebung für Typografie, die man sich vorstellen kann. Zeilenabstände, Kerning, Silbentrennung, absolut definierte Schriftgrößen? Nichts davon ist in reinem HTML möglich.

Und doch hat es Sinn, sich mit diesem Thema auseinander zu setzen, denn kaum eine gestalterische Disziplin wird von vielen Webdesignern so sehr außer Acht gelassen wie die Typografie. Vor allem sollte den Screendesigner interessieren, wie sich Buchstaben, Wörter, Sätze, Absätze und Seiten zueinander verhalten müssen, um eine bestmögliche Erfassbarkeit des Inhaltes zu bieten. Und kaum ein anderes Medium macht es dem Auge so schwer wie der Bildschirm. Gründe genug, um ein paar Grundlagen zu klären.

Einheitlichkeit Beim Lesen springen unsere Augen permanent hin und her, sie überfliegen einen Satz, und wann immer unser Gehirn den Sinn eines Wortes nicht ganz erfasst hat, zwingt es die Augen, zu diesem Wort zurückzukehren und es im Zweifelsfall Buchstabe für Buchstabe noch einmal zu lesen. Da dieser Vorgang auch am Anfang einer Zeile geschehen kann, müssen die Augen schnell zum Ende der vorigen Zeile springen können. Was bedeutet diese Art der

50

Wahrnehmung für den Gestalter? Erstens: Rechtsbündiger oder zentrierter Fließtext am Bildschirm ist tabu. Zweitens: Texte über mehrere Seiten hinweg sollten grundsätzlich identisch aufgebaut sein, damit die Erfassbarkeit einzelner Elemente nicht immer wieder neu erlernt werden muss.

Satzlayout Eine HTML-Seite wird immer von oben links nach unten rechts vom Browser eingelesen. Gibt es keine natürlichen Sperren, wie Tabellen oder Bilder, so läuft ein Text in voller Breite des Browserfensters weiter. Die Lesbarkeit solcher Buchstabenwüsten ist entsprechend gering, und der Besucher wird es alsbald aufgeben, den Inhalt erfassen zu wollen. Wir haben es in der Hand, Seiten so zu gestalten, dass man die Inhalte gerne wahrnimmt.

Gestalterisches

.

F

Abbildung 1 Ein einheitliches und aufgeräumtes Layout ist bei umfangreichen Inhalten unbedingt notwendig.

Faustregeln Es gibt einige Faustregeln für das Satzlayout von HTML-Seiten: E Elf Wörter je Zeile können vom Auge am Bildschirm noch leicht erfasst werden. Durch den Einsatz von Tabellen können Zeilen beschränkt werden. Da die meisten Nutzer an den eingestellten Standardschriften und Größen des Browsers nichts verändern und das Browserfenster meist nicht größer oder kleiner als 800 x 600 Pixel ist, gilt: Wenn auf einer Seite nur eine Tabellenspalte mit Text platziert ist, sollte diese nie größer sein als 60 % der Seitenbreite. E Bild-Text-Klammer Oft sind Bilder aussagekräftiger als Texte. Wenn jedoch beide zusammengehören, sollte dies auch optisch klar sein. Als Faustregel gilt: Text, der rechts neben einem Bild steht, wird eher im Zusammenhang mit dem Bild wahrgenommen, als wenn er links davon stünde. E Zu viele Links sind irritierend Links zu weiterführenden Inhalten und Themen sind zwar durchaus sinnvoll, jedoch hat es keinen Sinn, diese wild im Fließtext

E

zu verstreuen, da der Leser dadurch nur abgelenkt wird. Sinnvoller ist es, Links und Zusatzinformationen am Ende oder Rand eines Artikels zu platzieren. Klicken statt scrollen Die meisten Nutzer bewegen sich lieber horizontal als vertikal durch eine Website. Die höchste Aufnahmebereitschaft für Texte können Sie dann erwarten, wenn Sie diese in sinnvolle Einheiten aufteilen, die auf verschiedenen HTML-Seiten angeordnet sind. Hier gilt jedoch: Links, die vor und zurück springen, sind im Text unbedingt notwendig. Eine druckbare Version mit dem gesamten Text auf einer gesonderten Seite ist äußerst empfehlenswert.

Vordefinierte HTML-Stile Einige wenige Textauszeichnungen können von allen modernen Browsern interpretiert werden. Auch wenn damit keineswegs eine dem Printbereich ähnliche Gestaltung erzielt werden kann, sind jedoch minimale Möglichkeiten gegeben.

Textgestaltung

.

51

Textauszeichnungen Ergebnis

Textauszeichnung

TeleType

...

Fett

... oder <STRONG> ...

Kursiv

... oder <EM> ...

Unterstrichen

...

Einrückung durch den Listen-Tag ohne Verwendung des

-Tags

...

Blinkende Anzeige

...

Hochstellen

<SUP> ... < /SUP>

Tiefstellen

<SUB> ...

Farbe einzelner Textpassagen

...

Überschriften

...

bis

...

Gibt als erster Tag nach dem -Tag die Schriftgröße für das gesamte Dokument an. Grundeinstellung ist 3.



Verwendung von Schriftarten Sowohl die beiden Browserhersteller Microsoft und Netscape als auch große Typo-Häuser lassen sich einiges einfallen, um verschiedene Schriftarten in HTML-Dokumenten möglich zu machen. Die Einbindung von Schriften ist jedoch immer noch mühsam und hat bei den wenigsten Besuchern den gewünschten Effekt. Ursprünglich war in HTML der Einsatz verschiedener Typen nicht vorgesehen, man glaubte, verschiedene Stilformate reichen aus, um Dokumente ordentlich gegliedert darzustellen. Diese Stile (Fett, Kursiv, TeleType, Überschrift etc.) können auch heute noch mit jedem Browser angesehen werden. Wenn der Autor eines HTML-Dokumentes keine Schriftart vorgibt, so wird die – für den jeweiligen Stil – voreingestellte des Browsers verwendet. Schön ist das nicht immer. Theoretisch kann jede auf dem Rechner des Gestalters installierte Schriftart eingebunden

52

werden, doch wird diese nur dann beim Besucher der Site angezeigt, wenn sie auch aktiv von System geladen ist. Sicherer ist es also in jedem Fall, sich auf die Schriftarten zu verlassen, die zusammen mit dem Betriebssystem ausgeliefert werden. Bei Windows-Nutzern sind dies hauptsächlich: Arial, Times Roman, Courier New, Symbol und Wingdings. Bei Mac-Nutzern heißen die entsprechenden Schriften: Geneva, Times, Courier, Symbol und Zapf Dingbats. Anhand der unterschiedlichen Namen kann man sich vorstellen, welche Probleme auftreten werden, wenn ein Gestalter am Mac als Fließtextschrift die serifenlose Geneva angibt, beim Besucher am PC aber nur die serifenlose Arial zur Verfügung steht. Der Text wird in der Standardschriftart des Browsers angezeigt, und das ist oft die Serifenschrift Times. Dieses Problem kann jedoch umgangen werden, indem grundsätzlich alternative Schriftarten angegeben werden.

Gestalterisches

.

Zuweisung von Schriftarten in Dreamweaver 3.0 1. Schritt 1 Wählen Sie im Popup-Menü Schrift die Auswahl Schriftartenliste bearbeiten.

2. Schriftarten hinzufügen Wählen Sie nun im Menü Schriftartliste die Schriften aus, die Sie hinzufügen möchten.

Die hinzugefügten Schriften können nun in der Auswahl angeklickt werden.

Textgestaltung

.

53

Abbildung 2 E Der Nutzer hat durch die Voreinstellungen des Browsers (noch) die Möglichkeit, ausschließlich eigene Schriftarten angezeigt zu bekommen.

Schriftgrößen Schriftgrößen unter HTML können mittels zweier unterschiedlicher Systeme definiert werden. Generell liegt beiden Systemen die Annahme zu Grunde, dass jeder Browser eine Grundeinstellung der Schriftgröße hat, die als Basis für die Berechnung davon abweichender Größen dient. Wenn mittels des ersten Systems eine Schriftgröße angegeben wird, lautet der dazugehörige Befehl beispieltext

Benutzerdefinierte Einstellungen Welches System auch immer verwendet wird, eine Sicherheit darüber, wie der gestaltete Text endgültig bei den Besuchern der Seite dargestellt wird, gibt es nicht. Schließlich kann jeder selbst in den Voreinstellungen des Browsers definieren, welche Schrift und Größe er gerne verwenden möchte.

54

wobei size="3" der Grundeinstellung entspricht, d.h. ein Nutzer, dessen Standardschriftgröße im Browser mit 12 angegeben wurde, sieht diesen Beispieltext in 12 Punkten. Nach diesem System wird eine größere Schriftart erwirkt, indem man Werte zwischen 4 und 7 angibt, also beispielsweise beispieltext

was dann einer real dargestellten Größe von 15 Punkten entspricht (3 = 12 Punkt, 4 = 13 Punkt, 5 = 14 Punkt usw.). Eine kleinere Darstellung erhält man analog mit den Werten 1 und 2. Das zweite System ist etwas logischer und auch leistungsfähiger, da alle Werte zwischen –7 und +7 angegeben werden können, wobei 0 der voreingestellten Größe im Browser entspricht: Beispieltext

Allerdings können nur Größen zwischen –2 und +4 auf allen Browsern dargestellt werden, die restlichen werden oft ignoriert bzw. falsch angezeigt.

Gestalterisches

.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">

Beispieltext

G

Listing 1

Einsatz von Cascading Style Sheets Mit der Einführung von CSS oder »Cascading Style Sheets« wurde seitens des World Wide Web Consortiums versucht, die Unzulänglichkeiten der Textformatierung in HTML zu umgehen. Leider sind sich jedoch die beiden Browser-Rivalen Netscape und Microsoft bis heute nicht einig darüber, ob und in welcher Form CSS interpretiert werden, was dazu führt, dass auch hier das Ausprobieren die einzig mögliche Form von Sicherheit ist. CSS definieren das Erscheinungsbild von Elementen wie Schriftart, Farbe oder Wortabstand und sind somit bestens geeignet, um professionell mit Texten arbeiten zu können. Die CSS-Festlegungen sind vergleichbar mit Formatvorlagen in Quark oder Word. Sie be-

.

finden sich im Head-Bereich einer Seite und gelten grundsätzlich für das ganze Dokument. Einzelne Elemente wie Absätze oder Listen werden dann auf der Seite nur noch mit einem Style versehen, der vorher im Head festgelegt wurde. Im Quellcode sieht das dann wie oben dargestellt aus: Es ist möglich, einen Stil auf mehrere Dokumente anzuwenden, indem das Style Sheet selbst extern als Datei gespeichert wird. So können Sie beispielsweise das Aussehen aller Headlines einer Site verändern, indem Sie einfach im externen Style Sheet ein anderes Format festlegen. Zur Definition von Style Sheets lesen Sie bitte auch Kapitel »DHTML«.

126

Textgestaltung

55

E

Text als Bild So unzulänglich wie die Gestaltungsmöglichkeiten von Text sind, es spielen immer noch viele Webdesigner mit dem Gedanken, Fließtext in einem »ordentlichen« Programm zu gestalten, um ihn dann als Bild gespeichert ins Web zu schicken. Wenn es nicht unbedingt erforderlich ist: Lassen Sie es besser bleiben! Diese Art der Textdarstellung kostet extreme Ladezeiten und ist nicht editierbar. Wenn es sich gar nicht anders machen lässt, weil beispielsweise eine Hausschrift bei allen Headlines verwendet werden muss, so gibt es einige Regeln für den Einsatz von Text als Bild.

56

Text als Bild speichern: Tipps E Geringe Dateigröße Reduzieren Sie die Anzahl der Farben auf das Nötigste. Der Verzicht auf geglättete Schrift (»Anti-Alias«) reduziert die verwendeten Farben auf Textfarbe und Hintergrundfarbe und spart somit Ladezeiten. E Knapp zuschneiden Noch mehr Ladezeit können Sie sparen, wenn Sie ein Bild an den Kanten so knapp wie möglich zuschneiden. E Als GIF speichern Auf Grund der unterschiedlichen Komprimierung ist das Format GIF besser für Linien (und damit auch Schrift) geeignet als ein JPEG. Texte sollten deshalb ausnahmslos als GIF gesichert werden.

Gestalterisches

.

Textgestaltung

.

57

Farbe und Bild Richtige Verwendung von Farben und Bildern Abgesehen von Texten sind Bilder und farbige Elemente die wichtigsten Gestaltungsmittel im Webdesign. Vor allem Farben eignen sich hervorragend für die Codierung unterschiedlicher Bereiche oder inhaltlicher Ebenen. Wer die Möglichkeiten von farbigen Elementen und Bildern richtig nutzen kann, minimale Ladezeiten beachtet und immer inhaltsorientiert arbeitet, hat schon viel gewonnen.

Farbsysteme Bei der gestalterischen Arbeit für Bildschirmmedien beschäftigen wir uns grundsätzlich nur mit einem Teil des RGB-Farbraumes, der so genannten HTML-Palette. Wer aus dem Bereich der Gestaltung von Printmedien kommt, wird sich schon häufiger mit der Umwandlung von RGB- in CMYK-Dateien herumgeschlagen haben. Für alle anderen hier eine kleine Farbenlehre. Das RGB-Modell Monitorfarben bauen auf dem RGB-Modell (Rot, Grün, Blau) auf. Die drei Primärfarben werden als Lichtpunkte erzeugt, die auf unsere Netzhaut treffen. Je mehr Farben wir ineinander mischen, desto heller wird der Farbton.

Einfluss auf die Darstellung von Farben E Die Art des Bildschirmes (z.B. Bildröhre oder LCD) E Eingestellte Helligkeit und Kontrast E Farbprofile mittels Software E Darstellungsfähigkeiten der Grafikkarte

58

Das RGB-Farbmodell ist deshalb additiv. Da die »Farbe« Weiß auf dem Bildschirm die größte Helligkeit hat, wird unser Auge hier auch am meisten gefordert. Farben wirken im RGBRaum deutlich voller und klarer, werden jedoch je nach Bildschirm unterschiedlich dargestellt. Leider haben wir als Gestalter auf keinen dieser Faktoren Einfluss, da wir in der Regel ja nicht wissen, von welchem Bildschirm aus unsere Seiten betrachtet werden. Das CMYK Modell Das CMYK-System (Cyan, Magenta, Yellow, Black) hingegen wird beim Druck verwendet und findet am Bildschirm nie Verwendung, da es mit Farbpigmenten arbeitet, die auf einen Träger wie zum Beispiel Papier aufgebracht werden. Die verschiedenen Pigmente reflektieren das Licht. Je mehr Farben (Pigmente) man überlagert, umso dunkler wird der Ton. Man spricht deshalb auch vom subtraktiven Farbmodell. Bei der Umwandlung von RGB-Dateien in das CMYK-Format gehen sehr viele Farb-

Gestalterisches

. .

G

Abbildung 1 Die subtraktive Farbmischung des CMYK-Farbraumes

G

informationen verloren. Deshalb sollten immer – sofern vorhanden – die originalen RGB-Bilddaten verwendet werden und nicht die bearbeiteten im CMYK-Format.

findet sowohl Einsatz in Webeditoren für die Farbigkeit von Tabellen, Texten oder Hintergründen als auch beim Komprimieren von Bildern in das GIF-Format. Tests haben ergeben, dass es tatsächlich nur 212 websichere Farben gibt, da der Internet Explorer unter Windows die Farben #0033FF (RGB: 0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) und #33FF00 (51,255,0) nicht korrekt wiedergibt. Davon sollte man sich jedoch nicht allzu sehr stören lassen, da sich dies mit jeder neuen Browsergeneration wieder ändern kann. Wenn Farben innerhalb des HTML-Quellcodes verwendet werden sollen, muss man sich leider mit der Definition von Farbwerten anhand des Hexadezimal Hexadezimal-Modells auseinander setzen: Die Formatierung einer blauen Headline erzeugt in HTML beispielsweise den Ausdruck

Grundlagen der Farbverwendung unter HTML Im RGB-Farbraum stehen theoretisch Millionen von Farben zur Verfügung. Theoretisch. Praktisch haben wir genau 216 Farben, auf die wir uns verlassen können. Woran liegt das? Farbmonitor und Grafikkarten mit einer niedrigen Darstellungskapazität können zumindest 256 Farben erzeugen. Die Ansteuerung dieser Farben übernimmt das Betriebssystem. Wenn man nun die Paletten der beiden Betriebssysteme Windows und MacOS vergleicht, so bleiben genau 216 Farben übrig, die in beiden Paletten identisch sind. Diese Farben werden in der so genannten HTML-Palette (auch WWW-Palette oder Websafe Colours) zusammengefasst. Diese

Abbildung 2 Die additive Farbmischung des RGB-Farbraumes

Beispiel Headline

Farbe und Bild

. .

59

F

Abbildung 3 Die Macintosh-Systemfarbpalette

Abbildung 4 E Die Windows-Systemfarbpalette

F

Abbildung 5 Die HTML-Farbpalette

Die Definition von Farbe erfolgt dabei immer anhand eines Hexadezimalwertes wie »6699FF«. Dieser Wert bildet die drei Zahlenpaare des RGB-Farbraumes ab, entspricht also »RRGGBB«, wobei jede Zahl zwischen 0 und 9 und jeder Buchstabe zwischen A und F enthalten sein darf. »FF0000« ergibt also ein reines Rot, »00FF00« ein reines Grün und »0000FF« ein reines Blau. Die websicheren 216 Farbtöne sind nur solche mit den Zahlen-/Buchstabenpaaren 00, 33, 66, 99, CC oder FF (die entsprechenden RGBWerte dazu lauten: 0, 51, 102, 153, 204 und 255).

60

Bildformate und Bildreduktion Zuerst einmal vorweg: Alle Bilder für das Web müssen mit einer Auflösung von 72 dpi gesichert werden. Momentan sind zwei Bildformate im Web verbreitet: die Formate GIF und JPEG. Beide dienen in erster Linie der Reduzierung von Dateigrößen und damit Ladezeiten, sind jedoch grundverschieden in der Art der Komprimierung und ihrer Eignung für bestimmte Einsatzgebiete.

Gestalterisches

. .

F

Abbildung 6 Vergleich der Darstellungsqualitäten der beiden Bildformate

Das GIF GIF-Bilder eignen sich in erster Linie für die Darstellung von Linien und Texten, bieten hervorragende Möglichkeiten der Reduktion und können auch als Animationen (Animated GIF) eingesetzt werden. Sie sind nicht geeignet für fotografische Abbildungen und Motive, bei denen es auf hohe Farbtreue ankommt. GIFs werden erzeugt, indem das Bildbearbeitungsprogramm (z.B. Adobe Photoshop oder Macromedia Fireworks) jedes einzelne Pixel in die nächstliegende HTML-Farbe umwandelt. Je weniger der potenziellen 216 Farben verwendet und damit abgespeichert werden, desto kleiner wird die Datei. Da die meisten Farben nicht vorhanden sind, wird die Abbildung in der Regel extrem flächig und unschön. Um diesen Effekt zu vermeiden, verfügen fast alle Programme über die Option, ein »Dithering« anzuwenden. Soll zum Beispiel eine Fläche in Mittelgrau dargestellt werden (und es läge in der HTML-Palette nicht vor), so wird diese Fläche durch abwechselnd hell- und dunkelgraue Pixel gerastert. Der vom Auge

wahrgenommene Farbton entspricht dann in etwa dem Ausgangston. Ohne Dithering würde die gesamte Fläche durch einen nächstliegenden unähnlichen Ton ersetzt. Bei der Farbindizierung bestehen verschiedene Möglichkeiten: 1. Grundsätzlich sollten Bilder immer in Bezug zu der WWW-Palette gerechnet werden. Sie umfasst 216 Farben, die auf den meisten Plattformen ähnlich dargestellt werden. Dies ist besonders wichtig, wenn die Zielgruppe noch Monitore mit 256 Farben Bildtiefe hat. 2. Die meisten Monitore können mittlerweile mehr als 256 Farben darstellen, sodass die Verwendung der HTML-Palette für Bilder nicht mehr zwingend notwendig ist. Geht man davon aus, dass vorwiegend hochauflösende Monitore verwendet werden, kann man Bilder auch mit einer flexiblen Palette komprimieren, d.h. mit den 256 Farben, die am häufigsten in dem Bild verwendet werden.

Farbe und Bild

. .

61

Abbildung 7 E Effekte der Datenreduktion beim JPEG

3. Weiß man, welches Betriebssystem bei den Benutzern existiert, z.B. bei der Gestaltung für ein Intranet, könnte theoretisch auch eine Systempalette verwendet werden. Diese Option sollte jedoch nie gewählt werden, da sie bei einer Veränderung der Systemlandschaft extrem viel Arbeit nach sich ziehen würde. Das JPEG Die Verwendung von JPEGs ist immer dann angebracht, wenn eine gute Bildqualität erforderlich ist, da Millionen von Farben unterstützt werden. Das Format eignet sich für fotografi-

Probleme mit der Dateigrösse vermeiden Wenn Sie ein JPEG in ein GIF verwandeln, werden durch das verwendete Komprimierungsverfahren sehr viele Farben gespeichert. Dadurch wird das GIF sehr groß. Verwenden Sie deshalb grundsätzlich als Ausgangsbild ein TIF oder PICT.

62

sche Abbildungen, nicht aber für Strichzeichnungen oder Schrift. JPEGs erzeugt man auch mit Hilfe von Bildbearbeitungsprogrammen. Die Reduzierung der Datenmenge erfolgt bei diesem Format durch einen anderen Komprimierungsvorgang: Bei der Umwandlung in das JPEG-Format sind Bildpunkte nicht mehr einzeln sichtbar wie beim GIF. Stattdessen werden ähnliche Flächen durch mathematisch berechenbare Farbverläufe dargestellt. Die Anzahl der Farben hat beim JPEG keinen Einfluss auf die Dateigröße, da immer Millionen Farben verwendet werden können. Auf Bildschirmen mit weniger Farben wird automatisch eine andere Darstellungsqualität erzeugt, indem fehlende Farben ersetzt werden. Je schlechter, also unschärfer die Darstellung des Bildes sein darf, umso kleiner wird die Datei. Weitere Hinweise zur Erzeugung von GIF und JPEG finden Sie in Kapitel »Macromedia Fireworks« (S. 82).

Gestalterisches

. .

Bildrechte Kennen Sie das Ammenmärchen von Bildern, die zu mehr als 70 % verändert wurden und somit frei von Rechten sein sollen? Leider stimmt dies nicht: Grundsätzlich fallen bei fast jedem professionell erzeugten Bild Rechte an, die auch bezahlt werden müssen. Dabei ist es egal, ob nur ein kleiner Ausschnitt verwendet wurde oder das Bild bis zur Unkenntlichkeit weichgezeichnet ist. Mittlerweile ist die Entwicklung der digitalen Wasserzeichen auch in der Lage, solche mehrfach bearbeiteten Bilder wiederzuerkennen. Bevor man mit der Bearbeitung von Bildern beginnen kann, muss also sichergestellt werden, dass die Bildrechte auch für die OnlineVerwertung gesichert sind. Das gilt insbesondere ab dem Zeitpunkt der Veröffentlichung.

Für Layoutzwecke können die meisten Bilder auch ohne Copyright verwendet werden, es empfiehlt sich jedoch, die Kosten im Vorfeld zu klären. Bei Fotografen und professionellen Bilderhändlern bemisst sich die Höhe des Preises in der Regel anhand des Einsatzes (Homepage oder Folgeseite, internationale oder landesweite Domain), der Dauer der Verwendung und anderer Faktoren. Es ist fast immer teurer, die Rechte für eine Online-Verwendung im Nachhinein zu erwerben, als sich diese von Anfang an zu sichern.

Farbe und Bild

. .

63

Animation im Netz Das Web erwacht zum Leben Bewegte, vertonte Bilder erzielen oft eine viel stärkere Wirkung als lange Texte. Mit der Entwicklung der Animationstechniken verändert sich das Internet und eröffnet ungeahnte Möglichkeiten.

In den ersten Jahren des WWW waren Text und Bild die einzige Möglichkeit, Inhalte zu transportieren. Emotionen zu wecken, den User mitzureißen, komplexe Sachverhalte darzulegen oder einfach die unzähligen Möglichkeiten digitaler Medien zu nutzen, das war kaum möglich. Doch durch die technische Weiterentwicklung und die Einführung immer komplexerer Animationen und Interaktionen entstanden Sites, von denen man zu Beginn kaum geträumt hätte.

Die Aufgaben von Animationen im Netz Animationen im WWW können zu verschiedensten Zwecken eingesetzt werden. Noch bestimmen die Bandbreiten ihren Einsatz,

Animationen für alle Unter http://www.animfactory.com/ finden sich zahlreiche Animationen zum Weiterverwenden.

64

aber auch mit einfachen Methoden wie GIFAnimationen kann man an Sites ganz anders herangehen. Dekoration Von kleinen blinkenden Herzen bis hin zu animierten Figuren, die sich über die Site bewegen, werden Animationen auf Tausenden von Seiten eingesetzt, um sie zu schmücken und nicht mediengerechte Inhalte zu kaschieren. Diese Gestaltungselemente der Kategorie »nur schön« sind meistens überflüssig, da sie nur Ladezeiten erzeugen und nichts zum Inhalt beitragen (Abb. 1). Anders verhält es sich bei Animationen, die wirklich bewusster Teil eines visuellen Konzeptes sind und deutlichen Einfluss auf die Wahrnehmung einer Site haben. Bestes Beispiel für die Entwicklung von Animationen im Netz findet man auf der Site von Volume One, einer New Yorker Design-Company, die seit 1997 jedes Vierteljahr ein Update eines Teilbereiches ihrer Seite macht, vollkommen zweckentfremdet, sehr schön und immer mit den neuesten technischen Features (Abb. 2).

Gestalterisches

. .

F

Abbildung 1 Die zehn Phasen einer rein dekorativen Animation von animfactory

G

Abbildung 2 Drei Seasons Volumen One und das Pop-up, über das man sich das ganze Archiv der Animationsgeschichte betrachten kann.

Animation im Netz

. .

65

G

Abbildung 3 Intro-Animation zur Einstimmung auf den Cyberpirates-Shop (www.cyberpirates.de).

Einführung und Unterhaltung Weit verbreitet sind auch die so genannten »Intro-Animationen«. Ihre Aufgabe ist es, die Site, das Produkt oder das Unternehmen einzuführen und vorzustellen und den User auf die Site einzustimmen. Man versucht den Intros oft einen besonders unterhaltsamen Charakter zu geben, um die nicht ganz so aufregend gestalteten Inhalte auf der folgenden Site aufzupeppen. Hat das Intro nur eine Feigenblattfunktion, sollte man sich besser nochmals über die generelle Aufbereitung der Site Gedanken machen.

66

Illustration Ist die Animation nicht beliebig austauschbar, sondern auf den spezifischen Content abgestimmt, spricht man von einer Illustration, die Inhalte unterstreicht, sie ergänzt und im Kopf des Users weitere Bilder entstehen lässt. Eine gute Illustration bildet den dazugehörigen Inhalt nie eins zu eins ab, sondern erweitert ihn.

Gestalterisches

. .

F

Abbildung 4 Animationen in Flash und QuickTime VR auf der Adidas-Site. Der Schuh ist in alle Richtungen drehbar (www.adidas.com).

Hervorhebung und Animation Das erste bewegte Element im Netz war wohl Schrift, die mit dem Tag zum Blinken gebracht wurde und so manchen User zur Verzweiflung gebracht hat. Gerne wurden und werden auch fertige GIFs verwendet, die blinkende und sich drehende Ellipsen darstellen, auf denen NEU steht, oder Animationen von kleinen Briefumschlägen, die sich zusammenfalten und verschwinden, um den Bereich E-Mail anzuzeigen. Abgesehen davon, dass man den Charakter der Site verwässert, wenn man zu sehr auf ClipArt zurückgreift, muss man vorsichtig sein mit Animationen, die bestimmte Bereiche hervorheben sollen und den User dazu bringen, dort zu klicken. Zum einen wirken sich dauernd wiederholende Bilder schnell penetrant, zum anderen heben sich mehrere Animationen auf einer Seite auf, und man verliert den Überblick, der gerade dadurch ja hätte geschaffen werden sollen. Arbeitet man hier mit bewegten Bildern, sollte man das sehr bewusst und gezielt tun, eine Animation auf der Seite zieht meist die ganze Aufmerksamkeit des Users auf sich.

Erklärung Kann man in einem E-Commerce-Shop ein Produkt dreidimensional drehen und auf dessen Tasten klicken, ist eine Bedienungsanleitung in Form von kleinen Filmen gestaltet oder wird ein komplexer biologischer Vorgang durch Animationen auf einmal ganz klar verständlich, so wird aus der Animation ein eigenständiges Element, das durchaus etwas längere Ladezeiten oder die Installation eines Plugs-ins rechtfertigt. Response Immer öfter werden auf Sites bei Rollover Begriffe hervorgehoben, um dem User anzuzeigen, dass er hier klicken kann bzw. dass sein Klick erfolgreich war und er nun auf den gewünschten Bereich geleitet wird. Besonders bei Applikationen, die komplett in Flash gestaltet sind, bietet sich das durchaus an, da dort Links oft sehr viel stärker in die Gestaltung integriert sind und man sie nicht so ohne weiteres identifizieren kann. Aber auch bei HTMLWebsites mit Rollover-GIFs gibt der ResponseEffekt dem User ein Gefühl von Interaktion und Sicherheit.

Animation im Netz

. .

67

Abbildung 5 E Endlich einmal eine Benutzerführung, die Spaß macht. Aber eben komplett in Flash. (www.hi-res.net/sb/clickhere.html)

Interface Seitdem Flash einigermaßen verbreitet ist und User bereit sind, das Netz nicht nur als ein reines Recherchetool zu begreifen, werden immer mehr Auftritte komplett animiert in Flash gestaltet. Sowohl die Benutzerführung als auch die Inhalte sind dynamisch, bauen sich nacheinander auf und vermitteln das Gefühl, als wäre man in eine eigene Welt gestiegen. In Verbindung mit Sound lassen sich hier Emotionen wecken, für die das Web bis jetzt eher nicht so berühmt war. Man muss sich allerdings im Klaren sein, dass sich die Komplexität der Benutzerführung vervielfacht und man einige User von der Nutzung der Site ausschließt.

Die technische Umsetzung Es gibt mittlerweile eine Vielzahl von möglichen Animationsarten, die sich in technischer Umsetzung, Qualität, Ladezeiten und Einsatzmöglichkeiten unterscheiden. Die beste Einführung in die Gestaltung gibt es unter

68

http://hotwired.lycos.com/webmonkey/ multimedia/tutorials/tutorial1.html und http://hotwired.lycos.com/animation/. GIF-Animation Der Klassiker unter den Animationen im Netz zeichnet sich eigentlich durch seine Einfachheit aus. Es handelt sich dabei um nichts anderes als einzelne Bilder, also GIFs, die in einer bestimmten Reihenfolge hintereinander geschaltet werden und beliebig oft ablaufen. Für das Auge ergibt sich dann ein mehr oder weniger fließendes Bild, je nachdem, wie viele Phasen die Animation enthält. Je mehr Einzelbilder, desto größer wird die Datei aber auch. Man kann die Sequenz beliebig oft wiederholt loopen oder auch nur ein paar Mal oder ein Mal ablaufen lassen. Die Dauer jeder einzelnen Phase ist dabei variabel einstellbar. Es gibt dabei verschiedene Arten von Animationen. Wichtig ist, dass die Abläufe fließend sind und man den Übergang vom letzten zum ersten Bild nicht bemerkt. Ausnahme sind hier Banner und Textanimationen.

Gestalterisches

. .

G Abbildung 6 E Im GIF-Builder sieht man die einzelnen Phasen besonders klar.

G

Abbildung 7 Klassische Zeichentrickanimation von animfactory

G

Abbildung 8 Ein Morph aus der ersten Barmer-Site: Ein Erste-Hilfe-Koffer verwandelt sich in eine Erdkugel.

Animation im Netz

. .

69

F

Abbildung 9 Auf dieser Seite navigiert der User über ein erweiterbares Laufband am unteren Rand des Screens, die Inhalte sind animiert (www.siemens.de/innovation).

Die längste Tradition bei Animationen hat sicherlich die Zeichentrickanimation, also das phasenweise Abspielen von gezeichneten und gescannten oder direkt am Computer gestalteten Figuren (Abb. 7). Text wird entweder in einer Art Abspannverfahren animiert oder aber verzerrt, ein- und ausgeblendet, farblich verändert, und so weiter. Die einfachste Form dabei ist der reine Response, also die Erstellung einer leicht veränderten zweiten Phase, die das erste Bild ersetzt, wenn man mit dem Cursor darüber geht. Die dritte Art von GIF-Animationen ist die Animation von Fotos. Besonders beliebt ist hier Morphing, also das langsame Verschmelzen eines Ausgangsbildes in ein Endbild (Abb. 8). JavaScript JavaScript ist eine Skriptsprache, ein Programm, das nicht auf dem Rechner, sondern auf einem Server ausgeführt wird. Entwickelt wurde es

70

von Netscape und ist neben Perl die am weitesten verbreitete Skriptsprache. Sie kann allerdings vom User im Browser abgestellt werden, da komplexere Skripten gerne mal den Rechner zum Absturz bringen. In Verbindung mit statischem HTML ermöglicht sie eine Vielzahl von Interaktionen, unter anderem eben auch Animationen wie zum Beispiel Laufbänder oder Rollover-Effekte (Abb. 9). Java Die amerikanische Firma Sun entwickelte schon recht früh diese komplexe Programmiersprache, die vollkommen unabhängig ist vom Betriebssystem und deshalb perfekt für das WWW geeignet. Im Gegensatz zu JavaScript (das nichts mit Java zu tun hat) lässt sich damit fast alles umsetzen, was man sich einfallen lässt. Eine Software, die Java Virtual Machine, ist in den jeweiligen Browser integriert, sie verarbeitet dann so genannte Applets. Nachrich-

Gestalterisches

. .

G

Abbildung 11 Die 1999 in Cannes ausgezeichnete Site – für einen Schweizer Möbelhersteller gestaltet – ist komplett in Flash gebaut und ermöglicht eine Vielzahl von Animationen, die einen echten Mehrwert bedeuten (www.eleven22.com).

G

Abbildung 10 Ein in Flash programmierter Kalender, der, sobald er geladen ist, komplexe Animationen ermöglicht (www.maedastudio.com/ cal4deliv/index.html).

tenticker sind meistens in Java programmiert, Nachteil hierbei ist, dass Seiten mit Java deutlich länger laden, insbesondere bei MacintoshRechnern. Im Gegensatz zu Skriptsprachen ist Java auch in der Programmierung sehr komplex und aufwändig. Flash Um Flash-Files sehen zu können, muss man im Browser das dazugehörige Plug-in installiert haben, die Verbreitung ist heute aber schon sehr hoch. Flash ist vektororientiert, das bedeutet, dass auch sehr große und komplizierte Animationen innerhalb kürzester Zeit geladen werden können. Flash-Files werden im Macro-

media-Programm Flash erstellt und gelten zurzeit als die Lösung für anspruchsvolle Animationen (Abb. 10 und 11). Shockwave Auch dieses Tool stammt von Macromedia und basiert auf dem Programm Director, mit dem eigentlich CD-ROMs programmiert werden. Mit Hilfe eines Plug-ins kann man diese Files auch im WWW abspielen, die Programmiermöglichkeiten sind – noch – sehr viel umfangreicher als bei Flash. Allerdings ist es nicht vektororientiert, das heißt, die Ladezeiten sind auch sehr viel größer!

Animation im Netz

. .

71

G

Abbildung 12 Movie-Trailer auf einer Website, konvertiert in QuickTime

Abbildung 13 E QuickTime VR-Movie mit drehbarem und vergrößerbarem 3D-Effekt

Dynamic HTML Als mit Einführung der Viererversionen der gängigen Browser die Dynamic Hypertext Markup Language eingeführt wurde, war die Begeisterung gross. Auf einmal gab es Animationen und interaktive Funktion im Rahmen von HTML ohne Plug-ins. Ermöglicht wurde das durch die Entwicklung von Sprachen wie HTML 4, Cascading Style Sheets und die Integration von JavaScript. Dummerweise entwikkelten vor allem Netscape und Microsoft unterschiedliche Befehle, sodass man beim Arbeiten mit DHTML mehr damit beschäftigt war, die Seiten auf allen möglichen Browsern und allen möglichen Plattformen zu testen, als die Seiten wirklich zu gestalten. Abstürze und schlechte Performance waren die Folgen. Es gibt aber einige Befehle, die durchaus sehr gut zu verwenden sind (Siehe auch S. 126).

72

QuickTime/ QuickTime VR QuickTime wurde von Apple entwickelt, um Audio- und Videodaten in sehr guter Qualität zu speichern und abzuspielen. Es ist als eigenes Programm sowohl für MacOS als auch für Windows erhältlich, kann aber auch direkt in eine Site integriert werden. QuickTime VR fügt zudem noch eine dreidimensionale Komponente hinzu, wie zum Beispiel den drehbaren Turnschuh auf der Adidas-Seite (Abb. 4). Alles über QuickTime findet man unter http://www.apple.com.

Gestalterisches

. .

Animation im Netz

. .

73

Essentielle Software

76 Adobe Photoshop

88 Webeditoren

76 Praktische Funktionen für den Einsatz im Web

88 Die gängigsten Editoren

79 Tipps und Tricks für das Webdesign mit Photoshop

90 Macromedia Dreamweaver 90 Die Fenster und Paletten

82 Macromedia Fireworks 82 Der Arbeitsbereich 82 Komprimierung von Bildern fürs Web 83 Batch-Prozesse 84 GIF-Animationen

93 Getting started 94 Die Seiteneigenschaften 96 Text 96 Bild 97 Tables 98 Modifikation von Objekten 99 Frames

74

Essentielle Software

.

104 Adobe GoLive

114 Macromedia Flash

104 Der Arbeitsbereich

115 Die Fenster und Paletten

106 GoLive als Layout-Programm

116 Getting started

106 GoLive als Site-Editor

119 Aus Symbolen werden Instanzen 120 Der Film

108 Microsoft FrontPage 2000 108 Standardisierung

121 Instanzeigenschaften 124 Tipps und Tricks

110 Der Arbeitsbereich 112 Weitere Features

126 Dynamisches HTML 126 DHTML-Dokumente in Dreamweaver erstellen

.

Hilfreiche Software

75

Adobe Photoshop Die digitale Bildbearbeitung – auch für das Web Fast niemand, der sich mit Gestaltung beschäftigt, kommt um Photoshop herum. Doch es gibt einige Tricks, welche die Arbeit damit sehr erleichtern.

Photoshop ist eines der ältesten und ausgereiftesten Programme zur digitalen Bildbearbeitung. Bei kaum einem anderen Programm werden neue Versionen, Updates und BetaVersionen so heiß und innig erwartet. Vor der Einführung von Ebenen musste man sich immer sehr genau überlegen, welches Element man wo einsetzte, da es dort für immer fest mit dem Hintergrund verschmolzen war. Als es die editierbare Textfunktion noch nicht gab, war man gezwungen, Headlines immer wieder und wieder zu tippen. Und die History-Funktion, mit der man alle Schritte zurückverfolgen und rückgängig machen kann, kam einer kleinen Revolution gleich. Photoshop eignet sich für die Erstellung von Daten sowohl für Print- als auch für digitale Medien. Der große Vorteil bei der Arbeit für den Screen ist, dass die Auflösung der Bilder sehr viel geringer sein muss, also 72 dpi anstatt 300 dpi. Das bedeutet, man kann sehr viel schneller arbeiten und muss sich außerdem nicht mit großen Datenmengen herumärgern. Dazu hat man das Ergebnis immer auf dem Screen, böse Überraschungen wie beim Druck bleiben einem meist erspart. Allerdings ver-

76

zweifelt man anfangs oft über die schlechte Qualität der Bilder. Gerade bei JPEGs und GIFs geht durch die Kompressionsverfahren bzw. durch die Farbreduktion viel von der Schärfe und Tiefe von Fotos verloren. Das macht sich besonders beim Text bemerkbar. Aber dazu später mehr.

Praktische Funktionen für den Einsatz im Web Um mit Photoshop zu arbeiten, beschränkt man sich am besten zunächst auf drei Fenster. Das Document-Fenster Legt man ein neues Dokument an, sind zwei Parameter sehr wichtig (Abb. 2). Zum einen muss die Auflösung 72 Dots per Inch betragen, in diesem Falle Pixel pro Inch. Das Problem ist, dass man Bilder mit dieser Auflösung nicht mehr verlustfrei vergrößern kann. Deshalb sollte man Bilder immer mit einem höheren dpiWert einscannen, denn verkleinern geht immer. Zweiter Punkt ist, dass das Dokument im RGB-Modus angelegt werden muss und nicht

Essentielle Software

..

G

Abbildung 1 Photoshop mit den wichtigsten Fenstern und Paletten

G

Abbildung 2 Einstellungen eines Dokuments für Screendesign

G

Abbildung 3 Vergrößerung eines Photoshop-Dokuments. Bei 1600 % sieht man jeden Pixel.

Adobe Photoshop

..

77

Abbildung 4 E Werkzeuge von Photoshop

G

Abbildung 5 Ebenen in Photoshop: Jedes Element kann einzeln bearbeitet werden.

wie bei Print in CMYK. Denn auf dem Screen stellen sich Farben, anders als beim Druck, aus den drei Grundfarben Rot, Grün und Blau zusammen. Bis auf die Ausnahme von Pfaden werden Bilder, Schriften und importierte Vektorgrafiken in Photoshop gepixelt. Bei einer Auflösung von 72 dpi geht das automatisch mit einem Qualitätsverlust einher, gegen den man nur in langwieriger Kleinstarbeit vorgehen kann, indem man die einzelnen Pixel bearbeitet. Besonders bei Logos ist das eine große Herausforderung. Die Werkzeugpalette Diese Palette, die alle Photoshop-Tools beinhaltet, hat sich in den letzten Jahren zu einem großen Werkzeugkasten entwickelt, der nicht weniger als 49 einzelne Tools und noch andere Einstellungsmöglichkeiten enthält (Abb. 4). Sie teilen sich grob in Auswahlwerkzeuge, Malwerkzeuge sowie Zeichen-, Schrift-,

78

Mess-, Füll- und Vergrößerungswerkzeuge. Außerdem kann man damit die Farben festlegen, maskieren und den Ansichtsmodus festlegen. Ab der Version 5.5 kann man auch mit einem Klick zu Adobe Image Ready wechseln. Die Ebenenpalette Photoshop-Dokumente sind meistens in Ebenen angelegt. Vor einer Hintergrundebene liegen Ebenen, die Text, Bilder oder Grafiken enthalten. Jede kann einzeln sichtbar gemacht und bearbeitet werden. Exportiert man Bilder als GIFs oder JPEGs, dann muss man alle Ebenen auf eine reduzieren und kann das Bild danach nicht mehr bearbeiten. Es empfiehlt sich also, ein Masterdokument anzulegen, das man mit allen möglichen Ebenen abspeichert, und davon werden die entsprechenden Bilder produziert. Sowohl Scans als auch bearbeitete Photoshop-Dokumente sollten immer in einer Originalversion mit Originalauflösung erhalten bleiben, denn einmal reduzierte und gespei-

Essentielle Software

..

F G Abbildung 6 Die Spectrum-, die Hue- und die eigene WWW-Palette. Gleiche Farben, aber andere Anordnung.

cherte Dateien können nicht mehr in ihren Originalzustand versetzt werden. Neben den Dateien sollte man auch die einzelnen Ebenen konsequent und nachvollziehbar benennen, um sicherzustellen, dass auch andere Leute mit dem Dokument arbeiten können.

Tipps und Tricks für das Webdesign mit Photoshop Photoshop ist ein sehr komplexes Tool, und es gibt unzählige Bücher und eine hervorragende Hilfefunktion, gerade fürs Webdesign gibt es aber ein paar Kniffe, die helfen, effektiver und besser zu arbeiten. Die WWW-Palette Um zu verhindern, dass man mit nicht websicheren Farben arbeitet, also anderen als den 216 in der WWW-Palette vorhandenen, sollte man sich in Photoshop eine Palette zurechtlegen, die nur diese Farben enthält. Über Fenster · Farbfelder einblenden erhält man die Farbfeldpalette. Über Farbfelder ersetzen be-

kommt man die Option, eine eigene Palette einzufügen. Photoshop bietet in den Goodies zwei Paletten mit den WWW-Farben an. Sie heißen Web Hues.aco und Web Spectrum.aco. Hues ist in diesem Fall die bessere Wahl, denn bei der anderen kommen Farben mehrfach vor. Ist man mit beiden nicht zufrieden, da die Anordnung der Farben doch gewöhnungsbedürftig ist, hat man auch die Möglichkeit, seine eigene WWW-Palette zu erstellen. Man öffnet dazu ein Dokument im RGB-Modus, geht auf Bild · Modus · Indizierte Farben... und stellt dann im obersten Feld Palette des Abfragefensters Web ein. Man klickt OK und geht dann nochmals auf Bild · Farbtabelle und erhält die WWW-Palette, in deren Bezug das Bild gerechnet wurde. Klickt man auf die einzelnen Felder, erhält man auch die Entsprechung in Hex-Werten, was sehr praktisch ist, um im Editor die richtigen Farben einzusetzen. Die Farben dieser Palette sind entsprechend dieser Hex-Werte geordnet von #FFFFFF zu #000000. Will man mit dieser sehr angenehmen Anordnung arbeiten, speichert man sie sich direkt aus diesem Fenster in den GoodiesOrdner von Photoshop und geht bei der Farb-

Adobe Photoshop

..

79

G

Abbildung 7 Die optimalen Einstellungen für kleinen Text in Photoshop

feldpalette auf Farbfelder ersetzen, um dann diese Palette, die man am besten WWW Original betitelt, einzuladen. Screen-Fonts Dass Schriften auf dem Screen sehr schwer zu lesen sind, ist bekannt. Je kleiner sie werden, umso stärker verschwimmen sie und werden immer unlesbarer. Es bietet sich aber dennoch an manchen Stellen an, z.B. in der Navigation oder bei Beschriftungen, mit gebranntem Text zu arbeiten, da man dessen Laufweite und Erscheinung exakt definieren kann. Für solche Fälle gibt es Fonts, die extra für den Einsatz am Bildschirm konzipiert wurden. Das sind natürlich zum einen die Systemschriften wie Arial, Geneva, Times etc., die bei den meisten Usern auf dem Rechner installiert sind und durch HTML-Tags angesteuert werden können. Zum anderen aber gibt es auch Fonts, die so konzipiert sind, dass sie bei einer Größe von 9

80

G

Abbildung 8 Sevenet von Peter Bruhn und Hi-Skyflipper von Bernhard Wolliger, in Originalgröße und um 300 Prozent vergrößert.

Punkt oder kleiner noch lesbar sind. Einige dieser Schriften sind sogar kostenlos aus dem Netz herunterzuladen. Will man das nicht, empfiehlt es sich, zum Beispiel folgende Einstellungen für Systemschriften im Typetool von Photoshop zu verwenden: Geneva, 9 Punkt, Kerning 150 (damit stellt man die Abstände zwischen den Buchstaben ein, die Geneva fließt in ihrer Photoshop-Darstellung zu eng), Glätten: keine. Etwas individueller und qualitativ keineswegs schlechter sind aber oben genannte Fonts, die von Schriftdesignern speziell für nicht geglättete Darstellung in kleinen Größen entwickelt wurden. Unter http://www. fountain.nu findet man die sehr schöne Sevenet, die, wie der Name schon sagt, in 7 Punkt am besten dargestellt wird. Auch bei http://www.hi-type.de/fonts gibt es Screenfonts. Ebenfalls umsonst und in mehreren Schnitten.

Essentielle Software

..

Abbildung 9 E Vergrößerung eines Icons mit verschiedenen Berechnungsarten

Vergrößern von Pixelgrafiken Versucht man in Photoshop Grafiken mit feinen Pixellinien oder zum Beispiel Icons zu vergrößern, werden diese immer unscharf und verlieren durch die Weichzeichnung ihre eigene Qualität. Im Menü Bild · Bildgröße stellt man die Option Bild neu berechnen mit auf Pixelwiederholung. Man darf aber nur Faktoren in Prozent eingeben, die glatt durch 100 zu teilen sind, sonst können die Pixel nicht in allen Richtungen entsprechend verdoppelt oder verdreifacht werden, und die Qualität ist auch wieder ungenügend. Kopieren aus Ebenen Um Datenmengen zu sparen, bietet es sich oft an, aus einem Photoshop-Dokument nicht ein großes GIF, sondern mehrere kleine zu machen, die im HTML-Dokument wieder zusammengesetzt werden (Abb. 10). Arbeitet man da mit einem Dokument, das in vielen Ebenen angelegt ist, hat man die Möglichkeit, mit der Tastenkombination (Strg)(ª)(c) einen ausgewählten Bereich aus allen Ebenen zu kopieren und diesen beim Einsetzen in ein neues Dokument automatisch passgenau auf eine Ebene zu reduzieren. Speichern als JPEG Exportiert man ein Bild als JPEG, wird dieses automatisch in der Qualität verschlechtert und unscharf. Bei manchen Bildern empfiehlt es sich also, ihnen über Filter · Scharfzeichnungsfilter · Scharfzeichnen, vor der Umwandlung in ein JPEG, mehr Schärfe zu geben, die bei der Umrechnung wieder relativiert wird.

G

Abbildung 10 Photoshop-Layout der Siemens-Homepage und »Schnittmuster« für die GIFs

Adobe Photoshop

..

81

Macromedia Fireworks Der Herausforderer nimmt den Kampf mit Photoshop auf Lange Jahre waren die Anforderungen an ein Bildbearbeitungsprogramm recht eindeutig auf den Prepress-Bereich ausgerichtet, und Photoshop beherrschte den professionellen Markt. Doch dann kam Fireworks von Macromedia, und alles sollte anders werden.

Plötzlich war es möglich, mit ein und demselben Programm Bilder zu bearbeiten, GIFAnimationen zu erstellen und vor allem mit wenigen Schritten Bilder in professionell konvertierte GIFs oder JPEGs umzuwandeln. Die Entwicklung von Fireworks folgt genau zwei Prämissen: Absolute Webkompatibilität und perfekte Integration in die Macromedia-Familie mit Dreamweaver und Flash.

Der Arbeitsbereich Zweifelsohne hat man sich bei der Gestaltung des Programms den großen Konkurrenten genau angesehen. Die Toolbar mit den meisten Werkzeugen kommt uns bekannt vor und kann dementsprechend schnell genutzt werden. Und auch die einzelnen Paletten sind denen von Photoshop nachempfunden. Die große Stärke von Fireworks (hier Version 3) liegt in den verschiedenen Ansichten desselben Dokumentes mit unterschiedlichen Konvertierungen. Dabei werden außer dem Bild selbst auch grundsätzlich die Bildgröße und verwendete Farben angezeigt (Abb. 2).

82

Komprimierung von Bildern fürs Web Genau zwei Bildformate können von allen gängigen Browsern dargestellt werden: GIF und JPEG. Diese beiden Formate zeichnen sich dadurch aus, dass durch Komprimierung die Datenmenge und somit die Dateigröße enorm reduziert werden können (siehe auch das Kapitel »Farbe und Bild«). Bei der Verwendung von Photoshop oder Fireworks ist die dafür nötige Prozedur mittlerweile auf wenige Schritte beschränkt. Einige Grundregeln lassen sich jedoch nicht automatisieren und müssen immer beachtet werden: Ein GIF wird kleiner, wenn E die (räumliche) Größe möglichst gering gehalten wird, E die Anzahl unterschiedlicher Farben möglichst gering ist, E möglichst große Teile des Bildes aus horizontalen Linien (in einer Farbe) bestehen, E es nicht »gedithert gedithert gedithert« ist.

Hilfreiche Software

.

.

G

Abbildung 1 Fireworks mit einigen Paletten

Ein JPEG wird kleiner, wenn die (räumliche) Größe möglichst gering gehalten wird, E möglichst viele große, gleichartige Flächen vorkommen, E die Qualität geringer eingestellt wird. In Fireworks ist der Export von Bildern für das Web ein Kinderspiel. Mit Hilfe des Export Wizards oder der Export Preview können nicht nur alle Arten der Komprimierung angewendet werden, sondern auch gleich deren Auswirkungen auf die Bildqualität beobachtet werden (Abb. 3). In dieser Vorschau können bis zu vier Ansichten ausgewählt werden, für die jeweils die Farbpalette, die Bildart (GIF oder JPEG), die Anzahl der verwendeten Farben bzw. die Qualität und die Art des Ditherings bestimmt werden können. Durch Auswahl der Ansicht und Klick auf Export wird das entsprechende Bild E

G

Abbildung 2 Die Vorschau verschiedener Komprimierungen ist bereits im Dokumentenfenster möglich.

im richtigen Format erzeugt. Im Beispiel (Abb. 3) wäre das Format der Wahl bestimmt das JPEG links unten, da es das beste Verhältnis zwischen Dateigröße und Qualität aufweist. Außer den oben erwähnten Einstellungen können in der Export Preview auch einzelne Farben eines GIF transparent gestellt, der zu speichernde Ausschnitt und die (räumliche) Bildgröße verändert und einzelne Farbwerte nochmals editiert werden.

Batch-Prozesse Darunter versteht man die automatische Abarbeitung von Bildbearbeitungsprozessen auf mehreren Dateien. Dieses Feature ist vor allem dann recht praktisch, wenn man beispielsweise einen ganzen Ordner von Katalogbildern in GIFs umwandeln muss.

Macromedia Fireworks

.

.

83

G

Abbildung 4 Schritt 1: Auswahl der zu bearbeitenden Dateien

G

Abbildung 6 Jedes dieser Quadrate liegt auf einem eigenen Layer.

G

Abbildung 5 Schritt 2: Auswahl der Prozesse

Besonders praktisch ist dabei die Möglichkeit, die Art der Veränderungen direkt vor dem Batch-Prozess vornehmen, abspeichern und immer wieder darauf zurückgreifen zu können. Dabei sind sämtliche Einstellungen wie gewünschte Farbtabelle, Skalierung oder Transparenzen möglich. Die Dateien werden im Folgenden automatisch in einem gewünschten Ordner gesichert (Abb. 4 und 5).

84

GIF-Animationen In Fireworks können sowohl Flash-Animationen perfekt vorbereitet werden als auch einfache GIF-Animationen. Unter Letzteren versteht man eine Abfolge von Stills (auch Frames genannt), die durch die eingestellte Geschwindigkeit eine Illusion von Bewegung erzeugen. Da das Format GIF diese Form der Animation unterstützt, wird genau ein einziges Bild erzeugt, in dem alle Frames und nötigen Einstellungen abgespeichert sind. Für GIF-Animationen gelten genau die gleichen Kriterien wie für

Hilfreiche Software

.

.

G

Abbildung 7 Jeder Punkt liegt in einem eigenen Format.

normale GIFs, was Größe und Anzahl der Farben betrifft. Um in Fireworks eine solche Animation zu erstellen, muss man sich zuerst mit Layers und Frames dieses Programms auseinander setzen. Layer oder auch »Ebenen« bilden eine räumliche Abfolge auf der z-Achse des Raumes, legen also fest, wie weit vorne oder hinten sich ein Objekt befindet (Abb. 6). Frames hingegen legen die zeitliche Abfolge von Objekten in einer Animation fest. Ein Frame kann dementsprechend mehrere Layer abbilden (Abb. 7). Plant man eine GIF-Animation, beispielsweise einen springenden Punkt, so muss für jeden Status ein eigener Frame angelegt und

das entsprechende Objekt darauf platziert werden. Bestimmte Layer können dabei in allen Frames eingeblendet sein, sodass Hintergründe nicht jedes Mal neu eingefügt werden müssen. Nachdem alle Ebenen der Animation angelegt sind, kann diese auch schon als GIF abgespeichert werden. Hierzu muss wieder über das Menü DATEI die EXPORT PREVIEW geöffnet werden. Das zu verwendende Bildformat ist als ANIMATED GIF zu wählen. Oben links in dieser Ansicht befindet sich der Reiter ANIMATION, mit dessen Hilfe die Einstellungen zur Geschwindigkeit von einzelnen Frames und zum Laufzeitverhalten vorgenommen werden können (Abb. 8).

Macromedia Fireworks

.

.

85

G

Abbildung 8 Der für Animationen zuständige Reiter der Export Preview.

Für jeden Frame kann festgelegt werden, wie lange er sichtbar ist, bevor der nächste aufgerufen wird. Im unteren Teil der Ansicht können wir festlegen, ob die Animation nur

86

ein Mal durchlaufen werden soll, mehrmals oder immerwährend. Ein letzter Klick auf EXPORT, und die Animation kann im Browser betrachtet werden.

Hilfreiche Software

.

.

Macromedia Fireworks

.

.

87

Webeditoren Die einfache Methode zur Erstellung von Websites Nach anfänglich mühsamem Schreiben von HTML-Code lassen sich mittlerweile sehr schnell und intuitiv Websites mit Hilfe von Webeditoren umsetzen. Aber nicht alle erzielen das gleiche Ergebnis.

Hypertext Markup Language ist die Sprache, mit der im WWW der Aufbau und die Verbindung von Seiten beschrieben wird. Grundsätzlich nicht sonderlich schwer zu erlernen, bei der Gestaltung komplexer Sites aber doch recht mühsam, bedienen sich mittlerweile auch viele Profis so genannter WYSIWYG-Editoren toren. Das heißt »What you see is what you get« und bedeutet nichts anderes, als dass man, ähnlich den meisten Grafikprogrammen wie Photoshop oder Illustrator, bei der Erstellung der Seite – hoffentlich – schon sieht, wie sie später im Browser aussehen wird, anstatt sich durch Seiten von HTML-Code kämpfen zu müssen.

Demos von Editoren Unter http://www.davecentral.com/webpro. html finden sich neben ausführlichen Beschreibungen auch Demoversionen einiger Editoren.

88

Die gängigsten Editoren Es gibt eine Vielzahl von Webeditoren, immer wieder kommen neue Versionen auf den Markt, die immer einfacher und intuitiver sind, mit noch mehr Funktionen ausgestattet werden und noch mehr unbrauchbaren Code mit hinein schmuggeln. Letzteres war genau der Grund, warum man eine Zeit lang immer wieder von einem Editor zum anderen wechselte und es noch heute erbitterte Debatten gibt, welches denn nun der beste und sauberste von allen sei. Der eine fügte im HTML-Code mal schnell ein paar Absätze ein, die man im Browser zwar nicht sieht, jede einzelne Seite aber um ein paar Kilobyte größer machen. Der andere schreibt Code, den man in HTML hochprofessionell noch ein bisschen verbessert hat, beim Sichern einfach wieder um, so wie es der Editor gerne hätte. Heute sind diese Bugs im Großen und Ganzen eigentlich ausgemerzt, trotzdem sollte man sich vor dem Kauf überlegen, welcher Editor im Preis-Leistungs-Verhältnis und bezüglich Nutzerfreundlichkeit am besten zu den Anforderungen passt. Erstellt man professionell Websites, empfiehlt es sich, mit

Hilfreiche Software

..

den Programmierern, welche die Site letztendlich umsetzen, Rücksprache zu halten, bevor man sich ein solches Tool anschafft. Einen kleinen Überblick, den die Site Davecentral über gängige Editoren aller Arten gibt, sehen Sie auch in der folgenden Tabelle.

Bei Pixelpark fiel die Wahl schon vor einiger Zeit auf Dreamweaver, andere Editoren sind aber ähnlich aufgebaut. Wenn man das Prinzip verstanden hat, ist es nicht schwer, sich recht schnell in andere Programme einzuarbeiten.

Gängige Editoren Editoren

iPer3 Easy Web Editor ...

AOLpress

iPer3 Paper Killer WH

Astound Dynamite

j-Pub Publisher

Atrax

Liquid FX Express

BizBlast Resume Wizar...

LiveSite

Compuserve Home Page ...

Macromedia Dreamweaver

Cool Page

MenuPlus

CoverSite

Microsoft FrontPage

DHTML Menu Builder

Namo WebEditor

e-BIZ FreeRide

SiteDesigner LTE

EasyHelp/Web

Splash! Web Authoring

FlexSite

Symantec Visual Page

GoLive Cyberstudio

Tarantula

HDBC DHTML WYSIWYG

TheCommerce

Hippie

Theme-Pak

HotDog Express

VisualSite

Hypertext Builder

WEB Wizard

HyperText Studio

Webberactive

IMS Web Dwarf

WebBuilder Author

IMS Web Engine

WEBINET

IMS Web Spinner

WordPage

InContext Spider

xSite

Webeditoren

..

89

Macromedia Dreamweaver Optimale Site-Verwaltung und HTML-Editierung Mit Dreamweaver lassen sich innerhalb kürzester Zeit sehr effektiv Layouts in HTML-Seiten umsetzen.

Zu Beginn der Arbeit mit Dreamweaver ist es wichtig, dass man zum einen die Struktur der Site, den Aufbau und die Verlinkungen klar definiert und niedergeschrieben hat. Außerdem sollte man in Photoshop bereits erste Layouts angelegt haben, um zu wissen, was wann an welcher Stelle erscheint und wie sich die Gestaltung im Web umsetzen lässt. Dreamweaver (hier in Version 3) verfügt über ein ausgezeichnetes Tutorial und eine Hilfefunktion, trotzdem ist es hilfreich, wenn man über grundsätzliche HTML-Kenntnisse verfügt, damit man leichter feststellen kann, warum irgendetwas mal wieder überhaupt nicht so klappt, wie man es gerne hätte. Die folgenden Ausführungen können ein Dreamweaver-Handbuch natürlich nicht ersetzen, trotzdem hilft einem dieser Überblick, sich schneller zurechtzufinden und das Programm effektiv zu nutzen.

90

Die Fenster und Paletten Um mit Dreamweaver zu beginnen, ist es empfehlenswert, sich auf drei Fenster bzw. Paletten zu konzentrieren. Das Document-Fenster In diesem Fenster zeigt sich alles, was man auf der Seite positioniert, wie Text, Bilder, Tabellen und andere Elemente. Die Darstellung ist der später im Browser angezeigten Seite schon sehr ähnlich (WYSIWYG), und man hat die Möglichkeit, per Drag & Drop bzw. mit der Tastatur alle Elemente zu positionieren, auszuwählen und zu bearbeiten (Abb. 1). Die Objekte-Palette Auf der Objekte-Palette finden sich alle Funktionen, die man zum Aufbau der Seite benötigt. Mit dem Pfeil am oberen Rand hat man die Möglichkeit, zwischen verschiedenen Tafeln zu wechseln, die einem unterschiedliche Optionen bieten. Man hat die Auswahl zwischen allgemeinen Inhalten wie Bildern, Tabellen, etc. Möchte ich eines dieser Objekte nutzen, ziehe ich es ein-

Hilfreiche Software

. .

G

Abbildung 1 Dreamweaver mit den wichtigsten Fenstern und Paletten

fach von der Palette an die Stelle der Seite, an der es eingesetzt werden soll. Ein Dialogfenster öffnet sich und ermöglicht mir anzugeben, welches Element ich positionieren möchte und mit welchen Eigenschaften, wie zum Beispiel die Größe. Die nächste Tafel bietet mir Formulare bzw. deren Elemente, wie zum Beispiel Eingabefelder oder Schaltflächen. Auch hier kann ich per Klick oder Drag & Drop die gewünschten Objekte auf meiner Seite positionieren.

G

Abbildung 2 Die sechs verschiedenen Zustände der Objekte-Palette, mit deren Hilfe man so ziemlich alle Elemente auf einer Seite platzieren kann. Von links nach rechts: Allgemeines, Formulare, Frames, Head, Kommentare und Zeichen.

Die Tafel Frames ermöglicht es, mit gängigen Frame-Strukturen zu arbeiten. Über Head werden Elemente eingefügt, die sich in der übergreifenden Kopfzeile eines jeden HTML-Dokuments befinden. Das können Metatags für Suchmaschinen ebenso wie Schlüsselwörter und Seitenbeschreibungen sein. Die unsichtbaren Elemente der nächsten Tafel sind zum Beispiel Kommentare im HTMLCode, die im Browser nicht dargestellt werden,

Macromedia Dreamweaver 3

. .

91

G

Abbildung 4 Die Palette der Eigenschaften bei der Auswahl eines Tables, eines Bildes und eines Textes

Leuten, die an der Seite arbeiten, aber wertvolle Orientierungshilfen bieten können. Die letzte Tafel Zeichen hilft einem bei Sonderzeichen, nach denen man auf der Tastatur immer ewig sucht und die in HTML so seltsam sind wie zum Beispiel "™" für das Trademark-Zeichen. Zum Arbeiten empfiehlt es sich aber, die allgemeine Tafel geöffnet zu halten, da sich dort die meist verwendeten Funktionen verbergen.

92

Die Palette Eigenschaften Sie verändert ihr Aussehen und ihre Inhalte je nachdem, welches Objekt im Document-Fenster man gerade angeklickt hat. Ist dies Text, so hat man alle in HTML möglichen Arten angeboten, den Text zu verändern. Klickt man auf ein vorher eingefügtes Bild, so hat man die Option zur Veränderung von Format, Positionierung etc.

Hilfreiche Software

. .

F

Abbildung 4 Bei dieser klassischen Ordnerstruktur steht an oberster Stelle die Homepage, dann folgt der Ordner mit den Bildern auf der Homepage, und dann kommen die Ordner für die Unterseiten.

Getting started Der erste Schritt ist selbstverständlich ein neues Dokument anzulegen, entweder hat es sich mit Programmstart von selbst angelegt, oder man geht über Datei · Neu. Ganz wichtig ist es nun, dass Dokument sofort zu sichern und richtig zu benennen. Die erste Seite eines Webauftritts oder eines Unterbereichs heißt meistens index.html. Sie wird im Browser immer als Standard geladen, wenn man einen normalen URL eingibt. Bei der Benennung von HTML-Seiten muss man wie bei anderen Objekten für das Web auf Umlaute, Sonderzeichen und Leerzeichen komplett verzichten. Beim Einbinden eines Bildes bzw. der Verlinkung von Dokumenten wird immer der Pfad zwischen dem Dokument z.B. index.html und dem eingefügten Bild beschrieben. Dabei unterscheidet man in absolute Pfade und relative Pfade.

E

Absolute Pfade: Hier wird exakt der Pfad von Festplatte bis in den Ordner beschrieben. Eine absolute Verlinkung könnte dann so aussehen: file:///hard.disc/Desktop Folder/webdesign/images/image_1.gif

E

Relative Pfade: Hier wird nur der Pfad der verlinkten Seite oder des Bildes in Bezug auf das aktuelle Dokument angegeben. Ordner werden mit Schrägstrich angegeben, befindet sich das Dokument eine Hierarchieebene höher, dann mit zwei Punkten und Schrägstrich. Eine relative Verlinkung ist zum Beispiel images/image_1.gif (sprich in den ImagesOrdner auf das image_1-Bild) oder im Falle der Verlinkung der Karriere-Indexseite mit der Homepage ../index.html (sprich: aus dem Karriereordner heraus auf index.html).

Macromedia Dreamweaver

. .

93

Die Seiteneigenschaften Hat man nun also ein neues Dokument angelegt und gespeichert, sind zunächst die Seiteneigenschaften festzulegen. Das sind neben dem Namen der Seite auch die Farben, Linkfarben und mehr. Der Titel ist der Teil des Dokuments, der auch im Browser oben angezeigt wird. Er ist nicht nur wichtig, weil er dem User anzeigt, auf welcher Site er sich befindet, der Titel erscheint außerdem auch bei den Bookmarks in der Bookmark-Liste sowie in den meisten Suchmaschinen. Sucht man im Netz zum Beispiel nach »Go Live«, findet man Tausende von Seiten, die mit Cyberstudio hergestellt wurden und deren Urheber einfach vergessen haben, den Default-Titel »Willkommen bei GoLive CyberStudio 3« zu ersetzen. Bei Dreamweaver steht dort dann »Untitled Document«, auch nicht sehr vorteilhaft bei Bookmarks oder in Suchmaschinen. Groß- und Kleinschreibung ist in diesem Falle in Ordnung, auch Leerzeichen sind erlaubt, nur bei Sonderzeichen sollte man vorsichtig sein. Nächstes Element ist das Hintergrundbild Hintergrundbild. Dieses wird gekachelt, d.h. unendlich oft wiederholt. Diesen Effekt kann man sich zunutze

Strukturieren Sie! Das sich Dokumente auf einem WWW-Server immer relativ zueinander verhalten sollten und nicht absolut, ist es ratsam, von Anfang an eine klare Ordnerstruktur anzulegen, mit der man arbeitet. Auf oberster Ebene befindet sich die schon erwähnte index.html, in einem ImagesOrdner die dazugehörigen Bilder und analog zu den einzelnen Bereichen der Site die Unterseiten.

94

machen, wenn man für den Hintergrund ein Muster entwirft, das aus einem kleinen Rechteck oder einem horizontalen oder vertikalen Streifen besteht, also wenig ladezeitintensiv ist, gekachelt aber gute Effekte erzielt. Möchte man allerdings ein ganzes Bild in den Hintergrund legen, ist darauf zu achten, dass das Bild nicht gekachelt wird, auch wenn das Browserfenster auf eine Größe von 1024 x 768 aufgezogen wird. Besonders bei langen Inhalten kommt es schon vor, dass beim Scrollen auf einmal der obere Teil des Bildes wieder auftaucht. Das ist nicht sehr professionell, deswegen also alle Seiten am Ende der Produktion nochmals daraufhin testen und gegebenenfalls die Hintergrundbilder vergrößern. Hintergrundbilder sollten außerdem immer daraufhin überprüft werden, ob alle Inhalte gut darauf »stehen« und die Texte lesbar sind und die Dateigrößen bezüglich Ladezeiten noch vertretbar. Ab den Viererversionen vieler Browser lassen sich auch GIF-Animationen als Hintergrundbilder einsetzen, was »lustige« Effekte möglich macht ... Wählt man kein Hintergrundbild aus, empfiehlt es sich, eine Hintergrundfarbe festzulegen. Dreamweaver bietet einem als Standard die Farben der WWW-Palette, es lassen sich aber natürlich auch alle anderen RGB-Werte eingeben. Auch wenn man mit Hintergrundbild arbeitet, sollte man eine Farbe für den Hintergrund auswählen, am besten eine, die der Farbe des Bildes entspricht, denn beim ersten Laden der Seite wird dann schon mal die Farbe angezeigt, bevor sich das Bild aufgebaut hat. Neben dem Hintergrund lassen sich hier auch Textfarbe, Linkfarbe, die Farbe eines bereits angeklickten Links und die Farbe eines Links während des Klicks festlegen. Bei der

Hilfreiche Software

. .

Abbildung 5 Die Grundeinstellungen bei einem Standarddokument und das Ergebnis im Editor

Textfarbe sollte man grundsätzlich darauf achten, dass der Text genügend Kontrast zum Hintergrund hat. Arbeitet man negativ, d.h. heller Text auf dunklem Grund, ist es wichtig zu wissen, dass bei Ausdrucken Hintergründe nur gedruckt werden, wenn der User das auch im Browser entsprechend eingestellt hat. Das ist von Version zu Version unterschiedlich, meistens ist es aber dann eben doch so, dass man beim Drucken von ganz wichtigen Adressen, die man weiß auf schwarz auf einer Seite stehen hat, ... ein weißes Blatt Papier aus dem Drucker zieht. Also Vorsicht beim Arbeiten mit Negativschriften. Textlinkfarben sollten sich zwar klar vom normalen Text abheben, da einige User in ihrem Browser Underline Links ausgeklickt haben. Andererseits wirkt es grafisch deutlich anspruchsvoller, wenn sich die Farben eines Textes auf der Seite in einem Farbspektrum bewegen. Es bietet sich an, besuchte Links ein paar Nuancen heller anzulegen als normale

Links, nur bei aktiven Hyperlinks, also dann, wenn man mit gedrückter Maustaste über einem Wort ist, kann man mit sehr viel helleren oder dunkleren Farben arbeiten, um dem User eine Response zu geben. Stellt man die Linkfarben nicht extra ein, erscheinen Default-Farben, was natürlich kein Problem ist, der Site aber stark vom eigenen Charakter etwas nimmt. Randbreiten kann man bei den Seiteneigenschaften ebenfalls definieren und festlegen, wie weit die Inhalte vom Browserrand entfernt sind. Diese Werte treten aber nur in Kraft, wenn man mit Frames arbeitet und sich die Seite in einem Frameset befindet. Dann bietet es sich vor allem an, alle Werte auf null zu stellen, denn für Werte größer null gibt es noch andere Möglichkeiten, wie zum Beispiel leere GIFs. Die restlichen Einstellungen sollte man am Anfang am besten nicht anfassen, für normale Websites sind obige Einstellungen vollkommen ausreichend.

Macromedia Dreamweaver

. .

95

F

Abbildung 6 Dialogfenster beim Einfügen eines Bildes

Text Nachdem man nun also die ersten Einstellungen gemacht hat, beginnt man mit dem Schreiben des Textes. Der Editor übersetzt Sonderzeichen sofort in HTML-Code, was man bei geöffnetem HTML-Quellenfenster hervorragend gleichzeitig betrachten kann. Schwieriger wird es, wenn man Text per Copy & Paste aus einem Textverarbeitungsprogramm wie Word holt! Beim normalen Einfügen werden Sonderzeichen nämlich nicht übersetzt, aber das sieht man erst, wenn man die Seite im Browser prüft. »Das Öffnen der Fenster und Türen während der Fahrt ist verboten!« liest sich dann nämlich so: »Das …ffnen der Fenster und TŸren wShrend der Fahrt ist verboten!« Kleiner Trick: Geht man beim Bearbeiten auf Als Text einfügen, werden die Sonderzeichen automatisch umgesetzt und erscheinen im Browser korrekt. Hat man das mal wieder vergessen und merkt es erst später, wenn der ganze Text eingefügt ist, kann man den ganzen Text in Dreamweaver nochmals kopieren (ohne ihn

96

vorher in ein Layout eingesetzt zu haben) und ersetzt ihn mit Als Text einfügen. Neben Sonderzeichen gibt es auch mit Leerzeichen und Tabs Probleme Probleme, Dreamweaver akzeptiert beides nicht. Ein Return entspricht einem doppelten Zeilenabstand, möchte man einen einfachen, muss man die Alt-Taste gedrückt halten. Da das Browserfenster in der Größe aber flexibel ist und man nie weiß, wie der User es einstellt, sollte man mit Zeilenumbrüchen sehr sparsam umgehen. Um den Text nicht über die ganze Seite fließen zu lassen, arbeitet man besser mit Tables.

Bild Doch zunächst wird erst mal ein Bild eingefügt. Entweder über Einfügen · Bild oder indem man das Image-Icon der Objekte-Palette an die gewünschte Stelle zieht. Spätestens hier sollte das Dokument wegen der relativen Pfa-

Hilfreiche Software

. .

G

Abbildung 8 Anlegen einer Table mit festen Größen

F

Abbildung 7 Rudimentäre Webgestaltung mit Text und Bild. Viele Sites sehen aber wirklich so aus!

de abgespeichert sein. Ein Dialogfenster öffnet sich, und man wählt das gewünschte Bild aus, immer relativ zum Dokument. Nachdem nun Hintergrund, Text und Bild auf der Seite zu sehen sind, herrscht die weit verbreitete Meinung, man wäre doch eigentlich fertig. Und die Unmengen schlecht gestalteter Seiten im Netz bestätigen dies. Die richtige Arbeit beginnt allerdings erst jetzt. Die Seite so zu gestalten, dass Inhalte lesefreundlich aufbereitet sind, dass man Informationen gut aufnehmen kann und dass sich ein einheitlicher Stil durch die Seiten zieht, ist die eigentliche Aufgabe des Webdesigns.

Tables Tables oder Tabellen sind dazu da, die Inhalte auf der Site zu positionieren. Man legt dazu eine Tabelle aus Zeilen und Spalten an. Bevor man das tut, sollte man sich über das Layout

im Klaren sein und die Tabelle auf Papier bereits gescribbelt haben. Je einfacher ein Table, umso schneller sind die Ladezeiten. Man hat die Möglichkeit, Tabellen prozentual zum Browserfenster anzulegen oder aber in festen Pixelgrößen. Normalerweise empfiehlt sich eine prozentuale Angabe, bezieht sich wie in unserem Fall der Table aber auf den Hintergrund, wird eine feste Größe angegeben. Tables können natürlich jederzeit in allen Eigenschaften verändert werden (Abb. 8). In diesem Table werden nun mit Copy-andPaste alle Objekte der Site gelegt. Man sollte sich dabei aber nicht voll auf die Darstellung im Editor verlassen, sondern immer wieder im Browser testen, ob alles so aussieht, wie geplant. Der Rahmen eines Tables sollte grundsätzlich auf null gestellt werden, es sei denn, die nicht sonderlich schönen dreidimensionalen Linien sind Teil des visuellen Konzeptes, oder man arbeitet mit Zahlentabellen, bei denen Trenner nötig sind.

Macromedia Dreamweaver

. .

97

Abbildung 9 E Eigenschaften der drei Objekttypen Tabellen, Bilder, Text

Modifikation von Objekten

E E

Je nachdem, welches Element des Dokumentes man anklickt, ändert sich das Eigenschaftenfenster. Man hat folgende Modifikationsoptionen optionen:

E

E

Tables E Name des Tables E Anzahl der Zeilen und Spalten E Breite und Höhe der Spalten E Raum in und um die Zellen E Rahmenbreite E Position des Tables (rechts, links etc.) E Abstand in und zwischen den Zellen E Abstand um das Table E Farben des Rahmens E Hintergrundfarbe oder -bild der Tabelle Bild E Name des Bildes E Breite und Höhe E Quelle E Verlinkung E Ziel einer Verlinkung, z.B. ein anderer Frame

98

E

E E

Positionierung Alt-Tag – hier gibt man Text ein für den Fall, dass das Bild nicht oder nur langsam geladen wird Image-Map – bei verschiedenen Links, die man auf das Bild legt Abstand um das Bild Low Source – ein Bild gleicher Größe, aber in deutlich niedrigerer Qualität, das geladen wird, bevor das eigentliche Bild kommt Rahmen um das Bild Bündigkeit des Bildes

Text E Format E Schriftart – zu empfehlen sind Geneva, Arial (ohne Serifen) E Verlinkung E Ziel der Verlinkung E Schriftgröße E Farbe E Stil E Ausrichtung E Aufzählung E Einrückung E Umbruch

Hilfreiche Software

. .

F

Abbildung 10 Das Endprodukt: eine No-Frame-Variante

Hat man sich auf dieser Ebene in Dreamweaver eingearbeitet, ist es nicht mehr schwer, auch komplexere Websites zu erstellen. Wichtig ist nur, dass man sich die Regeln des Webdesigns zu Herzen nimmt und sich genau an Ordnerstrukturen und relative Verlinkungen hält.

Frames Wie schon angesprochen, ist der Einsatz von Frames im Web sehr umstritten. Immer mehr Sites tauchen auf, die komplett ohne Frames gestaltet sind. Dennoch bieten Frames die bessere Möglichkeit, in HTML gut und effektiv zu gestalten. Man unterscheidet dabei in Seiten, die das Frameset definieren, also angeben, wie viele horizontale und vertikale Frames es gibt, wie sie miteinander verbunden sind und wie groß sie sind. Diese Frameset-HTML-Seiten sind im Browser nicht zu sehen, sondern geben nur an, welche Seiten in dieses Frameset geladen werden. Diese Seiten sind die einzelnen Frames, also gestaltete HTML-Seiten, auf denen Inhalte

zu finden sind und die man auch einzeln im Browser laden kann, wenn man den gedrückten Cursor lange genug auf die Seite hält. Es erscheint dann die Abfrage, ob man diesen Frame in einem neuen Fenster öffnen möchte. Das bietet sich zum Beispiel an, wenn man sich für einen ineinander verlinkten Bereich interessiert und Hauptnavigation und Banner nicht sehen will, oder man den Inhalten eines Frames mehr Platz geben will. Ein Java-Skript verhindert diese Option aber mittlerweile auf vielen Sites, damit man Seiten nicht mehr aus ihrem Kontext und der Navigation lösen kann. Um Frames wirklich verstehen zu können, sollte man sich kurz mit dem HTML-Code dazu beschäftigen, da dieser den Aufbau sehr klar macht.

Richtige Planung ist wichtig Ein Frameset muss sorgfältig geplant werden, da man die Frames am besten ineinander verschachtelt, mit dem Ziel, dass sich bei einem Klick möglichst wenige Seiten austauschen.

Macromedia Dreamweaver

. .

99

G

Abbildung 11 Diese E-Commerce-Seite setzt sich aus sechs gestalteten Seiten zusammen sowie drei Seiten, die das Frameset beschreiben. E



E

Diese Zeile besagt, dass man ein übergeordnetes Frameset mit zwei Zeilen hat. Die obere hat eine Höhe von 50 Pixeln, die untere ist flexibel, das heißt, sie füllt immer den Rest des Browserfensters aus. Spalten gibt es nur eine, die logischerweise auch flexibel ist. E

Nun wird die erste Zeile definiert, da sie nur aus einem Frame besteht, wird auch nur dieser angegeben. Außer dem Namen und der HTML-Seite namens nav_1.html, die in diesen Frame geladen wird, könnte man auch noch angeben, ob Scrollbars in diesem Frame zu sehen sind, und andere Eigenschaften festlegen.

100

Nun wird die zweite, die untere Zeile definiert, sie besteht aus zwei Spalten, die linke ist 80 Pixel breit, die rechte wieder flexibel. Man könnte auch prozentuale Werte eingeben und sagen, der Content soll immer 75 % der Seite ausmachen. Dabei riskiert man aber, dass eine eventuelle Navigation im linken Frame zum Teil abgeschnitten wird.





E



Hier wird nun der linke der beiden Frames definiert, er wird zur Navigation. E



Und im »inhalt« wird die content.html geladen.

Hilfreiche Software

. .

Abbildung 12 E Das gleiche Frameset mit unterschiedlichem Aufbau

E



Zunächst wird das Frameset der Spalten geschlossen. E



Und nun auch das Frameset der Zeilen. <noframes> Für User ohne frame-fähigen Browser sollte man immer eine No-Frame-Variante anlegen. E

der Hauptnavigation gleichzeitig Sekundärnavigation und Content auswechseln, sollte man das untere Frameset in einer neuen HTML-Seite definieren und die dann als Seite in das Frameset einladen. Der Code würde dann folgendermaßen lauten:


src="nav_1.html" >

Und sei es nur, dass man eine weiße Seite mit Text dahinter ablegt.



E





E



Am Schluss wird dann auch die Variante für Browser ohne Frames geschlossen. Diese Kombination kann beliebig verändert werden. Am Anfang lohnt es sich, mit Copyand-Paste einfach mal ein paar Variationen auszuprobieren. Möchte man zum Beispiel aus



In Dreamweaver kann man sich entweder über die Objekte-Palette Frames vorgefertigte Framesets laden und modifizieren, oder man baut sich selbst eines. Dazu sollten Sie zunächst unter Ansicht die Frames sichtbar stellen, damit Sie auch sehen, woran Sie arbeiten. Dann teilen Sie Ihr Fenster

Macromedia Dreamweaver

. .

101

F

Abbildung 13 Die Frames-Palette zeigt alle Frames und deren Namen, sodass man sie schnell auswählen kann.

H

Abbildung 14 Über die Frame-Eigenschaften lassen sich die einzelnen Frames verändern.

auf, indem Sie entweder über Ändern ·Frameset den Frame links, rechts, unten oder oben teilen. Oder aber Sie ziehen einen Frame direkt mit gedrückter Alt-Taste auf. Ziehen Sie die Frames von einer der Ecken aus auf, erhalten Sie eine Unterteilung in vier Frames. Umge-

102

kehrt gehen Sie vor, wenn Sie einen Frame wieder löschen wollen. Natürlich kann man die Frames jederzeit editieren, und zwar über die Palette für Frames sowie das dazugehörige Eigenschaftenfenster.

Hilfreiche Software

. .

Macromedia Dreamweaver

. .

103

Adobe GoLive Viele Paletten für die Kunst Die ersten professionellen WYSIWYG-Editoren waren GoLive Cyberstudio und Dreamweaver. Doch seit den zunächst noch rudimentären Programmversionen ist einiges geschehen. Während es Macromedia durch Flash endgültig geschafft hat, in den Massenmarkt vorzustoßen, wurde Cyberstudio von Adobe gekauft und heißt nun »Adobe GoLive«. In ihrer Funktionalität ähneln sich die beiden Widersacher heute, auch wenn es natürlich noch Unterschiede gibt – diese vor allem in der Handhabung.

Der Arbeitsbereich Seit der letzten Version hat sich bei GoLive 5.0 einiges getan und Adobe hat der neuen Versionsnummer einige Zusatzfunktionalitäten und Verbesserungen im Detail gegönnt. Besonders hervorzuheben unter den Neuerungen sind die so genannten »SmartObjects«. Diese machen es möglich, direkt in GoLive Photoshop-, Illustrator- oder LiveMotion-Dokumente zu platzieren, zu beschneiden und in das gewünschte Web-Bildformat umzuwandeln. Mit dieser Vorgehensweise fallen natürlich einige zeitaufwendige Schritte bei der Umwandlung von Bildern weg, leider jedoch nur unter Verwendung der entsprechenden Adobe-Programme. Auch die gemeinsame Arbeit eines Teams an einer Site wird von GoLive 5.0 nun unterstützt. Mittels »WebDAV« (Web Distributed Authoring and Versioning) werden Versionskontrolle und Arbeitsgruppenunterstützung inklusive Freigaben möglich.

104

Auf den ersten Blick wirkt jedoch auch das neue GoLive recht unaufgeräumt, da sehr viele Paletten zur Verfügung stehen, die teilweise auch noch diverse Reiter haben, über die auf weitere Funktionen zugegriffen werden kann. Etwas gewöhnungsbedürftig ist hierbei, dass viele Funktionen nicht über das Menü, sondern nur über die entsprechenden Elemente in den Paletten zur Verfügung stehen. Andere Funktionen wiederum stehen nur über das Menü zur Verfügung, was die Bedienung nicht gerade vereinfacht. Hat man sich jedoch an diese Dinge gewöhnt, lässt sich das Programm recht schnell erlernen. Zum Glück wurde das bislang eher minderwertige Hilfesystem in der neuen Version komplett überarbeitet und steht nun zur Verfügung, um den Umgang mit dem Editor zu erlernen. In der Bedienung fällt auf, dass Elemente wie Bilder oder Frames nur erzeugt werden

Hilfreiche Software

. .

G

Abbildung 1 GoLive mit einigen verfügbaren Palettenfenstern G

Abbildung 2 Die Outline-Ansicht von GoLive

können, indem man sie per Drag & Drop entweder aus der Palette oder aus einem Ordner nimmt und sie im Dokument an der richtigen Stelle »fallen lässt«. Vor allem bei großen Seiten mit vielen Elementen und einer kleinteiligen Struktur stört diese Vorgehensweise häufig, auch wenn sie im Ansatz recht intuitiv ist. Im Dokumentenfenster können über die Reiter Layout, Frames, Source, Outline und Preview verschiedene Ansichten auf das Dokument eingestellt werden. Dabei kommt Outline eine Besonderheit zu: Hiermit kann eine hierarchische Ansicht aller HTML-Befehle eingesehen werden. Dieses Feature dürfte für den normalen User uninteressant sein, für Webdesigner, die sich noch dafür interessieren, welchen Code Ihr Webeditor schreibt, ist es jedoch praktisch und wird häufig genutzt.

Die Palette Color überzeugt vor allem durch ihre hochqualifizierten Farbwähler: Es stehen insgesamt neun Möglichkeiten zur Verfügung, darunter auch ein RGB- und ein CMYK-Wähler, der automatisch die nächstliegenden »reinen« Webfarben anzeigt. Der Inspector wandelt sich je nach ausgewähltem Element, um die möglichen Änderungen oder Einstellungen vornehmen zu können. Als extrem unangenehm empfinden wir hier allerdings, dass gerade häufig benötigte Textformatierungen nicht im Inspector möglich sind. Besonders gelungen ist die Möglichkeit, auch Aktionen (ein DHTML-Feature) direkt an der Auswahl festzulegen und zu verändern. Das wichtigste Fenster zur Neuerstellung von Elementen ist das für Objekte. Insgesamt neun Untergruppen stehen zur Verfügung, darunter auch eine für selbstdefinierte Steuerzei-

Adobe GoLive

. .

105

H

Abbildung 4 Verwendete Farben können über eine ganze Site hinweg überprüft werden.

G

Abbildung 3 Umfangreiche Paletten und gewöhnungsbedürftige Symbole bei GoLive

chen. Sämtliche in einer HTML-Seite möglichen Elemente, wie Bilder, Applets, Frames oder QuickTime Movies können hier ausgewählt und eingesetzt werden.

GoLive als Layout-Programm Bereits vor der Übernahme des Programms durch Adobe führten die Entwickler so genannte »Grids« ein, also Raster, auf denen Objekte wie Texte und Bilder angeordnet werden können. Diese bestehen aus Tabellen, deren rasterartig angeordnete Zellen mittels zusätzlichem Code im Editor, nicht aber im Browser sichtbar sind. Sicherlich gibt es feinere Mög-

106

lichkeiten der Gestaltung von Layouts mittels Tabellen, da der Sourcecode natürlich durch derartige Hilfestellungen immer anwächst. Auch das Verhalten der Grid-Tabellen bei einer Veränderung der Fenstergröße des Browsers kann nicht flexibel gehandhabt werden, für die Erstellung erster Sketches jedoch ist die Funktion sehr wertvoll.

GoLive als Site-Editor Eine große Stärke des Programms ist es, ganze Sites zu überwachen. Dabei liegt der Fokus besonders auf der konsistenten Verwaltung von Farben, Links und Schriftarten (so genannte

Hilfreiche Software

. .

H

Abbildung 5 Ein Grid als Layouthilfe ...

G

Abbildung 6 ... und die Ansicht in der Browserdarstellung

Fontsets). Im Site-Fenster werden alle Variationen dieser Elemente angezeigt, die in irgendeinem Dokument vorkommen. Das erleichtert vor allem die Kontrolle einer einheitlichen Gestaltung vieler Einzelseiten. Auch interne und externe Links können so kontrolliert und verändert werden. Besonders praktisch: Alle Links auf eine bestimmte Seite können zentral geändert werden, das zeitraubende Öffnen der einzelnen HTML-Seiten entfällt.

Adobe GoLive ist sicherlich für erfahrene Gestalter ein machtvolles Werkzeug, wenn sie bereit sind, sich in die ungewohnte Bedienung einzuarbeiten. Sowohl die Möglichkeiten der Farbverwaltung, als auch die große Flexibilität beim Einsatz eigener Tags und Bibliotheken machen das Programm dabei unschlagbar vielseitig. Für den ungeübten Anwender jedoch ist das Programm sicherlich zu komplex und in der Handhabung oft zu kompliziert.

Adobe GoLive

. .

107

Microsoft FrontPage 2000 Word fürs Web FrontPage funktioniert ähnlich wie alle MicrosoftProgramme: Einsteiger können schnell in Aktion treten, es gibt viele Vorlagen, und die Oberfläche ist den meisten bestens bekannt. Doch die Einfachheit muss bezahlt werden. Für professionelle und geübte Anwender oder solche, die auch weitere Editoren nutzen möchten, gestaltet sich das Abschalten sämtlicher FrontPage-Automatismen schwierig bis unmöglich.

Standardisierung Ein großer Vorteil der Office-Produktfamilie liegt darin, dass alle Programme über ein identisches Aussehen und eine identische Funktionsweise verfügen. So natürlich auch FrontPage. Wer mit Word Texte erstellen kann, dem wird es leicht fallen, mit FrontPage eine Site aufzubauen. FrontPage nennt Sites übrigens »Webs«, eine recht unnötige Umbenennung. Gerade Anfänger dürften die bekannte Oberfläche und die somit intuitive Bedienung schätzen lernen und gerne die vielen aus der großen Familie bekannten Extras, wie automatische Rechtschreibprüfung oder Makroprogrammierung, nutzen. Die 2000er-Version hat mit ihrem allerersten Vorgänger, von Webdesignern immer müde belächelt, nichts mehr zu tun. Mittlerweile ist auch Microsoft klar geworden, dass proprietärer HTML-Code von niemandem gewünscht ist, und so behält FrontPage Codezeilen, die aus anderen Programmen übernommen werden, unverändert bei. Einige Tools wie die Pi-

108

pette, mit der man auch aus Bildern HTMLFarben »greifen« kann, sind richtig sinnvoll. Seine Stärken kann das Programm aber nur dann ausspielen, wenn eine Arbeitsgruppe an der gleichen Site arbeitet (selbstverständlich alle Mitglieder mit FrontPage ...) und Aufgaben und Berichte, kurz die Organisation eines »Webs« ansteht. Ein hervorragendes Berichtswesen hält hierbei alle Beteiligten auf dem Laufenden, wie es um die Site steht und wer welche Aufgaben zu erledigen hat. Diese Informationen werden im Webordner gespeichert, sodass alle mit FrontPage darauf zugreifen können. Probleme gibt es genau dann, wenn auch nur eine Person darauf verzichtet, FrontPage zu benutzen, das Programm und die gespeicherten Metainformationen werden dann unberechenbar.

Hilfreiche Software

.

.

Abbildung 1 E Die FrontPage-Arbeitsfläche mit allen verfügbaren Symbolleisten

Abbildung 2 E Und zum Vergleich: die WordArbeitsfläche ...

Microsoft FrontPage 2000

.

.

109

G

Abbildung 3 Die Ordneransicht: nur für Windows-Nutzer Gewohnheit

G

Abbildung 4 Ordentliche Menschen werden sie lieben: die Berichtsansicht.

Der Arbeitsbereich Unterhalb der Menüleiste und der gewohnten Symbole sind die Ansichtsleiste und das eigentliche Dokument angeordnet. Dieses kann in drei verschiedenen Modi angesehen werden: als Layout, als HTML-Code und in einer Vorschau. Geschickt gemacht: Die Vorschau ist richtig gut, wenn auch der Microsoft Internet Explorer installiert ist. Dieser ist nämlich einfach eingebunden, sodass eine Seite unter »realen« Bedingungen getestet werden kann. Die Einbindung anderer Browser ist leider nicht möglich. In der linken Ansichtsleiste schließlich finden wir alles, was wir brauchen, um die Arbeit an einer Site zu organisieren, für die meisten Darstellungen muss jedoch ein »Web« geöffnet sein. Dieses Feature haben wir bei komplexen Sites schon oft vermisst. Ob man nun Dateien sucht, die älteren Datums sind, alle fehlerhaften Links angezeigt bekommen möchte oder

110

aber alle externen Links überprüfen möchte: Die Berichtsansicht macht’s möglich (Abb. 4). Am besten dabei ist die übersichtliche tabellarische Anzeige, die auch Änderungen in der Liste möglich macht, sodass nicht alle HTMLSeiten einzeln aufgerufen werden müssen. Auch der Bearbeitungsstatus einer Seite durch Mitglieder eines Teams kann so jederzeit leicht überprüft werden. Mit Hilfe der Navigationsansicht können einzelnen Seiten Gemeinsame Randbereiche zugewiesen werden. Dies können laut Handbuch z.B. Logos oder Menüpunkte sein. Wählt man die Option, so wird in jedem einzelnen Dokument ein solcher Randbereich eingefügt und kann in der Navigationsansicht angesehen und zentral editiert werden.

Hilfreiche Software

.

.

G

Abbildung 5 Gewöhnungsbedürftig: die Navigationsansicht

G

Abbildung 6 Die Hyperlink-Ansicht bietet eine grafische Übersicht auf alle Links innerhalb eines Webs.

G

Abbildung 7 Bei Teams übernimmt die Aufgabenansicht die Kontrolle.

Microsoft FrontPage 2000

.

.

111

G

Abbildung 8 Die Auto-Miniaturansicht: ein schnelles Werkzeug zum Verkleinern von Bildern

G

Abbildung 9 Das Pipetten-Tool: hervorragendes Werkzeug, umständliche Handhabung

Weitere Features Außer den Standardfunktionalitäten, die mittlerweile bei Webeditoren zum guten Ton gehören, wurden bei FrontPage auch einige Features implementiert, die das Leben deutlich einfacher machen können. Miniaturbilder Vor allem bei der Erstellung von Shops oder Katalogen steht man oft vor der zeitaufwändigen Aufgabe, eine kleine Vorschau eines Bildes erzeugen zu müssen. Der beste Weg ist in diesem Fall sicherlich das Verkleinern und Komprimieren des Bildes in einem Bildbearbeitungsprogramm. Eine sehr schnelle und einfache Variante jedoch bietet uns FrontPage an: Man setzt einfach das Originalbild ins Dokument ein, markiert es und klickt dann auf die Schaltfläche Auto-Miniaturansicht. Das Pro-

112

gramm wandelt das Bild in eine kleinere Variante um, die als weitere Bilddatei gespeichert werden kann. Leider wird bei der Verkleinerung automatisch im HTML-Code ein blauer »Klick-mich-jetzt«-Rahmen hinzugefügt, der mühsam wieder entfernt werden muss. Pipette Unter Zuhilfenahme einer Pipette ist es möglich, aus jedem Bild den Hexadezimal-Code einer Farbe zu kopieren, damit diese in FrontPage dann für die Gestaltung von Text oder anderen einfärbbaren Elementen verwendet werden kann. Dieses durchaus praktische Werkzeug steht leider nur im Einstellungsfenster für Weitere Farben zur Verfügung und ist in der Handhabung entsprechend umständlich.

Hilfreiche Software

.

.

G

Abbildung 10 Unser Favorit: das Readymade-Design »Impressionen«

Fertige Designs Kennen Sie das: Sie sitzen in einer Präsentation, und am Ende erscheint eine PowerPointFolie mit einem schwarzen Männchen und einem Fragezeichen neben dem Kopf: »Noch Fragen?« Dieses Männchen ist ein »ClipArt«, das Microsoft allen Nutzern auf dieser Welt mitgegeben hat, um Designer zu quälen. Ähnliches hat der Konzern auch jetzt wieder vor und implementierte in FrontPage 2000 fertige »Designs«. Diese bestehen aus Grafiken und Formatvorlagen, die auf ein Dokument oder eine ganze Site angewendet werden können, um eine konsistente Gestaltung zu erreichen. Bis auf wenige Ausnahmen entsprechen diese Designs jedoch nicht unseren Schönheitsvorstellungen. Doch reiner Standesdünkel wäre hier fehl am Platz, denn das Feature kann auch dazu verwendet werden, eigene Vorlagen zu erstellen, die dann auch von Laien (z.B. im Intranet)

G

Abbildung 11 Auch nicht von schlechten Eltern: »Zitrusmix«

sehr einfach genutzt werden können und somit tatsächlich für die konsistente Gestaltung einer ganzen Site sorgen. Vor allem kleinere Firmen und Arbeitsgruppen, die Websites (auch für das Intranet) aufbauen und pflegen müssen, werden ihre Freude an der aus der Office-Welt bekannten Funktionsweise des Programms haben. Für Webdesigner stellt FrontPage jedoch kein ernstzunehmendes Werkzeug dar, da es viele Änderungen im Alleingang macht, die auch nicht mehr nachvollzogen werden können. So haben wir beispielsweise verschiedene Funktionen getestet und danach wieder rückgängig gemacht. Trotzdem verblieben Unterordner mit undefinierbaren Dateien und Funktionen in unserem »Web«. FrontPage scheint sich also (wie fast alle Office-Programme) nur dann zu eignen, wenn man für eine Seite ausschließlich dieses Programm benutzt und sonst keines.

Microsoft FrontPage 2000

.

.

113

Macromedia Flash Animation und Interaktivität im Netz Flash hat sich innerhalb kurzer Zeit zu einem der beliebtesten Plug-ins entwickelt und ermöglicht Animationen und Interaktionen, die so im Netz für unmöglich gehalten wurden. Aber ist der Hype um Flash wirklich richtig?

Flash ist ein Programm zum Erstellen interaktiver Filme auf Basis von Vektorgrafiken für das WWW. Um die Filme im Browser abspielen zu können, benötigt man ein Plug-in gleichen Namens, das häufig schon in der Browserinstallation integriert ist. Die Verbreitung nimmt immer mehr zu und kann mittlerweile guten Gewissens für eine Vielzahl von Seiten verwendet werden. Lange Zeit war es im Netz nur möglich, mit Hilfe von GIF-Animationen Bewegung auf die Sites zu bringen. Interaktion zu erzielen war nur mit HTML, JavaScript oder Java möglich, was einem entweder nicht sehr viele Möglichkeiten offen ließ, lange Ladezeiten mit sich brachte oder sehr unstabil auf dem Rechner lief. Ein kurzes Intermezzo machte Shockwave, Filme, die aus dem Programm Director exportiert werden, mit dem eigentlich CD-ROMs programmiert werden. Shockwave bietet zwar eine Vielzahl von Interaktionsmöglichkeiten, und auch heute werden Spiele im Netz noch auf Director-Basis produziert. Problem sind aber die langen Ladezeiten, die Schwierigkeiten mit fließenden Animationen und die mangelnde Verbreitung des Plug-ins.

114

Flash (hier Version 5) dagegen basiert auf Vektorgrafiken, die in Programmen wie Illustrator oder Freehand hergestellt werden. Vektorbilder sind deutlich kleiner als Bilder, die auf Pixeln basieren, ermöglichen dadurch schnelle Ladezeiten und beliebige Skalierbarkeit. Gestalten lassen sich mit Flash alle Bestandteile einer Website, von Bildern über Animationen bis hin zu Navigationselementen und synchronem Sound. Mittlerweile haben Millionen User den Flash-Player im Browser integriert. Falls das Programm nicht installiert ist, lässt es sich entweder von der Macromedia-Site downloaden, oder aber man navigiert durch eine extra zu erstellende Alternativversion in HTML. Um ein Flash-File zu erstellen, werden Grafiken direkt im Programm gezeichnet oder importiert. Diese werden auf der Bühne platziert und abgestimmt auf eine Zeitleiste animiert. Zweiter Schritt nach der Animation ist die Interaktion. Grafiken werden mit Funktionalitäten belegt, die auf Aktionen des Users reagieren und dadurch den Film verändern. Der fertige Film wird als Flash-Player-Film exportiert und in eine HTML-Seite integriert.

Hilfreiche Software

. .

F

Abbildung 1 Flash mit seinen wichtigsten Fenstern und Paletten, in der Mitte das Hauptfenster, links die Symbolleiste

Die Fenster und Paletten Für die Arbeit in Flash sollte man sich auf drei Fenster konzentrieren. Das Hauptfenster Es besteht aus der Bühne, auf der sich der komplette Film abspielt. Über diesem Bereich ist die Zeitleiste, auf der festgelegt wird, wann Animationen und Aktionen stattfinden. Hier wird außerdem festgelegt, in welcher Ebene welche Grafiken liegen. Je weiter oben, desto weiter vorne liegt das Objekt.

Die Symbolleiste Auf ihr sind alle Tools zu finden, mit denen man Grafiken erstellt und bearbeitet. Das sind zum einen die Auswahlwerkzeuge Pfeil und Lasso, die Tools zum Erstellen von Linien, Rechtecken, Kreisen und Text. Diese Elemente sind alle vektorisiert, d.h. skalierbar, und kaum datenintensiv. Außerdem gibt es die Malwerkzeuge Stift und Pinsel, das Tintenfass und den Farbeimer zum Einfärben von Objekten, die Pipette zur Farbaufnahme und den Radiergummi zum Löschen sowie die Hand zum Verschieben des Films und die Lupe zum Vergrößern. Die Ansichtsgröße kann auch exakt über das Eingabefeld reguliert werden. Der Bereich darunter ist kontextsensitiv und ändert sich, je nachdem welches Werkzeug man ausgewählt hat. Hier werden zum Beipiel Farben definiert, Schriften festgelegt oder Objekte skaliert.

Macromedia Flash

. .

115

Abbildung 2 E Die Bibliothek mit einer Grafik, einer Schaltfläche und einer Filmsequenz

Das Bibliotheksfenster Es enthält alle Objekte, die man erstellt und in Symbole umgewandelt hat. Man sollte sofort nach Erstellung jedes Objekt in die Bibliothek legen, da es dann wieder zu verwenden ist und die Größe des Filmes deutlich verringert. Aber Vorsicht, die Eigenschaften, die man diesen Symbolen zugeordnet hat, bleiben erhalten, deshalb sollte man sehr strukturiert vorgehen. Symbole werden definiert als Grafik (häufig bei Einzelbildern ohne Interaktivität), als Schaltfläche (Button) oder Filmsequenz (meist bei animierten Bildfolgen). Diese Symbole können kombiniert und wieder als neues Symbol gespeichert werden (Abb. 2).

116

Getting started Öffnet man das Programm, so öffnet sich auch sofort das Hauptfenster mit einer leeren Bühne ne, die nun bespielt wird. Um besser arbeiten zu können, sollte man bei Ansicht auf Bild einblenden und Arbeitsbereich gehen, dann sieht man genau, wie das Flash-File später aussehen wird. Alles, was außerhalb der weißen Fläche zu sehen ist, taucht auch später im Flash-Film nicht auf, sondern wird abgeschnitten. Als Erstes definiert man die Eigenschaften des Films über Modifizieren · Film ... Hier stellt man die Geschwindigkeit ein, die mit zwölf Bildern pro Sekunde als Standard in Ordnung ist, sowie die Größe des Films. Das ist besonders wichtig, wenn man mit Pixelgrafiken

Hilfreiche Software

. .

F

Abbildung 3 Ein quadratischer Film mit violettem Hintergrund, der mit zwölf Bildern pro Sekunde abläuft

arbeitet, die in dieser Größe am besten dargestellt werden. Wird der Film später im Browser vom User skaliert, verzerrt es die pixelbasierten Grafiken. Man hat die Möglichkeit, sich ein Raster, in diesem Falle heißt es Gitternetz Gitternetz, anzeigen zu lassen, das bei der Positionierung von Grafiken hilft. Es ist im späteren Film nicht sichtbar. Sichtbar ist aber der Hintergrund, der hier ebenfalls eingestellt wird. Man hat nun die Möglichkeit, direkt auf der Bühne mit den Werkzeugen Grafiken zu erstellen. Es bietet sich aber an, komplexere Elemente in Programmen wie Illustrator oder FreeHand zu erstellen und zu importieren, da man dort weitaus mehr Möglichkeiten zur Gestaltung hat.

Das Erstellen von Symbolen Sobald man das Bild gezeichnet, importiert oder mit Copy-and-Paste in die Datei geladen hat, erscheint es auf der Bühne und im obersten linken Kästchen der Zeitleiste. Die wichtigsten Schritte sind nun, das File erst mal zu sichern, dann die Ebene, auf der die Grafik liegt, benennen, damit man die Orientierung nicht verliert. Jede Grafik, die in dem Film vorkommt, sollte auf einer eigenen Ebene liegen, einfach eine neue über Einfügen · Ebene erstellen. Die oberste Ebene liegt vorne, die unterste hinten, alle lassen sich jederzeit verschieben. Der dritte wichtige Punkt ist, die Grafik in ein Symbol umzuwandeln. Ein Symbol ist, wie vorhin schon bemerkt, ein Bild, eine Animation oder eine Schaltfläche, die im Film immer wieder verwendet werden können. Man klickt dazu auf die Grafik und geht auf Einfügen · In Symbol konvertieren und hat den die Möglichkeit auszuwählen, was für ein Symbol die Grafik sein soll. Je klarer man sich dabei über den Verlauf und Aufbau bzw. die Interaktivität

Macromedia Flash

. .

117

F

Abbildung 4 Das Hintergrundbild der ersten Szene, eingefügt auf eine benannte Ebene

G

Abbildung 5 Man sollte sich genau überlegen, wie man Grafiken im Film einsetzt, bevor man ihnen eine Eigenschaft zuteilt.

des Filmes ist, umso einfacher wird die Einteilung. Nun taucht das Symbol automatisch in der Bibliothek auf, und jedes Mal, wenn es wieder verwendet werden soll, zieht man es einfach wieder auf die Bühne. Dabei wird ein Verweis auf das Symbol gesetzt, was unvergleichlich weniger speicherintensiv ist, als würde man das Symbol neu erstellen. Wird das Symbol allerdings bearbeitet, ändert es sich auch an allen Stellen des Filmes, an denen es zum Einsatz kommt. Das Symbol bearbeiten kann man, indem man auf das Icon im Bibliotheksfenster doppelklickt. Je nachdem, was man vorher als Eigenschaft definiert hat, bekommt man unter-

Symbol Ein Symbol ist ein wieder verwendbares Bild, eine wieder verwendbare Animation oder eine wieder verwendbare Schaltfläche.

118

schiedliche Möglichkeiten, das Symbol zu verändern. Bei Doppelklick auf eine Grafik tauscht sich die Bühne aus, und man sieht nun die Zeichnung, die man beliebig verändern kann. Um wieder zurück in den Film zu kommen, reicht es aus, oben links auf Szene_1 zu klicken. Modifiziert man eine Schaltfläche, sieht das Bearbeitungsfenster ganz anders aus. Es gibt die Spalten Normal, Darüber, Gedrückt und Aktiv, und es zeigt den Zustand der Schaltfläche bezogen auf die Maus. Bei Normal ist bereits die Grafik eingesetzt, wählt man nun die Kästchen unter den drei Zuständen aus und geht auf Einfügen · Schlüsselbild, erscheint die Grafik in allen Zuständen und kann nun bearbeitet werden. Einfachste Form des Responses, also der Rückmeldung an den User, dass seine Aktion etwas auslöst, wäre das Einfärben der Grafik in einen dunkleren Ton bei Darüber und das Verkleinern dieses Bildes bei Gedrückt.

Hilfreiche Software

. .

G

Abbildung 6 Bearbeiten einer Schaltfläche in Flash

Wechselt man nun zurück zu Szene_1 und stellt Steuerung · Schaltflächen aktivieren ein, kann man den Effekt schon auf der Bühne testen. Um weiterzuarbeiten, sollte man diesen Modus wieder zurückstellen. Bearbeitet man eine Filmsequenz, erhält man ein Fenster, das dem der ersten Szene nicht unähnlich ist. Man kann sowohl in Ebenen arbeiten, als auch die Zeitleiste verwenden und so einen kompletten, in sich geschlossenen Film erstellen, am besten unter Verwendung bereits erstellter Symbole.

G

Abbildung 7 Erstellen einer animierten Sequenz, die im Film automatisch loopt.

Aus Symbolen werden Instanzen Nachdem nun alle Symbole erstellt und modifiziert sind, begibt man sich wieder in die erste Szene, um den interaktiven Film zu bearbeiten. Um ein Symbol auf der Bühne zu platzieren, muss man in den entsprechenden Ebenen je ein Schlüsselbild einfügen. Flash kann Instanzen nur in Schlüsselbildern auf der aktuellen Ebene platzieren. Man zieht das Symbol an die vorgesehene Stelle auf der Bühne und erzeugt damit eine so genannte Instanz des Symbols. Diese Instanzen können beliebig positioniert werden, auch innerhalb anderer Symbole.

Instanz Eine Instanz ist das Auftreten eines Symbols auf der Bühne oder die Verwendung in einem anderen Symbol.

Macromedia Flash

. .

119

G

Abbildung 9 Tweening-Einstellungen für Animationen in Flash

F

Abbildung 8 Platzierung von Instanzen entlang der Zeitleiste

Filmsequenz Das Erstellen einer Filmsequenz unterscheidet sich vom Erstellen einer Grafik. Filmsequenzen benötigen zum Abspielen nur ein einziges Schlüsselbild. Grafikinstanzen müssen in jedes Bild platziert werden, in dem sie angezeigt werden sollen. Nach dem Erstellen einer Instanz wählt man Einfügen · Bild, um die der Länge des Grafiksymbols entsprechende Anzahl von Bildern anzufügen.

Beeinflussung der Dateigrösse durch Animationen (Daumenregel) Eine Bild-für-Bild-Animation vergrößert die Datei wesentlich mehr als eine Tween-Animation.

120

Der Film Hat man nun die Instanzen im ersten Frame des Films positioniert, geht es daran, ihn zu animieren und interaktiv zu machen. Dazu setzt man an einer bestimmten Stelle, z.B. am Frame 20, jeweils ein Schlüsselbild. Es wird also einen Film von 20 Bildern Länge erzeugt. Nun kommt der wichtigste Teil, die Animation. Animationen können in Flash mit Hilfe zweier Methoden erstellt werden: als Bild-fürBild-Animationen und als Tween-Animationen Tween-Animationen. In der Bild-für-Bild-Animation werden Veränderungen per Hand in jedem einzelnen Bild erstellt. In der Tween-Animation erstellt man Start- und Endbild als Schlüsselbild, und Flash berechnet die Zwischenbilder. Jedes Bild einer Ebene, auf der sich etwas auf der Bühne ändert, ist ein Schlüsselbild.

Hilfreiche Software

. .

G

Abbildung 10 Typische Flash-Intro-Animation mit Bewegung, Skalierung und Transparenzen

Um ein Tweening einzustellen, wählt man die ganze Ebene entlang der Zeitleiste von Schlüsselbild zu Schlüsselbild aus. Über Modifizieren · Bild erhält man ein Dialogfenster, in dem man einstellt, ob neben der Bewegung auch die Größenveränderung zwischen erstem und letztem Schlüsselbild berechnet werden soll. Außerdem lassen sich die Bilder drehen, ihre Bewegung an einem Pfad ausrichten und die Bewegung zu Beginn oder am Ende abbremsen, um einen natürlicheren Animationsfluss zu erzeugen. Verschiebt man nun eines der Schlüsselbilder auf der Bühne und bewegt dann den roten Marker entlang der Zeitleiste, sieht man sofort die Animation. Wenn man zusätzlich über Modifizieren · Transformieren · Skalieren und Drehen... die Größe und Ausrichtung eines der Schlüsselbilder verändert, hat man mit einfachsten Mitteln unendlich viele Gestaltungsmöglichkeiten.

G

Abbildung 11 Auch ohne Programmierkenntnisse lassen sich in Flash interaktive Filme erstellen.

Instanzeigenschaften Nachdem man also eine Instanz des Symbols erstellt und erste Animationen eingesetzt hat, klickt man die einzelnen Instanzen an und geht auf Modifizieren · Instanz. Dort kann man Farbeffekte angeben, Aktionen zuordnen, den Grafikanzeigemodus einstellen oder das Verhalten der Instanz ändern. Das Verhalten der Instanz ist das des Symbols, es lässt sich aber auch ändern. Diese Einstellungen gelten immer nur für die Instanz und nicht das Symbol. Kann man bei Grafiken und Bildsequenzen nur Farbeffekte wie Helligkeit, Farbton, die Alphawerte und die RGB-Einstellungen verändern, lassen sich bei den Schaltflächen alle interaktiven Befehle einstellen. Zum einen sind das die Ereignisse, bei denen die Aktion ausgelöst wird, wie zum Beispiel bei Klick oder Rollover, zum anderen die Aktionen selbst, die vom einfachen Go to, das heißt gehe zu folgendem Bild oder folgender Szene, über Stop und Play bis hin zu komplexen Programmierbefehlen reichen. Aber auch mit den einfacheren Optionen lassen sich komplexe Filme erstellen.

Macromedia Flash

. .

121

F

Abbildung 12 Einstellungen zum Erstellen eines Flash-Films

Zwischendurch lässt sich der Film über Steuerung · Film testen immer wieder kontrollieren. Veröffentlichen von Flash-Files Ein Flash-File kommt selten allein. Um einen Flash-Film in einem Browser zu sehen, muss man zunächst ein HTML-Dokument öffnen, das den Flash Player ansteuert und darstellt. Es empfiehlt sich außerdem, ein JPEG, ein GIF oder eine GIF-Animation mit Teilen des Films abzuspeichern als Ausweichmöglichkeit für den Fall, dass der Benutzer Flash nicht installiert hat. Das Hauptdokument ist allerdings der Flash Player und hat die Endung .swf. Geht man auf Datei · Veröffentlichen werden Flash Player und HTML-Seite automatisch erstellt. Zuvor sollte man allerdings die Einstellungen überprüfen und gegebenenfalls optimieren. Die wichtigsten Einstellungen für einen normalen Film sind folgende:

122

E

E

E

E

E

Ladereihenfolge Bei langsamen Netzverbindungen wird unter Umständen das erste Bild des Films nicht sofort ganz geladen. Hier wird festgelegt, in welcher Reihenfolge die Ebenen des ersten Bildes geladen werden. Größenbericht erstellen Bei der Veröffentlichung wird eine Textdatei erstellt, die Aufschluss über die Größe des Films und seiner Teile gibt und zur Optimierung verwendet werden kann. Vor Import schützen Sollte man einstellen, um zu verhindern, dass jemand den Film aus dem Browser sichert und wieder in Flash importiert. JPEG-Qualität Sind in der Datei Bitmaps geladen, wird hier die Komprimierungsrate als JPEG festgelegt. Je niedriger, desto schneller. Stream-Audio und Ereignis-Audio Soundeinstellungen übergehen Hier werden Spezifikationen für eventuell enthaltene Sounds eingestellt.

Hilfreiche Software

..

Abbildung 13 E Einstellungen zum Modifizieren eines HTML-Dokuments

E

E

E

Version Hier stellt man ein, ab welcher Flash-PlayerVersion der Film zu sehen sein soll. Allerdings gehen Funktionen von Flash 4 bei niedrigeren Versionen des Plug-ins verloren. Auch das HTML-Dokument, welches das File im Browser lädt, kann modifiziert werden. Wichtig sind nachfolgende Einstellungen, die anderen kann man als Standard stehen lassen. Größe Man kann die Größe des Films entweder an die vorgegebene Größe anpassen, oder man definiert sie pixelgenau in Breite und Höhe. Da Flash-Files aber skalierbar sind, kann man auch die prozentuale Größe im Verhältnis zum Browserfenster angeben. Abspielen Menü anzeigen: Klickt man im Browser auf den Flash-Film bei Windows mit der rechten Maustaste, beim Mac mit gedrückter Command-Taste, erhält man einige Optionen wie zum Beispiel Stop oder Zoom. De-

E

E

aktiviert man diese Funktionen, erhält der User nur noch die Info über Flash. Beim Beginn anhalten: Stellt man diese Funktion aus, läuft der Film erst ab, wenn der User auf eine Schaltfläche klickt oder über oben genanntes Menü geht. Ist aber nicht empfehlenswert. Wiederholen: Diese Einstellung lässt den Film loopen, sobald das letzte Bild erreicht ist. Für immer! Qualität Qualität bedeutet bei Flash, dass die Vektorgrafiken geglättet werden, also eine AntiAlias-Funktion. Es empfiehlt sich hoch einzustellen, auch wenn die Wiedergabegeschwindigkeit darunter leiden kann. Ausrichtung Sie bestimmt, wie das Fenster des FlashFilms im Browserfenster positioniert wird.

Macromedia Flash

..

123

Tipps und Tricks Flash-Filme zeichnen sich besonders durch ihre schnellen Ladezeiten und fließenden Animationen aus. Damit das so bleibt, gibt es einige Punkte, die man beachten sollte: E Arbeiten Sie mit Symbolen, sobald eine Grafik mehr als nur ein Mal erscheint. E Tweenings laden deutlich schneller als Animationen, die per Hand und mit Schlüsselbildern erstellt werden. E Objekte, die sich im Film nicht ändern oder bewegen, können auf eine Ebene zusammengefasst werden.

124

E

E

E

E

Je weniger Schriften und Stile man verwendet, umso schneller lädt sich das File. Und es sieht meistens besser aus! Wenn man mit Sound arbeitet, bietet sich MP3 als am wenigsten speicherintensiv an. Auf Bitmaps sollte man sowieso soweit wie möglich verzichten, aber wenn es sein muss, dann wenigstens nicht animieren! Mit etwas Geschick lassen sich Symbole in immer neue Instanzen verwandeln, die man durch Einfärben unterschiedlichst gestalten kann.

Hilfreiche Software

. .

Macromedia Flash

. .

125

Dynamisches HTML Aktion und Reaktion Seit sich das WWW vom reinen Informationsauch zum Unterhaltungs- und Werbemedium entwickelt hat, wurde immer augenscheinlicher, dass die bisherigen Möglichkeiten von HTML nicht mehr ausreichten, um den Bedarf an bewegten Darstellungen und dynamischen Seiten zu decken. Die beiden Browserhersteller Netscape und Microsoft implementierten deshalb in die Viererversionen ihrer Programme so genanntes Dynamic HTML – eine Mischung aus JavaScript-Befehlen, HTML-Codes und Style Sheets.

Leider konnten sich die beiden Unternehmen nicht einigen, was die Spezifikationen und Befehle betrifft, sodass wir einmal mehr darauf achten müssen, welcher Code in welchem Browser welche Auswirkungen hat. Auch wenn DHTML-Features oftmals als Ersatz für fehlendes gestalterisches Gespür herhalten müssen, gibt es einige Funktionen, die durchaus sinnvoll eingesetzt werden können.

DHTML-Dokumente in Dreamweaver erstellen

Cascading Style Sheets Ähnlich wie Formatvorlagen etwa in Word erlaubten es CSS, verschiedene Formatierungen für Texte, Tabellen oder ganze Seiten zentral abzuspeichern. Beim Editieren eines Dokumentes kann so immer wieder auf die gleichen Formate zugegriffen werden, ohne die einzelnen Spezifikationen jedes Mal neu eingeben zu müssen. CSS können auch in einem externen Dokument gesichert werden. So wird es möglich, mit einer einzigen Änderung die Formate aller betroffenen Dokumente auszutauschen.

Dreamweaver eignet sich hervorragend für die Erstellung von DHTML-Dokumenten, da sowohl die Editierung und der Einsatz von CSS (Cascading Style Sheets) als auch von Bewegungsabläufen und Verhaltensweisen sehr einfach und intuitiv erfolgen kann.

126

Hilfreiche Software

. .

G

Abbildung 1 Nicht schön, aber aufschlussreich: ein DHTML-Dokument mit Style Sheets in Netscape 4.72 und im Internet Explorer 5.5 betrachtet

Dynamisches HTML

. .

127

Erstellung eines CSS 1. Stil hinzufügen Im CSS-Fenster (F7) können Sie über den Button Neuer Stil (Roter Pfeil) einen Stil hinzufügen. Geben Sie im auftauchenden Fenster zum Beispiel ».headline« ein, und drücken Sie OK.

2. Eigenschaften bestimmen Stellen Sie in diesem Fenster alle Eigenschaften ein, die Ihre zukünftigen Headlines besitzen sollen. Bei der Wahl der Stileigenschaften muss berücksichtigt werden, dass nicht alle Formatierungen in allen Browsern funktionieren. Die Einstellungen für Textfarbe, Schriftarten und Stärke funktionieren jedoch auf (fast) allen Browsern. Wenn Sie exotische Einstellungen wie Zeilenhöhen oder gepunktete Linien haben möchten, empfiehlt es sich, das Dokument in verschiedenen Browserversionen zu testen. Vergessen Sie dabei nicht die Versionen, die von den OnlineDiensten AOL, T-Online oder CompuServe verteilt wurden, diese sind weit verbreitet und werden von den Benutzern seltener erneuert. Angenehm an CSS ist, dass wir so auch eine absolute Position für ein Element festlegen können. In unserem Beispiel beträgt diese 90 Pixel Abstand zum linken Rand. Mit »reinem« HTML wäre eine solche Positionierung ungleich aufwändiger und müsste für jedes Element neu codiert werden.

128

Hilfreiche Software

. .

3. Stil anwenden Jeder Text, den Sie nun im Dokument markieren, kann jetzt als Headline formatiert werden.

Außer per Markierung können Sie auch per Drop-down-Menü wählen, welche Elemente mit einem Stil versehen werden sollen. Da wir in unserem Beispiel eine absolute Positionierung eines Elementes eingegeben haben, wandelt Dreamweaver dieses – in unserem Fall die Überschrift – automatisch in einen »Layer«, also eine Ebene um. Auch Ebenen sind ein Ergebnis der Bemühungen um die Erweiterung der HTML-Befehle, sie verhalten sich ähnlich wie Bildebenen in Photoshop oder FreeHand und ermöglichen es erstmals, Elemente übereinander zu legen – ein Meilenstein für Webdesigner.

4. Ergebnis Die Darstellung unseres Beispielbildes im Internet Explorer.

Dynamisches HTML

. .

129

Aktionen, Ereignisse und Verhaltensweisen Was mit »statischem« HTML bislang nicht möglich war, nämlich ein Dokument auf bestimmte Ereignisse direkt reagieren zu lassen, ist mit DHTML kein Problem mehr. Sie können so die Inhalte eines gesamten Bereiches, etwa eine Produktdarstellung in einer einzigen HTML-Seite, unterbringen. Die unterschiedlichen Elemente, wie Navigation, Produktüberblick, technische Details und Zusatzprodukte, liegen im gleichen HTML-Dokument auf ver-

schiedenen Layern vor und werden je nach Bedarf sichtbar oder unsichtbar geschaltet. Die Vorteile liegen klar auf der Hand: Außer der bereits erwähnten Möglichkeit, Ebenen einfach anzuordnen, ist die Ladezeit für einzelne Elemente extrem kurz, und auf dem Bildschirm ändern sich nur die jeweils neuen Informationen; alle anderen bleiben bestehen. Wir wollen uns die Möglichkeiten anhand eines kleinen Beispiels ansehen.

Navigationsmodell Zur Vorbereitung erstellen wir in einem Grafikprogramm drei Navigationsbilder, also GIFs mit den Headlines »Produktionsübersicht«, »technische Details« und »Zubehör«.

G

Abbildung 2 Ist eine Ebene ausgewählt, ändert sich das Eigenschaftenfenster entsprechend. An der oberen Kante befinden sich die Ebenenmarker (gelb, die ausgewählte Ebene ist blau markiert).

130

1. Ebenen erstellen Im ersten Schritt platzieren wir unsere drei Navigationsbilder in Ebenen, die wir dann an der richtigen Stelle über dem Hintergrund positionieren. Ebenen können Sie erstellen, indem Sie im Menü Einfügen Ebenen wählen oder in der Objektleiste das entsprechende Objekt anklicken und dann auf dem Dokument mit der Maus die Ebene in die gewünschte Position ziehen. Eine Ebene können Sie jederzeit mit dem »Anfasser« an der oberen linken Ecke verschieben oder mit Hilfe des Positionsrahmens die Größe verändern. Objekte können per Drag & Drop einfach in einen Ebenenrahmen verschoben werden.

Hilfreiche Software

. .

2. Eigenschaften festlegen Im Fenster Eigenschaften sehen Sie die Editiermöglichkeiten für eine Ebene: Sie können hier Hintergrundfarben oder -bilder eingeben, die absolute Position sowie Breite und Höhe ändern. Wenn Sie bei vielen Ebenen nicht die Übersichtlichkeit verlieren wollen, bietet es sich an, diese zu benennen (im Beispiel »nav3«). Der Z-Index bezeichnet die z-Achse der Ebene; je höher die Zahl, desto weiter vorne liegt die Ebene. G

Abbildung 3 Die erste Inhaltsebene und die entsprechenden Einstellungen im Eigenschaftenfenster

3. Inhalte bestimmen Nun fehlen noch die Inhalte. Diese sollen auf drei weitere Ebenen angelegt werden und sich jeweils ein- und ausblenden, wenn der entsprechende Menüpunkt gewählt wird. Auch die drei Inhaltsebenen sollten unbedingt Namen erhalten (in unserem Beispiel »ueberblick«, »technik« und »zubehoer«). Wenn Sie sich nicht die absoluten Positionspunkte und die Größe der Ebene merken wollen, können Sie auch die erste Ebene kopieren, die Kopie dann wieder einfügen und über die erste Ebene ziehen. Allerdings müssen Sie nun, um Darstellungsprobleme zu vermeiden, unbedingt die neue Ebene umbenennen und ihr einen höheren »Z-Index« geben. Wenn eine Ebene bei der Editierung der anderen stört, können Sie bei Sichtbarkeit · hidden wählen, um sie auszublenden. Über die Ebenenmarker im Hintergrunddokument sind auch ausgeblendete Ebenen jederzeit aufrufbar.

G

Abbildung 4 Die zweite Ebene mit den technischen Daten unseres Beispiels

Dynamisches HTML

. .

131

G

Abbildung 5 Im Fenster Verhalten können Sie für ein jeweils ausgewähltes Element ein Ereignis definieren.

G

Abbildung 6 Wenn eine Ebene gewählt ist, kann sie für das entsprechende Ereignis ein- und ausgeblendet werden. Abbildung 7 E Im Fenster Verhaltensweisen sehen wir die eingestellten Ereignisse für das jeweils ausgewählte Objekt.

132

4. Navigation programmieren Nachdem Sie noch die dritte Ebene angelegt haben, wollen wir nun die eigentliche Navigation programmieren, um Ebenen ein- und auszuschalten. Hierzu brauchen wir das Fenster Verhaltensweisen (F8). Zuerst muss ein Objekt markiert sein, dem wir eine Aktion zuweisen wollen. In unserem Beispiel ist dies der Navigationsbutton Produktüberblick. Ein Ereignis können wir nun im Verhaltensweisenfenster erzeugen, indem wir auf das dicke Pluszeichen klicken. Im erscheinenden Menü wählen wir in unserem Fall den Punkt Ebenen ein-/ausblenden. Sie können übrigens entscheiden, für welche Browsertypen diese Aktion gelten soll, wenn Sie sichergehen wollen, lassen Sie hier immer die Voreinstellung Browser ab 3.0 stehen.

Im darauf folgenden Dialogfenster werden wir nach den näheren Spezifikationen des Ereignisses gefragt und können so die gewünschte Ebene ein- und die beiden anderen ausblenden. Letzteres ist unbedingt nötig, da sich sonst alle aufgerufenen Layer nacheinander überlagern würde und nichts mehr zu lesen wäre.

Nach Klick auf OK zeigt sich die gerade eingestellte Aktion im Verhaltensweisenfenster. Dieses ändert sich jeweils mit einem ausgewählten Objekt, in unserem Beispiel mit dem ersten Navigationsbild.

Hilfreiche Software

. .

5. Fertigstellung und Ergebnis Wenn wir nun die letzten Schritte für die restlichen beiden Ebenen und ihre entsprechenden Navigationspunkte wiederholen (wobei natürlich jeweils andere Ebenen ein- oder ausgeblendet werden), kann das Ergebnis im Browser angesehen werden, und wir haben ein recht ladezeitund benutzerfreundliches Navigationsmodell geschaffen.

F

Abbildung 8 Intuitive Benutzerführung per Mouse-Over im Browser

Dynamisches HTML

. .

133

Strategien im WWW

136 Online-Werbung 136 Werbung in den neuen Medien

156 Intranet und Extranet 156 Das Intranet

140 Der Klassiker: Banner im Netz 147 Klein, aber fein: Microsites 148 Die Zukunft: Sonderformen der Online-Werbung

160 E-Branding 160 Klassische Marken im Netz 161 Die neuen E-Brands

152 Web-Announcing 152 Vorbereitung der Website 154 Selektion der Suchmaschinen und Verzeichnisse

161 Gutes und Schlechtes

168 Die Gestaltung von Online-Shops 168 Das Einkaufserlebnis im Netz 169 Der perfekte Aufbau des Verkaufsvorganges 173 Shopsysteme im Überblick 175 Von Amazon lernen 178 Von Apple lernen?

134

Strategien im WWW

.

182 Gestaltung von e-FinanceWebsites 182 Was ist anders bei E-Finance? 183 Personalisierung auf allen Ebenen? 185 Applikationsdesign 188 Best Practice

190 Portal-Sites 190 Die üblichen Verdächtigen 191 Personalisierbarkeit 192 E-Commerce-, Knowledge- und Community-Portals

196 Datenbankbasierte Sites 196 Wann lohnen sich datenbankbasierte Websites? 197 Unterschiede in Konzeption und Gestaltung 200 Redaktionssysteme

202 Microdevices 202 Die kleinen Wunderwaffen 204 WAP, das neue HTML? 204 Digitale Literatur, das Ende der Bücher? 205 Wearable Computers

194 Portals, das optimale Netzformat?

Strategien im WWW

.

135

Online-Werbung Der Kampf um die Klicks Die beste Site ist vergebens, wenn kein User weiß, dass es sie gibt. Doch die Möglichkeiten sind vielfältig, ob Banner, Web-Announcing oder ganz neue Werbeformen. Welche ist die richtige?

Der Begriff Bannerwerbung etabliert sich langsam im Sprachgebrauch der Werber und Marketingleiter. Doch was wirklich getan werden muss, um die User auf die mühsam erstellte Site zu bekommen, um Klickraten und UserFeedback zu generieren, das ist weitgehend unbekannt oder wird als Randthema abgetan.

Werbung in den neuen Medien Push und Pull Die große Besonderheit des World Wide Web ist, dass der Informationsaustausch vornehmlich auf Pull basiert, d.h. der Nutzer muss sich die gewünschten Informationen selbstständig suchen und beziehen. Das bedeutet, der User wird, im Gegensatz zum Fernsehen, bei dem schnelles Zappen genügt, aktiv und stellt sich ganz bewusst dem Medium und der Information. Klassische Werbung hingegen beruht hauptsächlich auf dem Push-Verfahren Push-Verfahren. Sie wird dem Konsumenten in allen Kanälen zugespielt, ohne dass er danach verlangt hat und meistens ohne dass er sich dagegen wehren kann. Die

136

Streuung der Werbung ist dementsprechend groß, man versucht, sehr grobe Zielgruppen zu differenzieren und diese mehr oder weniger genau zu erreichen. Da Websites auf Pull-Information beruhen und sie davon abhängig sind, dass der User aktiv auf sie zugreift, müssen einige Faktoren grundsätzlich gegeben sein: Die Site muss bekannt und auffindbar sein. Ist Ersteres nicht gegeben, wird die Zielgruppe mit Hilfe von Online-Werbung an den Stellen im Netz angesprochen, die von ihr am meisten frequentiert werden und von dort auf die Site gezogen. Das System ist dabei ganz einfach. Es gibt verschiedene Werbeträger wie Stern Online, CNN.com, mtv.com, aber auch Studentenseiten oder private Homepages, auf denen Werbemittel wie zum Beispiel Banner geschaltet werden. Diese verlinken dann direkt auf das Werbeobjekt, entweder auf eine ganze Website oder auch nur einen Teilbereich einer Site, zum Beispiel ein Sonderangebot, den Annual Report, ein Spiel oder ein Beitragsberechnungstool.

Strategien im WWW

. .

Das Gute an Online-Werbung Die Vorteile der Online-Werbung gegenüber TV-Spots, City-Lights oder anderen klassischen Werbeformen sind ganz klar festzumachen. Zunächst kann man ganz genau definieren, welche Zielgruppe man in welcher Situation erreichen will. Sind es Teenager auf der Suche nach Freunden, wähle ich als Werbeträger eine Teenie-Plattform mit erfolgreichem Chat-Bereich. Will ich finanzkräftige Mittdreißiger, bietet es sich an, auf Online-Brokerage- oder Börseninformationsseiten zu gehen. Und besteht meine Zielgruppe aus fünfzigjährigen dänischen Anglern mit einer Vorliebe für Fliegenfischen, findet sich auch hier eine Plattform, auf der ich sie mit meinen Werbemitteln erreichen kann. Es kann also sehr genau differenziert und spezifiziert werden, wen man in welcher Lage antreffen will; dies vermeidet zu große Streuung und negative Effekte der Werbung. Habe ich den User angesprochen und in einer Situation getroffen, in der er positiv auf meine Werbung reagiert, bietet das Internet den Vorteil, dass kein Medienbruch entsteht. Der User muss nicht zum Telefon greifen, er muss sich keine Adresse aufschreiben, und er muss keine Broschüre anfordern, um sich über das Produkt zu informieren. Er kommt mit einem Klick direkt vom Werbeträger auf das beworbene Objekt, nämlich die Site, und kann sofort die entsprechenden Services nutzen oder sich weitergehend informieren. Interaktive Banner, bei denen ich zum Beispiel direkt im Banner den Wetterbericht oder Börsenkurse abfragen, ein Spiel spielen oder E-Mails verschicken kann, ermöglichen, was im klassischen Bereich nur Promotions und Direct-Mailings bewirken: Der Konsument setzt sich schon im Rahmen der Werbung intensiv mit dem Produkt auseinander.

Merkt man, dass das Banner nicht so effektiv ist, wie man es gerne hätte, dass zu wenige Leute klicken oder die falschen User angesprochen werden, hat man die Möglichkeit, sehr schnell zu reagieren und entweder die Plattform zu wechseln oder das Banner zu verändern. Bei einem Kinospot oder selbst einer Anzeige wäre der Aufwand unvergleichlich höher und teurer. Besonders die Aktualität des Mediums ermöglicht es, sofort auf Ereignisse zu reagieren und so ganz nah an der Zielgruppe zu bleiben. Erfolgskontrollen und die eventuelle Optimierung sind also jederzeit möglich. Einige Werbeträger bieten sogar die Möglichkeit, verschiedene Kampagnenansätze auf der Plattform rotationsweise unter echten Bedingungen zu testen und danach den erfolgreichsten zu schalten. Wie beim Webtracking für Websites sind auch hier die Ergebnisse sehr präzise, fallen aber nicht immer so aus, wie man sich es selbst gerne gewünscht hätte. Das Schlechte an Online-Werbung Natürlich ist Online-Werbung kein Allheilmittel. Es gibt einige Nebenwirkungen, die ziemlich unangenehm und nicht immer kalkulierbar sind. Die erste Schwierigkeit ist der User selbst. Als erste Studien belegten, dass Banner mit einer konkreten Klickaufforderung wie zum Beispiel »Klick mich!« oder »Hier klicken!« deutlich bessere Raten erzielen als Banner ohne diesen Spruch, war die Verwunderung und die Verzweiflung bei einigen Entwicklern und Gestaltern von Bannern groß. Warum muss man

Werbeträger-Liste Unter www.ombd.de findet man eine Auflistung vieler deutscher Werbeträger.

Online-Werbung

. .

137

auf ein Banner, das aussagt, worum es geht, in einem Medium, in dem klar ist, dass man Links anklicken muss, mit einer Technologie, die nun langsam als etabliert gelten kann, schreiben, dass der User doch bitte klicken soll? Das käme einem Ansatz nahe, am Ende eines in Cannes prämierten Kinospots dazu aufzufordern, das Produkt doch jetzt bitte auch zu kaufen. Außerdem kommt es gerade bei Bannern auf jede Information an, welche die Datengröße noch zusätzlich erhöht. Für »Bitte klick mich!« musste so mancher gute Claim sterben. Es bleibt aber jedem selbst überlassen, wie viel Glaubwürdigkeit er solchen Studien beimisst und wie »klickfreudig« er seine Zielgruppe einschätzt. Das zweite Problem ist, dass User im Netz meistens ziemlich genau wissen, was sie wollen: die neuesten Sportergebnisse, einen Tarifvergleich bei Krankenkassen oder ein neues Game. Der Werber versucht zunächst aber diesen klaren Weg zu unterbrechen und auf sein Angebot aufmerksam zu machen, das dann noch dazu aktiv angeklickt werden muss. In einen gewünschten Handlungsablauf einzugreifen und ihn erfolgreich zu unterbrechen bedarf einer klaren Strategie und einer guten Idee. Die Konkurrenz ist groß, selten steht ein Banner ganz für sich allein, oft sogar in einer Dreierkombination. Wie erreicht man also die Aufmerksamkeit des Users und bewegt ihn dann noch dazu, auf genau dieses Banner zu klicken und nicht auf eines der beiden anderen? Denn wenn er weg ist, ist er weg, und die Chance, dass er alle drei Banner ausprobiert, ist eher gering. Man muss also differenzieren, gleichzeitig aber nicht nerven. Als wir vor ein paar Jahren für einen großen Technikkonzern eine Kampagne zum Thema Innovation entwarfen, zeigte eines der Motive einen roten

138

Blitz, den jeder kennt, der schon einmal zu schnell gefahren ist. Aufwändig gestaltet in Adobe After-Effects und mit einem knackigen Claim blitzte das Banner Aufmerksamkeit erheischend auf der Seite eines Werbeträgers, der eher wissenschaftlich interessierte, erfolgreiche Damen und Herren ab 35 ansprach. Auch das Banner sprach die Damen und Herren an, allerdings eher negativ, denn neben beachtlichen Klickraten bekam der Werbeträger ein paar bitterböse Mails, dass man sich bei diesem Blitzen ja wohl kaum auf den Inhalt konzentrieren könne. Natürlich reagierten wir sofort mit einem anderen Banner (und schrieben eine freundliche Mail zurück), gleichzeitig aber war es eine gute Erfahrung, wo bei gewissen Zielgruppen die Schmerzgrenze liegt. Oft wird bei der Konzeption und Gestaltung von Bannern recht wenig Wert auf Anspruch und Qualität gelegt. Die Budgets sind knapp, und ein Banner ist recht schnell gemacht. Das ist in der klassischen Werbung nicht immer anders, aber gerade bei den neuen Medien lässt sich alles so einfach umsetzen, dass im Internet vielleicht noch mehr Schlechtes zu finden ist als in Print und TV. Man sollte also unbedingt mit professionellen Partnern zusammenarbeiten, welche die Erfahrungen von beiden Bereichen, nämlich Werbung und Online, verbinden können. Schwierig ist es auch, wenn eine Seite lange lädt, die Banner aber schon von Anfang an zu sehen sind. Eigentlich gut, denn dann hat der User sie länger im Blickfeld, dann aber auch wieder schlecht, denn der Unmut über die langen Ladezeiten überträgt sich gerne auf die »überflüssigen« Banner. Wenn man allerdings davon ausgeht, dass sich viele kostenlose Sites zum Großteil über eben diese Banner finanzieren, sollte man erwarten, dass jeder halbwegs

Strategien im WWW

. .

Abbildung 1 E Die Konkurrenz ist riesig: Banner in allen Größen und Farben auf verschiedenen Werbeträgern.

intelligente User Verständnis für die Werbemittel aufbringt! Trotzdem gilt es natürlich, Banner so klein wie möglich zu halten. Siemens brachte vor einiger Zeit das Tool »Webwasher« auf den Markt, ein Programm, das Banner automatisch identifiziert anhand des Namens, der Größe, der Positionierung und der Einbindung in den HTML-Code. Eben diese Banner werden beim Aufbau der Seiten gar nicht erst geladen, und die Stellen bleiben frei. Anfangs wohl recht erfolgreich, zeigt sich jetzt, dass Banner nicht nur lästige Werbung sind, sondern auch gute Guides durchs Internet, Service-Center und Informationsträger zugleich. Blendet man alle Banner aus, ist es durchaus möglich, dass man mehr verpasst als gewinnt!

Ziele von Online-Kampagnen Bevor man mit der Konzeption einer Kampagne beginnt, gilt es auch im Netz, die Ziele ganz klar festzustecken, denn der bloße Klick des Users ist nur eine Möglichkeit von vielen. Erster Schritt ist immer Aufmerksamkeit und Bekanntmachung Bekanntmachung. Man will der Internetgemeinde zeigen, dass es eine neue Site gibt, auf die es sich lohnt zu klicken. Da man aber auch Zielgruppen ansprechen will, die sich vielleicht nicht so häufig im WWW bewegen, sollte man auch hier Maßnahmen außerhalb des Netzes planen, um einen möglichst hohen Bekanntheitsgrad zu erzielen. Aber auch nach dem Launch der Site darf man sich nicht auf Mundpropaganda verlassen. Der Erfolg einer Site oder von Teilbereichen

Online-Werbung

. .

139

lässt sich unter anderem ganz klar am Traffic messen, und entspricht dieser nicht den Erwartungen, muss man sich zum einen Gedanken über Inhalt und Aufbau, aber auch über die Bewerbung machen. Studien haben ergeben, dass Online-Werbung nicht nur die Klickrate nach oben treibt, sondern auch direkten Einfluss auf das Image des Unternehmens und der Marke habt. Innovative Ideen und gekonnte Umsetzung der Werbung bauen ein anspruchsvolles und modernes Image auf, das von der folgenden Webseite entsprechend fortgeführt werden muss. Änderungen auf der Site, die Eröffnung eines neuen Bereichs, der Launch eines Produktes oder Events wie Börsengang oder Promotion-Aktionen, die auf der Site begleitet werden, sind Anlässe für eine Kampagne, die zeigen, dass man aktuell ist und das Medium als Kommunikationskanal ernst nimmt. Ganz gleich wie die Zielsetzung aber ist, sie sollte sich in die Gesamtkommunikationsstrategie integrieren und medienadäquat das Bild der Marke ergänzen.

Der Klassiker: Banner im Netz Es gibt die Geschichte, dass im Sommer 1994 einer der Herausgeber des US-Online-Magazins Hotwired eines Abends dem Gestalter erklärte, dass man für einige Sponsoren des Magazins noch Platz auf der Site benötige, damit diese dort ihre Logos positionieren könnten. Der Designer teilte auf dem oberen Teil der Seite etwas Platz ab und meinte, in den drei entstandenen Flächen könnten die Firmen packen, was sie wollten. Und seitdem versteht sich Online-Werbung als rechteckige Banner mit einer genau festgelegten Größe und maxi-

140

maler Datengröße in der oberen Hälfte des Browserfensters, die – falls vorhanden – auf die Site des entsprechenden Unternehmens verlinkt. Eine kurze Historie der Bannerentwicklung In der Tat war Hotwired die erste Site, die 1994 mit 14 Sponsoren das Web als Werbemedium nutzte, im damals relativ kommerzfreien Internet ein gewagter Schritt. Ein Jahr später tauchten immer öfter so genannte Flat Banners auf, also einfache GIFs im Netz, oftmals nur eine Verlinkung mit Inhalten im eigenen Angebot. Preismodelle für Werbeträger waren kaum vorhanden, Konditionen wurden meistens einzeln verhandelt, dementsprechend war auch die Zuverlässigkeit, mit der Banner auf Seiten geschaltet wurden. Noch lange Zeit später war es sehr aufregend (im wahrsten Sinne des Wortes), auf allen Seiten zu surfen, die man gebucht hatte, um zu sehen, ob irgendeine Spur der eigenen Banner zu sehen war. Andererseits kam es auch häufiger vor, dass Banner mal ein paar Wochen länger geschaltet waren als abgesprochen, falls der Platz für die Zeit nach der Buchung nicht verkauft war. Schon damals versuchte man sich an Javabasierten Bannern, das Ping-Spiel von IBM war einer der Vorreiter der interaktiven Banner. Das hatte auch damit zu tun, dass man Java als die potenzielle Programmiersprache ansah, die HTML in naher Zukunft verdrängen würde, was sich allerdings nicht bewahrheitet hat. 1996 waren Sponsorships erster Websites bzw. von Teilrubriken zu beobachten, außerdem wurden Provisionsmodelle eingeführt, bei denen der Werbeträger am Umsatz des Kunden beteiligt wurde, der durch den Banner und seine Verlinkung mit der Site generiert wurde. 1998 wurden vermehrt neue Technologien wie

Strategien im WWW

. .

G

Abbildung 2 Diese nicht animierten Banner tauchen immer wieder auf den Ergebnisseiten von Suchmaschinen auf.

Streaming Video oder Flash eingesetzt, wobei die Werbeträger sehr verhalten reagierten, wollte man die Seiten doch zum einen nicht zusätzlich mit Plug-ins belasten. Zum anderen waren und sind die Bandbreiten für Banner mit größeren Datenmengen einfach noch nicht weit genug verbreitet. Bannerarten Seit den ersten Flat Bannern 1994 haben sich einige Arten von Bannern besonders etabliert, ihr Einsatz hängt immer vom Inhalt, vom Werbeträger und der Zielgruppe ab. Sie unterscheiden sich in Gestaltung, Animation und Interaktionstiefe und haben alle folgende Grundmerkmale. Sie sind immer integriert in eine Website, den Werbeträger, oder werden von diesem aus in einem gesonderten Browserfenster gelauncht. Ihr Format ist, wie das von Bildern im Netz generell, immer rechteckig, Sonderformen können sich aber auch aus mehreren Rechtecken zusammensetzen. Banner sind interaktiv, vom einfachen Klick bis hin zur komplexen Anwendung.

Grundsätzlich bringt die Integration eines Banners in eine Website die Aufgabe mit sich, die Aufmerksamkeit des Betrachters vom eigentlichen Inhalt weg auf das Banner zu lenken und den User zu einer Interaktion zu verleiten. Das führte zur Entwicklung immer neuer Bannerarten, die mit interaktiven Features ausgestattet den Betrachter involvieren sollen. 1. Flat Banners Auch wenn die Zeit der nicht animierten GIFs als Banner im Netz fast vorbei ist, gibt es doch noch Stellen, an denen sie Sinn haben und eingesetzt werden. Sucht man zum Beispiel bei www.hotbot.com nach dem Begriff »Cars«, tauchen auf den Ergebnisseiten immer wieder dieselben kleinen Flat Banners auf, die in diesem Fall auf Autohändlersites verlinken. Dabei ist nicht die Animation der entscheidende Punkt, der Aufmerksamkeit erzeugt, sondern die Häufigkeit des Banners. Wäre es animiert, würde es störend wirken und negativ auffallen. Außerdem gibt es Banner, die auf einen Blick alles aussagen und so gestaltet sind, dass sie auch ohne bewegte Bilder bemerkt

Online-Werbung

. .

141

F

Abbildung 3 Sex sells, vor allem im Internet. Beim Versuch, mehr von den Inhalten zu entdecken, wird man automatisch auf die Website verlinkt.

F

Abbildung 4 Ein animiertes Banner in sechs Phasen, bei dem Logo und Thema permanent eingeblendet sind und die Figur animiert wird. Das Ganze endet mit einer Aufforderung zum Klicken.

werden. Vorteil ist, dass sie deutlich schneller laden als ein Banner mit vielen Phasen. Nicht animiert sind außerdem oft so genannte Fake Banners. 2. Fake Banners Diese unerfreuliche Bannerart täuscht mit ihrer Gestaltung Scrollbalken oder andere bekannte interaktive Elemente vor. Will man sie anklicken, wird man sofort auf die entsprechende Seite verlinkt. Da das aber nicht der Intention des Nutzers entspricht, ist dieser eher verärgert und wird sich wohl kaum lange auf der Site aufhalten. 3. Animated Banners Die am meisten verbreitete Art ist eine GIFAnimation aus verschiedenen Phasen, in der Text, Bild, Form oder Farbe in einer Sequenz

142

Inhalte vermitteln. Sie sind so eingestellt, dass sie entweder »loopen« oder auch nur einmal ablaufen und dann mit einem Claim, Logo oder einer Klickaufforderung enden. 4. Smart Banners Hier geht es um die Art, wie Banner eingesetzt werden, nämlich entsprechend dem Surfverhalten des Users. Gibt er zum Beispiel in eine Suchmaschine einen bestimmten Begriff ein, so werden ihm auf den folgenden Seiten Banner gezeigt, die in irgendeiner Weise mit dem gesuchten Begriff zu tun haben. Diese Einsatzweise ist wohl die effektivste, da sie dem Vorhaben des Users am meisten entspricht und auch ohne allzu komplexe Datenbanken funktioniert. Da die Werbeträger ja vorher feststehen,

Strategien im WWW

. .

Abbildung 5 E Sucht man bei Hotbot nach Musik, wird der Ebay-Music-Banner eingeblendet.

Abbildung 6 E Jedes Mal, wenn man einen neuen Bereich der Website anklickt, öffnet sich entweder das kleine Browserfenster, oder das Banner wechselt sich darin aus.

kann man mit unterschiedlichen Bannern sehr gut Bezug nehmen auf Ausrichtung, Inhalt und Gestaltung der Site und so näher an das Interesse des Users kommen. 5. Interstitial Ads Eher das Gegenteil bewirken Interstitials. Diese blenden sich beim Seitenwechsel nach Klick auf einen beliebigen Link ein, meist ohne viel mit den Inhalten zu tun zu haben. Eine Seite mit der Werbeunterbrechung lädt sich und verschwindet von selbst wieder. Der User wird so in seinem Fluss unterbrochen und nimmt die Werbung eher als störend wahr. Eingesetzt wurde diese Methode vorwiegend bei Providern, die ihren Kunden kostenlosen Internetzugang anbieten, die dafür aber wiederum Werbeunterbrechungen in Kauf nehmen müssen. 6. Pop-up Ads Diese funktionieren im Ansatz wie Interstitials, tauchen aber in einem Extra-Browserfenster auf, das meist sehr viel kleiner ist als das Haupt-Browserfenster. Klickt der User wieder in das große Fenster, verlagert

sich das Werbefenster nach hinten und ist so, nach dem Schließen der anderen Fenster, das letzte, das stehen bleibt. 7. Interactive Banners Die zukunftsträchtigste Version des Banners ist eine Art winziger Site, da sie über alle möglichen Funktionen verfügen kann, ohne den User auf eine andere Seite zu schicken. Man spricht deswegen auch von Nanosites Nanosites. Der User kann also mit dem Banner arbeiten, ohne sein eigentliches Ziel zu verlassen. Manche interaktiven Banner sind in sich geschlossen, die meisten verlinken aber zusätzlich nach wie vor, zum Beispiel über das Logo, auf eine andere Seite, das aber optional. Sie können aus HTML, Java, JavaScript, Flash und anderen Techniken bestehen und ermöglichen eine Interaktion des Users über den einzelnen Klick hinaus.

Online-Werbung

. .

143

F

Abbildung 7 Ein interaktives Chat-Banner. Man gibt seinen Namen und eine Message ein, die dann auf dem Banner erscheint. Am Ende kann man den ganzen Chat ablaufen lassen.

F

Abbildung 8 Zwei Banner einer Kampagne; bewegt man die Maus über das Banner, hat man verschiedene Optionen, die einen auf unterschiedliche Sites oder Teilbereiche einer Site bringen.

Banner Basics Über Banner gibt es mittlerweile unzählige Studien und wissenschaftliche Erkenntnisse, die ihrerseits wieder ganze Bücher füllen. Einige dieser Erkenntnisse genügen aber, um die Besonderheiten bei der Konzeption und Gestaltung von Bannern zu verstehen. Es wurde errechnet, dass der durchschnittliche Blickkontakt mit einem Banner 1,2 Sekunden beträgt. Kurz, sehr kurz also, um die Aufmerksamkeit eines Menschen auf sich zu ziehen, der sowieso nach etwas ganz anderem sucht! Allerdings hat auch das beste Banner nur eine geringe Halbwertszeit. Spätestens nach zwei Wochen tritt ein Burn-out-Effekt ein, und die Klickrate für dieses Banner geht

Hot Wired Tipps: C – Call to action l – Logo included i – Interactive banners c – Cool colors k – Keep it animated O – Omit cryptics n – No burn-outs

144

gegen null. Dann heißt es pausieren oder das Banner gegen ein anderes austauschen. Animierte Banner sind Studien zufolge bis zu dreißig Prozent erfolgreicher als einfache GIFs, dabei ist eine reine Textanimation in einer Art »Abspannverfahren« nicht wirklich empfehlenswert. Das hat unter anderem damit zu tun, dass man bei den kurzen Blickkontakten kaum längere, zumal auf einzelne Phasen gesplittete Aussagen transportieren kann. Weitere Erfolgsfaktoren für Banner sind zum Beispiel auffällige Farben, eine direkte Ansprache des Users, das Versprechen von kostenlosen Leistungen oder Gewinnspielen sowie die Verbindung von Text mit Symbolen, Bildern und Illustrationen. Über die Platzierung von Bannern gibt es sehr widersprüchliche Aussagen. Manche Studien empfehlen eine Platzierung auf der linken Seite, weil der Lesefluss von links nach rechts verläuft und man die Banner eher wahrnimmt, andere wiederum sagen rechts, weil sich dort die Scrollbalken befinden und man eher zum Klicken geneigt ist, da die Maus sich auch an dieser Stelle befindet. Falls Bannerplätze in besonderen Frames angeboten werden, sollte man sicher diese wählen, weil sie

Strategien im WWW

. .

Abbildung 9 E Die häufigsten Bannergrößen im Netz

nicht weggescrollt werden können, bei NoFrame-Varianten bietet es sich an, Banner ganz oben zu positionieren, da sie dort als Erstes geladen werden und zu sehen sind. Wichtig ist es auf alle Fälle, vor der Gestaltung die Seiten, auf denen später geschaltet wird, als Bildschirmmuster zu nehmen und die Entwürfe darauf zu positionieren. Ist der Hintergrund dunkel, sollte das Banner eventuell anders gestaltet sein als bei einem hellen Hintergrund. Das Standardformat von Bannern kann mit 234 x 60 Pixel festgelegt werden. Wie man aber gleich sieht, kann sich die Größe selbst auf einem Werbeträger deutlich unterscheiden. Die Größenangaben werden bereits bei der Erstellung des Mediaplans recherchiert und festgehalten. Anders ist es bei der Datengröße Datengröße. Man geht von einer durchschnittlichen Größe von ca. 8–12 Kilobyte pro Banner aus. Sind sie größer, weigern sich viele Werbeträger, diese anzunehmen. Generell gilt es, Banner so klein

wie möglich zu halten, um nicht durch extreme Ladezeiten aufzufallen! Corporate Design-Richtlinien sind bei Bannern oft nicht sehr einfach zu berücksichtigen. Zum einen sollte man sich bei der Farbauswahl möglichst an die WWW-Palette halten, da man bei Werbeträgern selten sagen kann, mit welchen Einstellungen die User auf die Site kommen. Das heißt, »Corporate« Farben können oft nicht so einfach übernommen werden. Eine weitere Schwierigkeit ist, dass das Logo auf Bannergröße reduziert oft kaum mehr erkennbar ist. Auch Claims lassen sich in ihrer ganzen Länge und Schriftart nicht immer umsetzen. Es lohnt sich, bei häufigerer Schaltung und bei größeren, internationalen Unternehmen, einen Styleguide anzulegen, der alle Designvorgaben auch auf Banner ausweitet. Falls das Werbemittel in erster Linie dazu da ist, auf die folgende Seite zu verlinken, sollte man bei der Gestaltung von Banner und Site konsistent bleiben, damit der User nicht denkt, er hätte falsch geklickt.

Online-Werbung

. .

145

G

Abbildung 10 Sonderformate von Bannern für eine Bank

146

Der Ablauf einer Bannerentwicklung Will man eine Online-Kampagne erfolgreich planen, gestalten und schalten, muss man sich an einen bestimmten Workflow halten, der es ermöglicht, immer wieder zu korrigieren und fein zu justieren. Am Anfang stehen Strategie und Konzept. Das Kampagnenziel muss klar festgelegt werden, und die Zielgruppen müssen definiert und analysiert werden. Daraus entwickelt sich das Kommunikationskonzept Kommunikationskonzept. Nächster Schritt ist der Mediaplan Mediaplan. Hier wird die Bannerschaltung bezüglich der Werbeträger inhaltlich und finanziell festgelegt. Es werden entsprechende Sites ausgewählt, Werbeplätze verhandelt und gebucht. Bevor mit dem Texten und der Gestaltung begonnen wird, muss genau feststehen, wo geschaltet wird, da Sonderformate, also vom Standard abweichende Größen, sonst kaum kalkulierbar sind. Nachdem eine Strategie und ein Konzept für die Kampagne entwickelt wurde, beginnen Texter mit der Ausformulierung. Claims werden entwickelt und mit den Gestaltern bezüglich Länge und Größe abgestimmt. Auf Basis eines visuellen Konzeptes werden die Banner zunächst auszugsweise in Form von zwei bis drei Phasen gescribbelt und nach Abnahme des Kunden in einer Größe animiert. Nach der Optimierung der Datenmenge werden die Sonderformate für weitere Werbeträger erstellt. Die Mediaplaner übernehmen die Aussendung der Werbemittel per E-Mail ebenso wie die permanente Kontrolle und eventuelle Optimierung der Banner als auch deren Platzierung.

Strategien im WWW

. .

G

Abbildung 12 Der TT taucht bei Audi im Netz zweimal auf. Einmal eher sachlich und nüchtern auf der Audi-Site, einmal sehr emotional und innovativ auf der Microsite.

G

Abbildung 11 Miss Barmer aus der klassischen Kampagne gibt auch im Internet gute Ratschläge. Da sie nur einen Teil der Zielgruppe anspricht und sich in Gestaltung und Tonalität vom Rest der Site unterscheidet, taucht sie als Microsite im neuen Browserfenster auf.

Klein, aber fein: Microsites Eine Zwischenstufe zwischen interaktiven Bannern, also Nanosites, und großen Websites sind so genannte Microsites. Es handelt sich hierbei um in sich geschlossene Sites, oft in einem kleineren Extra-Browserfenster mit fester Größe, die unter Umständen gar nicht über ei-

nen eigenen URL verfügen, sondern von einer Website aus gelauncht werden. Sie ist also eine Satellitensite Satellitensite, die außerhalb des Unternehmensauftritts für begrenzte Zeit und in modifiziertem Design ein bestimmtes Produkt oder einen bestimmten Service besonders hervor-

Online-Werbung

. .

147

hebt. Die Site ist in ihrem Umfang begrenzt und kann auch in Benutzerführung und Aufbau deutlich von der Hauptsite differieren. Der Vorteil einer solchen Site ist, dass man unter Umständen sehr experimentell damit arbeiten, neue Techniken verwenden, emotionale Herangehensweisen testen kann, die mit der Ausrichtung der Muttersite nicht vereinbar wären. Besonders Produkteinführungen wie der Audi TT oder saisonale Themen wie Weihnachtsspecials oder Sommeraktionen können so innovativ und als besonderes Highlight gestaltet werden (Abb. 12). Häufig ist die Zielgruppe der Microsite eine Untermenge der Zielgruppe der Hauptsite, auf die Inhalte, Text und Gestaltung abgestimmt sind. Microsites eignen sich hervorragend zur Erschließung neuer Zielgruppen, da man den Kernauftritt nicht modifiziert und schnell auf die Reaktionen der User reagieren kann. Wichtig ist dabei aber trotzdem, dass der Absender klar erkennbar ist und bestimmte Verbindungen inhaltlicher oder gestalterischer Art zur Hauptsite erkennbar sind. Es ist von Vorteil, wenn beide Seiten miteinander verlinkt sind und man es nicht dem User überlässt, sich zusätzliche Informationen über Suchmaschinen zu suchen.

Die Zukunft: Sonderformen der Online-Werbung Es ist erstaunlich, wie in einem Medium, das sich so schnell entwickelt wie das WWW, der Ansatz der Werbung doch sehr stark in seinen Anfängen, der Bannerwerbung, stecken bleibt. Natürlich sind interaktive Banner spannend, es gibt raffinierte Sponsoring-Ideen und Partnermodelle. Doch wirklich innovative Ideen und

148

Entwicklungen gibt es immer noch sehr wenige. Das mag zum einen daran liegen, dass man doch noch sehr damit beschäftigt ist, die Hauptaufgabe, nämlich die Gestaltung funktionaler und vor allem sinnvoller, benutzerfreundlicher Websites zu lösen. Zum anderen ist Online-Werbung immer noch ein Randthema, man hat zwar entdeckt, dass man mit Bannergestaltung und -schaltung viel Geld verdienen kann, dabei belässt man es dann aber auch. Die spannendsten und aufregendsten Werbeformen, die ich in letzter Zeit gesehen habe, kommen zum Großteil, wie könnte es anders sein, aus Großbritannien. Zur Einführung des neuen Duftes »Voodoo« von Lynx wurde die komplette Homepage des englischen Online-Magazins »FHM« gebucht, ein sogenanntes »Hijacking«. Die erste Seite des Magazins wurde bis auf die Navigationsleiste schwarz eingefärbt. Bei Rollover konnte man mittels einer virtuellen Kerze Teile der echten Homepage erhellen und die Inhalte erkennen. Bei Klick oder automatisch nach zehn Sekunden lud sich die Seite neu, und man sprang auf die aktuelle Homepage. Ein Banner auf der Seite verlinkte dann zur Voodoo-Site, ebenso wie flackernde Kerzen, die auf der ganzen FHM-Site verteilt waren. Es bedurfte einigen Mutes, eine so stark frequentierte Site wie FHM komplett zu schwärzen und die gesamten Inhalte mit einer Werbefläche zu überziehen. Doch der Erfolg gab Agentur und Werbeträger recht. In Windeseile hatte sich die Aktion herumgesprochen, und die Site verzeichnete ungeahnte Klickraten. Der Effekt war für beide Parteien hervorragend. Im Rahmen der Einführung des Ford Focus in Großbritannien wurde auf der Homepage des Autosport-Magazins ein HTML-Banner mit Pop-up-Menü geschaltet. Dieses Pop-up bietet

Strategien im WWW

. .

G

Abbildung 13 Die FHM-Site während der Voodoo-Kampagne vor und nach dem Klick

die Auswahl zwischen verschiedenen Ländern, in denen man an einer Ford-Ralley teilnehmen kann, zum Beispiel Großbritannien oder Kenia. Wählt man eines der Länder aus, so lädt sich die komplette Site neu, und der Hintergrund und die Schaltflächen tauschen sich aus. Je nachdem, welches Land man gewählt hat, stehen die Inhalte nun auf englischem Rasen oder kenianischem Wüstenboden. Die Farben auf der Site ändern sich entsprechend. An der Stelle des Banners hat man nun die Möglichkeit, sich über die Ralley und den Ford Focus zu informieren. Wohlgemerkt auf einer Site, die mit Ford an sich nichts zu tun hat! IBM gewann mit seiner Bannerkampagne im Jahr 1999 den Grand Prix des CyberlionsAward in Cannes. Eine Geschichte, die sich immer mehr verdichtet, wird hier über verschiedene interaktive Medien abgespielt und der User immer tiefer involviert. Auf einem inter-

aktiven Banner muss er zunächst eine Vespa durch ein italienisches Dörfchen navigieren, um zu seiner Geliebten zu gelangen. Hat er das erreicht, kommt ein neues kleines Browserfenster, in dem die Liebesgeschichte von Alfredo sowie die der Vespa-Website erzählt wird, die von IBM entwickelt wurde. Am Schluss des Flash-Films hat man die Möglichkeit, sich näher über die Site zu informieren oder auf die IBM- oder die Vespa-Site zu gelangen. Eine inhaltliche und visuelle Verbindung zur Print- und TV-Kampagne rundete den Auftritt ab. Das sind nur einige von vielen Beispielen innovativer Werbeformen im Internet. Allen gemein ist eine gute Idee, Mut und die intensive Beschäftigung mit dem Medium und dessen Besonderheiten.

Online-Werbung

. .

149

G

Abbildung 14 Die Autosport-Site ändert ihr Aussehen, je nachdem, welches Land man in dem Banner ausgewählt hat.

Abbildung 15 E Ein Spiel, das die Größenbeschränkungen des Banners vergessen lässt.

150

Strategien im WWW

. .

G

Abbildung 16 Ein Film, der ebenso im Kino laufen könnte: eine von verschiedenen Flash-Microsites von IBM

Online-Werbung

. .

151

Web-Announcing Sites bekannt machen Viel Geld wird von Unternehmen ausgegeben, um Banner zu schalten und ihre Website bekannt zu machen. Sucht man sie jedoch anhand von wichtigen Schlüsselbegriffen in den Suchmaschinen, so tauchen sie oft nicht auf.

Suchmaschinen scheinen immer noch ein Buch mit sieben Siegeln zu sein und werden dementsprechend häufig vernachlässigt. Wenn man jedoch einige Regeln beachtet, ist es ein Kinderspiel, eine Site den Suchmaschinen bekannt zu machen. Die notwendigen Schritte dazu sind: 1. Präparierung des Angebotes 2. Selektion der Schlüsselwörter 3. Selektion der Suchmaschinen und Verzeichnisse 4. Anmelden des Online-Auftritts 5. Kontrolle, Dokumentation 6. Re-Announcing Bevor eine Site bei Suchmaschinen angemeldet wird, sollten unbedingt einige Änderungen innerhalb der gesamten Struktur vorgenommen werden. Dazu muss man die Funktionsweise der meisten Suchmaschinen kennen. Im Unterschied zu reinen Katalogen verlassen sich Suchmaschinen nicht auf die Eingaben durch den Anmelder, sondern durchsuchen aktiv eine Site, um sie dann beurteilen zu können. In die Beurteilung (und damit oft auch in das Ranking, also die Reihenfolge der Sucher-

152

gebnisse) werden folgende Kriterien einbezogen: E An welcher Stelle steht ein Suchbegriff im Titel der Seite? E Wie oft taucht ein Suchbegriff auch in den Inhalten auf? E Ist ein Suchbegriff auch in den Metatags vorhanden? E Wann wurde die Seite das letzte Mal geändert? E Ist ein Suchbegriff Teil des Domainnamens? E Wie viele Links von anderen Sites gibt es auf der eingetragenen Site? E Wie oft werden diese Links angeklickt?

Vorbereitung der Website Titel Der Titel der Startseite sollte bereits deutlich machen, worum es sich handelt. Wenn Sie also eine Website zum Thema »Japanische Küche« eintragen wollen, ist es durchaus sinnvoll, diese Begriffe auch im Titel vorkommen zu lassen: Er könnte also beispielsweise lauten »Küchenstudio Behrens: Rezepte für die Japanische Kü-

Strategien im WWW

. .

G

Abbildung 1 Der Eintrag von Schlüsselwörtern in Dreamweaver G

Abbildung 2 Der Eintrag von Schlüsselwörtern mit GoLive

che« oder nur »Japanische Küche«. Welche von beiden Versionen wird wohl höher im Ranking der Suchmaschinen stehen? In der Regel wird dies die zweite Variante sein, wenn jemand den Suchbegriff »Japanische Küche« eingibt. Weniger ist in diesem Fall also mehr. Metatags Mit den meisten WYSIWYG-Editoren ist es mittlerweile sehr einfach, Metatags einzutragen. Metatags haben verschiedene Funktionen und Bestandteile, sie sind alle im Head-Bereich einer Seite angesiedelt.

E

Schlüsselwörter werden von allen Suchmaschinen abgefragt. Sinnvolle Keywords beinhalten alle Wörter, nach denen eine potenzielle Suchabfrage erfolgen kann. Die meisten Suchabfragen generieren Tausende von Links, weshalb auch unbedingt Eingrenzungen und Spezialthemen berücksichtigt werden müssen. Wichtig ist es hierbei, alle möglichen Varianten inklusive verbreiteten Schreibfehlern zu berücksichtigen, wie z.B. »Raum, Räume, hobeln, gehobelt, gehoblt«. Bei einer Wiederholung der Keywords im Text steigt die Wahrscheinlichkeit einer Berücksichtigung in den Suchmaschinen. <meta name="keywords" content="Kochen, Japan, Rezepte, Sushi, Kapa, Maki">

Web-Announcing

. .

153

E

Beschreibung Eine kurze Beschreibung der Inhalte der Site wird von vielen Suchmaschinen zusammen mit dem Link ausgegeben. Je besser diese die genauen Inhalte der Site beschreibt, umso wahrscheinlicher ist es, dass Sucher auch zu Besuchern werden.

Rahmen dieses Buches sprengen, sie lassen sich jedoch beim W3C unter www.w3c.org nachlesen.

Selektion der Suchmaschinen und Verzeichnisse

<meta name="description" content="Rezepte und Einkaufslisten für die japanische Küche finden Sie bei uns ebenso wie ein Lexikon aller Zutaten und einfache Schrittfür-Schritt-Anleitungen zum Nachkochen.">

robots.txt Die meisten Suchmaschinen schicken so genannte »Spider« los, um den Inhalt einer Site zu indizieren. Wenn dieser Spider auf eine Datei robots.txt trifft, die im Stammverzeichnis der Site liegt, so liest er zuerst deren Informationen aus. Mit dieser Datei kann unter anderem verhindert werden, dass Demoseiten oder Unterseiten einer linearen Struktur von den Suchmaschinen gefunden werden. Je Site darf es nur eine Datei robots.txt geben. Die genauen Spezifikationen dieser Datei würden den

Zu den häufig verwendeten Suchmaschinen und Katalogen in Deutschland zählen: E Yahoo E Altavista E Hotbot E Lycos E Metacrawler E Metager E Excite E Dino E Google E Fireball

154

Suchmaschinen, Verzeichnisse und Meta-Suchmaschinen gibt es mittlerweile wie Sand am Meer. Die Großen haben sich zu wichtigen Portalen entwickelt und können bei professionellen Sites darüber entscheiden, ob eine solche erfolgreich besucht sein wird oder nicht. Durch sinnvolle – in der Regel kostenlose – Einträge kommen bei vielen Websites bis zu 80 % der Besucher auf Grund von Suchanfragen. Suchmaschinen wie hotbot.com suchen selbstständig nach Websites und indizieren diese automatisch auf Grund von Metatags und Informationen auf der Site selbst. Verzeichnisse werden redaktionell betreut und sind unter anderem auf die Informationen von Betreibern einer Site angewiesen. Vergleichbar sind Verzeichnisse wie yahoo.de am ehesten mit Branchenbüchern. So genannte Meta-Suchmaschinen, wie beispielsweise metacrawler.de, verknüpfen Abfragen auf unterschiedlichen anderen Engines und geben dem Sucher somit eine Übersicht über mehrere Datenbanken. Dabei bieten sie außer der Zeitersparnis für den Suchenden auch Rankings anhand der gefundenen Treffer. Die Unübersichtlichkeit des Internet hat sich mittlerweile zu einem einträglichen Geschäft gemausert. Auch wenn dies nicht öffentlich kommuniziert wird, kann man sich bei den meisten großen Suchmaschinen einen der ersten Plätze erkaufen, ein teurer und meist

Strategien im WWW

. .

auch fragwürdiger Spaß. Aber auch mit dem (mehr oder weniger) professionellen Eintrag in Suchmaschinen lässt sich Geld verdienen: In den letzten Jahren schossen Dienstleister aus dem Boden, die entweder eine Software zum Suchmaschineneintrag anbieten oder aber dies als Service selbst übernehmen. Fast alle diese Angebote sollten jedoch vorsichtig geprüft werden, da durch den automatisierten Eintrag die Eigenheiten mancher Suchmaschinen schnell übergangen werden. Außerdem ist es nicht unbedingt nötig, bei 200 Engines gelistet zu sein, da die meisten Menschen sowieso nur wenige Suchmaschinen verwenden. Vor dem Eintrag sollten Sie (außer den abgeschlossenen Vorbereitungen der Site) auch

eine Kurzbeschreibung des Angebotes, eine ausführliche Beschreibung, eine Liste der Suchwörter und möglichen Kategorien vorbereitet haben. Versetzen Sie sich dabei grundsätzlich an die Stelle des Suchenden. Kaum jemand wird Ihr Angebot über den irmennamen suchen. Überlegen Sie sich, welche Gründe jemand haben kann, Ihre Site finden zu wollen. Die meisten Angebote benötigen einige Tage, um ein angemeldetes Angebot auch auffinden zu können. Ist dies nach 14 Tagen noch nicht geschehen, sollten Sie die Anmeldung wiederholen. Auch wenn sich an der Ausrichtung der Site oder an den angebotenen Inhalten etwas geändert hat, empfiehlt es sich, die Anmeldung zu erneuern.

Web-Announcing

. .

155

Intranet und Extranet Das Internet wird zum Arbeitstool Ein Medium, das so viele Prozesse erleichtert und ganz neue Möglichkeiten der Kommunikation und Interaktion eröffnet, ist eigentlich wie dafür geschaffen, auch firmeninterne Abläufe zu verbessern. Warum ist das so schwierig?

Nachdem mittlerweile auch sehr viele kleine Unternehmen an das WWW angeschlossen sind und meistens auch über eine eigene Website verfügen, sind die technischen Gegebenheiten für ein Intranet oft schon vorhanden. Doch selbst Firmen, die sich intensiv mit den neuen Medien beschäftigen, haben große Probleme, eine solche Applikation zu implementieren und damit die Mitarbeiter ordentlich zu vernetzen.

E E E E E E E

E

E

Das Intranet Das Intranet ist ein firmeninternes Netz, sozusagen ein Internet im Kleinen. Dieses geschlossene Firmennetzwerk basiert auf dem Internet Protocol und ist deswegen hundert Prozent mit dem WWW kompatibel. Aufgaben eines Intranet Aufgaben des Intranet sind unter anderem: E Schnellere firmeninterne Information und Abwicklungen E Kommunikation innerhalb des Unternehmens

156

Reduktion von Arbeitsprozessen Erleichterung des Workflows Projektkoordination Planung und Koordination von Terminen Ablage und Organisation von Dokumenten Vereinheitlichung von Dokumenten Abgleich von Strategien und Kommunikation Reduktion des Materialverbrauchs durch digitale Daten Verwaltungstechnische Aufgaben

Grundidee ist dabei immer, Prozesse zu vereinfachen, Kosten zu senken und das Unternehmen transparenter zu machen. Da ein Intranet ein Pull-Medium ist, interne Firmenkommunikation klassischerweise aber auf Push basiert, wie zum Beispiel bei Hauspost, Mails und Verteilern, ändert sich ein grundlegendes Element im gewohnten Arbeitsablauf. Die Mitarbeiter zu motivieren und davon zu überzeugen, sich aktiv bei diesem Wechsel zu beteiligen, ist der wichtigste Schritt im Rahmen der Einführung eines Intranet. Die User, also alle Mitarbeiter, müssen sich täglich einloggen und aktiv die Services

Strategien im WWW

..

nutzen, ansonsten ist das Netz eine Fehlinvestition. Es gibt einige grundlegende Regeln, die helfen, aus dem Intranet ein funktionierendes Netzwerk zu machen. Das Intranet E muss für jeden ganz einfach und selbstverständlich erreichbar sein. Mehr als eine allmorgendliche Passwortabfrage sollte nicht zwischen dem Mitarbeiter, dem Browser und dem Intranet stehen. E sollte ein einfaches und intuitives Interface besitzen. Klar und übersichtlich hat es einen deutlich stärkeren Toolcharakter als zum Beispiel eine Marketing-Website. Obwohl die Seiten meist direkt vom Server im Haus geladen werden, basieren manche Intranets auf so langsamen Datenbanken, dass die Ladezeiten enorm in die Höhe getrieben werden. E hat trotzdem die Aufgabe, zu motivieren und eine Identifikation mit dem Unternehmen zu schaffen. Ein Intranet ist eine Erweiterung der Firmenkultur Firmenkultur. Es sollte eine positive sein! E muss in den Workflow integriert werden. Es sollte ganz selbstverständlich sein, dass Inhalte auf diesem Server abgelegt werden, Duty-Listen übers Netz abgefragt und Projekte komplett im Intranet dokumentiert werden. Passwörter verhindern dabei den Missbrauch der Daten. E wird gepflegt und ist immer aktuell aktuell. Wenn das nicht der Fall ist, das Unternehmen selbst also kein großes Interesse daran zeigt, warum sollte man selbst dann damit arbeiten? E bietet jedem Mitarbeiter die Möglichkeit, sich aktiv an der Site zu beteiligen. Schwarze Bretter zum Posten von Wohnungsge-

suchen, Know-how-Bereiche, in denen jeder sein Wissen dokumentieren kann, oder Gossip-Seiten, auf denen der neueste Tratsch verbreitet wird, helfen bei der Aktzeptanz des Mediums. E bedarf Informationen, die nur dort zu finden sind. Die Telefonliste oder das Firmenorganigramm gibt es nicht mehr auf Papier, sondern nur noch digital im Netz, so sind die Daten aktuell, und alle haben den gleichen Stand. E kann auch Bereiche enthalten, die zwangsweise täglich genutzt werden müssen und so die Nutzungszahlen nach oben treiben. Die Zeiterfassung oder wichtige Interna sind Themen, die zwangsläufig jeden Morgen oder Abend abgefragt werden. Es reicht also nicht, einfach nur eine Datenbank aufzustellen und den Mitarbeitern die Möglichkeit zu geben, nach Lust und Laune ihre PowerPoint-Präsentationen darauf zu laden. Die Firmenkultur ändert sich durch solche Tools, Prozesse werden transparenter und Hierarchien flacher. Auf einmal hat jeder die Möglichkeit, sich Gehör zu verschaffen und mit allen zu kommunizieren. Man muss sich dessen bewusst sein und diese Entwicklung leiten und begleiten, sonst entsteht mehr Unmut als wirklicher Nutzen.

Intranet und Design Für das Intranet gelten die gleichen Designregeln wie für das Internet. Auch hier stehen Lesbarkeit, Orientierung, Schnelligkeit und Branding an oberster Stelle.

Intranet und Extranet

..

157

F H Abbildung 1 Zwei Beispiele amerikanischer Intranet-Seiten; die einfachsten Interface-Design-Regeln hätten auch diesen Sites gut getan.

Es kann durchaus auch Sinn haben, Intranets einzugrenzen und nur für bestimmte Berufsgruppen oder zum Beispiel die Führungsebene anzulegen (Abb. 2). Die Anforderungen können dementsprechend zugespitzt und im kleineren Kreis kann die Durchführbarkeit eines solchen Projekts im Unternehmen erprobt werden. Extranet Eine erweiterte Form des Intranet ist das Extranet. Es verbindet Unternehmen mit ihren Kunden, Zulieferern und Partnern und ist entweder ein Teilbereich des Intranet oder aus Sicherheitsgründen vollkommen davon getrennt. Auch dieses Netz ist passwortgeschützt

158

und kann mit verschiedenen Zugriffsrechten ausgestattet werden. Über das Extranet werden zum Beispiel Abnahmen vorgenommen, Dokumente ausgetauscht, Statusberichte vorgelegt oder einfach nur kommuniziert. Die Gestaltung kann auch hier sehr reduziert sein, handelt es sich doch mehr um ein Tool als um eine klassische Site. Man darf aber nicht vergessen, dass man dem Kunden Qualität präsentiert in der Art und Weise, wie das Extranet aufgebaut ist und wie es funktioniert. Die Grundsätze des InterfaceDesigns wie Lesbarkeit, Orientierung, Navigation und Modularität treffen hier genauso zu wie in Internet und Intranet. Nur weil es sich um ein Tool handelt, heißt das nicht, dass Designer aus dem Produktionsteam automatisch ausgeschlossen sind, im Gegenteil.

Strategien im WWW

..

F

Abbildung 2 Das Bertelsmann-ExecutiveNetwork ist eine Arbeitsplattform für führende Mitarbeiter.

Außerdem muss man sich bewusst sein, dass man hier jenseits der Firewalls agiert. Kunden können jederzeit darauf zugreifen und auch anderen die Möglichkeit dazu geben. Also Vorsicht bei Firmeninterna, voreilig publizierten Dokumenten oder kleinen Wortspielen mit Kundennamen, wie sie im Intranet durchaus vorkommen können.

Intranet und Extranet

..

159

E-Branding Online-Brands und Brands Online Die großen Marken gehen ins Netz, neue Marken werden im Internet aufgebaut. Gibt es dabei Unterschiede?

E-Branding ist gar nicht schwer. Man definiert den Markenkern, transferiert ihn einfach auf die neuen Medien und nutzt alle deren Vorteile wie Interaktivität, direkter User-Response, Aktualität und alles, was das Netz so zu bieten hat. Das meiste ist doch durch die klassischen Markenbildungsmaßnahmen sowieso schon vorgegeben, da stimmen wir die Farben auf die WWW-Palette ab und machen ein kleines Spielchen, mit dem wir ganz viele Userdaten generieren, und fertig ist die Laube.

Klassische Marken Ist sie natürlich nicht. Es ist ein großer Fehler, das WWW einfach als weiteren Kommunikationskanal zu sehen, der mittlerweile unbedingt belegt sein muss. Kaum eine Anzeige, in der nicht auf einen URL hingewiesen wird, unter dem es mehr zum Thema gibt. Die Zielgruppe ist dort etwas jünger angesetzt, die Texte etwas kürzer gehalten, und die Inhalte sind interaktiv aufgepeppt. Was aber, wenn es gar keine Inhalte gibt? Wenn ein Softdrink, der sich weltweit über 99 % Markenbekanntheitsgrad er-

160

freut, einfach keine Inhalte hat? Wenn ein amerikanischer Sportartikelhersteller zwar für seine Kinospots prämiert wird, deren Weiterführung aber im Netz einfach nicht klappen will? Solange die zu gestaltende Site über generische Eigenschaften verfügt, die nur dem Netz zu Eigen sind, wie zum Beispiel E-Commerce oder E-Finance, dann kann man sich ganz gut an diesen Funktionalitäten entlang hangeln und die Markenfeatures damit verbinden. Den schnellsten Shop, die komfortabelste BankingLösung, die personalisierte Nachrichtensite. Ist dieser eine, ganz bestimmte Nutzen für den User nicht von Anfang an in Form einer Strategie gegeben, dann muss man ihn aus dem Markenkern heraus schaffen, wie es zum Beispiel UPS mit seinem Trackingsystem als eines der ersten Unternehmen im Internet geschafft hat und konsequent weiter ausbaut. Hat man diese Möglichkeit nicht, wird es richtig schwer, und man muss sich etwas einfallen lassen.

Strategien im WWW

..

Die neuen E-Brands Bei den Cyberbrands, den Dot-coms, den Internet-Startups ist meist das Gegenteil der Fall. Hier wurde ein Service, ein Nutzen entwickelt, der ohne das WWW so nie denkbar gewesen wäre und direkt aus ihm heraus geboren wurde. Nun muss man dem Kind zunächst im Netz, dann aber schnell auch im klassischen Marketing einen Namen und ein Gesicht geben, um bei Nutzern und Investoren bekannt zu werden. Den Markenkern und den damit verbundenen Nutzen zu kommunizieren, stellt hierbei oft das größere Problem dar. Vorbehalte gegen das Internet (»Wie soll ich denn im Netz Schuhe bestellen?!«) müssen ebenso ausgeräumt wie technisch oder inhaltlich komplexere Vorgänge (»Warum wird etwas billiger, wenn ich es zusammen mit zehn anderen Leuten kaufe?«) erklärt werden. Der Hype ermöglicht es zwar, innerhalb kurzer Zeit Brands aus diesem speziellen Sektor zu einer gewissen Bekanntheit zu verhelfen, wie lange diese anhält und ob sie wirklich schon mit jahrzehntelang aufgebauten Marken verglichen werden können, ist fraglich. Das Wichtigste ist der Kern der Marke. Ohne den geht gar nichts!

Gutes und Schlechtes im Netz Schlechte Beispiele gibt es viele: Zehn Minuten surfen und ein Fernsehwerbeblock genügen, um einen kleinen Einblick zu erhalten. Gute Beispiele sind selten, und wie im klassischen Branding spielt das Design auch online eine Schlüsselrolle. Gestaltung muss von Anfang an in die Strategie mit eingebunden sein, im Netz wird jedes Element einer Website zum brand-

G

Abbildung 1 Who is who? Die Ähnlichkeit der drei E-Commerce-Seiten ist verblüffend, selbst bei kleinen Details wie dem Einkaufswagen oben rechts. Wird so eine Marke etabliert?

E-Branding

..

161

Abbildung 2 E Ganz reduziert mit klassischem Aufbau: Trotzdem erkennt man sofort die Financial Times. Die Funktionalitäten ergänzen das Markenbild.

spezifischen Charakteristikum. Schwierig ist es zum Beispiel, wenn sich viele Online-Shops einer Designrichtung unterwerfen, die sich eventuell als recht funktional erwiesen hat, wodurch es aber kaum mehr möglich ist, den Absender zu erkennen. Das trifft besonders zu, wenn es sich um gleiche Warensegmente handelt. Man legt den Daumen über das Logo und kann kaum mehr sagen, welcher der großen Buchhändler sich dahinter verbirgt. Das be-

Wegweiser Der User sollte immer wissen, auf wessen Site er sich befindet. Was kann man bieten? Hat man keinen Service, will der User wenigstens etwas erleben.

162

deutet nicht per se, dass die Site schlecht ist. Man sollte nur versuchen, sich etwas mehr von den direkten Mitbewerbern positiv abzuheben, denn das Netz ist noch zu jung für festgefahrene Designstandards, die sich in erster Linie aus technischen Anforderungen ergeben. Es steht doch außer Frage, dass sich Inhalte, Design und Technik ergänzen und unterstützen müssen und sich nicht, wie im Moment, permanent einschränken. Dass man trotz eines sehr klassischen und im News-Bereich keineswegs ungewöhnlichen Seitenaufbaus die Brand stärken kann, zeigt www.ftd.de. Mit ihrer reduzierten Gestaltung, die fast komplett auf GIFs verzichtet, mit der absoluten Serviceorientierung auf allen Plattformen und der simplen, aber anscheinend nicht selbstverständlichen Idee, die Site lachsrosa einzufärben, wird eine klassische Marke im Netz weiterentwickelt und gestärkt.

Strategien im WWW

..

F

Abbildung 3 Die aktuelle Levis-Site: Mit jeder Kollektion definiert sich das Label neu und bleibt der Brand dadurch treu. Auch im Netz.

Das gleiche Ziel verfolgt die europäische www.eu.levi.com, die im Netz konsequent die Kampagne zur Engineered Jeans mit entwickelt. Man bedient sich aktuellster technischer Möglichkeiten bezüglich Screen-Aufbau und Benutzerführung und wertet so reine Marketinginhalte wie Produktbeschreibung und TVSpots auf zu einem netzspezifischen Erlebnis Erlebnis. Das stärkt nicht nur die Engineered-Linie, sondern auch die Marke Levis an sich. Dass dies auf internationalem Level eher schwierig ist, kann man gut auf der www.levi.com erkennen, die es nicht schafft, die unterschiedlichen Auftritte zu verbinden. Dass internationale Auftritte grundsätzlich sehr komplex sind und man immer auf die Eigenheiten der einzelnen Länder Rücksicht nehmen muss, sollte klar sein. Doch im Netz liegen die Marketingmaßnahmen auf einmal direkt nebeneinander, und was vor kurzem noch einfach war, nämlich die gleiche Marke in einzelnen Ländern unterschiedlich zu positionieren, wird sehr kompliziert, will man im WWW doch zumindest einen Grundtenor schaffen, der die Seiten verbindet.

Mode im Netz ist generell ein sehr schwieriges Thema. Sie hat mit Stofflichkeit, Haptik, Licht und Emotion zu tun. Einige Werte kann man über das Netz kaum transportieren und sollte das auch nicht versuchen. Doch neben dem Gefühl, ein Kleidungsstück zu berühren und zu tragen, gibt es noch andere Sinne Sinne, die man ansprechen kann. Gucci hat es geschafft, als eine von wenigen Fashion-Sites Inhalte so zu präsentieren, dass das Image, das mit viel Geld in Shops, in Zeitschriften und auf dem Laufsteg aufgebaut wurde, auch ins Netz gebracht wurde (www.gucci.com). Die Technik ist innovativ und funktioniert perfekt, die komplette Kollektion ist zu sehen, Anzeigenmotive werden aufgegriffen und schaffen eine besondere Atmosphäre, und zusätzliche Inhalte wie das Investor Center geben der Site ihre Berechtigung im Netz. Dass gutes Branding nicht unbedingt mit ganz großen Etats zu tun hat, zeigt die Website von Freitag, die aus alten LKW-Planen so ziemlich alles an Taschen fabrizieren, was man sich vorstellen kann. Nicht nur dass die Site

E-Branding

..

163

F

Abbildung 4 Gucci (www.gucci.com): im Leben eigentlich schon wieder vorbei, im Netz richtig schick! Intuitive Benutzerführung, gute Technik, modulares Design. Und aktuell!

Abbildung 5 E Ungewöhnlich wie die Taschen, aber trotzdem ist alles da, was man von so einer Site erwartet – führt die Freitag-Story ziemlich gut weiter (www.freitag.ch).

unter www.freitag.ch bezüglich Navigation und grafischer Oberfläche anders ist als vieles, was man kennt, auch inhaltlich wird sie allen Kriterien gerecht, die man an das Medium stellt. Service ist genauso vertreten wie Unterhaltung und Information, sodass es einfach Spaß macht, sich durch die Seiten zu klicken, und das Image, das man von den Produkten und der Firma hat, weitergeführt und ergänzt wird. Vernetzte Markenführung bedeutet das, und es wird jedem klar, der jemals einen Freitag-Karton gesehen hat. Das VIAG-Produkt Loop fällt im Fernsehen und bei der Verpackung auf durch sein sehr klares, durchgängiges und eindeutig von Illustrator und Flash inspiriertes Design. Weniger marktschreierisch als die Konkurrenz und geprägt durch starke Farben und geometrische Formen taucht es auch im Netz unter www.loop-up.de wieder auf, verspielt und

164

doch funktional, so wie man es von dieser Marke eben erwartet. Und dann wird es schon schwierig, Seiten zu finden, die man guten Gewissens als gekonntes E-Branding bezeichnen kann, immer unter der Prämisse, dass die Site auch generell im Netz hervorsticht und wert ist, als Bookmark gewählt zu werden. Man würde denken, die Unternehmen, deren Geschäftsidee aus dem Netz geboren wurde, und die bezüglich Service und Technik ganz vorne stehen, hätten die Chance, sich aus dem Medium heraus gekonnt zu positionieren. Die Website entsteht fast gleichzeitig mit der Idee, dem Logo, dem Corporate Design und dem Marketingansatz. Und durch hohe Werbebudgets sind sie schnell in aller Munde. Doch zum einen besteht die Gefahr, dass Dinge, die im klassischen Bereich oft Monate dauern und mit viel Know-how und Liebe zum

Strategien im WWW

..

G

Abbildung 6 Bei Loop sind die klassische Kommunikation und die TV-Commercials klar von den neuen Medien beeinflusst, da funktioniert mittlerweile auch der Rücktransfer ins Internet sehr gut.

Detail gestaltet werden, für Websites innerhalb kürzester Zeit realisiert werden müssen. Allein der Entwurf eines Logos, der schnell im Rahmen des visuellen Konzeptes für die Site entwickelt wird, hält normalerweise ganze Scharen von klassischen Designern in Atem. Und zum anderen ist es erschreckend zu sehen, dass diese Unternehmen, die für viel Geld Print- und TV-Kampagnen entwickeln lassen (die sich interessanterweise auch allesamt sehr ähneln), mit ihrer Site, die doch eigentlich das Herzstück ihres Geschäftes ist, vieles vernachlässigen, was bei anderen Firmen, die das Netz erst langsam für sich entdecken mussten, gang und gäbe ist. Das heißt nicht, dass die Auftritte und die Idee dahinter an sich nicht gut sind, aber ein klares Bild, an das ich mich auch erin-

nere und das unter Millionen hervorsticht, das ergibt sich nur selten. Logo oben auf die Seite und dann ein datenbankinspiriertes Interface, das ist es meistens. Dabei müssten doch eigentlich genau diese Seiten zeigen, wie man es richtig macht. Aber da bleibt wohl nur die Hoffnung auf den Relaunch. E-Branding ist ein hochaktuelles Thema, und fast jede Agentur schreibt es sich auf die Fahnen. Spätestens hier sind wir an dem Punkt angekommen, an dem sich Werbeagenturen, Designbüros und Multimedia-Agenturen an einen Tisch setzen müssen, sich über die Besonderheiten aller Medien klar werden und gemeinsam eine Strategie entwickeln, welche die Marke überall trägt und stärkt. Dann ist E-Branding auch gar nicht schwer!

E-Branding

..

165

Abbildung 7 E Drei Dot-com-Websites, bei denen das Logo oben auf die Site gepackt wurde. Recht viel mehr ist beim Branding aber nicht passiert. Außer den Ameisen bei letsbuyit.com ...

166

Strategien im WWW

..

E-Branding

..

167

Die Gestaltung von Online-Shops Verkaufen, verkaufen, verkaufen Nachdem die große Welle der reinen MarketingWebsites abflaute, fragten sich nicht nur in der IBM-Werbung viele Unternehmen, warum sie ins Internet sollten. Einige Vorreiter wie Dell oder Amazon gaben die Antwort: Geld verdienen! Und auch wenn Deutschland – an der Zahl der OnlineKäufe gemessen – immer noch hinter den USA herhinkt und nur einige Online-Händler wirklich viel Geld verdienen, so ist die Gestaltung von Shops und E-Commerce-Anwendungen mittlerweile der hauptsächliche Broterwerb vieler Designer.

Das Einkaufserlebnis im Netz Über 90 % der Deutschen im Netz planen, im Jahr 2000 auch Einkäufe im Netz zu tätigen (W3B-Studie, zehnte Erhebung, www.w3b.de). Diese Zahl hat sich in den vergangenen Jahren kontinuierlich nach oben entwickelt, was auch zeigt, dass die anfänglichen Bedenken gegenüber Online-Shopping langsam der Vergangenheit angehören. Momentan sind vor allem Web-Shops erfolgreich, die den Besonderheiten des Mediums gerecht werden: E Sofortige Verfügbarkeit der Produkte Dies ist bei allen digitalen Produkten wie Musik, Software, Bildern, Auskünften oder Verträgen (Reisen) gegeben. E Bekannt – Einfach – Standardisiert Bücher, Streetware oder Kosmetik sind in der Regel bereits bekannt bzw. so standardisiert, dass der Kunde genau weiß, was ihn erwartet.

168

E

Mehrwert durch den Netzkauf Immer dann, wenn echte Mehrwerte angeboten werden, also z.B. unbegrenzter Support und wichtige Zusatzleistungen wie Software oder aber ein günstigerer Preis, fällt den Käufern die Entscheidung für einen Web-Shop ebenfalls leichter. Momentan nutzen viele (potenzielle) Käufer einen Online-Shop als wichtige Informationsquelle, was für die Gestalter dieser Systeme bedeutet, hoch differenzierte Informationen zu bieten, die jedoch den Kaufprozess nicht stören dürfen. Die große Kunst besteht darin, das »Einkaufserlebnis« im Netz so zu gestalten, dass der Kunde Spaß dabei hat und durch den Shop – ähnlich wie im echten Laden durch einen guten Verkäufer – dazu angeregt wird, mehr zu kaufen, als er ursprünglich wollte.

Strategien im WWW

..

F

Abbildung 1 Zielgruppenaffinität, die fast schon weh tut: www.girlshop.com.

Im richtigen Leben hat ein Verkäufer darüber hinaus die Möglichkeit, den Kunden und seine momentane Situation einzuschätzen: Ist er in Eile? Ist er bereit, viel Geld auszugeben? Möchte er vielfältige Informationen einholen? Möchte er nicht zum Kauf gedrängt werden? Ist er sich in seiner Entscheidung bereits sicher? Diese Fragen kann sich ein Web-Shop nicht stellen, schließlich ist er letztlich nur ein Stück dummer Software. Den intelligenten und menschlichen Part müssen wir bei der Gestaltung einbringen und dafür sorgen, dass all diese unterschiedlichen Situationen abgedeckt werden.

Der perfekte Aufbau des Verkaufsvorganges Ein Verkaufsvorgang im Netz unterscheidet sich im Prinzip nicht von dem in einem echten Laden. Aber auch nur im Prinzip. Denn die

Maßnahmen, die ergriffen werden müssen, um den Nutzer wirklich zum Kauf zu bewegen, sind vielfältig und orientieren sich streng am Verkaufsprozess. Hereinkommen Was tun Sie, wenn Sie in einen Laden gehen? Sie sehen sich um, orientieren sich und entscheiden sich dann, welchen Weg Sie einschlagen. Die zielführende Gestaltung von Verkaufsflächen ist seit Jahrzehnten streng wissenschaftlich untersucht und definiert worden und nimmt entscheidenden Einfluss auf die Umsatzzahlen. Auch im Netz ist das Hereinkommen ein wichtiger Moment, der alles entscheidend sein kann. Auf der ersten Seite muss sich der Kunde wohlfühlen und das Gefühl bekommen, an der richtigen Stelle angekommen zu sein. Wir erreichen dies, indem die Seite einen aufgeräumten Eindruck macht, der die Orientierung erleichtert und dem Kunden zeigt, was ihn erwartet. Dazu gehört ein kurzer Überblick über die Art des Warenangebotes, der durch die Gestaltung

Die Gestaltung von Online-Shops

..

F

Der Kunde muss sich wohlfühlen

169

Abbildung 2 E Unübersichtliche Suchergebnisse erschweren den Kaufprozess.

noch verstärkt werden kann. Vor allem bei kleineren und unbekannten Anbietern ist es wichtig, das Vertrauen des Kunden zu gewinnen. Insbesondere Sicherheitsbedenken können hier recht schnell ausgeräumt werden, indem auf bestimmte Selbstverpflichtungen, wie kostenlose Rücknahme einer Ware, oder Serviceleistungen aufmerksam gemacht wird. Vor allem aber müssen auf der Einstiegsseite verschiedene Wege zu den Produkten angeboten werden, die dem unterschiedlichen Kaufverhalten gerecht werden. Stöbern, suchen und finden Die einfachste Art, ein Produkt im Netz schnell zu finden, bietet eine Suchfunktion Suchfunktion. Sie sollte schon auf der Homepage eingebunden sein und auf eine Ergebnisseite führen, die sich nicht an technischen Voraussetzungen, sondern an menschlichen Wahrnehmungsfähigkeiten orientiert. Im obigen Beispiel habe ich nach »DVD« gesucht, als Ergebnis bekomme ich eine Liste

170

mit 196 Dokumenten. Schlecht! Besser wäre es, die Ergebnisse nach verschiedenen Produktgruppen zu ordnen, die es mir einfach machen, auf die gewünschte Produktdarstellung zu wechseln. Am besten wäre es jedoch, dem Käufer zuerst eine kurze Liste aller Produktkategorien zu geben, in denen Produkte mit dem Namen »DVD« auftauchen, und danach zusätzlich eine Liste aller gefundenen Dokumente. Ein weiterer möglicher Weg ist der Kauf durch Beratung Beratung. Viele Kunden haben keinen Produktwunsch, wohl aber ein Bedürfnis oder ein Problem. Dies gilt es herauszufinden, um dann eine Lösung in Form eines Produktes zu bieten. In unserem Beispiel habe ich das konkrete Bedürfnis, meinen vorhandenen Laptop um ein DVD-Laufwerk zu erweitern. Ein guter PC-Shop könnte mich über ein interaktives Beratungssystem zum gewünschten Produkt führen. Vereinfacht könnte die Abfolge der Fragen so aussehen:

Strategien im WWW

..

F

Abbildung 3 Eine sinnvolle Hierarchie von Produktkategorien hilft den Kunden, sich zurechtzufinden.

1. Möchten Sie ein Komplettpaket erwerben? 2. Möchten Sie Zubehör zu einem bestehenden Produkt? a. Zubehör zu einem PC b. Verbrauchsmaterialien c. Zubehör zu einem Laptop i. Zubehör für Apple-Laptops ii. Zubehör für IBM-Laptops iii. Zubehör für SONY-Laptops 1. Batterien 2. Kabel 3. Laufwerke

Wenn diese Abfragen in Form von Dropdown-Menüs realisiert werden, kann Kunden auf schnellstem Weg geholfen werden. Viele Kunden bewegen sich auch mit Hilfe hierarchischer Kategorienlisten durch einen Shop. Diese Variante ist recht verbreitet, da sie schnell und einfach zu realisieren ist. Bei der Wahl der Kategorien ist darauf zu achten, dass diese möglichst selbsterklärend sind und nicht zu umfangreich ausfallen (Abb. 3).

Als letzte Möglichkeit des Auswahlprozesses soll das Stöbern nicht unerwähnt bleiben. Einkaufen kann durchaus auch eine lustvolle Komponente haben, wenn man sich positiv überraschen lässt. Von vielen Shops wird dies in Form von kleinen Produktdarstellungen auf den Seiten oder Bannern unterstützt. Amazon hat sogar einen Button Stöbern auf seiner Homepage. Sinn ist es, den Nutzer scheinbar ziellos an die Produkte heranzuführen, die ihn interessieren könnten. Dabei ist vor allem darauf zu achten, eine schnelle Abfolge von unbegrenzt vielen Produkten zu ermöglichen, durch die sich der Kunde linear klicken kann. Dabei ist vor allem das themenspezifische Stöbern (»Urlaubslesebücher«) erfolgreich. Informieren und bestätigen Sobald der Kunde sich für ein Produkt entschieden hat, gilt es, ihm den Entscheidungsprozess möglichst leicht zu machen. Dabei spielt die bildhafte Darstellung des Produktes eine große Rolle. Selbst körperlose Produkte

Die Gestaltung von Online-Shops

..

F

Erleichtern Sie die Kaufentscheidung.

171

wie Handyverträge oder Musik werden gerne in Form von CD-Covern oder Packshots dargestellt. Als Kunde möchte ich möglichst viele Informationen über ein Produkt haben, um nicht die »Katze im Sack« zu kaufen. Unser wichtigstes Sinnesorgan beim Kauf bleiben die Augen, und die sind nicht leicht zufrieden zu stellen. Jedes Produkt verkauft sich besser über Bilder. Diese sollten jedoch so klein wie möglich sein, um die Ladezeiten nicht unnötig zu verlängern. Ebenso verhält es sich mit den textlichen Informationen. Geben Sie so viele davon, wie nötig sind, um das Produkt eindeutig zu beschreiben. Für alle Kunden, die sich noch tiefer gehend informieren möchten, sollte dann auf einer weiteren Seite auch eine vergrößerte Darstellung des Produktes und alle weiteren zur Verfügung stehenden Informationen angeboten werden. Diese Ansicht wird von vielen Kunden ausgedruckt und genutzt, um Vergleiche anzustellen. Wenn Sie möchten, dass der Kunde bei Ihrem Shop kauft, vergessen Sie nicht, in dieser Darstellung einen eindeutigen URL zu diesem Produkt, den Preis, die Produktnummer und eine Fax- oder Telefonbestellnummer anzugeben. Oft liegen diese ausgedruckten Seiten auf dem Schreibtisch, und aus Faulheit wird dort bestellt, wo es am einfachsten ist. Entscheiden Hat der Kunde sich für ein Produkt entschieden, wandert es in der Regel in den virtuellen Warenkorb. Sobald es dort liegt, brechen überraschenderweise viele Kunden den Prozess ab. Woran liegt das? Gründe für den Abbruch eines Kaufes und Gegenmaßnahmen E »Ich möchte mich nochmals an anderer Stelle informieren!«

172

E

E

E

Warum nicht. Aber Sie können dafür sorgen, dass den Kunden das Zurückkommen erleichtert wird: Durch die Möglichkeit, den Warenkorbinhalt abzuspeichern abzuspeichern, auszudrucken (mit den oben erwähnten logistischen Informationen) oder als Bookmark zu sichern. »Der Gesamtpreis ist mir schleierhaft!« Schlecht. Leider gibt es bei vielen WebShops immer noch keine Kostentransparenz renz. Sie können dafür sorgen, dass alle anfallenden Kosten (Verpackung, Lieferung, Skonti etc.) angegeben werden. »Ich gehe noch mal zurück zum Katalog, um weitere Waren auszusuchen!« Gerne. Aber wir kümmern uns darum, dass der Inhalt des Warenkorbes nicht verloren geht. »Letzte Woche habe ich hier bestellt und jetzt muss ich schon wieder 30 Felder ausfüllen – nein danke!« Schade, dabei gibt es doch die Möglichkeit, den Kunden anzubieten, dass ihre Daten gespeichert werden. Und spätestens die Konkurrenz macht es dem Kunden hier einfacher.

Kaufen Fast haben wir es geschafft, denn der Kunde hat alle Waren gewählt, sie in den Warenkorb gelegt und drückt auf den Button Bezahlen. Doch was ist das? »Die Bezahlung für Neukunden kann aus Sicherheitsgründen nur per Vorauskasse erfolgen.« Shops, die Sicherheitsrisiken komplett auf den Kunden übertragen, sind alles andere als kundenfreundlich, da selbstverständlich auch der Kunde Sicherheitsbedenken hat. Es gilt, diese auszuräumen und ihm größtmögliche Bequemlichkeit anzubieten. Die Möglichkeiten, per Kreditkarte, Nach-

Strategien im WWW

..

nahme oder Lastschrift zu bezahlen, sollten immer gegeben sein, Stammkunden sollten darüber hinaus auch per Rechnung zahlen können. Gerade Daten wie Konto- oder Kreditkartennummern werden ungern auf Websites bekannt gegeben. Selbstverständlich sollten diese Informationen verschlüsselt übertragen werden oder der Kunde die Möglichkeit haben, sie per Telefon einem Call-Center mitzuteilen. Sobald der Kunde den Kauf bestätigt hat, muss er die Möglichkeit haben, alle relevanten Informationen nochmals auszudrucken. Auch wenn dies keine »offizielle« Rechnung darstellt, so gibt man ihm doch etwas Greifbares an die Hand, falls bei der Lieferung irgendetwas nicht funktionieren sollte oder spätere Nachfragen nötig werden. Das Loch danach Nachdem der Kunde eine Bestätigung für seinen Kauf bekommen hat, gibt es plötzlich nichts mehr, was ihn an den Shop bindet. Außer bei digitalen Produkten wie Download-Software oder -Musik muss er nun einige Zeit auf das Produkt warten. Dennoch ist diese Phase vor allem zur Kundenbindung extrem gut geeignet. Denn nun können Maßnahmen wie Newsletter-Abonnements oder Loyalty-Programme angeboten werden. Vorstellbar wäre es auch, dem Kunden weitere Informationen zum gekauften Produkt anzubieten, die ihn nochmals darin bestärken, das Richtige gewählt zu haben, und ihm die Zeit bis zur Lieferung versüßen. Selbstverständlich sind dies alles nur Vorschläge, und viele Kunden werden nach der Bestellung als Erstes das Browserfenster schließen, für alle anderen jedoch würde sich der Shop so länger positiv im Gedächtnis halten.

Shopsysteme im Überblick Ein wichtiges Element beim Aufbau eines Shops ist das zu Grunde liegende System. Wir unterscheiden Shopsysteme in mehreren Kategorien. Der Shop auf dem eigenen Server Unzählige Softwarehersteller offerieren Shopsysteme vom kleinen »Laden« für einen Anbieter von Design-Schreibwarenzubehör bis zur großen Lösung von Softwarehäusern wie Intershop. Diese Art von Shopsystemen wird als Software gekauft, auf dem Server installiert und kann dann an die Bedürfnisse des Betreibers angepasst werden. Leider sind auch die Möglichkeiten der Gestaltung ähnlich vielfältig wie die Zahl der Anbieter selbst: Von »gebrauchsfertig gestalteten« Pa Pa-ckungsprodukten ist fast immer abzuraten, da sich die gestalterischen Fähigkeiten der Software-Designer in der Regel im Rahmen halten. Angenehm ist, fast all diesen Produkten liegt eine hierarchische Struktur von HTML-Seiten zu Grunde. Und auch wenn die Struktur selbst oft nicht verändert werden kann, so bleiben immer noch die einzelnen Seiten, um wenigstens »kosmetisch« tätig zu werden. Besser sind da schon professionelle Shopsysteme systeme, da sie oft umfangreiche Anpassungen von Struktur und Inhalten möglich (und nötig) machen. Achten Sie darauf, dass Sie Einfluss nehmen können auf die Struktur einzelner Bereiche, auf die Abfolge von Seiten, auf die Informationstiefe einzelner Produktdarstellungen und auf die Benutzerführung. Eine weitere Möglichkeit besteht selbstverständlich darin, den Shop selbst zu programmieren oder von einer Agentur programmieren zu lassen. Diese Variante ist zwar zeit- und

Die Gestaltung von Online-Shops

..

173

Abbildung 4 E Standardisierung, die fast schon weh tut: gemietete Webshops

kostenintensiv, jedoch gewährleistet sie den nötigen Einfluss auf Erfolgsfaktoren wie Design oder Benutzerführung. Vor allem dann, wenn komplizierte Produkte und umfangreiche Kundenbindungsmaßnahmen angeboten werden sollen, bietet es sich an, diese Möglichkeit zu wählen. »Gemietete« Shops Viele Internet Service Provider (ISP) und Application Service Provider (ASP) bieten umsonst oder für Pfennigbeträge »Storefronts« an, die zusammen mit dem Webspace gemietet werden können. Auch hier ist die Vielfalt der Angebote und Gestaltungsmöglichkeiten fast unüberschaubar. Die meisten dieser Systeme sind jedoch über ein Web-Interface zu pflegen, was die Editierung von Daten oder die Einstellung neuer Produkte extrem vereinfacht. Darüber hinaus sind in der Regel keine HTML-Kenntnisse Voraussetzung. Diese Angebote richten sich

174

deshalb auch in erster Linie an Firmen, die zwar online verkaufen wollen, dafür aber kein Geld ausgeben möchten. Ein Shop sieht dann aus wie der andere – der Verkaufserfolg bleibt sicherlich im Rahmen. Marktplätze Eine relativ neue Möglichkeit, Waren und Dienstleistungen im Netz zu verkaufen, sind die so genannten Marktplätze. Meist bewegt sich ein Kunde dort über hierarchische Produktmenüs und entscheidet sich dann für einen von mehreren Anbietern. Auch hier bieten einige Betreiber »Storefronts« an, die es ermöglichen sollen, die standardisierte Produktdarstellung des Marktplatzes zu umgehen. In den allermeisten Fällen unterscheiden sich die Gestaltungsmöglichkeiten jedoch nur minimal von denen der ISP und ASP. Es gilt also wieder, die Vorteile der Einfachheit abzuwägen gegen die Nachteile der Gleichmacherei.

Strategien im WWW

..

F

Abbildung 5 Hereinkommen

➍

➌ ➋

➊

Von Amazon lernen Der Buchversand versteht es wie kaum ein anderer Shop, die Möglichkeiten des Einkaufs permanent zu professionalisieren. Im Laufe der Zeit ist so das fast perfekte Einkaufswerkzeug entstanden. Durch das »Collaborative Filtering« ist es Amazon beispielsweise gelungen, persönliche Empfehlungen zu geben, die darauf basieren, dass das System lernt, welchen Geschmack Sie bei Büchern haben, und diesen mit dem anderer Kunden vergleicht. Vor allem jedoch das »Streamlinen« des Kaufprozesses führt dazu, dass Amazon-Kunden weniger häufig abbrechen als andere. Ähnlich wie eine Fischreuse aufgebaut, werden die Wahlmöglichkeiten und die Bewegungsfreiheit des Nutzers immer weiter eingeschränkt, bis nur noch der Weg nach vorne, also zum Kaufabschluss bleibt. Lassen Sie uns einen gesamten Ablauf betrachten:

Beim »Hereinkommen« finden Sie noch vielfältige Möglichkeiten der Orientierung (Abb. 5): E Produkt-Teaser (»Diablo 2«) bewerben einzelne Waren und animieren durch ihre prominente Gestaltung zum Klick ➊. E Themenspezifische Sammlungen (»Schöne Ferien«) greifen ein bevorstehendes Ereignis auf ➋. E Die Schnellsuche über alle Bereiche ist schon auf der Homepage aufzurufen ➌. E Über die Kategorien (Bücher, Musik etc.) kann in eine hierarchische Darstellung gewechselt werden ➍. E Generell vermittelt die Seite so eine unglaubliche Auswahl über viele Bereiche, bleibt aber trotzdem extrem aufgeräumt.

Die Gestaltung von Online-Shops

..

175

G

G

Abbildung 6 Stöbern

Abbildung 7 Informieren

Abbildung 8 E Der Einkaufswagen

Sobald Sie sich für einen Weg entschieden haben, steht nicht mehr die Navigation im Vordergrund, sondern eine Auswahl von Produkten. Auch wenn hier eigentlich Listen verschiedener Titel am wichtigsten sind, ist bereits ein Buchcover abgebildet, da Bilder einen höheren Kaufreiz auslösen als Texte. Generell bleibt die Auswahl hier noch recht groß (Abb. 6). Wenn Sie jetzt ein Buch näher betrachten möchten, ändern sich die Navigation und der Aufbau der Seite. Jetzt steht optisch das Buch im Vordergrund. Gleich danach in der Rangfolge der Klickelemente folgt der Button In den Einkaufswagen, dann die Themennavigation

176

(Mehr zu diesem Buch) und für alle, die dieses Buch nicht haben möchten, gibt es die Hauptnavigation und die Suche (Abb. 7). Nachdem wir auf den Knopf Einkaufswagen gedrückt haben, landen wir auch genau dort (Abb. 8). Jetzt stehen genau zwei Klickvarianten im Vordergrund: Ähnliche Artikel, um zu weiteren Käufen animiert zu werden, und Zur Kasse gehen, um den Verkaufsprozess fortzusetzen. Unser gewähltes Buch mit Preis und Mengenangabe ist nun eher hintergründig dargestellt, da wir uns ja bereits dafür entschieden haben.

Strategien im WWW

..

G

Abbildung 9 Bestellen

G

Abbildung 10 Versandart

Abbildung 11 E Nach dem abgeschlossenen Kauf stehen wieder alle Möglichkeiten der Navigation zur Verfügung.

Wir entschließen uns, den Kaufprozess fortzusetzen und kommen zur ersten Bestellseite. Plötzlich verschwindet das Hauptmenü mitsamt der Suchfunktion, denn ab jetzt ist alles darauf ausgerichtet, die Bestellung ungestört fortzusetzen. Wer noch Sicherheitsbedenken hat, kann auf den entsprechenden Link gehen, alle anderen erfahren, dass sie soeben bei Schritt 1 von insgesamt 7 angelangt sind und nach Eingabe der E-Mail-Adresse nur noch auf Weiter klicken können (Abb. 9).

Die nächsten Zwischenschritte folgen alle demselben Schema: Außer den jeweiligen Wahlmöglichkeiten (hier der Versandart) ist die Navigation auf den Knopf Weiter reduziert. Ein Zurück oder andere Wahlmöglichkeiten, die vom Kauf ablenken könnten, sind hier nicht mehr vorgesehen. Nachdem alle erforderlichen Daten abgefragt wurden und die Bestellung bestätigt wurde, taucht plötzlich das Hauptmenü wieder auf, auch wenn ich auf dieser Seite hauptsächlich dazu animiert werde, »1-Click«-Besteller zu werden (Abb. 11).

Die Gestaltung von Online-Shops

..

177

Abbildung 12 E Der Apple-Store Deutschland

Von Apple lernen? Die Hersteller der schönsten Computer der Welt haben auch bei der Gestaltung ihres Shops darauf geachtet, dem neuen »transluzenten« (lichtdurchlässigen) Apple-Look gerecht zu werden. Der Shop ist komplett in die Website integriert und demnach identisch wie diese gestaltet (www.store.apple.com). Auf der ersten Seite fällt bereits die Philosophie des Shops ins Auge: Alles ist so einfach wie nur möglich dargestellt, und der Nutzer bekommt ganz klare Handlungsanweisungen, im Fall der Einstiegsseite heißt diese, sich einen Rechnertyp auszusuchen. Die Produktbilder sind extrem ansprechend fotografiert und wirken – den Preisen entsprechend – hochwertig.

178

Hat man sich für einen Rechner entschieden, gilt es grundsätzlich zwischen mehreren Konfigurationen auszuwählen oder ein vorgefertigtes System zu wählen (Abb. 13). Dieser Zwischenschritt ist wichtig, um unerfahrenen Käufern das Gefühl zu geben, sie müssten nichts von Technik oder Konfigurationen verstehen, um trotzdem einen hervorragenden Rechner kaufen zu können. Auch hier stören keine weiteren Sonderangebote oder Zubehörteile den Auswahlprozess. Die drei Buttons für Auswahl und Konfiguration sind deutlich die wichtigsten und auffälligsten Navigationselemente.

Strategien im WWW

..

G

Abbildung 13 Es geht immer noch einfacher.

Abbildung 14 E Der Käufer sieht genau, was er auswählt. G

Abbildung 15 Schade, Apple: eine englische Beschreibung und fehlende Navigation

Wir haben uns dafür entschieden, die Ausstattungsmerkmale selbst zu konfigurieren, und landen auf der entsprechenden Seite (Abb. 14). Leider zeigt sich hier, dass viele Teile einfach von der US-Site übernommen und anscheinend nicht übersetzt wurden (Memory, Hard Drive). Hervorragend sind die Abbildungen der Ausstattungsmerkmale, so kann auch der Unerfahrene genau sehen, was er kauft. In den Drop-down-Menüs sind übrigens auch die jeweiligen Aufpreise angegeben, sodass ein Informationsschritt und damit mindestens ein Klick entfällt.

Wer unsicher ist, was hinter einer Komponente steckt, kann direkt neben dieser Komponente weitere Informationen anfordern. Leider führt uns dieser Klick ins absolute Desaster: Wir landen zwar auf der gewünschten Seite mit einer Beschreibung der gewählten Komponente, doch ist diese in englischer Sprache verfasst (Abb. 15). Darüber hinaus gibt es keine Möglichkeit, zurückzukommen. Der Käufer wird gezwungen, dies mit der Taste Back seines Browsers zu machen. Viele unerfahrene Nutzer wählen diese nicht und werden wahrscheinlich auf Store in der Hauptnavigation

Die Gestaltung von Online-Shops

..

179

Abbildung 16 E Das Sprachgewirr stört die Aufgeräumtheit.

klicken: Weg sind alle getroffenen Entscheidungen und vielleicht somit auch ein Kunde. Sofern der Kunde seinen Weg zurück zur begonnenen Bestellung gefunden hat, kann er entweder weitere Artikel hinzufügen oder aber die Bestellung fortsetzen. In allen weiteren Schritten hat er grundsätzlich die volle Trans-

180

parenz bei bestellten Waren und dem Endpreis. Das hervorragend gestaltete Einkaufserlebnis wird jedoch auch auf den folgenden Seiten getrübt durch fehlende Übersetzungen, englische Texte oder Buttons und eine teilweise miserable Programmierung der Seiten. Schade, Apple.

Strategien im WWW

..

Die Gestaltung von Online-Shops

..

181

Gestaltung von e-Finance-Websites Von Schlipsträgern lernen? Lange haben sie gebraucht, die Banken und Versicherungen, bevor sie sich ins Netz gewagt haben. Doch als klar wurde, dass das WWW nicht nur aus Spieleseiten für Jugendliche besteht, sondern eine durchaus sinnvolle Ergänzung der bestehenden Kommunikations- und Vertriebskanäle sein kann, drängten sie alle ins Web. Heute beschäftigt die Gestaltung von Portalen und Sites für Finanzdienstleister unzählige Webdesigner und Programmierer.

Was ist anders bei E-Finance? In wenig anderen Branchen spielen Vertrauen und Sicherheit eine so große Rolle wie bei Finanzdienstleistern. Bei der Wahl einer Hausfarbe fällt nicht von ungefähr die Entscheidung recht häufig auf Blau. In den letzten Jahren hat sich der Markt jedoch verändert, außer den klassischen Werten wie Sicherheit, Vertrauen und Seriosität haben durch das Aufkommen der Direkt-Banken auch Technologieführerschaft, Schnelligkeit oder Freundlichkeit als Werte an Boden gewonnen. Trotz aller Entwicklungen: Es ist eine schwierige Aufgabe, die Website für einen Finanzdienstleister zu gestalten. Noch immer spukt der Begriff der »virtuellen Filiale« durch die Köpfe der Banker, eine Hilfsumschreibung für eine nicht unproblematische Entwicklung. Dahinter steht die Annahme, der Kunde – die Gestaltung seiner Filiale gewöhnt – braucht auch in der virtuellen Welt die Bekanntheit eines realen Raumes. Dies führte in der Vergangen-

182

heit oft zu besonders unschönen Blüten des Webdesigns. Beim Versuch, eine reale Filiale dreidimensional nachzubilden, bleiben leider häufig alle Grundregeln eines guten Webdesigns wie Schnelligkeit oder Modularität auf der Strecke. Heute finden sich diese »virtuellen Filialen« dankenswerter Weise jedoch immer seltener. Stattdessen sind es gerade die Finanzdienstleister, getrieben von den Wünschen der Kunden, die nun schnelle, performante und nutzenorientierte Sites erstellen lassen. Anforderungen Welche Anforderungen werden an die transaktionslastigen Websites von Finanzdienstleistern gestellt? E Ständige Erreichbarkeit Die Kassenstunde hat schon lange ausgedient. Transaktionssites müssen dem Kunden permanent zur Verfügung stehen. 365-7-24.

Strategien im WWW

..

E

E

E

E

Interaktivität Kaum ein Geschäft ist so individuell wie Verwaltung, Sicherung und Aufbau eines Vermögens. Egal ob der Abschluss einer Risikolebensversicherung oder der OnlineAktienhandel gewünscht ist, die wirklich wichtigen Informationen sollten nicht in Form von Texten, Diagrammen oder Tabellen vorliegen, sondern als interaktive Tools. So bekommt der Kunde nie das Gefühl, sich in eine Tabelle einordnen zu müssen, sondern sieht sich »individuell« betreut. Echtzeitoperationen Vor allem die technische Umgebung muss in der Lage sein, Transaktionen sofort auszuführen und sofortiges Feedback mit minimalen Ladezeiten zu geben. Filterung von Informationen Bei der Vielzahl an Produkt-, Rechts- und Marktinformationen wäre es ein Unding, den Kunden suchen zu lassen. Eine personalisierbare Umgebung wird für die Finanzsites der nahen Zukunft unerläßlich sein. Dabei spielt die Gestaltung unterschiedlicher Bereiche für differenzierte Zielgruppen eine große Rolle. Welche Informationen in welcher Form braucht der Besucher, um Kunde zu werden, der bestehende Kunde, um als Online-Broker gewonnen zu werden, usw.? Diese Fragen müssen sich alle Beteiligten stellen, vor allem jedoch die Designer, da Interfaces extrem modular aufgebaut sein müssen, um alle Zielgruppen ansprechen zu können. Ortsunabhängige Erreichbarkeit bedeutet mittlerweile nicht mehr nur Internet und Telefon, sondern auch exotische Interfaces wie WAP oder PalmOS. Die große Kunst besteht bei Letzteren darin, auf kleinstem Raum und zweifarbigen Displays so-

E

wohl Informationen zu gestalten, als auch dem Corporate Design des Unternehmens gerecht zu werden. Selbstlernende Systeme erkennen den Nutzer und lernen mit jedem Besuch mehr über seine Bedürfnisse und Vorlieben. Bei derartigen Websites kann von Screendesign im eigentlichen Sinne nicht mehr gesprochen werden. Vielmehr müssen Elemente gestaltet werden, die mittels Filtern in Module eingepasst werden, die wiederum zusammen mit anderen Modulen eine Seite bilden. Webgestalter haben hier eine zentrale und immer weitreichendere Rolle, die sich noch am besten mit der des Regisseurs vergleichen lässt.

Personalisierung auf allen Ebenen? Für die meisten Informationen auf Websites von Finanzdienstleistern interessieren sich die Nutzer nur situationsgebunden. So sucht man nach Konditionen nur dann, wenn man Kunde werden möchte oder sich Rahmenbedingungen ändern. Die am häufigsten benötigten Informationen betreffen sowieso nur das eigene Portfolio und damit verbundene Produkte. Dieser Tatsache tragen viele Finanzdienstleister in den USA und einige in Deutschland Rechnung: Eine personalisierte Version der Site steht im Vordergrund, der Zugang für alle hingegen bleibt streng marketingorientiert. Die Deutsche Bank zeigt in ihrem Bereich »Private Banking« jetzt schon, in welche Richtung es gehen wird. Der eingeloggte Kunde kann sich (inhaltlich) seine eigene Homepage zusammenstellen und die Informationen über seine Konten und Depots einstellen, die er

Gestaltung von e-Finance-Websites

..

183

H

Abbildung 1 Deutsche Bank Private Banking, allgemeiner Zugang

G

Abbildung 2 Deutsche Bank Private Banking, »Private Home«

permanent nutzt. Darüber hinaus werden auch Nachrichtenhäppchen und exklusive Analysen dargestellt, auf die Nichtkunden keinen Zugriff haben (Abb. 3). Die persönliche Homepage wird im Finanzbereich sehr schnell den allgemeinen Zugang mit personalisiertem Transaktionsbereich ersetzt haben, da sowohl die angebotenen Produkte als auch Zusatzservices wie WAP-Zugang, SMS-Benachrichtigungen über bestimmte Aktienkurse oder Informationsdienste über bestimmte Märkte mittlerweile so komplex geworden sind, dass sich Kunden nur dann zurechtfinden, wenn alles herausgefiltert wird, was sie in ihrer momentanen Situation nicht benötigen. Für Webdesigner hat diese Vorgehensweise natürlich weitreichende Konsequenzen, da auch hier wieder keine einzige HTML-Seite

184

produziert wird, sondern leere »Hüllen« (Templates) gestaltet werden müssen, die dann von einer Datenbank mit einzelnen Modulen und Elementen bestückt werden. Der Vorteil dieser Vorgehensweise liegt darin, dass einzelne Module auch in einem ganz anderen Kontext eingesetzt werden können. In die deutsche Version von »Mein Yahoo« können Kontoinformationen und Kurslisten des eigenen Deutsche-Bank-Kontos integriert werden, ohne dabei auch nur ein Mal auf die Website der Bank zu gehen (Abb. 4). Es zeigt sich eine generelle Tendenz von Websites, komplette Modularität von den Gestaltern zu fordern, die sich als Folge intensiv mit allen Inhalten auseinander setzen müssen, um einen Überblick über alle Möglichkeiten und Wahrscheinlichkeiten zu erhalten.

Strategien im WWW

..

H

Abbildung 4 Mein Yahoo mit Ansicht der freigeschalteten Konten

G

Abbildung 3 Einstellungen des »Private Home« verändern

Applikationsdesign Die wichtigste Anwendung fast aller FinanzWebsites sind Applikationen zur Datenabfrage und Transaktion. Diese stellen besondere Anforderungen an die Gestaltung: E Höchste Modularität einzelner Elementtypen E Schnellste Prozesse E Plattformübergreifende Gestaltungsvorgaben für HTML, JAVA, WAP etc. E Logische und leicht verständliche lineare Abläufe E Einsatz von Feedback-Darstellungen E Intuitiver Einsatz von Hilfesystemen Modular Auf der Website einer Online-Bank finden sich zum Teil Hunderte von interaktiven Anwendungen, diese bestehen aus Listen, Buttons, Eingabefeldern oder Drop-down-Menüs. Da-

mit nicht jede dieser Anwendungen immer neu gestaltet werden muss, ist es sinnvoll, sich ein System zu überlegen, dass für alle gilt, eine »Masterapplikation« also. Bestimmte Module wie die Abfrage von Adressdaten oder Passwörtern sollten dabei immer gleich bleiben, denn die Bequemlichkeit des Nutzers steht im Vordergrund. Auch die Ausgabe von Daten sollte wenn möglich so gestaltet werden, dass die wichtigsten Informationen auf den ersten Blick ersichtlich sind und Eingaben jederzeit geändert werden können. Schnelligkeit Sowohl die Programmierung als auch die Gestaltung einer Applikation haben entscheidenden Einfluss darauf, wie schnell diese ein gewünschtes Ergebnis liefert. Dabei zählt jedes Bite. Sofern man also auf den Einsatz von Bil-

Gestaltung von e-Finance-Websites

..

185

G

Abbildung 5 Banking-Applikation für das PalmOS

dern, auch selbst gestalteten Buttons nicht verzichten kann, ist es sowohl eine Selbstverständlichkeit, die gleichen Bilder immer wieder zu verwenden (da sie dann im Zwischenspeicher des Browsers abgelegt wurden), als auch eine maximale Komprimierung zu erzielen. Plattformübergreifend In Zukunft wird es deutlich wichtiger als heute werden, Applikationen so zu gestalten, dass der Nutzer sie auf verschiedenen Plattformen wieder erkennt und auf dem PalmPilot genauso leicht verwenden kann wie im Browser (Abb. 5). Hier kann man von den GUI-Designern der Softwarehäuser lernen: Diese erstellen jedes Element und jede Oberfläche von Anfang an in verschiedenen Versionen. Für kleine Schwarzweißbildschirme ebenso wie für solche mit höchster Farbqualität. Vor allem Java ist bislang geeignet, um plattformübergreifende und sichere Anwendungen zu erstellen. Leider sind Java-Applikationen nicht immer farbecht, da sie bei einigen Farbtönen Probleme mit der HTML-Palette haben. Soll also beispielsweise eine Applikation farblich exakt in den Hintergrund einer HTML-

186

Seite passen, lohnt es sich immer, ein Bildschirmfoto der fertigen Seite zu machen und die Farbwerte nochmals genauestens in einem Bildbearbeitungsprogramm zu untersuchen. Linear Was bei der Gestaltung von Websites eigentlich verpönt ist, wird für viele interaktive Anwendungen unbedingt notwendig: Ein linearer Aufbau, der es ermöglicht, auf irrelevante Informationen zu verzichten und den Nutzer so durch komplexe Abfragen zu führen. Ein Beispiel: In einem Formular zur Bestellung von Informationsmaterial für verschiedene Versicherungsarten kann auf einer Seite angegeben werden, welche Informationen den Nutzer interessieren und in welchen Formaten ihm diese zukommen sollen. In einigen Fällen wird der Nutzer Informationen auswählen, die in einem bestimmten Format nicht vorliegen. Ärgerlich. Durch eine sinnvolle Aufsplittung in zwei Phasen könnten in einem zweiten Schritt nur die Formate angeboten werden, die für die Auswahl auch wirklich existieren. Anwendungen, die lineare Strukturen erfordern, kann man sehr gut mit Lernprogrammen

Strategien im WWW

..

Abbildung 6 E Einfaches, aber geniales direktes Feedback: Sowohl das Datum in der schwarzen Leiste als auch der Wert im weißen Kasten verändern sich mit der aktuellen Mausposition.

vergleichen. Es ist grundsätzlich angenehm zu wissen, wo man sich innerhalb der Applikation befindet. Informationen wie »Schritt drei von zehn« gehören deshalb zum guten Ton. Es wird ebenfalls als angenehm empfunden, am Ende noch einmal alle Eingaben kontrollieren und gegebenenfalls editieren zu können, dann allerdings auf einer Seite.

schön, wenn dieses Feld auffällig markiert wird. Wenn der Nutzer verschiedene Dokumente zum Download wählt, könnte die Gesamtgröße der ausgewählten Daten automatisch aktualisiert werden. Die Applikation gibt dem Nutzer also eine wichtige Rückmeldung über den Stand der Interaktion und lässt ihn an keiner Stelle alleine.

Feedback Generell muss jede Aktion des Nutzers durch eine (sichtbare) Reaktion der Site belohnt werden. Während eine komplexe Berechnung im Hintergrund läuft, sollte der Nutzer mindestens erfahren, dass gerade etwas passiert. Wenn in einem Formular vom Nutzer das Ausfüllen eines Feldes vergessen wurde, ist es

Hilfe Kennen Sie das? Sie befinden sich auf der Website Ihres Online-Brokers, haben sich mit Hilfe eines hervorragenden Werkzeuges interessante Wertpapiere ausgewählt, landen in Stufe vier von vier des Kaufvorganges und wissen plötzlich nicht, was der Unterschied zwischen »Put« und »Call« sein soll. Sie haben bei

Gestaltung von e-Finance-Websites

..

187

Abbildung 7 E Map of the Market: Jedes Quadrat entspricht einer Firma, Grün bedeutet gestiegener Aktienkurs, Rot gefallener Kurs; je heller die Farbe, desto größer die Veränderung.

Hilfestellung Bei allen Applikationen und Formularen sollte unbedingt Hilfestellung gegeben werden: E Zum richtigen Ausfüllen des Formulars E Zu branchenspezifischen oder technischen Begriffen E Zur Weiterverwertung der Daten E Zur Sicherheit bei Speicherung und Übertragung

188

den meisten Sites zwei Möglichkeiten: Entweder Sie gehen alle Stufen zurück zur Erklärungsseite und verlieren Ihre bereits angegebenen Informationen, oder aber Sie starten in einem neuen Browserfenster das Ganze von vorne. Schade. Angenehmer wäre es in jedem Fall, Sie könnten einfach auf ein kleines Fragezeichen neben der Option Put klicken und würden dann in einem neuen Browserfenster einen Hilfetext angezeigt bekommen.

Best Practice In den Abb. 7 – 10 finden Sie einige Beispiele gelungener Anwendungen oder Sites aus dem Bereich der Finanzdienstleister.

Strategien im WWW

..

F

Abbildung 8 Der Java-Trader der comdirect Bank

Abbildung 9 E Der »Zukunftsplaner« der Direkt Anlage Bank: Applikationen und ein linearer Ablauf sorgen für Übersichtlichkeit.

F

Abbildung 10 Aufgeräumt und nutzerfreundlich: die Dresdner Bank

Gestaltung von e-Finance-Websites

..

189

Portal-Sites Die Tore zur großen WWW-Welt Eines der großen Schlagwörter ist das Portal, das den Weg zu Millionen von Nutzern und ganz viel Geld eröffnet. Ist dem wirklich so?

Das Wort Portal kommt aus dem Lateinischen und bedeutet so viel wie Vorhalle, prunkvolles Tor, Pforte, großer Eingang (Duden Band 5, 1997) und bezeichnet im übertragenen Sinn eine Site, die Zugang für viele andere Sites bietet, die in inhaltlichem Zusammenhang stehen. Ein Portal versucht, von möglichst vielen Nutzern als Startseite ins WWW benutzt zu werden. Die Zuordnung zu einem bestimmten Thema sowie das Angebot von verschiedenen Services wie E-Mailadressen, Suchmaschinen, Chat-Foren oder Newslettern ist dazu angelegt, die User zu binden und deren Grundbedürfnisse im Netz zu erfüllen. Es soll eine Community geschaffen werden, die sich mit Claims wie »Do you yahoo?« identifiziert und somit möglichst viel Traffic auf der Site generiert. Die Finanzierung erfolgt meistens über die Funktion als Werbeträger.

Die üblichen Verdächtigen Jeder User benutzt fast täglich ein Portal. Die bekanntesten sind Suchmaschinen oder Online-Dienste, das größte ist wohl AOL, wobei

190

damit die eigens zu installierende Software gemeint ist und nicht deren Website. Sites, die anfänglich nur als Suchmaschinen oder Webverzeichnisse konzipiert waren, wie zum Beispiel Lycos oder Yahoo!, integrieren immer mehr Funktionalitäten, sodass man kaum noch andere Sites benötigt, um sich Inhalte und Services aus dem Netz zu ziehen. Alta Vista bietet neben unterschiedlichen Suchmaschinen für Text, Bild, Audio- und Video-Files auch ein Web-Directory, in dem Sites bis ins kleinste Detail kategorisiert und katalogisiert sind. Außerdem gibt es ein Übersetzungstool, Chat-Räume, persönliche E-MailAdressen, Jobangebote, personalisierbare Homepages, Message Boards, Horoskope, Nachrichten, Gewinnspiele, Shopping-Angebote, Auktionen und vieles mehr. Das Problem wird schnell klar: Unmengen von Information möglichst schnell und jederzeit editierbar an den User zu bringen. Riesige Datenbanken, Redaktionstools und Programme liegen hinter diesen Sites, sodass für Interface- und Screendesign anscheinend kaum noch Zeit bleibt. Die Seiten, und das ist fast allen Portals dieser Art gemein, sind komplett datenbank-

Strategien im WWW

.

.

F

Abbildung 1 Alta Vista ist ein der typischer Vertreter von Portalen.

basiert und bestehen nur aus Systemtext und Systemelementen. Darüber hinaus wird versucht, Massen an Information und Service auf die erste Seite zu bringen, um möglichst viele User anzusprechen. Die Gefahr ist, dass man die für sich relevante Information in dieser Masse nicht mehr findet. Die verwendeten Datenbanken lassen beim Layout sehr wenig Spielraum, wodurch sich die einzelnen Portale mit sowieso fast ähnlichen Inhalten immer mehr angleichen. Kommt ein neues hinzu, orientiert sich dies gerne an bestehenden erfolgreichen Portals (siehe auch Kapitel 19, »E-Branding«).

Personalisierbarkeit Um diesem Fiasko zu entgehen, nutzt man eine weitere Qualität von datenbankbasierten Websites, die Personalisierbarkeit. Jeder User hat die Möglichkeit, sich ein eigenes Profil anzulegen, um jedes Mal, wenn er auf die Home-

page kommt, Inhalte so angezeigt zu bekommen, wie er sich das vorstellt. Die Auswahl an Optionen ist meist sehr groß. Zunächst geht es um die Inhalte: Welche Art von Nachrichten will ich angezeigt bekommen, welche Genres interessieren mich sonst noch, welcher Wetterbericht ist für mich relevant? Mein Horoskop kann ich mir aus verschiedenen Quellen auswählen, und auch die Services des Portals sind nach Belieben zusammenzustellen. Der nächste Punkt ist die Anordnung eben dieser Informationen auf dem Screen. Der User kann so die Einheiten reduzieren und das für ihn übersichtlichste Layout verwenden. Zu guter Letzt kann man der Site durch Auswahl der Farben und deren Zusammenstellung noch eine sehr persönliche Note geben. Eine so selbst gebastelte Homepage ist natürlich sehr viel mehr dazu geeignet, als Startplattform fürs Internet zu fungieren. Doch man darf sich nicht darüber hinwegtäuschen lassen, dass man so nicht wirklich seine ganz individu-

Portal-Sites

.

.

191

G Abbildung 2 E Yahoo! und My Yahoo!, die Standardsite und eine personalisierte Variante

elle Seite erstellt, sondern aus einem feststehenden Repertoire konfiguriert und eine von x Möglichkeiten verwendet. Außerdem ist für den Betreiber des Portals nichts spannender als die User-Daten, die man beim Auswählen ganz freiwillig preisgibt. Online-Werbung kann so zum Beispiel präziser auf die einzelne personalisierte Site gespielt werden als bei allen anderen Medien. Die Gestaltungsmöglichkeiten einer Site mit Personalisierungsoption sind eher begrenzt und bedürfen langer Planung und Konzeption. Es muss ganz genau festgelegt werden, welche Elemente veränderbar sind und welche nicht, welche Ansprüche verschiedene Gruppen an die Personalisierung haben, inwiefern diese mit dem Datenbankmodell vereinbar sind und wie man den Screen so strukturiert, dass Informationsaufbau und Navigierbarkeit zu jeder

192

Zeit gegeben sind. Man legt so genannte Templates an, die vom kompletten Seitenlayout bis hin zu verschiedenen Kombinationsmöglichkeiten Text/Bild alle Parameter genau festlegen.

E-Commerce-, Knowledge- und Community-Portals Neben den Portals, die sich über Jahre zu solchen gemausert haben, versuchen immer mehr Unternehmen mit ihrem Auftritt, ein Portal zu schaffen, das die gesamte Kompetenz ihres Fachbereichs bündelt und auf der Site abbildet. Super-RTL erschafft das Kinder-Portal, die Deutsche Bank das Finanz-Portal, das Magazin Vivi@n will das Frauen-Portal werden und so weiter.

Strategien im WWW

.

.

F G Abbildung 3 Zwei Portale zum Thema IT und Internet-Business. Schon das Design zeigt, dass es hier in erster Linie um Informationsaustausch geht.

Dabei nehmen einige Firmen durchaus in Kauf, dass Inhalte nicht durch das eigene Unternehmen oder Kooperationspartner erbracht werden können, und verlinken ganz bewusst auf die Konkurrenz in der Hoffnung, dass sie sich dadurch selbst als Vermittler noch stärker etablieren können. Es gibt einige Elemente, die diese Portals auszeichnen. Sie widmen sich wie gesagt einer speziellen Zielgruppe, Thematik oder einem Service und versuchen ihre Kompetenz auf diesem Gebiet überzeugend einzubringen. Außerdem sind sie sehr interaktionsorientiert und am Feedback der User interessiert. Das zeigen Foren, unterschiedliche Kontaktmöglichkeiten, Mailing-Listen, Newsletter, Magazinbereiche und freie E-Mail-Adressen. Da die Zielgruppen

und das Anliegen bei diesen Portals schon etwas spezifischer sind, ist das Design und vor allem das Branding deutlich klarer als bei obigen Portalen. Entfernt sich das Ziel des Portals weiter von den Netzkernthemen wie Technologie oder Informationsbeschaffung und wird offensichtlich kommerzieller, zeigt sich das auch in der Gestaltung. Man beginnt mit Farben und Bildern zu arbeiten, wird in der User-Ansprache deutlich emotionaler und versucht auch einen ganz klaren Fokus zu setzen, denn hier wird der User klarer gelenkt und in eine bestimmte Richtung geleitet, nämlich zum Kaufabschluss. Die Absender werden deutlicher, man versucht sich in Layout und Ansprache zu differenzieren. Inhalte werden inszeniert.

Portal-Sites

.

.

193

F G Abbildung 4 Zwei E-Commerce-Portale, die auf Grund ihrer Zielsetzung deutlich attraktiver gestaltet sind – trotz Verwendung von Standards

Portals, das optimale Netzformat? Die Grundidee des Portal-Gedankens ist durchaus überzeugend. Zielgruppen genau zu definieren und komplett abzuschöpfen, das ist sehr verlockend und Grundlage komplexer Business-Modelle Business-Modelle. Viele Portale können dieser Herausforderung aber oft nicht gerecht werden. Die technischen Ansprüche sind sehr hoch, die Inhalte müssen permanent gepflegt und auf neuestem Stand gehalten werden, die User müssen über alle Medien akquiriert werden. Hohe Initial- und laufende Kosten führen

Unter www.netzpiloten.de bekommt man eine Präsentation relevanter Sites im Netz.

194

schnell zu mangelhaften Kompromissen, und Communities, die nicht von Anfang an gehegt und gepflegt werden, gehen schnell wieder ein. Dazu kommt, dass ein großer Reiz des Netzes das Erforschen und das Surfen ist. Dem Anspruch, alles auf einer Site zu vereinigen, muss man also gar nicht unbedingt nachkommen. Ein Modell ist hier zum Beispiel der Netzpilot, der wie eine Art Linkliste durchs Netz führt und alle möglichen Themen abbildet. Setzt man also die Ansprüche nicht von Anfang an zu hoch, definiert man Portal als etwas kleinere, aber feine Tür zum Internet, so kann man die Grundidee für bestimmte Herausforderungen durchaus als optimal bezeichnen.

Strategien im WWW

.

.

F

Abbildung 5 Die Homepage von WILL; alle erdenklichen Güter sind hier zu erstehen, im WILL-Look natürlich.

Abbildung 6 E Konsequente Durchgestaltung der Site: das WILL-Produkt, das den User glücklich macht!

Willshop.com, die Idee der Zukunft? Eine sehr spannende Geschäftsidee zum Thema E-Commerce-Portale kommt aus Japan. Das Portal selbst als virtuelle Marke einzuführen und die Produkte maßgeschneidert und gebrandet in Kooperation mit den besten Herstellern zu vertreiben, ist der Gedanke von WILL. Die Homepage mit dem bezeichnenden Claim »what WILL be« zeigt eine Vielzahl von Produkten vom Deo über den Computer bis zur Abenteuerreise, die alle mit dem orangen Quadrat von WILL versehen sind. Logo, Website, Produkte, alles passt zusammen und spricht eine Sprache. Die Kooperation mit namhaften Unternehmen wie Toyota, Asahi oder Panasonic garantieren höchste Qualität

und fügen WILL ein in eine Reihe kompetenter Marken. Dazu kommt, dass das Corporate Design von WILL sehr reduziert und ansprechend ist und die Website entsprechend gestaltet wurde. Eine virtuelle Marke, ohne Geschichte und ohne wirkliche Kompetenzen, schafft es über ihr Portal also, ein Lebensgefühl und damit Produkte zu verkaufen. Die Marke und das Portal sind fast alles, was WILL ausmacht, alle Produkte werden zugeliefert und auf WILL umgestaltet. Mittelpunkt ist hier nicht mehr der User, sondern die Produkte selbst. Wenn man sich überlegt, wie wichtig Brands für das Konsumverhalten sind, ist das ein Weg, der sicher bald Nachahmer auch im Westen finden wird.

Portal-Sites

.

.

195

Datenbankbasierte Sites Design versus Content Immer mehr Websites werden mit Hilfe von Datenbanken erstellt. Das bietet viele Vorteile, aber ist es notwendig, dass es jeder sofort sehen kann?

Einfache HTML-Seiten und Serverstrukturen reichen für die Anforderungen vieler Sites längst nicht mehr aus. Webpages müssen innerhalb kürzester Zeit und mit möglichst wenig Aufwand updated, erweitert oder verbessert werden. Dazu kommt, dass diese Pflege ohne großes HTML-Know-how vor sich gehen soll und man nicht permanent den HTML-Code verändern muss. Die Lösung dafür sind datenbankbasierte Websites. Das Layout, die Inhalte, Texte, Bilder und Strukturen sind in einer Datenbank abgelegt, die mit der Site verbunden ist. Diese speist Teilbereiche oder die komplette Site, und sobald ein Eintrag oder ein Objekt in der Datenbank geändert wird, ändert es sich automatisch auch auf der Website. Die laufende Pflege und die Updates einer Site werden dadurch sehr günstig, da man mit wenig Mitarbeitern, die zudem nicht unbedingt auf HTML-Codierung spezialisiert sein müssen, äußerst effektiv arbeiten kann. Die Initialkosten, das Planen und Aufsetzen des Datenbankmodells sind hingegen deutlich teurer als eine ganz normale Website. Doch auch hier gibt es konfigurierbare Fertiglösungen.

196

Wann lohnen sich datenbankbasierte Websites? Die Entscheidung, ob man mit Datenbank und Redaktionssystem arbeiten möchte, empfiehlt sich ganz am Anfang, nach den ersten strategischen Gesprächen bei der Erstellung einer Website. Datenbanken sollten in Betracht gezogen werden, wenn 1. bereits große Produkt-, Event- oder Personendatenbanken vorliegen, die in den Auftritt integriert werden sollen. Die Experten des Unternehmens und der Agentur müssen sich dazu frühzeitig zusammensetzen, um die Datenmodelle und Datenbanken sowie deren Kompatibilität abzugleichen. 2. initial und regelmäßig große Mengen an Content eingepflegt werden müssen oder die Site ständig aktualisiert werden muss. Oft hat es Sinn, für diese Aufgaben ein Team beim Kunden zusammenzustellen, da dort die Inhalte sehr viel schneller abgestimmt und zugeordnet werden können. Dazu muss natürlich mit einfachsten Mitteln auf den Content zugegriffen werden, also am besten mit einem Redaktionstool Redaktionstool.

Strategien im WWW

.

.

3. der Auftritt eines Unternehmens auf viele Bereiche oder internationale Niederlassungen des Unternehmens übertragen werden soll, die Struktur des Auftritts aber gleich bleibt. 4. der Auftritt nach Fertigstellung komplett ohne Agentur betreut werden soll. 5. neue Auftritte nach ähnlichem Muster schnell und kostengünstig realisiert werden sollen. 6. komplexe Such- und Kategorisierungsmodelle aufgesetzt werden. 7. man einen E-Commerce-Auftritt plant (siehe auch das Kapitel »E-Commerce«).

Unterschiede in Konzeption und Gestaltung Die Entscheidung für eine Datenbank oder ein Redaktionssystem bedeutet allerdings auch eine vollkommen andere Herangehensweise als bei herkömmlichen Websites, sowohl was die Technik anbelangt, aber auch bei Konzeption und Gestaltung. Auf der technischen Seite müssen zunächst alle Anforderungen definiert und darauf basierend die am besten passende Datenbank ausgewählt werden. Darauf folgt eine Festlegung des Datenmodells, aller nötigen Parameter und Einträge. Im Konzept wird festgelegt, welche Navigationsebenen editierbar sind und aus der Datenbank gepflegt werden und welche feststehen und nur selten geändert werden. Es bietet sich bei normalen Websites an, die Hauptnavigation nicht editierbar zu gestalten, da sie aus Usability-Gründen nicht unbegrenzt flexibel sein sollte (nicht mehr als sechs bis acht Hauptnavigationspunkte), außerdem sollte die

grobe Einteilung der Site doch so überdacht sein, dass man nicht nach Belieben immer wieder alles hin und her schiebt. Bei gestalteten Sites ist es oft so, dass die oberste Navigationsebene in »gebranntem« Text angelegt wird, der zwar auch in der Datenbank liegt, aber nur mit Hilfe von Designern verändert werden kann. Neben der Navigation wird auch festgelegt, welche Module es gibt, wie zum Beispiel Produktdarstellung, E-Mail-Formulare oder Adresslisten, die genau in ihren Funktionalitäten beschrieben werden. Für Inhalte werden Längen- und Tonalitätsvorgaben gemacht, damit die Site am Schluss trotz vieler Autoren eine Sprache spricht. Auf dieses Konzept hin entwickeln die Gestalter einen Rahmen und so genannte Templates plates, das sind neutrale, partielle Layouts von Seiten und Benutzerführung, die später bei Aufruf der Seiten aus der Datenbank geholt und im Browser zusammengesetzt werden. Man definiert also, in welcher Kombination Text und Bild auftauchen können, wie groß Bilder sein müssen, damit sie jederzeit ausgetauscht werden können, wie Listen, Formulare etc. aussehen und wie diese Templates miteinander kombiniert werden dürfen. Das bedeutet auch, dass der große Rahmen um den Content im Grundlayout gestalterisch eher neutral gehalten werden muss, um dann auf jeden beliebigen Content angepasst zu werden oder, wie bei internationalen Seiten mit einzelnen Ländersites, eine »Shell« für alle Contents zu bilden. Die Benutzerführung muss dabei alle möglichen Navigationsmodelle und Hierarchien antizipierend festlegen, da später keine Eingriffe mehr möglich sind. Jedes Element der Site (Framesets, Pages, Templates, Images, Text, Binärdaten) wird einzeln in der Datenbank ab-

Datenbankbasierte Sites

.

.

197

F

Abbildung 1 Ein typischer datenbankbasierter Auftritt, rein aus Systemelementen gestaltet und vom Interface her kaum nutzbar

Abbildung 2 E Selbst bei diesem sehr emotionalen Thema hat man nicht versucht, die Benutzerführung visuell von der Datenbank zu lösen.

gelegt und muss auch als solches veränderbar sein, ohne aus dem Kontext zu fallen. Vor- und Nachteile Die Entwicklungszeit für ein solches Projekt ist bedeutend höher als die für eine HTML-basierte Site, dafür lassen sich später unvergleichbar schneller komplexe Seiten erstellen und mit leicht zu editierendem Content füllen. Die Gestaltung einer solchen Site bedarf großer Erfahrung. Einerseits um ein solch komplexes System zu entwickeln, andererseits aber auch, um Templates so zu entwerfen, dass unterschiedli-

198

che Seiten, die darauf zugreifen, auch unterschiedlich aussehen und der User nur bedingt merkt, dass er sich auf einer datenbankbasierten Website befindet. Die meisten Sites in dieser Richtung bemühen sich dabei nicht sonderlich, auch aus einem datenbankbasierten Auftritt ein Erlebnis für den Nutzer zu schaffen und sich aus der Masse hervorzuheben. Man erkennt schnell an Standardgrafiken und Benutzerführungen, die den Inhalten nicht immer ganz entsprechen, dass mit wenig Aufwand Inhalte auf die Datenbank herunter gebrochen und nicht, was der

Strategien im WWW

.

.

F

Abbildung 3 Der Auftritt für die Messe Frankfurt basiert komplett auf einer Informix-Datenbank, in der jedes Element einzeln abgelegt ist.

Abbildung 4 E Innerhalb kürzester Zeit lassen sich so Messen überarbeiten oder neu ins Netz stellen.

Datenbankbasierte Sites

.

.

199

Abbildung 5 E Beispiel für ein Redaktionstool mittlerer Größe, das an jede Website angepasst werden kann

bessere Weg wäre, die Datenbank and die Inhalte angepasst wurden. Schwierig ist es auch, von vornherein alle Eventualitäten abzuschätzen und auch komplexe Datenmodelle einwandfrei zum Laufen zu bringen. Der Zeitraum der technischen Umsetzung ist bedeutend länger und »aufregender« als gewöhnlich. Als Gestalter ist man bei der Arbeit sehr eingeschränkt, umso schöner ist es, wenn es einem gelingt, aus einer komplexen Datenbank oder einem langweiligen Redaktionssystem, mit dem sich Inhalte kaum gestalten lassen, eine Site zu entwerfen, die nichts mit dem gängigen Datenbankdesign zu tun hat. Allerdings ist man nie davor gefeit, dass der Kunde nach Abnahme der Site damit macht, was er will, und grafische Vorgaben der Designer einfach über den Haufen wirft. Es lohnt sich also kurz vor der Übergabe der Site an den Kunden, noch ein paar Screenshots zu machen, um die Site in voller Pracht in Erinnerung

200

behalten zu können. Mittlerweile werden aber auch auf Unternehmensseite neben Redakteuren und Journalisten auch Designer im OnlineTeam beschäftigt, um die Site qualitativ hochwertig zu halten.

Redaktionssysteme In ihrer Komplexität reichen Redaktionstools von ganz einfachen Texteingabeseiten bis hin zu komplexen Datenbanken, die dem Redakteur nicht nur erlauben, Bilder auszutauschen, sondern auch die Navigation zu verändern oder komplette Bereiche hinzuzufügen oder wegzunehmen. Waren früher solche Systeme meist handgestrickt, so bedient man sich heute hauptsächlich schlüsselfertiger Lösungen, die innerhalb kürzester Zeit an die Erfordernisse der Site angepasst werden. Wichtig bei solchen Tools ist, dass sie sehr einfach zu bedienen sind und

Strategien im WWW

.

.

G

Abbildung 6 Die Barmer-Site in normaler Darstellung und darunter mit sichtbar gemachten Frames und Templates

am sinnvollsten auch über den Browser funktionieren, damit kein Sprung im Workflow entsteht. Die Barmer-Site wurde beispielsweise mit einem Java-basierten Tool erstellt und damit regelmäßig aktualisiert. Design, Text und Struktur sind dabei voneinander unabhängig. Die Primärnavigation Service, Gesundheit und Die Barmer sind als feststehend angelegt, die Themen dieser Bereiche können allerdings jederzeit erweitert oder verringert werden. Dazu wurde die Sekundärnavigation bewusst in Systemtext angelegt, sodass die Online-Redaktion der Barmer jederzeit einen Punkt hinzufügen oder wegnehmen kann. Allerdings sind die Sekundärthemen jeweils mit einem großen gestalteten Header im Content-Bereich gekennzeichnet, wie zum Beispiel »Reiserecht« und »Patientenrecht«. Kommt also ein neuer Be-

griff hinzu, muss von einem Gestalter auch eine neue Bereichskennung erstellt werden. Die Tertiärnavigation jedoch ist komplett frei erweiterbar, die Themen sind hier je nach Bereich mit einheitlichen Icons gekennzeichnet, wie zum Beispiel einer Waage oder der Büste der Nofretete. Wichtiger bei der Gestaltung der Barmer ist aber fast noch der Hintergrund. Um die ganz klare Aufteilung in Frames und damit den technischen Ansatz etwas in den Hintergrund treten zu lassen, wurde zum einen mit farbigen Hintergründen gearbeitet, die alle Frames zusammenhalten, zum anderen lenken runde und spitze Grafiken und Formen von den harten Linien eines Frame-Konzepts ab und geben der Site einen sehr warmen und freundlichen Look.

Datenbankbasierte Sites

.

.

201

Microdevices Kleiner, schneller, besser ... Die vielen Vorteile des Netzes werden dadurch geschmälert, dass man dazu immer einen Rechner, einen Schreibtisch und eine Telefonsteckdose benötigt. Lösen die Microdevices nun den DesktopComputer ab?

Schon mit der Erfindung des Walkman von Sony wurde klar, dass Mobilität bei elektronischen Geräten ein wichtiges Kriterium sein wird. Selbst wer kein Handy sein Eigen nennt, hat meistens Zuhause ein schnurloses Telefon, weil es Situationen gibt, in denen man beim Telefonieren eben nicht neben dem Nachtkästchen am Telefonanschluss knien will. Das Gleiche gilt für Computer. Laptops liegen hoch im Kurs, Desktop-Rechner sind eine Alternative, aber kein zwingendes Muss mehr. Hier knüpfen die so genannten Microdevices an, also alle elektronischen Geräte, die man leicht in einer Hand halten kann. Sie verfügen über alle notwendigen Funktionalitäten für die Aufgaben, auf die sie ausgerichtet sind, und werden in absehbarer Zukunft sicher immer weiter miteinander verschmelzen. Deshalb kann man auch davon ausgehen, dass die großen Desktop-Rechner immer kleiner werden, irgendwann ganz verschwinden und man sich mit einigen wenigen Kompaktgeräten beschäftigen wird.

202

Die kleinen Wunderwaffen Es gibt mittlerweile eine Vielzahl von Geräten, die sich immer weiter verbreiten, nur um ganz schnell von noch kleineren und besseren abgelöst werden. Einige davon sind: E PDAs (Personal Digital Assistant), Handhelds, Organizer E Taschenrechner, Datenbanksysteme E Mobiltelefone E MP3-Player, Memory-Stick-Player E Gameboys, kleine Computer-Games E Digitale Foto- und Videokameras E Diktiergeräte E GPS-Geräte (Global Positioning System) Diese Liste erweitert sich ständig, besonders spannend wird es natürlich, wenn diese Geräte anfangen, untereinander zu kommunizieren. Natürlich sind das zum großen Teil noch Spielereien, und man kann sicher auch sehr gut ohne leben. Die Entwicklung geht allerdings ganz klar in diese Richtung, und man sollte aufmerksam verfolgen, welche neuen Kommunikationskanäle sich dort auftun und wie man sie für seine Belange nutzen könnte.

Strategien im WWW

..

F

Abbildung 1 Die schärfsten Konkurrenten auf dem Markt: die Handhelds Palm VII und Visor

H

Abbildung 2 Unterschiedlichste Geräte vom GPS-System bis hin zum Memory-Stick Walkman, und jedes passt in eine Hand.

Microdevices

..

203

G

Abbildung 3 WAP-Display eines schwedischen Anbieters: Die ersten Versuche , auf 2 x 2 cm Informationen zu gestalten. G

Abbildung 4 Die Financial Times Deutschland bietet von News aufs Handy bis zum kompletten Download aufs E-Book fast alle Möglichkeiten.

WAP, das neue HTML?

204

Wireless Application Protocol ist ein neu entwickeltes Standardprotokoll speziell zur Anwendung bei Mobiltelefonen und anderen Microdevices. Es beschreibt die Kommunikation mobiler Endgeräte untereinander sowie zu fest installierten Endgeräten. Das soll unter anderem den Internetzugang von mobilen Devices, die mit einem Mikrobrowser ausgestattet sind, vereinfachen. Zu den Mitgliedern des WAP-Konsortiums, das den Standard beschreibt und erweitert, zählen Firmen wie Nokia, Ericsson, Sony, Philips und IBM. In der Gestaltung ist man noch sehr eingeschränkt, WAP bietet aber die Möglichkeit, Informationen sekundenschnell zu vermitteln und darzustellen. Die Darstellung auf kleinstem Raum mit keiner oder wenig Farben be-

deutet natürlich neue Herausforderungen für Informationsdesigner. Übersichtliche Darstellung, genügend Informationstiefe und die Kennzeichnung des Absenders sind nur einige Aufgaben, die in Zusammenhang mit den winzigen Displays zu lösen sind.

Rocketbook Unter www.rocketbook.com kann man nicht nur das Gerät erstehen, sondern sich auch alle erhältlichen Titel downloaden.

Web.mit.edu Unter http://web.mit.edu findet man so ziemlich jede Vision von technischen Entwicklungen, die man sich nur vorstellen kann.

Digitale Literatur, das Ende der Bücher? Das Rocket E-Book ist ein tragbares Display, das zum Lesen von Büchern entwickelt wurde. Das Buch mit einer Größe von ca. 13 x 18cm lässt sich jederzeit mit neuen Titeln von der Rocketbook-Site oder anderen Buchhändlern, wie zum Beispiel Barnes and Noble, im Netz

Strategien im WWW

..

F

Abbildung 5 Das Rocket E-Book, vielleicht der Nachfolger des gedruckten Buches

bespielen. Das E-Book fasst bis zu zehn Bücher, also 3200 Seiten, und man hat eine Auswahl von momentan 4500 Titeln bei Rocketbook selbst. Neben dem Vorteil, dass man sich Neuerscheinungen sofort nach Hause holen kann, bietet das Gerät natürlich alle Vorteile, die elektronische Medien gegenüber Papier haben. Man kann Texte markieren und indizieren, Bookmarks anlegen und Notizen hinzufügen, ein integriertes Wörterbuch nutzen und auf verschiedene Bücher zugreifen, die alle auf dem Gerät geladen sind. Allerdings wird das E-Book normale Bücher sicher nicht verdrängen. Wenn man das E-Book erst einmal benutzt hat, wird klar, wie wichtig der haptische Effekt beim Lesen ist, ein Buch aufzuschlagen und durchzublättern, Papier und Druckart sagen manchmal mehr aus als das komplette Inhaltsverzeichnis. Ganz zu schweigen von der Lesefreundlichkeit haarscharfer schwarzer Schrift auf weißem Papier. Aber auch hier versucht E-Book Nachteile auszugleichen. Man kann Schriftgröße und -art jederzeit anpassen, das Format ist frei wählbar zwischen Hoch- und Querformat, und das Dis-

play hat eine Auflösung von 106 dpi. Wenn man also bedenkt, dass solche Entwicklungen erst in der Anfangsphase sind, so könnten elektronische Bücher durchaus Potenzial haben, und sei es nur, um technische Grundlagen für neue Microdevices zu legen.

Wearable Computers Die logische Konsequenz aus der Entwicklung der Microdevices ist eigentlich ganz klar: tragbare Computer, die so in unser Leben integriert sind, dass wir sie morgens ganz selbstverständlich anziehen wie ein T-Shirt und sie permanent am Körper tragen. Ziel ist es, die Minicomputer so auszurüsten, dass sie nur noch durch körpereigene Energie versorgt werden, also vollkommen unabhängig von Stromnetz und Batterie funktionieren. IBM entwikkelte zum Beispiel einen Gürtel mit dem man im Netz surfen sowie Texte diktieren und Dokumente editieren kann. Wichtig ist es dabei, immer den funktionalen Aspekt im Auge zu behalten, aber auch den sozialen Kontext, ob und wie man solche Geräte tragen kann.

Microdevices

..

205

Anhang

208 Tipps und Tricks 214 Glossar 224 Index

206

Anhang

.

.

Anhang

207

Tipps und Tricks »FAQs« Gesammelte Erfahrungen zum Planen und Gestalten von Websites. Schnell und übersichtlich.

1. Warum soll ich ins Internet? Die erste Frage, die man sich stellen sollte, ist »Warum gehe ich ins Netz?«. Um präsent zu sein? Um viel Geld zu verdienen? Um neue Kunden zu gewinnen? Die nächste Frage ist »Mit welchem Produkt oder Angebot gehe ins Netz?« Hier bietet sich nur an, was wirklich einen Mehrwert bietet, sei es an Service, Information oder Unterhaltung. »Für wen gehe ich ins Netz?«. Zielgruppen müssen identifiziert und definiert werden. »Wie gehe ich ins Netz?« Nur eine Microsite? Ein Flash-Film? E-Commerce? »Mit wem gehe ich ins Netz?« Macht man es ganz alleine, holt man sich eine Full-Service-Agentur oder einen externen Berater? Letzterer sollte wohl bei jeder Art von Online-Aktivitäten eingebunden werden. Und zuletzt sollte man sich fragen: »Muss es wirklich das Internet sein?« Bei den meisten Sites im Netz wäre eine Anzeige, ein Spot, eine Party oder einfach Stillschweigen optimaler gewesen.

208

2. Sind meine Zielgruppen denn überhaupt schon da? Der User ist das wertvollste Gut im Netz. Recherchieren Sie bei allen Suchmaschinen mit Schlagworten, die ihr Angebot und die Zielgruppe umschreiben. Dann wissen Sie zum einen, was es schon gibt, zum anderen sehen Sie, ob die Zielgruppe überhaupt schon im Netz ist. 3. Und was machen die anderen? Wenn Sie die Seiten der Wettbewerber gefunden haben, machen Sie einen Benchmark in Form von Screenshots und analysieren Sie Inhalt, Aufbau, Design, Feedbackfunktionen und so weiter. Aus Fehlern lernt man am meisten! 4. Kann ich mich denn auf irgendetwas verlassen? Fordern Sie Studien an, die sich mit Ihrem Thema beschäftigen. Die GfK-Gruppe bietet Studien mit Informationen aller Art zur Nutzung der Neuen Medien an, online zu finden unter www.gfk.de. Von hervorragender Qualität sind auch die Studien von Forrester unter www.forrester.com. Und aktuelle Zahlen finden sich international

Anhang

..

unter www.statmarket.com und für Deutschland bei www.webhits.de. 5. Soll ich bei meiner Website Frames verwenden? Frames eignen sich grundsätzlich immer dann, wenn man dem Besucher das wiederholte Laden gleicher Inhalte ersparen will. So können beispielsweise Navigationselemente oder Logos hervorragend in Frames untergebracht werden; der Nutzer muss dann jeweils nur die neuen Inhalte laden. Rein gestalterisch haben Frames den Vorteil, dass sie einen Rahmen für das Angebot bilden, der sich während des Ladens der Inhalte nicht verändert. Der Besucher wird so auch optisch stärker an die Site gebunden. Immer dann, wenn ein Redaktionssystem oder Content Management System Einsatz findet, wird die Gestaltung mittels Frames zum Problem, da ja mehrere HTML-Seiten von diesem System gleichzeitig angesteuert werden müssen. Ein weiterer Nachteil ist die eingeschränkte Bookmark-Fähigkeit einer Framestruktur: In der Regel wird nämlich nur das Hauptdokument, also das Frameset in die Bookmarks aufgenommen und die eigentlich gewählte Unterseite muß jedes Mal erneut angewählt werden. 6. Wie kann ich Hintergrundmusik auf einer Site einsetzen? Warum sollten Sie? Hintergrundmusik bewirkt zusätzliche Ladezeiten, ist extrem von Ihrem Geschmack abhängig und bewirkt bei vielen Nutzern ein genervtes Wegklicken Ihrer Site. Wenn wir Sie wirklich nicht von der Unnötigkeit von Musik überzeugen konnten, dann geben Sie wenigstens dem Nutzer einen dicken »Stop it!«-Button, damit

er sie abschalten kann. Musik kann übrigens über Real-Audio, Flash, Quicktime und andere Plug-Ins auf die Site gebracht werden oder per WAV und Midi-Files in den HTML-Code gepackt werden. Eine elegante Lösung ist auch das Einbinden mithilfe von Java. Aber bitte vergessen Sie nicht, sich vorher mit der GEMA in Verbindung zu setzen, sonst kann es böse Überraschungen geben! Zu finden unter http://www.gema.de. 7. Wie kann die Ladezeit einer Seite verringert werden? Generell gilt: Je mehr auf einer Seite »passiert«, desto länger sind die Ladezeiten. Am schnellsten lädt sich Systemtext, Tabellen und Frames brauchen etwas länger und am langsamsten sind Bilder, Töne, Filme oder Applets. Durch den gezielten Einsatz farbreduzierter, knapp zugeschnittener Bilder und eine gut strukturierte Seite mit möglichst wenig verschachtelten Tabellen können Sie dem Nutzer lange Ladezeiten ersparen. Als Faustregel gilt immer noch: Wenn alle Elemente einer Seite zusammen (also das HTML-Dokument selbst und alle eingesetzten Elemente) weniger als 20 Kilobyte haben, lädt sich diese recht schnell. 8. Wie finde ich heraus, ob eine Farbe »websafe« ist? Alle Farben, deren Hexadezimalwert aus 3 gleichen Paaren (also z.B. »#3300FF«) besteht, sind websafe und können unbedenklich verwendet werden. In allen modernen Grafikprogrammen können Sie im Farbwähler mittlerweile auch das Hexadezimalsystem einstellen. Eine Übersicht finden Sie zum Beispiel unter http://www. ideenreich.com/dr-col.shtml.

Tipps und Tricks

..

209

9. Was ist besser, GIF oder JPEG? Das hängt vom Verwendungszweck ab, denn dargestellt werden können beide überall. GIFs eignen sich vor allem für Bilder, die aus Linien, einfarbigen Flächen und wenigen Farben bestehen (also technische Zeichnungen, Diagramme, Texte oder Landkarten). Verläufe und photorealistische Motive sind hingegen ungeeignet. JPEGs sind dann sinnvoll, wenn ein Motiv photorealistisch sein soll oder viele Farbverläufe beinhaltet. Gerade Linien, wie Buchstaben, die sich in einem JPEG befinden, werden hingegen schlecht wiedergegeben. 10. Wie reduziere ich JPEGs JPEGs?? Normalerweise reduziert man JPEGs, indem man den Regler von High Quality immer weiter nach unten zieht und schmerzvoll miterlebt, wie die Darstellung immer schlechter wird. Geht man den umgekehrten Weg, also von ganz schlecht nach gut, wird man am Ende wahrscheinlich mit einer kleineren Dateigrösse zufrieden sein. 11. Wozu brauche ich Rollover-Bilder? Immer dann, wenn Sie zusätzliche Informationen oder eine Schein-Interaktivität brauchen, um Inhalte zu vermitteln, ist der Einsatz von Rollovers sinnvoll. Ein Navigationssystem kann recht ansprechend gestaltet werden, wenn Zusatzinformationen oder Erklärungen nur je Element bei einem Rollover zu sehen sind. Auch Karten und technische Zeichnungen können so mit Erklärungen für einzelne Elemente versehen werden, ohne das Bild mit Informationen zu überfrachten. 12. Was ist das Wichtigste an einem Navigationssystem? Wir bevorzugen den Begriff »Benutzerführung«, denn er drückt sehr viel besser

210

aus, worum es hier geht. Bei der Planung und Gestaltung eines solchen Systems gilt es grundsätzlich, zwischen größtmöglicher Autonomie des Nutzers einerseits und seiner Führung andererseits abzuwägen. Die besten Benutzerführungs-Systeme sind diejenigen, die nie statisch sind, sondern immer auf die Situation einer gerade aufgerufenen Seite reagieren können. Lassen Sie den Nutzer an keiner einzigen Stelle alleine. Nie. Nirgends. Geben Sie ihm immer (auch am Ende von langen Seiten) die Möglichkeit, ganz bequem auf einen »Weiter«-Button zu klicken. Selbstverständlich heißt dieser selten so, da wir es ja nicht mit einem linearen Medium zu tun haben. Versetzen Sie sich in die Lage dessen, der die besagte Seite aufgerufen hat und überlegen Sie sich, was der nächste Schritt wäre. Bieten Sie dann genau diesen Link am Ende der Seite an, damit faule Nutzer sich von Ihnen durch die Struktur lenken lassen können. 13. Was muss ich bei der Gestaltung von Texten beachten? In reinem HTML sind nur links- und rechtsbündige und zentrierte Ausrichtungen möglich. Silbentrennung, Spationierung oder unterschiedliche Zeilenabstände sind leider auch nicht möglich. Durch den Einsatz von Tabellen können Sie aber dafür sorgen, dass die Zeilenlänge nicht unlesbar wird und die Inhalte somit besser erfasst werden können. Außerdem sollten Sie lange Texte unbedingt auflockern, indem Sie zum Beispiel Bilder oder Diagramme im Text selbst platzieren und diesen um das Element herumlaufen lassen. Generell sollten Texte am Bildschirm immer so kurz als

Anhang

..

14.

15.

16.

17.

möglich sein, da die Lesbarkeit deutlich geringer ist als auf Papier. Kann ich unsere Hausschrift einsetzen? Das geht leider nur dann, wenn Ihre Hausschrift eine Systemschriftart, z.B. Arial ist (Lassen Sie uns darüber bitte noch einmal reden!). Von der Einbindung der meisten Schriftarten ist unbedingt abzuraten, da diese entweder sowieso nicht beim Nutzer vorhanden sind oder aber nicht für die Darstellung am Bildschirm optimiert sind und somit eine schlechte Lesbarkeit haben. Wollen Sie wirklich Ihre eigene Schrift verwenden, so müssen Sie diese als Bild einsetzen und längere Ladezeiten in Kauf nehmen. Ich habe mir ein Bild aus dem Netz geklaut und ziemlich viel daran geändert. Darf ich das? Leider greifen auch bei Veränderungen im Motiv immer noch die Bildrechte. Sofern nicht ausdrücklich vom Besitzer darauf hingewiesen wurde, dass ein Motiv frei von Rechten ist, dürfen Sie es nicht verwenden. Welcher HTML-Editor ist der Beste? Arbeiten Sie im Team, mit nur einem einzigen Editor für alle Beteiligten und finden Microsoft Word gut? Dann ist für Sie wahrscheinlich Frontpage geeignet. Fummeln Sie gerne selbst im HTML-Code herum, weil Sie den Programmen misstrauen? Dann nehmen Sie GoLive. Legen Sie Wert auf eine intuitive Benutzerführung des Programms und wollen trotzdem einen ordentlichen HTML-Code erzeugen? Haben Sie schon Dreamweaver ausprobiert? Soll ich meine Site mehrsprachig anlegen? Das hängt in erster Linie natürlich von der Zielgruppe Ihrer Site ab. Englisch hat sich

als Standard im Netz aber durchgesetzt. Deshalb bietet es sich an, seine Seiten in einer notfalls abgespeckten Version auch in English anzulegen. Es ist erstaunlich, aus welchen Ecken der Welt sich User auf die Site verirren und nicht selten sind es eben potentielle Kunden oder Mitarbeiter. Für den, der nicht so gut Englisch spricht und der trotzdem die weite Welt des Web nutzen will, gibt es wiederum die Möglichkeit, sich Seiten übersetzen zu lassen unter http://babel.altavista.com. Die Übersetzung führt allerdings oft eher zur Erheiterung als zu tieferem Verständnis und auß erdem wird nur der Systemtext übersetzt. Die bessere Übersetzung einzelner Phrasen und Wörter in Englisch und Deutsch bietet http://dict.leo.org/. 18. Kann ich Stadtpläne einbinden? Für Pläne gelten natürlich die gleichen Urheberrechte wie für Bilder und Musik. Also auch hier sehr vorsichtig sein und das Kartenmaterial kaufen. Oder aber kostenlos zu http://www.stadtplandienst.de verlinken. Das funktioniert auch, ist bei grossen, professionellen Sites aber natürlich keine endgültige Lösung. 19. Was ist hip im Netz? Um zu sehen, was im Netz gerade besonders angesagt ist, gibt es auch hier Hitparaden, die sich an den Suchbegriffen der Searchengines festmachen. Die üblichen Verdächtigen wie »Sex« und »Hardcore« werden dabei mittlerweile meistens ausgelassen, aber Sites wie Altavista bieten Hitlists oder auch Einblicke in die aktuellen Suchanfragen von momentanen Usern. Das macht zum einen Spass, zum anderen bekommt man einen ganz guten Einblick, welche Themen im Netz gerade aktuell

Tipps und Tricks

..

211

sind. Suchbegriffe nach Branchen aufgelistet finden sich unter http://www.kso.co.uk /de/svc/se009.html. 20. Wo kommen denn die ganzen Cliparts her? Eigentlich sollten wir Ihnen nicht verraten, wie man an diese blinkenden Herzen, grinsenden Smileys und sich drehenden Spiralen kommt. Sie sind nicht sonderlich originell und zerstören den Charakter jeder Site. Aber Sie würden es ja doch rausfinden, also können Sie gleich zu http://www.clipart. com gehen! 21. Was mache ich, wenn der Hintergrund zu lange lädt? Auch wenn es nicht sein sollte, kann es vorkommen, dass man Hintergrundbilder etwas grösser anlegen muss. Es empfiehlt sich, die Hintergrundfarbe der Seite in einem Ton anzulegen, der dem Bild recht nahe kommt. So ist der visuelle Bruch vor und nach dem Laden nicht so gross. Bei dunklem Hintergrundbild sollte die Seite sowieso mit dunkler Backgroundcolor angelegt werden, damit man die helle Schrift darauf schon lesen kann, bevor das Bild geladen ist. 22. Nehme ich eine Agentur, oder mache ich es lieber selbst? Diese Frage stellt sich oft zu Beginn des Vorhabens, in die Neuen Medien zu gehen. Je weiter sich das Internet entwickelt, umso schwieriger wird es allerdings, einen Auftritt selbst zu konzipieren und umzusetzen. Obwohl es mittlerweile Software für fast jede Art von Sitekonzept gibt, also fertige Shoppinglösungen, Redaktionssysteme und so weiter, sollte man sich auch bei der Entscheidung für diesen Ansatz zunächst professionell beraten lassen. Erfahrungsgemäß bedeutet die Einführung der Neuen

212

Medien in ein Unternehmen eine so große Umstellung, dass man froh sein kann, wenn man sich nur mit den Inhalten und den Umstrukturierungen befassen muss und für den Part der Siteentwicklung eine Agentur hat. Ein Workshop, den viele Agenturen anbieten, kann bei dieser Entscheidung aber helfen. 23. Und wie komme ich an eine gute Agentur? Die Frage ist berechtigt, denn Agenturen gibt es bei uns ja wie Sand am Meer. Kaum jemand, der sich nicht Internet auf die Fahnen schreibt und besonders kostengünstig Rundumsorglospakete anbietet. Über den Deutschen Multimedia Verband kann man sich zunächst einmal die Namen von Agenturen besorgen. Die Agentur kann in der Nähe liegen, muss es aber nicht zwangsläufig, da sehr viele Prozesse über das Netz abgewickelt werden. Zusätzlich sollte man sich aber auch im Netz umsehen und versuchen herauszubekommen, wer die Sites gemacht hat, die man gut findet oder die dem eigenen Unternehmen auch gut stehen würden. Hat man einige Adresse herausgefunden, sollte man sich unbedingt auf der Site der Agentur umsehen, um herauszufinden, was sonst noch im Portfolio verborgen ist. Dabei auch die entsprechenden Sites oder Case Studies ansehen, denn für Daimler Chrysler hat angeblich jeder schon mal gearbeitet. Und dann sollte man sich die Agentur einmal einladen und mit den Projektverantwortlichen sprechen, denn je besser man sich persönlich versteht, desto mehr Vertrauen kann entstehen und desto besser wird das Produkt. Und außerdem soll das Ganze ja auch Spaß machen!

Anhang

..

Tipps und Tricks

..

213

Glossar Das WWW von A bis Z Ein Überblick über die wichtigsten Begriffe des Netzes.

A Access Provider Ein kommerzielles oder privates Unternehmen, das Zugänge zum Internet oder Teilbereichen davon, wie zum Beispiel E-Mail, anbietet. Erfahrungsgemäß wechselt man den Provider gerne einmal, wenn man wieder Ärger mit ihm hatte. Account Loggt man sich bei einem Provider ein oder will man seine E-Mails abfragen, wird meistens der Account, also das »Konto« abgefragt. Über den Account, der immer mit Passwort ausgegeben wird, wird dann auch die Rechnung gestellt. Ad Click Die Einheit zur Messung der Anzahl von Klicks auf ein Banner im Netz. Ad Click Rate Die Einheit zur Messung der Anzahl der User einer Seite, die dort auf ein Banner geklickt haben. Interessant ist dabei das Verhältnis von

214

Ad Clicks zu Page Views, also der Anzahl von Seitenaufrufen. Animated GIF Ein Dateiformat, das aus mehreren Einzelbildern in festgelegter Reihenfolge besteht. Wird das Bild geladen, entsteht der Eindruck einer mehr oder weniger fließenden Animation. Gerne verwendet bei Bannern. Attachment Eine Anlage, die Teil einer E-Mail ist. Ein Attachment kann aus fast jedem Dateityp bestehen und ist meistens zu gross … Avatar Der Begriff kommt eigentlich aus dem Hinduismus und bedeutet die Verkörperung Gottes auf Erden. Heute ist es die Nachbildung von Personen, gerne in schlechten dreidimensionalen Renderings, im Rahmen von Websites oder anderen digitalen Applikationen. Über den Sinn von Avataren könnte man stundenlang diskutieren, wobei drallbusige Blondinen si-

Anhang

..

cher mehr Sinn in einem Computerspiel machen als auf einer E-Finance-Site.

B Backbone Gerne zum Angeben verwendet. »Ich hänge direkt am Backbone« will sagen, dass man eine ziemlich schnelle Verbindung ins Netz hat. Eigentlich die Verbindung zwischen Rechnernetzen. Das Web besteht aus einer Vielzahl von solchen Rechnernetzen, die über Backbones miteinander verbunden sind. Backup Darum betet man, wenn ein Rechner abgestürzt ist und alle Daten verloren sind. Es bedeutet dass Daten, Programme oder Systeme auf einem Server oder einer Festplatte gesichert wurden und so nach einem Absturz mit Datenverlust oder dem unbeabsichtigten Löschen von Daten (was man am Besten niemals irgendjemand erzählen sollte), wiederhergestellt werden können. Normalerweise laufen bei professionellen Anbietern permanent oder regelmässig Backup-Programme. Auf dem eigenen Rechner meistens leider nicht! Bandwidth Die Bandbreite bezeichnet die Spanne zwischen höchstmöglicher und niedrigster Frequenz bei der Übertragung von Daten. Gemessen wird in Hertz oder in Bits pro Sekunde. Banner Eine Werbefläche auf einem Werbeträger wie z.B. www.stern.de, die meistens per Klick zu einer Web-Site führt, dem sogenannten Werbeträger.

Benchmark Ein schickes Wort für einen Leistungsvergleich oder eine Konkurrenzanalyse bei Websites, Software oder Hardware. Sollte am Beginn jeder Strategieentwicklung stehen. Beta Eine Betaversion ist eine fast fertige Software, die von bestimmten Testern ohne Garantieanspruch ausprobiert werden kann. Immer sehr gespannt erwartet, aber dann meistens doch mit Bugs und anderen Überraschungen gesegnet. Nach diesem Erfahrungsaustausch wird dann die korrigierte Endversion freigegeben. Bit Die legendäre Informationseinheit zur Datenspeicherung, die entweder aus 0 oder 1 besteht. Kleiner geht’s nicht. Bookmark Das sind die Seiten, die man in seinem Browser speichert, um sofort auf bestimmte Seiten zurückgreifen zu können (Lesezeichen). Gute und gepflegte Bookmarklisten sind wirklich Gold wert. Broadband/Breitband Der Hype der Jahre 1999/2000. Durch diese Übertragungstechnik können sehr grossen Datenmengen wie zum Beispiel Film und Ton mit hoher Geschwindigkeit und Leistung übermittelt werden. Browser Das Programm, das es uns ermöglicht, anstatt grauem HTML-Code Text, Bild und Ton zu sehen. Die sogenannten WWW-Browser wie Netscape und Explorer ermöglichen es dem User, sich durch den Datendschungel zu bewe-

Glossar

..

215

gen und die unterschiedlichen Services zu nutzen.

die vorher schon einmal geladen wurden. Das gilt für HTML-Seiten genauso wie für Bilder.

Bug Das erste, was man vermutet, wenn wieder einmal nichts funktioniert. Das Programm und der Rechner laufen zwar noch, aber ein kleiner Fehler macht die Arbeit schwer oder legt sie lahm.

CD-ROM Abkürzung für Compact Disc Read-Only Memory. Das Speichermedium mit Platz für standardmässig 650 Megabyte ist in der Regel nur einmal beschreibbar und wird verwendet für Applikationen mit großen Datenmengen wie Kataloge oder Lexika sowie zu Backup-Zwecken.

Bullshit-Bingo Version des klassischen Bingo-Spiels, bei der während eines Meetings auf einem Blatt häufig gebrauchte, meist unverständliche Worte wie »konvergent« oder »Paradigmenwechsel« ausgestrichen werden, sobald einer der Teilnehmer sie verwendet. Wer alle gestrichen hat, schreit laut »Bullshit«. Vorsicht bei KundenMeetings. Button Ein Element auf einer Site, mit dem man eine Aktion auslöst. Der Begriff ist deswegen etwas ungünstig, weil man sich sofort einen dreidimensionalen Knopf vorstellt. Buttons werden von vielen auch als solche gestaltet, egal, ob es ins visuelle Konzept passt oder nicht. Byte Acht Bit ergeben ein Byte, die Grundinformationseinheit eines Computerspeichers.

C Cache Ein Zwischenspeicher für Daten; bei der Benutzung eines Browsers kann man die Grösse des Caches einstellen und hat so sehr viel schnellere Ladezeiten beim zweiten Besuch einer Site oder beim Aufrufen von Elementen,

216

Chat Austausch von Nachrichten via Text im WWW. Im Gegensatz zu E-Mail passiert ein Chat simultan in Echtzeit und kann für manche User zur Sucht werden. Chats gibt es zu sämtlichen vorstellbaren Themen, wer mitmachen will, sollte unter dem Stichwort IRC im Netz auf die Suche gehen. Clearingstelle Ein Finanzinstitut oder eine vergleichbare Einrichtung, die online während des Zahlungsvorgangs im elektronischen Geldverkehr für die Transaktion bürgt und somit die Wertstellung garantiert. Content Neudeutsch für den Inhalt einer Site. Gefüllt werden diese Sites von sogenannten Content Providern, die sich idealerweise aus Unternehmen zusammensetzen, die sowieso mit Inhalten zu tun haben, wie zum Beispiel Fernsehsendern oder Zeitungsredaktionen. Cookie Hört sich gut an, ist aber nicht unproblematisch. Ruft man bestimmte Sites auf, wird eine Datei auf der Festplatte des Users abgelegt, die

Anhang

..

alle Bewegungen und Aktionen des Nutzers mitprotokollieren kann. Auf der einen Seite kann das sehr hilfreich sein, um dem User passende Services zu liefern, auf der anderen Site kann man ihn hervorragend ausspionieren. CSS Die Cascading Style Sheets können (auch von einer Metaseite aus) bestimmte Eigenschaften für Schrift oder Position an HTML-Seiten weitergeben. Cybercash Schicker Name für virtuelles Geld Cyberspace Mittlerweile nicht mehr ganz so cooler Begriff für die Welt innerhalb vernetzter Computer. Er tauchte schon 1984 in einem Roman William Gibsons auf und ist heute eher Schlagwort auf Jahrmärkten und in schlechten Talkshows.

D Database Eine Datenbank wird mit Daten gefüllt, die von ihr verwaltet, kombiniert und wieder ausgegeben werden. Je besser die Datensätze, also die Einträge, indiziert und verknüpft sind, um so besser kann eine Datenbank in vielfältigster Weise genutzt werden. Datenautobahn Schon wieder ein Begriff, der langsam out of fashion ist und die Gesamtheit der Datenleitungen beschreibt, die dem Internet zugrunde liegen. Gerne für lustige Wortspiele missbraucht.

Default Die Grundeinstellung von elektronischen Geräten, also die Einstellung, mit der sie geliefert werden und bevor der Nutzer alles verstellt hat. Außerdem wird damit die Seite bezeichnet, die als Homepage oder als erste Seite eines Themenbereichs automatisch geladen wird. DE-NIC Das Deutsches Network Information Center ist verantwortlich für die Vergabe und Verwaltung von deutschen Domains und IP-Adressen, die mit dem Kürzel .de enden. DHTML Die Dynamic Hypertext Markup Language ist eine Erweiterung des HTML-Standards und umfasst interaktive Elemente im Rahmen von Java-Script sowie Cascading Style Sheets. Das Problem ist dabei, dass sich die Befehle schon allein bei Netscape und Microsoft deutlich unterscheiden, was den Einsatz recht schwer macht! Dithering Durch das Rastern von Farben werden neue Farben erstellt, die sonst auf dem System gar nicht darstellbar wären. Dadurch, dass man weniger Farben verwendet, wird auch die Datei kleiner. DNS Der Domain Name Server übersetzt nummerische IP-Adressen in klar verständliche Namen wie www.galileo-press.de Domain Die Domain ist die Bezeichnung der Adresse, unter der verschiedene Angebote angelegt

Glossar

..

217

sind. Dabei gibt es eine inhaltliche oder eine geographische Unterscheidung. Sogenannte Top-Level-Domains sind zum Beispiel: E .com .com, das heißt commercial organisations und steht für kommerzielle Anbieter, gerne aber auch für die USA E .edu .edu, das heißt educational organisations und steht Schulen, Universitäten und ähnliches E .gov gov gov, das heißt government organisations und betrifft alles, was mit Regierungen zu tun hat E .mil mil mil, das heißt military organisations E .net net net, das heißt network resources, also alles, was in irgendeiner Form mit Netzwerken zu tun hat. E .org org org, das heisst organisations und steht für Organisationen aller Art, hauptsächlich nichtkommerzielle Download Das Laden einer Datei aus dem Internet auf den eigenen Computer Dpi Dots per inch ist die Maßeinheit für Bildpunkte pro Zoll und legt die Auflösung unterschiedlicher Ausgabemedien fest.

electronic commerce Der Handel und Transaktionen im Internet E-Mail Versenden von Nachrichten und angehängten Datein über ein Computernetzwerk Extranet Ein Netzwerk, über das Mitarbeiter einer bestimmten Firma sowie deren Kunden und Dienstleister miteinander kommunizieren können

F FAQ Damit man im Rahmen einer Site nicht immer wieder die gleichen Fragen zu hören bekommt und diese beantworten muß, bietet es sich an, eine Liste der am häufigst gestellten Fragen und deren Antworten ins Netz zu stellen. Feedback Eine Feedback-Funktion auf einer Site gibt dem User die Möglichkeit, sich zu bestimmten Sachverhalten zu äußern, meistens per E-Mail.

E

Firewall Ein Sicherheitssystem, das ein geschlossenes Netzwerk innerhalb einer Firma vor unerwünschten Zugriffen von außen schützt.

Editor Programm zum Erstellen und Ändern von Textdateien. Die komplexe Form sind WYSIWYGEditoren, mit denen man Websites erstellen kann. Also sozusagen das Gegenteil eines Browsers.

Flat Rate Über einen Pauschaltarif wird der Zugang zum Netz nicht nach darin verbrachter Zeit, sondern über einen monatlichen Pauschalbetrag abgerechnet.

electronic business Die Abwicklung von Geschäftsvorgängen über das Internet

218

Anhang

..

Form Ein Formular auf einer HTML-Seite ermöglicht es dem User, Daten an den Server der Site zu senden. FTP Das File Transfer Protocol ermöglicht die Übertragung von Daten über das Internet von einem Rechner zum anderen. FTP-Server Der FTP-Server stellt Dateien zur Verfügung, die man sich mehr oder weniger frei herunterladen kann.

G Gateway Ein Übergang zwischen zwei Netzwerken, z.B. T-Online und dem Internet GIF Das Graphics Interchange Format ist eines der verbreitetsten Bildformate im Netz. Gigabyte Etwa eine Milliarde Bytes an Computerdaten

Homepage Die Homepage ist die Startseite einer Site, zu der man meistens durch Klick auf das Logo zurückkommt. Ausserdem kann man sich im Browser sein Home einstellen und kommt beim Starten des Programms immer auf diese Seite. Host Ein Rechner im Internet, der Informationen oder Dienste bereitstellt HTML Hyper Text Markup Language, die Programmiersprache, mit der die graphisch orientierten Seiten des WWW erstellt werden http Das Hypertext Transfer/Transmission Protocol ermöglicht die Übertragung und Verknüpfung von Sites im WWW. Hyperlink Bestimmte Worte oder Passagen eines Textes oder einer Navigation, die mit einer anderen Seite verbunden sind und auf die man klicken kann.

H Hand-held Computer Diese kleinen Computer können oft locker mit großen Rechnern mithalten, sind dabei aber winzig klein und können in der Hand gehalten werden. Homebanking Bankgeschäfte über den Rechner von zu Hause aus

I Icon Ein Symbol, meistens recht klein, das eine Funktion, eine Datei, einen Bereich oder ähnliches darstellen soll. Oft sind sie sehr interpretationsbedürftig und deswegen nicht immer gut. Information Highway Noch wichtiger klingender Begriff für Datenautobahn

Glossar

..

219

Intelligente Assistenten Diese kommerziellen Suchmaschinen legen über einen bestimmten Zeitraum ein Profil über den Nutzer und seine Suchgewohnheiten an, und liefern qualitativ immer bessere Suchergebnisse. Interactive Eigentlich jede Software oder Site, die in irgendeiner Weise Eingaben und Aktionen des Users zulässt Interface Das ist jegliche Schnittstelle, über die Daten zwischen zwei Bereichen ausgetauscht werden. Sei es die Nutzeroberfläche (das Interface zwischen Mensch und Computer) oder ein Kabel, das einen Rechner mit dem Monitor verbindet. Oder der Projektleiter, der zwischen dem zerstrittenen Grafiker und dem Konzepter vermittelt. Internet Ein neugeschaffenes Wort, um das globale Netzwerk an Computern zu beschreiben, die über das Internet-Protokoll miteinander verbunden sind

IP-Adresse Adresse eines Internet-Rechners in Form eines Zahlencodes, z.B. 165.32.12.134

J JAVA Diese Programmiersprache im Internet erlaubt es, unabhängig von der Art des Rechners komplexe Programme ablaufen zu lassen. JavaScript Diese Skriptsprache hat rein gar nichts mit Java zu tun und ermöglicht in ihrer Verknüpfung mit HTML interaktive Features. Ist aber nicht immer ganz stabil und führt unter Umständen bei semiprofessineller Programmierung gerne mal zu Abstürzen. JPEG Das Joint Photographic Experts Group-Bildformat komprimiert Bilder für das WWW

K Kilobyte Die Maßeinheit für die Größe eines Speichers, also 1.024 Bytes

L Internet-Nutzer Der sogenannte User ist Dreh- und Angelpunkt des Netzes. Allerdings muss das nicht unbedingt ein Surfer sein, man bezeichnet so auch jemanden, der nur mit E-Mail kommuniziert. Intranet Ein Netzwerk innerhalb einer Firma, das auf der Internet-Technologie beruht

Launch Der Onlinestart einer Website. Grundsätzlich ist die Zeit bis zum Launch immer zu kurz und mit hektischem Stress verbunden. Link Die Verknüpfung eines Elements auf einer HTML-Seite mit einer anderen Seite Login Das Anmelden an einem Netzwerk, gerne mit Username und Passwort

220

Anhang

.

M Mailing List Läßt man sich auf eine Mailing List zu einem bestimmten Thema setzen, bekommt man immer wieder relevante E-Mails. Das bereut man oftmals sehr schnell, weil die Datenflut überhand nimmt; man versucht sich dann wieder von der Liste zu streichen. Megabit Etwa eine Million Bits Megabyte Etwa eine Million Bytes, genauer 1.024 Kilobytes oder 1.048.576 Bytes Meta Tag Diese Auszeichnung auf einer HTML-Seite ermöglicht es, Stichworte für Suchmaschinen auf die Seite zu packen. Modem Ein Modem vermittelt zwischen dem digitalen Computer und der analogen Telefonleitung, und zwar durch Umwandlung der digitalen Signale in furchtbare akustische Signale. Multimedia Das Wort des Jahres 1995 wird heute nur noch verschämt benutzt und bedeutet die Verbindung von Medien wie Text, Ton und Bild mit digitaler Ausgabe, also eigentlich Monomedia.

N Netiquette Benimmregeln bei der Kommunikation mit anderen Usern im Netz, vor allem per Mail, Newsgroup oder in einem Chat

New Media Vor allem bei Agenturen beliebter Zusatz. Als Neue Medien werden Bildschirmmedien wie CD-Roms oder das Internet bezeichnet. Newsgroup Riesiges Archiv von »geposteten«, also von Nutzern eingestellten Nachrichten zu einem bestimmten Thema. Es gibt zu fast jedem erdenklichen Thema eine solche Gruppe. Newsletter Eine E-Mail, die mit identischen oder personalisierten Inhalten an viele Empfänger gleichzeitig gesendet wird. Viele Unternehmen setzen Newsletter zur Kundenbindung ein.

O Open Source Von Programmierern und Softwarefirmen genutzte Methode, um den Quell-(Source-)Code eines Programms zu verbessern. Durch die Offenlegung bekommen andere Programmierer die Möglichkeit, das Programm weiterzuentwickeln und zu verbessern. OS »Operating System«, bezeichnet das Betriebssystem eines Rechners.

P Page Impression Bezeichnet eine von einem Browser aufgerufene HTML-Seite. Vor allem bei der Schaltung von Bannern wird nach PI abgerechnet, also nach der Gesamtanzahl der aufgerufenen Seiten.

Glossar

.

221

Personalisierung Möglichkeit, durch datenbankgestützte Inhalte die Informationsbedürfnisse des einzelnen Nutzers auf einer Website oder in einem Newsletter zu stillen.

Relaunch Neukonzeption einer Website. Meist geht mit dem Relaunch nicht nur eine Neustrukturierung der Inhalte, sondern auch ein Redesign, also eine veränderte Gestaltung einher.

Pixelschubser Abfällige Bezeichnung von Web-Grafikern, meist durch Account Manager oder Werber

Robot Programme, die selbsttätig Websites und weiterführende Links absuchen, um diese dann per Datenbank einer Suchmaschine zugänglich zu machen

Plug-In Erweiterungsmodule, mit deren Hilfe man die Funktionen eines Browsers erweitern kann, z.B. um bestimmte Dateiformate wie 3D-Darstellungen zu ermöglichen Pop-up-Fenster Meist kleines, zusätzliches Browserfenster, das über dem Originalfenster erscheint, um zusätzliche Inhalte oder Werbung anzuzeigen Proxy-Server Server bei Unternehmen oder Providern, der den Zugriff auf häufig aufgerufene Inhalte beschleunigt, indem er diese zwischenspeichert Pull Bezeichnung für vom Nutzer angeforderte Daten Push Bezeichnung für nicht aktiv angeforderte Daten, wie zum Beispiel die Themen-Channels früherer Versionen des Internet Explorer

R Real Audio Datenformat für Audiodateien, die mithilfe des »Real Player« angehört werden können

222

Rollover Möglichkeit, mittels JavaScript zwei gleichgroße Bilder beim Berühren mit der Maus auszutauschen

S Schlipsträger Unfreundliche Bezeichnung für Consultants, meist von Designern verwendet Server Rechner oder Verbund von Rechnern, auf denen Dateien gespeichert sind. Ein Webserver beispielsweise beherbergt alle Dateien einer Site. Site oder »Website«. Bezeichnung für eine zusammenhängende Ansammlung von HTML-Seiten unter einer URL Source Code Der Quellcode einer HTML-Seite oder eines Programms. Dieser besteht aus Befehlen und Inhalten.

Anhang

.

T

W

Tag Befehl in HTML. Ein Tag steht immer in spitzen Klammern und wird bei richtiger Programmierung nicht im Browser angezeigt, z.B. .

WAP »Wireless Aplication Protocoll«. Protokoll, das ähnlich wie HTTP die Kommunikation und Darstellung auf mobilen Geräten wie Handys regelt

Trust Center Unabhängige Zertifizierungsstelle für Signaturen oder Echtheits-Zertifikate

U Unicode Standard, der den Tastaturaufruf und die Darstellung aller internationalen Schriftzeichen regelt Unsubscribe Abmeldung eines abonnierten Dienstes oder Newsletters URL »Uniform Resource Locators«. Bezeichnung für die eindeutige Adresse einer Website, z.B. http://www.echopool.com (oder http://www. frogdesign.com oder http://www.pixelpark. com)

WAV Dateiformat für Audiodateien Webspace Serverplatz bei einem Provider, um dort eine Website zu hosten Webtracking Verfahren, um Besuche (Visits), Seitenaufrufe (Pageviews) und ähnliche Daten über die Besucher einer Website gefiltert auszuwerten WYSIWYG »What you see is what you get«, umständliche Umschreibung für die Möglichkeiten grafikorientierter Webeditoren

User Interface (gestaltete) Benutzeroberfläche einer Website

V VGA Ein Standard zur Darstellung von Bildpunkten und Farben auf Bildschirmen Visit Einheit, um die »Besuche« auf einer Website zählen und auswerten zu können. Ein Visit enthält in der Regel mehrere Pageviews.

Glossar

.

223

Index A Access Provider 214 Account 214 Ad Click 214 Ad Click Rate 214 Adobe After-Effects 138 Agentur 173, 212 Aktionen 130 Allianz 31 Amazon 168, 175 Animated Banners 142 Animated GIF 214 Animation 64, 114 Aufgaben 64 Dekoration 64 Umsetzung 68 Zeichentrickanimation 70 Animationsarten 68 Apple-Shop 178 Application Service Provider 174 Applikation 185 Applikationsdesign 185 Arbeitsgruppe 108 ASP 174 Attachment 214 Avatar 214

B Backbone 215 Backup 215 Bandbreite 215 Bandwidth 215 Banken 182 Banner 141 Grundlagen 143 Konzeption 138 Bannerarten 141 Bannerentwicklung 140, 146 Historie 140 Batch-Prozesse 83 Benchmark 208, 215 Benutzerführung 19, 27, 210 Beratung 170 Berichtsansicht 110 Beta 215

224

Bewegung 126 Bild-für-Bild-Animation 120 Bildbearbeitung 76 Bildformate 61 mit Fireworks 82 Bildrechte 63, 211 Bit 215 Bookmark 215 Branding 26, 160, 193 Broadband 215 Browser 215 Bug 216 Bullshit-Bingo 216 Button 216 Byte 216

C Cache 216 Cascading Style Sheets 55, 126, 217 CD-ROM 216 Chat 216 Clearingstelle 216 Clipart 212 CMYK 58 comdirect 189 Community 190 Content 216 Cookie 216 Corporate Design 25, 26 CSS 55, 126, 217 Cybercash 217 Cyberspace 217

D Database 217 Datenautobahn 217, 220 Datenbanken 29, 49, 191, 196, 197 DE-NIC 217 Default 217 Dekoration 64 Dell 168 Deutsche Bank 184 DHTML 72, 127, 217 Diraba 189 Direkt Anlage Bank 189

Dithering 61, 217 DNS 217 Domain 217 Domain Name Server 217 Download 218 Dpi 218 Dreamweaver 35, 89, 90, 211 Bild 96 DHTML 126 Document-Fenster 90 Farben festlegen 94 Fenster 90 Frames 99 Modifikationen 98 Objekte-Palette 90 Palette 90 Palette Eigenschaften 92 Randbreite 95 Rollover-Effekte 35 Schriftarten 53 Seiteneigenschaften 94 Text 96 Dresdner Bank 189 Dynamic HTML 72 Dynamic Hypertext Markup Language 217 Dynamisches HTML 126

E E-Brands 161 e-Commerce 31, 168 e-Finance 182 E-Mail 218 Editor 218 Einkaufswagen 176 electronic business 218 electronic commerce 218 Extranet 158, 218

F Fake Banners 142 FAQ 218 Farbe 58 websafe 209 Farbindizierung 61

Index . .

Farbsysteme 58 Feedback 187, 218 File Transfer Protocol 219 Film, interaktiv 114 Finanzdienstleister 182 Firewall 218 Fireworks 82 Arbeitsbereich 82 Flash 71, 114, 143 Bibliothek 118 Bibliotheksfenster 116 Fenster 115 Film 120 Gitternetz 117 Hauptfenster 115 Instanzeigenschaften 121 Paletten 115 Symbol 117 Symbolleiste 115 Veröffentlichen 122 Flash-Animationen 84 Flash-Player 114 Flat Banners 140, 141 Flat Rate 218 Flexibilität 27 Fonts 52, 80 Form 219 Formatvorlagen 16 Formular 186, 219 Forrester, Studien 208 Frames 48, 99, 209 HTML-Code 99 Frames (Animation) 85 FrontPage 108, 211 Arbeitsbereich 110 fertige Designs 113 Miniaturbilder 112 Pipette 112 Standardisierung 108 FTP 219 FTP-Server 219

G Gateway 219 GfK-Gruppe 208 GIF 61, 82, 210, 219 Text als GIF 56 GIF-Animation 68, 84, 114, 142 Gigabyte 219 Girlshop 169

GoLive 104, 211 Arbeitsbereich 104 Dokumentenfenster 105 Meta tags 153 SmartObjects 104 WebDAV 104 Grids 106 Grundraster 45 GUI 186

H Hand-held Computer 219 Hausschrift, im Web 211 Head 153 Hexadezimalsystem 59, 209 Hexadezimalwert 209 Hilfe-Systeme 187 Hintergrund, Ladezeit 212 Hintergrundbild 94 Hintergrundfarbe 94 Hintergrundmusik 209 Hitparade 211 Homebanking 219 Homepage 219 Host 219 HTML 15, 143, 219 Farbpalette 60 Stile 51 HTML-Editor 211 HTML-Palette 59 HTTP 15, 219 Hyper Text Markup Language 219 Hyperlink 19, 219

I Icon 219 Information Highway 220 Intelligente Assistenten 220 Interactive 220 Interactive Banners 137, 143 Interface 19, 68, 220 Gruppierend 22 Halblinear 21 Kaskaden 20 User-spezifisch 23 Interface Design 18 Internet 220 Internet Service Provider 174 Internet-Nutzer 220 Internetauftritt, Fragen 208

Interstitial Ads 143 Intranet 156, 220 Aufgaben 156 Einsatz von FrontPage 113 grundlegende Regeln 157 Intro-Animation 66 IP-Adresse 220 ISP 174

J Java 70, 140, 143, 186, 220 JavaScript 70, 126, 143, 220 JPEG 62, 81, 83, 210, 220 reduzieren 210

K Katalog 112 Kilobyte 220 klassisches Design, Grundlagen 26 Klickaufforderung 137 Komprimierung, mit Fireworks 82 Kreditkartennummern 173

L Ladezeit 25, 209 verringern 209 Launch 220 Layer 85, 130 Layout 42, 51 mit GoLive 106 Linearität 186 Links 51, 220 Login 221

M Macintosh 34 Farbpalette 60 Schriftarten 52 Mailing List 221 Main Idea 28 Map of the Market 188 Marke 28 Mediaplan 146 Megabit 221 Megabyte 221 Meta Tag 221 Metapher 28, 32 Metatags 152 Microsite 147, 148 Miniaturbilder 112

Index . .

225

Modem 221 Modularität 27, 185 Mouse-Over 133 Multimedia 221 Musik 209

N Nanosites 143 Navigation 30 dynamische 31 gebrannte Schrift 33 Metaphern 32 statische 31 Systemelemente 33 Systemtext 33 Werkzeuge 32 Navigationselemente Aktive 34 Navigationssystem 30, 210 Netiquette 221 Netradio 33 New Media 221 Newsgroup 221 Newsletter 221 Nonlinearität 18

O One-2-One 38 Online-Kampagne 139, 146 Ziele 139 Online-Shops 168 Online-Werbung 136, 192 Nachteile 137 Vorteile 137 Zukunft 148 Open Source 221 OS 221

P Packshots 172 Page Impression 221 PalmOS 186 PalmPilot 186 Personalisierung 183, 191, 222 Pfad absolut 93 relativ 93 Photoshop 76 Document-Fenster 76 Ebenenpalette 78 Grafiken 81

226

Jpeg 81 Kopieren 81 Screenfonts 80 Webfunktionen 76 Werkzeugpalette 78 WWW-Palette 79 Pixelschubser 222 Plug-In 222 Pop-UP-Fenster 222 Popup Ads 143 Portal 190, 192, 193 Proxy-Server 222 Pull 222 Pull-Information 136 Push 222 Push-Verfahren 136

Q QuickTime 72 QuickTime VR 72

R Raster 42, 45 Rastern 217 Real Audio 222 Redaktionssystem 196, 197, 200 Relaunch 222 Response 67 RGB 58 Robot 222 robots.txt 154 Rollover 210, 222 Rollover-Effekt 34

S Satzlayout 50 Schlipsträger 222 Schlüsselwörter 152 Schriftarten 52 Schriftgrößen 54 Screendesign 25 Server 222 Shockwave 71 Shop 168 Shop-Systeme 31, 173 Sicherheit 182 Sicherheitsrisiken 172 Site 222 Sprache 211 Sitestruktur 37 Siteverwaltung, mit GoLive 106

Skalierbarkeit 27 Smart Banners 142 Sound 209 Source Code 223 Stadtpläne einbinden 211 Stile 51 Stills 84 Storefronts 174 Streamlining 175 Studien 208 Suchmaschinen 152, 154, 190, 220 Liste der 154 Systemelemente 33

T Tabelle 47 Tables 47, 97 Tag 223 Templates 192, 197, 198 Text, Gestaltung 210 Textlayout 51 Top-Level-Domain 218 Traffic 140 Transaktion 182 Trust Center 223 Tween-Animation 120 Typografie 50

U Unicode 223 Unsubscribe 223 Unterhaltung 66 URL 223 User 220 User Interface 223 User-Feedback 27, 28

V Vektorgrafik 114 Verhaltensweisen 130 Versicherungen 182 VGA 223 Visit 223

W Wahrnehmung 50 WAP 223 WAV 223 Web-Announcing 152 Webeditoren 88

Index

.

Website Gestaltung 208 Planung 208 Webspace 223 Webtracking 137, 223 Webwasher 139 Werbeträger 136, 137, 215

Wettbewerber 208 Windows 34 Farbpalette 60 Schriftarten 52 WWW 14 WYSIWYG 88, 223

Y Yahoo 185

Z Zielgruppe 22, 23, 37, 208

Index

.

227