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.

CSS
a.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


   CSS

CSS


   RSS-Feed

RSS


   P3P

P3P


   Bildschirmgrößentest

Bildschirmgrößen


   Accessibility (Zugänglichkeit)

Accessibility Test


   Tools die mehrere Tests beinhalten

Tools


Zum Seitenanfang


Alles für eine gute Homepage.


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