Mobile First is a hot topic these days. If you say you don’t agree – the mood quickly becomes bad. We’ve seen a number of cases lately where the focus is on the mobile experience and the desktop experience is sacrificed, and therefore the total result.
”Mobile First” means that you in you start your website project by designing and developing the mobile experience instead of the regular way, where you started with desktop and mad a smaller version of that same design to fit into a mobile device. The concept of Mobile First is based on two idéas:
- It’s easier to design for mobile first and then scale to desktop than vice versa.
- Mobile is more important than desktop.
Let us review these ideas further.
1. It’s easier to design for mobile
Yes, it’s true. But you need to ask if the project should be ruled by what is easy for developers. Let me suggest another viewpoint – Let the users needs and the business goals rule how the web project should be prioritized.
2. Mobile is more important than desktop
A while ago we had a project with a company targeting teens. Teenager = Mobile, right? That is correct, more than haft of the traffic to the company’s webbshop came from mobile devices. They were expecting this number to increase and therefore went for the idea of Mobile First. Said and done.
But when the new responsive webbshop was launched it turned out that almost all of their revenue was generated by desktop traffic. The traffic was well over 50% in favor for mobile devices, but it wasn’t the device the customers bought from. Let’s look at an example: Let’s say the new design lead to an increase in conversion rate from 0,3 to 0,9% in mobile devices. That’s a 200% uplift – Awesome. Okay, you decreased the conversion rate on desktop from 3,6 to 3,5% – No big deal. But if desktop stands for 90% of the revenue the math is:
- (0,9-0,3) x 10%
- (3,5-3,5) x 90%
That equals to -3% decrease in total revenue. That said, the new responsive Mobile First design sold less than the old non-responsive design. That Multichannel, or Omnichannel, means that there is different behavior and different needs based on channel is nothing new. But the ones that need to get up to speed is web agencies and others who haven’t drawn the conclusion that you can’t apply a Mobile First-strategy on all pages and all user flows on a website.
You can’t apply a Mobile First-strategy on all pages and all user flows on a website.
Kissmetrics published a good blogpost ”Some Ecommerce Channels Aren’t Meant to Close Sales”, where they stress the importance to define goals for each channel. If the goal for mobile-channel isn’t to close the deal, then the pages where purchases happen shouldn’t be prioritized for mobile.
Desktop last – in reality
Let’s look at a few examples where Desktop Last-strategy is used. We’re looking at the checkout page that is separated into two pages. If we start från the idea that most users buy / order their product on desktop, then that is the design we need to optimize.
The mobile version
Below you see two pretty user flows. Two perfect runs straight down. Fill in a few fields and click the green button and you’re all done.
The desktop version
The design becomes widely stretched and now we’re having two trickery slopes that even would make the best of us fumble. We’ve seen in our tests that clean vertical forms convert better than forms in several columns. In his book ”Designing Web Forms”, Luke Wroblewski call this ”Clear scan lines”. So we strongly suspect we have two cases of Desktop Last.
What to do?
”- Okay okay, John always talking and talking, do something constructive”, you say. -”Thanks for asking, was just about to do so”, is my answer. The endpoint is not to look at website data as a whole. Look at user flows and sections. Places where you have a lot of mobile traffic – go with Mobile First and vice versa. In general you can say that product pages where users browse and landing pages for newsletters should be optimized for mobile devices. Compared to purchase flows and checkout where desktop users still will be domination the sales. But every website has it’s own conditions and challenges – How does your site work? Share your thoughts on mobile vs desktop and how to work with the different channels in the comments below.
