Webdesign, wie es wirklich ist. Erfahrungen und Einblicke aus dem Berufsalltag – WordPress, Bootstrap, Front-End. Aus der Praxis, nicht aus dem Lehrbuch.
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.
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.
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.
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.
Bei langen Tabellen verliert man schnell die Übersicht, wenn der Tabellenkopf aus dem Sichtfeld scrollt. Wenn man den Tabellenkopf mit CSS festhält, während die Zeilen darunter durchlaufen, behält man die Übersicht. Und das ist weniger aufwendig, als man denkt.
Bootstrap-Klassen per @extend zu übernehmen ist sehr praktisch. Bläht sich die CSS-Datei aber unkomprimiert auf 27 MB auf, ist das nicht OK. Man könnte folgern, dass sich @extend und Bootstrap nicht vertragen. Das hält einer Messung nicht stand: Teuer wird es nur bei wenigen, klar benennbaren Mustern.