Workshop 1

3D Button mit PHOTOSHOP

Photoshop ist nicht nur ein mächtiges Bildbearbeitungsprogramm. Seine zahlreichen Funktionen ermöglichen auch einfaches grafisches Arbeiten.
Wie Sie in diesem Workshop sehen werden, können Sie mit dem Verlaufswerkzeug auf einfache Weise in nur sechs Schritten 3D Buttons für Ihre eigene Homepage erstellen.

1. SCHRITT

Öffnen Sie das Bildbearbeitungsprogramm PHOTOSHOP.
Als erstes erstellen Sie eine neue Datei (STRG+N) mit einer Höhe einer Breite von 100 Pixeln. Stellen Sie in der Werkzeugleiste die Vordergrundfarbe auf Weiß und die Hintergrundfarbe auf Schwarz.

2. SCHRITT

Erstellen Sie mit dem Auswahloval aus der Werkzeugleiste einen Kreis.

3. SCHRITT

Wählen Sie das Verlaufswerkzeug aus der Werkzeugleiste und stellen die Optionen ""Verlauf auf Vorder- zu Hintergrundfarbe und "Art" auf kreisförmig. Füllen Sie nun den Kreis, in dem Sie von links oben nach rechts unten (innerhalb der Auswahl) mit der Maus (gedrückte Maustaste) ziehen.

4. SCHRITT

Verkleinern Sie die immer noch vorhandene Auswahl um 5 Pixel (Folgende Schritte sind dazu in der Menüleiste nötig: Auswahl > Auswahl verändern > Verkleinern). Füllen Sie dann die kleinere Auswahl wie in Schritt 3, nur dass Sie diesmal von rechts unten nach links oben ziehen.

5. SCHRITT

Verkleinern Sie die immer noch vorhandene Auswahl um weitere 3 Pixel und wiederholen die Verlaufsfüllung wieder in die andere Richtung wie in Schritt 3.

6.SCHRITT

Fügen Sie nun noch mit dem Textwerkzeug einen Text in passender Größe hinzu und fertig ist der 3D Button.

Für eine Navigation ist der eben erstellte 3D-Button in der Regel zu groß. In diesem Fall erstellen Sie eine kleine Datei, z.B. 50 x 50 Pixel und vollziehen die Schritte erneut nach. In diesem Fall müssen Sie die Auswahl allerdings ebenfalls entsprechend verkleinern. Also im 4.Schritt nur um 3 Pixel, im 5.Schritt um 1 Pixel.
Auch andere Farbgebungen sind natürlich möglich.
Probieren Sie einfach etwas aus.

 

Downloadversion

Der obige Text steht auch als Download (PDF-Datei, ca. 600 KB) für Sie bereit.

 

Tipp 1

Zehn wirkungsvolle Möglichkeiten Ihre Besucher nachhaltig zu verärgern

1. Wiederholte PopUps

Sie zählen zu den größten Ärgernissen: Werbefenster, die sich unaufgefordert öffnen. Wenn sie sich schon nicht vermeiden lassen, sollten Sie einen Timer einbauen, der die ungeliebten Gäste nach kurzer Zeit verschwinden lässt (Sehen Sie dazu auch Workshop 2 oben).

2. Mehr als eine Animation

Wenn es an mehreren Stellen gleichzeitig blinkt oder tickert, fällt es schwer die Konzentration auf den eigentlichen Inhalt zu lenken. Dem überforderten Besucher bleibt dann nur die Flucht.

3. Zu kleiner Text

Minischrift gilt im Webdesign immer noch als trendy, vor allem dann, wenn möglichst viel auf eine Site gepackt werden soll. Allerdings werden längere Texte nahezu unlesbar, kürzere brauchen mehr Zeit, um gelesen zu werden. Ganz sicher kein Vergnügen. Minimum bleibt 12px als Schriftgröße für längere Fließtexte.

4. Links, deren Beschreibung etwas anderes erwarten lässt oder "tote" Links

Der Nutzer fühlt sich betrogen, wenn ein Link nicht zum Erwarteten führt. Verantwortlich sein kann eine nicht durchdachte Betextung (Wording), aber auch die Absicht den Besucher auszutricksen. Zur gleichen Kategorie gehören getarnte Links, die unangekündigt auf Werbeseiten oder Partnerprogramme führen.
"Tote" Hyperlinks - das sind fehlerhaft verknüpfte Links - kommen weitaus häufiger vor, als nötig wäre. Abgesehen von falscher Verlinkung und inzwischen nicht mehr vorhandenen Zielen, tragen Javascript und serverseitige Programmierungen ihren Teil bei. Javascript, weil es nicht immer zuverlässig mit jedem Browser funktioniert und serverseitige Scripte, weil sie manchmal einfach zu langsam sind. Da hilft nur: testen, testen, testen...
Und: Vermeiden Sie Links hinter denen sich eine "Under construction" oder "Hier finden Sie bald…"-Seite verbirgt. Warten Sie stattdessen bis alles fertig ist und stellen Sie Ihr komplettes Angebot ins Netz. Ihre Besucher werden es Ihnen danken.

