Design Aufbau (WYSIWYG)

[Ricc220773]

Nach langer Zeit möchte ich mal wieder eine Seite von mir vorstellen. Wir sind dabei uns ein neues Haus zu bauen und ich möchte auf der Seite ein Bautagebuch führen und über das Bausystem informieren.

Design:
Der Contentbereich gefällt mir selber nicht, der sieht irgendwie so reingeklatscht aus. Weiß aber nicht, wie ich ihn besser gestalten soll. Würde mich also über Anregungen freuen.

Code:
Leider bestehe ich den Test nicht. Das liegt aber nicht an mir, sondern an der eingebundenen Werbung. Diesen Text darf ich leider nicht verändern.

Gruß Ricc

http://www.Hausbau-Isorast.de

 

[Efchen]

Wenn Du selber auf den Code eingehst, dann möchte ich etwas anmerken, was Du sehr wohl ändern könntest, wobei inwieweit das mit WYSIWYG-Editoren so einfach möglich ist, entzieht sich meiner Kenntnis:
Du könntest Dein HTML mal versinnvollen :-) Derzeit ist die Qualität des HTML-Codes nämlich gleich 0. Da brodelt eine schreckliche div-Suppe vor sich hin, der Code enthält nicht den Funken einer anständigen Semantik. Die Seite hat keine Überschriften, kein Menü, nur massenweise Textabsätze.
Ich weiß nicht, warum sich WYSIWYG-Editoren immer noch halten können, ehemals haben sie Tabellen-Layouts gebastelt, jetzt kochen sie div-Suppen; das eine ist aber genauso sinnfrei wie das andere.

Das mit dem draufgeklatschten Contentbereich sehe ich übrigens genauso, man ist versucht, den Bereich als eigenständiges Fenster zu sehen, das man beiseite schieben oder schließen möchte. Ich bin aber leider zu wenig Designer, um Dir da einen Vorschlag zur Verbesserung zu machen. Es könnte aber auch an den Farben liegen, die diesen Eindruck verstärken. Obwohl ich den Effekt beim Dachstuhl, dass das so überlappt, eigentlich ganz angenehm finde.

Gruß,
-Efchen

 

[iplay]

zum Code gebe ich Efchen recht. Das seh ich genau so. :-D

Zum Design: Ich würde denn Content auf die selbe höhe zur Navigation setzen. Das würde denke ich angenehmer wirken. Vielleicht sollte man den Contentbereich nicht so stark hervorheben. Oder wenigstens den Navigationsbereich etwas mehr hervorheben. Dann würde das bestimmt nicht wie ein Popupfenster wirken.

Aber genaueres kann ich auch nicht sagen, ich bin erst ganz neu in der Designwelt!

Liebe Grüße

iplay

 

[Ricc220773]

Esrtmal Danke für Eure Meinungen.

Code:
Stimmt schon, vorher habe ich mit Tabellen gearbeitet, wurde hier aber eines besseren belehrt und bin auf DIV umgestiegen. Was Ihr aber mit der Div-Suppe meint weiß ich nicht genau. Könntet ihr mir das an einem speziellen Beispiel erklären? Dass ich einen WYSIWYG-Editor nutze hat wenig mit dem Aufbau zu tun. Ich schreibe fast alles selbst und nutze ihn hauptsächlich zur Voransicht und um die Daten gleich aufzuspielen. Welches Programm wäre denn besser? Hätte kein Problem damit was anderes zu testen oder umzusteigen.
Mit "nicht ändern können" meinte ich nur, dass ich den Werbe-Link nicht ändern kann.

Content:
Den Contentbereich hatte ich in der selben Höhe wie das Menü, musste das Menü aber etwas nach unten verschieben, weil es sich auf der Grafik (Dachstuhl) schlecht lesen lies. Muss ich mir mal was einfallen lassen.

 

[ky_fr34k]

hi.

