Wir starten wieder mit etwas leichtem: eine kleine Spielerei: Nick Kwatek macht auf seiner Website seinem Beruf Interaction Designer alle Ehre: mal was anderes :).

Etwas Grafiklastiger ist ein HTML5 Scroll Book das durchs Web ging: Soul Reaper. Zur Zeit ist nur die Episode 1 vorhanden, aber eine tolle Atmosphäre und es ist ohne Flash umgesetzt.

Okay, bereit? Dann kommt hier etwas trickreiches nach meinem Geschmack. Eine Box bei der eine Farbe reinscrollt, abhängig davon von welcher Seite man reinkommt. Und das nur mit CSS. Sehr coole Idee! :) Pure CSS, Multidirection Hover Box.

Dann zu einer guten Nachricht: wir sollten alle box-sizing: border-box nutzen. Es wird unterstützt, es funktioniert, auch mit JS und IE8+. Also los, ich werde es auch bei Gelegenheit hier ausprobieren.
Paul Irish about box-sizing.
Das ist übrigens die Methode die der Internet Explorer 4 und Netscape 4 schon genutzt haben, das W3C hat die Breite ja bekanntlich anders definiert und somit setzte sich das bisherige Box-Modell durch. Back to the roots sozusagen mit der border-box.

Responsive Design

Mat Marquis von A list apart hat über ihre Versuche geschrieben wie man am besten mit Bildern in einem Responsiver Design umgeht. Und wie sie daran vorerst gescheitert sind. Daraus haben sie den Schluss gezogen das man ein neues HTML-Tag braucht: ein <pictutre> Element. Responsive Images: How they Almost Worked and What We Need. Interessant und Nachvollziehbar!

Bei dem obigen Redesign ging es um die Website des Boston Globe. Upstatement, die Firma die den Relaunch umsetzte, schildert uns hier die Hindernisse, Lösungen und Tools die sie dabei auf dem Weg fanden: How to Approach a Responsive Design.

Was mit Bildern geht, sollte natürlich auch mit eingebetteten Videos gehen. Einen schönen Artikel dazu wurde wieder bei A List Apart dazu veröffentlicht: Creating Intrinsic Ratios for Video.

Wer jetzt seine Seite oder auch andere einmal schnell auf ihre Anpassungsfähigkeit in Sachen Rexponsive Design testen möchte, Benjamin Keen hat hier ein kleines Tool zusammengebaut in dem man sich verschiedene Auflösungen mit einem Bookmark-Klick anschauen kann. A Responsive Design Test Bookmarklet.

Und zum Abschluss für die heutige responsive Runde, a better Photoshop Grid for Responsive Web Design und warum es sinnvoll ist die Font-Size bei bestimmten Auflösungen ebenfalls anzupassen: Fluid grids, orientation & resolution independence.

Off Topic: We solve for X

Diese Woche hat We solve for x eröffnet. Eine Seite die sich ähnlich wie die TED Konferenzen mit Ideen beschäftigt wie man die Welt besser machen kann. Deswegen hier einmal das Opening Video der ersten We solve for x Runde von Sergej Brin und Eric Schmidt, die Seite stammt nämlich von Google:

Und damit wünsche ich euch ein schönes Wochenende! :)

Aktionen: Kommentar-Feed verfolgen (RSS 2.0) , Kommentar schreiben oder einen Trackback auf deiner Seite einrichten.

Eine Reaktion zu “Meine Linkempfehlungen der Woche 6/2012”

  1. Panama sagt:

    Oben rechts in Ihrem Browserfenster sehen Sie drei Buttons – klicken Sie auf das mittlere. Anschließend können Sie das Fenster weiter verkleinern, indem Sie mit der Maus zu einer der Ecken fahren, die linke Maustaste gedrückt halten und das Fenster kleiner ziehen. Beobachten Sie, was mit den Elementen der Seite geschieht, je kleiner das Fenster wird. Und hier hätte ich für Sie noch ein Live-Beispiel anhand der Webseite CSS-Tricks von Chris Coyier , einem amerikanischen Webdesigner. Chris ist ein in Webdesigner-Kreisen weithin bekannter CSS-, HTML-, Javascript- und WordPress-Experte, und als solcher hat auch er 2011 seine Webseite (eine von mehreren) auf ein responsive Layout umgestellt. Er ist stets experimentierfreudig und setzt auf seiner Webseite regelmäßig die neuesten Trends und Kenntnisse um, daher hat sein Layout seit dem Erscheinungsjahr 2007 schon mehrmals gewechselt.

Schreibe mir