• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ingenieurbüro Website

Naja ich mein, dass im Text si viele Zeilenumbrüche stattfinden, wenn man es zusammenschiebt.
Aber ist ja wohl irgendwo logisch ^^ Also ja, da dran lässt sich denk ich mal nichts ändern.

Ich werde jetzt wo ich schon so viel überarbeitet habe auch noch die Navigation auf CSS Basis umbauen, dann hab ich wirklich alles umgesetzt.
Ich meld mich wenn das auch durch ist ;)
 
Werbung:
Ah okay, hört sich interessant an, danke! Aber werd mich erst Mal um die Navi kümmern.
Wenn die richtig eingebettet ist und alles funktioniert, dann guck ich mir das mal an. ;)
 
Werbung:
Um ehrlich zu sein, gefällt mir das Design garnicht. Sieht zwar halbwegs seriös aus, was aber daran liegt, dass es langweilig aussieht. Man könnte fast meinen, als ob da jemand unbedingt ne Website haben wollte, und aus Kostengründen dann halt selbst mit seinem begrenzten Kenntnissen was zusammengeschustert hat. Um das ganze etwas aufzulockern würde ich dir empfehlen, anstatt dem durchgehenden blau css3 Farbverläufe (und für ältere Browser einfach Bilder) in der Navigationsleiste zu verwenden. Im Footer könntest du den gleichen Verlauf, nur um 180° gedreht verwenden.

Außerdem könntest du bei den elementen der Navileiste im :click event(?) einen box-shadow mit inset wert verwenden.

Der Bereich oben rechts ist das wo die Augen als erstes hinfallen, aus diesem Grund würde ich das Logo nach rechts verschieben. Außerdem passt das Gras überhaupt nicht zum Blau der Website.

PS: Nimm diesen Post bitte nicht all zu persönlich ;)

MfG Mindar
 
Um das ganze etwas aufzulockern würde ich dir empfehlen, anstatt dem durchgehenden blau css3 Farbverläufe (und für ältere Browser einfach Bilder) in der Navigationsleiste zu verwenden.

Das mit den Verläufen kann man mal ausprobieren, muss aber nicht unbedingt den richtigen Effekt bringen, besonders wenn man den Verlauf nicht richtig einstellt.
Das wirkt dann oft schnell eher kitschig. Ich kenne auch viele Leute die überhaupt nicht auf diese "3D Effekte" durch Verläufe auf websites stehen.
Da man für ältere Browser für die Kompatibilität eh Bilder hierfür verwenden würde kann man das CSS3 eigentlich auch weglassen.

Außerdem passt das Gras überhaupt nicht zum Blau der Website
Finde ich auch nicht unbedingt. Grün und Blau sind doch eigentlich natürlich harmonische Farben – Ein blick aus dem Fenster (grüne Bäume und blauer Himmel?).
Deshalb ist diese Farbkombination auch eine naturbezogene Farbe, das wollte mobby doch auch ein wenig in seine Website mit einbringen (weis nicht mehr in welchem Post ers erwähnt hat). Deswegen auch das Headerbild: Grünes Gras und blau-grünliches Wasser.

Der Bereich oben rechts ist das wo die Augen als erstes hinfallen, aus diesem Grund würde ich das Logo nach rechts verschieben.

Das Logo ist doch bereits rechts, oder bin ich auf der falschen Seite? Durch das nun flexible Layout bringt das Logo an der Stelle auch nicht mehr so viele Komplikationen.

Aber, seit wann fällt der Blick beim öffnen einer Website denn nach oben rechts?
Allein schon wegen der Tatsache, dass der Webuser nunmal auch ein Gewohnheitsmensch ist und sich die auf Webseiten immer wiederkehrenden sachen merkt,
wie, dass ein unterstrichener Text meistens ein Link ist und das Logo von Websites in den meisten Fällen eben oben links!

Somit fällt der Blick doch bewiesenermassen (EyeTracking?) dort hin.
 
Mindar schrieb:
Sieht zwar halbwegs seriös aus, was aber daran liegt, dass es langweilig aussieht.
Hm, also es soll ja seriös aussehen. Dies ist eine Seite von Ingenieuren für Ingenieure, das heißt es geht hier primär um den Inhalt.
Klar sollte eine ansehliche Darstellung vorhanden sein, aber ich denke, dass das doch umgesetzt wurde.
Jegliches "geschnörkel" ist auf solch einer Seite, meiner Meinung nach, völlig fehl am Platz.

