Tips for Managing White Space on Mobile Websites
Managing white space on mobile websites might at first point seem like a strange thing to think about: isn’t white space, y’know … just sort of there?
In truth, designers know that white space – sometimes known as “negative space” – is a crucial element of any design. The absence of a design element is itself an active part of a design.
We all know that screens which seem too busy can deter users from persevering with a mobile site or app; white space is crucial in encouraging a sense of structure and even calm. Clutter is bad; clarity is good.
In this way, managing white space of mobile websites becomes crucial: the correct deployment of emptiness will allow your content to sing. The issue, of course, is that the space available to mobile websites is often at a premium: the smaller screens on mobile devices makes it harder to produce attractive designs that aren’t over-populated and far too busy.
Rearrange Your Navigation Menu
How, then, to achieve white space when designing for the mobile web? First and foremost, you should rearrange your navigation menu: use the hamburger, that common icon of three horizontal lines that users can tap to expand the full list of options. This allows designers to concentrate on content, assume a collapsed menu, and use screen space to the full.
Use Vertical Layouts
The best way to make use of all this freed-up space is to consider it as a vertical rather than a horizontal environment. If you orientate your layouts vertically, you make a virtue of the narrowness of mobile screens: your user will always prefer to scroll downwards than sideways. Desktop websites often read left to right; mobile websites should be scanned from top to bottom.
Consider Font Sizes & Spacing
Despite this, continue to consider your font sizes and spacing. Though your lay-out may be vertical, your text will still be read horizontally. This means that the horizontal plane will remain important, and optimising your text choices is the best way to make the most of this vector. Investigate responsive typography which can adjust its size to the precise dimensions of a given mobile screen.
Adapt Your Images
Finally, don’t forget your graphics. Adapt your images to taller screens. Desktop websites and traditional design of all kinds tends towards layouts which don’t have quite so extreme an ratio of height to width. Mobile websites are different – those smartphone screens, and even tablets held in portrait mode, are significantly taller than they are wide. Think about that when you design for mobile.
In all this, white space is your friend – if you consider all these elements, you can maximise the space available to you and avoid a cluttered look. That’s how you manage white space on mobile websites.
Contact ImagePlus for Mobile App Development
We provide mobile app design and development for all project requirements, both consumer and business apps. If you’re in need of a mobile app or just have an idea for a project you wish to discuss, please contact us to arrange a consultancy.
Call us on 024 7683 4780 or email us at info@image-plus.co.uk.
Have an idea?
We can put a free quote, partner with businesses and help get funding for your project. Let's Talk!
