Das Performance Budget als Hilfsmittel für schnellere Websites

budget

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

CSS Keyframe-Animationen

css-keyframes

CSS-Animationen werden mittlerweile von allen modernen Browsern unterstützt und ersetzen daher in vielen Bereichen Effekte, die einst nur über JavaScript realisiert werden konnten. Neben den sog. CSS-Transitions sind vor allem die CSS-Keyframe-Animationen interessant. Mit Keyframe-Animationen können komplexe Animationsabläufe über sog. Schlüsselbilder (keyframes) erzeugt werden. Im Gegensatz zu Transitions, die eine Interaktion des Users voraussetzen, können Keyframe-Animationen auch selbstständig ablaufen.

Beitrag zu Ende lesen

Jonas Hellwig im Interview zu »Gestaltung & Code«

jonas-hellwig

Im Oktober startet die »WebTech Conference« in München. Im Interview mit dem Journalisten Thomas Wießeckel spricht Webdesigner Jonas Hellwig über Gestaltung und Code, ein Thema, das er auch als Trainer auf der »WebTech Conference« und der »International PHP Conference« umfassend beleuchtet.

Dieses Interview ist zuerst in gekürzter Form bei t3n erschienen. Hier könnt ihr die fehlenden zwei Drittel nachlesen.

Beitrag zu Ende lesen

Alle Elemente zwischen zwei Elementen mit Hilfe von jQuery umschließen

wrap-with-jquery

Mit Hilfe von jQuery lassen sich Elemente von anderen Elementen umschließen. Das ist immer dann hilfreich, wenn ihr keine Möglichkeit habt an den HTML-Code zu gelangen oder ihn aus anderen Gründen nicht bearbeiten wollt. In diesem Beitrag stellen wir euch ein jQuery-Snippet zur Verfügung, mit dem ihr alle Elemente, die zwischen zwei bestimmten Elementen liegen, mit HTML-Code umschließen könnt. Beitrag zu Ende lesen

HTML Class-Attribut (CSS Klasse) per JavaScript hinzufügen

addclass-without-jquery

Für viele Aufgaben wird jQuery eingesetzt, obwohl pures JavaScript (Vanilla JS) die Aufgabe genau so gut lösen kann. Ein typisches Beispiel ist das Hinzufügen eines Klassenattributes in HTML. In jQuery wird dafür addClass() geschrieben doch viel länger ist es mit Vanilla JS auch nicht. Und man spart sich ggf. das jQuery-Framework.

Beitrag zu Ende lesen

Prozess- / Check-Out-Navigation mit CSS

prozessnavigation-css

Bei der Gestaltung von Prozess- bzw. Check-Out-Navigationen wird häufig auf Grafiken zurückgegriffen, um das gewünschte Aussehen zu erreichen.
In diesem Beitrag zeigen wir euch eine Lösung, wie ihr eine solche Navigation mit reinem CSS und ganz ohne Grafiken realisieren könnt. Wir gehen dabei auf eine Lösung mit floatenden Elementen und auf eine Lösung mit dem CSS Flexbox-Modell ein.

Beitrag zu Ende lesen

Quantity Queries – Layout-Veränderungen über die Anzahl an Elementen steuern

quantity-queries

Im responsive Design wird i.d.R. mit Hilfe von Breakpoints das Layout umstrukturiert, sobald eine bestimmte Displaygröße erreicht ist. Schwierig wird es allerdings, wenn man zum Zeitpunkt der Entwicklung nicht weiß, wie breit ein bestimmtes Element ist. Beispielsweise weil die Ausgabe dynamisch erfolgt oder weil ein Kunde über das CMS selbstständig Inhalte ergänzen kann. Hier kommen die sog. Quantity Queries (Mengenabfragen) ins Spiel: Mit ihrer Hilfe kann die Darstellung verändert werden, sobald eine festgelegte Anzahl an Elementen unter- und/oder überschritten wird.

Beitrag zu Ende lesen