Mei­ne Leit­li­ni­en für das Erstel­len von Web­sei­ten

Als Bei­spiel für die Dar­stel­lung mei­ner Leit­li­ni­en neh­me ich hier Word­Press als CMS. Ich ver­su­che, soweit als mög­lich, wis­sen­schaft­li­che Grund­sät­ze und Erkennt­nis­se bei der Erstel­lung zu nut­zen.
Die­se Doku­men­ta­ti­on wur­de mit dem neu­en “Gutenberg”-Editor erstellt.

Inhalts­ver­zeich­nis

  1. Sicher­heit
  2. Tech­nik
  3. Lay­out
  4. Recht­li­ches

1. Sicher­heit

Bei der Kon­zep­ti­on einer Web­sei­te steht an ers­ter Stel­le die Sicher­heit. Denn wer will über einen Tele­fon­an­ruf erfah­ren, das frem­de oder poli­ti­sche Inhal­te von Ande­ren auf der eige­nen Web­sei­te plat­ziert sind. Ja, ist schon alles vor­ge­kom­men in mei­ner Pra­xis.
Oder wie kommt man auf das eige­ne Word­Press, wenn Benut­zer­na­me und Kenn­wort von jemand ande­rem geän­dert wur­de? Dann wäre ein auch Back­up hilf­reich um die Web­sei­te neu zu erstel­len.

1.1. Log­in

Log­in und Benut­zer­na­me

Log­in / Benut­zer­na­me / User müs­sen wie auch das Pass­wort / Kenn­wort aus allen fol­gen­den Zei­chen­grup­pen bestehen:

  • Groß­buch­sta­ben
  • Klein­buch­sta­ben
  • aner­kann­te Son­der­zei­chen, wie ! “ ? $ % ^ & )
  • Zif­fern
  • min­des­tens 24 Zei­chen

Wor­aus der Benut­zer­na­me und das Kenn­wort natür­lich nicht bestehen soll­te, aus Wör­tern die in jedem Lexi­ka vor­kom­men und erst recht nicht aus einem bekann­ten oder gar noch dem eige­nen Namen. Aber das soll­te schon als Grund­wis­sen der Sicher­heit vor­aus­ge­setzt sein.

Benut­zer­na­me und ange­zeig­ter Benut­zer­na­me des Autors

Beach­te, dass der Log­in-Benut­zer­na­me nicht dem ange­zeig­ten Autoren-Benut­zer­na­me zu den Bei­trä­gen iden­tisch sein muss, aber trotz­dem zuge­ord­net ist! Hier ein Bei­spiel wie für den inter­nen Benut­zer ”)jf?g§K:n_Zd4=3a.s@#ßv+P” der ange­zeig­te Benut­zer­na­me “Frank Rosen­ber­ger” ange­zeigt wird. In Wahr­heit ist die­ser inter­ne Benut­zer noch kom­ple­xer.

Log­in-URL

Die Log­in-URL mas­kie­re ich wie fol­gen­des Bei­spiel: „https://meinewebseite.de/K-j-3zp@mfq“. Das ist jetzt kein wirk­li­ches Sicher­heits-High­light, macht den Angrei­fer jedoch schon unsi­cher.

1.2. SSL-Ver­schlüs­se­lung


Ohne Ver­schlüs­se­lung über „https“, wer­den Web­sei­ten-Inha­ber bald kei­ne Kon­takt­mails über ihre Web­sei­te erhal­ten. Denn wer soll­te so dumm sein, wich­ti­ge Daten unver­schlüs­selt durch das Inter­net zu jagen.

1.3. Back­up

Ein Back­up soll­te zumin­dest nach jeder grö­ße­ren Ände­rung, nach jedem neu­en Bei­trag oder jeder neu­en Sei­te erstellt wer­den.
Was soll wie gesi­chert wer­den:

  • Inhal­te, also Tex­te mit dem Plugin „Word­Press Importer“ über Menü „Werk­zeu­ge“ und dann „Daten expor­tie­ren“
  • Medi­en sichern mit einem FTP-Pro­gramm, und zwar das Ver­zeich­nis „wp-con­tent“ → „uploads“
  • das CSS sichern mit copy und pas­te in eine Text­da­tei, zu CSS wei­ter unten mehr
  • zusätz­lich könn­te über ftp noch das mög­li­cher­wei­se gekauf­te The­me im Ver­zeich­nis „wp-con­tent“ → „the­mes“ gesi­chert wer­den

Somit soll­te zumin­dest das Wich­tigs­te für den Ernst­fall hin­ter­legt sein.

