kulturbanause Blog

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


Photoshop-Etiquette für Webdesigner (+ Tipps)

Wenn ihr als Webdesigner im Team arbeitet, habt ihr folgende Situation bestimmt schon einmal erlebt: man erhält eine Photoshop-Datei von einem Kollegen, öffnet sie guten Mutes und ist dann innerhalb von Sekunden bitter frustriert. Unbenannte Ordner, leere Ebenen, fehlende Struktur ...
Wer im Team arbeitet sollte darauf achten, dass auch andere mit den erzeugten Dateien zurecht kommen. Alles andere ist völlig unprofessionell. Das dache sich auch Dan Rose und schuf promt eine Photoshop-Etiquette für Webdesigner.

Beitrag zu Ende lesen

Responsive Webdesign: Media Queries auch im IE6, IE7, IE8 … nutzen

Der Begriff des "Responsive Webdesign" beschreibt die Technik über CSS3 Media Queries eine Website für verschiedene Displaygrößen oder Bildschirmauflösungen zu optimieren. Wie das im Detail funktioniert habe ich bereits in einem Tutorial ausführlich erklärt. Leider unterstützt der Internet Explorer 6-8 keine Media Queries; folglich wird die optimierte Version der Website auch nicht angezeigt wenn der Besucher mit einem veralteten Internet Explorer unterwegs ist.
Nun könnte man einwenden, dass Media Queries in erster Linie für die Optimierung auf Smartphones genutzt werden und die Optimierung auf Desktop-Rechnern nicht so wichtig ist. Sicher ist die Optimierung für Handys und Tablets wichtiger - aber auch Desktop-Rechner und Notebooks unterscheiden sich in der Displaygröße mittlerweile deutlich und sollten bei der Konzeption entsprechend beachtet werden. Ein kleines JavaScript namens "respond.js" rüstet die fehlende Interpretation von min/max-width-Media Queries im Internet Explorer nach.

Beitrag zu Ende lesen

Maximale Bildkompression: JPEGmini vs. Smush.it vs. PunyPNG

Geringe Dateigrößen sind nach wie vor ein wichtiger Anhaltspunkt um die Qualität einer Website zu beurteilen. Zwar wird das lokale Internet immer schneller und verkraftet auch größere Dateien, doch das mobile Web erreicht diese Übertragungsgeschwindigkeiten längst nicht. Und auch die Suchmaschinen berücksichtigen die Ladezeit einer Website und listen schnelle Seiten weiter vorne.
Eine von vielen Möglichkeit um die Ladezeit zu reduzieren, sind optimal komprimierte Grafiken. Wer jetzt glaubt, der "Für Web speichern"-Dialog von Photoshop würde ausreichen, der irrt. Photoshop erzeugt außergewöhnlich große Dateien und ist selbst innerhalb der Creative Suite nicht die erste Wahl. Fireworks komprimiert Bilder bei identischen Exporteinstellungen deutlich besser.
Wer Fireworks nicht besitzt, oder wem der Umweg vom Photoshop-Layout über den Fireworks-Export zu lästig ist, kann auf Online-Tools zur Bildkompression zurückgreifen. Ich habe mir drei gängige Dienste angeschaut und möchte euch zeigen welches Tool für welches Bild am besten geeignet ist.

Beitrag zu Ende lesen

WordPress: Widgetized Sidebars mit Beschreibung

Um in WordPress Widgets verwalten zu können, benötigt ihr mindestens eine widgetized Sidebar.
Sobald eine solche Sidebar vorhanden ist, kann der User im WordPress-Backend Widgets per Drag & Drop in diesen Bereichen anordnen. Insbesondere für Kunden ist es jedoch häufig schwierig zu verstehen welche Sidebar für welche Website-Inhalte vorgesehen ist bzw. an welcher Stelle im Theme die Widgets erscheinen. Mit einer Beschreibung könnt ihr es euren Kunden etwas leichter machen.

Beitrag zu Ende lesen

Grundgerüst für WordPress-Widgets

WordPress bietet durch Widgets die Möglichkeit Seiteninhalte intuitiv zu verändern. Insbesondere für Kunden ohne Programmierkenntnisse sind Widgets besonders gut geeignet um eine Website zu pflegen und über die gewöhnliche Artikelansicht hinaus zu verändern.
Um Widgets in einer WordPress-Installation verwenden zu können, muss das Theme über eine so genannte "widgetized Sidebar" verfügen. Anschließend steht diese Sidebar im Backend zur Verfügung und kann mit Widgets bestückt werden. WordPress bietet von Haus aus diverse Standard-Widgets an. Wem das nicht reicht, der kann die Plugin-Directory nach weiteren Widgets durchsuchen.
Je nach Projekt ist es jedoch notwendig ein eigenes Widget zu erstellen. Wie das funktioniert möchte ich in diesem Beitrag anhand eines Basis-Snippets zeigen.

Beitrag zu Ende lesen

WordPress: Prüfen ob eine Seite Child-Pages besitzt oder nicht

Wenn ihr überprüfen möchtet ob eine Seite untergeordnete Seiten (Child-Pages) besitzt, schaut euch folgendes Snippet einmal an. Durch diesen Code lässt sich beispielsweise eine Subnavi nur dann einblenden, wenn überhaupt Child-Elemente vorhanden sind. Wenn ihr hingegen testen wollt ob es sich bei der aktuellen Seite selbst um eine untergeordnete Seite handelt, werft einen Blick auf diesen Artikel: Prüfen ob die aktuelle Seite Parent- oder Child-Page ist

Beitrag zu Ende lesen