A Guide to Mobile-First Design

What are the essential strategies for mobile-first design? On one hand, there is a simple answer to this question: There are none.

Or, put another way: The essential rules of mobile design are the same as those for any other product. As usability guru Jakob Nielsen outlined in 1995 when the Internet was just gaining mainstream popularity, systems—digital or otherwise—usually succeed if they are designed with the same set of basic guidelines in mind.

Nielsen’s 10 Usability Heuristics for User Interface Design stress a few fundamental ideas, such as providing clear signals for users, being consistent in design cues, and keeping the number of elements to a minimum—all of which are essential for mobile design.

Basically, if your mobile product doesn’t follow the same user-centric principles that work on other platforms, it is most likely destined to fail.

All that said, while the philosophies underlying mobile design are the same, there are some things about the medium that encourage focusing on particular tactics.

Fundamentally, almost all of these mobile design guidelines are rooted in four facts about interacting with most devices:

1. Screens tend to be smaller (especially on phones).

2. Mobile operating systems and interfaces are different from those of desktop computers.

3. Mobile Internet connections are often slower.

4. Desired functionality is often different on a mobile device than a desktop.

Given that, here are some key things to keep in mind when designing for mobile:

Simplify – As mentioned above, keeping design elements simple is a best practice for all platforms.

However, it is especially important for mobile. Many users accessing mobile sites, apps, etc. on phones are doing so on screens that are a just few inches in size. This means you have to be absolutely ruthless in culling down the elements presented.

If you don’t prioritize minimalism, your mobile offerings will be difficult at best, and unusable at worst. Plus, the reduced number of elements will cut down on the download time.

Make It Useful – Reprioritize and display essential functionality that is likely to have more relevance to a mobile user. For example, if you have one or more physical locations that your customers are likely to visit, keep a link to driving directions or location lookup at the top of the page—along with an easily accessed phone number that allows customers to “touch to call.” Better yet, use the device’s location to automatically display the nearest location.

Utilize OS and Hardware Elements – Mobile devices have a number of limitations that make designing for them difficult. But many also have sophisticated operating systems and hardware offerings that allow for all sorts of new interactions. When appropriate, make use of these.

At a basic level, this means utilizing native UI elements. For example, using gestures such as “swiping” images to scroll through them vs. touching separate “previous” or “next” links.
This also means you should keep in mind that most devices have built-in technologies such as GPS, cameras, microphones, and gyroscopes. Each of these allows for a host of interactions (sensing a location, speaking commands, tilt navigation, etc.) that could make your offering easier to use.

Touch Not Type – Someone using a computer usually has a mouse/touchpad and keyboard. People on mobile devices usually don’t.

This key fact is often forgotten when it comes to mobile websites. Too often, desktop sites are essentially just made smaller for mobile. Unfortunately, this can lead to deeply frustrating experiences for users, especially if they are forced to type or click a lot.

To make your design mobile-first, don’t duplicate the desktop’s reliance on the keyboard and mouse. Instead, focus on touch interactions (scrolling, swiping pinching, pointing, etc.), which is the method mobile users most frequently engage with their devices.

Don’t Be Afraid to Hide – Desktop web-design best practices often discourage hiding important elements such as navigation, on the very reasonable assumption that things which are hidden are often never found by users.

This is usually not an option for mobile design. For most complex offerings, it is impossible to make all the elements visible immediately without sacrificing usability. Moreover, most mobile consumers don’t expect this, and have come to understand that some things may be a touch or two away.

So, don’t be afraid to hide/nest some elements, but make sure to always signal their existence with clear visual cues.

Think Vertically – Another desktop web-design best practice is that you should be wary of putting any important offerings “below the fold.” Again, this is not very relevant for mobile design.

Why? Two reasons:

First, given the number of different mobile screen sizes, the “fold” is constantly shifting, so you can drive yourself crazy trying to establish where it is.

Second (and more importantly), mobile users are much more comfortable scrolling than are desktop users, since it is so natural using touch.

So, if relevant, don’t focus on the desktop idea of multiple columns but instead try to tap into the natural vertical scrolling behavior with a long, single column.

Reduce Load – Quick load times are extremely important for all digital offerings, but they are absolutely essential when it comes to mobile.

After all, mobile users are often on slower connections than desktop/laptop users, and are sometimes being charged based on data usage.
Given this, make sure that your images, backgrounds, etc. have been compressed as much as possible—or removed altogether if they are not necessary to the user experience. Moreover, jettison all load-heavy elements such as video and audio unless absolutely necessary. Be particularly careful about using Flash, which doesn’t load on many devices anyway.

Test, Test, Test – Finally, when thinking of mobile design always keep in mind that “mobile” encompasses thousands of devices with a huge variety of screen sizes and operating systems.

Trying to test your offerings on each of these is impossible, of course. Still, that doesn’t mean you should just check it a few times on your iPhone and assume all is well.

Instead, take the time to test on multiple screen sizes, mobile operating systems, browsers, and connection speeds. For a starting point, it is generally a good idea to review your website analytics to see which devices and operating systems are most commonly used to access your website.

You may not be able to make the experience perfect for every single user, but you should at least optimize for the devices most used by your audience.

Discover what makes a difference in mobile design and development. Contact MDG today at 561-338-7797 or visit www.mdgsolutions.com.

MDG is a full-service advertising agency and one of Florida’s top branding firms. With offices in Boca Raton and New York City, MDG’s core capabilities include branding, logo design, print advertising, digital marketing, mobile advertising, email marketing, media planning and buying, TV and radio, outdoor advertising, newspaper, video marketing, website design and development, content marketing, social media marketing, and SEO. To discover the latest trends in advertising and branding, contact MDG today at 561-338-7797.