Mobile first design vs. Desktop first design vs. Element first design

A practical guide on how to choose the right strategy with multiple platforms in mind. — Part 3: The responsive method

In the previous chapters I’ve listed some of the most important aspects of choosing a responsive layout or a responsive business strategy for a digital project. Here below I’m going to walk through the dominating responsive design methods to see which one is the best for a specific project.

Responsive methods

Mobile first design vs Desktop first design vs Element first design

Mobile first design

This is a very focused approach that begins with designing for the main function of the site, then aims for higher resolutions (often called progressive enhancement). A good choice if:

  • The number of hits from mobile is 80% and above or 50%, but the sales are higher on mobile devices
  • The user experience needs to be optimized for mobile and it’s enough to be merely functional on desktop
  • The site or interface has only a few core features
  • The service or product has a rather interactive nature (entertainment, lifestyle, networking, news etc.)

Desktop first design

This approach means designing for the highest specifications — the best achievable by design- and then going down to smaller resolutions (often called graceful degradation). A good choice if:

  • Both the number of visitors and the sales are higher on the desktop
  • The site or interface is quite feature-rich, e.g. productivity, office or business tools
  • The user experience needs to be highly refined on the desktop and it’s enough to be merely functional on mobile
  • Some patches are required for the existing product, but the time and budget are limited

Element first design

This is a form of atomic design applied with a responsive mindset that enables the individual preparation of the interface parts so they behave responsively. A good choice if:

  • The number of visitors is close to equal on mobile and desktop or there are no initial user statistics
  • The site or interface is feature rich and complex and/or will expand further gradually over time
  • Comfortable budget and time are available to build a future proof design system

These are the most dominant responsive strategies for approaching a web project with multiple platforms in mind. None of them is a silver bullet and you may find yourself using them alternately or combined to achieve the best result. Overall, I hope I could help to assess the factors before making the choice of what’s best for your current project.

Original summary: Native mobile app vs. Dedicated mobile site vs. Responsive design — Fluid vs. Adaptive vs. Fixed — Mobile first vs. Desktop first vs. Element first