Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: WebStyleBoard. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

1

Dienstag, 26. April 2005, 16:39

10 Tipps zur Codeoptimierung

10 Tipps zum Optimieren deiner Website nach den Standards des DIV Konsortiums:

Tipp 1)
DIVs sind ein sehr flexibles Element zur Formatierung der Seite. Setze sie überall ein, wo du gerade Lust hast.

Tipp 2)
Eine Seite ohne mindestens zwanzig DIVs ist keine Seite. Bedenke: Jeder kann deinen Quellcode sehen. Profis haben auch auf der obligatorischen Tunnelseite (mit nur einem mittig ausgerichteten Bild) rund zwanzig kompliziert geschachtelte DIVs mit jeweils unsichtbaren Inhalten, der nur die Suchmaschinen erfreut.

Tipp 3)
Am besten setzt man, um beim Formatieren der Seite freie Hand zu haben, erst einmal in den Body jeder Seite eine standardmäßige Auswahl DIVs.
Man kann nie zu viele DIVs verwenden.
Schreibe also statt

Quellcode

1
2
3
4
5
</head>
<body>
Inhalt der Seite
</body>
</html>

besser

Quellcode

1
2
3
4
5
6
7
8
9
10
11
</head>
<body>
<div id="aussendiv">
<div id="mitteldiv">
<div id="innendiv">
Inhalt der Seite
</div>
</div>
</div>
</body>
</html>

Du musst sie erst einmal nicht formatieren, sie stören auch nicht die Übersichtlichkeit der Seite, erlauben aber nachträglich noch viele Veränderungen.
Ähnlich kann man überall verfahren, wo man sich nicht sicher ist, ob man nicht irgendwann einmal noch ein DIV mehr brauchen könnte.

Tipp 4)
Wenn du die Verschachtelung deiner DIVs nicht mehr verstehst, das macht nichts - der Browser versteht es bestimmt! Ein Browser ist ja schließlich kein Mensch, er kann nie den Überblick verlieren.

Tipp 5)
DIVs können viele Elemente ersetzen, zum Beispiel <h1> bis <h6>.
Schreibe also statt

Quellcode

1
<h1>Überschrift der Seite</h1>

oder gar

Quellcode

1
<p><font size="6" color="red">Überschrift der Seite</font></h1>

besser

Quellcode

1
<div style="font-size:1.5em; color:red;">Überschrift der Seite</div>


Tipp 6)
Am besten verwendet man <div> anstelle von <p>. Dies verhindert unschöne Probleme, wenn sich ein Browser dazu herablassen sollte, Absätze irgendwie anders darzustellen als dein Browser. Ein DIV ist immer unformatiert!
Schreibe also statt

Quellcode

1
<p>Dies ist ein Absatz</p>

besser

Quellcode

1
<div class="absatz">Dies ist ein Absatz</p>


Tipp 7)
Der horizontale Trenner ist überflüssig.
Schreibe also statt

Quellcode

1
<hr style="color:navy; background-color:navy; width:65%; height:2px;">

besser

Quellcode

1
<div style="width:65%; height:0px; border-bottom:2px solid navy;"></div>

Das erspart lästiges Nachdenken, ob <hr> oder <ht> oder <hw> der Trenner war...


Tipp 8)
Zum Layouten nimm keine Tabellen, sondern DIVs.
Schreibe also statt

Quellcode

1
2
3
4
5
<table border="2">
 <tr>
  <td>Inhalt der Seite</td>
 </tr>
</table>

besser

Quellcode

1
2
3
4
5
<div style="position:absolute; top:0px; left:0px; height:100%; width:2px; background-color:gray"></div>
<div style="position:absolute; top:0px; left:0px; height:2px; width:100%; background-color:gray"></div>
<div style="position:absolute; bottom:0px; left:0px; height:2px; width:100%; background-color:black"></div>
<div style="position:absolute; top:0px; right:0px; height:100%; width:2px; background-color:black"></div>
<div style="position:absolute; top:2px; right:2px; height:99%; width:99%; overflow:auto">Inhalt der Seite</div>

