WebStyleBoard

• Negativ-Farben
  Die Tatsache, dass es schon lange dunkel ist und ich trotzdem noch unter den wachen weile, begünstigt mitunter meine Meinung von der Seite. Üblicherweise hat es einen Grund, warum Autofahren bei Nacht anstrender ist als am Tage, was auch auf Webauthoring übertragbar ist. Größere Mengen Text sind in heller Schrift auf dunklem Grund einfach schwer lesbar. Die vorliegende Seite hat wenig Text und die auch durch die Titelgrafik zu erzeugen versuchte Atmosphäre ist düster aber nicht erdrückend - zusammen mit dem durch die Fettformatierung, auf die ich noch einzugehen versuche, nicht zu dünnen Text ergibt sich so doch noch ein harmonisches Gesamtbild, das trotz oder gerade wegen des Bruchs mit der Konvention der dunkel-auf-hell-Schrift interessant und künstlerisch wirkt.
  
  
• Aufteilung
  Wie nur kommt der Mirko nun auf den Gedanken, die Seite wirke künstlerisch? Es sind ganz einfach gewisse Details an der Seite, die passen, gut aufeinander abgestimmt sind. Was wir hier sehen können, ist ein sehr gut eingehaltenes durchgehendes Layout, welches zumindest auf meiner Plattform mit meinen Fenstermaßen ausgewogen daherkommt. Auch die Farbkombination schwarz/weiss mit orangenen Farbklecksen hat etwas puristisches, klares, und wirkt allein durch die starken Kontraste nie langweilig. Allein die Farbkombination mit dem vielen leeren Raum der Seite wirkt und bedarf keiner großartigen zusätzlichen Effekte, wie dies etwa in einem Forum, wo der Fredstarter den Beitrag ge-x-postet hat, auf das ich aber garnicht länger eingehen werde, empfohlen wird.
  
  Ich würde sogar gerne weitergehen und sagen, dass die Seite fast noch zu voll ist, um den "cleanen" aufgeräumten Farbeffekt zur Geltung kommen zu lassen, oder einfach noch zu unaufgeräumt. Es stehen hier ein wenig die verschiedenen Balken in Konflikt, die sich nicht recht ordnen wollen und teilweise mitten im Raum aufhören. Da wäre einmal und in der z-Achse zuunterst der gepunktet graue Balken, an welchen sich die Navigation schmiegt, und welcher mit dem Text des Inhaltes aufhört. Rechtwinklig dazu verläuft ein weiterer Balken, diesmal ein Bild, der auch ziemlich unvermittelt aufhört. Dort wo dieser aufhört hängt dann ein bisschen Fließtext, der aber wiederum mit der Navigation nicht recht zusammenpasst. Diese rückt IMO in seinen Bereich.
  
  Du hast also schon ein eigentlich klassisches Webseitenlayout, mit einem Navigationsbalken links und einem Banner oben verwendet, dieses aber etwas aufgelockert. Was mich betrifft, ist das Layout aber zu locker, es wäre jetzt schön, das ganze wieder zu festigen. Die schöne Klarheit, die durch die Farbwahl und den wenigen Inhalt möglich ist, wird so inkonsequenterweise leider nicht erreicht. Ohne darauf zu achten, wie Du dieses jetzt umzusetzen gedenkst, hier einige optische Tipps von mir, wie Du vielleicht etwas mehr Klarheit in die Seite bringen kannst:
  
  Der linke Balken könnte das optische Fundament der Seite bilden, an dem sich die restlichen Elemente auszurichten gedenken. Allein schon die Zweiteilung des Seitenhintergrundes in grau und schwarz wäre hochinteressant. Lasse den grauen Balken einfach bis zum unteren Rand laufen, dann hängt er, bildet er doch eigentlich den Hintergrund, nicht mehr so ganz in der Luft. Das wäre recht einfach mit einem Hintergrundbild des Body zu realisieren.
  
  Der Header der Seite, die Grafik, liegt optisch "über" dem linken grauen Balken, was schon durch den Abstand oben deutlich wird. Hier solltest Du auch konsequenter sein, aber hier sehe ich zwei Möglichkeiten:
  Vorschlag 1 ist ein etwas konventionelleres Layout zu pflegen. Du könntest den oberen Balken einfach bis zum rechten Rand laufen lassen, damit wäre die Optik der Seite wieder etwas klarer, aber auch langweiliger. Vielleicht wäre diese Variante auch wegen des eigentlich am rechten Rand der Grafik "hängenden" Textes ein wenig ungeschickt. Darum präferiere ich Vorschlag 2: sei konsequent und rücke die Headergrafik auch links ein bisschen ab, so dass sie wirklich schwebt. Mache sie etwas schmaler (sonst wird die Seite zu inkompatibel) und spendiere ihr einen kleinen Haarlinienborder, welche sie noch klarer von den anderen Seitenelementen abrückt.
  
  Die Navigation ist jetzt wirklich ein Sonderfall. Ich persönlich finde sie absolut unkofortabel und sehr schlecht zu bedienen, die vertikale Optik ist aber gerade einer der Reize der Seiten und sollte IMO wenn schon nicht genau so, dann doch wenigstens anders, im Bild der Seite fest verankert bleiben. Zur Aufteilung jedenfalls ist zu sagen, dass die Navigation speziell da schlecht aufgehoben ist. Wenn sie nicht so groß wäre, würde ich sie gern "in"/auf den linken Balken schieben. Der schwarze Bereich jedenfalls ist für den Fließtext, was IMO bei einer so schwer zugänglichen Navigation klar getrennt werden sollte. Da die Navigation aber zu groß für den linken Balken ist, empfehle ich Dir, sie kleiner zu machen:
  
  
