In 2011, mobile access to the web doubled to over 8%. In many of these cases, the site visited from a mobile device is the exact same site displayed on a laptop or desktop computer. Just because it can be seen, however, doesn’t mean it can be used. Most full sites viewed on a mobile device require you to pinch, flick, double-tap, or drag in order to access their content. You need both hands for these gestures: one to hold the device and the other to perform the action. A mobile-friendly site, however, eliminates this barrier and makes accessing essential information as simple as a single touch with one hand.
By displaying only essential information such as hours of operation; directions and location; contact information; service offerings; deals and promotions; and basic “about” information, mobile-friendly versions make it easy to identify critical information without the need to navigate a full site. Trimming down information from a full site for a mobile device and making it “touchable” rather than “pinchable” is one of the most significant advantages of a mobile-friendly site.
Awareness of these differences is important when considering the development of a mobile-friendly version. Jumping in headfirst, however, is not advisable. There are guidelines and considerations for going mobile-friendly. A substantial increase in capabilities is not necessary to create a custom, friendly version if your site traffic is minimal. More specifically, we at Sharp Hue use the metric that if 20% of a site’s traffic (as reported by Google Analytics) is mobile, then it’s probably time to put the design of a mobile-friendly site on the to-do list.
WordPress is one platform that simplifies the process for displaying a full site on a mobile device. Plugins such as the WordPress Mobile Pack, for example, will automatically rescale a site’s images, split articles into multiple pages, simplify styles and remove non-supported media. Plugins such as this enable these capabilities quickly. However, they are usually not customized or visually appealing. They don’t necessarily use the color palette from your full site and they don’t necessarily display the logo you’ve invested so many resources in creating. Further, plugins like this don’t necessarily make the mobile version of your site easier to use.
In addition to these pre-packaged plugins that can do most of the heavy-lifting, there are also mobile frameworks available, like jQuery mobile, that allow for custom, rapid development without the extensive resources necessary to build a full-fledged mobile application. Frameworks such as this make it easy to maintain a site’s color palette and logo. They also make it very easy to manage content from within the Dashboard if WordPress is used as the site’s platform. Using this technique allows changes to be made to two different sites with only one edit. This sounds elementary, but managing mobile content is a development consideration many people disregard. Developing mobile-friendly sites should always include thoughts about maintaining the mobile version in the long run.
Another consideration in developing a mobile-friendly site is redirection; i.e., how a site’s visitors will navigate to it. Generally speaking, when a URL is typed into a mobile browser’s address bar, a request for information is sent out. A browser can recognize that the request is coming from a mobile device and, in those cases, sends back a specified message. The message can be a command to redirect to another site like an “m.domainname.com” site, for example. The message can also be a serving of different content or even a stylesheet change.
Plugins can take care of this return “message” for you as well. We’ve found that Mobile ESP for WordPress is best suited for our needs. Many times, plugins like this are sufficient to do the job. It all depends on the needs of your mobile version. Sometimes you just need something that isn’t worth a developer/designer’s time to miniaturize a full website. Other times, a smaller, limited version of a site is needed, especially if the site owner wants to maintain their color palette and display their logo. In still other cases, the theme being used isn’t compatible with any of the available mobile plugins. In the case of WordCamp Fayetteville, which is yet another example, the full site is built on a multi-site platform administered by super-admins who work for WordCamp Central. Plugin compatibility isn’t an issue. It’s not even an option. The theme and administrative privileges of WordCamp sites don’t allow for the installation of plugins. It’s in cases like these that it’s time to create a custom, mobile-friendly site from scratch.