Meine Leitlinien für das Erstellen von Webseiten

Als Beispiel für die Darstel­lung mein­er Leitlin­ien nehme ich hier Word­Press als CMS. Ich ver­suche, soweit als möglich, wis­senschaftliche Grund­sätze und Erken­nt­nisse bei der Erstel­lung zu nutzen.
Diese Doku­men­ta­tion wurde mit dem neuen “Gutenberg”-Editor erstellt.

Inhaltsverzeichnis

  1. Sicher­heit
  2. Tech­nik
  3. Lay­out
  4. Rechtlich­es

1. Sicherheit

Bei der Konzep­tion ein­er Web­seite ste­ht an erster Stelle die Sicher­heit. Denn wer will über einen Tele­fo­nan­ruf erfahren, das fremde oder poli­tis­che Inhalte von Anderen auf der eige­nen Web­seite platziert sind. Ja, ist schon alles vorgekom­men in mein­er Prax­is.
Oder wie kommt man auf das eigene Word­Press, wenn Benutzer­name und Ken­nwort von jemand anderem geän­dert wurde? Dann wäre ein auch Back­up hil­fre­ich um die Web­seite neu zu erstellen.

1.1. Login

Login und Benutzername

Login / Benutzer­name / User müssen wie auch das Pass­wort / Ken­nwort aus allen fol­gen­den Zeichen­grup­pen beste­hen:

  • Großbuch­staben
  • Klein­buch­staben
  • anerkan­nte Son­derze­ichen, wie ! “ ? $ % ^ & )
  • Zif­fern
  • min­destens 24 Zeichen

Woraus der Benutzer­name und das Ken­nwort natür­lich nicht beste­hen sollte, aus Wörtern die in jedem Lexi­ka vorkom­men und erst recht nicht aus einem bekan­nten oder gar noch dem eige­nen Namen. Aber das sollte schon als Grund­wis­sen der Sicher­heit voraus­ge­set­zt sein.

Benutzername und angezeigter Benutzername des Autors

Beachte, dass der Login-Benutzer­name nicht dem angezeigten Autoren-Benutzer­name zu den Beiträ­gen iden­tisch sein muss, aber trotz­dem zuge­ord­net ist! Hier ein Beispiel wie für den inter­nen Benutzer ”)jf?g§K:n_Zd4=3a.s@#ßv+P” der angezeigte Benutzer­name “Frank Rosen­berg­er” angezeigt wird. In Wahrheit ist dieser interne Benutzer noch kom­plex­er.

Login-URL

Die Login-URL mask­iere ich wie fol­gen­des Beispiel: „https://meinewebseite.de/K-j-3zp@mfq“. Das ist jet­zt kein wirk­lich­es Sicher­heits-High­light, macht den Angreifer jedoch schon unsich­er.

1.2. SSL-Verschlüsselung


Ohne Ver­schlüs­selung über „https“, wer­den Web­seit­en-Inhab­er bald keine Kon­tak­t­mails über ihre Web­seite erhal­ten. Denn wer sollte so dumm sein, wichtige Dat­en unver­schlüs­selt durch das Inter­net zu jagen.

1.3. Backup

Ein Back­up sollte zumin­d­est nach jed­er größeren Änderung, nach jedem neuen Beitrag oder jed­er neuen Seite erstellt wer­den.
Was soll wie gesichert wer­den:

  • Inhalte, also Texte mit dem Plu­g­in „Word­Press Importer“ über Menü „Werkzeuge“ und dann „Dat­en exportieren“
  • Medi­en sich­ern mit einem FTP-Pro­gramm, und zwar das Verze­ich­nis „wp-con­tent“ → „uploads“
  • das CSS sich­ern mit copy und paste in eine Text­datei, zu CSS weit­er unten mehr
  • zusät­zlich kön­nte über ftp noch das möglicher­weise gekaufte Theme im Verze­ich­nis „wp-con­tent“ → „themes“ gesichert wer­den

Somit sollte zumin­d­est das Wichtig­ste für den Ern­st­fall hin­ter­legt sein.