• Navigation
  Wer sagt denn, dass immer die komplette Navigation verfügbar sein muss? Deine Seite weist eine ganz klare Baumstruktur auf, welche nicht in der Navigation umzusetzen ein Fehler wäre. Es reicht meiner Meinung nach völlig aus, die jeweils angrenzende Hierarchie zugänglich zu machen, alles andere verwirrt nur. Ich habe etwa erst nach ein paar Klicks gemerkt, dass die weissen Navigationspunkte eben nicht die aktuelle Seite markieren, sondern quasi Überschriften für die einzelnen Sektionen bilden. Und genau da können wir ansetzen, wenn wir die Navigation kleiner machen wollen:
  
  Auf der Startseite würde es reichen, die Navigation aus drei Links für die Indexseiten der jeweiligen Sektionen bestehen zu lassen, auf den Unterseiten reicht es, einen Link für die höchste Ebene und die Links für die angrenzenden Hierarchienachbarn zu geben. Das sähe dann so aus:
  
  Startseite
  über mich - stuff (was zur Hölle ist das? Gibt es da kein deutsches Wort für??) - kontakt
  
  Über mich
  <- STARTSEITE - lebenslinien - ich - fakten
  
  Das wäre eine wesentlich einfachere Navigation und würde auch Platz sparen, den wir ja dringend brauchen: denn die interessante vertikale Optik der Navigation, die die Seite erst zum Blickfang gemacht hat, wollen wir jetzt irgendwie erhalten. Alles wäre besser lesbar als die Schrift einfach nach links zu kippen. Vielleicht probierst Du einfach mal aus, ob Du mit Textlinks vertikal schreiben kannst? (Nach jedem Zeichen einen Umbruch) Wenn Du dann mit einer Spalte auskommst kannst Du die Optik sehr interessant machen und zudem noch lesbar. Aber das musst Du einfach ausprobieren.
  
  
• Logo?
  Was auf der Seite dann noch fehlt, ist ein Stück Corporate Identity. Ein kleines grafisches Element, das so einfach ist wie die Seite, das man unter hunderten wiedererkennt und das Deine Seiten fortan an einer festen Stelle schmücken wird. Ein hypsches Logo. Aber dazu kann ich jetzt keinen aufrechten Gedanken mehr abgeben.

