Neu-Gestaltung eines Berater-Netzwerks "Consenso"

[omega2k]

Hallo Gemeinde,

ich bin derzeit damit betreut den Internet-Auftritt www.consenso-gmbh.de umzugestalten. Wenn sich hier jemand angesprochen fühlt seine Meinung bzgl. Usability/CSS/Design etc. kundzutun, wäre ich sehr dankbar. Wenn möglich, bei Fehlern im Layout den Browser mit Version angeben, damit ich den Fehler beheben kann. Getestet wurden bisher nur die aktuellen Versionen von IE, Firefox und Opera. Gültiger HTML5 und CSS2 Code liegt vor, was aber nicht heißt, dass es überall gleich aussieht.

Danke

 

[Efchen]

Was mir auf den ersten Blick gar nicht gefällt, sind die feststehenden Bereiche. Das ist reine Platzverschwendung. Wenn man einen kleinen Viewport hat (ich denke da an mein Netbook mit max. Auflösung von 1024x600, der Viewport ist dann selbst bei maximiertem Fenster deutlich kleiner), dann sieht man nur noch den Header und ein ewig breites "Herzlich willkommen" aber kaum noch Inhalt.

Obwohl mir gut gefällt, wie sich der Header dem Viewport anpasst. Optisch gefällt mir die Seite auch recht gut, wobei der Fließtext viel zu klein ist. Zum einen hast Du mit "pt" eine Einheit gewählt, die für den Druck ist und nicht für den Bildschirm, zum anderen ist es einfach zu klein. Fließtext muss eigentlich "1em" als Größe haben, denn das ist die Schriftgröße, die der Nutzer in seinem Browser für sich als "optimal" eingestellt hat. So macht man es jedem Nutzer recht. Macht man die Schrift bei Dir um einiges größer, damit man sie lesen kann, platzt der Text im Menü sofort aus den roten Boxen raus und das sieht scheußlich aus. Ebenso der Text links in der verschwenderisch breiten Spalte.
Beim Kontaktformular gefällt mir nicht, dass man alle Felder ausfüllen muss. Ich nehme an, es wird nicht jede Oma mit Euch Kontakt aufnehmen wollen, aber ich kann mir trotzdem Firmen vorstellen, die z.B. keine Mailadresse haben. Sowas missfällt mir immer an Kontaktformularen. Und vielleicht will jemand nur eine Antwort per Mail, nicht aber per Telefon...

Der Code der Seite hingegen ist eine Katastrophe. Das sieht aus, als hat jemand was davon gehört, dass man Layout nicht mit Tabellen macht. Jetzt ists halt Layout mit divs, aber das ist genauso falsch. Semantik, was der eigentliche Sinn von HTML ist, ist bei Dir absolut Null zu sehen. Eine einzige div-Suppe ohne jegliche logische Auszeichnung. Das kann so nicht bleiben! Und das auch noch mit HTML5-Doctype ausgezeichnet. HTML5 dreht sich gerade in der Gebärmutter (nicht im Grab, ist ja noch nicht geboren) um! HTML nicht verstanden - Setzen, 6!
Hier nachlesen: Einführung | Webdesign mit XHTML und CSS

Fragen? Fragen!

 

[screengreen]

Designtechnisch finde ich das Projekt gelungen. Schlicht, einfach, aber absolut passend zum Thema.

Was ich ändern würde, ist der graue Balken rechts neben der Navigation. Links erzeugt er einen Einschnitt und ist zu stark umrandet. Optisch nicht so gut.

Weiterhin bleibt in den Beraterprofilen beim Wechsel der Personen der Rahmen stehen. Das könnte man auch noch ändern.

 

[struppi]

Ich finde HTML5 gut. Und es läßt sich auch einfach nutzen, einfach den DOCTTYPE austauschen und wenn die Seite vorher valides HTML war, ist sie hinterher valides HTML5. Man muss ja keine neuen Elemente benutzen.

Mehr dazu: Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip - Smashing Magazine

 

[Efchen]

wenn die Seite vorher valides HTML war, ist sie hinterher valides HTML5. Man muss ja keine neuen Elemente benutzen.

Aber wenn das HTML vorher schon falsch eingesetzt war und keine Semantik enthält, dann ist der Code auch als HTML5 grottenschlecht und wird dadurch auch nicht besser. Außerdem zeichnet sich HTML5 ja durch neue Tags aus, die die Semantik noch verbessern sollen. Wenn man aber sowieso keinen Bock auf Semantik und zufriedene Nutzer hat, wozu dann HTML5 nehmen?

Mehr dazu: Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip - Smashing Magazine

Das Zitat von Drew in dem Comic gefällt mir sehr gut. Nicht Transitional ist leichter für Anfänger, Strict ist leichter. Auch wenn das jetzt hier off-topic ist.

 

[struppi]

weil der DOCTYPE kürzer ist ;)

 

[Efchen]

ICH versteh den Smiley. Aber nachdem es Auflösungsweichen gibt, und Tutorials für "Layout mit div", werden in Zukunft noch weniger verstehen, wozu der Doctype eigentlich da ist, weil es jetzt schnell die Runde macht, dass kurze Doctypes zu bevorzugen sind oder irgendsoein Blödsinn.

;-/

 

[struppi]

Ok, ich verwende HTML5, weil es kürzer, zukunftssicher und abwärtskompatibel ist

 

[omega2k]

Designtechnisch finde ich das Projekt gelungen. Schlicht, einfach, aber absolut passend zum Thema.

Danke, wir hatten auch einen super Grafiker, der mir die Teile schön als transparente PNGs exportiert hat.

Was ich ändern würde, ist der graue Balken rechts neben der Navigation. Links erzeugt er einen Einschnitt und ist zu stark umrandet. Optisch nicht so gut.

Ist glaube ich noch ein Fehler im CSS gewesen. Hab jetzt alles nochmal umgebaut, damit's auch mit älteren Browsern bis IE7 noch gut funktioniert. Für IE6 werde ich kommende Woche noch eine extra CSS Weiche einbauen, damit das Problem dann auch weg is.

Weiterhin bleibt in den Beraterprofilen beim Wechsel der Personen der Rahmen stehen. Das könnte man auch noch ändern.

Geplant ist auch noch die aktive Seite im Link hervorzuheben. Aber die Entscheidung, wie genau wurde noch nicht gefällt. Denke mal im Menü mittig invertiert, und die restlichen Links im NavBereich und im Header dann fett oder so... mal schauen.

Ach ja und der scrollbare Bereich in der Mitte musste raus, lieber die ganze Seite scrollbar machen - wirkt irgendwie besser - und unten ein großzügiger Abschluss.