… or: Design your site for real people who use smartphones

How good is your site for mobile users? Really … how good is it? 

Because here are the facts:

• 230 million Americans have a smartphone

• 182 million of them (79%) have purchased online with the smartphone in the last 6 months

• Mobile made up 68% of holiday 2019 traffic and 40% of orders

So, mobile is important … really important. Read on for ways to ensure that your site experience is optimized for people with smartphones (and credit cards).

Most of us do the majority of our web creation on computers: Laptops, and even good old tower computers. (Yes, they do exist, you may even use one – or at least your parents probably do!) 

I do my web site design on a laptop. Mostly because I like the keyboard control of a computer and the size of the screen. I know I can get a keyboard for a tablet, but I have a laptop, so I might as well use it.

Most people who are running a business with an online component have a similar story. They’re using the same computer for web design that they use for their accounting, planning, spreadsheets, etc. … and, it’s nice to have a big screen to see the design. 

That’s great – and probably more efficient than trying to navigate web interface platforms on a smartphone. (In fact, many web platforms restrict usage and design functionality on mobile, including tablet) – but, you must keep in mind that this is not how most people view websites. Sure, people will surf a bit from work (at lunch or … gasp! … during the workday) or from a personal computer at night, but for the most part, they’re going to be on their phones. Whether it’s at the gym, in the car, in line at the grocery store, on the couch, at lunch or at work, in the waiting room at the doctor's, while they’re supposed to be watching their kid’s soccer game – or anywhere else that you’ve ever used your phone. Which, in today’s world, is pretty much anywhere at any time that you have a spare 30 seconds.

I started in eCommerce back before the mobile revolution (yes, young padawan, there was a time when most people used computers to view the Internet). So, the page design concepts that I first learned and perfected through testing have completely changed in the years since. Those original design concepts had strong roots in printed page design. Shocking? It shouldn’t be; the same elements of eye-tracking, page hotspots, clutter vs. attention-grabbing, and how readers scan a page are basically the same whether you’re looking at a printed page or a big screen. If you’re viewing a web page on a computer today, then those tenants of page design haven’t really changed all that much (there are some changes for sure, and we can review them in a future article). But, what has changed is that most people don’t view websites on computers all that much anymore.

So, you now have to design for a mobile viewer. How is it different? Well, the concepts of trying to grab attention across a 10 - 19-inch screen are completely out the window. I remember doing tests on placements for page elements where we debated endlessly on whether the email signup should go on the left, the middle, or the right side of the page. The answer is the right, but in mobile, that doesn’t matter. There is no left, middle, or right hand side. Everything gets split up and stacked in a mobile view.  

The first thing I teach now when going over good design is: Mobile First.

Most of the drag and drop website software editors give you the ability to preview your pages in mobile - even if you can’t design in it - so, here’s how to ensure you are mobile forward in your design: Each change you make, preview it in mobile, ensure it looks right before you even think about designing the next piece. I do this constantly and it’s not overly cumbersome.

If it’s not quick and easy to do a mobile preview on your web design tool, then you can literally minimize the size of your browser window to approximate the size of a mobile device. Your size should scale down accordingly and show you what your site will look like to a mobile viewer.

Google is mobile first … and has been for a while.

Google has favored mobile first in its indexing for quite a while now … gently requesting it for a time, and in July 1 2019 they officially made the default for all new web sites to be mobile-first indexed. And in mid 2020, all sites that haven’t voluntarily gone to mobile first will be forced into it. That means they are indexing and viewing your site on mobile and judging you on that when indexing you. So … the majority of users are using mobile, and so is Google … it’s time you designed that way, too. 

A few things to watch out for:

The order of things in desktop may not necessarily stack in that same order on mobile. 

Depending on what type of design software you’re using, visual elements that layout left to right don’t always stack in mobile in that same order. (Meaning: If your page has two pictures side by side, sometimes the right one will show up on top in mobile instead of on the bottom… it all has to do with how it’s coded in your software. You might think the one on the left it coded to “show first” but that might not be the case.)  So, if you have sidebars or right-hand rails or call-out boxes, etc., you need to ensure they’re not going to interrupt the flow of your text or your page on mobile. Remember, each time you lay something out, just check it on mobile and then check it again.

Design for Scrolls, not screens. 

Back when we were designing for desktop, we often implemented a design concept around creating a “complete screen view” for all aspects of a page. Meaning, that as a customer viewed a page, scrolling down, we wanted to give them a cohesive experience no matter where they were on the page --- having all of the essential elements: call to action, good headlines, strong buttons, etc. This was often handled through sidebars and rails, boxes, banners, and call-outs that would populate as you scrolled down the page. We wanted each screen view to give the customer the right experience.

That kinda went out the window with mobile design. We still want the customer to have a good experience as they scroll down, but you no longer can use the visual width of the screen to pack in your calls to action. Think about ways that you can get your most important information in front of your customer as they work their way down your page. How can you break up the monotony of big stretches of text? How can you get them to click where you need them to click?

I’m a huge believer in readability and the infinite ease of black text on white. On a desktop screen, you can keep your black and white design and use spacing, boxes, rule lines, and other strategies to separate sections of your page. When it all gets stacked on top of each other in mobile, it doesn’t quite work that way.

This is where color can really be helpful. You will need to create separation between sections in mobile so that it’s easy for the viewer to focus on the various features of the page. (Even in mobile design, the eye has to rest.)

What about tablets?

Tablets are hard … they’re the mutant baby of desktop and mobile … and there are many different sizes of them, from 6 and 7-inch Kindles to 10-inch iPads and Samsungs. People hold them both vertically and horizontally (really it’s the wild west). There isn’t nearly as much tablet traffic out there as you’d think. About six or seven years ago, everyone thought tablets were going to ubiquitous, but as phones got better (and bigger) we just never saw the explosion of tablet growth.

In 2019, tablets accounted for only 5% of traffic to eCommerce web sites. So, should you design just for tablet traffic? Based on the data, my recommendation is “No.” As a small business owner, you only have so much time that you can devote to the web and if your mobile layout looks good, your tablet view will be fine.

In conclusion: MOBILE IS HERE, IT HAS BEEN FOR A WHILE … make sure your site functions at its absolute best on a mobile device

by Scott Atkinson, March 21, 2020

Resources:

Outerboxdesign.com: “Mobile eCommerce Statistics” 

Statista.com: “US Online Shopper Conversion Rate by Device”

MarketingCharts.com: Holiday 2019 Data Hub

Related Blog Posts:

Return to Music Marketing Blog home