Re-Design der Immobilienschmiede

wuppl · 19. Dezember 2010 15:51

Hallo in die junge Runde,

gerne würde ich hier die Seite der www.dieImmobilienschmiede.de vorstellen. Angeregt wurde das Layout durch die Funktionen des Moduls Showtime Slideshow.
Über Rückmeldungen freut sich Frau Schumacher sicherlich, da sie selbst die meisten Ideen hatte, die wir gemeinsam umgesetzt haben.

Viel Erfolg beim Designen wünscht

wuppl

kasimir · 19. Dezember 2010 16:01

Kleiner Fehler bei der Darstellung bei mir mit Opera. Der Menüpunkt "Über uns" ist bei mir unterhalb von Home, anstatt in einer Reihe mit den anderen. Erst wenn ich auf 90 % Zoom gehe ist es richtig.

Das Design / Farbgestaltung ist recht nett, auch wenn mir persönlich die Slideshow zu dominant ist.

Kasimir

wuppl · 19. Dezember 2010 16:23

Hallo Kasimir,

danke für deine Rückmeldung. Bei mir kann ich in Opera 11 diesen Fehler nicht feststellen, habe aber trotzdem eine kleine Änderung vorgenommen, um das Problem in deinem Browser vielleicht zu lösen. Schaue gerade noch bei http://browsershots.org nach, wie die Seite in verschiedenen Browsern aussieht.

Herzliche Grüße
wuppl

kasimir · 19. Dezember 2010 16:26

wuppl schrieb:

danke für deine Rückmeldung. Bei mir kann ich in Opera 11 diesen Fehler nicht feststellen, habe aber trotzdem eine kleine Änderung vorgenommen, um das Problem in deinem Browser vielleicht zu lösen.

Jetzt sieht es bei mir gut aus.

Kasimir

wuppl · 19. Dezember 2010 16:28

kasimir schrieb:

wuppl schrieb:
danke für deine Rückmeldung. Bei mir kann ich in Opera 11 diesen Fehler nicht feststellen, habe aber trotzdem eine kleine Änderung vorgenommen, um das Problem in deinem Browser vielleicht zu lösen.
Jetzt sieht es bei mir gut aus.
Kasimir

Danke für die Rückmeldung!

wuppl

piratos · 19. Dezember 2010 17:25

Also ich muss mal schimpfen.
Leute macht die Nutzfläche nicht so mickrig.
Bei mir sieht die Site aus wie ein Klacks Web in der Mitte.
Mein Screen ist 1440 x 900 und ich habe garantiert nicht den größten Screen sondern einen stink normalen.
820 er Nutzbreite - das ist Design von vorgestern, Content auf 484 Pixel - Micky Maus lässt grüßen.
Pagespeed - das ist wohl ein Thema das nur auf dem Mars verfolgt wird.
Gewinner ist wohl der - welcher am langsamsten ist.

http://www.webpagetest.org/result/101219_5J_4DD5/

Die gewählten Farben haben Kontrastprobleme.

Also - das kann man noch besser machen.

wuppl · 19. Dezember 2010 18:56

Hallo Piratos,

danke für deine Anregungen. Die Ladezeiten habe ich durch das Verkleinern von Bildern weniger als halbiert und einige Optimierungen in den CSS werde ich noch vornehmen.

Deine Vorliebe für große Nutzflächen kann ich nicht generell teilen. Die Kundin wünscht ein recht kleines Design, weil sie auch nicht so viel Inhalt haben will. Ich habe eine Auflösung von 1680px und finde die Größe der Nutzfläche trotzdem gut.

Was du als Kontrasproblem bezeichnest, könnten andere Augen als Design wahrnehmen. wink

wuppl

dc2 · 19. Dezember 2010 19:19

Die Breite empfinde ich persönlich als sehr angenehm. Breiter macht eigentlich auch keinen Sinn, es sei denn, die zusätzliche Breite würde mit spearaten Spalte(n) "gefüllt".
Zeitungen und Magazine setzen nicht ohne Grund auf Spaltensatz - je breiter der Text, desto schlechter lesbar ist er (natürlich ab einer gewissen Mindestbreite, darunter ist auch wieder schlecht).

