Wissenswertes für Webdesigner beim Gestalten einer Website bei der Optimierung

Unten können Sie so einen Bildwechsel testen. Ursprünglich waren auch die Bilder auf der Seite "Über uns" mit dieser Technik realisiert.

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.

.monika { background: url(/bilder/monika.jpg) no-repeat 0 0; width: 300px; height: 199px } .monika:hover { background-position: 0 -200px }

Das Bild selber wird mit einem div-Container in die Seite eingebunden.

<div class="monika" title="Hallo, ich bin die Monika..."> Monika </div>

Eine weitere Technik mit dem schönen Effekt des langsamen Einblenden des Farbbildes (siehe unten) wird wie folgt realisiert.

Hierfür benötigen wir die beiden Einzelbilder. Also ein Bild in "Farbe" und das andere in "schwarz/weiß" und legen diese Bilder mit CSS-Mitteln übereinander. Das "farbige Bild" liegt dabei als unterstes und das "schwarz/weiß-Bild" darüber.

Wenn man nun mit der Maus das "schwarz/weiß-Bild" berührt, blenden wir das Bild mit dem Befehl "opacity" langsam aus und das "farbige Bild" erscheint. Die folgenden Zeilen in CSS und HTML sind dazu notwendig.

.monika2 { position: relative; width: 300px; height: 199px } .monika2 img { position: absolute; transition: opacity 1s ease-in-out } .monika2 img.oben:hover { opacity: 0; transform: scale(1) }

Die beiden Bilder werden wie im ersten Beispiel mit einem div-Container eingebunden.

<div class="monika2" title="Hallo, ich bin die Monika..."> <img src="/bilder/monika2.jpg" width="300" height="200" alt="Farbbild von Monika" /> <img class="oben" src="/bilder/monika1.jpg" width="300" height="200" alt="Schwarz-Weißbild von Monika" /> </div>

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:

<?php ob_start( 'ob_gzhandler' ); ?>

Diese Methode ist auf unseren Webseiten nicht mehr aktiv und wird nun mit Hilfe der gzip-Compression-Datei über die .htaccess-Datei realisiert.

Genau beschrieben ist es unter Webseiten mit gzip-Compression komprimieren und beschleunigen.

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:

<?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.

<Files button.css> ForceType application/x-httpd-php </Files>

Diese Methode ist auf unseren Webseiten nicht mehr aktiv und wird nun mit Hilfe der gzip-Compression-Datei über die .htaccess-Datei realisiert.

Genau beschrieben ist es unter Webseiten mit gzip-Compression komprimieren und beschleunigen.

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:

<?php ob_start('ob_gzhandler'); header('Content-Type: text/javascript'); ?>

Auch hierbei werden in einer .htaccess-Datei alle JavaScripte eingebunden.

<Files keypress.js> ForceType application/x-httpd-php </Files>

Diese Methode ist auf unseren Webseiten nicht mehr aktiv und wird nun mit Hilfe der gzip-Compression-Datei über die .htaccess-Datei realisiert.

Genau beschrieben ist es unter Webseiten mit gzip-Compression komprimieren und beschleunigen.

Der große Nachteil bei den vorher aufgeführten Methoden ist, dass alle Dateien geändert werden müssen. Im Nachhinein eine sehr mühselige Arbeit.

Die gzip-Compression über die .htaccess-Datei funktioniert mit dem mod_deflate Modul des Servers. Dadurch wird zwar die Serverlast etwas erhöht, aber durch die eingesparte Datenmenge wird dieser Nachteil mehr als ausgeglichen.

Diese Methode hat den großen Vorteil, dass wir lediglich die .htaccess-Datei wie folgt ändern müssen:

<IfModule mod_deflate.c> <FilesMatch "\.(ico|js|css|html|htm|php|xml|woff|ttf|otf|eot)$"> SetOutputFilter DEFLATE </FilesMatch> </IfModule>

Mit der ersten Zeile wird geprüft, ob das Modul überhaupt auf dem Server aktiviert ist. Ist das nicht der Fall müssen leider die vorher aufgeführten Methoden angewendet werden.

Mit diesem php-Skript kann man sehr einfach überprüfen, ob die gzip-Compression auch wirklich funktioniert.

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

CSS

RSS-Feed

P3P

Bildschirmgrößentest

Accessibility (Zugänglichkeit)

Tools die mehrere Tests beinhalten

Diese Webseiten und Programme haben uns bei der Erstellung unserer Website geholfen.

• PSPad - 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 - SELFHTML ist die ideale Seite um HTML zu lernen. Man findet ein Stichwortverzeichnis für alle HTML-Befehle und viele Beispiele.
• CSS 4 You - 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 - Der auf dieser Website eingesetzte Counter ist ein Besucherzähler mit Textausgabe und umfangreichen Statistiken auf PHP/MySQL-Basis.
• PHP einfach - 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 - 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 - Der eingesetzte Skin für unsere Fotogalerie ist der FotoPlayer. An diesem Tool wird sehr professionell gearbeitet.