Die Website vom Gymnasium Glinde

I. Ziele: Was soll die neue Website leisten?

Ziel ist neben guter Lesbarkeit und klarer Struktur ein responsives Design: die Anpassung an Mobilgeräte wie Smartphones und Tablet-Computer.

Achtung: Veraltete Browser stellen zeitgemäße Webseiten teils nicht richtig dar, auch wenn die Website selbst korrekt programmiert ist! Jeder Browser stellt andere Anforderungen. Die Browserkompatibilität der Website soll geprüft werden, aber realistisch betrachtet, lässt sich die Optimierung einer Website an alle Browser kaum bewältigen. Z.B. an veraltete Versionen von Internet Explorer.

Die Schulhomepage dient zur Selbstdarstellung der Schule und informiert Schüler/-innen sowie Eltern über aktuelle Themen und Ereignisse. Gleichzeitig sollen die interessierte Öffentlichkeit und Kooperationspartner erfahren, was unsere Schule im Besonderen ausmacht.

• Die Schulhomepage als Präsentation der Institution Schule: Sie enthält Daten über die Schule (Adresse, Schulprogramm etc.).
• Die Schulhomepage als Informations- und Kommunikationsmedium für SchülerInnen, Lehrkräfte und Eltern.

II. Die Zielgruppen der Website:

Primär interessierte Eltern von Schülern oder von potenziellen Schülern, die Schülerinnen und Schüler der Schule, Ehemalige, interessierte Außenstehende, Angehörige der Kinder und Nachbarn der Schule, die Lehrkräfte der Schule. Darüber hinaus die Öffentlichkeit.

⇒ Die Texte auf einer Schulhomepage richten sich an unterschiedliche Zielgruppen.
Deshalb sollten Optik und sprachlicher Tonfall möglichst eine Mischung aus seriös, schülernah und sympathisch erwirken. Nicht zu „schulintern“ oder zu viel Fachsprache.

Die Texte auf der neuen Homepage sollen kompakt, konkret und zielgruppengerecht sein. Ausführliche Informationen werden nun auf mehr Texteinheiten verteilt (Weiterlesen Link; Button-System). Anschauliche Formulierungen sollen zur Verständlichkeit beitragen.

III. Die Technik:

Der Web-Relaunch war alleine schon aus technischen Gründen notwendig. Die bisherige Homepage hatte kein responsives Design und wurde der Darstellung auf Smartphones oder Tablets nicht mehr ausreichend gerecht. Mit dem neuen Content-Management-System von WordPress ist die Website nun technisch auf dem aktuellen Stand.

Es ist Standard, dass Schulhomepages mit einem Content-Management-System (CMS) betrieben werden. Voraussetzung ist die Auswahl, Installation und Anpassung eines geeigneten CMS. Das haben wir mit der freien Software WordPress eingerichtet. WordPress bietet den Vorteil, dass Inhalte in relativ einfacher Weise und ohne besondere Kenntnisse über den Umgang mit einer Textverarbeitung hinaus eingegeben werden können. Zudem können verschiedene Lehrkräfte, Eltern sowie Schülerinnen und Schüler über unterschiedliche Zugänge mitarbeiten (Rollenverteilungen als Administrator, Redakteur, Autor).

Die Technik-Gruppe erhielt in der Entwicklungsphase der Website Einblicke in die Installation von WordPress auf der Basis einer PHP- und MySQL-Plattform und beteiligte sich an der technischen Anpassung der Software als CMS. Hierbei kamen auch zusätzliche Plugins und zusätzliche CSS ins Spiel. Mittlerweile können sich technikinteressierte Schüler*innen mehr auf sinnvolle Verlinkungen und interessante neue Plugins konzentrieren, da Design und Layout der Homepage mittlerweile festgelegt sind, arbeiten wir im Moment nicht mit CSS.

In der Layout-Gruppe spielen Sinn für Ästhetik, Farben, Formen und Design eine große Rolle. Hier lernt man, Bilder zu optimieren und hochzuladen, das Design der Seite nach visuell-gestalterischen Gesichtspunkten zu optimieren, die Vereinheitlichung und Zusammenstellung von Farben, Schriften und Bildelementen.

Die dritte Gruppe bildet unser Redaktionsteam und ist geeignet für journalistisch Ambitionierte und alle, die Spaß am Schreiben haben. Hier lernt man Genauigkeit bei der Recherche, kreatives Texten für Online-Seiten, Interviewtechniken und Aspekte, die beim Redigieren von Beiträgen wichtig sind.

IV. Design und Layout:

In Absprache mit Eltern, Schülern und der Schulleitung wurden Farben, Schriftgröße, Typografie und einzelne Layout-Elemente festgelegt, möglichst passend zum Bild der Schule.