• Validität
  Der (X)HTML-Validator des Word Wide Web Consortiums (W3C) überprüft Webseiten auf ihre syntaktische Korrektheit, indem er sie mit einem SGML-Parser gegen die angegebene DTD prüft. Allein schon, dass der Validator die Seite überprüft, machst Du ihm reichlich schwer, indem Du keine DTD angibst. Mit einer DTD sagt man den UserAgents, in welcher (X)HTML-Version die Seite geschrieben wurde und wie mit den einzelnen Elementen umzugehen ist. Fehlt diese Angabe, schalten die aktuellen grafischen Browser in ihren Fehlerkorrektur-("Quirks")-Modus. Das bedeutet, dass der Webbrowser dann von einer kaputten Seite ausgeht und bei jedem Element erst seine Algorithmen laufen lässt, die herauszufinden versuchen, was denn damit jeweils gemeint sein könnte. Dieser Vorgang ist natürlich fehlerträchtig und zeitaufwändig. Ein Validator hat natürlich keine Quirks-Modus und keine Fehlerkorrektur, das widerspricht auch der Natur eines Validators als Überprüfer auf syntaktische Korrektheit. Da Du es nicht für angemessen hälst, der Deine Seiten zu interpretieren versuchenden Software zu sagen, in welcher Sprache Du schreibst, erhalten wir also vom Validator eine Fehlermeldung:

  Zitat

  Fatal Error: no document type declaration;

  
  
  Um es ihm dennoch zu ermöglichen, Deine Seite gegen eine DTD zu prüfen, muss man ihm eine vorgeben. Ein Blick in Deinen Quelltext offenbart, dass Du teilweise noch "presentational" HTML verwendest, wovon die meisten Elemente und Attribute, da mittlerweile "missbilligt", nur noch in Transitional-Varianten von HTML oder XHTML vorkommen. Und da Du anscheinend kein wohlgeformtes HTML schreibst, fällt XHTML auch aus. Ich gebe dem Validator also "HTML 4.01 Trasitional" als DTD an. Auf die Ergebnisse gehe ich jetzt im Einzelnen ein:
  
  http://validator.w3.org/check?uri=http%3…ransitional&ss=
  
  

  Zitat

  Line 8, column 29:

  	Quellcode
  1	<script language="javascript">

  Error: required attribute "TYPE" not specified

  Ganz klare Sache: gib noch das Type-Attribut an, und zwar mit dem Wert "text/javascript". Das Language-Attribut ist als "missbilligt" markiert worden, die Sprache gibt man über das Type-Attribut an: http://www.w3.org/TR/html4/interact/scripts.html#edef-SCRIPT
  
  

  Zitat

  Line 16, column 6:

  	Quellcode
  1	</head>

  Error: end tag for element "HEAD" which is not open; try removing the end tag or check for improper nesting of elements

  Das ist ein vielleicht etwas irreführender Fehler, aber darauf zurückzuführen, dass Du Dein LINK-Element wie in XHTML wohlgeformt geschlossen hast. In HTML jedoch ist der End-Tag für das LINK-Element verboten. Der Validator merkt das aber erst, wenn das Elter-Element geschlossen wird. Und das ist der HEAD.
  
  

  Zitat

  Line 18, column 54:

  	Quellcode
  1	<body style=" overflow-y: scroll; overflow-x: hidden;">

  Error: element "BODY" not allowed here; check which elements this element may be contained within

  Das ist lediglich ein Folgefehler aus dem vorhergehenden. Logisch und überprüft: dieser Fehler verschwindet mit dem Schließen des LINK-Elements.
  
  Die restlichen Fehler sind 12 fehlende Alt-Attribute, welche ich Dir nochmal kurz erkläre.

  Zitat

  Error: required attribute "ALT" not specified

  Zitat

  Aus: http://www.w3.org/TR/html4/struct/objects.html#adef-alt
  The alt attribute must be specified for the IMG and AREA elements.

  Ein Bild kann nicht immer geladen werden, die Gründe dafür können zahlreiche sein. Es kann sein, dass der verwendete UserAgent einfach keine Bilder anzeigen kann, weil er in einer Kommandozeile läuft. Es kann sein, dass der Internetsurfer eine langsame Verbindung hat und deshalb Bilder bewusst abstellt. Und natürlich kann es auch passieren, dass ein Bild falsch referenziert wurde. Immer dann, wenn ein Bild nicht angezeigt werden kann, erscheint an seiner Stelle der alternative Text aus dem Alt-Attribut. Weitere Informationen zu dieser und ähnlicher Thematik habe ich mal in Form einer kleinen Linksammlung zusammengetragen: http://www.wsb.tnsweb.de/wsb/thread.php?threadid=1594
  
  Du hast einfach pauschal alle Alt-Attribute weggelassen, ich vermute dahinter jetzt mal keine Unwissenheit, sondern den Wunsch, keine Tooltips angezeigt zu bekommen, welche der Internet Explodierer aus Alt-Attributen fälschlicherweise generiert. Dieses Fehlverhalten unterbindet man aber anders, und zwar mit einem leeren Title-Attribut:

  Zitat

  Aus: http://www.w3.org/TR/html4/struct/global.html#adef-title
  Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object).

  Das Alt-Attribut aber ist sehr wichtig, und welche Funktion es hat, sei mal an der Ansicht der vorliegenden Seite in einem Emulator des Konsolenbrowsers Lynx verdeutlicht:

  	Quellcode
  1 2 3 4 5 6 7 8 9 10 11	[INLINE] © by jonemo über mich [LINK] [9 weitere nichtssagende Links] [LINK] Willkommen auf jonemo.de [Fließtext]

  Aus: http://www.delorie.com/web/lynxview.cgi?…Fv1%2Findex.php
  
  Wie Du hier siehst werden die Grafiken mit Platzhaltern dargestellt. Das mag unschön sein, aber wenn dort einfach nichts stünde, dann könnte man garnicht mehr navigieren, da die Navigation ja nur aus Grafiken besteht. Und das ist auch das Problem. Hättest Du die richtigen alternativen Texte angegeben, was bei Grafikankern eben genau der Bildtext wäre, dann hätte man auch im Konsolenbrowser noch eine brauchbare Navigation. So aber steht da nur ein verwirrendes Platzhaltergewirr, jeder Link sieht gleich aus, die Seite ist damit quasi kaputt wegen nichtfunktionierender Navigation. Ich denke, dass Du jetzt siehst, wozu alt-Texte gut sind. Es gibt aber auch tatsächlich einen Einsatz, wo alternative Texte nicht erwünscht sind, wie etwa bei Deiner Header-Grafik, die ja (noch!) überhaupt keinen Text enthält. Aber auch hier ist ein Alt-Attribut zu setzen, und zwar ein leeres, und zwar um den Platzhalter zu vermeiden, der den verstörten Internetsurfer noch mehr verwirrt.
  
  Was der HTML-Validator natürlich nicht merkt, ist fehlerhaftes CSS in Style-Attributen. Aber auch für CSS gibt es einen Validator: http://jigsaw.w3.org/css-validator/valid…de/v1/index.php. Das CSS Deiner Seite sieht soweit garnicht so ganz übel aus, Du solltest aber eventuell mal anhand der zahlreichen Warnungen überprüfen, ob Dein Stylesheet logisch aufgebaut ist. Nur eines möchte ich kurz anmerken: Du kombinierst ein JavaScript, das das Browserfenster auf bestimmt Maße beschränken will und ein Style, das im Internet Explodierer vermutlich die vertikalen Rollbalken abschalten soll:

  	Quellcode
  1	<body style=" overflow-y: scroll; overflow-x: hidden;">

  Das ist Dummfug in Reinkultur, zumal Du auch noch völlig unvernüftige Werte für die neuen Maße des Fensters angibst: 805 x 750 Pixel. Was geschieht nun, wenn ein Internetsurfer mit einer Auflösung von 800x600px oder gar 640x480px (Und selbst davon gibt es noch einige!) auf Deine Seite geht? Das Fenster ist auf einmal erheblich größer als sein Bildschirm. Verwirrung vorprogrammiert. Wenn es der Leidtragende dann doch schafft, das Fenster wieder zu verkleinern, hilft ihm das leider auch nicht weiter, weil Du ihm blöderweise den entscheidenden Rollbalken genommen hast. Sei so gut und halte Abstand von so üblen Praktiken.
  
  
