Feedback für unsere Webseite

[Speedy.]

Hallo zusammen

ich bin Mitglied in einem ortsansässigen Club und schreibe in meiner Freizeit ganz gerne Webseiten. Nun habe ich für unseren Club eine Webseite entworfen und in Code umgewandelt -inzwischen mit vielen Verbesserungen. Der Link ist http://leo-club-weilamrhein.de.

Ich möchte nun einmal von euch eine ehrliche und neutrale Meinung zu dem Konzept, der Umsetzung und dem Inhalt (sachlich, informativ, seriös?) hören. Ich bin für kritische und sachliche Meinungen offen und werde diese, sofern sie nützlich und sinnvoll sind, umsetzen. In meiner direkten Umgebung ernte ich nur positive Stimmen zu der Seite, aber hier im Forum sitzen die Fachleute

Was ich in nächster Zukunft noch vor habe:

- Fehlerbehebung (es gibt da ein paar offene Posten)
- Bessere Umsetzung für Mobile Devices wie Tablets oder Smartphones mit CSS Media Queries implementieren
- Eine Timeline für alle Berichte (nicht wie in Facebook!)
- verbesserte HTML5 - Nutzung

Was sagt ihr also dazu?

Viele Grüße
Speedy.

 

[selsen]

Die Weiterlesen Buttons finde ich etwas zu groß. Ansonsten prima gemacht.
Gruß Selsen

 

[Multivitamin]

bevor ich mich irgendwelchen designfragen zuwende würde ich erstmal die ganzen rechtschreibfehler korrigieren.

 

[El_Sheepy]

Ich würde die Untermenus in blau anstatt grau machen. Das Peppt das ganze wohl etwas auf.

Ansonsten sieht die seite schon recht ordentlich aus. Auf der Startseite könntest du den Banner "Miteinander statt Gegeneinander" noch farblich hinterlegen, evtl. mit einem Bild, dann sieht das ganze etwas strukturierender und freundlicher aus. So ist das zu viel weiß ^^

Und sehe ich das am Code richtig. Du hast ne wirklich echte HTML Seite ohne PHP dahinter gebaut?
Man, wann hab ich sowas zuletzt gesehen, und ich verdien mir damit mein Geld

 

[Kappoggo]

Ich finde die Seite sehr gut.
Modernes und funktionales Design.

Außerdem finde ich es super das ihr euch sozial engagiert.
Weiter so!


2-3 Bilder ließen sich nicht vergrößern. Das ist soweit das einzige was mir aufgefallen ist.
Auch finde ich es nicht schlecht wenn man vergrößerte Bilder auch durch klicken ins Bild wieder schließen kann und nicht nur durchs X. Aber das ist natürlich nur ne Kleinigkeit

 

[micha-ilm]

Gutes Design, übersichtlich und ansprechend.
Sehr gutes CSS, großer Pluspunkt für die schönen CSS-Ribbons

Kleine Kritik:
- betrachte die Seite mal mit verschiedenen Monitoren, die Schrift wirkt teilweise ein bisschen zu hell => ermüdet beim lesen
- den Platz zwischen Menü und Content finde ich zu groß

Ansonsten super gemacht, sauberes HTML & CSS.

 

[Yuuri]

1. Auf der Startseite sind zu viele weiße Flecken (Grundsätze, Geschichten), die würde ich noch ausbessern.
2. Die Buttons unter den Texten würde ich zentrieren (für den Fall "Wer sind Wir?") und den Weiterlesen Button rechtsbündig setzen.
3. Bei den Aktionen teilst du Bild und Text lieber in zwei Hälften, lässt nur den Text scrollen und das Bild auf einer fixen Position. Evtl. wäre dort auch ein jQuery Slider o.ä. von Vorteil, da die Seite doch sehr lang ist und man so alles kompakter gestalten könnte. Außerdem peppen Animationen und Interaktion alles ein wenig auf und es wirkt "freundlicher" für mich.
4. Über uns - siehe oben. Evtl. zweispaltig machen, jeweils Bild links/Text rechts und Text links/Bild rechts. Macht alles kompakter und man muss nich lange scrollen. Außerdem verschwinden so die großen grauen Flächen. Evtl. noch Kategorisieren falls sinnvoll und möglich? Gäbe ein bisschen mehr Überblick.
5. Über uns - Was ist Leo? und allgemein: arbeite am besten mit Zeilenabständen (line-height 1.5 bis 2em meine Empfehlung) in Paragraphen. Momentan sieht es ein wenig zusammengequetscht aus.
6. Übersicht - Aktionen/Über uns: Schrift ein wenig dicker/größer machen in den Boxen, weiß auf grau, inkl. Drop Shadow ist ein wenig schlecht lesbar.

