Do You Need a Mobile Website? Development Best Practices

Background

First, let’s lay some groundwork. Although there’s certainly a lot of buzz around mobile, many businesses and organizations may feel that it’s too soon to be plunging in just yet. We’ve certainly spoken with clients and prospects who are waiting for things to settle out before they make an investment in the mobile space, but at Duo, we think the statistics are just too compelling for most businesses to wait.

Consider these numbers

• Mobile users will overtake the number of desktop Internet users within 5 yearsⁱ
• Smartphone adoption is now an avalanche. In Q4 2010, over 100 million smartphones were sold, up 87% from the same time period in 2009ⁱⁱ
• Manufacturers shipped more smartphones than personal computers in the fourth quarter of 2010, according to the Financial Times ⁱⁱⁱ
• In 2011 marketers are forecast to spend $14 billion in mobile marketing ^iv
• By 2013 it is predicted there will be more smartphone users than PC users^v

If these numbers don’t sway you, then you can always look at the metrics for your own website currently. We can almost guarantee that you’ll see a compelling trend of mobile visitors to your existing website. For many of Duo’s clients, we’re typically seeing four-fold increases of mobile visitors within just a single year.

The question for your business: are your mobile visitors getting the content and the user experience that will convert them into clients? Or are they leaving because they’re not getting what they need?

So, Where Do I Start?

If the numbers and trends do convince you that it’s time to start exploring your mobile options, people are often still stymied about what their next steps are. The very first step is to really understand what your options are.

There’s More than Just Apps!

People often assume that having a mobile presence means creating some sort of smartphone application (“app”), but that’s only one of the options out there -- and frankly, it may not be the best option for you. Mobile websites, while different from apps, are leading the early return on investment in mobile marketing solutions.

To put it simply, the difference between an app and a mobile website is that an app is an application downloaded onto a mobile device either by a manufacturer or by a user, whereas a mobile website is instantly available when accessing the Internet through a mobile device. A mobile website requires no downloading on the part of the user, and unlike most apps, all mobile websites have no additional cost to smartphone users outside of their monthly cell phone bill.

Just like Apple and Microsoft have competed in the operating system space for decades, mobile faces the same challenge with iPhone, Android, Blackberry as well as other platforms that are competing for their slice of market share in the world of mobile operating systems.

An app has to be redesigned to meet the requirements of each platform or operating system. Apps also go through lengthy processes to get approved and launched through several phone platforms and require different programming knowledge and expertise for each operating system. Mobile websites, by contrast, are available on all mobile platforms through a web browser as a single design. This makes mobile websites easier to create with lower overhead and quicker launch timelines. According to Forrester Research Analysts, the fragmentation of mobile platforms is not likely to let up^vi. Mobile websites cut through all of this red tape, are immediately viewable across all platforms, and quite frankly make a lot of sense.

Each mobile device may have slightly different naming conventions for accessing their browsers or application stores. To demonstrate on the iPhone, see image below.

Components of Mobile Websites

Mobile vs Web Browsing Habits

Understanding the behaviors of mobile web browsing is critical to understanding what your customers and prospects need when they engage with your organization through their mobile device. When sitting at a computer there is a larger screen, time to explore tabs and columns, and a more exploratory method of engaging. When using a mobile device, users are on the go and want to find key information fast without a lot of typing, searching around or scrolling. What your audience needs is for your site to anticipate what they most want to find and put it in front of their face as quickly as possible. Without this, a mobile user can quickly grow impatient with having to zoom and click through layers to find the information they seek. If the same design and layout strategy is used for your mobile presence as a traditional website there is a risk of actually losing visitors!

Here is an example of what a user would see on their mobile device if they browse to a website that’s not optimized for mobile usage. Note that the text is very small, and it’s not clear how to navigate through the site. A user needs to pinch, scroll, or double-tap just to be able to get the most basic information and figure out where to go.

Design Considerations

So what’s different? Mobile web users don’t want to browse, they want to find information and find it quickly. From the design perspective, less is more:

• Make your text readable -- don’t force your users to double-tap the phone just to ensure they can read the basics.
• One column of information rather than several fits nicely on a smartphone screen.
• Minimal clicking to get to important information is essential.
• Prioritizing how information appears should be done by determining the pages most visited on your website and placing that content at the top.
• Clear visuals that minimize clutter also help visitors find the specific pieces of information they are seeking.