Du solltest auf jeden Fall die ganzen Stylesheets (vier Stück) zu einem zusammenfügen, das würde schon einmal eine enorme Menge ausmachen.
Zusätzlich sollte man vielleicht überlegen, die Bilder nicht alle gleich am Anfang zu laden (sind derzeit direkt im HTML eingebettet), sondern per JS im Hintergrund nachzuladen.

Wo wir gerade bei JS sind: die Seite sollte auch ohne normal aussehen - derzeit hat man da alle Bilder komisch gestreckt untereinander.

Von den Farben her gefällt mir das Desgin sehr gut, schön leicht und hell smile

NaN · 19. Dezember 2010 19:22

Ich hätte es vielleicht nicht ganz so ... direkt ausgedrückt, aber Piratos hat leider recht.
(Achtet bitte mehr auf das was er sagt, nicht wie wink )

piratos schrieb:

Leute macht die Nutzfläche nicht so mickrig.
Bei mir sieht die Site aus wie ein Klacks Web in der Mitte.
Mein Screen ist 1440 x 900 und ich habe garantiert nicht den größten Screen sondern einen stink normalen.

Das ist ein Problem, was bisher nur wenige erkannt haben.
Die Auflösung und auch das Format der Monitore geht eher in die Breite. Man muss sich nur die Entwicklung der letzten Jahre anschauen. Als Webdesigner sollte man darauf entsprechend reagieren. Seiten mit riesig fettem Header und einem typischen DIN A 4 Seitenverhältins haben auf Dauer verloren. Ich muss mir diese Seite nur mal auf einem Netbook anschauen... Da sehe ich außer dem Logo erstmal garnichts wink Man will nicht immer scrollen müssen, um den eigentlichen Inhalt zu sehen.

Allerdings kann man heutige Monitore auch einfach um 90° drehen wink
Ich sehe das schon seit einer geraumen Zeit in den Computer-Pools und Bibliotheken in verschiedenen Universitäten. Und auch die iPad-Freaks halten das Ding meist hochkant.

Bei der hier vorgestellten Seite finde ich, hält es sich allerdings in Grenzen. So übertrieben finde ich den Header nicht. Und dass die Seite nur eine maximale Breite von 820px hat, ist auch noch zu verkraften, da sie ja nicht sonderlich viel Inhalt hat. Wenn die Seite breiter wäre, dann wäre sie ein Klecks Web irgendwo am oberen Rand. Ich will nicht den Kopf von links nach rechts drehen müssen, um eine Zeile Text zu lesen wink

piratos schrieb:

Pagespeed - das ist wohl ein Thema das nur auf dem Mars verfolgt wird.