Es lohnt sich!

Tipp 9)
Tabellen sind allgemein out, sie benötigen zu viele Elemente (<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th> etc).
Schreibe also statt

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table caption="Entwicklung 2002-2003">
 <tr>
  <th></th>
  <th>2002</th>
  <th>2003</th>
 </tr>
 <tr>
  <th>Umsatz</th>
  <td>€ 20,4 Mio.</td>
  <td>€ 21,6 Mio.</td>
 </tr>
 <tr>
  <th>Gewinn</th>
  <td>€ 0,8 Mio.</td>
  <td>€ 1,1 Mio.</td>
 </tr>
</table>

besser

Quellcode

1
<div style="float:left; width:5em;" title="Entwicklung 2002-2003"></div><div style="float:left; width:5em;">2002</div><div style="float:left; width:5em;">2003</div><div style="float:left; width:5em; clear:left;">Umsatz</div><div style="float:left; width:5em;">€ 20,4 Mio.</div><div style="float:left; width:5em;">€ 21,6 Mio.</div><div style="float:left; width:5em; clear:left;">Gewinn</div><div style="float:left; width:5em;">€ 0,8 Mio.</div><div style="float:left; width:5em;">€ 1,1 Mio.</div>

Jeder weiß sofort, was gemeint ist, und unschöne Unterschiede zwischen den Darstellungen einiger Browser werden vermieden.

Tipp 10)
Wenn du auch nur einen der neun obigen Tipps jederzeit befolgen würdest, lass das Webdesign lieber bleiben.
Signatur von »Alex« Man muss nichts sehen, um zu sehen, dass man nichts sieht, aber man muss etwas sehen, um zu sehen, was man nicht sieht.

2

Dienstag, 26. April 2005, 18:31

:applaus: Applaus :applaus:

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »DukeXP« (26. April 2005, 18:34)


3

Dienstag, 26. April 2005, 19:02

LOL... :D

Geniale Tipps, wirklich... :grin: :lol:
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

4

Dienstag, 26. April 2005, 21:02

hey,

wir sollten vielleicht drauf hinweisen das wir uns hier mit ironie beschäftigen :)

Tobias
Signatur von »t-ob-i« {SIGNATUR}

5

Mittwoch, 27. April 2005, 07:13

Oh man! Nur 20 DIVs? Wie kommst du damit klar? Ich brauche mindestens 50!!!!!!Elf!!!!1111!Eins!!!!Hundertelf!!!!

SCNR, Arne :).

PS: Sehr gut rüber gebracht - Guter Tipp :)

6

Mittwoch, 27. April 2005, 20:00

Zitat von »t-ob-i«

wir sollten vielleicht drauf hinweisen das wir uns hier mit ironie beschäftigen :)
Steht im Tipp 10 doch ausdrücklich drin, oder nicht? :lol:

Zitat von »Nash Bridges«

Oh man! Nur 20 DIVs? Wie kommst du damit klar? Ich brauche mindestens 50!!!!!!Elf!!!!1111!Eins!!!!Hundertelf!!!!


Da fällt mir glatt noch ein Tipp 11 ein:
Deine CSS-Anweisungen sind sehr wichtig (sonst würdest du sie ja nicht schreiben, oder?) und müssen immer angewendet werden - komme, was wolle.
Schreibe also statt

Quellcode

1
body {font-weight:bold;}

besser

Quellcode

1
body {font-weight:bold !important;}

oder gleich

Quellcode

1
body {font-weight:bold !!!!!!!!very important;}
Signatur von »Alex« Man muss nichts sehen, um zu sehen, dass man nichts sieht, aber man muss etwas sehen, um zu sehen, was man nicht sieht.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Alex« (27. April 2005, 20:00)