Mobile First VS Desktop First: How To Choose A Responsive Strategy

by | Jul 24, 2017 | News, Web Design

juli sudi how to choose a responsive deisgn

Choosing which responsive design strategy is best for your project is crucial

Research Information Graph Search ConceptDeciding between mobile and desktop responsive strategies is an important step in any internet based project. But it doesn’t have to be difficult. Avoiding design mistakes from the start can save a ton of time and money in the long run. If you know what factors to assess when weighing your options, you can move forward with your project with confidence.

There are two dominant responsive strategies for approaching a web project with multiple platforms in mind. These two design strategies are desktop-first and the mobile-first. After you’ve completed a few web projects for similar audiences, you may tend to make one or the other your default strategy. However, it’s best to consider the numerous technical and business aspects of the project before deciding which strategy is the most appropriate.

Learn the top 10 SEO mistakes designers make

The Two Approaches

Having been the only choice for a long time, ‘desktop-first’ has been the traditional approach to designing websites. Even after the rise of mobile devices, there are plenty of situations in which this ‘think big’ method remains ideal. Yet, other times this approach can cost a fortune. Let’s look at how to choose between multi-platform design strategies and why the wrong choice may create a financial disaster.

Desktop-First Responsive Design

Laptop computer over New York city skyline. Designing for full sized screens means building for the highest specs to display and communicate as much as possible. In this design type it’s not the mobile but the desktop experience that needs to be detailed and dynamic.

Going down to smaller resolutions (often called graceful degradation) means hiding and wrapping elements while trying to support as many original features as possible. In this case, the mobile experience is functional rather than refined.

A strong desktop design is ideal for feature-rich websites and interfaces targeting desktop users (usually office based), especially if there is a separate Android or iOS app for the core features which would serve to optimize the experience for mobile users.

When Desktop-First Is The Most Appropriate:

  • Desktop hits: are more than 80% of your traffic or hits from desktop are at 50%, but your sales are significantly higher on desktop
  • Site interface: is feature-rich
  • Supplemental support for core functions: dedicated Android or iOS app for mobile users
  • Creative design: You focus on complex and enhanced visuals as part of the marketing strategy
  • Product type: Your product is intended for use on a desktop, such as a productivity tool or business related service
  • User Experience: You need a highly refined desktop and simple mobile option
  • Resources:Your time and budget are limited, yet changes are needed on the existing product

Mobile-First Responsive Design

render of a collection of smartphones and tablets with different screensMobile first is designed mainly for functionality. It’s a very focused approach starting with putting out a core function and layering the extras incrementally for higher resolutions (often called progressive enhancement). The mobile-first strategy is often referred to as a content-first strategy because your website’s content must be carefully researched and structured to be categorized based on importance. This method can be much more expensive due to the more extended preparation phase and the expertise needed to create the platform’s versatility.

When Mobile-First Is The Most Appropriate:

  • Mobile hits are 80% or more of your traffic or 50%, but the sales are significantly higher on mobile
  • Features: A handful of core features and/or several well-defined selling features
  • Product type: Entertainment, lifestyle, networking, news or another on-the-go category
  • Design: Simple and minimalistic
  • User Experience: Optimized mobile; modest desktop
  • Resources: Time and money to build a future-proof base from scratch

What you need to know about Google’s Mobile First Indexing

Changing Your Current Strategy

It’s best to thoroughly assess your best strategy before beginning any development. However, it’s better to make the choice late than never. Things happen, maybe your product is being used in a new way, you’re introducing new features, or your analytics have changed over time. When it’s clear that a shift is needed it may be best to make the change than to continue a strategy that isn’t working.

Optimizing For Mobile After A Desktop-First Strategy

close-up view of young woman with trends blog on screen. All screen graphics are made up.Generally speaking, degradation from a desktop version to a mobile version inevitably creates setbacks in the user experience. Some desktop technology is simply not supported on mobile devices and needs to be substituted with a fallback solution that will likely be challenging and costly to implement.

This change may include adding:

  • Mobile-intuitive user flow
  • Support for touch & swipe, scroll, and zoom gestures (as well as multi-touch/multi-finger interactions)
  • Mobile browser support for advanced style and html elements (preparing with fallbacks and polyfills)
  • General mobile best practices (eliminate hover state, box shadows, opacity, iframes, vertical layout; minimize padding, DOM manipulation, network requests)

Optimizing For Desktop After A Mobile-First Strategy

Technical modifications are rarely required in this case, so it’s a less costly mistake. What often happens, however, is that large screen areas remain unused and functions are left unexpanded, lacking a title or visual guide even where there would be enough space to apply them. Sometimes the design is not prepared for a more creative visual, and the brand needs to be expanded.

Conceptual image of a workspace with computer desktop on Beautiful waterfall with soft focus and rainbow in the forest

This change may include adding:

  • Additional narrative text
  • Extended creative library
  • Illustrations as infographics
  • Image rotators

Overall, it’s important to make the choice of what’s best for your business after thoroughly assessing the pros and cons of each method. Even if you have to change your current plan, using the strategy that best suits your company will pay off in the end.

Author image, Juli SudiJuli Sudi is the product designer of OnDevice App, the thoughtful responsive design tool built for testing and presenting responsive design. In her spare time she loves to read about web usability and experience design. You can connect her on Twitter @JuliSudi.