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.