Im Responsive Design ist es zwar möglich identische Inhalte unterschiedlich darzustellen, es ist jedoch nicht ohne weiteres möglich Inhalte auszutauschen. Daher werden auf kleinen Bildschirmen meist viel zu große Bilder geladen die lediglich über CSS auf die Abmessung des Displays skaliert sind.
Im Moment gibt es für dieses Problem keine standardisierte Lösung, nur diverse Scripte die den Bildaustausch übernehmen. jQuery Picture ist ein solches Script. Es lässt sich einfach in die Website integrieren, ist gerade einmal 2KB groß und nutzt entweder das valide <figure>- oder das experimentelle <picture>-Element.

Basis-Konfiguration

Zunächst müssen jQuery und das Plugin im Quellcode eingebettet werden, anschließend wird das Plugin initialisiert. Je nachdem ob ihr die <figure>- oder die <picture>-Methode verwendet, sieht der Code etwas anders aus. Hier das Beispiel für den validen Ansatz.

$(function(){
    $('figure.responsive').picture();
});

Einbindung über ‹figure›-Tag und Data-Attributes

Wenn ihr Bilder über <figure> einbinden wollt, sieht der Syntax in etwa so aus. Die verschiedenen Bildquellen werden über Data-Attributes angegeben.

<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</figure>

Einbindung über ‹picture›-Element

Die Einbindung über <picture> sieht etwas anders aus. Hier werden - ähnlich der Einbindung von Videos oder Audiodateien in HTML - die verschiedenen Quellen über das <source>-Element angegeben.

<picture alt="A Half Brained Idea">
    <source src="assets/images/small.png">
    <source src="assets/images/medium.png" media="(min-width:440px)">
    <source src="assets/images/large.png" media="(min-width:600px)">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</picture>

Links

• jQuery Picture – jquerypicture.com
• jQuery-Picture GitHub-Repository – Git Hub

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Um Website-Formulare auf Fehleingaben zu prüfen existieren unzählige Validierungs-Plugins und Tools. Leider sind viele dieser Tools kompliziert zu implementieren und erfordern zudem Anpassungen am HTML-Quellcode des Formulars.
Wenn das Formular allerdings dynamisch generiert wird oder über ein Plugin erstellt wurde, ist es häufig nicht möglich den HTML-Code anzupassen. Hier eilt das jQuery-Plugin „jQuery Walidate“ zur Hilfe und ermöglicht die Validierung bestehender HTML-Formulare ohne Änderungen am Quellcode vornehmen zu müssen. Neben einer einfachen Integration des Plugins in die Website stehen umfangreiche Funktionen wie individuelle Fehlermeldungen etc. zur Verfügung.

Wie funktioniert jQuery Walidate?

jQuery Walidate lässt sich sehr einfach in jede Website implementieren. Zunächst werden jQuery und das Plugin aufgerufen und ihr müsst festlegen welcher Selektor (hier: das form-Element) als Container für die Validierung dienen soll. Im zweiten Schritt definiert ihr alle Eingabefelder über ihren jeweiligen Selektor. Das war auch schon die unbedingt notwendige Basis-Konfiguration. Wird das Formular nun abgeschickt, prüft das Plugin die festgelegten Felder auf Fehleingaben.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.walidate.compressed.js"></script>
<script type="text/javascript">
    $(window).load(function(){    
        $('form').walidate(); // Initalize the form
        $(selector).walidate('validate'); // Make this element required
    });
</script>

Umfangreiche Anpassungsmöglichkeiten

Das oben gezeigte Beispiel nutzt die Standard-Konfiguration zur Validierung des Formulars. Ihr könnt das Plugin sehr detailliert an eure Bedürfnisse anpassen und beispielsweise eigene Fehlermeldungen ausgeben, Eingaben per Regular Expressions auf Gültigkeit prüfen oder einen Dateianhang zur Bedingung für den Versand des Formulars machen.

Auf der Website des Plugins findet ihr dazu eine umfangreiche und leicht verständliche Dokumentation, sowie eine Live-Demo auf jsFiddle.

Links zum Thema

