Aufwändiges Design - Private Homepage

[WhispR]

Hi liebe Community,

ich hab nun seit 2 Tagen meine private Homepage online, nun hätte ich gerne ein paar Kritiken im bezug auf den ersten Eindruck und Design...
Inhaltlich ist noch nicht so viel gemacht

Danke schonmal im Vorraus!

Jakob Sommer .de

 

[prm]

Gefällt mir gut.
CSS sehr einfallsreich eingesetzt, wirkt mal erfrischend anders als die Standard-Layouts.

 

[WhispR]

hi, danke dir

Anfangs hab ich dran gezweifelt ob meine CSS Kentnisse ausreichen, war dann aber kein großes Problem

 

[fiedel]

Die Idee und das Design gefallen mir wirklich sehr gut!
Was ich weglassen würde, ist das "Impressum"-Bildchen oben rechts. Einen Link dorthin hast du doch bereits im Footer und zum Design trägt das ja auch nicht wirklich bei.

Und semantisch ist der Code auch noch nicht optimal, denn z.B. würde ich das Logo als Grafik anzeigen lassen und die Ente in den Hintergrund stecken.

Ansonsten echt super!

 

[WhispR]

Hi, danke dir fürs Lob!

"würde ich das Logo als Grafik anzeigen lassen und die Ente in den Hintergrund stecken."

1. Ja, gute Idee!
2. Die Ente ist mein Link zum Adminbereich, von daher

 

[Atlan]

Find das auch richtig nett.

Wirkt allerdings auf einem 22" Bildschirm etwas leer im mittleren Bereich vom Header und die Lesbarkeit der Navigation ist noch nicht so gut.

Aber ansonsten ist es top!

MfG

 

[Asterixus]

Im IE6 und abwärts sieht das sehr schlecht aus. Das liegt unter anderem an den transparenten PNGs

 

[fiedel]

Im IE6 und abwärts sieht das sehr schlecht aus. Das liegt unter anderem an den transparenten PNGs

Das hab ich mir auch schon überlegt, war nur zu faul um nachzusehen, wie und ob er es geschafft hat.

Hier 2 Lösungsvorschläge:

1. Das Hintergrundbild durch eine extra CSS-Datei für den IE laden:

   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hintergrundbild.png');

2. Ein normales Hintergrundbild ohne Transparenz verwenden und dann folgende CSS(3) einbauen:

     code {
       opacity: 0.6;
     }

   bzw. für den IE:

     code {
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
         filter: alpha(opacity=60);
     }

Gruß
fiedel

 

[WhispR]

Hi, danke euch Drei!

ich teste selber auf einem 22" Monitor, und ich denke wenn ich noch mehr in den Header packen würde, wirkt das bei 17-19" sehr überladen!

Zu den Fehlern mit alten IE Versionen, danke fürs drauf aufmerksam machen, und die Lösungsvorschläge, werde mich heut Abend gleich mal dransetzen!

Bis dahin,
Jakob Sommer

 

[Loon3y]

Find ich richtig gut vom Design her, der Quelltext lässt sich aber noch ein bisschen verbessern.

z.B. hast du deinen Header mit einen <div> ausgezeichnet, dafür solltest du lieber <h1> benutzen und <center> ist nichtmehr so gängig..
Die <br> kannste auch wegbekommen indem du es via css positionierst. Und Textabsätze werden mit <p> ausgezeichnet, da fallen auch ein paar <br> weg..uuuuund die linkliste unten kannst du als liste auszeichnen mit <ul> oder <ol>. Es ist ja schließlich eine auflistung von punkten. Ebenso wie das Menu :-)

Und ich kann irgendwie die Buttons nicht so ganz lesen, also was da drauf steht. (Farbenblind)

Gruß
Loon3y

Edit: falls du mal deine Page in anderen Browsern ansehen möchtest, nutze doch mal diesen Link hier: Check Browser Compatibility, Cross Platform Browser Test - Browsershots da kannst du zich browser auswählen und es wird dir ein screenshot erstellt. somit kannst du betrachten wo etwas nicht passt.

 

[WhispR]

Vielen danke fürs drauf aufmerksam machen, habe die <br>'s entfernt, nun auch schöner im Quellcode... ist glaube ich eine Schwäche von mir, denn als ich mir mal HTML beigebraucht hab, fand ich den paragraph-Tag ziemlich überflüssig, hat ja alles auch mit den br's geklappt... aber ein bisschen codingstyle muss schon sein

Zu der Navigation komme ich gleich, du darfst dann nochmal testen

MfG
Jakob Sommer

Edit: Habe den Kontrast erhöht, die Schrift der Navigation ist jetzt schwarz, und ein wenig größer, hoffe es ist nun gut lesbar.

 

