WPtouch Pro, Jetpack Mobile, Responsive

WPtouch Pro with thumbnail images

blogs.princeton.edu, as seen using the WPtouch Pro plugin with thumbnail images

Site admins who would like their WordPress site to be optimized for mobile devices now have a few more options. On this network, the default setting for new blogs is to have WPtouch Pro activated, but first time visitors see the “desktop theme” and can click a link to switch to the WPtouch Pro theme.

WPtouch Pro is a commercial theme that tries to create an “app-like” experience for mobile users of your site. It is faster loading and maximizes vertical space, hiding the search and page navigation behind a pop-up menu. By default it shows calendar icons next to each of your posts, but that can be changed to post thumbnails. A tablet view is also a configurable option, although the default setting is to use the WPtouch view for pocket-sized devices and use the desktop theme for tablets. If a site admin is willing to invest the time to explore all of the configuration options, a WPtouch Pro mobile site can look rather impressive.

The Jetpack super-plugin recently added a “Mobile Theme” option to its dozens of features. This plugin feature also displays an alternate theme to mobile viewers. This theme, unofficially called “Minileven,” is a minimalist version of the Twenty Eleven theme, with a more compact menu. There is a separate configuration option for an excerpt view or a full-post view. The “Edit CSS” item under the Appearance menu has an additional option to allow custom CSS to be applied to the Minileven theme. If you choose to activate the Jetpack mobile theme, you should go to the Plugins menu and deactivate WPtouch Pro on your site to avoid conflicts.

If you choose to disable both of these plugin-based mobile themes, you can rely on the responsive display of the desktop themes. All of the approved themes on this system are responsive, meaning that they adjust their display according to the width of the viewing device or window. Fortunately, the aforementioned custom CSS feature finally allows CSS with media queries, so a site owner can have full control of the CSS display on all device sizes. The responsive theme for blogs.princeton.edu is just the default Twenty Eleven theme with some custom CSS, including media queries.