Webseitenvorstellung und zwei Fragen

[randschaefer]

Hallo selfhtmler,

ich bitte um Meinungen, Anregungen, Kritik zu meiner Website http://helpter-berge.de/fewo/, insbesondere von jenen, die andere Browser als Firefox 3.6 und IE8 zur Hand haben.

Außerdem habe ich auch gleich 2 Fragen zum verwendeten CSS:

1. Die Bilderansicht (verfügbar - wenn Javascript aktiv - durch Klick auf irgendein Foto) habe ich nur mittels eines Tricks von http://www.brunildo.org/test/shrink\_center\_4.html zentriert bekommen, der leider zwei <div>s benötigt. Die Variante mit margin: auto; bekomme ich leider noch nicht auf die Reihe, da hindert mich glaub ich meine dynamische Breite (width: 100%;). Könnt ihr mir da helfen, das etwas einfacher zu gestalten?

2. Wenn man sich die Bilderleisten (die grünen Kästen mit jeweils 3 Fotos drin) auf der Seite anguckt, stören die unterschiedlichen Höhen der Bilder etwas, momentan skaliere ich die Bilder halt nur über width: 33%;. Am liebsten wäre mir, wenn - sozusagen - die Bilder alle auf die gleiche Höhe gebracht würden, und dann solange vergrößert bzw. verkleinert, bis sie genau in die Inhalts-Breite passen - die Skalierungen natürlich alle proportional. Wie könnte man dazu vorgehen?

Einen schönen Gruß ins Web, vom randschaefer

[Joshh]

Hi,

schöne Seite, drei Sachen sind mir aufgefallen, die ich persönlich ändern würde:

• in der Navi werden besuchte Seiten anders dargestellt, aber die aktuelle Seite wird nicht besonders hervorgehoben
• E-Mail Adressen, die im Klartext auf der Seite stehen, sind beliebte Spam-Magneten
• manche Bildunterschriften klingen etwas fantasielos: "Fenster", "Schaf"...

2. Wenn man sich die Bilderleisten (die grünen Kästen mit jeweils 3 Fotos drin) auf der Seite anguckt, stören die unterschiedlichen Höhen der Bilder etwas, [...] Wie könnte man dazu vorgehen?

Wie wäre es, für die Vorschaubilder quadratische Ausschnitte von allen Bildern zu verwenden (oder querformatige Ausschnitte --> weniger Aufwand)?

Gruß,
Josh

[Alex]

Hallo,

ich bitte um Meinungen, Anregungen, Kritik zu meiner Website http://helpter-berge.de/fewo/, insbesondere von jenen, die andere Browser als Firefox 3.6 und IE8 zur Hand haben.

Also vom Browser solltest du es nicht abhängig machen - das sollte einfach mit jedem halbwegs aktuellen klappen.

Mir gefällt die Seite echt gut. Man siehst zwar, dass da kein Webdesign-Profi am Werk war, aber das muss ja nichts schlechtes sein - vor allem da es ja um einen kleinen persönlichen Bauernhof geht und nicht um ein riesiges Hotel oder sonstwas...

Drei Anmerkungen habe ich aber.

1. Mit dem Menü musst du noch was machen. Der grüne Hintergrund passt meiner Meinung nach nicht zu der schwarzen Schrift. Meine Augen irritiert das. Aus meiner Bookmark-Sammlung habe ich dir folgende Links zur Farbwahl herausgefischt:
Farbwahl
http://colorschemedesigner.com/
http://de-de.colourlovers.com/
http://gmazzocato.altervista.org/colorwheel/wheel.php
http://snook.ca/technical/colour_contrast/colour.html
Vielleicht kannst du dich ja da inspirieren lassen und das schwarz durch etwas anderes ersetzen lassen. Das grün kann denke ich bleiben.

