In the next few months we plan to overhaul a large solution that’s been mobile friendly for a number of years – but we want to make it even better! We now have data, analytics and even more experience to improve the UI and therefore increase conversions. So now feels like it’s a good time to write a blog post on mobile web design.

Approaching a mobile web design project

In fact, this would be our approach on any UX project.

  • Research
  • Strategy
  • Design (wireframing / prototyping / final visual design)
  • Test / Validate
  • Implementation
  • Measurement

Research

As always, research and planning will set you up for an easier ride. Don’t be tempted to jump straight into designing the interfaces without really understand why you are doing this in the first place!

  • Currently how are people finding the experience?
  • What are the pain points?
  • User testing – consider user testing the existing web solution if you are unsure of either of the above.

Mobile – a few things to consider

Let’s jump in to looking at some of the key differences between mobile and desktop:-

  • Restricted viewport size and a range of screen sizes
  • Create Fluid Layouts. Responsiveness is key for designing a mobile experience.
  • Navigation
  • Swipeable – if used then make it clear that the element is swipeable
  • No hover states
  • GPS
  • Environment / Connection speeds
  • Landscape v portrait
  • No right click

Time to Prioritise

It’s important that we review the analytics and data given to us by the current website. We want to understand what’s working well (or not). We also want to prioritise to decide what’s really important. Screen space is precious and we need to remove any distracting content. There’s a need to be as concise as possible. Less is more on mobile. A few things to consider:

  • Content First Layouts – where the content is the hero. A light interface for mobile?
  • Have clear, focused content
  • Make your content easy to read
  • Keep pages short & sweet

Usability on mobile devices

Our mobile web design needs to be attractive AND easy to use. Extensive wireframing and prototyping is really important. Quick prototypes allow you to send the initial concepts for User Testing, exposing the bits you got wrong and refining until the solution is working as required.

mobile web design

Design for Touch

In almost all cases, mobile applications are going to be used while in someone’s hand. Therefore, designing your mobile website around touch and ergonomics is very important. Think about how you hold your phone in your hand.

Follow Existing UI Conventions

In web design it’s always important to think about your target market. Consider other apps and websites they will probably use. Are they consistent UI design patterns that they follow and that are therefore intuitive to them? Remember, they use their phone all the time skipping for application to application.

Speed v engaging content

Also consider the environment / context in which the user might be browsing your solution.

  • Carefully balance an engaging experience with speed and fast loading times
  • Connection speeds on mobile device may be slower.
  • It’s extremely important to understand compression and optimise images, minify scripts and css.
  • Feeds or communicating with third parties from an external source can slow things down.

The User Interface – Elements in detail

Navigation

  • Menus and Navigation: Keep It Simple
  • Off canvas options are a good option if you need several tiers of navigation. Full screen options work well if the navigation is very simple.
  • Sticky headers. If you intend to use these then they need to be super slim.

Calls to action

Buttons – Consider primary and secondary buttons early in the process. All too often it’s difficult to understand what element is ‘the hero’ on the page.

Forms

  • Consider forms and moving people through these quickly
  • Consider slow and error prone typing
  • Validation and what’s mandatory

Ecommerce on mobile device

  • Register, login, view account
  • One page checkout, how do we make this as short as possible.
  • Shortest route to find what they want to buying what they want.

Things that don’t work too well on mobile

There’s a number of elements that work perfectly fine on desktop, however you can run into issues if you render these on mobile:-

  • Pop ups and modals
  • Some javascript / animations

And so we start our research in earnest for our new mobile web design project. Our experience tells us that as long as we following the process below we’ll not go too far wrong:-

Research > Prototype > User Testing > Refine > Implement > Measure

We very much look forward to sharing the final result and we’re confident that the user experience on mobile device will be greatly improved.