{ christian kolos // design blog }

Interessantes Experiment um eine Bildergalerie auch responsive verfügbar zu machen - weitere Details & Demo gibt´s drüben bei Codrops:

Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.

Interessantes CSS 3D Navigations-Experiment - klappt allerdings nur mit modernen Browsern (z.B. Chrome):



» soulwire.github.com/Makisu/
» github.com/soulwire/Makisu

» CodeVisually

Gutes Tutorial bei Codrops, um Fotostreifen ähnlich denen eines Passbildautomats zu simulieren. Klappt sowohl per Mausrad als auch für (mobile) Touchgeräte:



» via @NoupeMag

Und schon geht´s los mit der ersten Responsive Web Design Overdose:



Camera von Pixedelic ist die zur Zeit wohl beste (und kostenlose) Wahl für eine Slideshow, die sich automatisch an das entsprechende Gerät anpasst. Gibt´s übrigens neben der reinen jQuery- auch in einer Wordpress-Variante und bietet zahlreiche Features.



Das "CSS3 Drop-Down To Accordion Responsive Menu" von Ian Hansson ist ein interessantes Konzept für Drop-Down Navigationen, die bei eingeschränktem Platz auf mobilen Geräten automatisch zu einem Accordeon-Menü mutieren.



JQ-IdealForms ist ein kleines jQuery Framework für responsive Formulare. Zu den Features gehören unter anderem:

- Fully responsive
- Keyboard support
- Customizable input types select, radio, checkbox and file
- Custom datepicker using jQuery UI (with fallback)
- "On the spot" validation
- Localization
- HTML5 placeholder polyfill

Homepage & Demo | GitHub



Das kostenlose Respo Wordpress Theme gibt´s bei Themnific, eignet sich besonders für Blogs oder Magazine, und bietet folgende Features:

- Responsive grid layout,
- Flexslider – jQuery slider with turn on/off possibility,
- Unlimited dynamic featured sections,
- Sidebar tabs (latest, popular, random posts + list of tags),
- Full Width template,
- Font styles (font family, size, style and color) for typographic element like headings, body text, links, header, footer or navigation text and links and much more…,
- Custom widgets,
- 300px dynamic ad (custom widget),
- Ads Fix (custom widget),
- About Us Info (custom widget),
- Search form (custom widget),
- Logo and favicon upload,
- WordPress 3 + ready.

Responsive Webdesign ist in aller Munde und daran wird sich auch so schnell nichts ändern - ganz im Gegenteil. Um es (nochmal) mit den Worten von Andy Clarke zu sagen:

"Today, anything that´s fixed and unresponsive isn´t web design, it´s something else. If you don´t embrace the inherent fluidity of the web, you´re not a web designer, you´re something else. Web design is responsive design, Responsive Web Design is web design, done right."

Inzwischen gibt es eine regelrechte Flut von teilweise wirklich guten Artikeln, Tutorials, Tools, Scripts und Templates rund um das Thema.

Und da ich hier weder jeden einzelnen Artikel vorstellen will, noch viel von sinnfreien Listen á la "Die 50 absolut besten Responsive Webdesign Links für grüne Social Media Micro-Websites im Safari Browser" halte, gibt´s hier in Zukunft immer wieder mal die kleine Serie "Responsive Web Design Overdose" mit jeweils 3-5 überschaubaren, handverlesenen Artikeln. Viel Spass dabei! :)

Und gleich noch ein Tutorial hinterher - Html5 Rocks entwirrt die zahlreichen, möglichen CSS Filter Effekte:

Gutes Schritt für Schritt Tutorial bei .net magazine um mit jQuery und CSS einen Page Turn Effekt zu realisieren:

Na endlich ein Framework, dass auch cross-universe kompatibel ist! Html9ResponsiveBoilerstrapJS. What took them so long?

Oh, your head hasn't exploded yet? This should do it.
H9RBS.js (v0.0001) is a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds.

Lässt sich darüberhinaus wirklich leicht installieren:

Just attackclone the grit repo pushmerge, then rubygem the lymphnode js shawarma module – and presto!

» via Nerdcore

Einer der wichtigsten Optimierungspunkte um die Performance einer Website (vor allem bei mobilfähigen Projekten) zu erhöhen, ist die Reduzierung von Http-Requests, da diese oft sehr zeitintensiv sind.



Abhilfe schaffen unter anderem CSS-Sprites - statt dutzender von verschiedenen Requests wird hierbei nur eine Datei mit allen benötigten Grafiken geladen. Leider ist die Erstellung dieser Sprites oft recht mühsam.



Hierbei kann das kostenlose Online-Tool SpritePad den Großteil der Arbeit übernehmen. Die benötigten Grafiken können per Drag´n´Drop in die Webanwendung eingefügt werden und die benötigten CSS-Styles werden dabei automatisch erstellt.

Weitere Infos zu Sprite-Pad gibt´s auch bei Dr. Web

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.