2. Wieder das Menü: Von Joshh wurde ja schon angemerkt, dass du die aktuelle Seite kennzeichnen solltest. Ich denke du solltest das was jetzt mit den visited-Seiten passiert auf die Aktuelle anwenden und die visited im Normalzustand lassen. Vor allem in Menüs ist es sehr unüblich, dass visited-Seiten sich von anderen unterscheiden und kann meiner Meinung nach zu Verwirrungen führen.

3. (Und damit sollte sich deine 1. CSS Frage erledigt haben) Ich bin jemand der auch sehr stark zu dem SELFhtml Gedanken neigt und baue eigentlich alles selbst. Aber in diesem Fall würde ich dir zu einem fertigen Galerieskript raten. Ich selbst nutze SlideWindow 2 und kann dir das nur empfehlen. Es ist ein sehr schlankes Skript (benötigt auch keine Frameworks) und klappt gut und intuitiv. (z.B. Reagiert es auch auf Tastaturbefehle und kann mehrere Bilder durchlaufen lassen etc.)

Ausprobieren kann man es online im Blog-Eintrag der Version 1 --> hier

Bei deinem stört mich vor allem, dass ich den schließen Button ewig nicht gefunden habe, bevor ich heruntergescrollt habe und, dass es eben nicht per Tastatur oder "Klick ins Leere" zum schließen ging. Ein durchzappen durch die Bilder wäre auch sehr schön.

Zu deiner 2. CSS-Frage:

2. Wenn man sich die Bilderleisten (die grünen Kästen mit jeweils 3 Fotos drin) auf der Seite anguckt, stören die unterschiedlichen Höhen der Bilder etwas, momentan skaliere ich die Bilder halt nur über width: 33%;. Am liebsten wäre mir, wenn - sozusagen - die Bilder alle auf die gleiche Höhe gebracht würden, und dann solange vergrößert bzw. verkleinert, bis sie genau in die Inhalts-Breite passen - die Skalierungen natürlich alle proportional. Wie könnte man dazu vorgehen?

Löse das am besten nicht mit CSS sondern mit einem Bildbearbeitungsprogramm. Du hast sehr wenige Bilder, da lohnt es sich schon, diese manuell auf eine Höhe zu bringen und eventuell noch anders anzupassen.

Gruß
Alex

[Der Martin]

Hallo,

1. Die Bilderansicht (verfügbar - wenn Javascript aktiv - durch Klick auf irgendein Foto)

also nicht verfügbar. Warum verlinkst du die Bilder nicht ganz normal als Fallback-Lösung?

Davon abgesehen ...

Zwei Scrollbalken (einer für die gesamte Seite, einer für den schmalen Schlauch mit dem eigentlichen Inhalt) sind ungünstig.

Bei mir werden die Anfangsbuchstaben der Überschrift:
  Landurlaub in Mecklenburg-
  Vorpommern
durch das niedliche Schaf verdeckt, das doch besser ein Hintergrundbild wäre. Wenn man scrollt, ist es jeweils der linke Rand des Fließtextes, der verdeckt wird.

Der unnötige waagrechte Scrollbalken für den eigentlichen Inhaltsbereich ist ebenso lästig.

Ich sehe weder einen Link zum Impressum, noch zu weiteren Seiten zum Thema. Die Hauptnavigation wird erst sichtbar, wenn man unter dem Content-Bereich noch weiter nach unten scrollt. Das ist nicht schön.

So long,
 Martin

[Steel]

Moin!

Zuerstmal: Generell recht gelungen fuer diese Art Webseite.

Ich stimme zu, dass die schwarze Schrift in der Menuespalte leicht suboptimal ist. Das gilt auch fuer die Schrift auf dem Schaf. Waehrend die Schrift ueber dem Schaf noch gut lesbar ist, verschmilzt das Wort "Helpt" schon leicht mit der Textur des Schaffells. Gewoehnlich hilft bei sowas ein staerker Kontrast durch Umrandung, Schattierung, ... der Schrift. Eventuell waere hier der Text als Grafik erforderlich.

Das Schaf ueberlagert durchaus die ersten Buchstaben der Contentspalte. Diese also etwas weiter nach rechts oder mit einem etwas hoehrem linken Padding?

