Explore our Business-to-Business (B2B) Toolkit

Building responsive into your next B2B website redesign project

Author's avatar By Rene Power 18 Nov, 2014
Essential Essential topic

Examples showing why B2B website visitors deserve a great experience too

Whichever business sector you are in, it is still crucial to consider your digital marketing as a holistic process created around your website. In a 2013 blog post here on Smart Insights I detailed a number of areas that all effective B2B websites should have. Many remain relevant even though the technology and customer expectation has moved on.

The objective of this blog post is to build on this theme of centrality and align it with the delivery of powerful and engaging user experience that draws visitors in and keeps them coming back again and again.

Only by creating a website rich in customer focused content and that is built to respond to the device it is being viewed on, has the chance of catching and maintaining attention. I'll also be covering this topic as part of 6 key tactics to Turbocharge your digital marketing in a free Smart Insights webinar on November 18, you can register here.

Why invest in responsive design

As your own Internet use will testify, the use of mobiles, tablets, phablets and other portable devices has fundamentally altered most experiences of the Internet. Some B2B websites are recording mobile traffic anywhere between 10-20% of the total and this is only set to increase as devices improve, 4G and WIFI become more engrained and information needs evolve.

So, creating a mobile device friendly website experience should now be a critical part of all new B2B web strategies. Why? Because you want that first impression we talked about to matter and you’re risking up to 15% of your shop front foot-fall walking straight out of your online store if you don’t cater for it. Plus, you don’t want to add to your bounce rate because of a poor user experience.

Responsive web design (RWD) has existed for a few years, borne from the opportunities afforded to developers with the onsite of HTML5 . RWD allows for content on a website to stay the same; it is the layout of the content that alters for different screen sizes. Because of the differences between desktop, tablet and mobile phone your content might reduce from a column format, to two down to a single stacked column on a mobile.

RWD works for a number of reasons:

  1. No more pinching as the website renders for the environment it is being viewed in.
  2. RWD makes your site available anywhere, any time - whenever a customer needs it.
  3. Visitors to RWD sites really feel that their experience on their device of choice has been thought through and that they have been valued
  4. RWD makes it easier to connect with more customers - and make more money.

A few things to consider when working in RWD

It takes longer to design a RWD than a conventional pixel based website as there is much more to consider up front. Testing can add a huge amount of time and extend deadlines as a variety of devices and browsers are tested.

RWD will cost more than a traditional website. As well as the additional time it takes to create a RWD, it is still at a relatively early stage of its lifespan in web terms, so not all website designers are entirely comfortable with it.

RWD can, despite the focus on device rendering, lose some of the finesse compared to traditional websites. RWD sites need to be designed with the smallest screen size foremost in mind, which requires a simpler design and navigation. This is often positive, but can be limiting, for example in adding panels to a sidebar to generate leads or offer personalisation, although these are still possible with forethought.

But the good news is search engines like RWD

Google, in 2013, updated its recommendation to cover these three mobile SEO configurations:

  • Option 1. Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.
  • Option 2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
  • Option 3. Sites that have a separate mobile and desktop sites.

Some examples of great responsive b2b websites

Who is doing RWD well?

Fortunately, it's easy to check. You can always check if a site is responsive on your desktop/laptop by grabbing and dragging the bottom right hand corner of the browser window across to the left and seeing if the site adjusts to fit. (Or by opening a site on your tablet or smart phone and see how it offers a different, more direct to action experience!)

Ironcat, not only a finalist in the 2014 Blue Drop Awards, but more importantly a site fitting the brief for a mobile and tablet-friendly website that enables customers to search products based on specific needs and applications.

Ironcat 2

The site flexes well depending on device. And it offers a user-friendly way to contact sales representatives on the spot to ask questions about certain products, and also to provide a way for potential customers to locate a distributor.

Ironcat 1

Our site created for Pentair Safety Systems UK shows the responsiveness of the site even more starkly in its smart phone version. The information packed home page on the standard view is designed for a knowledgable customer demographic.

Safety Systems 1

Switching to mobile, specific elements are prioritised to get people 'on the go' quickly to the product content they are most likely to want.

Safety Systems 2

What great examples of RWD in B2B have you seen? Please share in the comments below.

For much more on responsive B2B web design and examples of how to integrate it with the rest of your b2b digital toolkit, download the Smart Insights B2B digital marketing bible (updated October 2014) today.


Author's avatar

By Rene Power

René Power, has been the Smart Insights Expert commentator on B2B marketing for over four years. He consults, talks and trains on the deployment of the full marketing mix within trade B2B sectors including packaging, food, science, construction, engineering and professional services. He specializes in integrating digital with traditional and demystifying digital marketing, social media and content marketing for trade B2B companies. A Chartered Marketer, René authors the The Marketing Assassin blog, shares updates on Twitter @renepower and you can connect via Linkedin. Rene also authored the recently updated Smart Insights Expert members guide: 7 Steps to Brilliant B2B Digital Marketing guide.

This blog post has been tagged with:

user experienceWeb design

Recommended Blog Posts