Search icon Looking for something?

Communiqué on the Go
2010, Q4 (December 29, 2010)
By Rick Sapir, Carolina Chapter Webmaster

Rick Sapir
Rick Sapir
There's no denying it: mobile computing is here to stay. And as professionals who develop content, it is up to us to ensure that the content we do develop is able to be used on mobile devices. To underscore the importance of preparing for this new medium, the July/August issue of Intercom features several articles on technical communication and mobility.

In reviewing the six-month visitor statistics for the Communique, I saw that the newsletter received a small, but steady stream of mobile visitors.

Mobile visitors to Carolina Communiqué

Although only 2% of the site's visitors from January — June used a mobile device, it was clear to me that the trend would only increase. I began to explore the possibility of producing a mobile-friendly version of the newsletter.

Designing for mobile devices means accepting certain limitations. Not all devices support all web standards (such as JavaScript, Flash, HTML5, etc.). Therefore, I needed a way to "simplify" the content for the mobile version.

Mobify is "a web service that provides a quick way to optimize a site for mobile access." You can pick and choose elements from an existing website — it helps if the website is created using a template-based CMS (content management system) such as Tiki Wiki CMS Groupware which powers the Carolina Communique — then simply modify the styles (while reusing your exiting familiar classes and elements) for mobile usage.

First, I signed up for a free account with Mobify. The free account has some limitations (such as no custom branding and some limited functionality), but it served our purposes (and budget!) perfectly. Using the Dashboard, I used the Communique's home page URL (http://newsletter.stc-carolina.org) as the starting point.

Mobify dashboard
Mobifying the Communiqué

Because of the smaller screen size of mobile devices and lack of JavaScript implementation on all platforms, I chose only specific elements:
  • Simplified page layout and menu
  • Article text, images, and tags
  • Simplified footer elements
Additional modifications were possible simply by using the Mobify stylesheet. This allowed me to create a completely different look and feel for the mobile site, without changing any code. Of course, this requires that the original site uses semantically correct HTML...

I then selected the elements (simply by clicking) from the page that I wanted to re-use in the mobile version. This allowed me to select specific elements, such as the site logo and article title.

Selecting page elements
Selecting page elements

The CMS that powers the Communqiué (Tiki Wiki CMS Groupware) uses standard templates for generating pages. This means that I had to create "Mobified" pages only for the templates that were used (or that I wanted to be mobile-compatible).

All of the Communique articles use the same template page. Additional templates are sused for the non-article pages, such as the Home page, the Search page, and the Arhive page.

The final step is to actually publish the mobile site. Mobify provides a free mobify.me subdomain (we're using communique.mobify.me) and a "browser-sniffer" script that:
  1. Determines if the client browser is from a mobile device, and
  2. Sends the user to correct site (mobile or desktop)
Mobile Communique
The mobile-formatted Communiqué

Learn more

If you have any suggestions for the Communiqué, Rick can be reached at webmaster at stc-carolina dot org. End of article.

More articles like this...
Comments powered by Disqus.