probier doch mal beim content keine solide farbe zu nehemen, sondern ein 1x1px großes png das die selbe farbe hat, aber dafür 90% transparent.
Dann schimmert der Dachstul ganz leich durch und es wirkt vll nicht ganz so draufgeklatsch.

Gruß KY

 

[Ricc220773]

Habe die Hintergrundgrafik verändert und auch den Contentbereich. Denke mal so wirkt es etwas besser. Dazu habe ich mir noch ein Logo gebastelt. Gefällst?

 

[Efchen]

Stimmt schon, vorher habe ich mit Tabellen gearbeitet, wurde hier aber eines besseren belehrt und bin auf DIV umgestiegen.

Dann wurdest Du nicht eines besseren belehrt, sondern schlichtweg falsch beraten.
Ob Du Deinen Code überwiegend mit <table> oder mit <div> auszeichnest, ist beides sinnfrei!
Ob es Dich tröstet, weiß ich nicht, aber damit haben tatsächlich viele ein Problem, zu verstehen, wozu HTML eigentlich da ist. Sicher nicht, um Layout mit Tabellen zu machen. Aber auch nicht, um Layout mit <div> zu machen. Layout wird mit gar keinem besonderen HTML-Tag gemacht. Layout macht man mit CSS.

Was Ihr aber mit der Div-Suppe meint weiß ich nicht genau.

Dann schau Dir Deinen Code an. Das ist div-Suppe. Überall, wo man hinsieht nur <div>.
HTML dient zur logischen Strukturierung des Inhalts. Mit HTML gibt man diesem eine Bedeutung. Bei Dir steht z.B. <div id="header">. Was soll das bedeuten? Dass das eine Überschrift sein soll? Nein, das bedeutet es nicht! Dieses div gruppiert die innenliegenden Elemente, weiter nichts. Eine Überschrift zeichnet es nicht aus, auch wenn die ID "header" lautet. Eine Überschrift wird mit den Tags <h1> bis <h6> ausgezeichnet. Nur dann ist etwas eine Überschrift.
Weiter: Du zeichnest "Home", "die Planung", "der Bauablauf" usw. mit <strong> aus. Warum tust Du das? Ich wette, weil Dein Browser <strong> so schön fett darstellt. Pustekuchen. HTML ist nicht dazu da, einen optischen Effekt zu erzielen. Mit <strong> zeichnest Du besonders wichtige Textpassagen aus. Vorlesebrowser werden diese Teile betont aussprechen. Ist es das, was Du an der Stelle wolltest? Sicher nicht! Im Prinzip sind diese Kategorien auch nur eine Liste. Und jede Kategorie ist dann nochmal in eine Unterliste unterteilt. Am ehesten könnte ich mir an der Stelle noch eine Überschrift vorstellen, ich würds aber mit verschachtelten Listen machen.

Zugegeben, ich hab schon schlimmeren Code gesehen, aber das sind so die Schwachstellen bei Dir.
Essenziell ist, dass man versteht, wozu HTML eigentlich da ist. Dass es egal ist, wie ein HTML-Tag im Browser dargestellt wird. Man verwendet es nicht zur Optimierung der Darstellung, sondern weil es den Inhalt beschreibt. Man benutzt nicht <strong>, um etwas fett darzustellen. Und nicht <em> um etwas kursiv darzustellen. Und man verwendet nicht <h2> anstelle von <h1>, weil einem die Schrift im <h1> zu groß ist.
Wenn man HTML-Auszeichnung macht, ist das Aussehen im Browser nicht relevant.
Für Aussehen ist nur CSS zuständig, das kommt erst später.

Welches Programm wäre denn besser? Hätte kein Problem damit was anderes zu testen oder umzusteigen.

Da kann ich Dir nichts empfehlen. Ich nutze seit eh und je nur dem vi (oder gvim) und auch wenn der Syntaxhighlighting kann (was ich nicht brauch), ist es doch kein spezieller HTML-Editor.

 

