Informationen rund um den Internetauftritt von
Gemeinsam-Gemeinde.de

Die Idee für einen gemeinsamen Internetauftritt der Bretzfelder Kirchengemeinden ist im Mai 2020 entstanden. Bisher haben die Kirchengemeinden jeweils einen eigenen Internetauftritt realisiert, technisch vorwiegend mit dem Gemeindebaukasten des evangelischen Medienhauses umgesetzt. Abweichend davon hat die Kirchengemeinde Waldbach-Dimbach seit 2012 einen frei erstellten Internetauftritt realisiert. Im Mai 2020 wurden alle evangelischen Kirchengemeinden angefragt, ob sie sich an diesem Projekt beteiligen. Fünf evangelische Kirchengemeinden konnten der Argumentation folgen, dass der gemeinsame Internetauftritt nur Vorteile hat.

Die Vorteile bzw. die Argumente für einen gemeinsamen Internetauftritt sind:

• Mitarbeiter oder Ehrenamtliche in den Kirchengemeinden, die das technische Verständnis besitzen, einen Internetauftritt umzusetzen, sind immer schwerer zu finden
• Ein Internetauftritt erreicht i.d.R. nur die Gemeindeglieder der jeweiligen Gemeinde, der Nutzerkreis beschränkt sich auf die jeweilige Gemeinde
• Gemeindeübergreifende Informationen müssen mehrfach in jedem Internetauftritt hinterlegt werden
• Die Kosten für den jeweiligen Internetauftritt sind hoch und bei der "beschränkten" Informationsdichte nicht gerechtfertigt

Die Kirchengemeinderäte von fünf Gemeinden haben Anfang Juni 2020 beschlossen, sich an diesem Internetauftritt zu beteiligen. Dies sind bisher:

• Kirchengemeinde Adolzfurt-Scheppach mit der Homepage https://www.kirchenbezirk-oehringen.de/kirchengemeinden/adolzfurt-scheppach/
• Kirchengemeinde Bitzfeld mit der Homepage https://www.kirche-bitzfeld.de/
• Kirchengemeinde Schwabbach-Siebeneich mit der Homepage https://www.kirche-schwabbach-siebeneich.de/
• Kirchengemeinde Unterheimbach-Geddelsbach - ohne einen eigenen Internetauftritt
• Kirchengemeinde Waldbach-Dimbach mit der Homepage https://kirche-waldbach-dimbach.de

Die bisher an diesem Internetauftritt beteiligten Kirchengemeinden sind weiterhin offen dafür, dass sich weitere Kirchengemeinden diesem Internetauftritt anschließen, die in der EKD zusammengeschlossen sind. Bei der Namensauswahl für diesen Internetauftritt haben wir bewusst den Namenszusatz "Evangelisch" und "Bretzfeld" ausgeklammert, um auch mittelfristig weiteren Glaubensrichtungen in der Ökumene den Zugang offen zu halten oder auch Gemeinden zu integrieren, die ggf. nicht zur bürgerlichen Gemeinde Bretzfeld gehören. Zudem nimmt bisher die evang. Kirchengemeinde Bretzfeld nicht an diesem Internetauftritt teil, weshalb auch ein Domainnamen wie https://bretzfeld-evang.de falsche Eindrücke erwecken würde.

In der ersten Projektphase werden die Inhalte der oben genannten Internetauftritte zusammengefasst und kontinuierlich erweitert. Natürlich hat dieses Projekt auch ein Vorbild. Der Internetauftritt der Gemeinde Remseck macht Spaß und Lust auf Kirche und Gemeinschaft. Hier wurde der Pfarrplan 2024 bereits umgesetzt. Soweit sind wir in Bretzfeld noch nicht, jede Kirchengemeinde ist noch eigenständig. Die Strukturierung der Inhalte wird auf Grundbasis des Internetauftrittes der Kirchengemeinde Waldbach mit entsprechenden Ergänzungen vorgenommen. Jede Gemeinde definiert die Ziele des gemeinsamen Internetauftrittes selbst. Waldbach-Dimbach definiert die Ziele zum Beispiel dahingehend, dass der neue Internetauftritt technisch gesehen den geänderten Anforderungen für Smartphonenutzer voll gerecht wird. Die Zielgruppe, welche die Inhalte nutzen kann, darf sich nicht mehr nur an Anwender richten, die einen Desktop-PC verwenden und eine schnelle Internetverbindung besitzen. Bis 2018 mussten alle Internetauftritte den technischen Ansatz des "Responsive Webdesigns" integriert haben, um auch mobile Geräten den Zugang zu den Informationen zu ermöglichen, seit 2018 sollte aber der technische Ansatz "Mobile first" genannt werden. Dabei kommt es nicht nur darauf an, dass die grafische Anzeige der Inhalte auf das jeweilige Endgerät zugeschnitten wird, sondern auch, dass die Inhalte die verfügbare Bandbreite der Geräte berücksichtigt und sparsam mit den Downloadvoluminas umgeht.

