Ready to Shape-Shift? Meet Responsive Design

Thoughtful New Market Entrepreneurs realize their web-delivered product/service needs to be all things to all delivery devices… iPhones, Androids, iPads/Android Tablets and, yes, the variety of desktop browsers and screen types on the market.  But how?  Here are three blogposts describing a relatively new approach to web interface design called Responsive Design.

This piece from the Spring of 2010 is considered the seminal article on the topic:

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 separatesubdomains, 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?   Read more–  it’s a great primer, but gets a little technical if you’re not a coder.

And then there’s this piece that introduces the responsive design boilerplate kit called Foundation, “which is a fundamental framework for a [Responsive] one-size-fits all Web project and how to get sites that look consistent across all screen types, like this:

Lastly, if you’re a glutton for punishment, this post will round out your understanding and teach you a thing or two about Fluid Grids and the thinking and math that needs to go into a Responsive Design project.

The first key idea behind responsive design is the usage of what’s known as a fluid grid. In recent memory, creating a ‘liquid layout’ that expands with the page hasn’t been quite as popular as creating fixed width layouts; page designs that are a fixed number of pixels across, and then centered on the page. However, when one considers the huge number of screen resolutions present in today’s market, the benefit of liquid layouts is too great to ignore.

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here’s the math:  –read more–