Viele angehenden Webmaster vergessen bei der Projektplanung die Berücksichtigung eines flexiblen, strukturierten und einen auf Änderungen abgestimmten Quellcode beziehungsweise Quelltext. Meist beginnt man mit dem Entwurf der Startseite, worauf dann alle weiteren Unterseiten aufbauen.
Fleißige Website-Betreiber produzieren schnell zahlreiche Projektseiten, welche in der Menge jenseits der 100 liegen. Doch jedes Projekt bedarf einer Generalüberholung. Nach zwei bis drei Jahren ist man unzufrieden mit dem Webdesign oder die Gestaltung entspricht nicht mehr dem Zeitgeist. Ein neues Layout muss her.
Gerade dieses Redesign bereitet einigen Webmastern mächtig Probleme. Sind die Seiten individuell angefertigt, ist die Umstellung eine echte Herausforderung. Benutzt man Standard-Designs und ließt die Texte aus Datenbanken, ist der Aufwand in der Regel geringer, aber dennoch mit einer zeitintensiven Umstellung verbunden. Und die damit einhergehenden Arbeiten sind zudem sehr mühselig und bremsen den eigentlichen Entwicklungsprozess einer Website unnötig.
Um dies zu vermeiden und um einen Relaunch ressourcenminimierend zu starten, müssen Sie Ihre Websitestrukturen, insbesondere den Quellcode und Quelltext, flexibel gestalten. Wenn Sie mit HTML und PHP arbeiten, finden Sie nachstehend einen Vorschlag für das Design des Quellcodes. Andere Programmier- bzw. Seitenbeschreibungssprachen sind dann mit den entsprechenden äquivalenten, sprachspezifischen Befehlen umzusetzen. Die hier unterbreiteten Leitlinien sind unter Einbezug der Suchmaschinenoptimierung (SEO) aufgestellt.
Generelle Regeln für einen flexiblen Quellcode und Quelltext
- Lagern Sie alles aus was nicht zum eigentlichen Quellcode/ Quelltext gehört (CSS, Javascript, etc.)
- Konzipieren Sie Ihr Website bei der Projektplanung mit wiederholenden Elementen (gleiche Platzierung von Header (sichtbarer!), Navigation, Überschriften, Footer) und erstellen Sie hierfür eine extra Datei
- Denken Sie sich eine generelle Grundstruktur im Seitenaufbau für alle Unterseiten aus bzw. für Teilbereiche
- Vereinheitlichen Sie nach den Gesetzen des Webdesigns soviel stilistische Elemente wie möglich ohne monoton zu wirken
- Kürzen Sie selbst zu definierende Bezeichnungen (z.B. Klassennamen) auf ein Minimum
- Beziehen Sie einen möglichen Ausbau bereits in die Projektplanung Ihrer Website mit ein und verwenden Sie Pufferdateien als Platzhalter für zukünftige Erweiterungen
Auslagerung von sekundären Quellcode und Quelltext
Ein schlanker Quellcode hat zwei entscheidende Vorteile. Zum einen hilft er im Bereich der Suchmaschinenoptimierung die OnPage-Faktoren besser zu erfassen und auszurichten und zweitens spart er Zeit bei Wartungsarbeiten aufgrund des übersichtlichen Charakters.
CSS und Javascript können in eine extra Datei (.css oder .js) gepackt und im Head-Bereich (Quellcode) darauf verwiesen werden. Wie das für CSS genau funktioniert, finden Sie in unserem Tutorial CSS – Wie richtig einbinden?. Für Javascript gibt es hier den passenden Beitrag zum Einbinden in den Quelltext.
Gruppierung wiederkehrender Elemente
Versuchen Sie ein Grundschema des Seitenaufbaus für Ihre Start- und Unterseiten zu entwerfen. Je mehr wiederkehrende Elemente Sie integrieren, desto einheitlicher der Webauftritt und desto weniger Aufwand für Abänderungen der jeweiligen Website.
Klassische Elemente der Wiederholung sind der sichtbare Kopfbereich einer Seite, die Navigation und der Footer. Gleiche Inhalte speichern Sie in einer externen Datei ab.
Beispiel für PHP-Quellcode
Ursprünglich:
1 2 3 4 5 6 7 8 9 10 | <body> <div class=navigation> <a href="menüpunkt1.php">MENÜPUNKT 1</a> <a href="menüpunkt2.php">MENÜPUNKT 2</a> <a href="menüpunkt3.php">MENÜPUNKT 3</a> <a href="menüpunkt4.php">MENÜPUNKT 4</a> </div> <h1 class="u01">SEITENÜBERSCHRIFT</h1> <p class="t01">TEXT</p> </body> |
Optimierter Quellcode für PHP:
1 2 3 4 5 | <body> <?php include ("navigation.php"); ?> <h1 class="u01">SEITENÜBERSCHRIFT</h1> <p class="t01">TEXT</p> </body> |
Der Quelltext der Navigation wird dann in einer Datei navigation.php eingefügt:
1 2 3 4 5 6 | <div class=navigation> <a href="menüpunkt1.php">MENÜPUNKT 1</a> <a href="menüpunkt2.php">MENÜPUNKT 2</a> <a href="menüpunkt3.php">MENÜPUNKT 3</a> <a href="menüpunkt4.php">MENÜPUNKT 4</a> </div> |
Beispiel für HTML-Quellcode
Ursprünglich:
1 2 3 4 5 6 7 8 9 10 | <body> <div class=navigation> <a href="menüpunkt1.htm">MENÜPUNKT 1</a> <a href="menüpunkt2.htm">MENÜPUNKT 2</a> <a href="menüpunkt3.htm">MENÜPUNKT 3</a> <a href="menüpunkt4.htm">MENÜPUNKT 4</a> </div> <h1 class="u01">SEITENÜBERSCHRIFT</h1> <p class="t01">TEXT</p> </body> |
Optimierter Quellcode für HTML:
1 2 3 4 5 | <body> <object data="navigation.htm> <h1 class="u01">SEITENÜBERSCHRIFT</h1> <p class="t01">TEXT</p> </body> |
Der Quelltext der Navigation wird dann in einer Datei navigation.htm eingefügt:
1 2 3 4 5 6 | <div class=navigation> <a href="menüpunkt1.php">MENÜPUNKT 1</a> <a href="menüpunkt2.php">MENÜPUNKT 2</a> <a href="menüpunkt3.php">MENÜPUNKT 3</a> <a href="menüpunkt4.php">MENÜPUNKT 4</a> </div> |
Diese Methodik können Sie für alle wiederkehrenden Elemente anwenden. Wenn Sie jetzt eine Änderung in der Navigation durchführen wollen, um beispielsweise einen weiteren Menüpunkt hinzuzufügen, nehmen Sie die Modifikation nur einmal in der dafür vorgesehenen Navigations-Datei vor und die Auswirkungen gelten für alle HTML-/PHP-Dokumente, welche den object/include-Befehl im Quellcode eingebunden haben. Der object-Tag eignet sich übrigens auch sehr gut für andere Objekte, wie FLASH-Inhalte, Videos, Bilder usw. Mehr über den Befehl object finden Sie unter dem SELFHTML-Tutorial Objekte einbinden.
Nutzen Sie den include-/object-Befehl im Quelltext auch als Platzhalter für mögliche, zukünftige Inhalte. Planen Sie diese vorsorglich, aber mit Bedacht ein. Leerdateien sollten sich auf die Suchmaschinenoptimierung (SEO) nicht nachteilig auswirken und sind im schlimmsten Fall redundanter Quellcode. Nutzen Sie beispielsweise den Platz unter der Navigation als Vorhaltefläche für Werbeanzeigen. Diese können Sie dann nachträglich in der dafür vorgesehenen, leeren Datei bequem einfügen und bearbeiten. Der Nachbesserungsaufwand ist somit minimal.
Ergänzend sei anzumerken, dass Sie eine globale und für alle HTML-/PHP-Dokumente gültige CSS-Datei anlegen sollten. Modifikationen können dann ebenfalls in nur einem Arbeitsschritt vorgenommen werden. Betrachten Sie einfach den Quelltext dieser Seite hier (Rechtsklick Maus -> Quellcode anzeigen) und schauen Sie sich den Head-Bereich und die zugehörige CSS-Datei (Pfad einfach in der URL eingeben) an.
