Mei­ne Leit­li­ni­en für das Er­stel­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, so­weit als mög­lich, wis­sen­schaft­li­che Grund­sät­ze und Er­kennt­nis­se bei der Er­stel­lung zu nut­zen.
Die­se Do­ku­men­ta­ti­on wur­de mit dem neu­en “Gutenberg”-Editor er­stellt.

In­halts­ver­zeich­nis

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

1. Si­cher­heit

Bei der Kon­zep­ti­on ei­ner Web­sei­te steht an ers­ter Stel­le die Si­cher­heit. Denn wer will über ei­nen Te­le­fon­an­ruf er­fah­ren, das frem­de oder po­li­ti­sche In­hal­te von An­de­ren auf der ei­ge­nen Web­sei­te plat­ziert sind. Ja, ist schon al­les vor­ge­kom­men in mei­ner Pra­xis.
Oder wie kommt man auf das ei­ge­ne Word­Press, wenn Be­nut­zer­na­me und Kenn­wort von je­mand an­de­rem ge­än­dert wur­de? Dann wäre ein auch Back­up hilf­reich um die Web­sei­te neu zu er­stel­len.

1.1. Log­in

Log­in und Be­nut­zer­na­me

Log­in / Be­nut­zer­na­me / User müs­sen wie auch das Pass­wort / Kenn­wort aus al­len fol­gen­den Zei­chen­grup­pen be­stehen:

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

Wor­aus der Be­nut­zer­na­me und das Kenn­wort na­tür­lich nicht be­stehen soll­te, aus Wör­tern die in je­dem Le­xi­ka vor­kom­men und erst recht nicht aus ei­nem be­kann­ten oder gar noch dem ei­ge­nen Na­men. Aber das soll­te schon als Grund­wis­sen der Si­cher­heit vor­aus­ge­setzt sein.

Be­nut­zer­na­me und an­ge­zeig­ter Be­nut­zer­na­me des Au­tors

Be­ach­te, dass der Log­in-Be­nut­zer­na­me nicht dem an­ge­zeig­ten Au­toren-Be­nut­zer­na­me zu den Bei­trä­gen iden­tisch sein muss, aber trotz­dem zu­ge­ord­net ist! Hier ein Bei­spiel wie für den in­ter­nen Be­nut­zer ”)jf?g§K:n_Zd4=3a.s@#ßv+P” der an­ge­zeig­te Be­nut­zer­na­me “Frank Ro­sen­ber­ger” an­ge­zeigt wird. In Wahr­heit ist die­ser in­ter­ne Be­nut­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 Si­cher­heits-High­light, macht den An­grei­fer je­doch schon un­si­cher.

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


Ohne Ver­schlüs­se­lung über „https“, wer­den Web­sei­ten-In­ha­ber bald kei­ne Kon­takt­mails über ihre Web­sei­te er­hal­ten. Denn wer soll­te so dumm sein, wich­ti­ge Da­ten un­ver­schlüs­selt durch das In­ter­net zu ja­gen.

1.3. Back­up

Ein Back­up soll­te zu­min­dest nach je­der grö­ße­ren Än­de­rung, nach je­dem neu­en Bei­trag oder je­der neu­en Sei­te er­stellt wer­den.
Was soll wie ge­si­chert wer­den:

  • In­hal­te, also Tex­te mit dem Plugin „Word­Press Im­porter“ über Menü „Werk­zeu­ge“ und dann „Da­ten ex­por­tie­ren“
  • Me­di­en si­chern mit ei­nem FTP-Pro­gramm, und zwar das Ver­zeich­nis „wp-con­tent“ → „uploads“
  • das CSS si­chern mit copy und pas­te in eine Text­da­tei, zu CSS wei­ter un­ten mehr
  • zu­sätz­lich könn­te über ftp noch das mög­li­cher­wei­se ge­kauf­te The­me im Ver­zeich­nis „wp-con­tent“ → „the­mes“ ge­si­chert wer­den

So­mit soll­te zu­min­dest das Wich­tigs­te für den Ernst­fall hin­ter­legt sein.

Be­ach­te, ein Si­chern der ge­sam­ten Ver­zeich­nis­struk­tur von Word­Press im Webspace, macht we­nig Sinn, da ei­ni­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 we­sent­li­che re­du­zie­ren

Nur wirk­lich ge­nutz­te Plugins in­stal­lie­ren. Jede über­flüs­si­ge Soft­ware kann ei­nem An­griffs­sze­na­rio die­nen. Nach dem Aus­pro­bie­ren von Plugins, die nicht ge­nutz­ten wer­den, die­se dann wie­der de­instal­lie­ren.

1.5. Ja­va­script

Nicht nur der Script­kid­die, auch an­de­re, wie die Kon­kur­renz, ver­su­chen sich am leich­tes­ten An­griff.
Also kon­se­quent den Ein­satz von Ja­va­script re­du­zie­ren.

1.6. Fire­wall und An­ti­vi­rus

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

2. Tech­nik

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

2.1. Edi­tor

