by Nate Teplow
The mobile web gives people a whole new channel to connect with your company, and establishing a mobile presence has become increasingly important for businesses across all industries. As a marketer, you’ve spent the time and effort to ensure that your desktop website is targeted, branded, and provides the best user experience, and the same should be done for your mobile website.
When it comes to creating a mobile optimized website, that’s easy…right? With transcoders, screen scrapers, and templates, you can have yourself a mobile site in minutes, or even seconds. But is this really a mobile-optimized website, or just something that fits on the screen of a smartphone? To help you navigate the vast array of choices out there, we’ve outlined 5 areas that you must consider in order to create a truly mobile-optimized experience:
Navigation on mobile is one of the toughest things to get right. The two most common mistakes when it comes to mobile navigation are:
- Not rethinking your navigation structure for mobile
- Relying on shallow, single-tiered navigation
Many people just use the full sitemap from their desktop website for their mobile site in order to ensure that everything gets included. However, you need to remember your mobile user is different from your desktop user, and therefore, should have a navigation system tailored to their needs and behaviors. People who are on their phones need to quickly reference information, and your navigation structure should give them the ability to do just that. A great place to start when creating mobile website navigation is to take a cue from many native applications. Native apps usually feature:
- Big, thumb-friendly buttons
- Intuitive structure and hierarchy
- Nested navigation to allow for full home-page design
2. Content and Images
Optimizing your content for mobile goes hand-in-hand with navigation, and needs to be thoroughly reconsidered when creating a mobile website. This is where most transcoded and responsive solutions fall short, because they simply pull 100% of the desktop content to use on the mobile site–word for word, image for image.
In order to meet your on-the-go visitors’ needs and provide a tailored mobile experience, it is imperative that you rethink your content for the mobile user, not simply copy it directly from your desktop site. Boiling down long-form content will keep pages shorter, so your user isn’t scrolling through paragraph after paragraph of text. This will allow them to access the information they need while on the go in a quick and easy-to-use fashion.
Of course, you’re not going to want to do double duty optimizing frequently updated content (upcoming events, blog posts, recent news, etc.) so feeds are useful when it comes to dynamic content. However, any sort of static content you’d like to use (team bios, contact info, general company information) should be edited or reorganized to best suit the needs of the mobile user. A good place to start is to determine what pages are most viewed by your mobile users in order to prioritize content on your mobile website. If you need help with this, check out our Mobile Dashboard to learn more about your mobile users.
Another downfall to pulling all of the content directly from your desktop site is that your images will be automatically pulled in as well, and almost certainly will not be optimized for mobile. Using mobile-optimized images will ensure that they load and render correctly to fit on the screen of a smartphone and won’t cover up any links and/or text. To do this, use smaller-sized images and think about how many pixels wide and tall the image should be in order to render correctly on various mobile devices. Using smaller images will also help cut down on your page load times, however, we’ll get into this a little later. For more tips on how to optimize your images for mobile, check out our blog post on Responding to Retina.
Don’t forget, most mobile sites include a link to your full website, usually in the footer. This means your curious visitors can get what they need no matter how they connect.
3. Calls To Action (CTAs)
As we’ve mentioned before, your mobile users are likely on-the-go and looking for quick reference information, not doing extensive research. They are also fortunate to have different functionality at their fingertips, such as calling, texting, and GPS-assisted navigation that a desktop experience cannot provide. Creating and rethinking your calls to action for the mobile user is one of the most important steps to delivering a truly optimized experience. The result? Your mobile website will serve the needs of your target audience and, perhaps more importantly, become a finely-tuned lead generation tool.
For example, if downloading a 10-plus page white paper is the main CTA on your desktop site, chances are that a smartphone user is not likely to be interested. Perhaps the more action-oriented “Sign up for Our Newsletter” or “Like Us on Facebook” are better CTAs to someone who’s on-the-go and doesn’t have time to download and read a white paper. If applicable to your business, you should also consider including smartphone-specific calls to action, such as “Call Now” or “Get Directions.” These CTAs will connect with the native phone or map applications, and can dial directly or give directions based on current location. These features are highly useful, easy to implement, and smartphone-specific, leading to a better and more-targeted user experience.
Forms are a great tool for capturing leads and customer information, and, if applicable, should definitely be included on a mobile site. However, it isn’t always wise to use the same exact form(s) as your desktop site.
Smartphone users are much less likely to fill out forms with many fields. Frankly, it can be quite laborious, as you may be well aware. Limiting the number of fields will encourage more users to fill out your mobile forms, which is the ultimate goal. Also, shorter forms leave less room for data entry errors, which are common when typing with fingers on a small touch screen. While longer forms might help build a more robust database (and won’t cause quite as many issues on a desktop website), when it comes to users on mobile devices, they’ll simply skip the form entirely if it appears too long. We recommend having no more than 5-6 fields, unless you are absolutely required to include more.
Remember, your sales team can supplement the information you have on your new prospects when they follow up. You often have more than one chance to ask these profile-related, qualifying questions.
5. Load Times and Other Considerations
Load times are crucial when it comes to mobile. In fact, a study done by Keynote Competitive Research found that 67% of people expect a mobile site to load in under 4 seconds. Smartphones have much slower download speeds than desktop computers as is, and these devices are frequently connecting via 3G or slower, as opposed to Wifi. Therefore, it’s incredibly important to ensure that your site will be delivered and load quickly. Using smaller images (or swapping images out for HTML and CSS), boiling down your content, and reducing the number of site pages are all ways to help improve load times. You must also consider how the mobile site is hosted, and if that network is accessible, reliable, and fast.
One last item to make note of, which you should hopefully be aware of at this point, is that Flash should never be used when it comes to mobile. Flash is not supported on some mobile devices (most notably iOS), and the user won’t just have a bad experience, there flat-out won’t be an experience!
A Recap for the Road
When it comes to the mobile web, there are many methods to quickly get up and running with a mobile site. But just because your site fits on the screen of a smartphone does not mean it is a mobile-optimized website. In order to create a truly optimal experience for your mobile users, it’s important to rethink your site’s structure, content, and overall goals, and fully take into consideration what factors will affect the overall mobile experience for your users.
What kinds of features or considerations have you seen and/or experienced that help provide a better mobile web experience?