Vereinshomepage bewerten

[Holger - MV Perl]

Hallo Leute,

wende mich an Euch mit der Bitte um Kritik an meiner Seite. Ist nur eine Vereinshomepage - ich habe aber verdammt viel Arbeit reingesteckt und möchte die Seite jetzt auch weiter verbessern. Deshalb nun auch die Bitte an die Profis...  Am Anfang meiner Arbeit wusste ich noch gar nicht, was PHP und CSS ist, habe also relativ lange an der Seite rumgebastelt.

http://www.mv-perl.de

Ich bin jetzt dabei, den Quelltext nach den W3C WAI-Richtlinien zu säubern. Weniger, weil ich die Seite um jeden Preis "barrierfrei" haben will, sondern weil Cynthia und Kollegen mir dabei helfen können, alles ins Stylesheet zu packen, was ins Stylesheet gehört.

Meine Zielsetzung:
Inhalt: Präsentation eines Blasorchesters
Zielpublikum: keine Altersbeschränkung nach oben, Besucher hauptsächlich regional
Design/Layout: erträgliche Ladezeiten, einfache Navigation

Sehr geholfen bei der Arbeit hat mir der W3C-Validator: Ich habe einfach versucht, alle angezeigten Fehler zu beheben ohne mich zu fragen, ob ein Fehler nicht doch von den meisten Browsern toleriert wird. So habe ich einen validen Code hinbekommen (abgesehen vom Gästebuch, wo ich ein nicht-valides Skript eingebunden habe).

Ein Problem habe ich derzeit in IE7 für http://www.mv-perl.de/kontakt.php: Das fieldset für "Ihre Nachricht" ist in der Ecke rechts oben nicht sauber gezeichnet (in IE6 ist das ok). Hat jemand auf Anhieb einen Tipp?

Würde mich grundätzlich über jede Anregung zu dieser Seite von Euch freuen. Die Seite ist ganz "klassisch" gestaltet und statisch, also eigentlich nix aufregendes. Für mich aber doch aufregend, da ich weiter verbessern will. Ich möchte weiter am Code und an der SEO-Thematik arbeiten, deshalb bitte ich Euch um Kritiken. Danke im Voraus!

Gr Holger

[Beat]

Also mein Eindruck...

Passend.
Mit Java-Script werden zwar unvorhergesehen Features etwas aufdringlich präsentiert (Bookmarks).
Wenn ich JS abschalte funktioniert dennoch das Wesentliche.

Die Schrift ist für meinen Geschmack zu klein geraten. Hier sollte man daran denken, dass das gemischte Publikum nicht mehr die schärfsten Augen hat.
Will man die Schrift zoomen, so zeigt sich dass das layout keine Reserve hat. (vor allem Menus)

Etwas problematisch finde ich die Farbwahl bei den Links. Dunkelrot auf grau ist hart an der Grenze.

Die Hörbeispiele funktionieren gut. Etwas mickrig finde ich jedoch die Bedienung der Player.

Es scheint mir auch allgemein, dass bestimmte Linkgruppen extrem komprimiert wurden.
So Login/Gästebuch/Kontakt oben rechts,
Aber auch unten zusammen mit Impressum,
als ob man diese Links verstecken wolle.

Was es zu bemängeln gibt:
Deaktiviert man das CSS so hat man gleich vier Bilder als erstes im Code.
Hier wäre doch noch ein Hilfslink (überspringen) angebracht, oder man bindet zumindest das Logo Background über CSS ein..

Ansonsten muss ich sagen: Saubere Arbeit.

betrachtet wurde das ganze in FF2.

Die Fehlerkonsole meldet noch Fehler im CSS (lightbox.css, tablecloth.css).
Weiss nicht ob das relevant ist.

mfg Beat

[Bademeister]

Hi Holger,
da ich gerade nix anderes zu tun habe und zu faul bin, ins Bett zu gehen, hab ich mir glatt mal Deine "Seite" angeguckt:
Eins mal vorweg: dafür, dass es Dein Erstlingswerk ist, finde ich es ehrlich ziemlich gut. Aber ein paar Punkte hier mal, die mir beim ersten Stöbern aufgefallen sind:

1.: Ich habe oben "Seite" in Anführungszeichen geschrieben, in Anlehnung an Deine Umfrage über Eure Seite. Es geht aber da wohl um die Website, nicht um die Seite. Eine Website heißt im deutschen NICHT Webseite - eine Webseite ist eben nur eine "Web-Seite". Aber die Umfrage bezieht sich sicher nicht nur auf die Startseite. Also nenne es Website, wenn Du Anglizisman magst, oder anderenfalls Webpräsenz oder ähnliches, aber nicht "Seite". Das machen viele falsch, aber das ist ja kein Grund, das auch zu tun.

2.: Ich empfinde es als recht aufdringlich, dass Fotos schon beim Überfahren mit der Maus vergrößert angezeigt werden und sich dann auch noch bewegen, wenn ich die Maus weiterbewege. Ich möchte ein großes Bild nur dann sehen, wenn ich es sehen möchte, und nicht jedes Mal, wenn ich mit der Maus irgendwo über den Bilschirm fahre, um evtl. nur einen Link anzusteuern. Ich würde also gern klicken müssen, um eine Vergrößerung eines Bildes zu sehen. Und wenn ich es mir dann aber mal ansehe, wäre eine kleine Erläuterung schön. Wenn ich ein Bild von einer Person sehe, wäre es nett, in einer Bildunterschrift den Namen lesen zu können.

3.: Deine Rechterklärung bei den Links ist bei mir soooo klein, dass nicht mal ein Adler mit Lesebrille das Ding hätte lesen können. Ich hab mir erstmal den Quellcode angeguckt, um überhaupt rauszukriegen, was da stehen soll. Das kann ja nicht Sinn der Sache sein.

4.: Ich finde diese rechte Spalte irgendwie gewagt. Da wird man immer mit Nebeninformationen vollgestopft, die man gar nicht so recht einordnen kann. Auf der Home-Seite kriegt man Grüße aus Hawaii, in "Über Uns" wird aufs Gästebuch verwiesen, unter Termine kriegt man wieder die Umfrage... das finde ich völlig chaotisch irgendwie.
Da würde ich emfpehlen, knappe und INTERESSANTE Infos (zum Beispiel die nächsten Termine finde ich da gut) hinzuschreiben, die permanent zu sehen sind und nicht von Seite zu Seite scheinbar völlig willkürlich wechseln. Insbesondere Dinge, die ohnehin verlinkt sind, wie die Galerie und das Gästebuch, haben da nichts zu suchen.

Also das mal fürs erste. Der Gesamteindruck ist aber wirklich gut:
Gute Struktur, ordentlches Layout, alles in allem nicht zu viel Schnickschnack. Weiter so.

Wünsche eine gute Nacht.

viele Grüße
Der Bademeister

[bleicher]

Grüße,
alle achtung - wenn das dein anfängerversuch ist, dürftest du in absehbarer zeit zu den gurus zählen

was mich etwas verwirrt - man sprach hier von "bilderzoom" - habe ich nicht bemerkt - teste den mal in Opera - vllt habe ich den nich tgefunden, vielleicht funktioniert er aber nicht.

ich würde aber vor allem die menüfarben etwas ändern - dunkelrot auf dunkelgrau ist nicht die kontrasteichste kombi.

MFG
bleicher

[Holger - MV Perl]

Ganz herzlichen Dank für die Infos von Euch.

Über die meisten Punkte muss ich jetzt nachdenken,

Schriftgröße habe ich schonmal geändert, denn der Punkt leutet sofort ein. Ich muss mal sehen, wie sichs weiter entwickelt.

Insgesamt aber: Vielen Dank Euch für die hilfreichen Feedbacks. Ich habe jetzt einiges zum Nachdenken.

Opera: Sorry bleicher, das Script läuft nicht in Opera.

Gr Holger

[Ingo Turski]

Hi,

Schriftgröße habe ich schonmal geändert, denn der Punkt leutet sofort ein. Ich muss mal sehen, wie sichs weiter entwickelt.

auch das ändert nichts daran, dass sie für so manchen noch zu klein ist. Damit will ich nicht sagen, dass Du sie noch größer machen sollst, sondern vielmehr, dass die Navigation bei Schriftvergrößerung nicht unbenutzbar werden darf. Automatisierte Prüfungen auf Barrierefreiheit können solche Fehler natürlich nicht aufzeigen.

Apropos Barrierefreiheit: Deine Links "Weiter lesen" verstoßen gleich doppelt dagegen; die Seite wurde in der Überschrift schon verlinkt und Du verwendest mehrfach den gleichen Linktext für unterschiedliche Seiten.

Bilderzoom: ich finde sowas ja auch recht praktisch und gut, ziehe aber CSS hierzu vor und finde auch die Positionierung am Mauszeiger unpassend sowie den hierauf gesetzten (ebenfalls doppelten) Link, der nicht zu einer Bildvergrößerung führt.

Apropos Bilder: ich mag die Lightbox nicht (mehr). Anfangs war das zwar ein netter Effekt, aber er hat sich abgenutzt und Bilder wirken doch eigentlich vor neutralem Hintergrund wesentlich besser, oder? Abgesehen davon fehlt hier ohne Javascript die Navigation und mit Javascript lässt sich das angezeigte Bild nicht speichern.

Links: Eine Distanzierung ist Murks und bewirkt eigentlich sogar das Gegenteil. Du hast zwar nicht das berüchtigte Hamburger Urteil zitiert, machst aber genau denselben Fehler.

Impressum: hier fehlen die juristischen Angaben zum Verein (Amtsgericht und Register-Nr.)
Abgesehen davon erwarte ich auch die Satzung des Vereins.

Gästebuch: Die Icons zur Textgröße sind wohl ein Witz? Das Icon Drucken ohne Javascript ebenfalls. Der Link auf den nicht vorhandenen Anker "#" sowieso und die Captcha-Frage nervig.
Abgesehen davon ist diese Seite mit 195 Fehlern wirklich übel.

Und noch eine Winzigkeit: "Home" hat sich zwar ziemlich eingebürgert, passt aber nicht wirklich als Linktext in eine deutschsprachige Navigation.

Das waren jetzt nur einige negative Punkte, die mir aufgefallen waren. Abgesehen von der untauglichen Navigation finde ich die Seitern aber ziemlich gut.

freundliche Grüße
Ingo

[Jens(L.)]

Hallo Ingo,

