Responsive Design for Mobile Web

Fifteen years ago most home computers weren’t even connected to the internet.  We began to browse poorly maintained web sites, memorized urls (fancy term we learned), carefully said, “w.w.w.dot” and in this pre-social media era we were limited to email as the only option for sharing.   Today we carry our web-enabled computers in our pockets and are seamlessly connected to our social networks over multiple channels, self-admittedly addicted to just-in-time information access and fully immersed in a world of entertainment and engagement.

The next wave of innovation for web designers is Responsive Design.  Ethan Marcotte presented this process to describe a movement of tailoring disconnected designs over a number of web devices to enhance a flexible and optimal viewing experience.  That is, optimizing for one web instead of for specific browsers, devices and client platforms.

“Responsive web design term is related to the concept of developing a website design in a manner, that helps the lay out to get changed according to the user’s computer screen resolution. More precisely, the concept allows for an advanced 4 column layout 1292 pixels wide, on a 1025 pixel width screen, that auto-simplifies into 2 columns. Also it suitably fixes on the smartphone and computer tablet screen.” –designmodo, 2011

Responsive design and this sort of adaptive layout in of themselves don’t jump out as game-changers until you fully consider the many configurations of the backend content and the ever-increasing number of devices on the market.  The behavior of responsiveness was neatly summarized by Developer Andy Hume as, “what a website does when it’s loaded into an unknown browser on an unknown device by an unknown individual.”

One golden rule with responsive design: start with the smallest view.  There’s ongoing debate on this approach but regardless, a responsive layout meets mobile first.  Designers are cautioned to start small and work up from there, adding @media into the larger codebase of tablet and desktop browsers. Start with a narrow, single-column layout to handle mobile browsers and then scale up, not down.  A small screen friendly design harnesses the traffic (the incredible amount of traffic!) on mobile devices and provides an optimal experience.  It’s also worth noting that small doesn’t always mean low-res.  The new iPad is perfectly mobile and boasts one of the best retina displays on the market.  Small doesn’t mean crummy.

How do we develop solutions to handle both mobile and native now, as well as the devices of the future?  Responsive web design is often considered to be remarkably different from traditional designing in terms of technical and creative issues.  Of course if the user base, the “traffic”, are using mobile device to consume content, designers need to evaluate and carefully use techniques, strategies and tools to achieve a flexible and optimal viewing experiene.

Advertisements

About Beth Koemans

Master of Communication in Digital Media, University of Washington. Follow on Twitter @SocialBeth.
This entry was posted in MCDM Course Work. Bookmark the permalink.

One Response to Responsive Design for Mobile Web

  1. Kelly McIvor says:

    I’m going to need more education/information before the technique wins me over. The parts I struggle with are:
    – Information Architecture. How does Responsive Design (RD) deal with the fact (assuming it IS a fact) that the information needs of the mobile user is different than that of the tablet or desktop? How can RD handle that?
    – In order to speed loading times on mobile how does RD deal with images. How can it show an HD-quality image to a desktop but a low-res version to the mobile user? If the mobile device has to download the same high-quality images as the desktop the page load times and sizes will be just too big.

    Anyone?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s