Sonst passt alles wunderbar. Design ist klar strukturiert und übersichtlich, man findet sich sofort zurecht.

 

[Daaron]

Gefällt mir sehr gut. Seit LANGEM die erste Seite, bei der der W3C-Validator nicht Zeter und Mordio schreit.
Das einzige, was ich ändern würde: ne etwas peppigere Font für die Überschrift auf der Startseite. Ich würd die Schriftgröße soweit senken, dass "Miteinander statt Gegeneinander" auf eine Zeile passen, evtl. auch per CSS den Umbruch vermeiden.

Ist das eigentlich irgend ein CMS, n eigenes Server-Script oder reines HTML?
Kleines Manko in der Semantik grad noch gefunden: "<section id="wrapper" class="cAlign">" hier wäre evtl. ein <div> die korrektere Wahl, da der Wrapper wohl kaum eine Sektion innerhalb des Textes darstellt. Evtl. könntest du die einzelnen inhaltlichen Sektionen noch in einen gemeinsamen <article> bündeln.


P.S.: Jetzt frag ich mich wohl den Rest des Tages, in welchem meiner Projekte ich "Yanone Kaffeesatz" verwendet hab oder verwenden wollte...

 

[Yuuri]

@ Daaron: Yanone Kaffeesatz? -> http://designyoutrust.com/wp-content/uploads7/lastnight_detail_dyt.jpg

 

[Speedy.]

Wow, danke für die ganzen positiven und ehrlichen Antworten !!

@ selsen

Ich werde mir die Buttons mal in einer kleineren Version erstellen und anschauen. Ich denke aber, du hast recht, sie sind echt sehr groß.

@ Multivitamin

Wo sind denn Rechtschreibfehler? Als Author der meisten Texte verbürge ich mich dafür, dass sie weitestgehend fehlerfrei sein sollten, sie wurde oftmals korrekturgelesen. Kannst du mir ein paar Stellen zeigen?

@ El_Sheepy

Meinst du diese grauen Kacheln bei Aktionen und Über uns? Wenn ja - da hatte ich sowieso etwas anderes geplant. Wegen "Miteinander statt Gegeneinander" werde ich mal ein paar Tests machen, ich stehe nur eben auf viel Weiß und viel Freiraum^^
Ich werde deinen Ratschlag aber berücksichtigen.
Die Seite Über Uns / Mitglieder ist in PHP, da dort eine Datenbankabfrage vorkommt. Ein paar Funktionen für das Formular und das Loginsystem sind in PHP, aber der rest ist handgeschriebenes HTML und CSS

@ Kappoggo

Ein paar Bilder sind einfach auch nur sehr klein, da kann ich nichts machen. Das ärgert mich auch, ich will die bald ersetzen. Nun, dass mit dem Schließen bei Klick auf das Bild finde ich eine gute Idee.

@ micha-ilm

OK, dann werde ich mal die Schriftfarbe auf #333 verdunkeln, habe gerade #555 in Verwendung (glaube ich). Den Platz zwischen Nav und Content werde ich mal testweise verringern.

@ Yuuri

Was meinst du mit weißen Flecken? Zu viel Platz?
Ich werde die Buttons heute Abend mal bearbeiten, wie schon ein anderer Poster vorgschlagen hat.
Ansonsten werde ich mir deine ganzen Vorschläge zuhause mal im Detail ansehen, habe auf Arbeit gerade nicht die Zeit dafür^^ Danke aber schonmal, klingt alles sehr sinnvoll.

@ Daaron

Dann wird heute Abend mal die Schriftgröße verringert. Und Google Webfont bietet ja viele tolle Schriftarten, da werde ich mich mal umsehen. Eher eine Serifenschrift oder im Stil von Open Sans?
Und nein, dass ist kein CMS, selbst geschriebenes HTML und CSS. Mitglieder.php baut eine Datenbankverbindung auf, um die Mitglieder anzuzeigen, ansonsten war's das mit Skripten. Ich arbeite gerade an einem eigenen Loginsystem, da kommt dann viel PHP und JS ins Spiel.
Den Bereich mit Section hatte ich anfangs auch als div, aber in einem Anfall von HTML5-Geilheit habe ich vieles umgeschrieben^^ Werde das wieder korrigieren.

Danke nochmal für das Feedback

 

[Yuuri]

Was meinst du mit weißen Flecken? Zu viel Platz?

boxen.png, box-bg.png: Schrift ist recht dünn und schlecht lesbar
letzte-aktionen.png: Weiterlesen Button rechts
platz.png, platz2.png: freie Flecken
platz3.png: zweispaltig, freie Fläche siehe Haus vom Nikolaus
zentriert.png: siehst du ja

 