Bis­her kam „Ti­nyMCE“ als vi­su­el­ler Edi­tor in Word­Press, der mir sehr ent­ge­gen kam, da ich oh­ne­hin kaum den „Visuell“-Modus nut­ze, son­dern den trans­pa­ren­ten „Text“-Modus. Aber es ist wohl ab­seh­bar, dass der neue Edi­tor „Gu­ten­berg“ sein wird. „Gu­ten­berg“ ist für die ge­eig­net, die kei­ne Er­fah­rung mit HTML und CSS be­sit­zen oder Se­mi­pro­fes­sio­nel­le die bei­spiels­wei­se schnell und kom­for­ta­bel 3 Spal­ten er­stel­len wol­len mit un­ter­schied­li­chen Ei­gen­schaf­ten.

2.2. HTML

Wir sind der­zeit bei der Ver­si­on HTML5 an­ge­kom­men, die im ein­fa­chen HTML-Syn­tax oder im stren­gen XHTML-Syn­tax, ge­nutzt wer­den kann. Die Mög­lich­kei­ten sind un­glaub­lich, auch da­her zie­he ich den Text-Mo­dus von Edi­to­ren vor.

2.3. CSS

Das ei­ge­ne CSS ist am bes­ten auch in ei­ner ei­ge­nen Da­tei auf­ge­ho­ben. Ich selbst nut­ze ein sehr klei­nes Plugin für ei­ge­nes CSS. Das hat den Vor­teil, dass das The­me schnell ge­wech­selt wer­den kann und ich im­mer die vol­le Kon­trol­le über das Lay­out be­hal­te.

2.4. Schrift­quel­len

Als Schrift­quel­len bie­tet sich der On­line-Im­port zum Bei­spiel von Googg­le-Fonts an. Doch man kann auch ge­kauf­te oder an­de­re freie Schrif­ten auf dem ei­ge­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 zu­sätz­lich Weiß und Schwarz. Die Grund­far­be kann ent­spre­chend des ei­ge­nen Lo­gos, des Lo­gos ei­nes Hand­wer­kes be­zie­hungs­wei­se Dienst­leis­tung oder dem Wap­pen ei­ner Stadt oder Lan­des ent­spre­chend an­ge­lehnt sein.

3. Lay­out

3.1. Re­spon­si­ves Web­de­sign

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

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

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

  • eine Start­sei­te
  • ein Im­pres­sum
  • eine Haupt­na­vi­ga­ti­on
  • eine klei­ne Na­vi­ga­ti­on für Start­sei­te, „Nach oben ge­hen“, Im­pres­sum, Da­ten­schutz­er­klä­rung

Ob die Haupt­na­vi­ga­ti­on oben, rechts oder links liegt, ist egal, nur un­er­war­tet un­ten soll­te sie nicht lie­gen.
Der In­halt wird im­mer zen­tral an­ge­legt. An­sons­ten gilt es der Le­se­ge­wohn­heit von Links oben nach Rechts un­ten 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 um­bre­chen.

3.3. Be­nut­zer­freund­lich­keit

Wer auf der Start­sei­te / Front­pa­ge / Home­page sei­ne Be­su­cher schon mit Sli­ders und be­weg­tem In­halt ü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 In­halts­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 ge­hört auch die rich­ti­ge Schrift­art, be­zie­hungs­wei­se Schrift­ar­ten­fa­mi­lie. Bei den ho­her Auf­lö­sun­gen soll­te der Text un­be­dingt mit Se­ri­fen dar­ge­stellt wer­den. Ti­tel, Über­schrif­ten und Lo­gos kön­nen da­ge­gen pla­ka­tiv Se­ri­fen­los dar­ge­stellt wer­den. Se­ri­fen sind nicht „alte“ Schrift­ar­ten, son­dern Schrif­ten mit „Cha­rak­ter“ und so­mit bis zu 10x schnel­ler vom mensch­li­chem Ge­hirn zu er­fas­sen. Wo­bei se­riflose Schrif­ten eine sehr an­stren­gen­de Art ist In­hal­te zu ver­mit­teln, da das Ge­hirn sich je­den ein­zel­nen Buch­sta­ben er­kämp­fen muss.
Te­le­fon­num­mern kön­nen heut­zu­ta­ge mit ei­nem Link zum so­for­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 be­ach­ten, das auch seh­ge­schä­dig­te Web­sei­ten-Nut­zer das Lay­out er­le­ben kön­nen. Ein­fach ei­nen Screen­shot der Web­sei­te er­stel­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 ei­ni­ge seh­ge­schä­dig­te Men­schen die Web­sei­te er­fas­sen.
Doch auch das Ge­gen­teil, zu hohe Kon­tras­te, lässt die In­hal­te un­se­ri­ös er­schei­nen. Das­sel­be gilt auch bei zu ge­rin­gen Kon­tras­ten, wie mit­tel­graue Schrift auf hell­grau­em Hin­ter­grund.

