Website-Check Nr. 2: Albra Gugga

Design

Das Farbschema besteht aus gelber Schrift auf schwarzem Hintergrund, das vom Logo abgeleitet sein dürfte. Eine Farbkombination, der wir im Guggenmusik-Webdesign noch häufiger begegnen werden …

Titel und Domain der Seite

Der Titel auf der Startseite lautet “Willkommen auf der Homepage der Albra-Gugga!”. Die Domain dazu “albragugga.de”. Interessant, dass im Title steht “Albra-Gugga”, und im Logo “Albra Gugga”. Wie ist denn nun die offizielle Schreibweise? Mit oder ohne Bindestrich? Hm …
Die Seite verwendet Frames (Header, Navigation, Inhaltsbereich). Der Titel auf den Unterseiten entspricht dann der Link-Bezeichnung (“Eindrücke”, usw). Besser wäre hier im Sinne der Suchmaschinenoptimierung “Eindrücke der Albra Gugga”, so dass in Suchmaschinenergebnissen gleich deutlich wird, wohin die Seite führt.
Durch die Frames ist es nicht möglich, eine Unterseite direkt zu verlinken (bspw. als Bookmark). Desweiteren lesen Suchmaschinen den Inhalt der Frames separat aus, so dass es möglich ist, auf eine Frame-Seite zu gelangen, ohne dass der Navigations-Frame mit angezeigt wird. Verhindert wird das auf dieser Seite durch ein JavaScript, das auf die Startseite verweist, und so den Navigations-Frame wieder mit anzeigt. Unschön, da man als Suchmaschinen-Besucher erwartet, auf der entsprechenden Suchergebnis-Seite zu landen. Aber gängige Praxis bei Seiten, die auf Frames aufgebaut sind.
Der Inhaltsbereich der Startseite ändert sich nach 60 Sekunden automatisch und man wird auf eine Unterseite “Mitglieder gesucht” weitergeleitet. Wenn man das so machen möchte, sollte man den Besucher darauf hinweisen, dass man weitergeleitet wird, weil das sonst zu Irritationen führen kann.

Logo

Das Logo besteht aus einem Kreis mit schwarzem Hintergrund und gelber Schrift, und besteht aus dem Schriftzug “Albra Gugga”, einem (selbstgezeichneten?) Bild und dem Slogan “Gugga wa’ goat”. Ebenfalls eine sehr beliebte Kombination bei Guggenmusiken.

Navigation und Link-Struktur

Die Navigation ist hinterlegt mit einem grünen Blatt und weißer Schrift. Beim aktuellen Menüpunkt ist das Blatt von einem violetten Schein umgeben.

Die Navigation der Seite gliedert sich in folgende Punkte:

• Home
• Wir
• Eindrücke
  • Repertoire
  • Sounds
• Wann und Wo
• Mitglieder
• Kontakte
• Gästebuch
• Links
• Intern
• Impressum
• Disclaimer

Werden Unterseiten aufgerufen, dann heißen die beispielsweise “eindrucke.html”, was im Sinne der Suchmaschinenoptimierung eigentlich in Ordnung ist. Dadurch, dass Frames verwendet werden, wird dieser Vorteil jedoch wieder verspielt.

Unterseite “Eindrücke”:
Verlinkt wird hier auf “Repertoire” und “Sounds”, sowie auf zahlreiche Galerien, die nach Jahren sortiert sind und mit Buttons auf unterschiedlich farbigen Hintergründen angeordnet sind. Die Farben scheinen willkürlich gewählt, passen weder zum Gelb, noch zu den verwendeten Farben in der Navigation.
Bei “Sounds” sind vier mp3s eingebettet, allerdings ist ein Quicktime-Plugin notwendig, um sie anhören zu können, da sie nicht direkt zum Download angeboten werden.

