Those of us in the web industry have become familiar in 2012 with a new approach to website development. Responsive Web Design, or RWD for short. The promise of RWD is that it allows developers like DeepBlue to create a website from a single-data source and adjust its layout accordingly to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to tablets to mobile phones). RWD provides an elegant solution for a complex problem – how to develop a single website that satisfies today’s multi-platform consumer. RWD is not a new technology; rather, it is a new way of thinking about the web. Although a website built using a responsive approach is self-evident when pointed out, we have found that the term creates much confusion with customers, hence the purpose of this article. To try to clarify, we will define the two main design approaches to modern website development – Responsive Design and Adaptive Design – and allow the reader to decide for themselves which approach is right for them.
Let’s begin with the basics:
Responsive Web Design – Multiple Fluid Grids
Adaptive Web Design – Multiple Fixed With Layouts
Confused? I don’t blame you.
RWD uses something with the obscure concept of fluid-based proportion grids. 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 addition RWD uses flexible images, and media queries, and when all three components are combined we create a quality experience for users no matter how large (or small) their display.
Let me try to put this in simpler terms: RWD websites are like silly putty, they have the ability to bend and curb, essentially morphing themselves into the proper dimensions for any web experience, including desktop, tablets and smartphones. For those of you who remember the 1996 Summer Olympics in Atlanta – think Whatizit, just without all the horrible embarrassment it befell onto our fair city.
Got it? Good. Let’s move on.
Adaptive Web Design (AWD), on the other hand uses a fixed width layout in designing and developing a website. Instead of a responsive site that will adjust itself accordingly, the AWD approach is to create multiple versions of a website based upon its anticipated use. We used this approach for the Tennessee Aquarium website several years back. At that time, the iPhone had just made its glorious appearance onto the scene and users were excited about the ability to visit actual websites on their phone. Granted, of course, that the experience was not always optimal – I will not even mention Flash – we loved the fact that the geniuses at Apple were thoughtful enough to create an intuitive, gesture-based interface which allowed us to zoom in and out, making it possible to read content that was designed for a larger screen on our tiny 3.5 inch phone. For the time being, it was good enough. Soon, however, customers started complaining to us that their customers were complaining to them that their website was not very useful on their smaller devices. They asked us if we could create an alternative version of their website, designed specifically for small screens, squinty eyes and fat fingers. Witness the birth of the mobile-friendly website experience – a scaled back, dumbed down, easier to use version of what has become affectionately known across small screens everywhere as the ‘full site’. Even though the creation of a mobile version required additional cost, design, development and the creation of a sub-folder inside the CMS (thus duplicating content entry efforts), our customers were once again happy because, indeed, their customers were also happy.
Between the years 2006-2010, the Adaptive Web approach dominated mobile strategies. Essentially, we developed two websites – one for the desktop experience and one for the smartphone experience. Then, wouldn’t you know it, those geniuses at Apple introduced yet another disruptive product. The iPad. What exactly was the iPad? At the time, we were not quite sure. It wasn’t a laptop, yet it wasn’t a phone either. It was a brand new category. Inevitably, our customers started calling us asking about how we can help them optimize their tablet experience. Although the average website will default to its desktop version on a tablet, the content was not always an ideal fit, especially in portrait mode. Should we really build a third website that was optimized for tablets? Will customers actually pay for three websites? Things started to get a little murky, and that’s when we started hearing about yet another rumored device that would strike fear in the heart of designers – the iPad Mini!! Chaos ensued.
It all started to change with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations using what you are now familiar with (thanks to this article) as the Responsive Design approach. RWD is still in it’s infancy and best-practices are being established as I write this article. It is by no means flawless – the concept of pixel-perfect has been thrown out the window along with Flash architecture. But it does represent the single greatest hope for a portable web that works the way we expect it to.
Earlier in this article, I offered to clarify the differences between RWD and AWD and allow you, the reader, to decide for yourself which approach is best for you and your organization. I realize that my intentions for objectivity may have been slightly influenced by my obvious subjectivity and preference for RWD. Still, I leave the ultimate conclusion to be made by you. If you were undertaking a new website, which approach would you choose?