Mindar schrieb:
Um das ganze etwas aufzulockern würde ich dir empfehlen, anstatt dem durchgehenden blau css3 Farbverläufe (und für ältere Browser einfach Bilder) in der Navigationsleiste zu verwenden.
Also ja sowas würde ich jetzt als "unnötiges Geschnörkel" bezeichnen, sry aber nicht mein Ding.

Mindar schrieb:
Außerdem könntest du bei den elementen der Navileiste im :click event(?) einen box-shadow mit inset wert verwenden.
Auch hier wieder die Sache, dass es einfach unnötig ist. Die Navi soll funktional und ansehbar sein und kein "Kunstwerk was blinkt und blitzt" ;)

Der Bereich oben rechts ist das wo die Augen als erstes hinfallen, aus diesem Grund würde ich das Logo nach rechts verschieben.
Das Logo ist rechts oben.

Mindar schrieb:
Außerdem passt das Gras überhaupt nicht zum Blau der Website.
Wie Marv erwähnt hat, habe ich das schon Mal angedeutet, dass ein gewisses Maß an "Umwelt" mit rüber gebracht werden soll.
Daher die Auswahl des Gras Bildes. Außerdem ganz nebenbei, Lila ist die Komplementärfarbe zu Grün und Lila ist neben/fast blau, also auch in der Hinsicht passt es eigentlich ^^

Aber trotzdem Danke für die Hinweise. Und nein, ich nehme nichts persönlich ;)
Nur momentan bin ich eigentlich ganz zufrieden. Daher bin ich auch nur noch für, mich wirklich überzeugende, Punkte zu haben ^^
 
Werbung:
Marv schrieb:
Da man für ältere Browser für die Kompatibilität eh Bilder hierfür verwenden würde kann man das CSS3 eigentlich auch weglassen.

Oder den Farbverlauf dort eben nicht rendern. Sieht dann nicht ganz so schick aus, aber ältere Browser sind eben auch nicht ganz so schick. Muss man im Zweifel abwägen, ob man da als Fallback (oder gleich generell) zwingend Bilder verwenden muss.

Ich empfinde es häufig als besser, wenn bei zentrierten Seiten mit body- und Content-Hintergrund in verschiedenen Farben eine klarere Trennung zwischen den beiden Bereichen besteht und es nicht lediglich eine Aneinanderreihung großer, einfarbiger zweidimensionaler Flächen ist.

Du kannst etwa dem eigentlichen Seitenbereich einen kleinen Rahmen oder einen dezenten Schattenwurf verpassen (mit CSS3 möglich) und/oder – wie bereits teilweise angesprochen – versuchen, für etwas Auflockerung zu sorgen, indem du etwa dem Hintergrund eine Struktur gibst oder einen nicht zu auffälligen Farbverlauf.


Das mit den Farben sehe ich auch wie Marv. Aber, gut, Farben sind immer schwierig.

Ich finde zum Beispiel die weiße Schrift der Menütexte nicht gut lesbar. Weiß als Textfarbe finde ich oft problematisch. Ich muss beim Lesen häufig die Augen zusammenkneifen, gerade dann, wenn die Restseite blendend weiß ist. Vielleicht größerer Text, vielleicht ein höherer padding-Wert… Vielleicht geht es nicht anders und es liegt hauptsächlich an meinen Augen. :)


Kann mir nur denken, dass Mindar „oben links“ meinte, was die Positionierung des Logos angeht.

Am Rande: Eyetracking Web Usability (usability findings from eye tracker research) (Frage mich aber schon, wie viel oder wenig solche Ergebnisse von der konkret betrachteten Gesamtseite abhängen.)


mobby schrieb:
Also ja sowas würde ich jetzt als "unnötiges Geschnörkel" bezeichnen, sry aber nicht mein Ding.

Vielleicht, aber achte mal drauf, wo du auf Internetseiten oder auch bei Desktopanwendungen überall ganz leichte Farbverläufe, sanft abgerundete Ecken, gehauchte (:)) Schattenwürfe und sowas in der Art findest.

Das sind Kleinigkeiten, aber Seiten, die sowas nicht haben, wirken schon manchmal so, als hätte jemand die „Texturierung“ vergessen.

Das ist keine Aussage speziell zu deiner Seite, sondern mehr ein Versuch, Mindars Argument zu verdeutlichen.

Zum Thema Farbschemas:

- [ws] Color Scheme Generator 2 (ganz witziges Tool)
- Color Trends + Palettes :: COLOURlovers (Inspiration)
 
