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

Julianna Sudi
Aug 10, 2017 · 2 min read

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

Image for post
Image for post

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store