Bilderzoom: ich finde sowas ja auch recht praktisch und gut, [ziehe aber CSS hierzu vor](http://carolinensiel-ferienwohnungen.de /Ferienwohnung_Landhaus.html) ...

Wenn Du mir jetzt noch 'nen Tipp gibst, wie ich so etwas realisieren kann, bin ich fast schon überzeugt... Ich hab mir den Quelltext Deines Links mal angeschaut und gesehen, dass das über die "class="bigger" gemacht wurde, aber das bringt mir noch nicht viel.

Apropos Bilder: ich mag die Lightbox nicht (mehr). Anfangs war das zwar ein netter Effekt, aber er hat sich abgenutzt und Bilder wirken doch eigentlich vor neutralem Hintergrund wesentlich besser, oder?

Naja, immer hin ist die Lightbox noch um Längen besser als wenn man Bilder einfach in einem <target="_blank"> vergrößern zu lassen (meine persönliche Meinung!!!) wobei ich aber auch die Argumentation mit dem deaktivierten Javascript verstehen kann...

Abgesehen davon fehlt hier ohne Javascript die Navigation und mit Javascript lässt sich das angezeigte Bild nicht speichern.

Da frage ich mich "Will man das eigentlich, dass sich die Leute einfach so die Bilder abspeichern?!"

LG
Jens

[Beat]

Da frage ich mich "Will man das eigentlich, dass sich die Leute einfach so die Bilder abspeichern?!"

Die Frage musst du, wenn du sie technisch lösen willst, überzeugend lösen.
Die einzige überzeugende Lösung ist: man stelle sie nicht ins Netz.

Ich möchte dazu einfach auch mal sagen, dass Beratungen über Technik, Code und Konzepte nur darum möglich sind, weil die Ressourcen zu eben diesem Zweck ungehindert verfügbar sind.

Ja, und es gibt Ecken, wo das speichern und bearbeiten und anschliessende Neuposten der Bilder sehr erwünscht ist. Das kann dir jeder Moba-Fan bestätigen, der über seinen Gleisplan brütet.

mfg Beat

[Peter Pan]

Hi!

Moba-Fan

Modell-Bahn?

off:PP

[Ingo Turski]

Hi,

Wenn Du mir jetzt noch 'nen Tipp gibst, wie ich so etwas realisieren kann, bin ich fast schon überzeugt... Ich hab mir den Quelltext Deines Links mal angeschaut und gesehen, dass das über die "class="bigger" gemacht wurde, aber das bringt mir noch nicht viel.

vielleicht hilft Dir dieser Tipp beim Verständnis?

Naja, immer hin ist die Lightbox noch um Längen besser als wenn man Bilder einfach in einem <target="_blank"> vergrößern zu lassen (meine persönliche Meinung!!!)

zugegeben - das ist auch keine schöne Lösung. Aber es gibt doch so viele Galeriescripte in Javascript oder PHP, die zwar nicht so effektvoll, aber mMn sinnvoller zu Werke gehen.

freundliche Grüße
Ingo

[Jens(L.)]

Hi,

Wenn Du mir jetzt noch 'nen Tipp gibst, wie ich so etwas realisieren kann, bin ich fast schon überzeugt... Ich hab mir den Quelltext Deines Links mal angeschaut und gesehen, dass das über die "class="bigger" gemacht wurde, aber das bringt mir noch nicht viel.
vielleicht hilft Dir dieser Tipp beim Verständnis?

Danke für den Link... Den Quellcode hab ich zwar verstanden, aber leider läuft das bei mir auf dem Localhost nicht :(

Also kann ich das nicht verwenden ... Problem ist folgendes: das Bild wird "normal" richtig angezeigt, aber sobald das a:hover in Kraft tritt, wird das Bild zwar (wie im CSS definiert) in den Hintergrund "verschoben", aber das eigentliche Bild, dass ich in den <a href="#wechsel"> verlinkt habe, kommt erst, wenn man auf den weißen Bereich klickt, der da kommt...

Bleibt mir (leider) im Moment nur die Lightbox... Aber ich persönlich würde das ja auch nur als "Alternative" anbieten...

LG
Jens

[Ingo Turski]

Hi,

sobald das a:hover in Kraft tritt, wird das Bild zwar (wie im CSS definiert) in den Hintergrund "verschoben", aber das eigentliche Bild, dass ich in den <a href="#wechsel"> verlinkt habe, kommt erst, wenn man auf den weißen Bereich klickt, der da kommt...

wieso verlinkt und Klick? Das Beispiel hat das img-Element im (Pseudo-)Link.

Bleibt mir (leider) im Moment nur die Lightbox...

Mir scheint, Du bist im falschen Film. Der Tipp bezog sich auf die Vergrößerung einzelner Bilder per CSS anstatt Javascript.

freundliche Grüße
Ingo

[Jens(L.)]

Hi,

Mir scheint, Du bist im falschen Film. Der Tipp bezog sich auf die Vergrößerung einzelner Bilder per CSS anstatt Javascript.

Es ist ja schön, dass Du weißt in welchem Film ich bin... Aber ich glaube, das weiß ich ganz gut ;-) ich habe das Beipiel 1:1 von der Seite kopiert (den Quellcode) und lediglich das Bild (<img>) durch ein anderes ersetzt... (Ich bin halt auch nur ein Mensch!)

Aber es ist jetzt schon spät... Ich werde mich die Tage noch einmal darum kümmern.

Bis dahin danke ich Dir noch einmal für den Hinweis. Den entsprechenden Link / Quellcode habe ich mir abgespeichert.

freundliche Grüße

Ebenfalls

Jens

[Richard]

Hallo Ingo,

[… vernichtende Kritik …]
Abgesehen von der untauglichen Navigation finde ich die Seitern aber ziemlich gut.

Wow, das kannst du aber gut verstecken. ;-)

Grüße
Richard

[at]

Hallo.

Und noch eine Winzigkeit: "Home" hat sich zwar ziemlich eingebürgert, passt aber nicht wirklich als Linktext in eine deutschsprachige Navigation.

Die Hauptnavigation benötigt eigentlich überhaupt keinen Verweis auf die Startseite, wenn, wie in diesem Fall sogar schon geschehen, der Seitenkopf oder zumindest die Hauptüberschrift der Seite auf die Startseite verweist.
So vermeidet man weitere Redundanz, spart Platz in der Navigation und gestaltet diese auch ein wenig übersichtlicher. Natürlich ist eine Kenntlichmachung des Verweises auch wünschenswert, aber nicht unbedingt notwendig, da sich die Ausführung der Hauptüberschrift als Verweis auf die Startseite inzwischen ebenfalls eingebürgert hat.
Mich stört vielmehr, dass die Navigation überhaupt so sehr auf die gesamte Seite verteilt und teilweise sogar vollständig redundant ausgelegt ist. Eine Suchfunktion hingegen fehlt völlig, und die Sitemap bildet nur noch einmal die Navigation nach.
MfG, at

