Website Bewertung

[Silar]

Hallo,
ich habe gestern und heute eine Übungs-Website erstellt. Bisher meine erste mit Farben außer grau. :) Sie ist W3C-valide,und ich habe versucht die Website so semantisch wie möglich zu machen. Die Seite ist grösstenteils aus <div>'s zusammengesetzt. Ich weiss, das wird nicht gerne gesehen, aber ich wüsste keine Alternative als Die <div>'s zu screenshoten und als grosse Grafik einzufügen, was natürlich Schwachsinn ist.

Kritik aller Art her! ;)

Gruss, Silar

Silar-Webdesign bietet Ihnen ein

 

[Elroy]

Hallo.

Ich finde die Seite ist viel zu dunkel, kaum Kontrast. Keine Seite auf der ich länger verweilen würde.
Nimm helle freudliche Farben und Sorge für mehr Kontrast.

Beim Quelltext ist mir aufgefallen das du deine Navigation nicht als Liste ausgezeichnet hast.

Gruss
Elroy

 

[Silar]

So, die Site ist nun etwas kräftiger von den Farben her.

 

[Icy]

Hi Silar,

das Design an sich finde ich schon nicht schlecht. Aber ich würde auf jeden Fall von den Farben her noch etwas Helles mitreinbringen.
Du musst ja nicht unbedingt die Farben von Grund auf verändern, aber zumindest mal hier und da etwas hellere Farben mitreinbringen (mit Farbkontrasten arbeiten). Zum Beispiel würde ich den Hover-Effekt deutlicher machen und vielleicht Überschriften, Links, fettgedruckte/wichtige Schriftzüge farbig gestalten (nicht schwarz).
Ich würde es auch gut finden, wenn die gerade besuchte Seite in der Navigation irgendwie besonders gekennzeichnet werden würde.

Vom Code her habe ich wohl schon Schlimmeres gesehen, aber wie immer gibt's natürlich auch etwas zu verbessern :) Ist schonmal gut, dass du keine Tabellen, Frames oder sonst ein Zeugs für's Seitenlayout benutzt. Deine h1, h2-Anordnung ist auch korrekt
Aber immer div-Elemente zu verwenden, ist natürlich auch nicht ganz korrekt. Deine Navigation ist eine Liste (ul), die kannst du dann noch besser formatieren als dein Div, weil sie eben für solche Dinge gedacht ist.
Den Footer würde ich vielleicht auch nicht extra in ein Div packen, da schießt du meiner Meinung nach mit Kanonen auf Spatzen :)

MfG Icy

 

[Silar]

Aber immer div-Elemente zu verwenden, ist natürlich auch nicht ganz korrekt.

Was soll ich stattdessen nehmen? :)

Deine Navigation ist eine Liste (ul), die kannst du dann noch besser formatieren als dein Div, weil sie eben für solche Dinge gedacht ist.

Stimmt, das kann ich noch als 'Liste' kennzeichen, aber das <div> brauche ich für den Hintergrund und der Border.

Den Footer würde ich vielleicht auch nicht extra in ein Div packen, da schießt du meiner Meinung nach mit Kanonen auf Spatzen

Eine andere Möglichkeit wäre natürlich den Footer in eine Klasse zu stecken, und diesen dann mit margin-top: 800px(oder mehr) zu platzieren. Mal sehen.

[EDIT]
<ul> eingefügt.

 

[_Thor_]

Stimmt, das kann ich noch als 'Liste' kennzeichen, aber das <div> brauche ich für den Hintergrund und der Border.

Wieso das? Einer Liste kannst du genauso einen Rahmen und einen Hintergrund geben.

 

[Tomm]

Der Content steht bei mir nicht in der Mitte
Außerdem ist die Menüleiste verschoben
Ich hab IE7 , vielleicht ist es bei anderen Browser nicht so

 

[Silar]

Tomm:
Der Inhalt sollte auch nicht in die Mitte sein, sondern leicht links. Und das mit der Menüleiste muss ich mal sehen. Ich optimiere die Site erstmal für Firefox, und dann für die anderen Browser.

 

[Tomm]

Bei mir schaut das so aus

Alles etwas verschoben :|

http://www.bilder-hochladen.net/files/d7uw-2-jpg.html

 

[Silar]

Ja, habe es mir gerade mit dem IE angesehen. Es wird dort eine Treppe aus den Buttons gebildet.

 

[Icy]

Ja, habe es mir gerade mit dem IE angesehen. Es wird dort eine Treppe aus den Buttons gebildet.

Das ist dann das perfekte Beispiel für den Sinn von semantisch korrektem Code :)
Zeichne das ganze als horizontale Liste aus, dann erkennt sie auch jeder Browser als solche ;) Fabrne, Abstände und was auch immer kannst du auch in Listen packen.

MfG Icy

 

