Open Graph in WordPress verwenden

open-graph-icon-logo

Der sog. Open Graph ist ein Protokoll, mit dessen Hilfe ihr u.a. Informationen an Social Media-Plattformen übermitteln könnt. Über spezielle meta-Befehle im <head> der Seite werden die Informationen übermittelt. Eure Seite bzw. die einzelnen Beiträge eures Blogs werden anschließend prominenter bei Facebook, Twitter oder Google angezeigt. Mit dem in diesem Beitrag archivierten Snippet, integriert ihr den Open Graph in WordPress.

Beitrag zu Ende lesen

Automatisches Inhaltsverzeichnis mit jQuery

inhaltsverzeichnis-jquery

Ein Inhaltsverzeichnis in den Beiträgen eines Blogs oder in komplexen Unterseiten einer Website bietet sich aus verschiedenen Gründen an. Einerseits bietet ihr euren Lesern einen Mehrwert, andererseits verbessert ihr die Struktur des Beitrags für Suchmaschinen.
Wenn ihr ein Inhaltsverzeichnis erstellen möchtet, solltet ihr dafür einen Automatismus einsetzen. Andernfalls müsst ihr das Inhaltsverzeichnis jedes Mal aufwändig anpassen, sobald die Inhalte der Seite verändert werden. In diesem Beitrag archiviere ich ein jQuery-Snippet mit dessen Hilfe ein Inhaltsverzeichnis erzeugt und eingefügt werden kann.

Beitrag zu Ende lesen

Automatische Verlinkung von Nummern verhindern

iban

Wenn wir mit dem Smartphone eine Telefonnummer auf einer Website suchen, dann möchten wir häufig auch direkt anrufen. Es bietet sich daher an, die Telefonnummer entsprechend zu verlinken um dem Anwender die Bedienung zu erleichtern. Wie ihr solche Links zu verschiedenen Diensten und Apps herstellt, habe ich im Blog bereits behandelt.

Einige mobile Betriebssysteme erkennen Telefonnummern sogar selbstständig und wandeln die Zahlenkette automatisch in einen Link mit Anruf-Funktion um. Lästig nur, wenn der Automatismus auch andere Zahlenketten als Telefonnummern interpretiert. In diesem Fall sollte man die Funktion deaktivieren.

Beitrag zu Ende lesen

Gestaltungsraster (CSS-Grids) im Web Design

CSS Grids

Eine moderne Website basiert i.d.R. auf einem sog. CSS-Grid System - einem Gestaltungsraster. Das Raster hat dabei verschiedene Aufgaben: Einerseits trägt es zu einem strukturierten Layout bei und sorgt dafür, dass eine Website professionell wirkt, andererseits unterstützt das Raster auch den Web Designer bei der Entwicklung, indem es vordefinierte CSS-Klassen bereitstellt.
In diesem Beitrag möchte ich das Thema Gestaltungsraster im Web ausführlich beleuchten. Ich gehe detailliert auf Responsive Grid Systeme ein, und erkläre die Funktionsweise an verschiedenen Beispielen.

Beitrag zu Ende lesen

Responsive Images – <picture>, srcset, sizes & Co.

responsiveimages

Flexible Bilder sind ein wichtiger Bestandteil von responsiven Websites. Doch leider stellte genau dieses Thema Web Designer in den vergangenen Jahren vor enorme Herausforderungen. Ohne Scripte war es bisher nicht möglich Bilder ohne Performance- oder Qualitätsverluste auf allen Displaygrößen darzustellen. Und selbst mit der Unterstützung von Scripten waren einige Änderungen – z. B. die Veränderung des Bildausschnitts – eine mehr als lästige Aufgabe. Mit <picture>, srcset & sizes sind neue HTML-Elemente und -Attribute in die Spezifikation gewandert, mit deren Hilfe sich viele Probleme bald lösen werden.

Beitrag zu Ende lesen