Fussballnews

[footballgoal]

Guten Abend

Ich bin Betreiber der Seite Football.Goal - Die Welt des Fussballs. Diese befasst sich ausschliesslich mit dem Thema Fussball. Es gibt dort viele und aktuelle News, Tabellen und Ranglisten der besten europäischen Ligen, alles zum Uefa Cup, der Champions League sowie der WM 2010 in Südafrika. Ausserdem erscheinen täglich Links, wo man bestimmte Fussball-Livestreams schauen kann.

Ich bitte um ein Feedback...

Vielen Dank

Mit freundlichen Grüssen

Footballgoal

 

[_Thor_]

Also das erste was mir auffällt, es wirkt sehr vollgestopft, ziemlich eng alles aneinander. Die Symmetrie fehlt.

Die Schrift finde ich schlecht lesbar, Überschriften und Text kann man nicht sonderlich gut voneinander unterscheiden.

Schwarze Schrift auf dunkelblauem Hintergrund ist schlecht lesbar.

Zum Code:

Abgesehen von 77 Fehlern [Invalid] Markup Validation of http://www.footballgoal.de/ - W3C Markup Validator sehe ich nur <div>, <span> und <table>. Semantik also gleich 0.

Überschriften zeichnet man mit <h1> - <h6> aus, je nachdem, in welcher Ebene sie steht. Menüs zeichnet man als Liste aus (<ul>), Textabsätze mit <p>, Adressen mit <address> usw.

Das fehlt bei dir alles.

Zudem kommt, dass du Inhalt (HTML) und Layout (CSS) nicht voneinander trennst. Das gesamte CSS gehört in eine separate Datei und hat im Quellcode nichts verloren.

 

[footballgoal]

Vielen Dank für deine Antwort. Ich werde mir dies zu Herzen nehmen und in den nächsten Tagen verbessern. Melde mich falls es soweit ist..

mfg

footballgoal

---------------------

Football.Goal - Die Welt des Fussballs

 

[iplay]

Hi.

Mein erster gedanke "information overflow".
Wenig übersichtlich...

Dann ist mir noch aufgefallen, das wenn man auf Uefa-Cup klickt, sich die Navi verschiebt.

Ich würde sagen, die seite ist noch verbesserungswürdig. Ich würde dir emfehlen dich zu entscheiden, ob du jetzt eine serifen oder serifenlose Schrift nimmst. (Besser wäre meiner Meinung nach eine serifenlose Schrift, da die besser am Bildschirm zu lesen ist.)

Um auch was positives zu sagen, mir gefällt das blau im Header sehr gut...

Liebe Grüße

iplay

 

[Efchen]

(Bei mir) schon nach 1x Schrift vergrößern platzt die Navigation, bei 3x vergrößern explodiert das gesamte Layout.

 

[Basti93]

(Bei mir) schon nach 1x Schrift vergrößern platzt die Navigation, bei 3x vergrößern explodiert das gesamte Layout.

Ja, das ist mir auch passiert - eigentlich schade, denn eigentlich finde ich die Seite nicht schlecht, aber sowohl der Code, als auch die Bedienung ist teilweise einfach schrecklich.

 

[Efchen]

Teilweise?
Ach so, das "teilweise" bezog sich nur auf die Bedienung...

 

[footballgoal]

Ich weiss dass der Code nicht immer gut ist, aber dies ist auch meine erste Website, ich befasse mit mit dem Thema HTML und CSS erst seit Juni 08. Werde dies aber auf jeden Fall verbessern..danke

mfg

 

[Efchen]

Ich weiss dass der Code nicht immer gut ist

Das ist eine freundliche Formulierung :-)

aber dies ist auch meine erste Website

Dann ist vieles klar und durchaus auch entschuldigt. Aber dann musst Du völlig falsche Tutorials zu dem Thema erwischt haben (die sterben halt leider nicht aus). Im Prinzip müsstest Du alles abreißen und neu machen. Auch aus Sicht der Nutzbarkeit sind ja so ziemlich alle Regeln gebrochen, die man brechen kann. Das Layout passt sich weder an die Grüße des Viewports noch an die Schriftgröße an.

Aber so wie es aussieht, ist die Site ja nun erstmal fertig. Jetzt wäre dann der geeignete Zeitpunkt, mit dem Redesign zu beginnen. :-)

Hilfe dazu bekommst Du auf jeden Fall hier!

Gruß,
-Efchen

 

[footballgoal]

Ich werde mein bestes tun, um die Seite dynamischer zu machen und den code zu verbessern(erneuern)...

mfg

 

[francesco]

Ein paar Tipps um deinen CSS-Code ein bisschen schlanker zu machen:

1. Statt jedes mal

   border-bottom:1px solid #ffffff;
   border-right:1px solid #ffffff;
   border-left:2px solid #ffffff;
   border-top:1px solid #ffffff;

   zu schreiben, einfach

   border: 1px solid #fff;

   schreiben.
2. Alle

   div

   rausstreichen, brauchst du nicht.
