Aktualität und Interaktion

Kennzeichnend für das Medium Internet ist neben der Möglichkeit, aktuelle Inhalte einer sehr hohen Nutzerzahl zur Verfügung zu stellen, einen interaktiven Dialog mit denm Nutzer eingehen zu können.

Während die Aktualität von Inhalten ein wichtiger Anreiz für wiederholte Besuche der Webseite ist, fördert der Dialog mit dem Besucher Erkenntnisse über seine Wünsche (Marktforschung). Je besser man die Besucher kennt, umso besser wird das Angebot auf der Seite.

Formulare sind im Internet eines der wichtigsten Dialogelemente. Daher sollte bei der Gestaltung folgende Regeln beachtet werden...

• Abgeschlossene Dialoge (Die Informationen sollte alle zusammengehörig sein)
• Klare Abgrenzung (Der Dialog sollte optische vom eigentlichen Inhalt getrennt werden)
• Reduzierung der Belastung des Kurzzeitgedächtnisses (Der Dialog sollte den Benutzer nicht überfordern)
• Sprache des Benutzers verwenden (Dialogtexte sollten klar, höflich und verständlich ausgedrückt werden)
• Formulareingabefelder sollten nicht zu kurz sein
• Reale Vorbilder (Computerbasierte Formulare lehnen sich stark an ihre realweltlichen Vorbilder an)
• Hinweise fördern das Verständnis (z.B. welche Felder unbedingt ausgefüllt werden müssen. Platzierung am Anfang des Formulars)
• Einfache Fehlerbehandlung
• Rücksetzmöglichkeiten (Änderungen in den Dialogen sollte rückgängig zu machen sein)

Ende !

Das Webdesign Layout

Eine Webseite kann man mit einem Gebäude vergleichen. Es hat einen Eingangsbereich, mehrere Stockwerke und verschiedene Abteilungen und Räume. Wie der Architekt hat der Webdesigner nicht nur die Aufgabe, die Webseite (das Gebäude) so zu entwerfen, dass sie funktioniert und außergewöhnlich gestaltet ist sondern dass die Menschen, die sie (es) benutzen, sich darin zurechtfinden und wohlfühlen.

1. Die Startseite (Eingangsbereich)
Sie sollte sofort erkennen lassen, worum es auf der Webseite geht. Sie dient nicht primär der Begrüssung sondern der Orientierung. Man sollte daher auf der Startseite folgende Informationen den Nutzern anbieten...

• Absender (Von wem kommen die Informationen ?)
• Adressat (Für wen sind die Informationen gedacht ?)
• Thema (Worum geht es ?)
• Aktualität (Von wann sind die Informationen ?)

Anhand dieser Angaben kann der Nutzer schnell erkennen, ob es sich für ihn lohnt, sich weiter mit der Webseite zu beschäftigen. Ebenso sollte man ein Impressum und Copyright Hinweis in das Hypertextsystem einfügen. Die Startseite sollte sich außerdem schnell aufbauen. Daher sollte der Gebrauch von aufwendigen Grafiken, externen Diensten (z.B. Counter) und Plugins vermieden werden.

2. Abmessungen des Bildschirms festlegen
Als nächster Schritt sollte festgelegt werden, in welcher Größe die Webseite gestaltet werden soll. Dadurch soll vermieden werden, dass etwa Seitenränder abgeschnitten werden oder das Bild zu klein auf dem Bildschirm erscheint. Da es unmöglich ist, eine Webseite in allen Browsern und auf allen System gleich aussehen zu lassen, sollte darauf geachtet werden, dass die Seiten auf ein und demselben System gut und konsistent wirken.

2.1 Breite von Webseiten
Besonders wichtig ist es, dass die Seiten nicht zu breit angelegt werden, da Scrollen nach rechts besonders unbeliebt ist und die Übersichtlichkeit darunter leidet. Wenn man die notwendigen Bedienelemente des Browsers /Betriebssystems berücksichtigt, kann man von folgenden Abmessungen ausgehen...

• Auflösung 800x600 Pixel (Nutzbare Fläche 750x400 Pixel)
• Auflösung 1024x768 Pixel (Nutzbare Fläche 980x570 Pixel)

