Making Thunderbolt mobile

Published on 31^st December 2010 in Websites, tagged mobile, Thunderbolt.

Earlier this week, I launched a mobile version of Thunderbolt, which is designed to work on almost all web-capable handsets and mobile devices. There are many options when building a mobile website and a lot to consider, so I thought it would be useful to run through the choices I made and how the site was created.

Why bother?

I’ve been doing a lot of research and testing on mobile websites at work recently, so I was curious how I’d create one for Thunderbolt.

Although mobile usage currently accounts for a very small percentage of the site’s traffic, it’s growing and mobile users are more likely to be regular visitors. Catering for our most valuable and loyal visitors should be a top priority, even if there are only a few of them.

It’s also important for us to be a leader in our small field. None of the other AIGW members have a mobile website, so being the first allows us to establish the best practice for what we do and start a discussion on how independent sites like Thunderbolt interact with our readers when they’re mobile.

Who and what to design for

Mobile websites have many more limitations than desktop sites due to screen size, bandwidth and so on. Because of this, you have to focus on designing the core functionality of a site or service, not all of it.

However, what might be core functionality on the desktop isn’t necessarily core functionality on mobile. Before designing what a mobile site looks like and how it works, you have to consider who the site will be used by and what for. Once you establish the context of use, you can determine the best experience to provide.

Given the data from our analytics, my knowledge of Thunderbolt’s forum users and what I’ve seen from projects at work, I decided to design for three core scenarios:

1. You have spare time and want to check the latest articles
2. You want to find a specific article or see if there are articles about a specific game
3. You want to check the forum

These map to three core functions:

1. Latest articles
2. Search
3. Forum

This formed the basis of the mobile site’s structure and navigation, which would also include an About page, for those that are not returning visitors.

Implementation

There are many options to consider when designing a mobile website, but after much research, I decided to build a separate mobile website and then switch users to the appropriate site using device detection.

Device detection is not ideal, but serving the same content to both desktop and mobile (especially images) is not an option. Building a separate site from scratch also uncouples you from the additional content and layout of the main site, allowing you to concentrate on the mobile experience.

We already create a number of header images for each article, some of which are conveniently sized for use on the mobile site, so these we simply re-used. For re-sizing screenshots, I opted to use tinySrc, a free third-party service.

Device detection is done using the Detect Mobile Browsers, a free PHP script. Users can switch between the mobile and desktop Thunderbolt sites, with a cookie used to remember when their preference is to view the desktop site.

Almost all of the backend code was used, unaltered, from the main Thunderbolt site. As so few changes to this were required, the total implementation time was only two (fairly lazy) days.

Conclusion

Creating a mobile site for Thunderbolt took quite a bit of time to research, but it was surprisingly quick to do. The resulting site speaks for itself: using Thunderbolt on your mobile device is now much quicker and (hopefully) more focused towards what our readers want to do when they’re on their phones.

You might also enjoy: XenForo forum software review | Subscribe to the feed

© Philip Morton 2008-2013