Was kostet der neue Internetauftritt?

Der Internetauftritt ist zunächst für alle beteiligte kostenneutral, heißt soviel wie, die Kosten werden privat von "Waldbach" finanziert. Was das Domainpaket Pro bei IONOS kostet, kann jeder nachsehen, dazu zwei Domains. In diesem Vertrag befinden sich allerdings 11 weitere Internetauftritte. Hinzu kommen die Kosten für HTTPS / SSL . Dagegen stehen die Kosten für den Gemeindebaukasten und - sollte man Zusatzfunktionen nutzen wollen, kosten diese Zusatzfunktionen eben zusätzlich. Dies ist wohl der Hauptgrund, warum "Kirchenseiten" bisher recht spartanisch aufgestellt sind. Die Arbeit, die in diesem Internetauftritt steckt ist unbezahlbar und daher prinzipiell kostenlos :-).

Mobile First - deshalb ist es ein wenig komplizierter

Jede Internetseite besteht heute aus mindestens vier Komponenten. Text, der auf den Seiten angezeigt wird, steht in einer HTML- oder PHP-Datei. Wie dieser Text dargestellt werden soll, ist in CSS-Dateien definiert, die im Kopf der HTML-Datei referenziert werden. Zudem werden Bilddateien übertragen, welche die Textseiten etwas auflockern. Ferner werden je nach Anwendung noch kleine Scriptdateien benötigt, welche Programmcode beinhalten und z.B. zu erkennen, welche Bildschirmgröße das anzeigende Endgerät verwendet. Der Ersteller einer Internetseite weiß nun nicht, welches Endgerät letztendlich die Internetseite aufruft und mit welchem Browser dies geschied. Der Browser interpretiert hierbei die Internetseite, je nachdem, wie der den Programmcode versteht.
Beim Mobile First-Ansatz sollte jede Internetseite bereits im Seiten-Kopf, den HEAD Endgerätspezifische Informationen beinhalten. Das fängt mit dem gerätespezifischen Favicon bereits an. Im Reiter des Browsers, der díe Seite im Browser darstellt, wird vor dem Seitentitel eine kleine Grafik angezeigt, bei Seiten der evang. Landeskirche ist dies das kleine lila Kreuz. Dieses wird für verschiedene Endgeräte in unterschiedlichen Größen bereitgestellt.

Wenn die HTML-Datei dann vollständig vom Browser geladen wurde, werden die Steuerdateien und Scripte nachgeladen. Der Browser (z.B. der Firefox) muss nun erkennen können, welche Dateien wirklich für das jeweilige Gerät benötigt werden, um nicht unnötig Daten zu laden, die hinterher wieder weggeworfen werden können. Das erledigen dann die Steuerdateien bzw. die Metaangaben für die jeweiligen Gerätetypen.

Im nächsten Schritt werden dann Bilddateien nachgeladen. Bilddateien sind im Vergleich zu Steuerdateien oder HTML-Dateien je nach Bildgröße der dickste Brocken, den wir uns genauer ansehen müssen. Jede unserer Internetseiten hat ein Seiten-Banner, also das Bild über dem Seitenmenü. In der Desktop-Ansicht ist dieses derzeit 370*1400 Bildpunkte gross bzw. 268.660 KB wenn man die Datenmenge betrachtet, die übertragen werden muss, um dieses Bild auch in der Größe von 370*1400 Bildpunkten anzuzeigen. Wenn man sich nun Displaygrößen von Smartphones ansieht, dann kann dieses Gerät mit einer Bildgröße von 370*1400 Bildpunkten wenig anfangen. Um das Bild im richtigen Seitenverhältnis darstellen zu können, muss das Smartphone das Bild herunterrechnen. Bereits oben haben wir auf den Internetauftritt von der Gemeinde Remseck verwiesen (hier nur als ein Beispiel des Gemeindebaukastens). Hier wird das Seitenlogo für alle Endgeräte in der Größe mit 250*2000 Pixel übertragen und vom Endgerät dann skaliert. Dies ist dann Responsive, aber kein "Mobil First-Ansatz". Wir übertragen bei Smartphones nur die Inhalte, die auf dem Endgerät aus unserer Sicht einen Mehrwert bringen und wir übertragen bei Smartphones die Bilder in einer viel kleineren Größe. Wie wir das machen erklären wir gleich. Zunächst aber der Hinweis, wie wir jede Seite testen: Dazu nutzen wir zahlreiche Testtools und auch physikalische Geräte z.B. den Google Mobil Tester oder http://mobiletest.me oder http://responsivetesttool.com/

