kulturbanause Blog

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


Neues Photoshop CS6 Feature: Rich Cursor Support

Nach und nach sickern immer mehr Infos zu den neuen Features der Creative Suite 6 durch. Das folgende Video habe ich bei Dirk im Photoshop-Weblog entdeckt und möchte es euch natürlich nicht vorenthalten. Zu sehen sind neue Funktionen von Camera Raw und Photoshop CS6. Ab Minute 1:10 wird Photoshop gezeigt und Ihr könnt sehen, wie in den Voreinstellungen das neue, dunkle Interface in verschiedenen Helligkeitsstufen verändert werden kann. Kurz darauf wird die winzige neue Funktion "Rich Cursor Support" vorgestellt - ein Hilfsmittel das bei der intuitiven Anpassung der Pinselspitze Zusatzinformationen wie beispielsweise die Deckkraft einblendet. Kein Killer-Feature, aber allemal praktisch.

Beitrag zu Ende lesen

Navigationen für die mobile Ansicht in Select-Listen umwandeln: TinyNav.js

Umfangreiche Navigationen auf Smartphones benutzerfreundlich darzustellen ist gar nicht so einfach. Zwar ist es normalerweise problemlos möglich die Darstellung für den kleinen Bildschirm anzupassen - beispielsweise indem man alle Links untereinander abbildet - dann muss der Besucher aber erst über eine lange Liste an Links hinwegscrollen um den Content zu erreichen. Insbesondere bei Blogs will der Besucher aber häufig den neuesten Artikel lesen und nicht erst die Navigation sehen.
Das winzige jQuery-Plugin TinyNav wandelt ausgewählte Listen in Select-Listen um. Die sparen Platz und lassen sich auch auf Smartphones einfach bedienen.

Beitrag zu Ende lesen

Links im WordPress-Nav-Menu in neuem Fenster öffnen, mit Klassen auszeichnen und um Mikroformate erweitern

WordPress bietet mit dem wp_nav_menu eine tolle Möglichkeit Navigationselemente unkompliziert über das Dashboard anzulegen und zu verwalten. Normalerweise verlinkt man statische Seiten oder Kategorien innerhalb von WordPress, doch ab und zu möchte man auch externe Seiten mit in die Navigation aufnehmen, in einem neuen Fenster öffnen und vielleicht sogar mit einem entsprechenden Icon kennzeichnen.
WordPress bietet von Haus aus die Möglichkeit Links mit einer Klasse, einem Linkziel, einer Beschreibung und einem XML-Attribut auszuzeichnen. Da die Funktion jedoch standardmäßig nicht aktiviert ist, und ich sogar schon Anleitungen gesehen habe die Features mit JavaScript nachzurüsten, möchte ich euch kurz zeigen wo ihr sie einschaltet.

Beitrag zu Ende lesen

Responsive Image Replacement mit Breakpoints: Doubletake

Im Responsive Webdesign werden Bilder häufig proportional verkleinert um sie auch auf kleinen Displays noch ansehnlich darstellen zu können. Auch auf dieser Seite nutze ich diese Technik; sobald der Inhaltsbereich zu schmal wird, werden die Bilder prozentual zur Gesamtbreite des Inhalts abgebildet.
Diese Variante ist zwar sehr komfortabel - leider werden aber deutlich größere Bilddaten geladen als es für Smartphones überhaupt notwendig ist. Um die Ladezeiten und den Traffic für Besucher mit mobilen Endgeräten gering zu halten, kann es sich daher lohnen verschiedene Bilder für verschiedene Auflösungen anzubieten. Das jQuery-Plugin Doubletake vereinfacht diese Technik.

Beitrag zu Ende lesen

Welche HTML5-Features kann ich heute schon nutzen? HTML5 please!

HTML5 und CSS3 bieten uns umfangreiche und spannende neue Funktionen, nur leider ist man sich häufig nicht sicher welcher Browser welchen Befehl wie interpretiert. Vor einiger Zeit habe ich euch bereits das Tool Can I Use vorgestellt, mit dem ihr prüfen könnt ob ein Befehl unterstützt wird und ob ihr Vendor-Prefixes benutzen müsst. HTML Please ist ein weiteres Tool dieser Art. Auch hier gebt ihr einen Befehl ein und erhaltet Informationen über die Einsatzmöglichkeiten. Im Gegensatz zu vielen anderen Diensten findet ihr hier jedoch auch sehr detaillierte Informationen über notwendige Fallbacks, Polyfills oder Prefixes.

Beitrag zu Ende lesen

Fehlende Anwendungsseite für neu erstellte Facebook-Anwendungen (iframe-Tabs) aufrufen

Vor ein paar Tagen bin ich darauf aufmerksam gemacht worden, dass bei allen neu erstellten Facebook-Anwendungen der Link zur Anwendungsseite verschwunden ist. In meinen Augen kann es sich nur um einen kürzlich entstandenen Fehler handeln, braucht man die Anwendungsseite doch unbedingt um einen individuellen Facebook-iframe-Tab zur eigenen Fanpage hinzuzufügen. Bei bereits erstellten Anwendungen wird der Link übrigens nach wie vor korrekt angezeigt.
Damit ihr nicht verzweifelt suchen müsst, zeige ich euch wie ihr neue Tabs dennoch zur Fanpage hinzufügen könnt.

Beitrag zu Ende lesen

CSS-Dokumente perfekt strukturieren: ProCSSor

Wer als Webdesigner im Team mit anderen Entwicklern arbeitet, hat sicher schon die ein oder andere Diskussion zum Thema Code-Design geführt. Insbesondere bei der Strukturierung von CSS-Code können die Meinungen stark auseinander driften. Sollen die CSS-Eigenschaften nun untereinander oder nebeneinander geschrieben werden? Gehören Leerzeilen zwischen die Eigenschaften oder soll vielleicht sogar alles in einer Zeile geschrieben werden? Und wo ist der beste Platz für öffnende und schließende Klammern?
Damit jeder Entwickler arbeiten kann wie es ihm am besten gefällt wurde der Online-Dienst ProCSSor ins Leben gerufen.

Beitrag zu Ende lesen