• Gutes Markup?
  Dein HTML-Quelltext ist schon recht aufgräumt, er enthält nur wenig "presentational" HTML, keine Redundanzen und ist gut formatiert. Gerade deswegen werde ich jetzt ein wenig darauf eingehen, wie Du den Quelltext vielleicht noch besser machen kannst: Die ganze Seite ist in eine einzige Tabelle eingefasst, was in Anbetracht der Einfachheit der Seite jeder Notwendigkeit entbehrt. Viel mehr ist eine solche Layouttabelle einfach schlechtes Markup, da Du kein bisschen tabellarische Auflistung oder Darstellung irgendwelche Daten hast. Die von Dir praktizierte fixierte Anordnung der einzelnen Elemente der Seite lässt sich mit CSS weit flexibler und performanter bewerkstelligen. Und wenn Du schon eine Tabelle verwenden willst, dann definiere bitte die Präsentations-Attribute

  	Quellcode
  1	<table width="780" cellspacing="0" cellpadding="0" border="0">

  in Deinem Stylesheet.
  
  Überhaupt bist Du in Sachen CSS leider nur wenig kosequent und verwendest manchmal "missbilligte" Attribute direkt neben einem Style-Attribut, wo Du sie ganz bequem mit einbinden könntest. Praktisch hätte das freilich erst einen Effekt, wenn Du die Präsentation ganz aus dem HTML-Quelltext auslagertest und nur über ein Stylesheet das gesamte Layout bestimmtest. Das ist einfacher als Du denkst. Letzendlich wird dabei herumkommen, dass Du in Deinen HTML-Dateien einfach nur noch eine Strukturierung Deines Inhaltes hast und das Layout zentral über ein einziges Stylesheet definierst. Das ist für den Surfer angenehmer, weil weniger Daten übertragen werden müssen und natürlich für Dich, so kannst Du nämlich Deine Inhalte viel besser von den Layoutgedanken trennen, und, was vielleicht für viele viel einleuchtender ist: Du kannst mit der Änderung einer Datei das gesamte Layout komplett umstellen. Das erfordert latür eine komplette Präsentations-Freiheit des (X)HTML-Quelltextes, bringt aber sowohl für Dich als auch für Deine Surfer einige Vorteile. Und dann ist XML auch nicht mehr weit.

Zitat

Original von Snoop
Na memo - da hattest du ja mal wieder deinen guten Tag - oder zuviel Zeit ...

Zitat

Ich wundere mich nur, warum der Memowe nicht auf das Tabellen-Markup eingegangen ist - aber gut... ich hab da ja nichts gegen

Zitat

memowe:
Die ganze Seite ist in eine einzige Tabelle eingefasst, was in Anbetracht der Einfachheit der Seite jeder Notwendigkeit entbehrt. Viel mehr ist eine solche Layouttabelle einfach schlechtes Markup, da Du kein bisschen tabellarische Auflistung oder Darstellung irgendwelche Daten hast. Die von Dir praktizierte fixierte Anordnung der einzelnen Elemente der Seite lässt sich mit CSS weit flexibler und performanter bewerkstelligen.