Are you reading this on a desktop? Or on a mobile device such as your phone or laptop? Were I a betting man, I would take the safe odds that you are on a PC or laptop with a full-sized screen.
I’d probably be right, but there wouldn’t be much return on my money. According to Google Analytics for our site, just over 14% of Brandpoint.com’s traffic comes from mobile or tablet devices. That’s not surprising: In the B2B space, you are more likely to glean traffic from people who are at a desk working.
That 14% number doesn’t stray far from industry B2B norms. Still, 1 in 7 B2B visitors are coming to you on a mobile device. Is your site responsive and going to look good no matter what sized screen you are being viewed on? I for one am not willing to compromise that 1-in-7 visitor; she might in fact be my best prospect.
The numbers become even more compelling when you look at B2C. It’s a mobile world. Consumers aren’t constrained by their desks and PCs. And even if they are, such as during work hours, they’re likely to have a tablet or phone at their side to handle some of their personal business. That’s where your traffic is going to come from.
Statistics from ClickZ bear this out. On Amazon.com, over 50% of the traffic comes from mobile or tablet devices. More than 40% of all Google traffic is from mobile devices, and the number continues to grow. News sites typically see 35 to 40% of their traffic coming from mobile devices.
Clearly, in a B2C world, a rational person is not going to bet against a responsive mobile website as an essential component of their traffic.
Where does your figure fall? It’s about as easy as can be to figure that out: Just go to Google Analytics > Behavior Flow > Mobile > Overview for your site.
What does it all mean? There was a time when not having a website was bad for your business. The new standard is this: Not having a mobile-optimized website is bad for your B2B or B2C business.
So how do you do it? How do you optimize your site for mobile and make your website truly responsive? What are best practices for usability, look and feel? What tools can you use to get the job done? How can you make that site look good on everything from a 23-inch monitor to my old but beloved iPhone 4?
Here are 7 realities of making the modern mobile website. For additional tips on making your resposnicve mobile website a hardworking and good-looking piece of art, see our post How to Use Google Webmaster Tools to Monitor and Fix Your Mobile Website Issues.
Put Smart Tools to Work
It sounds scary – making a website responsive for smart phones and tablets. But as with most technological challenges, people with different skills than you and me have created tools that can make the job easy.
WordPress has at least five smart plug-ins available that can do the work for you on an existing site, or do the mobile job as you build a new site. Squarespace and Wix feature “What You See is What You Get” technology that automatically builds mobile-responsive websites that look good on any screen size.
Design the Mobile First
If you’re B2C and have the good fortune of starting out on a new website, or doing a re-design, start with your mobile site! Mobile is where the trend is going and the traffic is coming from, so why not begin there instead of backing into a mobile design?
Let the full-size screens result from what was designed and optimized for small screens. Get the visual look and flow for mobile down first.
Leave Plenty of Space around Interactive Elements
Ultimately, you want a reader to act: To click a button, to swipe to a new screen, to fill out a form. A mobile screen is awfully small. So pay special attention to isolating interactive elements and leaving plenty of breathing room around them. This makes the user experience more efficient, and it also draws attention to what you want them to do.
Reduce Image Count
It’s tempting to try and do everything you would do with a desktop site, on your mobile site. But mobile loads times are slower.
So consider the need to minimize images to reduce load time on your mobile site. Of course, with e-commerce this isn’t always possible, but do strive to reduce visual imagery to the bare necessities and simpler graphics. For example, show one model with a sweater on, and include a color key for options. Better load times equal more visitors staying with you.
Don’t Worry About a “Fold”
With mobile, don’t get wigged out about where the fold occurs. Today’s mobile user knows that screen size is minimized and that to get the full story, they will need to scroll down. More important than thinking about a fold is making sure your content is formatted with the best flow to tell your story step-by-step.
Use System Fonts
It’s important to keep things simple for mobile – for the look, of course, but also in the tools you use to build the site. Always use system fonts when designing mobile websites. Every mobile platform comes equipped with their own system fonts, and some mobile browsers can utilize CSS custom fonts. But stay away from specialty fonts that either delay load time, or won’t load at all and consequently make your site look horrible.
Keep Forms Simple
The one drawback to anyone using a mobile device is that typing in lots of information can get old fast, which loses you prospects or orders. So keep the number of input fields on any form to the base minimum you need.
To that end, use dropdowns and checkboxes whenever possible to save users a lot of keystrokes. Evaluate what information you really need to process the request or order, then stick to that.
Users are on their mobile or tablet for a reason – they’re on the move, in a hurry or maybe trying to relax a little. No matter the situation, they’re not interested in working overly hard. And if it is hard to get something done, they will go elsewhere.
If you want their business, you’ve got to keep the experience flowing fast and happening now. And that’s what the ever-growing mobile world is all about.
