kulturbanause Blog

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

Bilder & Grafiken


Spiegelungen im Webdesign – Die Grundlagen als Screencast

Die Photoshop-Profis haben ein Video zum Thema "Spiegelungen" von mir veröffentlicht. In Folge 93 des Podcasts beschreibe ich die Grundlagen der Spiegelung von zweidimensionalen und dreidimensionalen Objekten, und gehe auf häufige Fehlerquellen ein. Am Beispiel des Wet-Floor-Effektes werden darüber hinaus die typischen handwerklichen Techniken beschrieben.

Das Thema Spiegeleffekte habe ich in der Vergangenheit bereits in meinem Artikel "10 Tipps zu Spiegelungen im Webdesign" behandelt. Einen fortgeschrittenen Screencast zum Thema Wasserspiegelung findet ihr hier.

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

Bessere Bildkompression mit Kraken

Performance-Optimierung zählt zu den wichtigsten Arbeitsbereichen eines Webdesigners. Es ist zwar manchmal etwas lästig die Website zu optimieren, vernachlässigen sollte man es deswegen aber nicht. Eine Möglichkeit die Ladezeit der Website zu verringern, ist die stärkere Kompression von Bildern. Vielleicht erinnert ihr euch noch daran, dass ich die Online-Komprimierungsdienste JPEG Mini, Smush It und Puny PNG verglichen habe. Nun möchte ich euch auf ein weiteres Tool aufmerksam machen: Kraken.

Beitrag zu Ende lesen

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

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.

Beitrag zu Ende lesen

Einfachere CSS-Sprites mit ‚Sprite Cow‘

Ich habe euch vor einiger Zeit einen Online Generator für CSS-Sprites vorgestellt der sowohl die grafische Sprite, als auch den entsprechenden CSS-Quellcode generiert. Heute möchte ich euch auf ein alternatives Tool aufmerksam machen, das bei mir einige Wochen ein Leben als ungenutztes Lesezeichen fristen musste. Zu unrecht wie sich gestern herausstellte.
Sprite Cow ist kein Online-Generator im eigentlichen Sinn - vielmehr erleichtert er die Arbeit mit Sprites ohne, dass einem die Arbeit komplett abgenommen wird. Und genau hier liegt in meinen Augen der entscheidende Vorteil.

Beitrag zu Ende lesen