Überarbeitetes Design

Lieber Vorstand, lieber Pressewart,

hiermit möchte ich euch das angedachte neue Design unserer Vereinshomepage vorstellen, das sich zu Demonstrationszwecken auf meinem eigenen Webspace befindet.
Zum jetzigen Zeitpunkt ist es in einem fortgeschrittenen Entwicklungsstadium. Das heißt, dass es noch dauern wird, bis es endgültig online gehen wird. Ich sitze schon seit langer Zeit daran und entwickle es sporadisch ‚immer mal wieder‘ etwas weiter. An dieser Situation wird sich in näherer Zukunft auch nichts ändern, da ich viel für mein Studium tun muss.
Dass der Umfang, die Vollständig- und Richtigkeit des Inhalts alles andere als gegeben ist, erklärt sich von selbst.

Motivation

Grund für diesen Schritt war viel weniger der Wunsch nach einem neuen Design (was sich von der Farbgebung und den Elementen auch kaum geändert hat), als vielmehr die Tatsache, dass unsere Homepage mit der Zeit immer komplexer wird und mehr und mehr Artikel mit Texten und Bildern und ganze Bildergalerien umfasst. Deshalb ist die Idee seit längerem über kurz oder (in diesem Fall eher) lang auf ein so genanntes ‚Content-Management-System‘ (CMS, deutsch: ‚Inhaltsverwaltungssystem‘. Eine Software zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation von Inhalten (Content) zu meist [von] Webseiten […]“, Wikipedia) umzusteigen.
Ich habe mich für WordPress entschieden. WordPress ist eine kostenlose Software zur Verwaltung der Inhalte einer Website, die auf dem Webspace installiert wird und sich einer Datenbank bedient, in der alles automatisch gespeichert wird.
So lassen sich Einträge mit Hilfe von WordPress z.B. kategorisieren oder mit Stichwörtern beschreiben.
Der Endbenutzer bekommt herzlich wenig von all diesen Vorgängen mit. Für ihn sieht diese Version der Homepage wie eine „ganz normale“ aus.

