Responsive, Adaptive, Fluid, (Your Adjective Here) Web Design…What Does It Really Mean?

Recently, Adworkshop's Senior Digital/UX/Interactive Designer Geoff Sanford and I had the opportunity to attend An Event Apart in Washington, D.C. At the conference we heard several leading experts in the field of web design discuss the exciting features of the new HTML5 and CSS3 specifications. We also attended an inspired lecture on responsive web design given by Ethan Marcotte, whose book "Responsive Web Design" we had been reading for a few weeks leading up to the event. Hearing Ethan speak passionately about creating websites for the ever-increasing number of devices that are popping up made us realize just how vastly the landscape had changed in the past year.

What Happened? 

To understand responsive web design we must look at how the web has changed in recent years. Just a few years ago, designers only concerned themselves with the constraints of the desktop computer. With the smartphone explosion, designers had to start thinking about how their sites were displayed on small screens. This led to a dramatic increase in mobile versions of websites, which offered simple layouts appropriate for mobile smartphone browsing screens. With the success of the iPad and increase in touchscreen tablet use in the past two years, the number of screen sizes designers need to consider again increased. Several imitations of the iPad with varying screen sizes were created based on Google's Android mobile operating system. Faced with the dilemma of creating versions of sites specifically tailored to fit all of these new devices, designers and programmers came to the conclusion that we need to make our websites responsive and embrace HTML5 mobile web development.

Now What? 

Responsive web practices offer us the opportunity to create one website, one experience, and alter it depending on whatever device may request it. Rather than building a website for desktop use (typically constrained within a 960 pixel fixed width that is centered on the page), we must now build our sites from the smallest device up: enhancing the presentation of content, images and amount of graphics onscreen as the width of the device increases. This requires a more flexible and liquid approach to layout, allowing our content to adapt and size itself depending on how much horizontal space is available on the canvas. Combined with scalable images and fluid layouts based on percentages and em's, we can render content appropriately across any number of screen sizes. A device's screen is, after all, our canvas, and we would be remiss not to offer up a satisfying and usable experience no matter what size it may be.

Responsive web practices are more achievable now than ever before as more and more browsers adapt the new HTML5 and CSS3 specifications. These allow us to finally incorporate media queries into our stylesheets. HTML4 and CSS2 allowed us to include separate stylesheets for different media types, for example websites often include a separate print stylesheet that is run to strip down content to its most basic elements for clean printing. HTML5 and CSS3 media queries take this one step further, allowing us to inquire about specific media features of the device that is requesting our content, such as height and width. This is immensely powerful, because we can now include styles specifically designed to adjust the layout and graphics based on the width of the device without changing the content itself. Combined with simple and clean HTML5 coding practices, we can offer up a consistent experience across any device. Instead of giving a gated experience and hiding certain content and features from mobile users, we simply present them in a manner more appropriate for their browsing device.

To learn more about how to achieve responsive web design for older browsers, stay tuned for Part II- coming soon!