When designing and developing online shops, it’s very important to consider what devices your customers will be using — not only to view the site, but to checkout and pay. I was on a site the other day which looked fine but when I added an item to my cart and went to checkout, everything was jumbled. That looks incredibly unprofessional and was/is a red flag that caused me to leave without making a purchase.
I’m not the only one this happens to. Stats show that mobile traffic now accounts for 50% of the visits. (Some merchants experience closer to 70%!) What’s interesting though is that only about 35% revenue comes from purchases on a mobile device. Compare that to 55% 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, which is likely true to a degree; or maybe the ordering, checkout and payment flow is not as highly optimized as it could be for mobile users.
So, how can you optimize your shop for the best browsing and purchasing 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 and is typically the easier, more popular option.
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 sites is to go with responsive design. This is our preference at Charity Swipes (and is how we’ve designed our website).
Here’s a list we’ve compiled of all the 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.
Would it be wise 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?
This is an easy element to miss. (admittedly, we did when we first built our site). 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 mobile devices.
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 your images beautiful and crisp on retina screens?
Balancing quality of image with not overloading the bandwidth/speed is crucial.
This is tricky and there are no industry-standards or best-practices yet. Test your work on desktop and mobile and resize images accordingly.
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. You might want to consider moving 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?
Hover effects are a great interactive tool on desktops but 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 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?
Going back to what I said at the beginning of the article, this is crucial! If the customer can easily browse the website but can’t easily add products to their cart and/or check out, your 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.
There you go. Those are the things to consider when optimizing your site for mobile. Always remember what you like and don’t like about sites you view on mobile, and make sure your site follows suit. After all, if you find something unlikeable about a site, chances are there are plenty of other people who feel the same.