Think Small

Re-thinking our approach to web design

Think Small. This phrase caused a revolution in the advertising world when DDB plastered it on a billboard for Volkswagen in 1959. Yet with the next smaller device now out in the market, it is clear that we still need to embrace the catchphrase and redefine our patterns of thinking.

In 2010, researchers coined the term ‘nomophobia’ to describe the anxiety felt when a person is separated from their mobile phone, power or signal. They estimated that over half the western world could be diagnosed as nomophobic — a portion that has likely increased in the years since. Currently, more mobile phones are in use than personal computers, and almost as many exist as the global population.

In other words, we have become addicted to having constant access to communication and information through our mobile phones. Why is it, then, that designing for these devices is still an afterthought?

The buzzword in web design is responsive design — the recognition that the design of a website should fit the size of the screen, no matter which device the site is viewed on. This contrasts with adaptive design, which is still given as an alternative to clients despite limiting the user’s experience to a set number of breakpoints for which the site has been built. However, in my experience we are not thinking small and approaching responsive design with a mobile-first viewpoint, even though people are nowadays more likely to use a portable device to browse the internet than a desktop computer.

Thinking small requires us to view responsive design as an additive process: building up to desktop rather than down to mobile. This process is a more effective manner of ensuring that the core elements of a website are available to anyone, and that the experience is not limited by reduced screen area.

Desktop screens have a large amount of screen real estate, and most websites fully utilise this space by presenting as much information to the user as possible. For instance: a typical website tends to feature two to four vertical columns of content which may not be directly related to each other, combined with a horizontal menu of subpages for the user to explore.

However, optimising this design for a mobile device causes issues: content blocks can be stacked, but if a section is unrelated, the flow of the site is lost. Menus are another problem: mobile screen real estate is precious, and should not be wasted on displaying an entire menu. The solution for both of these issues is to hide content on mobile, either entirely or off-screen, but this creates two separate solutions, and hence doubles the mental work. In any case, if content isn’t available on mobile, does it need to be included on desktop?

If designing for desktop is difficult because you have lots of space to fill, designing for mobile is even more so because you don’t have enough space available. But thinking first how to best design for this small area will allow the design to become fluid and allow for more consistent solutions across screen widths. This consistency presents a better experience for a user viewing the site on multiple devices, as well as reducing development time and complexity.

We are beginning to see improvements in consistency across devices with the aid the current visual design trends, but there is still a way to go. These trends, such as flexible block sections and large, full-width imagery display well when viewed on any screen width, and should form the basis of any design. The hidden hamburger menu is also beginning to feature on desktop sites, and is a good example of how mobile and desktop experiences can flow through from one to the other.

Think Small requires changes throughout all departments of an agency. Deliverables in a project plan should be worded as “Mobile and desktop”, rather than “Desktop and mobile”. In User Experience, a mobile wireframe should be created before the desktop version. In Creative, designers should be mocking up mobile before desktop PSDs. And in Technology, developers should be constantly viewing sites on connected mobile devices, despite coding on desktop computers.

Very soon the Apple Watch begin to take a permanent place in our lives, and we will be addicted to an even smaller screen. But as tempting as it is to dive into designing for this new technology, we first need to reflect on our approach to designing for the screens which most people have near them all day, every day.