23 September 2013
Shaun Westgate, Managing Director

Responsive Web Design for Desktop and Mobile

Responsive web design

The amount of users now accessing your B2B or consumer website on mobile devices is growing at a staggering rate. I can see that, in the not too distant future, many consumer desktop sites will become nearly obsolete, as more people opt to access the mobile site. So, creative design needs to be used in an effective and powerful way to greatly improve the user experience on the mobile device.

When designing for the mobile, the design parameters are quite different from those needed for a desktop site. Even the way we physically interact with it is different – we use very different actions on a mobile to access the information we are after. So, it is vital that design is used intelligently so that the mobile user's experience is enhanced.

Here are some initial thoughts to consider which improve the mobile user experience:

Seriously edit mobile content
Clearly, mobile devices are much smaller, so type and image needs to be larger for ease of use. This means that a clear hierarchy of information needs to be developed with shorter, more succinct copy. In turn, this will help the user to navigate around the site, particularly when mobile devices can sometimes have slow internet connection speeds.

A single column layout is favourite
If you view a traditional website on your mobile, it is very difficult to use simply because it was not conceived with mobile in mind. Even if you use zoom on your iPhone most of the text is unreadable until users zoom into the part of the screen they want to view. Zooming is hard work, with lots of clicking, so a different design approach is needed. The single column layout that uses the whole width of the screen will change all this, with scrolling up and down being a key design feature. Additional left and right scrolling can be included to enhance the user experience.

A different navigation style
In many cases adopting a traditional design navigation across the top of the site will not work, because the type will be very small and difficult to use. A very effective navigation is one that slides from the right and occupies most of the screen, in a stacked formation, when the user selects a section the navigation then disappears. A button remains in the right hand corner to access a new section.

Make text entry and form filling easy
Making text entries and filling in forms on mobile devices is much harder than on a desktop computer, so the amount of text entered needs to be reduced. For example allow users to use stored details in their own account section when checking out e.g. picking from previously entered credit card details.

Design for the touchscreen generation
When developing the navigation design and user experience, it is very important to consider how the user will interact with your site on a touchscreen. The buttons need to be an optimum size and not too close to each other, so that all users can select, tap or press links without any difficulty.

These are only a small selection of design considerations for designing an effective user experience on mobile devices. Please don't hesitate to get in touch if you need further help in developing an effective mobile user experience for your online brand – shaun@westgatecomms.com

See our very latest responsive mobile site designs.
Zinc Retail
The Gallery
 



0 comments

*Please note that all comments get reviewed before being shown on our site.

RSS Subscribe
Blog archive