Website visitors now use multiple screens almost daily – mobile phones, tablets, laptops, desktops, we all need endless amounts of information to complete projects at a speedy pace. Or even if we are at home watching TV, playing a game on the phone, reading the paper on a tablet, there are multiple reasons why website design needs to respond to the 3 sizes of screen.
Since early 2014 reports have started to emerge that more people are using mobile phones and tablet devices to surf the net than are using PCs. PC sales have also seen a slump while expenditure on mobile devices and apps have sky rocketed.
Most statistics software will tell you what percentage of visitors to your site are on mobile devices (if you have Google Analytics installed, this divides visitors into “Desktop”, “Mobile” and “Tablet”). If you have a business to business website, you may find that around 1 in 3 visitors are on a mobile device, rather than 1 in 2, but regardless, it’s likely to be a substantial percentage, in which case you may be considering how to convert your website to make it more mobile friendly.
How to make your website mobile friendly
Simplicity and cleanliness are now at the forefront when considering design ideas for your website, this leads to less confusion and an easier, clearer and more enjoyable navigation.
What can we do in order to make the user more at ease with websites on smaller screens and improve the user-experience (UX) design?
- The ideal is to use a responsive theme or template, where the size and order of different elements change depending on the device used - see the section on the right for more information on responsive themes.
- Smaller screens means more scrolling, people don’t want to be trying to focus on tapping tiny icons on a screen, it’s much easier and quicker to scroll.
- Make the most of each page, particularly the home page. This will give the user a more streamlined experience. Lightboxes, overlays and expanding / repositioning blocks can all reduce the amount of clicks.
- Consider using drop-down menus or sub-menus that only appear on relevant internal pages.
- Consider adding a dynamic background into your website design to provide a richer content experience and use a combination of text, images, videos and interactive functionality.
- If you use an attention grabbing image, instead of specifying a fixed width for it (e.g. 800px), if it’s the width of your page, simply specify that it should be 100% wide or give it a max-width. This will allow it to shrink on mobile devices. Remember to keep text sufficiently large that it will still be readable on a mobile device when the image will be shrunk.
- Simplify your colour schemes to one or two complimentary colours, perhaps in different shades. Excessive colours just reduces the message on a smaller screen.
- If your site is image rich, consider forgoing colour altogether in the template design so that your images stand out. White, black, and everything in between are popular colour schemes now, and adding just a hint of another colour, adds drama and impact – all things that garnish attention when used in the right way.
- Use the same template across the whole website. Having a standard template and menus helps users find their way around your site when they can only view a small part of it in one go.