. .

Ihre Homepage • webdesigntechnisch optimiert

Techniken der Webdesign-Optimierung

Aufgrund dieser Vielschichtigkeit von Webdesign, ist es keine leichte Aufgabe. Weil es jedoch sehr einfach ist, eine Seite ins Netz zu stellen, übersehen viele, dass zu einer guten Seite sehr viel mehr gehört, als nur einen WYSIWYGInformationBedeutung: WYSIWYG„What You See Is What You Get“ - deutsch: „Was du siehst, ist, was du bekommst“-Editor zu bedienen.

Webdesign ist mehr als der Begriff an sich hergibt! Webdesign umfasst die Gestaltung, den Aufbau und die Benutzerführung von Webseiten. Nahezu alle Aspekte einer erfolgreichen Webseitenerstellung spielen hier eine entscheidende Rolle:

Der Wichtigste Teil - der Webseitenerstellung ist kein Bestandteil des Webdesigns - der Inhalt! Die schönste, schnellste und optimal bedienbare Webseite wird keinen Erfolg haben, wenn sie keinen interessanten Inhalt bietet!


Quelltext-Optimierung

Technischer Aufbau!

Der technische Aufbau einer Webseite ist reines Handwerk, das man jedoch beherrschen sollte! Der Webdesigner sollte also gültige und fehlerfreie HTMLInformationBedeutung: HTMLHypertext Markup Language, dt. Hypertext-Auszeichnungssprache- und CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente-Konstrukte einsetzen, Browserfehler berücksichtigen und von proprietärenInformationBedeutung: proprietärennicht den allgemein anerkannten Standards entsprechend, sozusagen „hauseigene“ Entwicklungen Erweiterungen absehen.

Die Programmierung der Webseiten sollte in XHTMLInformationBedeutung: XHTMLeXtensible Hypertext Markup Language, dt. Erweiterbare Hypertext-Auszeichnungssprache erfolgen, das sich im modernen Webdesign weitestgehend durchgesetzt hat. XHTMLInformationBedeutung: XHTMLeXtensible Hypertext Markup Language, dt. Erweiterbare Hypertext-Auszeichnungssprache setzt hierbei auf eine strikte Trennung von strukturiertem Inhalt und dem jeweiligen Layout, welches konsequent voneinander getrennt definiert wird.

Die Trennung von Layout und Inhalt der Webseiten sollte ausschließlich durch CSSInformationBedeutung: CSSCascading Style Sheets, dt. deklarative Stylesheet-Sprache für strukturierte Dokumente erfolgen. CSS bietet die Möglichkeit, neben diversen Angaben zu Farben und Schriften, Elemente frei zu positionieren oder Hintergrundbilder festzulegen.

Serverseitig gibt es noch eine Vielzahl an Techniken, wie beispielsweise Scriptsprachen wie PHPInformationBedeutung: PHPHypertext Preprocessor, ursprünglich „Personal Home Page Tools“, MySQLInformationBedeutung: MySQLMySQL Server ist ein Relationales Datenbankverwaltungssystem Datenbanken usw.. Die Kombination dieser Techniken, hilft bei der Erstellung einer erfolgreichen Webseite.

» mehr zum Thema: Ladezeit & Quelltext-Optimierung


Struktur-Optimierung

Navigation und Struktur!

Der wohl wichtigste Aspekt für ein erfolgreiches Webdesign. Dem Auftraggeber und auch dem Gestalter der Webseiten ist üblicherweise klar, was die verwendeten Begriffe bedeuten und welche Informationen sich wo "verbergen". Kann das der Benutzer der Webseite auch, auf den ersten Blick nachvollziehen?

Die Struktur einer Website ist die grundlegende Voraussetzung für die Organisation der Inhalte. Sie stellt die Basis für die Gliederung der Informationen und die Gestaltung der Navigation dar.

Wobei die Struktur aus den inhaltlichen Anforderungen, die der Auftraggeber stellt, resultiert. Da sich die vorgegebene Struktur nur selten tatsächlich umsetzen lässt, müssen die darzustellenden Inhalte mit einigem

Aufwand in eine sinnvolle Struktur gebracht werden. Diese komplexen Informationen zu strukturieren ist nicht einfach und dies so zu tun, dass jeder das, was er sucht, auch schnell findet, erst recht nicht.