• jQuery Walidate Website
• Live-Demo des Plugins

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vor einiger Zeit habe ich bereits einen Artikel über Kerning und Ligaturen im Browser geschrieben - heute möchte ich das Thema noch einmal aufgreifen. Type Butter ist ein neues jQuery-Plugin, mit dem ihr das Kerning der Schriftarten eurer Website verbessern könnt.
Im Moment liegen große Überschriften ja voll im Trend. Doch gerade bei großen Schriftgrößen entstehen häufig unschöne Abstände zwischen den Buchstaben. Mit Type Butter könnten sie der Vergangenheit angehören.

Wie setze ich Type Butter ein?

Das Script wird heruntergeladen und als jQuery-Plugin im Quellcode eingebettet. Zusätzlich wird ein weiteres Script für die gewünschte Schrift eingebunden. Anschließend müsst ihr nur noch den Selector festlegen in dem Ihr das verbesserte Kerning aktivieren wollt, also beispielsweise den body eurer Website.

jQuery('body').typeButter({
     'default-spacing' : '0em'
});

Neben diesen simplen Basis-Settings könnt ihr individuelle Einstellungen für eine riesige Auswahl an Schriften festlegen.

• Type Butter
• Type Butter – Individuelle Einstellungen festlegen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Adobe Shadow wurde vor einigen Wochen veröffentlicht und soll insbesondere Frontend-Entwicklern helfen Websites für verschiedene mobile Endgeräte, Displaygrößen etc. zu erstellen. Im Gegensatz zu allen anderen mir bekannten Tools simuliert Adobe Shadow die Ansicht nicht sondern synchronisiert den Entwicklungsstand der Website auf verschiedene Geräte. Dafür muss man die Geräte natürlich besitzen. Ich habe Adobe Shadow jetzt beim ersten echten Projekt praktisch eingesetzt und möchte euch meine Erfahrungen natürlich nicht vorenthalten.

Wichtiger Hinweis: Adobe Shadow wurde in Adobe Edge Inspect umbenannt. Neben einem neuen Icon und dem neuen Namen wurden die Funktionen jedoch beibehalten.

Wie funktioniert Adobe Shadow?

Adobe Shadow synchronisiert die Ansicht eines Computers auf die Bildschirme von anderen angeschlossenen Geräten wie Smartphones oder Tablets. Im Gegensatz zu einem Simulator, sieht man die Website daher exakt so, wie das jeweilige Gerät sie darstellt, also inkl. gerätespezifischer Eigenschaften und der Möglichkeit die Usability auf dem Touchpad direkt zu beurteilen und zu testen.

Für mich ist Adobe Shadow das erste Tool das den Test von Responsive Websites richtig angeht. Es gibt zwar viele sehr gute Simulatoren, aber der Test auf einem echten Gerät ist der einzige Weg ein verlässliches Ergebnis zu erhalten. Adobe Shadow simuliert nicht, das Tool hilft dabei den Workflow zu beschleunigen. Und für ein professionelles Ergebnis muss nun einmal auf einem Originalgerät getestet werden. Die diesbezügliche Kritik an Adobe Shadow kann ich daher in keinster Weise nachvollziehen.

Adobe Shadow einrichten

Zunächst muss Adobe Shadow auf jedem Gerät installiert werden. Zusätzlich müssen sich alle Geräte im selben Netzwerk befinden.

Aktuell bietet Adobe das Tool für Windows, Mac OSX, iOS, Android und als Google Chrome Extention an. Damit die Chrome-Extention funktioniert, muss das Hauptprogramm auf dem Computer im Hintergrund laufen.

• Adobe Shadow für Mac und Windows
• iOS-App
• Android-App
• Google Chrome Browser-Extention

Nach dem Start der jeweiligen Programme müssen die Geräte zunächst verbunden werden. Dazu generiert Shadow ein Passwort, welches dann auf den verbundenen Geräten eingegeben werden muss. Anschließend sieht man von welchem Gerät die Ansicht abhängig ist. Mit einem Tap auf den Namen gelangt ihr in den „Live-Modus“, der immer die aktuelle Browser-Ansicht des Hauptrechners zeigt. Natürlich exakt so wie das abhängige Gerät die Website nativ darstellt.

Responsive Webdesign mit Adobe Shadow