Allerdings hat er einige Vorteile:

  • Die Homepage wird dynamischer:
    • Es gibt eine Suchfunktion, mit der alle Einträge (auch Posts genannt) – sowohl Titel, als auch der Artikeltext selbst – durchsucht werden können.
    • Einträge lassen sich nach Kategorien oder Erstellungsdatum sortieren. Es gibt einen Kalender, in den automatisiert monatsweise alle veröffentlichten Posts eingetragen werden.
    • Es wird automatisch eine übersichtliche Sitemap erstellt.
  • Zukunftsweisend ist das sogenannte ‚Responsive Design‘.
    Responsive Design: Damit ist die Seite auch auf mobilen Endgeräten wie Smartphones oder Tablets vernünftig lesbar.

    Responsive Design: Damit ist die Seite auch auf mobilen Endgeräten wie Smartphones oder Tablets vernünftig lesbar.

    Hierzu ist ein spezielles Verhalten definiert, das auf verschiedene Auflösungen des Bildschirms des Endgeräts reagiert und dementsprechend die ideale Darstellung der Webseite wählt.
    Ihr könnt das ganze zu Hause auch ohne Tablet oder Smartphone simulieren, in dem ihr die Breite eures Browsers mit der Maus verkleinert.
    Je nachdem wie aktuell die Version eures Browsers ist, kommt es bei der Darstellung der Version für kleinere Auflösungen evtl. zu kleineren Darstellungsfehlern, z.B. die Möglichkeit des horizontalen Scrollen, das nicht gewollt ist. Alle mobilen Endgeräte sind aber mit so modernen Browsern ausgestattet, dass eine korrekte Darstellung gewährleistet ist.
    Bei der Darstellung auf einem handelsüblichen Computermonitor sollte hingegen keine (auch nur geringste) Fehldarstellung zu bemerken sein. Die Homepage verhält sich bei der Veränderung der Auflösung wie folgt:

    1. Stadium, Auflösungen >1180 Pixel in der Breite

    • Banner immer gleich groß
    • Menü umfasst sieben Punkte, alle nebeneinander aufgelistet
    • Es gibt zwei Seitenleisten, auch ‚Sidebars‘ gennant: Die erste beinhaltet die Wappen von Ottersberg und DKV, das Bild, das uns als aktiven Kanuverein auszeichnet und den Hinweis, dass wir keine Kanus verleihen.
      Die zweite Sidebar enthält die Suchleiste, einen Kalender mit der Anzeige des aktuellen Datums, sowie unterstrichen markierte Tage, an denen Artikel veröffentlicht wurden, alle Kategorien, in die Artikel bereits einsortiert wurden, Zugriff auf Monatsarchive, in denen alle in einem Monat veröffentlichten Artikel aufgelistet werden, Links zu Aufnahme- und Ermäßigungsantrag, zur Sitemap und zum Impressum und die Möglichkeit, sich neue Artikel via RSS-Newsfeed anzeigen zu lassen.

    2. Stadium, Auflösungen zwischen 1024 und 1179 Pixeln in der Breite

    • Lediglich der Banner wird jetzt der Bildschrimgröße angepasst, der Rest bleibt gleich.

    3. Stadium, Auflösungen zwischen 880 und 1023 Pixeln in der Breite

    • Die Schriftgröße des Menüs wird kleiner.
    • Die erste Sidebar wandert unter alle aufgelisteten Artikel, damit wird der Platz zur Darstellung des Inhalt möglichst groß gehalten.

    4. Stadium, Auflösungen zwischen 620 und 879 Pixeln in der Breite

    • Alle Menüpunkte sind jetzt untereinander angeordnet und so groß ausgeführt, dass sie auch auf einem Touchscreen mit dem Finger gut bedient werden können.
    • Die zweite Sidebar wandert ebenfalls unter alle aufgelisteten Artikel, damit wird der Platz zur Darstellung des Inhalt möglichst groß gehalten.
    • Der Rand um die eigentliche Seite verkleinert sich.

    5. Stadium, Auflösungen <620 Pixel in der Breite

    • Der Rand um die eigentliche Seite verkleinert sich weiter.
  • Der Benutzer kann unter Artikeln Kommentare hinterlassen. Diese sind optional moderierbar, so dass jeder einzelne erst freigegeben werden muss. Die Kommentarfunktion lässt sich bei Bedarf bei jeder beliebigen Seite/jedem beliebigem Artikel ausstellen.
  • In einer Übersicht über die Artikel (z.B. der Kategorien Presse oder Bilder) werden eine global einstellbare Anzahl an Artikeln chronologisch aufgelistet. Dies gilt auch für die Startseite, so dass dort immer die aktuellsten Artikel in der Reihenfolge des Veröffentlichungsdatums erscheinen. Es lässt sich ein wichtiger Artikel, etwa eine Ankündigung zur Wanderung auf den Brocken, oben halten, so dass dieser immer präsent an erster Stelle steht.
  • Der RSS-Feed sorgt dafür, dass man immer auf dem neusten Stand gehalten wird. Man kann diesen abonnieren und z.B. als dynamisches Lesezeichen speichern. So wird man immer direkt auf Änderungen auf der Homepage aufmerksam.

Nachteile

  • Leichte Geschwindigkeitseinbußen beim Laden der Seite
  • Das Fahrtenprogramm musste für das Responsive Design neu arrangiert werden, daher fehlender Wiedererkennungswert zu gedruckter Version
  • Im Moment W3C-Konformität (sauberer ‚Programmierstil‘) nicht mehr in vollem Umfang gegeben

Nun bin ich auf eure Meinung gespannt!
Wenn ihr ‚euren Senf dazugeben‘ möchtet – und darum bitte ich, nutzt doch bitte die Kommentarfunktion direkt unter dem Artikel. Dann können wir das gleich einmal ausprobieren.

Liebe Grüße
Marc