Ihr Webauftritt >> Inhalt & Design
Inhalt & Design einer Website
Inhalt und Design der Webseite sollten den Aufgaben der Website Rechnung tragen und individuell auf Zielgruppe und Marketing-Strategie angepasst sein.
Wie in der konventionellen Werbung entscheiden auch im Internet die ersten Eindrücke, ob der Kunde die Seite liest oder weiterklickt. Wie in der konventionellen Werbung gibt es deshalb auch im Webdesign einige Regeln, was man tun und was man vermeiden sollte. Ein gutes Konzept sollten deshalb folgende Überlegungen mit einfließen:
Einsatz
von Bildern und Grafiken
richtige
Wahl der Überschriften
technische
Anforderungen an den Webauftritt
Vorteile
von XHTML in Kombination mit CSS
Erste Wahrnehmung der Seite
So paradox es klingt, aber einem flüchtigen Surfer sind schriftliche Informationen zunächst eher lästig, weil sie Zeit kosten. Textinformation wird erst dann interessant, wenn sich der Surfer für die Seite entschieden hat.
Jeder Surfer auf der Suche nach einer Website zu einem bestimmten Thema darf als flüchtiger Surfer angesehen werden, da er zunächst nur stichprobenartig kontrolliert, ob die Website auch das richtige Thema behandelt.
Es ist deshalb wichtig, die Website schnell zu gestalten:
Schnell was die Ladezeit anbelangt, schnell aber ganz
besonders bei der Informationsübertragung:
Die Grundsätzliche Informationen über Ziele und Nutzen
der Seite müssen
in möglichst
kurzer Zeit aufgenommen werden können.
Der Name der Seite sollte deshalb passend gewählt
sein. Seitengestaltung und Farbwahl sollten sofort
erklären,
um welche Art Seite es sich handelt. Entscheidet der
Besucher, der Seite einen zweiten Blick zu gönnen,
sollte er aus den Bildern und Überschriften die logische
Struktur der Site erfassen können.
Die Navigation sollte sofort als solche erkennbar sein
und die logische Struktur widerspiegeln.
Sollte der Surfer über eine Themenspezifisch Suche in einer Suchmaschine auf die Seite gelangen, muss die abgebildete Seite dem Thema der Suche entsprechen.
Die Information Ihrer Seite wird also im Wesentlichen durch folgende Elemente übertragen:
Im ersten Augenblick des Ladens durch Design und Farbgestaltung, dann durch Seitenstruktur und Navigationsleisten.
Erst bei genauer Betrachtung der Seite durch den Besucher zuerst durch Bilder und Grafiken, dann durch Überschriften und schließlich durch den eigentlichen Text.
Seitengestaltung
Es wäre vermessen, für Seitengestaltung Regeln aufstellen zu wollen. Natürlich sollte keine seriöse Businessseite im 70er-Jahre Retrolook auftreten, Seiten mit Musikclips für junge Leute sollten nicht mit 3 streng getrennten Blöcken in taubenblauem Design angelegt werden. Allerdings sollte ein einmal festgelegtes Design sich über alle Seiten erstrecken. Ebenso sollte die Funktion der Elemente einer Seite sofort erkennbar sein und über die ganze Seite konstant bleiben.
Farbgestaltung
"Grau, teurer Freund ist alle Theorie,
und Grün des Lebens goldner Baum."
Mephisto in Goethe´s Faust
Jeder von uns versteht auf Anhieb, worum es geht. Wir
ordnen intuitiv die assoziierte Symbolik den jeweiligen
Farbwörtern zu. Wissenschaftliche Untersuchungen
haben ergeben, dass wir in unterschiedlich beleuchteten
oder auch gefärbten Räumen ganz differenzierte
Reaktionen zeigen: In Rot gestrichenen Räumen
uns Temperaturen um etwa 3° C wärmer als in
Blau gestrichenen. Auch Zeitspannen erscheinen uns in
in roten Räumen länger, unser Reaktionsvermögen
steigt in rot beleuchteten Räumen um etwa 12%!
Der richtige Gebrauch von Farben kann also den Aufnahmeprozess
unterstützen. Diese Effekte kann man bei der Wahl
seiner Farben nutzen:
Mit der richtigen Farbgestaltung Ihrer Website
können Sie auf manche Erklärung verzichten!
Lange bevor der Benutzer sich mit dem Inhalt
Ihrer Webseiten beschäftigt, nimmt er deren farbliche
Gestaltung wahr. Es ist jedoch hoffnungslos, Farben
zu finden, die alle Benutzer ansprechen. Farben
haben zwar eine Symbolik, werden aber trotzdem extrem
subjektiv aufgenommen. Ein für uns seriös
erscheinendes Blau kann von einem anderen Benutzer
extrem negativ beurteilt werden. Es ist jedoch möglich,
einen großen Prozentsatz der Besucher zufrieden zu stellen,
wenn man einige Grundregeln beachtet:
Farben für den Hintergrund:
Farben lassen sich anhand Ihrer Temperatur klassifizieren: Kalt-neutral-warm. Warme Farben sind Rot, Orange, Gelb. Diese Farben sind eher für Seiten geeignet, bei denen ein Gefühl der Energie erzeugt wird oder Aktionen provoziert werden sollen. Informative Seiten sollten diese Hintergründe meiden, sie ermüden den informationssuchenden Besucher zu stark. Als kalt gelten Farben wie Blau und Blaugrün. Diese Farben wirken eher entspannend und erhöhen die Aufmerksamkeit des Besuchers. Warme Farben treten auf kalten Hintergründen deutlicher hervor. Blau in allen Kulturkreisen seriös! Neutral wirkt dagegen Schwarz, Grau und Weiß.
Farben für Grafiken, Texte und Überschriften:
Grafiken sollten eine mittlere Helligkeit aufweisen: dunkler (oder heller) als der Hintergrund aber wiederum heller (bzw. dunkler) als Text. Der Text sollte immer die dunkelste oder hellste Farbe aufweisen. Wichtig ist auch, dass der Kontrast zwischen Text und Hintergrund ausreichend hoch ist, das erlaubt ein ermüdungsfreies Lesen.
Farben als Bindeglied:
Benutzen Sie für analoge Sachverhalte immer die gleich Farbe (z.B. für bestimmte Produkte oder Produktkategorien), egal ob es sich um Text, Schaubilder oder Grafiken handelt.
Farben für Navigation:
Was für Produktkategorien gilt, gilt auch für die Navigationselemente. Achten Sie darauf, dass Navigationselemente in den einzelnen Navigationsbereichen auch farblich immer gleich gestaltet sind.
Farbsymbolik:
Ein Beispiel: ein Hersteller von medizinischen Gerätschaften
beschäftigt sich in seinem Internetauftritt mit
dem Thema "Gesundheit". Hier könnten
Farben eingesetzt werden, die wir mit dem Begriff "Gesundheit" assoziieren.
In der Tat sind es die Farben Grün und Rot und
ein wenig Rosa und Blau. In diesem
Fall könnte man die Seiten in einer Kombination aus Blau und Weiß (Hintergrund,
Weiß als neutrale Farbe für Texte) und blaugrün(Navigation)
gestalten.
Rot: Aktivität, Dynamik, Energie,
Intensität, Liebe Leidenschaft, Macht, Gefahr,
Blut, Feuer, Krieg.
Blau: Passive Farbe, Ruhe, Kälte, Ferne,
im Mittelalter die Farbe des Glaubens, Blau mit Schwarz
oder mit der Komplementärfarbe Orange getrübt:
Trauer Furcht.
Grün: entspannend, stabil, idyllisch,
Hoffnung. Dunkles Grün: Ruhe und Abgekehrtheit.
British Green: Aristokratisch.
Gelb: Licht! In westlichen Kulturen kindlich
und unschuldig, Freude und Glück. Getrübt
signalisiert es Neid, Lüge, Falschheit. Mit Schwarz:
Gefahr. In asiatischen Kulturen das Heilige.
Forderungen an eine gute Navigation
Besucht ein Benutzer eine neue Seite, muss er sich in Sekundenbruchteilen orientieren können. Navigation muss sich deshalb klar von Inhalt unterscheiden. Der Besucher muss die einzelnen Seitenelemente ausmachen und zuordnen können. Dies erfordert eine klare Seitenstruktur und vom Text deutlich hervorgehobene Links. Außerdem sollte der Besucher durch die Navigation einen Überblick über die thematische Gliederung der Seite erhalten. Durch intelligentes Navigations-Design wird der Besucher der Website geführt, ohne eingeschränkt zu werden.
Browser stellen unbesuchte Links standardmäßig unterstrichen und blau dar. Daran haben sich die User im Laufe der Zeit gewöhnt. Jede Abweichung vom Standard führt beim Besucher zu Verwirrung. Deshalb muss der Besucher in der Lagesein, Links intuitiv auszumachen. Sobald er weißt, wie diese aufgebaut ist er auch in der Lage, Text von Links zu unterscheiden und Inhalt von Navigation abzugrenzen.
Schlimm ist, wenn die Verwirrung permanent bestehen
bleibt, wenn der Besucher einer Seite also nicht mehr
eindeutig und intuitiv ausmachen kann, was ein Link
ist und wie dieser sich vom Inhalt abhebt. Der Grund
einer dauernden Verwirrung liegt meist in mangelnder
optischer Ablösung der Links zum Fließtext
und/oder durch eine Vielfalt verschieden gestalteter
Links und Buttons.
Nicht nur das Aussehen der Links, sondern auch die
Position sollte auf der ganzen Seite konsequent beibehalten
werden. Dies erfordert eine klare Seitenstruktur und
eine konsequente Dokumentenhierarchie. Vermeiden sollte
man umgekehrt auch unterstrichenen Textpassagen oder
buttonähnlichen Grafiken, die vom Aussehen her
den Links ähneln.
Eine gute Navigation besitzt Aussagekraft und Eindeutigkeit.
Sie zeigt schon bevor man ihr nachfolgt, wohin sie
führen wird. Dies erfordert eine klare, eindeutige
Auszeichnung und Benennung der Links.
Praktisch ist, wenn Hyperlinks und Buttons optisch anzeigen, dass ich sie mit der Maus überfahren werden oder durch Ihren Status angeben, in welchem Bereich der Seite Sie sich befinden. Links können so gestaltet werden, dass sie das Auge des Besuchers erfreuen und sein aktives Teilnehmen an der Seite auch optisch begleiten. Dies kann mit mit CSS (Cascading Style Sheets) oder Graphiken realisiert werden.
Bilder und Graphiken
Ein Bild ist die erste Wahl, wenn es gilt, Informationen in möglichst kurzer Zeit zu übertragen. Bilder sind sehr beliebt, denn sie informieren in Sekunden:
-
Bilder werden fast immer zuerst betrachtet
-
Bilder werden schneller verarbeitet. Die zentrale Aussage eines Bildes kann mit einem einzigen Blick erfasst werden
-
Bilder sind glaubwürdig. Sie überzeugen schnell
-
Bilder werden schneller gelernt
Zur Information der Blickverlauf des Auges beim Betrachten einer Seite:
-
Bild vor Text
-
Personen vor Landschaften oder Hintergründen
-
Gesichter vor dem Körper; Auge, Mund und Nase zuerst
-
Optisch auffällige Elemente vor unauffälligen Elementen
(Auffällig sind große, bunte, zentral platzierte Elemente. Außerdem Elemente mit hohem Kontrast zum Hintergrund.)
Bei all dem bewegt sich das Auge am liebsten nach unten und nach rechts. Der "Rückwärtsgang" wird vermieden.
Bilder sind das Instrument, eine Startseite schneller
zu machen. Selbst wenn es sich "nur" um das
Portrait des Firmeninhabers handelt: Bei professioneller
Aufnahme und Umsetzung bringt es der Seite einen beträchtlichen
Gewinn. Es spricht sehr viel dafür, gerade Startseiten
nicht nur mit farbigen Flächen und Text zu versehen,
sondern auch mit einem geeigneten Bild.
Ein Bild kann eine aktivierende Wirkung ausüben
und allein aufgrund dieser Wirkung die Attraktivität
der Seite steigern.
Das Bild muss sich leicht merken lassen,
d.h. es muss konkret und nicht
zu komplex sein. Praktische Prüfung:
Wenn man den Inhalt des Bildes mit einem nicht zu langen
Satz (max. 15 Wörter) vollständig beschreiben
kann, dann ist das Bild konkret und nicht zu komplex.
Die Assoziationen (Erinnerungen, Eindrücke,
Gefühle, Farb-Assoziationen), die durch das Bild
ausgelöst werden, sollten positiv sein.
Der Erinnerungswert kann gesteigert werden,
wenn das Bild den Produktnutzen/ Produktvorteil oder
eine andere zentrale Information zeigt. Besonders
erfolgreiche Erinnerungswerte haben Bilder, die den
Nutzen visualisieren.
Im Internet können folgende
Graphikformate benutzt werden
PNG: (gesprochen "ping") steht für "Portable
Network Graphics" und ist die Alternative
und Nachfolger des gif's. Dieses Format kann
16,7 Mio Farben darstellen, komprimiert sehr gut und
verlustfrei und ist im Gegensatz zu gif für die
Softwarehersteller ohne Lizenzgebühren implementierbar.
Leider unterstützen ältere
Browser von Netscape und Microsoft die Darstellung
des png-Formats nicht.
JPEG oder JPG: Das
jpg-Format (Joint Photographic Experts Group) ist der "Allrounder": Dieses
Format kommt zum Einsatz, wenn es sich um Bilder mit
vielen Farben handelt, also grundsätzlich für
Fotos und für alle Grafiken mit Farbverläufen.
Da jpg immer mit 16,7 Mio. Farben speichert,
können mit diesem Format solche Bilder am besten
dargestellt werden.
Ähnlich wie der interlaced-Modus beim gif-Format
funktionieren die "progressiven JPEG-Grafiken":
es wird erst eine undeutliche Fassung des Bildes im
Browser angezeigt, die Details werden nach und nach
sichtbar.
GIF: Das älteste
Format im Web ist gif (Grafic Interchange Format),
welches schon 1987 im Auftrag des Onlinedienstes
Compuserve entwickelt wurde.
gif eignet sich hervorragend zum Komprimieren
von Grafiken mit wenigen Farben und zusammenhängenden
Farbflächen (z.B. Logos, Buttons u.ä.).
Weitere Vorteile des gif-Formats: Es können beliebige
Farben der Ausgangsgrafik als transparent definiert
werden. Das Ergebnis ist dann ein z.B. freigestelltes
Bild, welches Sie problemlos auf jeden Hintergrund,
auch mit Farbverläufen, platzieren können.
Diese Variante des gif-Formats heißt korrekt "gif89a".
Außerdem können (und sollten) gif's im "Interlaced"-Modus
gespeichert werden. Das Bild baut sich dann stufenweise
von grob bis fein auf. Subjektiv hat der Betrachter das
Gefühl
des schnelleren Ladens, da er die Grafik schon frühzeitig
erkennen kann, objektiv ist die Datei aber sogar etwas
größer, wenn auch nur wenige Bytes.
Auch die beliebten animierten Grafiken im Web sind
gif-Dateien (animated gif), diese können z.B.
mit Macromedia Fireworks, Adobe Image Ready (im Lieferumfang
von Photoshop seit Vers. 5.5) und vielen speziellen
Free- und Shareware "Gif-Animations-Programmen" erstellt
werden.
Der große Nachteil des gif-Formats liegt in seiner
Farbbeschränkung: Es können maximal 256 Farben
je Grafik gespeichert werden. Damit ist es für
alle Bilder mit Farbverläufen, z.B. Fotos, untauglich.
Überschriften
Überschriften vermitteln dem Leser, was ihn im nächsten Absatz erwartet. Sie animieren zum weiterlesen. Auch bei den Überschriften sollte man deshalb bestimmte Anforderungen erfüllen.
Unmissverständliche Überschrift
Ist die Überschrift unmissverständlich formuliert
und lenkt sie den Leser in die richtige Richtung? Wenn
die Überschrift der Startseite eines Stromerzeugers "Wir
füllen Ihre Wanne mit heißem Wasser" lautet,
so könnte dies missverstanden werden.
Schnelle Formulierungen
Werden in der Überschrift "langsame" Formulierungen
vermieden? Langsame Formulierungen sind Wörter
mit "un..." und Passivsätze.
Beispiel: "So unvergleichlich wie unsere Haut".
Besser: So einzigartig wie unsere Haut.
Beispiel: "Sogar tiefe Falten werden reduziert".
Besser: Reduziert sogar tiefe Falten.
Hinweis auf den Nutzen
Weist die Überschrift auf den Nutzen (auch Zusatz-Nutzen)
für den Kunden hin? Informationen über persönliche
Vorteile sind für die meisten Menschen einfach
interessant. Wer schnell hohe Erinnerungswerte erzielen
will, sollte den Produkt-Nutzen erwähnen.
Viele Substantive
Ist der relative Anteil von Substantiven in der Überschrift
hoch? Je mehr Substantive, desto besser.
Keine Frage-Headline
Ist eine Frage-Überschrift vermieden? Überschriften
in Frageform bringen eher Nachteile. Sie zielen darauf
ab, den Leser "in den Text zu ziehen". Aber
es gibt immer weniger Leser, die dieses Spiel mitmachen.
Zusätzlich läuft man Gefahr, den Leser zu
verärgern. Akzeptabel sind rhetorische Fragen,
auf die der Leser sowieso nicht antworten soll, wie
z.B. "Haben Sie sich entschieden, schlank zu werden?"
Konkrete Formulierung der Überschrift
Ist die Überschrift konkret, anschaulich und bildhaft
formuliert?
Beispiel konkret: "Freude am Fahren" (BMW)
Beispiel abstrakt: "Die neue Sicht der Dinge:
Verantwortung" (eine Bank)
Anforderungen an den Fließtext
Verständliche Texte
Haben die Sätze des Fließtextes nicht mehr
als 15 Wörter? Leicht verständliche Texte
haben kurze Sätze mit 15 Wörtern pro Satz
als Obergrenze.
Wenige Wörter
Könnte man den Inhalt des Fließtextes mit
weniger Wörtern formulieren? Je mehr Überflüssiges,
desto größer die Gefahr, dass der Leser
bei seinen Stichproben auf langweilige Worte und Formulierungen
stößt. Das signalisiert ihm schnell: weiter!
Formale Gestaltung
Wird die Aufnahme des Fließtextes durch gute
formale Gestaltung begünstigt? Absätze, Hervorhebungen,
Zwischenüberschriften usw. erleichtern schnelles
Lesen. Die ideale Zeilenbreite für schnelles Lesen:
35 bis 45 Anschläge pro Zeile.
Konkrete Wörter im Fließtext
Werden im Fließtext konkrete Wörter verwendet
und abstrakte Wörter vermieden?
Ist die Schrift leicht lesbar?
Die Lesbarkeit der Schrift ist natürlich
von Schriftart und Schriftgröße abhängig.
Die Anzahl der Schriftart im Web ist gering, da nur
Schriften verwendet werden können, die standardmäßig
von jedem Browser angezeigt werden. Sonderschriftarten
kann man natürlich verwenden, man kann dann aber
nicht sicherstellen, das diese tatsächlich vom
Besucher installiert sind. In solch einem Fall ist
es wichtig, alternative Schriften anzugeben. Die Schriftgröße
kann entweder den Einstellung des Browsers überlassen
bleiben, oder man legt auch diese durch CSS fest, entweder fix durch Pixelangabe oder dynamisch durch Angabe in ems. Ein
weiterer entscheidender Faktor bei der Darstellung von
Schriften ist die Auflösung des Monitors. Die
Schriften werden mit höher werdender Auflösungen
des Monitors immer kleiner. Hat man die Schriften
per CSS fest definiert, sollte man den Besuchern eine
Möglichkeit geben, die Schriftarten in der größe
zu ändern und Ihrer Monitorauflösung und
persönlichen Sehkraft anzupassen.
Schriften für Fliesstext
Welche Schriftfamilien lassen sich für den Fliesstext
einer Website verwenden?
Versuchen Sie einmal, auf einem karierten Blatt Papier ein paar Buchstaben aufzumalen. Bitte dabei nur ganze Kästchen verwenden (halb ausmalen gilt nicht ;), und die Buchstaben dürfen nur 10-12 Kästchen hoch sein. Auch für die Zwischenräume zwischen den Buchstaben sind nur ganze Kästchen erlaubt. So stellt sich grob gesagt die Aufgabe, die Buchstaben eines durchschnittlichen Fliesstextes mit Pixeln am Bildschirm darzustellen. Kann eine Schrift unter diesen Bedingungen gut lesbar sein und noch als Schriftfamilie erkennbar bleiben?
Bekannt ist, dass Arial, eine Schrift, die sehr stark der Helvetica gleicht, diese Anforderungen im Web-Alltag zufrieden stellend erfüllt. Sie lässt sich soweit herunterskalieren, dass sie auch bei 10-12 Pixel Höhe noch ein passables Schriftbild abgibt.
Ein Typograf namens Matthew Carter hat sich vor einigen Jahren ebenfalls an obige Aufgabe gesetzt, und entwickelte die Verdana! Er hatte Übung darin, Schriften für beschränkte Platzverhältnisse zu entwerfen, denn zuvor entwickelte er Fonts für US-Telefonbücher. Die Verdana ist somit eine Schrift, die für nichts anderes als für lesbaren Bildschirm-Fliesstext gemacht wurde. Dafür ist sie hervorragend geeignet. Weniger gut wirkt sie jedoch bei grossformatigen Titeln, da wirkt sie schnell etwas klobig.
In dieser Disziplin wird sie von der Trebuchet um Längen geschlagen. Die Trebuchet eignet sich, weise eingesetzt, ebenfalls für Fliesstext. Diese Seiten wurden zum Beispiel ist in der Trebuchet gesetzt.
Und das war's dann auch schon mit serifenlosen Schriften! Warum ist denn die Auswahl so stark eingeschränkt? Ganz einfach: Weil Sie Ihre Website mit Vorteil in dem Font anbieten, die Ihr Leser auf seinem Computer auch installiert hat. Die Schrift selber wird bei einer Website nicht mitgesendet, das würde zuviel Speicherplatz kosten. Und ein größerer gemeinsamer Nenner zwischen den verschiedenen Systemen ist nicht zu finden (wir wollen die Comic Sans nicht zu den 'ernsthaften' Schriften zählen).
In Flash-Movies können Sie auch dynamischen Text in beliebigen Fonts darstellen, weil sich dort der Schriftsatz mitsenden lässt. Das macht normalerweise etwa 20 kB aus, bei zwei verschiedenen Schriften sind es dementsprechend 40 kB und so weiter. Doch dann kann Google Ihren Text nicht indexieren, und es müssen einige Usability-Nachteile in Kauf genommen werden, darum lassen wir das Thema hier.
Warum ist das Web eigentlich so serifenlos? Ganz im Gegensatz zu den Print-Medien? In Büchern, Zeitungen und Magazinen herrschen aus gutem Grund immer noch die Serifen-Schriften vor: Die Füßchen geben den einzelnen Buchstaben im Wort- und Satzzusammenhang mehr Halt und helfen dem Auge beim Lesen. Das wurde bei unzähligen Lesegeschwindigkeits-Studien nachgewiesen. Und das soll am Bildschirm nicht funktionieren?
Haben Sie die Übung am Anfang gemacht? Dann haben Sie das Problem sicher schon erkannt: Für die kleinen Serifen muss genauso 1 Pixel verwendet werden, wie für die Striche der Buchstaben - damit sie überhaupt sichtbar sind, denn halbe Pixel, das geht ja nicht. Das macht die Serifen viel zu kräftig, und am Schluss sieht es etwa so aus wie bei den WANTED-Plakaten in den Westernfilmen. Solche Buchstaben kann man nicht für Fliesstext verwenden!
Doch Microsoft beauftragte erneut Matthew Carter mit der Aufgabe, und der schaffte das Wunder. Er entwickelte die geniale Georgia-Schriftfamilie. Damit rettete er die Serifen für den Bildschirm. Die Times New Roman ist für Fliesstext nicht brauchbar. Die Georgia hingegen ergibt ein schönes, lebendiges Schriftbild, und sie ist gut lesbar.
Uns bleiben also ganze drei Schriften zur Auswahl, und nur eine davon mit Serifen. Auch die Trebuchet ist unter bestimmten Voraussetzungen einsetzbar, und die ebenfalls weit verbreitete Comic Sans lassen wir mal weg.
Bei so wenig Auswahlmöglichkeiten lässt sich eine Faustregel aufstellen: Die Verdana für technisch orientierte Websites oder bei kleinen Schriftgrößen. Die Arial für alle anderen professionellen Anwendungen, und die Georgia für Weblogs. Und die Trebuchet als ästhetische Alternative für alle zusammen, wenn man einige besondere Rahmenbedingungen (Größe, Schnitt) beachtet.
Animationen
Animationen ermöglicht die Visualisierung von Fertigungvorgängen, Montageabläufen oder Arbeitsprozessen. Mit der 3D-Visualisierung können komplexe Zusammenhänge anschaulich vermittelt werden. Exklusive Waren lassen sich effektvoll in Szene setzen. Animationen ziehen auch den Betrachter an, die Aufmerksamkeit richtet sich sofort auf die animierten Inhalte. Animationen sollten sparsam und nur wenn sie einen tatsächlichen Nutzen bringen, eingesetzt werden. Seiten mit einer Vielzahl von Animation wirken oft sehr laienhaft und lenken den Betrachter ab.
Eine moderne Seite sollte folgende technische Anforderungen erfüllen
Standartkonformer Quellcode
Je saubere
das HTML oder XHTML(das kann einfach in gewissen
Grenzen mit einem Validator
überprüft
werden), desto besser könne
insbesondere Sehbehinderte Menschen mit ihren technischen
Mitteln
die Seite betrachten. Das Internetseiten barrierefrei (den
WCAG-Richtlinien des W3C konform) entworfen werden
erhält
einen immer höher
werdenden Stellenwert. Neue Seiten oder ein Seitenredesign
sollten
deshalb immer standartkonform entwickelt
werden.
Trennung von Inhalt und Design
Das Design kann den Unständen entsprechend angepasst werden, der Inhalt bleibt davon unangetastet. Eine gängige Technik, dies zu realisiern ist der Einsatz von Cascading Style-Sheets(CSS).
Aktualisierbarkeit
Wichtige Rubriken wie der FAQ-Bereich, Firmen-News oder verfügbare Stellen sollten einfach und schnell, auch ohne HTML-Kenntnisse, aktualisierbar sein. Meist werden zu diesem Zweck Web Content Management Systeme eingesetzt.
(X)HTML in Kombination mit CSS als State-of-the-art-Technik
Die HTML-Sprache wurde für wissenschaftliche Texte im Internet geschaffen, nicht für die Darstellung von Unternehmens-Präsentationen im Corporate Design. In der Vergangenheit - und aktuell noch weit verbreitet - wurden und werden viele Tricks angewandt, um trotz der Beschränkungen in HTML ansprechende Webseiten zu erstellen. Wesentlich tragen dazu unsichtbare Tabellen als Seitengerüst und unsichtbare Bilder als Abstandshalter bei. Mit der Einführung von CSS (Cascading Style Sheets) und dessen immer besser gelingende Implementierung in modernen Browsern (Internet Explorer, Netscape Navigator, Opera, usw.) sind diese Hilfsmittel nicht mehr notwendig - und auch nicht sinnvoll!
Mit dem Einsatz von (X)HTML in Kombination mit CSS als State-of-the-art-Technik entstehen folgende Vorteile:
-
Einheitliche Anwendung für mehrere Ausgabemedien bedeutet im hohen Maße Kostenersparnisse und mehr Flexibilität bei Änderungswünschen.
-
Änderungen des Layouts werden zentral an wenigen CSS-Dateien vorgenommen und wirken sich auf alle Internetseiten gleichzeitig aus - egal ob die Internetpräsenz zehn Seiten oder hunderte Seiten umfasst. Der laufende Pflegeaufwand wird geringer, Änderungen sind schneller durchzuführen.
-
Die Indexierung durch Suchmaschinen wird wesentlich erleichtert und ist ausgeprägt steuerbar.
-
Wesentlicher Schritt in Richtung Barrierefreiheit - für Behörden-Websites ist dies bereits Pflicht.
-
Schnelle Zugriffszeiten beim Aufruf der Webseiten - Ihre Kunden erhalten ein deutliches Plus an Service.
-
Auch bei ausgeschaltetem JavaScript funktioniert die Navigation in den Webseiten ohne Einschränkung.
-
Zukünftige Entwicklungen werden diese Sprachen als Standard voraussetzen - der frühzeitige Einsatz spart Kosten oder vermeidet gar Fehlinvestitionen.
-
Um die Darstellung von Internetseiten auch auf Handys, Handhelds, Web-TV und anderen Plattformen zu ermöglichen, müssen nicht mehr wie bisher komplett getrennte Anwendungen geschrieben werden.
-
Auch die Darstellung der Inhalte als PDF oder Druckseite benötigt nur jeweils ein zentrales Stylesheet für die gesamte Webpräsenz, die Inhalte selbst (HTML-Dateien) bleiben unverändert.
Lesen Sie dazu auch folgenden Artikel:
Michael
Charlier: Stylesheets als Kostenbremse - Große
Unternehmen entdecken die Webstandards
Große Firmen und Portale wie z.B. Lycos France, Opera, Mercedes, Stern, Post und viele andere stellen ihre Seiten bereits teilweise oder komplett auf XHTML und CSS um. Dieser im Jahr 2003/2004 begonnene Trend wird sich im Jahr 2006 verstärkt fortsetzen, denn die Vorteile des CSS-Designs überzeugen.
Lesen Sie weiter:
Alle Artikel zu Internet & Webdesign:
Vorteile eines eigenen
Webauftritts
Zielgruppe und mögliche Ziele
Grundlagen für
eine erfolgreiche Website
Speziell für Heilberufe und Rechtsanwälte:
Die Praxis-Homepage
Gestaltung der Webseiten:
Inhalte, Webdesign & Technik
Suchmaschinenoptimierung
Webpromotion
Web Content-Management-Systeme
Onlineshops
Web-Technologien
Erweiterung bestehender
Webauftritte: Statische und dynamische Inhalte, Scripte und Funktionen
Rechtliches
Unser Service - Vorgehensweise bei der Entwicklung Ihrer Webpräsenz
Preisbeispiele
Über Advantec Systems:
unser
gesamtes Leistungsspektrum
Tel.:
+49 (0) 6746 802441
