I’m going to assume that your business has a website, but is your site and every landing page or marketing campaign you launch created with a mobile-first mindset? Is it fully optimized for mobile viewers who want dialed-down graphics, easily honed-in content, and quick-click functionality on their varying-sized smartphones and tablets? If you’re not there yet, let’s talk about why mobile first in everything you do, especially your business website, is critical and key in on five specific tips that will help ensure your website is delivering the best possible results—for you and your customers.
Why Mobile Responsive?
There are two ways to look at a mobile responsive website: From a development perspective and from a design perspective. The two are related and often combined, but I’m going to separate them for the purpose of this discussion—you’ll see why in a minute.
Development Perspective. Web developers often utilize grid layouts as they’re building sites. In fixed grids, display dimensions are pixel-based—that means proportions could be skewed, or excessive scrolling necessary, depending on what mobile viewing device is being used. Responsive sites operate on percentage-based fluid grids, meaning the coding calls for the layout or content to respond automatically to the screen size of the device in your hand. It’s great for online publishers because it can nix the need for numerous versions of the same site. It also helps decrease maintenance issues, and leaves mobile browsers more satisfied with their time on your page.
Design Perspective. From a design perspective, the needs of a mobile user are different than those of someone browsing on a desktop. Mobile users are in the moment, and you have limited space (and time) to give them what they need: A clearly defined call to action, hard-hitting content, and well thought-out graphic elements. (Oh, and don’t forget the white space. Never forget the white space!) Mobile users want what they want when they want it (and that’s never more true when someone is searching on a device) and they want success without having to work too hard—that’s mobile responsive design in a nutshell.
Tips for Mobile Responsive Success
Below are five design tips to help you create a great mobile responsive site:
- Be selective when choosing page elements for the top of your mobile site. If the banner, header, or key image at the top of your desktop site is large, be sure and scale it back for your mobile viewers. If you forget this step, you could push your content, calls to action, or other key items below the fold. Remember—out of site, out of mind. Keep your best elements visible from the get-go.
- Keep it clean. A great mobile site favors utility over graphics—unless, of course, the graphic elements add to that utility (think colorful navigation buttons). You want your page to be memorable, yes, but it’s hard to get the full effect of a graphics-heavy page on a small screen, especially when you factor in all that scrolling. It’s also important to keep in mind that too many graphics can mean uber-long load times—and nobody has time, or the patience, for that. The key is to keep your design clean, digestible, and easy to use on the fly.
- Consider rollup navigation. Do you know that little icon at the top of many well-done mobile sites, usually near the top left of your smartphone or tablet? It’s called rollup navigation, or a dropdown menu—and it’s definitely something you should consider using. These handy little buttons provide a starting point for your mobile viewers and allow them to go exactly where they want without having to search. It’s like a little teleporter: About page? Product page? Search function? Teleport them to their destination with as few clicks as possible.
- Maintain your brand identity on every screen. We’ve been talking about what to change when going from a desktop to a mobile display of your site. What about things to keep the same? Always maintain the brand identity of your business, regardless of screen size or output media. Consider how the final design flows on a big-picture level—does it help further your business objectives? Does it feel cohesive? Viewers might be on a different version of your site, but they still want it to feel like yours. You can achieve that seamlessness with consistent branding.
- Focus on calls to action. Is the goal of your site to get more people to opt-in? Do you want them to make a purchase, download an asset, register for an event, or make a reservation? Whatever the focus of your company, give the mobile browser the chance to take action at every opportunity. Mobile viewers aren’t known for spending a ton of time browsing sites on mobile—that’s the point, right? To get what you need conveniently and quickly, literally from the palm of your hand? Abundant calls to action can help. Also, adding click to call functionality to your site can make a mobile searcher’s dreams come true.
Here’s the deal—thinking mobile first isn’t an option when it comes to your business, it’s table stakes. Consider this: The Nielsen Norman Group reports that the average mobile session duration is 72 seconds. With such a limited window to connect with your customers, you can’t afford to give them a clunky, non-optimized experience. You could have the best product or content in the world—you could have exactly the product they are looking for—but many mobile viewers won’t make it past the first non-optimized screen. Can your business afford to lose those potential customers?
Additional Resources on this Topic: