Is responsive web design really a B2B thing? Surely it's B2C? And is it a good idea? I recently saw an awful blog from David Wells that suggested responsive design basically means removing sidebar elements and calls to action on mobile devices. Fortunately, David's theories were gunned down quite comprehensively in the comments section. For me, responsive B2B website design is about the enhancement and customisation of your web pages based on how your user is viewing the site. Why would a tailored solution for your potential customer be a bad idea?
The cost implications of responsive design can be reduced by basing templates on a framework. One of the most popular responsive frameworks out there is Twitter Bootstrap. It's got tons of features and styles built in, so much so that many people don't even add their own. However, the beauty is that it's not a fixed package you can't touch - it's completely customisable and extendable. It's a great starting point for amateurs and business users alike.
Builtwithbootstrap.com has a comprehensive list of sites based on the Twitter Bootstrap framework. I've been through the list and picked out 13 responsive sites in the B2B market. Some are great, some could do with some work, but overall they demonstrate why it makes sense to go responsive with your B2B website design.
Offers an easy way to store and manage files online. The website is a really simple
customisation of the original Bootstrap styles, using their branding colours. The positioning statements are clean and clear at the top on all sizes. My only criticism with this site is the navigation. It fixes itself to the top of the screen even when you scroll, which is fine on smaller screens as the logo reduces down the 'leaf' element and the menu disappears to a clickable button. The issue I have is that the menu stays in its closed state right up to desktop size, which for me isn't necessary. In addition, the script controlling the opening and closing of the menu needs work. You have to press it twice to get it to appear, which is annoying.
As software providers for enterprise architecture management, they're obviously keen to let you know from the start that they know about new technology. They've done a really nice job of expanding on the original styles while keeping all the nice UI features of Bootstrap. The strange thing about this site is that it doesn't fully cater for iPhone users. The iPhone's resolution pre-iPhone5 was 320 x 480, but at this size I still get scroll bars to view the full content, which isn't ideal. The screenshots of their software show it in use on a desktop and tablet, and at the width of 768 pixels (iPad and iPad mini portrait width) the site displays OK, but there are still issues with scrollbars.
A really good resource scheduling website. It's nice and bright with some lovely illustration work. Very clean, and I like the fact they've kept the menu so simple that it doesn't need to be hidden away at smaller screen sizes. They've just reduced the size of the text, which still works really well. A great site where none of the message is lost regardless of what you view it on.
4. SSD Nodes
Agile Scrum project management software. These guys haven't messed with the default styles, just added some bespoke images and a really great scaling video in a modal format. They do a nice job of cleaning up the header on smaller screen sizes, and have elected to retain the dropdown menus in closed areas, even at mobile size. I think there's enough design for it to work OK, and I like the fact they've included the 'Get Started Free' and search form tucked away in there.
OK so this isn't strictly a B2B website, but it has business chat on there! I was just keen to show off such a different-looking site that is underpinned by Bootstrap. Its Microsoft Metro-style interface shuffles the content around brilliantly, making fantastic use of the available screen real estate. Overkill? Yes. Genius? Certainly.
There's nothing sexy about selling catering equipment, but even so this German site is a really ham-fisted attempt at responsive design. The grid alignment is all over the place, the home page image is too short (actually it's the layout that's too wide), the menu drops from being inline to a vertical list far too early when there's still room to play with (dropping the icons would save a heap of space and allow for a full menu on tablets), and the products don't stack correctly at the top of the homepage. They fair better on the sub pages, but I'd like to see the images scale right the way along. They just don't take advantage of the space on the screen to make the images bigger, so you're left with big white gaps around everything. I don't think I've seen Bootstrap used in ecommerce before, certainly not in a commercial capacity, but this one definitely needs work.
CRM software. A simple, clean site that takes full advantage of the features of Bootstrap. Does a nice job of selling their products in terms of usability. After all, if the website sucks, why wouldn't the software?
There's a lot to like about this site for messaging solutions for ISPs, including some good photography and nice illustrations. The navigation bothers me a bit though. Below desktop, the nice light font changes to a smaller, bolder font. Perhaps it was a legibility issue as it doesn't really save any space, but I'm not a big fan. There's a secondary navigation on the features page that oddly goes from displaying inline to stacked far too early, dominating the screen. This could have been shuffled around much more elegantly to save on scrolling. The early switching causes issues further down the page, as the single column at anything under iPad portrait size gives images that are really grainy or don't quite stretch across, leaving an odd gap. Added to that, the pages end up being really long! At that size, there's an opportunity to float content left and right because there's still the horizontal width to do it. I think to counter the long pages, any screen smaller than a tablet should just display the contact details in the footer, losing the sitemap and newsletter signup. I'm all for highlighting contact details in the footer, but I think a hiding system could have been used as opposed to completely removing that additional content.
Desk is Salesforce's customer support app for small businesses. They used Twitter Bootstrap to allow mobile users to get a customised experience when reading about the mobile application. There's some really nice subtle animation on the home page to show off the software in action, which adjusts dependent on screen size. There are a few odd choices when it comes to the number of columns at certain breakpoints, which results in longer pages than is necessary, but overall it's pretty good.
This portal for IT solutions and support for IT professionals looks absolutely brilliant. The infographic-style homepage is superb and I love the animation when you scroll down. It does a really nice job of shuffling the content on smaller screens, although personally I would have employed a split in the calls to action and made the research articles double up next to one another to reduce the page length and give the user more collateral on their screen.
The website for this online course booking and registration software for training providers looks really good at desktop size. The stepped text and the graphic make it look very slick. We lose a lot of this styling and therefore impact from tablet size down. The positioning statement is still there, it just gets a bit lost in the rest of the page on smaller screens, which is a shame. The rest of the site suffers as well at smaller screen sizes, with content overlapping and clashing, becoming unreadable and in parts, unusable.
Business improvement training, which again at desktop size is really nice, but somehow they've managed to break it at everything below while customising the styling. I think losing the main offer on the homepage - the whole reason for the site - on anything below tablet size is a really bad idea. To be honest, it seems like they decided to use the bootstrap for the font and button styling and completely forgot about the responsive design element, which could be really damaging for mobile users.
If you're looking for some more tips and inspiration, download our free guide '15 B2B website must-haves' to kickstart your B2B website redesign project.