Layoutentwurf für www.sparc.ac.uk

[Daniel]

Hallo zusammen,

ich brauche mal etwas feedback zu folgendem Entwurf:

Bild gibts nicht mehr, aber die Seite ist ja jetzt auch online: http://www.sparc.ac.uk

P.S. Mein Auftraggeber ist eigentlich sehr zufrieden mit dem Design, aber er hat ja auch kaum eine Ahnung von der Sache

Übrigens, das Logo oben links ist nicht von mir.

[Manuel]

Hi Daniel!

Also prinzipiell ist es sicher recht ordentlich, aber was mich sehr stört sind diese vielen verschiedenen Farben und diese mega "dicke" Überschrift. Ich denke mal die Farben sind wegen dem Logo so gewählt, aber ich würde dir auf jeden Fall zu einer etwas dünneren Schrift raten.

Außerdem hängen die Bilder oben ganz schön in der Luft und sind nach oben und unten hart abgeschnitten.

Lg,
Manuel

[Daniel]

Danke Manuel!

Jetzt wo Du es sagst, die Überschrift wirkt wirklich etwas arg dominant, werde mal einen anderen Font suchen müssen.

Was meinst Du mit vielen Farben? Die verschiedenen blau Töne und das Gelb rechts? Oder die Farben in der Überschrift bzw. in deren Mission Statement?

Wie gesagt das Logo ist nicht von mir, ist zu farbig, vielleicht kann ich mit ihm reden und ich mach das etwas weniger farbig.

Das mit den Bildern, ja da bin ich auch noch nicht ganz so zufrieden mit. Meinst ich soll das eher so wie bei meinem Entwurf für meine Privatseite machen - mit Rahmen?

[Andreas]

Hi,
weiß jetzt nicht, ob das Logo (Schriftzug) vorgegeben war oder auch eigener Entwurf ist, der wäre mir zu ...bunt. Nein, ich glaub Manu meint nicht die Grundfarben der Seite, blau-gelb ist komplementär und verträgt sich ja. sondern den Gesamteindruck. Mir fallen die etwas abrupten Übergänge der Fotos oben auf, die Ränder laufen ja aus. Vielleicht etwas weicher gestalten... Wenn das Logo vorgegeben wäre, dann wäre es ja m.E, auch in Ordnung, die Farben als Anfgangsbuchstaben genau so farblich zugestalten, da find ich nix schlimmes dran :D

ups. edit:/zu schnell gelesen, klar ist klar der im Vorteil, wo hab ich diesen Satz schon oft gehört...*g*

[Daniel]

Danke Andreas,

übrigens wer lesen kann ist klar im Vorteil

Wie gesagt das Logo ist nicht von mir, ist zu farbig, vielleicht kann ich mit ihm reden und ich mach das etwas weniger farbig.

Die Farben für die Seite habe ich auch schön brav mit http://wellstyled.com/tools/colorscheme2/index-en.html zusammengestellt, danke nochmals Manuel für den indirekten Link.

Hab noch nichts neues, versuche das jetzt erstmal mit html und css umzusetzen, die Detialveränderungen kommen später.

Bei den Bildern habt ihr mich überzeugt, da überlege ich mir noch was anderes. Aber prinzipiell ist die Idee doch gut, oder? Also die Bilder da oben mit den alten Leuten. Übrigens hat die Seite was mit Alterungsforschung zu tun, falls das noch nicht klar war. Wollte zuerst da noch ein paar Forschungsbilder mit hinzupacken, aber die haben nicht so recht gepasst.

Danke für Euer Feedback!

[Manuel]

Ja ich meine erstens die Farben im Banner, aber auch andererseits die ganzen Farben auf der Seite. Zähl mal wie extrem viele das sind... allein der Verlauf oben hat ja schon ca. 256 Farben
Ich denke in dem Fall wäre ein klares und schlichtes Design sehr viel sinnvoller.

Bis wann muss das denn fertig sein? Sonst setz ich mich ma ran oder so?

Lg,
Manuel

[Daniel]

