A common practice for designers is to create a website with desktop display as the focus and make adjustments to fit into a mobile device. However, in a mobile era, is this still the best way to do it?
Delivering great experiences is the core for this industry, and designing responsive digital products is something that is hardwired into our process to such an extent that neglecting mobile design in the apex of the era of mobile devices would be pure UX heresy. The question here is, what comes first when designing? Desktop or mobile?
When it comes to the visual design phase of a project, a very common approach is to build a desktop layout that will then be translated to fit into mobile devices’ screens. This traditional approach faces its limitations when it’s dealing with “accommodating a rich design inside a 4.7” screen”. The solution? Design mobile screens first.
Data shows that global mobile browsing has been steadily growing, hitting 50.3% in 2017 for globally web pages served. This means that more than half of users are now browsing the web mainly from a mobile device instead of a desktop computer. In the US, users currently spend over 3 hours daily on mobile devices, of which 50 minutes are on web browsing.
Furthermore, over 40 million US internet users will go online exclusively via a mobile device, which means they rarely or never use a desktop to access the web; in other words, a vast number of users are likely to only see the mobile version of a site.
I know! The fact that mobile web access is mainstream these days, does not necessarily compels us to pursue a strategy that puts mobile first.
So then, why mobile first?
Let’s take a quick journey back to those magical times in the 2010s; a land full of “Floats” and “Clears”, and hacks for Internet Explorer 7, when the term “Graceful Degradation” was coined.
Graceful Degradation came out from the need to have a website or web application properly accessible on as many screens as possible. We, designers and developers, wanted to take advantage of new technologies without alienating and frustrating users lagging behind on these technologies.
For web design, this means that a website in all its glory will be gradually watered down visually and sometimes even stripped of content to work properly on different platforms—devices and browsers.
As you can imagine, this approach didn’t always work well. Speaking for a majority of web designers, sometimes we tended to diminish mobile sites that felt like an afterthought rather than a polished product.
Progressive Enhancement to the rescue!
The idea of Progressive Enhancement is to use the starting time of a project to design a product that works and looks great despite limitations. By doing this, we have already gone through the task of trimming down the content to its most necessary elements (read about Atomic Design Approach).
Then, when it’s time to bring this design to desktop screens, instead of bumping with the decision of what to cut and how to modify the layout, we get to decide how to make it more robust and if it needs it.
This same concept of Progressive Enhancement is now applied to mobile-first design. Taking the smallest relevant screen (a smartphone, for example) and work first on the design based on it, will bring a good number of benefits for the overall experience:
- Better prioritization
- Build foundations for larger screens
- Focus to design for content
- Design for better load times
This approach is almost guaranteed to take a bit more effort from the start—from onboarding the client and making sure they know the ‘why’s’ and the benefits, to figuring out how to display a content-rich data table on a small screen. But the result will be an improved user experience and a more precise user interface.
It is also worth mentioning that, while a mobile-first approach has its advantages and should be considered on most web projects, any method, including this, is debatable and any decision of taking a mobile-first or “desktop-first” approach can and should be overridden by findings in a user research or by user’s metrics and analytics. For example, if data tells us that a content-heavy web application is mostly being used in desktop 80% of the time, then design for desktop first is probably the way to go.
Needless to say, we are NOT designing different products for different screens. They ARE the same. And regardless of the approach data tells us is right for the project, to think about both, mobile and desktop, at the same time will always be best.
Ensure high-quality digital design with these best practices.
Become an expert at running design sprints with a remote team.
Learn why user research is a critical part of UX design.