Hat man Adobe Shadow einmal eingerichtet ist das Tool eine echte Arbeitserleichterung. Alle Live-Websites oder die Entwicklungen in einer lokalen Serverumgebung (erst in einem kommenden Release!) werden auf die entsprechenden Geräte synchronisiert. Bei mir dauert es immer ca. eine Sekunde bis die Ansicht auf allen Geräten abgeglichen ist. Das ist zu verkraften, vielleicht geht es bei euch sogar schneller. Das ist wohl abhängig vom W-LAN.
Mit dem Code-Inspector (ähnlich Firebug) von Google Chrome kann ich auf dem Hauptrechner den Code live editieren und sehe die Änderungen dann direkt auf iPhone und iPad. Perfekt.

Leider ist Adobe Shadow (noch?) nicht in der Lage verschiedene Computer anzugleichen. Es funktioniert, zumindest bei mir, nur mit einem Hauptrechner und diversen mobilen Endgeräten. Ich fände es schön auch mehrere Desktop-Computer abgleichen zu können. Dann könnte man z.B. einen großen iMac und ein kleines Windows-Netbook parallel beurteilen.
Ein weiterer Nachteil des Tools sind die regelmäßigen Abstürze in der Synchronisierung. Die Programme laufen zwar noch – es wird allerdings nichts mehr synchronisiert. Um das Problem zu lösen musste ich dann die Anwendungen einmal neu starten. Auch dieses Problem ist zu verkraften – sollte allerdings dringend von Adobe behoben werden.

Fazit

Adobe Shadow ist für mich das erste Tool das die Arbeit mit verschiedenen mobilen Geräten professionell angeht. Klar, man benötigt alle Geräte auf denen man testen möchte – aber ich bin der Meinung, dass ein Profi, der mobile Websites erstellt und verkauft, hier investieren muss oder das eh bereits getan hat. Wer das nicht kann oder möchte muss dann zwangsläufig auf Simulatoren ausweichen.

Die Einrichtung von Adobe Shadow ist kinderleicht und die Arbeit wird enorm erleichtert. Einziges Manko ist aus meiner Sicht die nicht funktionierende Synchronisation verschiedener Desktop-Rechner, sowie die auftretenden Programmabstürze.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vor einigen Jahren war der sog. Page-Flip-Effekt sehr populär um mit Hilfe von Flash digitale und realistisch anmutende Bücher zu erstellen. Der Trend flaute in den letzten Jahren zunächst ein wenig ab um dann mit der zunehmenden Verbreitung von Tablets und eBooks wieder an Beliebtheit zu gewinnen.
Und ganz in Sinne moderner Webentwicklung lässt sich der Effekt heute mit jQuery, CSS3 und HTML5 umsetzen.

turn.js einsetzen

Ein großer Vorteil von turn.js ist die einfache Syntax. Nachdem das jQuery-Plugin eingebunden wurde muss lediglich noch eine ID zugewiesen und aufgerufen werden.

Wenn ihr euch für ein Tutorial und eine ansehnliche Demo interessiert, besucht auch das Beispiel auf Tutorialzine.com.

• tutorialzine.com/2012/03/instagram-magazine-php-jquery
• turnjs.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Microstock -Agentur Fotolia hat als erster Stockimage-Anbieter ein Plugin für Photoshop, Illustrator und InDesign veröffentlicht. Über das kostenlose Plugin könnt ihr auf den Bildbestand von Fotolia zugreifen ohne dabei das Hauptprogramm verlassen zu müssen. Darüber hinaus können Bilder mit geringer Auflösung später unkompliziert gegen hochauflösende Versionen ersetzt werden.

Photoshop-Plugin getestet

Sobald ihr das Plugin heruntergeladen und mit dem Extention Manager installiert habt, findet ihr in Photoshop unter „Fenster → Erweiterungen“ das neue Bedienfeld von Fotolia.

Innerhalb des Bedienfeldes könnt ihr auf den Datenbestand von Fotolia zugreifen und ca. 16 Millionen Stock-Images durchsuchen und anzeigen. Die Suchoptionen entsprechen hierbei den Kriterien der Website – ihr könnte also nach Stichwörtern, Größe, Art, Ausrichtung etc. filtern. Ärgerlich finde ich allerdings, dass bereits für das Durchsuchen der Bilddatenbank ein Benutzeraccount benötigt wird – aber auch das ist zu verkraften. Die Anzeige der Trefferliste erscheint dann ebenfalls innerhalb des Bedienfeldes unter dem Reiter „Galerie.“