[Efchen]

Sie ist W3C-valide

Nein, ist sie nicht.

Die Seite ist grösstenteils aus <div>'s zusammengesetzt.

Warum das? <div> ist das Element, was man bei richtiger Semantik am wenigsten braucht.

Ich weiss, das wird nicht gerne gesehen

Das hat nichts mit "gern gesehen" zu tun, es ist einfach semantisch falsch.

ich wüsste keine Alternative

Es gibt auch keine "Alternative zu divs". Was soll das sein?
Semantik bedeutet, dem Inhalt eine Bedeutung zu geben. div hat die Bedeutung "Gruppe mehrerer Elemente". Da musst Du doch zugeben, dass das Blödsinn ist, wenn Du ein <ul> noch zusätzlich in ein <div> einpackst. Ich sehe da keinen Sinn dahinter, Du packst doch Deine Weihnachtsgeschenke auch nicht zweimal ein!

Auch Mist ist der Alternativtext Deiner 1. Überschrift. Was soll "Logo" für eine Überschrift sein? Ich glaube, Du hast noch nie Deine Bilder abgeschaltet, mach das mal, dann erkennst Du vielleicht zum ersten Mal wirklich, wozu der alt-Text ist und was Du da sinnvolles reinmachen musst!

Mehrere Textabsätze zeichnet man auch durch mehrere <p> aus. <br> braucht man eigentlich nicht. Ich würde es so sparsam wie möglich einsetzen, meistens ist man nämlich versucht, das nur aufgrund von Abständen zu machen. Deine Begründung ist sicher "Ich will aber nicht, dass zwischen den Absätzen ein Abstand ist." Tja, sowas macht man aber mit CSS, nie mit HTML.

Dann der Footer. Der enthält doch Text. Warum zeichnest Du ihn dann nicht als "Text" aus, sondern als "Gruppe"? Wo ist da eine Gruppe?

Dann Verbesserung: Warum jedem Link die Klasse "button" geben? Ist doch viel zu viiel Schreibarbeit und macht den Code unübersichtlich. Alle Klassen raus, die Liste heißt dann semantischerweise "Buttonlist" und die einzelnen Links sprichst Du dann mit "ul.buttonlist a" an und gibt dem die Eigenschaften, die Dein ".button" jetzt hat.

aber das <div> brauche ich für den Hintergrund und der Border.

Wie _Thor_ schon sagt, dazu brauchst Du kein <div>. Um einen optischen Effekt zu erreichen, brauchst Du nur CSS, niemals aber ein bestimmtes HTML-Tag. HTML ist NICHT für das Aussehen zuständig!
Das ist vielleicht das, was Dich die ganze Zeit blockiert, Du glaubst vielleicht, dass man nur divs mit CSS auszeichnen kann. Das ist natürlich nicht so und wäre völlig unlogisch und würde den Einsatz von CSS gar nicht rechtfertigen. Natürlich kannst Du JEDES Tag mit JEDER CSS-Eigenschaft formatieren! (Ausnahmen bestätigen die Regel)

 

[Silar]

Nein, ist sie nicht.

Ja mittlerweile nicht mehr, weil ich an der Site weiter gearbeitet habe.

Warum das? <div> ist das Element, was man bei richtiger Semantik am wenigsten braucht.

Bei der Liste(Navigation) sehe ich es ein, dass man genausogut die Liste selbst umranden kann/Hintergrund hinzufügen kann. Das wäre dann ein <div> weniger.

Da musst Du doch zugeben, dass das Blödsinn ist, wenn Du ein <ul> noch zusätzlich in ein <div> einpackst. Ich sehe da keinen Sinn dahinter, Du packst doch Deine Weihnachtsgeschenke auch nicht zweimal ein!

Ist es auch, mir war da noch nicht bewusst, dass man mit der Liste das Selbe erreichen kann wie mit dem <div>.

Auch Mist ist der Alternativtext Deiner 1. Überschrift. Was soll "Logo" für eine Überschrift sein? Ich glaube, Du hast noch nie Deine Bilder abgeschaltet, mach das mal, dann erkennst Du vielleicht zum ersten Mal wirklich, wozu der alt-Text ist und was Du da sinnvolles reinmachen musst!

Doch mache ich regelmässig per Firefox's AddOn 'Web.Developer-Tool'. ;) Aber es stimmt, da war ich etwas weniger aufmerksam bei der Verteilung der 'alt'-Namen.

Dann der Footer. Der enthält doch Text. Warum zeichnest Du ihn dann nicht als "Text" aus, sondern als "Gruppe"? Wo ist da eine Gruppe?

Ja, wie gesagt, das hatte ich gemacht, damit man dieses <div> bequemer unten platzieren konnte(Mit top: und left: im CSS). Alternativ werde ich den Footer in eine Klasse stecken, und diesen dann mit margin-top nach unten bewegen.

