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

Illustrator-Objekte NICHT am Pixelraster ausrichten

illustrator-logo-vektor

Adobe Illustrator wird dank SVG & Co. auch für Webdesigner ein immer wichtigeres Werkzeug. Wenn Ihr nun – beispielsweise im Rahmen einer Retina-Optimierung – eure Pixelgrafiken nachträglich auch als Vektorgrafik konstruieren möchtet, kann es sich als sehr lästig erweisen, dass horizontale und vertikale Pfadsegmente in Illustrator CC standardmäßig auf ganzen Pixeln einrasten. Normalerweise können Vektoren nämlich frei positioniert werden; was es euch ermöglicht deutlich filigranere Formen zu zeichnen.

Beitrag zu Ende lesen

Mobile First + Progressive Enhancement

mobile-first

Das mobile Internet hat die Art und Weise wie wir Websites entwickeln grundlegend verändert. Vor einiger Zeit habe ich einen Artikel über den veränderten Workflow im Responsive Design veröffentlicht und erklärt, warum wir umdenken müssen, mit welchen Herausforderungen wir uns konfrontiert sehen und welche Lösungsansätze es gibt.
Doch nicht nur die Erstellung eines flexiblen Layouts ist wichtig. Auch die Performance-Optimierung, die Browserkompatibilität und die Informationsarchitektur sind entscheidend für den späteren Erfolg der Website.
In diesem Artikel möchte ich beschreiben, inwiefern sich die Sichtweise bei der Konzeption und Entwicklung von Websites verändert hat.

Beitrag zu Ende lesen

Subtle Patterns Photoshop-Plugin

subtle-pattern-photoshop-plugin

Die Website Subtle Patterns bietet zahlreiche Endlosmuster für die Gestaltung von Website-Hintergründen zum Download an. Die Seite ist den meisten Webdesignern wohl bereits bekannt. Das Entwickler-Team von CSS Hat und Enigma64 hat nun zusammen mit Atlo Mo, dem Gründer von Subtle Patterns, ein weiteres Photoshop-Plugin erstellt. Das Subtle Patterns Photoshop Plugin integriert die Bibliothek der Subtle Pattern-Website als Bedienfeld in Photoshop. Ich hatte die Möglichkeit mir das Plugin bereits vor der Veröffentlichung einmal anzuschauen und freue mich euch sogar zwei Lizenzen zur Verfügung stellen zu können.

Beitrag zu Ende lesen