Dafür holst Du es ja Gott sei Dank immer wieder auf die Erde zurück wink
Stimmt aber. Die Ladezeiten sind übel. Vergiss den {stylesheet} Tag. Und vergiss vor allem, mehrere Styles vom gleichen Mediatype einzubinden. Fasse die zu einem Stylesheet zusammen. Minimiere/optimiere es (z.B. hiermit http://www.cleancss.com ) und speichere es als statische Datei auf dem Webspace. Und dann verlinke im Template direkt da drauf. Da geht dann zwar ein wenig Flexibilität im Backend verloren, aber den Geschwindigkeitsvorteil wirst Du selbst sehr gut feststellen.

Mich persönlich stört vor allem, dass sich die Höhe des Inhaltsbereiches während des Ladens ständig ändert. Das liegt daran, dass Showtime mit Javascript erzeugt wird. Der Browser weiß zum Zeitpunkt des Ladens nicht wie hoch der Bereich ist. Das weiß er erst, nachdem das Javascript ausgeführt wurde. Also würde ich das Showtime Modul an dieser Stelle eher in einen leeren Bereich packen, der genau die Maße des Flashobjekts und evtl. ein einfaches Hintergrundbild hat. Dann fällt auch nicht auf, dass da erst noch was geladen wird.

piratos schrieb:

Die gewählten Farben haben Kontrastprobleme.

Das ist eine Aussage, mit der natürlich jeder etwas anfangen kann... roll
Also ich mag dieses Grün.
Allerdings sieht es aus, als wären es drei verschiedene Grüntöne (vielleicht meint Piratos ja das damit).
Der Hintergrund, die Farben der Überschriften und das Logo.
Das wirkt natürlich unruhig.
Also entweder würde ich die Farben noch mal anpassen oder für einen eindeutigeren Unterschied sorgen.
Und das helle Grün auf weißen Grund im Footer kann man wirklich kaum noch lesen.

piratos schrieb:

Also - das kann man noch besser machen.

Richtig.
Aber ich habe die Entwicklung der Seite quasi schon seit über einem Jahr mitverfolgen können.
Und ich finde im Vergleich zu vorher hat sich schon einiges verbessert.

Tobias_Gl · 19. Dezember 2010 19:32

Nun will ich auch mal meinen Senf hinzugeben.
Ich stimme Nan vollkommen zu. Ich finde derzeit Seiten welche die Breite von 800 - 1004px haben sehr angenehm. Ich kann Sie auf meinen 22'' (Full HD Auflösung) noch einigermaßen gut ansehen und auf meinen Netbook muss ich zu mind. nicht in die Seiten scrollen.
Die Hintergrundfarbe finde ich nicht kontrastreich genug.
Nun Inhaltlich finde ich es auch recht gut gestaltet. Kurz und Knackiger Text nicht besonders lange Artikel die eh keiner List.

nhaack · 19. Dezember 2010 19:35

Hier ein vielleicht interessanter Link zum Thema Kontraste und Farbblindheit:

http://vischeck.com/vischeck/vischeckURL.php

Url eingeben und Webseite unter Farbblindheit erleben. Alternativ einfach Screenshot hochladen (da die wohl aktuell ein wenig Probleme mit JS haben). Gibt manchmal ganz nette AHA Effekte und einen Anhaltspunkt zur Farbfindung.

Bei Visibone (http://www.visibone.com/colorblind/) gibt es tolle Poster für's Büro - Quasi Color Cheat Sheets.

Grüße
Nils

neophron · 21. Dezember 2010 00:49

Hi,

ich kann mich an Fräulein Schumacher gut erinnern, auf dem ersten Foto von ihr hat sie links nach außen geschaut. Das jetzige Foto ist schon viel besser, aber es wurde mit mit etwa 35mm Brennweite aufgenommen. Versucht mal ein Portraitfoto mit mindestens 80mm und kleiner Blende = geringe Tiefenschärfe zu machen, die Frau ist doch fotogen.
So, jetzt zur Seite:
1. Warum ist das Logo im #header in ein <p></p> verpackt??
2. Das Logo würde ich mit der Startseite verlinken.
3. Es fehlen sämtliche css Anweisungen für die li.menuactive, außerdem fehlen die a:hover styles, das ist wie am Meer sitzen und kein Wellenplätschern hören.
4. Bei Verkauf und Vermietung gibt es eine Unternavigation die dann auf den Unterseiten verschwindet??? Usability stelle ich mir anders vor.
5. Den Blocksatz würde ich rausnehmen und auf text-align: left; setzen.
Es sind zu viele Löcher in dem Sätzen.
6. Keine pretty urls?
7. Bei den Referenzen würde ich die Logos der Firmen reinsetzen, ein bisschen buntes kann nicht schaden.

cheers

wuppl · 06. Januar 2011 18:14

Hi neophron,

vielen Dank für die klare und systematische Rückmeldung.
Ich bin mit allen Punkten einverstanden und habe die Punkte 1-3 und 6 berücksichtigt. Punkt 4 ist noch offen, der betrifft allerdings auch nur 2 mal 2 Seiten, daher muss die Bearbeitung noch etwas warten. Den Blocksazt (Punkt 5) möchte die Kundin gerne haben, sie bevorzugt ihn. Und die Bilder bei den Referenzen (Punkt 7) werde ich Frau Schumcher noch ans Herz legen, sie könnte dort auch noch Links zu den Unternehmen einfügen.

Vielen Dank nochmal
wuppl

neophron · 06. Januar 2011 22:19

Hi wuppl,

wenn der Blocksatz bleiben soll, dann lies mal hier:
http://code.google.com/p/hyphenator/
http://www.mnn.ch/hyph/silbentrennung1.html
http://www.der-auftritt.de/wissen/Silbe … tml#header

neophron

nhaack · 06. Januar 2011 22:51

neophron schrieb:

3. Es fehlen sämtliche css Anweisungen für die li.menuactive, außerdem fehlen die a:hover styles, das ist wie am Meer sitzen und kein Wellenplätschern hören.

Der ist gut big_smile ...

Als Geschmacksanmerkungen zur Site (der Rest wurd ja schon genannt wink ):
Ne schlankere, nicht animierte Bühne und dafür im Content ab und zu nochmal ein Bild ... vielleicht wenig mehr Platz ... 50px oder so.

Die Site finde ich aber sonst sehr gelungen. Das ist noch gutes "altes" Web big_smile . Spezifisches Thema, alles was man wissen muss. Schöne Visitenkarte. Ich mag solche Seiten ...

Grüße
Nils

Connie · 07. Januar 2011 07:09

neophron schrieb:

wenn der Blocksatz bleiben soll, dann lies mal hier:
http://code.google.com/p/hyphenator/
http://www.mnn.ch/hyph/silbentrennung1.html
http://www.der-auftritt.de/wissen/Silbe … tml#header

Neophron, du bist mir zuvorgekommen. Wenn schon Blocksatz, dann aber auch Hyphenator.
Ich setze das schon eine ganze Weile auf Wordpress-Seiten als Plugin ein und es tut den Augen (und vor allem dem Text!) gut!

Ich verstehe die Vorliebe für Blocksatz bei wenig Text nicht und habe immer schon in HTML Silbentrennung vermißt, daß das fehlte liegt wahrscheinlich an den kürzeren Worten und dem Mangel an zusammengesetzten Hauptworten der Amis...
Seiten mit agglutinierenden Sprachen (ja, ich gebe an) wie Türkisch, Finnisch oder Ungarisch etc. , wo sich ellenlange Worte durch Präfix- und Suffixkonstruktionen ergeben, sind mit Blocksatz absolut unlesbar... und häßlich auch

Auch in deutscher Sprache sollten Seiten mit Blocksatz Silben trennen, dafür gibts ja jetzt JS

Forum für CMS/made simple

#1 19. Dezember 2010 15:51

Re-Design der Immobilienschmiede

#2 19. Dezember 2010 16:01

Re: Re-Design der Immobilienschmiede

#3 19. Dezember 2010 16:23

Re: Re-Design der Immobilienschmiede

#4 19. Dezember 2010 16:26

Re: Re-Design der Immobilienschmiede

#5 19. Dezember 2010 16:28

Re: Re-Design der Immobilienschmiede

#6 19. Dezember 2010 17:25

Re: Re-Design der Immobilienschmiede

#7 19. Dezember 2010 18:56

Re: Re-Design der Immobilienschmiede

#8 19. Dezember 2010 19:19

Re: Re-Design der Immobilienschmiede

#9 19. Dezember 2010 19:22

Re: Re-Design der Immobilienschmiede

#10 19. Dezember 2010 19:32

Re: Re-Design der Immobilienschmiede

#11 19. Dezember 2010 19:35

Re: Re-Design der Immobilienschmiede

#12 21. Dezember 2010 00:49

Re: Re-Design der Immobilienschmiede

#13 06. Januar 2011 18:14

Re: Re-Design der Immobilienschmiede

#14 06. Januar 2011 22:19

Re: Re-Design der Immobilienschmiede

#15 06. Januar 2011 22:51

Re: Re-Design der Immobilienschmiede

#16 07. Januar 2011 07:09

Re: Re-Design der Immobilienschmiede

Fußzeile des Forums