Zu­sam­men­fas­sung:

  • Kei­ne be­weg­li­chen In­hal­te, zu­min­dest auf der Start­sei­te
  • 3 Haupt­in­hal­te auf der Start­sei­te
  • Se­ri­fen im In­hal­te
  • Se­ri­fen­los nur Ti­tel, Über­schrif­ten und Lo­gos, hier kön­nen auch ele­gan­te Schrif­ten, Hand­schrif­ten oder „Schön“-Schriften ver­wen­det wer­den.
  • Te­le­fon­num­mern, E-Mail­adres­sen gleich mit Hy­per­link zur so­for­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 er­ken­nen
  • An­ge­neh­me Farb­kom­po­si­tio­nen, nicht zu hohe Kon­tras­te und nicht zu ge­rin­ge Kon­tras­te

3.4. Farb­be­rech­nung

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

  • Be­zie­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 Lo­gos
  • Farb­ka­ta­lo­ge, meist den X11-Ka­ta­log, ba­sie­rend auf RGB, und die so­ge­nann­ten „web­si­che­ren“ Far­ben

3.5. Schrif­ten

Schrif­ten bin­de ich aus­schließ­lich über die ex­ter­ne CSS-Da­tei ein. An­sons­ten habe ich Schrif­ten schon oben in 4.2. Be­nut­zer­freund­lich­keit und in 3.4. Schrift­quel­len be­han­delt.

3.6. Bil­der

Ein schwie­ri­ges The­ma. Am bes­ten nur ei­ge­ne Bil­der nut­zen, da­mit die Rechts­la­ge klar ist. Bil­der nur we­nig oder gar nicht de­ko­rie­ren mit Schat­ten oder Rah­men. Das Bild selbst soll wir­ken.
Gro­ße Bil­der sind be­lieb­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 un­be­dingt klein hal­ten, so­mit ver­rin­gert sich die La­de­zeit und die Frus­tra­ti­on des Be­nut­zers. Das ge­lingt mit der Re­du­zie­rung der Auf­lö­sung bis höchs­tens 1.200px x 1.200px und wenn es Lo­gos oder tech­ni­sche Zeich­nun­gen sind, auch mit der Ver­rin­ge­rung der Farb­an­zahl. Be­ach­te, Fo­tos im JPG-For­mat ab­spei­chern und Zeich­nun­gen / Lo­gos 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, da­her ein­fach weg­las­sen. Run­de Lo­gos wie­der­um sind er­laubt.
Auch Tex­te in Fo­tos plat­zie­ren ist kei­ne gute Idee, denn das Bild wirkt nicht und der Text eben­so we­nig. Lo­gos mit Text ist wie­der in Ord­nung.
Be­ach­te, wenn das Bild mit Schat­ten und Rah­men und run­den Ecken und wei­te­rem zu­viel be­ar­bei­tet wird, ist das Bild in dem Hin­ter­grund ge­rückt, also ge­nau das Ge­gen­teil, was er­reicht wer­den soll­te.

Zu­sam­men­fas­sung:

  • Mög­lichst ei­ge­ne Bil­der nut­zen
  • Gro­ße Bil­der, statt klei­ne Bil­der
  • We­nig bis kei­ne De­ko­ra­ti­on
  • Auf­lö­sung der Di­men­si­on bis 1.200 px und nicht grö­ßer
  • Fo­tos in JPG-For­mat
  • Lo­gos und Zeich­nun­gen im PNG-For­mat
  • Kei­ne run­den Bil­der
  • We­ni­ger ist mehr bei der Bild­be­ar­bei­tung mit CSS

3.7. Ta­bel­len und Auf­zäh­lun­gen

Wie bei Bil­dern, gilt auch hier, der In­halt ist wich­ti­ger als die De­ko­ra­ti­on. Bei grö­ße­ren Ta­bel­len hin­ter­le­ge ich jede zwei­te Zei­le mit ei­nem sehr hel­lem Hin­ter­grund, um die zu­sam­men­hän­gen­den Da­ten zu grup­pie­ren. An­sons­ten kei­ne oder graue Li­ni­en zwi­schen den Zei­len. Die Ta­bel­len-Über­schrif­ten sind meist durch das < th > -Tag schon gut dar­ge­stellt.
Auf­zäh­lun­gen sind mit den vi­su­el­len Mo­dus der Edi­to­ren in Word­Press für Nor­mal­nut­zer bes­ser zu er­stel­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 be­sitzt, ist recht­lich zu fol­gen­dem ver­pflich­tet:

  • Ein Im­pres­sum
    ◦ mit vol­lem Vor- und Nach­na­men
    ◦ mit vol­ler pos­ta­li­scher An­schrift, kein Post­fach
    ◦ Kon­takt­mög­lich­keit über Te­le­fon oder Fax, das täg­lich ge­nutzt wird
    ◦ voll­stän­di­ge E-Mail-Adres­se
    ◦ vor­ge­schrie­ben An­zei­ge von ge­werb­li­chen Da­ten
  • Da­ten­schutz­er­klä­rung
  • SSL-Ver­schlüs­se­lung bei Kon­takt zwi­schen Be­su­cher und Be­trei­ber der Web­sei­te

Ein Post­fach kann zu­sätz­lich an­ge­ge­ben wer­den.

Ihr Kom­men­tar | Ihre Spen­de[Pos1] Sei­ten­an­fang