Responsive Web Design

Ethan Marcotte erklärt Responsive Web Design. Lesenswert.

In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. It’s an interesting phrase: At face value, of course, it speaks to mobile WebKit’s quality as a browser, as well as a powerful business case for thinking beyond the desktop. But as designers, I think we often take comfort in such explicit requirements, as they allow us to compartmentalize the problems before us. We can quarantine the mobile experience on separate subdomains, spaces distinct and separate from “the non-iPhone website.” But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?


CSS: Fluid Layouts

MightyMeta demonstriert seine SuperStrech Methode für Fluid CSS Layouts.

Here’s a technique I created a while back that I have revisited and tidied up a bit. It results in a layout that stretches both horizontally and vertically to the browser viewport. It includes a vertical navigation bar where button heights also stretch. It works in FF, Safari, Chrome, Opera, and IE 6-8


Fluid Images

Ethan Marcotte stellt ein Script vor mit dem sich Fluid Images realisieren lassen. Die Lösung scheint zunächst recht simple:

img {
	// IE
	width: 100%
	// richtige browser
	max-width: 100%;

With that, the larger issue was basically sorted: namely, that a non-fixed page’s layout won’t break if images or stupid Youtube movies were dropped into the markup. Hooray, right? As it turns out, not quite. Not quite hooray at all.


The challenging bit is that this isn’t a browser-specific problem, but a platform-specific one: native image scaling on Windows just, well, kind of sucks. Specifically, if you’re on any version of Internet Explorer (prior to version IE8) or on a version of Firefox older than 3.0 on Windows, things look decidedly janky: the text gets painfully artifacted as the image resizes, beyond the point of maintaining any semblance of legibility. Thankfully, it’s fixable.

Die Lösung ist ein kleines JavaScript was sich Microsoft’s AlphaImageLoader zu nutze macht.