Just a few years ago, it was possible for businesses to get away without offering a mobile-friendly website version to viewers on-the-go. While it was considered a nice perk, few businesses were willing to invest in mobile communications, and most consumers were understanding of the challenges businesses faced supporting multiple site formats across different platforms.
But my, my – how the times have changed!
Today, mobile-friendly website versions aren’t just a nice feature – they’re a by-default necessity for doing business in an increasingly mobile world. According to research conducted by Limelight Networks in 2011, as many as 80% of customers will abandon a mobile site in response to a bad user experience. And given that more sales than ever are occurring from mobile devices, these lost visitors could translate to real dollars lost – all because you don’t have a mobile-friendly website version in place!
Now, before we jump into how to set up mobile website versions, I need to clarify one point… There are several different ways that mobile users can access your business’s information, including visiting your full website via mobile browser, reaching a mobile-ready version of your site via browser or downloading a specific app your company has developed.
For the purposes of this article, I’m going to be focusing on the second option in this list – mobile-ready website versions. Although business-specific apps are a nice touch, not all of your website visitors will go out of their way to download these programs. They will, however, attempt to look up your site via mobile browser – and given the number of resources online, there’s no reason these visitors should be reaching your full website and not a mobile-optimized experience!
The following tips revolve around creating this mobile website version and include both the general user experience guidelines you’ll want to follow and a few tools that will help you to expedite the process. I hope you find them useful when it comes to building your own mobile-ready website experience!
SECTION ONE: Creating an ideal mobile experience
Building a mobile-friendly website version doesn’t have to be complicated. As you’ll see in the next section, there are plenty of different programs out there that can help you put together a mobile website with just a few clicks of your mouse.
However, while these programs can be incredibly useful when it comes to optimizing your website’s mobile experience, it’s important to have an idea of how your mobile site should look before you begin developing it. Putting in this effort ahead of time makes it much more likely that both you and your customers will be pleased with the final version you’re able to create.
Tip #1 – Prioritize customer-centric content
One of the first mistakes website owners tend to make when building mobile versions of their sites is to assume that every single piece of information that can be found on their full sites needs to be included in the mobile environment. The result – as you might expect – is cluttered mobile website versions that are just as frustrating to navigate on a mobile device as their full counterparts!
To minimize this irritation, focus on providing only the types of information your website visitors need to take action or make a decision. As an example, check out the beautifully-designed Domino’s Pizza mobile website:
Instead of wasting valuable mobile real estate on information customers don’t need, the company gets right to the point – leading visitors directly to the actions that are likely to interest them most.
Tip #2 – Avoid popups
I don’t know about you, but nothing makes me more likely to close down a website on my mobile browser than an errant popup image. Although these graphics can be useful on traditional websites in terms of capturing new subscribers and driving conversions, they’re an absolute nightmare in a mobile environment.
As you’re developing your mobile website version, make sure all popups are turned off. Heck, even if – after reading this article – you decide not to take advantage of all the benefits mobile website versions have to offer, consider turning off popups on your main site (or using a tool that deploys them on traditional browsers only) in order to avoid irritating your mobile visitors.
Tip #3 – Avoid Flash animation
The same concerns that make popup banners a bad idea on mobile sites apply to Flash animation as well. Because they have the potential to completely disrupt the user experience on mobile devices, it’s best to utilize mobile website versions that eschew Flash animations completely. At the same time, if you elect to not deploy a mobile-friendly site, look into options that will allow you to serve up different, text-based content for visitors using mobile browsers.
Tip #4 – Include sufficient whitespace
Even if you’re careful to cultivate only the most relevant pieces of information to display in your mobile website version, the temptation still exists for most webmasters to “over design” their mobile sites by cramming in as many design elements as possible.
The problem with this? Keep in mind that mobile device screens are really quite small, and that adding in too many unnecessary elements can result in confusion or frustration for users who aren’t quickly able to access the information they’re looking for. As a good rule of thumb, build your mobile site version and then eliminate at least 1-2 design elements from your chosen structure to ensure an appropriate amount of white space.
Tip #5 – Use consistent branding across traditional and mobile sites
Although mobile-friendly website templates are available in a wide variety of styles and colors, this isn’t the time to unleash your inner Picasso!
In nearly all cases, it’s a much better idea to mimic the visual branding elements used on your traditional website in your new mobile environment. Doing so will create a more consistent experience for previous customers and build trust between users who are new to your brand.
Tip #6 – Make usability a priority
No matter what mobile website solution you choose, pay special attention to how easily users can access and interact with your site. Specifically, keep an eye on:
- Does your text display fully on your screen, or will users need to scroll across your pages to view all of your content?
- Are all links and buttons large enough to be clicked on by the clumsy thumbs of some mobile users?
- Is your phone number and location data immediately visible to mobile users?
Another way to determine whether or not your mobile website version is accessible and usable for your site visitors is to simply ask them! Solicit feedback on how well the new site is performing for your readers, and use the information they provide to make your site even more effective.
Tip #7 – Test your mobile site
When it comes to developing website versions for mobile users, be aware that there are more than 500 different screen variations (in terms of size, aspect ratio and resolution) that are available across different mobile devices and platforms. As a result, it’s important to ensure that your site doesn’t just look good on one smartphone – it needs to render correctly on as many of these devices as possible!
To test how your website looks on different mobile devices, try any of the following mobile website testing tools:
Tip #8 – Allow mobile users to access your full site
No matter how carefully you customize the content on your mobile website version; there will still be users who want to access the features and information found on your full site.
For this reason, it’s important to include a link back to your full site somewhere on your mobile-friendly site version. Typically, this is done near the bottom of the screen, though your unique design template will dictate the most convenient, usable place for this information.
Tip #9 – Be aware of mobile tracking concerns
One final consideration that you must be aware of when it comes to mobile website version creation is that nearly two-thirds of mobile browsers prohibit the use of third-party cookie tracking – effectively killing most traditional analytics programs.
The only solution to this issue is to invest in a first-party tracking system that allows you to serve up the necessary cookies in a different way. Although adding a paid tracking tool to your mobile arsenal does represent an investment into your site’s mobile experience, you’ll likely find the data provided by these services to be well worth the cost.
SECTION TWO: Mobile Website Version Creation Tools
Now that you know what a good mobile-friendly website version should look like, check out any of the following tools to help make your vision a reality:
Tip #10 – Check out Google GoMo
Google’s “GoMo” program is a mobile website version development tool that came about following the search giant’s acquisition of popular mobile site-building system, DudaMobile. In its current incarnation, the program offers a “Mobile Readiness” quiz that tests your site’s existing mobile integrations, as well as a four-step system that will automatically create a Google-hosted mobile-friendly site version based on your existing website.
Currently, GoMo is offering new customers one year of free service, after which the program charges $9/month to host your mobile website version. Check it out if you run a relatively simple website and want a hands-off approach to building a mobile environment for your site.
Tip #11 – Use WP Touch on WordPress sites
If your current website runs on the WordPress platform, you’ll want to take a look at the WP Touch plugin. Not only is tool free to use, it automatically creates a mobile-optimized version that can be customized to suit your color scheme and other branding elements.
Though the theme styles provided by this tool can be quite basic, they may be more than sufficient to transform your traditional website into a mobile-ready environment. It’s a great option for blog style sites, as well as for simple “5-page” style websites operating on WordPress.
Tip #12 – Test drive the Mobify mobile site creation tool
Depending on the complexity of your website, the simple templates served up by GoMo and WP Touch may suffice for your mobile site version needs.
On the other hand, if you operate a more involved, more complex site, Mobify’s full-service mobile development team may be a better solution for you. Through Mobify, there are no templates and no default designs. Instead, when you contract with Mobify, the company’s team assesses your existing website and builds a custom mobile platform that will enable your customers to efficiently navigate your site while on-the-go.
To learn more about this service (which is used by brands like Starbucks, Threadless and Wired Magazine) or to sign up for a free trial, visit Mobify.com.
Tip #13 – Build a mobile site with MobiSiteGalore
So you don’t want a plain template site, but you don’t need a custom-designed mobile platform? In that case, check out MobiSiteGalore, which represents a nice middle ground between these two alternatives.
MobiSiteGalore offers an extensive design gallery which provides stock templates that’ll get your site up and running in about 15 minutes. The pricing for this option is quite reasonable and ranges from $49/year for a 3-page pack to $225/year for unlimited pages.
However, if – after experimenting with the service’s pre-designed templates – you find that you aren’t able to come up with a suitable mobile website version on your own, you can also contract with the company’s professional designers. Though you will incur extra charges for doing so, the MobiSiteGalore team can help tweak the template you’ve chosen to your specifications or custom design a completely unique site for your needs.
Tip #14 – Try Mofuse for your mobile design needs
One final option to consider when it comes to mobile site design tools is Mofuse. In many ways, Mofuse is similar to MobiSiteGalore, in that it offers both template designs and custom development solutions to suit your individual needs as a mobile site owner.
However, where Mofuse shines is in the number of features that are available to the company’s users. Mofuse sites include customized mobile SEO options, custom URLs, in-site analytics and Google tools integrations that are all designed to make operating a mobile website version as profitable as possible. Of course, as a result, the service costs more than MobiSiteGalore, though the additional customization options provided by Mofuse may eventually result in a higher ROI as far as buyers and subscribers are concerned.
Have you created a mobile-friendly version of your website yet? If so, did you use any of the tools listed above and can you share any recommendations for business owners that are just now approaching the process?
Leave your thoughts in the comments section below!
Image: The Hamster Factor