How do you make your B2B website responsive?
Responsive websites are critical for your B2B success, here we'll cover how to make your b2b website responsive
Published: 20 Jun 2013
5 minutes read
This blog isn’t titled ‘How do you make a responsive website?’ because it isn't going to talk coding. The actual nuts and bolts of the script required to realise the ideal need to come after the rationale in order to make the website responsive in the first place.
With all new technologies, it’s very easy to get carried away and start shuffling and hiding content, and before you know it, the message that a page was meant to deliver has been lost in a myriad of design that worked great on the desktop but on mobile is now rendered pointless.
(If you’re not even sure what we mean by responsive design, head on over to our recent blog ‘What is responsive design and why should you be using it on your website?’)
Imagine your standard desktop layout. Logo sits nicely at the top, a search box lives somewhere in the header, then your navigation, wide content body sat off to the left, with your calls to actions in a thinner column in the right, all polished off with a useful selection of links and data in the footer. How do you cram all that onto a screen just 320 pixels wide?
Well first of all, don’t use the word cram! Resizing the logo to a more suitable size isn’t going to be too difficult; the first real step is what to do with the search box. A number of sites retain the search box in full, which often looks clumsy, and when you’ve already found what you’re looking for, steals screen real estate that would be better suited to displaying the content. The Government website does a good job with this, at portrait smart phone size, the search box disappears and is replaced by just the button, which when clicked, re-exposes the form.
- Don’t be precious about logo placement and size for smaller screens. The user knows where they are, let them get to the content.
- Keep the search box if it’s not a hindrance, just make sure it doesn’t take up a lot of room. Remember, retain functionality, change form
Often on responsive sites, the navigation takes a bit of a battering at lower resolutions - hacked down to a single bar or even a horrible form select dropdown is employed. It’s a hell of a fall from the lovely, clickable, nicely-styled dropdowns that the desktop user gets, and whilst it is important to get the user to the content they’ve clicked on, keeping them moving around the site, if that’s what they were after, shouldn’t be made harder on the phone. If the navigation has been ‘put away’, make sure that if the user makes a concerted effort to use it, it comes back with the sufficient bang so none of your site becomes inaccessible. If for instance you have to do away with a dropdown and you’ve only got the top level items listed on the navigation, make sure the link that has dropdowns on it links to a page which contains those links now missing from the navigation. If it’s not already the case and the top level link is really just a placeholder for all the pages underneath it, consider making that top level page a section page that just titles and excerpts the content of the pages beneath it in the navigation tree.
- Shoehorning a full navigation on to a mobile screen doesn’t work; think smarter!
- Users expect to expand navigation on mobile devices, don’t be frightened to use this technique
- Don’t just stack the menu items! Too many sites go to this default even on tablets and it’s a pain for the user to have to scroll past each time
The main body
Moving down to the main body, what should be appearing in the browser first? Any sub navigation? If it normally lives on the left, has the developer made sure it’s actually later on in the script so it can live underneath the content? How likely is the user to want that option before they’ve had to scroll through the content on that page? Is that an aforementioned section page so it wouldn’t make sense to double up?
What about your calls to action? Where do they live on the desktop version of the site? If they’re at the end of the main content then that’s fine; user reads the content then gets a nudge in the right direction. But what about if you’ve got them in the right hand column? If you’ve got comment boxes and social media links at the bottom, will your calls to action be lost beneath all these extra features? Carefully consider whether it’s worth your developer getting the call to actions to shuffle earlier into the ‘frame’ before all your other links on smaller screens.
- Content can be displayed differently from left to right than top to bottom, hierarchy can be altered dependent on screen size
- Look at your analytics and see what paths people take through your site that match your preferred funnel. Make sure this route isn’t lost or blocked when you convert to a responsive design
The modern website has a very busy footer; an attempt to capture the users attention as they hit the bottom of the page to try and get them to stay on the site. There’s no reason to lose this information on a smaller screen, but taking the normally exposed data and organising it into closed navigation is a good alternative. This shortens the length of the overall page and takes away that horrible feeling users get when they start to scroll and they see a tiny little scrollbar indicating they’ve a long way to go to get through the page. Consider what a smart phone user is visiting your site for, they might be on route to you and need your address, they might just need your phone number to call you about the services your offering. Surely that call to your sales team is your ultimate call to action, and if they have in their hands the tool to complete that task, why would you not!
- Organise the footer into columns of data that can be on show at desktop size and close up for the mobile
- Points of contact are always key in the footer, keep that visible across all sizes