kulturbanause Blog

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

Plugins


Navigationen für die mobile Ansicht in Select-Listen umwandeln: TinyNav.js

Umfangreiche Navigationen auf Smartphones benutzerfreundlich darzustellen ist gar nicht so einfach. Zwar ist es normalerweise problemlos möglich die Darstellung für den kleinen Bildschirm anzupassen - beispielsweise indem man alle Links untereinander abbildet - dann muss der Besucher aber erst über eine lange Liste an Links hinwegscrollen um den Content zu erreichen. Insbesondere bei Blogs will der Besucher aber häufig den neuesten Artikel lesen und nicht erst die Navigation sehen.
Das winzige jQuery-Plugin TinyNav wandelt ausgewählte Listen in Select-Listen um. Die sparen Platz und lassen sich auch auf Smartphones einfach bedienen.

Beitrag zu Ende lesen

Responsive Image Replacement mit Breakpoints: Doubletake

Im Responsive Webdesign werden Bilder häufig proportional verkleinert um sie auch auf kleinen Displays noch ansehnlich darstellen zu können. Auch auf dieser Seite nutze ich diese Technik; sobald der Inhaltsbereich zu schmal wird, werden die Bilder prozentual zur Gesamtbreite des Inhalts abgebildet.
Diese Variante ist zwar sehr komfortabel - leider werden aber deutlich größere Bilddaten geladen als es für Smartphones überhaupt notwendig ist. Um die Ladezeiten und den Traffic für Besucher mit mobilen Endgeräten gering zu halten, kann es sich daher lohnen verschiedene Bilder für verschiedene Auflösungen anzubieten. Das jQuery-Plugin Doubletake vereinfacht diese Technik.

Beitrag zu Ende lesen

WordPress Custom Post Types um Sticky-Funktion erweitern

Normalerweise ist es in WordPress möglich, Artikel auf "sticky" zu setzen und somit im Loop oben zu halten. In der deutschen Version nennt sich die Funktion "auf der Startseite halten" und wird im Editor in der rechten Seitenleiste im Bereich "Status" angezeigt.
Wenn ihr allerdings WordPress um Custom Post Types erweitert habt, fehlt dort die Sticky-Funktion. Es gibt verschiedene Wege, sie nachzurüsten.

Beitrag zu Ende lesen

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

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

WebM-Videos im Internet Explorer 9 abspielen

Bei WebM handelt es sich um einen recht neuen Video-Standard der unter anderem von Google entwickelt wurde aber auch seitens Mozilla und Opera gestützt wird. Der Vorteil liegt laut Google in einer besseren Performance und einem angenehmeren Lizenzmodell. In den drei entsprechenden Browsern Chrome, Firefox und Opera können WebM Videos nativ abgespielt werden. Microsoft und Apple hingegen benötigen in den aktuellen Browserversionen (noch?) ein entsprechendes Plugin um WebM-Videos abspielen zu können. Für den erst kürzlich veröffentlichten Internet Explorer 9 hat Google nun das entsprechende Plugin veröffentlicht.

WordPress-Editor für Facebook-iFrame-Tabs nutzen

Mit den neuen iFrame-Tabs von Facebook haben Webdesigner jetzt die Möglichkeit noch einfacher individuellen Code zu Fan-Pages hinzuzufügen. Und kaum sind die neuen Seiten veröffentlicht gibt es auch schon ein entsprechendes WordPress-Plugin dazu.
Mit dem WordPress-Plugin "Facebook Tab Manager" könnt Ihr den WordPress-Editor und das WordPress-Backend verwenden um die Inhalte für Euer Facebook-iFrame-Tab zu verwalten.
Nach der Plugin-Installation könnt Ihr im WP-Backend Facebook-Tabs so verwalten wie dies auch mit normalen Seiten und Artikeln geht. Der Vorteil ist, dass Ihr die Facebook-Inhalte schön strukturieren könnt und, dass innerhalb des Editors noch weitere Einstellungen zur Verfügung stehen die für Facebook-iFrame-Tabs nötig sind.

Beitrag zu Ende lesen

Gravatar Hovercards Plugin für Self Hosted WP Blogs

Vor einigen Tagen habe ich ja das neue Feature "Hovercard" vorgestellt und in diesem Zuge auch erwähnt, dass es bis dato nur für auf wordpress.com gehosteten Blogs zur Verfügung steht. Nun ist ein erstes Plugin erschienen was Gravatar Hovercards auch auf Self Hosted Blogs ermöglicht.  Ich hatte bisher leider keine Zeit das Plugin zu testen. Über erste Erfahrungsberichte bin ich also sehr dankbar!

Wenn Ihr wissen wollt wie Ihr Hovercards unter BuddyPress aktiviert, so hilft Euch sicher folgendes Mini-Tutorial weiter.

via wpmu.org