Erläuterungstexte für Prüfkriterien

[marians]

Wir wollen für alle angezeigten Empfehlungen Texte in der Anwendung haben, wie im Dummy in #76 zu sehen.

[BernerUlf]

Kurze Antwortzeiten

Worum geht es?
Zu lange Ladezeiten einer Seite wirken sich negativ auf das Ranking in den Suchmaschinen aus und schreckt schlimmstenfalls Nutzer vom Besuch der Seite ab. Für mobile Nutzer bedeuten lange Ladezeiten auch oft Kosten.

Was kann ich tun?
++ Prüfe, ob Du auf der Startseite große Dateien [Bilder, Videos, eingebundene Twitter oder Facebook-Streams) anbietest. Vermeide zu viele externe Daten und zu große Bilddateien.

++ Reduziere die Bilddateigrößen auf ein akzeptables Minimum. Dies bezieht sich sowohl auf die Pixelgrößen, als auch auf die Kompression von JPG-Dateien.
Für WordPress gibt es Plugins, die Bilder bereits beim hochladen auf eine voreingestellte, weboptimierte Größe reduzieren.

++ Reduziere die aufgerufenen CSS- und Java-Script-Dateien auf ein Mindestmaß

++ Vermeide Slideshows, Galerien, Videos und externe Streams auf der Startseite

++ Überprüfe, ob das Theme Deiner Webseite „responsive“ ist. Das bedeutet, dass es unterschiedliche Darstellungen für Desktops und mobile Endgeräte ausgibt. Smartphones erhalten von „responsive Themes“ datenreduzierte Inhalte und man kann bestimmte Inhalte für mobile Endgeräte ganz ausschliessen

Weitere Informationen