Unterseite “Wann und Wo”:
Verlinkt sind auf dieser Seite die “Fahrpläne” bis zurück ins Jahr 2002, sowie ein Kalender, der über Google eingebunden wird – ohne JavaScript jedoch zunächst nicht sichtbar ist. Auch die Meldung, dass der Kalender ohne JavaScript nicht bedient werden kann, wird nicht angezeigt.

HTML-Aufbau

Die Seite wurde mit NetOjects Fusion MX erstellt. Verwendet wird zwar eine gültige Doctype Declaration, jedoch wird leider nicht auf die Trennung von Struktur und Layout (HTML und CSS) geachtet, so dass sich im HTML zahlreiche Style-Anweisungen befinden. Neben vom W3C missbilligten Elementen wie “center” wird auch mit “clearpixel.gif” gearbeitet. Das heißt, transparente Grafiken, die dazu “missbraucht” werden, Abstände zu schaffen. Das geht mit CSS wesentlich eleganter.
Auf der Startseite wird ein JavaApplet verwendet, um einen Lauftext darzustellen. Betrachte ich die Seite mit abgeschaltetem JavaScript, wird der Lauftext nicht angezeigt. Wenn ein solcher Nachrichten-Ticker verwendet werden soll, dann wäre es besser, dafür das HTML-Element “marquee” zu verwenden, das zwar ebenfalls missbilligt wird, aber wenigstens auch bei abgeschaltetem JavaScript angezeigt wird.

CSS

Cascading Stylesheets spielen bei dieser Seite keine Rolle. Alle Angaben stehen im HTMl-Quelltext.

Linearisierbarkeit

Durch die Frames ist es nicht möglich, die Seite zu linearisieren. Somit haben Besucher, die sich die Seite auf einem Screenreader vorlesen lassen möchten, erhebliche Schwierigkeiten.

Zugänglichkeit

Die Navigationspunkte haben alternative Beschreibungen, die der Aufschrift der Grafiken entsprechen (“Wir”, “Eindrücke”, usw.). Jedoch fehlen die Alternativtexte bei den Bildern im Inhaltsbereich. So wird weder deutlich, auf welcher Unterseite sich der Besucher befindet (außer durch das umrandete Blatt in der Navigation, was aber einem Screenreader nichts nützt), noch wer der Anbieter der Seite ist, weil das Logo eben beispielsweise nicht mit der Alternative “Albra Gugga – Gugga wa’ goat” hinterlegt ist. Auch Suchmaschinen haben daran wenig Freude.

Betrachtung mit deaktiviertem JavaScript

Wie schon angesprochen, werden manche Inhalte bei abgeschaltetem JavaScript nicht dargestellt (Kalender, Lauftext). Immerhin bleibt die Navigation voll zugänglich, so dass die Seite an sich bedienbar bleibt.

Ansicht auf Netbooks

Bei der Betrachtung auf einem Netbook reicht der sichtbare Bereich bis zur Mitte des Logos und zeigt die Hälfte der Navigationspunkte an. Durch die Frames ist es notwendig, sowohl die Navigation als auch den Inhaltsbereich separat zu scrollen.

Impressum

Die Albra Gugga sind eine Gruppe der Narrenzunft Großengstingen e.V., was lediglich durch eine Grafik (ohne Alternativtext) angezeigt wird. Wobei diese Grafik an sich unnötig ist, da die verwendete Schriftart (“Comic Sans”) ohnehin auf jedem Computer dargestellt wird.
Aus dem Impressum-Text wird nicht deutlich, dass es sich um eine Gruppe dieser Narrenzunft handelt.  Empfehlenswert wäre hier, durch einen Link auf der Seite auf das Impressum des Dachvereins zu verlinken. jedoch fehlen auch dort die Angaben zum Vereinsregister, wie es für eingetragene Vereine in Deutschland nunmal vorgeschrieben ist.

Fazit

Die Internetseite der Albra Gugga informiert ausführlich über alle Belange dieser Vereinsgruppe.
Sowohl technisch als auch vom Farbschema bietet die Seite Potenzial für Verbesserungen. Beispielsweise könnte man ein Farbschema generieren, das den Farben des aktuellen Häses entspricht, was die Seite individueller und ansprechender machen würde.

