Flexible Videos im Responsive Webdesign

responsive-videos

Wenn Ihr eine Website mit Media Queries für mobile Endgeräte optimiert und eingebettete Videos von YouTube, Vimeo und Co. verwendet, werdet ihr recht schnell merken, dass es hier ein Problem gibt. Das Layout passt sich zwar flexibel der Breite des Displays bzw. des Monitors an, das Video reagiert auf die CSS-Angaben jedoch nicht und behält seine feste Größe. In der mobilen Version seht ihr dann entweder ein abgeschnittenes Video oder einen in die Breite gedrückten Inhaltsbereich.
Ich möchte euch zwei Lösungen zeigen die dieses Problem beheben.

Beitrag zu Ende lesen

WordPress: Titel übergeordneter Seiten (parent) auslesen (direkter und oberster Vorfahre)

wordpress-page-title

Bei der Erstellung eines WordPress-Themes kommt es häufiger vor, dass man nur den Namen einer übergeordneten Seite (parent page) anzeigen möchte. Zum Beispiel um für eine Metanavigation in der Sidebar eine Überschrift auszugeben.
Besonders interessant ist in diesem Zusammenhang der Titel einer Eltern-Seite auf oberster Verschachtelungsebene.

Beitrag zu Ende lesen

WordPress: Untergeordnete Seiten (Child Pages) gezielt ausgeben

wordpress-page-strcture

In einem WordPress-Themes müssen häufig untergeordnete Seiten ausgegeben werden. Ich benötige diese Funktion regelmäßig um in der Sidebar die themenverwandten Seiten zur aktuell aufgerufenen Seite aufzulisten. In Kombination mit dem Snippet für den Titel der Eltern-Seite lässt sich hier sehr schnell eine individuelle Navigation erstellen.
Mit Standard-Funktionen von WordPress können alle, oder nur ausgewählte Seiten eingeblendet werden.

Beitrag zu Ende lesen

HTML5 und CSS3 in der Praxis – welche Features lassen sich heute schon nutzen?

html5

Wenn ihr HTML5 und CSS3 in aktuellen Projekten einsetzen möchtet, stellt sich häufig folgende Frage: In welchem Browser wird Funktion X oder Eigenschaft Y denn nun eigentlich schon unterstützt? Genau das ist ein Kernproblem bei der Nutzung der modernen Techniken und führt zu einiger Verunsicherung. Damit ihr die zukünftigen Standards ohne Kompatibilitätsprobleme verwenden könnt, solltet ihr unbedingt einen Blick auf die Website "Can I Use" werfen. Über eine Suchmaske könnt ihr nach HTML5-, CSS3- und SVG-Befehlen suchen und erhaltet als Ergebnis eine detaillierte Auflistung über die jeweilige Browser-Kompatibilität. Absolute Praxisempfehlung.

Beitrag zu Ende lesen

Responsive Webdesign: Media Queries auch im IE6, IE7, IE8 … nutzen

internet-explorer-media-queries

Der Begriff des "Responsive Webdesign" beschreibt die Technik über CSS3 Media Queries eine Website für verschiedene Displaygrößen oder Bildschirmauflösungen zu optimieren. Wie das im Detail funktioniert habe ich bereits in einem Tutorial ausführlich erklärt. Leider unterstützt der Internet Explorer 6-8 keine Media Queries; folglich wird die optimierte Version der Website auch nicht angezeigt wenn der Besucher mit einem veralteten Internet Explorer unterwegs ist.
Nun könnte man einwenden, dass Media Queries in erster Linie für die Optimierung auf Smartphones genutzt werden und die Optimierung auf Desktop-Rechnern nicht so wichtig ist. Sicher ist die Optimierung für Handys und Tablets wichtiger - aber auch Desktop-Rechner und Notebooks unterscheiden sich in der Displaygröße mittlerweile deutlich und sollten bei der Konzeption entsprechend beachtet werden. Ein kleines JavaScript namens "respond.js" rüstet die fehlende Interpretation von min/max-width-Media Queries im Internet Explorer nach.

Beitrag zu Ende lesen

WordPress: Widgetized Sidebars mit Beschreibung

wordpress-sidebar-beschreibung

Um in WordPress Widgets verwalten zu können, benötigt ihr mindestens eine widgetized Sidebar.
Sobald eine solche Sidebar vorhanden ist, kann der User im WordPress-Backend Widgets per Drag & Drop in diesen Bereichen anordnen. Insbesondere für Kunden ist es jedoch häufig schwierig zu verstehen welche Sidebar für welche Website-Inhalte vorgesehen ist bzw. an welcher Stelle im Theme die Widgets erscheinen. Mit einer Beschreibung könnt ihr es euren Kunden etwas leichter machen.

Beitrag zu Ende lesen

Grundgerüst für WordPress-Widgets

wordpress-widgets

WordPress bietet durch Widgets die Möglichkeit Seiteninhalte intuitiv zu verändern. Insbesondere für Kunden ohne Programmierkenntnisse sind Widgets besonders gut geeignet um eine Website zu pflegen und über die gewöhnliche Artikelansicht hinaus zu verändern.
Um Widgets in einer WordPress-Installation verwenden zu können, muss das Theme über eine so genannte "widgetized Sidebar" verfügen. Anschließend steht diese Sidebar im Backend zur Verfügung und kann mit Widgets bestückt werden. WordPress bietet von Haus aus diverse Standard-Widgets an. Wem das nicht reicht, der kann die Plugin-Directory nach weiteren Widgets durchsuchen.
Je nach Projekt ist es jedoch notwendig ein eigenes Widget zu erstellen. Wie das funktioniert möchte ich in diesem Beitrag anhand eines Basis-Snippets zeigen.

Beitrag zu Ende lesen