Um das Plugin benutzen zu können benötigt ihr die Photoshop, InDesign oder Illustrator in den Versionen der Creative Suite 5 bzw. 5.5. Das Plugin liegt zum Zeitpunkt dieses Artikels in einer Beta-Version vor, die in meinem Test jedoch einwandfrei funktioniert hat. Ich habe die Basis-Funktionen des Plugins mit Photoshop getestet – allerdings kein Bild gekauft.

de.fotolia.com/adobeplugin

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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.

Geringe Dateigröße, einfache Handhabung

Das Plugin ist gerade einmal 304 Bytes groß und lässt sich kinderleicht in die Website integrieren. Nachdem jQuery und TinyNav.js geladen wurden, muss die gewünschten Liste (ul oder ol) mit einer ID ausgezeichnet werden. Anschließend wird die ID an das Plugin übergeben und die Liste kann wie gewohnt per CSS gestaltet werden.

Das Plugin selbst nutzt die Klasse .tinynav, die ebenfalls über CSS angesprochen werden kann, und mit Hilfe von Media Queries ein- und ausgeblendet wird.

TinyNav funktioniert laut Entwickler in folgenden Browsern: Internet Explorer 6,7,8,9, Firefox 6,8, Safari 5, Chrome 15, Opera 11.5, iOS Safari, Opera Mobile 10.1, Opera Mini for iOS, IE7 Mobile, Firefox Mobile, Android browser, Kindle browser

• tinynav.viljamis.com

Ein vergleichbares, allerdings etwas größeres Script ist übrigens "Responsive-Menu". Solltet ihr mit TinyNav nicht zurecht kommen, lohnt es sich auch diese Lösung einmal anzuschauen.

• github.com/mattkersley/Responsive-Menu

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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.

Breakpoints und Regular Expressions

Das Plugin arbeitet mit Breakpoints für verschiedene Browsergrößen. Sobald ein Breakpoint erreicht wird, kann über ein Regular Expression Muster der Pfad zum Bild ausgetauscht werden.

$('#container').doubletake({
'breakpoints':[480,960],
'pattern':'/images/foobar.jpg?width=([0-9]+)'
});

Um verschiedene Bildgrößen laden zu können müssen auch verschiedene Bilder auf dem Server abgelegt werden. In WordPress könnt ihr sehr einfach über das Theme verschiedene Abmessungen definieren, die dann automatisch beim Upload in die Mediathek generiert werden. Alternativ zu einer On-The-Fly-Optimierung, können die Bilder auch manuell erstellt und anschließend hochgeladen werden.

• grahambird.co.uk/lab/doubletake

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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.

Sticky Custom Post Types Plugin

Die einfachste Lösung um die Sticky-Funktion auch für Custom Post Types nachzuinstallieren, ist die Verwendung des gleichnamigen Plugins. Das Plugin hat vor allem den Vorteil, dass es einfach wieder deinstalliert werden kann, sobald das Feature in der offiziellen WordPress-Installation integriert wurde. Wann das passiert, ist allerdings nicht klar - ein Report mit wechselndem Status zu diesem Feature existiert jedoch bereits. core.trac.wordpress.org/ticket/12702

Das Plugin funktioniert wunderbar, kann allerdings zu Problemen führen, wenn ihr andere Plugins im Einsatz habt, die ebenfalls von Custom Post Types Gebrauch machen. Das bekannte Meteor Slideshow-Plugin hat bei mir beispielsweise plötzlich nichtmehr wie gewünscht gearbeitet.

• Sticky Custom Post Types Plugin

Nachdem Ihr das Plugin installiert und aktiviert habt, findet ihr die Einstellungen dazu übrigens unter "Einstellungen → Lesen".

Benutzerdefinierte Felder verwenden

