kulturbanause Blog

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

Performance


Bilder im Responsive Design – Tipps für Seitenverhältnisse & Motive in flexiblen Layouts

Fotos, Illustrationen und Grafiken sind viel genutzte Gestaltungselemente im Web Design. Beim Einsatz von Bildformaten und Motiven sollte allerdings einiges beachtet werden, damit die Website später gut umsetzbar ist und redaktionell komfortabel gepflegt werden kann. Wir zeigen, was ihr bei Bildern im Web Design hinsichtlich Bildausschnitt, Skalierung und Seitenverhältnis beachten solltet.

Beitrag zu Ende lesen

Die CO2-Emission einer Website messen

Jede Webseite belastet die Umwelt, denn sie verbraucht Strom. Der insgesamt rapide steigende Stromverbrauch des Internets fordert auch hier zu einem sparsameren Umgang auf. Durch eine schlanke und optimierte Website können wir unseren Teil zur Verringerung der CO2-Emissionen beitragen. Um herauszufinden wie stark die eigene Website die Umwelt tatsächlich belastet, können wir ein Online-Tool einsetzen. Der schwierigste Teil besteht womöglich darin, Kundinnen und Kunden von der Wichtigkeit der Optimierung zu überzeugen und entsprechende Budgets zu erhalten.

Beitrag zu Ende lesen

Bilder für Websites exportieren – Dateiformat, Optimierung, Farbraum

Bilder für eine Website müssen im richtigen Dateiformat gespeichert und möglichst gut optimiert werden. Ist das nicht der Fall, wird die Website zu »schwer« und lädt länger. Eine langsame Ladezeit wiederum wird von Suchmaschinen schlechter bewertet. Auch die User Experience wird beeinträchtigt.

Es gibt zahlreiche Grafik-Dateiformate die im Web eingesetzt werden können. Alle haben ihre Vor- und Nachteile. Für das beste Ergebnis sollte das passende Dateiformat gewählt und das Bild korrekt exportiert werden. Wir geben einen Überblick was beachtet werden muss.

Beitrag zu Ende lesen

Bilder und Grafiken im WebP-Format exportieren

Bilder und Grafiken gehören zu den Schwergewichten, wenn es um die Optimierung der Website-Ladezeiten geht. Im Verhältnis zu anderen Bereichen einer Seite kann mit Bild-Optimierung überdurchschnittlich viel Last eingespart werden. Es lohnt also i.d.R. hier Aufwand zu betreiben. Das Bild-Dateiformat WebP existiert bereits seit geraumer Zeit, und rückt nun dank deutlich verbessertem Browser-Support wieder in den Fokus. Wir zeigen wie und in welchen Programmen WebP-Grafiken exportiert werden können.

Beitrag zu Ende lesen

Emojis aus WordPress entfernen

Seit WordPress 4.2 habt ihr die Möglichkeit Emojis in euren Beiträgen zu verwenden. Leider wird das JavaScript, das die Darstellung der Grafiken ermöglicht, auch dann geladen, wenn ihr gar keine Emojis verwendet. Und darüber hinaus schreibt WordPress das Script in den <head> der Website, was wiederum von Performance-Optimierungs-Tools wie Googles Page Speed Insights kritisiert wird. In diesem Beitrag archivieren wir ein Snippet mit dem Ihr die Emojis deaktivieren könnt.

Beitrag zu Ende lesen

Das Performance Budget als Hilfsmittel für schnellere Websites

Die Performance einer Website ist ein wichtiger Qualitätsfaktor. Es existieren zahlreiche Tipps und Tools um kürzere Ladezeiten zu erreichen, doch auch ein anderer konzeptioneller Ansatz kann ein mächtiges Werkzeug sein. Das sog. Performance Budget ist ein solcher Ansatz. Mit seiner Hilfe wird die Website schlank gehalten, was die Geschwindigkeit verbessert und somit die Qualität des Projekts steigert.

Beitrag zu Ende lesen

Responsive Images – <picture>, srcset, sizes & Co.

Flexible Bilder sind ein wichtiger Bestandteil von responsiven Websites. Doch leider stellte genau dieses Thema Web Designer in den vergangenen Jahren vor enorme Herausforderungen. Ohne Scripte war es bisher nicht möglich Bilder ohne Performance- oder Qualitätsverluste auf allen Displaygrößen darzustellen. Und selbst mit der Unterstützung von Scripten waren einige Änderungen – z. B. die Veränderung des Bildausschnitts – eine mehr als lästige Aufgabe. Mit <picture>, srcset & sizes sind neue HTML-Elemente und -Attribute in die Spezifikation gewandert, mit deren Hilfe sich viele Probleme bald lösen werden.

Beitrag zu Ende lesen