winelady
Themenersteller
Kauffrau
Content Halbgott (862 Beiträge)

Ausrichtung der Webseite im Browserfenster

am 28.11.2013, 16:49 Uhr eröffnete winelady folgenden Thread
Webdesign    4172 mal gelesen    12 Antwort(en).

Hallo zusammen,

seit einiger Zeit bin ich dabei, für unsere Webseite ein neues Outfit zu stricken. Vor allem der Kopfbereich soll moderner + chicer werden. Eine noch ziemlich rohe Alphaversion findet sich hier:

www.weingut-fuchs.de/index11.php



Für die internationale Navi schwanke ich zwischen zwei Möglichkeiten, nämlich sie entweder ganz oben an den Rand des Browserfensters zu packen oder sie wie im Entwurf oben rechts neben das eigentliche Fenster zu stellen. Diese Möglichkeit finde ich übersichtlicher. Der Haken dabei ist, daß ich damit die Symmetrie aufgebe, denn rechts von der optischen Mitte ist die Sprachübersicht, links ist allenfalls das Mobilsymbol.

Da die meisten Webseiten mittig auf dem Browserfenster angelegt sind, habe ich das auch angestrebt, frage mich aber inzwischen, ob nicht eine linksbündige Ausrichtung, ggf. mit einem kleinen Abstand zum linken Fensterrand, sinnvoller wäre?

Welcher Meinung seid Ihr: unbedingt mittig ausrichten, oder vom linken Rand aus arbeiten? Und warum?

Freue mich auf Eure Meinungen,
danke + Gruß
winelady


Weinvielfalt aus dem Weingut Fuchs
Fremdsprachensatz

hansen
Foren Moderator
Content Gott (1886 Beiträge)
am 28.11.2013, 17:25 Uhr schrieb hansen

Hallo winelady,

winelady schrieb:
Für die internationale Navi schwanke ich zwischen zwei Möglichkeiten, nämlich sie entweder ganz oben an den Rand des Browserfensters zu packen oder sie wie im Entwurf oben rechts neben das eigentliche Fenster zu stellen. Diese Möglichkeit finde ich übersichtlicher. Der Haken dabei ist, daß ich damit die Symmetrie aufgebe, denn rechts von der optischen Mitte ist die Sprachübersicht, links ist allenfalls das Mobilsymbol.


Es gäbe auch noch die Möglichkeit, den Herr Fuchs etwas nach links zu schieben (schlank genug sieht er ja aus) und rechts davon die internationale Navi zu platzieren.

winelady schrieb:
Welcher Meinung seid Ihr: unbedingt mittig ausrichten, oder vom linken Rand aus arbeiten? Und warum?


Mittig - damit hat der Besucher auch mit Favoriten-Leiste die Seite mittig im vorhanden Fenster. Bei einem erzwungenen Abstand müssten Sie, je nach Breite der Favoriten-Leiste eventuell nach rechts scrollen.

Gruß
hansen


Nepal Rundreisen

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 28.11.2013, 18:17 Uhr schrieb joerg

Hallo Hildegard

Wirkt auf jeden Fall edler als das alte Design.

Die Frage die ich mir zusätzlich stelle ob statt des grauen Hintergrundes nicht besser euer Grün und sei es in transparenten Werten also als rgba Werte geeigneter wäre.

Das header Bild sehe ich als mögliche Variante an. die beiden Bilder im Wechsel per CSS Animation Deinen Schriftzug um die Linien kürzen etwas nach unten verschieben und neben das Bild.

Damit wäre links daneben noch genug Platz für die Sprachen und das mobil Symbol.
Bei dem mobil Symbol würde ich die Farben noch austauschen.

Ältere Browser die CSS Animation nicht verstehen sehen dann eben nur das eine Bild oder du müsstest mit etwas Javascript nachhelfen.

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

winelady
Kauffrau
Content Halbgott (862 Beiträge)
am 29.11.2013, 08:18 Uhr schrieb winelady

Hallo allerseits,

danke für die ersten Antworten.

