1. Vorwort
Als Beispiel für die Darstellung meiner Leitlinien nehme ich hier WordPress als CMS. Ich versuche, soweit als möglich, wissenschaftliche Grundsätze und Erkenntnisse bei der Erstellung zu nutzen.
Diese Dokumentation wurde mit dem neuen „Gutenberg“-Editor erstellt.
2. Sicherheit
Bei der Konzeption einer Webseite, steht an erster Stelle die Sicherheit. Denn wer will über einen Telefonanruf erfahren, das fremde oder politische Inhalte von Anderen auf der eigenen Webseite platziert sind. Ja, ist schon alles vorgekommen in meiner Praxis.
Oder wie kommt man auf das eigene WordPress, wenn Benutzername und Kennwort von jemand anderem geändert wurde? Dann wäre ein auch Backup hilfreich um die Webseite neu zu erstellen.
2.1. Login
Login und Benutzername
Login / Benutzername / User müssen wie auch das Passwort / Kennwort aus allen folgenden Zeichengruppen bestehen:
- Großbuchstaben
- Kleinbuchstaben
- anerkannte Sonderzeichen, wie ! “ ? $ % ^ & )
- Ziffern
- mindestens 24 Zeichen
Woraus der Benutzername und das Kennwort natürlich nicht bestehen sollte, aus Wörtern die in jedem Lexika vorkommen und erst recht nicht aus einem bekannten oder gar noch dem eigenen Namen. Aber das sollte schon als Grundwissen der Sicherheit vorausgesetzt sein.
Benutzername und angezeigter Benutzername des Autors
Beachte, dass der Login-Benutzername nicht dem angezeigten Autoren-Benutzername zu den Beiträgen identisch sein muss, aber trotzdem zugeordnet ist!
Login-URL
Die Login-URL maskiere ich wie folgendes Beispiel: „https://meinewebseite.de/K-j-3zp@mfq“. Das ist jetzt kein wirkliches Sicherheits-Highlight, macht den Angreifer jedoch schon unsicher.
2.2. SSL-Verschlüsselung
Ohne Verschlüsselung über „https“ werden Webseiten-Inhaber bald keine Kontaktmails über ihre Webseite erhalten. Denn wer sollte so dumm sein, wichtige Daten unverschlüsselt durch das Internet zu jagen.
2.3. Backup
Ein Backup sollte zumindest nach jeder größeren Änderung, nach jedem neuen Beitrag oder jeder neuen Seite erstellt werden.
Was soll wie gesichert werden:
- Inhalte, also Texte mit dem Plugin „WordPress Importer“ über Menü „Werkzeuge“ und dann „Daten exportieren“
- Medien sichern mit einem FTP-Programm, und zwar das Verzeichnis „wp-content“ → „uploads“
- das CSS sichern mit copy und paste in eine Textdatei, zu CSS weiter unten mehr
- zusätzlich könnte über ftp noch das möglicherweise gekaufte Theme im Verzeichnis „wp-content“ → „themes“ gesichert werden
Somit sollte zumindest das Wichtigste für den Ernstfall hinterlegt sein.
Beachte, ein Sichern der gesamten Verzeichnisstruktur von WordPress im Webspace, macht wenig Sinn, da einige Konfigurationen sich nicht übertragen lassen auf eine wieder aufzubauende Webseite.
2.4. Plugins auf das wesentliche reduzieren
Nur wirklich genutzte Plugins installieren. Jede überflüssige Software kann einem Angriffsszenario dienen. Nach dem Ausprobieren von Plugins, die nicht genutzten wieder deinstallieren.
2.5. Javascript
Nicht nur der Scriptkiddie, auch andere, wie die Konkurrenz, versuchen sich am leichtesten Angriff.
Also konsequent den Einsatz von Javascript reduzieren.
2.6. Firewall und Antivirus
Es gibt für sehr sicherheitsbewusste Menschen auch noch die Möglichkeit für Firewalls und Antiviren-Maßnahmen.
3. Technik
Die Technik unterteile ich in Editor, HTML, CSS, Schriftquellen und Farben.
3.1. Editor
Bisher kam „TinyMCE“ als visueller Editor in WordPress, der mir sehr entgegen kam da ich ohnehin kaum den „Visuell“-Modus nutze, sondern den transprenten „Text“-Modus. Aber es ist wohl absehbar, dass der neue Editor „Gutenberg“ sein wird. „Gutenberg“ ist für die geeignet, die keine Erfahrung mit HTML und CSS besitzen oder Semiprofessionelle die beispielsweise schnell und komfortabel 3 Spalten erstellen wollen mit unterschiedlichen Eigenschaften.
3.2. HTML
Wir sind derzeit bei der Version HTML5 angekommen, die im einfachen HTML-Syntax oder im strengen XHTML-Syntax, genutzt werden kann. Die Möglichkeiten sind unglaublich, auch daher ziehe ich den Text-Modus von Editoren vor.
3.3. CSS
Das eigene CSS ist am besten auch in einer eigenen Datei aufgehoben. Ich selbst nutze ein sehr kleines Plugin für eigenes CSS. Das hat den Vorteil, dass das Theme schnell gewechselt werden kann und ich selbst immer die volle Kontrolle über das Layout behalte.
3.4. Schriftquellen
Als Schriftquellen bietet sich der Online-Import zum Beispiel von Googgle-Fonts an. Doch man kann auch gekaufte oder andere freie Schriften auf dem eigenem Webspace per FTP hinterlegen.
3.5. Grundsätzliche Farben
Mindestens eine Grundfarbe muss vorhanden sein und von dieser ausgehend 1 bis 3 weitere Farben und zusätzlich Weiß und Schwarz. Die Grundfarbe kann entsprechend des eigenen Logos, des Logos eines Handwerkes beziehungsweise Dienstleistung oder dem Wappen einer Stadt oder Landes entsprechend, angelehnt sein.
4. Layout
4.1. Responsives Webdesign
Vor allem muss eine Webseite heute responsiv sein. Das heißt, sie passt sich selbst der Auflösung des Monitors und dem Wiedergabegerätes an.
4.2. Einteilung der Seite
In jedem Falle sollten folgende Merkmale existieren:
- eine Startseite
- ein Impressum
- eine Hauptnavigation
- eine kleine Navigation für Startseite, „Nach oben gehen“, Impressum, Datenschutzerklärung
Ob die Hauptnavigation oben, rechts oder links liegt, ist egal, nur unerwartet unten sollte sie nicht liegen.
Der Inhalt wird immer zentral angelegt. Ansonsten gilt es der Lesegewohnheit von Links oben nach rechts unten die Prioritäten zu verteilen.
Die Hauptnavigation sollte nicht überfrachtet werden und, als Faustregel, bei 1.024px Breite nicht umbrechen.
4.3. Benutzerfreundlichkeit
Wer auf der Startseite / Frontpage / Homepage seine Besucher schon mit Sliders und bewegtem Inhalt überfordert, braucht sich nicht zu wundern, wenn diese schnell verlassen wird. Auf der Startseite sollten bis zu 3 wichtige Inhaltshinweise, auch Buttons, liegen, sonst ist auch hier die Aufmerksamkeitsspanne überfordert.
Die Webseite sollte lesbar sein, dazu gehört auch die richtige Schriftart, beziehungsweise Schriftartenfamilie. Bei den hoher Auflösungen sollte der Text unbedingt mit Serifen dargestellt werden. Titel, Überschriften und Logos können dagegen plakativ Serifenlos dargestellt werden. Serifen sind nicht „alte“ Schriftarten, sondern Schriften mit „Charakter“ und somit bis zu 10x schneller vom menschlichem Gehirn zu erfassen. Wobei seriflose Schriften eine sehr anstrengende Art ist Inhalte zu vermitteln, da das Gehirn sich jeden einzelnen Buchstaben erkämpfen muss.
Telefonnummern können heutzutage mit einem Link zum sofortigem Wählen ausgestattet werden, das macht Smartphone-Nutzer zum schnellem Kunden.
Kontraste beachten, das auch sehgeschädigte Webseiten-Nutzer das Layout erleben können. Einfch einen Screenshot der Webseite erstellen und das Bild mal in Grautöne darstellen lassen, so hat man die Möglichkeit zu Empfinden wie einige sehgeschädigte Menschen die Webseite erfassen.
Doch auch das Gegenteil, zu hohe Kontraste, lässt die Inhalte unseriös erscheinen. Dasselbe gilt auch bei zu geringen Kontrasten, wie mittelgraue Schrift auf hellgrauem Hintergrund.
Zusammenfassung:
- keine beweglichen Inhalte, zumindest auf der Startseite
- 3 Hauptinhalte auf der Startseite
- Serifen im Inhalte
- Serifenlos nur Titel, Überschriften und Logos, hier können auch elegante Schriften, Handschriften oder „Schön“-Schrifen verwendet werden.
- Telefonnummern, E-Mailadressen gleich mit Hyperlink zur sofortigen Nutzung versehen
- Farben so auswählen, das Sehbehinderte trotzdem Kontraste erkennen
- angenehme Farbkompositionen, nicht zu hohe Kontraste und nicht zu geringe Kontraste
4.4. Farbberechnung
Die Farben werden entsprechend des Inhaltes der Webseite berechnet.
Ich nutze für die Farben:
- Beziehungen der Farben, wie Farbperspektiven, Quantitätskontrast und komplementäre Farben
- die kalte oder die warme Wirkung, entsprechend des Webseiteninhaltes
- Farbgruppen, zum Beispiel von Flaggen, Wappen und Logos
- Farbkataloge, meist den X11-Katalog, basierend auf RGB, und die sogenannten „websicheren“ Farben
4.5. Schriften
Schriften binde ich ausschließlich über die externe CSS-Datei ein. Ansonsten habe ich Schriften schon oben in 4.2. Benutzerfreundlichkeit und in 3.4. Schriftquellen behandelt.
4.6. Bilder
Ein schwieriges Thema. Am besten nur eigene Bilder nutzen, damit die Rechtslage klar ist. Bilder nur wenig oder gar nicht dekorieren mit Schatten oder Rahmen. Das Bild selbst soll wirken.
Große Bilder sind beliebter als kleine Bilder.
Trotzdem keine Bilder hinter viel Text als Wallpaper, entspricht dann dem „Text im Bild“.
Die Speichergröße der Bilder unbedingt klein halten, somit verringert sich die Ladezeit und die Frustration des Benutzers. Das gelingt mit der Reduzierung der Auflösung bis höchstens 1.200px x 1.200px und wenn es Logos oder technische Zeichnungen sind, auch mit der Verringerung der Farbanzahl. Beachte, Fotos im JPG-Format abspeichern und Zeichnungen / Logos im PNG-Format speichern. Profis können selbstverständlich das Qualitäts-Format SVG nutzen, wenn es in WordPress freigeschaltet wurde.
Ein rundes Bild entspricht nicht der normalen Sehgewohnheit, daher einfach weglassen. Runde Logos wiederum sind erlaubt.
Auch Texte in Fotos platzieren ist keine gute Idee, denn das Bild wirkt nicht und der Text ebenso wenig. Logos mit Text ist wieder in Ordnung.
Beachte, wenn das Bild mit Schatten und Rahmen und runden Ecken und weiterem zuviel bearbeitet wird, ist das Bild in dem Hintergrund gerückt, also genau das Gegenteil, was erreicht werden sollte.
Zusammenfassung:
- möglichst eigene Bilder nutzen
- große Bilder, statt kleine Bilder
- wenig bis keine Dekoration
- Auflösung der Dimension bis 1.200 px und nicht größer
- Fotos in JPG-Format
- Logos/Zeichnungen im PNG-Format
- keine runden Bilder
- weniger ist mehr bei der Bildbearbeitung mit CSS
4.7. Tabellen und Aufzählungen
Wie bei Bildern gilt auch hier, der Inhalt ist wichtiger als die Dekoration. Bei größeren Tabellen hinterlege ich jede zweite Zeile mit einem sehr hellem Hintergrund, um die zusammenhängenden Daten zu gruppieren. Ansonsten keine oder graue Linien zwischen den Zeilen. Die Tabellen-Überschriften sind meist durch das < th > -Tag schon gut dargestellt.
Aufzählungen sind mit den visuellen Modus der Editoren in WordPress für Normalnutzer besser zu erstellen. Die schwarzen Bullets und Quadrate sind in den meisten Fällen ausreichend.
5. Rechtliches
Wer eine „de“-Topdomain besitzt, ist rechtlich zu folgendem verpflichtet:
- Ein Impressumvollen Vor- und Nachnamen
◦ mit voller postalischer Anschrift
◦ Kontaktmöglichkeit über Telefon oder Fax, das täglich genutzt wird
◦ vollständige E-Mail-Adresse
◦ vorgeschrieben Anzeige von gewerblichen Daten - Datenschutzerklärung
- SSL-Verschlüsselung bei Kontakt zwischen Besucher und Betreiber der Webseite
