Optimizing for Mobile as You Prototype UX

Jones + Waddell
Jul 2 · 5 min read

In our recent post “Why Fast Matters — A Lot,” we talked about why speed is important when you’re building out a website, app, or another type of digital product. We listed a bevy of tools you can use to test and optimize the speed of your product.

But it’s equally important that your website works well on a mobile device and that you take into account mobile form factors and varying mobile screen widths. We probably don’t need to spend a lot of time convincing you why, but a quick visual to show you how prevalent mobile usage has become over the last ten years:

Source: Statista

By last year, more than half of all website traffic worldwide was happening through mobile phones. The tipping point happened back in 2016, when mobile usage surpassed desktop usage for the first time. In the words of TechCrunch: “This may have been a long time coming, but it’s still astounding how many major brands (including possibly our own) favor the desktop first and prioritize mobile web second.”

How to Fake Mobile View

Like with speed testing, there are tools you can use to test how your website is going to look and perform on a mobile device. One of these is the simulation mode or “fake mobile view.”

You can achieve mobile screenshots for your design prototype by changing the view of your browser to display at mobile size, even from a desktop or laptop browser. In Google Chrome, for instance, you would hit the following key combination:

Command+Option+I (Mac)

F12 or Control+Shift+I (Windows / Linux)

To see this pop-up:

By choosing Developer Tools, you can select a device to preview, with or without the frame visible:

For more information on using Chrome DevTools to simulate responsive design views, read Google’s article Simulate Mobile Devices with Device Mode in Chrome DevTools.

In Firefox, you can similarly activate “Responsive Design Mode” by clicking “Web Developer” from the “Tools” dropdown menu, and then selecting “Responsive Design Mode” from the submenu. This pops your design into mobile view. To quickly toggle this mode in Firefox, you would hit the following key combination:

Command+Option+M (Mac)

Control+Shift+M (Windows)

For more information on using Firefox to simulate responsive design views, read Firefox’’s article Responsive Design Mode.

There are also plenty of third-party apps on the market to help you preview responsive design. For more advanced and automated testing and usage we highly recommend a more robust tool such as Eggplant. While using the responsive view modes in browsers is handy for quick reference, the tool we would recommend for a dev team would need more automated and scriptable functionality. Eggplant also offers a lot more capabilities that are relevant to optimizing your customer experience.

Google also has a simple tool here that will tell you whether your site is mobile friendly and shows you a preview.

Necessity Is the Mother of Invention

Even with all the ways you can preview how a product will look on different screens, screenshots on a computer don’t carry the full flavor of mobile responsiveness. Users can’t see multiple options at once, and the display lacks hands-on appeal.

Sometimes, testing the usability of your product requires creative solutions. Once, while we were envisioning a mobile-responsive app, we struggled to find a way to give users a visually accurate and also tactile experience of using the app on different devices.

Our first solution was to use industrial-strength Velcro to attach multiple mobile phones and tablets to a whiteboard so that users could see and touch the interface across display types. (Actually, the Velcro turned out to be a bit too industrial, but that’s a story for another time.) We then used browser syncing to display the design across devices.

This worked fairly well, but after watching a few people try to play around with the various devices, we quickly realized it’s physically awkward to use a phone that’s attached to a vertical, immobile whiteboard. We needed something adjustable for different user heights and viewing angles, that would allow users to hold each device in hand and move it around a bit.

So we built another prototype: a Medusa-looking machine with mobile devices attached to the end of flexible arms. We called it Dr. Octopus. This became an excellent way for users to try the mobile design across various devices, and it was flexible in its usage (no pun intended). This device turned out to be so handy that we even sent two of these gadgets to agency teams we worked with frequently.

When you’re building a digital product, there are so many prescribed tools, best practices, instruction manuals, and pieces of advice. But sometimes, you have to innovate the way you innovate, with building and testing techniques no one has ever thought of before.

Want to keep going? Read our book Got Ideas? How to Turn Your Ideas into Products People Want to Use, which takes novice product-makers through the journey of creating great, user-friendly digital products from the thin air of their imaginations. Available in hardcover, paperback, ebook, and audiobook, it’s a hands-on, practical manual for aspiring entrepreneurs and intrapreneurs.

Jones + Waddell

Written by

Authors and UX leaders with a focus on user experience and a commitment to ongoing iteration in the quest to create better digital products