Meine Leitlinien für das Erstellen von Webseiten

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.

Inhaltsverzeichnis

  1. Sicherheit
  2. Technik
  3. Layout
  4. Rechtliches

1. 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.

1.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! Hier ein Beispiel wie für den internen Benutzer „)jf?g§K:n_Zd4=3a.s@#ßv+P“ der angezeigte Benutzername „Frank Rosenberger“ angezeigt wird. In Wahrheit ist dieser interne Benutzer noch komplexer.

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.

1.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.

1.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.

1.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 werden, diese dann wieder deinstallieren.

1.5. Javascript

Nicht nur der Scriptkiddie, auch andere, wie die Konkurrenz, versuchen sich am leichtesten Angriff.
Also konsequent den Einsatz von Javascript reduzieren.

1.6. Firewall und Antivirus

Es gibt für sehr sicherheitsbewusste Menschen auch noch die Möglichkeit für Firewalls und Antiviren-Maßnahmen.

2. Technik

Die Technik unterteile ich in Editor, HTML, CSS, Schriftquellen und Farben.

2.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 transparenten „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.

2.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.

2.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 immer die volle Kontrolle über das Layout behalte.

2.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.

2.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.

3. Layout

3.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.

3.2. Einteilung der Webpräsentation

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.

3.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. Einfach 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“-Schriften 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

3.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

3.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.

3.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 und Zeichnungen im PNG-Format
  • Keine runden Bilder
  • Weniger ist mehr bei der Bildbearbeitung mit CSS

3.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.

4. Rechtliches

Wer eine „de“-Topdomain besitzt, ist rechtlich zu folgendem verpflichtet:

  • Ein Impressum
    ◦ mit vollem Vor- und Nachnamen
    ◦ mit voller postalischer Anschrift, kein Postfach
    ◦ 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

Ein Postfach kann zusätzlich angegeben werden.