Vor einiger Zeit habe ich drei Möglichkeiten verglichen CSS3-Code aus Photoshop zu exportieren. Der klare Gewinner meines Tests war CSS Hat, ein kostenpflichtiges Plugin für Photoshop, dass ich selbst täglich einsetze und wärmstens empfehlen kann. Ich freue mich daher sehr, dass die netten Entwickler aus Prag sich bereit erklärt haben, zwei Lizenzen im Wert von je 29.99$ für dieses Gewinnspiel zur Verfügung zu stellen. Was ihr tun müsst um zu gewinnen erfahrt ihr hier.

Beitrag zu Ende lesen

Data URIs sind komplexe Zeichenfolgen (Base 64 Code) mit deren Hilfe sich u.a. Grafiken erstellen lassen. Der erzeugte Code kann mit CSS als Hintergrundgrafik oder als HTML-Tag eingefügt werden. Im Gegensatz zu Pixelgrafiken muss keine externe Datei eingebunden werden. Im Gegensatz zu Grafiken auf Basis von CSS3 sind mit Data URIs auch komplexe Darstellungen möglich.

Beitrag zu Ende lesen

Mit Hilfe der CSS-Pseudoklasse :target können recht komplexe Techniken ohne den Einsatz von JavaScript realisiert werden. Häufig wird :target in letzter Zeit im Zusammenhang mit Slider- oder Off-Canvas-Effekten im responsive Design erwähnt. Doch wie funktioniert die Pseudoklasse überhaupt?

Beitrag zu Ende lesen

Auch in diesem Monat möchte ich euch die neuen Tools und Scripte über die gestolpert bin nicht vorenthalten. Angefangen bei Hilfsmitteln zur Berechnung von Prozentwerten im RWD, über Code-Generatoren für WordPress-Themes und CSS3-Animationen bis hin zu Debuggern, Emulatoren und praktischen JavaScripten. Es ist für jeden etwas dabei.

Beitrag zu Ende lesen

Das Interface von Windows 8 zeichnet sich u.a. durch bunte Kacheln mit einfarbigen weißen Icons im Startmenü aus. Neben Programmicons können hier auch Websites „angeheftet“ werden um vom Startmenü aus einen Schnellzugriff auf die Seite zu ermöglichen. Mit einer kleinen Anpassung im head der Website können Titel, Farbe und Icon dieses „Tile Icons“ festgelegt werden.

Beitrag zu Ende lesen

Responsive Webdesign stellt Designer vor eine Herausforderung: es müssen flexible Layouts auf Basis von Prozentwerten gestaltet werden, obwohl innerhalb der Grafikprogramme Pixelwerte verwendet werden. Designer müssen daher während der gesamten Gestaltungsphase im Hinterkopf haben, dass alle Spalten des Designs später in der Breite variabel sind. Der klassische Workflow stößt hier an seine Grenzen, da es wenig Sinn macht, zunächst unzählige statische Layouts zu entwerfen und diese anschließend in eine flexible Website umzuwandeln. Aus diesem Grund wird direkt zu Beginn des Projektes ein sog. interaktiver Prototyp erstellt, der die gesamte Flexibilität abbilden kann. Anschließend wird die Gestaltung der Website und die technische Umsetzung mit HTML, CSS und JavaScript parallel vorangetrieben. Mit Adobe Edge Reflow ist jetzt das erste Programm erschienen, das den Workflow im Responsive Webdesign abbilden kann.

Beitrag zu Ende lesen

Professionelles Webdesign ist längst auch optimiert für die Bedienung mittels Touch-Screen. Gerade im Bereich der mobilen Endgeräte existiert nahezu kein anderes Bedienkonzept. Da es auf einem Touch-Screen allerdings keinen Mouse-Over-Effekt gibt, muss unbedingt ein sinnvoller Aktiv-Zustand für Links integriert werden. Nur so ist sichergestellt, dass der Anwender eine Rückmeldung erhält, wenn er ein Element antippt. Umso ärgerlicher ist es, dass unter iOS Aktiv-Zustände ignoriert werden.

Beitrag zu Ende lesen