Dann Verbesserung: Warum jedem Link die Klasse "button" geben? Ist doch viel zu viiel Schreibarbeit und macht den Code unübersichtlich. Alle Klassen raus, die Liste heißt dann semantischerweise "Buttonlist" und die einzelnen Links sprichst Du dann mit "ul.buttonlist a" an und gibt dem die Eigenschaften, die Dein ".button" jetzt hat.

Ah, auch eine Möglichkeit, werde ich mal ausprobieren. Scheint auch eine viel kürzere Variante zu sein. ;)

Wie _Thor_ schon sagt, dazu brauchst Du kein <div>. Um einen optischen Effekt zu erreichen, brauchst Du nur CSS, niemals aber ein bestimmtes HTML-Tag.

Gut. Mit CSS wüsste ich nur einen Weg optisch ohne HTML-Tags etwas anzeigen zu lassen: "background:url(bla.png);". Ich kann doch aber nicht aus dem Nichts einen Rahmen um Nichts und darinnen noch eine Grafik einfügen, worin dann der Text steht. Die Border/Grafik muss sich doch an etwas orientieren, und da ist <div> ganz gut gelegen, weil man Objekte darin gut einfassen kann, und die Grösse des <div>'s in CSS geändert werden kann. Oder meinst du, dass ich das <p> Tag per CSS formatiere, und eine Border etc setze?

 

[Efchen]

mir war da noch nicht bewusst, dass man mit der Liste das Selbe erreichen kann wie mit dem <div>.

Das ist aber essenziell. Wenn man das nicht weiß, dann macht CSS scheinbar keinen Sinn! Aber das hast Du jetzt wohl begriffen :-)

Ja, wie gesagt, das hatte ich gemacht, damit man dieses <div> bequemer unten platzieren konnte

Was hat die Wahl des Tags mit der Positionierung zu tun? NICHTS. Was ich anmäkele ist, dass Di Text als "Gruppe" auszeichnest, anstatt als "Text" mit <p>. Du musst da nichts in Klassen stecken, Du musst zuerst mal das richtige Tag auswählen. Das Aussehen ist bei dieser Überlegung irrelevant!

Mit CSS wüsste ich nur einen Weg optisch ohne HTML-Tags etwas anzeigen zu lassen

Ohne HTML-Tags kann man nichts mit CSS machen. CSS braucht eine valide und semantisch sinnvolle Basis aus HTML, um zu funktionieren. Aber man wählt die Tags eben nicht, um damit ein bestimmtes optisches Ergebnis zu erreichen, sondern man wählt sie, weil sie dem Inhalt die richtige Bedeutung verleihen. HTML ist NICHT für das Aussehen zuständig!

Ich kann doch aber nicht aus dem Nichts einen Rahmen um Nichts und darinnen noch eine Grafik einfügen, worin dann der Text steht.

Natürlich nicht. Aber man fügt nicht ein Tag ein, um damit einen Border zu erzeugen, sondern man gibt einem vorhandene Element einen Border.

Die Border/Grafik muss sich doch an etwas orientieren, und da ist <div> ganz gut gelegen

Um irgendwas optisches zu erzeugen, ist jedes andere Tag genauso gut, bzw. kommt es auf die Bedeutung des Inhalts an, welches Tag Du vorfindest. Es kommt nicht auf das Aussehen an, welches Tag man dafür verwendet.

weil man Objekte darin gut einfassen kann, und die Grösse des <div>'s in CSS geändert werden kann.

Das geht mit anderen Block-Elementen exakt genauso.

Oder meinst du, dass ich das <p> Tag per CSS formatiere, und eine Border etc setze?

Wenn Du einen TEXTABSATZ hast, dann liegt Dir ein <p> vor. Wenn Du dessen Aussehen ändern willst, dann weist Du die Eigenschaften dem <p> zu und setzt dafür nicht so ein anderes Element hin.

Du hast noch nicht verstanden, wozu HTML da ist und warum HTML so strikt von CSS getrennt werden soll. Ich kann Dir nur empfehlen, eine einfache Seite zu schreiben (ohne viel Design-Schnickschnack) und von vorn zu beginnen. Von vorn, das heißt Du fängst mit dem Inhalt an. Dann die Auszeichnung mit HTML. Nur logische Semantik. Kein Aussehen. Damit sollst Du begreifen, dass das Aussehen für die Auszeichnung mit HTML nicht wichtig ist. Bei HTML geht es nicht um das Aussehen!
DANN meldest Du Dich mit der Version wieder hier. Und das machen wir solange, bis Du in der Lage bist, Inhalt mit HTML richtig auszuzeichnen, ohne dabei ständig an das Aussehen zu denken! :-)

 

[Silar]

