Going Mobile

Screenshot of current blog

Since my students will likely be accessing my classroom blog almost daily using iPod Touches, I’m reconfiguring my classroom blog to optimize it for the smaller screens. In the process, I’m learning about the Mobile Safari viewport, which, by the way, is the inspiration for the name of this blog.

First, I moved my classroom blog to a new, shorter domain name (purposely not linked), reducing the number of taps students will need to do to type the url blog from twenty-nine down to seven. To save even more time, I’m going to put a short cut on the home screen of each device.

The second big change will be to improve readability. The WordPress theme I’m currently using is the ultra-configurable Atahualpa by BytesForAll. It looks great on a wide screen, but feels a bit too busy on the mobile screen (see figure 1). The user can double tap the screen to zoom into the text (see figure 2), but I want to to save my students this step.

Screenshot of current blog
Figure 1. Current blog opens as full screen on iOS devices.
Screenshot of current blog zoomed in
Figure 2. Zooming in on my current blog.

To change the default behavior of how my web site appears on the mobile screen, I have several options. I could use one of several plugins to create a mobile theme for my blog. I experimented first with WordPress Mobile Edition by Crowd Favorite (see figure 3). Next, I tried out the WPTouch plugin by Brave New Code, which has a great drop down menu feature (see figures 4 and 5).

Screenshot of WordPress Mobile Edition plugin
Figure 3. Using the WordPress Mobile Edition plugin
Screenshot of WPTouch plugin
Figure 4. Using the WPTouch Plugin
Screenshot of WPTouch Plugin Drop Down Menu
Figure 5. The drop down menu of the WPTouch plugin.

I’d highly recommend either of these plugins for anyone who wants a quick, reliable and professional looking mobile site. However, I decided I didn’t like the approach taken by both plugins. Each has a completely different look and structure than the blog’s main theme and I’d prefer to have consistency between the desktop and mobile versions. Also, both are customizable (especially the pro version of WPTouch), but I don’t want to have to adjust settings twice when I want to add new features, so this approach won’t scale well if I set up multiple student blogs.

The direction I’m heading is using css media queries to detect screen size, then adjust the layout of the page by adding an iPod specific stylesheet. I’m basing my new site on Twenty-Ten, the new default WordPress theme that ships with version 3.0. What I like about this approach is that the header image and widgets are still consistent with the desktop version, but the font-sizes and layout are adjusted for easier reading on the smaller screen.

Figure 6 shows what the default theme looks like in a mobile device, which still requires zooming to achieve readable text. However, Twenty-Ten was carefully coded to make it easy to modify so I’ve already made great progress adding the iPod-specific stylesheet. My idea is to make the main content area stretch across the entire width of the screen, pushing the sidebar to the bottom of the page (see figure 7). To make it easy to access the navigational links, I’ve added a menu button in the upper right corner, which simply links the user to the footer area of the same page (see figure 8).

Screenshot of Twenty-Ten with my header image added
Figure 6. New default theme for WordPress with my header image added.
Screenshot of my changes to the Twenty-Ten theme
Figure 7. My modified version of Twenty-Ten.
Figure 8. The menu area of my mobile version of Twenty-Ten.

If you are reading this post on an iPhone or iPod Touch, you’ll notice I’m using the same theme for this blog, but with a different header image. I still have some bugs to work out, but I think I’m on track for having this ready for the start of school.