Danke fürs Angebot Manuel, aber ich lasse mal die Farben in etwa so, den Footer werde ich aber wohl rausnehmen bzw. schlichter gestalten, der ist definitiv zu viel. Vielleicht mache ich links die Farben auch etwas dezenter bzw. gestalte das noch etwas um.

Also den Verlauf blau in Schwarz oben wegnehmen? Mal probieren, ansonsten möchte ich schon gerne die Farben so beibehalten. Oder meinst Du die vielen Farben der Bilder?

Aber wenn Du mir eine bessere Schriftart für oben finden könntes, wäre mir schon sehr geholfen.

Wenn ich nur dieses Logo farblich ändern könnte.

[Daniel]

Puh, das wäre geschafft:

http://www.daniel-guth.de/sparc/

Hab fast den ganzen Tag damit verbracht das Layout in html und css zu bringen, IE hat mir da echt Probleme bereitet. Netscape und Opera haben noch irgendwelche Probleme das Menü links korrekt darzustellen, die Hintergrundgrafik und die Hintergrundfarbe beim hover werden nicht angezeigt.

Hier mal der entsprechende Codeschnipsel:

Code: Alles auswählen

#leftnavigation ul li a {
   padding: 5px 5px 5px 35px;
   border: none;
   display: block;
   color: #F2F2F2;
   background: #0F0F6B url(silver_arrow.gif) no-repeat 5px center;
}
* html #leftnavigation ul li a {
   width: 100%;
   height: 100%;
}
#leftnavigation ul li a:hover {
   color: #142E6B;
   background: #F2F2F2 url(blue_arrow.gif) no-repeat 5px center;
}
#leftnavigation ul li a:active {
   color: #142E6B;
   background: #F2F2F2 url(blue_arrow.gif) no-repeat 15px center;
}
#leftnavigation ul li a#current {
   color: #142E6B;
   background: #F2F2F2 url(blue_arrow.gif) no-repeat 15px center;
}

Falls mir jemand dabei helfen kann, wäre ich Euch echt dankbar, falls nicht ist auch nicht so schlimm.

Eure Vorschläge habe ich soweit denke ich doch ganz gut umgesetzt: weniger Farben, die Bilderkette oben schwebt jetzt nicht mehr ganz so in Luft und sieht doch besser aus als vorher (habe überlegt einen Rahmen um die ganze Headergrafik zu machen, hat aber so noch nicht ganz geklappt) und die Schrift oben ist nicht mehr ganz so dominant, was meint Ihr?

Ansonsten ist natürlich nach Eurer generellen Meinung gefragt.

Danke und Gruss Daniel

P.S. Für die die das Favicon sehen können, was haltet Ihr davon? Kann man den Bezug zu sparc feststellen und ist es gut erkennen?

Thanks

[Andreas]

Hi,
da es mir als 2D/3Dler gar nicht zusteht, "technisch" zu meckern, aber die Grafik (Header) ist voll Spitze geworden, so meinte ich das, schön verschmolzen, 1; setzen :D , bist ja Foto- Spezialist.... Sehr schöne Übergänge, richtig jut *freu*...und "zuviele" Farben sind es eigentlich ned, das kommt immer darauf an, wohin man tendiert... mach auch gern mal monochromes, aber die Zielgruppe sind doch ältere Leute, oder...also weitermachen :D

[Daniel]

Danke für Dein Lob Andreas,

so ganz zufrieden bin ich mit den Übergängen der Bilder zwar nicht, aber das ging nicht wirklich besser mit dem Vorhandenen. Gut ich hätte noch mehr tricksen können, aber irgendwann ist auch mal Schluss, muss ja auch noch die Inhalte einfügen und das dauert und ist eine mühsame Arbeit.

Die Zielgruppe sind tatsächliche ältere Menschen, aber auch junge, dynamische Forscher.

[Daniel]

Netscape und Opera haben noch irgendwelche Probleme das Menü links korrekt darzustellen, die Hintergrundgrafik und die Hintergrundfarbe beim hover werden nicht angezeigt.

