Aus der Praxis – nicht aus dem Lehrbuch

Ich bin Marcel. Webdesigner, Motorradfahrer und ich schreibe. Das hier ist meine eigene Ecke im Netz – hier sammle ich, was mich beschäftigt: Bikelife, Webdesign und alles dazwischen.

Mehr über mich


Ausschnitt aus dem WordPress-Adminbereich: der «Nachrichten-Eingang» des Plugins Flamingo auf hellem Grund, an den Rändern unscharf. Ausgewählt ist die Ansicht «Spam (1)», daneben steht «Papierkorb (40)». Der einzige Eintrag der Liste ist die Testnachricht von «viagra-test-123 » aus dem Kanal «Contact Form 7». In der Bildmitte, unter dem Eintrag, steht ein weinrotes, halbtransparent gefülltes Schild.

Spam trotz Akismet – Contact Form 7 anbinden

Es kam immer mehr Spam über mein Kontaktformular – trotz installiertem und aktivem Akismet. Der Grund: Contact Form 7 leitet Nachrichten nur dann an Akismet weiter, wenn die Felder im Formular die passenden Akismet-Optionen tragen. Ohne sie ist das Formular ungeschützt, auch wenn Akismet aktiv ist.

Weiterlesen: Spam trotz Akismet – Contact Form 7 anbinden
JavaScript-Code in einem dunklen Editor, unten scharf, nach oben zunehmend unscharf. Im Fokus steht der Listener für das Ereignis hidden.bs.modal: Er holt den gemerkten Auslöser mit modalTriggers.get( modalElement ), prüft mit document.contains( trigger ), ob er noch im Dokument steht, setzt mit trigger.focus() den Fokus zurück und löscht danach den Eintrag mit modalTriggers.delete( modalElement ). Darüber, unscharf, der Listener für hide.bs.modal mit document.activeElement.blur().

Wieder da, wo man war – Fokus bei Bootstrap-Modals

Nach dem Schliessen eines Bootstrap-Modals soll der Fokus wieder dort landen, wo er vorher war – beim Element (meist ein Button), das den Modal geöffnet hat. Das betrifft die Bedienung mit Tastatur, Screenreader und Maus. Ein kleines JavaScript löst das zentral für alle Modals einer Seite, auch dort, wo Bootstrap den auslösenden Button nicht selbst kennt.

Weiterlesen: Wieder da, wo man war – Fokus bei Bootstrap-Modals
Sechs stilisierte Cards auf grauem Grund, angeordnet in einem Raster aus zwei Reihen zu je drei. Jede Card hat einen weinroten Kopfbereich mit einer grossen weissen Zahl, darunter angedeutete Textzeilen als dunkle und graue Balken sowie einen weinroten Button. Die Zahlen stehen in gemischter Reihenfolge: oben 3, 1 und 5, unten 2, 4 und 6.

Jedes Mal anders – HTML-Cards zufällig anordnen

Wenn HTML-Cards bei jedem Seitenaufruf in einer anderen Reihenfolge erscheinen sollen, lässt sich das mit ein wenig JavaScript und CSS lösen – ganz ohne Eingriff ins Backend. Die Cards sind zunächst unsichtbar und ihr Platz auf der Seite ist von Anfang an reserviert, damit sich der Inhalt darunter nicht verschiebt. Sind sie gemischt, erscheinen sie.

Weiterlesen: Jedes Mal anders – HTML-Cards zufällig anordnen
Instrumente auf Orientteppichen in der Antikscheune, aufgenommen auf Bodenhöhe. In der Mitte lehnt eine gelbe E-Gitarre mit rotem Gurt an einem Mesa/Boogie-Verstärker, dahinter ein kupferfarbenes Schlagzeug, links eine Akustikgitarre, rechts ein schwarzer Bass vor einem Marshall-Verstärker, dazwischen Mikrofonständer und Kabel. Im Hintergrund Holzwände, grüne Fensterläden und ein alter Schrank mit Krügen und Vasen, oben links ein violetter Scheinwerfer, alles im warmen Licht.

In der Antikscheune – wenn Musik zum Leben erwacht

Zwischen allerhand antiken Gegenständen konnte ich am 5.9.2026 beim Freundeabend von «Best Selection», einer Band, in der meine Mutter singt – der Name ist kein Zufall –, in der Antikscheune beim Haus Sonne in Sigmarszell dabei sein. Eine Auswahl meiner Bilder von diesem Abend gibt’s in einer Galerie.

Weiterlesen: In der Antikscheune – wenn Musik zum Leben erwacht
Weinroter Hintergrund mit einem gleichmässigen Muster aus blassen Verbotszeichen, also Kreisen mit diagonalem Strich. In der Mitte ist das Muster ausgespart: Dort steht ein weisses Verbotszeichen, auf das von rechts oben eine weiss umrandete Sprechblase zeigt. In der Sprechblase stehen zwei helle Balken als angedeutete Textzeilen, wie bei einem Tooltip.

Deaktiviert und trotzdem erklärend – A11Y-konforme Tooltips

Ein deaktivierter Button reagiert weder auf Maus noch Tastatur und einen Tooltip zeigt er dadurch auch nicht. Gerade dann wäre aber eine Erklärung hilfreich, denn ein Symbol, ein Icon, der Text oder eine Funktion sind oft nicht selbsterklärend für den jetzigen Status. Ein umschliessendes Element und ein paar ARIA-Attribute schaffen Abhilfe – auch für Screenreader.

Weiterlesen: Deaktiviert und trotzdem erklärend – A11Y-konforme Tooltips
Blick vom Elsterberg durch einen verwitterten Holzrahmen auf den Edersee in Richtung Staumauer, im warmen Licht. Der See windet sich zwischen bewaldeten Hügeln, entlang der Ufer ziehen sich breite helle Streifen freigelegten Bodens, rechts ragt eine lange Sandbank ins Wasser. Darüber blauer Himmel mit Wolken.

Ein Besuch in der Heimat

Diesen August war ich seit langer Zeit wieder einmal in meiner Heimat – und dieses Mal nicht nur auf der Durchreise, sondern für ein paar Tage Ferien, von Waldeck am Edersee in Hessen bis nach Eisenach in Thüringen. Tage, die mir gezeigt haben, wie weit ich mich von meiner Heimat entfernt habe.

Weiterlesen: Ein Besuch in der Heimat