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


Eine Wand aus weissem Lorem-ipsum-Text auf weinrotem Grund, zur Bildmitte hin scharf und zu den Rändern unscharf. Mehrere Worte sind unterstrichen und heben sich vom übrigen Text ab.

Unterstrichen, aber richtig

Eine Unterstreichung in HTML mit CSS ist mehr als ein Strich unter dem Text. Mit «text-decoration: underline» ist die Unterstreichung erreicht, doch es steckt mehr dahinter. Mit Beispielen aus dem Alltag möchte ich aufzeigen, wie sich das feiner steuern lässt und «border-bottom» unnötig werden kann.

Weiterlesen: Unterstrichen, aber richtig
JavaScript-Code des Lightbox-Moduls, Fokus auf der Pinch-Zoom-Logik

Lightbox für WordPress – ohne Plugin

Jeder kennt sie, man setzt sie fast voraus, und sie rückt ein Bild oder anderen Inhalt vor einem abgedunkelten Hintergrund in den Fokus – eine Lightbox. Für WordPress lässt sich so etwas mit einem Plugin lösen – oder man programmiert etwas Schlankes, das nur lädt, wenn es gebraucht wird, und sonst nicht.

Weiterlesen: Lightbox für WordPress – ohne Plugin
Schwarze Triumph Street Triple R 675 mit roten Akzenten auf dem Seitenständer am Gurnigelpass, dahinter die vom Morgenlicht beschienenen Gipfel der Gantrisch-Kette über grünen Alpweiden.

Pendeln auf zwei Rädern

Nach zwei Wochen täglichem Pendeln auf zwei Rädern zur Arbeit kann ich sagen: Es ist schön, wieder so unterwegs zu sein. Meine Heilung bessert sich weiter und die Fahrtechnik kommt auch langsam zurück.

Weiterlesen: Pendeln auf zwei Rädern
Screenshot des Teilen-Dialogs auf marcelbest.com: ein modaler Dialog mit dem Titel «Teile den Beitrag» liegt über der abgedunkelten, unscharfen Seite. Darin die zu teilende URL in einem dunklen Feld und darunter eine Reihe Teilen-Symbole – Facebook, X, LinkedIn, Pinterest, WhatsApp, E-Mail und Kopieren. Über dem URL-Feld ist der Tooltip «URL in die Zwischenablage kopieren» eingeblendet, oben rechts ein Schliessen-Kreuz mit sichtbarem Fokus-Rahmen.

Modal oder nicht – das ist hier nicht die Frage

Einen Button zum Teilen meiner Beiträge – der den Fokus ganz aufs Teilen legt, so wie es YouTube macht, das wäre doch was. Also ein modaler Dialog (Modal). Was nach einer Fingerübung aussah, wurde zum Lehrstück: Ein Modal ist ein eigenes Dokument, und sobald man das realisiert, fängt die eigentliche Arbeit erst an.

Weiterlesen: Modal oder nicht – das ist hier nicht die Frage
Nahaufnahme der schwarzen Tastatur eines MacBook mit Schweizer Layout, im Vordergrund die Tasten Command, Option und die Komma-Taste.

Die Anführungszeichen, die sich verstecken

«Mach mal die französischen Anführungszeichen» – Wo die «Guillemets» auf der Schweizer Mac-Tastatur wirklich liegen, woher sie kommen und warum die Schweiz sie anders setzt als Deutschland.

Weiterlesen: Die Anführungszeichen, die sich verstecken
Zwei stilisierte Beitragsvorschau-Karten nebeneinander, getrennt durch ein nach rechts weisendes Winkelzeichen. Links hat nur der rote Weiterlesen-Button einen hellen Fokus-Rahmen; rechts liegt ein leichter roter Schleier über der ganzen Karte und zeigt sie als gesamte Klickfläche, während der Button seinen Fokus-Rahmen behält.

Weniger Code, mehr Barrierefreiheit

Die ganze Beitragsvorschau anklickbar machen, nicht nur den Weiterlesen-Link – und das barrierefrei. Klingt einfach, war es nicht. Bis ich merkte, dass ich das falsche Problem lösen wollte. Die richtige Lösung war dann fast peinlich simpel.

Weiterlesen: Weniger Code, mehr Barrierefreiheit