Going Mobile

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.

iPod 4 Rumors

In my grant application for the 2010 Qwest Foundation Teaching & Technology grant, I proposed purchasing a class set of iPod Touches. I learned that I was awarded the grant in early March 2010. Since then, I have been following the rumors of Apple product releases very closely. I need to spend my grant funds by November 1 and I’m hoping the new version of the iPod Touch will be released by then.

Traditionally, Apple has updated the iPod in September, just in time for holiday shopping. MacRumors.com recently reported that rumors are circulating about a mid-September media event that will announce the iPod updates, which is slightly later than usual. If this is true, I will then have to work fast to complete my purchases by November.

I could just go ahead and purchase the current 3rd generation iPod Touch, but I’m hoping the that the next generation will be as great of an improvement as the iPhone 4 was from the 3GS.  As John Gruber recently suggested, “if you wait a few weeks to buy the Touch, you’ll get one with a Retina Display and dual cameras.” Gruber sometimes has inside sources, so I’m hoping he’s right. There have been other leaks that suggest the next iPod will support FaceTime, which also supports it will follow the iPhone 4’s design.

From an education viewpoint, I’d be happy with just one camera, but there are two other iPhone 4 features I would love to see in the next generation iPod Touch. First, I suspect students would find it much easier to read text on the Retina Display, especially my students with reading disabilities. Second, the Apple A4 processor will provide better battery life, possibly lasting through the entire school day, and enable powerful applications like iMovie (iTunes link). Thus, the iPod 4 would be capable of far more creative applications and open more possibilities than the current model.