Wie erzeugen wir Bilddateien für unterschiedliche Endgeräte?

Bilder für einen modernen Internetauftritt müssen strukturiert im Internet auf dem Webspace abgelegt werden. Dies kann man manuell in einem Datenordner durchführen oder ein Programm dazu verwenden, das speziell hierfür entwickelt wurde. Das Zauberwort heißt Bildergalerie. Im Internetauftritt von kirche-waldbach-dimbach.de ist das noch die Software Gallery3, die aber auch schon in die Jahre gekommen ist, im Internetauftritt von Gemeinsam Gemeinde ist dies nun PIWIGO. Piwigo ist eine leistungsstarke aber dennoch kostenlose Bilddatenbankanwendung zum selber betreiben. Welche Anwendung in 5 Jahren die Nase vorne hat, werden wir sehen.
In dieser Bilddatenbank haben wir z.B. Luftaufnahmen aus Waldbach. Das Bild ist im Original 12 MB gross. Würden wir dieses direkt auf einer Internetseite einbinden, hätten Sie nun ein Problem. Die Bilddatenbank kann aber dieses Bild in unterschiedlichen Größen berechnen und bei einer Anfrage in der gewünschten Größe übertragen. Das bedeutet nun, dass Sie das nachfolgende Bild (Screenshot aus der Bildergalerie in vier unterschiedlichen Größen dargestellt bekommen, je nachdem wie gross Ihr Bildschirm ist. Der zweite Vorteil dieses Verfahrens ist, dass die Berechnung der Bildgröße durch den Webserver erfolgt. Wenn dieser zu langsam ist, würden die Bilder zu langsam bereitgestellt, doch hier haben wir bei Ionos vorgesorgt...





Um diese Bild das Sie oben angezeigt bekommen in die HTML-Datei einzubinden, ist folgender Programmcode notwendig. Sie erkennen am Programmcode, dass diese bzw. jedes Bild fünf mal im Programmcode hinterlegt werden muss, je Anzeigebreite mit einem anderen Bildlink bzw. mit einer anderen Adresse, die nun wie oben gezeigt durch die Bildergalerie ausgegeben wird. Ein viel größerer Aufwand bei der Programmierung, aber eine viel schnellere Darstellung auf dem mobilen Endgerät.



Das besagte Bild der Kirche von Waldbach ist auch auf der Gemeindeübersichtsseite von Weinsberg-Neuenstadt eingebunden, doch hier leider nicht in einer Minigröße, wie man an der Anzeige erwarten dürfte... Klicken Sie ruhig einmal ein Bild mit der rechten Maustaste an und wählen "Grafik anzeigen". Sie werden den Unterschied selber leicht feststellen können :-)

Aber nicht nur die verkleinerte Darstellung von Bildern ist eine Notwendigkeit beim Mobile First-Ansatz sondern auch der Zeitpunkt, wann eine Bilddatei übertragen wird. So haben wir z.B. derzeit auf der Startseite unter dem Menü einen "Bilderteaser" der vier Bilder enthält. Die Bildgrößen, die übertragen werden hängen von der Bildschirmgröße ab. In der mobilen Darstellung werden die Bilder aber erst dann abgerufen, wenn der Nutzer auf das "+" - Zeichen der Bilderbox klickt und den Inhalt angezeigt haben möchte.

Stationäre und mobile Navigation

Prinzipiell navigiert ein Desktop-Nutzer mit einer Maus als Zeigegerät "einfacher" als ein Smartphonenutzer mit dem dicken Daumen. Am Desktop (Computer mit grossem Bildschirm) sind Menüs grafisch einfacher darzustellen, ggf. sogar Megamenüs darstellbar, die auf der Startseite freigeschaltet werden, sobald entsprechende Inhalte in diesem Internetauftritt vorhanden sind. Die Menüs, die wir in diesem Internetauftritt verwenden, haben bewusst eine Tiefe von 2, d.h. es wird die übergeordnete Seite und eine Unterseite im Menü dargestellt. Alle Seiten haben zwei Menüebenen.



