When creating an application (whether you’re a product manager or a UX designer), you might ask yourself the question, “should we start with desktop or mobile-first?” These days, you often see more applications starting from a mobile-first approach because everyone has a phone, and fewer people actually own laptops and desktops. However, there may be times where going mobile-first just doesn’t make sense. This blog will break down the differences between mobile and desktop design and help you understand when to start with which!
More specifically, we’re covering:
- What is mobile-first design?
- How mobile-first design came to be
- Mobile-first vs. desktop-first design
- When NOT to go mobile-first
What is mobile-first design?
In mobile-first design, we design for a mobile interface (rather than a tablet or desktop) from the very first UX sketch. A general rule of thumb is this: if your site is designed well on a mobile device, the design will translate strongly to all other devices.
“Mobile UX design is the design of user experiences for hand-held and wearable devices.”
— Interaction Design Foundation
Mobile-first designers assess mobile users’ unique needs and limitations and generate solutions, typically in the form of applications, to provide the most seamless user experience possible. According to the Interaction Design Foundation, the main focuses of a mobile-first design process are accessibility, discoverability, and efficiency as users navigate an interface on the go. We’ve all been there – needing to get something done while we’re out and about, trying to navigate a website from our smartphone that just isn’t designed for the tiny screen we’re looking at.
The mobile-first approach to design is just as it sounds: designing for the smallest screen size and working your way to a larger screen (aka desktop)! Mobile-first is one of the best strategies to create a responsive design (meaning content smoothly adjusts to different screen sizes) or adaptive design (UI adapts to various screen sizes). Generally, it’s much easier to scale a design up than to cut features and scale down.
Mobile-first design is based on the idea that the “smallest” designs will contain essential features, and therefore, this approach will ensure the core functionality is prioritized. Sounds simple, right? Not quite. Designing for mobile is challenging, but doing this first will allow for a more straightforward process when designing for larger devices later on. The mobile-first approach gets the hard parts out of the way sooner! As you expand upon your design, you can provide your user with additional elements, but you’ll always know exactly what the most important elements are to be included.
Mobile design is…
-
More limited. When designing for a smaller screen size, your content will be condensed. You’ll be limited with how much information and what features can be included. So, make sure the most important information makes the cut!
-
More focused. In order to create the best experience possible for users with less screen real estate, mobile design must focus on surfacing the most critical functionality and content to the user first. This means that it has to focus on what matters most to the user.
-
Most common. Two billion people—or 51% of the global population, are only accessing the internet by mobile phone. FYI, this number is only projected to keep growing. So if you fail to design for mobile, your users will notice!
View this post on Instagram
Mobile-first: A history lesson…
Mobile-first design was originated by Luke Wroblewski in 2009 and brought forward at a conference in 2010 by Eric Schmidt, a previous CEO of Google. He anticipated that mobile would soon become the way most users would access the internet/services. Schmidt announced that Google would be prioritizing designing for their mobile users and their tiny screens, ultimately championing the mobile-first approach to design.
As it turns out, Eric Schmidt was spot on in his predictions. A forecast report by Stastica.com states that in 2021, there will be 7.1 billion mobile users worldwide, with forecasts pointing to possibly 7.26 billion by 2022. This means that in this climate, mobile-first design is more important than ever!
Differences between mobile-first and desktop-first
Conversely, what is the desktop-first design approach?
This approach is the reverse of mobile-first design and starts with a desktop screen size. It includes all of the possible features, options, and information users need from the onset of the UX design process. Afterwards, when the desktop design is adapted for smaller devices, it’s scaled-down significantly, prioritizing only the most important features and removing the rest. Before mobile phones became so prevalent, desktop-first design was the only approach to take.
Credit: signitysolutions.comAs more people depend solely on mobile devices for their day-to-day activities, such as work, communication, online transactions, entertainment and more, it’s rational to assume that the mobile view should be designed first, right? Well, the answer isn’t as black and white as it may seem. As designers and managers, we need to keep a few things in mind when deciding whether to design for mobile or desktop first.
When NOT to use mobile-first
When deciding which direction to take, determine if mobile-first design is what your product or service needs. Here are some questions you could ask yourself:
-
-
What am I building?
-
What device(s) are my users primarily on?
-
What will provide the best experience for them?
-
How task intensive is the user’s work?
-
Let’s compare two example scenarios where we’ll determine the best course of action for each.
Scenario #1:
The primary users of your product are fitness trainers that require the use of an app and a smartwatch (Apple Watch and Fitbit are popular choices). This is an excellent example of an instance to use mobile-first design! Your user will be accessing your application through their smartphone and/or smartwatch, so this design will be as straightforward and seamless as possible.
Scenario #2:
The primary users of your product are architects who use software applications such as AutoCAD to design. Your user will be using a desktop, laptop, or monitor to access your app and complete their work. Therefore your focus should be desktop-first to accommodate their needs best. For their goal to be accomplished, this user requires all of the bells and whistles a desktop design can afford them.
Generally, mobile-first is a great design technique for straightforward consumer-based applications. Still, as you can see, in some cases (for businesses or enterprises), desktop-first is the better choice! So before jumping on the mobile-first bandwagon, gather and adequately analyze data about your user to determine which approach is best. Many factors affect this choice, so let’s break down a couple of things to think about…
What to Consider Before Going Mobile First:
1. Reason of Use
Why are people using your product? What are they trying to accomplish through your application? When deciding between mobile or desktop, always start by considering the primary use of the product. If its intended use is best supported by a desktop or large-screened device, it makes sense to begin with a desktop-first approach! Let’s use the graphic design platform, Canva, as an example. Canva launched as a desktop application and gradually grew to accommodate users accessing the app via their mobile devices.
Someone working on a detailed graphic design project would be using this product for hours, tweaking designs and accessing a variety of features and affordances. This user wouldn’t want to struggle with a small screen unless absolutely necessary. They may hop on the mobile application in a pinch, but otherwise, a desktop-first design is the correct approach to take.
2. User Flow
When the goal your user is trying to achieve is more easily attainable through desktop-first design rather than mobile-first, don’t force it; just let the platform do what it’s best at. Imagine trying to create a fully functional website with WordPress, Wix or Webflow (say that 10x fast!) on a mobile device. It would be frustrating and cumbersome.
It’s not wise to begin mobile-first when:
-
-
The user flow is complex
-
It’s used differently on mobile screens than desktop and the experience on desktop is more important
-
Instead, aim for a sophisticated yet user-friendly design for desktop and a simplified version for mobile.
3. Resources
Sometimes you have the luxury to design an exceptional experience on both mobile and desktop devices. However, when resources like money and time are in short supply, you would need to prioritize and execute on the more important platform!
4. Industry
Certain industries tend to call for different primary platforms. For example, applications in the social or lifestyle space (e.g IG, Bumble or Snapchat) are more likely to be mobile-first. Conversely, applications in the design space tend to be designed as desktop apps before being adapted for mobile and tablet use (e.g Photoshop, Figma, or After-Effects). In healthcare, you may need to support both. For example physicians and nurses doing patient rounds in a hospital may need access to chart information on a tablet, but when completing their notes at the end of the day would rather do so on a desktop. It all goes back to point number one! Reason of USE.
5. Context of Use
Where is your user when they are using your application? Are they on-the-go trying to catch a bus, or at work sitting at a computer? Utilize data analytics and user research to find out what device your primary audience is using when they access your application. Following the 80/20 rule, we aim to design an ideal experience for 80% of use cases (AKA those that happen almost all of the time) and de-prioritize the other 20% of use cases (the ones that occur less frequently). So if desktop traffic is about 80% more than mobile traffic, a mobile-first approach is not the way to go.
Tip: Invest in analytics and research to help you understand where your users come from and how they use your site or app.
6. Feature Complexity
If your app is complex, feature-heavy, and jam-packed with many options, it’s much easier to begin with a desktop-first approach. Simplify the design as you work your way down to the mobile screen (if necessary) – this will be much easier than the reverse.
7. Visual Design
When the visual design is detailed and requires more real estate to achieve a specific look and feel, we don’t recommend beginning with a mobile-first approach. This is because mobile designs are generally simpler in content and design, so subsequently, it’s much more complicated to build on that for the desktop version!
To wrap up
You should be able to differentiate between mobile-first and desktop-first design now and know in which scenarios to use each. As smartphone use continues to exponentially increase, we will see more and more mobile-first design. But don’t forget that it isn’t always black and white! Take your time to consider what the best course of action is, and first and foremost, always design for an exceptional user experience.
