kulturbanause Blog

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


WordPress: Gesuchte Wörter in den Suchergebnissen farblich hervorherben

Die Suchfunktion von WordPress wird häufig kritisiert und verfügt nicht über allzu viele Funktionen. Mit einigen Tricks lässt sich die Suche um fehlende Features erweitern und benutzerfreundlicher gestalten. So könnt ihr beispielweise über die functions.php gezielt Seiten in den Suchergebnissen verstecken.
Mit folgendem jQuery-Snippet hebt ihr die gesuchten Begriffe in der Ergebnisseite farblich hervor. Das erleichtert Besuchern die Orientierung und sieht z.B. so aus.

Beitrag zu Ende lesen

Ebenenstile in Ebenen umwandeln – Photoshop-Tipp

Die Ebenenstile von Photoshop sind ein beliebter Weg um eine Ebene schnell mit einigen ansehnlichen Effekten wie Schatten, Konturen oder Glanz zu versehen. Darüber hinaus könnt ihr Stile auch abspeichern und anschließend per Klick auch auf andere Ebenen anwenden. Leider lassen sich die Ebenenstile nicht gut weiterbearbeiten oder transformieren. Mit folgendem Tipp wandelt ihr alle Ebenenstile in "echte" Ebenen um. Diese Pixelebenen sind dann zwar kein Stil mehr, können aber umfangreicher angepasst werden.

Beitrag zu Ende lesen

CSS-Selektoren

Damit Elemente auf einer Website gestaltet werden können, muss zunächst festgelegt werden welche Elemente angesprochen werden sollen. Mit Hilfe von CSS-Selektoren trefft ihr diese Auswahl. Um das passende Element auszuwählen gibt es viele verschiedene Selektoren für verschiedene Anwendungsbereiche. In diesem Beitrag findet ihr eine Auswahl der wichtigsten CSS-Selektoren mit anschaulichen Beispielen.

Beitrag zu Ende lesen

Media Queries in der Admin-Bar anzeigen: WordPress Media Queries Monitor

Wenn Ihr für eine WordPress-Website ein „responsive“ Theme entwickelt, werdet ihr in der Coding-Phase wahrscheinlich ähnlich vorgehen wie ich. Zunächst entwickelt ihr die Desktop-Version der Website oder alternativ die mobile Variante – je nachdem welchem Prinzip ihr folgt. Anschließend wird die Seite für die anderen Bildschirmgrößen adaptiert. Ihr fügt nach und nach neue Media Queries hinzu und wechselt permanent zwischen dem Browser und dem Code-Editor. Den Browser zieht ihr dabei manuell groß und klein und testet so die verschiedenen Ansichten. Leider erkennt man in dieser Vorgehensweise nicht ohne weiteres welcher Media Querie gerade aktiv ist und wo Anpassungen am Code vorgenommen werden müssen. Insbesondere wenn ihr mit sehr vielen verschiedenen Breakpoints arbeitet kann das lästig sein.

Beitrag zu Ende lesen

Photoshop: Schärfen mit dem Hochpass-Filter

In Photoshop existieren verschiedene Standards was die Schärfung eines Bildes angeht. Die Klassiker dürften wohl die Filter »unscharf maskieren« oder »selektiv scharfzeichnen« sein. Eine alternative Methode das Motiv nachträglich zu schärfen führt über den Hochpass-Filter und den Blendmodus »weiches-« bzw. »hartes Licht«. Bei dieser Methode muss zwar manuell vorgegangen werden, das Ergebnis kann jedoch sehr detailliert eingestellt werden und bietet sich je nach Bild oder Workflow besser an. In diesem Photoshop-Screencast möchte ich euch zeigen wie ihr ein Bild mit dem Hochpass-Filter bearbeiten könnt.

Auch dieser Screencasts ist auf Wunsch eines Lesers dieses Blogs entstanden.

Beitrag zu Ende lesen

Druckversion und print.css einer Website

Eine optimierte Druckausgabe gehört auch in Zeiten von Responsive Design zum Standardrepertoire einer professionellen Website. Wenn der Code der Website »Mobile First« geschrieben wurde, ist die Anpassung des Layouts für den Druck sogar besonders einfach, da die Smartphone-Ansicht i.d.R. linear aufgebaut ist. Diese Darstellung wird auch in der Druckausgabe häufig gewünscht, weshalb weniger Anpassungen notwendig sind als bei »Desktop-First« geschriebenem Quellcode.
In diesem Artikel findet ihr einige hilfreiche CSS-Befehle für die Anpassung der Druckausgabe.

Beitrag zu Ende lesen

Photoshop-Ebenenstile als CSS3-Code exportieren: CSS3PS

Viele Webdesigner bzw. Frontend-Developer arbeiten immer weniger in Grafikprogrammen wie Photoshop oder Fireworks und wechseln bereits in einer sehr frühen Phase der Website-Erstellung in den Browser. Der Browser ist heute DIE neue Entwicklungsumgebung für Code und Grafik und das Stichwort in diesem Zusammenhang ist „Design in the Browser“. Cloud-Anwendungen und die integrierten Debug-Konsolen der Browser greifen uns dabei mächtig unter die Arme.
Heute möchte ich euch ein neues Photoshop-Plugin vorstellen, dass diese Entwicklung noch weiter beschleunigt: CSS3PS. Mit Hilfe des Plugins wandelt ihr Ebenenstile in CSS3-Code um. Ein Feature das ich mir bereits vor zwei Jahren auf der PhotoCon in München gewünscht habe ist somit endlich Realität geworden!

Beitrag zu Ende lesen