Die perfekte Webseite Teil-1

Die perfekte Webseite Teil-1

• WAM
• Tutorials, How to Do
• Samstag - 27 . August . 2011

In diesem Tutorial wird beschrieben wie man die Technisch Perfekte Webseite erstellt. Wo sind die Tücken, was vergisst man mal schnell. Wie könnt Ihr die Zugänglichkeit oder Benutzerfreundlichkeit sowie die Suchmaschinenoptimierung hoch drücken. Alles Fragen die wir uns jeden tag stellen, aber auch zu beantworten wissen.

Was ich hier gleich sagen kann, aus diesem Tutorial kann man unter Umständen auch ein Buch drucken. Das ist ein echtes Monster. Also, habt etwas Geduld wenn es mal etwas dauert bis der nächste Teil kommt.

Fangen wir mal mit der Startseite TEIL-1 an.

Eine Optimale Startseite enthält weder Flash noch Tabellen noch sonstiges Gerümpel was manch einer gerne auf seiner Webseite sehen würde.

Zu beachten ist hier schon mal ganz vorne die Größe der Startseite. Hierbei ist nicht gemeint wie groß die Seite mit Bildern , Java und CSS Dateien in kb ist, sondern die HTML – PHP – Datei selbst. Im Detail heißt das die Größe sollte ~19.5 kb nicht überschreiten. Messen wie groß die Datei ankommt kann man auf http://tools.pingdom.com .

Dies ist natürlich manches mal leichter gesagt wie getan. Nutzt man zum Beispiel CMS Systeme wie TYPO3, Joomla oder WordPress kann das teileweise eine echte Herausforderung werden. Da diese Systeme die blöde Eigenart haben, immer wieder mehr zu schreiben, wie eigentlich notwendig ist.

Wie kann man es also bewerkstelligen das die Dateien nicht aufgeblasen werden aber trotzdem ein CMS nutzen kann. Als erstes Ihr solltet euch im Vorfeld überlegen wie eure Seite aufgebaut werden soll. Mit Kopfteil, Seitenteil, Inhaltsbereich diesen am besten noch in mehrere Spalten aufgeteilt und nicht zu vergessen der Footer in dem natürlich mehrere Einzelboxen intrigiert sind.

Und genau hier geht es schon los, desto mehr DIV-Container ihr hier verbaut desto größer wird auch die Datei. Ihr solltet Hier und da mal auf einen oder zwei DIV-Container verzichten. Auch extreme Menüs die ja meist mit UL b.z.w. LI geschachtelt sind blasen unnötig auf.

Nehmen Wir zum Beispeil eine Seite und setzten die ersten Container die nun mal fast immer benötigt werden. Das wären Der Seitenbereich meist mit der Deklaration „main“, dann den eigentlichen Inhaltsbereich z.b. „wrapper“. In diesen „wrapper“ wird dann Kopf, in den Kopf wird das Logo, Menü mit z.b 10 Seiten und Suche verbaut. Es folgt der Contentbereich, da wo text stehen soll. Den nennen wir mal „content“. In diesen wird dann Linke und recht seite eingebaut. Da das nicht reicht wird hier noch großer Bereich links und großer Bereich rechts eingebaut. Auch im Seitenteil wird meist mit Einzel boxen gearbeitet. Also hier noch Box 1 -3. Wenden wir uns dem Footer zu Footer ist ein eigener Bereich und wird so angelegt. In den Footer packen wir drei separate Boxen die noch zusätzliche Informationen aufnehmen sollen. Dann dürfte die Seite stehen.

Wenn wir aber jetzt mal die einzelnen Container zählen wird es lustig.

Das sind schon mal 26 Einzel teile, das könnte eng werden. Viel mehr darf es hier schon nicht mehr werden. Also Startseite entschlacken. Das was nicht wirklich benötigt wird raus.

Nicht zu vergessen sind die Menü Punkt, hier vielleicht soweit es geht auch nur auf das nötigste reduzieren. Ihr könnt, wie schon gesagt,auf http://tools.pingdom.com immer testen wie groß das Konstrukt geworden ist. Wenn Ihr dies gemacht habt, ist der erste schritt zu Perfekten Webseite schon erfüllt.

Teil 2 ist in Arbeit und folgt in kürze.