Beachte, ein Sich­ern der gesamten Verze­ich­nis­struk­tur von Word­Press im Web­space, macht wenig Sinn, da einige Kon­fig­u­ra­tio­nen sich nicht über­tra­gen lassen auf eine wieder aufzubauende Web­seite.

1.4. Plugins auf das wesentliche reduzieren

Nur wirk­lich genutzte Plu­g­ins instal­lieren. Jede über­flüs­sige Soft­ware kann einem Angriff­sszenario dienen. Nach dem Aus­pro­bieren von Plu­g­ins, die nicht genutzten wer­den, diese dann wieder dein­stal­lieren.

1.5. Javascript

Nicht nur der Scrip­tkid­die, auch andere, wie die Konkur­renz, ver­suchen sich am leicht­esten Angriff.
Also kon­se­quent den Ein­satz von Javascript reduzieren.

1.6. Firewall und Antivirus

Es gibt für sehr sicher­heits­be­wusste Men­schen auch noch die Möglichkeit für Fire­walls und Antiviren-Maß­nah­men.

2. Technik

Die Tech­nik unterteile ich in Edi­tor, HTML, CSS, Schriftquellen und Far­ben.

2.1. Editor

Bish­er kam „TinyM­CE“ als visueller Edi­tor in Word­Press, der mir sehr ent­ge­gen kam, da ich ohne­hin kaum den „Visuell“-Modus nutze, son­dern den trans­par­enten „Text“-Modus. Aber es ist wohl abse­hbar, dass der neue Edi­tor „Guten­berg“ sein wird. „Guten­berg“ ist für die geeignet, die keine Erfahrung mit HTML und CSS besitzen oder Semi­pro­fes­sionelle die beispiel­sweise schnell und kom­fort­a­bel 3 Spal­ten erstellen wollen mit unter­schiedlichen Eigen­schaften.

2.2. HTML

Wir sind derzeit bei der Ver­sion HTML5 angekom­men, die im ein­fachen HTML-Syn­tax oder im stren­gen XHTML-Syn­tax, genutzt wer­den kann. Die Möglichkeit­en sind unglaublich, auch daher ziehe ich den Text-Modus von Edi­toren vor.

2.3. CSS

Das eigene CSS ist am besten auch in ein­er eige­nen Datei aufge­hoben. Ich selb­st nutze ein sehr kleines Plu­g­in für eigenes CSS. Das hat den Vorteil, dass das Theme schnell gewech­selt wer­den kann und ich immer die volle Kon­trolle über das Lay­out behalte.

2.4. Schriftquellen

Als Schriftquellen bietet sich der Online-Import zum Beispiel von Goog­gle-Fonts an. Doch man kann auch gekaufte oder andere freie Schriften auf dem eigen­em Web­space per FTP hin­ter­legen.

2.5. Grundsätzliche Farben

Min­destens eine Grund­farbe muss vorhan­den sein und von dieser aus­ge­hend 1 bis 3 weit­ere Far­ben und zusät­zlich Weiß und Schwarz. Die Grund­farbe kann entsprechend des eige­nen Logos, des Logos eines Handw­erkes beziehungsweise Dien­stleis­tung oder dem Wap­pen ein­er Stadt oder Lan­des entsprechend angelehnt sein.

3. Layout

3.1. Responsives Webdesign

Vor allem muss eine Web­seite heute respon­siv sein. Das heißt, sie passt sich selb­st der Auflö­sung des Mon­i­tors und dem Wieder­gabegerätes an.

3.2. Einteilung der Webpräsentation

In jedem Falle soll­ten fol­gende Merk­male existieren:

  • eine Start­seite
  • ein Impres­sum
  • eine Haupt­nav­i­ga­tion
  • eine kleine Nav­i­ga­tion für Start­seite, „Nach oben gehen“, Impres­sum, Daten­schutzerk­lärung