Ich kann Dir nur empfehlen, eine einfache Seite zu schreiben (ohne viel Design-Schnickschnack) und von vorn zu beginnen. Von vorn, das heißt Du fängst mit dem Inhalt an.

Okay. Ich werde dann versuchen die Hände von CSS bis dahin zu lassen. ;)

DANN meldest Du Dich mit der Version wieder hier. Und das machen wir solange, bis Du in der Lage bist, Inhalt mit HTML richtig auszuzeichnen, ohne dabei ständig an das Aussehen zu denken!

Ja, das ist eine Umstellung für mich, da ich mehrere Jahre 2D/3D-Grafikdesign gemacht habe.

 

[Efchen]

Nicht nur die Finger von CSS, sondern auch die Gedanken weg vom Layout/Design. Damit hat HTML nichts zu schaffen.

Das glaube ich Dir, dass das eine Umstellung ist :-)
Aber glaube mir, für das Verständnis ist die Vorgehensweise einfacher. Normalerweise macht es mit einem Mal *klick* und man hat es 100% verstanden. Wenn Du mal so weit bist, dann kann man auch wieder mit dem Layout anfangen...

 

[Silar]

Hm. Ist es das, was du wolltest? Ich habe das einfachste gemacht, das man machen kann.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Titel</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="Eine Testseite" />
    <meta name="author" content="Silar" />
    <meta name="keywords" content="Test" />
</head>

<body>
    <h1>Eine &Uuml;bungsseite</h1>
    <h2>Semantik</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <hr/>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</body>
</html>

 

[Efchen]

Das ist sowas, ja. Und das tollste: Kein einziges <div>! :-)

Wobei man über das <hr> streiten kann...hier bedeutet es, dass Du einen logischen Bruch zwischen den beiden Textabsätzen beschreiben willst. Wenn Du doch wieder nur eine optische Linie wolltest, die wäre mit border-bottom beim einen Absatz besser gewesen.

Und jetzt machst Du noch zwei Menüs dazu. Eines willst Du später über der Überschrift haben und eines an der linken Seite. Ohne ein einziges <div> bitte und versuche auch schon, Klassen zu setzen, wo Du meinst, dass Du sie später benötigen wirst.

 

[Prasedonym]

-Gut:
--Logo find ich echt schön

-Nicht so gut:
--Zu dunkl von den Farben her
--Nimm eine andere Schriftart z.b Sans-Serif,Arial usw.
--schiebe den Content in die Mitte mit margin: auto;

Persönliche Bewertungvon einer Skala von 1-10 = 3,65

ich finde die Website persönlich nicht so gut aber ich glaube du hast das Zeugs um hier was sehr schönes daraus zu machen :-D

Du weisst wenn du Webdesign machen willst dann musst du zuerst ein eigenes CMS programmieren und das benötigt einige Arbeit. Wenn du schon gut PHP und MySQL kannst dan habe ich nichts gesagt ;-D

 

[Silar]

Zu dunkl von den Farben her

In der neueren Offline-Version ist die Site mit mehr Weißanteil.

schiebe den Content in die Mitte mit margin: auto;

Hatte ich am Anfang auch gehabt, hatte das aber entfernt, weil ich die Website unveränderlich in der Größe haben wollte, und ich nicht wüsste, wie ich den Footer mitbewegen soll.

Du weisst wenn du Webdesign machen willst dann musst du zuerst ein eigenes CMS programmieren und das benötigt einige Arbeit. Wenn du schon gut PHP und MySQL kannst dan habe ich nichts gesagt ;-D

Ich lerne erst seit 1-2 Wochen jeden Tag. :) Und PHP MySQL wollte ich erst machen, wenn ich HTML 'beherrsche' ;)

Zu Efchen:
Habe einige Klassen hinzugefügt + Menü.
Ohne <div> hätte ich schon einige Probleme: Den ersten Absatz kann ich ohne Probleme platzieren, aber den zweiten müsste in den ersten packen, und mit <br/> trennen, was ja nicht so schön ist. zweite Möglichkeit wäre, die beiden Absätze in ihren beiden <p>'s lassen, und mit einem dritten die beiden umfassen, und diesen dann mit CSS bearbeiten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Titel</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="Eine Testseite" />
    <meta name="author" content="Silar" />
    <meta name="keywords" content="Test" />
</head>

<body>
    <ul class="navigation_list">
    <li><a href="#" title="Zu Seite 1 springen">Seite 1</a></li>
    <li><a href="#" title="Zu Seite 2 springen">Seite 2</a></li>
    <li><a href="#" title="Zu Seite 2 springen">Seite 2</a></li>
    </ul>

    <h1 class="header">Eine &Uuml;bungsseite</h1>
    <h2>Semantik</h2>
    <p class="ground">
    Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <hr/>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p class="footer">
    &copy; Silar
    </p>


</body>
</html>