Verbesserungstipps für Homepage gesucht

[L.B.]

Hallo Zusammen,

seit gut vier Monaten arbeite ich an einem eigenen Theme für meine Webseite, die auf dem CMS WordPress basiert. Jetzt wollte ich einfach mal ein bisschen Feedback zum Design hören. Was findet ihr gut? Was könnte man besser machen bzw. noch hinzufügen?
Besonders die Startseite bereitet mir noch Kopfzerbrechen, da die Inhalte recht statisch sind (die drei Boxen z.B. sind direkt im Quellcode "hardcoded", was natürlich unschön ist). Hier wäre ich für ein paar Anregungen und Tipps sehr dankbar.

Danke schonmal
L.B.

 

[CooperakaTigger]

Das erste was ich immer mache wenn ich eine Seite anschaue ist sie zu validieren:
http://validator.w3.org
und siehe da: 34 Fehler und eine Warnung, beim überblicken sind mir keine schweren Fehler aufgetreten trotzdem solltest du mal danach schauen.

Zum aussehen kann ich nur sagen, schlicht und schick, das einzigste was mich stört ist beim runterscrollen (24" TFT) kommt plötzlich dieses grell Orange in den Bildschirm. Villeicht solltest du das Orange oben auch noch mir rein bringen.

 

[elTiburon]

Aussehen finde ich gut, nichts zu meckern

Ich persönlich würde die Menüpunkte unten in dem Orangen Block weglassen da sie schon über das obere Menü erreichbar sind. Und das Orange kleiner machen.

 

[L.B.]

Danke für eure Tipps.

@CooperakaTigger: Jetzt sind es nur noch 22 Fehler. Vor vier Monaten konnte ich noch nicht wirklich programmieren, deshalb findet sich noch immer der ein oder andere Anfängerfehler im Code.

Also meint ihr, der Footer müsse noch überarbeitet werden? Mal sehen, wie ich noch ein paar orange Akzente in den oberen Teil der Seite bekomme. Momentan sind die Links und die "Selektionsfarbe" (markierter Text) im gleichen Farbton wie der Footer.

@elTiburon: Die Tagcloud würde ich schon ganz gerne irgendwo im Footer lassen, aber ich experimentiere mal mit einem etwas kleineren Footer auf meiner Testseite herum.

[Edit] Jetzt ist nur noch ein Fehler im Code, der aber von einem Plugin verursacht wird.

 

[CooperakaTigger]

Mal lernt nie aus mit dem Programmieren vor allem dank HTML5.
Was mir noch eingefallen ist: Die Weichst sehr stark in der Konsistenz ab. Dein Logo ganz Links in die Ecke zu klatschen macht das Bild etwas kaputt. Auch wird kein Besucher deiner Website da schnell hinschauen. Der Normalfall ist das das Logo neben dem der Navigation zu finden ist. Kann man natürlich auch anders machen, aber da fallen wir zu sehr in die Usability Engineering Richtung.

Was auch eine Verbesserung (meine Meinung nach) wäre, wenn du in deinen drei "featured" Boxen das Underline der Überschrift raus nimmst, würde sauberer und nicht so überladen wirken.

 

[L.B.]

Das Logo könnte ich ohne Probleme in den Header direkt neben das Menü packen. Die Frage ist, ob das gut aussieht. Ich habe mal einen entsprechenden Screenshot gemacht. Für das mobile Theme (momentan noch nicht implementiert) hatte ich so etwas auf jeden Fall geplant, weil das Logo ansonsten zuviel Platz wegnimmt.

Bei den Unterstreichungen muss ich dir zustimmen, das war etwas zuviel des Guten. Aber ich hatte ja sowieso vor, die Boxen umzugestalten, weil sie momentan nicht sonderlich flexibel sind.

 

[leadclown]

sieht ganz gut aus, allerdings solltest du zumindest noch den ie8 berücksichtigen.

das heißt, dass du das logo nicht als svg einbinden solltest weil das nämlich sonst nicht dargestellt wird.

auch den transparenten hintergrund im banner (slider) solltest du vielleicht über opacity anstatt über rgba lösen. für den ie dann entsprechend die filter anweisung.

beim kontaktformular gibt es noch einen darstellungsfehler.

das logo würde ich vom persönlichen geschmack her auch oben in die navi setzen, aber wirklich bündig mit der kante wo die seite anfängt.

die seite dann auch wirklich zentrieren, also noch ein stück nach links.

den footer finde ich ok so.

 

[L.B.]

Danke für dein ausführliches Review.

Ja, der IE8...*räusper*

Wenn ich ehrlich bin, habe ich meine Seite bisher nur im IE9 angeguckt und da sieht sie annähernd genauso aus wie in Firefox, Chrome, Opera und Safari. Lediglich die Transition-Effekte werden nicht interpretiert.

Wenn ich das Logo in den Header einfüge, brauche ich ja gar keine Bilddatei mehr, da sollte ein einfacher Text "LB" in Fettdruck ausreichen. Das ist auch das nächste, was ich angehen werde. Die Zentrierung geht dann mit der Änderung einher, da die Seite momentan nur nach links geschoben ist, um auf der linken Seite genug Platz für das Logo zu schaffen.

Der Transparenz in der Slideshow wurde vorher über opacity gelöst, was aber das Problem hatte, dass auch der Text transparent war. Aber ich plane ohnehin die Umsetzung einer komplett neuen Slideshow mit Navigationselementen &Co.

Den Fehler im Kontaktformular finde ich nicht. Tritt der nur im IE8 auf?

 

[Daaron]

Du kannst den IE8 doch wunderbar simulieren im IE9. Drück mal F12 und wähl den Render-Modus entsprechend.

Was die Transparenzen angeht: bei so etwas helfen nur 1px große PNGs.... oder man ignoriert die ganzen Technologiebremsen einfach.

 

[L.B.]

Danke für den Tipp. Jetzt sehe ich ich auch, was leadclown eben mit dem Kontaktformular meinte. Das war aber nur ein kleiner Fehler, denn ich hatte HTML-Kommentare vor dem HTML-Header im Quellcode stehen, was natürlich nicht gerade optimal ist. Der IE schreddert in so einem Fall dann die ganze Seite.

Ich habe mal auf meinem Testwebspace ein bisschen mit dem Logo herumexperimentiert: http://hls-projekt.co.de/ Was meint ihr dazu?

Für die Slideshow baue ich vorübergehend als Fallback einfach eine weiße Fläche ohne Transparenz ein.

 

[Daaron]

So n Fallback ist leicht.
Sag einfach erst: background-color: #fff;
und danach: background-color: rgba(...);

die Krüppelbrowser von Vorgestern sollten nur die letzte für sie verwertbare Deklaration nutzen.

 

[L.B.]

Ok, danke, das funktioniert gut. Sieht zwar nicht so toll aus, aber wer noch den IE8 benutzt soll sich nicht über das Design beschweren.

 

[Cave Johnson]

Für meine Begriffe könnten sich die Dropdown-Menüs schneller öffnen.

So fährt man mit der Maus drüber, nichts passiert und man klickt auf die Überschrift bevor man die Unterpunkte sieht. Klar, man weiß es nach dem ersten Mal, aber dann "nervt" die Wartezeit erst recht. Ich finde so etwas ohne Verzögerung wesentlich angenehmer.

 

[L.B.]

Danke auch für dein Feedback. Ich habe direkt mal ein bisschen an den Einstellungen des Menüs "geschraubt". Während die Latenz (Zeit vom Hovern des Menüpunkts bis zum Öffnen bzw. Zeit vom Verlassen des Punkts bis zum Schließen) vorher bei 800ms lag, habe ich sie jetzt auf 100ms reduziert. Außerdem habe ich die Dauer des Aufklappvorgangs von 350ms auf 250ms verkürzt. Das gefällt mir persönlich jetzt auch besser.

Edit: Ich habe die Latenz jetzt komplett rausgenommen, sodass nur noch das eigentliche Aufklappen 250ms in Anspruch nimmt.