@hansen:
danke, daß Du mich an den IE erinnerst, denn da ich ihn nie verwende, vergesse ich leider auch dessen Fav-Leiste.
Wenn ich unseren Boss nach links schiebe, gilt das auch für alle anderen Bilder auf anderen Seiten. Werd\'s ausprobieren.

@Jörg:
danke für Deine Ideen.
Mit den Farben spiele ich noch rum; im Moment geht es primär um die Anordnung der Elemente im Kopf, der des Kontrastes zu den Bildern wegen schwarz werden soll.
CSS-Animation? Wieder was gelernt! Muß ich 1. ausprobieren und 2. schauen, wieviele Besucher mit welchen Browsern unterwegs sind. Ab welchen Versionen funktioniert das denn? JS würde ich gerne vermeiden, allein schon weil ich keine Ahnung davon habe.
Das Mobilsymbol werde ich auf jeden Fall farblich anpassen, eventuell lasse ich das Wort "mobil" auch weg und vergrößere das Symbol etwas. Es muß links oben stehen, damit Mobilnutzer, die nicht automatisch weitergeleitet werden, es gleich finden können.

Gruß
winelady


Weinvielfalt aus dem Weingut Fuchs
Fremdsprachensatz

hansen
Foren Moderator
Content Gott (1886 Beiträge)
am 29.11.2013, 09:03 Uhr schrieb hansen


Hallo winelady,

winelady schrieb:
danke, daß Du mich an den IE erinnerst, denn da ich ihn nie verwende, vergesse ich leider auch dessen Fav-Leiste.


das ist nicht nur beim IE so, zumindest bei FF und Opera auch. Bei Safari und Chrome habe ich das noch nicht probiert.

Gruß
hansen


Nepal Rundreisen

winelady
Kauffrau
Content Halbgott (862 Beiträge)
am 29.11.2013, 10:26 Uhr schrieb winelady

Hallo zusammen,

@hansen: aha – ich nutze diese Seitenleisten nie, daher laufen sie völlig an mir vorbei… Danke für den Hinweis! Umso wichtiger, sie für die gute Darstellung im Auge zu halten.

Zur Browserkompatibilität für CSS3 habe ich eine Übersicht gefunden:

caniuse.com/css-animation


Demnach sind vor allem IE 8 und 9 problematisch, mit denen rund 500 Besucher im Monat bei uns vorbeischauen.
Ich werde eine Testseite anlegen und schauen, wie die älteren Browser sie wiedergeben und natürlich auch, wie sich die Animation optisch und auf die Ladezeit auswirkt.

Gruß
winelady


Weinvielfalt aus dem Weingut Fuchs
Fremdsprachensatz

KlausO
Avatar KlausO
Rentner
Guru (141 Beiträge)
am 29.11.2013, 11:02 Uhr schrieb KlausO

Hallo Winelady,

1. Ich finde der schwarze Hintergrund sieht hinter den Weinfotos edel aus, ich würde ihn aber bis zur schwarzen Linkleiste herunterziehen so das beide auf einer Höhe enden.
2. Bei den Links würde ich bei einer Farbe bleiben (grün), die Sprache und das Mobilsymbol also auch.
3. Der Balken rechts und links vom Schriftzug fuchs ist mir zu trennend, ich würde ihn dünner machen oder weglassen.
4. Ach ja, die Ausrichtung - für mich nur Mittig.

Viel Spaß beim Basteln

MfG KlausO


http://www.photospuren.de
Photographen + Ahnenforschung

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 29.11.2013, 17:59 Uhr schrieb joerg

Hallo Hildegard

Versuche das mal auf den body zu legen

