iPhoneWebDev - Blog

In my last article I wrote about making the Xenagia Book Index iPhone Friendly, and in the process optimized much of our science-fiction, fantasy, and horror web site for iPhone usage. However, I left one section untouched: our forums.

In this article I’m going to talk about what was required for that final step: the creation of an iPhone skin for vBulletin.

vBulletin: Bane and Boon

Between our entertainment sites at Skotos, RPGnet, and Xenagia we’ve gone through at least three different forum software packages that I can remember. The latest, and the one that we’ve used for six years or so, is vBulletin. It’s generally outperformed its competitors, and though we’re constantly pushing the edge of its capabilities at our very large RPGnet site, it generally does as well as I’d expect a reasonably priced commercial package to do.

vBulletin is also very customizable. Sort of. There are literally hundreds of CSS entries, template files, and plugin hooks that you can work with to make your forum look like whatever you want. However, I think the sameness of most vBulletin sites speaks to how difficult that actually is. Although it’s nice to be able to change anything from how messages display to the look of your forum home page, it’s just about impossible to dig through the tens of thousands of lines of code to find what you want.

Most sites make simple CSS changes (mainly color modifications) and leave it at that. To make Xenagia iPhone friendly, unfortunately, I knew I needed to go further than this. There would be modifications to the CSS to make the forum pages more readable, but I knew that I also wanted to make changes to how pages some displayed, and that meant doing template work, which I didn’t look forward to.

To begin any major vBulletin work like this, you want to create a new style. That’s done through the “Style Manager” under the “Styles & Templates” menu item in the administrative control panel. You find your default style and then you make a new child style. This new style will thus inherit all the changes you’ve already made, but also allow you to make more changes for iPhone viewing.

And this is where the next problem reared its head: by making changes to a child you override the parent style. After creating my iPhone skin that meant that I now had a setup where some new changes to main Xenagia style wouldn’t be inherited (because the info was also modified in the child). At first I tried to get around this by only editing items that weren’t modified in the original style. Though that was a fine goal, I wasn’t able to stick with it, just because of some of the changes that had to be made.

The CSS Changes

The first goal was to make the site broadly readable, with most text being legible in portrait mode without zoom. Being a good iPhone Web Developer I first tried to do this via the “viewport” tag. However, much as I found was the case when I’ve tried to use the viewport tag before, it broke. Random page had randomly sized columns that were totally empty. I tried a few different viewport numbers before giving it up as worthless.

Which meant I then turned to CSS.

I spoke more extensively about this in my last article, so I won’t dwell too much on the CSS work I did. Basically, I increased the default sizes of various variables to make them easier to read when small.

In vBulletin this is all done through another Style Manager option. From the drag-down menu for your new iPhone child style you can find “Main CSS”. The first thing I did was crank up all my fonts. Anything that was 10pt became 14pt while anything that was 11px (about 8pt) became 13pt. The latter is still a bit small, but it was a compromise that was required to keep everything looking good. The other option I found to change was the “<select> Menus” CSS which I popped up to 125%.

Voila! Everything was now sized much better with just several minutes of work. If you don’t do anything else, this is a great way to quickly and easily improve iPhone accessibility to vBulletin. The downside is that it doesn’t look that great. Huge numbers of columns cut text down into bite-sized bits that eat up all your vertical real estate.

Fortunately I had a plan to resolve this too: deleting information.

Information Management & Template Changes

This is definitely not going to be for everyone, but I think an entirely valid strategy for iPhone optimization of web pages is the removal of some information from iPhone views. Generally you don’t want to remove information which genuinely displays useful content to your viewer, but removing less relevant information can make it that much easier for an iPhone viewer to actually read what’s important.

I removed two types of information in this stage:

First I removed information that was only of interest to a newcomer to the site. For the Xenagia forums, this was the description of what each and every subforum on the site was for. For example the “Books” forum had two lines below the forum link which read: “Isaac Asimov, J.R.R. Tolkien, Stephen King.; Comic books and graphic novels too.” Clearly that type of signpost is useful for a first-time reader, but it’s not required for someone familiar with the site, and my general assessment is that if someone goes to the trouble of hitting your site on an iPhone, it’s because they’re already a fan.

Second I removed information that I felt wasn’t necessary to have a good experience at the site. Some of this information is definitely useful to some small degree, so it was overall a judgment call.

Here’s everything that came off:

• For the forum views I removed the thread and post columns, which served no real purpose except to show how popular our forums are (or aren’t). There was also a column which showed the last post for each forum, containing a thread title, a date, and an author. Though this was all useful, I wanted to cut the three lines these represented for each forum to two. I ended up removing the author line because I felt like it was the one least likely to encourage a reader to click through.
• For the thread views I removed the views column, which again I felt was something that only highlighted the popularity of the site (or thread) without giving the viewer real information. I left the replies column, which I felt was meaningful at this per-thread level, though I changed the title of the column from “Replies” to “Rep.” just to save some space. I also again mucked with the “Last Post” column. Here I had three entries: date, time, and last author. I really wanted to cut something to squeeze down this column size, and I ultimately decided on “time”. The forum software already shows whether a viewer has read something or not, so I figured that along with the date would give them enough of a guidepost to where they were. If I’d wanted to be more sophisticated I would have changed my listing to show the date for the last 24 hours, else the time, but that would have required digging even further into vBulletin.
• I opted not to change the messages view pages as all. Some of the text is a bit small in the message headers, but I decided to generally leave it. If I later modify anything, it’ll be to go back and make the author names larger.

This was all done via the aforementioned vBulletin templates. These are essentially chunks of HTML code interspaced with variables and links to other templates that are put together to create vBulletin pages. A listing of them can find in the Style Manager under “Edit Templates” for your new style.

forumhome_forumbit_level1_post, forumhome_forumbit_level1_nopost, forumhome_forumbit_level2_post, and forumhome_forumbit_level2_nopost were the four templates I edited to remove the forum descriptions.

The FORUM_DISPLAY and FORUM_HOME templates held the key to removing the thread and reply columns on the forum display pages (showing how obnoxiously things are divided up) as well as changing the word “Replies” to “Rep.” on and removing the “Views” column on the thread display pages.

A special template called forumhome_lastpostby is where I modified the “last post” element on the forum display, while threadbit is where I modified the “last post” element on the thread display.

Whew.

Conclusion

So that’s what was required to make the Xenagia vBulletin more iPhone friendly. The CSS is easy, but the template work is a pain–to the point where I’m not looking forward to digging through all those templates again to set RPGnet up similarly.

But if you want to do it youself, now you’ve got a thumbnail guide.

This entry was posted on Monday, August 27th, 2007 at 10:28 pm by Shannon and is filed under Examples, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.
digg | del.icio.us | Technorati