3. Statt

   a:link    { color: black; text-decoration: none; }
   a:visited { color: black; text-decoration: none; }
   a:focus   { color: black; text-decoration: none;  background:none; }
   a:hover   { color: black; text-decoration: underline; background: none;  }
   a:active  { color: black; text-decoration: none; background: none; }

   einfach nur

   a { color: #000; text-decoration: none; }
   a:focus, a:hover { text-decoration: underline; }

   Das sind nur die Kleinigkeiten, die mir aufgefallen sind. Immer darauf achten: HTML- und CSS-Code so einfach und schlank wie möglich halten. Deine Besucher werden's dir danken.

 

[Efchen]

Statt jedes mal

border-bottom:1px solid #ffffff;
border-right:1px solid #ffffff;
border-left:2px solid #ffffff;
border-top:1px solid #ffffff;

zu schreiben, einfach

border: 1px solid #fff;

schreiben.

Das ist aber nicht das selbe.
Wenn Du nochmal genau hinschaust... :-)

Alle div rausstreichen, brauchst du nicht.

Also ich bin ja auch für sauberen Code und gegen div-Suppe, aber so pauschal ist dieser Rat natürlich Unsinn.

Und auch bei Deiner Lösung für die Links ist ein Unterschied.
Aber vom Prinzip her kann man das natürlich verkürzen, richtig.
Aber man sollte :link und :visited unterschiedlich kennzeichnen, damit der Nutzer sieht, welche Links er schon besucht hat!

HTML- und CSS-Code so einfach und schlank wie möglich halten. Deine Besucher werden's dir danken.

Wichtiger als bloße Schlankheit sind selbstverständlich Validität und Nutzbarkeit. Und auch bestimmte optische Effekte, die man nur durch aufgeblähten Code hinbekommt, z.B. runde Ecken, haben durchaus ihre Berechtigung.

 

[francesco]

Das ist aber nicht das selbe.
Wenn Du nochmal genau hinschaust... :-)

Oh, stimmt, den einen Pixel hab ich übersehen. Dann eben so:

border: 1px solid #fff;
border-left-width: 2px;

Also ich bin ja auch für sauberen Code und gegen div-Suppe, aber so pauschal ist dieser Rat natürlich Unsinn.

Aha, und warum? Ich habe ja kein allgemeingültiges Dogma verkündet, ich rede speziell von seiner CSS-Datei.

Und auch bei Deiner Lösung für die Links ist ein Unterschied. Aber vom Prinzip her kann man das natürlich verkürzen, richtig. Aber man sollte :link und :visited unterschiedlich kennzeichnen, damit der Nutzer sieht, welche Links er schon besucht hat!

Ich seh keinen Unterschied. Dass man unbesuchte und besuchte Links getrennt behandeln sollte ist mir bewusst. Ich wollte ihm nur zeigen, wie er seinen vorhandenen Code kürzer schreiben kann.

Wichtiger als bloße Schlankheit sind selbstverständlich Validität und Nutzbarkeit.

Schlankheit schließt bei mir Validität und Nutzbarkeit nicht aus, im Gegenteil.

 

[Efchen]

Aha, und warum? Ich habe ja kein allgemeingültiges Dogma verkündet, ich rede speziell von seiner CSS-Datei.

Weil es sicher mindestens die ein oder andere Stelle gibt, wo mehrere Elemente gruppiert werden sollen, z.B. das zweite div im body.

Ich seh keinen Unterschied.

a:focus hat im Original text-decoration:none, bei Dir underline.
Abgesehen davon machst Du die vorgegebene Pflicht-Eigenschaft "background:none" zu einem optionalen Vorschlag.

Schlankheit schließt bei mir Validität und Nutzbarkeit nicht aus, im Gegenteil.

Das darf es auch nicht ausschließen.

 

[francesco]

Weil es sicher mindestens die ein oder andere Stelle gibt, wo mehrere Elemente gruppiert werden sollen, z.B. das zweite div im body.

Ich meinte eigentlich die div's im CSS-Code (div#header, div#navi, div#titel1, usw.)

a:focus hat im Original text-decoration:none, bei Dir underline.
Abgesehen davon machst Du die vorgegebene Pflicht-Eigenschaft "background:none" zu einem optionalen Vorschlag.

Stimmt, das hatte ich übersehen. Ich glaube das habe ich so geschrieben, weil es (zumindest für mich) keinen Sinn macht, den hover-Zustand zu unterstreichen, den focus-Zustand aber nicht. Eigentlich wollte ich ja den Code einfach nur verkürzt schreiben, von dem her: Fehler von mir.

Das darf es auch nicht ausschließen.

Gut, da sind wir uns ja einig! ;-)

 

[Efchen]

Ich meinte eigentlich die div's im CSS-Code

Okay, Mistverständnis :-)

Ich tendiere aber auch dazu, sowas gerne zu schreiben, weil damit die Zuordnung noch genauer wird und sich weniger Fehler einschleichen (Fehler in dem Sinne, dass die Eigenschaften auch für andere Elemente gelten).

Aber prinzipiell hast Du Recht, ja.

Stimmt, das hatte ich übersehen.

Ehrlich gesagt waren das ja eigentlich Spitzfindigkeiten :-)

Gut, da sind wir uns ja einig! ;-)

:-)

Schönes Wochenende!
-Efchen