Bei den Bildern wuerde ich auch eine Bearbeitung der Bilder vorschlagen und keine CSS Tricks.

Martins restliche Bemerkungen kann ich (IE8, Desktop mit Fenster verschieden skaliert) nicht nachvollziehen.

[randschaefer]

Hallo,

vielen Dank für eure konstruktiven Antworten!

1.
Martin, kann es sein dass du den IE im Quirks-Modus oder in einer älteren Version benutzt hast? Die Fehler mit den Scrollbars und das verschwinden der Navigation nach unten sollten im IE7 und IE8 im Standardmodus (auszuwählen nach Druck auf F12) nicht auftreten, und ich kann sie auch nur im Quirks-Modus nachvollziehen. Ich hab mal 3 Screenshots gemacht, wie ich die Seite sehe:

http://helpter-berge.de/fewo/test/screen_20101211_1.jpg
http://helpter-berge.de/fewo/test/screen_20101211_2.jpg
http://helpter-berge.de/fewo/test/screen_20101211_3.jpg

2.

Ich sehe weder einen Link zum Impressum, noch zu weiteren Seiten zum Thema.

Reicht es nicht aus, das Impressum unter "Kontakt" zu finden?
Und was meinst du mit weiteren Seiten zum Thema?

3.
Danke für den Link zu Slidewindow2, Alex. Das werde ich benutzen, und in dem Zuge auch die Bilderverlinkung für skriptfreie Besucher ergänzen.
Ich hatte einfach nicht die richtigen Suchbegriffe für sowas gefunden, und dann entschieden, es schnell selbst zu bauen :-)
Dein Skript gefällt mir ganz gut, auch wenn es nicht perfekt ist (vergrößere mal nach dem Öffnen des "Fensters" dein Browserfenster), aber es ist halt schön schlank und einfach zu bedienen.

4.

Also vom Browser solltest du es nicht abhängig machen

Ich habe auf meinem Rechner nur Firefox 3.6 und den IE8, und wollte mit der Formulierung lediglich die Besitzer anderer Browser auffordern, mal einen Kontrollblick zu tun. In der Theorie läuft es ja (immer) überall :-)

5.

• in der Navi werden besuchte Seiten anders dargestellt, aber die aktuelle Seite wird nicht besonders hervorgehoben

1. Mit dem Menü musst du noch was machen. Der grüne Hintergrund passt meiner Meinung nach nicht zu der schwarzen Schrift.

Ich habe genau das jetzt gemacht. Meint ihr, der Kontrast der Menüpunkte ist jetzt annehmbar? Bei Überschrift hinter dem Schaf muss ich nochmal gucken, ich hab einige Farben durchprobiert, aber Schwarz ist noch am besten lesbar. Da werde ich mal den Text ins Bild integrieren und gucken, wie es aussieht mit Schatten, Schriftumrahmung o.Ä.

6.

Bei den Bildern wuerde ich auch eine Bearbeitung der Bilder vorschlagen und keine CSS Tricks.

Schade, ich hatte mir zwar schon gedacht dass es nicht geht, aber mit der leisen Hoffnung, irgendjemand hat tief in irgendeiner Schublade noch die Patentlösung für dergleichen. Naja, dann werde ich das wohl so machen, und gleich noch Thumbnails erzeugen.

7.

Das Schaf ueberlagert durchaus die ersten Buchstaben der Contentspalte

Das ist durchaus so beabsichtigt. Meiner Meinung nach verleiht das den ganzen rechteckigen Kästen auf der Seite ein bisschen Leben. Und mit ein bisschen Scrollen sieht man den Text ja auch wieder, oder seht ihr das anders?

8.

• E-Mail Adressen, die im Klartext auf der Seite stehen, sind beliebte Spam-Magneten

Wie intelligent sind heutige Adressjäger denn? Hat meine billigst-Variante, die Sonderzeichen zu kodieren, da Chancen?

Einen schönen Gruß vom randschaefer

[Der Martin]

