If you’re thinking about launching a new website, it could be helpful to try this strategy: Mobile-first design.
Mobile-first design offers a solution to the problem of catering to users today who use websites on different-sized screens. In general, it makes it easier to give users a consistent and seamless experience across devices.
What’s the difference between desktop-first design and mobile-first design?
A desktop-first design strategy involves considering the desktop version of a website to be the primary, most complete experience of it. Concessions are then made as screen size reduces, to create a pared-down version of the original. Often, our smaller devices and their screens cannot handle a desktop-scale design, making interaction challenging.
On the other hand, a mobile-first approach favors lightweight and low-bandwidth design that can be enhanced based on screen size and available capabilities. Additional content can appear when the device can accommodate it, but it isn’t required for a satisfying user experience. Check out Luke Wroblewski’s demo below to gain a better understanding of this:
In 2010—a time when users were increasingly accessing websites and apps through a range of screen sizes—Wroblewski made the suggestion that designers should design for the smallest screen first, i.e., mobile-first design.
As more users began accessing websites on their mobile phones, web designers recognized the need for separate desktop and mobile experiences. Some created separate desktop and mobile sites. Eventually, responsive design became the standard, where the same desktop-first design could adapt to different screen sizes easily.
By 2015, Google had confirmed that more users were using Google from a mobile device than a desktop. This was a major step towards user-first design, where user preferences and user experience began to take priority in design.
To stay competitive, it’s important to delight your users. Learn how to transform your website experience.
Today, user-centered design is a significant factor in determining website performance and, ultimately, business results. So, operating on the notion that most of your users will be on mobile, mobile-first design may seem like the obvious choice. Before you make that decision, however, take a look at a few pros and cons:
Pros of mobile-first design
1. Better UX across devices
Mobile-first design focuses on helping users navigate a website or app with ease and efficiency. In other words, it’s all about designing for seamless, frustration-free interactions. Because it is designed as a complete experience—rather than a pared down version of a complete desktop experience—it is more likely to offer a better user experience.
In addition, designing for the smallest screen first makes for a more responsive design, where the website or app content and UI adapt more easily to larger screens—i.e., it’s easier to expand a mobile-first design to fit larger screens than condense a desktop-first design to fit smaller screens.
2. Easy access to key information
It gets people the information they need, regardless of where they’re accessing your website from. When people look something up on their mobile device, they want high-quality website content that answers their questions or helps them make a decision. A mobile-first approach, which showcases the most important content, would help you meet that need.
3. Fewer bugs
The reason for this is simple—less code means fewer opportunities for bugs. As mentioned, desktop-first involves starting with something complex that is then adapted to smaller screens. This code-heavy starting point entails a greater risk of bugs later on. With a simpler mobile-first approach, you will be able to detect and prevent bugs more easily.
4. Better ranking on Google
Google prefers faster load times, so how fast your website loads can have a significant impact on your results.
In July 2018, Google made page speed a ranking factor for mobile searches. This ‘Speed Update’ has caused companies across the globe to improve their page speeds. After all, as Google stated, “for every second delay in mobile page load, conversions can fall by up to 20%.”
What we can take away from this is that speed is a priority. Chances are your competitors are actively trying to improve this. A mobile-first website will have faster load times as compared to a desktop-first one being viewed on mobile, where even hidden elements need to be loaded.
Cons of mobile-first design
1. Smaller canvas and less room for creativity
This is an experience many web designers will have when switching to mobile-first design. They’re used to a more accommodating desktop-sized space. Asking them to work on a smaller canvas with fewer tools could make them feel restricted. Depending on the designer, this could be either a welcome or unwelcome challenge.
2. Uncertainty for clients
Since they will not be able to view the desktop version until much later, your clients may not be comfortable with a mobile-first approach. Unless they have complete faith in your judgment, they may not be willing to move away from a desktop-first approach.
3. Training time and costs
To develop and execute a mobile-first design strategy, you will need a team that understands the new design methods it will involve. You may have to train your team or hire more resources to help take on this challenge.
So when should you choose mobile-first design?
It’s important to consider the specific case when choosing between a desktop-first or mobile-first approach, but here are some broad recommendations to help you get started:
Choose mobile-first design when…
- The primary use will be on mobile
- The user flow is simple
- The industry in question is using mobile-first design
- Users tend to use your website or app on-the-go
- Your app or website requires simple features
Avoid mobile-first design when…
- The primary use will be on desktop
- The user flow is complex
- The industry in question serves their users primarily via desktop
- Users tend to prefer using your website or app at their computers
- Your app or website has complex features
Ultimately, the choice of mobile-first design or desktop-first design comes down to a few key things: Your design team’s skills, your client’s needs/preferences, and, most importantly, what will create the best user experience.
So, before you select an approach, it’s important to weigh the pros and cons, and see which one will lead to the best outcomes for you.
At Chittlesoft, our web designers and developers make it a priority to ensure your users have a high-quality, seamless, world-class experience across devices. To create or refresh your website or app design, get in touch.
