Mobile First, Not Mobile Only

Until somewhat recently, and sometimes still today, many people responsible for creating websites spent the vast majority of their efforts focused on the desktop experience. It wasn’t until deep into development that someone on the team would look at the site on her mobile phone. In those days, more than a few all-nighters were pulled just to achieve the bare minimum mobile support.

Eventually everybody got wise to the fact that people do want to access information and complete tasks on their smartphones. Mobile First is a strategy that design teams employed to focus on the mobile experience to make this possible.

Users had gotten so used to pinching and zooming to see sites on our phones, they were thrilled to encounter sites that seemed purpose built for our new favorite screens.

Mobile First requires stakeholders to prioritize site elements and carefully consider each element’s use and value. Often, this means slimming down the site and is often used as one lens through which to vet and possibly choose to sunset extraneous content and features.

Imagine that you’ve been asked to redesign the logged-in home page for a major consumer bank. If you start thinking of designing the page for a laptop screen, you will collect all of the items that need to display, including:

• logo
• site navigation
• search
• account balances
• bill pay functionality
• account transfer functionality
• alerts/news
• additional products + services that you’d like to promote
• tie-in to the latest marketing campaign
• details about your corporate social responsibility policies and activities

The page can quickly become a muddled even on a laptop screen— it’s nearly impossible to decipher in a meaningful way on a smaller mobile screen.

If, instead, you start to design for a mobile screen, you are forced to prioritize the most important components on the page, such as the:

• logo
• site navigation
• search
• account balances
• bill pay functionality
• account transfer functionality

Mobile First Pros: Focus and Prioritization

Due to the screen size constraint, you will probably choose to omit some of the marketing and other upselling content since it’s less critical. Additionally features like the site navigation and search will take up less page space since they’ll be represented with icons to trigger their display.

Focusing the page design on the key tasks and features makes the most of the smaller screen real estate. But what happens when we look at this page on our laptop computer?

Mobile First Cons: All that whitespace

While mobile first has many benefits, one of its biggest potential pitfalls is that the laptop/desktop viewport can be full of wide-open spaces. This can lead to users missing or misunderstanding key content and functionality. This is particularly challenging with transactional or stepped processes where issues with the spacing and visual connection between elements is critical. It’s not uncommon to find that users get lost or confused when they see a mobile content or features when they scale up to the desktop viewport.

At Crux Collaborative, we’ve tested several responsive sites that were designed using a mobile first approach and it’s very common to have test subjects comment on how it feels like there’s a lot of extra space in the design. Also, we have observed that test participants will often miss key steps or features because the experience stretches in a way that moves some key features too far away from one another.

So, what can we do?

How do we address this issue? There are a few key strategies that can help avoid some common pitfalls.

1. Think about how various content elements will scale in certain viewports and build a pattern library to identify how each item should render for each of your key viewports. For example, an article in the desktop viewport may include an image, title, byline, and date. On the mobile viewport, it may simply display as a linked title and date.
2. Get the experience in code as soon as possible and see how it flexes. Planning outside the browser will only take you so far. Once you see the experience live, plan to adjust and tweak the experience for different viewport sizes to ensure that it’s rendering as effectively as possible.
3. Finally, plan to test your site on various devices with real users. When you want to know if your site is performing well and if your users are going to be able to complete key tasks efficiently, conducting a usability study is the best way to confirm that you’ve succeeded.

Are your customers struggling with your site on their mobile phones? Want to find out why. Contact us and let’s figure it out together.