I like the layout of this site, but it doesn’t translate well to mobile devices.
When I wrote the theme, I rendered the elements in percentage units, rather than as fixed measurements. As a result, resizing the window allows text to reflow naturally. On the mobile version of Chrome, this works well, as zooming the body text adjusts the flow. However, the sidebar and header text are nearly impossible to see. Firefox simply zooms in on the text, without adjusting the flow.
So, I’m left with several options. The first is to change the structure of the site to be more compatible with phones and tablets. That’s not very desirable, as it’s going to lose functionality on the desktop. The second is to serve up a different theme for mobile devices. This entails maintaining two different versions of the site. No thanks.
The third option involves a WordPress plugin called WPtouch.
There are two versions, a free one and a paid one for $49 CAD. The free version is actually fairly robust, but the paid version allows for a greater degree of customization, which allows me to preserve the look of the main site while providing an interface more suited to mobile devices.
Posts are automatically truncated to excerpts, and the user still has the ability to follow links to tags and categories. I like having a sidebar on the right side of the screen for navigation, but that’s not workable on smaller screens, so it’s replaced with a menu in the upper left corner.
The first option is a customizable menu that I use for pages and other links.
There are also dynamic menus for categories and tags.
All in all, the transition has been a bit of a learning experience, but it doesn’t have to be an ordeal.