5. Keine Kontaktmöglichkeiten oder Zwangsformulare

Ärger ist die unausweichliche Folge, wenn weder ein Formular noch eine Emailadresse gefunden werden können, obwohl der Besucher Kontakt aufnahmen möchte.
Und ganz wichtig: Auch wenn Sie in der ersten Laufzeit Ihrer neuen Website nur alle Jubeljahre eine E-Mail erhalten sollten, checken Sie die Mails täglich. Nichts ist schlimmer, als eine Kundenanfrage, die unbeantwortet bleibt!
Auch Formulare, die zuviel persönliche Daten abfragen oder einem nicht genau benannten Ziel vorausgestellt sind, verärgern den Besucher.

6. Der Klassiker: Zu lange Ladezeiten

Nicht jeder hat einen superschnellen DSL-Anschluss. Doch ärgerliche Wartezeiten entstehen nicht nur durch voll gestopfte Seiten und übermäßigen Gebrauch von zu großen, nicht komprimierten Grafiken oder riesigen Flash-Dateien (siehe dazu auch Punkt 2). Auch billige oder überlastete Server können zum Problem werden.

7. Best viewed...

Niemand Ihrer Besucher interessiert sich, für welchen Browser oder Bildschirmauflösung Ihre Seite optimiert ist. Wenn man bei jeder Seite, die man aufruft, die Einstellungen ändern oder den Browser wechseln müsste, bliebe für das Surfvergnügen wenig Zeit. Also optimieren Sie für die gängigsten Browser und nicht nur für den Internet Explorer.
Und: Multimedia-Designer mögen "Flash"-Animationen, Ihre Besucher teilen diese Vorliebe nicht immer. (siehe dazu auch Punkt 6). Sie müssen schon einen Mehrwert besitzen oder besonders Wichtiges anzubieten haben, wenn Sie ein Plug-In als Eintrittskarte verlangen dürfen.

8. Veraltete Informationen

Pflegen Sie Ihre Web-Seiten regelmäßig. Veraltete Informationen garantieren ein sofortiges Verlassen Ihrer Site, denn die Besucher wissen ja nicht, ob Ihr Unternehmen überhaupt noch existiert. Auch externe Hyperlinks müssen regelmäßig überprüft werden (siehe auch Punkt 4).

9. Automatische Änderung der Fenstergröße

Manche Webdesigner optimieren gerne für große Monitore (an denen sie selber arbeiten) und wollen mittels Javascript sicherstellen, dass die Besucher ihre Seiten in voller "Schönheit" zu sehen bekommen. Doch Webseiten werden nicht für Designer erstellt, daher ist es vielleicht sogar das schlimmste "Webdesignverbrechen" von allen, denn das ist ein unverzeihlicher Eingriff in die Autonomie des Nutzers. Außerdem bleiben die veränderten Browsereinstellungen nicht selten noch eine ganze Weile erhalten und können nur durch beenden des Browserprogramms zurückgesetzt werden.

10. Frames?

Seien Sie sehr sorgfältig bei der Verwendung von Frames. Vermeiden Sie die Anzeige von Scrollbalken bei kleinen Frames, aber denken Sie auch daran, dass nicht alle Besucher mit hoher Auflösung und großen Monitoren Ihre Seite aufrufen.
Und bedenken Sie: Suchmaschinen haben immer noch Probleme mit Frames. Schaffen Sie daher auf jeder Seite eine Möglichkeit zur Startseite zurückzukehren, falls nicht das komplette Frameset aufgerufen werden sollte oder nutzen Sie javascript, um immer den kompletten Framebereich aufzurufen.

 

Workshop 2

Selbstschliessendes PopUp-Fenster

PopUps zählen nicht unbedingt zu den beliebtesten Erscheinungen des Internets.
Dennoch können Sie manchmal sinnvoll sein, wenn Sie z.B. auf Neuigkeiten hinweisen wollen, ohne gleich Ihre ganze Internetpräsenz verändern zu müssen.
Wie Sie in diesem Workshop sehen werden, gelingt es mittels Javascript ein selbstschliessendes Fenster für Ihre eigene Homepage zu erstellen, dass auch über den Bildschirm schweben kann.
Das Script funktioniert in allen gängigen Browsern, es sei denn der Besucher hat einen PopUp-Blocker aktiviert. In diesem Fall bleibt Ihr Fenster leider unsichtbar.

1. SCHRITT

Erstellen Sie das Fenster, das später aufgerufen werden soll, als eigene HTML-Datei.
Falls Sie eine Grafik einbinden wollen, achten Sie auf deren Größe. Da die Größe des PopUps festgelegt ist, kann es Ihnen sonst passieren, dass ein Teil der Grafik verschwindet oder gescrollt werden muss. Die Größe kann zwar angepasst werden, wie Sie den Erläuterungen des Scripts weiter unten entnehmen können, aber Sie sollten das Fenster auch nicht zu aufdringlich gestalten.

2. SCHRITT

Fügen Sie folgendes Javascript in den Head-Bereich der HTML-Datei Ihrer Website ein, von der aus das Popup aufgerufen werden soll:

