Dafür, dass es kostenlose npage-Seiten sind, sind die beiden Websites eigentlich ganz OK. Ich weiß ja nicht, wie flexibel npage in der Gestaltung ist, aber diese Tipps lassen sich bestimmt umsetzen:

  • Reduziere die Navigationsspalte auf nicht mehr als sechs Links, momentan ist die Liste vollkommen unübersichtlich
  • Um die Links so drastisch zu reduzieren, musst Du ähnliche Seiten zusammenfügen. Beispielsweise braucht "Anfahrt" weiß Gott keine eigene Unterseite. Stattdessen kann die Karte auch direkt in die Kontakt-Seite integriert werden.
  • Die Links in der Navigationsspalte müssen größer sein
  • Entferne die Punkte vor den Navigationslinks und entferne auch die Unterstreichung. Für den Nutzer sollten es keine normalen Links sein, sondern klar erkennbare "Orientierungspunkte".
  • Lass den blauen Hintergrund weg, der einfach gar nicht zu der grünen Kopfleiste passt. Um die Navigationsspalte auch ohne Hintergrund optisch abzuheben, kannst Du die Links farbig (aber dezent!) hinterlegen und/oder umrahmen.
  • Der Hintergrund der Seite sollte weiß sein. Schwarz ist nur ein guter Kontrast für Fotos. Bei Text allerdings strengt es die Augen mit der Zeit an.
  • Das Bild in der Kopfleiste kann weg, da es erstens belanglos ist und zweitens aufgrund der Tatsache, dass es ein Foto ist, nicht als Gestaltungselement dienen kann; dazu fällt es zu sehr ins Auge. Mein Tipp: wenn Du das Bild behalten willst, dann mache es mit einem Bildbearbeitungsprogramm absichtlich unscharf. Das ist zum einen ein schöner Effekt und zum anderen hebt es die Überschrift hervor, die eigentlich anstatt des Fotos dem Besucher ins Auge fallen sollte.
  • Das Vereinswappen ist rund, nicht wahr? Es hat aber einen sehr unschönen weißen Rand. Bei einem schwarzen Hintergrund musst Du die rechteckige Umrandung des Wappens entfernen und transparent machen, sodass es auch wirklich rund aussieht. Die leichtere Variante wäre, wie schon vorher vorgeschlagen, den gesamten Hintergrund der Seite weiß zu machen, was Du sowieso tun solltest. Dadurch wirkt das Wappen rund und das hässliche weiße Rechteck stört nicht mehr
  • Das Wappen muss in die Kopfleiste neben die Überschrift, da es den Verein symbolisiert und deswegen besonders wichtig ist (sein sollte).
  • "Klicken Sie auf das Vereinswappen und gelangen Sie direkt auf die Facebookseite des Vereins!" - niemand kommt von allein auf die Idee, auf ein Wappen zu klicken, um auf eine Facebook-Seite zu gelangen. Statt des Hinweises, auf das Wappen zu klicken, füge einfach einen Link, am besten mit Facebook-Logo, ein. Dadurch weiß der Nutzer sofort, was gemeint ist. Noch besser ist es natürlich, gleich den Facebook Gefällt mir-Knopf einzubinden.
  • Oh je... die Vereinsgeschichte. Bestimmt ganz interessant, wenn man denn Lust hätte, sie zu lesen! Besonders bei der Schriftart fehlen mir die Worte (das gilt auch für alle anderen Unterseiten, die in dieser Schriftart gehalten sind). Es tun einem regelrecht die Augen weh, wenn man auch nur versucht, diesen viel zu langen Text zu lesen. Ein weiteres Problem ist, dass man erwartet unter dem Punkt Vereinsgeschichte eine Zusammenfassung wichtiger und interessanter Ereignisse in der Geschichte des Vereins zu finden. Stattdessen ist der Text aber so lang, dass einem schon im Voraus die Lust vergeht. Mein Tipp wäre, wie schon geschrieben, eine kurze, prägnante Zusammenfassung wichtiger Ereignisse anzuzeigen und den langen Text zwar nicht ganz zu entfernen, aber am Ende der Seite zu verlinken für Besucher, die mehr über den Verein erfahren wollen.
  • Nun zur Sitemap: erschlagend! Abgesehen davon, dass die Seite sowieso viel zu viele Unterseiten hat, bietet die Sitemap absolut keine Orientierung, was sie eigentlich sollte. Auch ist keine Hierarchie der Seiten erkennbar. Und ganz ehrlich: die Spalte "Anzahl Wörter" - wen interessiert´s?!
  • Das Impressum kann übrigens zu einer Abmahnung führen. Zwar ist es vorhanden und auch vollkommen korrekt (dank Impressumgenerator, wie mir scheint), allerdings sind Haftungsausschluss und Datenschutzerklärung auf ein und derselben Seite und genau das ist der Fehler. Laut aktueller Rechtsprechung müssen Impressum, Hauftungsausschluss und Datenschutzerklärung auf separaten Seiten aufzufinden sein. Desweiteren ist die Datenschutzerklärung unvollständig, da nicht alle Komponenten der Seite, die Nutzerdaten sammlen, aufgezählt sind, wie z.B. das Kontaktformular. Eine nach EU-Recht geltende Datenschutzerklärung bekommt man hier: https://www.iubenda.com/

Alle Tipps gelten im Großen und Ganzen für beide Websites.

Ich hoffe, geholfen zu haben und würde mich freuen, wenn meine Ratschläge umgesetzt werden.