Die Navigation auf Webseiten gilt aktuell als das größte Problem im Internet und stellt gleichzeitig das größte Hindernis für den Erfolg von Webauftritten dar.

Einige Strukturen haben sich allerdings inzwischen etabliert, die sich auch den meisten "neuen" Nutzern schnell erschließen: So befinden sich Navigationselemente links und/oder oben. Links (Verweise) sind blau und unterstrichen. Abweichungen hiervon sollten gut durchdacht sein, wenn man will, dass sich die Besucher zurechtfinden.


Design-Optimierung

Optisches Design!

Das Optische Design ist, was dem Besucher als erstes ins Auge sticht und was auch die meisten unter dem Begriff Webdesign verstehen. Selbstverständlich ist auch das Optisches Design ein ganz wesentlicher Aspekt, jedoch nicht der einzige und entscheidende. Wie sich an den zahlreichen sehr hübschen aber wenig brauchbaren Webseiten erkennen lässt.

Anders als beim klassischen Layout von Druckerzeugnissen, besteht das Problem bei Webseiten, nicht an der pixelgenauen Ausrichtung der Elemente, sondern darin, dass eine Webseite auf den unterschied- lichen Ausgabemedien unter wechselnden Bedingungen gut aussehen soll.

Gutes grafisches Design zeichnet sich unter anderem dadurch aus, dass es auf einem Bildschirm mit einer Auflösung von 640*480 Pixel ebenso gut aussieht, wie mit einer Auflösung von 1680*1050 Pixel.

Darüber hinaus muss die Webseite lesbar bleiben, wenn der Besucher eine andere, größere oder kleinere, Schriftart verwendet. Des Weiteren sollte die Webseite auch ohne Farben oder mit den Standardfarben des Browsers nutzbar sein.

Nicht zu vergessen die technischen Einschränkungen des WWWInformationBedeutung: WWWWorld Wide Web:

  • große Datenmengen erfordern zu lange Ladezeiten,
  • die geringe Auflösung heutiger Monitore erlaubt nur relativ wenige Schriftarten,
  • Bilder, die nicht den gesamten Bildschirm einnehmen, ist kaum etwas zu erkennen,
  • die Darstellung der Farben ist bei jedem Computer / Monitor unterschiedlich.

Das heißt nicht, das es nicht möglich ist für eine Webseite ein schickes Layout zu erstellen, aber es ist durchaus schwieriger und etwas anders als bei Printmedien.


Text-Optimierung

Textaufbereitung / Copywriting

"Textaufbereitung? Warum denn das, wir haben doch fertige Prospekte!"

Die Schwierigkeit entsteht oft dadurch, dass der Text in der Regel vom Auftraggeber gestellt wird und nicht den Online Prinzipien entspricht. Die berüchtigte Firmen- broschüre kann selbstverständlich nicht 1:1 übernommen werden.

Die Texteinhalte der Webseiten werden meist weniger gelesen, als überflogen - sie werden gescannt. Technisch bedingt, zeigt die verfügbare Bildschirmfläche meist deutlich weniger Text, als ein Blatt Papier. Darüber hinaus ist das Lesen am Monitor deutlich anstrengender als von Papier.

Bei der Umsetzung von Suchmaschinen optimierenden Maßnahmen kommt es im Wesentlichen auf den Inhalt und dessen Lesbarkeit für die Suchmaschinen an.

Copywriting bezeichnet das Verfassen von Suchma- schinen optimierten Texten. Wobei die Themenrelevanz und KeyWord-DichteInformationBedeutung: KeyWord-Dichtebezeichnet das Verhältnis zwischen dem Vorkommen eines Wort im gesamten Text den Schlüssel zum Erfolg darstellen. Um jedoch mit einer Webseite von Suchmaschinen nicht als Spam klassifiziert zu werden, sollte die KeyWord-DichteInformationBedeutung: KeyWord-Dichtebezeichnet das Verhältnis zwischen dem Vorkommen eines Wort im gesamten Text nicht mehr als 8% betragen.