[Loon3y]

Navi ist jetzt super zu lesen :) jetzt noch dieses " style="....;" " rausnehmen und in die css auslagern und deinen header mit nen <h1> auszeichen und ein <ul> fürs menu nehmen ^^

aber sieht richtig super aus, wie schon erwähnt!

grßli
Loon3y

 

[Lenchen]

Das Design gefällt mir sehr sehr gut. Nur einen kleinen Kritikpunkt hab ich. Wenn man mit der Maus über die Ente fährt verändert sich der Cursor so dass man merkt, dass dort ein Link ist. Wenn man jetzt aus Neugierde darauf klickt, dann hat man keine möglichkeit mehr, deine Seite weiter zu betrachten, weil die Box nicht weggeht. Ich (FF 3) muss sie sogar nachdem ich den Tab mit deiner Seite geschlossen habe noch ein paar mal wegklicken, befor sie verschwindet. Ich weiß nicht, ob es eine Möglcihkeit gibt, den Cursor normal zu lassen, wenn man über diesen Link fährt aber wenn es sie gibt, dann solltest du sie nutzen :)

 

[sysop]

gefällt mir gut, endlich mal was anderes als diese geld-ververwaltuings-ges.m.b.h. designs ;)

es macht mir auf deiner seite auch nichts aus, mal ein bisschen nach links zu suchen, das layout läd geradezu dazu ein.

die navigation im content-bereich würde ich noch etwas ändern, ich finde es etwas unleserlich, man muss immer den kopf drehen zum lesen. einfach die grafiken um 90° drehen, würde glaube ich nicht stören.

sehr, sehr, nett gemacht...

 

[fiedel]

Mir ist gerade noch ein kleiner Schönheitsfehler aufgefallen, und zwar ist der onMouseOver-Effekt bei der Seitennavigation beim ersten Besuch nicht sofort abrufbar, da die Grafiken beim überfahren mit der Maus erst noch geladen werden müssen. Um das zu umgehen solltest du diese beim Laden der Seite gleich mitladen lassen.

Eine Möglichkeit wäre mit CSS, indem du einfach einen div-Container mit einer Klasse (z.B."preload") erstellst und dort die Hover-Grafiken reinpackst:

<div class="preload">
 <img src="img/navi_home2_hover.png" width="0" height="0" alt="">
 <img src="img/navi_ref2_hover.png" width="0" height="0" alt="">
 <img src="img/navi_kontakt2_hover.png" width="0" height="0" alt="">
</div>

Diesen machst du nun mit CSS unsichtbar:

.preload {
   visibility: hidden;
   height: 0; width: 0;
}

Gruß
fiedel

 

[Gelöschtes Mitglied 3007]

google mal nach PNG8 ;) alpha transparenz in allen browsern

 

[Efchen]

Anfangs hab ich dran gezweifelt ob meine CSS Kentnisse ausreichen, war dann aber kein großes Problem

Hey, rein vom Optischen finde ich die Seite total gelungen. Aber einige Kleinigkeiten schmälern diese Aussage von Dir doch etwas ;-)

1. Ab einer bestimmten Größe (beim Verkleinern des Viewports) kommen horizontale Scrollbalken, obwohl nicht ersichtlich ist, warum. Scrollt man dann nach rechts, ist da kein Inhalt und der Header hört abrupt auf.

2. Der Contentbereich vergrößert sich nicht bei Schriftvergrößerung mit.

3. Bei einer gewissen Schriftgröße geht der Inhalt aus dem Contentbereich raus. Das sieht doof aus. Bei einer bestimmten Größe schiebt sich der Inhalt sogar über das untere Menü.

4. Die Menütabs auf der linken Seite lassen sich nicht vergrößern (logisch). Das wird vielleicht dem ein oder anderen Probleme bereiten. Ich weiß auch nicht, ob der Kontrast der inaktiven Tabs ausreicht.

5. Ohne Grafiken ist die Site nahezu unbrauchbar, weil der Kontrast der schwarzen Farbe auf dem braunen Hintergrund nicht genug ist. Dein Header ist plötzlich ohne Alternativtext verschwunden, der Wurm ist offensichtlich fälschlicherweise per <img> eingebunden, obwohl er keinen Content darstellt, denn das "Wurm durch Loch" über der Überschrift liest sich doch etwas seltsam. :-) Auch unter "jakob sommer ente" kann ich mir nicht viel vorstellen.

Aber ich bin sicher, diese Dinge kriegst Du auch noch in den Griff, wer so ein gutes Design hinkriegt, der kriegt auch HTML & CSS in den Griff (ich kann es nicht sein lassen, zu kritisieren, dass der HTML-Code in Sachen Semantik noch etwas hinterher hinkt). :-)

Gruß,
-Efchen