During the last week I was at the Webshaped conference listening Stephen Hay’s talk about responsive design workflow. This post isn’t going to be strictly about that, but as Stephen’s way reminded somewhat the way I work myself, it made me want to write down some thoughts about my own workflow and how it has evolved during the past two or three years and how it might still evolve in the future.

Last year I wrote about a promising approach to multi-device Web design that enhanced responsive web design techniques with server-side solutions. Since then the idea, which I dubbed RESS (Responsive Web Design with Server Side Components), has been gaining popularity and a number of developers have written about how they're using it. Hopefully these resources are useful to anyone interested in learning more about RESS.

This morning, Ian Hickson emailed the WHATWG mailing list mentioning that a attribute that was currently being discussed on the list (srcset) is now added to the draft of the spec. To understand why this sucks, a little background is needed.

How do we reconcile a pre-parser that wants to know what size image to download ahead of time with an image technique that wants to respond to its environment once the page layout has been calculated?

For designs to be truly responsive, we need to move beyond flexible grids and media queries. John Yuda outlines five building blocks for the future of RWD

Last year The Boston Globe suddenly shed its old media reputation by launching what’s been called the world’s best-designed news website. We spoke to the Globe’s Digital Design Director, Miranda Mulligan, about design’s role in web journalism.

The Blessing. Fragmentation allows users to take their pick from thousands of devices. You can choose from phones with 3D screens, projectors, CDMA, GSM, or even CDMA & GSM. You may not care that Tag Heuer has made an Android phone but at least one person does (and they use OpenSignalMaps). It's a triumph for Android that as a single OS it can target so many markets.

The Curse. The proliferation of devices with their associated screen sizes, internal hardware and custom ROMs creates some difficulties. We spend a lot of time making the app presentable (or at less functional) on exotic devices - this is the most common request we get from app users.

The Study. Over the past 6 months we've been logging the new devices that download OpenSignalMaps, we've based this study on 681,900 of these devices. We've looked at model, brand, API level (i.e. the version of Android) and screen size and we've tried to present this in the clearest form we can.

RT @inkbase: You know shit's going down when @alistapart has to do a special issue:

Chances are, you're going to want to execute some code based on media queries in your snazzy responsive layout. At Springload we started by doing this with the window.matchMedia() function. It worked pretty well, but it always felt a bit, well.. inelegant. The problem was, we had to set our media queries in our Javascript as well as in our CSS files. This made our geeky department very nervous, so we struck out in search of a better, simpler way that didn't keep our developers up at night in a pool of cold sweat.

There are number of nasty traps to avoid when making your site responsive. Brad Frost of R/GA reveals five of the biggest ones and how to sidestep them

Device templates

Below is the HTML structure of a navigation menu created by WordPress. This unordered list is pretty common for content management systems and hand-coded websites alike. This will be the basis for our work.

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu.

TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item.

The future is flexible, and we’re bending with it. From responsive web design to futurefriend.ly thinking, we’re moving quickly toward a web that’s more fluid, less fixed, and more easily accessed on a multitude of devices.

As I was waiting for a table at a local restaurant the other day, I flipped through a couple of the free classified papers. I was shocked to realize how dependent I’ve grown on three simple features that just aren’t available in the analog world: search, sort and filter.

While the task of designing Web applications and sites for multiple devices can be daunting, two techniques can make the process more manageable: classifying device experiences and designing/building responsively. Here's how these two approaches can work together to optimize interface designs across a wide range of connected devices.

If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design. In this tutorial we’ll look at converting one of my previous WordPress theme designs into a responsive layout, while taking into consideration the design’s original grid structure.

hello Aptus, very nice to meet you #responsive

CSS for a big site is different to CSS for a small, or even medium sized-site. The way CSS was intended, when you create a new piece of functionality for your website you simply write some new CSS to style it - easy.

Here’s the technical stack we’ve used to build responsive news.

Nb. BBC is a large(ish) organisation so we’ve already got a fully operational platform upon which to write applications, so I’ve not listed every last thing, just the tools and technology that we’ve selected to create our project.

RT @TimothyWhalin: Sass and Media Queries: What You Can and Can’t Do

As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of “how” comes up. Responsive Web design, separate sites, or something in between? Here’s how I’ve tried to simplify this decision:

Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.

There are some pretty complex testing tools for responsive designs out there. I even see people constantly resizing their browser window using on-screen rulers. The easiest approach to me is just a simple page with a bunch of iframes, like Matt Kersley’s test page. Because I always ended up refreshing the whole page rather than the URL bar on that page, I saved the file locally and tweaked it a little.

RT @boxdeluxe: Responsive Images: How they Almost Worked and What We Need:

This was inspired by, and based on @lensco's excellent Simple Responsive Design Test Page. It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices. After getting such a positive response to my original post, I thought I'd expand on it a little. Since people are obviously targeting different device screen sizes with their projects, the form below now lets you generate a custom bookmarklet that displays only those device sizes you're interested in.

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Gizmodo, the popular gadget site and pageview king of Gawker Media, debuted a new look last night that they’re calling HD view, and it’s big. Not big in the grand scheme of things — big in the number of pixels it takes up. Whereas most websites top out at around 1000 pixels in width, Gizmodo HD stretches like Plastic Man, with photos and videos stretching wider and wider as the browser window does too. On my 1900-pixel-wide monitor, pages like this one (photo-dominant) and this one (video-dominant) both resize all the way to blowout width. Call it the doublewide approach.

@stugoo @withoutnations - just a bit odd

“I love “content-out” as a strategy…setting a series of breakpoints based on ems (based in turn on font size) could create lovely context-based layouts that move fluidly from one state to another. They won’t match with device sizes but they won’t be trying to. There is a lot to think about and play with there.”

RT @RWD: Digging @tommilway’s “How To Build a Modern Website in 2011”: (via @lukew)

RT @RWD: Fluid grids, meet fluid typography? /via @jonikorpi

RT @whatterz: Responsive web design templates and frameworks #responsive #design

'mobile internet usage to overtake desktop usage by 2015 in US' why you should be planning for mobile

RT @Folletto: Excellent examples of CSS media queries:
/via @adactio