kulturbanause blog


Hier findest Du Artikel, Tutorials, Downloads, Tipps, Hacks, Snippets und aktuelle Szene-News rund um illustratives Webdesign, Social Media und digitale Bildbearbeitung.



Plugins
Hier siehst Du eine Übersicht aller Beiträge, die mit dem Stichwort "Plugins" versehen wurden.

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

tiny-nav-select-iphone

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.

Diesen Beitrag zu Ende lesen


Responsive Image Replacement mit Breakpoints: Doubletake

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.

Diesen Beitrag zu Ende lesen


WordPress Custom Post Types um Sticky-Funktion erweitern

sticky-post

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.

Diesen 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 Media Queries im Internet Explorer nach.

Diesen Beitrag zu Ende lesen


Maximale Bildkompression: JPEGmini vs. Smush.it vs. PunyPNG

bildkompression

Geringe Dateigrößen sind nach wie vor ein wichtiger Anhaltspunkt um die Qualität einer Website zu beurteilen. Zwar wird das lokale Internet immer schneller und verkraftet auch größere Dateien, doch das mobile Web erreicht diese Übertragungsgeschwindigkeiten längst nicht. Und auch die Suchmaschinen berücksichtigen die Ladezeit einer Website und listen schnelle Seiten weiter vorne.
Eine von vielen Möglichkeit um die Ladezeit zu reduzieren, sind optimal komprimierte Grafiken. Wer jetzt glaubt, der "Für Web speichern"-Dialog von Photoshop würde ausreichen, der irrt. Photoshop erzeugt außergewöhnlich große Dateien und ist selbst innerhalb der Creative Suite nicht die erste Wahl. Fireworks komprimiert Bilder bei identischen Exporteinstellungen deutlich besser.
Wer Fireworks nicht besitzt, oder wem der Umweg vom Photoshop-Layout über den Fireworks-Export zu lästig ist, kann auf Online-Tools zur Bildkompression zurückgreifen. Ich habe mir drei gängige Dienste angeschaut und möchte euch zeigen welches Tool für welches Bild am besten geeignet ist.

Diesen Beitrag zu Ende lesen


WebP-Grafiken mit Photoshop-Plugin erstellen

google-webp-icon-logo

"Let's make the web faster". Unter diesem Leitspruch entwickelt Google unzählige Tools, Programme und Techniken um sowohl für Entwickler als auch für Anwender die Arbeit mit dem Internet so angenehm wie möglich zu gestalten. Angefangen beim hauseigenen Browser Chrome, über die Relevanz der Website-Ladezeiten für die Suchmaschinen-Platzierung, bis hin zu Webfont-Bibliotheken: die Performance einer Website wird immer wichtiger. Vor einiger Zeit wurden die Entwickler von Google beauftragt, eine neue Dateikompression für Grafiken zu erarbeiten. Die neue Bilddatei sollte mindestens der Qualität von JPG entsprechen, jedoch deutlich kleinere Dateien erzeugen. Das Ergebnis dieser Entwicklung ist das neue Grafikformat WebP (gesprochen "Weppy"). Doch leider kennt Photoshop das Format noch nicht.

Diesen Beitrag zu Ende lesen


WordPress-Backups automatisch in die Dropbox speichern

dropbox-for-wordpress

Spätestens wenn der Server ausfällt, wissen wir alle wie wichtig es ist ein funktionierendes, aktuelles und vollständiges Backup der WordPress-Installation zur Hand zu haben. Da manuelle Backups viel zu häufig vergessen werden, sollte das Backup vollautomatisch in regelmäßigen Abständen durchgeführt werden. Ich selbst lasse mir beispielsweise morgens und abends Sicherungskopien erstellen und in der Cloud abspeichern. So habe ich immer Zugriff auf das Backup - egal wo ich mich befinde.
Ein neues WordPress-Plugin ermöglicht es nun ein zeitgesteuertes Backup aller Dateien und der Datenbank anzufertigen und gezippt in der Dropbox abzulegen.

Diesen Beitrag zu Ende lesen