Hi,

Martin, kann es sein dass du den IE im Quirks-Modus oder in einer älteren Version benutzt hast?

nenenee, der IE ist in diesem Fall richtig unkompliziert; sogar der alte IE5.5 zeigt's einigermaßen ordentlich an. Die beschriebene Problematik tritt in einem alten Opera (8.54) auf. Der scheint mit dem Floating ein Problem zu haben und setzt die Navigation unter den eigentlichen Content. Die zwei getrennten Scrollbalken sind dann vermutlich nur ein Folgeeffekt.
Opera 10.6 macht's richtig; den 9er habe ich leider nicht mehr zur Hand, kann darüber also keine Aussge treffen.

http://helpter-berge.de/fewo/test/screen_20101211_1.jpg
http://helpter-berge.de/fewo/test/screen_20101211_2.jpg
http://helpter-berge.de/fewo/test/screen_20101211_3.jpg

Wow, dein Browserfenster ist ja riesig ...

Ich sehe weder einen Link zum Impressum, noch zu weiteren Seiten zum Thema.
Reicht es nicht aus, das Impressum unter "Kontakt" zu finden?

Doch, schon.

Und was meinst du mit weiteren Seiten zum Thema?

Lies weiter: "Die Hauptnavigation wird erst sichtbar, wenn man unter dem Content-Bereich noch weiter nach unten scrollt." Ich wollte nur darauf hinaus, dass ich beim Seitenaufruf keine Navigation sah, sondern sie erst nach relativ langem Scrollen am unteren Seitenrand finde.
Dass das in aktuellen Browsern offensichtlich kein Thema mehr ist, steht auf einem anderen Blatt.

1. Mit dem Menü musst du noch was machen. Der grüne Hintergrund passt meiner Meinung nach nicht zu der schwarzen Schrift.
   Ich habe genau das jetzt gemacht. Meint ihr, der Kontrast der Menüpunkte ist jetzt annehmbar?

Ja, aber ich würde die Schrift beim aktiven Menüpunkt heller machen, so dass sie sich besser vom dunkelgrünen Hintergrund abhebt (außerdem muss der nicht verlinkt sein).

Das Schaf ueberlagert durchaus die ersten Buchstaben der Contentspalte
Das ist durchaus so beabsichtigt. Meiner Meinung nach verleiht das den ganzen rechteckigen Kästen auf der Seite ein bisschen Leben. Und mit ein bisschen Scrollen sieht man den Text ja auch wieder, oder seht ihr das anders?

Kann man so sehen; ich fänd's trotzdem besser, wenn die Schrift im Vordergrund stünde und die Nase des Schafs überlagert - nicht umgekehrt.

• E-Mail Adressen, die im Klartext auf der Seite stehen, sind beliebte Spam-Magneten
  Wie intelligent sind heutige Adressjäger denn? Hat meine billigst-Variante, die Sonderzeichen zu kodieren, da Chancen?

Erstens: Ich hab den Eindruck, die Zeiten sind lange vorbei, dass SPAM-Bots Webseiten nach Mailadressen durchsucht haben; heutzutage kriegt man die auf viel subtilere Weise. Zweitens: Die URL-Codierung gehört zu den Grundanforderungen an einen HTTP-Client, die sollte für einen Bot praktisch Klartext sein.

Noch zum Inhalt:

Stadtmenschen können wunderbar entspannen ...

Wen bezeichnest du hier als Stadtmenschen? Ich verstehe darunter solche wie mich, die sich nur in der Stadt richtig wohlfühlen, und denen draußen auf dem Land die nicht vorhandene Decke auf den Kopf fällt. Ich kann diese eher ruhige, ländliche Umgebung zwar ein paar Stunden genießen, aber spätestens nach einem Tag fehlt mir einfach was, bzw. geht mir die Flora und Fauna, die ich zum Großteil als schmutzig und/oder unangenehm empfinde, auf die Nerven. Daher weckt der zitierte Satz bei mir einen gewissen inneren Widerspruch.

