Last year, over 50% of all local searches were conducted on a smart phone. This statistic seems perfectly logical since users often search while on the go. Whether it is finding a new restaurant to try or comparing prices on carpet, people are constantly using their mobile phones while in transit.
However, don’t be fooled into thinking that all mobile users are on the move. Smashing Magazine reports that 86% of mobile Internet users are actually using their devices while watching television. What does this mean for the average small business owner? Simply, you could potentially be missing out on a huge piece of the pie by not adapting your site for mobile devices and tablets. What does this mean for the average web designer? That you will most likely be delving into the world of mobile design, if you haven’t done so already. In this article, I will discuss how both overwhelmed business owners and CSS-loving designers can achieve their mobile goals, no matter what the budget may be.
A Custom Mobile Version of Your Website
One of the earliest voyages into the deep sea that is the mobile web consisted of creating a “mobile version” of your website. This technique uses device detection to redirect users on mobile devices and tablets to a separate, dedicated mobile website.
A major advantage of a separate mobile site is that it allows a designer to tailor the user’s mobile experience. For example, if you own a business and notice that most of your mobile users are going to 3 specific pages on the current site, it is logical to make the information on these pages more prominent and easier to get to. However, this can be tricky. Don’t assume that just because users visit those pages most often that they don’t want to see other information throughout the site. If a user cannot easily navigate to what they’re looking for, you will most likely lose them. To efficiently design a mobile version of your site, you need to carefully analyze where your users visit, what they click on and implement logical solutions on the mobile site. A good way to avoid this frustration is to give your users an option. Add a simple, “View Full Site” link within your mobile site that allows users to move to the full site if they choose.
Another consideration for mobile sites is URL management. Since you have one mobile version and one desktop version on separate URLs, device detection will route users to the correct site depending on their device. However, some designers fail to dig deep enough into the linking structure of the site. The result: mobile users stumble upon pages from the desktop site and desktop users mistakenly are lead to pages from the mobile site. The solution here is to carefully plan how these pages will link and triple-check for errors along the way.
One downfall to a custom mobile site is that it can get very pricey. Design is more than just slapping something visually appealing together. In fact, the bulk of a designer’s job is not actually designing, but research and problem solving. In order to properly create a custom mobile site, you will most likely need to hire a professional.
Responsive Web Design
The concept of responsive design was first introduced by Ethan Marcotte in his article “Responsive Web Design” in A List Apart. The basic idea is to design a website that “responds” to its surroundings. Rather than creating two separate versions of your website – one mobile and one desktop –, you have one version that conforms to the size of whatever device it is being viewed on.
This will most likely be the most expensive option. It is a relatively new technique; so many designers who have not yet adapted to this method may not be up for the challenge. In addition, responsive design would not only affect your mobile site, but your current desktop version. This could bring you into a complete redesign/rebuild. In the off chance a redesign is not necessary, the current site will still need code tweaks to adjust the design for different size screens.
A large portion of the web design and development community claim that with the rise of internet usage on mobile phones and tablets, and the ever-changing sizes of these devices, responsive design is the wave of the future. Although I cannot predict what tomorrow will bring, I can definitely see the point being made here. As mobile Internet usage becomes more prevalent, designers will need to be more flexible in their plans in order to give their clients the best product, and the users the best experience.
If a custom design, be it dedicated mobile version or responsive, is out of your price range- fear not! WordPress stays true to its mission statement by providing affordability and user-friendliness in mobile as well as desktop design. If you already have a site on the WordPress platform, you are most likely familiar with its use of themes and plugins. I’d specifically like to highlight WPtouch in this article, since it is so efficient. Essentially, WPtouch allows you to create a mobile site with hardly any coding knowledge. You simply download, install and activate the plugin.
While you truly can’t beat the ease of use of this plugin, I do need to mention a few of its major drawbacks. First, it is essentially a template. If you are looking for a site that follows your branding guidelines and reinforces your company’s core values, this isn’t it. Another issue is the lack of customization for user experience. Personally, I don’t believe mobile web design is a one-size-fits all kind of deal. There are different solutions for different problems for different companies. What is right for one may not be right for the other.
GoMo was originally launched by Google in November 2011 as an initiative to assist small business owners in increasing their mobile presence. GoMo allows business owners to create their own mobile website in just a few clicks. You simply type in your current web address and you are on your way.
After entering your address, GoMo takes you through the process of selecting a templated theme, editing options, and finally the opportunity to instantly make your newly created mobile site live. In addition, Google is boasting 1 year of premium service free of charge. This service includes professional templates, hosting, and unlimited email and phone support. Because of GoMo’s technical support and price break, it will most likely be your best bet if your budget will not allow for a professional designer.
However, as with all things, there are drawbacks too. While GoMo does allow you some editing options, they are nothing compared to a customized design. In addition, if your desktop site was poorly coded, or isn’t up to par with today’s Web standards, you could be in trouble. For example, if your phone number is an image in the header of your site, GoMo does not automatically convert it to a click-to-call button. You can add this type of information later on the process, but the point here is to be careful in how you edit the template.
Once you have dropped your desired elements onto the mock canvas, you can customize the links with options that appear to the right.
In addition to these options, jQuery has paired this tool with ThemeRoller for jQuery Mobile.
ThemeRoller uses the same drag and drop concept as jQuery Mobile, and allows the designer to customize nearly every aspect of the mobile site. If the colors in the predetermined palette don’t fit your needs, you can manually type hexadecimal codes into the options panel on the left to further customize your theme. ThemeRoller supports anywhere from 1-26 themes, though I recommend no more than three themes, as too many colors can become confusing to the user.
Once you have created your themes, simply assign them to your newly created mobile site and download all the code. From here you can tweak the code as necessary, apply the correct device detection, and launch.
Although I found jQuery Mobile and ThemeRoller fairly user friendly, I do have one warning to anyone who is considering using this tool. These Web-based tools do NOT save any changes you make. This means you cannot refresh your browser (intentionally or accidentally) while creating with jQuery Mobile or ThemeRoller. If you close your window, your changes will be lost. I recommend that, just as you do when working in Photoshop, Word, Coda, or any other program, you save periodically. While jQuery Mobile and ThemeRoller don’t currently have a “save” option, you can download your template and themes, save them for safekeeping and re-import them should something go awry.
The Bottom Line
With free tools like the ones I have mentioned in this article, business owners and designers can work together to create an efficient mobile user experience. Most businesses can benefit from a strong mobile site, and budget is simply no longer an excuse. Users are using their mobile devices more frequently and smart business owners are sure to follow where their clients (and more importantly- their money) are going.