[Ricc220773]

Efchen, hättest Lehrer werden sollen. Das war, denke ich mal, die beste Erklärung wie man HTML vom Layout oder Style richtig trennt und warum.
:-D

Eine Überschrift wird mit den Tags <h1> bis <h6> ausgezeichnet. Nur dann ist etwas eine Überschrift.

Auch wenn die nur aus einer Grafik besteht? Nur mal so nebenbei die Frage.

Das Design der Seite habe ich nochmal etwas überarbeitet und würde auch über Meinungen oder Ratschläge dazu freuen.

 

[neuroleptika]

Auch wenn die nur aus einer Grafik besteht? Nur mal so nebenbei die Frage.

Nicht unbedingt. Du hast h1 ja schon Sinnvoll verwendet.
Durch die Anordnung im Quelltext steht sie jedoch sehr weit unten. In den flankierenden Spalten sollten auch Überschriften stehen. Das würde der logischen Abfolge der Überschriften im Wege stehen. h1 sollte möglichst weit oben stehen, gefolgt von h2, h3 usw.

Ich würde vermutlich h1 für das Screendesign verstecken. Am besten unter der Grafik. Du könntest h1 auch ganz aus dem Viewpoint schieben.
Hier ein Ansatz:

...
* {
margin: 0;
padding: 0;
}
 body {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
}
#container {
width:970px;
margin: 0 auto;
}
#header {
height:150px;
background-image: url(http://www.hausbau-isorast.de/Grafiken/hintergrund.jpg);
position: relative;
}
#header h1 {
position: absolute;
top: 1000px;
left: 1000px;
}
#header ul {
position: absolute;
top: 0;
right: 8px;
list-style: none;
}
#header ul li {
float: left;
}

#header ul li a {
color: #3A3A3A;
padding: 0 5px;
}
#header p img {
position: absolute;
bottom: 0;
right: 20px;
}

#naechster_container {
background-image: url(http://www.hausbau-isorast.de/Grafiken/hintergrund.jpg);
background-position: 0 -150px;
border-top: 1px solid #ffffff;
}

#naechster_container * {
margin-top: 0
}
...
<div id="container">
<div id="header">
<p><img width="100"  height="100" alt="Isorast" src="http://www.hausbau-isorast.de/Grafiken/logo6.gif"/></p>
<h1>Hausbau mit Isorast</h1>
<ul>
<li><a href="index.php?datei=kontakt">Kontakt</a>-</li>
<li><a href="index.php?datei=gaestbuch">Gästebuch</a>-</li>
<li><a href="index.php?datei=impressum">Impressum/Disclaimer</a></li>
</ul>
</div>
<div id="naechster_container">
<h2>nächster Container</h2>
</div>
</div>
...

Header ist relativ positioniert und dient als Basis für alle darin enthaltenen, absolute positionierten Bereiche. Der Vorteil ist, daß du dir nun aussuchen kannst in welcher Reihenfolge die Elemente darin angeordnet werden.


Wenn genügend Platz vorhanden ist (was bei dir der Fall ist), spricht auch nichts gegen eine feste Höhe in px für #header.

Zum Grundgerüst:
Dreispalter mit gleich breiten, flankierenden Außenspalten wirken meißtens abgedroschen. Mich erinnert das oft an billig-Discounter für Computerzubehör oder Portale für Dummspiele. Das Blau verstärkt diesen Eindruck noch (Computer-Discounter). Vielleicht schiebst du die schmaleren Spalten beide nach rechts (oder links).
Die breitere Spalte könnte zwei Drittel der Seite einnehmen und die beiden schmaleren zusammen ein Drittel.

Herkömmliche Dreispalter verleiten dazu, jeden Platz mit Inhalt zu füllen. Das wirkt schnell vollgestopft. Ein schönes Design braucht Luft.

 

