Design for mobile web is a lot Like loading the dishwasher

If designing for desktop is like you dining room, then the pile of dirty dishes after the party is like designing for the mobile web.

Imagine you are the host of an amazing dinner party. You have a spacious table with beautiful linens. You can display your amazing centerpiece and serve your guests from the very best china.

As any good host would, before the party starts you need to research what your guests want to eat. Are there any vegetarians? Are there any fussy eaters? What will you serve them? What utensils will you need to include?

Once your planning and research is complete, you need to start designing your place setting. Knifes, forks, spoons, plates, and glasses are organized in a logical manner, based on the meal that will be served.

Now imagine you’re actually a UX designer, and the dining room table is the desktop website experience.

But the user experience isn’t just about interface, the same way a dinner party isn’t just about the place setting. It’s the conversation you have with the friends around you, the music selection, the smells… It’s the entire atmosphere which creates context and truly makes an experience amazing (or terrible).

So, if the dining room table is the desktop experience, where is the mobile experience?

More often than not, what we encounter when designing for mobile is the pile of dirty dishes once the party is over — conflicting priorities in page content, cluttered navigation, and an unfocused experience.

At Mobify, I am responsible for ensuring that all of our mobile websites have great user experiences. For me, designing for mobile is a lot like loading the dishwasher after an amazing party.

We could just take the desktop contents and cram them into mobile. This experience isn’t going to be great. The dishes won’t get clean, and the experience of unloading afterwards will be daunting.

The dishwasher provides tons of physical constraints, and rather than fight them, you have to make the constraints work for you. These constraints dramatically affect how you should think about content and how you prioritize it. You have to clearly understand the technology and what it can offer, and be efficient with the space you do have.

At Mobify, we think about the experience of both washing and unloading those dishes before the party even starts. We organize and prioritize the content and interactions so that we maximize the space of the device, as well as provide obvious interactions for those that have to unload it.

Considering how you will unload the dishwasher before the party starts will affect your design decisions, potentially prioritizing certain experiences over others so that your guests actually have a more focused and enjoyable experience from the start.

I have seen the evolution of mobile web design — from WAP sites, to listing your navigation at the bottom of every screen, to the new Progressive Web technologies that offer us blistering fast, friction- free, app-like interactions. I feel like we are at a point in the history of interaction design where we understand what works and what doesn’t work for shoppers on their mobile devices.

Creating amazing mobile user experiences is not rocket science. It takes care, attention, and a dash of amazing technology all rolled together. It takes focusing your attention first on the mobile experience so that you set the foundation and focus for your content and ultimately your user experience.


Special thanks to @jackygilbertson for the amazing illustration that brought this piece to life. Originally published at www.mobify.com on January 17, 2017.