Guru 2.0 › 3.0
Der Blog für alle die Spass am Web und Design haben…

Heute habe ich mal einen Schwung an Tipps für die webDesigner unter euch. Den Profis sind die aufgezählten Punkte sicher klar und vielleicht auch schon in Fleisch und Blut übergegangen. Aber trotzdem arbeiten auch wir ab und zu “quick and dirty” und vergessen auf die einfachsten Dinge. Da ist es ganz gut, wenn man wieder einmal daran erinnert wird

1. Schreib warum Du einen Tag schliesst!

Gerade bei langem HTML verliert man schnell den Überblick bei verschachtelten Tags und das gilt nicht nur für die DIVs. Gerade am Ende der Seite tritt dann eine endlose Liste von schliessenden Tags auf und wir wissen nicht mehr was zusammen gehört.
Natürlich rücken wir den Code brav ein. Dies ist schon einmal ein guter Anfang, um den Überblick zu bewahren. Aber die Bemerkung am Ende, kann dir viel Zeit und Nerven ersparen.

1
2
3
4
5
6
7
8
9
10
11

<div id="wrapper">
    <div id="content">
        ...
        <div id="left">
            ...
        </div> <!-- div #left column -->
        <div id="right">
            ...
        </div> <!-- div #right column -->
    </div> <!-- div #content -->
</div> <!-- div #wrapper -->

2. Stelle Standardeinstellungen her!

Auch wenn Du vielleicht ein Anfänger im Design bist, oder wieder einiges “vergessen” hast, kannst Du dir sicher vorstellen, wie wichtig ein definierter Anfang ist. Wenn Du für verschiedene Browser designst, hast Du auch schon bemerkt, dass jeder Hersteller seine eigenen Anfangseinstellungen verwendet. Daher ist ein sogenannter “CSS Reset” von ungeahnter Bedeutung. Damit stellst Du alle Browser auf einen Schlag auf die gleichen Werte ein. Diese Formatierungsdefinition sollte am Anfang der ersten CSS-Datei immer vorkommen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
abbr, acronym, address, big, cite, code, del, 
dfn, em, font, img, ins, kbd, q, s, samp, small, 
strike, strong, sub, sup, tt, var, b, u, i, center, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

3. Vergiss @import!

Natürlich können wir innerhalb einer CSS-Datei mit dem @import-Befehl arbeiten, um eine andere CSS-Datei einzufügen. Da der Befehl aber sehr langsam ist, solltest Du die einzelnen Dateien im head-Bereich der HTML-Datei aufrufen.
Zusätzlich ist diese Methode auch noch übersichtlicher, denn Du hast alle verwendeten CSS-Dateien auf einem Blick vor Dir.

1
2

<link rel='stylesheet' type='text/css' href='general.css' />
<link rel='stylesheet' type='text/css' href='special.css' />

4. Achte auf Deine Bilder!

Natürlich denken wir heute nicht mehr an Bandbreite und Datenmenge. Aber trotzdem gibt es immer mehr Benutzer, welche über ein Mobiltelefon ins Web einsteigen und die haben nicht die Geschwindigkeit wie bei einer DSL-Leitung. Ausserdem sind Browser keine Grafikprogramme. Sie werden Bilder nie so sauber rendern wie ein PhotoShop. Daher stelle alle Bilder gleich in der richtigen Größe und Qualität (72 dpi, RGB) zur Verfügung.

5. Vermische HTML und CSS nicht!

Gerade die Trennung von Inhalt und Layout ist eine der Stärken, welche wir benutzen sollen. Das style-Attribut bei HTML-Tags ist ein absolutes No-Go!
Natürlich verwenden wir es bei der “quick und dirty” Programmierung oder auch wenn wir etwas schnell ausprobieren wollen. Aber in einer echten webSite hat es nichts verloren. Denn einerseits widerspricht es der CSS-Philosophie komplett. Auf der anderen Seite wirst Du solche Stile nach einer gewissen Zeit einfach nicht mehr finden und hast Probleme die Seite später zu verändern.
Daher kommen alle Formatierungen in eine externe CSS-Datei und werden über die Attribute class bzw. id an die HTML-Tags gebunden.

6. Verwende konditionale Kommentare!

Wir wissen alle, dass der Internet Explorer seine Eigenheiten hat. Daher haben wir uns auch an die notwendigen Hacks gewohnt, um ihn zu dem zu bewegen, was wir wollen.
Aber auch hier gilt, nicht direkt bei den CSS-Attributen die Hacks zu verwenden, sondern im head-Bereich der HTML-Datei. Dadurch wird einfach vieles klarer, wenn du später auf den Code siehst.

1
2
3
4

<link rel="stylesheet" type="text/css" href="general.css" />
<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css"href="general_ie6.css" />
< ![endif]-->

7. Verwende semantisches HTML!

HTML ist ja keine Programmiersprache, sondern eine Auszeichnungssprache. Damit können wir einfache Strukturen in einen Text bringen. Gerade am Anfang, verwendet man die Tags in HTML irgendwie. Aber besser ist es, wenn man den h1-Tag für die wichtigste Überschrift verwendet und den h2-Tag für die nächste Ebene. Auch wenn wir das über CSS-Klassen formatieren könnten (wie div.titel1 oder div.titel2) ist es nicht sinnvoll. Denn wie soll eine Suchmaschine die Überschrift erkennen?

Zum Beispiel sollten Navigationselemente immer mit ul-Tags (eine unsortierte Liste, was sie ja auch sind) ausgezeichnet werden. Zusätzlich ist es sinnvoll, “sprechende” Klassen oder IDs zu verwenden. Der folgende Code ist einfach klarer zu verstehen (für Menschen, wie auch für Computerprogramme).

1
2
3
4
5
6

<ul id="navigation">
    <li><a href="#">News</a></li>
    <li><a href="#">Produkte</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
</ul>

8. Testen, Testen, Testen!

Sobald Du für mehrere Browser arbeitest, musst Du deinen Code in jedem Browser überprüfen. Denn nur wenn er im FireFox gut aussieht, muss er im Safari nicht funktionieren. Verlasse dich auch nicht auf irgendwelche Kompatibilitätslisten! Denn die Realität schaut in den einzelnen Browsern oft ganz anders aus.

Teste aber nicht erst wenn Du mit allem fertig bist, sondern gleich während der Entwicklung. So entdeckst Du Fehler sehr früh und dann sind sie auch noch leicht zu beheben.

So und nun viel Spaß beim codieren und denk daran:

Code is Poetry!