The smartphone revolution isn’t just changing the way people use their mobile devices. The transition from traditional “flip” phones to full-screen smartphones is changing the way people view their favorite web content. Increasingly, Internet users are reading their content on the go using mobile web browsers on far smaller screens.
This unquestionable trend towards mobile browsing has broad implications for WordPress website owners and designers, as they’re now responsible for creating designs that accommodate an ever-growing variety of browsers and screen widths. It can be a complex process, and many people are intimidated by the need to scale down their design elements to cater to a screen that can literally fit into the palm of someone’s hand.
The WordPress community has provided some help through a vast series of plugins and mobile-exclusive themes. This is perhaps the easiest and quickest way to take a traditional website and turn it into a smartphone-friendly equivalent, and it requires very little technical knowledge. Most plugins come with their own XHTML themes for mobile display, while others offer theme galleries and encourage the development self-styled mobile themes. Below are the best ways to produce a robust mobile web presence without any need for technical skills or a large investment of time or money.
Making Mobile-Friendly WordPress Websites in Minutes with the WP Touch Plugin
The WP Touch plugin for WordPress is the perfect solution for WordPress administrators who are seeking to cater to smartphone users. It was originally designed to serve iPhone users exclusively, but it has been updated to cater to Android devices and those who are using touchscreen BlackBerry smartphones. The software can even cater to the new and emerging market niche of Windows Phone 7 and Windows Phone 8 customers. Those WordPress site owners who download the premium WP Touch Pro plugin will enjoy the ability to deploy a special, iPad-only theme that will display only on those tablet devices when they access the website.
How It Works
WP Touch and WP Touch Pro accomplish this task by creating custom themes and stylesheets, and then instructing the default WordPress theme to identify the browser agent assigned to any user visiting the website. If WP Touch detects an iPhone, iPod Touch, Android, Windows Phone, or BlackBerry mobile web browser, it will immediately replace the current theme with a mobile theme, giving users a single-column display of content that lists just the entry titles and a featured image; site administrators can customize this template to show anything that can be displayed within a typical WordPress Loop, including full entries, excerpts, and even comments.
WP Touch isn’t just a front page solution, however. The series of templates coupled with this extensive and wildly popular mobile plugin allow site administrators to deploy an entire mobile website, including category and archive pages, standalone entries, and comment pages. And (as is now customary with almost every mobile-friendly design), users are given the option to switch to the site’s regular template at any time by clicking a link displayed in the footer of the WP Touch mobile version of the website.
Skip WP Touch and Go for WordPress Mobile Edition
While WP Touch was the first real mobile design plugin to be released (and it’s still the most robust of any mobile plugin available for WordPress), it does face some stiff competition from the newer WordPress Mobile Edition plugin available through the WordPress plugin library. This newer plugin actually allows users to target specific operating systems and display a different mobile version of the website to each type of operating system. This means that Android users could potentially see a slightly different version of the website when compared to iPhone users and other platforms.
The ability to serve different site versions to different mobile platforms might sound a bit useless, or even excessive in terms of features, but it’s actually quite useful. Consider that Android users are permitted to use Adobe’s Flash technology on their mobile devices while iPhone users can only support HTML5 and associated technologies. With this in mind, it might make sense in these circumstances to code an Android version of the website that highlights its Flash content and a “flashless” version for iOS browsers. Android users will be treated to rich media that their phones are more than capable of displaying, while iPhone users won’t be shown content (or rather, and empty, vacuous space) that they simply can’t view on their iOS device.
How It Works
The WP Mobile Edition plugin also comes with several pre-made themes for use by administrators, and these themes can be assigned on a per-device basis. By default, those who download the WordPress Mobile Edition plugin will be given one theme for Android users and another theme which is designed for users of Apple’s iPhone, iPod Touch, and iPad devices. The themes display the same information, but the iOS-targeted theme has a bit more of an “Apple” look to it, which might add appeal for iOS users. Ultimately, customizations can be made to both themes using standard WordPress variables, PHP code, and XHTML in combination with a stylesheet, just like every other template.
Don’t Forget So-Called “Feature Phones”
So far, every plugin mentioned for mobile websites has been designed for the Android or iOS mobile operating systems. While this bloc of users constitutes the vast majority of those who visit websites using a mobile device, one should not forget about those customers who are still using so-called “feature phones” to browse the mobile web. These users might be increasingly rare in numbers, but it’s still important to create a pared-down version of the website which can be displayed on these ultra-small screens.
A plugin known as Wapple Architect Mobile is adept at creating WAP-friendly mobile websites. Instead of creating a touch-friendly website with large elements and larger text, this plugin creates a mobile version of the website which uses numbers and bulleted lists to produce keypad-friendly navigation elements. It embraces the use of simplistic design, including a plain-color background and basic text. This is absolutely important when catering to mobile users with older phones that do not have touchscreen capabilities.
Remember that “WAP” is a far slower internet protocol for mobile devices. That means that the touch-friendly versions of a website will be far too “heavy” for these much more simplistic phones. Using a plugin to cater to users of these non-smartphone devices is the best way to broaden a website’s mobile appeal. Plus, once a feature phone user knows about a website’s paired-down WAP version, they’ll be more likely to visit that website on a smartphone if and when they decide to upgrade their device to a more advanced model.
Design Websites with Mobile Users in Mind – Embrace HTML5 and CSS3
While the above methods have all included ways of turning off the “full” or “desktop” version of a website in favor of one that is fully mobile, that doesn’t always need to be the case when designing for mobile users. Indeed, a good design is one which can scale to screens of all sizes. Therefore, when designing a new WordPress template, be sure to focus on elements which will scale well in terms of screens that measure between 3.5 inches and a full 5 inches in diagonal length.
This means embracing technologies like HTML5 and CSS3, which promote numerous rich design elements without the use of static graphics and large image files. Leaving graphic-intensive websites behind is one of the biggest trends in 2012, and it’s all for the purpose of improved mobile use. Not only do these devices slow down mobile page loading times, but they tend to make a device slow down and experience a high amount of “lag” when rendering and scaling them to the screen’s much smaller size. In many cases, images don’t scale down at all. they simply get hidden behind content, get placed in front of printed content, or appear somewhere off the screen where a user can’t see them.
Designers should also consider sensible navigation elements that are easy to view on mobile devices. Again, this means leaving large images behind and focusing on textual navigation in a list format which can be easily scaled on smaller portable screens. They key to a successful website is encouraging users to explore without forcing them to get lost of become unsure of how to use the navigation. This is especially true on mobile devices, where users are often far more impatient and likely to go to a different website if the site they’re currently using just can’t seem to get it right in terms of cross-platform design cues.
Finally, always remember to create a robust and functional design that does not rely on Flash or JavaScript to function properly and look its best. This is especially true for Flash which, as mentioned earlier in this article, is simply not supported by users of iOS devices. Because that includes users of every iPhone, as well as every iPad and iPod Touch, using Flash would eliminate a sizable portion of potential readers and repeat visitors. In some countries, these Flash-exclusing iOS devices are actually the majority of smartphone devices in use. That’s no way to greet new visitors and cater to their needs.
Leaving JavaScript behind is equally important, as most mobile devices simply do not fully support the technology and don’t really have to. Increasingly, JavaScript is being used in the form of AJAX libraries like jQuery to produce interactive elements and animations. These are more “mouse friendly” than “finger friendly,” and they’ll create real usability headaches for those users accessing a website’s full template instead of a mobile counterpart.
This might not be the quickest and easiest way to produce a mobile version of an existing website, but the guidelines presented here are an excellent way to produce a website’s next design with mobile user in mind. It’s actually quite possible to design a website’s full template in a way that allows it to be seen in a full, robust way on screens of any size. With dedication to usability and good semantic coding, mobile access can be enabled for any website.
And, if that’s not an option, WordPress offers a large number of powerful mobile design plugins that can take any website off the desktop and put it squarely, comfortably in the hands of iPhone, Android, BlackBerry, and Windows Phone users around the world in an instant.
Do you observe websites using images more sparingly in order to remain mobile-friendly? Do you consider Flash a poor choice for a mobile design? Is JavaScript more “cursor-friendly” than “finger-friendly,” or can it be used elegantly on touch-based mobile designs?
Rachel AlexanderBy Rachel Alexander, founder of digital agency Alexanders Internet Marketing.
