REQUEST A FREE 30 MINUTE MARKETING AUDIT

Call us now on 0161 7110 110

10 May 2017

13 Responsive B2B Website Examples

13-Responsive-B2B-Website-Examples.jpg

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.

smartfile

1. SmartFile

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.

lean

2. leanIX

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.

resourceguru

3. ResourceGuru

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.

SSD

4. SSD Nodes

Enterprise cloud computing services. This is a really clean, tech-focused site.  For me, it could do with a bit of movement, as server stacks aren't that interesting at the best of times! Plus some of the font colours would benefit from revision, as they're hidden somewhat by their backgrounds. I quite like the menu - they've retained an opened-up version of the dropdown at mobile size, which works well to differentiate the level of the pages because it's coloured differently and indented. The menu snaps open on the first click but transitions back and forth nicely after, but I'm nit-picking. One bugbear of responsive design is tables and this site suffers from that when used on their deployment facts, as items go out of alignment and the whole thing looks a bit messy. There are plenty of JavaScript solutions to handle the resizing of tables and I feel this site would benefit from employing one of them. The plans page is a lovely example of how to structure 'tabular' data for various screen sizes, but unfortunately, especially as the graphics are really nice, there are some sizing issues on the images that break the layout.

ontime

5. OnTime

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.

newsola

6. Newsola

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.

gastro

7. Gastro Seller

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.

method

8. Method

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?

atmail

9. Atmail

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

10. Desk

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.

infotech

11. Info-Tech

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.

adminis

12. Administrate

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.

insights

13. Insights Training

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.

11 B2B website design trends for 2018

This is an inline guide purely for the editor, it will not show in the final blog, designed to assist you with setting the options below in the 'Gate Trigger' section.

You will not be able to use the WYSIWYG editor for this it's code only so follow these instructions carefully.


Button
We cannot use a standard call to action to open the rest of the content, but we do want to track when someone clicks on the button to read the rest of the blog. Here's what the code should look like:
<a class="gate-trigger-button" href="#" id="13 Responsive B2B Website Examples - Read the rest of the post" title="Read the rest of the post">Read the rest of the post</a>


Survey
Instead of using a button, you can ask people a what their intent of being on the blog is. Here's an example.
<h3 style="text-align:center;">Ready to read the post?</h3>
<p style="text-align:center;">Great, just let us know why you're here today</p>
<ul id="survey">
<li><a href="#" id="13 Responsive B2B Website Examples">Answer One</a></li>
<li><a href="#" id="13 Responsive B2B Website Examples">Answer Two</a></li>
<li><a href="#" id="13 Responsive B2B Website Examples">Answer Three</a></li>
<li><a href="#" id="13 Responsive B2B Website Examples">Answer Four</a></li>
<li><a href="#" id="13 Responsive B2B Website Examples">Answer Five</a></li>
<li><a href="#" id="13 Responsive B2B Website Examples">Other</a></li>
</ul>

If you want to connect what the user selects in the survey with the call to action at the bottom, use the following:
<ul id="cta-list">
<li><a href="#">CTA One</a></li>
<li><a href="#">CTA Two</a></li>
<li><a href="#">CTA Three</a></li>
<li><a href="#">CTA Four</a></li>
<li><a href="#">CTA Five</a></li>
<li><a href="#">Default</a></li>
</ul>


Form
We need to add the same form for each blog, you can if you want to make your own form but you'll need to change the formId which will be in the URL for the form e.g. https://app.hubspot.com/forms/145288/ee2dd282-1afb-4040-b67a-6ea2fe6e32cc/edit:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: 'ee2dd282-1afb-4040-b67a-6ea2fe6e32cc',
css: '',
onFormSubmit: function($form) {
gateTriggerForm('13 Responsive B2B Website Examples');
}
});
</script>


CTA Form
If people are clicking the CTA but then not filling in the form on the landing page they're being taken to, it may be worth loading the form on the same page to see if that helps the submission rate:
<div class="cta-form-image">
<a class="cta-form-image-button" href="#" id="CTA Click - 13 Responsive B2B Website Examples"><img alt="Title of the CTA" src="https://cdn2.hubspot.net/hubfs/145288/hub_generated/resized/21421668-c868-457c-8f68-142438f1e246.png" title="Title of the CTA"></a>
</div>
<div class="cta-form-inputs">
<a href="#" class="cta-form-inputs-close"><i class="fa fa-times" aria-hidden="true"></i></a>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '145288',
formId: '80edeb18-6298-4325-9d45-eb64c02b2d1c',
css: '',
onFormSubmit: function($form) {
gateTriggerCTAForm('13 Responsive B2B Website Examples');
}
});
</script>
</div>

Blog Comments