Im oberen Menü die Hauptkapitel des Internetauftrittes wie Aktuell, Gemeindeleben, Jugenddiakonin und im unteren Menü die jeweiligen Unterseiten bis Ebene 3 des jeweils ausgewählten Hauptkapitels. So findet sich hier zum Beispiel die Seite Kirchengemeinderäte. Diese in der Strukturdarstellung unter "Startseite / Gemeindeleben / Für Sie da / Kirchengemeinderäte" befindet sich in Ebene 3. Wählen Sie im Menü die Seite Kirchengemeinderäte aus, wird diese Seite dargestellt. Allerdings werden Sie nun bemerken, dass das Menü sich verändert hat und Ihnen nun Kirchengemeinderäte als Überseite angeboten wird, darunter dann z.B. Kirchengemeinderat Waldbach-Dimbach.



Sie sehen also im Menü nun die Seite Kirchengemeinderat Waldbach-Dimbach auf Ebene 4 oder in der Breadcrumb-Darstellung " Sie sind hier: Startseite / Gemeindeleben / Für Sie da / Kirchengemeinderäte / Kirchengemeinderat Waldbach "
Neben dieser Seite bzw. wäre die Darstellung der Pfarrämter und darunter dann das Pfarramt Waldbach-Dimbach... in der Breadcrumschreibweise " Sie sind hier: Startseite / Gemeindeleben / Für Sie da / Pfarramt / Pfarramt Waldbach-Dimbach "


Hier wird nun dem Desktop-Benutzer auf der linken Seite ein drittes Menü angezeigt, grafisch grün hervorgehoben "Sie sind hier".. Die Aufforderung zu "Visitationsbescheid" oder " Die Pfarrer von Waldbach" zu wechseln, beides dann auf Menüebene 5 oder wieder in der Breadcrumbschreibweise " Sie sind hier: Startseite / Gemeindeleben< / Für Sie da / Pfarramt / Pfarramt Waldbach-Dimbach / Visitationsbescheid"
Verlieren Sie aber nicht den Überblick. Es geht noch mehr...

In Menüebene 6 liegt nun der Gemeindeleitungsbericht Waldbach Teil 1. Auf (hoffentlich) jeder Seite wird Ihnen der Seitentitel angezeigt. Unter dem Seitentitel das Menü und hier weiss hervorgehoben, wo im Menü sie sich gerade befinden. Unter dem Menü als erster Eintrag auf der Seite der Breadcrumb der aktiven Seite. Wenn es tiefer geht, werden Seitenmenüs eingeblendet.

Navigation mit dem dicken Daumen

Nehmen wir als Testgerät ein iPhone 5 mit einem recht schmalen Display, doch es soll noch Nutzer dieses Gerätes geben. Die Startseite wird dem Nutzer so sparsam wie möglich dargestellt, kein Banner, dafür ein kleines Logo, rechts daneben wie derzeit üblich das Hamburger-Menü. Es soll noch Internetseiten geben, die den Hamburger nicht rechts sondern links anzeigen oder in der Bildmitte. Ergonomisch wird Hamburger der mit dem Daumen rechts bedient.

Doch meist navigiert (wenn man das so nennen kann) der Smartphonenutzer durch klickbare Inhalte auf der Seite, die ihn interessieren. Deshalb muss eine Landing-Page (oder eine Menüseite wie die Startseite oder Zwischenmenüseiten) grosse Schaltflächen mit interessanten Bildern ansprechenden Texten aufweisen, die den Nutzer dazu animieren, auf diese Flächen zu klicken. Kleine Links oder mit Links hervorgehobene Wörter werden selten als solche anerkannt.



Das Startmenü bietet hier nur Zugriff auf die Hauptkategorien. Diese können aber sicher ausgewählt werden.



Auf der ersten Landing-Page angekommen, wird wie in der Desktop-Version ein zweites Menü eingeblendet. In welchem aber entgegen der Desktop-Version alle Inhalte des Bereichs angezeigt werden. Die Auswahl der Seite erfolgt links durch Klicken auf den Seitentitel, die Spring eine Ebene weiter durch Klick auf den Verweispfeil.





Und auch die vierte, fünfte oder sechste Ebene kann problemlos direkt von der zweiten Ebene aus ausgewählt werden und das ohne das Menü in diesen Fällen nach unten verschieben zu müssen, vor und zurück im gleichen Modus.