6 Keys to Being Mobile-Friendly

If there was any doubt whether this “mobile web” thing was going to catch on, you can go ahead and abandon that now, or more accurately, over a year ago. This August 2014 report from comScore highlights the fact that mobile was accounting for a staggering 60 percent of media consumption at that time. If that doesn’t paint the picture plainly enough, I’m not sure what would. The facts are clear: people love their mobile devices and love consuming media on the go just as much.

“So what?,” you may be tempted to ask, but don’t buy into the denial. If your website’s content isn’t displayed in a mobile-friendly way, you’re definitely losing time on page, clicks and interactions at an increasing rate every day. “Ok, so what do I do about it?,” might be the next logical question. Thankfully, that is a question with a pretty clear set of answers; let me explain:

6 Ways to Ensure a Responsive Design

1. Responsiveness

This refers to a method of programming that allows your website to be displayed on desktops, laptops, tablets and smartphones without sacrificing your content or overall experience. Responsive design is accomplished by programming “breakpoints” into the code of the page that adjust the size and placement of elements based on the size of the viewport or screen size. This means your site’s visitors will see a familiar, but optimized, experience no matter what screen they happen to interact with your content on.

2. Larger Font Size

Keys To Being Mobile-Friendly

It seems like a simple thing, but increasing your site’s font size is a very helpful step in making your visitor’s experience a good one, especially on smaller screens. And since our desktop and laptop screens are larger than ever, there tends to be plenty of space for the larger font in these experiences, as well. A good rule to work by is that you never want a visitor to have to zoom in to read your text.

3. Larger Buttons

Keys To Being Mobile-Friendly

In the same vein as the increased font size, larger buttons are a no-brainer for making your site easier to navigate and interact with on mobile devices. And since there are a ton of people coming to your site on their phone or tablet, you might as well make those buttons “finger-friendly,” which means larger and reactive. Mice used with desktops and laptops are very precise, so smaller buttons or links in the text are not difficult to hit on those devices. Not the same when it comes to our fingers or thumbs, which are not only much larger but often obscure from sight what we’re trying to touch just before making impact. This can be a seriously frustrating endeavor when you really need to click that “next day shipping” option on your new pair of boots. Turn those links into buttons and make those buttons bigger!

4. Icons vs. Words

Keys To Being Mobile-Friendly

Words are great. There’s so much that can be conveyed with them, but the old saying holds true today and forever: “A picture is worth a thousand words.” When you have the opportunity to place an image or icon on your site to help users quickly identify where they want to go, do it! And make the icon or image itself a link - we’re naturally drawn to touch them, so it’s silly to fight it. Give your users a visual experience and it will show up in the click-through rate and interaction.

5. Smaller Images

Keys To Being Mobile-Friendly

“You want me to make my images smaller? You’ve just told me to make my font and buttons bigger. What gives?” That’s an entirely natural response, but one based on a misunderstanding. I’m not saying to make images smaller in dimension, but smaller in weight or volume. In other words, convert that 4-megabyte file into a 200-kilobyte file (which can be accomplished with design software, like Photoshop). Your users’ data plan will thank you. And not only that, but the time it takes to load and download pages on your site will shrink drastically, which is not only a good experience for users but a known factor in your organic SEO rating with the likes of Google and Bing, the world’s foremost search engines. When it comes to image dimensions, you should make your site full of large, beautiful and lightweight imagery. Having a site with good imagery is also a known factor in keeping people on your pages and creating a pleasant and positive experience for the user.

6. Forms - Simplify!

Keys To Being Mobile-Friendly

Forms are everywhere on the web. From the newsletter sign-up, to the shopping cart, to the online food order you just placed - without them, we’d have a hard time collecting and using information from our consumers. But they can be a total nightmare to use on mobile, especially smartphones. Thankfully, it’s not too hard to change that poor experience into a breeze. The same rules from above apply here. Make those fields and buttons larger and keep forms short and simple, where possible. This will lead to more submissions and lower bounce rate from pages with forms.

Now that you know what it takes to be mobile-friendly, it’s down to just doing it! That’s where we encourage you to reach out to Blue Compass. We’re experts in making a new website a delight to use on any device, and we can even turn your older site into a pleasant experience on modern mobile devices. Contact our web design and development team at Blue Compass to get on the path to capturing the typhoon of mobile traffic you might be missing.

Blue Compass logo
Blue Compass

Blue Compass is a leading team of digital experts helping brands succeed online through web design, development and digital marketing.