Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.

Beitrag zu Ende lesen

Data URIs sind komplexe Zeichenfolgen (Base 64 Code) mit deren Hilfe sich u.a. Grafiken erstellen lassen. Der erzeugte Code kann mit CSS als Hintergrundgrafik oder als HTML-Tag eingefügt werden. Im Gegensatz zu Pixelgrafiken muss keine externe Datei eingebunden werden. Im Gegensatz zu Grafiken auf Basis von CSS3 sind mit Data URIs auch komplexe Darstellungen möglich.

Beitrag zu Ende lesen

Ich behaupte einfach mal, dass wohl jeder Webdesigner schon Text mit der CSS-Eigenschaft text-indent: -9999px; versteckt hat. Die aus heutiger Sicht schon fast antike Technik entstammt noch Zeiten, in denen wir ausgefallene Schriftarten mit Hilfe von Grafiken einbetten mussten. Da es Webfonts noch nicht gab, wurden Schmuckschriften in Bildern gespeichert. Anschließend wurde einem Element die Grafik als Hintergrundbild zugewiesen; der für die Suchmaschinen enthaltene „echte“ Text wurde versteckt. Mit Hilfe von text-indent: -9999px; wurde er um 9999 Pixel aus dem sichtbaren Bereich heraus verschoben.

Beitrag zu Ende lesen

Die Performance gehört zu den wichtigsten Faktoren wenn es um die technische Optimierung einer Website geht. User erwarten schnelle Seiten und auch Google rankt Sites mit hoher Performance im Index weiter nach vorne. Es lohnt sich also hier zu optimieren.
Um zu prüfen welche Bereiche eurer Website verbesserungswürdig sind, könnt ihr beispielsweise Google Page Speed oder Yahoo YSlow nutzen. Beide Dienste empfehlen die Nutzung eines sog. CDN (= Content Delivery Network), also die Auslagerung von Medianinhalten auf verschiedene Server dessen Aufgabe ausschließlich die Verwaltung und Verteilung dieser Inhalte ist. Es muss aber kein echter CDN-Dienst sein. Häufig reicht eine eigene Subdomain.

Beitrag zu Ende lesen

Moderne Websites kommen um den Einsatz von CSS-Sprites nicht mehr herum. Um die Performance einer Seite zu verbessern, gehört die Technologie längst zu den Basics. Leider ist es zeitaufwändig und lästig eine Sprite zu erstellen: Zunächst müssen die gewünschten Grafiken auf der Arbeitsfläche positioniert werden, anschließend werden die Abmessungen und Koordinaten in das CSS-Dokument übernommen.
Spritepad vereinfacht (wie auch andere Tools) die Arbeit mit Sprites. Im Gegensatz zu allen anderen mir bekannten Online-Anwendungen funktioniert jedoch bei Spritepad alles genau so wie man es sich wünscht.

Beitrag zu Ende lesen

Ich habe euch in den vergangenen Monaten diverse Online-Tools zur Kompression von Grafiken vorgestellt, und die Dienste in einem Artikel sogar miteinander verglichen. Heute stelle ich zwei Programme vor, die euch ebenfalls die Bildkompression abnehmen, aber lokal auf eurem Rechner installiert werden. Was die Vor- und Nachteile einer lokalen Anwendung sind, möchte ich in diesem Artikel kurz beschreiben.

Beitrag zu Ende lesen

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