#1
Nutze semantisches HTML
So vermeidest du viele Probleme, die du sonst umständlich lösen musst.
Und zack: barrierearm.
#2
Verzichte auf Slider
Erwiesenermaßen sinnlos: der Nutzer scrollt weiter auf der Suche nach den Öffnungszeiten.
#3
Nutze weniger Bilder
Ein Bild wiegt mehr als 1000 Worte. CO2-Fußabdruck.
#4
Nutze kleinere Bilder
Erst verkleinern (Pixelgröße), dann optimieren.
#5
Speichere im richtigen Format
JPG für Fotos, PNG für Transparenzen.
#6
loading=lazy
Am kleinsten sind die Bilder, die nicht geladen werden.
Ebenso Videos: preload=none
#7
type=email
Zeigt (mobile) die richtige Tastatur mit Kleinschreibung, @ und Punkt.
<input type="email">
#8
Webfonts lokal
Muss es unbedingt ein Webfont sein? Systemfonts don't have to be ugly.
#9
Achte auf ausreichenden Kontrast
Grau auf Hellgrau in 'Condensed Light Italic' in 14px ist zum Kotzen, nicht zum Lesen.
#10
Keine Cookies, kein Analytics
Belästige den Nutzer nicht mit technischen Entscheidungen.
Zeige lieber interessanten Inhalt.
#11
Designerhölle Blocksatz
Wunderbar im Buchdruck. Aber hier ist eben das Internet.