SUCHE MIT Google
Web virtualuniversity.ch
HOME DIDAKTIK ECDL ELEKTRONIK GUIDES HR MANAGEMENT MATHEMATIK SOFTWARE TELEKOM
DIENSTE
Anmeldung
Newsletter abonnieren
Sag's einem Freund!
VirtualUniversity als Startseite
Zu den Favoriten hinzufügen
Feedback Formular
e-Learning für Lehrer
Spenden
Autoren login
KURSE SUCHEN
Kurse veröffentlichen

Suche nach Datum:

Suche mit Schlüsselwort:

Suche nach Land:

Suche nach Kategorie:
PARTNER
ausbildung24.ch - Ausbildungsportal, Seminare, Kursen... 

 
HTMLopen.de - Alles was ein Webmaster braucht

 
PCopen.de - PC LAN Netze und Netzwerke - alles was ein IT Profi und Systemtechnicker braucht

GUIDES UND TUTORIAL

Design-Regeln

Zweck des World Wide Web ist es immer noch, untereinander verknüpfte Informationen bereitzustellen. Natürlich sollen die Webseiten keine Textwüsten auf Einheitsgrau sein, aber auf der anderen Seite sind Seiten, auf denen es an allen Ecken und Enden zappelt, genauso abschreckend. Deshalb folgen nun ein paar Tips für Webseiten-Designer.

Egal, ob das WWW-Angebot eine 'Textwüste' wird oder ob man es schrillund bunt gestaltet, man muß sich Gedanken über die Stukturdes Angebotes machen. Dabei gibt es zwei Möglichkeiten :

  • Ein flaches Angebot, bei dem von der Startseite (Homepage) viele Verzweigungen ausgehen und dort nach ein oder zwei Stufen das Ende erreicht ist.
  • Ein tiefes Angebot, bei dem wenige Links von der Homepage in jeweils tief verzweigte Strukturen münden.
Meist wird sich eine Mischform ergeben. Eine 'Textwüste kann man relativ einfach auflockern, indem man ein paar kleine Bilder einstreut.

Beim Gestalten einer HTML-Seite sollte man auch an das Bildschirmformat denken. Mehr als eine Schreibmaschinenseite sollte eine einzelne Webseite nur dann sein, wenn es sich um einen zusammenhängenden Text handelt. Übergeordnete Seiten sollte in der Regel auf einen Bildschirm passen.

* Empfehlungen für das Gestalten von HTML-Seiten

  • Verwenden Sie im Title-Tag möglichst viele ausdruckstarke Begriffe, die auch wirklich auf den Inhalt Ihrer Seite zutreffen. Suchmaschinen berücksichtigen zumindest den Title-Tag.
  • Formulieren Sie Ihre Texte kurz und verständlich. In der Regel sind Singular- und Präsens-Formulierungen angebracht.
  • Vermeiden Sie lange, unstrukturierte Texte. Jeder lange Text läßt sich über eine Einstiegsseite mit Inhaltsverzeichnis (das gleichzeitig als Link dient) in kleinere Einheiten zerlegen.
  • Organisieren Sie die Texte Ihres Dokumentes im Hinblick auf die Inhaltsschwerpunkte. Diese Passagen sollten möglichst schnell aufzufinden sein. Verteilen Sie eine Aussage (Informations-Granulat) nicht auf mehrere Dokumente. Strukturieren Sie die Dokumente.
  • Versuchen Sie Dokumente zu vermeiden, deren Verständnis von vorhergehenden und nachfolgenden Dokumenten abhängen. Schreiben Sie möglichst kontextunabhängige Dokumente.
  • Gruppieren Sie zusammengehörende Informationen in semantischer Sicht durch eine zweckmäßige Gliederung und in visueller Sicht durch Überschriften und Auflistungen.
  • Gehen Sie sparsam mit Hervorhebungen durch Fettdruck, Kursivschrift, Text in Großbuchstaben und langen Links um. Benutzen Sie Hervorhebungen nur, wenn diese das Auffinden und Verstehen verbessern.
  • Halten Sie das Layout der Seite übersichtlich, das heißt im Regelfall so einfach wie möglich. Verwenden Überschriftstags (H1...H6) zur Hervorhebung und Aufzählungen.
  • Benutzen Sie ein einheitliches, konsistentes Layout über alle Dokumente einer Publikation. Das vereinfacht auch die Erstellung neuer Seiten (z. B. Verwendung fertiger Kopf- und Fußteile).
  • Wenn Sie vorhandene Textdateien mit einem Konverter-Programm aufbereiten, dann ist ein Nachbearbeiten auf jeden Fall erforderlich.
  • Lassen Sie deutlich erkennen, dass ein Link auch ein Link ist. Unterstreichen Sie also keinen Text. Grafiken sollten aussagekäftig sein, und nicht die Ladezeit Ihrer Seite unnötig verlängern.
  • Verlinken Sie auf themenverwandte Seiten. Sie erhöhen nicht nur die Zugriffszahlen derjenigen Seiten, sondern auch die Attraktivität Ihrer eigenen Seiten.
  • Gestalten Sie Ihr internes Menusystem (Linksystem) einheitlich. Erschweren Sie Ihrem Besucher die Navigation nicht durch viele verschiedene Navigationssysteme.
  • Bringen Sie innerhalb der Verzweigung logische Querverweise an. Dazu gehören auch sogenannte 'Shortcuts' (Verweise zu häufig benötigten Stellen). Die Realisierung kann z. B. durch eine Kopfleiste am Anfang oder am Ende jeder Seite erfolgen, die alle 'Shortcuts' enthält.