Entscheidend ist somit die standardkonforme Program- mierung von Dokumenten, die die technische Lesbarkeit für die Suchmaschinen erfüllt. Dabei sind neben Kenntnissen über die richtige KeyWord-DichteInformationBedeutung: KeyWord-Dichtebezeichnet das Verhältnis zwischen dem Vorkommen eines Wort im gesamten Text auch der standardkonforme Einsatz von Überschriften, alt-AttributenInformationBedeutung: alt-Attributenin HTML und XHTML, ein alternativer Text für ein Bild und AnkertextenInformationBedeutung: AnkertextenAnkertext oder Linktext, ist der auswählbare, hervorgehobene Text eines Links/Verweises, dieser sollte den Inhalt der Webseite auf den der Link verweist, sinngemäß beschreiben wichtig.


Entsprechend müssen Texte für das Web angepasst und aufbereitet werden:

  • Verwenden Sie kurze, prägnante Formulierungen.
    Internetnutzer schätzten den sparsamen Umgang mit ihrer Zeit. überflüssiges Scrollen oder Blättern bleiben ihm erspart.
  • Wichtiges steht am Anfang, weniger Wichtiges folgt.
    So entgeht dem Benutzer nichts, wenn er nicht weiter liest. Er kann sofort entscheiden, ob der Artikel für ihn wichtig ist.
  • Gliedern Sie den Text in Absätze, Zusammenfassungen und übersichten.
    Es ist für den Benutzer leichter, für ihn Unwichtiges auszusortieren und sein Kurzzeitgedächtnis ist nicht überfordert. Bei Interesse kann er weiterführende Links zu kompletten Artikeln akzeptieren.
  • Bieten Sie komplette Artikel oder Detailinformationen auf weiteren Ebenen an.
    Der Benutzer kann aktiv auswählen und entscheidet optional nach seinem Interesse.
  • Überschriften, Zwischenüberschriften, Randtexte und Aufzählungen informieren auf einen Blick.
    Der Benutzer kann die komplette Seite schnell scannen. Die Kerninhalte erfasst er im überfliegen.
  • Verwenden Sie, für die Zielgruppe, verständliche Begriffe.
    Der Benutzer kann ohne Zuhilfenahme eines Fremdwörterbuchs dem Inhalt folgen. Zeichnen Sie Fachbegriffe entsprechend aus.
  • Verzichten Sie auf werbende Sprache.
    Der Benutzer möchte für ihn relevante Fakten, keine Phrasen. Der Benutzer wünscht eine Perspektive, die sich auf ihn konzentriert.

Schnittstellen-Optimierung

Benutzerschnittstelle!

Sobald es um mehr als das Darstellen von Texten und Bildern geht, muss man sich mit der Benutzer- schnittstelle / GUIInformationBedeutung: GUIGraphical User Interface befassen. Die Navigation der Webseite ist bereits ein Bestandteil der Benutzerschnittstelle.

Der Benutzer muss Formulare, Suchmasken und dynamisch aufgebaute Seiten bedienen können, und deren Funktion muss dem Benutzer plausibel sein, sonst wird er bei der Bedienung wenig Erfolg haben.

Die Umgestaltung für den Benutzer Altvertrauter Bedienelemente sollte gut durchdacht sein. Zum Beispiel haben häufig umgestaltete Scrollbars den Nachteil, dass sie nur noch von wenigen Besuchern erkannt werden und somit der untere Teil der Webseite nicht mehr erkannt

wird. Bei Icons hat sich gezeigt, dass eine Kombination aus Text und Bild eine schnellere Einarbeitung des Benutzers ermöglicht. Für Anfänger, und dass ist beim ersten Besuch einer Webseite jeder Benutzer, ist nur Text am einfachsten zu bedienen.

Die alleinige Nutzung von Grafiken ist meist kaum verständlich und welcher Benutzer hat schon Zeit und Lust, langsam mit der Maus über jede Grafik zu gehen, um festzustellen, welche Funktion sich dahinter verbirgt? Und dies auch nur wenn der Webdesigner es nicht versäumt hat das alt-AttributInformationBedeutung: alt-Attributin HTML und XHTML, ein alternativer Text für ein Bild der Grafik auch auszuzeichnen.



Linkempfehlungen

Verweise & Links

HTML Quelltext Validatoren