Schönen Sonntag noch,
 Martin

[Steel]

Moin!

http://helpter-berge.de/fewo/test/screen_20101211_1.jpg
http://helpter-berge.de/fewo/test/screen_20101211_2.jpg
http://helpter-berge.de/fewo/test/screen_20101211_3.jpg

Wow, dein Browserfenster ist ja riesig ...

Kleiner als meines im Augenblick (kein Vollbild).

[Matthias Apsel]

Om nah hoo pez nyeetz, Steel!

Kleiner als meines im Augenblick (kein Vollbild).

Vergesst Chuck Norris ... SCNR;

Matthias

[Steel]

Moin moin!

Kleiner als meines im Augenblick (kein Vollbild).

Vergesst Chuck Norris ... SCNR;

Dass Martin noch mit 14" und 800x600 unterwegs ist, glaub ich ja, aber sonst sind die meisten doch wohl schon bei HD angelangt.

Allerdings wird es immer schwieriger seine alten kleinen Roehren noch zu benutzen, jetzt, da der VGA-Anschluss offiziell ausstirbt. Naja. 5 Jahre ham wa noch.

[Der Martin]

Hallo,

Kleiner als meines im Augenblick (kein Vollbild).
Vergesst Chuck Norris ... SCNR;
Dass Martin noch mit 14" und 800x600 unterwegs ist, glaub ich ja

Tatsächlich? Ich nicht. Mindestens 1280x1024, gern auch 1400x1050 sollten's schon sein. Allerdings bedingen diese Auflösungen leider eine Mindestgröße im 19"-Bereich. Ich habe vor einiger Zeit mal ein TFT mit 1600x1200 bei 19" gesehen - das wäre mein Traum gewesen. War allerdings sündhaft teuer, darum hab ich's doch sein lassen ...
Aber die Größe des Browserfensters, die ja bekanntlich nichts mit der Bildschirmgröße und -auflösung zu tun hat, könnte etwa in diese Größenordnung fallen. Tatsächlich sind's meist so etwa 1000x800. Vollbild nur im Ausnahmefall.

aber sonst sind die meisten doch wohl schon bei HD angelangt.

Aber doch nicht, um dann doch wieder die Programmfenster im Vollbildmodus zu haben - vom fiesen Breitbildformat der meisten neueren Monitore ganz abgesehen, von denen man viele nicht einmal hochkant drehen kann, weil sie weder Pivot noch VESA-Halterung haben.

Allerdings wird es immer schwieriger seine alten kleinen Roehren noch zu benutzen, jetzt, da der VGA-Anschluss offiziell ausstirbt.

Ach ja? Zugunsten welcher Alternative? DVI vermutlich?

Naja. 5 Jahre ham wa noch.

Mehr. Da bin ich ziemlich sicher. 5 Jahre wäre ja schon die durchschnittliche Lebensdauer *eines* PCs oder Monitors, und solche Mutationen brauchen meist zwei bis drei Generationen, bis sie sich wirklich durchgesetzt haben. ;-)

Ciao,
 Martin

[Vinzenz Mai]

Hallo,

Aber doch nicht, um dann doch wieder die Programmfenster im Vollbildmodus zu haben - vom fiesen Breitbildformat der meisten neueren Monitore ganz abgesehen,

ich finde das Breitbildformat gut. Zwei Fenster überlappungsfrei nebeneinander.

Allerdings wird es immer schwieriger seine alten kleinen Roehren noch zu benutzen, jetzt, da der VGA-Anschluss offiziell ausstirbt.

Ach ja? Zugunsten welcher Alternative? DVI vermutlich?

Ich vermute, Steel meint DisplayPort.

Freundliche Grüße

Vinzenz

[Steel]

Moinsen!

Aber doch nicht, um dann doch wieder die Programmfenster im Vollbildmodus zu haben - vom fiesen Breitbildformat der meisten neueren Monitore ganz abgesehen,