Beach­te, ein Sichern der gesam­ten Ver­zeich­nis­struk­tur von Word­Press im Webspace, macht wenig Sinn, da eini­ge Kon­fi­gu­ra­tio­nen sich nicht über­tra­gen las­sen auf eine wie­der auf­zu­bau­en­de Web­sei­te.

1.4. Plugins auf das wesent­li­che redu­zie­ren

Nur wirk­lich genutz­te Plugins instal­lie­ren. Jede über­flüs­si­ge Soft­ware kann einem Angriffs­sze­na­rio die­nen. Nach dem Aus­pro­bie­ren von Plugins, die nicht genutz­ten wer­den, die­se dann wie­der deinstal­lie­ren.

1.5. Java­script

Nicht nur der Script­kid­die, auch ande­re, wie die Kon­kur­renz, ver­su­chen sich am leich­tes­ten Angriff.
Also kon­se­quent den Ein­satz von Java­script redu­zie­ren.

1.6. Fire­wall und Anti­vi­rus

Es gibt für sehr sicher­heits­be­wuss­te Men­schen auch noch die Mög­lich­keit für Fire­walls und Anti­vi­ren-Maß­nah­men.

2. Tech­nik

Die Tech­nik unter­tei­le ich in Edi­tor, HTML, CSS, Schrift­quel­len und Far­ben.

2.1. Edi­tor

Bis­her kam „TinyMCE“ als visu­el­ler Edi­tor in Word­Press, der mir sehr ent­ge­gen kam, da ich ohne­hin kaum den „Visuell“-Modus nut­ze, son­dern den trans­pa­ren­ten „Text“-Modus. Aber es ist wohl abseh­bar, dass der neue Edi­tor „Guten­berg“ sein wird. „Guten­berg“ ist für die geeig­net, die kei­ne Erfah­rung mit HTML und CSS besit­zen oder Semi­pro­fes­sio­nel­le die bei­spiels­wei­se schnell und kom­for­ta­bel 3 Spal­ten erstel­len wol­len mit unter­schied­li­chen Eigen­schaf­ten.

2.2. HTML

Wir sind der­zeit bei der Ver­si­on HTML5 ange­kom­men, die im ein­fa­chen HTML-Syn­tax oder im stren­gen XHTML-Syn­tax, genutzt wer­den kann. Die Mög­lich­kei­ten sind unglaub­lich, auch daher zie­he ich den Text-Modus von Edi­to­ren vor.

2.3. CSS

Das eige­ne CSS ist am bes­ten auch in einer eige­nen Datei auf­ge­ho­ben. Ich selbst nut­ze ein sehr klei­nes Plugin für eige­nes CSS. Das hat den Vor­teil, dass das The­me schnell gewech­selt wer­den kann und ich immer die vol­le Kon­trol­le über das Lay­out behal­te.

2.4. Schrift­quel­len

Als Schrift­quel­len bie­tet sich der Online-Import zum Bei­spiel von Googg­le-Fonts an. Doch man kann auch gekauf­te oder ande­re freie Schrif­ten auf dem eige­nem Webspace per FTP hin­ter­le­gen.

2.5. Grund­sätz­li­che Far­ben

Min­des­tens eine Grund­far­be muss vor­han­den sein und von die­ser aus­ge­hend 1 bis 3 wei­te­re Far­ben und zusätz­lich Weiß und Schwarz. Die Grund­far­be kann ent­spre­chend des eige­nen Logos, des Logos eines Hand­wer­kes bezie­hungs­wei­se Dienst­leis­tung oder dem Wap­pen einer Stadt oder Lan­des ent­spre­chend ange­lehnt sein.

3. Lay­out

3.1. Respon­si­ves Web­de­sign

Vor allem muss eine Web­sei­te heu­te respon­siv sein. Das heißt, sie passt sich selbst der Auf­lö­sung des Moni­tors und dem Wie­der­ga­be­ge­rä­tes an.

3.2. Ein­tei­lung der Web­prä­sen­ta­ti­on

In jedem Fal­le soll­ten fol­gen­de Merk­ma­le exis­tie­ren:

  • eine Start­sei­te
  • ein Impres­sum
  • eine Haupt­na­vi­ga­ti­on
  • eine klei­ne Navi­ga­ti­on für Start­sei­te, „Nach oben gehen“, Impres­sum, Daten­schutz­er­klä­rung