Je nachdem wie ihr geplant habt die Sticky-Funktion zu verwenden, bietet es sich auch an, Benutzerdefinierte Felder einzusetzen. Ein mögliches Beispiel: Mal angenommen ihr möchtet ein Portfolio aufbauen und dort bestimmte "Top-Referenzen" immer vor allen anderen anzeigen. Zu diesem Zweck könnt ihr ein Benutzerdefiniertes Feld, im Idealfall eine Checkbox, namens "Top" anlegen und anschließend abfragen ob der Wert dieses Feldes true oder false ist.
Im Template gebt ihr dann zwei Custom Loops hintereinander aus. Der erste zeigt nur Top-Refenzen, der zweite alle Referenzen die nicht "Top" sind. Dazu könnt ihr die Benutzerdefinierten Felder im Query auslesen.

Das folgende Beispiel zeigt einen Query in dem der Custom Post Type "Referenzen" mit dem Benutzerdefinierten Feld "Top" und den Value "Ja" berücksichtigt wird.

<?php
$args = array( 
  'post_type' => 'referenzen', 
  'posts_per_page' => -1, // = alle Beiträge anzeigen
  'meta_key' => 'top',
  'meta_value' => 'Ja'
);

query_posts( $args );
while ( have_posts() ) : the_post();
	
// Inhalt des Loops

endwhile;
wp_reset_query();
?>

Um Benutzerdefinierte Felder zu verwalten lohnt sich übrigens ein Blick auf das Plugin "More Fields".

• More-Fields-Plugin für WordPress
• Benutzerdefinierte Felder nur dann anzeigen wenn auch Werte eingetragen wurden

Natürlich besteht auch die Möglichkeit den WordPress-Core zu "hacken" um die Funktion zu ermöglichen. Da ihr WordPress dann jedoch nicht mehr ohne Weiteres updaten könnt, halte ich diese Variante für unbrauchbar.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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.

respond.js

Das Script liegt in der Quellversion sowie in einer komprimierten Version auf GitHub bereit. Darüber hinaus existiert auch ein WordPress-Plugin das ich der Vollständigkeit halber auch erwähnen möchte. Ob es sinnvoll ist eine solche Funktion per Plugin nachzurüsten sollte jeder selbst entscheiden. Ich bin der Meinung die Funktion gehört direkt ins Theme.

• respond.js - unkomprimierte Quelldatei
• respond.js - komprimierte Version
• respond.js - WordPress-Plugin

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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.

Wie wurde getestet?

Ich habe mir für meinen Test drei prominente Dienste ausgesucht: JPEGmini, PunyPNG und Yahoo Smush.it. Bei allen Diensten habe ich mir die Standard-Funktionalität ohne Benutzeraccount angeschaut. Es ging mir in erster Linie darum, die Dateigröße der optimierten Grafik zu beurteilen. Erweitere Funktionen wie die Verwaltung von Alben, der Upload zu Online-Bilddatenbanken etc. waren für mich nebensächlich.

Ich habe für meinen Test vier JPG-Dateien und drei PNGs erstellt und bei allen Diensten hochgeladen. Bei diesen Dateien handelt es sich um typische Grafiken die ich im Web verwende. GIF-Dateien kommen aufgrund ihrer schlechten Kompression generell nicht in Frage.

Das Ergebnis: JPEGmini für JPGs, Smush.it als Allrounder

Das Ergebnis hat mich ehrlich gesagt selbst überrascht. JPEGmini erzeugte bei JPG-Grafiken die mit Abstand kleinsten Dateien. Allerdings muss erwähnt werden, dass bei JPEGmini sehr geringe optische Unterschiede erkennbar sind. Diese sichtbare Kompression ist vor allem bei scharfen Kanten erkennbar - kann meiner Meinung nach allerdings vernachlässig werden.
PunyPNG und Smush.it erzeugten bei der JPG-Kompression etwa gleich große Dateien. Ein großer Nachteil von PunyPNG ist jedoch die Upload-Begrenzung auf 150KB. Mit einem Pro-Account kann die erlaubte Dateigröße auf 500KB erhöht werden.

Bei der Kompression von PNG-Files scheidet JPEGmini aus. Hier können nur JPG-Dateien komprimiert werden. PunyPNG und Smush.it erlauben die Kompression von PNG und erzeugten erneut vergleichbare Ergebnisse. Ärgerlich ist allerdings auch hier der geringe Upload von PunyPNG.

Benutzerfreundlichkeit

Neben der reinen Qualität der Ergebnisse spielt auch die Benutzerfreundlichkeit eines Dienstes eine große Rolle.

