Each year, the number of people who view and search websites on a mobile device increases. This is a trend that can’t be ignored. Your website needs to be responsive and look good on a mobile device, or else you’re losing an audience that is trying to connect with you while they’re on the go.
Think about how you market your business. Facebook Ads, Facebook groups, Twitter?
Those are sites that are meant for mobile viewing and scrolling. If someone clicks on a link to your site, and they can’t understand what’s going on, or can’t see the content because a pop-up blocks everything, they’re leaving. ASAP. And they’ll keep scrolling on through their feeds and click through to other sites that are built for mobile.
Bye bye, potential client and paycheck!
All of this means that rather than building a site on a desktop and hoping for the best with mobile, it’s time to incorporate a site’s look on a mobile device into your site strategy. As you map out your strategy for capturing people on le mobiles, let’s take a look at what you should be considering.
Here are 4 things that will have people leaving your site on a mobile device:
If the color is too bright or light, or it’s too cursive-y, it will not look good on a mobile device. This is true for any screen size, really, but particularly on mobile. And if people can’t read what you’re saying, they’re definitely not going to stick around OR buy your product. Choose a modern, easy-to-read font in a dark grey to black color. Make sure the font is a decent size and line height for quick skimming capability.
Horizontal opt-ins are huge right now. They’re also huge on a mobile screen if not sized correctly. (see what I did, there?) If your opt-in is at the top of your site near the header, people constantly have to scroll on each page on their phone to see your content. Some alternatives for the opt-in would be to make it a menu item (that links to a page with the embedded form), or move the opt-in to the bottom of your site once the screen is a specific size (say less than 600px wide).
If you have a pop-up, you need to test this on a mobile device. Have you ever visited a site where the pop-up hovered over the text, and there was no way to get rid of it? And once you left that site, did you bother visiting again on your phone? Nope. Don’t let your site be the victim of Annoying Mobile Popup-itis. (PS I know PopupAlly Pro works well with mobile devices)
Images with text in them.
Sometimes it’s easier to use an image with text on a page than it is to use actual text, because you want the font to look a certain way, or you want the text to overlay on an image. And that’s totally fine! But double-check what that image looks like on a smaller screen. The image should resize to fit the screen (if it’s coded correctly), so the text will be smaller, and possibly harder to read. For this reason, I attempt to use text as much as possible, rather than images.
There you have it. 4 key things to consider for your site on mobile. Wondering how your site looks? Head on over to this responsive tester to get a peek.
Don’t like what you see on a mobile device?
My Smart + Responsive package is exactly what you need. I can make your site mobile-friendly aka customer-friendly (aka profitable). Fill out my Tech Support form to get started.
CSS for Web Designers
Learn more about my upcoming CSS for Web Designers course, and get useful tools + tutorials to make you a better web designer.