[Harald_S]

Mir gefällt das Design sehr gut.
Es geht einen etwas anderen Weg. Der Menüaufbau ähnlich wie in "normaler" Software finde ich recht gut. Warum sollten Menüs in Homepages immer auf der linken Seite stehen?

[Malcolm Beck´s]

hi,

Am Anfang meiner Arbeit wusste ich noch gar nicht, was PHP und CSS ist, habe also relativ lange an der Seite rumgebastelt.

Wie lange wenn man fragen darf?

Würde mich grundätzlich über jede Anregung zu dieser Seite von Euch freuen.

Ich hab es mir zur Gewohnheit gemacht, meine Seiten in der Entwicklungsphase ohne CSS zu betrachten, erst wenn mir die Ansicht ohne Styles Gefällt, kommt das CSS an die Reihe.

Wenn du in deinem Browser[FF] die "Ansicht" -> "kein Stil" wählst (Javascript nicht deaktivieren), wirst du schnell sehen, wo die ersten Baustellen lauern.

mfg

[LarsSW]

Hey,

interessante Vorgehensweise. Könntest du mir mal den Link zu einer (etwas umfangreicheren) Seite geben, die auch ohne CSS gut strukturiert aussieht? Das würde mich mal interessieren, vielleicht mach ich das künftig auch so.

Beste Grüße
Lars

[Malcolm Beck´s]

hi,

interessante Vorgehensweise. Könntest du mir mal den Link zu einer (etwas umfangreicheren) Seite geben, die auch ohne CSS gut strukturiert aussieht? Das würde mich mal interessieren, vielleicht mach ich das künftig auch so.

Ich selbst mach das auch noch nicht allzu lange, seitdem ich dieses Faible aber habe, schau ich mir fast jede Seite mindestens einmal ohne CSS an (viele Seiten sehen übrigens _ohne_ CSS besser aus als mit :), Primär geht es bei dieser Vorgehensweise um die wichtige Reihenfolge von Webinhalten.

SELFHTML ist da schon ein ganz guter Ansatz, auch wenn es ein wenig unübersichtlich erscheinen mag, bei mehreren Hundert Seiten, die hier zu finden sind, ist die Strukturierung, wenn auch nicht Perfekt, ganz gut gelungen.

Meine Seite ist zwar vom Umfang noch minimalistisch, aber man kann sehen, was ich meine.

mfg

[bleicher]

Grüße,

Meine Seite ist zwar vom Umfang noch minimalistisch, aber man kann sehen, was ich meine.

interessant  - ich dachte bisher das man mit der platte selbst scratcht, und nicht mit einem extra schieber O_o

MFG
bleicher

[Malcolm Beck´s]

hi,

Meine Seite ist zwar vom Umfang noch minimalistisch, aber man kann sehen, was ich meine.

interessant  - ich dachte bisher das man mit der platte selbst scratcht, und nicht mit einem extra schieber O_o

Besser bekannt unter der Bezeichnung Crossfader, ohne diesen wären Scratches (bis auf 5-6 Ausnahmen) nicht hörenswert.

mfg

[LarsSW]

SELFHTML ist da schon ein ganz guter Ansatz, auch wenn es ein wenig unübersichtlich erscheinen mag, bei mehreren Hundert Seiten, die hier zu finden sind, ist die Strukturierung, wenn auch nicht Perfekt, ganz gut gelungen.

Meine Seite ist zwar vom Umfang noch minimalistisch, aber man kann sehen, was ich meine.

Hallo,

großartig! Sieht ja richtig gut aus, selbst ohne CSS ;-) Mein nächstes Projekt steht schon vor der Tür... da werde ich dann auf jedenfall drauf achten. Man lernt immer wieder dazu... :-)

Beste Grüße
Lars

[Malcolm Beck´s]

hi,

großartig! Sieht ja richtig gut aus, selbst ohne CSS ;-)

Danke :)

Man lernt immer wieder dazu... :-)

Und nie aus.

Wenn du dann noch die Semantik beachtest, hast du eine Menge SEO kostenlos mit im Paket :)

mfg