Hier nun der Beginn meiner kleinen Zusammenfassung über das Tuning von Webseiten.

Am wichtigsten an Webseiten ist sauberer Code und intelligentes Design. Nur durch eine saubere Arbeit ist der Grundstein gelegt, für weniger Serverbelastung, schnellere Ladezeiten und schnelleren Aufbau. Ich spreche hier nicht über die Programmierung, PHP oder andere Programmiersprachen. Diese Anleitung ist für Leute die zumindest Codetechnisch ihr Glück in die Hände der Entwickler von Systemen wie WordPress legen und nur ihr Template perfektionieren wollen

Must-Have-Tools

Zu den Must-Have-Tools zählt zu allererst der Firefox Browser. Mit seinem Reichtum an Plugins ist er zu einem mächtigen Tool für Webentwickler geworden. Da wundert es nicht, dass die meisten Profis mit Firefox entwickeln, obwohl der Großteil der Kunden noch den Internet Explorer nutzt.

Zunächst bestücken wir unseren Browser mit den Plugins Web Developer Toolbar, Firebug und HTML Validator. Dann ein Browserneustart. Wir sehen nun oben die Toolbar die man sich in Ruhe mal ansehen sollte. Sie bietet viele nützliche Funktionen wie z.B. verbotenes inline-css oder Bilder abzuschalten.

 

Im Browserfuß sehen wir nun einen kleinen gelben Käfer, dies ist der Firebug. Daneben die Anzeige vom HTML Validator, der anzeigt, ob die Seite HTML Fehler enthält.

 

Nun sollte man Schritt für Schritt die Fehler des Validators durchgehen und die Fehler bereinigen, wo es geht. Perfekte Webseiten gibt es kaum und ist bei dynamischen Seiten selten lange Zeit perfekt. Aber ein gewisses Maß kann man erreichen.

Hilfreich neben der Anzeige der Fehler ist nun der Firebug. Klickt man ihn an, sieht man eine schöne Übersicht des HTML und des CSS. CSS lässt sich direkt in dieser anzeige manipulieren, so kann man z.B. auf einen Pixelwert klicken und ihn händisch oder mit den Pfeiltasten verändern. Sehr praktisch um positionen einzurichten. Mit einem Klick auf „Untersuchen“ kann man nun in die Webseiten gehen und man erhält direkt das HTML und CSS des überfahrenen Elements, andersherum kann man im Firebug den HTML Code überfahren und das Element leuchtet in der Seite auf.

 

Sauberer Code und Zeilenersparnis

Fürs Coden kann ich keine Anleitung geben, HTML & CSS müsst ihr schon beherrschen. Aber ich gebe euch den Tipp, den Code möglichst valide zu gestalten. Und ich kann euch sagen, wie ihr gewisse Optimierungen durchführen könnt. Oberstes Gebot beim Code ist: Unnötiger Code muss weg! Zeilen einsparen, wo es nur geht. Viele kleine Dinge machen in der Seite den Bock fett, so kann man z.B.

margin-top: 5px;
margin-right: 11px;
margin-bottom: 12px;
margin-left: 6px;

als

margin:5px 11px 12px 6px;

definieren. Ähnliches gilt für Fonts

font-weight: bold;
font-style: italic;
font-size: 10pt;
line-height: 1.8em;
font-variant: uppercase;
font-family: Verdana, Arial, sans-serif;

wird sehr schlank zu

font: italic uppercase bold 10pt/1.8em Verdana, Arial, sans-serif;

Und das geht mit einigen Definitionen, wie z.B. Border, Listen oder Background. Eine schöne Zusammenfassung findet ihr hier.

Auch im HTML lässt sich vieles sparen. So sollte man auf keinen Fall inline-CSS, also CSS innerhalb der HTML Datei benutzen. Die Chancen stehen gut, dass sich das CSS nämlich wiederholt und somit hat man schon zweimal den gleichen Code da stehen. Also, alles inline-CSS raus und in die externe CSS Datei. Und natürlich sparsam dort sein, wie oben beschrieben.

Eine weitere Falle sind viele unnötige Sachen, wie dutzendfach ineinandergeschachtelte DIVs oder gar haufenweise Tabellen als Design. Dort sollte man sich in Ruhe Gedanken machen und analysieren, wieviele DIVs man wirklich braucht.

Semantik