Jetzt besuchen

albragugga.de

Auch wenn ein Entwickler-Kollege meinte, ich sollte nicht unbedingt meine eigene Kreation so durchleuchten, mach ich’s trotzdem, um zu testen wie das Ganze bei Euch ankommt. Euer Feedback bitte gern in die Kommentare. Danke

Website-Check Nr. 1: BGF Altenstadt

Design

Die Internetseite der BläachGuggaFätzzer Altenstadt kommt in einem dunklen Farbschema her. Der Hintergrund besteht aus einem Grauton, im Seiteninhalt kommt als zusätzliche Farbe lediglich Schwarz hinzu, bei weißer Schriftfarbe. Weitere Farben kommen über das große zufällig wechselnde Bild im Banner auf die Seite.

Titel und Domain der Seite

Der Titel der Seite entspricht dem Vereinsnamen “Guggamusik BläachGuggaFätzzer Altenstadt e.V.”. Die Domain lautet “guggamusik-altenstadt.de”. Diese beiden Elemente sind somit sehr gut aufeinander abgestimmt, was im Sinne einer Suchmaschinenoptimierung vorteilhaft ist. Neben dem Titel und der Domain sind dann natürlich die Inhalte der Seite das “Futter” für Suchmaschinen.

Logo

Das Logo der BläachGuggaFätzzer besteht aus der Lautschrift für “BGF” in weiß auf transparentem Hintergrund, und dem Vereinsnamens-Kürzel “BGF Altenstadt”, mit dem sie auch bei verschiedenen Auftritten angekündigt werden.

Navigation und Link-Struktur

Die Navigation der Seite gliedert sich in folgende Punkte:

• Verein
  • Mitglieder
  • Chronik
  • Termine
  • Impressionen
• Musik
  • Repertoire
  • Sounds
• Links
  • Guggenmusik Deutschland
  • Sonstiges
• Interaktiv
  • Gästebuch
  • Downloads
  • BGF Intim
  • Impressum

Werden Unterseiten aufgerufen, dann heißen die beispielsweise “/?page_id=3″ für “Mitglieder”. Sinnvoller im Sinne der Suchmaschinenoptimierung und Lesbarkeit wäre hier “/mitglieder”. Suchmaschinen lesen eben auch die Link-Texte aus, weshalb es vorteilhaft sein kann, im title-Text eine Beschreibung einzufügen, wenn der eigentliche Linktext nicht präzise das Ziel beschreibt.

Dies sollte bei der nächsten Überarbeitung mit berücksichtigt werden.

HTML-Aufbau

Verwendet wird XHTML 1.0 Transitional mit entsprechender Doctype Declaration. Die Forderung nach Trennung von Struktur/Inhalt und Layout wird voll erfüllt, es werden keine Stilformatierungen im HTML beschrieben. Die HTML-Struktur ist nach semantischen Gesichtspunkten aufgebaut, es kommen gut strukturierte Überschriften zum Einsatz.

CSS

Es wird verlinkt auf eine CSS-Datei für die Bildschirmdarstellung und auf eine separate Datei für den Ausdruck der Seiten, wenn auch keine Print-Angaben hinterlegt sind. Im Screen-CSS werden alle Layout-Angaben berücksichtigt, vom Aufbau der Inhaltsbereiche (Header, Navigation, Inhalt, zusätzliche Inhaltsspalte, Footer), Schriftfarben, Abstände der Elemente.

Linearisierbarkeit

Wird die Seite linearisiert und die Stylesheets deaktiviert, wird der eigentliche Aufbau der Seite ersichtlich.

Zuerst erscheint das Logo, danach die Hauptnavigation, dann die rechte Spalte, danach erst der Inhaltstext, und danach die Angaben im Footer.

