chapter 8

Mobile | How to Optimize Clients’ Stores for Mobile

When designing and developing online shops, it is increasingly important to consider what devices your clients’ customers will be using — not only to view the site, but to order, check out and pay.

We can see in the stats from one of our client’s shops that mobile traffic now accounts for 50% of the visits. But what’s interesting is that, in terms of revenue, only 35% of visitors made a purchase on a mobile device vs. 54% on a desktop.

What does this tell us? Well, it may indicate a number of things: perhaps more people tend to just browse on their phones; or maybe the ordering, checkout and payment flow is not as highly optimized as it could be for mobile users.

So, how can we optimize our clients’ shops for the best browsing and ordering experience on all devices?

The first thing to consider is whether you intend to build a completely customized mobile experience — separate from the desktop site — or whether you will simply “optimize” the mobile experience. The latter is referred to as “responsive” design — because we are developing the site to “respond” to the different screen resolutions.

I’d prefer not to get into the debate over the pros and cons of responsive vs. dedicated mobile sites, but the trend for most small to medium-sized sites is to go with responsive design. This is definitely our preference at Lucid, and the focus of this article.

Things to consider when developing a responsive site

Do you need a totally unique experience on mobile devices?

Or is it enough to simply tweak the layout for smaller screens? If you feel you need a totally different workflow for mobile, think carefully about whether responsive will in fact work for you. Or rethink
your workflow. Keep it simple. Keep it intuitive. Small UX and UI modifications are often sufficient and perhaps you can rework certain areas of the desktop interfaces to better accommodate the mobile experience. If the site is so complex it won’t adapt to mobile, maybe it’s time for a refresh overall.

Might you need to eliminate some of the content on smaller devices to simplify the experience?

If you do this, bear in mind you need to be careful not to remove anything that is vital to the overall experience and brand story. It’s also worth considering whether your content is too heavy in the first place — even for larger screens. It’s important to have consistency, and “dumbing down” your content for mobile might not be in the end- users’ best interest — especially if they might eventually view the site on both mobile and desktop devices. 

How will your navigation work on different devices?

If you have a complex menu structure, perhaps with multiple levels
of nested items, consider going back to your content strategy and working out a better way to simplify it overall. Regardless of whether the site is for mobile or desktop, we always try to avoid having more than one level of nested content — it’s easier to build and it’s definitely easier and more intuitive for users.

Are clickable elements easily tappable?

A finger is larger than a mouse pointer and the element being tapped on will be obscured by the finger. Be sure elements that need to be interacted with are big enough and have adequate spacing on small screens.

How will you handle layout of grids and images on different devices?

It’s common to change the number of columns depending on the screen size. But something important to consider is how this might change the layout and balance — try to avoid having “widow” thumbnails on smaller devices because the number of columns doesn’t divide evenly into the total number of items. This isn’t always possible, of course.

Are you using vector icons or icon fonts?

If you’re not, you probably should be.

Are your images beautiful and crisp on retina screens?

This is no longer the domain solely of iPhones and mobile phones, as retina is fast becoming standard on new laptops and desktops.

Definitely consider the impact on bandwidth and speed of large, retina-resolution images.

This is tricky and there are no industry-standards or best-practices yet, but it appears that the srcset attribute may be emerging as the best way to handle this. The lazy way is to always serve the largest image you will require, but this causes unnecessarily overweight pages — which is especially hard on mobile data users.

Do you have big, bold, beautiful banner images or sliders? How will they look on a small screen?

If they have words overlaid, consider rendering the type using HTML and CSS rather than embedding in the image so you can then optimize the text for different screen resolutions. Text “embedded” in the image could well be unreadable on small devices. On some of our themes, we actually move the text off the banner image on small devices and display it below so it can be large and bold without obscuring the image.

Does the site have a complex header, large logo, sidebar or information-filled footer?

How will you strip this down and simplify it on smaller screens? What can be hidden or collapsed into the “hamburger” menu? If you have important call-to-action buttons on the desktop site, does the functionality get significantly diminished if you hide this button by default? Should it live outside the collapsed menu?

Do you have hover effects on links or buttons?

If these are vital to the user-experience, be sure to consider how this will work on touch devices that don’t have hover. Better yet, don’t rely on hover effects for key functionality and reserve for subtle enhancements only.

Are sliders and popups/modals optimized for small screens and touch devices?

Even if your sliders have left/right arrows, it’s worth considering whether you can optimize these to work with swipes as it’s a nicer experience for mobile users — and navigation arrows can obscure the image on smaller screens.

Are forms optimized for use on small devices?

Are field labels still visible and does the user-view zoom in appropriately when the user taps on a field to enter text? What about field types? Are the appropriate device keyboards triggered for each field — i.e., numbers, URLs, email address, text, etc.?

Is the add to cart, checkout, and payment workflow optimized for different screen sizes?

This is crucial. If the customer can happily and intuitively browse the website but can’t easily add products to their cart and check out, chances are conversions will suffer. Make sure you spend time going through the entire ordering workflow (right through to payment) to be sure it works beautifully on all devices. 

Recommended reading

All the books by A Book Apart are excellent and highly recommended. But, in particular, we recommend reading Responsive Web Design by Ethan Marcote and Responsible Responsive Design by Scott Jehl. And, if you’re working in or running a creative studio (in fact, if you only read one A Book Apart book) definitely read Design is a Job by Mike Monteiro!

About the author

Galen King is founder and Creative Director of Lucid, a design and development studio based in New Zealand. Lucid specializes in graphic design and branding, as well as web design and development. Lucid is a leading Shopify Expert and has been designing, building and developing ecommerce sites on Shopify since 2006.

Next chapter

9. Invoicing and Payment | How to Make Sure You Get Paid

3 min

Grow your business with the Shopify Partner Program

Learn more