Webdesign professionell - Expertenstrategien und Tipps von Pixelpark, frogdesign und Echopool GERMAN

Komplettes Buch

WebdesignprofessionellExpertenstrategien undTipps von Pixelpark,frogdesign und Echopool

von Florian Denglerund Holger Volland

Ein Service von

Galileo Design240 S., 2000, 4c, 44,90 EuroISBN 3-934358-56-X

Galileo Design

http://www.galileodesign.de/gp/GPP-macup

http://www.galileodesign.de/katalog/buecher/titel/gp/GPP-macup/titelID-184

Bücher, die Sie auch interessieren werden

Galileo Design

und weitere Titel im Programm zu

_ Web Usability_ Website-Konzeption_ Webdesign_ Dreamweaver MX– Fireworks MX_ Photoshop 7_ digital Video

Die

Buc

hcov

er e

ntha

lten

Web

links

.

>> www.galileodesign.de

http://www.galileodesign.de/gp/GPP-macup






Liebe Leserin, lieber Leser,

wir freuen uns, dass Sie sich für ein Buch der Reihe Galileo Design entschiedenhaben.

Galileo Design ist die Reihe für professionelle Screen-, Web- und Grafik-Designer und Experten im Prepress-Bereich. Unsere Bücher zeigen, wie man esmacht – strikt aufgabenbezogen und mit Beispielmaterial professioneller Designererschließen sie die Anwendung aller relevanten Tools und Techniken. Sie vermit-teln das technische Know-how, und sie sind Ideengeber und überraschen mit ori-ginellen und inspirierenden Lösungen. Wissen teilt sich nicht nur sprachlich, son-dern auch visuell mit. Satz und Layout tragen dem Rechnung. Und wo immer esdienlich 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 neugelingt, sind wir auf Ihre Rückmeldung angewiesen. Bitte teilen Sie uns Ihre Mei-nung zu diesem Buch mit. Ihre kritischen und freundlichen Anregungen, IhreWünsche und Ideen werden uns weiterhelfen.

Wir freuen uns auf den Dialog mit Ihnen.

Ihre Ruth WasserscheidLektorat Galileo Design

Galileo PressRheinaustraße 13453225 Bonn

[email protected]

. .

Florian DenglerHolger Volland

Webdesign ProfessionellExpertenstrategien und Tipps von

Pixelpark, frogdesign und Echopool

.

Spezielle Symbole in der Marginalspaltemachen auf besonders wichtige Textstellenaufmerksam:

Achtung-IconAchtung-IconAchtung-IconAchtung-IconAchtung-IconDiese Abschnitte sprechen eine Warnung aus.

Tipp-IconTipp-IconTipp-IconTipp-IconTipp-IconHier verraten unsere Autoren Tipps und Trickszur Erleichterung Ihrer Arbeit.

Hinweis-IconHinweis-IconHinweis-IconHinweis-IconHinweis-IconWeiterführende Hinweise werden Ihnen sonahe gebracht.

Step-IconStep-IconStep-IconStep-IconStep-IconStep-by-Step können Sie unsere Beispielenachvollziehen.

Orientierung

Um Ihnen beim Lesen die Orientierung zuerleichtern und ein besonderes Lesevergnü-gen zu ermöglichen, haben wir für unsereReihe Galileo Design ein spezielles Layoutentwickelt.

Durch visuelle Hilfen wurde der Text inFunktionseinheiten gegliedert:

Durch das farbige Registersystem ist esIhnen ein Leichtes, auf die einzelnen Kapitelund Teile des Buchs zuzugreifen.

In Blau gehaltene Texte beinhalten Zusatzin-formationen, Denkanstöße oder besondereHinweise.

Texte mit roten Überschriften kennzeichnenBeispiele bzw. Schritt-für-Schritt-Anleitungen.

5

.

.

Inhalt

8 Noch ein Buch übers Web?

10 Noch ein Vorwort?

11 Die Autoren

12 Grundlagen des WWW

14 Vom Seitendesign zur Site-Regie

18 Interface Design

30 Interaktion

40 Gestalterisches

42 Layout im Web

50 Textgestaltung

58 Farbe und Bild

64 Animation im Netz

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

136 Online-Werbung

152 Web-Announcing

156 Intranet und Extranet

160 E-Branding

168 Die Gestaltung von Online-Shops

182 Gestaltung von e-Finance-Websites

190 Portal-Sites

196 Datenbankbasierte Sites

202 Microdevices

7Inhalt

206 Anhang

208 Tipps und Tricks

214 Glossar

224 Index

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

Seit sieben Jahren beschäftige ich mich mit in-teraktiven Medien. Und täglich merke ich, dassich viel zuwenig darüber weiss. Das Schönedaran ist, es wird sich nie ändern.

Als wir damals anfingen, erste Animation inDirector zu basteln, gab es noch kaum Litera-tur, niemanden, der uns sagen konnte, wieman gestochen scharfe Fotos auf 8 Bit redu-ziert und mit rudimentärem HTML schicke Sei-ten bastelt. Nächtelang saßen wir vor denComputern und haben Programme auspro-biert, den Technikern über die Schulter ge-schaut und die Erfindung rahmenloser Framesmit Sekt begossen. Mit der Professionalisie-rung des Webs haben auch wir uns professio-nalisiert und immer komplexere Konzepte undIdeen verwirklicht. Der permanente Austauschmit allen Bereichen, also der Projektleitung,der Konzeption, der Technik und natürlichdem Kunden war die wichtigste Arbeitsgrund-lage. Die Grenzen zwischen Grafik, Konzeptund Technik verschwanden schnell, man muss-te auf allen Gebieten Erfahrung sammeln,sonst konnte und kann man die Digitalen Me-dien nicht verstehen. Offenheit und Neugierdesind also die besten Voraussetzung für denUmgang mit diesem Thema.

Holger Volland und ich haben uns seit unse-rer gemeinsamen Arbeit bei Pixelpark immersehr intensiv ausgetauscht, in gemeinsamenund getrennten Projekten, Seminaren, Vorträ-gen, Workshops oder abends bei Caipirinha imBierhimmel. Der Entschluss, aus alledem, waswir unseren Kunden, Kollegen und Zuhörernimmer erklären und erzählen, und dem, waswir von ihnen hören, ein Buch zu machen, warAnfang 2000 gefasst. Es ist ganz bewusst vonzwei Autoren geschrieben, denn zum Thema»Webdesign« gibt es weder einen einzig richti-gen Weg noch ist es gut, sich auf eine einzelneMeinung zu verlassen.

Wer von dem Buch allerdings rein gestalte-rische Hinweise erwartet, wird enttäuscht wer-den. So vielfältig die Interaktiven Medien sind,so viele Perspektiven muss es auch geben. Mankann sicher nicht alles besprechen und wissen,aber dieses Buch soll helfen, den großen Über-blick, aber auch detailliertes Fachwissen zu er-langen.

Eines kann es allerdings nicht ersetzen: neu-gierig zu sein und einmal täglich durch dasNetz zu surfen!

Berlin, August 2000Florian DenglerFlorian DenglerFlorian DenglerFlorian DenglerFlorian Dengler

8 Vorwort

.

.

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

Bei einem Kalifornien-Urlaub 1994 stieß ich aufdas Buch »Internet Starter Kit«. Zu diesemZeitpunkt gab es selbst in den USA noch keineInternet Cafés, und die Autoren schrieben eu-phorisch über Dinge wie »Gopher« oder»WAIS«. Die wichtigsten Anwendungen desInternet waren zu dieser Zeit e-mail und ftp,und das »WWW« war noch so klein, dass dieAutoren Mutmaßungen über die Anzahl vonSites im WWW wagen konnten. Wir merkenes alle: Das Netz hat sich verändert, das WWWist zur umfangreichsten Informationsplattformder Welt geworden, und niemand, der heuteWebsites gestaltet, betreut oder in Auftraggibt, könnte sagen, wie viele Sites es weltweitgibt. Die Geschwindigkeit des Internet-Wachs-tums ist mittlerweile so hoch, dass es erstaunt,wie viele Unternehmen sich immer noch fra-gen, ob sie aktiv ins Netz sollen.

Doch während die einen noch grübeln, sindvor allem Großunternehmen schon weiter.Hier begegnen wir bei unserer Arbeit als Bera-ter täglich Prozessen, die ganze Wertschöp-fungsbereiche verändern oder neue erschaffen.Das Internet hat sich schon wieder gehäutet:Vom großen bunten Marketing und Vertriebs-instrument entwickelt es sich gerade weiterzum unsichtbaren Rückgrat einer neuen Wirt-

schaft, das in großen Bereichen ausschließlichvon technischer Infrastruktur lebt. Designspielt in diesem »neuen« Internet kaum eineRolle mehr, denn die sogenannten »Front-ends« bilden nur die Spitze des Eisbergs.

Warum sollte man mit dieser Erkenntnis imJahr 2000 noch ein Buch schreiben oder gar le-sen, dass sich mit Webdesign beschäftigt?

Wie versteckt auch immer dieses neue In-ternet agieren wird, die Benutzung der Front-ends wird immer durch Menschen erfolgen.Diese wenigen Stellen, an denen das Netz andie Oberfläche tritt, sind gleichwohl die wich-tigsten und empfindlichsten. Denn an diesenSchnittstellen zwischen Mensch und Maschinegibt es Erfolg oder Misserfolg, also Handlungoder Abbruch.

Unser Buch ist für jene gedacht, denen die-se Schnittstelle das Wichtigste ist. Ob Sie nunfreier Grafiker, Projektleiterin oder Marketing-vorstand sind, wir hoffen, genau die richtigeMischung aus Praxisbeispielen und Hinter-grundwissen zusammengetragen zu haben, umIhnen bei Ihrer Arbeit eine Unterstützung zubieten.

Berlin, August 2000Holger VollandHolger VollandHolger VollandHolger VollandHolger Volland

10 Vorwort

.

Die Autoren

Florian DenglerFlorian Dengler (30) ist als Vice President Digi-tal Media Europe bei frogdesign verantwortlichfür den Bereich Neue Medien in Europa. Dabeispielt besonders die Konvergenz der BereicheBrand&Strategy, Product und Digitale Medieneine vorrangige Rolle.

Bereits während seines Studiums in Com-munication Design am Art Center College ofDesign beschäftigte er sich relativ früh mit in-teraktiven Applikationen. Nach seiner Tätigkeitbei der Designagentur Carré Noir in Turin,wechselte er im Mai 1995 zur Berliner Multi-media-Agentur Pixelpark und arbeitete dort alsCreative Director mit Kunden wie Siemens,Nestlé und Super-RTL.

Seit 1998 betreute er als Creative DirectorInternational der Pixelpark AG das weltweiteDesignnetzwerk sowie Kooperationen mitHochschulen und anderen Einrichtungen. Ne-ben der Entwicklung eines Weiterbildungspro-gramms für Designer und internationaler Per-sonal- und Kundenakquise beschäftigte er sichvor allem mit der Weiterentwicklung und Ge-staltung der neuen Medien auf allen Plattfor-men.

Er schreibt, lehrt in Seminaren, sitzt in denJurys vieler renommierten Award-Shows undist einer der Vorsitzenden des Forums Designdes DMMV.

11Autoren

.

Holger VollandHolger Volland (30) gründete 1998 zusammenmit Lisa Biehl und Kornelia Ruppmann die Un-ternehmensberatung echopool in Berlin. AlsGeschäftsführer zeichnet er für die Entwick-lung von Strategien verantwortlich, die Unter-nehmen den Übergang tradierter Geschäfts-prozesse in die New Economy möglich ma-chen.

Während des Studiums der Informations-wissenschaft in Berlin fokussierte er sich be-reits 1992 auf die Planung und den Einsatz vonInformationssystemen in der Wirtschaft. Nachseiner Arbeit für Deutsche Welle tv und KISSfm wechselte Holger Volland 1995 zum Multi-media-Pionier Pixelpark und war dort bis 1998als Creative Director für die Beratung von Kun-den wie dem Museum of Modern Art (MoMA)New York, der Deutschen Bank oder der Alli-anz Versicherungsgruppe zuständig.

Neben Lehraufträgen an der HochschuleWismar und der New Economy BusinessSchool, der Leitung von Seminaren und Veran-staltungsreihen bilden zahlreiche Veröffentli-chungen einen wichtigen Schwerpunkt seinesEngagements in Lehre und Forschung.

.

Grundlagen des WWW

14 Vom Seitendesign zurSite-Regie

14 Das WWW

18 Interface Design

18 Linear versus nonlinear

19 Das Interface

25 Screendesign

26 Branding

27 Flexibilität, Modularität undSkalierbarkeit

28 Die Main Idea


.

30 Interaktion

30 Statische Navigation

31 Dynamische Navigation

32 Navigationswerkzeuge

37 Strukturierung einer Site: Flexibel,skalierbar, modular

13Seiten einrichten


Vom Seitendesign zur Site-RegieDie technische Entwicklung des WWW und dieAuswirkungen auf die Gestaltung

näre Teams aus Marketing, Vertrieb und Tech-nik mit dem Thema.

Die Auseinandersetzung mit Strategieent-wicklung, Kundenbindungsmaßnahmen oderBusiness-Modellen gehört dabei für alle Betei-ligten fast schon zum Alltag. Dennoch lohnt essich, einen großen Schritt zurückzugehen, umzu sehen, welche Entwicklungen notwendigwaren, um das WWW zu dem zu machen, wases heute darstellt: eine grenzenlose Kommuni-kationsplattform mit schier unerschöpflichenMöglichkeiten.

Das WWW

In den 50er Jahren litten die Amerikaner sehrunter der fortgeschrittenen Weltraumfor-schung Russlands auf Grund des Sputnik-Pro-gramms. Um gleichziehen zu können, inve-stierte das US-Verteidigungsministerium hoheSummen in ARPA (Advanced Research ProjectsAgency). Da zu jener Zeit Computer extremteuer waren, beschloss man, Rechenleistung

Viele der besten Webdesigner – vor allem

die »alten Meister« aus den USA – betrachtensich selbst als Zwitterwesen aus Designer, Kon-zeptentwickler und Programmierer und habenteilweise jahrelange Erfahrung im Umgang mitdem Medium Internet. So spielt zum Beispielbei der Entwicklung eines Navigationskonzep-tes einer Website interdisziplinäres Verständnisfür Design, Text und Inhalte eine große Rolle.Doch auch die Auseinandersetzung mit techni-schen Gegebenheiten wie Browserversionen,Übertragungswegen oder Serverdiensten isteigentlich unumgänglich, um performante undgelungene Sites zu erstellen.

Für viele Multimedia-Agenturen stellt dieseZusammenarbeit eine der größten Herausfor-derungen dar, der nur begegnet werden kann,indem der permanente Austausch der einzel-nen Abteilungen und Kompetenzen fest in denArbeitsablauf integriert wird.

Auf Seiten der Unternehmen hat sich eben-falls viel getan. Während es früher eine eigene»Webabteilung« gab, die eher technisch orien-tiert war, beschäftigen sich heute interdiszipli-

Um professionelle Sites zu gestalten, ist esdurchaus sinnvoll, die Scheuklappen abzu-legen und sich bereits vor der eigentlichenGestaltung intensiv mit konzeptionellen undinhaltlichen Gedanken zu beschäftigen, dieunmittelbaren Einfluss auf jede benutzer-freundliche und sinnvolle Gestaltung haben.

.

15Vom Seitendesign zur Site-Regie

über ein Netzwerk landesweit (ARPAnet) zu-sammenzuschließen. Aus einem Netzwerk desVerteidigungsministeriums wurde im Laufe derZeit ein wachsender Zusammenschluss vonRechnern vor allem zum Austausch von wis-senschaftlichen Dokumenten. Viele der techni-schen Voraussetzungen, die noch heute als Ba-sis für das World Wide Web dienen, wurden inden Jahren bis 1980 entwickelt. Das InternetProtokoll zum Beispiel (IP) dient noch heutezur Adressierung aller angeschlossenen Com-puter, und auch der Seitenaufbau via HTMLund der Transport der multimedialen Datenmit Hilfe von HTTP sind Errungenschaften ausjener Zeit.

Doch was hat das alles mit der Gestaltungvon Websites zu tun?

Informationsweitergabe mit Hilfe von HTMLDas Hypertext Transfer Protocol ermöglichtden Austausch der am WWW beteiligtenRechner, da es als einheitliches Protokoll unab-hängig von eingesetzten Rechnertypen, Be-triebssystemen und Anschlussarten den Aus-tausch multimedialer Daten wie Texte, Bilder,Töne und Filme steuert.

Mit Hilfe von HTML werden die Inhalte ei-ner Seite dargestellt. Entgegen der gängigenMeinung ist HTML jedoch keine Programmier-sprache, sondern eine so genannte Seitenbe-schreibungssprache. Die drei wichtigsten Vor-aussetzungen im Webdesign werden uns vondieser Seitenbeschreibungssprache diktiert:Reihenfolge, Relation und Unvorhersehbarkeit.

Serienmäßige GestaltungGenerell wird eine HTML-Seite immer vonlinks oben nach rechts unten aufgebaut undvon den Browsern auch in dieser Reihenfolgegelesen. Für jeden Designer, der Erfahrung in

der Gestaltung von Printmaterialien hat, be-deutet dies eine komplette Umorientierung imGestaltungsprozess, da alle gestalterischenFreiheiten, die wir aus der Arbeit mit Program-men wie Quark, Photoshop oder Freehandkennen, wegfallen. Plötzlich können wir nichtmehr die Seite als Ganzes betrachten und vor-gesehene Elemente frei anordnen, sondernmüssen uns der Leserichtung des Browsersbeugen. Natürlich könnte man einfach im Rah-men der Möglichkeiten von HTML Elementeplatzieren, wo immer man möchte. Zum Bei-spiel einen Artikel mit einem Bild beginnen las-sen, darunter den Text und die Überschriftrechts daneben anordnen. Wenn nun dieseSeite von einem Browser aufgerufen wird, lädtdieser erst mühsam das Bild, stellt danach denText dar und die Überschrift ganz zum Schluss.Bei einer großen Seite und einem Zugang perModem kann dieser Vorgang dann schon ger-ne einmal eine Minute dauern.

Durch die (technisch) richtige Anordnungeinzelner Elemente kann die Nutzbarkeit einerSeite jedoch deutlich verbessert werden: Beijeder Website, die der Informationsvermitt-lung dient (also ca. 90 %), muss sich der Ge-stalter immer an der Reihenfolge der Infor-mationswiedergabe orientieren, in unseremBeispiel also der Seriengestaltung von HTMLfolgen und die oben erwähnten Elemente inder Reihenfolge Überschrift, Copytext, Bild an-ordnen.

Relativ statt absolutHTML ist relativ aufgebaut. Dies sieht man un-ter anderem an den vordefinierten Textgestal-tungsformaten (z.B. Heading1 bis Heading6).Mit Hilfe dieser Formate war es zu den Anfän-gen des WWW möglich, wissenschaftliche Tex-te zu gliedern und den Inhalt – nicht aber das

.


für diese Zwecke leider uninteressante Layout– optimal darzustellen. Als Grundlage für alleFormate ist deshalb der Fließtext definiert wor-den. Heading1 und alle weiteren Formate sindAbleitungen, deren Eigenschaften relativrelativrelativrelativrelativ zumFließtext festgelegt wurden. Die Formatierungdes ungestalteten Fließtextes wiederum erfolgtauf Browserseite, das heißt auf dem Rechnerdes Besuchers.Wie kann man nun als Gestalter mit diesen re-lativen Formaten umgehen? Nun, einerseitswurde HTML seit der ersten Version weiterent-wickelt, sodass es nun theoretisch möglich ist,Schriftarten frei zu wählen und sogar einzubin-den, mit der gewichtigen Einschränkung je-doch, dass nur diejenigen Besucher eine »rich-tige« Darstellung bekommen, die über neuereVersionen der Browser verfügen und die defi-nierten Schriftarten auch installiert haben. An-dererseits gibt es unzählige Tricks, wie man dierelative Dimensionierung der Seitenelementeumgehen kann. Viele dieser Tipps haben wir indiesem Buch zusammengestellt, weitere kom-men täglich hinzu und lassen sich vor allemdurch ständiges Surfen und »Schnüffeln« inQuellcodes entdecken.

UnvorhersehbarkeitDie entsetzlichste Erkenntnis für einen Web-designer kommt meist, wenn er eine wunder-bare Seite gestaltet hat, diese danach aufeinem fremden Rechner mit einer anderenBrowserversion betrachtet und plötzlich allesanders aussieht als geplant. HTML wurde alsSprache entwickelt, um die Darstellung vonInhalten zu beschreiben, nicht aber deren Lay-out. Fast alles, was wir heute einsetzen kön-nen, um eine – wenigstens halbwegs – vor-hersehbare Gestaltung zu erreichen, ist letzt-lich nichts als Flickwerk und Schmu, was nurdeshalb nicht auffällt, weil die beiden meistverbreiteten Browser, der Netscape Communi-cator und der Internet Explorer, recht fehlerto-lerant sind.

Doch lassen wir uns dadurch nicht beirren,schließlich befinden wir uns immer noch amAnfang.

F Abbildung 1Formatvorlagen für Überschriftenin HTML

..

17Vom Seitendesign zur Site-Regie

..

18 Seiten einrichten

leicht zurückkommen will, kann man außer beider Homepage kaum definieren, was er wannwahrnimmt. Selbst der Startcharakter der ers-ten Seite ist obsolet, sobald ein Link oder einBookmark auf eine Unterseite verweist.

Der User steht nun auf einmal im Mittel-Mittel-Mittel-Mittel-Mittel-punktpunktpunktpunktpunkt, und da jeder User verschieden ist, lässtsich kein allgemein gültiger festgeschriebenerWeg durch das Angebot bestimmen.

Diese Nonlinearität bedeutet, dass man beider Konzeption und Gestaltung interaktiverApplikationen vollkommen anders denken undvorgehen muss. Der Gestalter wird zum Regis-seur, er versucht vorwegzunehmen, welcheRichtung der User einschlagen könnte, welcheWege er beschreiten wird und wie diese mit-einander verbunden sind. Er muss aber auchdamit rechnen, dass der User unlogische Wegeeinschlägt und sich nicht an antizipierte Ver-haltensmuster hält. Um das zu vermeiden,ist dauernde OrientierungOrientierungOrientierungOrientierungOrientierung und Navigations-Navigations-Navigations-Navigations-Navigations-möglichkeitmöglichkeitmöglichkeitmöglichkeitmöglichkeit nötig, will man den Nutzer nichtnach zwei Klicks verlieren. Andererseits hatman natürlich die Möglichkeit, ihn durch ge-

Linear versus nonlinear

Fast alle klassischen Medien haben einen

klaren linearen Aufbau. Das bedeutet, siebesitzen einen Anfang, einen oder mehrereHöhepunkte und steuern auf ein Ende zu. EinFilm, bei dem der Schluss bekannt ist, machtkeinen Spaß mehr, wer bei einem Buch zuerstdie letzte Seite liest, wird sich spätestens nachder Hälfte der Lektüre darüber ärgern. Selbstbei Zeitschriften, die man gerne mal von hin-ten nach vorne blättert, überlegen sich die Ge-stalter des Blattes lange, wie der Aufbau undder Seitenfluss aussieht.

Die interaktiven Medien sind in diesemPunkt grundverschieden. Es geht nicht mehrum das Abarbeiten verschiedener Stationen,sondern um das bewusste und gezielte Auf-nehmen von InformationInformationInformationInformationInformation, um eine neue Artder UnterhaltungUnterhaltungUnterhaltungUnterhaltungUnterhaltung oder die neuartige Nutzungvon ServicesServicesServicesServicesServices. Der Ansatz der Interaktion ansich bedeutet bereits, dass es keinen klarenvordefinierten Weg durch die Inhalte gebenkann. Und da der User selbst bestimmt, wel-che Punkte ihn interessieren und welche nicht,was er zuerst lesen und worauf er später viel-

Interface DesignDie Gestaltung der Schnittstelle Mensch – Maschine

.

Interface Design ist weit mehr als nurScreendesign. Es geht darum, den User aufdie Site zu ziehen, ihn dort zu behalten undihn zum Wiederkommen zu bewegen.

.

19Interface Design

schickte Gestaltung und Anordnung der Inhal-te zu lenken, ohne dass er es bewusst wahr-nimmt.

Die einfachste Methode nonlinearer Navi-gation sind HyperlinksHyperlinksHyperlinksHyperlinksHyperlinks, die Stichwörter inTexten mit weiterführenden Informationenverbinden. Dieser Ansatz gehört zu den ele-mentaren Bestandteilen des WWW, wobeihier der Benutzerführung und dem Orientie-rungssystem eine besondere Bedeutung zu-kommt. Der User muss immer wissen, wo ersich befindet und wie er wieder dorthinkommt, wo er gerade war. Mit höchstens zweiKlicks zu jedem wichtigen Inhalt ist deshalbeine der Maximen im Netz.

Die wichtigste Frage zu BeginnWelcher User kommt wann und warum aufmeine Site?

Es ist es nur sehr selten sinnvoll, sämtlicheInformationen, die sich auf der Site befinden,auf die Homepage zu legen und zu verlinken,sodass sich jeder einfach bedienen kann. Zuschnell werden große Mengen an Informationunübersichtlich. Es empfiehlt sich, verschie-dene BenutzergruppenBenutzergruppenBenutzergruppenBenutzergruppenBenutzergruppen und deren Bedürfnisseauszumachen: schnell an die wichtigsten Infosgelangen, sich treiben und von visuellen Im-pulsen leiten lassen, analytisch an Inhalte her-angehen etc. Danach können Inhalte und Zu-gänge kategorisiert und festgelegt werden.

Diese Verhaltensweisen sollten sich in derAnwendung abbilden, den verschiedenen Ziel-gruppen einen jeweils anderen Einstieg bietenund den Nutzer so fesseln, dass er nicht vor-zeitig wieder aussteigt. HandlungsabläufeHandlungsabläufeHandlungsabläufeHandlungsabläufeHandlungsabläufe mitEinführung, Höhepunkt und Auflösung müssengestaltet werden, aber nicht wie in klassischenMedien, sondern so, dass sie vom User immerwieder neu bestimmt werden können. Das er-

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

Das Interface

Ein Interface hat verschiedene Aufgaben. Ist esgut, zeichnet es sich häufig dadurch aus, dasses in den Hintergrund tritt und die Inhalte sovermittelt, dass man sich über die SchnittstelleSchnittstelleSchnittstelleSchnittstelleSchnittstellezum Rechner keine Gedanken macht. Grund-sätzlich macht es Inhalte und Informationenerfassbar, es strukturiert, bildet HierarchienHierarchienHierarchienHierarchienHierarchien,erlaubt es, sich durch die Inhalte zu navigieren,und bietet dem User die Möglichkeit, sich je-derzeit zurechtzufinden. Die StrukturierungStrukturierungStrukturierungStrukturierungStrukturierungder Inhalte wird durch das Interface transpa-rent und nachvollziehbar, man wird geführt,aber nicht bevormundet.

Grundsätzlich ist festzustellen: Je struktu-rierter die Inhalte, desto komplexer darf dieSite sein.

Dabei gibt es verschiedene Möglichkeiten,Strukturen anzulegen und Inhalte zu verpa-cken:

..


F Abbildung 1Homepage CNN, http://www.cnn.comDer Vorreiter der klassisch kaskadierenden Nach-richtensite reißt auf der ersten Seite ein aktuellesFeature an und ermöglicht gleichzeitig sehr reduziertund nüchtern den Zugang zu allen anderen News undBereichen.

H Abbildung 2Folgeseite CNN.comDer Artikel zum Teaser der ersten Seite folgt hier inaller Ausführlichkeit, zusätzlich untergliedert in einzelnwählbare Absätze und verlinkt mit Artikeln gleichenThemas. Es liegt nun am User, wie weit er sich in dieInformationskaskaden vertieft.

KaskadenThemen werden auf der ersten Seite angeris-sen, mit einer Headline, einer Subheadline, ei-ner kurzen Zusammenfassung und eventuelleinem Bild. Dabei gibt es immer die Möglich-keit, sich per Hyperlink auf eine Folgeseite zuklicken, auf der eine längere Version des Textesoder gar der ganze Inhalt abgebildet ist. Man

.

bewegt sich also vom Ganzen ins Detailvom Ganzen ins Detailvom Ganzen ins Detailvom Ganzen ins Detailvom Ganzen ins Detail, meistmit der Möglichkeit, sich dann auch noch sehrviel weiter zu verlinken, zum Beispiel zu the-menspezifischen Angeboten, die auf der Siteselbst gar nicht bereit gehalten werden. BestesBeispiel dafür sind fast sämtliche Newssites,die sich in ihrer Aufbereitung doch sehr äh-neln.

.

21Interface Design

HalblinearNicht alle Inhalte bieten sich an, komplettnonlinear abgebildet zu werden. Tutorials undBedienungsanleitungen beruhen zum Beispieldarauf, Schritt für SchrittSchritt für SchrittSchritt für SchrittSchritt für SchrittSchritt für Schritt erfasst zu werden.Außerdem gibt es Inhalte, die so spezifischsind, dass ihnen ein kaskadenartiger Aufbaunicht gerecht würde. In diesem Fall teilt mandie Inhalte in Informationseinheiten auf, dieeinzeln gekennzeichnet werden, auch einzelnansteuerbar sind, aber dennoch in einer ganzklaren Reihenfolge zu betrachten sind. DieseAnordnung bietet auch die Möglichkeit zu Ver-zweigungen, beispielsweise bei einem Frage-bogen, der dadurch sehr viel user-spezifischerund schneller auszufüllen ist.

.

F Abbildung 3Messe Frankfurt: Place yourself

Formulare und Tutorials sollten immer li-near oder halblinear angelegt werden.

Die in Abbildung 3 gezeigte Seite der MesseFrankfurt wurde so konzipiert, dass sie von je-der Messe-Homepage aus anklickbar ist. Sieinformiert über die Möglichkeiten, auf denMesseseiten als Werbepartner aufzutreten. Dasie prozessorientiert ist, klickt man sich zu-nächst linear durch jedes Kapitel, kann dannaber auch gezielt in Unterbereiche zurückkeh-ren.

.


Anwendung von GruppierendHat eine Site sehr viele unterschiedlicheInhalte, sollte man diese gruppieren.

GruppierendIm Gegensatz zu den sich immer mehr speziali-sierenden Sites, die ganz genau auf bestimmteUser abgestimmt sind, versuchen viele Unter-nehmen, sehr unterschiedliche ZielgruppenZielgruppenZielgruppenZielgruppenZielgruppen mitihrer Site abzufangen. Hier bietet es sich ent-weder an, vollkommen unterschiedliche Siteszu gestalten, die unterschiedliche URLs besit-zen und auch über ganz unterschiedliche Ka-näle kommuniziert werden. Oder aber man ge-staltet, vor allem bei starken Namen undBrands, eine Homepage, die gleichsam als Por-tal den Nutzern jeweils ihren eigenen Bereichanbietet. Auf den Folgeseiten wird dann mitganz unterschiedlichen Konzepten undGestaltungsmitteln, die der jeweiligen Ziel-gruppe entsprechen, gearbeitet. Man grup-piert also die Inhalte in immer wieder neuer

Aufbereitung, zum Beispiel einmal für generellInteressierte, einmal für Studenten, einmal fürSchüler und einmal für Arbeitnehmer. Es istunerlässlich, Anspruch und Qualität in allenBereichen auf gleichem Niveau und den Ab-sender klar erkennbar zu halten. Gefährlich isthier auch, sich so sehr an die Zielgruppe anzu-passen, dass der Absender unglaubwürdig wirdund man den User eher verärgert, als ihn anzu-sprechen.

Betrachten wir als Beispiel die Webseite derBarmer Krankenkasse (Abb. 4). Schon auf derHomepage wird differenziert in unterschiedli-che Zielgruppen: Barmer-Kunden, Jugendlichewährend der Berufswahl, Studenten und Ar-beitgeber. Wählt man einen der drei Bereiche,verlässt man das Barmer-Basisangebot und er-hält ganz spezielle Inhalte.

Abbildung 4 E

Homepage der Barmer,http://www.barmer.de

.

23Interface Design

In Abb. 5 sehen Sie die Folgeseiten derBarmer, die Studenten-WG, E-Lok, Wegweiserfür Unternehmen und »Die Barmer« zeigen.Die Seiten sind inhaltlich, farblich und gestal-terisch stark unterschiedlich und sprechen soeinzelne Zielgruppen an. Trotzdem gibt es klardefinierte verbindende Elemente, die sie alsBarmer-Netzweit-Seiten identifizieren.

User-spezifischIm Gegensatz zum gruppierenden Zugang, dergleich am Anfang ganz klar differenziert unddie User in eigene Bereiche führt, vermitteltder user-spezifische Zugang das Gefühl, sichauf einer einzigen Site zu bewegen, auf derman aber doch fast unmerklich einen vorbe-stimmten Weg beschreitet. Man unterscheidethier weniger in bestimmte ZielgruppenZielgruppenZielgruppenZielgruppenZielgruppen, die

sich in ihren Interessen unterscheiden, son-dern in die Art und Weise, wie man sich Infor-mationen beschafft und sich durch Inhaltebewegt. So gibt es zum einen den informa-tionsorientierten Typen, der Informationschnell und klar strukturiert geliefert bekom-men will und sich von Grafik und Animationeher gestört fühlt. Dann ist da der visuelle Typ,dem ein Bild mehr sagt als tausend Worte undder lieber animierte Bilder ansieht, als sichdurch Seiten von Text zu scrollen. Der spieleri-sche Typ wiederum braucht Sound, Bewegungund die Herausforderung und ist dann auch

F Abbildung 5Folgeseiten der Site

Vielfältige ZielgruppenJe unterschiedlicher und vielfältiger die Ziel-gruppen einer Site sind, desto mehr sollte sieauf die einzelnen Gruppen eingehen.

.


Abbildung 6 E

Pixelpark-Homepage 1998/1999

.

bereit, Informationen aufzunehmen und sichmit Inhalten zu beschäftigen. Wenn man dieseArten, sich mit Inhalten auseinander zu setzen,definiert hat und sie auf die eigenen Inhalteüberträgt, lässt sich eine Site sehr viel span-nender und vielschichtiger aufbereiten, um soauch die unterschiedlichsten Typen anzuspre-chen. Bei den meisten Projekten wird schon zuBeginn die Entscheidung für den einen oderanderen Weg gefällt, entweder sehr struktu-riert ohne Bilder, nur Systemtext, oder sehrmarktschreierisch, bunt und überladen. Dochmanchmal kann eine geschickte Kombinationder verschiedenen Arten die besten Resultateerzielen.

Die Site der Pixelpark AG, die hier als Bei-spiel dienen soll (Abb. 6) zielt auf verschiedeneUser-Typen ab. Da ist der Sprinter, der sich perPull-down-Menü die Inhalte auf einen Blickholt, der Spaziergänger, der sich von visuellenEindrücken leiten lässt und über die sich be-wegende Navigationsleiste am rechten Bild-rand navigiert, der weitergehend Interessierte,

der sich im Project Explorer Schritt für Schrittdurch einen typischen Produktionsablauf be-gibt, und der »Heavy User«, der sich immerwieder aktuelle News (Stellenangebote, Pres-se) vom »Kiosk« holt.

Die Inhalte der Folgeseiten (Abb. 7) sind imGrunde zwar immer die gleichen, aber unter-schiedlich 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 rei-nen Information. Doch surft man heute durchsNetz, ist man immer wieder erstaunt, wie we-nig Wert viele Unternehmen, die Unmengenvon Geld in Corporate Design, Werbung undImage stecken, auf die Gestaltung ihrer Web-site legen. Wo sonst nur hoch bezahlte Agen-turen mit Millionenbudgets arbeiten, werdenimmer noch schnell mal ein paar Seiten ins

25Interface Design

Netz gestellt, die im Leben noch kein erfahre-ner Gestalter gesehen hat. Trotzdem steigt dasBewusstsein natürlich, dass es sich bei denneuen Medien um einen gleichwertigen Kom-munikationskanal handelt, der das Image ge-nauso beeinflusst wie Anzeigen, Broschüren,Spots, Briefpapier oder Architektur.

Gerade im Internet, wo die Konkurrenz nureinen Mausklick weiter liegt, ist es entschei-dend, den User anzusprechen, ihn zu begei-stern und ihn zum Weiterklicken und Anlegenvon Bookmarks zu animieren. Das funktioniertnur, wenn eine Atmosphäre, ein Ambiente ge-

schaffen wird, das sich zum einen in die gene-relle Kommunikationsstrategie einfügt undzum anderen dem Vergleich zu anderen Auf-tritten standhält. Der Gestalter wird zum Re-gisseur, immer auf der Suche nach der richti-gen Methode, bestimmte Inhalte zu vermittelnund den User zu begeistern. Leider ist davongerade im jetzigen Stadium der Professionali-

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

.

F G Abbildung 7Pixelpark, Folgeseiten 1998/1999


sierung, zu einem Zeitpunkt, an dem im Netzwirklich Geld verdient werden kann, wenig zumerken. Gestaltungsraster werden schnell vonanderen Sites übernommen, die Strategie beider Entwicklung des Auftritts beschränkt sichhäufig auf Umsatz und Nutzerzahlen. Dass die-se aber durchaus positiv beeinflusst werden,indem man der Website ein unverwechselba-res Gesicht gibt, wenn der Nutzer überraschtwird, und so in Erinnerung bleibt, wird erstlangsam wieder erkannt.

Es gibt sie natürlich, die Grundregeln desScreendesigns, immer wieder zitiert und er-weitert. Gebot Nummer eins ist sicherlich im-mer noch die Geschwindigkeit. Schnelle Lade-Lade-Lade-Lade-Lade-zeitenzeitenzeitenzeitenzeiten entscheiden meist schon beim Ladender Homepage, ob ein User weiterklickt oderschon vorher abbricht. Gerade bei Service-und Informationssites kann man gut auf großeHintergrundbilder und emotionale Fotos derFirmenzentrale verzichten. Dabei kommt esaber stark auf den Umgang und die Bearbei-tung der Bilder an, auf den Aufbau und dieInformationsdichte der einzelnen Seiten.

Die Grundlagen klassischen DesignsGrundlagen klassischen DesignsGrundlagen klassischen DesignsGrundlagen klassischen DesignsGrundlagen klassischen Designs geltenentgegen weit verbreiteter Hoffnungen auchim Netz. Nur weil man mit den neuen Medienarbeitet, heißt das nicht, dass man alles überBord werfen muss, was bisher Gültigkeit hatte.Fünf verschiedene Schriften auf einem Screensehen eben auch nicht besser aus als in einerAnzeige. Natürlich nimmt man Gestaltung aufdem Bildschirm anders wahr als auf Papier. DieAuflösung ist schlechter, der Farbaufbau einanderer, die Fläche begrenzt. Gerade deswe-gen bedarf es professioneller Designer, die sichdamit beschäftigen, dieses Medium zu formenund weiterzuentwickeln. Ob eine Site gut ge-staltet ist, hat nichts mit Geschmack zu tun,

sondern mit einigen Parametern, die in denfolgenden Kapiteln ausführlich erklärt werden.

Die Möglichkeiten zur Gestaltung im Netzsind eher bescheiden. Umso wichtiger, sie sehrgut zu kennen!

Für die Gestaltung einfacher Websites gibtes ganz klare grundsätzliche Gestaltungsmittel,die für sich alleine und in ihrer Kombinationüber den Erfolg oder Misserfolg der Site ent-scheiden können. Grundgerüst ist HTMLHTMLHTMLHTMLHTML, dieHypertext Markup Language, mit welcher derAufbau der einzelnen Seiten und ihr Konstruktbeschrieben und vom Browser so interpretiertwird, dass beim User eine zusammenhängendeWebsite ankommt. SchriftSchriftSchriftSchriftSchrift, deren FarbeFarbeFarbeFarbeFarbe unddie Hintergrundfarbe Hintergrundfarbe Hintergrundfarbe Hintergrundfarbe Hintergrundfarbe waren die ersten Gestal-tungsmittel und setzen auch heute noch ganzklar Ausrichtung und Stimmung einer Site fest.BilderBilderBilderBilderBilder, in verschiedenster Art und Weise einge-setzt, bedeuten zwar zusätzlichen Daten-transfer, sind aber wohl das beste Mittel, umder Site ein »Gesicht« zu verleihen. Mit Hilfevon so genannten TabellenTabellenTabellenTabellenTabellen werden die Inhalteund Gestaltungselemente auf einer Seite ange-ordnet und positioniert. Da jeder User selbstbestimmt, wie groß er sein Browserfenster auf-zieht, ist es hier besonders wichtig, an allemöglichen Eventualitäten zu denken. FramesFramesFramesFramesFrameswiederum bestimmen, wann der User welcheKombination welcher Seiten sieht. Zu den ein-fachen Gestaltungsmitteln, die auch nochnicht sehr multimedial sind, gehören einfacheAnimationenAnimationenAnimationenAnimationenAnimationen, eine Abfolge von Einzelbildern,durch die sich die Möglichkeiten der Gestal-tung und Informationsvermittlung deutlicherhöhen.

.

27Interface Design

Branding

Neben der Informationsvermittlung, derInformationsstrukturierung und der User-An-sprache ist es unerlässlich, den Absenderkenntlich zu machen, ein Image zu transportie-ren und der Site ein unverwechselbares Ge-sicht zu verleihen. Wichtigste Aufgabe klassi-schen Corporate DesignsCorporate DesignsCorporate DesignsCorporate DesignsCorporate Designs ist es, ein klares Bilddes Unternehmens zu zeichnen, es so zu stär-ken, Durchgängigkeit und Wieder-erkennbarkeit zu bewirken und sich ganz klarvon den Wettbewerbern zu differenzieren. ImNetz scheint das oft anders zu sein. Nicht nur,dass man auf einigen Seiten nach zwei Klicksnicht mehr weiß, von wem die Site nun eigent-lich ist, viel schlimmer ist es, wenn man dreiSites nebeneinander betrachtet und schonbeim bloßen Abdecken des Logos Problememit der Zuordnung bekommt. AmerikanischeStandards sowohl bei E-Commerce als auchbei Newssites werden fast identisch übernom-men. Und auch wenn die Aufteilung der Sitevielleicht wirklich momentan effektiv ist, sosollte man sich doch die Mühe machen, aucheigene Gestaltungsmerkmale mit einfließen zulassen. Das alles ist Bestandteil des immerwichtiger werdenden Themas E-Branding (sie-he auch Kapitel 19, »E-Branding«).

Flexibilität, Modularität undSkalierbarkeit

Sind beim Punkt Branding und Corporate De-sign ganz klar klassische Designkompetenzengefragt, bedeutet Screendesign natürlich auch,sich Herausforderungen zu stellen, die mitklassischem Design-Know-how nicht so ein-fach bewältigt werden können. Ein wichtiger

Faktor ist die Schnelligkeit und SchnelllebigkeitSchnelllebigkeitSchnelllebigkeitSchnelllebigkeitSchnelllebigkeitdes Internet. Innerhalb der letzten fünf Jahrehaben sich die Anforderungen permanent ver-ändert, Relaunches, technische Updates, Er-weiterungen von Websites sind an der Tages-ordnung. Man muss sich permanent dentechnischen, vor allem aber den inhaltlichenAnforderungen stellen. Mittlerweile ist jedemklar geworden, dass man mit den neuen Me-dien Geld verdienen oder zumindest sparenkann. Und dass man schon innerhalb kürzesterZeit erfährt, ob die Ideen und StrategienFrüchte tragen oder ob man die Zielgruppe mitseinem Vorhaben nicht erreicht hat. Oft wirdnur mit kleinen Teilbudgets gestartet, mit demZiel, die Site zu erweitern, zu verändern, aus-zubauen, sobald man erste Erkenntnisse überdas Nutzer-FeedbackNutzer-FeedbackNutzer-FeedbackNutzer-FeedbackNutzer-Feedback erhalten hat oder sichinterne Strukturen verändern.

Flexibilität, Modularität und Skalierbarkeitsind also systemimmanente Features, die vonAnfang an bei Strategie, Konzeption und Ge-staltung sowie technischer Realisierung beach-tet 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 alsauf eine andere. Websites sind heute national,morgen regional oder international. Das be-deutet, dass man ganz am Anfang alle zu die-sem Zeitpunkt vorhersehbaren EventualitätenEventualitätenEventualitätenEventualitätenEventualitätenmit einplanen muss, auch wenn sie im erstenSchritt gar nicht umgesetzt werden.

Es ist leider so: Eine gute Website ist nie-mals fertig. Bereiche müssen so eingebundensein, dass sie im Falle eines Misserfolgs schnellverändert oder weggenommen werden kön-nen, ohne dass die ganze Site darunter leidet.

.


Ein Servicebereich, der erst nach vier Monatendazukommt, weil das Backend noch nicht ge-klärt werden kann, ist besser als ein vorläufigerHauptnavigationspunkt, der viel verspricht,aber nichts hält. Hinzu kommt die Tatsache,dass die Sites auf jedem Rechner, auf jedemSystem, in jedem Browser unterschiedlich dar-gestellt werden und man sich niemals auf eineeinzige Darstellung verlassen darf. Das hatganz deutlichen Einfluss auf die Gestaltungund bedeutet leider manchmal auch, dass mannicht immer das langfristige optimale Ergebnisfür alle Zeiten erzielen kann, da man einfach zuviele Faktoren berücksichtigen muss, die erst indrei Monaten zum Tragen kommen.

Wir befinden uns immer noch in den Kin-derschuhen der interaktiven Medien. Kaumhat sich ein Bereich wie E-Commerce etabliert,kommen mit WAP und Breitband Themen aufuns zu, die wir grundlegend neu diskutierenmüssen, natürlich auf der Basis dessen, was inden vergangenen Jahren entwickelt wurde.Aber es gilt doch, eine neue Sprache zu ent-wickeln, die dem Medium gerecht wird. Dasklassische Beispiel ist die Umsetzung einer Bro-schüre eins zu eins im Netz. Nicht nur, dass dieInhalte vollkommen falsch konzipiert sind, in-dem sie zu lang oder zu unstrukturiert sind.Dazu kommt noch, dass Interaktivität, einesder Schlüsselelemente im Netz, kaum genütztwird, User-Feedback eher lästig als gewollt istund die Gestaltung bezüglich Layout und File-größen kaum den Netzkriterien entspricht. Einneues Medium erfordert eine neue Spracheneue Spracheneue Spracheneue Spracheneue Sprache,sie ist nur in Ansätzen vergleichbar mit derSprache des Kinos, des Fernsehens, mit dervon Zeitschriften und Büchern. Der große Un-terschied ist die Interaktivität, die unmittelbareVerbindungVerbindungVerbindungVerbindungVerbindung von Medium und User, der Selbst-Selbst-Selbst-Selbst-Selbst-bestimmtheitbestimmtheitbestimmtheitbestimmtheitbestimmtheit des Nutzers und der DigitalitätDigitalitätDigitalitätDigitalitätDigitalität

des Mediums an sich. Man muss das Mediumnutzen, ihm gerecht werden, nicht versuchen,bekannte Sachverhalte ohne ReflexionReflexionReflexionReflexionReflexion undTransferleistungTransferleistungTransferleistungTransferleistungTransferleistung eins zu eins zu übertragen.Neuen Verhaltens- und Interaktionsweisenkann man nicht mit einer 3D-Nachbildung ei-ner virtuellen Bank begegnen, bei der ich micherst mühsam durchs Foyer scrollen muss, diekleinen Schilder an der Tür lesen und dann aufdem Schreibtisch des Sachbearbeiters meinenAktenordner suchen muss.

Die Main Idea

Es ist die Main Idea, also die KernideeKernideeKernideeKernideeKernidee, um diesich alles dreht. Diese Idee kann das Stichwort»Service« sein, was bedeutet, dass die Siteganz klar und strikt serviceorientiert ist undjeder Inhalt und jedes Gestaltungselement da-rauf überprüft wird. Beim Auftritt für den Fern-sehsender Super-RTL, war die visuelle und in-haltliche Metapher »Multivision«, ein Screen,auf dem immer etwas passiert, sich Inhaltepermanent austauschen, zusammen aber einGesamtbild ergeben, das immer passt und har-monisch ist. Das bedeutet ganz klare Anforde-rungen an Design und Inhalte, die beispiels-weise alle in »Häppchen« verpackt werdenmüssen, und hat für den User, in diesem FalleKids, wiederum den Vorteil, stets neue schnellzu erfassende Inhalte zu bekommen. DiesesPrinzip zieht sich durch die komplette Site, derNutzwert ist hier immer neuer Spaß und Un-terhaltung.

Man muss vorsichtig sein, dass man bei derWahl von MetaphernMetaphernMetaphernMetaphernMetaphern nicht zu platt wird undsie immer der Zielgruppe entsprechen. Chat-rooms in Form einer lustigen Bar gehören hof-fentlich bald der Vergangenheit an, die Ein-

.

29Interface Design

BeispielsiteUnter http://www.ups.com findet man wirkli-chen Mehrwert im Netz. Die Site ist zwarschlecht gestaltet, aber das sei in diesem Falleverziehen.

schränkungen, die man in Kauf nimmt, nurweil beim Eintritt in die Virtualität krampfhaftversucht wird, möglichst viel Bekanntes ausder wirklichen Welt mitzunehmen, machen eskaum möglich, das Medium so zu nutzen, wieman könnte. Die virtuelle Bar mit Barhockernund Barkeeper zum Beispiel lässt gar nicht erstzu, dass man sich Gedanken über Kommunika-tionsmöglichkeiten und Programmierungenjenseits von Metaphern für »laut reden« und»flüstern« macht. Deshalb gilt: Es klappt nurselten, die Realität eins zu eins ins Netz zuübertragen. Interfaces in Form einer Fern-bedienung gibt es schon genug!

Es ist dabei der Kern der MarkeKern der MarkeKern der MarkeKern der MarkeKern der Marke, den manauf das Netz übertragen muss. Das ist nichteinfach, ein gutes Beispiel dafür ist jedoch deramerikanische Lieferservice UPS. Als Markt-führer auf seinem Gebiet beschäftigte er sichlange Zeit mit der schnellen und zuverlässigenLieferung von Gütern aller Art. Bis irgend-

jemand auf die grandiose Idee kam, die Daten-bank, in der alle Bewegungen aller Lieferungenauf die Minute genau festgehalten werden, öf-fentlich zu machen und per Zugangscode insInternet zu stellen. Nun kann ich genau ver-folgen, wann mein Paket Berlin verlassen hat,wo es gerade steckt und dass es vielleichtschon seit zwei Tagen beim Empfänger ist, ob-wohl der versucht, mir Gegenteiliges zu erklä-ren. Aber das war nur der erste Schritt, denndie Datenbanken sind zu weitaus mehr imstan-de, als einfach nur Wege zurückzuverfolgen.Ein passendes Konzept, ein gutes Interface undein geeignetes Businessmodell könnten UPS zueinem noch nie da gewesenen Logistikunter-nehmen machen, das über das Netz Einblick inalle Phasen der Beschaffung, der Produktionund der Verteilung von Waren bietet, aberauch komplett neue Services offeriert, die sichheute so noch niemand vorstellen kann.

.


InteraktionNavigation, Orientierung und Struktur

Ein Navigationssystem liegt fast jederWebsite zu Grunde, schließlich werdenBesucher mit dessen Hilfe durch die Sitegeführt. Vor allem komplexe Sitesbenötigen unbedingt eine durchdachteInteraktionsstruktur.

Aufgaben der Menüführung:E Orientierung schaffenOrientierung schaffenOrientierung schaffenOrientierung schaffenOrientierung schaffen

Vor allem bei Sites mit hauptsächlich redak-tionellem Inhalte wie Magazinen oder Un-ternehmensdarstellungen sollte der Besu-cher mittels der Navigationsstruktur eineOrientierung über die angebotenen Inhalteerhalten. So könnten z.B. Rubriken oderProduktbereiche Teil der Navigation seinund einen ersten Überblick bieten.

E PrioritätenPrioritätenPrioritätenPrioritätenPrioritäten setzensetzensetzensetzensetzenAuf komplexe Sites greifen häufig Besuchermit unterschiedlichen Anforderungen zu. Sointeressieren sich beispielsweise für die Sitewww.mobilcom.de sowohl Pressevertreter,Bewerber oder Investoren als auch Kunden.Da Letztere die häufigste Sorte von Besu-chern sein dürften, ist die Menüführungauch ganz auf deren Bedürfnisse zugeschnit-ten, alle anderen Nutzertypen finden in derRegel einen eigenen Einstieg in ihren Be-reich.

E Steuerung des SurfverhaltensSteuerung des SurfverhaltensSteuerung des SurfverhaltensSteuerung des SurfverhaltensSteuerung des SurfverhaltensBegriffe, die in einer Navigationsstruktur anprominenter oder oberster Stelle stehen,werden von den Besuchern am häufigsten

Ein gutes Navigationssystem hilft einerseits

jedem Besucher, innerhalb kürzester Zeit aufdie Inhalte zurückzugreifen, die er benötigt.Andererseits ermöglicht es auch den Betrei-bern, die Besucher zu steuern und möglichstlange auf der eigenen Website zu halten. Wirunterscheiden zwischen statischen und dyna-mischen Navigationskonzepten, wobei erstereimmer noch die größte Verbreitung haben.

Statische Navigation

Zu einer statischen Navigation gehören in derRegel:E Die Standortbestimmung (= Bereichs-

kennung)E Die Links zu Parallelinhalten der gleichen

HierarchiestufeE Links zu übergeordneten Ebenen oder der

Hauptnavigation

Der Menüführung gebührt bei der Gestal-tung von Navigationskonzepten eine zentraleRolle, denn in der Regel bietet sie die besteÜbersicht über alle angebotenen Inhalte.

E E

Bleiben Sieübersichtlich!

.

31Interaktion

geklickt. Als Gestalter macht man sich dieszunutze, um auf neue Bereiche und Inhalteaufmerksam zu machen.Generell kann man jedoch feststellen, dass

die klassische Menüführung immer häufiger zuGunsten dynamischer Navigationskonzepte inden Hintergrund gerät.

Dynamische Navigation

Durch den Einsatz von datenbankbasiertenSystemen und die gestiegene Komplexität vie-ler Sites hat es oft Sinn, auf statische Menü-

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

G Abbildung 2Dynamische Navigation bei www.amazon.de

führung weitgehend zu verzichten und statt-dessen die Bedürfnisse des Besuchers und dieAnforderungen eines Bereiches als Grundlagefür eine dynamische Navigation zu wählen.Von dynamischer Navigation spricht mandann, wenn weiterführende Links und be-nutzerführende Zeichen von einem aktuellenZustand abhängig sind. Meist setzt dies eineDatenbank voraus, die bei jeder Seite regelnkann, ob und welche dynamischen Navi-gationspunkte dargestellt werden.

Dynamische Navigation bei Shop-SystemenDie wichtigste Funktion einer Shopping-Platt-form ist es, die Besucher zum Kauf anzuregen.Dabei ist es sinnvoll, auf den ersten Seiten einegrößtmögliche Auswahl zu zeigen, die im be-sten Fall personalisiert ist, d.h. hauptsächlichElemente beinhaltet, die den momentanenNutzer interessieren (sofern man ihn kennt ...).Im Laufe des Kaufprozesses sollten dann die

Wahlmöglichkeiten zur Navigation immer wei-ter eingeschränkt werden, sodass kurz vorAbschluss nur noch lineare Möglichkeiten ge-geben sind (»Jetzt bestellen«). Nach Abschlussdes Verkaufes sollte dann wieder die ganzeVielfalt der Navigation zur Verfügung stehen,um weitere Kaufprozesse anzuregen (sieheauch das Kapitel E-Commerce).

.


Dynamische Navigation wird also bestimmtdurch:E Ein »wissendes« System im HintergrundE Die Erkenntnis, wo sich der Nutzer gerade

befindetE Eine Antizipierung der Handlungswünsche

des Nutzers

Mit dynamischen Systemen wird es sehr vieleinfacher, den Nutzer durch eine Website zuleiten. Je umfangreicher eine Site und je hete-rogener die Zielgruppe ist, desto mehr sprichtfür eine Dynamisierung der Benutzerführung.

Der Einsatz dynamischer Navigationsformenmacht es nötig, dass alle Beteiligten an einemProjekt nicht mehr in Navigationshierarchiendenken, sondern in Situationen. Für die Erstel-lung von Konzepten bedeutet dies, für allepotenziellen Nutzungssituationen Storyboardszu erstellen, die zwar jeweils über gleiche Ele-mente verfügen, aber je nach Situation immerneu zusammengestellt werden.

Navigationswerkzeuge

Einem Gestalter stehen unterschiedlichsteMöglichkeiten zur Verfügung, um ein Navi-gationskonzept umzusetzen. Die Wahl des ein-gesetzten Werkzeuges hängt von unter-schiedlichen Faktoren ab. Dazu gehören:E LadezeitE AufmerksamkeitsstärkeE Gestalterisches KonzeptE InteraktivitätE Einlesen von Datenbankinhalten1.1.1.1.1. MetaphernMetaphernMetaphernMetaphernMetaphern

Sie nehmen Bezug auf bekannte Signale, diein der »realen Welt« häufig verwendet wer-den (Abb. 3). Dadurch ist die Lernkurve ex-trem niedrig, denn jeder Nutzer hatte inseinem Leben schon ein Mal einen »Waren-korb« oder einen Einkaufswagen in derHand. Bei der Wahl geeigneter Metaphernist zu bedenken, dass diese oft nicht in allenKulturkreisen oder sozialen Gruppen gleichverstanden werden. Der Buchstabe »i«, inwestlichen Kulturkreisen als Symbol für In-formation, ist zwar bei uns weit verbreitet,

F Abbildung 3Inhaltliche Metaphern wie Warenkorb, Lexikon, Kasseoder Postkarte können durch Icons noch gestützt wer-den, wie hier bei www.redseven.de.

Abbildung 4 E

Beim Einsatz von Redaktions-systemen beliebt: Systemtext

.

33Interaktion

3.3.3.3.3. »Gebrannte« Typo»Gebrannte« Typo»Gebrannte« Typo»Gebrannte« Typo»Gebrannte« TypoHierunter versteht man Schrift, die in einemBildbearbeitungsprogramm wie Photoshopoder Fireworks gesetzt und dann nicht zuverändern als Bild abgespeichert (»ge-brannt«) wurde. Ein Hauptvorteil dieserElemente sind ihre uneingeschränkten Ge-staltungsmöglichkeiten in Bezug auf die ver-wendete Schriftart, den Zeilenabstand, dasSpacing oder das Kerning. Da die Inhalte ei-ner Website in der Regel als Text vorliegen,ist gebrannte Typo oft ein Hauptträger desCorporate Designs. Auf Grund der schlech-ten nachträglichen Editierbarkeit sollte je-doch darauf geachtet werden, dass nurdann Texte als Bild verwendet werden,wenn diese sich so gut wie nie ändern.

4.4.4.4.4. SystemelementeSystemelementeSystemelementeSystemelementeSystemelementeElemente, die Bestandteil des Betriebssys-tems oder Browsers sind, werden System-elemente genannt. Beim Aufbau der Seitewerden nicht die Elemente selbst aufgeru-fen, wie etwa bei Bildern, sondern nur derBefehl, die Elemente aus dem Betriebssys-tem zu laden. Die Vorteile liegen klar aufder Hand: Sowohl was Schnelligkeit der

ein Japaner oder Chinese dürfte mit derEntschlüsselung jedoch einige Zeit verbrin-gen. Ein weiterer Nachteil visueller Meta-phern ist, abgesehen von ihrer Ladezeit, diefast schon epidemische Verbreitung be-stimmter Symbole wie der Lupe. Ein eigen-ständiges Design, das sich von der Konkur-renz deutlich absetzt, ist mit diesenSymbolen kaum noch zu erreichen. Da Bil-der generell einen höheren Aufmerksam-keitswert haben als Text, werden Symbolevom Auge bevorzugt wahrgenommen, washinderlich sein kann, wenn nur Neben-funktionen wie »Suche« oder »Lexikon« da-mit belegt sind.

2.2.2.2.2. SystemtextSystemtextSystemtextSystemtextSystemtextSchon allein auf Grund der schnellen Lade-zeiten von Texten ist das erste im WWWmögliche Navigationselement als Link amhäufigsten zu finden. Systemtext zur Navi-gation ist leicht und jederzeit editierbar undkann daher komplett aus Datenbankengeneriert werden. Nachteilig ist jedoch,dass dieser kaum zu gestalten ist und visuellnicht unbedingt im Vordergrund steht(Abb. 4).

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

.


Darstellung als auch leichte Editierbarkeitangeht, gibt es kaum eine Möglichkeit derNavigation, die besser ist. Leider jedoch istdas Design vom jeweils verwendeten Be-triebssystem abhängig und somit wenigplanbar (Abb. 6).Während sich Checkboxes und Radio But-tons in erster Linie für die Gestaltung vonFormularen eignen, findet man Pop-up-Me-nüs häufig dann wieder, wenn viele gleichgeordnete Navigationselemente wie z.B.Produktgruppen oder Länder ausgewähltwerden sollen.

F Abbildung 6So unterschiedlich sehen Systemelementeunter Macintosh und Windows aus.

Abbildung 7 E

Selten findet man Sites, die mit Systemelementen eherkreativ als informativ umgehen: www.artcenter.edu.

5.5.5.5.5. Aktive NavigationselementeAktive NavigationselementeAktive NavigationselementeAktive NavigationselementeAktive NavigationselementeImmer dann, wenn bei der Berührung mitder Maus eine Reaktion eines Navigations-elementes erfolgt, nennt man dies aktiv.Verbreitet ist vor allem der Rollover-Effekt,oft eingesetzt bei sehr komplexen Menü-strukturen, um dem Nutzer eine bessereOrientierung zu ermöglichen. Doch auchum weitere Informationen zu einem Menü-punkt zur Verfügung zu stellen, sind dieseElemente gut geeignet. Da Rollover in derRegel mit einem JavaScript verwirklichtwird, ist der Effekt nur mit zwei Bildern glei-cher Größe zu erreichen, was dieselbenNachteile mit sich bringt wie der Einsatzvon gebrannter Typo.

.

35Interaktion

Rollover-Effekte mit Dreamweaver 3.0

Mit modernen darstellungsbasierten HTML-Edi-toren ist es auch für Ungeübte kein Problemmehr, selbst Rollover-Effekte zu erstellen. UnterDreamweaver funktioniert dies wie folgt:

Geben Sie im darauf folgenden Fenster Ihrebeiden Bilder an. Wenn Sie die Option Roll-

over-Bild Vorausladen wählen, beschleunigtsich im Browser der Effekt, da beide Bilder gela-den werden, auch wenn anfangs nur dasOriginalbild angezeigt wird.

2. Rollover-Bild erstellenÖffnen Sie in Dreamweaver ein neues Doku-ment und wählen im Menü Einfügen denUnterpunkt Rollover-Bild einfügen, oderklicken Sie auf das entsprechende Objekt imObjekte-Fenster.

.

1. GrundlagenErstellen Sie in einem Bildbearbeitungs-programm zwei gleich große Bilder, die sich beimBerühren mit der Maus austauschen sollen. Ach-tung: Wenn die Bilder nicht exakt gleich großsind, werden sie verzerrt!


2. Rollover-Bild erstellenIm Browser werden die Rollover-Austauschbilderbei Berührung mit der Maus angezeigt.

In unserem Beispiel verfahren wir mit weite-ren Navigationsbegriffen und ihren Rollover-Ge-genstücken genauso und speichern das Doku-ment dann ab.

.

37Interaktion

Strukturierung einer Site:Flexibel, skalierbar, modular

Als die Dresdner Bank 1999 ihre Website »re-launchte«, speckte sie diese auch inhaltlich ab.Übrig blieben nach der Überarbeitung über3000 HTML-Seiten, ein paar hundert PDF-Do-kumente und ebenso viele interaktive Werk-zeuge. Man kann sich vorstellen, dass eineWebsite dieser Größenordnung nicht mehr inihrer Gesamtheit über ein hierarchisches Menünavigierbar ist. Doch was kann getan werden,um wuchernden Inhalten und NavigationenEinhalt zu gebieten? Um eine Lösung zu fin-den, muss man sich fragen, von welchen Fak-toren 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

SiteE Die Möglichkeit permanenter Updates

durch ein RedaktionsteamE Die Möglichkeit, Daten aus Datenbanken zu

beziehenE Das eingesetzte RedaktionssystemE Das Layout

Über diese Faktoren sollte man sich beimAufbau der Site bewusst sein, denn struk-turelle Änderungen im Nachhinein bedeutenimmer dann, wenn ein Redaktionssystemeingesetzt wird, deutlich höheren Aufwand.

Folgende Vorgehensweisen erleichtern es,die meist riesige Menge an Inhalten zustrukturieren:1.1.1.1.1. TeamworkTeamworkTeamworkTeamworkTeamwork

»Gestalter müssen sich nicht mit allen Inhal-ten auseinander setzen, Konzeptern undTextern ist es egal, wie die Navigation aus-

sieht, und Techniker interessieren sich nichtfür das Design!«Leider hört man Ähnliches aus allen Lagern,und doch ist es ganz und gar nicht so: Nurwenn alle nötigen Kompetenzen zusam-menarbeiten, kann eine sinnvolle und effizi-ente Struktur geschaffen werden, die allenAnforderungen an eine hervorragende In-formationsvermittlung Genüge tut.

2.2.2.2.2. ZielgruppenorientierungZielgruppenorientierungZielgruppenorientierungZielgruppenorientierungZielgruppenorientierungDie meisten Sites haben mehr als eine Ziel-gruppe. Diese werden mittlerweile nichtmehr wie klassische Marketingzielgruppen(»20–28 Jahre, männlich, 3500 DM Monats-brutto ...«) definiert, sondern durch die Si-tuation, in der sie sich befinden. Manspricht deshalb auch von »situativen Ziel-gruppen«. Grob definiert handelt es sich da-bei um die dem Besuch einer Site zu Grun-de liegende Interessenlage. Zielgruppenkönnen Journalisten, Investoren, bestehen-de Kunden, Interessenten, Bewerber, Part-nerfirmen oder Gewinnspielteilnehmer sein.Vor der eigentlichen Strukturierung der In-halte sollte man sich fragen, welche rele-vanten Zielgruppen die Site aufsuchen wer-den und welche Bedürfnisse diese haben.Am sinnvollsten ist es, diese Bedürfnisse derGestaltung des Sitekonzeptes zu Grunde zulegen, um dann einzelne Storyboards zuentwickeln. So findet sich der bestehendeKunde mit dem Wunsch, eine Bedienungs-anleitung anzusehen, um dann Zubehör zuerwerben, ebenso schnell zurecht wie dieBewerberin, die sich eine Anfahrtsskizzeausdrucken möchte.

.


3.3.3.3.3. Keinen Nutzer interessiert die HierarchieKeinen Nutzer interessiert die HierarchieKeinen Nutzer interessiert die HierarchieKeinen Nutzer interessiert die HierarchieKeinen Nutzer interessiert die Hierarchieeines Unternehmenseines Unternehmenseines Unternehmenseines Unternehmenseines UnternehmensOb beispielsweise eine Bank unterschiedli-che Verantwortliche und Geschäftsberei-che für das Immobiliengeschäft und denFirmenkundenservice hat, ist dem Unter-nehmer egal, der seine neuen Büroräumefinanziert haben will. Denken Sie nicht ininhaltlichen Hierarchien, sondern versuchenSie auch hier, die Ansprüche der Nutzer vor-wegzunehmen. Das muss sich auch im Auf-bau der Site niederschlagen: Im Idealfallbekommt jeder Nutzer genau die Inhaltegeboten, die ihn, und nur ihn alleine, inter-essieren – unabhängig von Navigationshie-rarchien und Firmenstrukturen.

4.4.4.4.4. Skalierbarkeit und FlexibilitätSkalierbarkeit und FlexibilitätSkalierbarkeit und FlexibilitätSkalierbarkeit und FlexibilitätSkalierbarkeit und FlexibilitätAuch wenn man beim Aufbau einer Site vie-les beachten kann, die Zukunft wird manselten vorhersehen können: Neue Bereicheund Nutzergruppen können hinzukommen,Geschäftsbereiche können wegfallen, undplötzlich funktioniert der gesamte Aufbauder Site nicht mehr. Um Änderungen wirdman nie herumkommen, doch hilft esdurchaus, bereits am Anfang das Naviga-tionssystem und den Aufbau einzelnerTemplates so zu gestalten, dass eine Skalier-barkeit von 50 % mehr oder weniger inhalt-lichen Elementen problemlos vonstattengehen kann.

.

E

Das Ziel istOne 2 One.

E E

Planen Sie vor-ausschauend.

39Interaktion

.

.

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 unterHTML

60 Bildformate und Bildreduktion

63 Bildrechte

64 Animation im Netz

64 Die Aufgaben von Animationen imNetz

68 Die technische Umsetzung

41Gestalterisches

42 Gestalterisches

Layout im WebGrundlagen der Gestaltung

Dass Gestaltung im Netz anders funktioniert,ist klar. Aber worauf kommt es wirklich an,und wie kann man die gröbsten Fehlervermeiden?

Die Größe

Beim Anlegen eines Grundrasters, das übrigensauch jedem Buch und jeder Zeitschrift zuGrunde liegt, soll man sich im Klaren sein, dassman sich grundsätzlich nie darauf verlassenkann, auf allen Browsern und allen Plattformendie identische Darstellung zu erzielen. Dasfängt mit der Größe der Monitore an, die von640 x 480 Pixel bis zu 1920 x 1080 Pixel reichenkann, und endet bei der individuellen Größedes Browserfensters, das sich der User beliebiggroß aufzieht.

Eine Site sollte so gestaltet sein, dass sie beijeder nur möglichen Variante noch halbwegsgut aussieht und vor allem Navigation und In-halt immer zu sehen sind. Bei der OptimierungOptimierungOptimierungOptimierungOptimierunggeht man meistens von einer Größe von 800 x600 Pixel aus, wobei man nicht davon ausge-hen sollte, dass jeder Nutzer sein Browser-fenster so weit geöffnet hat. Da die Mehrzahlder Monitore mittlerweile aber mindestensdiese Größe hat, kann das Fenster auf alle Fälleauf dieses Format gebracht werden.

Bildschirme funktionieren anders als Papier,Browser verhalten sich anders als Zeitschriften,und Internet-User bewegen sich anders durchsNetz als Fernsehzuschauer durch die Tages-schau. Diese eigentlich sehr einfache Erkennt-nis führt zum Schluss dass man für den Screenund besonders für das WWW andere Gestal-tungsmethoden anwenden muss bzw. dass zurklassischen Gestaltung viele neue Ansätze hin-zukommen.

Lange Texte am Bildschirm sind sehr unan-genehm zu lesen, lieber druckt man sie aus,oder freut sich über Layouts, die dem Mediumgerecht werden. Grundlage jeder Website soll-te ein RasterRasterRasterRasterRaster sein, das festlegt, wo welche Be-reiche der Seite positioniert werden, worander User sich orientieren kann und wie maninnerhalb einer klaren Aufteilung Spannungerzeugen kann.

.

43Layout im Web

Hilfreiche SitesUnter www.statmarket.com undwww.webhits.de findet man aktuelle Zahlenund Statistiken zu Monitorgrößen, Browser-versionen und allem, was einem User dasLeben schwer macht.

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

F G Abbildung 2www.allianz-versicherung.de: Selbst bei minima-lem Browserfenster sind Navigation und Inhaltnoch voll nutzbar und zu erkennen.

.

44 Gestalterisches

F G Abbildung 3Bei Siemens-Knows.de ist der Content immergleich groß, nur die weißen Frames am Randverkleinern oder vergrößern sich. Optimiert istallerdings auf 800 x 600 Pixel (www.siemens-knows.de).

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

.

45Layout im Web

Das Raster

Das Layout einer Site wird meistens erst ein-mal in Photoshop erstellt. Man macht also ei-nen ScreenshotScreenshotScreenshotScreenshotScreenshot eines Browserfensters von 800x 600 Pixel mit den gängigen Menüs und erhältso die Grundfläche zur Gestaltung. Und die er-scheint einem dann meistens zu klein!

Auf dieser festgelegten Fläche legt man nunein Raster an, mit dem man die Navigationverschiedener Hierarchien und die Inhalte, alsoBilder und Texte, ausrichtet. Dieses Rastersollte flexibel sein, sich also bei Verkleinerungdes Fensters skalieren.

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

Man muss darauf achten, dass ein ganzgrobes GrundrasterGrundrasterGrundrasterGrundrasterGrundraster allen Seiten zu Grundeliegt, um eine gewisse Durchgängigkeit zugewährleisten. Je komplexer der Auftritt wird,umso stärker kann das Raster jedoch variiertwerden. Und um Spannung zu erzeugen oderInhalte besonders hervorzuheben, kann mandas Raster durchaus auch brechen, allerdingssollte das bewusst geschehen und nicht reinzufällig passieren.

.

46 Gestalterisches

Feste ElementeFeste Elemente wie die Navigation und dasLogo sollten sich aber möglichst immer an dergleichen Stelle befinden und nicht springen, dasie dem User zur Orientierung dienen.

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

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

.

47Layout im Web

Tables

Um Elemente auf einer HTML-Seite zu positio-nieren, verwendet man so genannte Tables.Durch sie kann man Elemente ziemlich genaupositionieren, allerdings immer nur relativ undnicht anhand von x- und y-Koordinaten. Tabel-len kann man entsprechend dem Raster pro-pro-pro-pro-pro-zentualzentualzentualzentualzentual anlegen oder ihnen fixe Größenfixe Größenfixe Größenfixe Größenfixe Größen geben.Es bietet sich zum Beispiel an, der Tabelle, diealle Inhalte umfasst, eine Größe von 80 % zugeben. Der Container nimmt dann eine Breitevon 80 % des Browserfensters ein, egal aufwelche Breite es gezogen wird.

Der Lesbarkeit zuliebeTexte sollten immer in Tabellen gesetzt wer-den, um die Lesbarkeit zu garantieren.

G Abbildung 8 E

Die erste der beiden Tables hat eine prozentuale Größe und ist auchbei verkleinertem Browserfenster ganz zu sehen. Die untere hingegenverschwindet auf der rechten Seite.

Text allerdings könnte man in fixe Tabellensetzen, da er ja nicht weiter als zehn bis fünf-zehn Wörter pro Spalte laufen sollte, und esimmer noch sehr häufig vorkommt, dass Textebei breit aufgezogenem Browserfenster überdie ganze Seite laufen und sehr schlecht zulesen sind.

Tables können beliebig kombiniert undverschachtelt werden, am Anfang lohnt es sich,immer mal wieder den SourcecodeSourcecodeSourcecodeSourcecodeSourcecode von Seitenanzusehen, bei denen das Layout besondersgut gelöst ist.

.

48 Gestalterisches

Frames oder No-Frames

Während man auf einer HTML-Seite mit Tablesgestaltet, hat man mit Frames die Möglichkeit,verschiedene HTML-Seiten gleichzeitig imBrowser darzustellen. Das bietet sich beson-ders an, um die Navigation getrennt von denInhalten zu halten und den Aufbau der Seitebesser kontrollieren zu können.

Mit Frames kreiert man eine so genannteShellShellShellShellShell, die entweder den ganzen Auftritt umgibtoder auch nur aus einer Kopfzeile besteht.Wichtig daran ist, dass sie während der ganzenZeit, in der sich der User auf der Site befindet,

G Abbildung 9 E

Komplexe Frame-Struktur bei den Nestlé Future-Brand-Inves-tigators, die es ermöglicht, die Erscheinung des Auftritts sehrstark zu kontrollieren (www.nestle.fbi.de).

Zur VorbereitungKlären Sie zu Beginn des Projektes mit allenBeteiligten, ob Frames eingesetzt werden odernicht.

stehen bleibt und sich nicht bei jedem Klickneu lädt. Nur so hat der Nutzer wirklich dasGefühl, sich auf einer geschlossenen Site zubefinden, und der Fluss beim Surfen wird nichtdurch das komplette Neuladen der Seite undden damit verbundenen grauen Zwischen-screens unterbrochen. Das Logo oder dieHausfarbe bleiben so permanent sichtbar.

Außerdem ist es deutlich einfacher, sich aneiner NavigationsleisteNavigationsleisteNavigationsleisteNavigationsleisteNavigationsleiste zu orientieren, dienicht mit dem Inhalt nach oben wegscrolltoder bei jedem Klick verschwindet und sichneu lädt. Das subjektive Gefühl für dieLoading-Time ist auch deutlich kürzer, wennnur der Inhalt wechselt.

Doch es gibt natürlich auch einige Argu-mente gegen Frames, die immer wieder vehe-ment vertreten werden.

.

49Layout im Web

Zu viele Frames auf einer Seite wirken sichnachteilig auf die LadezeitenLadezeitenLadezeitenLadezeitenLadezeiten und den Aufbauaus. Mehr als drei Frames können da schon zuBeschwerden führen.

Außerdem ist es schwieriger, die einzelnenUnterseiten in einem Frameset als BookmarksBookmarksBookmarksBookmarksBookmarkszu setzen. Es wird nämlich immer der Frame»gebookmarkt« in dem man zuletzt geklickthat. Im ungünstigsten Falle also derNavigations-Frame. Oder aber man bekommtimmer nur die Einstiegsseite als Link, nie aberden Unterbereich. Dieser Problematik kannman allerdings mit Java-Script entgegenwirken.

Die letzten Argumente gegen Frames sindzum einen die Unverträglichkeit mit vielenDatenbankenDatenbankenDatenbankenDatenbankenDatenbanken. Die meisten Seiten wie Stern-

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

Online, Spiegel-Online, CNN Online habenkeine Frames, weil es deren Datenbank nichterlaubt. Außerdem schließt man mit Framesbestimmte Nutzergruppen aus, deren Browserdiese Technik nicht unterstützen. Einige Seitenbieten deshalb immer noch eine No-Frame-Variante an.

Wofür man sich letztendlich entscheidet,hängt von der Strategie des Auftritts und deranvisierten Zielgruppe sowie dem Anspruchder Site ab. Allerdings kann es nicht sein, dassso eine Entscheidung voreingenommen undüberstürzt noch vor Beginn der Konzeptions-phase getroffen wird, ohne im Team darüberdiskutiert zu haben.

.

50 Gestalterisches

TextgestaltungTypografie und Layout von Texten im Browser

HTML-Seiten sind die wohl feindlichsteUmgebung für Typografie, die man sichvorstellen kann. Zeilenabstände, Ker-ning, Silbentrennung, absolut definierteSchriftgrößen? Nichts davon ist in rei-nem HTML möglich.

Wahrnehmung für den Gestalter? Erstens:Rechtsbündiger oder zentrierter Fließtext amBildschirm ist tabu. Zweitens: Texte über meh-rere Seiten hinweg sollten grundsätzlich iden-tisch aufgebaut sein, damit die Erfassbarkeiteinzelner Elemente nicht immer wieder neuerlernt werden muss.

Satzlayout

Eine HTML-Seite wird immer von oben linksnach unten rechts vom Browser eingelesen.Gibt es keine natürlichen Sperren, wie Tabellenoder Bilder, so läuft ein Text in voller Breite desBrowserfensters weiter. Die Lesbarkeit solcherBuchstabenwüsten ist entsprechend gering,und der Besucher wird es alsbald aufgeben,den Inhalt erfassen zu wollen. Wir haben es inder Hand, Seiten so zu gestalten, dass man dieInhalte gerne wahrnimmt.

Und doch hat es Sinn, sich mit diesem Thema

auseinander zu setzen, denn kaum eine gestal-terische Disziplin wird von vielen Webdesig-nern so sehr außer Acht gelassen wie die Typo-grafie. Vor allem sollte den Screendesignerinteressieren, wie sich Buchstaben, Wörter,Sätze, Absätze und Seiten zueinander verhal-ten müssen, um eine bestmögliche Erfassbar-keit des Inhaltes zu bieten. Und kaum ein an-deres Medium macht es dem Auge so schwerwie der Bildschirm. Gründe genug, um einpaar Grundlagen zu klären.

Einheitlichkeit

Beim Lesen springen unsere Augen permanenthin und her, sie überfliegen einen Satz, undwann immer unser Gehirn den Sinn eines Wor-tes nicht ganz erfasst hat, zwingt es die Augen,zu diesem Wort zurückzukehren und es imZweifelsfall Buchstabe für Buchstabe noch ein-mal zu lesen. Da dieser Vorgang auch am An-fang einer Zeile geschehen kann, müssen dieAugen schnell zum Ende der vorigen Zeilespringen können. Was bedeutet diese Art der

.

51Textgestaltung

FaustregelnEs gibt einige Faustregeln für das Satzlayoutvon HTML-Seiten:E Elf Wörter je ZeileElf Wörter je ZeileElf Wörter je ZeileElf Wörter je ZeileElf Wörter je Zeile können vom Auge am

Bildschirm noch leicht erfasst werden.Durch den Einsatz von Tabellen können Zei-len beschränkt werden. Da die meisten Nut-zer an den eingestellten Standardschriftenund Größen des Browsers nichts verändernund das Browserfenster meist nicht größeroder kleiner als 800 x 600 Pixel ist, gilt:Wenn auf einer Seite nur eine Tabellenspaltemit Text platziert ist, sollte diese nie größersein als 60 % der Seitenbreite.

E Bild-Text-KlammerBild-Text-KlammerBild-Text-KlammerBild-Text-KlammerBild-Text-KlammerOft sind Bilder aussagekräftiger als Texte.Wenn jedoch beide zusammengehören,sollte dies auch optisch klar sein. Als Faust-regel gilt: Text, der rechts neben einem Bildsteht, wird eher im Zusammenhang mitdem Bild wahrgenommen, als wenn er linksdavon stünde.

E Zu viele LinksZu viele LinksZu viele LinksZu viele LinksZu viele Links sind irritierend sind irritierend sind irritierend sind irritierend sind irritierendLinks zu weiterführenden Inhalten und The-men sind zwar durchaus sinnvoll, jedochhat es keinen Sinn, diese wild im Fließtext

zu verstreuen, da der Leser dadurch nur ab-gelenkt wird. Sinnvoller ist es, Links und Zu-satzinformationen am Ende oder Rand einesArtikels zu platzieren.

E Klicken statt scrollenKlicken statt scrollenKlicken statt scrollenKlicken statt scrollenKlicken statt scrollenDie meisten Nutzer bewegen sich lieber ho-rizontal als vertikal durch eine Website. Diehöchste Aufnahmebereitschaft für Textekönnen Sie dann erwarten, wenn Sie diesein sinnvolle Einheiten aufteilen, die auf ver-schiedenen HTML-Seiten angeordnet sind.Hier gilt jedoch: Links, die vor und zurückspringen, sind im Text unbedingt notwen-dig. Eine druckbare Version mit dem gesam-ten Text auf einer gesonderten Seite ist äu-ßerst empfehlenswert.

Vordefinierte HTML-Stile

Einige wenige Textauszeichnungen können vonallen modernen Browsern interpretiert wer-den. Auch wenn damit keineswegs eine demPrintbereich ähnliche Gestaltung erzielt wer-den kann, sind jedoch minimale Möglichkeitengegeben.

F Abbildung 1Ein einheitliches und aufgeräumtes Layout ist beiumfangreichen Inhalten unbedingt notwendig.

.

52 Gestalterisches

Verwendung von Schriftarten

Sowohl die beiden Browserhersteller Microsoftund Netscape als auch große Typo-Häuser las-sen sich einiges einfallen, um verschiedeneSchriftarten in HTML-Dokumenten möglich zumachen. Die Einbindung von Schriften ist je-doch immer noch mühsam und hat bei denwenigsten Besuchern den gewünschten Effekt.

Ursprünglich war in HTML der Einsatz ver-schiedener Typen nicht vorgesehen, manglaubte, verschiedene Stilformate reichen aus,um Dokumente ordentlich gegliedert darzu-stellen. Diese Stile (Fett, Kursiv, TeleType,Überschrift etc.) können auch heute noch mitjedem Browser angesehen werden. Wenn derAutor eines HTML-Dokumentes keine Schrift-art 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 desGestalters installierte Schriftart eingebunden

werden, doch wird diese nur dann beim Besu-cher der Site angezeigt, wenn sie auch aktivvon System geladen ist. Sicherer ist es also injedem Fall, sich auf die Schriftarten zu verlas-sen, die zusammen mit dem Betriebssystemausgeliefert werden. Bei Windows-Nutzernsind dies hauptsächlich: Arial, Times Roman,Courier New, Symbol und Wingdings. BeiMac-Nutzern heißen die entsprechendenSchriften: Geneva, Times, Courier, Symbol undZapf Dingbats.

Anhand der unterschiedlichen Namen kannman sich vorstellen, welche Probleme auftre-ten werden, wenn ein Gestalter am Mac alsFließtextschrift die serifenlose Geneva angibt,beim Besucher am PC aber nur die serifenloseArial zur Verfügung steht. Der Text wird in derStandardschriftart des Browsers angezeigt, unddas ist oft die Serifenschrift Times.

Dieses Problem kann jedoch umgangenwerden, indem grundsätzlich alternativeSchriftarten angegeben werden.

Textauszeichnungen

Ergebnis Textauszeichnung

TeleType <TT> ... </TT>

Fett <B> ... </B> oder <STRONG> ... </STRONG>

Kursiv <I> ... </I> oder <EM> ... </EM>

Unterstrichen <U> ... </U>

Einrückung durch den Listen-Tag ohne <UL> ... </UL>Verwendung des <LI>-Tags

Blinkende Anzeige <BLINK> ... </BLINK>

Hochstellen <SUP> ... < /SUP>

Tiefstellen <SUB> ... </SUB>

Farbe einzelner Textpassagen <FONT COLOR ="#rrggbb"> ... <FONT>

Überschriften <H1> ... </H1> bis <H6> ... </H6>

Gibt als erster Tag nach dem <Body>-Tag die Schriftgröße <BASEFONT SIZE =x>für das gesamte Dokument an. Grundeinstellung ist 3.

.

53Textgestaltung

Zuweisung von Schriftarten inDreamweaver 3.0

1. Schritt 1Wählen Sie im Popup-Menü Schrift die Aus-wahl Schriftartenliste bearbeiten.

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

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

.

54 Gestalterisches

Schriftgrößen

Schriftgrößen unter HTML können mittelszweier unterschiedlicher Systeme definiertwerden. Generell liegt beiden Systemen dieAnnahme zu Grunde, dass jeder Browser eineGrundeinstellung der Schriftgröße hat, die alsBasis für die Berechnung davon abweichenderGrößen dient.

Wenn mittels des ersten Systems eineSchriftgröße angegeben wird, lautet der dazu-gehörige Befehl

<font size="3">beispieltext</font>

wobei size="3" der Grundeinstellung ent-spricht, d.h. ein Nutzer, dessen Standard-schriftgröße im Browser mit 12 angegeben wur-de, sieht diesen Beispieltext in 12 Punkten.

Nach diesem System wird eine größereSchriftart erwirkt, indem man Werte zwischen4 und 7 angibt, also beispielsweise

<font size="6">beispieltext</font>

was dann einer real dargestellten Größe von15 Punkten entspricht (3 = 12 Punkt, 4 = 13Punkt, 5 = 14 Punkt usw.). Eine kleinere Dar-stellung erhält man analog mit den Werten 1und 2.

Das zweite System ist etwas logischer undauch leistungsfähiger, da alle Werte zwischen–7 und +7 angegeben werden können, wobei 0der voreingestellten Größe im Browser ent-spricht:

<font size="+7">Beispieltext</font>

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

Benutzerdefinierte EinstellungenWelches System auch immer verwendet wird,eine Sicherheit darüber, wie der gestaltete Textendgültig bei den Besuchern der Seite darge-stellt wird, gibt es nicht. Schließlich kann jederselbst in den Voreinstellungen des Browsersdefinieren, welche Schrift und Größe er gerneverwenden möchte.

Abbildung 2 E

Der Nutzer hat durch die Vorein-stellungen des Browsers (noch) dieMöglichkeit, ausschließlich eigene

Schriftarten angezeigt zu bekommen.

.

55Textgestaltung

Einsatz von Cascading StyleSheets

Mit der Einführung von CSS oder »CascadingStyle Sheets« wurde seitens des World WideWeb Consortiums versucht, die Unzulänglich-keiten der Textformatierung in HTML zu umge-hen. Leider sind sich jedoch die beiden Brow-ser-Rivalen Netscape und Microsoft bis heutenicht einig darüber, ob und in welcher FormCSS interpretiert werden, was dazu führt, dassauch hier das Ausprobieren die einzig möglicheForm von Sicherheit ist.

CSS definieren das Erscheinungsbild vonElementen wie Schriftart, Farbe oder Wortab-stand und sind somit bestens geeignet, umprofessionell mit Texten arbeiten zu können.Die CSS-Festlegungen sind vergleichbar mitFormatvorlagen in Quark oder Word. Sie be-

finden sich im Head-Bereich einer Seite undgelten grundsätzlich für das ganze Dokument.Einzelne Elemente wie Absätze oder Listenwerden dann auf der Seite nur noch mit einemStyle versehen, der vorher im Head festgelegtwurde. Im Quellcode sieht das dann wie obendargestellt aus:

Es ist möglich, einen Stil auf mehrere Doku-mente anzuwenden, indem das Style Sheetselbst extern als Datei gespeichert wird. Sokönnen Sie beispielsweise das Aussehen allerHeadlines einer Site verändern, indem Sie ein-fach im externen Style Sheet ein anderes For-mat festlegen.

Zur Definition von Style Sheets lesen Siebitte auch Kapitel »DHTML«.

<html>

<head>

<title>Untitled Document</title>

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

<style type="text/css">



</style>

</head>

<body bgcolor="#FFFFFF">

<p class="testcss">Beispieltext </p>

</body>

</html>

G Listing 1

126 E

.

56 Gestalterisches

Text als Bild

So unzulänglich wie die Gestaltungsmöglich-keiten von Text sind, es spielen immer nochviele Webdesigner mit dem Gedanken, Fließ-text in einem »ordentlichen« Programm zu ge-stalten, um ihn dann als Bild gespeichert insWeb zu schicken. Wenn es nicht unbedingt er-forderlich ist: Lassen Sie es besser bleiben!Diese Art der Textdarstellung kostet extremeLadezeiten und ist nicht editierbar.

Wenn es sich gar nicht anders machen lässt,weil beispielsweise eine Hausschrift bei allenHeadlines verwendet werden muss, so gibt eseinige Regeln für den Einsatz von Text als Bild.

Text als Bild speichern: TippsE Geringe DateigrößeGeringe DateigrößeGeringe DateigrößeGeringe DateigrößeGeringe Dateigröße

Reduzieren Sie die Anzahl der Farben aufdas Nötigste. Der Verzicht auf geglätteteSchrift (»Anti-Alias«) reduziert die verwen-deten Farben auf Textfarbe und Hinter-grundfarbe und spart somit Ladezeiten.

E Knapp zuschneidenKnapp zuschneidenKnapp zuschneidenKnapp zuschneidenKnapp zuschneidenNoch mehr Ladezeit können Sie sparen,wenn Sie ein Bild an den Kanten so knappwie möglich zuschneiden.

E Als GIFAls GIFAls GIFAls GIFAls GIF speichern speichern speichern speichern speichernAuf Grund der unterschiedlichen Kompri-mierung ist das Format GIF besser für Linien(und damit auch Schrift) geeignet als einJPEG. Texte sollten deshalb ausnahmslos alsGIF gesichert werden.

.

57Textgestaltung

.

58 Gestalterisches

Farbe und BildRichtige Verwendung von Farben und Bildern

Abgesehen von Texten sind Bilder und farbigeElemente die wichtigsten Gestaltungsmittel imWebdesign. Vor allem Farben eignen sich hervor-ragend für die Codierung unterschiedlicher Bereicheoder inhaltlicher Ebenen. Wer die Möglichkeitenvon farbigen Elementen und Bildern richtig nutzenkann, minimale Ladezeiten beachtet und immerinhaltsorientiert arbeitet, hat schon viel gewonnen.

Das RGB-Farbmodell ist deshalb additiv. Dadie »Farbe« Weiß auf dem Bildschirm die größ-te Helligkeit hat, wird unser Auge hier auch ammeisten gefordert. Farben wirken im RGB-Raum deutlich voller und klarer, werden je-doch je nach Bildschirm unterschiedlich darge-stellt.

Leider haben wir als Gestalter auf keinendieser Faktoren Einfluss, da wir in der Regel janicht wissen, von welchem Bildschirm aus un-sere Seiten betrachtet werden.

Das CMYK ModellDas CMYK-System (Cyan, Magenta, Yellow,Black) hingegen wird beim Druck verwendetund findet am Bildschirm nie Verwendung, daes mit Farbpigmenten arbeitet, die auf einenTräger wie zum Beispiel Papier aufgebrachtwerden. Die verschiedenen Pigmente reflektie-ren das Licht. Je mehr Farben (Pigmente) manüberlagert, umso dunkler wird der Ton. Manspricht deshalb auch vom subtraktiven Farb-modell. Bei der Umwandlung von RGB-Datei-en in das CMYK-Format gehen sehr viele Farb-

Farbsysteme

Bei der gestalterischen Arbeit für Bildschirm-

medien beschäftigen wir uns grundsätzlich nurmit einem Teil des RGB-Farbraumes, der so ge-nannten HTML-Palette. Wer aus dem Bereichder Gestaltung von Printmedien kommt, wirdsich schon häufiger mit der Umwandlung vonRGB- in CMYK-Dateien herumgeschlagen ha-ben. Für alle anderen hier eine kleine Farben-lehre.

Das RGB-ModellMonitorfarben bauen auf dem RGB-Modell(Rot, Grün, Blau) auf. Die drei Primärfarbenwerden als Lichtpunkte erzeugt, die auf unsereNetzhaut treffen. Je mehr Farben wir ineinan-der mischen, desto heller wird der Farbton.

Einfluss auf die Darstellung von FarbenE Die Art des Bildschirmes (z.B. Bildröhre

oder LCD)E Eingestellte Helligkeit und KontrastE Farbprofile mittels SoftwareE Darstellungsfähigkeiten der Grafikkarte

..

59Farbe und Bild

findet sowohl Einsatz in Webeditoren für dieFarbigkeit von Tabellen, Texten oder Hinter-gründen als auch beim Komprimieren vonBildern in das GIF-Format.

Tests haben ergeben, dass es tatsächlich nur212 websichere Farben gibt, da der Internet Ex-plorer unter Windows die Farben #0033FF(RGB: 0,51,255), #3300FF (51,0,255), #00FF33(0,255,51) und #33FF00 (51,255,0) nicht korrektwiedergibt. Davon sollte man sich jedoch nichtallzu sehr stören lassen, da sich dies mit jederneuen Browsergeneration wieder ändern kann.

Wenn Farben innerhalb des HTML-Quell-codes verwendet werden sollen, muss mansich leider mit der Definition von Farbwertenanhand des HexadezimalHexadezimalHexadezimalHexadezimalHexadezimal-Modells auseinandersetzen: Die Formatierung einer blauen Head-line erzeugt in HTML beispielsweise den Aus-druck

<font color="#6699FF">Beispiel Headline

</font>

informationen verloren. Deshalb sollten immer– sofern vorhanden – die originalen RGB-Bild-daten verwendet werden und nicht die bear-beiteten im CMYK-Format.

Grundlagen der Farbverwendungunter HTML

Im RGB-Farbraum stehen theoretisch Millio-nen von Farben zur Verfügung. Theoretisch.Praktisch haben wir genau 216 Farben, aufdie wir uns verlassen können. Woran liegtdas? Farbmonitor und Grafikkarten mit einerniedrigen Darstellungskapazität können zu-mindest 256 Farben erzeugen. Die Ansteue-rung dieser Farben übernimmt das Betriebs-system. Wenn man nun die Paletten derbeiden Betriebssysteme Windows undMacOS vergleicht, so bleiben genau 216 Far-ben übrig, die in beiden Paletten identischsind. Diese Farben werden in der so genann-ten HTML-Palette (auch WWW-Palette oderWebsafe Colours) zusammengefasst. Diese

G Abbildung 2Die additive Farbmischung des RGB-Farbraumes

G Abbildung 1Die subtraktive Farbmischung des CMYK-Farbraumes

..

60 Gestalterisches

Bildformate undBildreduktion

Zuerst einmal vorweg: Alle Bilder für das Webmüssen mit einer Auflösung von 72 dpi gesi-chert werden.

Momentan sind zwei Bildformate im Webverbreitet: die Formate GIF und JPEG. Beidedienen in erster Linie der Reduzierung vonDateigrößen und damit Ladezeiten, sind je-doch grundverschieden in der Art der Kom-primierung und ihrer Eignung für bestimmteEinsatzgebiete.

F Abbildung 3Die Macintosh-Systemfarbpalette

F Abbildung 5Die HTML-Farbpalette

Abbildung 4 E

Die Windows-Systemfarbpalette

Die Definition von Farbe erfolgt dabei im-mer anhand eines Hexadezimalwertes wie»6699FF«. Dieser Wert bildet die drei Zah-lenpaare des RGB-Farbraumes ab, entsprichtalso »RRGGBB«, wobei jede Zahl zwischen 0und 9 und jeder Buchstabe zwischen A und Fenthalten sein darf. »FF0000« ergibt also einreines Rot, »00FF00« ein reines Grün und»0000FF« ein reines Blau.

Die websicheren 216 Farbtöne sind nur sol-che mit den Zahlen-/Buchstabenpaaren 00, 33,66, 99, CC oder FF (die entsprechenden RGB-Werte dazu lauten: 0, 51, 102, 153, 204 und255).

..

61Farbe und Bild

wahrgenommene Farbton entspricht dann inetwa dem Ausgangston. Ohne Dithering wür-de die gesamte Fläche durch einen nächstlie-genden unähnlichen Ton ersetzt.

Bei der FarbindizierungFarbindizierungFarbindizierungFarbindizierungFarbindizierung bestehen verschie-dene Möglichkeiten:1. Grundsätzlich sollten Bilder immer in Bezug

zu der WWW-Palette gerechnet werden. Sieumfasst 216 Farben, die auf den meistenPlattformen ähnlich dargestellt werden. Diesist besonders wichtig, wenn die Zielgruppenoch Monitore mit 256 Farben Bildtiefe hat.

2. Die meisten Monitore können mittlerweilemehr als 256 Farben darstellen, sodass dieVerwendung der HTML-Palette für Bildernicht mehr zwingend notwendig ist. Gehtman davon aus, dass vorwiegend hochauf-lösende Monitore verwendet werden, kannman Bilder auch mit einer flexiblen Palettekomprimieren, d.h. mit den 256 Farben, dieam häufigsten in dem Bild verwendet wer-den.

Das GIFGIF-Bilder eignen sich in erster Linie für dieDarstellung von Linien und Texten, bieten her-vorragende Möglichkeiten der Reduktion undkönnen auch als Animationen (Animated GIF)eingesetzt werden. Sie sind nicht geeignet fürfotografische Abbildungen und Motive, bei de-nen es auf hohe Farbtreue ankommt.

GIFs werden erzeugt, indem das Bildbear-beitungsprogramm (z.B. Adobe Photoshopoder Macromedia Fireworks) jedes einzelnePixel in die nächstliegende HTML-Farbe um-wandelt. Je weniger der potenziellen 216 Far-ben verwendet und damit abgespeichert wer-den, desto kleiner wird die Datei. Da diemeisten Farben nicht vorhanden sind, wird dieAbbildung in der Regel extrem flächig und un-schön. Um diesen Effekt zu vermeiden, verfü-gen fast alle Programme über die Option, ein»Dithering« anzuwenden. Soll zum Beispieleine Fläche in Mittelgrau dargestellt werden(und es läge in der HTML-Palette nicht vor), sowird diese Fläche durch abwechselnd hell- unddunkelgraue Pixel gerastert. Der vom Auge

F Abbildung 6Vergleich der Darstellungsqualitäten derbeiden Bildformate

..

62 Gestalterisches

3. Weiß man, welches Betriebssystem bei denBenutzern existiert, z.B. bei der Gestaltungfür ein Intranet, könnte theoretisch aucheine Systempalette verwendet werden. Die-se Option sollte jedoch nie gewählt werden,da sie bei einer Veränderung der System-landschaft extrem viel Arbeit nach sich zie-hen würde.

Das JPEGDie Verwendung von JPEGs ist immer dannangebracht, wenn eine gute Bildqualität erfor-derlich ist, da Millionen von Farben unterstütztwerden. Das Format eignet sich für fotografi-

sche Abbildungen, nicht aber für Strichzeich-nungen oder Schrift.

JPEGs erzeugt man auch mit Hilfe von Bild-bearbeitungsprogrammen. Die Reduzierungder Datenmenge erfolgt bei diesem Formatdurch einen anderen Komprimierungsvorgang:Bei der Umwandlung in das JPEG-Format sindBildpunkte nicht mehr einzeln sichtbar wiebeim GIF. Stattdessen werden ähnliche Flä-chen durch mathematisch berechenbare Farb-verläufe dargestellt.

Die Anzahl der Farben hat beim JPEG kei-nen Einfluss auf die Dateigröße, da immer Mil-lionen Farben verwendet werden können. AufBildschirmen mit weniger Farben wird auto-matisch eine andere Darstellungsqualität er-zeugt, indem fehlende Farben ersetzt werden.Je schlechter, also unschärfer die Darstellungdes Bildes sein darf, umso kleiner wird die Da-tei.

Weitere Hinweise zur Erzeugung von GIFund JPEG finden Sie in Kapitel »MacromediaFireworks« (S. 82).

Probleme mit der Dateigrösse vermeidenWenn Sie ein JPEG in ein GIF verwandeln,werden durch das verwendete Komprimie-rungsverfahren sehr viele Farben gespeichert.Dadurch wird das GIF sehr groß. VerwendenSie deshalb grundsätzlich als Ausgangsbild einTIF oder PICT.

Abbildung 7 E

Effekte der Datenreduktionbeim JPEG

..

63Farbe und Bild

Bildrechte

Kennen Sie das Ammenmärchen von Bildern,die zu mehr als 70 % verändert wurden und so-mit frei von Rechten sein sollen? Leider stimmtdies nicht: Grundsätzlich fallen bei fast jedemprofessionell erzeugten Bild Rechte an, dieauch bezahlt werden müssen. Dabei ist es egal,ob nur ein kleiner Ausschnitt verwendet wurdeoder das Bild bis zur Unkenntlichkeit weich-gezeichnet ist. Mittlerweile ist die Entwicklungder digitalen Wasserzeichen auch in der Lage,solche mehrfach bearbeiteten Bilder wiederzu-erkennen.

Bevor man mit der Bearbeitung von Bildernbeginnen kann, muss also sichergestellt wer-den, dass die Bildrechte auch für die Online-Verwertung gesichert sind. Das gilt insbeson-dere ab dem Zeitpunkt der Veröffentlichung.

Für Layoutzwecke können die meisten Bil-der auch ohne Copyright verwendet werden,es empfiehlt sich jedoch, die Kosten im Vorfeldzu klären. Bei Fotografen und professionellenBilderhändlern bemisst sich die Höhe des Prei-ses in der Regel anhand des Einsatzes (Home-page oder Folgeseite, internationale oder lan-desweite Domain), der Dauer der Verwendungund anderer Faktoren. Es ist fast immer teurer,die Rechte für eine Online-Verwendung imNachhinein zu erwerben, als sich diese vonAnfang an zu sichern.

..

64 Gestalterisches

Animation im NetzDas Web erwacht zum Leben

Bewegte, vertonte Bilder erzielen oft eineviel stärkere Wirkung als lange Texte. Mitder Entwicklung der Animationstechnikenverändert sich das Internet und eröffnetungeahnte Möglichkeiten.

aber auch mit einfachen Methoden wie GIF-Animationen kann man an Sites ganz andersherangehen.

DekorationVon kleinen blinkenden Herzen bis hin zu ani-mierten Figuren, die sich über die Site bewe-gen, werden Animationen auf Tausenden vonSeiten eingesetzt, um sie zu schmücken undnicht mediengerechte Inhalte zu kaschieren.Diese Gestaltungselemente der Kategorie »nurschön« sind meistens überflüssig, da sie nurLadezeiten erzeugen und nichts zum Inhaltbeitragen (Abb. 1).

Anders verhält es sich bei Animationen, diewirklich bewusster Teil eines visuellen Konzep-tes sind und deutlichen Einfluss auf die Wahr-nehmung einer Site haben. Bestes Beispiel fürdie Entwicklung von Animationen im Netz fin-det man auf der Site von Volume One, einerNew Yorker Design-Company, die seit 1997 je-des Vierteljahr ein Update eines Teilbereichesihrer Seite macht, vollkommen zweckentfrem-det, sehr schön und immer mit den neuestentechnischen Features (Abb. 2).

In den ersten Jahren des WWW waren Text

und Bild die einzige Möglichkeit, Inhalte zutransportieren. Emotionen zu wecken, denUser mitzureißen, komplexe Sachverhalte dar-zulegen oder einfach die unzähligen Möglich-keiten digitaler Medien zu nutzen, das warkaum möglich. Doch durch die technischeWeiterentwicklung und die Einführung immerkomplexerer Animationen und Interaktionenentstanden Sites, von denen man zu Beginnkaum geträumt hätte.

Die Aufgaben von Animationenim Netz

Animationen im WWW können zu verschie-densten Zwecken eingesetzt werden. Nochbestimmen die Bandbreiten ihren Einsatz,

Animationen für alleUnter http://www.animfactory.com/ findensich zahlreiche Animationen zum Weiterver-wenden.

..

65Animation im Netz

F Abbildung 1Die zehn Phasen einer reindekorativen Animation vonanimfactory

.

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

.

66 Gestalterisches

Einführung und UnterhaltungWeit verbreitet sind auch die so genannten»Intro-Animationen«. Ihre Aufgabe ist es, dieSite, das Produkt oder das Unternehmen ein-zuführen und vorzustellen und den User aufdie Site einzustimmen. Man versucht den In-tros oft einen besonders unterhaltsamen Cha-rakter zu geben, um die nicht ganz so aufre-gend gestalteten Inhalte auf der folgenden Siteaufzupeppen. Hat das Intro nur eine Feigen-blattfunktion, sollte man sich besser nochmalsüber die generelle Aufbereitung der Site Ge-danken machen.

IllustrationIst die Animation nicht beliebig austauschbar,sondern auf den spezifischen Content abge-stimmt, spricht man von einer Illustration, dieInhalte unterstreicht, sie ergänzt und im Kopfdes Users weitere Bilder entstehen lässt. Einegute Illustration bildet den dazugehörigen In-halt nie eins zu eins ab, sondern erweitert ihn.

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

..

67Animation im Netz

Hervorhebung und AnimationDas erste bewegte Element im Netz war wohlSchrift, die mit dem Tag <blink> zum Blinkengebracht wurde und so manchen User zur Ver-zweiflung gebracht hat. Gerne wurden undwerden auch fertige GIFs verwendet, die blin-kende und sich drehende Ellipsen darstellen,auf denen NEU steht, oder Animationen vonkleinen Briefumschlägen, die sich zusammen-falten und verschwinden, um den BereichE-Mail anzuzeigen. Abgesehen davon, dassman den Charakter der Site verwässert, wennman zu sehr auf ClipArt zurückgreift, mussman vorsichtig sein mit Animationen, die be-stimmte Bereiche hervorheben sollen und denUser dazu bringen, dort zu klicken. Zum einenwirken sich dauernd wiederholende Bilderschnell penetrant, zum anderen heben sichmehrere Animationen auf einer Seite auf, undman verliert den Überblick, der gerade da-durch 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 dieganze Aufmerksamkeit des Users auf sich.

ErklärungKann man in einem E-Commerce-Shop ein

Produkt dreidimensional drehen und auf des-sen Tasten klicken, ist eine Bedienungsanlei-tung in Form von kleinen Filmen gestaltet oderwird ein komplexer biologischer Vorgangdurch Animationen auf einmal ganz klar ver-ständlich, so wird aus der Animation ein eigen-ständiges Element, das durchaus etwas längereLadezeiten oder die Installation eines Plugs-insrechtfertigt.

ResponseImmer öfter werden auf Sites bei Rollover Be-griffe hervorgehoben, um dem User anzuzei-gen, dass er hier klicken kann bzw. dass seinKlick erfolgreich war und er nun auf den ge-wünschten Bereich geleitet wird. Besondersbei Applikationen, die komplett in Flash ge-staltet sind, bietet sich das durchaus an, dadort Links oft sehr viel stärker in die Gestaltungintegriert sind und man sie nicht so ohne wei-teres identifizieren kann. Aber auch bei HTML-Websites mit Rollover-GIFs gibt der Response-Effekt dem User ein Gefühl von Interaktionund Sicherheit.

F Abbildung 4Animationen in Flash und QuickTime VR aufder Adidas-Site. Der Schuh ist in alle Richtungendrehbar (www.adidas.com).

..

68 Gestalterisches

InterfaceSeitdem Flash einigermaßen verbreitet ist undUser bereit sind, das Netz nicht nur als ein rei-nes Recherchetool zu begreifen, werden im-mer mehr Auftritte komplett animiert in Flashgestaltet. Sowohl die Benutzerführung als auchdie Inhalte sind dynamisch, bauen sich nach-einander auf und vermitteln das Gefühl, alswäre man in eine eigene Welt gestiegen. InVerbindung mit Sound lassen sich hier Emotio-nen wecken, für die das Web bis jetzt ehernicht so berühmt war. Man muss sich aller-dings im Klaren sein, dass sich die Komplexitätder Benutzerführung vervielfacht und man ei-nige User von der Nutzung der Site aus-schließt.

Die technische Umsetzung

Es gibt mittlerweile eine Vielzahl von mögli-chen Animationsarten, die sich in technischerUmsetzung, Qualität, Ladezeiten und Einsatz-möglichkeiten unterscheiden. Die beste Ein-führung in die Gestaltung gibt es unter

http://hotwired.lycos.com/webmonkey/multimedia/tutorials/tutorial1.htmlundhttp://hotwired.lycos.com/animation/.

GIF-AnimationDer Klassiker unter den Animationen im Netzzeichnet sich eigentlich durch seine Einfachheitaus. Es handelt sich dabei um nichts anderesals einzelne Bilder, also GIFs, die in einer be-stimmten Reihenfolge hintereinander geschal-tet werden und beliebig oft ablaufen. Für dasAuge ergibt sich dann ein mehr oder wenigerfließendes Bild, je nachdem, wie viele Phasendie Animation enthält. Je mehr Einzelbilder,desto größer wird die Datei aber auch. Mankann die Sequenz beliebig oft wiederholt loo-pen oder auch nur ein paar Mal oder ein Malablaufen lassen. Die Dauer jeder einzelnenPhase ist dabei variabel einstellbar.

Es gibt dabei verschiedene Arten von Ani-mationen. Wichtig ist, dass die Abläufe flie-ßend sind und man den Übergang vom letztenzum ersten Bild nicht bemerkt. Ausnahme sindhier Banner und Textanimationen.

Abbildung 5 E

Endlich einmal eine Benutzer-führung, die Spaß macht.

Aber eben komplett in Flash.(www.hi-res.net/sb/clickhere.html)

..

69Animation im Netz

G Abbildung 6 E

Im GIF-Builder sieht man dieeinzelnen Phasen besonders klar.

G Abbildung 7Klassische Zeichentrickanimation von animfactory

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

..

70 Gestalterisches

von Netscape und ist neben Perl die am weite-sten verbreitete Skriptsprache. Sie kann aller-dings vom User im Browser abgestellt werden,da komplexere Skripten gerne mal den Rech-ner zum Absturz bringen. In Verbindung mitstatischem HTML ermöglicht sie eine Vielzahlvon Interaktionen, unter anderem eben auchAnimationen wie zum Beispiel Laufbänderoder Rollover-Effekte (Abb. 9).

JavaDie amerikanische Firma Sun entwickelte schonrecht früh diese komplexe Programmierspra-che, die vollkommen unabhängig ist vom Be-triebssystem und deshalb perfekt für dasWWW geeignet. Im Gegensatz zu JavaScript(das nichts mit Java zu tun hat) lässt sich damitfast alles umsetzen, was man sich einfallenlässt. Eine Software, die Java Virtual Machine,ist in den jeweiligen Browser integriert, sie ver-arbeitet dann so genannte Applets. Nachrich-

F Abbildung 9Auf dieser Seite navigiert der User über ein erweiter-bares Laufband am unteren Rand des Screens, dieInhalte sind animiert (www.siemens.de/innovation).

.

Die längste Tradition bei Animationen hatsicherlich die Zeichentrickanimation, also dasphasenweise Abspielen von gezeichneten undgescannten oder direkt am Computer gestalte-ten Figuren (Abb. 7).

Text wird entweder in einer Art Abspann-verfahren animiert oder aber verzerrt, ein- undausgeblendet, farblich verändert, und so wei-ter. Die einfachste Form dabei ist der reineResponse, also die Erstellung einer leicht ver-änderten zweiten Phase, die das erste Bild er-setzt, wenn man mit dem Cursor darüber geht.Die dritte Art von GIF-Animationen ist die Ani-mation von Fotos. Besonders beliebt ist hierMorphing, also das langsame Verschmelzen ei-nes Ausgangsbildes in ein Endbild (Abb. 8).

JavaScriptJavaScript ist eine Skriptsprache, ein Programm,das nicht auf dem Rechner, sondern auf einemServer ausgeführt wird. Entwickelt wurde es

.

71Animation im Netz

tenticker sind meistens in Java programmiert,Nachteil hierbei ist, dass Seiten mit Java deut-lich länger laden, insbesondere bei Macintosh-Rechnern. Im Gegensatz zu Skriptsprachen istJava auch in der Programmierung sehr kom-plex und aufwändig.

FlashUm Flash-Files sehen zu können, muss man imBrowser das dazugehörige Plug-in installierthaben, die Verbreitung ist heute aber schonsehr hoch. Flash ist vektororientiert, das be-deutet, dass auch sehr große und komplizierteAnimationen innerhalb kürzester Zeit geladenwerden können. Flash-Files werden im Macro-

media-Programm Flash erstellt und gelten zur-zeit als die Lösung für anspruchsvolle Anima-tionen (Abb. 10 und 11).

ShockwaveAuch dieses Tool stammt von Macromedia undbasiert auf dem Programm Director, mit demeigentlich CD-ROMs programmiert werden.Mit Hilfe eines Plug-ins kann man diese Filesauch im WWW abspielen, die Programmier-möglichkeiten sind – noch – sehr viel umfang-reicher als bei Flash. Allerdings ist es nicht vek-tororientiert, das heißt, die Ladezeiten sindauch sehr viel größer!

G Abbildung 11Die 1999 in Cannes ausgezeichnete Site – für einen SchweizerMöbelhersteller gestaltet – ist komplett in Flash gebaut undermöglicht eine Vielzahl von Animationen, die einen echtenMehrwert bedeuten (www.eleven22.com).

.

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

.

72 Gestalterisches

Dynamic HTMLAls mit Einführung der Viererversionen dergängigen Browser die Dynamic Hypertext Mar-kup Language eingeführt wurde, war die Be-geisterung gross. Auf einmal gab es Animatio-nen und interaktive Funktion im Rahmen vonHTML ohne Plug-ins. Ermöglicht wurde dasdurch die Entwicklung von Sprachen wieHTML 4, Cascading Style Sheets und die Inte-gration von JavaScript. Dummerweise entwik-kelten vor allem Netscape und Microsoft un-terschiedliche Befehle, sodass man beimArbeiten mit DHTML mehr damit beschäftigtwar, die Seiten auf allen möglichen Browsernund allen möglichen Plattformen zu testen, alsdie Seiten wirklich zu gestalten. Abstürze undschlechte Performance waren die Folgen. Esgibt aber einige Befehle, die durchaus sehr gutzu verwenden sind (Siehe auch S. 126).

QuickTime/ QuickTime VRQuickTime wurde von Apple entwickelt, umAudio- und Videodaten in sehr guter Qualitätzu speichern und abzuspielen. Es ist als eigenesProgramm sowohl für MacOS als auch fürWindows erhältlich, kann aber auch direkt ineine Site integriert werden. QuickTime VR fügtzudem noch eine dreidimensionale Kompo-nente hinzu, wie zum Beispiel den drehbarenTurnschuh auf der Adidas-Seite (Abb. 4).

Alles über QuickTime findet man unterhttp://www.apple.com.

Abbildung 13 E

QuickTime VR-Movie mit drehbarem undvergrößerbarem 3D-Effekt

.

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

.

73Animation im Netz

..

.

Essentielle Software

88 Webeditoren

88 Die gängigsten Editoren

90 Macromedia Dreamweaver

90 Die Fenster und Paletten

93 Getting started

94 Die Seiteneigenschaften

96 Text

96 Bild

97 Tables

98 Modifikation von Objekten

99 Frames


76 Adobe Photoshop

76 Praktische Funktionen für den Einsatzim Web

79 Tipps und Tricks für das Webdesign mitPhotoshop

82 Macromedia Fireworks

82 Der Arbeitsbereich

82 Komprimierung von Bildern fürs Web

83 Batch-Prozesse

84 GIF-Animationen

.

104 Adobe GoLive


106 GoLive als Layout-Programm

106 GoLive als Site-Editor

108 Microsoft FrontPage 2000

108 Standardisierung


112 Weitere Features

114 Macromedia Flash

115 Die Fenster und Paletten

116 Getting started

119 Aus Symbolen werden Instanzen

120 Der Film

121 Instanzeigenschaften


126 Dynamisches HTML

126 DHTML-Dokumente in Dreamweavererstellen

75Hilfreiche Software


Adobe PhotoshopDie digitale Bildbearbeitung – auch für das Web

Fast niemand, der sich mit Gestaltungbeschäftigt, kommt um Photoshopherum. Doch es gibt einige Tricks, welchedie Arbeit damit sehr erleichtern.

zweifelt man anfangs oft über die schlechteQualität der Bilder. Gerade bei JPEGs und GIFsgeht durch die Kompressionsverfahren bzw.durch die Farbreduktion viel von der Schärfeund Tiefe von Fotos verloren. Das macht sichbesonders beim Text bemerkbar. Aber dazuspäter mehr.

Praktische Funktionen für denEinsatz im Web

Um mit Photoshop zu arbeiten, beschränktman sich am besten zunächst auf drei Fenster.

Das Document-FensterLegt man ein neues Dokument an, sind zweiParameter sehr wichtig (Abb. 2). Zum einenmuss die Auflösung 72 Dots per Inch betragen,in diesem Falle Pixel pro Inch. Das Problem ist,dass man Bilder mit dieser Auflösung nichtmehr verlustfrei vergrößern kann. Deshalb soll-te man Bilder immer mit einem höheren dpi-Wert einscannen, denn verkleinern geht im-mer. Zweiter Punkt ist, dass das Dokument imRGB-Modus angelegt werden muss und nicht

Photoshop ist eines der ältesten und aus-gereiftesten Programme zur digitalen Bildbear-beitung. Bei kaum einem anderen Programmwerden neue Versionen, Updates und Beta-Versionen so heiß und innig erwartet. Vor derEinführung von Ebenen musste man sich im-mer sehr genau überlegen, welches Elementman wo einsetzte, da es dort für immer festmit dem Hintergrund verschmolzen war. Als esdie editierbare Textfunktion noch nicht gab,war man gezwungen, Headlines immer wiederund wieder zu tippen. Und die History-Funkti-on, mit der man alle Schritte zurückverfolgenund rückgängig machen kann, kam einer klei-nen Revolution gleich.

Photoshop eignet sich für die Erstellung vonDaten sowohl für Print- als auch für digitaleMedien. Der große Vorteil bei der Arbeit fürden Screen ist, dass die Auflösung der Bildersehr viel geringer sein muss, also 72 dpi anstatt300 dpi. Das bedeutet, man kann sehr vielschneller arbeiten und muss sich außerdemnicht mit großen Datenmengen herumärgern.Dazu hat man das Ergebnis immer auf demScreen, böse Überraschungen wie beim Druckbleiben einem meist erspart. Allerdings ver-

..

77Adobe Photoshop

G Abbildung 1Photoshop mit den wichtigsten Fenstern und Paletten

G Abbildung 2Einstellungen eines Dokuments für Screendesign

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

..


wie bei Print in CMYK. Denn auf dem Screenstellen sich Farben, anders als beim Druck, ausden drei Grundfarben Rot, Grün und Blau zu-sammen.

Bis auf die Ausnahme von Pfaden werdenBilder, Schriften und importierte Vektorgrafi-ken in Photoshop gepixelt. Bei einer Auflösungvon 72 dpi geht das automatisch mit einemQualitätsverlust einher, gegen den man nur inlangwieriger Kleinstarbeit vorgehen kann, in-dem man die einzelnen Pixel bearbeitet. Be-sonders bei Logos ist das eine große Herausfor-derung.

Die Werkzeugpalette Diese Palette, die alle Photoshop-Tools be-inhaltet, hat sich in den letzten Jahren zu ei-nem großen Werkzeugkasten entwickelt, dernicht weniger als 49 einzelne Tools und nochandere Einstellungsmöglichkeiten enthält(Abb. 4). Sie teilen sich grob in Auswahlwerk-zeuge, Malwerkzeuge sowie Zeichen-, Schrift-,

Mess-, Füll- und Vergrößerungswerkzeuge.Außerdem kann man damit die Farben festle-gen, maskieren und den Ansichtsmodus festle-gen. Ab der Version 5.5 kann man auch mit ei-nem Klick zu Adobe Image Ready wechseln.

Die EbenenpalettePhotoshop-Dokumente sind meistens in Ebe-nen angelegt. Vor einer Hintergrundebene lie-gen Ebenen, die Text, Bilder oder Grafiken ent-halten. Jede kann einzeln sichtbar gemachtund bearbeitet werden. Exportiert man Bilderals GIFs oder JPEGs, dann muss man alle Ebe-nen auf eine reduzieren und kann das Bild da-nach nicht mehr bearbeiten. Es empfiehlt sichalso, ein Masterdokument anzulegen, das manmit allen möglichen Ebenen abspeichert, unddavon werden die entsprechenden Bilder pro-duziert. Sowohl Scans als auch bearbeitetePhotoshop-Dokumente sollten immer in einerOriginalversion mit Originalauflösung erhaltenbleiben, denn einmal reduzierte und gespei-

Abbildung 4 E

Werkzeuge vonPhotoshop

G Abbildung 5Ebenen in Photoshop: Jedes Element kann einzeln bear-beitet werden.

..

79Adobe Photoshop

cherte Dateien können nicht mehr in ihrenOriginalzustand versetzt werden.

Neben den Dateien sollte man auch die ein-zelnen Ebenen konsequent und nachvollzieh-bar benennen, um sicherzustellen, dass auchandere Leute mit dem Dokument arbeitenkönnen.

Tipps und Tricks für das Webde-sign mit Photoshop

Photoshop ist ein sehr komplexes Tool, und esgibt unzählige Bücher und eine hervorragendeHilfefunktion, gerade fürs Webdesign gibt esaber ein paar Kniffe, die helfen, effektiver undbesser zu arbeiten.

Die WWW-PaletteUm zu verhindern, dass man mit nicht websi-cheren Farben arbeitet, also anderen als den216 in der WWW-Palette vorhandenen, sollteman sich in Photoshop eine Palette zurechtle-gen, die nur diese Farben enthält. Über Fens-

ter · Farbfelder einblenden erhält man dieFarbfeldpalette. Über Farbfelder ersetzen be-

kommt man die Option, eine eigene Paletteeinzufügen. Photoshop bietet in den Goodieszwei Paletten mit den WWW-Farben an. Sieheißen Web Hues.aco und Web Spectrum.aco.Hues ist in diesem Fall die bessere Wahl, dennbei der anderen kommen Farben mehrfachvor. Ist man mit beiden nicht zufrieden, da dieAnordnung der Farben doch gewöhnungsbe-dürftig ist, hat man auch die Möglichkeit, seineeigene WWW-Palette zu erstellen. Man öffnetdazu ein Dokument im RGB-Modus, geht aufBild · Modus · Indizierte Farben... und stelltdann im obersten Feld Palette des Abfragefen-sters Web ein. Man klickt OK und geht dannnochmals auf Bild · Farbtabelle und erhält dieWWW-Palette, in deren Bezug das Bild ge-rechnet wurde. Klickt man auf die einzelnenFelder, erhält man auch die Entsprechung inHex-Werten, was sehr praktisch ist, um imEditor die richtigen Farben einzusetzen. DieFarben dieser Palette sind entsprechenddieser Hex-Werte geordnet von #FFFFFF zu#000000. Will man mit dieser sehr angeneh-men Anordnung arbeiten, speichert man siesich direkt aus diesem Fenster in den Goodies-Ordner von Photoshop und geht bei der Farb-

.

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

.


feldpalette auf Farbfelder ersetzen, um danndiese Palette, die man am besten WWW Ori-

ginal betitelt, einzuladen.

Screen-FontsDass Schriften auf dem Screen sehr schwer zulesen sind, ist bekannt. Je kleiner sie werden,umso stärker verschwimmen sie und werdenimmer unlesbarer. Es bietet sich aber dennochan manchen Stellen an, z.B. in der Navigationoder bei Beschriftungen, mit gebranntem Textzu arbeiten, da man dessen Laufweite und Er-scheinung exakt definieren kann.

Für solche Fälle gibt es Fonts, die extra fürden Einsatz am Bildschirm konzipiert wurden.Das sind natürlich zum einen die Systemschrif-ten wie Arial, Geneva, Times etc., die bei denmeisten Usern auf dem Rechner installiert sindund durch HTML-Tags angesteuert werdenkönnen.

Zum anderen aber gibt es auch Fonts, die sokonzipiert sind, dass sie bei einer Größe von 9

Punkt oder kleiner noch lesbar sind. Einige die-ser Schriften sind sogar kostenlos aus demNetz herunterzuladen.

Will man das nicht, empfiehlt es sich, zumBeispiel folgende Einstellungen für System-schriften im Typetool von Photoshop zu ver-wenden:

Geneva, 9 Punkt, Kerning 150 (damit stelltman die Abstände zwischen den Buchstabenein, die Geneva fließt in ihrer Photoshop-Dar-stellung zu eng), Glätten: keine.

Etwas individueller und qualitativ keines-wegs schlechter sind aber oben genannteFonts, die von Schriftdesignern speziell fürnicht geglättete Darstellung in kleinen Größenentwickelt wurden. Unter http://www.fountain.nu findet man die sehr schöne Se-venet, die, wie der Name schon sagt, in7 Punkt am besten dargestellt wird. Auch beihttp://www.hi-type.de/fonts gibt es Screen-fonts. Ebenfalls umsonst und in mehrerenSchnitten.

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

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

..

81Adobe Photoshop

Vergrößern von PixelgrafikenVersucht man in Photoshop Grafiken mit fei-nen Pixellinien oder zum Beispiel Icons zu ver-größern, werden diese immer unscharf undverlieren durch die Weichzeichnung ihre eige-ne Qualität. Im Menü Bild · Bildgröße stelltman die Option Bild neu berechnen mit aufPixelwiederholung. Man darf aber nur Fakto-ren in Prozent eingeben, die glatt durch 100 zuteilen sind, sonst können die Pixel nicht in al-len Richtungen entsprechend verdoppelt oderverdreifacht werden, und die Qualität ist auchwieder ungenügend.

Kopieren aus EbenenUm Datenmengen zu sparen, bietet es sich oftan, aus einem Photoshop-Dokument nicht eingroßes GIF, sondern mehrere kleine zu ma-chen, die im HTML-Dokument wieder zusam-mengesetzt werden (Abb. 10). Arbeitet man damit einem Dokument, das in vielen Ebenenangelegt ist, hat man die Möglichkeit, mit derTastenkombination (Strg)(ª)(c) einen ausge-wählten Bereich aus allen Ebenen zu kopierenund diesen beim Einsetzen in ein neues Doku-ment automatisch passgenau auf eine Ebenezu reduzieren.

Speichern als JPEGExportiert man ein Bild als JPEG, wird diesesautomatisch in der Qualität verschlechtert undunscharf. Bei manchen Bildern empfiehlt essich also, ihnen über Filter · Scharfzeich-

nungsfilter · Scharfzeichnen, vor der Um-wandlung in ein JPEG, mehr Schärfe zu geben,die bei der Umrechnung wieder relativiertwird.

Abbildung 9 E

Vergrößerung eines Iconsmit verschiedenen Berech-

nungsarten

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

..

82 Hilfreiche Software

Macromedia FireworksDer Herausforderer nimmt den Kampf mit Photoshop auf

Lange Jahre waren die Anforderungen an einBildbearbeitungsprogramm recht eindeutig aufden Prepress-Bereich ausgerichtet, und Photo-shop beherrschte den professionellen Markt.Doch dann kam Fireworks von Macromedia,und alles sollte anders werden.

Komprimierung von Bildern fürsWeb

Genau zwei Bildformate können von allen gän-gigen Browsern dargestellt werden: GIF undJPEG. Diese beiden Formate zeichnen sich da-durch aus, dass durch Komprimierung die Da-tenmenge und somit die Dateigröße enorm re-duziert werden können (siehe auch das Kapitel»Farbe und Bild«).

Bei der Verwendung von Photoshop oderFireworks ist die dafür nötige Prozedur mittler-weile auf wenige Schritte beschränkt. EinigeGrundregeln lassen sich jedoch nicht automati-sieren und müssen immer beachtet werden:

Ein GIF wird kleiner, wennE die (räumliche) GrößeGrößeGrößeGrößeGröße möglichst gering ge-

halten wird,E die Anzahl unterschiedlicher FarbenFarbenFarbenFarbenFarben mög-

lichst gering ist,E möglichst große Teile des Bildes aus hori-

zontalen LinienLinienLinienLinienLinien (in einer Farbe) bestehen,E es nicht »gedithertgedithertgedithertgedithertgedithert« ist.

Plötzlich war es möglich, mit ein und dem-

selben Programm Bilder zu bearbeiten, GIF-Animationen zu erstellen und vor allem mitwenigen Schritten Bilder in professionell kon-vertierte GIFs oder JPEGs umzuwandeln. DieEntwicklung von Fireworks folgt genau zweiPrämissen: Absolute Webkompatibilität undperfekte Integration in die Macromedia-Fami-lie mit Dreamweaver und Flash.

Der Arbeitsbereich

Zweifelsohne hat man sich bei der Gestaltungdes Programms den großen Konkurrenten ge-nau angesehen. Die Toolbar mit den meistenWerkzeugen kommt uns bekannt vor und kanndementsprechend schnell genutzt werden.Und auch die einzelnen Paletten sind denenvon Photoshop nachempfunden.

Die große Stärke von Fireworks (hier Ver-sion 3) liegt in den verschiedenen Ansichtendesselben Dokumentes mit unterschiedlichenKonvertierungen. Dabei werden außer demBild selbst auch grundsätzlich die Bildgrößeund verwendete Farben angezeigt (Abb. 2).

. .

83Macromedia Fireworks

Ein JPEG wird kleiner, wennE die (räumliche) GrößeGrößeGrößeGrößeGröße möglichst gering ge-

halten wird,E möglichst viele große, gleichartige FlächenFlächenFlächenFlächenFlächen

vorkommen,E die QualitätQualitätQualitätQualitätQualität geringer eingestellt wird.

In Fireworks ist der Export von Bildern fürdas Web ein Kinderspiel. Mit Hilfe des Export

Wizards oder der Export Preview könnennicht nur alle Arten der Komprimierung ange-wendet werden, sondern auch gleich derenAuswirkungen auf die Bildqualität beobachtetwerden (Abb. 3).

In dieser Vorschau können bis zu vier An-sichten ausgewählt werden, für die jeweils dieFarbpalette, die Bildart (GIF oder JPEG), dieAnzahl der verwendeten Farben bzw. die Qua-lität und die Art des Ditherings bestimmt wer-den können. Durch Auswahl der Ansicht undKlick auf Export wird das entsprechende Bild

.

G Abbildung 1Fireworks mit einigen Paletten

G Abbildung 2Die Vorschau verschiedener Komprimierungen ist bereits imDokumentenfenster möglich.

im richtigen Format erzeugt. Im Beispiel(Abb. 3) wäre das Format der Wahl bestimmtdas JPEG links unten, da es das beste Verhält-nis zwischen Dateigröße und Qualität aufweist.

Außer den oben erwähnten Einstellungenkönnen in der Export Preview auch einzelneFarben eines GIF transparent gestellt, der zuspeichernde Ausschnitt und die (räumliche)Bildgröße verändert und einzelne Farbwertenochmals editiert werden.

Batch-Prozesse

Darunter versteht man die automatische Abar-beitung von Bildbearbeitungsprozessen aufmehreren Dateien. Dieses Feature ist vor allemdann recht praktisch, wenn man beispielsweiseeinen ganzen Ordner von Katalogbildern inGIFs umwandeln muss.

.


GIF-Animationen

In Fireworks können sowohl Flash-Animatio-nen perfekt vorbereitet werden als auch einfa-che GIF-Animationen. Unter Letzteren ver-steht man eine Abfolge von Stills (auch Framesgenannt), die durch die eingestellte Geschwin-digkeit eine Illusion von Bewegung erzeugen.Da das Format GIF diese Form der Animationunterstützt, wird genau ein einziges Bild er-zeugt, in dem alle Frames und nötigen Einstel-lungen abgespeichert sind. Für GIF-Animatio-nen gelten genau die gleichen Kriterien wie für

G Abbildung 4Schritt 1: Auswahl der zu bearbeitenden Dateien

G Abbildung 5Schritt 2: Auswahl der Prozesse

.

Besonders praktisch ist dabei die Möglich-keit, die Art der Veränderungen direkt vor demBatch-Prozess vornehmen, abspeichern undimmer wieder darauf zurückgreifen zu können.Dabei sind sämtliche Einstellungen wie ge-wünschte Farbtabelle, Skalierung oder Trans-parenzen möglich. Die Dateien werden im Fol-genden automatisch in einem gewünschtenOrdner gesichert (Abb. 4 und 5).

G Abbildung 6Jedes dieser Quadrate liegt auf einem eigenen Layer.

.


normale GIFs, was Größe und Anzahl der Far-ben betrifft.

Um in Fireworks eine solche Animation zuerstellen, muss man sich zuerst mit Layers undFrames dieses Programms auseinander setzen.

LayerLayerLayerLayerLayer oder auch »Ebenen« bilden eineräumliche Abfolgeräumliche Abfolgeräumliche Abfolgeräumliche Abfolgeräumliche Abfolge auf der z-Achse des Rau-mes, legen also fest, wie weit vorne oder hin-ten sich ein Objekt befindet (Abb. 6).

FramesFramesFramesFramesFrames hingegen legen die zeitliche Abfolgezeitliche Abfolgezeitliche Abfolgezeitliche Abfolgezeitliche Abfolgevon Objekten in einer Animation fest. Ein Fra-me kann dementsprechend mehrere Layer ab-bilden (Abb. 7).

Plant man eine GIF-Animation, beispiels-weise einen springenden Punkt, so muss fürjeden Status ein eigener Frame angelegt und

G Abbildung 7Jeder Punkt liegt in einem eigenen Format.

.

das entsprechende Objekt darauf platziert wer-den. Bestimmte Layer können dabei in allenFrames eingeblendet sein, sodass Hintergrün-de nicht jedes Mal neu eingefügt werden müs-sen.

Nachdem alle Ebenen der Animation ange-legt sind, kann diese auch schon als GIF abge-speichert werden. Hierzu muss wieder überdas Menü DATEI die EXPORT PREVIEW geöffnetwerden. Das zu verwendende Bildformat ist alsANIMATED GIF zu wählen.

Oben links in dieser Ansicht befindet sichder Reiter ANIMATION, mit dessen Hilfe die Ein-stellungen zur Geschwindigkeit von einzelnenFrames und zum Laufzeitverhalten vorgenom-men werden können (Abb. 8).

.


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

.

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

.

ein Mal durchlaufen werden soll, mehrmalsoder immerwährend.

Ein letzter Klick auf EXPORT, und die Ani-mation kann im Browser betrachtet werden.


. .


WebeditorenDie einfache Methode zur Erstellung von Websites

Nach anfänglich mühsamem Schreibenvon HTML-Code lassen sich mittlerweilesehr schnell und intuitiv Websites mitHilfe von Webeditoren umsetzen. Abernicht alle erzielen das gleiche Ergebnis.

Die gängigsten Editoren

Es gibt eine Vielzahl von Webeditoren, immerwieder kommen neue Versionen auf denMarkt, die immer einfacher und intuitiver sind,mit noch mehr Funktionen ausgestattet wer-den und noch mehr unbrauchbaren Code mithinein schmuggeln. Letzteres war genau derGrund, warum man eine Zeit lang immer wie-der von einem Editor zum anderen wechselteund es noch heute erbitterte Debatten gibt,welches denn nun der beste und sauberste vonallen sei. Der eine fügte im HTML-Code malschnell ein paar Absätze ein, die man im Brow-ser zwar nicht sieht, jede einzelne Seite aberum ein paar Kilobyte größer machen. Der an-dere schreibt Code, den man in HTMLhochprofessionell noch ein bisschen verbesserthat, beim Sichern einfach wieder um, so wie esder Editor gerne hätte. Heute sind diese Bugsim Großen und Ganzen eigentlich ausgemerzt,trotzdem sollte man sich vor dem Kauf überle-gen, welcher Editor im Preis-Leistungs-Verhält-nis und bezüglich Nutzerfreundlichkeit am be-sten zu den Anforderungen passt. Erstellt manprofessionell Websites, empfiehlt es sich, mit

Hypertext Markup Language ist die Sprache,mit der im WWW der Aufbau und die Verbin-dung von Seiten beschrieben wird. Grundsätz-lich nicht sonderlich schwer zu erlernen, beider Gestaltung komplexer Sites aber dochrecht mühsam, bedienen sich mittlerweileauch viele Profis so genannter WYSIWYG-Edi-WYSIWYG-Edi-WYSIWYG-Edi-WYSIWYG-Edi-WYSIWYG-Edi-torentorentorentorentoren. Das heißt »What you see is what youget« und bedeutet nichts anderes, als dassman, ähnlich den meisten Grafikprogrammenwie Photoshop oder Illustrator, bei der Erstel-lung der Seite – hoffentlich – schon sieht, wiesie später im Browser aussehen wird, anstattsich durch Seiten von HTML-Code kämpfen zumüssen.

Demos von EditorenUnter http://www.davecentral.com/webpro.html finden sich neben ausführlichen Beschrei-bungen auch Demoversionen einiger Editoren.

..

89Webeditoren

den Programmierern, welche die Site letztend-lich umsetzen, Rücksprache zu halten, bevorman sich ein solches Tool anschafft.

Einen kleinen Überblick, den die Site Dave-central über gängige Editoren aller Arten gibt,sehen Sie auch in der folgenden Tabelle.

Bei Pixelpark fiel die Wahl schon vor einigerZeit auf Dreamweaver, andere Editoren sindaber ähnlich aufgebaut. Wenn man das Prinzipverstanden hat, ist es nicht schwer, sich rechtschnell in andere Programme einzuarbeiten.

.

Gängige Editoren

Editoren

AOLpress

Astound Dynamite

Atrax

BizBlast Resume Wizar...

Compuserve Home Page ...

Cool Page

CoverSite

DHTML Menu Builder

e-BIZ FreeRide

EasyHelp/Web

FlexSite

GoLive Cyberstudio

HDBC DHTML WYSIWYG

Hippie

HotDog Express

Hypertext Builder

HyperText Studio

IMS Web Dwarf

IMS Web Engine

IMS Web Spinner

InContext Spider

iPer3 Easy Web Editor ...

iPer3 Paper Killer WH

j-Pub Publisher

Liquid FX Express

LiveSite

Macromedia Dreamweaver

MenuPlus

Microsoft FrontPage

Namo WebEditor

SiteDesigner LTE

Splash! Web Authoring

Symantec Visual Page

Tarantula

TheCommerce

Theme-Pak

VisualSite

WEB Wizard

Webberactive

WebBuilder Author

WEBINET

WordPage

xSite

.


Macromedia DreamweaverOptimale Site-Verwaltung und HTML-Editierung

Mit Dreamweaver lassen sich innerhalbkürzester Zeit sehr effektiv Layouts inHTML-Seiten umsetzen.

Die Fenster und Paletten

Um mit Dreamweaver zu beginnen, ist es emp-fehlenswert, sich auf drei Fenster bzw. Palettenzu konzentrieren.

Das Document-FensterIn diesem Fenster zeigt sich alles, was man aufder Seite positioniert, wie Text, Bilder, Tabellenund andere Elemente. Die Darstellung ist derspäter im Browser angezeigten Seite schonsehr ähnlich (WYSIWYG), und man hat dieMöglichkeit, per Drag & Drop bzw. mit derTastatur alle Elemente zu positionieren, aus-zuwählen und zu bearbeiten (Abb. 1).

Die Objekte-PaletteAuf der Objekte-Palette finden sich alle Funk-tionen, die man zum Aufbau der Seite benö-tigt. Mit dem Pfeil am oberen Rand hat mandie Möglichkeit, zwischen verschiedenen Ta-feln zu wechseln, die einem unterschiedlicheOptionen bieten.

Man hat die Auswahl zwischen allgemeinenInhalten wie Bildern, Tabellen, etc. Möchte icheines dieser Objekte nutzen, ziehe ich es ein-

Zu Beginn der Arbeit mit Dreamweaver ist es

wichtig, dass man zum einen die Struktur derSite, den Aufbau und die Verlinkungen klar de-finiert und niedergeschrieben hat. Außerdemsollte man in Photoshop bereits erste Layoutsangelegt haben, um zu wissen, was wann anwelcher Stelle erscheint und wie sich die Ge-staltung im Web umsetzen lässt.

Dreamweaver (hier in Version 3) verfügtüber ein ausgezeichnetes Tutorial und eineHilfefunktion, trotzdem ist es hilfreich, wennman über grundsätzliche HTML-Kenntnisseverfügt, damit man leichter feststellen kann,warum irgendetwas mal wieder überhauptnicht so klappt, wie man es gerne hätte.

Die folgenden Ausführungen können einDreamweaver-Handbuch natürlich nicht erset-zen, trotzdem hilft einem dieser Überblick,sich schneller zurechtzufinden und das Pro-gramm effektiv zu nutzen.

. .

91Macromedia Dreamweaver 3

G Abbildung 2Die sechs verschiedenen Zustände derObjekte-Palette, mit deren Hilfe manso ziemlich alle Elemente auf einerSeite platzieren kann. Von links nachrechts: Allgemeines, Formulare, Fra-mes, Head, Kommentare und Zeichen.

.

G Abbildung 1Dreamweaver mit den wichtigsten Fenstern und Paletten

fach von der Palette an die Stelle der Seite, ander es eingesetzt werden soll. Ein Dialogfens-ter öffnet sich und ermöglicht mir anzugeben,welches Element ich positionieren möchte undmit welchen Eigenschaften, wie zum Beispieldie Größe.

Die nächste Tafel bietet mir FormulareFormulareFormulareFormulareFormulare bzw.deren Elemente, wie zum Beispiel Eingabefel-der oder Schaltflächen. Auch hier kann ich perKlick oder Drag & Drop die gewünschten Ob-jekte auf meiner Seite positionieren.

Die Tafel Frames ermöglicht es, mit gängi-gen Frame-Strukturen zu arbeiten.

Über Head werden Elemente eingefügt, diesich in der übergreifenden Kopfzeile eines je-den HTML-Dokuments befinden. Das könnenMetatags für Suchmaschinen ebenso wieSchlüsselwörter und Seitenbeschreibungensein.

Die unsichtbaren Elemente der nächsten Ta-fel sind zum Beispiel Kommentare im HTML-Code, die im Browser nicht dargestellt werden,

.


Leuten, die an der Seite arbeiten, aber wert-volle Orientierungshilfen bieten können.

Die letzte Tafel Zeichen hilft einem bei Son-derzeichen, nach denen man auf der Tastaturimmer ewig sucht und die in HTML so seltsamsind wie zum Beispiel "" für das Trade-mark-Zeichen.

Zum Arbeiten empfiehlt es sich aber, die all-gemeine Tafel geöffnet zu halten, da sich dortdie meist verwendeten Funktionen verbergen.

Die Palette Eigenschaften Sie verändert ihr Aussehen und ihre Inhalte jenachdem, welches Objekt im Document-Fens-ter man gerade angeklickt hat. Ist dies Text, sohat man alle in HTML möglichen Arten ange-boten, den Text zu verändern. Klickt man aufein vorher eingefügtes Bild, so hat man dieOption zur Veränderung von Format, Positio-nierung etc.

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

. .

93Macromedia Dreamweaver

Getting started

Der erste Schritt ist selbstverständlich ein neu-es Dokument anzulegen, entweder hat es sichmit Programmstart von selbst angelegt, oderman geht über Datei · Neu. Ganz wichtig ist esnun, dass Dokument sofort zu sichern undrichtig zu benennen. Die erste Seite eines We-bauftritts oder eines Unterbereichs heißt mei-stens index.html. Sie wird im Browser immerals Standard geladen, wenn man einen norma-len URL eingibt. Bei der Benennung vonHTML-Seiten muss man wie bei anderen Ob-jekten für das Web auf Umlaute, Sonderzei-chen und Leerzeichen komplett verzichten.

Beim Einbinden eines Bildes bzw. der Ver-linkung von Dokumenten wird immer der Pfadzwischen dem Dokument z.B. index.html unddem eingefügten Bild beschrieben. Dabei un-terscheidet man in absolute Pfade und relativePfade.

F Abbildung 4Bei dieser klassischen Ordnerstruktur steht anoberster Stelle die Homepage, dann folgt der Ord-ner mit den Bildern auf der Homepage, und dannkommen die Ordner für die Unterseiten.

E Absolute Pfade:Absolute Pfade:Absolute Pfade:Absolute Pfade:Absolute Pfade:Hier wird exakt der Pfad von Festplatte bisin den Ordner beschrieben. Eine absoluteVerlinkung könnte dann so aussehen:

file:///hard.disc/Desktop Folder/webde-

sign/images/image_1.gif

E Relative Pfade:Relative Pfade:Relative Pfade:Relative Pfade:Relative Pfade: Hier wird nur der Pfad der verlinkten Seiteoder des Bildes in Bezug auf das aktuelleDokument angegeben. Ordner werden mitSchrägstrich angegeben, befindet sich dasDokument eine Hierarchieebene höher,dann mit zwei Punkten und Schrägstrich.Eine relative Verlinkung ist zum Beispielimages/image_1.gif (sprich in den Images-Ordner auf das image_1-Bild) oder im Falleder Verlinkung der Karriere-Indexseite mitder Homepage ../index.html (sprich: ausdem Karriereordner heraus auf index.html).

. .


Die Seiteneigenschaften

Hat man nun also ein neues Dokument ange-legt und gespeichert, sind zunächst die Seiten-eigenschaften festzulegen. Das sind nebendem Namen der Seite auch die Farben, Link-farben und mehr.

Der TitelTitelTitelTitelTitel ist der Teil des Dokuments, derauch im Browser oben angezeigt wird. Er istnicht nur wichtig, weil er dem User anzeigt,auf welcher Site er sich befindet, der Titel er-scheint außerdem auch bei den Bookmarks inder Bookmark-Liste sowie in den meistenSuchmaschinen. Sucht man im Netz zum Bei-spiel nach »Go Live«, findet man Tausende vonSeiten, die mit Cyberstudio hergestellt wurdenund deren Urheber einfach vergessen haben,den Default-Titel »Willkommen bei GoLiveCyberStudio 3« zu ersetzen. Bei Dreamweaversteht dort dann »Untitled Document«, auchnicht sehr vorteilhaft bei Bookmarks oder inSuchmaschinen. Groß- und Kleinschreibung istin diesem Falle in Ordnung, auch Leerzeichensind erlaubt, nur bei Sonderzeichen sollte manvorsichtig sein.

Nächstes Element ist das HintergrundbildHintergrundbildHintergrundbildHintergrundbildHintergrundbild.Dieses wird gekachelt, d.h. unendlich oft wie-derholt. Diesen Effekt kann man sich zunutze

machen, wenn man für den Hintergrund einMuster entwirft, das aus einem kleinen Recht-eck oder einem horizontalen oder vertikalenStreifen besteht, also wenig ladezeitintensivist, gekachelt aber gute Effekte erzielt. Möchteman allerdings ein ganzes Bild in den Hinter-grund legen, ist darauf zu achten, dass das Bildnicht gekachelt wird, auch wenn das Brow-serfenster auf eine Größe von 1024 x 768 auf-gezogen wird. Besonders bei langen Inhaltenkommt es schon vor, dass beim Scrollen aufeinmal der obere Teil des Bildes wieder auf-taucht. Das ist nicht sehr professionell, deswe-gen also alle Seiten am Ende der Produktionnochmals daraufhin testen und gegebenenfallsdie Hintergrundbilder vergrößern. Hinter-grundbilder sollten außerdem immer daraufhinüberprüft werden, ob alle Inhalte gut darauf»stehen« und die Texte lesbar sind und die Da-teigrößen bezüglich Ladezeiten noch ver-tretbar. Ab den Viererversionen vieler Browserlassen sich auch GIF-Animationen als Hinter-grundbilder einsetzen, was »lustige« Effektemöglich macht ...

Wählt man kein Hintergrundbild aus, emp-fiehlt es sich, eine HintergrundfarbeHintergrundfarbeHintergrundfarbeHintergrundfarbeHintergrundfarbe festzule-gen. Dreamweaver bietet einem als Standarddie Farben der WWW-Palette, es lassen sichaber natürlich auch alle anderen RGB-Werteeingeben. Auch wenn man mit Hintergrund-bild arbeitet, sollte man eine Farbe für denHintergrund auswählen, am besten eine, dieder Farbe des Bildes entspricht, denn beim ers-ten Laden der Seite wird dann schon mal dieFarbe angezeigt, bevor sich das Bild aufgebauthat.

Neben dem Hintergrund lassen sich hierauch Textfarbe, Linkfarbe, die Farbe eines be-reits angeklickten Links und die Farbe einesLinks während des Klicks festlegen. Bei der

Strukturieren Sie!Das sich Dokumente auf einem WWW-Serverimmer relativ zueinander verhalten sollten undnicht absolut, ist es ratsam, von Anfang an eineklare Ordnerstruktur anzulegen, mit der manarbeitet. Auf oberster Ebene befindet sich dieschon erwähnte index.html, in einem Images-Ordner die dazugehörigen Bilder und analogzu den einzelnen Bereichen der Site die Unter-seiten.

. .


Textfarbe sollte man grundsätzlich darauf ach-ten, dass der Text genügend Kontrast zum Hin-tergrund hat. Arbeitet man negativ, d.h. hellerText auf dunklem Grund, ist es wichtig zu wis-sen, dass bei Ausdrucken Hintergründe nur ge-druckt werden, wenn der User das auch imBrowser entsprechend eingestellt hat. Das istvon Version zu Version unterschiedlich, mei-stens ist es aber dann eben doch so, dass manbeim Drucken von ganz wichtigen Adressen,die man weiß auf schwarz auf einer Seite ste-hen hat, ... ein weißes Blatt Papier aus demDrucker zieht. Also Vorsicht beim Arbeiten mitNegativschriften.

TextlinkfarbenTextlinkfarbenTextlinkfarbenTextlinkfarbenTextlinkfarben sollten sich zwar klar vomnormalen Text abheben, da einige User inihrem Browser Underline Links ausgeklickthaben. Andererseits wirkt es grafisch deutlichanspruchsvoller, wenn sich die Farben einesTextes auf der Seite in einem Farbspektrum be-wegen. Es bietet sich an, besuchte Links einpaar Nuancen heller anzulegen als normale

Links, nur bei aktiven Hyperlinks, also dann,wenn man mit gedrückter Maustaste über ei-nem Wort ist, kann man mit sehr viel hellerenoder dunkleren Farben arbeiten, um dem Usereine Response zu geben. Stellt man die Link-farben nicht extra ein, erscheinen Default-Far-ben, was natürlich kein Problem ist, der Siteaber stark vom eigenen Charakter etwas nimmt.

RandbreitenRandbreitenRandbreitenRandbreitenRandbreiten kann man bei den Seiteneigen-schaften ebenfalls definieren und festlegen,wie weit die Inhalte vom Browserrand entferntsind. Diese Werte treten aber nur in Kraft,wenn man mit Frames arbeitet und sich dieSeite in einem Frameset befindet. Dann bietetes sich vor allem an, alle Werte auf null zu stel-len, denn für Werte größer null gibt es nochandere Möglichkeiten, wie zum Beispiel leereGIFs.

Die restlichen Einstellungen sollte man amAnfang am besten nicht anfassen, für normaleWebsites sind obige Einstellungen vollkommenausreichend.

.

Abbildung 5Die Grundeinstellungen bei einem Standarddokument und dasErgebnis im Editor

.


Text

Nachdem man nun also die ersten Einstellun-gen gemacht hat, beginnt man mit dem Schrei-ben des Textes. Der Editor übersetzt Sonder-zeichen sofort in HTML-Code, was man beigeöffnetem HTML-Quellenfenster hervorra-gend gleichzeitig betrachten kann. Schwierigerwird es, wenn man Text per Copy & Paste auseinem Textverarbeitungsprogramm wie Wordholt! Beim normalen Einfügen werden Son-derzeichen nämlich nicht übersetzt, aber dassieht man erst, wenn man die Seite im Browserprüft. »Das Öffnen der Fenster und Türen wäh-rend der Fahrt ist verboten!« liest sich dannnämlich so: »Das …ffnen der Fenster undTŸren wShrend der Fahrt ist verboten!« KleinerTrick: Geht man beim Bearbeiten auf Als Text

einfügen, werden die Sonderzeichen automa-tisch umgesetzt und erscheinen im Browserkorrekt. Hat man das mal wieder vergessenund merkt es erst später, wenn der ganze Texteingefügt ist, kann man den ganzen Text inDreamweaver nochmals kopieren (ohne ihn

vorher in ein Layout eingesetzt zu haben) undersetzt ihn mit Als Text einfügen.

Neben Sonderzeichen gibt es auch mit Leer-zeichen und Tabs ProblemeProblemeProblemeProblemeProbleme, Dreamweaver ak-zeptiert beides nicht. Ein Return entspricht ei-nem doppelten Zeilenabstand, möchte maneinen einfachen, muss man die Alt-Taste ge-drückt halten. Da das Browserfenster in derGröße aber flexibel ist und man nie weiß, wieder User es einstellt, sollte man mit Zeilenum-brüchen sehr sparsam umgehen. Um den Textnicht über die ganze Seite fließen zu lassen, ar-beitet man besser mit Tables.

Bild

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

F Abbildung 6Dialogfenster beim Einfügen einesBildes

. .


de abgespeichert sein. Ein Dialogfenster öffnetsich, und man wählt das gewünschte Bild aus,immer relativ zum Dokument.

Nachdem nun Hintergrund, Text und Bildauf der Seite zu sehen sind, herrscht die weitverbreitete Meinung, man wäre doch eigent-lich fertig. Und die Unmengen schlecht gestal-teter Seiten im Netz bestätigen dies. Die richti-ge Arbeit beginnt allerdings erst jetzt. Die Seiteso zu gestalten, dass Inhalte lesefreundlich auf-bereitet sind, dass man Informationen gut auf-nehmen kann und dass sich ein einheitlicherStil durch die Seiten zieht, ist die eigentlicheAufgabe des Webdesigns.

Tables

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

im Klaren sein und die Tabelle auf Papier be-reits gescribbelt haben. Je einfacher ein Table,umso schneller sind die Ladezeiten.

Man hat die Möglichkeit, Tabellen prozen-tual zum Browserfenster anzulegen oder aberin festen Pixelgrößen. Normalerweise emp-fiehlt sich eine prozentuale Angabe, beziehtsich wie in unserem Fall der Table aber auf denHintergrund, wird eine feste Größe angege-ben. Tables können natürlich jederzeit in allenEigenschaften verändert werden (Abb. 8).

In diesem Table werden nun mit Copy-and-Paste alle Objekte der Site gelegt. Man solltesich dabei aber nicht voll auf die Darstellungim Editor verlassen, sondern immer wieder imBrowser testen, ob alles so aussieht, wie ge-plant. Der Rahmen eines Tables sollte grund-sätzlich auf null gestellt werden, es sei denn,die nicht sonderlich schönen dreidimensiona-len Linien sind Teil des visuellen Konzeptes,oder man arbeitet mit Zahlentabellen, bei de-nen Trenner nötig sind.

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

G Abbildung 8Anlegen einer Table mit festen Größen

. .


Modifikation von Objekten

Je nachdem, welches Element des Dokumen-tes man anklickt, ändert sich das Eigenschaf-tenfenster. Man hat folgende Modifikations-Modifikations-Modifikations-Modifikations-Modifikations-optionenoptionenoptionenoptionenoptionen:

TablesE Name des TablesE Anzahl der Zeilen und SpaltenE Breite und Höhe der SpaltenE Raum in und um die ZellenE RahmenbreiteE Position des Tables (rechts, links etc.)E Abstand in und zwischen den ZellenE Abstand um das TableE Farben des RahmensE Hintergrundfarbe oder -bild der Tabelle

BildE Name des BildesE Breite und HöheE QuelleE VerlinkungE Ziel einer Verlinkung, z.B. ein anderer

Frame

E PositionierungE Alt-Tag – hier gibt man Text ein für den Fall,

dass das Bild nicht oder nur langsam gela-den wird

E Image-Map – bei verschiedenen Links, dieman auf das Bild legt

E Abstand um das BildE Low Source – ein Bild gleicher Größe, aber

in deutlich niedrigerer Qualität, das geladenwird, bevor das eigentliche Bild kommt

E Rahmen um das BildE Bündigkeit des Bildes

TextE FormatE Schriftart – zu empfehlen sind Geneva, Arial

(ohne Serifen)E VerlinkungE Ziel der VerlinkungE SchriftgrößeE FarbeE StilE AusrichtungE AufzählungE EinrückungE Umbruch

Abbildung 9 E

Eigenschaften derdrei Objekttypen

Tabellen, Bilder, Text

. .


Hat man sich auf dieser Ebene in Dream-weaver eingearbeitet, ist es nicht mehr schwer,auch komplexere Websites zu erstellen. Wich-tig ist nur, dass man sich die Regeln des Web-designs zu Herzen nimmt und sich genau anOrdnerstrukturen und relative Verlinkungenhält.

Frames

Wie schon angesprochen, ist der Einsatz vonFrames im Web sehr umstritten. Immer mehrSites tauchen auf, die komplett ohne Framesgestaltet sind. Dennoch bieten Frames die bes-sere Möglichkeit, in HTML gut und effektiv zugestalten.

Man unterscheidet dabei in Seiten, die dasFrameset definieren, also angeben, wie vielehorizontale und vertikale Frames es gibt, wiesie miteinander verbunden sind und wie großsie sind. Diese Frameset-HTML-Seiten sind imBrowser nicht zu sehen, sondern geben nur an,welche Seiten in dieses Frameset geladen wer-den. Diese Seiten sind die einzelnen Frames,also gestaltete HTML-Seiten, auf denen Inhalte

zu finden sind und die man auch einzeln imBrowser laden kann, wenn man den gedrück-ten Cursor lange genug auf die Seite hält. Eserscheint dann die Abfrage, ob man diesenFrame in einem neuen Fenster öffnen möchte.Das bietet sich zum Beispiel an, wenn man sichfür einen ineinander verlinkten Bereich interes-siert und Hauptnavigation und Banner nichtsehen will, oder man den Inhalten eines Fra-mes mehr Platz geben will. Ein Java-Skript ver-hindert diese Option aber mittlerweile auf vie-len Sites, damit man Seiten nicht mehr ausihrem Kontext und der Navigation lösen kann.

Um Frames wirklich verstehen zu können,sollte man sich kurz mit dem HTML-CodeHTML-CodeHTML-CodeHTML-CodeHTML-Code dazubeschäftigen, da dieser den Aufbau sehr klarmacht.

F Abbildung 10Das Endprodukt:eine No-Frame-Variante

Richtige Planung ist wichtigEin FramesetFramesetFramesetFramesetFrameset muss sorgfältig geplant werden,da man die Frames am besten ineinander ver-schachtelt, mit dem Ziel, dass sich bei einemKlick möglichst wenige Seiten austauschen.

. .


E <frameset rows="50,*" cols="*">

Diese Zeile besagt, dass man ein übergeord-netes Frameset mit zwei Zeilen hat. Dieobere hat eine Höhe von 50 Pixeln, die un-tere ist flexibel, das heißt, sie füllt immerden Rest des Browserfensters aus. Spaltengibt es nur eine, die logischerweise auchflexibel ist.

E <frame name="hauptnavigation"

src="nav_1.html" >

Nun wird die erste Zeile definiert, da sie nuraus einem Frame besteht, wird auch nurdieser angegeben. Außer dem Namen undder HTML-Seite namens nav_1.html, die indiesen Frame geladen wird, könnte manauch noch angeben, ob Scrollbars in diesemFrame zu sehen sind, und andere Eigen-schaften festlegen.

E <frameset cols="80,*" >

Nun wird die zweite, die untere Zeile defi-niert, sie besteht aus zwei Spalten, die linkeist 80 Pixel breit, die rechte wieder flexibel.Man könnte auch prozentuale Werte einge-ben und sagen, der Content soll immer 75 %der Seite ausmachen. Dabei riskiert manaber, dass eine eventuelle Navigation im lin-ken Frame zum Teil abgeschnitten wird.

E <frame name="subnavigation"

src="nav_2.html">

Hier wird nun der linke der beiden Framesdefiniert, er wird zur Navigation.

E <frame name="inhalt" src="content.html">

Und im »inhalt« wird die content.html gela-den.

.

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

.


E </frameset>

Zunächst wird das Frameset der Spalten ge-schlossen.

E </frameset>

Und nun auch das Frameset der Zeilen.<noframes>Für User ohne frame-fähigen Browser sollteman immer eine No-Frame-Variante anle-gen.

E <body bgcolor="#FFFFFF">

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

E </body>

E </noframes>

Am Schluss wird dann auch die Variante fürBrowser ohne Frames geschlossen.

Diese Kombination kann beliebig verändertwerden. Am Anfang lohnt es sich, mit Copy-and-Paste einfach mal ein paar Variationenauszuprobieren. Möchte man zum Beispiel aus

der Hauptnavigation gleichzeitig Sekundärna-vigation und Content auswechseln, sollte mandas untere Frameset in einer neuen HTML-Sei-te definieren und die dann als Seite in das Fra-meset einladen.

Der Code würde dann folgendermaßen lau-ten:<frameset rows="50,*" cols="*">

<frame name="hauptnavigation"

src="nav_1.html" >

<frame name="bottom" src="fr_content.html">

</frameset>

</frameset>

In Dreamweaver kann man sich entwederüber die Objekte-Palette Frames vorgefertigteFramesets laden und modifizieren, oder manbaut sich selbst eines.

Dazu sollten Sie zunächst unter Ansicht dieFrames sichtbar stellen, damit Sie auch sehen,woran Sie arbeiten. Dann teilen Sie Ihr Fenster

Abbildung 12 E

Das gleiche Frameset mitunterschiedlichem Aufbau

. .


F Abbildung 13Die 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 einzelnenFrames verändern.

.

auf, indem Sie entweder über Ändern ·Frame-

set den Frame links, rechts, unten oder obenteilen. Oder aber Sie ziehen einen Frame direktmit gedrückter Alt-Taste auf. Ziehen Sie dieFrames von einer der Ecken aus auf, erhaltenSie eine Unterteilung in vier Frames. Umge-

kehrt gehen Sie vor, wenn Sie einen Framewieder löschen wollen. Natürlich kann mandie Frames jederzeit editieren, und zwar überdie Palette für Frames sowie das dazugehörigeEigenschaftenfenster.

.


. .


Adobe GoLiveViele Paletten für die Kunst

Die ersten professionellen WYSIWYG-Editoren warenGoLive Cyberstudio und Dreamweaver. Doch seit denzunächst noch rudimentären Programmversionen isteiniges geschehen. Während es Macromedia durchFlash endgültig geschafft hat, in den Massenmarktvorzustoßen, wurde Cyberstudio von Adobe gekauftund heißt nun »Adobe GoLive«. In ihrer Funktionalitätähneln sich die beiden Widersacher heute, auch wennes natürlich noch Unterschiede gibt – diese vor allem inder Handhabung.

Auf den ersten Blick wirkt jedoch auch dasneue GoLive recht unaufgeräumt, da sehr vielePaletten zur Verfügung stehen, die teilweiseauch noch diverse Reiter haben, über die aufweitere Funktionen zugegriffen werden kann.Etwas gewöhnungsbedürftig ist hierbei, dassviele Funktionen nicht über das Menü, son-dern nur über die entsprechenden Elemente inden Paletten zur Verfügung stehen. AndereFunktionen wiederum stehen nur über dasMenü zur Verfügung, was die Bedienung nichtgerade vereinfacht. Hat man sich jedoch andiese Dinge gewöhnt, lässt sich das Programmrecht schnell erlernen. Zum Glück wurde dasbislang eher minderwertige Hilfesystem in derneuen Version komplett überarbeitet und stehtnun zur Verfügung, um den Umgang mit demEditor zu erlernen.

In der Bedienung fällt auf, dass Elementewie Bilder oder Frames nur erzeugt werden

Der Arbeitsbereich

Seit der letzten Version hat sich bei GoLive

5.0 einiges getan und Adobe hat der neuenVersionsnummer einige Zusatzfunktionalitätenund Verbesserungen im Detail gegönnt. Be-sonders hervorzuheben unter den Neuerungensind die so genannten »SmartObjects«. Diesemachen es möglich, direkt in GoLive Photo-shop-, Illustrator- oder LiveMotion-Dokumen-te zu platzieren, zu beschneiden und in das ge-wünschte Web-Bildformat umzuwandeln. Mitdieser Vorgehensweise fallen natürlich einigezeitaufwendige Schritte bei der Umwandlungvon Bildern weg, leider jedoch nur unter Ver-wendung der entsprechenden Adobe-Pro-gramme. Auch die gemeinsame Arbeit einesTeams an einer Site wird von GoLive 5.0 nununterstützt. Mittels »WebDAV« (Web Distri-buted Authoring and Versioning) werden Ver-sionskontrolle und Arbeitsgruppenunterstüt-zung inklusive Freigaben möglich.

..

105Adobe GoLive

G Abbildung 1GoLive mit einigen verfügbaren Palettenfenstern

.

können, indem man sie per Drag & Drop ent-weder aus der Palette oder aus einem Ordnernimmt und sie im Dokument an der richtigenStelle »fallen lässt«. Vor allem bei großen Sei-ten mit vielen Elementen und einer klein-teiligen Struktur stört diese Vorgehensweisehäufig, auch wenn sie im Ansatz recht intuitivist.

Im Dokumentenfenster können über dieReiter Layout, Frames, Source, Outline undPreview verschiedene Ansichten auf das Do-kument eingestellt werden. Dabei kommtOutline eine Besonderheit zu: Hiermit kanneine hierarchische Ansicht aller HTML-Befehleeingesehen werden. Dieses Feature dürfte fürden normalen User uninteressant sein, fürWebdesigner, die sich noch dafür interessie-ren, welchen Code Ihr Webeditor schreibt, istes jedoch praktisch und wird häufig genutzt.

Die Palette Color überzeugt vor allemdurch ihre hochqualifizierten Farbwähler: Esstehen insgesamt neun Möglichkeiten zur Ver-fügung, darunter auch ein RGB- und einCMYK-Wähler, der automatisch die nächstlie-genden »reinen« Webfarben anzeigt.

Der Inspector wandelt sich je nach ausge-wähltem Element, um die möglichen Änderun-gen oder Einstellungen vornehmen zu können.Als extrem unangenehm empfinden wir hierallerdings, dass gerade häufig benötigte Text-formatierungen nicht im Inspector möglichsind. Besonders gelungen ist die Möglichkeit,auch Aktionen (ein DHTML-Feature) direkt ander Auswahl festzulegen und zu verändern.

Das wichtigste Fenster zur Neuerstellungvon Elementen ist das für Objekte. Insgesamtneun Untergruppen stehen zur Verfügung, dar-unter auch eine für selbstdefinierte Steuerzei-

G Abbildung 2Die Outline-Ansicht von GoLive

.


chen. Sämtliche in einer HTML-Seite mög-lichen Elemente, wie Bilder, Applets, Framesoder QuickTime Movies können hier ausge-wählt und eingesetzt werden.

GoLive als Layout-Programm

Bereits vor der Übernahme des Programmsdurch Adobe führten die Entwickler so ge-nannte »Grids« ein, also Raster, auf denen Ob-jekte wie Texte und Bilder angeordnet werdenkönnen. Diese bestehen aus Tabellen, derenrasterartig angeordnete Zellen mittels zusätz-lichem Code im Editor, nicht aber im Browsersichtbar sind. Sicherlich gibt es feinere Mög-

.

G Abbildung 3Umfangreiche Paletten und gewöhnungsbedürftigeSymbole bei GoLive

H Abbildung 4Verwendete Farben können über eine ganze Sitehinweg überprüft werden.

lichkeiten der Gestaltung von Layouts mittelsTabellen, da der Sourcecode natürlich durchderartige Hilfestellungen immer anwächst.Auch das Verhalten der Grid-Tabellen bei einerVeränderung der Fenstergröße des Browserskann nicht flexibel gehandhabt werden, für dieErstellung erster Sketches jedoch ist die Funk-tion sehr wertvoll.

GoLive als Site-Editor

Eine große Stärke des Programms ist es, ganzeSites zu überwachen. Dabei liegt der Fokus be-sonders auf der konsistenten Verwaltung vonFarben, Links und Schriftarten (so genannte

.

107Adobe GoLive

Fontsets). Im Site-Fenster werden alle Variatio-nen dieser Elemente angezeigt, die in irgendei-nem Dokument vorkommen. Das erleichtertvor allem die Kontrolle einer einheitlichen Ge-staltung vieler Einzelseiten. Auch interne undexterne Links können so kontrolliert und ver-ändert werden. Besonders praktisch: Alle Linksauf eine bestimmte Seite können zentral geän-dert werden, das zeitraubende Öffnen der ein-zelnen HTML-Seiten entfällt.

G Abbildung 6... und die Ansicht in der Browserdarstellung

.

Adobe GoLive ist sicherlich für erfahrene Ge-stalter ein machtvolles Werkzeug, wenn sie be-reit sind, sich in die ungewohnte Bedienungeinzuarbeiten. Sowohl die Möglichkeiten derFarbverwaltung, als auch die große Flexibilitätbeim Einsatz eigener Tags und Bibliothekenmachen das Programm dabei unschlagbar viel-seitig. Für den ungeübten Anwender jedoch istdas Programm sicherlich zu komplex und inder Handhabung oft zu kompliziert.

H Abbildung 5Ein Grid als Layouthilfe ...

.


Microsoft FrontPage 2000Word fürs Web

FrontPage funktioniert ähnlich wie alle Microsoft-Programme: Einsteiger können schnell in Aktiontreten, es gibt viele Vorlagen, und die Oberfläche istden meisten bestens bekannt. Doch die Einfachheitmuss bezahlt werden. Für professionelle und geübteAnwender oder solche, die auch weitere Editorennutzen möchten, gestaltet sich das Abschaltensämtlicher FrontPage-Automatismen schwierig bisunmöglich.

pette, mit der man auch aus Bildern HTML-Farben »greifen« kann, sind richtig sinnvoll.

Seine Stärken kann das Programm aber nurdann ausspielen, wenn eine Arbeitsgruppe ander gleichen Site arbeitet (selbstverständlichalle Mitglieder mit FrontPage ...) und Aufgabenund Berichte, kurz die Organisation eines»Webs« ansteht. Ein hervorragendes Berichts-wesen hält hierbei alle Beteiligten auf demLaufenden, wie es um die Site steht und werwelche Aufgaben zu erledigen hat. Diese Infor-mationen werden im Webordner gespeichert,sodass alle mit FrontPage darauf zugreifen kön-nen. Probleme gibt es genau dann, wenn auchnur eine Person darauf verzichtet, FrontPagezu benutzen, das Programm und die gespei-cherten Metainformationen werden dann un-berechenbar.

Standardisierung

Ein großer Vorteil der Office-Produkt-

familie liegt darin, dass alle Programme überein identisches Aussehen und eine identischeFunktionsweise verfügen. So natürlich auchFrontPage. Wer mit Word Texte erstellen kann,dem wird es leicht fallen, mit FrontPage eineSite aufzubauen. FrontPage nennt Sites übri-gens »Webs«, eine recht unnötige Umbenen-nung. Gerade Anfänger dürften die bekannteOberfläche und die somit intuitive Bedienungschätzen lernen und gerne die vielen aus dergroßen Familie bekannten Extras, wie automa-tische Rechtschreibprüfung oder Makropro-grammierung, nutzen.

Die 2000er-Version hat mit ihrem allererstenVorgänger, von Webdesignern immer müdebelächelt, nichts mehr zu tun. Mittlerweile istauch Microsoft klar geworden, dass proprietä-rer HTML-Code von niemandem gewünschtist, und so behält FrontPage Codezeilen, dieaus anderen Programmen übernommen wer-den, unverändert bei. Einige Tools wie die Pi-

..

109Microsoft FrontPage 2000

Abbildung 1 E

Die FrontPage-Arbeitsfläche mitallen verfügbaren Symbolleisten

Abbildung 2 E

Und zum Vergleich: die Word-Arbeitsfläche ...

..


Der Arbeitsbereich

Unterhalb der Menüleiste und der gewohntenSymbole sind die Ansichtsleiste und das ei-gentliche Dokument angeordnet. Dieses kannin drei verschiedenen Modi angesehen wer-den: als Layout, als HTML-Code und in einerVorschau. Geschickt gemacht: Die Vorschau istrichtig gut, wenn auch der Microsoft InternetExplorer installiert ist. Dieser ist nämlich ein-fach eingebunden, sodass eine Seite unter»realen« Bedingungen getestet werden kann.Die Einbindung anderer Browser ist leidernicht möglich.

In der linken Ansichtsleiste schließlich fin-den wir alles, was wir brauchen, um die Arbeitan einer Site zu organisieren, für die meistenDarstellungen muss jedoch ein »Web« geöff-net sein.

Dieses Feature haben wir bei komplexen Si-tes schon oft vermisst. Ob man nun Dateiensucht, die älteren Datums sind, alle fehlerhaf-ten Links angezeigt bekommen möchte oder

.

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

G Abbildung 4Ordentliche Menschen werden sie lieben: die Berichtsansicht.

aber alle externen Links überprüfen möchte:Die BerichtsansichtBerichtsansichtBerichtsansichtBerichtsansichtBerichtsansicht macht’s möglich (Abb. 4).Am besten dabei ist die übersichtliche tabella-rische Anzeige, die auch Änderungen in derListe möglich macht, sodass nicht alle HTML-Seiten einzeln aufgerufen werden müssen.Auch der Bearbeitungsstatus einer Seite durchMitglieder eines Teams kann so jederzeit leichtüberprüft werden.

Mit Hilfe der Navigationsansicht könneneinzelnen Seiten Gemeinsame Randbereiche

zugewiesen werden. Dies können laut Hand-buch z.B. Logos oder Menüpunkte sein. Wähltman die Option, so wird in jedem einzelnenDokument ein solcher Randbereich eingefügtund kann in der Navigationsansicht angesehenund zentral editiert werden.

.


G Abbildung 5Gewöhnungsbedürftig: die Navigationsansicht

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

G Abbildung 7Bei Teams übernimmt die Aufgabenansicht die Kontrolle.

..


Weitere Features

Außer den Standardfunktionalitäten, die mitt-lerweile bei Webeditoren zum guten Ton ge-hören, wurden bei FrontPage auch einige Fea-tures implementiert, die das Leben deutlicheinfacher machen können.

MiniaturbilderVor allem bei der Erstellung von Shops oderKatalogen steht man oft vor der zeitaufwän-digen Aufgabe, eine kleine Vorschau eines Bil-des erzeugen zu müssen. Der beste Weg istin diesem Fall sicherlich das Verkleinern undKomprimieren des Bildes in einem Bildbearbei-tungsprogramm. Eine sehr schnelle und einfa-che Variante jedoch bietet uns FrontPage an:Man setzt einfach das Originalbild ins Doku-ment ein, markiert es und klickt dann auf dieSchaltfläche Auto-Miniaturansicht. Das Pro-

.

G Abbildung 8Die Auto-Miniaturansicht: ein schnelles Werkzeug zumVerkleinern von Bildern

G Abbildung 9Das Pipetten-Tool: hervorragendes Werkzeug, umständlicheHandhabung

gramm wandelt das Bild in eine kleinere Vari-ante um, die als weitere Bilddatei gespeichertwerden kann. Leider wird bei der Verkleine-rung automatisch im HTML-Code ein blauer»Klick-mich-jetzt«-Rahmen hinzugefügt, dermühsam wieder entfernt werden muss.

PipetteUnter Zuhilfenahme einer Pipette ist es mög-lich, aus jedem Bild den Hexadezimal-Codeeiner Farbe zu kopieren, damit diese in Front-Page dann für die Gestaltung von Text oderanderen einfärbbaren Elementen verwendetwerden kann. Dieses durchaus praktischeWerkzeug steht leider nur im Einstellungsfen-ster für Weitere Farben zur Verfügung und istin der Handhabung entsprechend umständlich.

.


Fertige DesignsKennen Sie das: Sie sitzen in einer Präsenta-tion, und am Ende erscheint eine PowerPoint-Folie mit einem schwarzen Männchen und ei-nem Fragezeichen neben dem Kopf: »NochFragen?« Dieses Männchen ist ein »ClipArt«,das Microsoft allen Nutzern auf dieser Weltmitgegeben hat, um Designer zu quälen.

Ähnliches hat der Konzern auch jetzt wiedervor und implementierte in FrontPage 2000 fer-tige »Designs«. Diese bestehen aus Grafikenund Formatvorlagen, die auf ein Dokumentoder eine ganze Site angewendet werden kön-nen, um eine konsistente Gestaltung zu errei-chen. Bis auf wenige Ausnahmen entsprechendiese Designs jedoch nicht unseren Schön-heitsvorstellungen.

Doch reiner Standesdünkel wäre hier fehlam Platz, denn das Feature kann auch dazuverwendet werden, eigene Vorlagen zu erstel-len, die dann auch von Laien (z.B. im Intranet)

.

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

G Abbildung 11Auch nicht von schlechten Eltern: »Zitrusmix«

sehr einfach genutzt werden können und so-mit tatsächlich für die konsistente Gestaltungeiner ganzen Site sorgen.

Vor allem kleinere Firmen und Arbeitsgrup-pen, die Websites (auch für das Intranet) auf-bauen und pflegen müssen, werden ihreFreude an der aus der Office-Welt bekanntenFunktionsweise des Programms haben. FürWebdesigner stellt FrontPage jedoch keinernstzunehmendes Werkzeug dar, da es vieleÄnderungen im Alleingang macht, die auchnicht mehr nachvollzogen werden können. Sohaben wir beispielsweise verschiedene Funk-tionen getestet und danach wieder rückgängiggemacht. Trotzdem verblieben Unterordnermit undefinierbaren Dateien und Funktionenin unserem »Web«. FrontPage scheint sich also(wie fast alle Office-Programme) nur dann zueignen, wenn man für eine Seite ausschließlichdieses Programm benutzt und sonst keines.

.


Macromedia FlashAnimation und Interaktivität im Netz

Flash hat sich innerhalb kurzer Zeit zu einemder beliebtesten Plug-ins entwickelt und er-möglicht Animationen und Interaktionen, dieso im Netz für unmöglich gehalten wurden.Aber ist der Hype um Flash wirklich richtig?

Flash (hier Version 5) dagegen basiert aufVektorgrafiken, die in Programmen wie Illu-strator oder Freehand hergestellt werden. Vek-torbilder sind deutlich kleiner als Bilder, die aufPixeln basieren, ermöglichen dadurch schnelleLadezeiten und beliebige Skalierbarkeit. Ge-stalten lassen sich mit Flash alle Bestandteileeiner Website, von Bildern über Animationenbis hin zu Navigationselementen und synchro-nem Sound.

Mittlerweile haben Millionen User denFlash-Player im Browser integriert. Falls dasProgramm nicht installiert ist, lässt es sich ent-weder von der Macromedia-Site downloaden,oder aber man navigiert durch eine extra zu er-stellende Alternativversion in HTML.

Um ein Flash-FileFlash-FileFlash-FileFlash-FileFlash-File zu erstellen, werden Gra-fiken direkt im Programm gezeichnet oder im-portiert. Diese werden auf der Bühne platziertund abgestimmt auf eine Zeitleiste animiert.Zweiter Schritt nach der Animation ist die In-teraktion. Grafiken werden mit Funktionali-täten belegt, die auf Aktionen des Users rea-gieren und dadurch den Film verändern. Derfertige Film wird als Flash-Player-FilmFlash-Player-FilmFlash-Player-FilmFlash-Player-FilmFlash-Player-Film expor-tiert und in eine HTML-Seite integriert.

Flash ist ein Programm zum Erstellen inter-

aktiver Filme auf Basis von Vektorgrafiken fürdas WWW. Um die Filme im Browser abspie-len zu können, benötigt man ein Plug-in glei-chen Namens, das häufig schon in der Brow-serinstallation integriert ist. Die Verbreitungnimmt immer mehr zu und kann mittlerweileguten Gewissens für eine Vielzahl von Seitenverwendet werden.

Lange Zeit war es im Netz nur möglich, mitHilfe von GIF-Animationen Bewegung auf dieSites zu bringen. Interaktion zu erzielen warnur mit HTML, JavaScript oder Java möglich,was einem entweder nicht sehr viele Möglich-keiten offen ließ, lange Ladezeiten mit sichbrachte oder sehr unstabil auf dem Rechnerlief. Ein kurzes Intermezzo machte Shockwave,Filme, die aus dem Programm Director expor-tiert werden, mit dem eigentlich CD-ROMsprogrammiert werden. Shockwave bietet zwareine Vielzahl von Interaktionsmöglichkeiten,und auch heute werden Spiele im Netz nochauf Director-Basis produziert. Problem sindaber die langen Ladezeiten, die Schwierigkei-ten mit fließenden Animationen und die man-gelnde Verbreitung des Plug-ins.

..

115Macromedia Flash

Die Fenster und Paletten

Für die Arbeit in Flash sollte man sich auf dreiFenster konzentrieren.

Das Hauptfenster Es besteht aus der Bühne, auf der sich derkomplette Film abspielt. Über diesem Bereichist die Zeitleiste, auf der festgelegt wird, wannAnimationen und Aktionen stattfinden. Hierwird außerdem festgelegt, in welcher Ebenewelche Grafiken liegen. Je weiter oben, destoweiter vorne liegt das Objekt.

F Abbildung 1Flash mit seinen wichtigsten Fensternund Paletten, in der Mitte das Haupt-fenster, links die Symbolleiste

.

Die Symbolleiste Auf ihr sind alle Tools zu finden, mit denenman Grafiken erstellt und bearbeitet. Das sindzum einen die Auswahlwerkzeuge Pfeil undLasso, die Tools zum Erstellen von Linien,Rechtecken, Kreisen und Text. Diese Elementesind alle vektorisiert, d.h. skalierbar, und kaumdatenintensiv. Außerdem gibt es die Malwerk-zeuge Stift und Pinsel, das Tintenfass und denFarbeimer zum Einfärben von Objekten, diePipette zur Farbaufnahme und den Radiergum-mi zum Löschen sowie die Hand zum Verschie-ben des Films und die Lupe zum Vergrößern.Die Ansichtsgröße kann auch exakt über dasEingabefeld reguliert werden.

Der Bereich darunter ist kontextsensitiv undändert sich, je nachdem welches Werkzeugman ausgewählt hat. Hier werden zum BeipielFarben definiert, Schriften festgelegt oder Ob-jekte skaliert.

.


Getting started

Öffnet man das Programm, so öffnet sich auchsofort das Hauptfenster mit einer leeren Büh-Büh-Büh-Büh-Büh-nenenenene, die nun bespielt wird. Um besser arbeitenzu können, sollte man bei Ansicht auf Bild

einblenden und Arbeitsbereich gehen, dannsieht man genau, wie das Flash-File später aus-sehen wird. Alles, was außerhalb der weißenFläche zu sehen ist, taucht auch später imFlash-Film nicht auf, sondern wird abgeschnit-ten.

Als Erstes definiert man die Eigenschaftendes Films über Modifizieren · Film ... Hierstellt man die Geschwindigkeit ein, die mitzwölf Bildern pro Sekunde als Standard in Ord-nung ist, sowie die Größe des Films. Das istbesonders wichtig, wenn man mit Pixelgrafiken

Das Bibliotheksfenster Es enthält alle Objekte, die man erstellt und inSymbole umgewandelt hat. Man sollte sofortnach Erstellung jedes Objekt in die Bibliotheklegen, da es dann wieder zu verwenden ist unddie Größe des Filmes deutlich verringert. AberVorsicht, die Eigenschaften, die man diesenSymbolen zugeordnet hat, bleiben erhalten,deshalb sollte man sehr strukturiert vorgehen.Symbole werden definiert als Grafik (häufig beiEinzelbildern ohne Interaktivität), als Schaltflä-che (Button) oder Filmsequenz (meist bei ani-mierten Bildfolgen). Diese Symbole könnenkombiniert und wieder als neues Symbol ge-speichert werden (Abb. 2).

Abbildung 2 E

Die Bibliothek mit einer Grafik, einerSchaltfläche und einer Filmsequenz

..

117Macromedia Flash

arbeitet, die in dieser Größe am besten darge-stellt werden. Wird der Film später im Browservom User skaliert, verzerrt es die pixelbasiertenGrafiken.

Man hat die Möglichkeit, sich ein Raster, indiesem Falle heißt es GitternetzGitternetzGitternetzGitternetzGitternetz, anzeigen zulassen, das bei der Positionierung von Grafikenhilft. Es ist im späteren Film nicht sichtbar.Sichtbar ist aber der Hintergrund, der hierebenfalls eingestellt wird.

Man hat nun die Möglichkeit, direkt aufder Bühne mit den Werkzeugen Grafiken zuerstellen. Es bietet sich aber an, komplexereElemente in Programmen wie Illustrator oderFreeHand zu erstellen und zu importieren, daman dort weitaus mehr Möglichkeiten zurGestaltung hat.

Das Erstellen von SymbolenSobald man das Bild gezeichnet, importiertoder mit Copy-and-Paste in die Datei geladenhat, erscheint es auf der Bühne und im ober-sten linken Kästchen der Zeitleiste. Die wich-tigsten Schritte sind nun, das File erst mal zusichern, dann die Ebene, auf der die Grafikliegt, benennen, damit man die Orientierungnicht verliert. Jede Grafik, die in dem Film vor-kommt, sollte auf einer eigenen Ebene liegen,einfach eine neue über Einfügen · Ebene er-stellen. Die oberste Ebene liegt vorne, die un-terste hinten, alle lassen sich jederzeit ver-schieben.

Der dritte wichtige Punkt ist, die Grafik inein SymbolSymbolSymbolSymbolSymbol umzuwandeln. Ein Symbol ist, wievorhin schon bemerkt, ein Bild, eine Animati-on oder eine Schaltfläche, die im Film immerwieder verwendet werden können. Man klicktdazu auf die Grafik und geht auf Einfügen · In

Symbol konvertieren und hat den die Mög-lichkeit auszuwählen, was für ein Symbol dieGrafik sein soll. Je klarer man sich dabei überden Verlauf und Aufbau bzw. die Interaktivität

F Abbildung 3Ein quadratischer Film mit violettemHintergrund, der mit zwölf Bildernpro Sekunde abläuft

..


schiedliche Möglichkeiten, das Symbol zu ver-ändern.

Bei Doppelklick auf eine Grafik tauscht sichdie Bühne aus, und man sieht nun die Zeich-nung, die man beliebig verändern kann. Umwieder zurück in den Film zu kommen, reichtes aus, oben links auf Szene_1 zu klicken.

Modifiziert man eine Schaltfläche, sieht dasBearbeitungsfenster ganz anders aus. Es gibtdie Spalten Normal, Darüber, Gedrückt undAktiv, und es zeigt den Zustand der Schaltflä-che bezogen auf die Maus. Bei Normal ist be-reits die Grafik eingesetzt, wählt man nun dieKästchen unter den drei Zuständen aus undgeht auf Einfügen · Schlüsselbild, erscheintdie Grafik in allen Zuständen und kann nun be-arbeitet werden. Einfachste Form des Respon-ses, also der Rückmeldung an den User, dassseine Aktion etwas auslöst, wäre das Einfärbender Grafik in einen dunkleren Ton bei Darüber

und das Verkleinern dieses Bildes bei Ge-

drückt.

des Filmes ist, umso einfacher wird die Eintei-lung.

Nun taucht das Symbol automatisch in derBibliothekBibliothekBibliothekBibliothekBibliothek auf, und jedes Mal, wenn es wiederverwendet werden soll, zieht man es einfachwieder auf die Bühne. Dabei wird ein Verweisauf das Symbol gesetzt, was unvergleichlichweniger speicherintensiv ist, als würde mandas Symbol neu erstellen. Wird das Symbolallerdings bearbeitet, ändert es sich auch anallen Stellen des Filmes, an denen es zum Ein-satz kommt.

Das Symbol bearbeiten kann man, indemman auf das Icon im Bibliotheksfenster dop-pelklickt. Je nachdem, was man vorher als Ei-genschaft definiert hat, bekommt man unter-

F Abbildung 4Das Hintergrundbild der ersten Szene, eingefügt aufeine benannte Ebene

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

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

..

119Macromedia Flash

Wechselt man nun zurück zu Szene_1 undstellt Steuerung · Schaltflächen aktivieren

ein, kann man den Effekt schon auf der Bühnetesten. Um weiterzuarbeiten, sollte man die-sen Modus wieder zurückstellen.

Bearbeitet man eine Filmsequenz, erhältman ein Fenster, das dem der ersten Szenenicht unähnlich ist. Man kann sowohl in Ebe-nen arbeiten, als auch die Zeitleiste verwendenund so einen kompletten, in sich geschlosse-nen Film erstellen, am besten unter Verwen-dung bereits erstellter Symbole.

InstanzEine Instanz ist das Auftreten eines Symbolsauf der Bühne oder die Verwendung in einemanderen Symbol.

.

G Abbildung 6Bearbeiten einer Schaltfläche in Flash

G Abbildung 7Erstellen einer animierten Sequenz, die im Film automatischloopt.

Aus Symbolen werdenInstanzen

Nachdem nun alle Symbole erstellt und modi-fiziert sind, begibt man sich wieder in die ersteSzene, um den interaktiven Film zu bearbeiten.Um ein Symbol auf der Bühne zu platzieren,muss man in den entsprechenden Ebenen jeein Schlüsselbild einfügen. Flash kann Instan-zen nur in Schlüsselbildern auf der aktuellenEbene platzieren. Man zieht das Symbol an dievorgesehene Stelle auf der Bühne und erzeugtdamit eine so genannte Instanz des Symbols.Diese Instanzen können beliebig positioniertwerden, auch innerhalb anderer Symbole.

.


Der Film

Hat man nun die Instanzen im ersten Framedes Films positioniert, geht es daran, ihn zuanimieren und interaktiv zu machen. Dazusetzt man an einer bestimmten Stelle, z.B. amFrame 20, jeweils ein Schlüsselbild. Es wirdalso einen Film von 20 Bildern Länge erzeugt.Nun kommt der wichtigste Teil, die Animation.

Animationen können in Flash mit Hilfezweier Methoden erstellt werden: als Bild-für-Bild-für-Bild-für-Bild-für-Bild-für-Bild-AnimationenBild-AnimationenBild-AnimationenBild-AnimationenBild-Animationen und als Tween-AnimationenTween-AnimationenTween-AnimationenTween-AnimationenTween-Animationen.In der Bild-für-Bild-Animation werden Verän-derungen per Hand in jedem einzelnen Bild er-stellt. In der Tween-Animation erstellt manStart- und Endbild als Schlüsselbild, und Flashberechnet die Zwischenbilder. Jedes Bild einerEbene, auf der sich etwas auf der Bühne än-dert, ist ein Schlüsselbild.

F Abbildung 8Platzierung von Instanzen entlang der Zeitleiste

Beeinflussung der Dateigrösse durchAnimationen (Daumenregel)Eine Bild-für-Bild-Animation vergrößert dieDatei wesentlich mehr als eine Tween-Anima-tion.

G Abbildung 9Tweening-Einstellungen für Animationen in Flash

.

FilmsequenzDas Erstellen einer Filmsequenz unterscheidetsich vom Erstellen einer Grafik. Filmsequenzenbenötigen zum Abspielen nur ein einzigesSchlüsselbild. Grafikinstanzen müssen in jedesBild platziert werden, in dem sie angezeigtwerden sollen. Nach dem Erstellen einer In-stanz wählt man Einfügen · Bild, um die derLänge des Grafiksymbols entsprechende An-zahl von Bildern anzufügen.

.

121Macromedia Flash

Um ein Tweening einzustellen, wählt mandie ganze Ebene entlang der Zeitleiste vonSchlüsselbild zu Schlüsselbild aus. Über Modi-

fizieren · Bild erhält man ein Dialogfenster, indem man einstellt, ob neben der Bewegungauch die Größenveränderung zwischen erstemund letztem Schlüsselbild berechnet werdensoll.

Außerdem lassen sich die Bilder drehen,ihre Bewegung an einem Pfad ausrichten unddie Bewegung zu Beginn oder am Ende ab-bremsen, um einen natürlicheren Animations-fluss zu erzeugen.

Verschiebt man nun eines der Schlüsselbil-der auf der Bühne und bewegt dann denroten Marker entlang der Zeitleiste, sieht mansofort die Animation. Wenn man zusätzlichüber Modifizieren · Transformieren · Ska-

lieren und Drehen... die Größe und Ausrich-tung eines der Schlüsselbilder verändert, hatman mit einfachsten Mitteln unendlich vieleGestaltungsmöglichkeiten.

.

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

G Abbildung 11Auch ohne Programmierkenntnisse lassen sichin Flash interaktive Filme erstellen.

Instanzeigenschaften

Nachdem man also eine Instanz des Symbolserstellt und erste Animationen eingesetzt hat,klickt man die einzelnen Instanzen an und gehtauf Modifizieren · Instanz. Dort kann manFarbeffekte angeben, Aktionen zuordnen, denGrafikanzeigemodus einstellen oder das Ver-halten der Instanz ändern. Das Verhalten derInstanz ist das des Symbols, es lässt sich aberauch ändern. Diese Einstellungen gelten im-mer nur für die Instanz und nicht das Symbol.

Kann man bei Grafiken und Bildsequenzennur Farbeffekte wie Helligkeit, Farbton, die Al-phawerte und die RGB-Einstellungen verän-dern, lassen sich bei den Schaltflächen alle in-teraktiven Befehle einstellen. Zum einen sinddas die Ereignisse, bei denen die Aktion ausge-löst wird, wie zum Beispiel bei Klick oder Roll-over, zum anderen die Aktionen selbst, dievom einfachen Go to, das heißt gehe zu fol-gendem Bild oder folgender Szene, über Stop

und Play bis hin zu komplexen Programmier-befehlen reichen. Aber auch mit den einfache-ren Optionen lassen sich komplexe Filme er-stellen.

.


Zwischendurch lässt sich der Film überSteuerung · Film testen immer wieder kon-trollieren.

Veröffentlichen von Flash-FilesEin Flash-File kommt selten allein. Um einenFlash-Film in einem Browser zu sehen, mussman zunächst ein HTML-Dokument öffnen,das den Flash Player ansteuert und darstellt. Esempfiehlt sich außerdem, ein JPEG, ein GIFoder eine GIF-Animation mit Teilen des Filmsabzuspeichern als Ausweichmöglichkeit fürden Fall, dass der Benutzer Flash nicht instal-liert hat. Das Hauptdokument ist allerdings derFlash Player und hat die Endung .swf.

Geht man auf Datei · Veröffentlichen wer-den Flash Player und HTML-Seite automatischerstellt. Zuvor sollte man allerdings die Einstel-lungen überprüfen und gegebenenfalls opti-mieren.

Die wichtigsten Einstellungen für einen nor-malen Film sind folgende:

E LadereihenfolgeLadereihenfolgeLadereihenfolgeLadereihenfolgeLadereihenfolgeBei langsamen Netzverbindungen wird un-ter Umständen das erste Bild des Films nichtsofort ganz geladen. Hier wird festgelegt, inwelcher Reihenfolge die Ebenen des erstenBildes geladen werden.

E Größenbericht erstellenGrößenbericht erstellenGrößenbericht erstellenGrößenbericht erstellenGrößenbericht erstellenBei der Veröffentlichung wird eine Textdateierstellt, die Aufschluss über die Größe desFilms und seiner Teile gibt und zur Optimie-rung verwendet werden kann.

E Vor Import schützenVor Import schützenVor Import schützenVor Import schützenVor Import schützenSollte man einstellen, um zu verhindern,dass jemand den Film aus dem Browsersichert und wieder in Flash importiert.

E JPEG-QualitätJPEG-QualitätJPEG-QualitätJPEG-QualitätJPEG-QualitätSind in der Datei Bitmaps geladen, wird hierdie Komprimierungsrate als JPEG festgelegt.Je niedriger, desto schneller.

E Stream-Audio und Ereignis-AudioStream-Audio und Ereignis-AudioStream-Audio und Ereignis-AudioStream-Audio und Ereignis-AudioStream-Audio und Ereignis-AudioSoundeinstellungen übergehenSoundeinstellungen übergehenSoundeinstellungen übergehenSoundeinstellungen übergehenSoundeinstellungen übergehenHier werden Spezifikationen für eventuellenthaltene Sounds eingestellt.

F Abbildung 12Einstellungen zum Erstelleneines Flash-Films

..

123Macromedia Flash

E VersionVersionVersionVersionVersionHier stellt man ein, ab welcher Flash-Player-Version der Film zu sehen sein soll. Aller-dings gehen Funktionen von Flash 4 beiniedrigeren Versionen des Plug-ins verloren.Auch das HTML-Dokument, welches dasFile im Browser lädt, kann modifiziert wer-den. Wichtig sind nachfolgende Einstellun-gen, die anderen kann man als Standard ste-hen lassen.

E GrößeGrößeGrößeGrößeGrößeMan kann die Größe des Films entweder andie vorgegebene Größe anpassen, oder mandefiniert sie pixelgenau in Breite und Höhe.Da Flash-Files aber skalierbar sind, kannman auch die prozentuale Größe im Ver-hältnis zum Browserfenster angeben.

E AbspielenAbspielenAbspielenAbspielenAbspielenMenü anzeigen: Klickt man im Browser aufden Flash-Film bei Windows mit der rech-ten Maustaste, beim Mac mit gedrückterCommand-Taste, erhält man einige Optio-nen wie zum Beispiel Stop oder Zoom. De-

aktiviert man diese Funktionen, erhält derUser nur noch die Info über Flash.Beim Beginn anhalten: Stellt man dieseFunktion aus, läuft der Film erst ab, wennder User auf eine Schaltfläche klickt oderüber oben genanntes Menü geht. Ist abernicht empfehlenswert.Wiederholen: Diese Einstellung lässt denFilm loopen, sobald das letzte Bild erreichtist. Für immer!

E QualitätQualitätQualitätQualitätQualitätQualität bedeutet bei Flash, dass die Vek-torgrafiken geglättet werden, also eine Anti-Alias-Funktion. Es empfiehlt sich hoch ein-zustellen, auch wenn dieWiedergabegeschwindigkeit darunter leidenkann.

E AusrichtungAusrichtungAusrichtungAusrichtungAusrichtungSie bestimmt, wie das Fenster des Flash-Films im Browserfenster positioniert wird.

Abbildung 13 E

Einstellungen zumModifizieren einesHTML-Dokuments

..


Tipps und Tricks

Flash-Filme zeichnen sich besonders durchihre schnellen Ladezeiten und fließenden Ani-mationen aus. Damit das so bleibt, gibt es ei-nige 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 Ani-

mationen, die per Hand und mit Schlüssel-bildern erstellt werden.

E Objekte, die sich im Film nicht ändern oderbewegen, können auf eine Ebene zusam-mengefasst werden.

E Je weniger Schriften und Stile man verwen-det, umso schneller lädt sich das File. Undes sieht meistens besser aus!

E Wenn man mit Sound arbeitet, bietet sichMP3 als am wenigsten speicherintensiv an.

E Auf Bitmaps sollte man sowieso soweit wiemöglich verzichten, aber wenn es seinmuss, dann wenigstens nicht animieren!

E Mit etwas Geschick lassen sich Symbole inimmer neue Instanzen verwandeln, die mandurch Einfärben unterschiedlichst gestaltenkann.

..

125Macromedia Flash

..


Dynamisches HTMLAktion und Reaktion

Seit sich das WWW vom reinen Informations-auch zum Unterhaltungs- und Werbemediumentwickelt hat, wurde immer augenscheinlicher,dass die bisherigen Möglichkeiten von HTMLnicht mehr ausreichten, um den Bedarf an be-wegten Darstellungen und dynamischen Seitenzu decken. Die beiden Browserhersteller Net-scape und Microsoft implementierten deshalbin die Viererversionen ihrer Programme so ge-nanntes Dynamic HTML – eine Mischung ausJavaScript-Befehlen, HTML-Codes und StyleSheets.

Cascading Style SheetsÄhnlich wie Formatvorlagen etwa in Word er-laubten es CSS, verschiedene Formatierungenfür Texte, Tabellen oder ganze Seiten zentralabzuspeichern. Beim Editieren eines Doku-mentes kann so immer wieder auf die gleichenFormate zugegriffen werden, ohne die einzel-nen Spezifikationen jedes Mal neu eingeben zumüssen. CSS können auch in einem externenDokument gesichert werden. So wird es mög-lich, mit einer einzigen Änderung die Formatealler betroffenen Dokumente auszutauschen.

Leider konnten sich die beiden Unterneh-

men nicht einigen, was die Spezifikationen undBefehle betrifft, sodass wir einmal mehr daraufachten müssen, welcher Code in welchemBrowser welche Auswirkungen hat.

Auch wenn DHTML-Features oftmals als Er-satz für fehlendes gestalterisches Gespür her-halten müssen, gibt es einige Funktionen, diedurchaus sinnvoll eingesetzt werden können.

DHTML-Dokumente inDreamweaver erstellen

Dreamweaver eignet sich hervorragend für dieErstellung von DHTML-Dokumenten, da so-wohl die Editierung und der Einsatz von CSS(Cascading Style Sheets) als auch von Bewe-gungsabläufen und Verhaltensweisen sehr ein-fach und intuitiv erfolgen kann.

..

127Dynamisches HTML

G Abbildung 1Nicht schön, aber aufschlussreich: ein DHTML-Dokument mitStyle Sheets in Netscape 4.72 und im Internet Explorer 5.5 be-trachtet

..


Erstellung eines CSS

1. Stil hinzufügenIm CSS-Fenster (F7) können Sie über den ButtonNeuer Stil (Roter Pfeil) einen Stil hinzufügen.Geben Sie im auftauchenden Fenster zum Bei-spiel ».headline« ein, und drücken Sie OK.

2. Eigenschaften bestimmenStellen Sie in diesem Fenster alle Eigenschaftenein, die Ihre zukünftigen Headlines besitzen sol-len.

Bei der Wahl der Stileigenschaften muss be-rücksichtigt werden, dass nicht alle Formatierun-gen in allen Browsern funktionieren. Die Einstel-lungen für Textfarbe, Schriftarten und Stärkefunktionieren jedoch auf (fast) allen Browsern.Wenn Sie exotische Einstellungen wie Zeilenhö-hen oder gepunktete Linien haben möchten,empfiehlt es sich, das Dokument in verschiede-nen Browserversionen zu testen. Vergessen Siedabei nicht die Versionen, die von den Online-Diensten AOL, T-Online oder CompuServe ver-teilt wurden, diese sind weit verbreitet und wer-den von den Benutzern seltener erneuert.

Angenehm an CSS ist, dass wir so auch eineabsolute Position für ein Element festlegen kön-nen. In unserem Beispiel beträgt diese 90 PixelAbstand zum linken Rand. Mit »reinem« HTMLwäre eine solche Positionierung ungleich auf-wändiger und müsste für jedes Element neu co-diert werden.

..

129Dynamisches HTML

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

Außer per Markierung können Sie auch perDrop-down-Menü wählen, welche Elemente miteinem Stil versehen werden sollen.

Da wir in unserem Beispiel eine absolute Posi-tionierung eines Elementes eingegeben haben,wandelt Dreamweaver dieses – in unserem Falldie Überschrift – automatisch in einen »Layer«,also eine Ebene um. Auch Ebenen sind ein Ergeb-nis der Bemühungen um die Erweiterung derHTML-Befehle, sie verhalten sich ähnlich wieBildebenen in Photoshop oder FreeHand und er-möglichen es erstmals, Elemente übereinanderzu legen – ein Meilenstein für Webdesigner.

4. ErgebnisDie Darstellung unseres Beispielbildes im Inter-net Explorer.

..


Aktionen, Ereignisse und VerhaltensweisenWas mit »statischem« HTML bislang nichtmöglich war, nämlich ein Dokument auf be-stimmte Ereignisse direkt reagieren zu lassen,ist mit DHTML kein Problem mehr. Sie könnenso die Inhalte eines gesamten Bereiches, etwaeine Produktdarstellung in einer einzigenHTML-Seite, unterbringen. Die unterschiedli-chen Elemente, wie Navigation, Produktüber-blick, technische Details und Zusatzprodukte,liegen im gleichen HTML-Dokument auf ver-

schiedenen Layern vor und werden je nach Be-darf sichtbar oder unsichtbar geschaltet. DieVorteile liegen klar auf der Hand: Außer derbereits erwähnten Möglichkeit, Ebenen ein-fach anzuordnen, ist die Ladezeit für einzelneElemente extrem kurz, und auf dem Bildschirmändern sich nur die jeweils neuen Informatio-nen; alle anderen bleiben bestehen.

Wir wollen uns die Möglichkeiten anhandeines kleinen Beispiels ansehen.

.

Navigationsmodell

Zur Vorbereitung erstellen wir in einem Grafik-programm drei Navigationsbilder, also GIFs mitden Headlines »Produktionsübersicht«, »techni-sche Details« und »Zubehör«.

1. Ebenen erstellenIm ersten Schritt platzieren wir unsere drei Navi-gationsbilder in Ebenen, die wir dann an derrichtigen Stelle über dem Hintergrund positionie-ren. Ebenen können Sie erstellen, indem Sie imMenü Einfügen Ebenen wählen oder in der Ob-jektleiste das entsprechende Objekt anklickenund dann auf dem Dokument mit der Maus dieEbene in die gewünschte Position ziehen. EineEbene können Sie jederzeit mit dem »Anfasser«an der oberen linken Ecke verschieben oder mitHilfe des Positionsrahmens die Größe verändern.Objekte können per Drag & Drop einfach in ei-nen Ebenenrahmen verschoben werden.

.

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

131Dynamisches HTML

2. Eigenschaften festlegenIm Fenster Eigenschaften sehen Sie die Editier-möglichkeiten für eine Ebene: Sie können hierHintergrundfarben oder -bilder eingeben, die ab-solute Position sowie Breite und Höhe ändern.Wenn Sie bei vielen Ebenen nicht die Übersicht-lichkeit verlieren wollen, bietet es sich an, diesezu benennen (im Beispiel »nav3«). Der Z-Index

bezeichnet die z-Achse der Ebene; je höher dieZahl, desto weiter vorne liegt die Ebene.

..

G Abbildung 3Die erste Inhaltsebene und die entsprechendenEinstellungen im Eigenschaftenfenster

G Abbildung 4Die zweite Ebene mit den technischen Daten unseres Beispiels

3. Inhalte bestimmenNun fehlen noch die Inhalte. Diese sollen aufdrei weitere Ebenen angelegt werden und sichjeweils ein- und ausblenden, wenn der entspre-chende Menüpunkt gewählt wird.

Auch die drei Inhaltsebenen sollten unbedingtNamen erhalten (in unserem Beispiel »ueber-blick«, »technik« und »zubehoer«). Wenn Siesich nicht die absoluten Positionspunkte und dieGröße der Ebene merken wollen, können Sieauch die erste Ebene kopieren, die Kopie dannwieder einfügen und über die erste Ebene zie-hen. Allerdings müssen Sie nun, um Darstel-lungsprobleme zu vermeiden, unbedingt dieneue Ebene umbenennen und ihr einen höheren»Z-Index« geben. Wenn eine Ebene bei der Edi-tierung der anderen stört, können Sie bei Sicht-

barkeit · hidden wählen, um sie auszublenden.Über die Ebenenmarker im Hintergrunddoku-ment sind auch ausgeblendete Ebenen jederzeitaufrufbar.


4. Navigation programmierenNachdem Sie noch die dritte Ebene angelegt ha-ben, wollen wir nun die eigentliche Navigationprogrammieren, um Ebenen ein- und auszuschal-ten. Hierzu brauchen wir das Fenster Verhal-

tensweisen (F8).Zuerst muss ein Objekt markiert sein, dem

wir eine Aktion zuweisen wollen. In unseremBeispiel ist dies der Navigationsbutton Produkt-

überblick. Ein Ereignis können wir nun im Ver-haltensweisenfenster erzeugen, indem wir aufdas dicke Pluszeichen klicken. Im erscheinendenMenü wählen wir in unserem Fall den PunktEbenen ein-/ausblenden. Sie können übrigensentscheiden, für welche Browsertypen diese Ak-tion gelten soll, wenn Sie sichergehen wollen,lassen Sie hier immer die Voreinstellung Brow-

ser ab 3.0 stehen.

.

Abbildung 7 E

Im Fenster Verhaltensweisensehen wir die eingestellten

Ereignisse für das jeweils aus-gewählte Objekt.

.

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

Im darauf folgenden Dialogfenster werdenwir nach den näheren Spezifikationen des Ereig-nisses gefragt und können so die gewünschteEbene ein- und die beiden anderen ausblenden.Letzteres ist unbedingt nötig, da sich sonst alleaufgerufenen Layer nacheinander überlagernwürde und nichts mehr zu lesen wäre.

G Abbildung 6Wenn eine Ebene gewählt ist, kann sie für das entsprechende Ereignisein- und ausgeblendet werden.

Nach Klick auf OK zeigt sich die gerade einge-stellte Aktion im Verhaltensweisenfenster. Diesesändert sich jeweils mit einem ausgewählten Ob-jekt, in unserem Beispiel mit dem ersten Naviga-tionsbild.

133Dynamisches HTML

F Abbildung 8Intuitive Benutzerführungper Mouse-Over im Browser

..

5. Fertigstellung und ErgebnisWenn wir nun die letzten Schritte für die rest-lichen beiden Ebenen und ihre entsprechendenNavigationspunkte wiederholen (wobei natürlichjeweils andere Ebenen ein- oder ausgeblendetwerden), kann das Ergebnis im Browser angese-hen werden, und wir haben ein recht ladezeit-und benutzerfreundliches Navigationsmodell ge-schaffen.

.

Strategien im WWW

156 Intranet und Extranet

156 Das Intranet

160 E-Branding

160 Klassische Marken im Netz

161 Die neuen E-Brands

161 Gutes und Schlechtes

168 Die Gestaltung vonOnline-Shops

168 Das Einkaufserlebnis im Netz

169 Der perfekte Aufbau des Verkaufs-vorganges

173 Shopsysteme im Überblick

175 Von Amazon lernen

178 Von Apple lernen?


136 Online-Werbung

136 Werbung in den neuen Medien

140 Der Klassiker: Banner im Netz

147 Klein, aber fein: Microsites

148 Die Zukunft: Sonderformen derOnline-Werbung

152 Web-Announcing

152 Vorbereitung der Website

154 Selektion der Suchmaschinen undVerzeichnisse

.

182 Gestaltung von e-Finance-Websites

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- undCommunity-Portals

194 Portals, das optimale Netzformat?

196 Datenbankbasierte Sites

196 Wann lohnen sich datenbankbasierteWebsites?

197 Unterschiede in Konzeption undGestaltung

200 Redaktionssysteme

202 Microdevices

202 Die kleinen Wunderwaffen

204 WAP, das neue HTML?

204 Digitale Literatur, das Ende der Bücher?

205 Wearable Computers

135Strategien im WWW


Online-WerbungDer Kampf um die Klicks

Die beste Site ist vergebens, wenn kein User weiß,dass es sie gibt. Doch die Möglichkeiten sind viel-fältig, ob Banner, Web-Announcing oder ganz neueWerbeformen. Welche ist die richtige?

Streuung der Werbung ist dementsprechendgroß, man versucht, sehr grobe Zielgruppen zudifferenzieren und diese mehr oder wenigergenau zu erreichen.

Da Websites auf Pull-InformationPull-InformationPull-InformationPull-InformationPull-Information beruhenund sie davon abhängig sind, dass der User ak-tiv auf sie zugreift, müssen einige Faktorengrundsätzlich gegeben sein: Die Site muss be-kannt und auffindbar sein. Ist Ersteres nichtgegeben, wird die Zielgruppe mit Hilfe vonOnline-Werbung an den Stellen im Netz ange-sprochen, die von ihr am meisten frequentiertwerden und von dort auf die Site gezogen.

Das System ist dabei ganz einfach. Es gibtverschiedene Werbeträger wie Stern Online,CNN.com, mtv.com, aber auch Studentensei-ten oder private Homepages, auf denen Wer-bemittel wie zum Beispiel Banner geschaltetwerden. Diese verlinken dann direkt auf dasWerbeobjekt, entweder auf eine ganze Websi-te oder auch nur einen Teilbereich einer Site,zum Beispiel ein Sonderangebot, den AnnualReport, ein Spiel oder ein Beitragsberech-nungstool.

Der Begriff Bannerwerbung etabliert sich

langsam im Sprachgebrauch der Werber undMarketingleiter. Doch was wirklich getan wer-den muss, um die User auf die mühsam erstell-te Site zu bekommen, um Klickraten und User-Feedback zu generieren, das ist weitgehendunbekannt oder wird als Randthema abgetan.

Werbung in den neuenMedien

Push und PullDie große Besonderheit des World Wide Webist, dass der Informationsaustausch vornehm-lich auf Pull basiert, d.h. der Nutzer muss sichdie gewünschten Informationen selbstständigsuchen und beziehen. Das bedeutet, der Userwird, im Gegensatz zum Fernsehen, bei demschnelles Zappen genügt, aktiv und stellt sichganz bewusst dem Medium und der Informati-on.

Klassische Werbung hingegen beruht haupt-sächlich auf dem Push-VerfahrenPush-VerfahrenPush-VerfahrenPush-VerfahrenPush-Verfahren. Sie wirddem Konsumenten in allen Kanälen zugespielt,ohne dass er danach verlangt hat und meistensohne dass er sich dagegen wehren kann. Die

..

137Online-Werbung

Das Gute an Online-WerbungDie Vorteile der Online-Werbung gegenüberTV-Spots, City-Lights oder anderen klassischenWerbeformen sind ganz klar festzumachen.Zunächst kann man ganz genau definieren,welche ZielgruppeZielgruppeZielgruppeZielgruppeZielgruppe man in welcher Situationerreichen will. Sind es Teenager auf der Suchenach Freunden, wähle ich als Werbeträger eineTeenie-Plattform mit erfolgreichem Chat-Be-reich. Will ich finanzkräftige Mittdreißiger, bie-tet es sich an, auf Online-Brokerage- oder Bör-seninformationsseiten zu gehen. Und bestehtmeine Zielgruppe aus fünfzigjährigen dänischenAnglern mit einer Vorliebe für Fliegenfischen,findet sich auch hier eine Plattform, auf der ichsie mit meinen Werbemitteln erreichen kann.Es kann also sehr genau differenziert und spe-zifiziert werden, wen man in welcher Lage an-treffen will; dies vermeidet zu große Streuungund negative Effekte der Werbung.

Habe ich den User angesprochen und in ei-ner Situation getroffen, in der er positiv aufmeine Werbung reagiert, bietet das Internetden Vorteil, dass kein Medienbruch kein Medienbruch kein Medienbruch kein Medienbruch kein Medienbruch entsteht.Der User muss nicht zum Telefon greifen, ermuss sich keine Adresse aufschreiben, und ermuss keine Broschüre anfordern, um sich überdas Produkt zu informieren. Er kommt mit ei-nem Klick direkt vom Werbeträger auf das be-worbene Objekt, nämlich die Site, und kannsofort die entsprechenden Services nutzenoder sich weitergehend informieren.

Interaktive Banner, bei denen ich zum Bei-spiel direkt im Banner den Wetterbericht oderBörsenkurse abfragen, ein Spiel spielen oderE-Mails verschicken kann, ermöglichen, wasim klassischen Bereich nur Promotions und Di-rect-Mailings bewirken: Der Konsument setztsich schon im Rahmen der Werbung intensivmit dem Produkt auseinander.

Merkt man, dass das Banner nicht so effek-tiv ist, wie man es gerne hätte, dass zu wenigeLeute klicken oder die falschen User angespro-chen werden, hat man die Möglichkeit, sehrschnell zu reagieren und entweder die Platt-form zu wechseln oder das Banner zu verän-dern. Bei einem Kinospot oder selbst einer An-zeige wäre der Aufwand unvergleichlich höherund teurer. Besonders die Aktualität des Medi-ums ermöglicht es, sofort auf Ereignisse zu rea-gieren und so ganz nah an der Zielgruppe zubleiben. ErfolgskontrollenErfolgskontrollenErfolgskontrollenErfolgskontrollenErfolgskontrollen und die eventuelleOptimierungOptimierungOptimierungOptimierungOptimierung sind also jederzeit möglich. Eini-ge Werbeträger bieten sogar die Möglichkeit,verschiedene Kampagnenansätze auf der Platt-form rotationsweise unter echten Bedingun-gen zu testen und danach den erfolgreichstenzu schalten. Wie beim Webtracking für Websi-tes sind auch hier die Ergebnisse sehr präzise,fallen aber nicht immer so aus, wie man sich esselbst gerne gewünscht hätte.

Das Schlechte an Online-WerbungNatürlich ist Online-Werbung kein Allheilmit-tel. Es gibt einige Nebenwirkungen, die ziem-lich unangenehm und nicht immer kalkulierbarsind.

Die erste Schwierigkeit ist der User selbst.Als erste Studien belegten, dass Banner mit ei-ner konkreten KlickaufforderungKlickaufforderungKlickaufforderungKlickaufforderungKlickaufforderung wie zum Bei-spiel »Klick mich!« oder »Hier klicken!« deut-lich bessere Raten erzielen als Banner ohnediesen Spruch, war die Verwunderung und dieVerzweiflung bei einigen Entwicklern und Ge-staltern von Bannern groß. Warum muss man

Werbeträger-ListeUnter www.ombd.de findet man eine Auflis-tung vieler deutscher Werbeträger.

..


auf ein Banner, das aussagt, worum es geht, ineinem Medium, in dem klar ist, dass man Linksanklicken muss, mit einer Technologie, die nunlangsam als etabliert gelten kann, schreiben,dass der User doch bitte klicken soll? Das kämeeinem Ansatz nahe, am Ende eines in Cannesprämierten Kinospots dazu aufzufordern, dasProdukt doch jetzt bitte auch zu kaufen. Au-ßerdem kommt es gerade bei Bannern auf jedeInformation an, welche die Datengröße nochzusätzlich erhöht. Für »Bitte klick mich!« mus-ste so mancher gute Claim sterben. Es bleibtaber jedem selbst überlassen, wie viel Glaub-würdigkeit er solchen Studien beimisst undwie »klickfreudig« er seine Zielgruppe ein-schätzt.

Das zweite Problem ist, dass User im Netzmeistens ziemlich genau wissen, was sie wol-len: die neuesten Sportergebnisse, einen Tarif-vergleich bei Krankenkassen oder ein neuesGame. Der Werber versucht zunächst aber die-sen klaren Weg zu unterbrechen und auf seinAngebot aufmerksam zu machen, das dannnoch dazu aktiv angeklickt werden muss. In ei-nen gewünschten Handlungsablauf einzugrei-fen und ihn erfolgreich zu unterbrechen bedarfeiner klaren Strategie und einer guten Idee.

Die Konkurrenz ist groß, selten steht einBanner ganz für sich allein, oft sogar in einerDreierkombination. Wie erreicht man also dieAufmerksamkeitAufmerksamkeitAufmerksamkeitAufmerksamkeitAufmerksamkeit des Users und bewegt ihndann noch dazu, auf genau dieses Banner zuklicken und nicht auf eines der beiden ande-ren? Denn wenn er weg ist, ist er weg, und dieChance, dass er alle drei Banner ausprobiert,ist eher gering. Man muss also differenzieren,gleichzeitig aber nicht nerven. Als wir vor einpaar Jahren für einen großen Technikkonzerneine Kampagne zum Thema Innovation ent-warfen, zeigte eines der Motive einen roten

Blitz, den jeder kennt, der schon einmal zuschnell gefahren ist. Aufwändig gestaltet inAdobe After-Effects und mit einem knackigenClaim blitzte das Banner Aufmerksamkeit er-heischend auf der Seite eines Werbeträgers,der eher wissenschaftlich interessierte, erfolg-reiche Damen und Herren ab 35 ansprach.Auch das Banner sprach die Damen und Her-ren an, allerdings eher negativ, denn neben be-achtlichen Klickraten bekam der Werbeträgerein paar bitterböse Mails, dass man sich beidiesem Blitzen ja wohl kaum auf den Inhaltkonzentrieren könne. Natürlich reagierten wirsofort mit einem anderen Banner (und schrie-ben eine freundliche Mail zurück), gleichzeitigaber war es eine gute Erfahrung, wo bei gewis-sen Zielgruppen die Schmerzgrenze liegt.

Oft wird bei der Konzeption und Gestaltungvon Bannern recht wenig Wert auf Anspruchund Qualität gelegt. Die Budgets sind knapp,und ein Banner ist recht schnell gemacht. Dasist in der klassischen Werbung nicht immer an-ders, aber gerade bei den neuen Medien lässtsich alles so einfach umsetzen, dass im Internetvielleicht noch mehr Schlechtes zu finden istals in Print und TV. Man sollte also unbedingtmit professionellen Partnern zusammenarbei-ten, welche die Erfahrungen von beiden Berei-chen, nämlich Werbung und Online, verbin-den können.

Schwierig ist es auch, wenn eine Seite langelädt, die Banner aber schon von Anfang an zusehen sind. Eigentlich gut, denn dann hat derUser sie länger im Blickfeld, dann aber auchwieder schlecht, denn der Unmut über die lan-gen LadezeitenLadezeitenLadezeitenLadezeitenLadezeiten überträgt sich gerne auf die»überflüssigen« Banner. Wenn man allerdingsdavon ausgeht, dass sich viele kostenlose Siteszum Großteil über eben diese Banner finanzie-ren, sollte man erwarten, dass jeder halbwegs

..

139Online-Werbung

intelligente User Verständnis für die Werbemit-tel aufbringt! Trotzdem gilt es natürlich, Bannerso klein wie möglich zu halten.

Siemens brachte vor einiger Zeit das Tool»Webwasher« auf den Markt, ein Programm,das Banner automatisch identifiziert anhanddes Namens, der Größe, der Positionierungund der Einbindung in den HTML-Code. Ebendiese Banner werden beim Aufbau der Seitengar nicht erst geladen, und die Stellen bleibenfrei. Anfangs wohl recht erfolgreich, zeigt sichjetzt, dass Banner nicht nur lästige Werbungsind, sondern auch gute Guides durchs Inter-net, Service-Center und Informationsträger zu-gleich. Blendet man alle Banner aus, ist esdurchaus möglich, dass man mehr verpasst alsgewinnt!

Abbildung 1 E

Die Konkurrenz ist riesig: Banner inallen Größen und Farben auf ver-

schiedenen Werbeträgern.

Ziele von Online-KampagnenBevor man mit der Konzeption einer Kampa-gne beginnt, gilt es auch im Netz, die Zieleganz klar festzustecken, denn der bloße Klickdes Users ist nur eine Möglichkeit von vielen.

Erster Schritt ist immer Aufmerksamkeit undBekanntmachungBekanntmachungBekanntmachungBekanntmachungBekanntmachung. Man will der Internet-gemeinde zeigen, dass es eine neue Site gibt,auf die es sich lohnt zu klicken. Da man aberauch Zielgruppen ansprechen will, die sichvielleicht nicht so häufig im WWW bewegen,sollte man auch hier Maßnahmen außerhalbdes Netzes planen, um einen möglichst hohenBekanntheitsgrad zu erzielen.

Aber auch nach dem Launch der Site darfman sich nicht auf Mundpropaganda verlassen.Der Erfolg einer Site oder von Teilbereichen

..


lässt sich unter anderem ganz klar am TrafficTrafficTrafficTrafficTrafficmessen, und entspricht dieser nicht den Erwar-tungen, muss man sich zum einen Gedankenüber Inhalt und Aufbau, aber auch über dieBewerbung machen.

Studien haben ergeben, dass Online-Wer-bung nicht nur die Klickrate nach oben treibt,sondern auch direkten Einfluss auf das ImageImageImageImageImagedes Unternehmens und der Marke habt. Inno-vative Ideen und gekonnte Umsetzung derWerbung bauen ein anspruchsvolles und mo-dernes Image auf, das von der folgenden Web-seite entsprechend fortgeführt werden muss.

Änderungen auf der Site, die Eröffnung ei-nes neuen Bereichs, der Launch eines Produk-tes oder Events wie Börsengang oder Promoti-on-Aktionen, die auf der Site begleitet werden,sind Anlässe für eine Kampagne, die zeigen,dass man aktuell ist und das Medium als Kom-Kom-Kom-Kom-Kom-munikationskanalmunikationskanalmunikationskanalmunikationskanalmunikationskanal ernst nimmt.

Ganz gleich wie die Zielsetzung aber ist, siesollte sich in die Gesamtkommunikationsstra-tegie integrieren und medienadäquat das Bildder Marke ergänzen.

Der Klassiker: Banner im Netz

Es gibt die Geschichte, dass im Sommer 1994einer der Herausgeber des US-Online-Maga-zins Hotwired eines Abends dem Gestalter er-klärte, dass man für einige Sponsoren des Ma-gazins noch Platz auf der Site benötige, damitdiese dort ihre Logos positionieren könnten.Der Designer teilte auf dem oberen Teil derSeite etwas Platz ab und meinte, in den dreientstandenen Flächen könnten die Firmenpacken, was sie wollten. Und seitdem verstehtsich Online-Werbung als rechteckige Bannermit einer genau festgelegten Größe und maxi-

maler Datengröße in der oberen Hälfte desBrowserfensters, die – falls vorhanden – auf dieSite des entsprechenden Unternehmens ver-linkt.

Eine kurze Historie der BannerentwicklungIn der Tat war Hotwired die erste Site, die 1994mit 14 Sponsoren das Web als Werbemediumnutzte, im damals relativ kommerzfreien Inter-net ein gewagter Schritt. Ein Jahr später tauch-ten immer öfter so genannte Flat Banners auf,also einfache GIFs im Netz, oftmals nur eineVerlinkung mit Inhalten im eigenen Angebot.Preismodelle für Werbeträger waren kaum vor-handen, Konditionen wurden meistens einzelnverhandelt, dementsprechend war auch dieZuverlässigkeit, mit der Banner auf Seiten ge-schaltet wurden. Noch lange Zeit später war essehr aufregend (im wahrsten Sinne des Wor-tes), auf allen Seiten zu surfen, die man ge-bucht hatte, um zu sehen, ob irgendeine Spurder eigenen Banner zu sehen war. Andererseitskam es auch häufiger vor, dass Banner mal einpaar Wochen länger geschaltet waren als abge-sprochen, falls der Platz für die Zeit nach derBuchung nicht verkauft war.

Schon damals versuchte man sich an Java-basierten Bannern, das Ping-Spiel von IBM wareiner der Vorreiter der interaktiven Banner.Das hatte auch damit zu tun, dass man Java alsdie potenzielle Programmiersprache ansah, dieHTML in naher Zukunft verdrängen würde,was sich allerdings nicht bewahrheitet hat.1996 waren Sponsorships erster Websites bzw.von Teilrubriken zu beobachten, außerdemwurden ProvisionsmodelleProvisionsmodelleProvisionsmodelleProvisionsmodelleProvisionsmodelle eingeführt, bei de-nen der Werbeträger am Umsatz des Kundenbeteiligt wurde, der durch den Banner und sei-ne Verlinkung mit der Site generiert wurde.1998 wurden vermehrt neue Technologien wie

..

141Online-Werbung

Streaming Video oder Flash eingesetzt, wobeidie Werbeträger sehr verhalten reagierten,wollte man die Seiten doch zum einen nichtzusätzlich mit Plug-ins belasten. Zum anderenwaren und sind die Bandbreiten für Banner mitgrößeren Datenmengen einfach noch nichtweit genug verbreitet.

BannerartenSeit den ersten Flat Bannern 1994 haben sicheinige Arten von Bannern besonders etabliert,ihr Einsatz hängt immer vom Inhalt, vom Wer-beträger und der Zielgruppe ab. Sie unter-scheiden sich in Gestaltung, Animation undInteraktionstiefe und haben alle folgendeGrundmerkmale. Sie sind immer integriert ineine Website, den Werbeträger, oder werdenvon diesem aus in einem gesonderten Brow-serfenster gelauncht. Ihr Format ist, wie dasvon Bildern im Netz generell, immer rechte-ckig, Sonderformen können sich aber auch ausmehreren Rechtecken zusammensetzen. Ban-ner sind interaktiv, vom einfachen Klick bis hinzur komplexen Anwendung.

Grundsätzlich bringt die Integration einesBanners in eine Website die Aufgabe mit sich,die Aufmerksamkeit des Betrachters vom ei-gentlichen Inhalt weg auf das Banner zu lenkenund den User zu einer Interaktion zu verleiten.Das führte zur Entwicklung immer neuer Ban-nerarten, die mit interaktiven Features ausge-stattet den Betrachter involvieren sollen.1.1.1.1.1. Flat BannersFlat BannersFlat BannersFlat BannersFlat Banners

Auch wenn die Zeit der nicht animiertenGIFs als Banner im Netz fast vorbei ist, gibtes doch noch Stellen, an denen sie Sinn ha-ben und eingesetzt werden. Sucht man zumBeispiel bei www.hotbot.com nach demBegriff »Cars«, tauchen auf den Ergebnissei-ten immer wieder dieselben kleinen FlatBanners auf, die in diesem Fall auf Auto-händlersites verlinken. Dabei ist nicht dieAnimation der entscheidende Punkt, derAufmerksamkeit erzeugt, sondern die Häu-Häu-Häu-Häu-Häu-figkeit figkeit figkeit figkeit figkeit des Banners. Wäre es animiert, wür-de es störend wirken und negativ auffallen.Außerdem gibt es Banner, die auf einenBlick alles aussagen und so gestaltet sind,dass sie auch ohne bewegte Bilder bemerkt

G Abbildung 2Diese nicht animierten Banner tauchen immer wieder auf den Ergebnisseiten vonSuchmaschinen auf.

..


werden. Vorteil ist, dass sie deutlich schnel-ler laden als ein Banner mit vielen Phasen.Nicht animiert sind außerdem oft so ge-nannte Fake Banners.

2.2.2.2.2. Fake BannersFake BannersFake BannersFake BannersFake BannersDiese unerfreuliche Bannerart täuscht mitihrer Gestaltung Scrollbalken oder anderebekannte interaktive Elemente vor. Willman sie anklicken, wird man sofort auf dieentsprechende Seite verlinkt. Da das abernicht der Intention des Nutzers entspricht,ist dieser eher verärgert und wird sich wohlkaum lange auf der Site aufhalten.

3.3.3.3.3. Animated BannersAnimated BannersAnimated BannersAnimated BannersAnimated BannersDie am meisten verbreitete Art ist eine GIF-Animation aus verschiedenen Phasen, in derText, Bild, Form oder Farbe in einer Sequenz

Inhalte vermitteln. Sie sind so eingestellt,dass sie entweder »loopen« oder auch nureinmal ablaufen und dann mit einem Claim,Logo oder einer Klickaufforderung enden.

4.4.4.4.4. Smart BannersSmart BannersSmart BannersSmart BannersSmart BannersHier geht es um die Art, wie Banner einge-setzt werden, nämlich entsprechend demSurfverhalten des Users. Gibt er zum Bei-spiel in eine Suchmaschine einen bestimm-ten Begriff ein, so werden ihm auf denfolgenden Seiten Banner gezeigt, die in ir-gendeiner Weise mit dem gesuchten Begriffzu tun haben. Diese Einsatzweise ist wohldie effektivste, da sie dem Vorhaben desUsers am meisten entspricht und auch ohneallzu komplexe Datenbanken funktioniert.Da die Werbeträger ja vorher feststehen,

F Abbildung 3Sex sells, vor allem im Internet. Beim Versuch, mehrvon den Inhalten zu entdecken, wird man automatischauf die Website verlinkt.

F Abbildung 4Ein animiertes Banner in sechs Phasen, bei dem Logound Thema permanent eingeblendet sind und die Figuranimiert wird. Das Ganze endet mit einer Aufforderungzum Klicken.

..

143Online-Werbung

kann man mit unterschiedlichen Bannernsehr gut Bezug nehmen auf Ausrichtung, In-halt und Gestaltung der Site und so näheran das Interesse des Users kommen.

5.5.5.5.5. Interstitial AdsInterstitial AdsInterstitial AdsInterstitial AdsInterstitial AdsEher das Gegenteil bewirken Interstitials.Diese blenden sich beim Seitenwechselnach Klick auf einen beliebigen Link ein,meist ohne viel mit den Inhalten zu tun zuhaben. Eine Seite mit der Werbeunterbre-chung lädt sich und verschwindet von selbstwieder. Der User wird so in seinem Flussunterbrochen und nimmt die Werbung eherals störend wahr. Eingesetzt wurde dieseMethode vorwiegend bei Providern, dieihren Kunden kostenlosen Internetzuganganbieten, die dafür aber wiederum Werbe-unterbrechungen in Kauf nehmen müssen.

6.6.6.6.6. Pop-up AdsPop-up AdsPop-up AdsPop-up AdsPop-up AdsDiese funktionieren im Ansatz wie Inter-stitials, tauchen aber in einem Extra-Brow-serfenster auf, das meist sehr viel kleiner istals das Haupt-Browserfenster. Klickt derUser wieder in das große Fenster, verlagert

sich das Werbefenster nach hinten und istso, nach dem Schließen der anderen Fens-ter, das letzte, das stehen bleibt.

7.7.7.7.7. Interactive BannersInteractive BannersInteractive BannersInteractive BannersInteractive BannersDie zukunftsträchtigste Version des Bannersist eine Art winziger Site, da sie über allemöglichen Funktionen verfügen kann, ohneden User auf eine andere Seite zu schicken.Man spricht deswegen auch von NanositesNanositesNanositesNanositesNanosites.Der User kann also mit dem Banner arbei-ten, ohne sein eigentliches Ziel zu verlassen.Manche interaktiven Banner sind in sich ge-schlossen, die meisten verlinken aber zu-sätzlich nach wie vor, zum Beispiel über dasLogo, auf eine andere Seite, das aber optio-nal. Sie können aus HTML, Java, JavaScript,Flash und anderen Techniken bestehen undermöglichen eine Interaktion des Users überden einzelnen Klick hinaus.

Abbildung 5 E

Sucht man bei Hotbot nach Musik, wird derEbay-Music-Banner eingeblendet.

Abbildung 6 E

Jedes Mal, wenn man einen neuen Bereich derWebsite anklickt, öffnet sich entweder das kleine

Browserfenster, oder das Banner wechselt sichdarin aus.

..


Banner BasicsÜber Banner gibt es mittlerweile unzähligeStudien und wissenschaftliche Erkenntnisse,die ihrerseits wieder ganze Bücher füllen. Eini-ge dieser Erkenntnisse genügen aber, um dieBesonderheiten bei der Konzeption und Ge-staltung von Bannern zu verstehen.

Es wurde errechnet, dass der durchschnitt-liche BlickkontaktBlickkontaktBlickkontaktBlickkontaktBlickkontakt mit einem Banner 1,2 Se-kunden beträgt. Kurz, sehr kurz also, um dieAufmerksamkeit eines Menschen auf sich zuziehen, der sowieso nach etwas ganz anderemsucht! Allerdings hat auch das beste Bannernur eine geringe Halbwertszeit. Spätestensnach zwei Wochen tritt ein Burn-out-EffektBurn-out-EffektBurn-out-EffektBurn-out-EffektBurn-out-Effektein, und die Klickrate für dieses Banner geht

gegen null. Dann heißt es pausieren oder dasBanner gegen ein anderes austauschen.

Animierte Banner sind Studien zufolge biszu dreißig Prozent erfolgreicher als einfacheGIFs, dabei ist eine reine Textanimation in ei-ner Art »Abspannverfahren« nicht wirklichempfehlenswert. Das hat unter anderem damitzu tun, dass man bei den kurzen Blickkontak-ten kaum längere, zumal auf einzelne Phasengesplittete Aussagen transportieren kann.

Weitere Erfolgsfaktoren für Banner sindzum Beispiel auffällige Farben, eine direkteAnsprache des Users, das Versprechen vonkostenlosen Leistungen oder Gewinnspielensowie die Verbindung von Text mit Symbolen,Bildern und Illustrationen.

Über die Platzierung von Bannern gibt essehr widersprüchliche Aussagen. Manche Stu-dien empfehlen eine PlatzierungPlatzierungPlatzierungPlatzierungPlatzierung auf der lin-ken Seite, weil der Lesefluss von links nachrechts verläuft und man die Banner eher wah-rnimmt, andere wiederum sagen rechts, weilsich dort die Scrollbalken befinden und maneher zum Klicken geneigt ist, da die Maus sichauch an dieser Stelle befindet. Falls Banner-plätze in besonderen Frames angeboten wer-den, sollte man sicher diese wählen, weil sie

F Abbildung 7Ein interaktives Chat-Banner. Man gibt seinen Namenund eine Message ein, die dann auf dem Banner er-scheint. Am Ende kann man den ganzen Chat ablaufenlassen.

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

Hot Wired Tipps:C – Call to actionl – Logo includedi – Interactive bannersc – Cool colorsk – Keep it animated

O – Omit crypticsn – No burn-outs

..

145Online-Werbung

nicht weggescrollt werden können, bei No-Frame-Varianten bietet es sich an, Bannerganz oben zu positionieren, da sie dort alsErstes geladen werden und zu sehen sind.Wichtig ist es auf alle Fälle, vor der Gestal-tung die Seiten, auf denen später geschaltetwird, als Bildschirmmuster zu nehmen unddie Entwürfe darauf zu positionieren. Ist derHintergrund dunkel, sollte das Banner even-tuell anders gestaltet sein als bei einem hellenHintergrund.

Das StandardformatStandardformatStandardformatStandardformatStandardformat von Bannern kann mit234 x 60 Pixel festgelegt werden. Wie manaber gleich sieht, kann sich die Größe selbstauf einem Werbeträger deutlich unterschei-den. Die Größenangaben werden bereits beider Erstellung des Mediaplans recherchiert undfestgehalten. Anders ist es bei der DatengrößeDatengrößeDatengrößeDatengrößeDatengröße.Man geht von einer durchschnittlichen Größevon ca. 8–12 Kilobyte pro Banner aus. Sind siegrößer, weigern sich viele Werbeträger, dieseanzunehmen. Generell gilt es, Banner so klein

wie möglich zu halten, um nicht durch extre-me Ladezeiten aufzufallen!

Corporate Design-Richtlinien Corporate Design-Richtlinien Corporate Design-Richtlinien Corporate Design-Richtlinien Corporate Design-Richtlinien sind bei Ban-nern oft nicht sehr einfach zu berücksichtigen.Zum einen sollte man sich bei der Farbauswahlmöglichst an die WWW-Palette halten, daman bei Werbeträgern selten sagen kann, mitwelchen Einstellungen die User auf die Sitekommen. Das heißt, »Corporate« Farben kön-nen oft nicht so einfach übernommen werden.Eine weitere Schwierigkeit ist, dass das Logoauf Bannergröße reduziert oft kaum mehr er-kennbar ist. Auch Claims lassen sich in ihrerganzen Länge und Schriftart nicht immer um-setzen. Es lohnt sich, bei häufigerer Schaltungund bei größeren, internationalen Unterneh-men, einen Styleguide anzulegen, der alle De-signvorgaben auch auf Banner ausweitet.

Falls das Werbemittel in erster Linie dazu daist, auf die folgende Seite zu verlinken, sollteman bei der Gestaltung von Banner und Sitekonsistent bleiben, damit der User nicht denkt,er hätte falsch geklickt.

Abbildung 9 E

Die häufigsten Bannergrößenim Netz

..


Der Ablauf einer BannerentwicklungWill man eine Online-KampagneOnline-KampagneOnline-KampagneOnline-KampagneOnline-Kampagne erfolgreichplanen, gestalten und schalten, muss man sichan einen bestimmten Workflow halten, der esermöglicht, immer wieder zu korrigieren undfein zu justieren.

Am Anfang stehen Strategie und Konzept.Das Kampagnenziel muss klar festgelegt wer-den, und die Zielgruppen müssen definiert undanalysiert werden. Daraus entwickelt sich dasKommunikationskonzeptKommunikationskonzeptKommunikationskonzeptKommunikationskonzeptKommunikationskonzept.

Nächster Schritt ist der MediaplanMediaplanMediaplanMediaplanMediaplan. Hier wirddie Bannerschaltung bezüglich der Werbeträgerinhaltlich und finanziell festgelegt. Es werdenentsprechende Sites ausgewählt, Werbeplätzeverhandelt und gebucht. Bevor mit dem Textenund der Gestaltung begonnen wird, muss genaufeststehen, wo geschaltet wird, da Sonderfor-mate, also vom Standard abweichende Größen,sonst kaum kalkulierbar sind.

Nachdem eine Strategie und ein Konzeptfür die Kampagne entwickelt wurde, beginnenTexter mit der Ausformulierung. Claims wer-den entwickelt und mit den Gestaltern bezüg-lich Länge und Größe abgestimmt. Auf Basiseines visuellen Konzeptes werden die Bannerzunächst auszugsweise in Form von zwei bisdrei Phasen gescribbelt und nach Abnahmedes Kunden in einer Größe animiert. Nach derOptimierung der Datenmenge werden dieSonderformate für weitere Werbeträger er-stellt.

Die Mediaplaner übernehmen die Aussen-dung der Werbemittel per E-Mail ebenso wiedie permanente Kontrolle und eventuelle Op-timierung der Banner als auch deren Platzie-rung.

G Abbildung 10Sonderformate von Bannern für eine Bank

..

147Online-Werbung

Klein, aber fein: Microsites

Eine Zwischenstufe zwischen interaktiven Ban-nern, also Nanosites, und großen Websitessind so genannte Microsites. Es handelt sichhierbei um in sich geschlossene Sites, oft in ei-nem kleineren Extra-Browserfenster mit festerGröße, die unter Umständen gar nicht über ei-

nen eigenen URL verfügen, sondern von einerWebsite aus gelauncht werden. Sie ist also eineSatellitensiteSatellitensiteSatellitensiteSatellitensiteSatellitensite, die außerhalb des Unterneh-mensauftritts für begrenzte Zeit und in modifi-ziertem Design ein bestimmtes Produkt odereinen bestimmten Service besonders hervor-

G Abbildung 11Miss Barmer aus der klassischen Kampagne gibt auch im Internet gute Rat-schläge. Da sie nur einen Teil der Zielgruppe anspricht und sich in Gestal-tung und Tonalität vom Rest der Site unterscheidet, taucht sie als Micrositeim neuen Browserfenster auf.

G Abbildung 12Der TT taucht bei Audi im Netz zweimal auf. Einmaleher sachlich und nüchtern auf der Audi-Site, einmalsehr emotional und innovativ auf der Microsite.

..


hebt. Die Site ist in ihrem Umfang begrenztund kann auch in Benutzerführung und Aufbaudeutlich von der Hauptsite differieren.

Der Vorteil einer solchen Site ist, dass manunter Umständen sehr experimentell damit ar-beiten, neue Techniken verwenden, emo-tionale Herangehensweisen testen kann, diemit der Ausrichtung der Muttersite nicht ver-einbar wären. Besonders Produkteinführungenwie der Audi TT oder saisonale Themen wieWeihnachtsspecials oder Sommeraktionenkönnen so innovativ und als besonderes High-light gestaltet werden (Abb. 12). Häufig ist dieZielgruppe der Microsite eine Untermenge derZielgruppe der Hauptsite, auf die Inhalte, Textund Gestaltung abgestimmt sind.

Microsites eignen sich hervorragend zur Er-schließung neuer Zielgruppen, da man denKernauftritt nicht modifiziert und schnell aufdie Reaktionen der User reagieren kann. Wich-tig ist dabei aber trotzdem, dass der Absenderklar erkennbar ist und bestimmte Verbindun-gen inhaltlicher oder gestalterischer Art zurHauptsite erkennbar sind. Es ist von Vorteil,wenn beide Seiten miteinander verlinkt sindund man es nicht dem User überlässt, sich zu-sätzliche Informationen über Suchmaschinenzu suchen.

Die Zukunft: Sonderformen derOnline-Werbung

Es ist erstaunlich, wie in einem Medium, dassich so schnell entwickelt wie das WWW, derAnsatz der Werbung doch sehr stark in seinenAnfängen, der Bannerwerbung, stecken bleibt.Natürlich sind interaktive Banner spannend, esgibt raffinierte Sponsoring-Ideen und Partner-modelle. Doch wirklich innovative Ideen und

Entwicklungen gibt es immer noch sehr weni-ge. Das mag zum einen daran liegen, dass mandoch noch sehr damit beschäftigt ist, dieHauptaufgabe, nämlich die Gestaltung funktio-naler und vor allem sinnvoller, benutzerfreund-licher Websites zu lösen. Zum anderen ist On-line-Werbung immer noch ein Randthema,man hat zwar entdeckt, dass man mit Banner-gestaltung und -schaltung viel Geld verdienenkann, dabei belässt man es dann aber auch.

Die spannendsten und aufregendsten Wer-beformen, die ich in letzter Zeit gesehen habe,kommen zum Großteil, wie könnte es anderssein, aus Großbritannien.

Zur Einführung des neuen Duftes »Voodoo«von Lynx wurde die komplette Homepage desenglischen Online-Magazins »FHM« gebucht,ein sogenanntes »Hijacking«. Die erste Seitedes Magazins wurde bis auf die Navigations-leiste schwarz eingefärbt. Bei Rollover konnteman mittels einer virtuellen Kerze Teile derechten Homepage erhellen und die Inhalte er-kennen. Bei Klick oder automatisch nach zehnSekunden lud sich die Seite neu, und mansprang auf die aktuelle Homepage. Ein Bannerauf der Seite verlinkte dann zur Voodoo-Site,ebenso wie flackernde Kerzen, die auf der gan-zen FHM-Site verteilt waren. Es bedurfte eini-gen Mutes, eine so stark frequentierte Site wieFHM komplett zu schwärzen und die gesam-ten Inhalte mit einer Werbefläche zu überzie-hen. Doch der Erfolg gab Agentur und Werbe-träger recht. In Windeseile hatte sich die Aktionherumgesprochen, und die Site verzeichneteungeahnte Klickraten. Der Effekt war für beideParteien hervorragend.

Im Rahmen der Einführung des Ford Focusin Großbritannien wurde auf der Homepagedes Autosport-Magazins ein HTML-Banner mitPop-up-Menü geschaltet. Dieses Pop-up bietet

..

149Online-Werbung

die Auswahl zwischen verschiedenen Ländern,in denen man an einer Ford-Ralley teilnehmenkann, zum Beispiel Großbritannien oder Kenia.Wählt man eines der Länder aus, so lädt sichdie komplette Site neu, und der Hintergrundund die Schaltflächen tauschen sich aus. Jenachdem, welches Land man gewählt hat, ste-hen die Inhalte nun auf englischem Rasen oderkenianischem Wüstenboden. Die Farben aufder Site ändern sich entsprechend.

An der Stelle des Banners hat man nun dieMöglichkeit, sich über die Ralley und den FordFocus zu informieren. Wohlgemerkt auf einerSite, die mit Ford an sich nichts zu tun hat!

IBM gewann mit seiner Bannerkampagne imJahr 1999 den Grand Prix des Cyberlions-Award in Cannes. Eine Geschichte, die sich im-mer mehr verdichtet, wird hier über verschie-dene interaktive Medien abgespielt und derUser immer tiefer involviert. Auf einem inter-

G Abbildung 13Die FHM-Site während der Voodoo-Kampagne vorund nach dem Klick

.

aktiven Banner muss er zunächst eine Vespadurch ein italienisches Dörfchen navigieren,um zu seiner Geliebten zu gelangen. Hat er daserreicht, kommt ein neues kleines Browser-fenster, in dem die Liebesgeschichte von Al-fredo sowie die der Vespa-Website erzähltwird, die von IBM entwickelt wurde. AmSchluss des Flash-Films hat man die Möglich-keit, sich näher über die Site zu informierenoder auf die IBM- oder die Vespa-Site zu ge-langen. Eine inhaltliche und visuelle Verbin-dung zur Print- und TV-Kampagne rundeteden Auftritt ab.

Das sind nur einige von vielen Beispieleninnovativer Werbeformen im Internet. Allengemein ist eine gute Idee, Mut und die intensi-ve Beschäftigung mit dem Medium und dessenBesonderheiten.

.


G Abbildung 14Die Autosport-Site ändert ihrAussehen, je nachdem, welchesLand man in dem Banner aus-gewählt hat.

Abbildung 15 E

Ein Spiel, das die Größen-beschränkungen des Banners

vergessen lässt.

..

151Online-Werbung

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

..


Web-AnnouncingSites bekannt machen

Viel Geld wird von Unternehmen ausgegeben,um Banner zu schalten und ihre Website be-kannt zu machen. Sucht man sie jedoch anhandvon wichtigen Schlüsselbegriffen in den Such-maschinen, so tauchen sie oft nicht auf.

gebnisse) werden folgende Kriterien einbezo-gen: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än-

dert?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

TitelDer Titel der Startseite sollte bereits deutlichmachen, worum es sich handelt. Wenn Sie alsoeine Website zum Thema »Japanische Küche«eintragen wollen, ist es durchaus sinnvoll, die-se Begriffe auch im Titel vorkommen zu lassen:Er könnte also beispielsweise lauten »Küchen-studio Behrens: Rezepte für die Japanische Kü-

Suchmaschinen scheinen immer noch ein

Buch mit sieben Siegeln zu sein und werdendementsprechend häufig vernachlässigt. Wennman jedoch einige Regeln beachtet, ist es einKinderspiel, eine Site den Suchmaschinen be-kannt zu machen.

Die notwendigen Schritte Schritte Schritte Schritte Schritte dazu sind:1. Präparierung des Angebotes2. Selektion der Schlüsselwörter3. Selektion der Suchmaschinen und

Verzeichnisse4. Anmelden des Online-Auftritts5. Kontrolle, Dokumentation6. Re-Announcing

Bevor eine Site bei Suchmaschinen ange-meldet wird, sollten unbedingt einige Ände-rungen innerhalb der gesamten Struktur vor-genommen werden. Dazu muss man dieFunktionsweise der meisten Suchmaschinenkennen.

Im Unterschied zu reinen Katalogen verlas-sen sich Suchmaschinen nicht auf die Eingabendurch den Anmelder, sondern durchsuchen ak-tiv eine Site, um sie dann beurteilen zu kön-nen. In die BeurteilungBeurteilungBeurteilungBeurteilungBeurteilung (und damit oft auch indas Ranking, also die Reihenfolge der Sucher-

..

153Web-Announcing

che« oder nur »Japanische Küche«. Welchevon beiden Versionen wird wohl höher imRanking der Suchmaschinen stehen?

In der Regel wird dies die zweite Variantesein, wenn jemand den Suchbegriff »Japani-sche Küche« eingibt. Weniger ist in diesemFall also mehr.

MetatagsMit den meisten WYSIWYG-Editoren ist esmittlerweile sehr einfach, Metatags einzutra-gen.

Metatags haben verschiedene Funktionenund Bestandteile, sie sind alle im Head-Bereicheiner Seite angesiedelt.

.

G Abbildung 1Der Eintrag von Schlüsselwörtern in Dreamwea-ver

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

E SchlüsselwörterSchlüsselwörterSchlüsselwörterSchlüsselwörterSchlüsselwörterwerden von allen Suchmaschinen abgefragt.Sinnvolle Keywords beinhalten alle Wörter,nach denen eine potenzielle Suchabfrageerfolgen kann. Die meisten Suchabfragengenerieren Tausende von Links, weshalbauch unbedingt Eingrenzungen und Spezial-themen berücksichtigt werden müssen.Wichtig ist es hierbei, alle möglichen Vari-anten inklusive verbreiteten Schreibfehlernzu berücksichtigen, wie z.B. »Raum, Räume,hobeln, gehobelt, gehoblt«. Bei einer Wie-derholung der Keywords im Text steigt dieWahrscheinlichkeit einer Berücksichtigungin den Suchmaschinen.<meta name="keywords" content="Kochen,

Japan, Rezepte, Sushi, Kapa, Maki">

.


E BeschreibungBeschreibungBeschreibungBeschreibungBeschreibungEine kurze Beschreibung der Inhalte der Sitewird von vielen Suchmaschinen zusammenmit dem Link ausgegeben. Je besser diesedie genauen Inhalte der Site beschreibt,umso wahrscheinlicher ist es, dass Sucherauch zu Besuchern werden.<meta name="description" content="Rezepte

und Einkaufslisten für die japanische Kü-

che finden Sie bei uns ebenso wie ein Le-

xikon aller Zutaten und einfache Schritt-

für-Schritt-Anleitungen zum Nachkochen.">

robots.txtDie meisten Suchmaschinen schicken so ge-nannte »Spider« los, um den Inhalt einer Sitezu indizieren. Wenn dieser Spider auf eine Da-tei robots.txt trifft, die im Stammverzeichnisder Site liegt, so liest er zuerst deren Informa-tionen aus. Mit dieser Datei kann unter ande-rem verhindert werden, dass Demoseiten oderUnterseiten einer linearen Struktur von denSuchmaschinen gefunden werden. Je Site darfes nur eine Datei robots.txt geben. Die genau-en Spezifikationen dieser Datei würden den

Rahmen dieses Buches sprengen, sie lassensich jedoch beim W3C unter www.w3c.orgnachlesen.

Selektion der Suchmaschinenund Verzeichnisse

Suchmaschinen, Verzeichnisse und Meta-Such-maschinen gibt es mittlerweile wie Sand amMeer. Die Großen haben sich zu wichtigenPortalen entwickelt und können bei professio-nellen Sites darüber entscheiden, ob eine sol-che erfolgreich besucht sein wird oder nicht.Durch sinnvolle – in der Regel kostenlose –Einträge kommen bei vielen Websites bis zu80% der Besucher auf Grund von Suchanfra-gen.

Suchmaschinen wie hotbot.com suchenselbstständig nach Websites und indizierendiese automatisch auf Grund von Metatagsund Informationen auf der Site selbst.

Verzeichnisse werden redaktionell betreutund sind unter anderem auf die Informationenvon Betreibern einer Site angewiesen. Ver-gleichbar sind Verzeichnisse wie yahoo.de amehesten mit Branchenbüchern.

So genannte Meta-Suchmaschinen, wie bei-spielsweise metacrawler.de, verknüpfen Abfra-gen auf unterschiedlichen anderen Enginesund geben dem Sucher somit eine Übersichtüber mehrere Datenbanken. Dabei bieten sieaußer der Zeitersparnis für den Suchendenauch Rankings anhand der gefundenen Treffer.

Die Unübersichtlichkeit des Internet hatsich mittlerweile zu einem einträglichen Ge-schäft gemausert. Auch wenn dies nicht öf-fentlich kommuniziert wird, kann man sich beiden meisten großen Suchmaschinen einen derersten Plätze erkaufen, ein teurer und meist

Zu den häufig verwendeten Suchmaschinenund Katalogen in Deutschland zählen:E YahooE AltavistaE HotbotE LycosE MetacrawlerE MetagerE ExciteE DinoE GoogleE Fireball

..

155Web-Announcing

auch fragwürdiger Spaß. Aber auch mit dem(mehr oder weniger) professionellen Eintrag inSuchmaschinen lässt sich Geld verdienen: Inden letzten Jahren schossen Dienstleister ausdem Boden, die entweder eine Software zumSuchmaschineneintrag anbieten oder aber diesals Service selbst übernehmen. Fast alle dieseAngebote sollten jedoch vorsichtig geprüftwerden, da durch den automatisierten Eintragdie Eigenheiten mancher Suchmaschinenschnell übergangen werden. Außerdem ist esnicht unbedingt nötig, bei 200 Engines gelistetzu sein, da die meisten Menschen sowieso nurwenige Suchmaschinen verwenden.

Vor dem Eintrag sollten Sie (außer den ab-geschlossenen Vorbereitungen der Site) auch

eine Kurzbeschreibung des Angebotes, eineausführliche Beschreibung, eine Liste derSuchwörter und möglichen Kategorien vorbe-reitet haben. Versetzen Sie sich dabei grund-sätzlich an die Stelle des Suchenden. Kaum je-mand wird Ihr Angebot über den irmennamensuchen. Überlegen Sie sich, welche Gründe je-mand haben kann, Ihre Site finden zu wollen.

Die meisten Angebote benötigen einigeTage, um ein angemeldetes Angebot auch auf-finden zu können. Ist dies nach 14 Tagen nochnicht geschehen, sollten Sie die Anmeldungwiederholen. Auch wenn sich an der Ausrich-tung der Site oder an den angebotenen Inhal-ten etwas geändert hat, empfiehlt es sich, dieAnmeldung zu erneuern.

..


Intranet und ExtranetDas Internet wird zum Arbeitstool

Ein Medium, das so viele Prozesse erleichtertund ganz neue Möglichkeiten der Kommunika-tion und Interaktion eröffnet, ist eigentlich wiedafür geschaffen, auch firmeninterne Abläufezu verbessern. Warum ist das so schwierig?

E Reduktion von ArbeitsprozessenE Erleichterung des WorkflowsE ProjektkoordinationE Planung und Koordination von TerminenE Ablage und Organisation von DokumentenE Vereinheitlichung von DokumentenE Abgleich von Strategien und Kommuni-

kationE Reduktion des Materialverbrauchs durch

digitale DatenE Verwaltungstechnische Aufgaben

Grundidee ist dabei immer, Prozesse zu ver-einfachen, Kosten zu senken und das Unter-nehmen transparenter zu machen.

Da ein Intranet ein Pull-MediumPull-MediumPull-MediumPull-MediumPull-Medium ist, interneFirmenkommunikation klassischerweise aberauf Push basiert, wie zum Beispiel bei Haus-post, Mails und Verteilern, ändert sich eingrundlegendes Element im gewohnten Ar-beitsablauf. Die Mitarbeiter zu motivieren unddavon zu überzeugen, sich aktiv bei diesemWechsel zu beteiligen, ist der wichtigsteSchritt im Rahmen der Einführung eines Intra-net. Die User, also alle Mitarbeiter, müssensich täglich einloggen und aktiv die Services

Nachdem mittlerweile auch sehr viele kleine

Unternehmen an das WWW angeschlossensind und meistens auch über eine eigene Web-site verfügen, sind die technischen Gegeben-heiten für ein Intranet oft schon vorhanden.Doch selbst Firmen, die sich intensiv mit denneuen Medien beschäftigen, haben große Pro-bleme, eine solche Applikation zu implemen-tieren und damit die Mitarbeiter ordentlich zuvernetzen.

Das Intranet

Das Intranet ist ein firmeninternes Netz, sozu-sagen ein Internet im Kleinen. Dieses geschlos-sene Firmennetzwerk basiert auf dem InternetProtocol und ist deswegen hundert Prozentmit dem WWW kompatibel.

Aufgaben eines IntranetAufgaben des Intranet sind unter anderem:E Schnellere firmeninterne Information und

AbwicklungenE Kommunikation innerhalb des Unterneh-

mens

..

157Intranet und Extranet

nutzen, ansonsten ist das Netz eine Fehlinves-tition. Es gibt einige grundlegende Regeln, diehelfen, aus dem Intranet ein funktionierendesNetzwerk zu machen.

Das IntranetE muss für jeden ganz einfacheinfacheinfacheinfacheinfach und selbstver-

ständlich erreichbar sein. Mehr als eine all-morgendliche Passwortabfrage sollte nichtzwischen dem Mitarbeiter, dem Browserund dem Intranet stehen.

E sollte ein einfaches und intuitives Interfacebesitzen. Klar und übersichtlich hat es einendeutlich stärkeren ToolcharakterToolcharakterToolcharakterToolcharakterToolcharakter als zumBeispiel eine Marketing-Website. Obwohldie Seiten meist direkt vom Server im Hausgeladen werden, basieren manche Intranetsauf so langsamen Datenbanken, dass die La-dezeiten enorm in die Höhe getrieben wer-den.

E hat trotzdem die Aufgabe, zu motivierenund eine Identifikation mit dem Unterneh-men zu schaffen. Ein Intranet ist eine Erwei-terung der FirmenkulturFirmenkulturFirmenkulturFirmenkulturFirmenkultur. Es sollte eine posi-tive sein!

E muss in den WorkflowWorkflowWorkflowWorkflowWorkflow integriert werden. Essollte ganz selbstverständlich sein, dass In-halte auf diesem Server abgelegt werden,Duty-Listen übers Netz abgefragt und Pro-jekte komplett im Intranet dokumentiertwerden. Passwörter verhindern dabei denMissbrauch der Daten.

E wird gepflegt und ist immer aktuellaktuellaktuellaktuellaktuell. Wenndas nicht der Fall ist, das Unternehmenselbst also kein großes Interesse daran zeigt,warum sollte man selbst dann damit arbei-ten?

E bietet jedem Mitarbeiter die Möglichkeit,sich aktivaktivaktivaktivaktiv an der Site zu beteiligen. Schwar-ze Bretter zum Posten von Wohnungsge-

suchen, Know-how-Bereiche, in denenjeder sein Wissen dokumentieren kann,oder Gossip-Seiten, auf denen der neuesteTratsch verbreitet wird, helfen bei derAktzeptanz des Mediums.

E bedarf Informationen,Informationen,Informationen,Informationen,Informationen, die nur dort zu fin-den sind. Die Telefonliste oder das Firmen-organigramm gibt es nicht mehr auf Papier,sondern nur noch digital im Netz, so sinddie Daten aktuell, und alle haben den glei-chen Stand.

E kann auch Bereiche enthalten, die zwangs-zwangs-zwangs-zwangs-zwangs-weiseweiseweiseweiseweise täglich genutzt werden müssen undso die Nutzungszahlen nach oben treiben.Die Zeiterfassung oder wichtige Interna sindThemen, die zwangsläufig jeden Morgenoder Abend abgefragt werden.Es reicht also nicht, einfach nur eine Daten-

bank aufzustellen und den Mitarbeitern dieMöglichkeit zu geben, nach Lust und Launeihre PowerPoint-Präsentationen darauf zu la-den. Die FirmenkulturFirmenkulturFirmenkulturFirmenkulturFirmenkultur ändert sich durch solcheTools, Prozesse werden transparenter undHierarchien flacher. Auf einmal hat jeder dieMöglichkeit, sich Gehör zu verschaffen undmit allen zu kommunizieren. Man muss sichdessen bewusst sein und diese Entwicklungleiten und begleiten, sonst entsteht mehr Un-mut als wirklicher Nutzen.

Intranet und DesignFür das Intranet gelten die gleichen Design-regeln wie für das Internet. Auch hier stehenLesbarkeit, Orientierung, Schnelligkeit undBranding an oberster Stelle.

..


und kann mit verschiedenen Zugriffsrechtenausgestattet werden.

Über das Extranet werden zum Beispiel Ab-nahmen vorgenommen, Dokumente ausge-tauscht, Statusberichte vorgelegt oder einfachnur kommuniziert. Die Gestaltung kann auchhier sehr reduziert sein, handelt es sich dochmehr um ein Tool als um eine klassische Site.Man darf aber nicht vergessen, dass man demKunden Qualität präsentiert in der Art undWeise, wie das Extranet aufgebaut ist und wiees funktioniert. Die Grundsätze des Interface-Designs wie Lesbarkeit, Orientierung, Naviga-tion und Modularität treffen hier genauso zuwie in Internet und Intranet. Nur weil es sichum ein Tool handelt, heißt das nicht, dass De-signer aus dem Produktionsteam automatischausgeschlossen sind, im Gegenteil.

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

.

Es kann durchaus auch Sinn haben, Intra-nets einzugrenzen und nur für bestimmte Be-rufsgruppen oder zum Beispiel die Führungs-ebene anzulegen (Abb. 2). Die Anforderungenkönnen dementsprechend zugespitzt und imkleineren Kreis kann die Durchführbarkeit ei-nes solchen Projekts im Unternehmen erprobtwerden.

ExtranetEine erweiterte Form des Intranet ist das Ex-tranet. Es verbindet Unternehmen mit ihrenKunden, Zulieferern und Partnern und ist ent-weder ein Teilbereich des Intranet oder ausSicherheitsgründen vollkommen davon ge-trennt. Auch dieses Netz ist passwortgeschützt

.

159Intranet und Extranet

Außerdem muss man sich bewusst sein,dass man hier jenseits der Firewalls agiert.Kunden können jederzeit darauf zugreifen undauch anderen die Möglichkeit dazu geben.Also Vorsicht bei Firmeninterna, voreilig publi-zierten Dokumenten oder kleinen Wortspielenmit Kundennamen, wie sie im Intranet durch-aus vorkommen können.

F Abbildung 2Das Bertelsmann-Executive-Network ist eine Arbeitsplattformfür führende Mitarbeiter.

..


E-BrandingOnline-Brands und Brands Online

Die großen Marken gehen ins Netz, neue Markenwerden im Internet aufgebaut. Gibt es dabeiUnterschiede?

freut, einfach keine InhalteInhalteInhalteInhalteInhalte hat? Wenn einamerikanischer Sportartikelhersteller zwar fürseine Kinospots prämiert wird, deren Weiter-führung aber im Netz einfach nicht klappenwill?

Solange die zu gestaltende Site über gene-rische Eigenschaften verfügt, die nur dem Netzzu Eigen sind, wie zum Beispiel E-Commerceoder E-Finance, dann kann man sich ganz gutan diesen Funktionalitäten entlang hangelnund die Markenfeatures damit verbinden. Denschnellsten Shop, die komfortabelste Banking-Lösung, die personalisierte Nachrichtensite. Istdieser eine, ganz bestimmte Nutzen für denUser nicht von Anfang an in Form einer Strate-Strate-Strate-Strate-Strate-giegiegiegiegie gegeben, dann muss man ihn aus demMarkenkern heraus schaffen, wie es zum Bei-spiel UPS mit seinem Trackingsystem als einesder ersten Unternehmen im Internet geschaffthat und konsequent weiter ausbaut. Hat mandiese Möglichkeit nicht, wird es richtig schwer,und man muss sich etwas einfallen lassen.

E-Branding ist gar nicht schwer. Man defi-

niert den Markenkern, transferiert ihn einfachauf die neuen Medien und nutzt alle derenVorteile wie Interaktivität, direkter User-Res-ponse, Aktualität und alles, was das Netz so zubieten hat. Das meiste ist doch durch die klas-sischen Markenbildungsmaßnahmen sowiesoschon vorgegeben, da stimmen wir die Farbenauf die WWW-Palette ab und machen ein klei-nes Spielchen, mit dem wir ganz viele User-daten generieren, und fertig ist die Laube.

Klassische Marken

Ist sie natürlich nicht. Es ist ein großer Fehler,das WWW einfach als weiteren Kommunikati-onskanal zu sehen, der mittlerweile unbedingtbelegt sein muss. Kaum eine Anzeige, in dernicht auf einen URL hingewiesen wird, unterdem es mehr zum Thema gibt. Die Zielgruppeist dort etwas jünger angesetzt, die Texte etwaskürzer gehalten, und die Inhalte sind interaktivaufgepeppt. Was aber, wenn es gar keine In-halte gibt? Wenn ein Softdrink, der sich welt-weit über 99 % Markenbekanntheitsgrad er-

..

161E-Branding

Die neuen E-Brands

Bei den Cyberbrands, den Dot-coms, den In-ternet-Startups ist meist das Gegenteil der Fall.Hier wurde ein Service, ein Nutzen entwickelt,der ohne das WWW so nie denkbar gewesenwäre und direkt aus ihm heraus geboren wur-de. Nun muss man dem Kind zunächst imNetz, dann aber schnell auch im klassischenMarketing einen Namen und ein Gesicht ge-ben, um bei Nutzern und Investoren bekanntzu werden. Den MarkenkernMarkenkernMarkenkernMarkenkernMarkenkern und den damitverbundenen NutzenNutzenNutzenNutzenNutzen zu kommunizieren, stellthierbei oft das größere Problem dar. Vorbehal-te gegen das Internet (»Wie soll ich denn imNetz Schuhe bestellen?!«) müssen ebenso aus-geräumt wie technisch oder inhaltlich komple-xere Vorgänge (»Warum wird etwas billiger,wenn ich es zusammen mit zehn anderen Leu-ten kaufe?«) erklärt werden. Der Hype ermög-licht es zwar, innerhalb kurzer Zeit Brands ausdiesem speziellen Sektor zu einer gewissen Be-kanntheit zu verhelfen, wie lange diese anhältund ob sie wirklich schon mit jahrzehntelangaufgebauten Marken verglichen werden kön-nen, 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 Minutensurfen und ein Fernsehwerbeblock genügen,um einen kleinen Einblick zu erhalten. GuteBeispiele sind selten, und wie im klassischenBranding spielt das Design auch online eineSchlüsselrolle. Gestaltung muss von Anfang anin die Strategie mit eingebunden sein, im Netzwird jedes Element einer Website zum brand-

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

..


deutet nicht per se, dass die Site schlecht ist.Man sollte nur versuchen, sich etwas mehr vonden direkten Mitbewerbern positiv abzuheben,denn das Netz ist noch zu jung für festgefahre-ne Designstandards, die sich in erster Linie austechnischen Anforderungen ergeben. Es stehtdoch außer Frage, dass sich Inhalte, Designund Technik ergänzen und unterstützen müs-sen und sich nicht, wie im Moment, perma-nent einschränken.

Dass man trotz eines sehr klassischen undim News-Bereich keineswegs ungewöhnlichenSeitenaufbaus die Brand stärken kann, zeigtwww.ftd.de. Mit ihrer reduzierten Gestaltung,die fast komplett auf GIFs verzichtet, mit derabsoluten ServiceorientierungServiceorientierungServiceorientierungServiceorientierungServiceorientierung auf allen Platt-formen und der simplen, aber anscheinendnicht selbstverständlichen Idee, die Site lachs-rosa einzufärben, wird eine klassische Markeim Netz weiterentwickelt und gestärkt.

Abbildung 2 E

Ganz reduziert mit klassischemAufbau: Trotzdem erkennt man

sofort die Financial Times.Die Funktionalitäten ergänzen

das Markenbild.

WegweiserDer User sollte immer wissen, auf wessen Siteer sich befindet.

Was kann man bieten?Hat man keinen Service, will der User wenig-stens etwas erleben.

spezifischen Charakteristikum. Schwierig ist eszum Beispiel, wenn sich viele Online-Shops ei-ner Designrichtung unterwerfen, die sicheventuell als recht funktional erwiesen hat,wodurch es aber kaum mehr möglich ist, denAbsenderAbsenderAbsenderAbsenderAbsender zu erkennen. Das trifft besonders zu,wenn es sich um gleiche Warensegmente han-delt. Man legt den Daumen über das Logo undkann kaum mehr sagen, welcher der großenBuchhändler sich dahinter verbirgt. Das be-

..

163E-Branding

Das gleiche Ziel verfolgt die europäischewww.eu.levi.com, die im Netz konsequent dieKampagne zur Engineered Jeans mit entwi-ckelt. Man bedient sich aktuellster technischerMöglichkeiten bezüglich Screen-Aufbau undBenutzerführung und wertet so reine Marke-tinginhalte wie Produktbeschreibung und TV-Spots auf zu einem netzspezifischen ErlebnisErlebnisErlebnisErlebnisErlebnis.Das stärkt nicht nur die Engineered-Linie, son-dern auch die Marke Levis an sich. Dass diesauf internationalem Level eher schwierig ist,kann man gut auf der www.levi.com erkennen,die es nicht schafft, die unterschiedlichen Auf-tritte zu verbinden. Dass internationale Auftrit-te grundsätzlich sehr komplex sind und manimmer auf die Eigenheiten der einzelnen Län-der Rücksicht nehmen muss, sollte klar sein.Doch im Netz liegen die Marketingmaßnah-men auf einmal direkt nebeneinander, und wasvor kurzem noch einfach war, nämlich die glei-che Marke in einzelnen Ländern unterschied-lich zu positionieren, wird sehr kompliziert,will man im WWW doch zumindest einenGrundtenor schaffen, der die Seiten verbindet.

F Abbildung 3Die aktuelle Levis-Site: Mit jederKollektion definiert sich das Labelneu und bleibt der Brand dadurchtreu. Auch im Netz.

Mode im Netz ist generell ein sehr schwieri-ges Thema. Sie hat mit Stofflichkeit, Haptik,Licht und Emotion zu tun. Einige Werte kannman über das Netz kaum transportieren undsollte das auch nicht versuchen. Doch nebendem Gefühl, ein Kleidungsstück zu berührenund zu tragen, gibt es noch andere SinneSinneSinneSinneSinne, dieman ansprechen kann. Gucci hat es geschafft,als eine von wenigen Fashion-Sites Inhalte sozu präsentieren, dass das Image, das mit vielGeld in Shops, in Zeitschriften und auf demLaufsteg aufgebaut wurde, auch ins Netz ge-bracht wurde (www.gucci.com).

Die Technik ist innovativ und funktioniertperfekt, die komplette Kollektion ist zu sehen,Anzeigenmotive werden aufgegriffen undschaffen eine besondere Atmosphäre, und zu-sätzliche Inhalte wie das Investor Center gebender Site ihre Berechtigung im Netz.

Dass gutes Branding nicht unbedingt mitganz großen Etats zu tun hat, zeigt die Websitevon Freitag, die aus alten LKW-Planen soziemlich alles an Taschen fabrizieren, was mansich vorstellen kann. Nicht nur dass die Site

..


doch funktional, so wie man es von dieserMarke eben erwartet.

Und dann wird es schon schwierig, Seitenzu finden, die man guten Gewissens als ge-konntes E-Branding bezeichnen kann, immerunter der Prämisse, dass die Site auch generellim Netz hervorsticht und wert ist, als Book-mark gewählt zu werden.

Man würde denken, die Unternehmen, de-ren Geschäftsidee aus dem Netz geboren wur-de, und die bezüglich Service und Technik ganzvorne stehen, hätten die Chance, sich aus demMedium heraus gekonnt zu positionieren. DieWebsite entsteht fast gleichzeitig mit der Idee,dem Logo, dem Corporate Design und demMarketingansatz. Und durch hohe Werbebud-gets sind sie schnell in aller Munde.

Doch zum einen besteht die Gefahr, dassDinge, die im klassischen Bereich oft Monatedauern und mit viel Know-how und Liebe zum

.

F Abbildung 4Gucci (www.gucci.com): im Leben eigentlich schonwieder vorbei, im Netz richtig schick! Intuitive Benutzer-führung, gute Technik, modulares Design. Und aktuell!

Abbildung 5 E

Ungewöhnlich wie die Taschen, aber trotzdem ist allesda, was man von so einer Site erwartet – führt die

Freitag-Story ziemlich gut weiter (www.freitag.ch).

unter www.freitag.ch bezüglich Navigationund grafischer Oberfläche anders ist als vieles,was man kennt, auch inhaltlich wird sie allenKriterien gerecht, die man an das Mediumstellt. Service ist genauso vertreten wie Unter-haltung und Information, sodass es einfachSpaßSpaßSpaßSpaßSpaß macht, sich durch die Seiten zu klicken,und das Image, das man von den Produktenund der Firma hat, weitergeführt und ergänztwird. Vernetzte Markenführung bedeutet das,und es wird jedem klar, der jemals einen Frei-tag-Karton gesehen hat.

Das VIAG-Produkt Loop fällt im Fernsehenund bei der Verpackung auf durch sein sehrklares, durchgängiges und eindeutig von Illu-strator und Flash inspiriertes Design. Wenigermarktschreierisch als die Konkurrenz und ge-prägt durch starke Farben und geometrischeFormen taucht es auch im Netz unterwww.loop-up.de wieder auf, verspielt und

.

165E-Branding

Detail gestaltet werden, für Websites innerhalbkürzester ZeitZeitZeitZeitZeit realisiert werden müssen. Alleinder Entwurf eines Logos, der schnell im Rah-men des visuellen Konzeptes für die Site ent-wickelt wird, hält normalerweise ganze Scha-ren von klassischen Designern in Atem.

Und zum anderen ist es erschreckend zu se-hen, dass diese Unternehmen, die für viel GeldPrint- und TV-Kampagnen entwickeln lassen(die sich interessanterweise auch allesamt sehrähneln), mit ihrer Site, die doch eigentlich dasHerzstück ihres Geschäftes ist, vieles vernach-lässigen, was bei anderen Firmen, die das Netzerst langsam für sich entdecken mussten, gangund gäbe ist. Das heißt nicht, dass die Auftritteund die Idee dahinter an sich nicht gut sind,aber ein klares Bild, an das ich mich auch erin-

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

nere und das unter Millionen hervorsticht, dasergibt sich nur selten. Logo oben auf die Seiteund dann ein datenbankinspiriertes Interface,das ist es meistens. Dabei müssten doch ei-gentlich genau diese Seiten zeigen, wie manes richtig macht. Aber da bleibt wohl nur dieHoffnung auf den Relaunch.

E-Branding ist ein hochaktuelles Thema,und fast jede Agentur schreibt es sich auf dieFahnen. Spätestens hier sind wir an dem Punktangekommen, an dem sich Werbeagenturen,Designbüros und Multimedia-Agenturen aneinen Tisch setzen müssen, sich über die Be-sonderheiten aller Medien klar werden undgemeinsam eine Strategie entwickeln, welchedie Marke überall trägt und stärkt. Dann istE-Branding auch gar nicht schwer!

..


Abbildung 7 E

Drei Dot-com-Websites, bei denen dasLogo oben auf die Site gepackt wurde.Recht viel mehr ist beim Branding abernicht passiert. Außer den Ameisen bei

letsbuyit.com ...

..

167E-Branding

..


Die Gestaltung von Online-ShopsVerkaufen, verkaufen, verkaufen

Nachdem die große Welle der reinen Marketing-Websites abflaute, fragten sich nicht nur in derIBM-Werbung viele Unternehmen, warum sie insInternet sollten. Einige Vorreiter wie Dell oderAmazon gaben die Antwort: Geld verdienen! Undauch wenn Deutschland – an der Zahl der Online-Käufe gemessen – immer noch hinter den USA her-hinkt und nur einige Online-Händler wirklich vielGeld verdienen, so ist die Gestaltung von Shopsund E-Commerce-Anwendungen mittlerweile derhauptsächliche Broterwerb vieler Designer.

E Mehrwert durch den NetzkaufMehrwert durch den NetzkaufMehrwert durch den NetzkaufMehrwert durch den NetzkaufMehrwert durch den NetzkaufImmer dann, wenn echte Mehrwerte ange-boten werden, also z.B. unbegrenzter Sup-port und wichtige Zusatzleistungen wieSoftware oder aber ein günstigerer Preis,fällt den Käufern die Entscheidung für einenWeb-Shop ebenfalls leichter.Momentan nutzen viele (potenzielle) Käufer

einen Online-Shop als wichtige Informations-quelle, was für die Gestalter dieser Systemebedeutet, hoch differenzierte Informationenzu bieten, die jedoch den Kaufprozess nichtstören dürfen.

Die große Kunst besteht darin, das »Ein-kaufserlebnis« im Netz so zu gestalten, dassder Kunde Spaß dabei hat und durch den Shop– ähnlich wie im echten Laden durch einen gu-ten Verkäufer – dazu angeregt wird, mehr zukaufen, als er ursprünglich wollte.

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 Jahrenkontinuierlich nach oben entwickelt, was auchzeigt, dass die anfänglichen Bedenken gegen-über Online-Shopping langsam der Vergangen-heit angehören.

Momentan sind vor allem Web-Shops er-folgreich, die den Besonderheiten des Medi-ums gerecht werden:E Sofortige Verfügbarkeit der ProdukteSofortige Verfügbarkeit der ProdukteSofortige Verfügbarkeit der ProdukteSofortige Verfügbarkeit der ProdukteSofortige Verfügbarkeit der Produkte

Dies ist bei allen digitalen Produkten wieMusik, Software, Bildern, Auskünften oderVerträgen (Reisen) gegeben.

E Bekannt – Einfach – StandardisiertBekannt – Einfach – StandardisiertBekannt – Einfach – StandardisiertBekannt – Einfach – StandardisiertBekannt – Einfach – StandardisiertBücher, Streetware oder Kosmetik sind inder Regel bereits bekannt bzw. so standar-disiert, dass der Kunde genau weiß, was ihnerwartet.

..

169Die Gestaltung von Online-Shops

Im richtigen Leben hat ein Verkäufer da-rüber hinaus die Möglichkeit, den Kunden undseine momentane Situation einzuschätzen: Ister 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 bereitssicher?

Diese Fragen kann sich ein Web-Shop nichtstellen, schließlich ist er letztlich nur ein Stückdummer Software. Den intelligenten undmenschlichen Part müssen wir bei der Gestal-tung einbringen und dafür sorgen, dass all die-se unterschiedlichen Situationen abgedecktwerden.

Der perfekte Aufbau desVerkaufsvorganges

Ein Verkaufsvorgang im Netz unterscheidetsich im Prinzip nicht von dem in einem echtenLaden. Aber auch nur im Prinzip. Denn die

F Abbildung 1Zielgruppenaffinität, die fast schonweh tut: www.girlshop.com.

F

Der Kundemuss sichwohlfühlen

Maßnahmen, die ergriffen werden müssen, umden Nutzer wirklich zum Kauf zu bewegen,sind vielfältig und orientieren sich streng amVerkaufsprozess.

HereinkommenWas tun Sie, wenn Sie in einen Laden gehen?Sie sehen sich um, orientieren sich und ent-scheiden sich dann, welchen Weg Sie einschla-gen. Die zielführende Gestaltung von Verkaufs-flächen ist seit Jahrzehnten streng wissenschaft-lich untersucht und definiert worden undnimmt entscheidenden Einfluss auf die Umsatz-zahlen. Auch im Netz ist das Hereinkommen einwichtiger Moment, der alles entscheidend seinkann. Auf der ersten Seite muss sich der Kundewohlfühlen und das Gefühl bekommen, an derrichtigen Stelle angekommen zu sein. Wir errei-chen dies, indem die Seite einen aufgeräumtenEindruck macht, der die Orientierung erleich-tert und dem Kunden zeigt, was ihn erwartet.Dazu gehört ein kurzer Überblick über die Artdes Warenangebotes, der durch die Gestaltung

..


noch verstärkt werden kann. Vor allem bei klei-neren und unbekannten Anbietern ist es wich-tig, das Vertrauen des Kunden zu gewinnen.Insbesondere Sicherheitsbedenken können hierrecht schnell ausgeräumt werden, indem aufbestimmte Selbstverpflichtungen, wie kosten-lose Rücknahme einer Ware, oder Serviceleis-tungen aufmerksam gemacht wird.

Vor allem aber müssen auf der Einstiegsseiteverschiedene Wege zu den Produkten angebo-ten werden, die dem unterschiedlichen Kauf-verhalten gerecht werden.

Stöbern, suchen und findenDie einfachste Art, ein Produkt im Netz schnellzu finden, bietet eine SuchfunktionSuchfunktionSuchfunktionSuchfunktionSuchfunktion. Sie sollteschon auf der Homepage eingebunden seinund auf eine Ergebnisseite führen, die sichnicht an technischen Voraussetzungen, son-dern an menschlichen Wahrnehmungsfähig-keiten orientiert.

Im obigen Beispiel habe ich nach »DVD«gesucht, als Ergebnis bekomme ich eine Liste

mit 196 Dokumenten. Schlecht! Besser wärees, die Ergebnisse nach verschiedenen Pro-duktgruppen zu ordnen, die es mir einfach ma-chen, auf die gewünschte Produktdarstellungzu wechseln. Am besten wäre es jedoch, demKäufer zuerst eine kurze Liste aller Produkt-kategorien zu geben, in denen Produkte mitdem Namen »DVD« auftauchen, und danachzusätzlich eine Liste aller gefundenen Doku-mente.

Ein weiterer möglicher Weg ist der Kaufdurch BeratungBeratungBeratungBeratungBeratung. Viele Kunden haben keinenProduktwunsch, wohl aber ein Bedürfnis oderein Problem. Dies gilt es herauszufinden, umdann eine Lösung in Form eines Produktes zubieten. In unserem Beispiel habe ich das kon-krete Bedürfnis, meinen vorhandenen Laptopum ein DVD-Laufwerk zu erweitern. Ein guterPC-Shop könnte mich über ein interaktives Be-ratungssystem zum gewünschten Produkt füh-ren. Vereinfacht könnte die Abfolge der Fragenso aussehen:

Abbildung 2 E

Unübersichtliche Suchergebnisseerschweren den Kaufprozess.

..


Als letzte Möglichkeit des Auswahlprozessessoll das StöbernStöbernStöbernStöbernStöbern nicht unerwähnt bleiben. Ein-kaufen kann durchaus auch eine lustvolleKomponente haben, wenn man sich positivüberraschen lässt. Von vielen Shops wird diesin Form von kleinen Produktdarstellungen aufden Seiten oder Bannern unterstützt. Amazonhat sogar einen Button Stöbern auf seiner Ho-mepage. Sinn ist es, den Nutzer scheinbar ziel-los an die Produkte heranzuführen, die ihn in-teressieren könnten. Dabei ist vor allem daraufzu achten, eine schnelle Abfolge von unbe-grenzt vielen Produkten zu ermöglichen, durchdie sich der Kunde linear klicken kann. Dabeiist vor allem das themenspezifische Stöbern(»Urlaubslesebücher«) erfolgreich.

Informieren und bestätigenSobald der Kunde sich für ein Produkt ent-schieden hat, gilt es, ihm den Entscheidungs-prozess möglichst leicht zu machen. Dabeispielt die bildhafte Darstellung des Produkteseine große Rolle. Selbst körperlose Produkte

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 Drop-down-Menüs realisiert werden, kann Kundenauf schnellstem Weg geholfen werden.

Viele Kunden bewegen sich auch mit Hilfehierarchischer Kategorienlistenhierarchischer Kategorienlistenhierarchischer Kategorienlistenhierarchischer Kategorienlistenhierarchischer Kategorienlisten durch einenShop. Diese Variante ist recht verbreitet, da sieschnell und einfach zu realisieren ist. Bei derWahl der Kategorien ist darauf zu achten, dassdiese möglichst selbsterklärend sind und nichtzu umfangreich ausfallen (Abb. 3).

F Abbildung 3Eine sinnvolle Hierarchie vonProduktkategorien hilft denKunden, sich zurechtzufinden.

F

Erleichtern Siedie Kaufent-scheidung.

..


wie Handyverträge oder Musik werden gernein Form von CD-Covern oder Packshots darge-stellt. Als Kunde möchte ich möglichst viele In-formationen über ein Produkt haben, um nichtdie »Katze im Sack« zu kaufen. Unser wichtig-stes 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 Infor-mationen. Geben Sie so viele davon, wie nötigsind, um das Produkt eindeutig zu beschrei-ben.

Für alle Kunden, die sich noch tiefer gehendinformieren möchten, sollte dann auf einerweiteren Seite auch eine vergrößerte Darstel-lung des Produktes und alle weiteren zur Ver-fügung stehenden Informationen angebotenwerden. Diese Ansicht wird von vielen Kundenausgedruckt und genutzt, um Vergleiche anzu-stellen. Wenn Sie möchten, dass der Kunde beiIhrem Shop kauft, vergessen Sie nicht, in die-ser Darstellung einen eindeutigen URL zu die-sem Produkt, den Preis, die Produktnummerund eine Fax- oder Telefonbestellnummer an-zugeben. Oft liegen diese ausgedruckten Sei-ten auf dem Schreibtisch, und aus Faulheitwird dort bestellt, wo es am einfachsten ist.

EntscheidenHat der Kunde sich für ein Produkt entschie-den, wandert es in der Regel in den virtuellenWarenkorb. Sobald es dort liegt, brechen über-raschenderweise viele Kunden den Prozess ab.Woran liegt das?

Gründe für den Abbruch eines Kaufes undGegenmaßnahmenE »Ich möchte mich nochmals an anderer

Stelle informieren!«

Warum nicht. Aber Sie können dafür sor-gen, dass den Kunden das Zurückkommenerleichtert wird: Durch die Möglichkeit, denWarenkorbinhalt abzuspeichernabzuspeichernabzuspeichernabzuspeichernabzuspeichern, auszudru-cken (mit den oben erwähnten logistischenInformationen) oder als Bookmark zu si-chern.

E »Der Gesamtpreis ist mir schleierhaft!«Schlecht. Leider gibt es bei vielen Web-Shops immer noch keine Kostentranspa-Kostentranspa-Kostentranspa-Kostentranspa-Kostentranspa-renzrenzrenzrenzrenz. Sie können dafür sorgen, dass alle an-fallenden Kosten (Verpackung, Lieferung,Skonti etc.) angegeben werden.

E »Ich gehe noch mal zurück zum Katalog, umweitere Waren auszusuchen!«Gerne. Aber wir kümmern uns darum, dassder Inhalt des Warenkorbes nicht verlorennicht verlorennicht verlorennicht verlorennicht verlorengeht.

E »Letzte Woche habe ich hier bestellt undjetzt muss ich schon wieder 30 Felder aus-füllen – nein danke!«Schade, dabei gibt es doch die Möglichkeit,den Kunden anzubieten, dass ihre Datengespeichert werden. Und spätestens dieKonkurrenz macht es dem Kunden hiereinfacher.

KaufenFast haben wir es geschafft, denn der Kundehat alle Waren gewählt, sie in den Warenkorbgelegt und drückt auf den Button Bezahlen.Doch was ist das? »Die Bezahlung für Neukun-den kann aus Sicherheitsgründen nur per Vor-auskasse erfolgen.« Shops, die Sicherheitsrisi-Sicherheitsrisi-Sicherheitsrisi-Sicherheitsrisi-Sicherheitsrisi-ken ken ken ken ken komplett auf den Kunden übertragen, sindalles andere als kundenfreundlich, da selbst-verständlich auch der Kunde Sicherheitsbe-denken hat. Es gilt, diese auszuräumen undihm größtmögliche Bequemlichkeit anzubie-ten. Die Möglichkeiten, per Kreditkarte, Nach-

..


nahme oder Lastschrift zu bezahlen, solltenimmer gegeben sein, Stammkunden solltendarüber hinaus auch per Rechnung zahlenkönnen.

Gerade Daten wie Konto- oder Kredit-kartennummern werden ungern auf Websitesbekannt gegeben. Selbstverständlich solltendiese Informationen verschlüsselt verschlüsselt verschlüsselt verschlüsselt verschlüsselt übertragenwerden oder der Kunde die Möglichkeit ha-ben, sie per Telefon einem Call-Center mitzu-teilen.

Sobald der Kunde den Kauf bestätigt hat,muss er die Möglichkeit haben, alle relevantenInformationen nochmals auszudrucken. Auchwenn dies keine »offizielle« Rechnung dar-stellt, so gibt man ihm doch etwas Greifbaresan die Hand, falls bei der Lieferung irgend-etwas nicht funktionieren sollte oder spätereNachfragen nötig werden.

Das Loch danachNachdem der Kunde eine Bestätigung für sei-nen Kauf bekommen hat, gibt es plötzlichnichts mehr, was ihn an den Shop bindet. Außerbei digitalen Produkten wie Download-Soft-ware oder -Musik muss er nun einige Zeit aufdas Produkt warten. Dennoch ist diese Phasevor allem zur Kundenbindung extrem gut geeig-net. Denn nun können Maßnahmen wie News-letter-Abonnements oder Loyalty-Programmeangeboten werden. Vorstellbar wäre es auch,dem Kunden weitere Informationen zum ge-kauften Produkt anzubieten, die ihn nochmalsdarin 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 Bestel-lung als Erstes das Browserfenster schließen, füralle anderen jedoch würde sich der Shop so län-ger positiv im Gedächtnis halten.

Shopsysteme im Überblick

Ein wichtiges Element beim Aufbau einesShops ist das zu Grunde liegende System. Wirunterscheiden Shopsysteme in mehreren Kate-gorien.

Der Shop auf dem eigenen ServerUnzählige Softwarehersteller offerieren Shop-systeme vom kleinen »Laden« für einen Anbie-ter von Design-Schreibwarenzubehör bis zurgroßen Lösung von Softwarehäusern wie Inter-shop. Diese Art von Shopsystemen wird alsSoftware gekauft, auf dem Server installiertund kann dann an die Bedürfnisse des Betrei-bers angepasst werden. Leider sind auch dieMöglichkeiten der Gestaltung ähnlich vielfältigwie die Zahl der Anbieter selbst:

Von »gebrauchsfertig gestalteten« PaPaPaPaPa-----ckungsproduktenckungsproduktenckungsproduktenckungsproduktenckungsprodukten ist fast immer abzuraten, dasich die gestalterischen Fähigkeiten der Soft-ware-Designer in der Regel im Rahmen halten.Angenehm ist, fast all diesen Produkten liegteine hierarchische Struktur von HTML-Seitenzu Grunde. Und auch wenn die Struktur selbstoft nicht verändert werden kann, so bleibenimmer noch die einzelnen Seiten, um wenig-stens »kosmetisch« tätig zu werden.

Besser sind da schon professionelle Shop-professionelle Shop-professionelle Shop-professionelle Shop-professionelle Shop-systemesystemesystemesystemesysteme, da sie oft umfangreiche Anpassungenvon Struktur und Inhalten möglich (und nötig)machen. Achten Sie darauf, dass Sie Einflussnehmen können auf die Struktur einzelnerBereiche, auf die Abfolge von Seiten, auf dieInformationstiefe einzelner Produktdarstel-lungen und auf die Benutzerführung.

Eine weitere Möglichkeit besteht selbstver-ständlich darin, den Shop selbst zu program-mieren oder von einer AgenturAgenturAgenturAgenturAgentur programmierenzu lassen. Diese Variante ist zwar zeit- und

..


kostenintensiv, jedoch gewährleistet sie dennötigen Einfluss auf Erfolgsfaktoren wie Designoder Benutzerführung. Vor allem dann, wennkomplizierte Produkte und umfangreicheKundenbindungsmaßnahmen angeboten wer-den sollen, bietet es sich an, diese Möglichkeitzu wählen.

»Gemietete« ShopsViele Internet Service Provider (ISP) und Appli-cation Service Provider (ASP) bieten umsonstoder für Pfennigbeträge »Storefronts« an, diezusammen mit dem Webspace gemietet wer-den können. Auch hier ist die Vielfalt der An-gebote und Gestaltungsmöglichkeiten fast un-überschaubar. Die meisten dieser Systeme sindjedoch über ein Web-Interface zu pflegen, wasdie Editierung von Daten oder die Einstellungneuer Produkte extrem vereinfacht. Darüberhinaus sind in der Regel keine HTML-Kenntnis-se Voraussetzung. Diese Angebote richten sich

deshalb auch in erster Linie an Firmen, diezwar online verkaufen wollen, dafür aber keinGeld ausgeben möchten. Ein Shop sieht dannaus wie der andere – der Verkaufserfolg bleibtsicherlich im Rahmen.

MarktplätzeEine relativ neue Möglichkeit, Waren undDienstleistungen im Netz zu verkaufen, sinddie so genannten Marktplätze. Meist bewegtsich ein Kunde dort über hierarchische Pro-duktmenüs und entscheidet sich dann für ei-nen von mehreren Anbietern. Auch hier bieteneinige Betreiber »Storefronts« an, die es er-möglichen sollen, die standardisierte Produkt-darstellung des Marktplatzes zu umgehen. Inden allermeisten Fällen unterscheiden sich dieGestaltungsmöglichkeiten jedoch nur minimalvon denen der ISP und ASP. Es gilt also wieder,die Vorteile der Einfachheit abzuwägen gegendie Nachteile der Gleichmacherei.

Abbildung 4 E

Standardisie-rung, die fast

schon weh tut:gemieteteWebshops

..


Von Amazon lernen

Der Buchversand versteht es wie kaum ein an-derer Shop, die Möglichkeiten des Einkaufspermanent zu professionalisieren. Im Laufe derZeit ist so das fast perfekte Einkaufswerkzeugentstanden. Durch das »Collaborative Filte-ring« ist es Amazon beispielsweise gelungen,persönliche Empfehlungen zu geben, die da-rauf basieren, dass das System lernt, welchenGeschmack Sie bei Büchern haben, und diesenmit dem anderer Kunden vergleicht.

Vor allem jedoch das »Streamlinen« desKaufprozesses führt dazu, dass Amazon-Kun-den weniger häufig abbrechen als andere.Ähnlich wie eine Fischreuse aufgebaut, werdendie Wahlmöglichkeiten und die Bewegungs-freiheit des Nutzers immer weiter einge-schränkt, bis nur noch der Weg nach vorne,also zum Kaufabschluss bleibt. Lassen Sie unseinen gesamten Ablauf betrachten:

Beim »Hereinkommen« finden Sie nochvielfältige Möglichkeiten der Orientierung(Abb. 5):E Produkt-Teaser (»Diablo 2«) bewerben ein-

zelne Waren und animieren durch ihre pro-minente Gestaltung zum Klick ➊.

E Themenspezifische Sammlungen (»SchöneFerien«) greifen ein bevorstehendes Ereignisauf ➋.

E Die Schnellsuche über alle Bereiche istschon auf der Homepage aufzurufen ➌.

E Über die Kategorien (Bücher, Musik etc.)kann in eine hierarchische Darstellung ge-wechselt werden ➍.

E Generell vermittelt die Seite so eine un-glaubliche Auswahl über viele Bereiche,bleibt aber trotzdem extrem aufgeräumt.

F Abbildung 5Hereinkommen

.

➊

➍

➌

➋

.


(Mehr zu diesem Buch) und für alle, die diesesBuch nicht haben möchten, gibt es die Haupt-navigation und die Suche (Abb. 7).

Nachdem wir auf den Knopf Einkaufswa-

gen gedrückt haben, landen wir auch genaudort (Abb. 8). Jetzt stehen genau zwei Klick-varianten im Vordergrund: Ähnliche Artikel,um zu weiteren Käufen animiert zu werden,und Zur Kasse gehen, um den Verkaufsprozessfortzusetzen. Unser gewähltes Buch mit Preisund Mengenangabe ist nun eher hintergründigdargestellt, da wir uns ja bereits dafür ent-schieden haben.

Sobald Sie sich für einen Weg entschiedenhaben, steht nicht mehr die Navigation im Vor-dergrund, sondern eine Auswahl von Produk-ten. Auch wenn hier eigentlich Listen verschie-dener Titel am wichtigsten sind, ist bereits einBuchcover abgebildet, da Bilder einen höherenKaufreiz auslösen als Texte. Generell bleibt dieAuswahl hier noch recht groß (Abb. 6).

Wenn Sie jetzt ein Buch näher betrachtenmöchten, ändern sich die Navigation und derAufbau der Seite. Jetzt steht optisch das Buchim Vordergrund. Gleich danach in der Rangfol-ge der Klickelemente folgt der Button In den

Einkaufswagen, dann die Themennavigation

G Abbildung 6Stöbern

G Abbildung 7Informieren

Abbildung 8 E

Der Einkaufswagen

..


Wir entschließen uns, den Kaufprozess fort-zusetzen und kommen zur ersten Bestellseite.Plötzlich verschwindet das Hauptmenü mit-samt der Suchfunktion, denn ab jetzt ist allesdarauf ausgerichtet, die Bestellung ungestörtfortzusetzen. Wer noch Sicherheitsbedenkenhat, kann auf den entsprechenden Link gehen,alle anderen erfahren, dass sie soeben beiSchritt 1 von insgesamt 7 angelangt sind undnach Eingabe der E-Mail-Adresse nur noch aufWeiter klicken können (Abb. 9).

Die nächsten Zwischenschritte folgen alledemselben Schema: Außer den jeweiligenWahlmöglichkeiten (hier der Versandart) ist dieNavigation auf den Knopf Weiter reduziert.Ein Zurück oder andere Wahlmöglichkeiten,die vom Kauf ablenken könnten, sind hiernicht mehr vorgesehen.

Nachdem alle erforderlichen Daten abge-fragt wurden und die Bestellung bestätigt wur-de, taucht plötzlich das Hauptmenü wiederauf, auch wenn ich auf dieser Seite hauptsäch-lich dazu animiert werde, »1-Click«-Besteller zuwerden (Abb. 11).

G Abbildung 9Bestellen

G Abbildung 10Versandart

Abbildung 11 E

Nach dem abgeschlossenenKauf stehen wieder alle Mög-lichkeiten der Navigation zur

Verfügung.

..


Hat man sich für einen Rechner entschie-den, gilt es grundsätzlich zwischen mehrerenKonfigurationen auszuwählen oder ein vorge-fertigtes System zu wählen (Abb. 13). DieserZwischenschritt ist wichtig, um unerfahrenenKäufern das Gefühl zu geben, sie müsstennichts von Technik oder Konfigurationen ver-stehen, um trotzdem einen hervorragendenRechner kaufen zu können. Auch hier störenkeine weiteren Sonderangebote oder Zubehör-teile den Auswahlprozess. Die drei Buttons fürAuswahl und Konfiguration sind deutlich diewichtigsten und auffälligsten Navigations-elemente.

Von Apple lernen?

Die Hersteller der schönsten Computer derWelt haben auch bei der Gestaltung ihresShops darauf geachtet, dem neuen »translu-zenten« (lichtdurchlässigen) Apple-Look ge-recht zu werden. Der Shop ist komplett in dieWebsite integriert und demnach identisch wiediese gestaltet (www.store.apple.com).

Auf der ersten Seite fällt bereits die Philoso-phie des Shops ins Auge: Alles ist so einfachwie nur möglich dargestellt, und der Nutzerbekommt ganz klare Handlungsanweisungen,im Fall der Einstiegsseite heißt diese, sich einenRechnertyp auszusuchen. Die Produktbildersind extrem ansprechend fotografiert und wir-ken – den Preisen entsprechend – hochwertig.

Abbildung 12 E

Der Apple-Store Deutschland

..


Wir haben uns dafür entschieden, die Aus-stattungsmerkmale selbst zu konfigurieren,und landen auf der entsprechenden Seite(Abb. 14). Leider zeigt sich hier, dass viele Teileeinfach von der US-Site übernommen und an-scheinend nicht übersetzt wurden (Memory,Hard Drive). Hervorragend sind die Abbildun-gen der Ausstattungsmerkmale, so kann auchder Unerfahrene genau sehen, was er kauft. Inden Drop-down-Menüs sind übrigens auch diejeweiligen Aufpreise angegeben, sodass einInformationsschritt und damit mindestens einKlick entfällt.

G Abbildung 13Es geht immer nocheinfacher.

Abbildung 14 E

Der Käufer sieht genau,was er auswählt.

G Abbildung 15Schade, Apple: eine englische Be-schreibung und fehlende Navigation

Wer unsicher ist, was hinter einer Kompo-nente steckt, kann direkt neben dieser Kompo-nente weitere Informationen anfordern. Leiderführt uns dieser Klick ins absolute Desaster:

Wir landen zwar auf der gewünschten Seitemit einer Beschreibung der gewählten Kompo-nente, doch ist diese in englischer Spracheverfasst (Abb. 15). Darüber hinaus gibt es keineMöglichkeit, zurückzukommen. Der Käuferwird gezwungen, dies mit der Taste Back sei-nes Browsers zu machen. Viele unerfahreneNutzer wählen diese nicht und werden wahr-scheinlich auf Store in der Hauptnavigation

..


klicken: Weg sind alle getroffenen Entschei-dungen und vielleicht somit auch ein Kunde.

Sofern der Kunde seinen Weg zurück zurbegonnenen Bestellung gefunden hat, kann erentweder weitere Artikel hinzufügen oder aberdie Bestellung fortsetzen. In allen weiterenSchritten hat er grundsätzlich die volle Trans-

parenz bei bestellten Waren und dem End-preis. Das hervorragend gestaltete Einkaufs-erlebnis wird jedoch auch auf den folgendenSeiten getrübt durch fehlende Übersetzungen,englische Texte oder Buttons und eine teilwei-se miserable Programmierung der Seiten.Schade, Apple.

Abbildung 16 E

Das Sprachgewirr stört dieAufgeräumtheit.

..


..


Gestaltung von e-Finance-WebsitesVon Schlipsträgern lernen?

Lange haben sie gebraucht, die Banken und Versiche-rungen, bevor sie sich ins Netz gewagt haben. Doch alsklar wurde, dass das WWW nicht nur aus Spieleseitenfür Jugendliche besteht, sondern eine durchaus sinn-volle Ergänzung der bestehenden Kommunikations- undVertriebskanäle sein kann, drängten sie alle ins Web.Heute beschäftigt die Gestaltung von Portalen und Sitesfür Finanzdienstleister unzählige Webdesigner und Pro-grammierer.

heit oft zu besonders unschönen Blüten desWebdesigns.

Beim Versuch, eine reale Filiale dreidimen-sional nachzubilden, bleiben leider häufig alleGrundregeln eines guten Webdesigns wieSchnelligkeit oder Modularität auf der Strecke.Heute finden sich diese »virtuellen Filialen«dankenswerter Weise jedoch immer seltener.Stattdessen sind es gerade die Finanzdienst-leister, getrieben von den Wünschen der Kun-den, die nun schnelle, performante und nut-zenorientierte Sites erstellen lassen.

AnforderungenWelche Anforderungen werden an die transak-tionslastigen Websites von Finanzdienstleis-tern gestellt?E Ständige ErreichbarkeitStändige ErreichbarkeitStändige ErreichbarkeitStändige ErreichbarkeitStändige Erreichbarkeit

Die Kassenstunde hat schon lange ausge-dient. Transaktionssites müssen dem Kun-den permanent zur Verfügung stehen.365-7-24.

Was ist anders bei E-Finance?

In wenig anderen Branchen spielen Ver-

trauen und Sicherheit eine so große Rolle wiebei Finanzdienstleistern. Bei der Wahl einerHausfarbe fällt nicht von ungefähr die Ent-scheidung recht häufig auf Blau. In den letztenJahren hat sich der Markt jedoch verändert,außer den klassischen Werten wie Sicherheit,Vertrauen und Seriosität haben durch das Auf-kommen der Direkt-Banken auch Technologie-führerschaft, Schnelligkeit oder Freundlichkeitals Werte an Boden gewonnen.

Trotz aller Entwicklungen: Es ist eine schwie-rige Aufgabe, die Website für einen Finanz-dienstleister zu gestalten. Noch immer spuktder Begriff der »virtuellen Filiale« durch dieKöpfe der Banker, eine Hilfsumschreibung füreine nicht unproblematische Entwicklung. Da-hinter steht die Annahme, der Kunde – die Ge-staltung seiner Filiale gewöhnt – braucht auchin der virtuellen Welt die Bekanntheit einesrealen Raumes. Dies führte in der Vergangen-

..

183Gestaltung von e-Finance-Websites

E InteraktivitätInteraktivitätInteraktivitätInteraktivitätInteraktivitätKaum ein Geschäft ist so individuell wieVerwaltung, Sicherung und Aufbau einesVermögens. Egal ob der Abschluss einerRisikolebensversicherung oder der Online-Aktienhandel gewünscht ist, die wirklichwichtigen Informationen sollten nicht inForm von Texten, Diagrammen oder Tabel-len vorliegen, sondern als interaktive Tools.So bekommt der Kunde nie das Gefühl, sichin eine Tabelle einordnen zu müssen, son-dern sieht sich »individuell« betreut.

E EchtzeitoperationenEchtzeitoperationenEchtzeitoperationenEchtzeitoperationenEchtzeitoperationenVor allem die technische Umgebung muss inder Lage sein, Transaktionen sofort auszu-führen und sofortiges Feedback mit mini-malen Ladezeiten zu geben.

E Filterung von InformationenFilterung von InformationenFilterung von InformationenFilterung von InformationenFilterung von InformationenBei der Vielzahl an Produkt-, Rechts- undMarktinformationen wäre es ein Unding,den Kunden suchen zu lassen. Eine perso-nalisierbare Umgebung wird für die Finanz-sites der nahen Zukunft unerläßlich sein.Dabei spielt die Gestaltung unterschiedli-cher Bereiche für differenzierte Zielgruppeneine große Rolle. Welche Informationen inwelcher Form braucht der Besucher, umKunde zu werden, der bestehende Kunde,um als Online-Broker gewonnen zu werden,usw.? Diese Fragen müssen sich alle Betei-ligten stellen, vor allem jedoch die Designer,da Interfaces extrem modular aufgebautsein müssen, um alle Zielgruppen anspre-chen zu können.

E Ortsunabhängige ErreichbarkeitOrtsunabhängige ErreichbarkeitOrtsunabhängige ErreichbarkeitOrtsunabhängige ErreichbarkeitOrtsunabhängige Erreichbarkeitbedeutet mittlerweile nicht mehr nur Inter-net und Telefon, sondern auch exotische In-terfaces wie WAP oder PalmOS. Die großeKunst besteht bei Letzteren darin, auf klein-stem Raum und zweifarbigen Displays so-

wohl Informationen zu gestalten, als auchdem Corporate Design des Unternehmensgerecht zu werden.

E Selbstlernende SystemeSelbstlernende SystemeSelbstlernende SystemeSelbstlernende SystemeSelbstlernende Systemeerkennen den Nutzer und lernen mit jedemBesuch mehr über seine Bedürfnisse undVorlieben. Bei derartigen Websites kannvon Screendesign im eigentlichen Sinnenicht mehr gesprochen werden. Vielmehrmüssen Elemente gestaltet werden, die mit-tels Filtern in Module eingepasst werden,die wiederum zusammen mit anderen Mo-dulen eine Seite bilden. Webgestalter habenhier eine zentrale und immer weitreichen-dere Rolle, die sich noch am besten mit derdes Regisseurs vergleichen lässt.

Personalisierung auf allenEbenen?

Für die meisten Informationen auf Websitesvon Finanzdienstleistern interessieren sich dieNutzer nur situationsgebunden. So sucht mannach Konditionen nur dann, wenn man Kundewerden möchte oder sich Rahmenbedingun-gen ändern. Die am häufigsten benötigten In-formationen betreffen sowieso nur das eigenePortfolio und damit verbundene Produkte.Dieser Tatsache tragen viele Finanzdienstleisterin den USA und einige in Deutschland Rech-nung: Eine personalisierte Version der Sitesteht im Vordergrund, der Zugang für alle hin-gegen bleibt streng marketingorientiert.

Die Deutsche Bank zeigt in ihrem Bereich»Private Banking« jetzt schon, in welche Rich-tung es gehen wird. Der eingeloggte Kundekann sich (inhaltlich) seine eigene Homepagezusammenstellen und die Informationen überseine Konten und Depots einstellen, die er

..


produziert wird, sondern leere »Hüllen«(Templates) gestaltet werden müssen, die dannvon einer Datenbank mit einzelnen Modulenund Elementen bestückt werden. Der Vorteildieser Vorgehensweise liegt darin, dass ein-zelne Module auch in einem ganz anderenKontext eingesetzt werden können. In diedeutsche Version von »Mein Yahoo« könnenKontoinformationen und Kurslisten des eige-nen Deutsche-Bank-Kontos integriert werden,ohne dabei auch nur ein Mal auf die Websiteder Bank zu gehen (Abb. 4).

Es zeigt sich eine generelle Tendenz vonWebsites, komplette Modularität von den Ge-staltern zu fordern, die sich als Folge intensivmit allen Inhalten auseinander setzen müssen,um einen Überblick über alle Möglichkeitenund Wahrscheinlichkeiten zu erhalten.

.

H Abbildung 1Deutsche Bank Private Banking, allgemeiner Zugang

G Abbildung 2Deutsche Bank Private Banking, »Private Home«

permanent nutzt. Darüber hinaus werden auchNachrichtenhäppchen und exklusive Analysendargestellt, auf die Nichtkunden keinen Zugriffhaben (Abb. 3).

Die persönliche Homepage wird im Finanz-bereich sehr schnell den allgemeinen Zugangmit personalisiertem Transaktionsbereich er-setzt haben, da sowohl die angebotenen Pro-dukte als auch Zusatzservices wie WAP-Zu-gang, SMS-Benachrichtigungen über bestimmteAktienkurse oder Informationsdienste über be-stimmte Märkte mittlerweile so komplex ge-worden sind, dass sich Kunden nur dann zu-rechtfinden, wenn alles herausgefiltert wird,was sie in ihrer momentanen Situation nichtbenötigen.

Für Webdesigner hat diese Vorgehensweisenatürlich weitreichende Konsequenzen, daauch hier wieder keine einzige HTML-Seite

.


Applikationsdesign

Die wichtigste Anwendung fast aller Finanz-Websites sind Applikationen zur Datenabfrageund Transaktion. Diese stellen besondere An-forderungen an die Gestaltung:E Höchste Modularität einzelner Element-

typenE Schnellste ProzesseE Plattformübergreifende Gestaltungsvor-

gaben für HTML, JAVA, WAP etc.E Logische und leicht verständliche lineare

AbläufeE Einsatz von Feedback-DarstellungenE Intuitiver Einsatz von Hilfesystemen

ModularAuf der Website einer Online-Bank finden sichzum Teil Hunderte von interaktiven Anwen-dungen, diese bestehen aus Listen, Buttons,Eingabefeldern oder Drop-down-Menüs. Da-

.

G Abbildung 3Einstellungen des »Private Home« verändern

H Abbildung 4Mein Yahoo mit Ansicht der freigeschalteten Konten

mit nicht jede dieser Anwendungen immerneu gestaltet werden muss, ist es sinnvoll, sichein System zu überlegen, dass für alle gilt, eine»Masterapplikation« also. Bestimmte Modulewie die Abfrage von Adressdaten oder Pass-wörtern sollten dabei immer gleich bleiben,denn die Bequemlichkeit des Nutzers steht imVordergrund. Auch die Ausgabe von Datensollte wenn möglich so gestaltet werden, dassdie wichtigsten Informationen auf den erstenBlick ersichtlich sind und Eingaben jederzeitgeändert werden können.

SchnelligkeitSowohl die Programmierung als auch die Ge-staltung einer Applikation haben entscheiden-den Einfluss darauf, wie schnell diese ein ge-wünschtes Ergebnis liefert. Dabei zählt jedesBite. Sofern man also auf den Einsatz von Bil-

.


dern, auch selbst gestalteten Buttons nicht ver-zichten kann, ist es sowohl eine Selbstver-ständlichkeit, die gleichen Bilder immer wiederzu verwenden (da sie dann im Zwischenspei-cher des Browsers abgelegt wurden), als aucheine maximale Komprimierung zu erzielen.

PlattformübergreifendIn Zukunft wird es deutlich wichtiger als heutewerden, Applikationen so zu gestalten, dassder Nutzer sie auf verschiedenen Plattformenwieder erkennt und auf dem PalmPilot genau-so leicht verwenden kann wie im Browser(Abb. 5). Hier kann man von den GUI-Desi-gnern der Softwarehäuser lernen: Diese erstel-len jedes Element und jede Oberfläche vonAnfang an in verschiedenen Versionen. Fürkleine Schwarzweißbildschirme ebenso wie fürsolche mit höchster Farbqualität.

Vor allem Java ist bislang geeignet, umplattformübergreifende und sichere Anwen-dungen zu erstellen. Leider sind Java-Applika-tionen nicht immer farbecht, da sie bei einigenFarbtönen Probleme mit der HTML-Palette ha-ben. Soll also beispielsweise eine Applikationfarblich exakt in den Hintergrund einer HTML-

Seite passen, lohnt es sich immer, ein Bild-schirmfoto der fertigen Seite zu machen unddie Farbwerte nochmals genauestens in einemBildbearbeitungsprogramm zu untersuchen.

LinearWas bei der Gestaltung von Websites eigent-lich verpönt ist, wird für viele interaktive An-wendungen unbedingt notwendig: Ein linearerAufbau, der es ermöglicht, auf irrelevante In-formationen zu verzichten und den Nutzer sodurch komplexe Abfragen zu führen.

Ein Beispiel: In einem Formular zur Bestel-lung von Informationsmaterial für verschiede-ne Versicherungsarten kann auf einer Seite an-gegeben werden, welche Informationen denNutzer interessieren und in welchen Formatenihm diese zukommen sollen. In einigen Fällenwird der Nutzer Informationen auswählen, diein einem bestimmten Format nicht vorliegen.Ärgerlich. Durch eine sinnvolle Aufsplittung inzwei Phasen könnten in einem zweiten Schrittnur die Formate angeboten werden, die für dieAuswahl auch wirklich existieren.

Anwendungen, die lineare Strukturen erfor-dern, kann man sehr gut mit Lernprogrammen

G Abbildung 5Banking-Applikation für das PalmOS

..


vergleichen. Es ist grundsätzlich angenehm zuwissen, wo man sich innerhalb der Applikationbefindet. Informationen wie »Schritt drei vonzehn« gehören deshalb zum guten Ton. Es wirdebenfalls als angenehm empfunden, am Endenoch einmal alle Eingaben kontrollieren undgegebenenfalls editieren zu können, dann al-lerdings auf einer Seite.

FeedbackGenerell muss jede Aktion des Nutzers durcheine (sichtbare) Reaktion der Site belohnt wer-den. Während eine komplexe Berechnung imHintergrund läuft, sollte der Nutzer mindes-tens erfahren, dass gerade etwas passiert.Wenn in einem Formular vom Nutzer das Aus-füllen eines Feldes vergessen wurde, ist es

schön, wenn dieses Feld auffällig markiertwird. Wenn der Nutzer verschiedene Doku-mente zum Download wählt, könnte die Ge-samtgröße der ausgewählten Daten automa-tisch aktualisiert werden. Die Applikation gibtdem Nutzer also eine wichtige Rückmeldungüber den Stand der Interaktion und lässt ihn ankeiner Stelle alleine.

HilfeKennen Sie das? Sie befinden sich auf derWebsite Ihres Online-Brokers, haben sich mitHilfe eines hervorragenden Werkzeuges inter-essante Wertpapiere ausgewählt, landen inStufe vier von vier des Kaufvorganges und wis-sen plötzlich nicht, was der Unterschied zwi-schen »Put« und »Call« sein soll. Sie haben bei

Abbildung 6 E

Einfaches, aber geniales direktesFeedback: Sowohl das Datum in

der schwarzen Leiste als auch derWert im weißen Kasten verändern

sich mit der aktuellen Maus-position.

..


den meisten Sites zwei Möglichkeiten: Entwe-der Sie gehen alle Stufen zurück zur Erklä-rungsseite und verlieren Ihre bereits angegebe-nen Informationen, oder aber Sie starten ineinem neuen Browserfenster das Ganze vonvorne. Schade. Angenehmer wäre es in jedemFall, Sie könnten einfach auf ein kleines Frage-zeichen neben der Option Put klicken undwürden dann in einem neuen Browserfenstereinen Hilfetext angezeigt bekommen.

Best Practice

In den Abb. 7 – 10 finden Sie einige Beispielegelungener Anwendungen oder Sites aus demBereich der Finanzdienstleister.

HilfestellungBei allen Applikationen und Formularen sollteunbedingt Hilfestellung gegeben werden:E Zum richtigen Ausfüllen des FormularsE Zu branchenspezifischen oder technischen

BegriffenE Zur Weiterverwertung der DatenE Zur Sicherheit bei Speicherung und Übertra-

gung

Abbildung 7 E

Map of the Market: Jedes Quadratentspricht einer Firma, Grün be-

deutet gestiegener Aktienkurs, Rotgefallener Kurs; je heller die Farbe,

desto größer die Veränderung.

..


F Abbildung 8Der 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 10Aufgeräumt und nutzerfreundlich:die Dresdner Bank

..


Portal-SitesDie Tore zur großen WWW-Welt

Eines der großen Schlagwörter ist das Portal, dasden Weg zu Millionen von Nutzern und ganz vielGeld eröffnet. Ist dem wirklich so?

damit die eigens zu installierende Software ge-meint ist und nicht deren Website. Sites, dieanfänglich nur als Suchmaschinen oder Web-verzeichnisse konzipiert waren, wie zum Bei-spiel Lycos oder Yahoo!, integrieren immermehr Funktionalitäten, sodass man kaum nochandere Sites benötigt, um sich Inhalte und Ser-vices aus dem Netz zu ziehen.

Alta VistaAlta VistaAlta VistaAlta VistaAlta Vista bietet neben unterschiedlichenSuchmaschinen für Text, Bild, Audio- und Vi-deo-Files auch ein Web-Directory, in dem Sitesbis ins kleinste Detail kategorisiert und katalo-gisiert sind. Außerdem gibt es ein Überset-zungstool, Chat-Räume, persönliche E-Mail-Adressen, Jobangebote, personalisierbareHomepages, Message Boards, Horoskope,Nachrichten, Gewinnspiele, Shopping-Ange-bote, Auktionen und vieles mehr. Das Problemwird schnell klar: Unmengen von Informationmöglichst schnell und jederzeit editierbar anden User zu bringen. Riesige Datenbanken,Redaktionstools und Programme liegen hinterdiesen Sites, sodass für Interface- und Screen-design anscheinend kaum noch Zeit bleibt.

Die Seiten, und das ist fast allen Portals die-ser Art gemein, sind komplett datenbank-

Das Wort Portal kommt aus dem Lateini-

schen und bedeutet so viel wie Vorhalle,prunkvolles Tor, Pforte, großer Eingang (DudenBand 5, 1997) und bezeichnet im übertragenenSinn eine Site, die Zugang für viele andere Sitesbietet, die in inhaltlichem Zusammenhang ste-hen. Ein Portal versucht, von möglichst vielenNutzern als Startseite ins WWW benutzt zuwerden. Die Zuordnung zu einem bestimmtenThema sowie das Angebot von verschiedenenServices wie E-Mailadressen, Suchmaschinen,Chat-Foren oder Newslettern ist dazu ange-legt, die User zu binden und deren Grundbe-dürfnisse im Netz zu erfüllen. Es soll eineCommunityCommunityCommunityCommunityCommunity geschaffen werden, die sich mitClaims wie »Do you yahoo?« identifiziert undsomit möglichst viel Traffic auf der Site gene-riert. Die Finanzierung erfolgt meistens überdie Funktion als Werbeträger.

Die üblichen Verdächtigen

Jeder User benutzt fast täglich ein Portal. Diebekanntesten sind Suchmaschinen oder On-line-Dienste, das größte ist wohl AOL, wobei

..

191Portal-Sites

basiert und bestehen nur aus Systemtext undSystemelementen. Darüber hinaus wird ver-sucht, Massen an Information und Service aufdie erste Seite zu bringen, um möglichst vieleUser anzusprechen. Die Gefahr ist, dass mandie für sich relevante Information in dieserMasse nicht mehr findet.

Die verwendeten Datenbanken lassen beimLayout sehr wenig Spielraum, wodurch sich dieeinzelnen Portale mit sowieso fast ähnlichenInhalten immer mehr angleichen. Kommt einneues hinzu, orientiert sich dies gerne an be-stehenden erfolgreichen Portals (siehe auchKapitel 19, »E-Branding«).

Personalisierbarkeit

Um diesem Fiasko zu entgehen, nutzt maneine weitere Qualität von datenbankbasiertenWebsites, die Personalisierbarkeit. Jeder Userhat die Möglichkeit, sich ein eigenes Profil an-zulegen, um jedes Mal, wenn er auf die Home-

page kommt, Inhalte so angezeigt zu bekom-men, wie er sich das vorstellt.

Die Auswahl an Optionen ist meist sehrgroß. Zunächst geht es um die Inhalte: WelcheArt von Nachrichten will ich angezeigt bekom-men, welche Genres interessieren mich sonstnoch, welcher Wetterbericht ist für mich rele-vant? Mein Horoskop kann ich mir aus ver-schiedenen Quellen auswählen, und auch dieServices des Portals sind nach Belieben zusam-menzustellen.Der nächste Punkt ist die Anordnung eben die-ser Informationen auf dem Screen. Der Userkann so die Einheiten reduzieren und das fürihn übersichtlichste Layout verwenden. Zu gu-ter Letzt kann man der Site durch Auswahl derFarben und deren Zusammenstellung nocheine sehr persönliche Note geben.

Eine so selbst gebastelte Homepage ist na-türlich sehr viel mehr dazu geeignet, als Start-plattform fürs Internet zu fungieren. Doch mandarf sich nicht darüber hinwegtäuschen lassen,dass man so nicht wirklich seine ganz individu-

F Abbildung 1Alta Vista ist ein der typischerVertreter von Portalen.

..


Zeit gegeben sind. Man legt so genannteTemplatesTemplatesTemplatesTemplatesTemplates an, die vom kompletten Seiten-layout bis hin zu verschiedenen Kombinations-möglichkeiten Text/Bild alle Parameter genaufestlegen.

E-Commerce-, Knowledge- undCommunity-Portals

Neben den Portals, die sich über Jahre zu sol-chen gemausert haben, versuchen immer mehrUnternehmen mit ihrem Auftritt, ein Portal zuschaffen, das die gesamte Kompetenz ihresFachbereichs bündelt und auf der Site abbil-det. Super-RTL erschafft das Kinder-Portal, dieDeutsche Bank das Finanz-Portal, das MagazinVivi@n will das Frauen-Portal werden und soweiter.

G Abbildung 2 E

Yahoo! und My Yahoo!, die Standardsite undeine personalisierte Variante

.

elle Seite erstellt, sondern aus einem festste-henden Repertoire konfiguriert und eine von xMöglichkeiten verwendet. Außerdem ist fürden Betreiber des Portals nichts spannender alsdie User-Daten, die man beim Auswählen ganzfreiwillig preisgibt. Online-Werbung kann sozum Beispiel präziser auf die einzelne persona-lisierte Site gespielt werden als bei allen ande-ren Medien.

Die Gestaltungsmöglichkeiten einer Site mitPersonalisierungsoption sind eher begrenztund bedürfen langer Planung und Konzeption.Es muss ganz genau festgelegt werden, welcheElemente veränderbar sind und welche nicht,welche Ansprüche verschiedene Gruppen andie Personalisierung haben, inwiefern diese mitdem Datenbankmodell vereinbar sind und wieman den Screen so strukturiert, dass Infor-mationsaufbau und Navigierbarkeit zu jeder

.

193Portal-Sites

Dabei nehmen einige Firmen durchaus inKauf, dass Inhalte nicht durch das eigene Un-ternehmen oder Kooperationspartner erbrachtwerden können, und verlinken ganz bewusstauf die Konkurrenz in der Hoffnung, dass siesich dadurch selbst als Vermittler noch stärkeretablieren können.

Es gibt einige Elemente, die diese Portalsauszeichnen. Sie widmen sich wie gesagt einerspeziellen Zielgruppe, Thematik oder einemService und versuchen ihre Kompetenz aufdiesem Gebiet überzeugend einzubringen. Au-ßerdem sind sie sehr interaktionsorientiert undam Feedback der User interessiert. Das zeigenForen, unterschiedliche Kontaktmöglichkeiten,Mailing-Listen, Newsletter, Magazinbereicheund freie E-Mail-Adressen. Da die Zielgruppen

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

.

und das Anliegen bei diesen Portals schon et-was spezifischer sind, ist das Design und vorallem das Branding deutlich klarer als bei obi-gen Portalen.

Entfernt sich das Ziel des Portals weiter vonden Netzkernthemen wie Technologie oder In-formationsbeschaffung und wird offensichtlichkommerzieller, zeigt sich das auch in der Ge-staltung. Man beginnt mit Farben und Bildernzu arbeiten, wird in der User-Ansprache deut-lich emotionaler und versucht auch einen ganzklaren Fokus zu setzen, denn hier wird derUser klarer gelenkt und in eine bestimmteRichtung geleitet, nämlich zum Kaufabschluss.Die Absender werden deutlicher, man versuchtsich in Layout und Ansprache zu differenzie-ren. Inhalte werden inszeniert.

.


schnell zu mangelhaften Kompromissen, undCommunities, die nicht von Anfang an gehegtund gepflegt werden, gehen schnell wiederein.

Dazu kommt, dass ein großer Reiz des Net-zes das Erforschen und das Surfen ist. Dem An-spruch, alles auf einer Site zu vereinigen, mussman also gar nicht unbedingt nachkommen.Ein Modell ist hier zum Beispiel der Netzpilot,der wie eine Art Linkliste durchs Netz führtund alle möglichen Themen abbildet.

Setzt man also die Ansprüche nicht von An-fang an zu hoch, definiert man Portal als etwaskleinere, aber feine Tür zum Internet, so kannman die Grundidee für bestimmte Herausfor-derungen durchaus als optimal bezeichnen.

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

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

.

Portals, das optimale Netz-format?

Die Grundidee des Portal-Gedankens istdurchaus überzeugend. Zielgruppen genau zudefinieren und komplett abzuschöpfen, das istsehr verlockend und Grundlage komplexerBusiness-ModelleBusiness-ModelleBusiness-ModelleBusiness-ModelleBusiness-Modelle. Viele Portale können dieserHerausforderung aber oft nicht gerecht wer-den. Die technischen Ansprüche sind sehrhoch, die Inhalte müssen permanent gepflegtund auf neuestem Stand gehalten werden, dieUser müssen über alle Medien akquiriert wer-den. Hohe Initial- und laufende Kosten führen

.

195Portal-Sites

Willshop.com, die Idee der Zukunft?Eine sehr spannende Geschäftsidee zumThema E-Commerce-Portale kommt aus Japan.Das Portal selbst als virtuelle Marke einzufüh-ren und die Produkte maßgeschneidert undgebrandet in Kooperation mit den besten Her-stellern zu vertreiben, ist der Gedanke vonWILL. Die Homepage mit dem bezeichnendenClaim »what WILL be« zeigt eine Vielzahl vonProdukten vom Deo über den Computer biszur Abenteuerreise, die alle mit dem orangenQuadrat von WILL versehen sind. Logo, Web-site, Produkte, alles passt zusammen undspricht eine Sprache. Die Kooperation mitnamhaften Unternehmen wie Toyota, Asahioder Panasonic garantieren höchste Qualität

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

Abbildung 6 E

Konsequente Durchgestaltung der Site: das WILL-Pro-dukt, das den User glücklich macht!

.

und fügen WILL ein in eine Reihe kompetenterMarken. Dazu kommt, dass das Corporate De-sign von WILL sehr reduziert und ansprechendist und die Website entsprechend gestaltetwurde.

Eine virtuelle Marke, ohne Geschichte undohne wirkliche Kompetenzen, schafft es überihr Portal also, ein Lebensgefühl und damit Pro-dukte zu verkaufen. Die Marke und das Portalsind fast alles, was WILL ausmacht, alle Pro-dukte werden zugeliefert und auf WILL um-gestaltet. Mittelpunkt ist hier nicht mehr derUser, sondern die Produkte selbst. Wenn mansich überlegt, wie wichtig Brands für das Kon-sumverhalten sind, ist das ein Weg, der sicherbald Nachahmer auch im Westen finden wird.

.


Datenbankbasierte SitesDesign versus Content

Immer mehr Websites werden mit Hilfe vonDatenbanken erstellt. Das bietet viele Vorteile,aber ist es notwendig, dass es jeder sofortsehen kann?

Wann lohnen sich datenbank-basierte Websites?

Die Entscheidung, ob man mit Datenbank undRedaktionssystem arbeiten möchte, empfiehltsich ganz am Anfang, nach den ersten strategi-schen Gesprächen bei der Erstellung einerWebsite. Datenbanken sollten in Betracht ge-zogen werden, wenn1. bereits große Produkt-, Event- oder Perso-Produkt-, Event- oder Perso-Produkt-, Event- oder Perso-Produkt-, Event- oder Perso-Produkt-, Event- oder Perso-

nendatenbankennendatenbankennendatenbankennendatenbankennendatenbanken vorliegen, die in den Auf-tritt integriert werden sollen. Die Expertendes Unternehmens und der Agentur müssensich dazu frühzeitig zusammensetzen, umdie Datenmodelle und Datenbanken sowiederen Kompatibilität abzugleichen.

2. initial und regelmäßig große Mengen anContent eingepflegt werden müssen oderdie Site ständig aktualisiert werden muss.Oft hat es Sinn, für diese Aufgaben einTeam beim Kunden zusammenzustellen,da dort die Inhalte sehr viel schneller ab-gestimmt und zugeordnet werden können.Dazu muss natürlich mit einfachsten Mit-teln auf den Content zugegriffen werden,also am besten mit einem RedaktionstoolRedaktionstoolRedaktionstoolRedaktionstoolRedaktionstool.

Einfache HTML-Seiten und Serverstruktu-ren reichen für die Anforderungen vieler Siteslängst nicht mehr aus. Webpages müssen in-nerhalb kürzester Zeit und mit möglichst wenigAufwand updated, erweitert oder verbessertwerden. Dazu kommt, dass diese Pflege ohnegroßes HTML-Know-how vor sich gehen sollund man nicht permanent den HTML-Codeverändern muss.

Die Lösung dafür sind datenbankbasierteWebsites. Das Layout, die Inhalte, Texte, Bilderund Strukturen sind in einer Datenbank ab-gelegt, die mit der Site verbunden ist. Diesespeist Teilbereiche oder die komplette Site,und sobald ein Eintrag oder ein Objekt in derDatenbank geändert wird, ändert es sich auto-matisch auch auf der Website.

Die laufende PflegePflegePflegePflegePflege und die UpdatesUpdatesUpdatesUpdatesUpdates einerSite werden dadurch sehr günstig, da man mitwenig Mitarbeitern, die zudem nicht unbe-dingt auf HTML-Codierung spezialisiert seinmüssen, äußerst effektiv arbeiten kann. DieInitialkosten, das Planen und Aufsetzen desDatenbankmodells sind hingegen deutlich teu-rer als eine ganz normale Website. Doch auchhier gibt es konfigurierbare Fertiglösungen.

..

197Datenbankbasierte Sites

3. der Auftritt eines Unternehmens auf vieleBereicheBereicheBereicheBereicheBereiche oder internationale Niederlassun-Niederlassun-Niederlassun-Niederlassun-Niederlassun-gengengengengen des Unternehmens übertragen werdensoll, die Struktur des Auftritts aber gleichbleibt.

4. der Auftritt nach Fertigstellung komplettohne Agenturohne Agenturohne Agenturohne Agenturohne Agentur betreut werden soll.

5. neue Auftritte nach ähnlichem Musterschnell und kostengünstigschnell und kostengünstigschnell und kostengünstigschnell und kostengünstigschnell und kostengünstig realisiert werdensollen.

6. komplexe Such- und Kategorisierungsmo-Such- und Kategorisierungsmo-Such- und Kategorisierungsmo-Such- und Kategorisierungsmo-Such- und Kategorisierungsmo-delledelledelledelledelle aufgesetzt werden.

7. man einen E-Commerce-AuftrittE-Commerce-AuftrittE-Commerce-AuftrittE-Commerce-AuftrittE-Commerce-Auftritt plant (sie-he auch das Kapitel »E-Commerce«).

Unterschiede in Konzeption undGestaltung

Die Entscheidung für eine Datenbank oder einRedaktionssystem bedeutet allerdings aucheine vollkommen andere Herangehensweiseals bei herkömmlichen Websites, sowohl wasdie Technik anbelangt, aber auch bei Konzepti-on und Gestaltung.

Auf der technischen Seite müssen zunächstalle Anforderungen definiert und darauf basie-rend die am besten passende Datenbank aus-gewählt werden. Darauf folgt eine Festlegungdes Datenmodells, aller nötigen Parameter undEinträge.

Im Konzept wird festgelegt, welche Navi-gationsebenen editierbar sind und aus der Da-tenbank gepflegt werden und welche festste-hen und nur selten geändert werden. Es bietetsich bei normalen Websites an, die Haupt-navigation nicht editierbar zu gestalten, da sieaus Usability-Gründen nicht unbegrenzt flexi-bel sein sollte (nicht mehr als sechs bis achtHauptnavigationspunkte), außerdem sollte die

grobe Einteilung der Site doch so überdachtsein, dass man nicht nach Belieben immer wie-der alles hin und her schiebt. Bei gestaltetenSites ist es oft so, dass die oberste Navigations-ebene in »gebranntem« Text angelegt wird, derzwar auch in der Datenbank liegt, aber nur mitHilfe von Designern verändert werden kann.Neben der Navigation wird auch festgelegt,welche ModuleModuleModuleModuleModule es gibt, wie zum BeispielProduktdarstellung, E-Mail-Formulare oderAdresslisten, die genau in ihren Funktionali-täten beschrieben werden. Für Inhalte werdenLängen- und Tonalitätsvorgaben gemacht, da-mit die Site am Schluss trotz vieler Autoreneine Sprache spricht.

Auf dieses Konzept hin entwickeln die Ge-stalter einen Rahmen und so genannte Tem-Tem-Tem-Tem-Tem-platesplatesplatesplatesplates, das sind neutrale, partielle Layouts vonSeiten und Benutzerführung, die später beiAufruf der Seiten aus der Datenbank geholtund im Browser zusammengesetzt werden.Man definiert also, in welcher KombinationText und Bild auftauchen können, wie groß Bil-der sein müssen, damit sie jederzeit ausge-tauscht werden können, wie Listen, Formulareetc. aussehen und wie diese Templates mitein-ander kombiniert werden dürfen.

Das bedeutet auch, dass der große Rahmenum den Content im Grundlayout gestalterischeher neutral gehalten werden muss, um dannauf jeden beliebigen Content angepasst zuwerden oder, wie bei internationalen Seitenmit einzelnen Ländersites, eine »Shell« für alleContents zu bilden.

Die Benutzerführung muss dabei alle mögli-chen Navigationsmodelle und Hierarchien an-tizipierend festlegen, da später keine Eingriffemehr möglich sind. Jedes Element der Site(Framesets, Pages, Templates, Images, Text,Binärdaten) wird einzeln in der Datenbank ab-

..


gelegt und muss auch als solches veränderbarsein, ohne aus dem Kontext zu fallen.

Vor- und NachteileDie Entwicklungszeit für ein solches Projekt istbedeutend höher als die für eine HTML-basier-te Site, dafür lassen sich später unvergleichbarschneller komplexe Seiten erstellen und mitleicht zu editierendem Content füllen. Die Ge-staltung einer solchen Site bedarf großer Erfah-rung. Einerseits um ein solch komplexes Sys-tem zu entwickeln, andererseits aber auch, umTemplates so zu entwerfen, dass unterschiedli-

.

F Abbildung 1Ein typischer datenbankbasierter Auftritt, rein ausSystemelementen gestaltet und vom Interface herkaum nutzbar

Abbildung 2 E

Selbst bei diesem sehr emotionalen Thema hat mannicht versucht, die Benutzerführung visuell von der

Datenbank zu lösen.

che Seiten, die darauf zugreifen, auch unter-schiedlich aussehen und der User nur bedingtmerkt, dass er sich auf einer datenbankbasier-ten Website befindet.

Die meisten Sites in dieser Richtung bemü-hen sich dabei nicht sonderlich, auch aus ei-nem datenbankbasierten Auftritt ein Erlebnisfür den Nutzer zu schaffen und sich aus derMasse hervorzuheben. Man erkennt schnell anStandardgrafiken und Benutzerführungen, dieden Inhalten nicht immer ganz entsprechen,dass mit wenig Aufwand Inhalte auf die Daten-bank herunter gebrochen und nicht, was der

.


F Abbildung 3Der Auftritt für die Messe Frankfurt basiert komplett auf einerInformix-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.

..


bessere Weg wäre, die Datenbank and die In-halte angepasst wurden.

Schwierig ist es auch, von vornherein alleEventualitäten abzuschätzen und auch kom-plexe Datenmodelle einwandfrei zum Laufenzu bringen. Der Zeitraum der technischen Um-setzung ist bedeutend länger und »aufregen-der« als gewöhnlich.

Als Gestalter ist man bei der Arbeit sehr ein-geschränkt, umso schöner ist es, wenn es ei-nem gelingt, aus einer komplexen Datenbankoder einem langweiligen Redaktionssystem,mit dem sich Inhalte kaum gestalten lassen,eine Site zu entwerfen, die nichts mit demgängigen Datenbankdesign zu tun hat.

Allerdings ist man nie davor gefeit, dass derKunde nach Abnahme der Site damit macht,was er will, und grafische Vorgaben der Desi-gner einfach über den Haufen wirft. Es lohntsich also kurz vor der Übergabe der Site an denKunden, noch ein paar Screenshots zu ma-chen, um die Site in voller Pracht in Erinnerung

behalten zu können. Mittlerweile werden aberauch auf Unternehmensseite neben Redakteu-ren und Journalisten auch Designer im Online-Team beschäftigt, um die Site qualitativ hoch-wertig zu halten.

Redaktionssysteme

In ihrer Komplexität reichen Redaktionstoolsvon ganz einfachen Texteingabeseiten bis hinzu komplexen Datenbanken, die dem Redak-teur nicht nur erlauben, Bilder auszutauschen,sondern auch die Navigation zu verändernoder komplette Bereiche hinzuzufügen oderwegzunehmen.

Waren früher solche Systeme meist handge-strickt, so bedient man sich heute hauptsäch-lich schlüsselfertiger Lösungen, die innerhalbkürzester Zeit an die Erfordernisse der Siteangepasst werden. Wichtig bei solchen Toolsist, dass sie sehr einfach zu bedienen sind und

Abbildung 5 E

Beispiel für ein Redaktionstoolmittlerer Größe, das an jede

Website angepasst werden kann

..


am sinnvollsten auch über den Browser funk-tionieren, damit kein Sprung im Workflow ent-steht.

Die Barmer-Site wurde beispielsweise miteinem Java-basierten Tool erstellt und damitregelmäßig aktualisiert. Design, Text und Struk-tur sind dabei voneinander unabhängig. DiePrimärnavigation Service, Gesundheit und Die

Barmer sind als feststehend angelegt, die The-men dieser Bereiche können allerdings jeder-zeit erweitert oder verringert werden. Dazuwurde die Sekundärnavigation bewusst in Sys-temtext angelegt, sodass die Online-Redaktionder Barmer jederzeit einen Punkt hinzufügenoder wegnehmen kann. Allerdings sind dieSekundärthemen jeweils mit einem großen ge-stalteten Header im Content-Bereich gekenn-zeichnet, wie zum Beispiel »Reiserecht« und»Patientenrecht«. Kommt also ein neuer Be-

G Abbildung 6Die Barmer-Site in normaler Darstellung und darunter mitsichtbar gemachten Frames und Templates

.

griff hinzu, muss von einem Gestalter aucheine neue Bereichskennung erstellt werden.Die Tertiärnavigation jedoch ist komplett freierweiterbar, die Themen sind hier je nach Be-reich mit einheitlichen Icons gekennzeichnet,wie zum Beispiel einer Waage oder der Büsteder Nofretete.

Wichtiger bei der Gestaltung der Barmer istaber fast noch der Hintergrund. Um die ganzklare Aufteilung in Frames und damit dentechnischen Ansatz etwas in den Hintergrundtreten zu lassen, wurde zum einen mit farbigenHintergründen gearbeitet, die alle Frames zu-sammenhalten, zum anderen lenken rundeund spitze Grafiken und Formen von den har-ten Linien eines Frame-Konzepts ab und gebender Site einen sehr warmen und freundlichenLook.

.


MicrodevicesKleiner, schneller, besser ...

Die vielen Vorteile des Netzes werden dadurchgeschmälert, dass man dazu immer einen Rechner,einen Schreibtisch und eine Telefonsteckdosebenötigt. Lösen die Microdevices nun den Desktop-Computer ab?

Die kleinen Wunderwaffen

Es gibt mittlerweile eine Vielzahl von Geräten,die sich immer weiter verbreiten, nur um ganzschnell von noch kleineren und besseren abge-löst werden. Einige davon sind:E PDAs (Personal Digital Assistant),

Handhelds, OrganizerE Taschenrechner, DatenbanksystemeE MobiltelefoneE MP3-Player, Memory-Stick-PlayerE Gameboys, kleine Computer-GamesE Digitale Foto- und VideokamerasE DiktiergeräteE GPS-Geräte (Global Positioning System)Diese Liste erweitert sich ständig, besondersspannend wird es natürlich, wenn diese Geräteanfangen, untereinander zu kommunizieren.Natürlich sind das zum großen Teil noch Spie-lereien, und man kann sicher auch sehr gutohne leben. Die Entwicklung geht allerdingsganz klar in diese Richtung, und man sollteaufmerksam verfolgen, welche neuen Kommu-nikationskanäle sich dort auftun und wie mansie für seine Belange nutzen könnte.

Schon mit der Erfindung des Walkman von

Sony wurde klar, dass Mobilität bei elektroni-schen Geräten ein wichtiges Kriterium seinwird. Selbst wer kein Handy sein Eigen nennt,hat meistens Zuhause ein schnurloses Telefon,weil es Situationen gibt, in denen man beimTelefonieren eben nicht neben dem Nachtkäst-chen am Telefonanschluss knien will. Das Glei-che gilt für Computer. Laptops liegen hoch imKurs, Desktop-Rechner sind eine Alternative,aber kein zwingendes Muss mehr.

Hier knüpfen die so genannten Microde-vices an, also alle elektronischen Geräte, dieman leicht in einer Hand halten kann. Sie ver-fügen über alle notwendigen Funktionalitätenfür die Aufgaben, auf die sie ausgerichtet sind,und werden in absehbarer Zukunft sicher im-mer weiter miteinander verschmelzen. Des-halb kann man auch davon ausgehen, dass diegroßen Desktop-Rechner immer kleiner wer-den, irgendwann ganz verschwinden und mansich mit einigen wenigen Kompaktgeräten be-schäftigen wird.

..

203Microdevices

F Abbildung 1Die schärfsten Konkurrentenauf dem Markt: die HandheldsPalm VII und Visor

H Abbildung 2Unterschiedlichste Geräte vom GPS-System bishin zum Memory-Stick Walkman, und jedespasst in eine Hand.

..


WAP, das neue HTML?

Wireless Application Protocol ist ein neu ent-wickeltes Standardprotokoll speziell zur An-wendung bei Mobiltelefonen und anderenMicrodevices. Es beschreibt die Kommunikati-on mobiler Endgeräte untereinander sowie zufest installierten Endgeräten. Das soll unter an-derem den Internetzugang von mobilen De-vices, die mit einem Mikrobrowser ausgestat-tet sind, vereinfachen. Zu den Mitgliedern desWAP-Konsortiums, das den Standard be-schreibt und erweitert, zählen Firmen wieNokia, Ericsson, Sony, Philips und IBM.

In der Gestaltung ist man noch sehr einge-schränkt, WAP bietet aber die Möglichkeit, In-formationen sekundenschnell zu vermittelnund darzustellen. Die Darstellung auf klein-stem Raum mit keiner oder wenig Farben be-

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

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

RocketbookUnter www.rocketbook.com kann man nichtnur das Gerät erstehen, sondern sich auch alleerhältlichen Titel downloaden.

.

deutet natürlich neue Herausforderungen fürInformationsdesigner. Übersichtliche Darstel-lung, genügend Informationstiefe und dieKennzeichnung des Absenders sind nur einigeAufgaben, die in Zusammenhang mit den win-zigen Displays zu lösen sind.

Digitale Literatur, das Ende derBü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 18cmlässt sich jederzeit mit neuen Titeln von derRocketbook-Site oder anderen Buchhändlern,wie zum Beispiel Barnes and Noble, im Netz

Web.mit.eduUnter http://web.mit.edu findet man so ziem-lich jede Vision von technischen Entwicklun-gen, die man sich nur vorstellen kann.

.

205Microdevices

bespielen. Das E-Book fasst bis zu zehn Bü-cher, also 3200 Seiten, und man hat eine Aus-wahl von momentan 4500 Titeln bei Rocket-book selbst.

Neben dem Vorteil, dass man sich Neuer-scheinungen sofort nach Hause holen kann,bietet das Gerät natürlich alle Vorteile, dieelektronische Medien gegenüber Papier ha-ben. Man kann Texte markieren und indizie-ren, Bookmarks anlegen und Notizen hinzufü-gen, ein integriertes Wörterbuch nutzen undauf verschiedene Bücher zugreifen, die alle aufdem Gerät geladen sind.

Allerdings wird das E-Book normale Büchersicher nicht verdrängen. Wenn man das E-Bookerst einmal benutzt hat, wird klar, wie wichtigder haptische Effekt beim Lesen ist, ein Buchaufzuschlagen und durchzublättern, Papierund Druckart sagen manchmal mehr aus alsdas komplette Inhaltsverzeichnis. Ganz zuschweigen von der Lesefreundlichkeit haar-scharfer schwarzer Schrift auf weißem Papier.

Aber auch hier versucht E-Book Nachteileauszugleichen. Man kann Schriftgröße und -artjederzeit anpassen, das Format ist frei wählbarzwischen Hoch- und Querformat, und das Dis-

F Abbildung 5Das Rocket E-Book, vielleicht der Nachfolgerdes gedruckten Buches

play hat eine Auflösung von 106 dpi. Wennman also bedenkt, dass solche Entwicklungenerst in der Anfangsphase sind, so könntenelektronische Bücher durchaus Potenzial ha-ben, und sei es nur, um technische Grundlagenfür neue Microdevices zu legen.

Wearable Computers

Die logische Konsequenz aus der Entwick-lung der Microdevices ist eigentlich ganz klar:tragbare Computer, die so in unser Leben inte-griert sind, dass wir sie morgens ganz selbst-verständlich anziehen wie ein T-Shirt und siepermanent am Körper tragen. Ziel ist es, dieMinicomputer so auszurüsten, dass sie nurnoch durch körpereigene Energie versorgt wer-den, also vollkommen unabhängig von Strom-netz und Batterie funktionieren. IBM entwik-kelte zum Beispiel einen Gürtel mit dem manim Netz surfen sowie Texte diktieren und Do-kumente editieren kann. Wichtig ist es dabei,immer den funktionalen Aspekt im Auge zubehalten, aber auch den sozialen Kontext, obund wie man solche Geräte tragen kann.

..

.

Anhang


214 Glossar

224 Index

206 Anhang

207Anhang.

208 Anhang

Tipps und Tricks»FAQs«

Gesammelte Erfahrungen zum Planenund Gestalten von Websites. Schnellund übersichtlich.

2.2.2.2.2. Sind meine Zielgruppen denn überhauptSind meine Zielgruppen denn überhauptSind meine Zielgruppen denn überhauptSind meine Zielgruppen denn überhauptSind meine Zielgruppen denn überhauptschon da?schon da?schon da?schon da?schon da?Der User ist das wertvollste Gut im Netz.Recherchieren Sie bei allen Suchmaschinenmit Schlagworten, die ihr Angebot und dieZielgruppe umschreiben. Dann wissen Siezum einen, was es schon gibt, zum anderensehen Sie, ob die Zielgruppe überhauptschon im Netz ist.

3.3.3.3.3. Und was machen die anderen?Und was machen die anderen?Und was machen die anderen?Und was machen die anderen?Und was machen die anderen?Wenn Sie die Seiten der Wettbewerbergefunden haben, machen Sie einen Bench-mark in Form von Screenshots und analy-sieren Sie Inhalt, Aufbau, Design, Feed-backfunktionen und so weiter. Aus Fehlernlernt man am meisten!

4.4.4.4.4. Kann ich mich denn auf irgendetwas ver-Kann ich mich denn auf irgendetwas ver-Kann ich mich denn auf irgendetwas ver-Kann ich mich denn auf irgendetwas ver-Kann ich mich denn auf irgendetwas ver-lassen?lassen?lassen?lassen?lassen?Fordern Sie Studien an, die sich mit IhremThema beschäftigen. Die GfK-Gruppe bie-tet Studien mit Informationen aller Art zurNutzung der Neuen Medien an, online zufinden unter www.gfk.de. Von hervorra-gender Qualität sind auch die Studien vonForrester unter www.forrester.com. Undaktuelle Zahlen finden sich international

1.1.1.1.1. Warum soll ich ins Internet?Warum soll ich ins Internet?Warum soll ich ins Internet?Warum soll ich ins Internet?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 Pro-dukt oder Angebot gehe ins Netz?« Hierbietet sich nur an, was wirklich einen Mehr-wert bietet, sei es an Service, Informationoder Unterhaltung.»Für wen gehe ich ins Netz?«. Zielgruppenmüssen identifiziert und definiert werden.»Wie gehe ich ins Netz?« Nur eine Micro-site? Ein Flash-Film? E-Commerce?»Mit wem gehe ich ins Netz?« Macht manes ganz alleine, holt man sich eine Full-Ser-vice-Agentur oder einen externen Berater?Letzterer sollte wohl bei jeder Art von On-line-Aktivitäten eingebunden werden.Und zuletzt sollte man sich fragen: »Musses wirklich das Internet sein?« Bei denmeisten Sites im Netz wäre eine Anzeige,ein Spot, eine Party oder einfach Still-schweigen optimaler gewesen.

..

209Tipps und Tricks

.

unter www.statmarket.com und fürDeutschland bei www.webhits.de.

5.5.5.5.5. Soll ich bei meiner Website Frames ver-Soll ich bei meiner Website Frames ver-Soll ich bei meiner Website Frames ver-Soll ich bei meiner Website Frames ver-Soll ich bei meiner Website Frames ver-wenden?wenden?wenden?wenden?wenden?Frames eignen sich grundsätzlich immerdann, wenn man dem Besucher das wie-derholte Laden gleicher Inhalte ersparenwill. So können beispielsweise Navigations-elemente oder Logos hervorragend inFrames untergebracht werden; der Nutzermuss dann jeweils nur die neuen Inhalte la-den. Rein gestalterisch haben Frames denVorteil, dass sie einen Rahmen für das An-gebot bilden, der sich während des Ladensder Inhalte nicht verändert. Der Besucherwird so auch optisch stärker an die Site ge-bunden.Immer dann, wenn ein Redaktionssystemoder Content Management System Einsatzfindet, wird die Gestaltung mittels Frameszum Problem, da ja mehrere HTML-Seitenvon diesem System gleichzeitig angesteuertwerden müssen. Ein weiterer Nachteil istdie eingeschränkte Bookmark-Fähigkeit ei-ner Framestruktur: In der Regel wird näm-lich nur das Hauptdokument, also dasFrameset in die Bookmarks aufgenommenund die eigentlich gewählte Unterseitemuß jedes Mal erneut angewählt werden.

6.6.6.6.6. Wie kann ich Hintergrundmusik auf einerWie kann ich Hintergrundmusik auf einerWie kann ich Hintergrundmusik auf einerWie kann ich Hintergrundmusik auf einerWie kann ich Hintergrundmusik auf einerSite einsetzen?Site einsetzen?Site einsetzen?Site einsetzen?Site einsetzen?Warum sollten Sie? Hintergrundmusik be-wirkt zusätzliche Ladezeiten, ist extrem vonIhrem Geschmack abhängig und bewirktbei vielen Nutzern ein genervtes Wegkli-cken Ihrer Site.Wenn wir Sie wirklich nicht von derUnnötigkeit von Musik überzeugen konn-ten, dann geben Sie wenigstens dem Nut-zer einen dicken »Stop it!«-Button, damit

er sie abschalten kann. Musik kann übri-gens über Real-Audio, Flash, Quicktimeund andere Plug-Ins auf die Site gebrachtwerden oder per WAV und Midi-Files inden HTML-Code gepackt werden. Eine ele-gante Lösung ist auch das Einbinden mit-hilfe von Java.Aber bitte vergessen Sie nicht, sich vorhermit der GEMA in Verbindung zu setzen,sonst kann es böse Überraschungen geben!Zu finden unter http://www.gema.de.

7.7.7.7.7. Wie kann die LadezeitWie kann die LadezeitWie kann die LadezeitWie kann die LadezeitWie kann die Ladezeit einer Seite verrin- einer Seite verrin- einer Seite verrin- einer Seite verrin- einer Seite verrin-gert werden?gert werden?gert werden?gert werden?gert werden?Generell gilt: Je mehr auf einer Seite »pas-siert«, desto länger sind die Ladezeiten. Amschnellsten lädt sich Systemtext, Tabellenund Frames brauchen etwas länger und amlangsamsten sind Bilder, Töne, Filme oderApplets. Durch den gezielten Einsatzfarbreduzierter, knapp zugeschnittener Bil-der und eine gut strukturierte Seite mitmöglichst wenig verschachtelten Tabellenkönnen Sie dem Nutzer lange Ladezeitenersparen. Als Faustregel gilt immer noch:Wenn alle Elemente einer Seite zusammen(also das HTML-Dokument selbst und alleeingesetzten Elemente) weniger als 20 Kilo-byte haben, lädt sich diese recht schnell.

8.8.8.8.8. Wie finde ich heraus, ob eine FarbeWie finde ich heraus, ob eine FarbeWie finde ich heraus, ob eine FarbeWie finde ich heraus, ob eine FarbeWie finde ich heraus, ob eine Farbe»websafe« ist?»websafe« ist?»websafe« ist?»websafe« ist?»websafe« ist?Alle Farben, deren Hexadezimalwert aus 3gleichen Paaren (also z.B. »#3300FF«)besteht, sind websafe und können unbe-denklich verwendet werden. In allen mo-dernen Grafikprogrammen können Sie imFarbwähler mittlerweile auch das Hexa-dezimalsystem einstellen. Eine Übersichtfinden Sie zum Beispiel unter http://www.ideenreich.com/dr-col.shtml.

.

210 Anhang

9.9.9.9.9. Was ist besser, GIF oder JPEG?Was ist besser, GIF oder JPEG?Was ist besser, GIF oder JPEG?Was ist besser, GIF oder JPEG?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 Bil-der, die aus Linien, einfarbigen Flächen undwenigen Farben bestehen (also technischeZeichnungen, Diagramme, Texte oderLandkarten). Verläufe und photorealis-tische Motive sind hingegen ungeeignet.JPEGs sind dann sinnvoll, wenn ein Motivphotorealistisch sein soll oder viele Farbver-läufe beinhaltet. Gerade Linien, wie Buch-staben, die sich in einem JPEG befinden,werden hingegen schlecht wiedergegeben.

10.10.10.10.10. Wie reduziere ich JPEGsWie reduziere ich JPEGsWie reduziere ich JPEGsWie reduziere ich JPEGsWie reduziere ich JPEGs?????Normalerweise reduziert man JPEGs, in-dem man den Regler von High Quality im-mer weiter nach unten zieht und schmerz-voll miterlebt, wie die Darstellung immerschlechter wird. Geht man den umgekehr-ten Weg, also von ganz schlecht nach gut,wird man am Ende wahrscheinlich mit ei-ner kleineren Dateigrösse zufrieden sein.

11.11.11.11.11. Wozu brauche ich Rollover-Bilder?Wozu brauche ich Rollover-Bilder?Wozu brauche ich Rollover-Bilder?Wozu brauche ich Rollover-Bilder?Wozu brauche ich Rollover-Bilder?Immer dann, wenn Sie zusätzliche Infor-mationen oder eine Schein-Interaktivitätbrauchen, um Inhalte zu vermitteln, ist derEinsatz von Rollovers sinnvoll. Ein Naviga-tionssystem kann recht ansprechend ge-staltet werden, wenn Zusatzinformationenoder Erklärungen nur je Element bei einemRollover zu sehen sind. Auch Karten undtechnische Zeichnungen können so mit Er-klärungen für einzelne Elemente versehenwerden, ohne das Bild mit Informationenzu überfrachten.

12.12.12.12.12. Was ist das Wichtigste an einemWas ist das Wichtigste an einemWas ist das Wichtigste an einemWas ist das Wichtigste an einemWas ist das Wichtigste an einemNavigationssystem?Navigationssystem?Navigationssystem?Navigationssystem?Navigationssystem?Wir bevorzugen den Begriff »Benutzer-führung«, denn er drückt sehr viel besser

aus, worum es hier geht. Bei der Planungund Gestaltung eines solchen Systems giltes grundsätzlich, zwischen größtmöglicherAutonomie des Nutzers einerseits und sei-ner Führung andererseits abzuwägen. Diebesten Benutzerführungs-Systeme sind die-jenigen, die nie statisch sind, sondern im-mer auf die Situation einer gerade aufge-rufenen Seite reagieren können. LassenSie den Nutzer an keiner einzigen Stellealleine. Nie. Nirgends. Geben Sie ihm im-mer (auch am Ende von langen Seiten) dieMöglichkeit, ganz bequem auf einen»Weiter«-Button zu klicken. Selbstver-ständlich heißt dieser selten so, da wir es janicht mit einem linearen Medium zu tunhaben. Versetzen Sie sich in die Lage des-sen, der die besagte Seite aufgerufen hatund überlegen Sie sich, was der nächsteSchritt wäre. Bieten Sie dann genau diesenLink am Ende der Seite an, damit fauleNutzer sich von Ihnen durch die Strukturlenken lassen können.

13.13.13.13.13. Was muss ich bei der Gestaltung vonWas muss ich bei der Gestaltung vonWas muss ich bei der Gestaltung vonWas muss ich bei der Gestaltung vonWas muss ich bei der Gestaltung vonTextenTextenTextenTextenTexten beachten? beachten? beachten? beachten? beachten?In reinem HTML sind nur links- und rechts-bündige und zentrierte Ausrichtungenmöglich. Silbentrennung, Spationierungoder unterschiedliche Zeilenabstände sindleider auch nicht möglich. Durch den Ein-satz von Tabellen können Sie aber dafürsorgen, dass die Zeilenlänge nicht unlesbarwird und die Inhalte somit besser erfasstwerden können. Außerdem sollten Sie lan-ge Texte unbedingt auflockern, indem Siezum Beispiel Bilder oder Diagramme imText selbst platzieren und diesen um dasElement herumlaufen lassen. Generell soll-ten Texte am Bildschirm immer so kurz als

..

211Tipps und Tricks

möglich sein, da die Lesbarkeit deutlich ge-ringer ist als auf Papier.

14.14.14.14.14. Kann ich unsere HausschriftKann ich unsere HausschriftKann ich unsere HausschriftKann ich unsere HausschriftKann ich unsere Hausschrift einsetzen? einsetzen? einsetzen? einsetzen? einsetzen?Das geht leider nur dann, wenn Ihre Haus-schrift eine Systemschriftart, z.B. Arial ist(Lassen Sie uns darüber bitte noch einmalreden!). Von der Einbindung der meistenSchriftarten ist unbedingt abzuraten, dadiese entweder sowieso nicht beim Nutzervorhanden sind oder aber nicht für die Dar-stellung am Bildschirm optimiert sind undsomit eine schlechte Lesbarkeit haben.Wollen Sie wirklich Ihre eigene Schrift ver-wenden, so müssen Sie diese als Bild ein-setzen und längere Ladezeiten in Kauf neh-men.

15.15.15.15.15. Ich habe mir ein Bild aus dem Netz geklautIch habe mir ein Bild aus dem Netz geklautIch habe mir ein Bild aus dem Netz geklautIch habe mir ein Bild aus dem Netz geklautIch habe mir ein Bild aus dem Netz geklautund ziemlich viel daran geändert. Darf ichund ziemlich viel daran geändert. Darf ichund ziemlich viel daran geändert. Darf ichund ziemlich viel daran geändert. Darf ichund ziemlich viel daran geändert. Darf ichdas?das?das?das?das?Leider greifen auch bei Veränderungen imMotiv immer noch die Bildrechte. Sofernnicht ausdrücklich vom Besitzer darauf hin-gewiesen wurde, dass ein Motiv frei vonRechten ist, dürfen Sie es nicht verwenden.

16.16.16.16.16. Welcher HTML-Editor ist der Beste?Welcher HTML-Editor ist der Beste?Welcher HTML-Editor ist der Beste?Welcher HTML-Editor ist der Beste?Welcher HTML-Editor ist der Beste?Arbeiten Sie im Team, mit nur einem einzi-gen Editor für alle Beteiligten und findenMicrosoft Word gut? Dann ist für Sie wahr-scheinlich Frontpage geeignet.Fummeln Sie gerne selbst im HTML-Codeherum, weil Sie den Programmen miss-trauen? Dann nehmen Sie GoLive.Legen Sie Wert auf eine intuitive Benutzer-führung des Programms und wollen trotz-dem einen ordentlichen HTML-Code er-zeugen? Haben Sie schon Dreamweaverausprobiert?

17.17.17.17.17. Soll ich meine SiteSoll ich meine SiteSoll ich meine SiteSoll ich meine SiteSoll ich meine Site mehrsprachig anlegen? mehrsprachig anlegen? mehrsprachig anlegen? mehrsprachig anlegen? mehrsprachig anlegen?Das hängt in erster Linie natürlich von derZielgruppe Ihrer Site ab. Englisch hat sich

als Standard im Netz aber durchgesetzt.Deshalb bietet es sich an, seine Seiten ineiner notfalls abgespeckten Version auch inEnglish anzulegen. Es ist erstaunlich, auswelchen Ecken der Welt sich User auf dieSite verirren und nicht selten sind es ebenpotentielle Kunden oder Mitarbeiter.Für den, der nicht so gut Englisch sprichtund der trotzdem die weite Welt des Webnutzen will, gibt es wiederum die Möglich-keit, sich Seiten übersetzen zu lassen unterhttp://babel.altavista.com. Die Überset-zung führt allerdings oft eher zur Erheite-rung als zu tieferem Verständnis und außerdem wird nur der Systemtext übersetzt.Die bessere Übersetzung einzelner Phrasenund Wörter in Englisch und Deutsch bietethttp://dict.leo.org/.

18.18.18.18.18. Kann ich StadtpläneKann ich StadtpläneKann ich StadtpläneKann ich StadtpläneKann ich Stadtpläne einbinden? einbinden? einbinden? einbinden? einbinden?Für Pläne gelten natürlich die gleichen Ur-heberrechte wie für Bilder und Musik. Alsoauch hier sehr vorsichtig sein und das Kar-tenmaterial kaufen. Oder aber kostenlos zuhttp://www.stadtplandienst.de verlinken.Das funktioniert auch, ist bei grossen, pro-fessionellen Sites aber natürlich keine end-gültige Lösung.

19.19.19.19.19. Was ist hip im Netz?Was ist hip im Netz?Was ist hip im Netz?Was ist hip im Netz?Was ist hip im Netz?Um zu sehen, was im Netz gerade beson-ders angesagt ist, gibt es auch hier Hitpara-den, die sich an den Suchbegriffen derSearchengines festmachen. Die üblichenVerdächtigen wie »Sex« und »Hardcore«werden dabei mittlerweile meistens ausge-lassen, aber Sites wie Altavista bietenHitlists oder auch Einblicke in die aktuellenSuchanfragen von momentanen Usern. Dasmacht zum einen Spass, zum anderen be-kommt man einen ganz guten Einblick,welche Themen im Netz gerade aktuell

..

212 Anhang

sind. Suchbegriffe nach Branchen aufgelis-tet finden sich unter http://www.kso.co.uk/de/svc/se009.html.

20.20.20.20.20. Wo kommen denn die ganzen Cliparts her?Wo kommen denn die ganzen Cliparts her?Wo kommen denn die ganzen Cliparts her?Wo kommen denn die ganzen Cliparts her?Wo kommen denn die ganzen Cliparts her?Eigentlich sollten wir Ihnen nicht verraten,wie man an diese blinkenden Herzen, grin-senden Smileys und sich drehenden Spira-len kommt. Sie sind nicht sonderlich origi-nell und zerstören den Charakter jeder Site.Aber Sie würden es ja doch rausfinden, alsokönnen Sie gleich zu http://www.clipart.com gehen!

21.21.21.21.21. Was mache ich, wenn der HintergrundWas mache ich, wenn der HintergrundWas mache ich, wenn der HintergrundWas mache ich, wenn der HintergrundWas mache ich, wenn der Hintergrund zu zu zu zu zulange lädt?lange lädt?lange lädt?lange lädt?lange lädt?Auch wenn es nicht sein sollte, kann esvorkommen, dass man Hintergrundbilderetwas grösser anlegen muss. Es empfiehltsich, die Hintergrundfarbe der Seite in ei-nem Ton anzulegen, der dem Bild rechtnahe kommt. So ist der visuelle Bruch vorund nach dem Laden nicht so gross. Beidunklem Hintergrundbild sollte die Seitesowieso mit dunkler Backgroundcolor an-gelegt werden, damit man die helle Schriftdarauf schon lesen kann, bevor das Bild ge-laden ist.

22.22.22.22.22. Nehme ich eine Agentur, oder mache ichNehme ich eine Agentur, oder mache ichNehme ich eine Agentur, oder mache ichNehme ich eine Agentur, oder mache ichNehme ich eine Agentur, oder mache iches lieber selbst?es lieber selbst?es lieber selbst?es lieber selbst?es lieber selbst?Diese Frage stellt sich oft zu Beginn desVorhabens, in die Neuen Medien zu gehen.Je weiter sich das Internet entwickelt,umso schwieriger wird es allerdings, einenAuftritt selbst zu konzipieren und umzuset-zen. Obwohl es mittlerweile Software fürfast jede Art von Sitekonzept gibt, also fer-tige Shoppinglösungen, Redaktionssystemeund so weiter, sollte man sich auch bei derEntscheidung für diesen Ansatz zunächstprofessionell beraten lassen. Erfahrungsge-mäß bedeutet die Einführung der Neuen

Medien in ein Unternehmen eine so großeUmstellung, dass man froh sein kann, wennman sich nur mit den Inhalten und denUmstrukturierungen befassen muss und fürden Part der Siteentwicklung eine Agenturhat. Ein Workshop, den viele Agenturenanbieten, kann bei dieser Entscheidungaber helfen.

23.23.23.23.23. Und wie komme ich an eine gute Agentur?Und wie komme ich an eine gute Agentur?Und wie komme ich an eine gute Agentur?Und wie komme ich an eine gute Agentur?Und wie komme ich an eine gute Agentur?Die Frage ist berechtigt, denn Agenturengibt es bei uns ja wie Sand am Meer. Kaumjemand, der sich nicht Internet auf die Fah-nen schreibt und besonders kostengünstigRundumsorglospakete anbietet. Über denDeutschen Multimedia Verband kann mansich zunächst einmal die Namen von Agen-turen besorgen. Die Agentur kann in derNähe liegen, muss es aber nicht zwangsläu-fig, da sehr viele Prozesse über das Netzabgewickelt werden. Zusätzlich sollte mansich aber auch im Netz umsehen und ver-suchen herauszubekommen, wer die Sitesgemacht hat, die man gut findet oder diedem eigenen Unternehmen auch gut ste-hen würden.Hat man einige Adresse herausgefunden,sollte man sich unbedingt auf der Site derAgentur umsehen, um herauszufinden, wassonst noch im Portfolio verborgen ist. Da-bei auch die entsprechenden Sites oderCase Studies ansehen, denn für DaimlerChrysler hat angeblich jeder schon mal ge-arbeitet.Und dann sollte man sich die Agentur ein-mal einladen und mit den Projekt-verantwortlichen sprechen, denn je besserman sich persönlich versteht, desto mehrVertrauen kann entstehen und desto besserwird das Produkt. Und außerdem soll dasGanze ja auch Spaß machen!

..

213Tipps und Tricks

..

214 Anhang

GlossarDas WWW von A bis Z

Ein Überblick über die wichtigstenBegriffe des Netzes.

Ad Clicks zu Page Views, also der Anzahl vonSeitenaufrufen.

Animated GIFAnimated GIFAnimated GIFAnimated GIFAnimated GIFEin Dateiformat, das aus mehreren Einzelbil-dern in festgelegter Reihenfolge besteht. Wirddas Bild geladen, entsteht der Eindruck einermehr oder weniger fließenden Animation. Ger-ne verwendet bei Bannern.

AttachmentAttachmentAttachmentAttachmentAttachmentEine Anlage, die Teil einer E-Mail ist. Ein At-tachment kann aus fast jedem Dateityp beste-hen und ist meistens zu gross …

AvatarAvatarAvatarAvatarAvatarDer Begriff kommt eigentlich aus dem Hinduis-mus und bedeutet die Verkörperung Gottesauf Erden. Heute ist es die Nachbildung vonPersonen, gerne in schlechten dreidimensiona-len Renderings, im Rahmen von Websites oderanderen digitalen Applikationen. Über denSinn von Avataren könnte man stundenlangdiskutieren, wobei drallbusige Blondinen si-

AAccess ProviderAccess ProviderAccess ProviderAccess ProviderAccess ProviderEin kommerzielles oder privates Unternehmen,das Zugänge zum Internet oder Teilbereichendavon, wie zum Beispiel E-Mail, anbietet. Er-fahrungsgemäß wechselt man den Providergerne einmal, wenn man wieder Ärger mit ihmhatte.

AccountAccountAccountAccountAccountLoggt man sich bei einem Provider ein oderwill man seine E-Mails abfragen, wird meistensder Account, also das »Konto« abgefragt. Überden Account, der immer mit Passwort ausge-geben wird, wird dann auch die Rechnung ge-stellt.

Ad ClickAd ClickAd ClickAd ClickAd ClickDie Einheit zur Messung der Anzahl von Klicksauf ein Banner im Netz.

Ad Click RateAd Click RateAd Click RateAd Click RateAd Click RateDie Einheit zur Messung der Anzahl der Usereiner Seite, die dort auf ein Banner geklickt ha-ben. Interessant ist dabei das Verhältnis von

..

215Glossar

.

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

BBackboneBackboneBackboneBackboneBackboneGerne zum Angeben verwendet. »Ich hängedirekt am Backbone« will sagen, dass man eineziemlich schnelle Verbindung ins Netz hat. Ei-gentlich die Verbindung zwischen Rechnernet-zen. Das Web besteht aus einer Vielzahl vonsolchen Rechnernetzen, die über Backbonesmiteinander verbunden sind.

BackupBackupBackupBackupBackupDarum betet man, wenn ein Rechner abge-stürzt ist und alle Daten verloren sind. Es be-deutet dass Daten, Programme oder Systemeauf einem Server oder einer Festplatte gesi-chert wurden und so nach einem Absturz mitDatenverlust oder dem unbeabsichtigten Lö-schen von Daten (was man am Besten niemalsirgendjemand erzählen sollte), wiederherge-stellt werden können. Normalerweise laufenbei professionellen Anbietern permanent oderregelmässig Backup-Programme. Auf dem ei-genen Rechner meistens leider nicht!

BandwidthBandwidthBandwidthBandwidthBandwidthDie Bandbreite bezeichnet die Spanne zwi-schen höchstmöglicher und niedrigster Fre-quenz bei der Übertragung von Daten. Gemes-sen wird in Hertz oder in Bits pro Sekunde.

BannerBannerBannerBannerBannerEine Werbefläche auf einem Werbeträger wiez.B. www.stern.de, die meistens per Klick zueiner Web-Site führt, dem sogenannten Wer-beträger.

BenchmarkBenchmarkBenchmarkBenchmarkBenchmarkEin schickes Wort für einen Leistungsvergleichoder eine Konkurrenzanalyse bei Websites,Software oder Hardware. Sollte am Beginn je-der Strategieentwicklung stehen.

BetaBetaBetaBetaBetaEine Betaversion ist eine fast fertige Software,die von bestimmten Testern ohne Garantiean-spruch ausprobiert werden kann. Immer sehrgespannt erwartet, aber dann meistens dochmit Bugs und anderen Überraschungen geseg-net. Nach diesem Erfahrungsaustausch wirddann die korrigierte Endversion freigegeben.

BitBitBitBitBitDie legendäre Informationseinheit zur Daten-speicherung, die entweder aus 0 oder 1 be-steht. Kleiner geht’s nicht.

BookmarkBookmarkBookmarkBookmarkBookmarkDas sind die Seiten, die man in seinem Brow-ser speichert, um sofort auf bestimmte Seitenzurückgreifen zu können (Lesezeichen). Guteund gepflegte Bookmarklisten sind wirklichGold wert.

Broadband/BreitbandBroadband/BreitbandBroadband/BreitbandBroadband/BreitbandBroadband/BreitbandDer Hype der Jahre 1999/2000. Durch dieseÜbertragungstechnik können sehr grossen Da-tenmengen wie zum Beispiel Film und Ton mithoher Geschwindigkeit und Leistung übermit-telt werden.

BrowserBrowserBrowserBrowserBrowserDas Programm, das es uns ermöglicht, anstattgrauem HTML-Code Text, Bild und Ton zu se-hen. Die sogenannten WWW-Browser wieNetscape und Explorer ermöglichen es demUser, sich durch den Datendschungel zu bewe-

.

216 Anhang

gen und die unterschiedlichen Services zu nut-zen.

BugBugBugBugBugDas erste, was man vermutet, wenn wiedereinmal nichts funktioniert. Das Programm undder Rechner laufen zwar noch, aber ein kleinerFehler macht die Arbeit schwer oder legt sielahm.

Bullshit-BingoBullshit-BingoBullshit-BingoBullshit-BingoBullshit-BingoVersion des klassischen Bingo-Spiels, bei derwährend eines Meetings auf einem Blatt häufiggebrauchte, meist unverständliche Worte wie»konvergent« oder »Paradigmenwechsel« aus-gestrichen werden, sobald einer der Teilneh-mer sie verwendet. Wer alle gestrichen hat,schreit laut »Bullshit«. Vorsicht bei Kunden-Meetings.

ButtonButtonButtonButtonButtonEin Element auf einer Site, mit dem man eineAktion auslöst. Der Begriff ist deswegen etwasungünstig, weil man sich sofort einen dreidi-mensionalen Knopf vorstellt. Buttons werdenvon vielen auch als solche gestaltet, egal, ob esins visuelle Konzept passt oder nicht.

ByteByteByteByteByteAcht Bit ergeben ein Byte, die Grundinformati-onseinheit eines Computerspeichers.

CCacheCacheCacheCacheCacheEin Zwischenspeicher für Daten; bei der Be-nutzung eines Browsers kann man die Grössedes Caches einstellen und hat so sehr vielschnellere Ladezeiten beim zweiten Besuch ei-ner Site oder beim Aufrufen von Elementen,

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

CD-ROMCD-ROMCD-ROMCD-ROMCD-ROMAbkürzung für Compact Disc Read-Only Me-mory. Das Speichermedium mit Platz für stan-dardmässig 650 Megabyte ist in der Regel nureinmal beschreibbar und wird verwendet fürApplikationen mit großen Datenmengen wieKataloge oder Lexika sowie zu Backup-Zwe-cken.

ChatChatChatChatChatAustausch von Nachrichten via Text im WWW.Im Gegensatz zu E-Mail passiert ein Chat si-multan in Echtzeit und kann für manche Userzur Sucht werden. Chats gibt es zu sämtlichenvorstellbaren Themen, wer mitmachen will,sollte unter dem Stichwort IRC im Netz auf dieSuche gehen.

ClearingstelleClearingstelleClearingstelleClearingstelleClearingstelleEin Finanzinstitut oder eine vergleichbare Ein-richtung, die online während des Zahlungsvor-gangs im elektronischen Geldverkehr für dieTransaktion bürgt und somit die Wertstellunggarantiert.

ContentContentContentContentContentNeudeutsch für den Inhalt einer Site. Gefülltwerden diese Sites von sogenannten ContentProvidern, die sich idealerweise aus Unterneh-men zusammensetzen, die sowieso mit Inhal-ten zu tun haben, wie zum Beispiel Fernseh-sendern oder Zeitungsredaktionen.

CookieCookieCookieCookieCookieHört sich gut an, ist aber nicht unproblema-tisch. Ruft man bestimmte Sites auf, wird eineDatei auf der Festplatte des Users abgelegt, die

..

217Glossar

alle Bewegungen und Aktionen des Nutzersmitprotokollieren kann. Auf der einen Seitekann das sehr hilfreich sein, um dem User pas-sende Services zu liefern, auf der anderen Sitekann man ihn hervorragend ausspionieren.

CSSCSSCSSCSSCSSDie Cascading Style Sheets können (auch voneiner Metaseite aus) bestimmte Eigenschaftenfür Schrift oder Position an HTML-Seiten wei-tergeben.

CybercashCybercashCybercashCybercashCybercashSchicker Name für virtuelles Geld

CyberspaceCyberspaceCyberspaceCyberspaceCyberspaceMittlerweile nicht mehr ganz so cooler Begrifffür die Welt innerhalb vernetzter Computer. Ertauchte schon 1984 in einem Roman WilliamGibsons auf und ist heute eher Schlagwort aufJahrmärkten und in schlechten Talkshows.

DDatabaseDatabaseDatabaseDatabaseDatabaseEine Datenbank wird mit Daten gefüllt, dievon ihr verwaltet, kombiniert und wieder aus-gegeben werden. Je besser die Datensätze,also die Einträge, indiziert und verknüpft sind,um so besser kann eine Datenbank in vielfäl-tigster Weise genutzt werden.

DatenautobahnDatenautobahnDatenautobahnDatenautobahnDatenautobahnSchon wieder ein Begriff, der langsam out offashion ist und die Gesamtheit der Datenlei-tungen beschreibt, die dem Internet zugrundeliegen. Gerne für lustige Wortspiele miss-braucht.

DefaultDefaultDefaultDefaultDefaultDie Grundeinstellung von elektronischen Ge-räten, also die Einstellung, mit der sie geliefertwerden und bevor der Nutzer alles verstellthat. Außerdem wird damit die Seite bezeich-net, die als Homepage oder als erste Seite ei-nes Themenbereichs automatisch geladenwird.

DE-NICDE-NICDE-NICDE-NICDE-NICDas Deutsches Network Information Center istverantwortlich für die Vergabe und Verwaltungvon deutschen Domains und IP-Adressen, diemit dem Kürzel .de enden.

DHTMLDHTMLDHTMLDHTMLDHTMLDie Dynamic Hypertext Markup Language isteine Erweiterung des HTML-Standards undumfasst interaktive Elemente im Rahmen vonJava-Script sowie Cascading Style Sheets. DasProblem ist dabei, dass sich die Befehle schonallein bei Netscape und Microsoft deutlich un-terscheiden, was den Einsatz recht schwermacht!

DitheringDitheringDitheringDitheringDitheringDurch das Rastern von Farben werden neueFarben erstellt, die sonst auf dem System garnicht darstellbar wären. Dadurch, dass manweniger Farben verwendet, wird auch die Da-tei kleiner.

DNSDNSDNSDNSDNSDer Domain Name Server übersetzt nummeri-sche IP-Adressen in klar verständliche Namenwie www.galileo-press.de

DomainDomainDomainDomainDomainDie Domain ist die Bezeichnung der Adresse,unter der verschiedene Angebote angelegt

..

218 Anhang

sind. Dabei gibt es eine inhaltliche oder einegeographische Unterscheidung. SogenannteTop-Level-Domains sind zum Beispiel:E .com.com.com.com.com, das heißt commercial organisations

und steht für kommerzielle Anbieter, gerneaber auch für die USA

E .edu.edu.edu.edu.edu, das heißt educational organisationsund steht Schulen, Universitäten und ähnli-ches

E .govgovgovgovgov, das heißt government organisationsund betrifft alles, was mit Regierungen zutun hat

E .milmilmilmilmil, das heißt military organisationsE .netnetnetnetnet, das heißt network resources, also alles,

was in irgendeiner Form mit Netzwerken zutun hat.

E .orgorgorgorgorg, das heisst organisations und steht fürOrganisationen aller Art, hauptsächlichnichtkommerzielle

DownloadDownloadDownloadDownloadDownloadDas Laden einer Datei aus dem Internet aufden eigenen Computer

DpiDpiDpiDpiDpiDots per inch ist die Maßeinheit für Bildpunktepro Zoll und legt die Auflösung unterschiedli-cher Ausgabemedien fest.

EEditorEditorEditorEditorEditorProgramm zum Erstellen und Ändern von Text-dateien. Die komplexe Form sind WYSIWYG-Editoren, mit denen man Websites erstellenkann. Also sozusagen das Gegenteil einesBrowsers.

electronic businesselectronic businesselectronic businesselectronic businesselectronic businessDie Abwicklung von Geschäftsvorgängen überdas Internet

electronic commerceelectronic commerceelectronic commerceelectronic commerceelectronic commerceDer Handel und Transaktionen im Internet

E-MailE-MailE-MailE-MailE-MailVersenden von Nachrichten und angehängtenDatein über ein Computernetzwerk

ExtranetExtranetExtranetExtranetExtranetEin Netzwerk, über das Mitarbeiter einer be-stimmten Firma sowie deren Kunden undDienstleister miteinander kommunizieren kön-nen

FFAQFAQFAQFAQFAQDamit man im Rahmen einer Site nicht immerwieder die gleichen Fragen zu hören bekommtund diese beantworten muß, bietet es sich an,eine Liste der am häufigst gestellten Fragenund deren Antworten ins Netz zu stellen.

FeedbackFeedbackFeedbackFeedbackFeedbackEine Feedback-Funktion auf einer Site gibtdem User die Möglichkeit, sich zu bestimmtenSachverhalten zu äußern, meistens per E-Mail.

FirewallFirewallFirewallFirewallFirewallEin Sicherheitssystem, das ein geschlossenesNetzwerk innerhalb einer Firma vor uner-wünschten Zugriffen von außen schützt.

Flat RateFlat RateFlat RateFlat RateFlat RateÜber einen Pauschaltarif wird der Zugang zumNetz nicht nach darin verbrachter Zeit, son-dern über einen monatlichen Pauschalbetragabgerechnet.

..

219Glossar

.

FormFormFormFormFormEin Formular auf einer HTML-Seite ermöglichtes dem User, Daten an den Server der Site zusenden.

FTPFTPFTPFTPFTPDas File Transfer Protocol ermöglicht die Über-tragung von Daten über das Internet von ei-nem Rechner zum anderen.

FTP-ServerFTP-ServerFTP-ServerFTP-ServerFTP-ServerDer FTP-Server stellt Dateien zur Verfügung,die man sich mehr oder weniger frei herunter-laden kann.

GGatewayGatewayGatewayGatewayGatewayEin Übergang zwischen zwei Netzwerken, z.B.T-Online und dem Internet

GIFGIFGIFGIFGIFDas Graphics Interchange Format ist eines derverbreitetsten Bildformate im Netz.

GigabyteGigabyteGigabyteGigabyteGigabyteEtwa eine Milliarde Bytes an Computerdaten

HHand-held ComputerHand-held ComputerHand-held ComputerHand-held ComputerHand-held ComputerDiese kleinen Computer können oft locker mitgroßen Rechnern mithalten, sind dabei aberwinzig klein und können in der Hand gehaltenwerden.

HomebankingHomebankingHomebankingHomebankingHomebankingBankgeschäfte über den Rechner von zu Hauseaus

HomepageHomepageHomepageHomepageHomepageDie Homepage ist die Startseite einer Site, zuder man meistens durch Klick auf das Logo zu-rückkommt. Ausserdem kann man sich imBrowser sein Home einstellen und kommtbeim Starten des Programms immer auf dieseSeite.

HostHostHostHostHostEin Rechner im Internet, der Informationenoder Dienste bereitstellt

HTMLHTMLHTMLHTMLHTMLHyper Text Markup Language, die Program-miersprache, mit der die graphisch orientiertenSeiten des WWW erstellt werden

httphttphttphttphttpDas Hypertext Transfer/Transmission Protocolermöglicht die Übertragung und Verknüpfungvon Sites im WWW.

HyperlinkHyperlinkHyperlinkHyperlinkHyperlinkBestimmte Worte oder Passagen eines Textesoder einer Navigation, die mit einer anderenSeite verbunden sind und auf die man klickenkann.

IIconIconIconIconIconEin Symbol, meistens recht klein, das eineFunktion, eine Datei, einen Bereich oder ähn-liches darstellen soll. Oft sind sie sehr interpre-tationsbedürftig und deswegen nicht immergut.

Information HighwayInformation HighwayInformation HighwayInformation HighwayInformation HighwayNoch wichtiger klingender Begriff für Datenau-tobahn

.

220 Anhang

Intelligente AssistentenIntelligente AssistentenIntelligente AssistentenIntelligente AssistentenIntelligente AssistentenDiese kommerziellen Suchmaschinen legenüber einen bestimmten Zeitraum ein Profilüber den Nutzer und seine Suchgewohnheitenan, und liefern qualitativ immer bessere Such-ergebnisse.

InteractiveInteractiveInteractiveInteractiveInteractiveEigentlich jede Software oder Site, die in ir-gendeiner Weise Eingaben und Aktionen desUsers zulässt

InterfaceInterfaceInterfaceInterfaceInterfaceDas ist jegliche Schnittstelle, über die Datenzwischen zwei Bereichen ausgetauscht wer-den. Sei es die Nutzeroberfläche (das Interfacezwischen Mensch und Computer) oder ein Ka-bel, das einen Rechner mit dem Monitor ver-bindet. Oder der Projektleiter, der zwischendem zerstrittenen Grafiker und dem Konzeptervermittelt.

InternetInternetInternetInternetInternetEin neugeschaffenes Wort, um das globaleNetzwerk an Computern zu beschreiben, dieüber das Internet-Protokoll miteinander ver-bunden sind

Internet-NutzerInternet-NutzerInternet-NutzerInternet-NutzerInternet-NutzerDer sogenannte User ist Dreh- und Angelpunktdes Netzes. Allerdings muss das nicht unbe-dingt ein Surfer sein, man bezeichnet so auchjemanden, der nur mit E-Mail kommuniziert.

IntranetIntranetIntranetIntranetIntranetEin Netzwerk innerhalb einer Firma, das aufder Internet-Technologie beruht

IP-AdresseIP-AdresseIP-AdresseIP-AdresseIP-AdresseAdresse eines Internet-Rechners in Form einesZahlencodes, z.B. 165.32.12.134

JJAVAJAVAJAVAJAVAJAVADiese Programmiersprache im Internet erlaubtes, unabhängig von der Art des Rechners kom-plexe Programme ablaufen zu lassen.

JavaScriptJavaScriptJavaScriptJavaScriptJavaScriptDiese Skriptsprache hat rein gar nichts mit Javazu tun und ermöglicht in ihrer Verknüpfungmit HTML interaktive Features. Ist aber nichtimmer ganz stabil und führt unter Umständenbei semiprofessineller Programmierung gernemal zu Abstürzen.

JPEGJPEGJPEGJPEGJPEGDas Joint Photographic Experts Group-Bildfor-mat komprimiert Bilder für das WWW

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

LLaunchLaunchLaunchLaunchLaunchDer Onlinestart einer Website. Grundsätzlichist die Zeit bis zum Launch immer zu kurz undmit hektischem Stress verbunden.

LinkLinkLinkLinkLinkDie Verknüpfung eines Elements auf einerHTML-Seite mit einer anderen Seite

LoginLoginLoginLoginLoginDas Anmelden an einem Netzwerk, gerne mitUsername und Passwort

.

221Glossar

MMailing ListMailing ListMailing ListMailing ListMailing ListLäßt man sich auf eine Mailing List zu einembestimmten Thema setzen, bekommt man im-mer wieder relevante E-Mails. Das bereut manoftmals sehr schnell, weil die Datenflut über-hand nimmt; man versucht sich dann wiedervon der Liste zu streichen.

MegabitMegabitMegabitMegabitMegabitEtwa eine Million Bits

MegabyteMegabyteMegabyteMegabyteMegabyteEtwa eine Million Bytes, genauer 1.024 Kiloby-tes oder 1.048.576 Bytes

Meta TagMeta TagMeta TagMeta TagMeta TagDiese Auszeichnung auf einer HTML-Seite er-möglicht es, Stichworte für Suchmaschinen aufdie Seite zu packen.

ModemModemModemModemModemEin Modem vermittelt zwischen dem digitalenComputer und der analogen Telefonleitung,und zwar durch Umwandlung der digitalenSignale in furchtbare akustische Signale.

MultimediaMultimediaMultimediaMultimediaMultimediaDas Wort des Jahres 1995 wird heute nur nochverschämt benutzt und bedeutet die Verbin-dung von Medien wie Text, Ton und Bild mitdigitaler Ausgabe, also eigentlich Monomedia.

NNetiquetteNetiquetteNetiquetteNetiquetteNetiquetteBenimmregeln bei der Kommunikation mit an-deren Usern im Netz, vor allem per Mail,Newsgroup oder in einem Chat

New MediaNew MediaNew MediaNew MediaNew MediaVor allem bei Agenturen beliebter Zusatz. AlsNeue Medien werden Bildschirmmedien wieCD-Roms oder das Internet bezeichnet.

NewsgroupNewsgroupNewsgroupNewsgroupNewsgroupRiesiges Archiv von »geposteten«, also vonNutzern eingestellten Nachrichten zu einembestimmten Thema. Es gibt zu fast jedem er-denklichen Thema eine solche Gruppe.

NewsletterNewsletterNewsletterNewsletterNewsletterEine E-Mail, die mit identischen oder persona-lisierten Inhalten an viele Empfänger gleichzei-tig gesendet wird. Viele Unternehmen setzenNewsletter zur Kundenbindung ein.

OOpen SourceOpen SourceOpen SourceOpen SourceOpen SourceVon Programmierern und Softwarefirmen ge-nutzte Methode, um den Quell-(Source-)Codeeines Programms zu verbessern. Durch die Of-fenlegung bekommen andere Programmiererdie Möglichkeit, das Programm weiterzuent-wickeln und zu verbessern.

OSOSOSOSOS»Operating System«, bezeichnet das Betriebs-system eines Rechners.

PPage ImpressionPage ImpressionPage ImpressionPage ImpressionPage ImpressionBezeichnet eine von einem Browser aufgerufe-ne HTML-Seite. Vor allem bei der Schaltungvon Bannern wird nach PI abgerechnet, alsonach der Gesamtanzahl der aufgerufenen Sei-ten.

.

222 Anhang

PersonalisierungPersonalisierungPersonalisierungPersonalisierungPersonalisierungMöglichkeit, durch datenbankgestützte Inhaltedie Informationsbedürfnisse des einzelnenNutzers auf einer Website oder in einemNewsletter zu stillen.

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

Plug-InPlug-InPlug-InPlug-InPlug-InErweiterungsmodule, mit deren Hilfe man dieFunktionen eines Browsers erweitern kann,z.B. um bestimmte Dateiformate wie 3D-Dar-stellungen zu ermöglichen

Pop-up-FensterPop-up-FensterPop-up-FensterPop-up-FensterPop-up-FensterMeist kleines, zusätzliches Browserfenster, dasüber dem Originalfenster erscheint, um zusätz-liche Inhalte oder Werbung anzuzeigen

Proxy-ServerProxy-ServerProxy-ServerProxy-ServerProxy-ServerServer bei Unternehmen oder Providern, derden Zugriff auf häufig aufgerufene Inhalte be-schleunigt, indem er diese zwischenspeichert

PullPullPullPullPullBezeichnung für vom Nutzer angeforderteDaten

PushPushPushPushPushBezeichnung für nicht aktiv angeforderte Da-ten, wie zum Beispiel die Themen-Channelsfrüherer Versionen des Internet Explorer

RReal AudioReal AudioReal AudioReal AudioReal AudioDatenformat für Audiodateien, die mithilfe des»Real Player« angehört werden können

RelaunchRelaunchRelaunchRelaunchRelaunchNeukonzeption einer Website. Meist geht mitdem Relaunch nicht nur eine Neustrukturie-rung der Inhalte, sondern auch ein Redesign,also eine veränderte Gestaltung einher.

RobotRobotRobotRobotRobotProgramme, die selbsttätig Websites und wei-terführende Links absuchen, um diese dannper Datenbank einer Suchmaschine zugänglichzu machen

RolloverRolloverRolloverRolloverRolloverMöglichkeit, mittels JavaScript zwei gleichgro-ße Bilder beim Berühren mit der Maus auszu-tauschen

SSchlipsträgerSchlipsträgerSchlipsträgerSchlipsträgerSchlipsträgerUnfreundliche Bezeichnung für Consultants,meist von Designern verwendet

ServerServerServerServerServerRechner oder Verbund von Rechnern, auf de-nen Dateien gespeichert sind. Ein Webserverbeispielsweise beherbergt alle Dateien einerSite.

SiteSiteSiteSiteSiteoder »Website«. Bezeichnung für eine zusam-menhängende Ansammlung von HTML-Seitenunter einer URL

Source CodeSource CodeSource CodeSource CodeSource CodeDer Quellcode einer HTML-Seite oder einesProgramms. Dieser besteht aus Befehlen undInhalten.

.

223Glossar

TTagTagTagTagTagBefehl in HTML. Ein Tag steht immer in spitzenKlammern und wird bei richtiger Programmie-rung nicht im Browser angezeigt, z.B. <b>.

Trust CenterTrust CenterTrust CenterTrust CenterTrust CenterUnabhängige Zertifizierungsstelle für Signatu-ren oder Echtheits-Zertifikate

UUnicodeUnicodeUnicodeUnicodeUnicodeStandard, der den Tastaturaufruf und die Dar-stellung aller internationalen Schriftzeichen re-gelt

UnsubscribeUnsubscribeUnsubscribeUnsubscribeUnsubscribeAbmeldung eines abonnierten Dienstes oderNewsletters

URLURLURLURLURL»Uniform Resource Locators«. Bezeichnung fürdie eindeutige Adresse einer Website, z.B.http://www.echopool.com (oder http://www.frogdesign.com oder http://www.pixelpark.com)

User InterfaceUser InterfaceUser InterfaceUser InterfaceUser Interface(gestaltete) Benutzeroberfläche einer Website

VVGAVGAVGAVGAVGAEin Standard zur Darstellung von Bildpunktenund Farben auf Bildschirmen

VisitVisitVisitVisitVisitEinheit, um die »Besuche« auf einer Websitezählen und auswerten zu können. Ein Visit ent-hält in der Regel mehrere Pageviews.

WWAPWAPWAPWAPWAP»Wireless Aplication Protocoll«. Protokoll, dasähnlich wie HTTP die Kommunikation undDarstellung auf mobilen Geräten wie Handysregelt

WAVWAVWAVWAVWAVDateiformat für Audiodateien

WebspaceWebspaceWebspaceWebspaceWebspaceServerplatz bei einem Provider, um dort eineWebsite zu hosten

WebtrackingWebtrackingWebtrackingWebtrackingWebtrackingVerfahren, um Besuche (Visits), Seitenaufrufe(Pageviews) und ähnliche Daten über die Be-sucher einer Website gefiltert auszuwerten

WYSIWYGWYSIWYGWYSIWYGWYSIWYGWYSIWYG»What you see is what you get«, umständlicheUmschreibung für die Möglichkeiten grafikori-entierter Webeditoren

.

224 Index

Index

.

AAccess Provider 214Account 214Ad Click 214Ad Click Rate 214Adobe After-Effects 138Agentur 173, 212Aktionen 130Allianz 31Amazon 168, 175Animated Banners 142Animated GIF 214Animation 64, 114

Aufgaben 64Dekoration 64Umsetzung 68Zeichentrickanimation 70

Animationsarten 68Apple-Shop 178Application Service Provider 174Applikation 185Applikationsdesign 185Arbeitsgruppe 108ASP 174Attachment 214Avatar 214

BBackbone 215Backup 215Bandbreite 215Bandwidth 215Banken 182Banner 141

Grundlagen 143Konzeption 138

Bannerarten 141Bannerentwicklung 140, 146

Historie 140Batch-Prozesse 83Benchmark 208, 215Benutzerführung 19, 27, 210Beratung 170Berichtsansicht 110Beta 215

Bewegung 126Bild-für-Bild-Animation 120Bildbearbeitung 76Bildformate 61

mit Fireworks 82Bildrechte 63, 211Bit 215Bookmark 215Branding 26, 160, 193Broadband 215Browser 215Bug 216Bullshit-Bingo 216Button 216Byte 216

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

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

Dithering 61, 217DNS 217Domain 217Domain Name Server 217Download 218Dpi 218Dreamweaver 35, 89, 90, 211

Bild 96DHTML 126Document-Fenster 90Farben festlegen 94Fenster 90Frames 99Modifikationen 98Objekte-Palette 90Palette 90Palette Eigenschaften 92Randbreite 95Rollover-Effekte 35Schriftarten 53Seiteneigenschaften 94Text 96

Dresdner Bank 189Dynamic HTML 72Dynamic Hypertext MarkupLanguage 217Dynamisches HTML 126

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

FFake Banners 142FAQ 218Farbe 58

websafe 209Farbindizierung 61

.

225Index

.

Farbsysteme 58Feedback 187, 218File Transfer Protocol 219Film, interaktiv 114Finanzdienstleister 182Firewall 218Fireworks 82

Arbeitsbereich 82Flash 71, 114, 143

Bibliothek 118Bibliotheksfenster 116Fenster 115Film 120Gitternetz 117Hauptfenster 115Instanzeigenschaften 121Paletten 115Symbol 117Symbolleiste 115Veröffentlichen 122

Flash-Animationen 84Flash-Player 114Flat Banners 140, 141Flat Rate 218Flexibilität 27Fonts 52, 80Form 219Formatvorlagen 16Formular 186, 219Forrester, Studien 208Frames 48, 99, 209

HTML-Code 99Frames (Animation) 85FrontPage 108, 211

Arbeitsbereich 110fertige Designs 113Miniaturbilder 112Pipette 112Standardisierung 108

FTP 219FTP-Server 219

GGateway 219GfK-Gruppe 208GIF 61, 82, 210, 219

Text als GIF 56GIF-Animation 68, 84, 114, 142Gigabyte 219Girlshop 169

GoLive 104, 211Arbeitsbereich 104Dokumentenfenster 105Meta tags 153SmartObjects 104WebDAV 104

Grids 106Grundraster 45GUI 186

HHand-held Computer 219Hausschrift, im Web 211Head 153Hexadezimalsystem 59, 209Hexadezimalwert 209Hilfe-Systeme 187Hintergrund, Ladezeit 212Hintergrundbild 94Hintergrundfarbe 94Hintergrundmusik 209Hitparade 211Homebanking 219Homepage 219Host 219HTML 15, 143, 219

Farbpalette 60Stile 51

HTML-Editor 211HTML-Palette 59HTTP 15, 219Hyper Text Markup Language 219Hyperlink 19, 219

IIcon 219Information Highway 220Intelligente Assistenten 220Interactive 220Interactive Banners 137, 143Interface 19, 68, 220

Gruppierend 22Halblinear 21Kaskaden 20User-spezifisch 23

Interface Design 18Internet 220Internet Service Provider 174Internet-Nutzer 220Internetauftritt, Fragen 208

Interstitial Ads 143Intranet 156, 220

Aufgaben 156Einsatz von FrontPage 113grundlegende Regeln 157

Intro-Animation 66IP-Adresse 220ISP 174

JJava 70, 140, 143, 186, 220JavaScript 70, 126, 143, 220JPEG 62, 81, 83, 210, 220

reduzieren 210

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

LLadezeit 25, 209

verringern 209Launch 220Layer 85, 130Layout 42, 51

mit GoLive 106Linearität 186Links 51, 220Login 221

MMacintosh 34

Farbpalette 60Schriftarten 52

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

.

226 Index

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

NNanosites 143Navigation 30

dynamische 31gebrannte Schrift 33Metaphern 32statische 31Systemelemente 33Systemtext 33Werkzeuge 32

NavigationselementeAktive 34

Navigationssystem 30, 210Netiquette 221Netradio 33New Media 221Newsgroup 221Newsletter 221Nonlinearität 18

OOne-2-One 38Online-Kampagne 139, 146

Ziele 139Online-Shops 168Online-Werbung 136, 192

Nachteile 137Vorteile 137Zukunft 148

Open Source 221OS 221

PPackshots 172Page Impression 221PalmOS 186PalmPilot 186Personalisierung 183, 191, 222Pfad

absolut 93relativ 93

Photoshop 76Document-Fenster 76Ebenenpalette 78Grafiken 81

Jpeg 81Kopieren 81Screenfonts 80Webfunktionen 76Werkzeugpalette 78WWW-Palette 79

Pixelschubser 222Plug-In 222Pop-UP-Fenster 222Popup Ads 143Portal 190, 192, 193Proxy-Server 222Pull 222Pull-Information 136Push 222Push-Verfahren 136

QQuickTime 72QuickTime VR 72

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

SSatzlayout 50Schlipsträger 222Schlüsselwörter 152Schriftarten 52Schriftgrößen 54Screendesign 25Server 222Shockwave 71Shop 168Shop-Systeme 31, 173Sicherheit 182Sicherheitsrisiken 172Site 222

Sprache 211Sitestruktur 37Siteverwaltung, mit GoLive 106

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

Liste der 154Systemelemente 33

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

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

VVektorgrafik 114Verhaltensweisen 130Versicherungen 182VGA 223Visit 223

WWahrnehmung 50WAP 223WAV 223Web-Announcing 152Webeditoren 88

.

227Index

WebsiteGestaltung 208Planung 208

Webspace 223Webtracking 137, 223Webwasher 139Werbeträger 136, 137, 215

Wettbewerber 208Windows 34

Farbpalette 60Schriftarten 52

WWW 14WYSIWYG 88, 223

YYahoo 185

ZZielgruppe 22, 23, 37, 208

.

Documents

Webdesign professionell - Expertenstrategien und Tipps von Pixelpark, frogdesign und Echopool GERMAN