This pared-down method helps enable mobile browsing behavior and ensure visitors return. Furthermore the design has a great impact on bandwidth usage and it’s important to keep in mind that a mobile device may have a slower connection than a computer.

Notice that, in the screenshot adjacent, the mobile user is offered a customized mobile experience, incorporating those best practices listed above.

Content Strategy

Mobile content strategy should follow suit with the design. Less is more because you have less time with visitors using mobile devices, as well as less screen real estate. If a few sentences get the point across, it’s best to reduce lengthy content wherever possible to create crisp minimal messaging. The best way to ensure effective brief communication is to use knowledge of what your prospects and customers most want from you and make this front and center. You can determine this by reviewing your website analytics, which is covered in our next section.

Of course a mobile website can easily link back to the main website with all the bells and whistles. Optimizing your content as it appears on a mobile screen with the option to link back to your main website gives visitors the best of both worlds.

Will a Mobile Site Benefit Me?

One of the most important questions to answer when considering a mobile strategy is “Will a mobile site benefit me?” Fortunately, this can be a very easy question to answer if you have a current website and are using Google Analytics (or a similar package) for tracking your website traffic.

What analytics of your website can tell you.

Digging into your current website analytics can provide a wealth of information to help you decide how much benefit you can receive from a mobile site as well as what that mobile site should do.

If you’re using Google Analytics on your current site, you can quickly find the overall numbers of mobile devices that are accessing your website and compare the averages of those visitors to the averages of non- mobile devices.

The variance in these averages can quickly be used in deciding how much impact a mobile version of your website might have on your site visitors.

What to look for and measure

Let’s take a look at some of the key measurements that you’ll want to review.

TOTAL NUMBER OF MOBILE DEVICE VISITORS / This measurement is the first stop in determining whether your audience is part of the mobile demographic. What we’re looking for here is current total unique visitors and the trend over the last 6 months or so. If you’re seeing an upward trend in mobile device visitors, you can be assured that it will only continue to increase and that a mobile specific version of your site will be beneficial in the long-run.

AVERAGE PAGES PER VISIT / With this measurement you’ll want to compare your mobile device average to the average from non-mobile devices. What you want to see is these numbers to be similar. If, on the other hand, the number of pages per visit on mobile devices is significantly lower than non-mobile, it could mean that your mobile visitors are becoming frustrated and leaving your site earlier than they would have had they been on a non- mobile device. This is lost traffic, and lost potential revenue -- and a clear indication that you would benefit from a mobile specific version of your site that optimizes the user experience.

AVERAGE BOUNCE RATE / This metric is very similar to pages per visit. You’ll want to compare the mobile to non-mobile. If your average bounce rate is higher on mobile devices, this can also mean that your visitors are becoming frustrated by the very first page they visit and they’re not coming back. This is definitely not what you want and a mobile specific version of the site could be a big benefit.

AVERAGE TIME ON SITE / Like average bounce rate, and average pages per visit, this statistic should be compared mobile to non-mobile and can show whether users are able to use your site as well on a mobile device as they are on a non-mobile device. If you’re seeing much shorter lengths of visits, it’s likely that your users are experiencing frustration and going away earlier than they would have on a non-mobile device. This is another instance where having a mobile specific version could help to alleviate that frustration and improve the likelihood that your visitor will become a client.

What are your options for a mobile website?

If you’ve reviewed your current site analytics and determined that you have a good bit of mobile traffic and that the mobile visitors you have may not be as happy as they could be, you’re probably ready to get started on that mobile website. The good news is that you have options available even within the mobile web space, and at least one of them is likely to fit your budget and timing requirements. Let’s discuss the options to see what fits best for you.

Some of the options you have for a mobile website are: a cross-platform design, a mobile-specific stylesheet, or a completely re-thought mobile specific website (and even this last option has additional options within it, as we’ll see in the case study below). Let’s break down what each of these options means and what are the strengths and weaknesses.

CROSS-PLATFORM DESIGN / This is a website design that works reasonably well regardless of whether the visitor is coming in on a mobile or non-mobile device. The strength of this approach is that you have a single site to build and maintain. This is also a single investment versus building a non-mobile and a mobile version. The problem is that a design that is reasonable on multiple platforms usually means that it’s not ideal on any platform. So you may end up with a mediocre site that just functions on any device. This is usually not what anyone wants. But, if budget or timing constraints require it, this can be a good option to get up and running quickly at a reasonable cost -- assuming you don’t have to completely redesign your current site, but just tweak it a little (we find that this is rarely the case).

