image-rendering: pixelated/crisp-edges – Bildinterpolation im Browser steuern

image-rendering-pixelated

Grafiken werden in flexiblen Web-Layouts häufig mit Hilfe des Browsers skaliert. Sofern es sich um Pixelgrafiken handelt, geht Qualität verloren, wenn die Grafik über ihre tatsächliche Größe hinaus skaliert wird. Das Bild wird unscharf. Aus diesem Grund werden Grafiken normalerweise kleiner skaliert. Doch auch diese Vorgehensweise hat Nachteile, denn es werden mehr Daten geladen als notwendig. Responsive Images und Techniken wie Downsampling schaffen hier Abhilfe, doch auch die Art wie der Browser die Bildskalierung berechnet, kann euch dabei helfen ein optisch besseres Ergebnis zu erreichen.

Beitrag zu Ende lesen

Schnellerer Bild-Export aus Photoshop

ps-export

Adobe hat mit Photoshop CC 2015 (Version 2015.0.0) neue Export-Funktionen für Webdesigner in das Bildbearbeitungsprogramm integriert. Der bisherige Dialog »Für Web speichern« wird damit überflüssig – kann aber nach wie vor verwendet werden. Die neuen Export-Funktionen ergänzen den in Photoshop CC 2014 hinzugekommenen »Generator« und beschleunigen in erster Linie den Workflow anstatt neue Export-Möglichkeiten bereitzustellen.

Beitrag zu Ende lesen

CSS Feature Queries – @supports ()

CSS Feature Query

Wenn man herausfinden möchte welche Technologien von einem Browser unterstützt werden, führt der Weg häufig zum Hilfsmittel Modernizr. Das JavaScript-Framework schreibt u.a. CSS-Klassen in den <html>-Tag der Website von denen anschließend moderne Funktionen abhängig gemacht werden können. Diese Vorgehensweise ist im Moment gängige Praxis.
Alternativ zu einer JavaScript-basierten Lösung wie Modernizr könnt ihr auch das CSS Feature Query @supports () einsetzen um in Erfahrung zu bringen, welche CSS- und JavaScript-Techniken im Browser verwendet werden können. In diesem Beitrag möchte ich die CSS-Abfrage anhand eines anschaulichen Beispiels erklären.

Beitrag zu Ende lesen

CSS Filter-Effekte

css-filter-effekte

Mit Hilfe von CSS-Filter-Effekten können die Elemente einer Website gestalterisch manipuliert werden. Ihr könnt z. B. Bilder in ihrer Farbe verändern, Schatten hinzufügen, die Deckkraft reduzieren oder Bilder und Texte weichzeichnen. In Kombination mit CSS Blend Modes stehen uns somit Photoshop-ähnliche Techniken im Browser zur Verfügung. Da CSS Filter mittlerweile in allen modernen Browser (außer dem IE) zur Verfügung stehen, möchte ich in diesem Beitrag die Funktionsweise kurz zusammenfassen.

Beitrag zu Ende lesen

contenteditable=“true“ – HTML- & CSS live und ohne JavaScript editieren

content-editable

Wenn ein Anwender direkt auf der Website Inhalte oder Stile verändern kann, dann ist i.d.R. JavaScript im Spiel. Mit dem HTML-Attribut contenteditable, können HTML-Inhalte und CSS-Angaben auch ohne JavaScript editiert werden. Die Einsatzmöglichkeiten sind vielfältig und der Browser-Support ausgezeichnet.
Beitrag zu Ende lesen

Gestaltungsraster (CSS-Grids) im Web Design

CSS Grids

Eine moderne Website basiert i.d.R. auf einem sog. CSS-Grid System - einem Gestaltungsraster. Das Raster hat dabei verschiedene Aufgaben: Einerseits trägt es zu einem strukturierten Layout bei und sorgt dafür, dass eine Website professionell wirkt, andererseits unterstützt das Raster auch den Web Designer bei der Entwicklung, indem es vordefinierte CSS-Klassen bereitstellt.
In diesem Beitrag möchte ich das Thema Gestaltungsraster im Web ausführlich beleuchten. Ich gehe detailliert auf Responsive Grid Systeme ein, und erkläre die Funktionsweise an verschiedenen Beispielen.

Beitrag zu Ende lesen

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

responsiveimages

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