Das Erstellen von Formularen ist immer eine ungeliebte Arbeit und wird oft an letzte Stelle geschoben. Hier werfen wir einen Blick darauf wie die neuen HTML5 Formulare eingebunden werden können und wie die eingebaute Browser-Validierung funktioniert. weiterlesen

Favicons dienen nicht nur optischen Zwecken, sondern sie finden sich auch in den Lesezeichenleisten (Bookmarks) und der Tab-Bar wieder. Damit dienen sie zum schnellen auffinden einer entsprechenden Website. Also ist es von Vorteil, ein Favicon in die eigene Seite einzubauen. Dies ist jedoch kein Hexenwerk, wie es im folgenden Artikel beschrieben wird. weiterlesen

Gestaltungsraster gibt es mittlerweile wie Sand am Meer. Das Besondere am Semantic Grid System ist jedoch, dass es ohne zusätzliche Klassen im HTML Markup auskommt. Dabei setzt es auf den cleveren Einsatz von Selektoren innerhalb des Stylesheets, die mit einem CSS Preprocessor (in diesem Beispiel mit SASS) generiert werden können. In Verbindung mit MediaQueries lassen sich so im handumdrehen flexible, responsive Gestaltungsraster für Mobiles Webdesign aufziehen. weiterlesen

Das Box-Modell von CSS nach W3C Spezifikationen sieht vor, dass sich die tatsächlich gerenderte Breite eines Elementes aus with, border und padding zusammensetzt. Bei elastischen Layouts ist diese Berechnung hinderlich und frustrierend. Wie dies mit box-sizing: border-box deutlich vereinfacht werden kann: hier im Artikel! weiterlesen

Mit der neuen CSS3 Spezifikation ist es mittlerweile möglich, Animationen die früher nur mit JavaScript möglich waren, performancegünstig mit CSS3 umzusetzen. In diesem Artikel geht es um einen kleinen Einstieg in dieses Feature. weiterlesen

Photoshop bietet zwar die Möglichkeit Hilfslinien zu erstellen, jedoch sind diese nur unter Angabe von festen Positionen anlegbar. Will man nur ein schnelles Gestaltungsraster aufziehen müssen die Positionen zunächst berechnet, oder mit Formebenen nachgebaut werden. In diesem Artikel wird das Plugin GuideGuide vorgestellt, welches diese Tätigkeit radikal vereinfacht. weiterlesen

Die Slice-Funktion von Photoshop ist hoffnungslos veraltet und dem aktuellen Workflow Webseiten zu gestalten nicht mehr angemessen. Sie stammt noch aus einer Zeit, in der Layouts hauptsächlich mittels Tabellen aufgebaut wurden. Um den Export von Grafik-Elementen aus .psd-Dateien auch auf einer Windows-Umgebung zu automatisieren, wird hier im Artikel das Photoshop CS6 Plugin „Cut&Slice me“ vorgestellt. weiterlesen

Vektorgrafiken haben viele Vorteile. Sie sind unendlich skalierbar, auf allen Monitoren gestochen scharf und benötigen deutlich weniger Speicherplatz. Wie SVG Grafiken via CSS und Modernizr mit einem Grafik-Fallback für alte Browser ausgestattet werden können, erfahrt ihr hier. weiterlesen