{ christian kolos // design blog }

Schönes Html/CSS-Experiment von James Mellers, um die Voraussetzungen für responsive Webdesign zu visualisieren:

HTML/CSS + media queries (no images, no JS*) this is a simple interactive experiment with responsive design techniques.

Resize your browser to reveal just a handful of the kind of devices you should expect web pages to be viewed on. Each device illustration is rendered using the same basic HTML which adapts its appearance to the changing viewport size, representing different devices accordingly. This is achieved using media queries to apply different CSS rules for different sizes. This experiment is intended to illustrate the basic premise of responsive web design and the power of CSS to tackle it.

Make your New Year's resolution learning to code.
Sign up on Code Year to get a new interactive programming lesson sent to you each week and you'll be building apps and web sites before you know it.

Digitpaint bieten in ihrem Adventskalender täglich neue Tipps und Tricks rund um Html5 und CSS3 an. Bin mit dieser Entdeckung wohl etwas spät dran, aber die bisherigen Türchen lassen sich ja trotzdem öffnen ;)

InstaCSS ist eine simpel gehaltene Website, welche alle CSS properties inklusive Beschreibung und Code-Beispielen dokumentiert. Ein Muss für alle, die sich mit CSS beschäftigen, und selten benutzte oder neue (CSS3) Eigenschaften nachschlagen wollen:



» via WebResourcesDepot

Wer mittels Html und CSS schon einmal versucht hat Formular-Elemente für alle Browser zu vereinheitlichen und zu stylen wird garantiert den ein oder anderen Fluch weit unter der Gürtellinie ausgestossen haben.
Das Mini-Framework Ideal Forms, basierend of jQuery, schafft Abhilfe:

- Ideal Forms is a small framework to build powerful and beautiful online forms.
- It's very easy to use and requires minimal html syntax.
- Absolutely everything is stylable with css, no images needed.
- Support for IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ and Opera 11+.
- Degrades gracefully with javascript disabled.

Neben den neulich vorgestellten "Android Application Development" Video Tutorials hat TheNewBoston auch ein wirklich umfangreiches und zudem kostenloses Video Tutorial zu jQuery im Angebot. In 200 Videos mit einer Gesamtlaufzeit von über 20 Stunden kann man sich so Schritt für Schritt in jQuery einarbeiten.



Hier geht´s los mit Folge 1 - die gesamte Playlist gibt´s unter www.youtube.com/playlist?list=PL0EFA1232C66601D7:



Das sind übrigens nicht die einzigen Themen von TheNewBoston - unter Tutorials befinden sich noch zahlreiche weitere kostenlose Videos zu Dreamweaver, Photoshop, Html & CSS, iPhone Development, Java, PHP und vielem mehr.

Im YouTube Channel von TheNewBoston gibt es einen 200-teiligen Videokurs zur Entwicklung von Android Apps. Bei einer Gesamtlaufzeit von fast 20 Stunden wird alles Wichtige erklärt.

Hier geht´s gleich mal los mit Teil 1:



» via vinzv

Mit der Mobilizer Desktop-App (Adobe Air benötigt) ist es möglich Websites mit verschiedenen mobilen Endgeräten zu testen bzw. simultan zu vergleichen. Im Moment sind zwar nur iPhone 4, Palm Pre, HTC Evo und Blackberry Storm integriert, aber weitere Geräte sollen schon bald folgen.

Ich würde mir zwar noch ein paar weitere Funktionen wie z.B. eine horizontale Ansicht, Zoom-Funktion oder Simulierung der Ladezeit wünschen, für einen ersten Eindruck ist Mobilizer allerdings sicherlich nicht schlecht. Das Tool bietet ausserdem einen PNG-Export von Screenshots an, was beispielsweise für das eigene Portfolio wirklich nützlich sein kann.



Hier noch ein kurzes Video zu Mobilizer:

Preview mobile websites, design mockups, and local HTML on Mac or PC.

» via WebResourcesDepot

Umfangreicher Überblick bei noupe mit zahlreichen nützlichen, browserbasierten CSS3 und Html5 Tools:

Mit dem Vegas Background jQuery Plugin lassen sich Bilder in voller Größe als Websitehintergrund integrieren. Dabei werden die Bilder nicht nur automatisch je nach Bildschirmauflösung skaliert - es lassen sich zudem auch Slideshows und Textoverlays integrieren. Demo, Download und eine umfangreiche Dokumentation gibt´s auf der Entwickler-Website.



» via t3n