Ob die Haupt­nav­i­ga­tion oben, rechts oder links liegt, ist egal, nur uner­wartet unten sollte sie nicht liegen.
Der Inhalt wird immer zen­tral angelegt. Anson­sten gilt es der Lesege­wohn­heit von Links oben nach Rechts unten die Pri­or­itäten zu verteilen.
Die Haupt­nav­i­ga­tion sollte nicht über­frachtet wer­den und als Faus­tregel bei 1.024px Bre­ite nicht umbrechen.

3.3. Benutzerfreundlichkeit

Wer auf der Start­seite / Front­page / Home­page seine Besuch­er schon mit Slid­ers und bewegtem Inhalt über­fordert, braucht sich nicht zu wun­dern, wenn diese schnell ver­lassen wird. Auf der Start­seite soll­ten bis zu 3 wichtige Inhalt­shin­weise, auch But­tons, liegen, son­st ist auch hier die Aufmerk­samkeitss­panne über­fordert.
Die Web­seite sollte les­bar sein, dazu gehört auch die richtige Schrif­tart, beziehungsweise Schrif­tarten­fam­i­lie. Bei den hoher Auflö­sun­gen sollte der Text unbe­d­ingt mit Ser­ifen dargestellt wer­den. Titel, Über­schriften und Logos kön­nen dage­gen plaka­tiv Ser­ifen­los dargestellt wer­den. Ser­ifen sind nicht „alte“ Schrif­tarten, son­dern Schriften mit „Charak­ter“ und somit bis zu 10x schneller vom men­schlichem Gehirn zu erfassen. Wobei ser­i­flose Schriften eine sehr anstren­gende Art ist Inhalte zu ver­mit­teln, da das Gehirn sich jeden einzel­nen Buch­staben erkämpfen muss.
Tele­fon­num­mern kön­nen heutzu­tage mit einem Link zum sofor­tigem Wählen aus­ges­tat­tet wer­den, das macht Smart­phone-Nutzer zum schnellem Kun­den.
Kon­traste beacht­en, das auch sehgeschädigte Web­seit­en-Nutzer das Lay­out erleben kön­nen. Ein­fach einen Screen­shot der Web­seite erstellen und das Bild mal in Grautöne darstellen lassen, so hat man die Möglichkeit zu Empfind­en wie einige sehgeschädigte Men­schen die Web­seite erfassen.
Doch auch das Gegen­teil, zu hohe Kon­traste, lässt die Inhalte unser­iös erscheinen. Das­selbe gilt auch bei zu gerin­gen Kon­trasten, wie mit­tel­graue Schrift auf hell­grauem Hin­ter­grund.

Zusam­men­fas­sung:

  • Keine beweglichen Inhalte, zumin­d­est auf der Start­seite
  • 3 Haupt­in­halte auf der Start­seite
  • Ser­ifen im Inhalte
  • Ser­ifen­los nur Titel, Über­schriften und Logos, hier kön­nen auch ele­gante Schriften, Hand­schriften oder „Schön“-Schriften ver­wen­det wer­den.
  • Tele­fon­num­mern, E-Mailadressen gle­ich mit Hyper­link zur sofor­ti­gen Nutzung verse­hen
  • Far­ben so auswählen, das Sehbe­hin­derte trotz­dem Kon­traste erken­nen
  • Angenehme Far­bkom­po­si­tio­nen, nicht zu hohe Kon­traste und nicht zu geringe Kon­traste

3.4. Farbberechnung

Die Far­ben wer­den entsprechend des Inhaltes der Web­seite berech­net.
Ich nutze für die Far­ben:

  • Beziehun­gen der Far­ben, wie Farbper­spek­tiv­en, Quan­tität­skon­trast und kom­ple­men­täre Far­ben
  • Die kalte oder die warme Wirkung, entsprechend des Web­seit­en­in­haltes
  • Far­b­grup­pen, zum Beispiel von Flaggen, Wap­pen und Logos
  • Far­bkat­a­loge, meist den X11-Kat­a­log, basierend auf RGB, und die soge­nan­nten „web­sicheren“ Far­ben

3.5. Schriften