Bevor direkt ein vollständiges Layout erstellt wird, sollten die Grundelemente, die sich regelmäßig wiederholen, festgelegt werden – zum Beispiel der

1. Header mit Slider. Hauptnavigation horizontal oben
2. Buttons zur Darstellung von Beiträgen und Themen
3. Sidebars rechts
4. Footer → Impressum, Datenschutzerklärung und Kooperationspartner auf jeder Seite sichtbar.

5. Hover Effekt: Wenn Sie zum Beispiel mit der Maus über die Verlinkung fahren, oder über einen Menüpunkt in der Hauptnavigation, erscheint ein Unterstrich. Dieser Hover-Effekt soll dem Internet-Nutzer zeigen, dass der Internet-Nutzer die Verlinkung anklicken kann. Der Hover-Effekt macht eine Webseite für die Internet-Nutzer interessanter, denn er kann mit seiner Maus verschiedene Hover-Effekte auslösen und mehr entdecken.

In WordPress wurde von uns das Theme Costumizr als Design-Grundlage ausgewählt und bearbeitet (es ist für mehr als 100.000 aktive Websites auf der ganzen Welt installiert ). Viele individuelle Anpassungen sind mit Hilfe von u.a. Plugins oder zusätzlichen CSS umgesetzt worden.

Die Struktur der Webseiten:

Statische Seiten: feste, bleibende Informationen über die Institution Schule.

Beispiel: Unsere Schule; Fächer.

Beiträge: wechseln, können aktualisiert und intern verlinkt werden. Neuigkeiten, Aktuelles, Wissenswertes rund um das Schulleben.

Beispiel: Einladung zum Tag der offenen Tür.

Die Startseite ist übersichtlich gestaltet, bunt und lebendig. Große Fotos, aktuelle Nachrichten und wichtige Informationen prägen das Bild.

V. Menüs und statische Seiten:

Seitenaufbau, Menüführung, Fotos und Texte wurden mit Blick auf die heutigen Bedürfnisse hin überarbeitet. Mit der neuen horizontalen Hauptnavigation sehen die Homepage-Benutzer gleich, an welcher Stelle der Website sie sich gerade befinden (Hover Effekt auf Menüpunkten). Die Hauptnavigation listet alle wichtigen Menüpunkte zum Anklicken auf und strukturiert sie nach Ebenen (1-3) auf der Website. Es wird deutlich, welche Seite auf welcher Unterebene angeordnet ist – > es gibt maximal drei Unterebenen zur besseren Übersichtlichkeit.

Immer mit im Bild ist eine feststehende Kopfzeile mit dem Logo der Schule, die ein schnelles Zurückspringen auf die Startseite leicht macht. Um die Orientierung zu erleichtern, wurden zudem die Suchfunktionen auf der Startseite integriert. Wer ein bestimmtes Thema oder eine Person sucht, erhält jetzt über eine freie Suche entsprechende Hinweise auf den Suchbegriff.

Die Sidebar und dynamische Beitragsseiten:

Die Sidebars (vertikal rechts) und ihre Widgets (Kategorien; Neueste Beiträge) erlauben es, der Seite mehr Individualität zu geben sowie vielfältige und aktuelle Infos unterzubringen. Die News-Sidebar bringt eine Übersicht neuester Beiträge in den Vordergrund. Die Kategorien ermöglichen es, bestimmte Schwerpunkte auf einen Blick anzuklicken.

VI. Abschluss

Mit der Projektübergabe ist allerdings noch lange nicht alles getan, oft sind noch Wochen, Monate nach dem Relaunch kleine Nacharbeiten fällig. Eine ständige Aktualisierung und Pflege ist der Seiten und Beiträge nötig – z.B. ein Update des Themes, Plugins aktualisieren, die Kompatibilität mit dem Server prüfen, Schnittstellen mit anderen Seiten und Verlinkungen checken…. Viele Beteiligte haben lange daran gearbeitet. Um eine hohe Akzeptanz der Schulhomepage bei Schülerinnen und Schülern zu erreichen, ist die Seite von diesen mitgestaltet worden.

VII. Was fehlt noch, was brauchen wir von den Fachschaften ?

Bilder fallen den Besuchern der Schulhomepage als erstes ins Auge. Erst danach nehmen sie die dazu passenden Texte wahr. Ohne sie werden viele Texte gar nicht erst gelesen – weil die Inspiration durch die Bilder dafür fehlt. Deshalb sollten, wo immer möglich, unbedingt ansprechende Fotos eingebunden werden.

Infos zum Seminarfach Homepage.