Responsive Website Design + Development

In recent months, I’ve been meeting with more companies that request “an iPhone website” as part of their project. It’s an interesting request: Of course it speaks to the obvious increase in the variety of devices and their browsers penetraing the marketplace. And no one (that I’ve spoken to) thinks that this number and variety is going to do anything but increase.

The time to think beyond the desktop is now. As designers, we often take comfort in explicit requirements because they allow us to compartmentalize the problems. We can separate the mobile experience on separate subdomains, distinct and separate from “the non-iPhone website.” But what’s next? An Android website? An N90 website? Can we really continue to commit to supporting each new device and browser with a new user experience? Obviously not. But how can this issue be addressed?

Becoming responsive

Responsive websites respond to their environment. Responsive web designing is a completely different design model than traditional web design, and is a fundamental shift in how we’ll build websites for the decade to come.

Responsive web design term is related to the concept of developing a website design in a way that helps the layout change according to the user’s computer screen resolution. Using multiple fluid grid layouts, the concept allows for an advanced multi-column layout that auto-simplifies into columns sized for the requesting devices’ format. One site for every screen.

There are special considerations. Pages that include data tables pose a special challenge because data tables are very wide by default and when you zoom out to see the whole table it becomes too small to read. When you try to zoom in to make the it readable, you are supposed to scroll both horizontally and vertically to look through it. To resolve this problem, the respoinsive templates reformat the data table.

Images in responsive web designs are context-aware. This means generally means that the images are served at different resolutions, ranging from larger screens to smaller ones. The scaled images appear to change fluidly, allowing designs to look sharp in every context.

Website vs. Web App

When I get into the discussion about rendering a website for multiple devices, it typically starts with the sentence; “I need a iPhone app”.

Once the conversation develops, the need is generally is to make the site content accessible by these devices, rather than delivery unique mobility functionality. Responsive websites reduce (if not negate) the need for specialized iPhone or Android applications. There are still some business cases for iPhone/Android applications, but they are getting fewer and more specialized.

What do you think?