* Aktualität

Ein Webangebot muß möglichst aktuell sein - wie eine Tageszeitung. Liefern Sie Ihren Lesern handfeste Informationen. Langatmiges Geschwafel sorgt dafür, daß kaum jemand weiterliest. Sorgen Sie für Quervernetzung der einzelnen Seiten. Schließlich sollten die Daten und Infos aktuell sein und ständig ergänzt werden. Denn auf einer seit Monaten nicht mehr aktualisierten Homepage läßt sich ein Surfer so schnell nicht mehr blicken. Bieten Sie Seiten wie "News" oder "Aktuelles" nur an, wenn Sie diese ständig pflegen wollen und können. Nichts ist so peinlich wie "Alles Gute zum Neuen Jahr" auf der News-Seite im Monat Juni. Deshalb versprechen Sie auch nichts, was Sie nicht halten können.

* Versprechen Sie nichts, was Sie nicht halten können

Links, die auf ein Baustellenschild führen, verärgern den Leser wie leere Versprechungen. Der Surfer sieht einen vielversprechenden Querverweis, klickt ihn an und dann? Nichts! Niente! Wenn das Angebot noch so rudimentär ist, daß man ein Baustellenschild aufstellen müßte, dann sollte man es noch nicht zeigen. Besser ist es bei Menüs, den entsprechenden Verweis als ganz normalem Text zu belassen. Dann sieht der Besucher: "Da kommt demnächst was." und er wird mal wieder nachsehen kommen. Wenn natürlich monatelang das Link nicht mit Info gefüllt wird, dann ist es auch schlecht. Auf lange Sicht werden nur die Server im Netz überleben, die echte Informationen bieten, die gut aufbereitet sind. Ansonsten ist ein WWW-Angebot ständig im Umbau - also nichts, was man extra erwähnen müßte.

* Bunt und zappelig

Das sind WWW-Seiten, auf denen sich an allen Ecken und Enden etwas bewegt: blinkende Schrift, animierte GIFs, Laufschrift. Seit animierte GIFs erfunden wurden, zappelt es allenthalben. So schön es für einen selbst sein mag, animierte Bilder auf seiner Homepage zu sehen, so nervig ist es für Besucher, die sich häufig im Web herumtreiben. Außerdem ziehen Bewegungen auf der Webseite zuviel Aufmerksankeit auf sich und stören auf Dauer beim konzentrierten Lesen des restlichen Textes. Verzichten Sie also auf die Wackelbildchen. Ein knalliges 'NEU' reicht schon, es muß nicht noch blinken. Laufschriften sind für Schnelleser zu langsam und für Langsamleser zu schnell - also so oder so ungeeignet. Ein Icon oder eine Grafik wirken genauso gut.

Apropos Icons: Es gibt massenhaft Icon-Sammlungen, aus denen man sich bedienen kann. Noch besser ist es aber, wenn man sich die Sinnbilder selbst malt. Das ist gar nicht so schwer. Fangen Sie doch damit an, ein vorhandenens Icon zu modifizieren. Übrigens reichen für ein Icon normalerweise 16 - 32 Farben - dadurch wird die Bilddatei nicht nur kleiner, sondern es gibt auch keine Probleme mit der Darstellung beim Surfer, wenn dessen Grafik nicht dem letzten Stand der Technik entspricht.

Waagrechte Linien: Keine Zeitschrift und kein Buch strukturiert seinen Inhalt durch waagrechte Linien. Wenn sie nicht gezielt als Gestaltungselement dienen sollen, sind sie nur von Übel - egal, ob sie mit <HR> erzeugt oder ob sie durch farbige GIF-Bilder dargestellt werden.