[Efchen]

Efchen, hättest Lehrer werden sollen. Das war, denke ich mal, die beste Erklärung wie man HTML vom Layout oder Style richtig trennt und warum.

Vielen Dank :-)
Ich bin vorbelastet, mein Vater war Lehrer und mein Bruder ist Fahrlehrer ;-)

Auch wenn die nur aus einer Grafik besteht? Nur mal so nebenbei die Frage.

Wenn eine Grafik als Überschrift fungiert, gehört sie IMHO als Überschrift ausgezeichnet. Voraussetzung ist natürlich, dass die Grafik auch Content enthält. Also ein Bild ohne Text ist ja kein Content, kann also auch nicht Überschrift sein.
Ein Bild mit einem Willkommensspruch ist Content, dem kann man als Alternativtext diesen Spruch geben und das ganze dann als Überschrift auszeichnen. Durch den Alternativtext wird dann auch was Sinnvolles angezeigt, wenn die Grafik nicht geladen wird, und auch Suchmaschinen sehen dann eine sinnvolle Überschrift.

 

[neuroleptika]

Wenn eine Grafik als Überschrift fungiert, gehört sie IMHO als Überschrift ausgezeichnet.

Eigentlich sehe ich das ähnlich. Die Überschrift muss meiner Meinung nach aber nicht unbedingt in dem selben Element stehen wie die (css-)Grafik. Es sei denn es handelt sich wirklich um ein img.

Da ist schon ein img (Logo) im Header. Das würde sich mit einem alt-Text auch als h1 eignen.

 

[Ricc220773]

Ich habe nun mal versucht meine Seite etwas zu überarbeiten und mit weniger DIV's klarzukommen.

Hier das Ergebnis. Durch den Unterordner funktioniert nur die Startseite. Kann sich immer mal etwas ändern, da ich noch dran bastel.

Allerdings bin ich am Überlegen, ob ich nicht weiterhin meine DIV-Suppe auslöffel. Es verschiebt sich ständig irgendwas oder sieht im Firefox anders aus als im IE. Ist irgendwie nicht so leicht alles umzusetzen und mir fehlt durch den Bau auch die Zeit mich ordentlich damit zu beschäftigen. Werde mich wohl hauptsächlich weiter um den aktuellen Inhalt kümmern und wenn ich wieder mehr Zeit habe den Code überarbeiten. Ich würde aber gerne wissen welches Design Euch besser gefällt. Gleichzeitig würde mich interessieren, ob meine Seite wie ein Werbeprogramm aussieht. Ich musste mir in einem Bauforum unterstellen lassen meine Seite sei von Isorast bezahlt. Schön wärs :roll:

 

[neuroleptika]

Erstmal ein Buchvorschlag: Startseite » Little Boxes (Webseiten gestalten mit CSS)
Das könnte bei deinem derzeitigen Stand genau das richtige sein.
Ich finde es erstaunlich, daß du neben einem Hausbau überhaupt Zeit zu hast dich damit zu beschäftigen.
Mit einem geeigneten Buch geht der Einstieg flotter.

Ich habe auch schon überlegt ob es sich um ein Werbeprogramm handeln könnte.
Das Logo und die Überschrift lassen diesen Eindruck erwecken. Vielleicht solltest du das Logo weglassen und das "Isorast" nicht an so prominente Stelle setzen.
Darfst du das Logo überhaupt verwenden?

 

[Ricc220773]

Ja darf ich, steht extra auf der Startseite. Der Seitentitel ist entstanden, weil es keine vernünftigen Seitennamen mehr zum Thema Hausbau gibt. Sicherlich auch mit dem Hintergedanken besser bei Suchmaschinen aufzutauchen. Das Logo ist bereits verbannt und nur noch auf der entsprechenden Unterseite zu finden. Klar möchte ich im gewissen Sinne Werbung für Isorast machen, bin schließlich voll zufrieden und möchte es weiterempfehlen. Allerdings werde ich dafür nicht bezahlt, sondern stellt meine Meinung dar. Welches Design gefällt Dir nun besser, das alte oder das neue?