MOBILE-SPECIFIC STYLESHEET / This is simply just a restyling of your non-mobile site to fit better on a mobile device. That means that you can re-size and reorganize some items to make them fit better on a smaller screen to be a bit more usable. The strength of this approach is that you can add this onto an existing site relatively easily and with minimal expense. It does not generally require a re-engineering of the existing site so the cost can be fairly well contained, and like the first option above, you’ll still have only a single site to maintain. The problem is that because there is no rework of the existing site, engineering the site is still not optimized for mobile consumption. The bandwidth necessary to consume the site on a mobile device is still the same as it would be on a non-mobile device even though the mobile device could be on a much slower connection to the Internet. The type and amount of content on the mobile site will still be the same as on the non-mobile site even though your mobile user is probably looking for much more specific content. Again, this is not a bad solution if your budget or timing requires that you get something out the door quickly, but it’s still not an optimal solution.

COMPLETELY RE-THOUGHT MOBILE WEBSITE / The key here is that this is a version of your website re-engineered for mobile devices. The design of this version will be specific for mobile devices and make it as easy as possible for users to navigate to your most important content as quickly as possible on the small screen. Ideally, this process would also include a re-thinking of what content should be on a mobile version of your site and how that content works on the small screen. The good news, if you already have a site running analytics, is that you can see what content is already being most accessed by mobile visitors and use that as your base. It’s important to keep in mind that the job a mobile visitor is trying to complete is not necessarily the same job that a non-mobile visitor is trying to complete. A completely re-thought mobile website will focus on the job of a mobile visitor and be the best way to relieve their frustration. As we’ll see below, it’s at least as important to think through how you’ll maintain this second site as it is to develop it.

A Mobile Web Case Study: Becker Professional Education

It would probably be most useful to put these sorts of choices within a very specific context, so we’ve outlined the decisions that one of Duo Consulting’s own clients made about how and when to move into the mobile web space.

History

For more than 50 years, Becker Professional Education^vii, a global leader in exam review and continuing education, has helped nearly half a million accounting, finance and project management professionals advance their careers and achieve success.

Becker is a leader in their industry and is always staying in the forefront of the ever-so-changing Internet and their users’ needs. Most recently, they saw a need for a mobile website. The number of visitors accessing their CPA website^viii via mobile devices nearly quadrupled from 2009 to 2010. Because of this dramatic jump they needed their website to be immediately accessible on mobile devices to make enrolling online easy.

Statistics using Urchin and Google Analytics tools showed the main pages visited on their site when mobile visitors made a purchase were pages for course descriptions and enrollment. These pages made up only 10% of their total website and they wanted to configure these key pages for mobile web browsing. At the time their site was not easy to view from a mobile device and there was no solution in place. A user would have to continually zoom in on a full site view in order to view it on a mobile device.

What Were Their Options?

Options were discussed on how to build the mobile site while gathering requirements. What is the best design approach? Implementation? Was simply creating a mobile stylesheet the answer? Should we create a completely separate mobile website, either inside or outside the existing content management system (CMS)? Could we modify the existing site in the content management system? There are pros and cons to each approach as highlighted in the table below.

Design Considerations

The cross-platform design and mobile-specific stylesheet options were both immediately dismissed. Becker wanted a unique design and experience for mobile users. Having made that decision, they were still at an implementation crossroads. Their main CPA website is full of rich content that they actively edit and maintain -- having fresh and correct content on their site drives their revenue, and that had to be a consideration for their mobile presence as well.

Implementation Considerations

The choice to build an entirely separate site would be more costly and would add more overhead to maintain. It would require a mobile design to be completed, an HTML build, and full development of a new site -- essentially, starting from scratch. This would also require more time and editorial oversight to maintain over the long run because, when using the CMS, the content editor would have to select a completely separate location to make editorial changes for the mobile site. You can see below the options for the different websites Becker maintains. If Becker were to add an entirely separate mobile site, it would mean each time there was a content update, they would need to click into BeckerCPA and make edits in that site, then click over to to the mobile site location and duplicate their efforts.

Ultimately, a recommendation was made to build the Becker mobile site within the existing BeckerCPA location on their content management system. This recommendation was based on a few factors:

