kulturbanause Blog

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

Tools


Farbfehlsichtigkeiten im Web simulieren

Zu barrierearmem Webdesign gehört neben einem optimierten Markup auch ein angepasstes Design. Auf manchen Websites existiert eine Option das Design hinsichtlich einer bestimmten Farbfehlsichtigkeit (z.B. Rot-Grün-Schwäche) zu verändern, die Farben zu invertieren oder den Kontrast zu erhöhen. In einem solchen Fall müssen natürlich verschiedene Versionen des Design entwickelt und programmiert werden.
Alternativ kann der Webdesigner auch schon bei der Erstellung des Basis-Design darauf achten, dass das Farbkonzept auch mit Farbfehlsichtigkeiten noch ausreichende Kontraste bietet. Hier springt Color Oracle ein: Das winzige Tool ermöglicht es für Live-Ansichten des Bildschirms verschiedene Fehlsichtigkeiten zu simulieren. Wie das in der Praxis aussieht zeigt der folgende Screencast.

Beitrag zu Ende lesen

CSS3 Pie: CSS im Internet Explorer 6-8 aktivieren

Es gibt diverse Möglichkeiten um CSS3 für die Internet Explorer Reihe zu simulieren. Ein neues (?) Tool das in der vergangenen Woche durch die Blogsphäre gewandert ist nennt sich CSS3Pie. Alles was Ihr tun müsst ist eine *.htc-Datei innerhalb Eures Stylesheets zu verlinken. Anschließend verfügen die Internet Explorer 6-8 über neue Eigenschaften. Zu den unterstützen Features zählen die CSS3-Eigenschaften border-radius, box-shadow, border-image, multiple background images und gradient (Innerhalb der background-Eigenschaft).

Beitrag zu Ende lesen

Viewport-Bestimmung mit Browser-Resize

Den Viewport für alle gängigen Bildschirmauflösungen zu kennen oder zu simulieren kann heutzutage ein aufwändiges Unterfangen werden. Viel zu viele unterschiedliche Desktop-Rechner, Netbooks und SmartPhones gibt es mittlerweile. Neben einigen Tools wie der Webdeveloper Toolbar oder der Google Browser Size möchte ich Euch heute die Website Resize My Browser vorstellen.

Beitrag zu Ende lesen

Gridmaker für Photoshop CS4

Wer in Photoshop häufig mit Rastern arbeitet kennt das Dilemma zu Beginn eines neuen Layouts das Raster mühsam von Hand anlegen zu müssen.
Klar, es gibt Alternativen wie zum Beispiel eine Photoshop-Vorlage von 960.gs. Aber auch das dauert manchmal einfach zu lange oder das Raster soll anhand individueller Werte erstellt werden.
Andrew Ingram hat ein Photoshop-Plugin entwickelt welches automatisch nach Angabe einiger Basiswerte das Raster erstellt. Soweit nichts Neues, Plugins dieser Art gibt es viele - dieses Plugin funktioniert jedoch einfach super und ist kinderleicht zu bedienen. Das Plugin läuft bei mir nur auf Version CS4. Für die CS5 wird aber hoffentlich sicher zeitnah ein Update bereitgestellt sobald die CS5 final veröffentlicht wurde.

Beitrag zu Ende lesen

Zen-Coding – beschleunigt euren HTML/CSS-Workflow

Zen-Coding ist der neuste Trend in Bezug auf effektives und schnelles HTML- und CSS Markup. Mittels Online-Editoren oder Plugins für bekannte Programme wie Coda, Textmate, Espresso oder Dreamweaver wird eine Kurzform für HTML und CSS geschrieben die anschließend automatisch in das gewünschte Markup umgewandelt wird.

Beitrag zu Ende lesen

Online Cheat Sheet: Alle 252 HTML Sonderzeichen

Wer kennt das Problem nicht: Ein Sonderzeichen soll verwendet werden doch man kann sich beim besten Willen nicht erinnern wie die Kodierung nochmal war. Diese Website hilft weiter und vereinigt alle 252 in HTML4 und XHTML unterstützten Zeichen. Dank Browser-Suchfunktion finde ich hier das Zeichen schneller als in jeder anderen Liste. Vielleicht hilft es Euch ja auch mal weiter.

Beitrag zu Ende lesen