Hallo.
Ich bin mit einigen meinen Vorposter einverstanden, die Seite sieht ganz seriös aus. Aber auch langweilig. Vielleicht wäre es nicht schlecht irgendwelche Hintergrungfarbe wählen. Auch Menü und Headerfarben passen hier nicht zusammen, obwohl sie
harmonische Farben – Ein blick aus dem Fenster (grüne Bäume und blauer Himmel) -
sind. Sie brauchen nur andere Schattierung von blau wählen, glaube ich, nicht so bunte.) Ich empfehle auch dieses Link zu besuchen: Business.
VG
 
Tut mir leid, ich hab mich mit links und rechts vertan >.< ich meinte statt rechts natürlich links.

Das mit dem Click Event und den Gradients hat nichts mit geschnörkel zu tun. Ersteres ist dazu da, um zu zeigen, das das element auch wirklich angeklickt wurde und man weitergeleitet wird. Die Verläufe sind um das ganze zu "entlangweilen" ;). Es muss ja kein Verlauf von Lila zu grün sein, sondern einfach zwischen einem helleren,blauen Farbton und einem dunkleren. Das merkt man meist nur unterbewusst, aber es sorgt für mehr Aufmerksamkeit des Users.

Auf vielen Websites werden Verläufe verwendet. Sogar hier auf html.de, ein Blick in die oberste Navigationszeile reicht.
 
Zuletzt bearbeitet:
Werbung:
Hey,

alsoooooo nachdem ich die letzen Tage viel zu tun hatte, habe ich jetzt mal einige Verbesserungsvorschläge in die Tat umgesetzt.
Die Navigation ist jetzt komplett im CSS gebaut, also keine einzige Zeile Javascript mehr :)
Außerdem habe ich der kompletten Seite eine kleine Shadow Bow mit CSS3 gegeben.

Jetzt würde ich gerne noch den Hinweis mit den dezenten Farbübergängen in z.b. den Navileisten umsetzen.
Gibt es da eine Möglichkeit, das mit CSS/CSS3 zu machen? Oder muss ich hier Photoshop zur Hand nehmen und ein Background Image einsetzen, dass nun ja einfach einen Farbverlauf hat? Ja das war meine Erste Frage.

Zweitens und sehr wichtig !!!:

Ich bin gerade in einer Bibliothek und da stehen so Mac Stand PC's ... wenn ich auf denen (mit firefox und safari) die Homepage aufrufe, dann wird mir da alles komplett zerhauen, die Absätze werden nicht eingehalten, irgendwelche Bilder haben Rahmen die sie nicht haben sollten usw.
Also das gibt mir kompletten Müll aus.

Ich hab jetzt mal zwei Bilder, wie ich das ganze im Firefox auf meinem Windows Rechner präsentiert bekomme. Nur um mal abzugleichen, ob ihr das genauso ausgegeben bekommt. Vorallem Leute mit Mac würde ich hier gerne um Hilfe/Meinungen bitten !!!!

index.jpg

Referenzen.jpg

Außerdem habe ich noch eine dritte Frage ;):
Ich habe mir überlegt einen vlt. etwas ansprechenderen Hintergrund zu wählen. Hat da vlt. jemand eine Seite wo es ganz einfache Hintergründe wie z.b. Muster/Farbverläufe/Gitte und solche Geschichten gibt?
Ich habe einfach mal via Google was ausgesucht um zu zeigen was ich in etwa meine. Denkt ihr sowas wertet es auf oder macht es eher unseriös?

index mit anderem background.jpg

Danke und Gruß,

Henrik
 
Zuletzt bearbeitet:
Um das mit den Verläufen zu machen, kannst du dir entweder eins der zigtausenden Beispiele im Internet anschauen, oder die Methode nutzen, die ich auch verwende. Ultimate CSS Gradient Generator - ColorZilla.com Einfach zu bedienen und trotzdem umfangreich. Das funktioniert bei fast allen aktuellen Browsern (mit Ausnahme des Intershit Explorers der Version 8 . Bei Browsern die diese Verläufe nicht unterstützen wird dein div einfarbig dargestellt. Falls du auch bei älteren Browsern ein Verlauf haben möchtest musst du zu Gimp/Photoshop greifen.

Zu deinem 2. Problem wäre es vlt Hilfreich wenn du einen Screenshot von den besagten Macs posten würdest.


MfG Mindar
 
Zuletzt bearbeitet:
Werbung:
Ah, ja diese Fehler. Daran kann es schon liegen. Ich überarbeite das jetzt noch Mal komplett, dass alle Code Fehler draußen sind. Dann schau ich noch mal wie es aussieht. Das mit den Farbverläufen mach ich dann danach. Ich halt euch auf dem laufenden ;)
 
