Mobile-first – Cut content and keep usability

When your website has been designed to be displayed on a spacious PC monitor, what happens when its contents appear on a mobile device? Responsive design techniques can make the site work well on a handheld device, but the practicalities of reading what is on the screen and accessing menu items mean that, to put it bluntly, content has got to be cut.

How can you cut content and maintain the purpose of the site? Beyond condensing existing text into a more concise message, it is possible to relocate some text from one page to a new, different page. A more orderly approach to this issue, however, is to tackle it the other way round. Design the website principally for mobile usage – and then modify it for the PC desktop.

Known as ‘mobile-first’, this method of web design involves using only essential content for the initial design. Careful consideration needs to be given to sound and video, as mobile devices may be used anywhere from a crowded workplace to the middle of the countryside. Sound may not be heard, and the device’s 4G connection may be too feeble to make the most of any multimedia creation.

For anyone with reams of content to incorporate in their site, the difficulty will be in deciding what constitutes essential content. However, once a ‘sliding scale’ of content has been decided on, the web developer will use something called ‘progressive enhancement’ which grows the content and the functionality of the site automatically as the screen size, bandwidth and processing power increase.

Some features only work on mobiles and tablets, such as swiping and touch dialling. Similarly, desktops have their own special features, such as being able to hover over buttons. All this differing functionality is taken into account when using the progressive enhancement technique so that the content exploits the features of whichever device is being used to view the site.

A noticeable advantage of a mobile-first approach is the fresh-looking simplicity of the initial design, which then scales up to give a clear, compelling, content-rich version for the computer desktop.

In a world where the growth of handheld devices is increasing exponentially, and more and more people are browsing the internet using pocket-sized technology, mobile-first design provides user-friendly content that is perfectly in tune with the devices being used to view it.