2.2 Länge von Webseiten
Informationen, die ohne Scrollen sofort zu sehen sind, werden vom Benutzer am häufigsten betrachtet. Deshalb sollten wichtige Links und Text- bzw. Bildinformationen ohne Scrollen erreichbar sein. Es empfiehlt sich daher, eine kürzere, zusammengefasste Version der Informationen auf der erste Seite zu präsentieren und einen Link hinzuzufügen, der den interessierten Anwender zu einem auführlichen Text zum Thema führt.

Bei besonders textlastigen Seiten sollte man zusätzlich eine Download Version anbieten oder einen "Drucken"-Button integrieren, da viele Anwender es bevorzugen, sich längere Texte auszudrucken.

2.3 Auflösungsabhängiges oder - unabhängiges Webseiten Layout ?
Zu Beginn der Bildschirmgestaltung sollten auch Überlegungen angestellt werden, ob das Layout der Webseite sich der Browserfenstergröße anpassen soll oder nicht. Bei einer festen Breite muss man mit Pixelwerten arbeiten, ansonsten mit Prozentangaben.

Ein flexibles Layout hat den Vorteil, dass Benutzer mit einem großen Bildschirm nicht das Gefühl haben, sich diesen umsonst angeschafft zu haben, weil das Bild in der linken oberen Ecke verschwindet. Flexible Seiten kommen außerdem im Druck besser heraus. Ein Nachteil ist, dass die Textspalten auf großen Monitoren zu breit geraten können.

3. Die Navigation
Eine einfache Struktur und kurze Wege zu den Inhalten sind auch das A und O für eine benutzerfreundliche Seite im Webdesign. Der Benutzer muss zu jedem Zeitpunkt wissen, wo er sich gerade befindet, wohin er gehen kann und wie er wieder zurückkommt.

Daher sollte man eine Site-Struktur entwerfen. Softwareprogramme wie Dreamweaver bieten hier die Möglichkeit, eine Art Dummie-Webseite mit allen Verlinkungen und Unterseiten anzulegen, bevor man dazu übergeht, Seiten mit Inhalten zu füllen. So behält auch der Webdesigner den Überblick.

Grundsätzlich sollte die Navigation so gestaltet werden, dass die eigentlichen Inhalte nicht zu sehr in den Hintergrund treten. Man sollte auch an Alternativen in Sachen Navigation denken. (z.B. interne Suchfunktion, "Pull-Down-Menüs")

4. Gestaltungsraster
Dies ist Grundlage für die Erstellung eines konsistenten Bildschirmlayouts über mehrere Seiten hinweg und muss vor der eigentlichen Gestaltung der Bildschirmseite gut überlegt und skizziert werden. Je konsistenter das Layout und die Navigation sind, desto einfacher wird der Benutzer mit der Seite zurechtkommen, da er die Position der gewünschten Informationen und der Navigation intuitiv erfassen kann.

Grundsätzlich gibt es vier Möglichkeiten, optisch Konsistenz in zusammengehörigen Seiten zu erreichen...

• Über eine Grundform, die sich auf allen Seiten wiederholt (Form-Layout)
• Über einen Rahmen, der sich auf allen Seiten wiederholt (Rahmenlayout)
• Über verschiedene Farben, die einzelnen Themenbereichen entsprechen (Farbgesteuerte Themengliederung)
• Über eine freie Komposition, die in sich geordnet ist (Das freie Layout)

Ende !

Generelle Vorgehensweise beim Webdesign

Ohne Vorüberlegungen kann Webdesign nicht praktiziert werden. Fast keine Webseite ensteht auf dem Monitor sondern meist vorerst als Konzept auf dem Papier. Wenn ein Projekt inhaltlich und formell mit dem Auftraggeber geplant worden ist arbeitet im Anschluss oft ein Team von Designern und Redakteuren an dem Projekt, um dem Auftritt ein Gesicht zu geben.

Strukturierung der "Stoffsammlung" und Ziele eines Projekts
Die Verantwortung des Webdesigners liegt darin, das Ziel mittels Gestaltung zu verfolgen. Dazu gehören folgende Punkte...

• Inhalt und Form in Einklang bringen
• Erinnerungswert einer Webseite maximieren
• Navigation und Erfassung der Informationen so einfach wie möglich zu gestalten

Es ist unabdingbar die Entwicklung immer wieder auf bestimmte Fragen zu kontrollieren. Dazu gehören u.a.