alt
neu

Die Zeit dafür nehme ich mir übrigens vom Schlaf. Sitze dann oft die halbe Nacht durch und arbeite am nächsten Tag weiter. Brauche nicht so viel Schlaf, aber meine gewisse Dosis Klimperkasten.

 

[neuroleptika]

Gefällt mir beides nicht so.
Im blauen Beispiel hast du alle Links in eine Spalte geschoben. Das scheint in der grauen Variante schon etwas besser zu werden.

Versuche es mal mit mutigeren Farben.

 

[Efchen]

Ich habe nun mal versucht meine Seite etwas zu überarbeiten und mit weniger DIV's klarzukommen.

Das klingt ja, als wäre das großer Stress :-)
Wenn man von Grund auf mit dem Inhalt anfängt, dann den mit HTML auszeichnet und <div> dabei nur zum Gruppieren verwendet, dann ist das eigentlich kein großes Problem. Wenn man abspreckt, darf man aber auch nicht zwanghaft versuchen, alle <div>s zu entfernen. Das ist ja nicht das Ziel, das Ziel ist es zum einen, <div> seinem Bestimmungszweck zuzuführen und zum anderen und vor allem, HTML richtig zu nutzen und den Inhalt richtig, mit sprechenden Tags auszuzeichnen. Wenn einem dabei im Hinterkopf bleibt, dass man alle CSS-Formatierungen mit *jedem* HTML-Element machen kann und nicht extra ein <div> braucht, ist das eigentlich nicht so schwer.
Jedoch muss ich zugeben, dass sich "Layout mit Tabellen" oder "Layout mit div" so schnell bei den meisten Leuten festgesetzt hat, dass es nur sehr schwer ist, diese unsinnigen Denkweisen wieder zu lösen.

Allerdings bin ich am Überlegen, ob ich nicht weiterhin meine DIV-Suppe auslöffel.

Das Problem bei Websites ist ja, dass es nicht um Dich Einzelperson geht, sondern um die etlichen, manchmal Millionen von Besuchern dieser Site. Wobei ich natürlich auch wieder relativieren muss. Weder einfache Tabellenlayouts noch div-Suppe fügen den meisten Benutzern Schaden zu. Selbst einfache Tabellenlayouts können barrierefrei sein.
Aber:

Der Seitentitel ist entstanden, weil es keine vernünftigen Seitennamen mehr zum Thema Hausbau gibt

Gerade mit dem Hintergedanken sollte die Site qualitativ hochwertig sein, denn dann ist ja auch das Ziel, dass die Site gefunden wird, und Suchmaschinen lassen sich halt am meisten mit hochwertigem, insbesondere fehlerfreiem und semantisch korrektem Code beeindrucken.

Es verschiebt sich ständig irgendwas oder sieht im Firefox anders aus als im IE.

Das hat aber primär nichts mit <div>s zu tun, denn <div> ist HTML und Aussehen macht man nicht mit HTML, sondern mit CSS.
Man muss nur beachten, dass <div> ein Block-Element ist und wenn man es weglässt, ob das Auswirkungen hat, oder wenn man es ersetzt, dass es sich anders verhält, falls man es durch ein Inline-Element ersetzt (was eigentlich unwahrscheinlich ist).

Ist irgendwie nicht so leicht alles umzusetzen

Das streitet niemand ab. :-)
Aber schwieriger wird es, wenn man sich erstmal an komische Denkweisen gewöhnt hat. HTML ist im Prinzip simpel. Aber nur wenn man sich auch gedanklich an die Trennung von Inhalt und Layout halten kann.

Grüße und weiterhin viel Erfolg mit der Website und beim Bauen,
-Efchen