What do you get when you don’t design mobile-first?

You get mobile-last results.

When you try taking what you have on desktop and making it fit on mobile, or making it responsive, you’re just putting lipstick on a pig.

pasted-image-0-20

You cannot take what you have on desktop (and what could even be working quite well on desktop), shrink it, and expect the same results on mobile.

Why?

  • You can’t put all the above the fold content from desktop on the mobile screen. You’ll be able to pull off maybe 20% of that. This means you must start from scratch and decide what is really vital and needs to be at the very top, and what can be shown further down the page
  • You can’t all the menu elements from desktop the same way on mobile. There’s not enough space. And it doesn’t work the same way (see: “Carousels on Mobile Devices“)
  • At the same time, putting everything behind the hamburger bar and recreating the menu structure there, hidden behind the three parallel lines, is not your best bet either. You need to rethink the whole menu, which usually means that you end up with a hybrid menu, where you have a few categories in the top bar, and the rest in the menu link, which also is preferably not a hamburger.
  • You can’t take desktop-native elements and port them to mobile (like the slideshow above)
  • You have to take thumb location and even finger size into account, which is never your concern with desktop.
  • Use more video. Video is much more natural and engaging on mobile.
  • Do everything you can to minimize the amount of typing.
  • The list goes on…

This is especially true for ecommerce.

With ecommerce mobile is your bread and butter, and its importance and share is only growing.

If you start with a desktop version and then move on to mobile, convincing yourself that you’re approaching it with a clear mind and doing it mobile-first, you’re not. Your subconscious mind is still influenced by the solutions you used for desktop and will try to use them on mobile too. Our minds are lazy.

It’s a big shift, but a necessary one.

This is how you should start:

pasted-image-0-21

Can you do it?

RELATED ARTICLESMORE FROM AUTHOR