Almost every B2B marketer wants an iPad app. Or an Android app. Or a mobile website. There’s no question about the need for mobile support but there are a lot of questions about the solution. Do you need a design for the Windows phone, iPad, Kindle, Galaxy tablets…The mobile madness is endless, but budgets and time aren’t.

We--B2B marketers, UX strategist, web developers--can’t keep up with the endless flow of devices and resolutions. Even if you could create a digital solution for every new device it would be impractical. Build it, test it, distribute it, maintain it, and do it again with every upgrade. And no matter what you create, no matter how much research and pixel-planning you do, as soon as your design is on the web, you have no control. Only your users are in control. You can never know how they might view your designs, on what devices, at what resolution, and with what input devices.

You can’t know what your users want. But you can use technology to respond. With responsive web design.

One design, many devices: Delivering whatever the user needs

In Responsive Web Design, the user’s behavior and environment—platform, screen size, orientation--determines what design is displayed on her device. So if a user goes from her iPhone to her iPad to a desktop website, the design automatically switches to respond to the different sizes and resolutions. It’s not a different design for each device, it’s the same design displayed in different ways.

Images from Ethan Marcotte's Responsive Web Design book, available through A Book Apart

If you aren’t familiar with the concept, Ethan Marcotte wrote the definitive Responsive Web Design book building upon an article originally published on A List Apart. It’s a short, must-read resource if you are considering responsive web design. Without going into the development details, the design is created using three core components:

1. A flexible grid-based layout
2. Flexible images and media
3. CSS3 media queries

Using these tools, you can create a design that adapts to whatever devices display it, responding by delivering whatever the user needs. One design serves the needs of countless devices, making your content portable and accessible regardless of the device constraints. There’s no need to create a different design for every new device that comes out.

The technical aspects of the development side may be easier to grasp than the abstract thinking for the design side. Intelligent CSS media queries determine the device and then decide what layouts, images and media to serve up. But how do you create a flexible and fluid design? It’s a new way of thinking and working. It takes the same level of planning and strategy as any digital project, but it takes more design and preparation time because there are more variables. There’s more testing across a range of devices, resulting in more prototyping, more team reviews and changes. It’s a very collaborative and iterative process. Ultimately, you invest more upfront but you get more in the end: a website that works on your CEO’s iPad, your sales rep’s Android phone, and your engineer’s Dell laptop.

Responsive web design is as much a philosophy as it is a design method. There are lots of great articles on how to build responsive web designs (see links below), but for B2B marketers just learning about responsive web design, you might be wondering why you wouldn’t use this approach for everything.

Determining the best digital solution still depends on your users and your goals, it has to meet the needs of the project you are working on. Here’s a personal example.

Godfrey just released a B2B marketing eBook, and we needed to create a page for users to download it. This was the primary purpose of the webpage and its content. There were different versions of the eBook, and we had no way of knowing what device a user would be on when arriving at the page. We looked at our site analytics to get an idea of the typical browser stats, but ultimately, we couldn’t control how the page would be viewed. We built a responsive landing page because it allowed us to create a better experience for users across a range of devices. It’s a fluid design that works on a desktop site, landscape tablet, or portrait phone. It was the right solution for the content, use cases, and goal.

 Images: Responsive web landing pages landscape and portrait view at tablet and phone sizes

How to stop the mobile madness

Responsive web design is a great way to stop the mobile madness of trying to create a unique solution for every device. But it’s not the answer to everything. It’s not intended as a replacement for a mobile website--if you need one. (Read “Do you need a mobile website or an app?”) Depending on your content and likely use-cases to access it, there may be a good reason to have a “full” desktop site and a streamlined mobile version. Then again, a mobile website assumes a lot about context of use. A content-heavy desktop site is cut back to be more focused and make tasks easier. Why does this apply only to mobile? Shouldn’t a desktop site be just as easy to use? In the quest to create a great user experience, maybe you need a better content strategy first, regardless of the device it’s viewed on.

Start with your audiences not technology

Responsive web design can aid in the creation of a better experience for users across a range of devices, from old desktop computers to the newest tablets. But supporting your users starts with knowing what they want and then figuring out how to best deliver it to them. Get to know your audience and ask them how you can help. There’s no app for insight. There’s only your willingness to seek it.

Responsive Web Design Resources

- Responsive Web Design, A List Apart
- Understanding the Elements of Responsive Web Design
- Media Queries Gallery
- Guidelines for Responsive Web Design, Smashing Magazine

- The Cost to Build a Mobile App: Is the Price Right?
- Your Mobile Design Isn't Working: Here's How I Know
- Optimizing Your B2B Website for Mobile: What it Means and How to Start
- 5 Assumptions Ruining Your Mobile Design Approach