Bei PunyPNG und bei Smush.it können auch ohne Benutzeraccount mehrere Dateien parallel hochgeladen und komprimiert werden. PunyPNG begrenzt diese Zahl jedoch auf 15 Dateien. JPEGmini erlaubt ohne Account nur den Upload von einzelnen Dateien, was den Workflow durchaus behindert.

Der Download der komprimierten Dateien sieht ebenfalls sehr unterschiedlich aus. Sofern nur eine Datei hochgeladen wird, stellt PunyPNG die Datei unter dem Original-Dateinamen zur Verfügung. Die Ursprungsdateien können also einfach überschrieben werden. Smush.it stellt immer ein ZIP-Dokument zur Verfügung und JPEGmini ergänzt den Dateinamen um den Suffix "_mini". Insbesondere der Suffix ist natürlich sehr unpraktisch, da die Dokumente manuell umbenannt werden müssen.

Fazit

Tja - welcher Dienst soll es nun sein? PunyPNG scheidet für mich ganz klar aus. Zwar war ich bisher ein großer Fan dieses Dienstes, habe aber jetzt die Grenzen kennengelernt. PunyPNG schränkt den Benutzer einfach an zu vielen Stellen ein: Maximal 15 Dateien im Upload bei maximal 150 KB Dateigröße sind zu schwach. Vor allem, da die optimierten Dateien ähnlich groß sind wie bei Smush.it.

Smush.it lässt sich hingegen optimal in meinen Workflow integrieren. Es können beliebige Grafikformate hochgeladen werden, es existiert keine wirkliche Begrenzung in der Upload-Größe und es ist auch möglich mehrere Dateien parallel hochzuladen. Die Ausgabe erfolgt zwar als ZIP-Archiv, innerhalb des Archivs werden allerdings die ursprünglichen Dateinamen beibehalten. Für Smush.it existiert sogar ein WordPress-Plugin das Dokumente beim Upload in die Mediathek automatisch komprimiert. Praktischer geht es kaum noch.
JPEGmini hat mich überrascht. Zwar ist das Tool nicht besonders komfortabel, die Dateigröße ist allerdings unschlagbar gering. Ich werde mit Sicherheit in Zukunft meine JPG-Layout-Grafiken mit JPEGmini manuell komprimieren.

• JPEGmini
• PunyPNG
• Smush.it

Update: Fehlerhafte Skalierung im Responsive Webdesign

Ich habe noch einen schweren Bug im mobilen Safari entdeckt. Nachdem ich die Hintergrundgrafik meiner Seite mit JPEGmini komprimiert hatte, wurde die dem body zugewiesene Grafik auf dem iPad falsch skaliert. Ich gehe davon aus, dass es mit dem nach der Kompression fehlenden Datei-Header und dem im Responsive Design festgelegten Skalierungsfaktor zu tun hat. Ihr solltet diesen Fehler im Hinterkopf behalten und nach einer Optimierung kontrollieren. Bei Elementen mit einer zugewiesenen Breite (wie dem Footer-div) trat dieses Problem nicht auf.

Noch mehr Tools zur Bildkompression

Wenn ihr noch weitere Tools zum Komprimieren von Bildern sucht, schaut in folgende Liste:

• Tools zum Thema "Image Compression"

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2011/09/maximale-bildkompression-jpegmini-vs-smush-it-vs-vs-punypng/feed/ 20 http://blog.kulturbanause.de/2011/05/webp-grafiken-mit-photoshop-plugin-erstellen/ http://blog.kulturbanause.de/2011/05/webp-grafiken-mit-photoshop-plugin-erstellen/#comments Mon, 30 May 2011 04:30:07 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=5349 "Let's make the web faster". Unter diesem Leitspruch entwickelt Google unzählige Tools, Programme und Techniken um sowohl für Entwickler als [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

"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.

Vor- und Nachteile von WebP

Das WebP-Dateiformat erzeugt bei JPG-ähnlicher Qualität knapp 40% kleinere Dateien. Das ist natürlich einiges und könnte so manche Website deutlich beschleunigen bzw. den Server entlasten. Google demonstriert und vergleicht das neue Dateiformat in einer kleinen Galerie.

• WebP-Gallery