[css]body{background: linear-gradient(rgba(0, 51, 0, 0.3), rgba(0, 51, 0, 0.7)) #000000;}[/css]

Sollte meiner Ansicht nach noch besser wirken.

Im Grunde baut man für IE8 und IE9 bevor man die CSS Animationen anwendet eh schon eine Fallbacklösung. Man sieht dann halt eben nur eines von mehreren Bildern.

Falls die PN zu den Beispielseiten nicht ankommt wegen der CSS Animationen kannst du dich ja nochmal melden.

Halbfertige Seiten möchte ich nicht offen vorstellen.

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

winelady
Kauffrau
Content Halbgott (862 Beiträge)
am 29.11.2013, 19:14 Uhr schrieb winelady

Hallo zusammen,

danke für die weiteren Kommentare und Ideen. Eine neue, leicht angepaßte Version habe ich hochgeladen. Das Mobilsymbol ist nun leicht cremefarben, aber ich überlege noch, ob ich ihm nicht die 25 Pixel Rand gönne, damit es nicht in die Adresse läuft, wenn man das Browserfenster schmaler zieht.
Hintergrund unten gefällt mir mit Grün ganz gut; es nimmt dem Schwarz-Weiß-Kontrast etwas die Härte.

@KlausO: 1 und 3 hatte ich bereits ausprobiert; gefällt mir nicht so gut. Die Links sind grün geblieben, nur etwas dunkler geworden, besuchte Links sind schon immer blau.

@Jörg: welche Farben sollten denn bei dem Verlauf rauskommen? Lokal bleibt bei mir der ganze Hintergrund schwarz…

Beispiellink ist angekommen – danke – aber diese Form des Bildwechsels wirkt auf mich zu unruhig. Hier findest Du einige Beispiele, wie mit einem fading-Effekt gearbeitet wird: css3.bradshawenterprises.com/cfimg/


Ich denke, solange so viele alt-IE-Besucher kommen, lasse ich es erst mal.

Gruß
winelady


Weinvielfalt aus dem Weingut Fuchs
Fremdsprachensatz

joerg
Avatar joerg
Fachinformatiker Anwendungsentwicklung
Content Gott (1941 Beiträge)
am 29.11.2013, 22:48 Uhr schrieb joerg

Hallo Hildegard

Sollte zumindest im Firefox vom einem dunklerem Grün nach unten einen Farbverlauf zu einem helleren Grün geben. Okay ich verzichte wohl besser darauf zu fragen in welchem Browser du testest.

Durch den schwarzen Hintergrund und den transparenten Grüntönen würde ich sagen es geht in Richtung Weinflasche.

Puh was deine Beispiele angeht ich weiss nicht ob ich das echt mit absoluter Positionierung umsetzen würde. Dann doch eher mit einer SVG wo ich 2 Bilder übereinander legen würde.
So richtig gefällt mir keine der Demos von der Umsetzung her gesehen.

Gruß
Jörg


Zufällige Umleitung zu der Startseite einer meiner Domains
Meine ungewöhnlichen Tools

winelady
Kauffrau
Content Halbgott (862 Beiträge)
am 30.11.2013, 09:34 Uhr schrieb winelady

Hallo Jörg,

joerg schrieb:
Okay ich verzichte wohl besser darauf zu fragen in welchem Browser du testest.

:mrgreen:
Aber: sobald die Seite im Prinzip steht, teste ich natürlich mit allem, was ich in die Finger kriege, sogar auf\'m PC.

Nachtrag: hab den Verlauf, auch im FF hingekriegt. Problem ist, daß die Seiten sehr unterschiedlich lang ausfallen, wodurch der Verlauf auf jeder Seite anders aussieht.

Puh was deine Beispiele angeht ich weiss nicht ob ich das echt mit absoluter Positionierung umsetzen würde. Dann doch eher mit einer SVG wo ich 2 Bilder übereinander legen würde.
So richtig gefällt mir keine der Demos von der Umsetzung her gesehen.


Hier verstehst Du mich anscheinend falsch: im Moment geht es ausschließlich (!) um die Optik, nicht um die technische Umsetzung. Die optimiere ich erst dann, wenn ich weiß, was ich optisch wirklich erreichen will.
Die neue Optik muß und soll auch nicht responsiv werden – eine eigene Mobilversion habe ich ja längst.

Gruß
winelady


Weinvielfalt aus dem Weingut Fuchs
Fremdsprachensatz



« zurück zu: Webdesign

Das Seitenreport Forum hat aktuell 5275 Themen und 36109 Beiträge.
Insgesamt sind 48343 Mitglieder registriert.