Ob die Haupt­na­vi­ga­ti­on oben, rechts oder links liegt, ist egal, nur uner­war­tet unten soll­te sie nicht lie­gen.
Der Inhalt wird immer zen­tral ange­legt. Ansons­ten gilt es der Lese­ge­wohn­heit von Links oben nach Rechts unten die Prio­ri­tä­ten zu ver­tei­len.
Die Haupt­na­vi­ga­ti­on soll­te nicht über­frach­tet wer­den und als Faust­re­gel bei 1.024px Brei­te nicht umbre­chen.

3.3. Benut­zer­freund­lich­keit

Wer auf der Start­sei­te / Front­pa­ge / Home­page sei­ne Besu­cher schon mit Sli­ders und beweg­tem Inhalt über­for­dert, braucht sich nicht zu wun­dern, wenn die­se schnell ver­las­sen wird. Auf der Start­sei­te soll­ten bis zu 3 wich­ti­ge Inhalts­hin­wei­se, auch But­tons, lie­gen, sonst ist auch hier die Auf­merk­sam­keits­span­ne über­for­dert.
Die Web­sei­te soll­te les­bar sein, dazu gehört auch die rich­ti­ge Schrift­art, bezie­hungs­wei­se Schrift­ar­ten­fa­mi­lie. Bei den hoher Auf­lö­sun­gen soll­te der Text unbe­dingt mit Seri­fen dar­ge­stellt wer­den. Titel, Über­schrif­ten und Logos kön­nen dage­gen pla­ka­tiv Seri­fen­los dar­ge­stellt wer­den. Seri­fen sind nicht „alte“ Schrift­ar­ten, son­dern Schrif­ten mit „Cha­rak­ter“ und somit bis zu 10x schnel­ler vom mensch­li­chem Gehirn zu erfas­sen. Wobei seriflose Schrif­ten eine sehr anstren­gen­de Art ist Inhal­te zu ver­mit­teln, da das Gehirn sich jeden ein­zel­nen Buch­sta­ben erkämp­fen muss.
Tele­fon­num­mern kön­nen heut­zu­ta­ge mit einem Link zum sofor­ti­gem Wäh­len aus­ge­stat­tet wer­den, das macht Smart­pho­ne-Nut­zer zum schnel­lem Kun­den.
Kon­tras­te beach­ten, das auch seh­ge­schä­dig­te Web­sei­ten-Nut­zer das Lay­out erle­ben kön­nen. Ein­fach einen Screen­shot der Web­sei­te erstel­len und das Bild mal in Grau­tö­ne dar­stel­len las­sen, so hat man die Mög­lich­keit zu Emp­fin­den wie eini­ge seh­ge­schä­dig­te Men­schen die Web­sei­te erfas­sen.
Doch auch das Gegen­teil, zu hohe Kon­tras­te, lässt die Inhal­te unse­ri­ös erschei­nen. Das­sel­be gilt auch bei zu gerin­gen Kon­tras­ten, wie mit­tel­graue Schrift auf hell­grau­em Hin­ter­grund.

Zusam­men­fas­sung:

  • Kei­ne beweg­li­chen Inhal­te, zumin­dest auf der Start­sei­te
  • 3 Haupt­in­hal­te auf der Start­sei­te
  • Seri­fen im Inhal­te
  • Seri­fen­los nur Titel, Über­schrif­ten und Logos, hier kön­nen auch ele­gan­te Schrif­ten, Hand­schrif­ten oder „Schön“-Schriften ver­wen­det wer­den.
  • Tele­fon­num­mern, E-Mail­adres­sen gleich mit Hyper­link zur sofor­ti­gen Nut­zung ver­se­hen
  • Far­ben so aus­wäh­len, das Seh­be­hin­der­te trotz­dem Kon­tras­te erken­nen
  • Ange­neh­me Farb­kom­po­si­tio­nen, nicht zu hohe Kon­tras­te und nicht zu gerin­ge Kon­tras­te

3.4. Farb­be­rech­nung

Die Far­ben wer­den ent­spre­chend des Inhal­tes der Web­sei­te berech­net.
Ich nut­ze für die Far­ben:

  • Bezie­hun­gen der Far­ben, wie Farb­per­spek­ti­ven, Quan­ti­täts­kon­trast und kom­ple­men­tä­re Far­ben
  • Die kal­te oder die war­me Wir­kung, ent­spre­chend des Web­sei­ten­in­hal­tes
  • Farb­grup­pen, zum Bei­spiel von Flag­gen, Wap­pen und Logos
  • Farb­ka­ta­lo­ge, meist den X11-Kata­log, basie­rend auf RGB, und die soge­nann­ten „web­si­che­ren“ Far­ben

3.5. Schrif­ten

