CSS Regions mit Adobe Edge Reflow

css-regions-reflow-grafik

CSS Regions sind eine CSS-Technologie mit deren Hilfe Inhalte durch verschiedene Container geleitet werden können. Sollte euch das Konzept hinter CSS Regions unbekannt sein, lest bitte zunächst meine Einführung in dieses Thema. In Adobe Edge Reflow – einem Design-Tool für Responsive Web Design – sind CSS Regions nun ebenfalls verfügbar. Die Einführung in Edge Reflow findet ihr wiederum hier.

In diesem Beitrag erkläre ich wie CSS Regions in Edge Reflow aktiviert und eingesetzt werden können.

Beitrag zu Ende lesen

CSS Flip Animation – Objekte umdrehen

flip

Bei sog. CSS-Flips (CSS3-3D-Animationen) wird ein Objekt umgedreht, so dass die Rückseite sichtbar ist. Um den Effekt zu erreichen, setzen wir CSS3-3D-Transformationen und CSS3-Transitions ein. Spannend an diesem Beispiel sind auch die perspektivischen Möglichkeiten von CSS.

Beitrag zu Ende lesen

CSS Regions

css-regions

Es ist durchaus eine anspruchsvolle Aufgabe eine Website inhaltlich interessant, optisch ansprechend und responsive herzustellen. Komplexe und flexible Magazin-Layouts mit Infografiken, verschiedenen Text-Boxen, Marginalien usw. sind oft nur mit erheblichem Aufwand zu realisieren. Das Problem: Wir haben keine Möglichkeit zusammenhängende Inhalte nacheinander durch mehrere divs oder article-Elemente fließen zu lassen. CSS Regions bieten eine Lösung.

Beitrag zu Ende lesen

WordPress-Auszug (the_excerpt) für Meta-Descriptions einsetzen

wordpress-excerpt

Der Artikelauszug von WordPress ist eine kurze Zusammenfassung des Artikels, die mit dem Template Tag the_excerpt im Theme ausgegeben wird. Der Auszug kann entweder frei formuliert werden, oder er wird automatisch aus den ersten Wörtern des Beitrags erstellt, sofern der Autor keinen Auszug formuliert hat.
Innerhalb des Themes kann der Auszug vielfältig eingesetzt werden. Für Suchmaschinen, für die interne Suchfunktion der Website und für Social Media-Portale bietet sich the_excerpt ideal an.

Beitrag zu Ende lesen

SVG mit PNG-Fallback

svg-fallback-png

Das Dateiformat SVG (Scalable Vector Graphic) ist die Zukunft der Grafikformate im Web. Sofern sich SVG gestalterisch anbietet, überzeugt das Vektor-Format mit brillanter Bildqualität auf allen Displaytechnologien (z. B. Retina/HiDPI), stufenloser Skalierbarkeit und verhältnismäßig geringer Dateigröße.
Leider wird SVG in älteren Browsern (< IE8) nicht unterstützt. Bis diese Browser an Relevanz verloren haben, muss also eine Übergangslösung her. Mit Hilfe von Modernizr lässt sich ohne Schwierigkeiten ein sehr wartungsfreundlicher PNG-Fallback herstellen.

Beitrag zu Ende lesen

Echtzeit Dateiexport (Bild-Assets) mit dem Photoshop CC Generator

photoshop-cc-generator

Als Webdesigner hat man u. a. die Aufgabe die verschiedenen Elemente innerhalb eines Photoshop-Dokuments auszuwählen und im passenden Dateiformat zu exportieren. In jüngerer Vergangenheit wurde dieser Job zunehmend lästig, da der Workflow nicht mehr linear verläuft und neue Herausforderungen wie Retina-Optimierung & Co. den Aufwand erhöht haben. Mit den Bild-Assets in Photoshop CC (14.1) hat Adobe daher eine enorm hilfreiche Funktion für Web Designer integriert.

Beitrag zu Ende lesen