Der größte Nachteil an WebP ist der spärliche Browser-Support. Aktuell unterstützen nur Google Chrome und Opera das Dateiformat. Um WebP effektiv in Websites einsetzen zu können, müssten jedoch alle großen Browserhersteller das Dateiformat unterstützen. Auch Photoshop unterstützt in der neusten Version nach wie vor kein WebP. Das ist mir persönlich unerklärlich, da vor kurzem erst Updates erschienen sind. Glücklicherweise kann die Funktion per Plugin nachinstalliert werden.

WebP für Photoshop nachrüsten

Zunächst müsst ihr das Download-Paket von telegraphics.com.au/sw/product/WebPFormat herunterladen. Das Plugin steht für die Photoshop-Versionen CS2, CS3, CS4 und CS5 zur Verfügung.

Öffnet die Photoshop-Installation auf eurer Festplatte und sucht dort den Ordner "Plug-ins". Innerhalb dieses Ordners erstellt ihr einen neuen Ordner namens "WebP" und kopiert die Plugin-Datei WebPFormat.plugin in diesen Ordner. Anschließend startet ihr Photoshop einmal neu.

WebP in Photoshop nutzen

Innerhalb von Photoshop steht euch nun unter "Speichern" WebP als zusätzliches Dateiformat zur Verfügung. Das Dateiformat wurde jedoch nicht in den "Für Web und Geräte speichern"-Dialog integriert.

Wenn ihr WebP als Dateiformat ausgewählt habt, so habt ihr im darauffolgenden Dialog die Möglichkeit einige Qualitäts-Einstellungen vorzunehmen. Ähnlich wie bei JPG könnt ihr hier die Qualität in Prozent festlegen. Darüber hinaus lässt sich eine Rauschreduzierung und Bildschärfung einstellen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2011/05/webp-grafiken-mit-photoshop-plugin-erstellen/feed/ 7 http://blog.kulturbanause.de/2011/05/wordpress-backups-automatisch-in-die-dropbox-speichern/ http://blog.kulturbanause.de/2011/05/wordpress-backups-automatisch-in-die-dropbox-speichern/#comments Tue, 10 May 2011 04:00:40 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=5139 Spätestens wenn der Server ausfällt, wissen wir alle wie wichtig es ist ein funktionierendes, aktuelles und vollständiges Backup der WordPress-Installation [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

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.

Dropbox-Account einrichten und das Plugin installieren

Um das Plugin verwenden zu können benötigt Ihr natürlich einen Dropbox-Account. 2GB Online-Speicherplatz bietet Dropbox gratis an. Wer Freunde einlädt kann den kostenlosen Speicher auch noch erhöhen. Solltet Ihr also noch keinen Dropbox-Account haben, so meldet euch doch bitte über folgenden Link an - dann kann ich mein Volumen noch ein wenig erweitern. ;)

• Dropbox-Partnerlink

Ladet euch von wordpress.org/extend/plugins/wordpress-backup-to-dropbox das Plugin herunter, entzippt es und verschiebt es in die Plugin-Directory (wp-content/plugins) auf eurem Webspace. Anschließend aktiviert ihr das Plugin wie gewohnt.
Beachtet bitte auch die Systemvoraussetzungen: PHP 5.2 mit ZIP-Support.

WordPress mit der Dropbox verknüpfen

Nach der Installation des Plugins werdet ihr aufgefordert die Dropbox zu verknüpfen. Dazu müsst ihr die Zugangsdaten der Dropbox eingeben.

Backup planen

In den Einstellungen des Plugins könnt ihr nun festlegen wann ein Backup erstellt werden soll und in welchen Ordner, innerhalb eurer Dropbox, es gespeichert werden soll.
Ihr seht auch wieviel Speicherplatz euch noch insgesamt zur Verfügung steht und könnt sogar festlegen wieviele Backups in der Dropbox gespeichert bleiben sollen. So müsst ihr nicht einmal ältere Backups manuell löschen um Speicherplatz freizugeben.

Nachdem ihr das Plugin konfiguriert habt, müsst ihr lediglich warten bis das erste geplante Backup in die Dropbox gespeichert wird.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2011/05/wordpress-backups-automatisch-in-die-dropbox-speichern/feed/ 14 http://blog.kulturbanause.de/2011/04/wordpress-3-2-mindestvoraussetzungen-prufen/ http://blog.kulturbanause.de/2011/04/wordpress-3-2-mindestvoraussetzungen-prufen/#comments Fri, 01 Apr 2011 10:05:41 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=4506 WordPress 3.2 wird deutlich höhere Mindestvoraussetzungen an Euren Server stellen als das bisher bei WordPress der Fall war. So wird [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

