Thoughts on “Responsive Design”

Hey, this is Jeff, and I wanted to share my thoughts on the most recent and “trendy” topic in our industry – responsive web design. You’ve probably heard of it, but maybe you don’t know exactly what it is. In a nutshell, responsive design is a way of coding HTML and CSS elements of a web page to conform to the size of the device that it is being viewed in. Device hardware comes in a plethora of viewer sizes, so in order for a website to look right on every device, a lot of considerations come into play.

I’d like to focus, for now, specifically on how responsive design impacts mobile. Cause (and I might take some flack for this) I am not always a fan. Here’s why:

The reason simply squeezing a desktop display into a mobile-responsive design doesn’t always work is because people have different intentions, attention spans, and motivations when they’re viewing information on their phone versus a desktop computer. Trying to convey all the information from a desktop site on a small viewer like a mobile device is going to quickly become overwhelming for most of the people who are looking at it. Scroll, scroll, scroll, scroll, scroll…

The best mobile designs are designed for mobile (go figure!). They don’t just try to cram a website into a mobile browser. Rather, they are designed specifically with a mobile browser in mind. The key to mobile design and copy is “short and sweet.” High impact, mostly visual, key benefits, and punchy copy. People who are looking for information when they are on their phone want the readers digest version. Unless it is a news website, mobile copy is not meant to be the full story. It should be a paraphrase broken down into its most important components and key communication points. The goal on mobile should be to either provide just enough information to get vistors to “act now,” (whether that action is a small purchase, a social share, etc…) or to prompt them to investigate more on the full version of the site the next time they reach their computer by using something like an email subscription.

An analogy from traditional marketing would be… Trying to fit your desktop website into a mobile browser, no matter how you rearrange the content for the device, is like trying to fit all the information from a product catalog onto a highway billboard. The media are different, the time span you have to capture attention is different, and people’s behaviors and expectations when interacting with the media are different.

Just my three cents.

2018 Update

When I wrote this post in 2013, the debate was over whether the mobile strategy should be responsive design or a mobile-specific version. Those days, I leaned towards a mobile-specific version. As technology has changed, so have my preferences and technological approach. I still believe strongly that a mobile experience should be approached from a mindset of low attention spans, and many times content should be paired down. Mobile-first design strategy attempts to solve this problem, but that approach usually turns out a very sparse looking desktop experience. The right approach in 2018 is to look at your user behavior across all devices to determine your design and user experience, as well as the technological methodology to accomplish those objectives. As a generalization, I like splitting the difference between responsive and mobile-version methods, but using width detection and JavaScript, not server side user agent detection, which can be a bit unreliable and even harder to customize dynamically.