Redesign für Steiner Cycling Team

pkipper · #1 (**permalink**) 10.11.2010, 23:18

Hallo und guten Tag Allerseits,

Ich würde hier gerne ein Redesign, woran ich arbeite, vorstellen. Es geht um eine Rennradfahrgruppe welche sich ein professionelles Auftreten wünscht.

Der Wunsch war eine schlichte, übersichtliche Seite mit ein paar Gimmiks. Dies habe ich durch ein Shadowbox-Skript für Bilder (Thema #5 öffnen für Beispiel) und jQuery (mit diversen Plugins) für den Content gelöst (auf Flash wurde bewusst verzichtet). Im Hintergrund läuft ein CMS Tool (PulseCMS) welches es dem Kunden ermöglicht auf einfachstem Weg den Content anzupassen.

Bisweilen habe ich erst die Frontseite gestaltet, das Layout fungiert allerdings als Template für die gesammte Seite.

Ich wäre sehr dankbar wenn Ihr die Seite auf Design, Code und Fehler prüfen könntet, das heisst wenn ihr 5 Minuten Zeit und Lust hättet

Hier gehts zur Site: Steiner Cycling Team Redesign

Geplante Änderungen:

- Header Areal ein wenig füllen (fühlt sich momentan noch ein wenig "leer" an)
- Navigation einmitten und grafisch ein wenig aufpeppen
- Navigation mit einem Dropdown Menü versehen (weitere Untermenüs sind vom Kunden erwünscht)

Ich möchte mich schonmal vorab bei den Leuten bedanken, welche sich die Mühe machen die Site zu checken

Freundliche Grüsse,

Phil

David · #2 (**permalink**) 11.11.2010, 09:20

Das Design gefällt mir vom Prinzip gut. Allerdings ist der Kontrast zwischen Hintergrund und dem weißen Body zu stark. Der Asphalt muss ja nicht zwangsläufig schwarz sein. Dagegen ist innerhalb des Bodys zu viel Rot. Die Typografie wirkt etwas bieder.

Der Quelltext sieht sauber aus, ist aber semantisch ungenügend. Navigationslinks gehören in eine Liste, Überschriften sollten in ihrer Reihenfolge auftauchen h1 > h2 > h3 usw. Die Implementierung der Slideshow finde ich auch nicht sonderlich gelungen. Die Beschreibungen zu den Bildern (Titel -> begleittext) sollen im Markup direkt vor oder nach den Bildern auftauchen, am besten zusammen mit dem entsprechenden Bild in einem Listenelement. (Schau dir die Seite mal komplett ohne CSS an. Die Struktur sollte dann immer noch eindeutig und leicht zu verstehen sein.)

Bei sämtlichen Textlinks fehlt eine deutliche Hervorhebung des Tastaturfokuses und sowohl die Slideshow als auch das Akkordeon sind über Tastatur gar nicht zu bedinen. Ich weiß, daran wird bei den ganzen Fancy-JavaScripts nie gedacht, aber ich kann mir nicht vorstellen, dass das gänzlich unmöglich ist, die Funktionalität zusäzlich über das focus-Event anzubieten.

inta · #3 (**permalink**) 11.11.2010, 09:48

Ich kann mich David nur in allen Punkten anschließen und auch mir gefällt das Design auf Anhieb ganz gut.

Einen Punkt habe ich noch, den ich zusätzlich anmerken möchte: Die Boxen im Inhalt fallen etwas aus dem Gesamteindruck heraus, sie wirken sehr statisch. Problematisch ist auch, dass die roten Balken (Überschriften) in der Marginalspalte die Aufmerksamkeit zu sehr auf sich ziehen. Ich würde die Boxen in der Marginalspalte aufgeben und schauen ob es nicht reicht die Inhalte dort mit einer dezenten Linie zu trennen.

Der Zeilenabstand darf gerne auf mindestens 1.4 angehoben werden, das erhöht die Lesbarkeit noch einmal.

Entspricht der Titel des Bildes der Hauptüberschrift der Seite? Für mich wirkt es wie die wichtigste Überschrift dieser Seite, auch hier sorgt der roten Kasten für den Eyecatcher-Effekt. Wenn das so gewollt ist und die Überschift entsprechend wichtig ist, würde da aber nichts ändern.

pkipper · #4 (**permalink**) 11.11.2010, 14:58

Hi David, Hi inta,

Ich danke Euch für euer Lob, Kommentar und Kritik. Es waren ein paar wirklich gute und brauchbare Änderungs- und Verbesserungsvorschläge mit dabei

@ David:

Die Kontrast-starken Farben sind Wunsch des Kunden. Dies da Ihr Corporate auf diesen Farben und Farbkontrasten aufgebaut ist. Da kann ich leider nicht viel machen...
An der Typographie arbeite ich momentan noch und ziehe auch in Erwägung FontSquirrel miteinzubeziehen um eine externe Font einzubinden. Denke das könnte dem ganzen noch einen kleinen aber feinen Touch verleihen, oder was meinst Du dazu?
Die Navigation war, als ich die Demosite gepostet habe, noch nicht komplett. Dies habe ich aber jetzt nachgeholt und das ganze in eine CSS-Dropdown Liste (:hover-basiert) umgewandelt.
Das Markup der Newsbox am Anfang lässt sich leider nicht verändern da es genauso wie es ist, aufgelistet werden muss. Ich weiss dass es semantisch nicht korrekt ist, aber ein anders ähnlich einfach aufgebautes Skript mit diesen Möglichkeiten habe ich bis anhin nicht gefunden (Usability für den Kunden so simpel wie möglich halten )
Die Header-Semanthik sollte nun auch korrekt sein. Habe vergessen dass der Accordion-Skript mit dem h3-Header gekoppelt war...
Zusätzlich habe ich die wichtigsten Buttons und Navigationen mit einem Tabulatorfokus versehen. (Mache ich normalerweise erst gegen Schluss wenn alles steht). Was das einbinden ins Javascript anbelangt so denke ich sollte es ein Weilchen dauern, aber es ist, so wie Du beireits sagtest, sicherlich nicht unmöglich.

@ inta:

Mit den Marginal-Boxen (Denke du meinst die Roten Titelbalken welche sich auf- und zuschieben lassen?) stimme ich Dir zu. Ich war, und binn, schon dabei weitere Layouts für diesen Teil zu gestalten. So wie das Design momentan ist, ist es gemäss Auftrag vom Kunden, ich versuche aber Ihm noch weitere Varianten schmackhaft zu machen
Mit "Entspricht der Titel des Bildes der Hauptüberschrift der Seite?" denke ich meinst Du den Titel innerhalb der sich abwechselnden Newsbox? Wenn ja, ich binn noch dabei ein wenig mit der Textgrösse zu spielen. Aber er sollte schon der am besten lesbare Text sein, da es sich dabei um die wichtigsten News handelt.
Die Zeilenhöhe habe ich zusätzlich noch von 16px auf 20px erhöht. Sollte sich nun besser lesen denke ich.

Hier gehts zur korrigierten Seite: Steiner Cycling Team Redesign

Danke nochmals für die Comments! Freue mich natürlich über jeden neuen Comment und auch über jede angebrachte Idee oder Kritik

Freundliche Grüsse,

Phil

PS: Mein FF-WebDeveloper spuckt momentan noch zwei merkwürdige Fehlermeldungen aus. Ich habe die beiden angegebenen Pseudoklassen/Pseudoelemente "sizzle" und "eq" im jquery.js Skript ausfindig gemacht. Handelt es sich dabei um einen tatsächlichen Skriptfehler oder einfach nur um eine vom Webdeveloper falsch gehandelte Error-Nachricht? (Über Google habe ich nur sehr, sehr wenig Infos gefunden...)

Manfred62 · #5 (**permalink**) 11.11.2010, 17:12

Hallo Phil

Heute vormittag im Geschäft reingeschaut unter XP-IE8.
Die grossen Slideshow Grafiken hatten 2-3 vertikale Linien (wie Schnittkanten) drin? Kann ich aber hier im IETester nicht mehr sehen.

IE8: unter dem Footer kommt ab und zu (js?) der weisse bg hervor.
IE7+8: stimmt die Navigation nicht, die Unterlinks sind versetzt.
Diverse Abstände sind anders.
IE6: geht vieles nicht..

Nebensächlich: der Admin-Login unten, ist das so gewünscht?
Ich würd nicht unbedingt jemanden drauf stossen, der es nicht zu wissen braucht (was da im Hintergrund läuft).

Gruß Manfred

inta · #6 (**permalink**) 11.11.2010, 21:12

Zitat:

Zitat von pkipper

Die Navigation war, als ich die Demosite gepostet habe, noch nicht komplett. Dies habe ich aber jetzt nachgeholt und das ganze in eine CSS-Dropdown Liste (:hover-basiert) umgewandelt.

Die Dropdown-Navigation lässt sich aber leider nicht mit der Tastatur bedienen.

Zitat:

Zitat von pkipper

Mit den Marginal-Boxen (Denke du meinst die Roten Titelbalken welche sich auf- und zuschieben lassen?)

Jein, ich meine die mit den roten Titelbalken, aber nicht das Akkordeon, sondern die Boxen auf der rechten Seite. Die lassen sich hier nicht auf- und zuklappen.

Zitat:

Zitat von pkipper

Mit "Entspricht der Titel des Bildes der Hauptüberschrift der Seite?" denke ich meinst Du den Titel innerhalb der sich abwechselnden Newsbox? Wenn ja, ich binn noch dabei ein wenig mit der Textgrösse zu spielen. Aber er sollte schon der am besten lesbare Text sein, da es sich dabei um die wichtigsten News handelt.

Ok, ich hätte das als Titel/Überschrift für die komplette Seite gehalten. Wenn die News sehr wichtig sind, dann mag das mit der roten Hinterlegung hinhauen. Das springt sehr ins Auge, darum sollte da nichts unwichtiges stehen.

Zitat:

Zitat von pkipper

Die Zeilenhöhe habe ich zusätzlich noch von 16px auf 20px erhöht. Sollte sich nun besser lesen denke ich.

Die Höhe ist ok, aber die Zeilenhöhe sollte man eigentlich immer als Faktor angeben und keinesfalls in Pixeln. Da sich dieser Wert vererbt, musst du einen Pixelwert für jede abweichende Schriftgröße wieder angeben, der Faktor bezieht sich immer auf die Schriftgröße und sollte also in der Regel immer passen.

nevermind · #7 (**permalink**) 12.11.2010, 11:39

Zitat:

Zitat von Manfred62

Nebensächlich: der Admin-Login unten, ist das so gewünscht?
Ich würd nicht unbedingt jemanden drauf stossen, der es nicht zu wissen braucht (was da im Hintergrund läuft).

Habs bisher immer so gehalten (Generell und bei Pulse im Speziellen):
- Link nur von der Impressumsseite, oder per Eingabe im Browser
- Umgestaltung der Loginseite, sodass das CMS nicht mehr unbedingt erkennbar ist.

pkipper · #8 (**permalink**) 08.02.2011, 18:16

Hi Leute,

Danke an all eure Kritikpunkte und Anregungen!! Ich wollte Euch gerne die fertige Page vorstellen.

Ihr findet Sie hier: Steiner Cycling Team

Einige eurer Punkte wurden ignoriert, andere dankbar angenommen. Teilweise hatte dies mit dem ausdrücklichen Wunsch des Kunden zu tun dass er es gerne genau so hätte und für alle anderen nicht angenommenen Ratschläge hat es vom Zeitpensum her leider einfach nicht mehr gereicht.

Wäre froh um ein kleines Feedback über die fertige Site damit ich fürs nächste mal ein paar Dinge anders / besser machen kann.

Freue mich natürlich über jeden Comment!

Freundliche Grüsse,

Philippe

Webcoder · #9 (**permalink**) 08.02.2011, 18:24

Zitat:

Zitat von pkipper

...
Wäre froh um ein kleines Feedback über die fertige Site damit ich fürs nächste mal ein paar Dinge anders / besser machen kann.

Freue mich natürlich über jeden Comment!

Freundliche Grüsse,

Philippe

Also ich poste erstmal mein Fehlerprotokoll aus meinem Webbrowser:

Zitat:

Zitat von iCab

http://www.stct.ch/
HTML Fehler (20, 1): Das Attribut "property" ist unbekannt.
HTML Fehler (21, 1): Das Attribut "property" ist unbekannt.
HTML Fehler (22, 1): Das Attribut "property" ist unbekannt.
HTML Fehler (23, 1): Das Attribut "property" ist unbekannt.
HTML Fehler (57, 73): Das Tag <fb:like> ist unbekannt.
HTML Fehler (57, 73): Das Attribut "layout" ist unbekannt.
HTML Fehler (57, 73): Das Attribut "show_faces" ist unbekannt.
HTML Fehler (57, 73): Das Attribut "font" ist unbekannt.
HTML Fehler (57, 201): Das Ende-Tag </fb:like> ist unbekannt.
HTML Fehler (180, 12): Das Tag <table> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (217, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (219, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (220, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (221, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (222, 7): Das Tag <tr> fehlt.
HTML Fehler (223, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (224, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (225, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (226, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (227, 7): Das Ende-Tag </span> fehlt.
HTML Fehler (227, 7): Das Tag <tr> fehlt.
HTML Fehler (228, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (229, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (230, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (231, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (232, 7): Das Tag <tr> fehlt.
HTML Fehler (233, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (234, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (235, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (236, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (237, 7): Das Tag <tr> fehlt.
HTML Fehler (238, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (239, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (240, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (241, 4): Das Tag <td> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (242, 7): Das Tag <tr> fehlt.
HTML Fehler (243, 14): Das Ende-Tag </div> fehlt.
HTML Fehler (243, 14): Das Ende-Tag </body> fehlt.
HTML Fehler (243, 14): Das Ende-Tag </html> fehlt.
HTML Fehler (285, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (317, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (367, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (406, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (441, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (479, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (523, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (560, 605): Das Tag <strong> fehlt.
HTML Fehler (599, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (644, 0): Das Tag <table> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (689, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (741, 0): Das Tag <table> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (772, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (820, 6): Das Tag <table> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (859, 6): Das Ende-Tag </p> fehlt.
HTML Fehler (894, 0): Das Tag <table> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (980, 0): Das Tag <table> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (1059, 0): Das Tag <table> ist in seinem Eltern-Element nicht erlaubt.
HTML Fehler (1098, 67): Das Ende-Tag </span> fehlt.
HTML Fehler (1098, 67): Das Ende-Tag </span> fehlt.
HTML Fehler (1160, 61): Das Tag <p> fehlt.
http://www.steiner-cycling-team.ch/
HTML Fehler (2, 1): Das Attribut "id" ist im Tag <html> nicht erlaubt.
HTML Fehler (2, 1): Das Attribut "class" ist im Tag <html> nicht erlaubt.
XD Proxy
HTML Warnung (0, 0): Die DOCTYPE-Definiton des Dokuments ist unbekannt.
http://static.ak.fbcdn.net/rsrc.php/...fX9QQbf2xg.css
CSS Fehler (5, 193): Die Eigenschaft "*" ist unbekannt.
CSS Warnung (13, 31): Die Eigenschaft "-moz-outline-style" ist unbekannt.
CSS Fehler (36, 24): Die Eigenschaft "zoom" ist unbekannt.
CSS Warnung (42, 127): Die Eigenschaft "-webkit-appearance" ist unbekannt.
CSS Warnung (42, 151): Die Eigenschaft "-webkit-border-radius" ist unbekannt.
CSS Fehler (44, 24): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (50, 174): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (50, 183): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (50, 201): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (55, 10): Die Eigenschaft "word-wrap" ist unbekannt.
CSS Fehler (56, 47): Der Wert "\" ist für die Eigenschaft "float" nicht erlaubt.
CSS Fehler (56, 48 ): Der Wert "9" ist für die Eigenschaft "float" nicht erlaubt.
CSS Fehler (56, 50): Die Eigenschaft "*" ist unbekannt.
CSS Warnung (61, 17): Die Eigenschaft "-ms-filter" ist unbekannt.
CSS Fehler (61, 48 ): Die Eigenschaft "filter" ist unbekannt.
CSS Warnung (68, 17): Die Eigenschaft "_background-image" ist unbekannt.
CSS Warnung (68, 40): Die Eigenschaft "_display" ist unbekannt.
CSS Warnung (68, 56): Die Eigenschaft "_zoom" ist unbekannt.
CSS Warnung (69, 15): Die Eigenschaft "_visibility" ist unbekannt.
CSS Warnung (70, 22): Die Eigenschaft "_line-height" ist unbekannt.
CSS Warnung (123, 26): Die Eigenschaft "-ms-filter" ist unbekannt.
CSS Fehler (123, 57): Die Eigenschaft "filter" ist unbekannt.
CSS Warnung (123, 84): Die Eigenschaft "-khtml-opacity" ist unbekannt.
CSS Warnung (123, 102): Die Eigenschaft "-moz-opacity" ist unbekannt.
CSS Fehler (128, 159): Die Eigenschaft "zoom" ist unbekannt.
CSS Fehler (130, 121): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (137, 85): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (138, 60): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (143, 100): Der Wert "solid" ist für die Eigenschaft "background" nicht erlaubt.
CSS Warnung (150, 154): Die Eigenschaft "_background" ist unbekannt.
CSS Fehler (154, 57): Die Eigenschaft "zoom" ist unbekannt.
CSS Fehler (160, 54): Die Eigenschaft "border-radius" ist unbekannt.
CSS Warnung (160, 72): Die Eigenschaft "-moz-border-radius" ist unbekannt.
CSS Warnung (160, 95): Die Eigenschaft "-webkit-border-radius" ist unbekannt.
CSS Fehler (162, 65): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (196, 53): Der Wert "auto" ist für die Eigenschaft "min-width" nicht erlaubt.
CSS Warnung (220, 178 ): Die Eigenschaft "_background" ist unbekannt.
CSS Fehler (266, 65): Der Wert "20" ist für die Eigenschaft "height" nicht erlaubt.
CSS Fehler (266, 123): Der Wert "200" ist für die Eigenschaft "width" nicht erlaubt.

Warnungen können ignoriert werden, aber Fehler sollten behoben werden. Beim Einsatz von CSS3 muss man bei den CSS-Fehlern natürlich weitere Abstriche machen. Sobald diese Arbeit erledigt ist, sehe ich sie mir gerne genauer an.

Gruß
Webcoder

Manfred62 · #10 (**permalink**) 08.02.2011, 18:34

In der Tat: 35 Fehler in Transitional finde ich schon etwas sehr heftig. Naja, der Kunde weiss es ja nicht...

Kurzer Nachtrag: hab auf der Startseite nach einer <h1> gesucht. Gibts nicht..??

Manfred

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Rennrad Team Site	pkipper	Site- und Layoutcheck	20	09.03.2010 12:28
Footer Div verschwindet unter absolut positioniertem div	pkipper	CSS	6	01.03.2010 12:48
[Suche] Team für non-profit Projekt	B. Scheuert	Offtopic	1	26.03.2006 09:22