* Bilder

  • Riesige Bilder: Man kann mit einem kleinen Übersichtsbild (sogenanntes 'Thumbnail') auf ein großes Bild verweisen. Noch besser ist eine Größenangabe (in KByte) zum Thumbnail dazu. Geradezu verdammungswürdig sind Bilder, die relevanten Text enthalten.
  • Die Browser verstehen zumindest die beiden Grafikformate GIF (*.gif) und JPEG (.jpg). Setzen Sie JPEG für große Bilder mit vielen verscheiden Farben und Farbübergängen ein. Das GIF-Format eignet sich für kleinere Grafiken, wie zum Beispiel Icons oder Buttons. Sind Sie sich nicht sicher welches Format das richtige Format ist, so testen Sie beide Formate.
  • Verwenden Sie das ALT-Attribut für IMG-Tags. Der Benutzer wird während der Ladezeit oder bei aisgeschalteter Bildanzeige über das informiert was hinter der Grafik steckt. Auch wenn der Mauscursor etwas länger über dem Bild verweilt, wird der ALT-Text angezeigt. Dadurch kann man dieses Feature für eine griffige Bilderklärung verwenden. Notfalls nehmen Sie ALT="".
  • Vergessen Sie auch nicht die Größenangaben für Ihre Grafiken. Mit den den Tags WIDTH und HEIGHT teilen Sie dem Browser mit, wie groß die zu ladenden Grafiken sind. Es wird ein Rahmen für die noch nicht sichtbaren Grafiken dargestellt und so die Seite schon wärend des Ladevorganges korrekt aufgebaut.
  • Wenn Sie für Ihre Navigationssystem eine Imagemap vorsehen, so denken Sie daran, daß manche User sich die Seiten ohne Grafiken betrachten. Stellen Sie also alternativ eine Textversion zur Verfügung.
  • Bedenken Sie bei der Konzeption Ihrer Webseiten daran, daß noch nicht jeder über eine High-Speed ISDN-Leitung verfügt, und verzichten Sie auf unnötige Grafiken.

* Frames

Bei Frames scheiden sich die Geister. Puristen sagen, wer Frames benutzt, sei einfach nicht in der Lage, sein Angebot zu strukturieren. Das ist sicher bei manchen Angeboten richtig. Auf der anderen Seite kann der sparsame Einsatz von Frames das Navigieren durch die WWW-Seiten zu erleichtern. Nachteil ist auf jeden Fall, daß sich Infos, die innerhalb eines Frames dargestellt werden, nicht einfach in die 'Bookmarks' übernommen werden können.

Viele Programmierer stellen mit dem FRAME-Tag Unfug an. Auf einer Seite sollten sich maximal drei Frame-Abteilungen tummeln. Ein Frame kann dabei generelle Navigationswerkzeuge für die Homepage vorhalten, der zweite Frame birgt einen Stichwort-Index und der dritte zeigt den eigentlichen Inhalt. Mehr Frames braucht niemand.

Verlinken Sie auf externe Seiten Seiten, so sollte eindeutig sein, daß der Inhalt derjenigen Seite nicht von Ihnen ist. Wenn ein Link zu einem anderen Server führt, laden Sie dieses Link nicht innerhalb des Frames. Das schränkt die dargestellte Fläche der angesteuerten Seite ein. Laden Sie fremde Seiten grundsätzlich mit der Option target= "_parent" oder target="_blank" im <A HREF=...>-Tag.

* Farben

Noch immer gibt es grafisch unempfindliche Naturen, die hellblaue Schrift auf knalligem Rot für chic halten. Über Ästhetik mag man streiten, nicht aber über Lesbarkeit. Und diese Farbkombination ist ebenso ätzend wie Gelb auf Grün oder Pink auf Hellblau. Als optische Killer Nummer zwei haben sich Hintergrundgrafiken erwiesen. Ein im Grafikprogramm kontrastarm aussehendes Bild kann im Browser stärker stören als vorgesehen, insbesondere wenn der Browser dithert. Denken Sie auch an die immer noch zahlreichen Benutzer im Netz, die vor Graustufenmonitoren sitzen. Am besten verwenden Sie in der Regel dunkle Schrift auf hellem Grund.

Wählen Sie für Ihre Links eine deutlich andere Farbe als die Textfarbe.

Gestalten Sie alle Ihre Links in der gleichen Farbe, es sei denn, Sie können deutlich zum Ausdruck bringen, daß auch der anderfarbige Link ein Link ist. Bei den Benutzern hat die blaue oder violette Farbe und die Unterstreichung für Links einen hohen Wiedererkennungswert. Die Farbe kann der allgemeinen Erscheinung Ihrer Webseite angepaßt werden, auf die Untersteichung sollten Sie jedoch nicht verzichten.

