Note to readers: Since writing this article, many sites – including vichargrave.com – have moved on to responsive themes that adapt to and work equally well with desktop and mobile browser. However, themes switching is still a viable way to go if you want completely different desktop and mobile themes for these platforms.
At one time I used the Undedicated WordPress theme by Specky Geek for VicHargrave.com. It is a beautiful theme for browsers running on desktop or laptop PCs. But like many website themes, the smaller screen area on mobile devices, smart phones in particular, compresses the page layout requiring you to expand each page to adequately view the text.
So I decided to try out a few of the WordPress themes that are optimized for display in mobile browsers. During my investigation I discovered that there are WordPress plugins that will switch between PC or mobile ready themes based on the kind of browser that is contacting the WordPress website. Here’s the setup I use to render VicHargrave.com on mobile browsers and switch to Undedicated on conventional browsers.
Undedicated Meets Carrington
I started searching around for mobile WordPress Themes. There are many, but I confined my search to those satisfying these criteria:
- Free – OK so I’m cheap.
- Primarily white since most of my blogs’ featured images are on white backgrounds.
- Looks good in any smart phone orientation.
Surprisingly, to me at least, I had to try out several because criterium 2 turned out to be the rate limiting step. Many mobile themes have non-white backgrounds. Ultimately I settled on Carrington Mobile for its simplicity and white background friendliness. Here’s how VicHargrave.com looks on my iPhone with Carrington Mobile.
Now my site looks clean and clear in mobile browsers without having to manually resize any page.
I did encounter one more difficulty with Carrington Mobile, although it was caused by the manner with which I specified the image sizes, not the theme. When I first took a look at graphics in my blogs I noticed they appeared way too large to fit on even a mobile browser optimized screen. As it turns out I specified the image sizes in pixels for both the width and height. By setting the image widths in terms of percentage I could make all the images fit in Carrington Mobile rendered pages regardless of my iPhone’s orientation.
Most of my graphics are large so I set the width to 100% and do not set any height value – the browser then takes care of the height. For smaller images that did not occupy the entire width of their respective articles, I had to estimate a reasonable width percentage. Many of the graphics I use for programming blogs are screen captures with printed characters in them. I want the characters in images like this appear to be a uniform size, so the width varies from 50% – 90% depending on the size of the original images relative to others. Again the height values for these images are left blank.
Switching Between the Two
To switch between Undedicated and Carrington Mobile themes based on browser, I decided to use Any Mobile Theme Switcher. The nice thing about this switcher is you can specify a different mobile WordPress theme for each of several mobile platforms, operating system or mobile device type – smartphone vs. tablet. Here are the settings I use.
This lets me use Undedicated for IPad and Android tablets, which looks better on these devices, and Carrington Mobile for other smartphones.
At any rate check out Any Mobile Theme Switcher for your WordPress website. I think you’ll like the flexibility it offers in setting the theme that looks best for the platform your visitors use. And if you’re not completely happy with your WordPress themes, you might give Undedicated and Carrington Mobile a try.
Author: Vic Hargrave