Insights from Ecommerce Experts
Insights from Ecommerce Experts

Home Commerce Mobile Mobile-first ...

Mobile-first design: Your secret to success in 2020


5 minute read

Mobile-first design is a way of thinking that assumes your customer or client is coming to you through their mobile device. From there, it’s a strategy that extends to all parts of the business, from marketing to service offerings, communication and beyond. 

If that sounds big, that’s because it is. Reimagining your business to be mobile-first could be the craziest change you’ve made since “going online.” Before, you were opening a door to your business that made it possible for customers to find you on the Internet. Now, you’re going a step further. Not only are you opening the door for those online clients, but you’re also welcoming them into a space designed to fit their screen. 

So what does that look like?

The basics of mobile-first design

The product design platform UXPin describes mobile-first design as “designing for the smallest screen and working your way up.” That could mean designing your product or service to work best on a mobile device before adapting it to work on other devices. But mobile-first design also means thinking about aesthetics

Rather than designing your website on a desktop screen, for instance, you might choose a theme or develop a design that looks best on small, vertical screens. You’d opt for text that’s easy to read on a phone, buttons that aren’t too close together, and high-quality images that don’t take up the whole page unless that’s the intention.

Check out the difference between these two mobile experiences for maple sugar farms in Vermont:

Bragg Farm

Sugartree’s text is large enough for a mobile device that the customer doesn’t have to zoom in and out to read the details. Plus, rather than trying to fit everything on one page, Sugartree’s page features a video about the farm and an ad that immediately addresses a key ecommerce consumer question. 

Meanwhile, Bragg Farm’s navigation buttons at the top of the page might make sense on a desktop. But on mobile, they’re tiny. A customer would have to zoom in to read and select. Sugartree has solved this problem with a “hamburger menu” — a navigation tool in the top-left corner where customers can find out more about the store, browse maple recipes, and get to the contact page. 

Mobile-first content marketing

Many businesses use blogs or resource centers to get the word out and develop relationships with customers. Get Elastic certainly does! But if you know your customers will be looking at that content on a mobile device, here are some things to consider beyond the basics:

  • Are your sentences and paragraphs short enough to fit easily on a small screen?
  • Are your hyperlinks spaced far apart so that someone won’t accidentally touch the wrong one?
  • Do any images embedded throughout disrupt the flow of the text?
  • Does the text load quickly? Or do added media like GIFs and videoes cause delays?
Bragg Farm

It’s not that the blog on the right is bad (just having a blog puts your business on the right track). But there is some room for improvement. Bolded subheaders can keep mobile readers from getting lost in large sections of text. The Sugartree example uses three colors that stand out: light blue, orange and black. By contrast, the Bragg Farm example has hyperlinked text in burgundy, which doesn’t show up very clearly next to the surrounding black text. The font is also an issue here. Letters are formatted to be closer together, so they’re challenging to read on a small screen.

One thing the Bragg Farm example does well, however, is giving the reader clear buttons at the top of the screen to share articles on social media. A good mobile-first experience is one that acknowledges why people love browsing on their phones in the first place. Besides making calls, texting and finding great maple farms online, the average American spends 64.5 minutes a day on Facebook, according to a recent study of millennials and baby boomers.

Products or services built mobile-first

For some, building out products or services with a mobile-first approach is easy. Many ecommerce stores already have it down. They have pictures of all their products, search filters to narrow down results and algorithms built in to show customers similar searches that might interest them — all easy to see and interact with on a mobile phone.

For others, going mobile-first might require some additional out-of-the-box thinking. Here are some ideas to get started:

  • Draw out what the customer sees, from page to page, on your website, should they come to you from their mobile device. Then, revise what you’ve drawn. How would an ideal mobile experience look? 
  • Ask a new customer to take you through their experience from start to finish on their mobile device. Then ask them about what made sense and what didn’t. Was everything easy to find? Did they experience any moments of frustration that are unique to the platform? Try following along with them on a computer for comparison. If it’s easier to use your business website on a computer but your clients are starting to come to you via a mobile device, it’s time to make some changes. 
  • Check out some other mobile-first experiences to get inspired. These mobile-first designs have combined a variety of thoughtful features, like buttons built for thumbs, thumbnail images for easy scrolling and simple colors that don’t pull the eye in too many directions. 

Initially, mobile-first can sound a little intimidating. Change always is. But consider this: How much time do you spend in front of a desktop screen, compared to the amount of time you spend on your phone?

Mobile-first is the way of the future, and your secret to building a successful business in 2020 is embracing that change before the competition catches on. 

Danielle Higley
Danielle Higley
Danielle Higley is a copywriter for TSheets by QuickBooks, a time tracking and scheduling solution. She’s been a contributor to, FiveThirtyEight, and a variety of HR and business sites.
More From Author



Please enter your comment!
Please enter your name here