[Speedy.]

Das mit dem zweispaltigen Layout gefällt mir richtig gut. Ich denke, dass werde ich als eines der ersten Sachen umsetzen.
Zu den weißen Flecken: ich habe eine Abneigung gegen Webseiten, wo alles dicht gedrängt und stark zusammengerückt ist. Ich bin ein freiheitsliebender Mensch und das spiegelt sich auch in diesem Design wieder. Ich habe absichtlich viel freien Platz gelassen, um einen optisch lockeren und leichten Eindruck zu vermitteln. Der Besucher soll nicht mit Inhalt erschlagen werden, wenn er die Seite aufruft. Dennoch kann ich deinen Einwand gut nachvollziehen. Mal sehen, was sich da machen lässt.

Zu den Boxen bei "Über Uns" und "Aktionen": mich stören die auch etwas - ich suche da nach Ideen, wie man das besser machen kann. Nur bin ich schrecklich unkreativ, mir fällt da einfach keine Lösung ein. Hat da jemand Rat?

 

[Yuuri]

Es passt nur nicht zum Gesamtbild der Seite. Du hast überall Content, warum lässt du es auf ein Mal dort frei? Es reicht ja auch schon ein große Facebook und Vimeo Button, das füllt es ja schon. Das würde mir auch ausreißen, hauptsache es ist nicht leer. Bei den Grundsätzen wüsste ich aber nicht, was man dort machen könnte. Evtl. mehr Punkte anführen und wieder zweispaltig fahren.

Btw: Inländer und Ausländer - Einheimmische passt besser.

 

[Daaron]

Eingeborene?

 

[Yuuri]

Aborigines? Naja, ich kenne niemanden der Inländer sagt.

 

[Speedy.]

Schwierige Frage...
Ich finde, Inländer und Ausländer klingt besser als Einheimische und Ausländer
Ich muss mich da mit ein paar Leuten zusammensetzen, denn diese "Mottos" kann ich nicht ohne weiteres ändern. Die wurden damals beschlossen und sind wie in Stein gemeißelt. Ich bin schon lange dran, aus "Begegnungen mit behinderten Menschen" den Spruch "Begegnungen mit Menschen mit Behinderung" zu machen. Sehr schwierig bei uns.

Übrigens werde ich mich heute Abend daransetzen, die vorgeschlagenen Änderungen umzusetzen.

 

[Daaron]

Wie wärs mit "Einheimische" und "Immigranten"?
Im Endeffekt formulierst du es eh falsch, egal wie du es machst. Wo willst du zwischen Ausländer udn Nicht-Ausländer die Grenze ziehen? Geht eigentlich nur bei dem, was im Pass steht.

 

[Speedy.]

So, ich habe nun, nachdem ich gestern mein Notebook mit Linux installiert habe, heute Zeit für Änderungen gefunden. Hier mal eine Übersicht:

• Neue Schriftart bei "Miteinander statt Gegeneinander"
• viewport-Metatag hinzugefügt
• Schriftfarbe verdunkelt
• <section id="wrapper"> durch <div id="wrapper"> ersetzt
• fancybox-Styles in style.css eingefügt, um HTTP-Requests und Ladezeit zu sparen
• Neue Seitentitel
• Buttons verkleinert, die Weiterlesen-Buttons sind nun rechtsbündig
• line-height erhöht
• Und mehr...

Ich werde Schritt für Schritt die Vorschläge von Yuuri umsetzen. Das dauert aber etwas Zeit. Hier nochmal der Link zur Nachverfolgung: http://leo-club-weilamrhein.de
Hat derweil jemand eine Idee, wie man die beiden Seiten "Über uns" und "Aktionen" besser gestalten kann? Ich will die grauen Boxen loswerden...

 

[Daaron]

Im Zweifel: Bau ein Accordion für die Unterseiten. Pack alle Unterpunkte in eine Datei. Das erhöht zwar etwas die Ladezeit, aber wird leichter zu verwalten und gibt n hübschen Effekt.

http://mootools.net/demos/?demo=Accordion <- Sowas mein ich.

 

[Speedy.]

Ein Accordion ist fest geplant, nur nicht für diese Seiten, sondern für die vier "Aktionenseiten" wie Kinder, Begegnungen etc. Ich bin aber noch nicht im klaren, welche Technik zum Einsatz kommt (geplant ist eine reine CSS-Umsetzung mit Transitions, sieht im IE zwar etwas doof aus, aber was solls).

Für die grauen Boxen plane ich einen anderen, komplizierten Ersatz mit etwas Effektspielerei. Wenn möglich, wieder mit reinem CSS
Aber sowas wie dein Vorschlag kommt schon hin.