Zuletzt bearbeitet:
So, jetzt müssten so ziemlich alle HTML Fehler behoben sein. Der Check gibt nichts mehr aus.
Nur noch bei manchen Seiten hat er ein Problem mit dem "&" Zeichen ... ka warum.

Ansonsten, ist alles raus.
Heute kümmer ich mich um die Farbverläufe
WAEQ+WAwyUrvWZQGRg0TwKFcFX1xYI6zWCgEJizhBlrTGi31aKAYW4YZlgW2iQCADs=
 
naja, das bild ist jetzt sehr langgezogen:
Unbenannt.jpg
ka woran es liegt. hab nichts gesehen im quelltext aber trotzdem muss da noch was geändert werden.

Wenn man bei google chrome elemt untersuchen macht und dann als attribut
style="height:200px !important;"
einfügt, ist das bild wieder normal.
 
Werbung:
ah, ja verdammt, das hatte ich vergessen.
Habs hinzugefügt.
Wird es bei euch jetzt auch prozentual mit der Höhe verändert wenn ihr das Browser Fenster kleiner macht?
Also bei mir tut es das nicht, sry für edit, aber irgendwie spinnt es manchmal direkt nach dem upload.

Wenn ich jetzt das Browserfenster kleiner mache, dann bleibt das Bild 200px hoch und wird nur in der Breite verändert.
Ich will aber, dass es prozentuall auch in der Höhe kleiner wird. ... Wenn ich das div um das Bild nur 200px hoch mache und die Höhe des Bildes auf 100% setze müsse das doch eigentlich funktionieren ...
Macht es nur aber irgendwie nicht ... :( Das div will einfach nicht kleiner gehen.
 
Zuletzt bearbeitet:
ah, ja verdammt, das hatte ich vergessen. Habs hinzugefügt. Wird es bei euch jetzt auch prozentual mit der Höhe verändert wenn ihr das Browser Fenster kleiner macht?Also bei mir tut es das nicht, sry für edit, aber irgendwie spinnt es manchmal direkt nach dem upload. Wenn ich jetzt das Browserfenster kleiner mache, dann bleibt das Bild 200px hoch und wird nur in der Breite verändert. Ich will aber, dass es prozentuall auch in der Höhe kleiner wird. ... Wenn ich das div um das Bild nur 200px hoch mache und die Höhe des Bildes auf 100% setze müsse das doch eigentlich funktionieren ... Macht es nur aber irgendwie nicht ... :( Das div will einfach nicht kleiner gehen.
wenn du das div 200px hoch machst, wird es das auch immer so bleiben. Allerdings würde ich das Bild immer gleich breit und hoch lassen sonst würde es sich ja mit dem Browserfenster "mitverzerren"; das wäre nicht gut; sonst wirst du wohl javascript nehmen müssen.ich würde das bild allerdings immer gleich hoch und breit lassen.hoffe, ich habe dich nicht missverstanden.
 
Na das verhalten von Elementen hat ja meistens einen logischen hintergrund.
Du hast deinem Bild beim Wert 200px und noch den Zusatz !important gegeben. Damit veränderst du die natürliche Wertigkeit der Style Angabe.
Jedoch liegt das Problem generell an der Angabe von dem festen Wert "200px".

Haue am beste die Angaben für Höhe des Bildes beim Stylesheet raus sowie auch im img-Tag selber die Angabe für height.
Die Div-Breite richtet sich dann, mit dem dann übrigen Code von dir, prozentual an der gesamten Seite aus, das Bild sich dann ebenfalls in der Breite am Div und durch die Veränderung an der Breite des Bildes, sollte es sich proportional verkleinern.
 
Werbung:
@Marv:

Ja, hat funktioniert. Vielen Dank. Jetzt passt es sich auch in der Höhe an.
Ein weiterer Punkt ist abgehakt, juhu.
Also bis zum nächsten ;)
 
So, habe der Navigation jetzt mal einen optisch etwas ansprechenderen Hintergrund gegeben.
Was sagt ihr dazu? Und vorallem, sollte ich die Unterpunkte beim DropDown auch mit ähnlichen Effekten bearbeiten? Oder einfach so lassen?

Nochmal für den schnelleren Zugriff: Link zur Homepage
 
Zurück
Oben