Einen Check mit Lösungshinweisen bietet die werbeunterstützte Seite Pagespeed.de an [https://www.pagespeed.de/]

Für den Browser „google-chrome“ gibt es das Plugin „Lighthouse“, dass Webseiten analysiert und Lösungsvorschläge bei Problemen anbietet.

[BernerUlf]

RSS-Feed verlinken

Worum geht es?

RSS (Really Simple Syndication) ist ein Dateiformat, in dem Inhalte einer Webseite in einer vereinfachten Darstellung, ähnlich einem Newsticker aufbereitet werden. Diese können dann von verschiedenen Programmen genutzt werden. So kann man Feeds in einigen Webbrowsern und E-Mail-Programmen, wie Mozilla Thunderbird abonnieren oder in andere Seiten einbinden. Suchmaschinen indizieren Seiten mit korrekt verlinkten RSS-Feeds schneller.

Was kann ich tun?

Typo3
Typo3-Seiten von gcms haben die Funktion vorinstalliert. Diese muss nur aktiviert sein. Weitere Hilfen gibt Newthinking [https://gruenes-cms.de/startseite/]

WordPress
Gehe im Backend auf „DESIGN“ → „MENÜ“, Füge entweder im primären oder sekundären Menü einen Eintrag „individuelle Links“ hinzu, dem Du die URL „https://IHRE-DOMAIN/feed/“ einträgst. Benenne den Eintrag im Feld „Link-Text“ mit „RSS“ oder „RSS-Feed“

Weitere Informationen

RSS-Readers.org [https://www.rss-readers.org/einfuehrung-in-rss/]

[BernerUlf]

Schriftart ‚ARVO‘ anbieten

Worum geht es?
ARVO-Gruen bzw. ARVO ist die Corporate-Schriftart für Headlines von BÜNDNIS 90 / DIE GRÜNEN.
Diesen sehr auffälligen Schrifttyp auch auf den Webseiten wieder zu finden, erhöht den Wiedererkennungswert, dass es sich um eine GRÜNE Webseite handelt, deutlich.
An markanten Stellen, wie Seitentitel, Überschriften erster Ordnung (H1) oder im Navigationsmenü sollte Arvo auf den GRÜNEN Seiten Verwendung finden.
GRÜNE Seiten, die bei ‚Newthinking‘ gehostet werden verwenden bereits ARVO.

Was kann ich tun?
Abhängig vom CMS und damit verwendeten Theme ist die Vorgehensweise individuell.

Theme verwendet google-Schriften
• Gehe in die Theme-Konfiguration und suche die Einstellungsoption für Schriften.
• Wähle in der Auswahlliste für Schriftarten ‚Arvo‘.
• Setze ‚Arvo‘ für ‚Seitentitel‘ und Überschriften H1.
• Empfehlung: Wird ARVO in Bereichen mit grünem Hintergrund verwendet, wähle die Schriftfarbe weiß. Ist der Schrifthintergrund weiß, wähle die Schriftfarbe grün (HexCode: #46962b).

Theme verwendet keine google-Schriften
• Abhängig vom CMS gibt es Plugins, die es ermöglichen google-Schriften oder eigene Schriften einzubinden.
◦ WordPress bietet einige Plugins unter https://de.wordpress.org/plugins/search/google+fonts/
◦ Bei Typo3 findet man entsprechende Extensions unter https://extensions.typo3.org/?L=0&id=1&tx_solr%5Bq%5D=google+font

Weitere Informationen

Link zum google-Font ‚ARVO‘ [https://fonts.google.com/specimen/Arvo]

[BernerUlf]

Seite erreichbar machen

Worum geht es?
Was nützt die informativste Seite, wenn niemand sie lesen kann! Die Gründe, warum eine Webseite nicht erreichbar ist, kann so viel Gründe haben, wie der Nordseestrand Sandkörner. Im besten Fall wird beim Aufruf der Seite ein Fehlercode zB: 'HTTP ERROR 404' angezeigt.
Diese Art Fehler sind vielfältig. Ein Liste der möglichen Fehlercodes ist mit Erklärungen bei Wikipedia zusammengetragen [https://de.wikipedia.org/wiki/HTTP-Statuscode]

In jedem Fall empfiehlt es sich zur Lösung vieler Probleme, grundsätzlich regelmäßig Backups der SQL-Datenbank und des Dateiverzeichnisses zu fahren. Es gibt auch Plugins, die das übernehmen.

Was kann ich tun?
Prüfe folgendes:
• Ist zu der angegebenen Adresse überhaupt eine Webseite installiert?
• Ist meine Seite online oder im Wartungsmodus?
• Ist die Seiten-URL richtig geschrieben?
• Handelt es sich um einen fehlerhaften Eintrag bei der Umleitung auf eine andere URL?
• Komme ich auf andere Seiten im Internet?
• Ist die Datenbank der Seite erreichbar?
• Ist der DNS Eintrag der Seite korrekt?
• Hat evtl. mein Hoster ein Problem?

Maßnahmen ohne vertiefte IT-Kenntnisse
• Ist die Seite im Wartungsmodus, auf Online-Modus umschalten
• Bei Problemen der Datenbank oder der Installation das letzte Backup zurück spielen
• Bei fehlerhafter URL-Weiterleitung, diese berichtigen.

Im Zweifel kontaktiere Deinen Administrator oder Webhoster

Weitere Informationen

Prüfung der Erreichbarkeit einer Domain mit DNS-Watch [https://www.dnswatch.info/]

[BernerUlf]

Site-Icon anbieten

Worum geht es?
Site-Icons, sogenannte „Favicons“, sind die kleinen Bilder, die im Webbrowser im Reiter vor dem Seitennamen der geöffneten Seite und in der Favoritenliste angezeigt werden. Diese quadratischen Minibilder dienen der schnellen Wiedererkennung und der Individualisierung.
Der Favicon ist so zu sagen ein Teil Eures Marketings für Eure Webseite.

Favicons werden üblicherweise in den Größen 16 x 16 px oder 32 x 32 px erstellt. Einige WordPress-Themes bieten an, ein größeres Bild zu nutzen, das dann vom System selbst angepasst wird.
Sinnvoller Weise enthält das Favicon die CI-Farben grün (HTML-Code: #46962b), weiss (HTML-Code: #ffffff) und ggf. gelb (HTML-Code: #ffee00) . Am verbreitetsten auf GRÜNEN Seiten ist die Sonnenblume.

Favicons lassen sich mit Grafikprogrammen, wie ‚Photoshop‘ und ‚gimp‘ erstellen.
Der Dateiname muss ‚favicon.ico‘ sein!
In den Webseiten von Newthinking [https://gruenes-cms.de/startseite/] sind die Favicons bereits enthalten.

Was kann ich tun?
Wenn Du keine Webseite von ‚Newthinking‘ betreibst, hängt es immer vom CMS und vom Theme ab, welches Du nutzt.
Allgemein kann man sagen, dass man Favicons entweder über die Administration des CMS-Themes hochladen kann oder man es über FTP an die entsprechende Stelle im Verzeichnisbaum laden muss.

Weitere Informationen

Favicon Wiki von Selfhtml.org [https://wiki.selfhtml.org/wiki/Grafik/Favicon]

[marians]

Vielen Dank für die Textvorschläge. Das geht in eine sehr gute Richtung! Ganz allgemeine Kommentare hier schon mal vorweg:

• Kurze Antwortzeiten: Wir messen hier nur die Server-Antwortzeit, also ganz exakt die Zeit zwischen dem Absenden des HTTP-Requests und dem Eintreffen aller Antwort-Header. Je kürzer dies dauert, desto eher kann der eigentliche Inhalt der Seite (HTML) übertragen werden, und desto kann der Browser Anfragen weiteren Ressourcen stellen, z. B. CSS, JavaScript, Fonts etc. Diese Messgröße hat also unmittelbar nichts mit der eigentlichen Seitenladezeit oder mit der Größe und Anzahl der verknüpften Ressourcen zu tun. Es ist mehr ein Gradmesser für die Performanz des Servers. Bei Systemen wie Typo3 und Wordpress, wo standardmäßig für jede Anfrage der Seiteninhalt individuell zusammen gebaut wird, erreicht man sehr gute Werte (< 100 ms) nur durch Caches. Evtl. können wir uns hier in einem weiteren Schritt bei newthinking und Dirk Wildt (Typo3-Grüne) informieren, wie ihre Typo3-Varianten hier konfiguriert sind und ob es noch Dinge zu beachten gibt.

• RSS-Feed verlinken: Speziell für GCMS/newthinking habe ich vor ein paar Tagen eine Anleitung in https://chatbegruenung.de/channel/website-support?msg=8oGjFCKQjiiMfQumZ veröffentlicht. Ist nicht sehr umfangreich. Vielleicht können wir die mit aufnehmen?

• Schriftart ARVO anbieten: Hier sollten wir auch auf https://github.com/netzbegruenung/webfonts hinweisen. Und es wäre sinnvoll, auf das offizielle Corporate-Design-Handbuch hinzuweisen, das man unter https://wurzelwerk.gruene.de/group/bundesverband/design-handbuch herunter laden kann.

• Site-Icon anbieten: Hierzu würde ich noch https://realfavicongenerator.net/ verlinken.

Würdest Du die Entwürfe als nächstes per pull request dem Webapp-Repository hinzufügen? Wir könnten einen Ordner explanations oder ähnliches unter https://github.com/netzbegruenung/green-spider-webapp/tree/master/src anlegen und da je Kriterium eine Markdown-Datei haben. Im pull request könnte ich dann auch noch ein paar Detail-Kommentare und Verbesserungsvorschläge los werden.