• Welcher Kundennutzen wird beabsichtigt ?
• Was sind die Kernaussagen des Unternehmens, dass sich präsentiert ?
• Welchen Nutzen hat der Besucher auf der Webseite ?
• Stimmt die Gestaltung mit der Aussage des Projekts überein ?
• Dient die Gestaltung der Zielsetzung und dem spontanen Erfassen der Struktur ?
• Besitzt der Entwurf ein Alleinstellungsmerkmal ? Erinnerungswert ?

Geeignetes Equipment
Nachdem der Umfang der Webseite festgelegt wurde und über welche Funktionalitäten diese verfügen soll kann das Erscheinungsbild der Seite skizziert werden. Im Normalfall scribbelt man auf Papier. Sollten die Ideen für das Layout bereits gefestigt sein kann ein grobes Layout bereits am Rechner erstellt werden.

Man kann hierzu ein einfaches Malprogramm verwenden. Zu beachten gilt hier, das die Bildformate in anderen Anwendungen verarbeitet werden können. Empfehlenswert ist hier der Adobe Photoshop, der zahlreiche Funktionen bietet und außerdem ein vektororientiertes Zeichenprogramm (Adobe Illustrator) beinhaltet.

Ebenfalls empfehlenswert ist das Grafikprogramm Fireworks von Macromedia. Es arbeitet eng mit dem Webeditor Dreamweaver zusammen und ermöglicht es, sowohl vektor- als auch bitmapbasierte Bilder zu erstellen und zu bearbeiten.

Wenn der Seiten Entwurf steht und man die Navigation und den Bereich für die Inhalte untergebracht hat kann die Seite in HTML umgesetzt werden. Hierfür ist der Dreamweaver das richtige Werkzeug, da man mit ihm sehr schnell eine grobe Struktur erstellen kann. Der Vorteil des Editors ist auch, dass man prompt eine Seitenansicht hat (WYSIWYG-Editor !). Das Einbinden von Sounds und Filmen stellt für den Editor kein Problem dar. Außerdem wird der HTML-Code browserübergreifend und versionsunabhängig erzeugt.

Übersicht Grafikprogramme und HTML-Editoren
>> Bild- und Grafikprogramme
>> Text- und HTML Editoren

Webstandards IV: Video

Videos sind schon seit langem eine Herausforderung für Programierer und Entwickler im Internet. Die Bandbreitenproblematik und das Engagement diverser Unternehmen haben unterschiedliche Videoformate hervorgebracht. Dazu gehören u.a. ...

• WMF (Windows Meta File) von Microsoft
• RM (Real Media File) von Real Networks
• MOV (Move File) von Apple

Der Kern jedes Videoformats ist der Codec. Er leitet sich aus dem eingesetzten Komprimierungsverfahren (enCOden/DECoden) ab. Standard für den Codec sind die Richtlinien der MPEG (Moving Pictures Experts Group). Neben der MPEG Kompression gibt es auch sogenannte Container-Formate, welche einen Spielraum für die Kompression bieten. Audio- und Videodaten in komprimierter Version können hier in verschiendenen Codecs vorliegen. Zu den bekanntesten Formaten dieser Art zählt der AVI Container (Audio Video Interleave). Audio- und Videodateien werden hier ineinander "verzahnt" (interleaved) abgespeichert. Der Codec DIVX baut zum Beispiel auf AVI auf.

Bei der Übertragung von Videos wird wie bei Audio Dateien zwischen Stream und Download-Technik unterschieden. Filme, die man downloaden muss, benötigen je nach Länge und Qualität mehr oder weniger Festplattenspeicher. Die Downloadzeit, die wiederrum von der Bandbreite abhängt, entscheidet hier, ob der User den Film betrachten will oder nicht. Das Download-Verfahren eignet sich daher besonders für kleine Dateien.

Bei der Stream-Technik kann das Video nur so lange betrachtet werden wie eine Verbindung zum Internet besteht. Streams werden kodiert übermittelt und am Endgerät sofort dekodiert. Die Kodierung ist hierbei notwendig, da die Datei sonst zu gross für eine Übertragung wäre. Dekodiert wird die Videodatei durch ein spezielles "Plug-in". Als Standard Programme haben sich hier der Real Player, Windows Media Player sowie Quicktime durchgesetzt.

Da die Wiedergabe beim Streamverfahren von der Bandbreite abhängig ist, sollte man die Filme in verschiendenen Qualitäten bereitstellen, damit auch User mit einer kleinen Bandbreite die Videos ansehen können.

Für welche Zwecke Videos im Internet eingesetzt werden zeigt folgende Aufstellung:

