Webseiten mit KiSS* Keep It Simple & Stupid

1 – ProfessionellSolides Handwerk

KiSS Webseiten sind von Hand programmiert und schleppen daher keinen überflüssigen Code mit sich. Mit den aktuellen Werkzeugen HTML5 und CSS3, und vielleicht eine Prise JavaScript kann man in modernen Browsern alles darstellen, was auf der Wunschliste der Designer steht. Ein stimmiges Konzept und wohlstrukturierter Inhalt sind die Voraussetzungen für eine Webseite, die für den Nutzer ansprechend, für die Suchmaschine semantisch korrekt, und für den Programmierer übersichtlich aufgebaut ist.

Google findet diese Seite gut: 100/100 Punkten bei pagespeed insight.

2 – PerformantKlein und blitzschnell

Die Größe einer Website ist über die Jahre stark angewachsen: mittlerweile sind mehrere Megabyte keine Seltenheit mehr. Meist bremsen Content Management Systeme (CMS) mit riesigem Overhead in Tateinheit mit zu vielen, zu großen Bildern den Aufbau einer Seite so stark aus, der der genervte Nutzer schon eine andere Website aufgerufen hat. Besonders ärgerlich ist der mobile Aufruf einer zu großen Seite ... dabei wollte man doch nur mal eben nach den Öffnungszeiten schauen.

Diese Website ist insgesamt ca. 130 kb (= 0,13 MB) klein und wird daher schnell geladen, auch wenn mal wieder nicht soviele Daten durch das Netz gehen. Bilddateien werden auf die optimale Größe (Pixel und Kilobyte) heruntergerechnet und skaliert. Seitenaufbau und Programmierung berücksichtigen die schnelle Darstellung von Content, damit man schon mal lesen kann, während der Rest noch geladen wird.

• HTML: 17 kb
• Logo: PNG, 4 kb
• Bild Kontakt: WEBP, 31 kb
• Webfont: lokal eingebunden, 20 kb
• Hintergrund: WEBP, 52 kb

3 – ResponsiveSieht gut aus – auf allen Screens

"Optimiert für Netscape Navigator und 800 x 600". Die Älteren unter uns erinnern sich. Mittlerweile gibt es unzählige Bildschirmgrößen - vom kleinen 4 Zoll iPhone (320 x 568, hochkant) bis zum hochauflösenden 27" Monitor mit 5120 x 2880 Pixeln im Querformat oder sogar TV bis Leinwand Größen.

4 – BarrierearmBrille ist nicht behindert

Man muss nicht gleich blind sein, um Barrierefreiheit (in der Realität ist es Barrierearmut) geniessen zu können. Ist die Website semantisch sinnvoll aufgebaut, finden sich Screenreader und Suchmaschinen gleichermassen gut zurecht.

5 – nachhaltigGeringer CO₂ Ausstoß

Eine Website verbraucht Energie, sogar dann, wenn sie nicht aufgerufen wird: die Daten müssen auf Servern vorgehalten werden, damit man sie abrufen kann. Beim Aufruf einer Seite müssen die Daten über verschiedene Server zum Nutzer geleitet werden. Das alles braucht Energie und man erkennt: je kleiner die Webseite, je weniger Energie verbraucht sie. Wenn man testen möchte, wie hoch der Impact auf die Umwelt ist, kann man bei websitecarbon.com testen, wieviel CO₂ diese oder die eigene Website verbraucht.

Dos & DontsWebdesign Knigge

If you can't English, frag the author, he erklärs you that. ;-D

1. Think! What does your user expect?
2. Use semantic HTML
3. Use static HTML, in most cases a CMS is the wrong choice for the client
4. Use less images ... no, even less!
5. DO NOT use .png for images
6. DO NOT use sliders
7. Use .webp for images or .jpg with ImageOptim optimization
8. Use loading="lazy" for images
9. Don't use Google webfonts, embedd local
10. Use preload="none" in video tag
11. DO USE value="email" in forms
12. Don't use cookies/analytics/whatever® unless you monitor your site
13. Watch contrast
14. Use a readable font for continuous text

MedienArtikel zu KiSS

• Definition KiSS Prinzip
• Es muss nicht immer webfonts sein: System fonts don't have to be ugly
• Sparsame Websites: formafantasma.com
• 20 ways to make your website more energy efficient (en)
• Spiegel: Nur nachhaltige Digitalisierung kann das Klima retter
• Grüne Webhoster The green Web foundation
• Firefox plugin: wie groß ist mein Surf-Fußabdruck
• Spiegel: Was das Internet mit dem Klimawandel zu tun hat
• ZEIT: EU-Kommissarin warnt vor Stromverbrauch im Internet
• Barrierearm: Wie sieht der Farbenblinde?

KontaktAbout me

Datenschutz: Diese Website sammelt keine Daten. Keine Cookies, keine externen Webfonts, kein Tracking, kein Newsletter, kein Formular.
Danke. Bitte. 🤓