Designing in a Mobile-first Approach

Have you ever waited in line or taken a long train ride and observed what people are doing? They were likely not talking but rather consumed deep into their phones. Phones are everywhere and they are not going anywhere anytime soon. Business Insider predicts that by 2020 almost 75% of the global population will have a cell phone. That is billions and billions of phones. As more people engage with email on mobile devices, campaign managers must meet their customers where they are and execute a mobile-first strategy.

Mobile opens accounted for 46% of all email opens, followed by webmail opens at 35%, and desktop opens at 18%. – Litmus “Email Client Market Share Trends

Not keeping up with the transit of how consumers read their emails subject you to low open rates, no click through and, therefore, no profits. To bypass this potential drop in conversions, you should take the time to fully understand the importance of mobile-first design and the impact it can have.

If an email does not display correctly, 71,2% will delete it immediately. BlueHornetConsumer Views of Email Marketing

What Does a Mobile-first Email Look Like?

A well-crafted email is seamless and you clearly know the offerings upon opening on your mobile device. If is really compelling you find yourself fully engaged taking the next action steps. In the best case scenario, the next step leads you to visit the company’s website where you are one click away from a purchase. This seamless transition from email to web to purchase on your cell phone is what is known as mobile-first design.

These emails designed as part of a mobile-first strategy appear effortless to create, however this is not the case. It takes thoughtful effort, testing and UX understanding to create a balanced, clear, and visually appealing email. Although a mobile-first versus a simple responsive design takes more time and effort, the results are considerably higher conversion rates and therefore higher revenue.

More email is read on Mobile than on desktop email clients. Stats say 47% of email is now opened on a mobile device – Litmus “The 2017 Email Client Market Share” (Jan 2018)

Below we highlight what is a mobile-first approach and the benefits it can have on your campaigns.

Defining Mobile-First Design

Mobile-first design is a strategy that says you should prototype an email and website on the smallest screen first then progressively work your way up to larger screens. This progressive enhancement helps to keep content and media from being too heavy for a small mobile device to render properly. In doing so, a designer will have a solid foundation free of unnecessary page elements from which to build. Next designers must consider how to utilize a small space in a conservative manner, while keeping important elements present along with an ease of navigation. The new layout will automatically adapt to users’ screens by resizing and rearranging visual elements so that content can be viewed optimally.

About 3 in 5 consumers check their email on the go (mobile) and 75% of say they use their smartphones most often to check email. – Fluent “The Inbox report, Consumer perceptions of email” (2018)”

Content is one of the biggest priorities when designing for mobile-first. This means that only critical content and features necessary to your business should be present such as the main message of the email, product images and prominently placed call-to-action buttons. In essence you need to remove any content that will distract your customers and prevent them from quickly fulfilling their reason for visiting your website or opening the email.

Design for Mobile Device Optimization First, Then for Desktops.

Designing Mobile Approach

Mobile First

Designing Desktop first Approach

Desktop First

Impacts of a Mobile-First Approach

While adopting a mobile-first strategy can lead to your designer spending more development time, the outcomes promise for a better user experience and higher conversion rates. Below we highlight some of the benefits when implementing mobile-first.

  • Improved User Experience:

    We have all experienced times when we have we clicked a link on our mobile device only to be dropped onto an unorganized website that is too large to display properly. Then we find ourselves scrolling from far left to far right just to read all the content. This causes nearly immediate website abandonment and kills any chance of a conversion. A mobile-first approach eliminates this bad user experience along with frustration thereby turning it into an experience where the user can easily navigate and find what they need/want.

  • Faster Website Loading Speed:

    Numerous studies show that time is of the essence when it comes to page loading times. On average, users will wait about 6-10 seconds before they abandon a page. A website that isn’t optimized for mobile risks the chance that the site may not load in a timely manner. A mobile-first approach guarantees that the backend code is formatted specifically for mobile devices, so it will load quickly and decrease page abandonment.

  • Increased Average Time on Website:

    Due to the optimized website layout, a great benefit is that users are likely to spend more time on the site. Menu items are clear, content is direct and organized, and navigation throughout the site is very intuitive. All of this makes for an environment where the user can quickly find what they are looking for.


With the shift of users doing everything on their mobile device, it behooves digital marketers, campaign managers and UX professionals to invest in the proper design that deliver an uninterrupted experience for viewing and navigating through emails and websites. It is about creating a digital experience that is seamlessly carried over from tablet to desktop. At the end of the day, users opening your emails and visiting your sites just want to be able to “get stuff done.” Taking a mobile-first design approach allows your users to do that.