kulturbanause Blog

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


Screencast: Moderne Web-Icons entwerfen

In Folge 69 der Photoshop-Profis wurde ein Screencast von mir zum Thema Icon-Design veröffentlicht. Das etwa 11 Minuten lange Video behandelt die Grundlagen der Icon-Erstellung und zeigt wie man mit Photoshop-Basics wie den Ebenenstilen und Formebenen sehr schnell zu einem ansehnlichen Ergebnis kommt. Auch die Arbeit mit Lichtern und Verläufen wird ausführlich beschrieben.

Die Photoshop-Profis beschreiben den Inhalt so:

Individuelle Icons verleihen Ihrer Webseite einen unverwechselbaren Look. In dieser Folge der »Photoshop-Profis« zeigt Ihnen Webdesigner Jonas Hellwig, wie Sie mit wenigen Mitteln ein Web-Icon erstellen. Dabei erfahren Sie, wie Sie das Icon mit Gold überziehen und ein Symbol einstanzen. [...]

Beitrag zu Ende lesen

Flexible Videos im Responsive Webdesign

Wenn Ihr eine Website mit Media Queries für mobile Endgeräte optimiert und eingebettete Videos von YouTube, Vimeo und Co. verwendet, werdet ihr recht schnell merken, dass es hier ein Problem gibt. Das Layout passt sich zwar flexibel der Breite des Displays bzw. des Monitors an, das Video reagiert auf die CSS-Angaben jedoch nicht und behält seine feste Größe. In der mobilen Version seht ihr dann entweder ein abgeschnittenes Video oder einen in die Breite gedrückten Inhaltsbereich.
Ich möchte euch zwei Lösungen zeigen die dieses Problem beheben.

Beitrag zu Ende lesen

WordPress: Untergeordnete Seiten (Child Pages) gezielt ausgeben

In einem WordPress-Themes müssen häufig untergeordnete Seiten ausgegeben werden. Ich benötige diese Funktion regelmäßig um in der Sidebar die themenverwandten Seiten zur aktuell aufgerufenen Seite aufzulisten. In Kombination mit dem Snippet für den Titel der Eltern-Seite lässt sich hier sehr schnell eine individuelle Navigation erstellen.
Mit Standard-Funktionen von WordPress können alle, oder nur ausgewählte Seiten eingeblendet werden.

Beitrag zu Ende lesen

Responsive Webdesigns testen

Ich habe in der Vergangenheit bereits über verschiedene Tools geschrieben mit denen Ihr die Darstellung einer Website auf verschiedenen Endgeräten simulieren könnt. Nun möchte ich euch ein weiteres Tool für diesen Zweck vorstellen - es ist immer schön Alternativen zu kennen. Der Responsive Design Tester simuliert verschiedene Viewports und zeigt die mittels CSS3 Media Queries optimierten Layouts parallel an.

Beitrag zu Ende lesen

Mockup-Vorlage für Responsive Webdesign

Jede zeitgemäße Website wird mittlerweile mit unterschiedlichen Layout-Typen für verschiedene Ausgabemedien konzeptioniert. Je komplexer die Website später werden soll, desto wichtiger ist es das Projekt von Anfang an vernünftig zu planen.
Damit während der Mockup-Phase die verschiedenen Layouts schnell gescribbled und bewertet werden können, hat Jeremy P. Alford nun zwei Vorlagen für Responsive-Webdesign-Mockups bereitgestellt. Wenn ihr Mockups also analog erstellt, lohnt es sich die Vorlage einmal anzuschauen.

HTML5 und CSS3 in der Praxis – welche Features lassen sich heute schon nutzen – caniuse.com

Wenn ihr HTML5 und CSS3 in aktuellen Projekten einsetzen möchtet, stellt sich häufig folgende Frage: In welchem Browser wird Funktion X oder Eigenschaft Y denn nun eigentlich schon unterstützt? Genau das ist ein Kernproblem bei der Nutzung der modernen Techniken und führt zu einiger Verunsicherung. Damit ihr die zukünftigen Standards ohne Kompatibilitätsprobleme verwenden könnt, solltet ihr unbedingt einen Blick auf die Website "Can I Use" werfen. Über eine Suchmaske könnt ihr nach HTML5-, CSS3- und SVG-Befehlen suchen und erhaltet als Ergebnis eine detaillierte Auflistung über die jeweilige Browser-Kompatibilität. Absolute Praxisempfehlung.

Beitrag zu Ende lesen