Mobile website design can be daunting. Does it need to be different from the desktop version? If so, how? And how will you ever cater for differing devices and screen sizes? Here, we’re keeping things simple with six easy tips.
1. Plan for evolution
We all know that technology is moving forward. Things change, and in the web and mobile world, advancements can be fast and sometimes surprising. In a practical sense, though, you don’t want a website redesign from scratch at each new technological development, so it’s important to build a site which can evolve gradually over time. So be forward-looking and make sure that you have defined your longer-term goals at the outset.
2. Know your target audience
Knowing your target audience is critical in creating a website which not only delivers the content your users want, but also provides a tailor-made and user-friendly experience. For mobile sites specifically, you will need to find out which devices and operating system your audience is using as each has its own UI rules and guidelines and using these will aid functionality. Don’t forget that your users won’t all be using the latest version of their operating system too, so make sure that you allow for backwards compatibility.
3. Testing, testing
As well as testing on a variety of devices, It’s also important to understand how your users are interacting with your mobile site and how this differs from the way in which they use your desktop site (if at all; people are increasingly using their mobile devices to carry out the same tasks as they would on the desktop, e.g. shopping and banking as well as browsing and searching).
Be careful of common assumptions and misconceptions about mobile website usage (e.g. that mobile users are always on the move or have little time – many people use their mobile device whilst sitting on the sofa with nothing much else to do!).
4. Responsive Web Design and mobile-first
Separate desktop and mobile websites are becoming less popular, and designers are looking increasingly at responsive web design to customise interfaces from the same website, ensuring easy reading and navigation across a variety of devices whilst minimising time and saving costs.
One method of achieving this is to employ a ‘mobile-first web design’ policy, where a website is designed initially for small screen sizes – typically just a one-column format – and then the site is expanded to include more content and visual complexity for larger screen sizes.
5. Optimise for mobile
Although users are increasingly using their hand-held devices to replicate the functions of their desktop computers, there are still some key differences that you need to be aware of with web design for mobiles. Main points to note are the amount of content that can physically and legibly be displayed, the type of navigation required and the level and type of interactivity that is practical (size of buttons, amount of typing required, touch/click/scroll/pinch functionality and so on).
Make sure that you remember to specify your content stacking preference, so that the hierarchy and order of content blocks is retained regardless of screen size. A simple numbers approach is best to use here when you’re sketching out your design.
There is a multitude of website tutorials, magazines, pattern libraries and webinars that can assist you in keeping up-to-date with the latest in mobile website design and teaching you the essentials, and with the world of web design evolving so quickly, it’s crucial to keep learning. But don’t forget that you can experiment and try new things yourself and don’t need to be tied down to the ‘tried and tested’ or the ‘safe’ options. Don’t be afraid to innovate.
Hopefully the above has given you an overview of the key points to bear in mind when designing a new mobile website or updating an existing one.