Hier mal der entsprechende Codeschnipsel:

Code: Alles auswählen

#leftnavigation ul li a {
   padding: 5px 5px 5px 35px;
   border: none;
   display: block;
   color: #F2F2F2;
   background: #0F0F6B url(silver_arrow.gif) no-repeat 5px center;
}
* html #leftnavigation ul li a {
   width: 100%;
   height: 100%;
}
#leftnavigation ul li a:hover {
   color: #142E6B;
   background: #F2F2F2 url(blue_arrow.gif) no-repeat 5px center;
}
#leftnavigation ul li a:active {
   color: #142E6B;
   background: #F2F2F2 url(blue_arrow.gif) no-repeat 15px center;
}
#leftnavigation ul li a#current {
   color: #142E6B;
   background: #F2F2F2 url(blue_arrow.gif) no-repeat 15px center;
}

So, durch Zufall bin ich jetzt auf die Problemlösung gekommen, die zwei Browser können mit der px-Angabe im Background nichts anfangen, da muss entweder left, right oder center stehen, dann wird alles bestens angezeigt.

[Daniel]

Ein User hat mir gemeldet, dass der Mac Internet Explorer wohl irgendwelche Probleme macht, hat hier jemand Zugriff auf diesen und könnte mir berichten?

Man kann die Navigation nicht benutzen, kann ich mir zwar irgendwie nicht so ganz vorstellen. Aber wäre über jede Hilfe danke!

Gruß Daniel

[Rene]

Ähm kann ich mir auch nich vorstellen den: Beim MAC gibts kein IE =)
Da gibts zum Beispiel Safari oder ähnliches.
Also wäre für mich neu

[Daniel]

Muss Dich enttäuschen Rene, aber beim Mac gibts den IE und noch so andere Sachen von Microsoft: http://www.microsoft.com/mac/

Safari gibts z.B. erst seit Mac OS X, vorher hatte Macintosh soweit ich weiss keinen eigenen Browser integriert und da kam halt der IE ins Spiel. Dieser wird aber nun nicht mehr weiterentwickelt, glaube 5.2 nochwas ist da der letzte Stand, was in etwa IE 5.5 für Windows entspricht, aber leider nur etwa.

Mittlerweile habe ich eine Freundin per Mail gebeten mal zu checken, aber diese hatte keine Probleme.

Also, wenn noch jemand das ganze auf dem Mac mal testen könnte, wäre ich demjenigen sehr verbunden.

Gruß Daniel

[Daniel]

Nach langem Testen und einiger Hilfe aus Mac only Boards hab ichs hinbekommen, dass auch Internet Explorer 5.2 Mac mit der Seite klar kommt.

Für alle die es interessiert (vielleicht auch nochmal für Google, weil ich hab da echt nichts gefunden):

Problem:
Der User konnte mit dem IE 5.2 Mac zwar auf die Links clicken, allerdings wurde er nicht weitergeleitet, sondern kam wieder zur Ursprungsseite.

IE 5.2 Mac Bug:
Der IE 5.2 Mac hat jede Menge Bugs bezüglich CSS, siehe auch:

• CSS Bugs in IE5.x Mac
• Mac IE 5 - problems with css rendering
• MacIE's Top 10 CSS Problems

Bei meinem speziellen Fall ging es jezt um die CSS-Eigenschaft float, mit der der IE 5 Mac sowieso Probleme hat, aber ganz speziell im Zusammenhang wohl mit gefloateten Bildern.

Ich habe jetzt ein zusätzliches Stylesheet für den IE 5 Mac angelegt und wie folgt nach dem Link zum eigentlich verwendeten Stylesheet eingebunden:

Code: Alles auswählen

<style type="text/css">
<!--
/*\*//*/
  @import "layout/iemac52.css";
/**/
-->
</style>


In dem Stylesheet wird die float Struktur duch position:absolute; ersetzt und die gefloateten Bilder durch display:none; ausgeschalten (sind nicht wirklich wichtig, deshalb).

Vielleicht hilfts ja irgendwem mal.

Gruß Daniel