Webdesign ohne DIV

Beispiel Design Seite

Diese Seite verzichtet auf DIVs, warum auch immer...

Perfection is not when there is nothing to add, but when there is nothing to take away

Was ist das?!

Keine Divs und keine Tabellen.

Diese Seite besitzt weder DIV, noch Tabellen, noch Listen, zur Strukturierung des Designs. Ich bin auf die Idee gekommen, als ich über den bestmöglichen Aufbau eines Artikelverzeichnis bzw. Blogstartseite, nachgedacht habe.

Blogs ähneln sich in der Regel sehr. Meistens ist die Seite zentriert, passend für eine Bildschirmauflösung von 800x600. Links oder Rechts ist die Navigation. Die Startseite präsentiert eine Liste der letzten Artikeln. Also in etwa diese Seite.

Und Artikelverzeichnisse?! Nun hier ist in erster Linie der Inhalt wichtig und das meistens für die Suchmaschinen. Also ein H1 Tag möglichst direkt hinter dem body Tag. Danach eine hierarchische Struktur, H2, H3 und ein geringer HTML-Code-Suppe Anteil.

Was bringt das?!

Ich mag keine DIV-Suppen

UrlaubsbildEigentlich nichts. Es ist nur der Versuch zu zeigen, dass es möglich ist, einer Seite ein Design zu verpassen auch ohne Milliarden von div Tags zu verwenden. Der Umschwung zu validem Quellcode macht die Runde bei den Designer. Das ist gut. Aber oftmals wird einfach nur das Tabellendenken auf ein DIV Design angewendet.
In meinen Augen ist XHTML in erster Linie ein Schritt Richtung Semantik und Trennung der Darstellung vom Inhalt. Ein Seitendesign ohne DIV Elemente ist auch sinnlos. DIV Elemente eignen sich hervorragend, vorallem weil sie keine semantische Relevanz besitzen, um eine Webseite optisch in verschiedenen Bereiche zu unterteilen.

Wie ich heute gelesen habe, Urlaubsbild 2gab es bereits einen ähnlichen Versuch. Björn Seibert berichtete am 23.01.2006 darüber. In dem Artikel, Divlos sinnlos schreibt er unter anderem:

Eine Website, die aus einer UL besteht und versucht die Inhalte mit Hilfe LI zu strukturieren, stellt einen mehr als suboptimalen Ansatz dar und sollte nicht weiter verfolgt werden.

Dem Artikel stimme ich voll und ganz zu. In einem Punkt unterscheidet sich aber mein Versuch davon. Diese Seite besteht nicht aus einer Liste. Es enthält Listen. Ebenso ein H1 und ein P als Footer. Ich strukturiere die Seite nicht in eine Liste sondern positioniere die Elemente einzeln.
In den meisten Fällen enthält eine Blogstartseite, als Inhalt, eine Liste der aktuellen Nachrichten in Kurzform. Sicher, die Liste #content geht in Richtung des suboptimalen Ansatzes. Vorallem weil es nicht möglich ist ein DIV Element innerhalb eines LI Element zu platzieren. Die Liste #content habe ich rausgenommen, um zu zeigen, dass diese Seite nicht durch den massiven Einsatz von Listen, die fehlenden DIVs ersetzt. Ich rate meinen Lesern,
dieses Beispiel kann nicht zur Nachahmung empfohlen werden.

Na ja...

Schaut aber scheisse aus

Mag ja sein dass es keine DIVs und Tabellen verwendet, aber genau so schaut es auch aus. Recht grau und langweilig. So werden die meisten Betrachter dieser Seite denken.Urlaub Bilder Titicaca See. Nun mit Photoshop & Co können andere besser umgehen. Wenn jemand einen Vorschlag hat, würde ich mich freuen.

Spielereien sind aber auch so möglich. Natürlich bedarf das einen gewissen mehr Aufwand.

Dieser Effekt kam mir irgendwann mal unter. Weiss leider nicht mehr wo ich das gesehen habe. Das ganze ist mit css realisiert. Ein ganz simpler Hover Effekt. Und auch das natürlich ohne Divs. Der Effekt wird auf ein Link angewendet. Ich habe mal meine Version davon aufgeschrieben. Vielleicht kann es der eine oder andere brauchen. Das ganze könnte auch dynamisch erzeugt werden. Dann wird aus dem id eine Klasse und die Bilder werden direkt im a mit style="background:url(pic.jpg)" geladen.

HTML Code
   <a href="#link" id="hoverLink">
      <span>T E X T</span>
   </a>
CSS Code
#hoverLink{
      background:url(bild.jpg) no-repeat;
      border:1px solid #bfbfbf;
      display:block;
      float:left;
      margin:10px 10px 5px 0;
      width:190px;
      }
#hoverLink:hover{
      width:290px;
      }
#hoverLink:hover span{
      background:#f2f2f2;
      color:#ffbf00;
      margin:200px 0 0 0;
      }
#hoverLink span{
      background:#cfcfcf;
      color:#4089AC;
      display:block;
      margin:120px 0 0 0;
      padding:3px;
      font-size:0.9em;
      }

Der Gedanke

Da geht noch mehr

Ich bin der Meinung, dass die meisten Blogs Themes auch ohne DIV-Suppe zu realisieren wären. Es ist halt die Frage wie Pflegebedürftig, -intesiv sowas wäre. Und vorallem wie flexibel?! Ich habe schon überlegt ein Theme für Wordpress zu bauen. Mal sehen ob ich die Zeit finde und ob überhaupt der Bedarf an so etwas besteht. Hier schon mal vorab, für die die es wissen wollen, eine kleine Bauanleitung für Webdesign ohne Div Elemente. Aber bitte daran denken, es ist nicht möglich ein DIV innerhalb eines LI zu platzieren.

Werbung Webdesign

Dieses Experiment ist Teil der Seite werbung-webdesign.de.
Wie denken Sie darüber? Lassen Sie es mich wissen, schreiben Sie mir eine E-Mail

Impressum