• Werbung (Vorstellung von Produkten und Dienstleistungen)
• Multimediale Bedienungsanleitungen (Wie funktioniert ein Produkt ?)
• Bildung/Weiterbildung
• Filme (Fernsehsendungen werden zusätzlich im Internet angeboten)
• Zweitverwertung (z.b. von bestehenden Videomaterial, virtueller Rundgang ...)
• Trailer (Zusammenfassung von Kinofilmen)
• Firmenportrait
• Firmen-TV (Verwendung für PR-Zwecke
• Unterhaltung
• Video E-Mails (interessante Marketingmöglichkeit)

Ende !

Webstandards III: Audio

Wie bei den Bildern gilt auch bei der Verwendung von Audio Dateien, dass die Dateigrösse drastisch gesenkt werden muss. Bei den Übertragungsarten kann man nach Download und Stream unterscheiden. Beide Arten unterscheiden sich dadurch, das beim Download die Datei auf die Festplatte gespeichert wird und erst nach dem kompletten Download gestartet werden kann während sich das "Streaming" durch einen kontinuierlicher Datenstrom auszeichnet. Dadurch kann das Audiosignal bereits nach kurzer Zeit gestartet werden.

Das wichtigste Audioformat beim Download ist bekanntlich MP3, beim Stream sind es RAM (Real Audio Media) und WMA (Windows Media Audio). Diese Formate möchte ich kurz näher erläutern.

MP3
Dieses Format steht für "MPEG1 Audio Layer 3" und ist Teil der MPEG Standards zur digitalen Kompression von Audio- und Videosignalen. Entwickelt wurden die Standards am Fraunhofer Institut.

Der grösste Vorteil dieses Formats ist die geringe Dateigrösse. Sie beträgt etwa nur 10 % der Originalgrösse der Audiodatei. Die Komprimierung erfolgt aber verlustbehaftet. Zusätzlich zu den Audioinformationen können noch weitere Informationen in "Tags" aufgenommen werden (z.B. Liedname, Interpret etc.). Der entscheidende Vorteil von MP3 ist, dass es Plattformunabhängig ist.

Real Player
Dieses Programm kann spezielle Audio- und Videodateien (RAM Dateien) abspielen und wurde von Real Networks entwickelt. RAM-Dateien zeichnen sich durch ihre geringe Grösse aus und sind deshalb besonders für das "Streaming" geeignet. Die zur Verfügung stehende Bandbreite hat dabei einen grossen Einfluss auf die Abspielqualität, da der Datenstrom während der Übertragung automatisch an die Bandbreite angepasst wird.

Neben dem RAM-Format kann der Real Player auch Formate wie MP3, WAV, AVI und MIDI abspielen.

Windows Media Player
Dieser Player nutzt das WMA-Format. Dieses eignet sich sehr gut für das "Streaming", weil es eine bessere Komprimierung als andere Formate hat und deshalb weniger Bandbreite benötigt. Der Windows Media Player ist auch in der Lage, Sounddateien mit einer Tiefe von 24bit und einer Abtastrate von 96 kHz abzuspielen, was Dolby Digital Qualität entspricht. Neben dem WMA-Format kann der Player auch alle anderen gängigen Audio- und Videoformate abspielen.

Bei der Verwendung von Audiodateien auf Webseiten gelten ansonsten die aus dem Screendesign bekannten Regeln. Es sollten kurze, kleine Sequenzen verwendet werden, die der Benutzer jederzeit anhalten und steuern kann. Dabei sollte er erstens eine Kurzinformation über Länge und Inhalt erhalten und zweitens sollte er wissen, mit welchem Player er die Informationen abspielen kann.

Webstandards II: Bilder

Bilder sollten im Internet nur sparsam und in angemessener Größe eingesetzt werden, da zu viele oder zu grosse Bilder lange Ladezeiten hervorrufen. Sie sollte daher entsprechend komprimiert werden. Für die Darstellung von Bildern und Grafiken gibt es 3 wichtige Grafikformate: JPEG, GIF und PNG. Nähere Infos zu den jeweiligen Formaten gibt es hier: Grafikformate für das Internet.

Wie bereits erwähnt sollte die Speichergröße einer Grafiken immer so gering wie möglich sein um die Ladezeit zu verkürzen. Daher sollte man auch wissen, welche Attribute die Größe beeinflussen...

• die Dimension der Grafik (Höhe und Breite)
• die Farbtiefe

Mit Grafikprogrammen lassen sich Grafikdateien gut für das Internet optimieren. Das Ziel sollte dabei immer sein, ein ausgewogenes Verhältnis zwischen Ladezeit und Qualität zu erreichen.

Folgende Punkte sollten beim Einbinden von Grafiken beachtet werden:

• Bilder sollten maximal 30 KB (Kilobyte) gross sein. Bei grossen Bildern sollten Vorschaubilder (Thumbnails) erstellt werden um die Ladezeit gering zu halten
• Beim Einbinden von Grafiken in den Quellcode sollte die Höhe und Breite des Bildes angegeben werden. Die Ladezeit wird dadurch etwas verringert.
• Grosse Bilder bzw. Bilder auf der nächste Seite können durch ein Javascript "vorgeladen" werden. Dies ist vorallem bei Fotogalerien empfehlenswert
• Grafiken können mehrfach verwendet werden. Dadurch wird neben der Reduzierung der Antwortzeit auch eine einheitliches Design erreicht
• Im ALT-Tag sollte eine kurze und sinnvolle Beschreibung angegeben werden
• Als Alternative zu aufwendigen Grafiken können auch Icons verwendet werden. Dies sind symbolhafte Zeichen, die der Vereinfachung einer Webseite dienen und sprachunabhängig sind
• Grafiken "interlaced" abspeichern. Sie werden dann beim Laden schichtweise und nicht zeilenweise eingelesen und aufgebaut

Ende !

Webstandards I: Schrift

Kommen wir nun zum ersten Webstandard, der der Informationsaufbereitung dient - die Schrift. Um mit den meisten Betriebssystem kompatibel zu bleiben gibt es derzeit nur folgende Schriftvarianten im Web:

• Courier New, Courier, Monospace
• MS Serif, New York, Serif
• Times New Roman, Times, Serif
• MS Sans Serif, Geneva, Sans Serif
• Verdana, Geneva, Arial, Helvetica, Sans Serif
• Arial, Helvetica, Sans Serif

Es gibt allerdings auch Außnahmen. Anwendungen wie Flash oder der Acrobat Reader binden die verwendeten Schriften direkt in die Dateien ein und sind daher von dieser Regel nicht betroffen.

1. Empfehlung für die Gestaltung
Bislang erfolgte die Einbettung einer Schriftart über den HTML Tag FONT. Da dieser im "HTML 4 Strict"-Standard aber nicht mehr zulässig ist sollte zukünftig auf die Verwendung des Tags verzichtet werden. Alternativ können alle Schriftangaben mittels CSS definiert und eingefügt werden.

Dabei ist allerdings zu beachten, dass der User im Browser einige Schriftattribute verändern oder auschalten kann, was Folgen für Gestaltungsraster, Umbrüche, Lesbarkeit und Spaltenbreite haben kann. Außerdem hängt das Schriftbild von der Bildschirmauflösung und - größe ab. Man weiss also nie, wie der Text im Browser des Nutzers letztendlich aussehen wird.

Um eine genaue Kontrolle über das Layout zu haben sollte man Tabellen verwenden. Auch hier gilt: Es sollten keine langen Zeilen verwendet werden und die Tabellenbreite sollte maximal 400 Pixel betragen. Mit dem CELLSPACING und CELLPADDING-Tag kann man für Zwischenräume im Text sorgen.

Alternativ werden auch häufig transparente Grafiken in Tabellen verwendet, um Text einzurücken oder zu positionieren. Damit ein standardkonformes Design gewährleistet ist sollte bei der Gestaltung außerdem Boxen/Ebenen (DIVs) verwendet werden.

Um das Lesen von einem langen Text zu erleichtern sollte man diesen durch Überschriften, Abschnitte etc. auflockern und einige Schlüsselwörter hervorheben (z.B. Fett oder Kursiv). Eine Unterstreichung sollte als Hervorhebung aber nicht verwendet werden, da diese in der Regel einen Hyperlink signalisiert.

1.1 Scrollen
Lange Seiten, auf denen viel gescrollt werden muss, wirken abschreckend. Deshalb ist es beim Webdesign wichtig, das die Texte kurz gehalten werden. Man sollte gegebenenfalls die Texte in sinnvolle Informationseinheiten unterteilen und diese auf mehreren Seiten präsentieren. Außerdem sollte sie untereinander verlinkt werden.

Bei langen Seiten gilt die Regel der "umgekehrten Pyramide" (wichtigsten Informationen stehen am Anfang). Diese Art des Schreibens ist im Internet generell von Vorteil. Bei längeren Seiten sollten dem Besucher im Text außerdem Links zum Startpunkt angeboten werden.

1.2 CSS-Formatierungen
Durch den Einsatz von CSS ergeben sich mehr gestalterische Freiheiten. CSS ist eine Standardformatierungssprache für Schriften in HTML-Dokumenten. Durch sie können z.b die Farbe, Schriftart, Schriftgröße, Wortabstände uvm. definiert werden. CSS bietet außerdem in vielen Bereichen weitaus größere Flexibilität und Eingriffsmöglichkeiten.

SEO Tips für Blogger Templates

Hi zusammen ! Ich wollte abseits vom eigentlichen Webdesign Content ein paar Seo Tips, die speziell für Blogger Templates gedacht sind, geben. Da ich selber Blogs bei Blogger.com besitze (u.a. dieses Blog) habe ich diese Seo Tips heute direkt angewendet.

Mal schauen was für Auswirkungen diese kleine Veränderungen haben werden.

Seiten Titel
Der Standard Seiten Titel im XML Template sieht wie folgt aus

<title><data:blog.pageTitle/></title>

Der Titel sagt aus, dass zuerst der Blog Name und dann der Titel des Blog Posts im Titel angezeigt wird. Dies ist wiederum nicht gut, da die wichtigen Keywords generell immer an erster Stelle stehen sollten. Daher sollte man den obengenannten Code durch diesen ersetzen.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Dadurch wird zuerst der Post Titel und danach der Blog Name angezeigt (z.B. "SEO Tips für Blogger Templates | Webdesign Blog"). Dies ist natürlich aus SEO Sicht optimal. Alternativ können noch weitere relevante Keywords angegeben werden...

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | SEO Services | SEO News</title>
</b:if>

Meta Keywords and Description
Wichtig für ein gutes Ranking sind außerdem Meta Keywords und die Meta Description. Diese werden in der Regel durch folgenden Code hinzugefügt...

<meta name="description" content="......" />
<meta name="keywords" content="......" />

Das Problem bei Blogger Templates ist aber, das auf jeder Seite die selben Keywords und Beschreibung angezeigt wird wenn man diesen Code benutzt. Suchmaschinen mögen das gar nicht. Daher sollte man folgenden Code einfügen...

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="......." />
<meta name="keywords" content="......." />
</b:if>

Dieser Code zeigt die Meta Tags dann nur auf der Startseite an.

Heading Tags
Überschriften Tags (H1,H2,H3,H4,H5) sind für das SEO auch von großer Bedeutung. Speziell für Artikel Titel sollte generell der H2-Tag verwendet werden. Da die meisten Blogger Templates aber standardmäßig einen H3-Tag für die Überschrift verwenden sollte dies nachträglich im XML Template manuell geändert werden.

Um den HTML Code bearbeiten zu können muss im Layout unter "HTML bearbeiten" die Option "Vorlagen zum Erweitern von Widgets" aktiviert sein sonst werdet ihr den folgenden Code nicht finden ....

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Wie ihr seht wird hier ein H3-Tag für den Titel verwendet. Man sollte diesen ausstauschen...

<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>

Außerdem muss noch eine kleine Änderung im CSS vorgenommen werden, damit der Titel auch korrekt dargestellt wird. Unter der Kategorie /* Posts sollten folgende Einträge geändert werden.

.post h3 und .post h3 a, .post h3 a:visited

Hier wird einfach die 3 durch die 2 ersetzt. Bei einigen Templates kann das auch abweichen aber ich denke es ist klar wie vorzugehen ist. Wenn ihr Fragen oder Anregungen habe könnt ihr diese gerne als Kommentar hinterlassen. Viel Spass beim optimieren !

Nachtrag vom 27.04.2009
Bei den "Heading Tags" gabs eine kleine Änderung. Da H1-Tags von Google schlechter bewertet werden (siehe Ranking-Faktoren: H1 bis H6 im Detail) sollte man H2-Tags für den Artikel Titel benutzen. Ich werde dies auch gleich bei meinen Blogs wie folgt ändern ...

Blog Titel: H1-Tag
Artikel Titel: H2-Tag
Sidebar Widget Titel: H3-Tag
Artikel Datum: H4-Tag
"Kommentar Bereich": H5-Tag

Webdesign vs Screendesign

In den letzten Wochen habe ich mich ja näher mit dem Screendesign beschäftigt. Jetzt stellt man sich natürlich die Frage was Webdesign ist. Ganz einfach ! Es ist Screendesign, genauer gesagt ein Teilbereich davon, der sich speziell mit dem Internet beschäftigt.

Generell sind die Grundsätze der Gestaltung und Ergonomie (siehe Grundlagen des Screendesigns) auf jede Webseite übertragbar, aber beim Webdesign kommen noch folgende Punkte ergänzend hinzu...

• Zeit (spielt eine wesentliche Rolle im Internet)
• Webstandards (gewährleisten eine einheitliche Darstellung)
• Konkurrenz Druck (Das eigene Angebot muss stets besser, schöner etc. sein als das der Mitbewerber)
• Hauptaugenmerk liegt auf der Dialoggestaltung (z.B. in Formularen)
• Benutzer stimmt mit (durch das OS oder den Browser kann er das Design beeinflussen)

Daher ist die Aufgabe eines Webdesigners, die spezifischen Vor- und Nachteile des Mediums Internet bei der Gestaltung von Webseiten zu berücksichtigen und zu nutzen.

In den folgenden Artikeln werde ich mich näher mit dem Aufbau eines Webprojekts und einigen Grundregeln, die speziell für die Informationsaufbereitung im Internet relevant sind, beschäftigen. Dazu gehören u.a. die Webstandards für Schrift, Bilder, Audio und Video.

Screenlayoutelemente (Screendesign)

Beim Screenlayout geht es um die Gestaltung des Bildschirms, damit sein Inhalt als Einheit wahrgenommen werden kann. Dabei sind folgende Fragen relevant...

• Wie sollen die einzelnen Elemente platziert werden ?
• Worauf sollte man dabei achten ?
• Wie nehmen Menschen visuelle Ordnungen wahr ?
• Wie kann man Mithilfe der Strukturen Zusammenhänge verdeutlichen ?

Vor der Entwicklung eines Produkts ist es daher sinnvoll ein Konzept für die Gestaltung der Seiten auszuarbeiten. Nach der Feststellung, welche Elemente gebraucht werden muss deren Anordnung unter Berücksichtigung von Formen, Flächen und Linienverläufen geplant werden.

Man sollte dabei auf folgende Punkte achten...

• Der Bildschirminhalt sollte bei der Gestaltung auf Harmonie und Gesamteindruck überprüft werden. Der Screen sollte als Einheit wahrgenommen werden, daher sollten die dargestellten Elemente in Bezug und Ergänzung zueinander gesetzt werden.
• Konsistente Gestaltung der Seiten (Harmonische Ganzheit)
• Je nach Zielgruppe sollte man entscheiden ob die Bildschirmkomposition eher strukturiert oder verspielt sein soll. Man sollte die Präsentation an die Aufnahmefähigkeit des Benutzers anpassen. Weniger ist oft mehr !

Eine implizite Struktur
Es ist empfehlenswert, sich für die Erstellung von Bildschirmseiten grundsätzlich Muster zu entwerfen. Zuerst sollte man festlegen welche Elemente benötigt werden. Danach sollte man die Anordnung definieren. Dabei sollte man in Formen, Flächen und Linienverläufen denken bevor man an die Details geht.

Merke: Eine implizite Struktur setzt den Bildschirminhalt und die einzelnen Elemente in Beziehung zueinander und lässt sie zu einer Gesamtheit werden.

Vorder- und Hintergrund-Beziehung
Der Hintergrund, auf dem die verschiedenen Elemente liegen, dient als Rahmen und optischer Halt. Er zieht sich meist durch das ganze Multimediaprodukt hindurch und verleiht ihm eine Konsistenz. Er visualisiert außerdem oft das Thema und baut eine passende Atmosphäre auf. Die Bedeutung der Informationselemente wird dadurch verstärkt und sie werden außerdem optisch hervorgehoben.

Regeln zum guten Hintergrunddesign
Der Hintergrund darf auf keinem Fall die eigentlichen Bildschirminhalte und seine Elemente dominieren. Je mehr Elemente verwendet werden desto unaufälliger muss der Hintergrund sein. Es sollte daher wenige aufgehellte, großflächige Farben oder Bilder mit einer Unschärfe verwendet werden.

Man sollte immer versuchen, einen möglichst hohen Kontrast von Vorder- und Hintergrund zu erreichen. Das gilt sowohl für Farben als auch für Formen. Außerdem sollte nicht zu viele Hintergrundfarben verwendet werden. Das Auge des Betrachters wird dadurch nur abgelenkt.

Gestaltgesetze
Die Gestaltgesetze helfen die Elemente am Bildschirm so anzuordnen, dass sie der menschlichen Wahrnehmung entgegenkommen. Folgende Regeln und Prinzipien bilden eine Grundlage für die Gestaltung von ansprechendem Design...

• Gesetz der Nähe: Zusammengehörendes räumliche nahe beieinander anordnen
• Gesetz der Ähnlichkeit: Zusammengehörendes optisch ähnlich gestalten
• Gesetz der Prägnanz: Einfache Strukturen anbieten
• Gesetz der Geschlossenheit: Muss bei angeschnittenen oder überdeckten Formen beachtet werden
• Gesetz der Symmetrie: Schaffung von starken Strukturen durch symmetrische Anordnung
• Gesetz der Erfahrung: Es erlaubt, nicht alles zeigen zu müssen, da man Vorkenntnisse der Zielgruppe voraussetzt
• Gesetz der guten Fortsetzung: Lässt zusammengehörende Elemente entlang einer Linie anordnen

Linktip: Übersicht Gestaltgesetze

Blicksteuerung durch optische Signale
Für das Screendesign ist es besonders wichtig, bestimmte Dinge auf dem Bildschirm hervorzuheben und die Aufmerksamkeit des Benutzers darauf zu lenken. Hierfür können optische Elemente wie z.B. ein schrittweiser Aufbau einzelner Abschnitte oder Bilder verwendet werden.

Farben und ihr Einsatz
Der Einsatz von Farben ermöglicht es, Informationen eine weitere Dimension hinzuzufügen. Farben suggerieren unterschwellig eine eigene Botschaft, lösen Gefühle aus und wirken suggestiv. Häufig werden sie von Menschen unbewusst wahrgenommen.

Die Aufgabe von Farbe ist, Inhalte zu visualisieren und Ziele zu unterstützen wie z.b.

• Wiedererkennbarkeit des Erscheinungsbildes
• Gute Lesbarkeit von Text und Bild
• Navigation und Benutzerführung durch systematischen Farbeinsatz
• Animation und Zielgruppenansprache

Aufgrund von verschiedenen Enflussfaktoren werden Farben subjektiv wahrgenommen...

• Biologische Ursachen
• Kulturelle Ursachen
• Individuelle Vorlieben
• Psychologische Ursachen

Bildschirm versus Papier (RGB und CMYK)
Bildschirmfarben setzen sich grundsätzlich anders zusammen als Farbpigmente für den Druck. Papierausdrucke sind daher nur in CMYK Farben möglich. Für die Wiedergabe einer Grafik auf einem Monitor ist der RGB Farbraum zuständig. Er beinhaltet die 3 Grundfarben, die von allen Grafikprogrammen unterstützt werden. Mehr Infos dazu: Allgemeines zur Farbenlehre

Merke: Durch den unterschiedlichen Farbraum sind Bilfschirmdarstellung und Druckergebnis in keinem Fall identisch.

Folgende Richtlinien sollten beim Einsatz von Farbe am Screen berücksichtigt werden...

• Augenfreundlich gestalten (Hintergrundflächen in strahlungsarmen Farben anlegen)
• Distanz erzeugen mit kalten Farben (z.B. für Hintergründe, warme Farben eignen sich für Schriften und Linien da sie Nähe signalisieren)
• Hell-Dunkel-Kontrast Text/Hintergrund (Optimierung der Textlesbarkeit)
• Aufmerksamkeit erzeugen (z.B. durch Farben wie Rot, Orange oder Gelb. Sollte nur gezielt angewendet werden !)
• Sparsamer Einsatz von Farben (Zu viel Farben lenken vom Inhalt ab)
• Orientierungshilfe (Gleiche Sachverhalte sollte durchgängig in der gleichen Farbe dargestellt werden)
• Farben derselben Wellenlänge meiden (Betrifft die Lesbarkeit. Es wird für das Auge dadurch schwierig, Dinge zu fokussieren)
• Begrenzte Anzahl von Farben verwenden (max. 4-5 Farben, die zueinander passen und für Harmonie sorgen)

Hiermit wäre das Kapitel Planung und Elemente des Screendesigns abgeschlossen.