![]() |
![]() |
| Aktuell | |
| Magazin | |
| Software | |
| Praxis | |
| Kommentar | |
| Homepage-Design | ||
Hier erfahren Sie mehr über die goldenen Regeln, die Sie beim Design Ihrer Homepage einhalten sollten, und nach viel Theorie auch über deren praktische Anwendung. | ||
| Der richtige Hintergrund | ||
Die Zeiten, in denen auf allen Seiten das berühmte Netscape-Einheitsgrau als Hintergrung zu sehen war sind längst vorbei, doch wurden die neuen Mittel, die HTML bietet, von vielen Webdesignern stark strapaziert, mit aufwendigen, grellen Grafiken, die neben einer langen Downloadzeit dem Betrachter auch das Augenlicht kosten können. Doch meist läßt sich der gleiche Effekt durch die Auswahl einer Hintergrundfarbe erreichen oder durch ein kleines, simples Hintergrundbild, das über den Bildschirm gekachelt wird. Doch immer mehr Webdesigner sehen bereits ganz von einer bunten Vielfalt ab und entscheiden sich, einen simplen Hintergrund zu verwenden, der nicht vom Text ablenkt! Oder können Sie sich den Newsletter auf violettem Hintergrund vorstellen? | ||
| Bilder und Buttons | ||
Die richtige Verwendung von Grafiken ist mitunter der schwierigste Teil beim Homepage-Design. Seiten ohne Bilder wirken langweilig und uninteressant, zuviele Bilder hingegen überfordern nicht nur den Besucher sondern auch das Modem! Ein besonderer Härtefall sind Bilder, die nicht in die Seite eingebettet erscheinen, sondern, durch einen eindeutigen Rahmen, sofort als hineingequetschtes Bild erkennbar sind. Hier folgende Tips:
| ||
| Animierte GIFs | ||
Gönnen Sie innerhalb von Animations-Loops dem Betrachter nach dem letzten Bild eine Pause von mindestens einer Sekunde. Ohne Unterbrechung laufende Animationen wirken hektisch und unprofessionell mit Ausnahme von zyklischen Animationen wie rotierenden Symbolen. Zur Reduzierung der Größe können Sie auch versuchen, jedes zweite Bild zu entfernen. Bei schnellen Grafiken wirkt sich dies nicht auf das Aussehen aus, nachdem Sie die Anzeigedauer der restlichen Grafiken erhöht haben. | ||
| Schriften | ||
Viele Designer verwenden mittlerweile Grafiken um verschiedene Schriften in verschiedenen Größen anzuzeigen. Verwenden Sie hierfür lieber Cascading Style Sheets die von den beiden großen Browser unterstützt werden, dadurch erzielen Sie die gleichen Effekte, sparen aber Bandbreite und können die Texte viel leichter nachträglich verändern! | ||
| Laxout mittels Tabellen | ||
Anweisungen zur genauen Positionierung von Text und Grafiken sind in HTML beinahe nicht vorhanden. Verwenden Sie hierfür einfach eine Tabelle, die keinen Rand hat. Damit realisieren Sie die kompliziertesten Layouts in Kürze und müssen keine umfangreichen Image-Maps verwenden. Ebenso können Sie damit den Text in zwei Spalten anordnen oder die maximale Breite des Textflusses festlegen. | ||
| Rahmenprogramm | ||
Sind Ihre Seiten umfangreich und in unterschiedliche Rubriken unterteilt, dann sollten Sie Frames einsetzen und Ihrer Homepage eine Navigationsleiste mit den verschiedenen Themen verpassen. Hier können Sie auch gleich Funktionen integrieren, die Überall vorhanden sein sollten: E-Mail-Link, Datum der letzten Aktualisierung und eine eventuelle Copyrightnotiz. | ||
| Scripts, Applets und Comlets | ||
Unter Dynamik verstehen die Meisten blinkenden Text oder große Animationen, doch können Sie viel sinnvollere Animation mittels Scripts, Applets oder ActiveX-Komponenten ( Comlets ) erzielen. So sind mittlerweile viele Komponenten erhältlich, zum Beispiel das berühmte Gästebuch oder der eigene Chat. Unnütz hingegen sind die unzähligen Taschenrechner, Tic-Tac-Toes oder tanzende Buchstaben, denn damit wird kein Besucher seine Zeit verschwenden! | ||
| In Form gebracht | ||
Unter Dynamik kann man aber auch Interaktion verstehen, was sich am einfachsten mit Formularen realisieren läßt. Ein berühmtes Beispiel ist das Feedback-Formular, dessen Daten per ASP ausgewertet und mittels E-Mail an den Autor verschickt werden, jedoch gibt es unzählighe andere Anwendungen. Besonders interessant ist die Möglichkeit, die Daten mittels Scripts zu verwerten. | ||
| Image-Maps | ||
Mit Image-Maps lassen sich ansprechende grafische Auswahlmenüs zaubern. Mittlerweile ist es nun auch kein Problem die Navigation mit Image-Maps durchzuführen, da alle gängigen Browser Client-Side-Image-Maps unterstützen, somit keine Software auf dem Server die Eingaben verarbeiten muß. Für das Erstellen gibt es bereits professionelle Tools, doch auch Paint und ein Blatt Papier genügen, um sich die Koordinaten zu merken. | ||
| Sicheres HTML | ||
Dieser Tip widerspricht einigen der zuvorgenannten Tips, doch muß man hier einen Mittlweg finden. So verwenden einige Benutzer noch ältere Browser, die mit ein paar der hier genannten Funktionen Probleme haben. Hierfür sollten Sie Vorkehrungen treffen. So können Sie zum Beispiel eine Seite mit und ohne Frames anbieten, die Navigationsziele nochmal in Textform an den unteren Rand setzen und animierte GIFs mit dem vollendeten Bild beginnen lassen. | ||
| Copyright © 2000 - 2003 by Daniel Weber & Monika Zeevaert-Senger GbR |