Diese Reihenfolge ist nicht ideal, da nach der Navigation die Inhalte erscheinen sollte und erst danach die rechte Spalte und der Footer. Da sollte nachgearbeitet werden, damit ein besseres Ergebnis erzielt werden kann.

Zugänglichkeit

Durch die Verwendung semantisch wertvollen HTMLs und den Verzicht auf Tabellen ist die Seite sehr gut für Screenreader zugänglich. Alle wichtigen Grafiken enthalten aussagekräftige Alternativtexte. Aus der Navigation wird gut ersichtlich, wohin die einzelnen Links führen. Es fehlen Skiplinks zum Überspringen der Navigation.

Betrachtung mit deaktiviertem JavaScript

Wird die Seite mit abgeschaltetem JavaScript betrachtet, sind alle Inhalte dennoch voll zugänglich, auch die Navigation kann vollständig bedient werden.

Ansicht auf Netbooks

Die Betrachtung auf Netbooks wird hier separat berücksichtigt, da die meisten dieser “Mini-Notebooks” mit einer Monitorauflösung von 1024 x 600 Pixel arbeiten und der Internet-Browser sinnvollerweise die gesamte Fläche einnimmt.

Gegenüber der Betrachtung auf 1440 x 900 Pixel (Standard bei vielen Notebooks) ist der sichtbare Bereich deutlich eingeschränkt. Das Logo und das große Hintergrund-Bild nehmen verhältnismäß viel Platz ein. Sichtbar sind jedoch die ersten Menüpunkte, die Begrüßung, sowie der Kontakt zur Gruppe.

Impressum

In Deutschland besteht für Unternehmen und eingetragene Vereine Impressumpflicht. Auf e-recht24.de ist ein Impressum-Generator hinterlegt, bei dem man seine Angaben eintragen kann und ein fertiges Impressum erhält.

Warum ist das wichtig? Bei fehlendem oder unvollständigem Impressum kann der Betreiber einer Internetseite abgemahnt werden, sei es von “abmahnwütigen Anwälten”, die nichts besseres zu tun haben, als Internetseiten zu suchen, die sie abmahnen können, oder von anderen Vereinen oder Einrichtungen, die einem nicht wohl gesonnen sind. Eine Abmahnung hat auf jeden Fall zur Folge, dass man die Anwaltsgebühren begleichen muss, im schlimmsten Fall kann der Spaß dann bis zu 50.000 Euro kosten!! Es lohnt sich also, darüber nachzudenken, ob man lieber eine Abmahnung riskieren möchte, oder halt ein rechtssicheres Impressum erstellen lässt. Ggf nicht von einem Online-Generator, sondern von einem Fachanwalt für Internetrecht.

Die Website der BläachGuggaFätzzer Altenstadt enthält ein rechtsgültiges Impressum.

Fazit:

Die Internetseite besticht durch einen klar gegliederten Aufbau. Ungewöhnlich ist die zurückhaltende Farbgebung der Seite. Durch die Trennung von Layout und Inhalt ist die Seite sehr schlank, was in schnellen Ladezeiten resultiert. Ein paar Punkte könnten noch verbessert werden, insbesondere die Reihenfolge der Bereiche.

Jetzt besuchen

guggamusik-altenstadt.de

Persönliche Anmerkung

Die Seite der BläachGuggaFätzzer wurde von mir im Jahr 2007 neu erstellt. Mittlerweile haben sich meine Kenntnisse in der Webentwicklung stark erweitert. Ich bin zwar nicht perfekt, aber ich mache heute einige Dinge anders als 2007, arbeite mit Vorlagen von internationalen Entwicklern, die diese zur freien Verwendung ins Internet gestellt haben.

Ich habe bei meinem “Website-Check” absichtlich diese Website zuerst zur Diskussion herangezogen, weil ich damit auch zeigen möchte, dass ich an Kritik an mir selbst nicht spare. Letzten Endes ist aber jede Website verbesserungsfähig, weil es “die” perfekte Website einfach nicht gibt.

Start frei zur gemeinsamen Diskussion in den Kommentaren