Wissenswertes für Webdesigner beim Gestalten einer Website bei der Optimierung
Auf dieser Seite zeigen wir ein paar Tipps und Tricks bei der Optimierung einer Website.
Navigation
Optimierung
Wie erzeugt man einen Bildwechsel ohne Wartezeit?
Zu sehen ist so ein Bildwechsel auf der Seite "Über uns".
Um nicht mit Java-Scripten und Mouseover-Effekten zu arbeiten, haben wir diesen Effekt mit CSS-Mitteln und der dynamischen Pseudo-Klasse ":hover" realisiert. Und damit nicht ein zweites Bild geladen werden muß, und es damit zu Wartezeiten beim Bildwechsel kommt, gehen wir folgendermaßen vor.
Anstelle von zwei Bildern (eins in "Farbe" und eins in "schwarz/weiß") haben wir die Bilder zusammengefügt. Unterhalb des "schwarz/weiß-Bildes" haben wir das "farbige Bild" eingebunden und erhalten somit nur ein Bild.
In dem Moment wo nun der Mauszeiger das "schwarz/weiß-Bild" berührt, verschieben wir das Bild exakt um die Hälfte nach oben und das "farbige Bild" erscheint. Das ist schon alles.
CSSa.monika:link, a.monika:visited { background:url (/bilder/monika.gif) no-repeat 100% 0; padding: 0 300px 182px 0 } a.monika:hover, a.monika:active, a.monika:focus { background: url(/bilder/monika.gif) no-repeat 100% -200px; padding: 0 300px 182px 0 }
Zum Seitenanfang
HTML mit mod_gzip komprimieren
Webseiten werden mit dem externen Erweiterungsmodul mod_gzip spürbar schneller geladen, weil die Inhalte der Seiten durch das Verfahren erheblich komprimiert werden.
Am Anfang einer HTML-Datei braucht man dafür nur die folgenden Zeilen einzugeben:
HTML<?php ob_start( 'ob_gzhandler' ); ?>
Zum Seitenanfang
CSS mit mod_gzip komprimieren
Webseiten werden noch schneller geladen, in dem man auch die CSS-Dateien mit mod_gzip komprimiert. Unsere Dateien sind über die Hälfte kleiner geworden!
Am Anfang einer CSS-Datei wird folgendes eingegeben:
CSS<?php ob_start('ob_gzhandler'); header('Content-Type: text/css'); ?>
Nun muß man nur noch in einer .htaccess-Datei alle CSS-Dateien auf der folgenden Art und Weise einbinden. Die .htaccess-Datei muß dabei in dem gleichen Pfad wie die CSS-Dateien liegen.
.htaccess<Files button.css> ForceType application/x-httpd-php </Files>
Zum Seitenanfang
JavaScripte mit mod_gzip komprimieren
Und das schöne bei diesem Erweiterungsmodul ist, es läßt sich auch bei einem JavaScript anwenden! Ein von uns getestetes JavaScript ist zum Beispiel von 3.371 Byte auf 1.354 Byte geschrumpft!
Am Anfang des JavaScript wird wieder folgendes eingegeben:
JavaScript<?php ob_start('ob_gzhandler'); header('Content-Type: text/javascript'); ?>
Auch hierbei werden in einer .htaccess-Datei alle JavaScripte eingebunden.
.htaccess<Files keypress.js> ForceType application/x-httpd-php </Files>
Zum Seitenanfang
Mit welchen Tools haben wir unsere Webseiten getestet?
Um unsere Webseiten nach möglichst vielen Kriterien zu testen, haben wir diese mit verschiedenen Tools überprüft, von denen wir hier die wichtigsten auflisten.
HTML und XHTML
HTML und XHTML
- Markup Validation Service
(externer Seitenaufruf): Der bekannteste Validator (W3C Konsortium)
- Validome Validator
(externer Seitenaufruf): Der Validator von Validome findet noch einige Fehler mehr.
- Add-on für Firefox
(externer Seitenaufruf): Ein Add-on für den Firefox-Browser ist der HTML Validator basierend auf Tidy. Er überprüft HTML-Dokumente auf Fehler und zeigt dann entsprechende Icons in der Statuszeile des Browsers an.
- WDG LinkValet
(externer Seitenaufruf): Der WDG LinkValet testet die Erreichbarkeit aller Seitenaufrufe der ganzen Website. Der Vorteil ist, er weist jeden Link mit entsprechendem Fehlerbericht aus.
- W3C LinkChecker (externer Seitenaufruf): Auch der W3C LinkChecker vom W3C Konsortium überprüft die Erreichbarkeit der Seitenaufrufe. Hier muß man nur folgende Häkchen setzen: Summary only, Hide redirects: all, Check linked documents recursively recursion depth: 500.
CSS
CSS
- CSS Validation Service (externer Seitenaufruf): Der W3C CSS Validierungsdienst (W3C Konsortium).
RSS-Feed
RSS
- Feed Validation Service
(externer Seitenaufruf): Der W3C Feed Validation Service für Atom und RSS-Feed (W3C Konsortium).
- Validome FEED Validator
(externer Seitenaufruf): Bei dem Validator von Validome kann man die verschiedenen RSS-Formate testen.
- FEED Validator (externer Seitenaufruf): Der FEED Validator testet ebenfalls den RSS-Feed. Er findet aber meines Erachtens noch einige Fehler mehr.
P3P
P3P
- P3P Validator (externer Seitenaufruf): Der P3P Validator ist ebenfalls vom W3C Konsortium. P3P schafft Transparenz im sensiblen Feld des Datenschutzes.
Bildschirmgrößentest
Bildschirmgrößen
- Harbeck Internet Service (externer Seitenaufruf): Vom Harbeck Internet Service gibt es einen Bildschirmgrößentest für die Website.
Accessibility (Zugänglichkeit)
Accessibility Test
- Web Accessibility Test
(externer Seitenaufruf): Mit dem TAW (Web Accessibility Test) testet man eine Webseite auf seine Zugänglichkeit und Barrierefreiheit, basierend auf den Richtlinien des
W3C - Web Content Accessibility Guidelines 1.0 (WCAG 1.0).
- Functional Accessibility Evaluator (externer Seitenaufruf): Mit dem FAE testet man eine Webseite auf seine funktionelle Zugänglichkeit.
Tools die mehrere Tests beinhalten
Tools
- Qualidator
(externer Seitenaufruf): Der Qualidator überprüft die ersten 5 Seiten einer Website mit ca. 60-70 automatischen Tests auf die Kernpunkte der Bereiche Usability (Benutzungsfreundlichkeit), Accessibility (Zugänglichkeit), SEO (Suchmaschinenoptimierung) und Quality (technische Qualität).
Unser Testresultat vom 21.10.2009 ergibt einen Wert von 96.68%:(externer Seitenaufruf) - Die getestete Website schneidet in der Gesamtanalyse exzellent ab und spielt in der "Premium League"! Die Zugänglichkeitsrichtlinien (Accessibility) wurden auf höchstem Niveau vorbildlich umgesetzt. Hinsichtlich der Usability Grundsätze wurde die Website vorzüglich realisiert. Der Suchmaschinenoptimierung wurde bestmögliche Beachtung geschenkt.
- Website Grader SEO Tool
(externer Seitenaufruf): Der Website Grader ist ebenfalls ein kostenloses SEO-Tool, das die Marketing-Effektivität einer Website testet. Es liefert eine Übersicht über die Website Traffic, Suchmaschinenoptimierung und anderen Faktoren. Außerdem bietet es auch einige grundlegende Ratschläge, wie und wo die Website verbessert werden kann.
Unser Testresultat vom 21.10.2009 ergibt einen Wert von 97.2%:(externer Seitenaufruf) - Seitwert
(externer Seitenaufruf): Der Seitwert ist eine Zahl zwischen 0 und 100, die anhand verschiedener (automatisch auslesbarer) Faktoren eine Art Qualitätsindex von einer Webseite beziehungsweise einer Domain erstellt.
Unser Testresultat vom 21.10.2009 ergibt einen Wert von 35.18:(externer Seitenaufruf) - Dein Domainwert
(externer Seitenaufruf): Für jede bewertete Domain werden Merkmale wie zum Beispiel Backlinks in verschiedenen Suchmaschinen, den Google-Pagerank und vieles mehr angezeigt und gespeichert.
Unser Testresultat vom 19.10.2009 ergibt einen Wert von 2.218,01 EUR:(externer Seitenaufruf) - Web Page Analyser (externer Seitenaufruf): Der Web Page Analyser analysiert die Ladegeschwindigkeit sowie die Größe aller eingebundenen Elemente einer Seite.
Zum Seitenanfang
Alles für eine gute Homepage.
- PSPad
(externer Seitenaufruf) - Diese Website habe ich mit PSPad erstellt. Es ist ein besonders auf Programmierer und Webdesigner zugeschnittener Editor für Microsoft Windows. Hervorzuheben sind: Einfaches Arbeiten mit verschiedenen Entwicklungsumgebungen, farbig hervorgehobene Syntax für viele Programmiersprachen, HTML-Vorschau mit einem Tastendruck.
- SELFHTML
(externer Seitenaufruf) - SELFHTML ist die ideale Seite um HTML zu lernen. Man findet ein Stichwortverzeichnis für alle HTML-Befehle und viele Beispiele.
- CSS 4 You
(externer Seitenaufruf) - Auf CSS 4 You hat man eine nahezu komplette CSS-Referenz auf deutsch, ergänzt durch etliche Tipps und Tricks. Hier habe ich mir viele Anregungen geholt.
- Besucherzähler ch-Counter
(externer Seitenaufruf) - Der auf dieser Website eingesetzte Counter ist ein Besucherzähler mit Textausgabe und umfangreichen Statistiken auf PHP/MySQL-Basis.
- PHP einfach
(externer Seitenaufruf) - Das Clanbook 1.3 von "PHP einfach" ist ein professionelles Gästebuch. Sie können das Design über ein Adminbereich verändern oder neue Designs anlegen.
Ich habe unser Gästebuch aber noch zusätzlich um den Eintrag einer Gast-Homepage und das Einfügen von Smilies erweitert. Desweiteren wird der Eintrag einer E-Mail-Adresse verschlüsselt, und die Seite für einen Gästebucheintrag ist in Form einer Postkarte erstellt. - JAlbum
(externer Seitenaufruf) - Mit JAlbum präsentieren wir die Bilder auf unserer Website. Es ist einfach zu benutzen und individuell. Das Erscheinungsbild kann durch Anwendung von Skins (Album Themen) angepasst werden.
- Der Skin Foto-Player (externer Seitenaufruf) - Der eingesetzte Skin für unsere Fotogalerie ist der FotoPlayer. An diesem Tool wird sehr professionell gearbeitet.