blogs.princeton.edu, as seen using the WPtouch Pro plu­gin with thumb­nail images

Site admins who would like their Word­Press site to be opti­mized for mobile devices now have a few more options. On this net­work, the default set­ting for new blogs is to have WPtouch Pro acti­vated, but first time vis­i­tors see the “desk­top theme” and can click a link to switch to the WPtouch Pro theme.

WPtouch Pro is a com­mer­cial theme that tries to cre­ate an “app-like” expe­ri­ence for mobile users of your site. It is faster load­ing and max­i­mizes ver­ti­cal space, hid­ing the search and page nav­i­ga­tion behind a pop-up menu. By default it shows cal­en­dar icons next to each of your posts, but that can be changed to post thumb­nails. A tablet view is also a con­fig­urable option, although the default set­ting is to use the WPtouch view for pocket-sized devices and use the desk­top theme for tablets. If a site admin is will­ing to invest the time to explore all of the con­fig­u­ra­tion options, a WPtouch Pro mobile site can look rather impressive.

The Jet­pack super-plugin recently added a “Mobile Theme” option to its dozens of fea­tures. This plu­gin fea­ture also dis­plays an alter­nate theme to mobile view­ers. This theme, unof­fi­cially called “Minileven,” is a min­i­mal­ist ver­sion of the Twenty Eleven theme, with a more com­pact menu. There is a sep­a­rate con­fig­u­ra­tion option for an excerpt view or a full-post view. The “Edit CSS” item under the Appear­ance menu has an addi­tional option to allow cus­tom CSS to be applied to the Minileven theme. If you choose to acti­vate the Jet­pack mobile theme, you should go to the Plu­g­ins menu and deac­ti­vate WPtouch Pro on your site to avoid conflicts.

If you choose to dis­able both of these plugin-based mobile themes, you can rely on the respon­sive dis­play of the desk­top themes. All of the approved themes on this sys­tem are respon­sive, mean­ing that they adjust their dis­play accord­ing to the width of the view­ing device or win­dow. For­tu­nately, the afore­men­tioned cus­tom CSS fea­ture finally allows CSS with media queries, so a site owner can have full con­trol of the CSS dis­play on all device sizes. The respon­sive theme for blogs.princeton.edu is just the default Twenty Eleven theme with some cus­tom CSS, includ­ing media queries.