Schriften binde ich auss­chließlich über die externe CSS-Datei ein. Anson­sten habe ich Schriften schon oben in 4.2. Benutzer­fre­undlichkeit und in 3.4. Schriftquellen behan­delt.

3.6. Bilder

Ein schwieriges The­ma. Am besten nur eigene Bilder nutzen, damit die Recht­slage klar ist. Bilder nur wenig oder gar nicht deko­ri­eren mit Schat­ten oder Rah­men. Das Bild selb­st soll wirken.
Große Bilder sind beliebter als kleine Bilder.
Trotz­dem keine Bilder hin­ter viel Text als Wall­pa­per, entspricht dann dem „Text im Bild“.
Die Spe­icher­größe der Bilder unbe­d­ingt klein hal­ten, somit ver­ringert sich die Ladezeit und die Frus­tra­tion des Benutzers. Das gelingt mit der Reduzierung der Auflö­sung bis höch­stens 1.200px x 1.200px und wenn es Logos oder tech­nis­che Zeich­nun­gen sind, auch mit der Ver­ringerung der Far­ban­zahl. Beachte, Fotos im JPG-For­mat abspe­ich­ern und Zeich­nun­gen / Logos im PNG-For­mat spe­ich­ern. Profis kön­nen selb­stver­ständlich das Qual­itäts-For­mat SVG nutzen, wenn es in Word­Press freigeschal­tet wurde.
Ein run­des Bild entspricht nicht der nor­malen Sehge­wohn­heit, daher ein­fach weglassen. Runde Logos wiederum sind erlaubt.
Auch Texte in Fotos platzieren ist keine gute Idee, denn das Bild wirkt nicht und der Text eben­so wenig. Logos mit Text ist wieder in Ord­nung.
Beachte, wenn das Bild mit Schat­ten und Rah­men und run­den Eck­en und weit­erem zuviel bear­beit­et wird, ist das Bild in dem Hin­ter­grund gerückt, also genau das Gegen­teil, was erre­icht wer­den sollte.

Zusam­men­fas­sung:

  • Möglichst eigene Bilder nutzen
  • Große Bilder, statt kleine Bilder
  • Wenig bis keine Deko­ra­tion
  • Auflö­sung der Dimen­sion bis 1.200 px und nicht größer
  • Fotos in JPG-For­mat
  • Logos und Zeich­nun­gen im PNG-For­mat
  • Keine run­den Bilder
  • Weniger ist mehr bei der Bild­bear­beitung mit CSS

3.7. Tabellen und Aufzählungen

Wie bei Bildern, gilt auch hier, der Inhalt ist wichtiger als die Deko­ra­tion. Bei größeren Tabellen hin­ter­lege ich jede zweite Zeile mit einem sehr hellem Hin­ter­grund, um die zusam­men­hän­gen­den Dat­en zu grup­pieren. Anson­sten keine oder graue Lin­ien zwis­chen den Zeilen. Die Tabellen-Über­schriften sind meist durch das < th > -Tag schon gut dargestellt.
Aufzäh­lun­gen sind mit den visuellen Modus der Edi­toren in Word­Press für Nor­mal­nutzer bess­er zu erstellen. Die schwarzen Bul­lets und Quadrate sind in den meis­ten Fällen aus­re­ichend.

4. Rechtliches

Wer eine „de“-Topdomain besitzt, ist rechtlich zu fol­gen­dem verpflichtet:

  • Ein Impres­sum
    ◦ mit vollem Vor- und Nach­na­men
    ◦ mit voller postal­is­ch­er Anschrift, kein Post­fach
    ◦ Kon­tak­t­möglichkeit über Tele­fon oder Fax, das täglich genutzt wird
    ◦ voll­ständi­ge E-Mail-Adresse
    ◦ vorgeschrieben Anzeige von gewerblichen Dat­en
  • Daten­schutzerk­lärung
  • SSL-Ver­schlüs­selung bei Kon­takt zwis­chen Besuch­er und Betreiber der Web­seite

Ein Post­fach kann zusät­zlich angegeben wer­den.

Ihr Kom­men­tar⬆ Inhaltsverze­ich­nis