Schrif­ten bin­de ich aus­schließ­lich über die exter­ne CSS-Datei ein. Ansons­ten habe ich Schrif­ten schon oben in 4.2. Benut­zer­freund­lich­keit und in 3.4. Schrift­quel­len behan­delt.

3.6. Bil­der

Ein schwie­ri­ges The­ma. Am bes­ten nur eige­ne Bil­der nut­zen, damit die Rechts­la­ge klar ist. Bil­der nur wenig oder gar nicht deko­rie­ren mit Schat­ten oder Rah­men. Das Bild selbst soll wir­ken.
Gro­ße Bil­der sind belieb­ter als klei­ne Bil­der.
Trotz­dem kei­ne Bil­der hin­ter viel Text als Wall­pa­per, ent­spricht dann dem „Text im Bild“.
Die Spei­cher­grö­ße der Bil­der unbe­dingt klein hal­ten, somit ver­rin­gert sich die Lade­zeit und die Frus­tra­ti­on des Benut­zers. Das gelingt mit der Redu­zie­rung der Auf­lö­sung bis höchs­tens 1.200px x 1.200px und wenn es Logos oder tech­ni­sche Zeich­nun­gen sind, auch mit der Ver­rin­ge­rung der Farb­an­zahl. Beach­te, Fotos im JPG-For­mat abspei­chern und Zeich­nun­gen / Logos im PNG-For­mat spei­chern. Pro­fis kön­nen selbst­ver­ständ­lich das Qua­li­täts-For­mat SVG nut­zen, wenn es in Word­Press frei­ge­schal­tet wur­de.
Ein run­des Bild ent­spricht nicht der nor­ma­len Seh­ge­wohn­heit, daher ein­fach weg­las­sen. Run­de Logos wie­der­um sind erlaubt.
Auch Tex­te in Fotos plat­zie­ren ist kei­ne gute Idee, denn das Bild wirkt nicht und der Text eben­so wenig. Logos mit Text ist wie­der in Ord­nung.
Beach­te, wenn das Bild mit Schat­ten und Rah­men und run­den Ecken und wei­te­rem zuviel bear­bei­tet wird, ist das Bild in dem Hin­ter­grund gerückt, also genau das Gegen­teil, was erreicht wer­den soll­te.

Zusam­men­fas­sung:

  • Mög­lichst eige­ne Bil­der nut­zen
  • Gro­ße Bil­der, statt klei­ne Bil­der
  • Wenig bis kei­ne Deko­ra­ti­on
  • Auf­lö­sung der Dimen­si­on bis 1.200 px und nicht grö­ßer
  • Fotos in JPG-For­mat
  • Logos und Zeich­nun­gen im PNG-For­mat
  • Kei­ne run­den Bil­der
  • Weni­ger ist mehr bei der Bild­be­ar­bei­tung mit CSS

3.7. Tabel­len und Auf­zäh­lun­gen

Wie bei Bil­dern, gilt auch hier, der Inhalt ist wich­ti­ger als die Deko­ra­ti­on. Bei grö­ße­ren Tabel­len hin­ter­le­ge ich jede zwei­te Zei­le mit einem sehr hel­lem Hin­ter­grund, um die zusam­men­hän­gen­den Daten zu grup­pie­ren. Ansons­ten kei­ne oder graue Lini­en zwi­schen den Zei­len. Die Tabel­len-Über­schrif­ten sind meist durch das < th > -Tag schon gut dar­ge­stellt.
Auf­zäh­lun­gen sind mit den visu­el­len Modus der Edi­to­ren in Word­Press für Nor­mal­nut­zer bes­ser zu erstel­len. Die schwar­zen Bul­lets und Qua­dra­te sind in den meis­ten Fäl­len aus­rei­chend.

4. Recht­li­ches

Wer eine „de“-Topdomain besitzt, ist recht­lich zu fol­gen­dem ver­pflich­tet:

  • Ein Impres­sum
    ◦ mit vol­lem Vor- und Nach­na­men
    ◦ mit vol­ler pos­ta­li­scher Anschrift, kein Post­fach
    ◦ Kon­takt­mög­lich­keit über Tele­fon oder Fax, das täg­lich genutzt wird
    ◦ voll­stän­di­ge E-Mail-Adres­se
    ◦ vor­ge­schrie­ben Anzei­ge von gewerb­li­chen Daten
  • Daten­schutz­er­klä­rung
  • SSL-Ver­schlüs­se­lung bei Kon­takt zwi­schen Besu­cher und Betrei­ber der Web­sei­te

Ein Post­fach kann zusätz­lich ange­ge­ben wer­den.

Ihr Kom­men­tar⬆ Sei­ten­an­fang