Ein weiterer Punkt, der nicht nur fürs gute Gefühl, sondern auch für die Suchmaschinen immens wichtig ist, ist die Semantik des Codes. Semantisch korrekt bedeutet hier, den Informationen der Webseite die richtige Reihenfolge zu geben. Die aktuelle Reihenfolge einer Webseite sieht man, indem man das CSS abschaltet. (Im Browser: Ansicht-Webseiten-Stil oder mit der Web Developer Toolbar). So kann man sich auch ungefähr vorstellen, wie Blinde mit einem Screenreader oder der Suchmaschinenbot die Seite sehen. Man sollte zuerst den eigentlichen Inhalt der Webseite präsentieren, dann wichtige Menüpunkte, dann gegebenenfalls unwichtige Seitenteile und zuguter Letzt Footer und Header.

Würde man die Webseite vom Code so aufbauen, wie das Design es vorgibt, hätte man bei einer Standardseite einen Header zuerst. Dann die Links, dann der Inhalt und so fort. Ein Bot oder ein Blinder sieht als bei jeder Unterseite immer zuerst den Header und das Menü. Die wichtigste Information kommt erst an dritter Stelle.

So ist es eine Aufgabe des CSS, den korrekten HTML Code in die richtige Richtung zu rücken.

<div id="inhalt">
<div id="content">Hier kommt der Seiteninhalt</div>
<div id="linkesmenu">Hier ist das Hauptmenü</div>
</div>
<div id="rechtesmenu">evtl eine rechte Spalte?</div>
<div id="footer">Footer</div>
<div id="header">Header</div>

So könnte der HTML Code aussehen. Der Inhalt kommt zuerst. Nun liegt es am CSS, das linke Menü nach links zu floaten, damit es zuerst im Design steht. Das Ganze könnte man noch weiter ummanteln und z.B. den ganzen inhalt nach unten verschieben und den header absolut ganz oben positionieren. Schaut euch den Quelltext meiner Seite an (natürlich mit Firebug) und ihr werdet sehen, wie ich das gemacht habe.

Korrekte Metainformationen

Zuguter letzt gehören zum sauberen Code neben der Codesparsamkeit, Validierung und Semantik ein korrekter Header und Meta Informationen. Wichtig ist dabei der Doctype, der dem Browser mitteilt mit welchem HTML er es zu tun hat. Immens wichtig auch die Sprache und der title. Ein Muss ist auch die Meta-Description. Google verlangt besonders nach title und description. Natürlich muss die CSS verlinkt sein und weiterhin evtl. wichtig ein Link auf die Robots.txt und das Favicon. Schaut euch dafür auch einfach mal meinen Head an. Sicher nicht perfekt, aber eine Möglichkeit wie man es machen könnte.

Hinweis: Für viele CMS gibt es SEO (Search Engine Optimizing – Suchmaschinenoptimierung) – Plugins. Diese sorgen für schöne title und Meta Tags. Einfach mal nach „CMS Name + SEO“ googlen.

Fazit

Wie man sieht, Tuning der Webseite geht nicht, wie der gemeine Bildzeitungsleser es vielleicht denken mag. Software installieren und klicken. Es fängt bei kleinen Dingen an, den Buchstaben. Sauberer Code ist das Fundament für alle weiteren Schritte. Ich hoffe ihr habt ein gutes CMS gewählt oder den Programmcode selber gut geschrieben, für alles darüber hinaus hab ich euch gerade hier die Tipps gegeben. Ich würde mich über Kommentare sehr freuen und scheue nicht auch neue Erkenntnisse hier nachzutragen, man lernt ja nie aus 😉

In Kürze folgt [Webseiten-Tuning] #3 – Auf der Suche nach dem besten Bildformat.

Andreas Poschen

ist ein 34jähriger E-Commerce Experte, agile Product Owner und UX-Fan aus Aachen. Er arbeitet in Köln in einer großen Agentur und schreibt hier über seine Profession, seine Gedanken, Netzfundstücke und zu seinen Lieblingsserien. (mehr zu Andreas). Folgt ihm auf:


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.


10 Kommentare zu “[Webseiten Tuning] #2 Sauberer Code

  1. Nichts ist so schön wie Beiträge die auch Sinn und Verstand haben. Es ist Klasse sowas im heutigen Zeitalter noch finden zu können. Interessant

    Antworten
    • Hallöchen.

      Ich persönlich finde es schlimm, wenn der Code automatisch generiert wird, der dann irgendwo versteckt ist. 🙂
      Das suchen ist dann lästig!
      Grüße, Kevin

      Antworten
  2. Auch von mir schon mal ein dickes Danke!
    Alleine die Komprimierung von CSS sollte ich mal konsequenter untersuchen und umsetzen! Und Metadaten habe ich wohl auch immer sträflich vernachlässigt… *schäm*
    Auf jeden Fall wieder was gelernt!

    Antworten