Developing the right responsive mobile version

As we’ve talked about previously, the big thing at the moment is responsive. It’s great that you’re proceeding down the responsive route. However, like a mobile site you need to choose the right content to go on your responsive version.

Mobile screens are small and it’s very difficult to cram all content on them. You need to limit scrolling and maintain an overall high level of usability.

The general consensus is that important content should stay and less important content should be hidden from view. However, you also need to consider that mobile users might want to see certain information more than desktop.

Let’s talk about some of the big factors you need to consider when making a mobile version of your site.

Bandwidth is still important

Ensure your mobile style sheet and media queries omit content that may take up bandwidth. Large images can be used on desktop versions of websites, but mobiles are still behind. Yes, 4G is now being used by many but remember that many people still only have legacy network support in their area. 4G data also costs a lot so you will want to minimise this as much as possible.

Important Content at the top

Ensure your most important content is at the top and minimise scrolling as much as possible. It is normal to have a mid-length page but don’t go overboard.

Contact details and address are highly visible

How many times have you been to a website for a company and all you want to know is their contact details or find their Postcode to put into your satnav. It’s very frustrating. If you are service based or have a premises, just take a look at your Google Analytics and you will find a vast number of people visiting your site just to find the contact address. Serve your customers and avoid frustration by making your contact details easily accessible and viewable.

Easily accessible full version of the site

This is a big mistake we see many web designers making. They do not include a way of getting to the full site. It’s a strange one as prior to responsive versions, we did see it but now the web has gone responsive you can’t always see the full site. Granted, not many will need to but as always you must cater for those people.

Redesign elements to best fit the mobile

We see a vast array of developers simply shrinking content. Think and plan carefully. Perhaps create nice mobile friendly versions of the menus using jQuery and CSS. Design every page independently from the other versions and you should have no problems making every version be it desktop, tablet or mobile work 100% for the viewer.

As always, the bottom line is to step back as the designer and look through the viewer’s eyes. If you follow those steps and maintain those principles, you’ll do well in the responsive arena.