• Ability to launch a mobile site within a reasonably short project timeline
• Flexibility to grow the mobile site in the future at Becker’s desired pace
• Ease of maintaining the full site and mobile site
• Cost

The mobile site design and HTML build were still needed, but savings came into play with development hours. Additionally, this approach allowed Becker to grow the mobile site at their own pace and allowed for efficient maintenance of the full site and mobile site. At the time only a few key pages were going ‘mobile’. Careful consideration had to be given to the remainder of the website and its mobile future. It was determined that although currently there were only a few pages that warranted a mobile version, it was best to build a system flexible enough to allow for growth.

Therefore, the approach that was taken was to manage and alter these pages within their existing content management system. This required building additional fields specifically for mobile content within each page of the site. Below is an example of the changes that were made. If a content editor were to click into the BeckerCPA site in the CMS, they see their typical editing fields such as this:

This was a great option for Becker as it allowed them to have condensed copy for a mobile version of a page if they wanted, but it didn’t require a lot of legwork to create and enter copy. They could update their main CPA site and their mobile site content on the same page. This created a more streamlined process for maintaining and adding copy.

This approach also allowed for a quick launch. Initially only the copy for those few key pages had the mobile fields populated. If a mobile content field for a page was not populated, it simply would display a full site version of the page on a mobile device. This method not only allowed for future growth in adding more pages to the mobile site, but it also helped getting the site launched more quickly since content can be added over time.

Additional Considerations

Other considerations with the mobile site were also given to the ecommerce portion. Because the mobile site is a sub domain (m.becker.com) of the main site (www.becker.com), this necessitated a separate SSL certificate and IP address. Ultimately, this allowed us to easily track revenue attributed to the mobile site. Becker could quickly quantify their ROI for the mobile site.

Additionally, an auto-detect was established on the web server. Just as the name suggests, this feature can detect if a user is viewing the website from a mobile device and when detected, a redirect points the user to the mobile version. Your website visitors don’t need to know the exact address of the mobile website -- the auto-detect will take them there instantly.

Testing

Before launching the site extensive testing was done on a variety of platforms. Cross browser testing was done on the iPad, iPod touch, iPhone, Android and Blackberry to make sure the content and design displayed properly on each device. During development, the iPhone 4 was released which added another browser for testing before launch. When possible, testing was done on an actual mobile device and all other testing was done via mobile simulators. We found that although the simulators were extremely helpful and usually caught all design or layout discrepancies, it was not foolproof. It is best to use the actual mobile device when possible.

Results

Becker Professional Education now has a website optimized for the mobile experience that makes it easier for current and prospective students to find what they are looking for from their mobile devices with minimal navigation.

We learned clients clearly benefit from better communication with their demographic through mobile devices and enabled greater ease in completing mobile transactions. At 10% of the cost of their original website Becker Professional Education now has a unique mobile presence.

Conclusion

As you can see there are many factors to take into consideration when thinking about building a mobile website. First decide whether you want a mobile website or an app (or you can do both!).

At Duo Consulting, our experience indicates that most businesses and organizations prefer a mobile website option, rather than an app:

A mobile website will capture the visitors that are already coming to your site -- a mobile app would require those same people to proactively seek out the app.

A mobile website can provide mobile visitors with a unique experience but still leverage your existing assets -- a mobile app would require the development and maintenance of an entirely new set of assets.

A mobile website allows you to develop and maintain a new marketing channel, but use existing technologies -- developing a mobile app requires you to explore a different set of technologies, and/or a new set of vendors.

Delve into your existing analytics history so that you and your web strategy partner can determine next steps - information architecture, design, content, and the right development approach for your site. We think you’ll find it’s well worth the effort, and that you’ll soon be converting mobile website visitors into new clients.

Endnotes

i http://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overt...

ii http://www.idc.com/about/viewpressrelease.jsp?containerId=prUS22689111&s...

iii http://www.ft.com/cms/s/2/d96e3bd8-33ca-11e0-b1ed-00144feabdc0.html#axzz...

iv http://smarketi.wordpress.com/2011/02/09/make-the-most-of-your-mobile-ma...

v http://ifonlyblog.wordpress.com/2010/01/14/gartners-mobile-predictions/

vi http://blogs.forrester.com/thomas_husson/11-01-25-2011_mobile_trends

vii http://www.becker.com/ viii http://www.becker.com/accounting/cpaexamreview/