<script type="text/javascript">
<!--
var x = 100;
fenster = window.open("dateinamePopUp.html","Neu",
"width=200,height=100,left=x,top=100");
function bewege()
{
if(x<screen.width - 200)
{
x++;
fenster.moveTo(x,100);
setTimeout("bewege()",50):
}
else
fenster.close();
}
//-->
</script>

Um die Javascript-Funktion aufzurufen muss im Body-Tag der Befehl onLoad="bewege()" eingefügt werden.
Damit bewegen Sie ein kleines Fenster über den Monitor, dass sich automatisch schließt, wenn es em rechten Bildrand angekommen ist. Durch den Befehl fenster=window.open wird beim Öffnen der Internetseite das PopUp automatisch geöffnet.
Über width und height legen Sie die Größe des Fensters fest.
Der Abstand vom linken Bildschirmrand wird durch left bestimmt. In diesem Fall wird es durch die Variable X definiert. Mit top wird der Abstand vom oberen Bildrand festgelegt.
Durch die onLoad-Funktion im Body-Tag wird die Bewegung initiiert. screen-width überprüft die Bildschirmbreite. fenster.moveTo verschiebt das PopUp zum rechten Bildschirmrand. setTimeout bestimmt die Geschwindigkeit.
Hat das Fenster den rechten Bildschirmrand erreicht, sorgt fenster.close dafür, dass das PopUp verschwindet. Der Besucher Ihrer Internetseite muss es also nicht extra wegklicken. Und nicht vergessen den Platzhalternamen dateinamePopUp.html durch Ihren eigenen Dateinamen zu ersetzen.

Downloadversion

Der Workshop steht auch als Download (PDF-Datei, ca. 20 KB) für Sie bereit.

 

Tipp 2

Flash & Co - Animationen im Web

Sehen Sie etwas?

Wenn Sie gerade eine Text-Animation sehen, dann gehören Sie zu den Internetnutzern, die mit einem Browser der neueren Generation unterwegs sind. Oder Sie haben ein sogenanntes "Flash-Plug-In" nachinstalliert.

Sie sehen nichts?

Dann gehören Sie zu der zahlenmäßig nicht kleinen Gruppe von Websurfern, die eine Flash-Animation nicht sehen können, weil Ihr Browser sie nicht anzeigt.
Die folgende Text-Animation sehen Sie ganz bestimmt:

Hierbei handelt es sich um eine GIF-Animation, die jeder Browser anzeigt.

Was bedeutet das nun alles für Ihre zukünftige Website?

Nun, Flash-Animationen zählen zum liebsten Spielzeug eines "modernen" Webdesigners und immer mehr Websites (und deren Betreiber) glauben nicht mehr ohne auskommen zu können.
Doch bevor Sie sich für diese Animationsform entscheiden, sollten Sie sich folgende Fragen stellen:

• Welchen konkreten Nutzen erfahren Ihre Kunden durch die Verwendung?
• Welchen zusätzlichen Mehrwert bringt Ihren Kunden der Einsatz?
• Sind die Ladezeiten der Flash-Filme auch für Nutzer mit langsamem Webzugriff noch akzeptabel?
• Nehmen Sie in Kauf, dass Ihre Kunden für das Ansehen der Flash-Filme zuerst ein Plug-In installieren müssen?

Kehren wir noch einmal zu unserem GIF-Beispiel zurück. Eine solche Animation erscheint vielleicht nicht so elegant wie Flash, ist aber eben ohne zusätzliches Plug-In sichtbar und professionell gestaltet kaum größer als eine Flash-Datei.
In dem gezeigten Beispiel ist die GIF-Datei sogar um fast 10kb kleiner.

Aber müssen aufwendige Animationen wirklich sein?

Fast nie, meint der "Usability-Papst" Jacob Nielsen und fasst prägnant zusammen: "Flash: 99% bad". Was bedeutet, dass die meisten Animationen um ihrer selbst realisiert werden und an den Anforderungen der Nutzer vorbei gehen.

So genannte "Flash-Intros" - also Animationen auf der Startseite - zählen inzwischen zu den meistgehassten Erscheinungen, denn in der Regel stehlen sie durch lange Ladezeiten Zeit und Geld. Uund erweisen sich dann zu häufig als überflüssig, da selten mehr als ein paar bunter, nichtssagender Bildchen zu sehen sind, die sich munter hin und her bewegen.

Flash (oder überhaupt jede Animation) zeigt seine Stärke immer dann, wenn es darum geht komplexe Zusammenhänge aufzuzeigen oder interaktiv zu arbeiten (Etwa um ein Produkt elegant von allen Seiten und in verschiedenen Farben zu zeigen - aber auch hier gibt es durchaus akzeptable Alternativen).

Fazit: Flash bietet zahlreiche Möglichkeiten als Mehrwert zu fungieren, wenn es nicht als bunter Selbstzweck gestaltet wird. Verlieren Sie auch hier Ihre Zielgruppe nie aus den Augen! Nicht alles muss man realisieren, nur weil man es kann!