Ich habe meiner Antwort zwei Bilder angehängt, um zu zeigen, wie die Vereinswebsite aussehen könnte.

...zur Antwort

Respekt... Es gibt kaum Menschen, die sich gegen eine Behandlung entscheiden.

...zur Antwort

Tut mir leid, aber ich hab noch nie so gelacht! Insofern deine Seite schon online ist, muss sie erst mal von einem Crawler gefunden und in den Suchindex aufgenommen werden. Das kann man nicht wirklich beeinflussen, aber beschleunigen:

  • google.com/webmasters/tools/home?hl=de
  • bing.com/toolbox/webmaster

Ich glaube es hat keinen Sinn, dich jetzt lang und breit über SEO aufzuklären, das würde viel zu lange dauern. Stattdessen ein paar Artikel, die du auf jeden Fall lesen solltest:

  • de.wikipedia.org/wiki/Suchmaschine
  • Sehr gut: static.googleusercontent.com/media/www.google.de/de/de/webmasters/docs/einfuehrung-in-suchmaschinenoptimierung.pdf
  • de.slideshare.net/matterne/seo-grundlagen-14811004
  • webdesign.tutsplus.com/series/seo-fundamentals-for-web-designers--webdesign-9715
...zur Antwort

So etwas sollte man folgendermaßen lösen:

link rel="alternate" media="only screen and (max-width: 480px)" href="home480.html"

Zusätzlich zu diesem Code solltest du folgendes in den head-Bereich einfügen:

link rel="canonical" href="home.html"

Dadurch wissen Suchmaschinen, was die "eigentliche" Seite ist, denn die Mobilversion sollte ja nicht unbedingt zusätzlich zur normalen Version in der Suche auftauchen.

Hier eine komplette Anleitung: developers.google.com/webmasters/smartphone-sites/feature-phones?hl=de

Meine zweite Frage: Welche Einheit ist die Screen-Breite 480? In Pixel kann sie ja nicht sein [...]

Doch, es sind Pixel, aber keine "physischen". Hier mehr dazu: conversionscouts.de/methoden-tipps-loesungen/css-pixel-bild-pixel-und-device-pixel-optimierung-fur-retina-co

Und hier eine Liste bekannter Auflösungen: http://dpi.lv/

Hoffe, dir geholfen zu haben :-)

...zur Antwort

Es ist eigentlich relativ einfach, HTML, CSS und Javascript zu lernen. Ich würde dir dazu die (e)Bücher vom Smashing Magazine empfehlen, sowie folgende Blogs:

  • smashingmagazine.com
  • css-tricks.com
  • tympanus.net/codrops
  • elmastudio.de

Ich habe mir HTML und grundlegendes CSS mit einem Buch von Christoph Prevezanos beigebracht. Weiterführende Techniken habe ich durch Ausprobieren verschiedener Anleitungen gelernt. Vieles kommt mit der Zeit, aber bei den Grundlagen sollte man sich schon richtig reinhängen, um einen guten Start zu haben.

Und was war die größte Herausforderung?

Ich denke die größte Herausforderung ist immer die möglichst perfekte Planung einer Website. Die meisten Menschen denken, man bräuchte nur einen billigen Homepage-Baukasten und ruck zuck ist die Website fertig. Das ist aber ein verhängnisvolles Irrtum. Im Wort Webdesign steckt nämlich "Design". Design bezeichnet nicht nur das Aussehen (welches mit irgendwelchen kostenlosen Programmen etc. hässlich wird), sondern auch die Funktionsweise. Die Planung darf also ohne weiteres viel Zeit in Anspruch nehmen, man muss schließlich bedenken, dass die Website letztendlich von Menschen und keinen IT-Experten benutzt werden soll. Mit anderen Worten: es ist das Schwierigste, aus etwas so abstraktem wie der Webentwicklung ein ansprechendes Produkt entstehen zu lassen, das normale Menschen verstehen und ohne Probleme nutzen können.

Eine weitere Herausforderung ist es, immer auf dem aktuellen Stand der Technik zu bleiben. Viele empfehlen komplett veraltete Seiten wie selfhtml usw, die sich alle um HTML 4 statt 5 drehen. Ein guter Tip ist die Seite http://webtoolsweekly.com/, dort wird ein Newsletter angeboten, der dich wöchentlich mit Neuigkeiten rund ums Webdesign versorgt.

...zur Antwort

Toll... da schreibt man eine Antwort mit über 2000 Zeichen, klickt aus Versehen auf einen Link und Zack, die Antwort ist weg. Vielen herzallerliebsten Dank an Gutefrage!

Also fasse ich meine Antwort eben kurz: Nein, Zyoge, es ist nicht im geringsten egal welche Elemente man für was verwendet. Und an den Fragesteller: eine Umfrage an eine solche Frage von rein technischer Natur anzuhängen führt zu nichts (siehe Antworten, alles grausam falsch). Ariadar, du hast doch schon die Definition vom W3C gelesen (Achtung: da hat sich mittlerweile einiges geändert!), also warum fragst du dann die Gutefrage-Nutzer, die anscheinend keine Ahnung haben? Das einzig kompetente Forum in Sachen Webentwicklung ist stackoverflow. Ich empfehle dir, die Spezifikationen vom W3C durchzulesen und NUR DARAUF BASIEREND deine Seiten zu erstellen. Außerdem zu empfehlen wäre html5doctor und dieser Artikel: http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/

...zur Antwort