WordPress 3.2 wird deutlich höhere Mindestvoraussetzungen an Euren Server stellen als das bisher bei WordPress der Fall war. So wird beispielsweise eine neuere PHP-Version benötigt.
Insbesondere bei kleineren Websites und Webspace-Paketen weiss der Blog-Betreiber häufig gar nicht welche Leistungen der eigene Server bietet und ob diese den Ansprüchen von WordPress 3.2 genügen. Abhilfe schafft das Plugin "WordPress Requirements Check".

Plugin herunterladen, installieren, löschen

Alles was Ihr tun müsst ist das Plugin installieren und aktivieren. Anschließend wird Euch direkt in der Plugin-Oberfläche angezeigt ob der Server die Voraussetzungen erfüllt oder ob Ihr Upgraden müsst.

Anschließend könnt Ihr das Plugin eigentlich auch direkt wieder löschen.

• WordPress Requirements Check

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2011/04/wordpress-3-2-mindestvoraussetzungen-prufen/feed/ 4 http://blog.kulturbanause.de/2011/03/webm-videos-im-internet-explorer-9-abspielen/ http://blog.kulturbanause.de/2011/03/webm-videos-im-internet-explorer-9-abspielen/#comments Mon, 21 Mar 2011 10:45:58 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=4342 Bei WebM handelt es sich um einen recht neuen Video-Standard der unter anderem von Google entwickelt wurde aber auch seitens [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

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.

• WebM-Plugin für Internet Explorer 9
• Aktueller Browser-Support für WebM-Videos

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2011/03/webm-videos-im-internet-explorer-9-abspielen/feed/ 0 http://blog.kulturbanause.de/2011/03/microsofts-ie6-countdown-inkl-wordpress-plugin/ http://blog.kulturbanause.de/2011/03/microsofts-ie6-countdown-inkl-wordpress-plugin/#comments Tue, 15 Mar 2011 16:43:45 +0000 Jonas Hellwig http://blog.kulturbanause.de/?p=4322 Vor kurzem hat Microsoft mit IE6Countdown eine eigene Seite zur „Ausrottung“ des Internet Explorer 6 veröffentlicht. Das Ziel dieser Seite [...]

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]>

Vor kurzem hat Microsoft mit IE6Countdown eine eigene Seite zur „Ausrottung“ des Internet Explorer 6 veröffentlicht. Das Ziel dieser Seite besteht darin aufzuklären warum der IE6 nichtmehr zeitgemäß ist und wie Internet-User auf einen modernen Browser updaten können. Angeboten wird hier als Alternative natürlich die moderne Version des Internet Explorers 9.
Webdesigner können die Aktion mit der eigenen Website unterstützen. Über ein Code-Snippet oder das WordPress-Plugin.

Browser-Update in Website integrieren

Wenn Ihr die Aktion unterstützen möchtet, so könnt Ihr ein Code-Snippet in Eure HTML-Seite einbinden. Über einen Conditional Comment wird allen Besuchern mit älteren IE-Versionen ein Update angeboten.

Dienste dieser Art gibt es natürlich verschiedene – ich persönlich bevorzuge eine Methode die dem Besucher eine große Auswahl an verschiedenen, empfehlenswerten Browsern vorstellt.

• Code-Snippet des IE6 Countdown

Alternativ könnt Ihr auch ein WordPress-Plugin verwenden. Allerdings integriert sich das Plugin nach der Installation nicht selbstständig in Euer Blog sondern muss über ein neues Template-Tag eingebunden werden. Hier stellt sich mir die Frage ob Ihr Euch durch das Plugin überhaupt Arbeit erspart – denn auch der Conditional Comment muss manuell eingebunden werden.

Das WordPress-Plugin findet Ihr in der offiziellen Plugin-Directory

• IE6 Countdown WordPress-Plugin

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

]]> http://blog.kulturbanause.de/2011/03/microsofts-ie6-countdown-inkl-wordpress-plugin/feed/ 0