Ich erwaente ja auch, dass mein Fenster nciht im Vollbildmodus lief. Trotzdem passte der Screen komplett in mein Browserfenster. Auch wenn ich normalerweise ein etwas kleineres Fenster benutze.

ich finde das Breitbildformat gut. Zwei Fenster überlappungsfrei nebeneinander.

Ich hab mich mittlerweile auch mit Breitbild angefreundet.

Allerdings wird es immer schwieriger seine alten kleinen Roehren noch zu benutzen, jetzt, da der VGA-Anschluss offiziell ausstirbt.

Ach ja? Zugunsten welcher Alternative? DVI vermutlich?

Nein. DVI soll auch sterben. Analog ist quasi Geschichte.

Ich vermute, Steel meint DisplayPort.

Korrekt.

http://www.heise.de/newsticker/meldung/VGA-Buchse-zum-Aussterben-verurteilt-1151036.html

Soweit ich weiss, hat sich nvidia immer noch nicht dazu geaeussert. Mal sehen. Grad der Einwand mit Industrie und Konfrenzraeumen ist nicht uninteressant.

[Der Martin]

Hallo,

ich finde das Breitbildformat gut. Zwei Fenster überlappungsfrei nebeneinander.
Ich hab mich mittlerweile auch mit Breitbild angefreundet.

ich finde es akzeptabel, wenn man es ins Hochformat kippt. Sonst ist es für mich eher ein Ärgernis, im besten Fall ist es "egal", einen Vorteil sehe ich darin aber nicht.

Allerdings wird es immer schwieriger seine alten kleinen Roehren noch zu benutzen, jetzt, da der VGA-Anschluss offiziell ausstirbt.
Ach ja? Zugunsten welcher Alternative? DVI vermutlich?
Nein. DVI soll auch sterben. Analog ist quasi Geschichte.

Ähm, Moment - DVI ist im Grunde genommen eine digitale Schnittstelle (DVI-D). Den analogen Modus (DVI-A) schleppt man ja nur der Kompatibilität halber mit, kann ihn aber auch weglassen.

Ich vermute, Steel meint DisplayPort.
Korrekt.

Ach du Scheiße, schon wieder was Neues ... :-(

Ciao,
 Martin

[Vinzenz Mai]

Hallo,

vorweg: mir gefallen die Seiten insgesamt sehr gut.

• in der Navi werden besuchte Seiten anders dargestellt, aber die aktuelle Seite wird nicht besonders hervorgehoben

1. Mit dem Menü musst du noch was machen. Der grüne Hintergrund passt meiner Meinung nach nicht zu der schwarzen Schrift.
   Ich habe genau das jetzt gemacht. Meint ihr, der Kontrast der Menüpunkte ist jetzt annehmbar?

es ist ein Fortschritt, dass besuchte Menüpunkte nicht mehr anders dargestellt werden als noch unbesuchte. Es ist stets eine gute Idee, den aktuellen Menüpunkt *nicht* mit einem Link zu versehen (denn man ist ja gerade da). Der Kontrast zwischen der Schrift und der Hintergrundfarbe im Menü ist meiner Meinung nach immer noch zu schwach.

Bei den Bildern wuerde ich auch eine Bearbeitung der Bilder vorschlagen und keine CSS Tricks.
[...] Naja, dann werde ich das wohl so machen, und gleich noch Thumbnails erzeugen.

sowas geht mit IrfanView ganz fix.

Das Schaf ueberlagert durchaus die ersten Buchstaben der Contentspalte
Das ist durchaus so beabsichtigt. Meiner Meinung nach verleiht das den ganzen rechteckigen Kästen auf der Seite ein bisschen Leben. Und mit ein bisschen Scrollen sieht man den Text ja auch wieder, oder seht ihr das anders?

das Herausragen aus der Navigationsspalte ist auf jeden Fall eine gute Idee. Wie die anderen bin ich der Ansicht, dass das Schaf nicht die Überschrift überlagern sollte. Einfach dem Inhaltsbereich mehr Padding geben.

Freundliche Grüße

Vinzenz