Wählen Sie im BODY-Tag nicht die gleichen Farben für Link (LINK), visited Link (VLINK), animated LINK (ALINK). Ein Link erhält die VLINK-Farbe, wenn dieser bereits besucht wird. Die ALINK-Farbe erscheint solange der Link gedrückt ist. Für ALINK empfiehlt sich eine Farbe, die in der Nähe der LINK-Farbe liegt.

* Bewahre uns vor Plug-ins

Shockwave hier, Real Audio da, usw. An jeder Ecke wachsen neue Plug-Ins. Und jeder Autor verwendet einen anderen Multimedia-Standard, für jede Homepage benötigt der Surfer andere Plug-Ins. Das alles kostet nicht nur Download-Zeit, sondern müllt dem Besucher der Homepage auch die Platte voll. Dazu kommen höhere Hardwareanforderungen, Inkompatibilitäten der Plug-Ins untereinander und mögliche Softwarefehler. Überlegen Sie also, ob Multimedia-Erweiterungen wirklich nötig sind.

* Nutzlose Applets

Die Anzahl der nutzlosen Applets und Scripts steigt expotentiell. Dabei handelt es sich um Besucher-Zähler, Lauftexte oder Animationen. Solche Applets und Scripts können nützlich sein, beispielsweise für Suchsysteme, Pull-Down-Menüs zur Benutzerführung und zur Prüfung von Formularen. Bedenken Sie jedoch, daß durch Viren und "trojanische Pferde" die Scripts bei den Benutzern in Verruf geraten sind und oft im Browser deaktiviert wurden. Verwenden Sie Scripts also sparsam oder überhaupt nur im Intranet. Und bevor Sie das Javascript-Laufband auf Ihrer Homepage unterbringen, bedenken Sie, daß andere User dasselbe tun. Der Renner unter den Nutzlosigkeiten ist jedoch der Besucherzähler, der bei jedem Aufruf Ihrer Homepage verändert wird. Das verhindert nämlich, daß die Seiten im Proxy-Cache eines Providers zwischengespeichert werden können, und der Surfer bessere Ladezeiten bekommt. Besser ist es, eine Serverstatistik zu veröffentlichen, die täglich oder wöchentlich aktualisiert wird.

* Testen Sie Ihre Homepage

Nichts ist peinlicher als eine fehlerhafte Homepage. Und Bugs schleichen sich schnell ein. Was auf Ihrem Rechner lokal noch nett aussieht, kann sich bei einer kritischen Probefahrt schnell als grauenhaft herausstellen. Die wichtigsten Tests:
  • ohne Grafik: Viele Surfer haben bei ihrem Trip durchs Web die Grafikdarstellung abgeschaltet. Stimmt die Seitenaufteilung noch, wenn die Grafiken Ihrer Homepage ausgeknipst sind?
  • Browser-Kompatibilität: Internet-Explorer und Netscape Navigator interpretieren einige Tags unterschiedlich. Probieren Sie auch aus, wie Ihre Homepage mit beiden Browsern aussieht. Probieren Sie es auch mal mit einem Textbrowser (z. B. Lynx).
  • Rechtschreibung: Lassen Sie Ihre Homepage gegenlesen, und nutzen Sie Rechtschreib-Programme.
  • Links ins Nichts: Testen Sie regelmäßig alle Links auf Ihrer Homepage.
  • Struktur: Stimmt die Struktur Ihres Servers? Findet der User von jeder Unterseite auf die Homepage zurück? Gibt es genügend Querverweise? Viel Web-Angebote sind reine Menüsysteme.
  • Erreichbarkeit: Haben Sie ein Mail-Link zu Ihrer E-Mail-Adresse auf die Seite gepackt? Gibt es einen Maillink zum Webmaster?

DIPLOMARBEITEN UND BÜCHER

Diplomarbeiten zum Runterladen:

Suche im Katalog:
Architektur / Raumplanung
Betriebswirtschaft - Funktional
Erziehungswissenschaften
Geowissenschaften
Geschichtswissenschaften
Informatik
Kulturwissenschaften
Medien- und Kommunikationswissenschaften
Medizin
Psychologie
Physik
Rechtswissenschaft
Soziale Arbeit
Sozialwissenschaften


JOBS
HOME | E-LEARNING | SITEMAP | LOGIN AUTOREN | SUPPORT | FAQ | KONTAKT | IMPRESSUM
Virtual University in: Italiano - Français - English - Español
VirtualUniversity, WEB-SET Interactive GmbH, www.web-set.com, 6301 Zug

Partner:   Seminare7.de - PCopen.de - HTMLopen.de - WEB-SET.com - YesMMS.com - Ausbildung24.ch - Manager24.ch - Job und Karriere