kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Animiertes Scrolling (Smooth Scrolling) mit jQuery

Die Verwendung von Sprungmarken (Ankern) kann deutlich zur Verbesserung der Benutzerfreundlichkeit von Webprojekten beitragen und findet daher häufige Anwendung. Anker werden unter anderem in Inhaltsverzeichnissen, für »Zurück nach oben«-Buttons oder zur Navigation auf One-Pagern verwendet. Leider springt der Anwender bei einem Klick auf die Sprungmarke schlagartig zum Ziel – was die Orientierung und die User Experience beeinträchtigen kann. In diesem Beitrag archivieren wir ein Snippet, mit dem ihr das Verhalten durch ein animiertes Scrollen (Smooth Scrolling) ersetzen könnt.

Beitrag zu Ende lesen

Automatisches Canonical-Tag von WordPress entfernen

Mit Hilfe des sog. Canonical-Tags wird die kanonische URL einer Unterseite angegeben. In diesem Zusammenhang gibt es einiges zu beachten, doch wenn alles richtig gemacht wurde, kann der Canonical Tag dabei helfen Double-Content zu vermeiden und das Suchmaschinen-Ranking zu verbessern. WordPress erzeugt den notwendigen Code automatisch und fügt ihn in den <head> der Website ein. In den meisten Fällen ist das gewünscht – jedoch nicht immer. In diesem Beitrag archivieren wir ein Code-Snippet, mit dem ihr den automatisch erzeugten Canonical-Tag von WordPress entfernen könnt.

Beitrag zu Ende lesen

Defekte Bilder in WordPress 4.4 korrigieren

Mit WordPress 4.4 haben responsive Images Einzug in das CMS gehalten. Leider führt die Funktion bei zahlreichen Anwendern zu Problemen mit der Bilddarstellung. Auch ich konnte das Problem bei zwei laufenden Projekten rekonstruieren. Mit einem kleinen Code-Snippet kann die Funktion deaktiviert werden. Die Zeit bis zur Korrektur lässt sich so überbrücken.

Beitrag zu Ende lesen

Gezeichnete SVG-Pfade mit CSS animieren

Mit SVG/CSS-Animationen lassen sich ansehnliche Effekte erzeugen. Sehr beliebt ist beispielsweise der sog. »Line-Draw-Effect«, bei dem ein Pfad animiert gezeichnet wird. Um den Effekt herzustellen, behilft man sich einem Trick im Zusammenhang mit gestrichelten Linien. In diesem Beitrag erklären wir das Grundprinzip anhand eines leicht nachvollziehbaren Beispiels.

Beitrag zu Ende lesen

Emojis aus WordPress entfernen

Seit WordPress 4.2 habt ihr die Möglichkeit Emojis in euren Beiträgen zu verwenden. Leider wird das JavaScript, das die Darstellung der Grafiken ermöglicht, auch dann geladen, wenn ihr gar keine Emojis verwendet. Und darüber hinaus schreibt WordPress das Script in den <head> der Website, was wiederum von Performance-Optimierungs-Tools wie Googles Page Speed Insights kritisiert wird. In diesem Beitrag archivieren wir ein Snippet mit dem Ihr die Emojis deaktivieren könnt.

Beitrag zu Ende lesen

Link-Tipps zum Thema