CSS Validator

Link Validator


» zum Seitenanfang

Ladezeit-Optimierung

mehr zum Thema: Optimierung durch Reduzierung der DatenmengenObjekte reduzieren

Für die Ladezeit einer Webseite ist primär die Anzahl der zu ladenden Ob- jekte verantwortlich, eine Reduzierung führt somit zu schnelleren Ladezeiten.

» mehr zum Thema: Optimierung durch Reduzierung der Datenmengenmehr lesen

mehr zum Thema: Optimierung der Ladezeit durch Quelltext-OptimierungOptimierung des Quelltextes

Eine Ladezeit-Optimierung des Quell- textes durch dessen Komprimierung, äußert sich somit primär in schnel- leren Ladezeiten und weniger Server-Traffic.

» mehr zum Thema: Optimierung der Ladezeit durch Quelltext-Optimierungmehr lesen

mehr zum Thema: Optimierung der Ladezeit durch BildbearbeitungOptimierung von Grafiken

Eine gute Bildbearbeitungssoftware ist zwar sehr hilfreich, jedoch immer nur so gut wie deren Anwender.

» mehr zum Thema: Optimierung der Ladezeit durch Bildbearbeitungmehr lesen

mehr zum Thema: Optimierung der Ladezeit durch KomprimierungDatei Komprimierung

Eine Ladezeit-Optimierung durch Komprimierung des HTML Quelltext via PHP und Komprimierung der CSS- & JavaScript-Dateien.

» mehr zum Thema: Optimierung der Ladezeit durch Komprimierungmehr lesen



PageSpeed-Optimierung

mehr zum Thema: Browser-CachingLeverage browser caching

Für statische Ressourcen der Webseite, wie Grafiken, JavaScript- und CSS-Dateien das Browser-Caching aktivieren.

» mehr zum Thema: Browser-Cachingmehr lesen

mehr zum Thema: CSS-Dateien kombinierenCombine external CSS

Alle externen CSS-Dateien mittels PHP kombinieren und so die Anzahl der HTTP-Requests reduzieren.

» mehr zum Thema: CSS-Dateien kombinieren • Combine external CSSmehr lesen


mehr zum Thema: JavaScript-Dateien kombinierenCombine JavaScript

Alle externen JavaScript-Dateien mittels PHP kombinieren und so die Anzahl der HTTP-Requests reduzieren.

» mehr zum Thema: JavaScript-Dateien kombinieren • Combine external JavaScriptmehr lesen

mehr zum Thema: JavaScript-Dateien später ladenDefer loading of JavaScript

Externen JavaScript-Dateien später laden, sodass andere Ressourcen parallel heruntergeladen werden können und das Laden der Webseite beschleunigt wird.

» mehr zum Thema: JavaScript-Dateien später laden • Defer loading of JavaScriptmehr lesen

mehr zum Thema: JavaScript-Dateien später parsenDefer parsing of JavaScript

Alle externen JavaScript-Dateien später parsen um den Aufbau der Webseite für den Nutzer so schnell wie möglich zu realisieren.

» mehr zum Thema: JavaScript-Dateien später parsen • Defer parsing of JavaScriptmehr lesen



Backlink Optimierung

mehr zum Thema: Linkpartner findenLinkpartner finden

Die klassische Art des externen Linkaufbaus besteht darin, Themen relevante Linkpartner zu finden.

» mehr zum Thema: Linkpartner findenmehr lesen

Webkataloge Richtig nutzen

Wenn es darum geht die eigene Website bekannt zu machen spielen Webkataloge eine große Rolle.

» mehr zum Thema: Webkataloge Richtig nutzenmehr lesen

mehr zum Thema: Links über PresseportaleLinks über Presseportale

Mit der Veröffentlichung einer Presse- meldungen in einem Presseportal können Sie gezielt Backlinks generie- ren.

» mehr zum Thema: Links über Presseportalemehr lesen

mehr zum Thema: Backlinks der ZukunftBacklinks der Zukunft

Social Bookmarks sind die Backlinks der Zukunft, da deren Relevanz für Suchmaschinen weiter zunimmt.

» mehr zum Thema: Backlinks der Zukunftmehr lesen




Tastaturkürzel