IPB 3: Styling IPBoard 3

One of the first items we determined for IPBoard 3 was that it was going to ship with a brand new skin. Our current skin has been with us since the first release of IPB2, and the style goes back even further than that. The Pro skin was introduced more recently, but its main intention was to simplify, rather than bring a significant update.

And so, the responsibility for designing and implementing the new skin came to me. This is a huge undertaking, both in terms of scope and sheer scale. The skin is the most visible part of any product; it is what forms your first impression, it is the part you use every moment. In addition, since we have big upgrades to the template system coming (detailed here), every aspect of the skin must be redone, from scratch. IPBoard is a huge application, so this is no mean feat.

Objectives
Before even considering the visual appearance of the skin, I wanted to set down some objectives for it. These are:

- Ensure semantic markup as far as reasonably possible
- Ensure XHTML validation (1.0 Strict)
- Ensure Javascript is unobtrusive

These objectives have real benefits for the modern web. Semantic markup is not only good for screenreaders, but it provides a solid base for skinners. When all stylistic decision is removed from the XHTML, those decisions can now be made in the CSS alone. My goal with the new skin is to minimize the need to edit templates, and semantic markup forms a part of this. The hope is the majority of skins will be achieved simply by editing CSS - I'm sure admins will appreciate how much easier upgrading will be when templates remain largely identical across skins!

Another great benefit of semantic code is that we will now be able to serve a printer-specific stylesheet, and do away with the 'print-view' code in IPB itself.

Javascript
IPBoard 3 is going to ship with the PrototypeJS library. I've always believed that the new generation of Javascript libraries are a big step forward for Javascript usability, so I'm looking forward to making use of them (Nexus beta testers will know we already use it heavily in that product). PrototypeJS allows developers to focus on writing features, rather than fixing cross-browser compatibility issues or poor support for a particular part of the language. We'll be making use of the excellent event-handling capabilities to get as much Javascript as possible out of the IPBoard templates.

Skins shipping with IPBoard 3
Our plan right now is to ship at least 3 skins with IPBoard 3. These will be: the default 'fancy' skin; a simplified skin intended to be used as a base for skinners; and a mobile skin, a lightweight version designed for use on mobile devices. This last skin will do away with the present lo-fi version, and become a full-fledged 'light' alternative, complete with posting, searching and so forth.

Style Guide
To ensure all developers within IPS are on the same track when writing XHTML and CSS, I developed a style guide that we will be using internally. This formalizes the practices we will be using and should help to ensure consistent output. I want to make the guide available to the public partly for review, but primarily so that our modding and skinning community can ensure their code follows our standards too, if they wish. Your feedback and thoughts on the guide are welcome.

IPS_style_guide.doc

Feedback
I'm deliberately avoiding showing the progress on the new skins, but they are underway. Once they are nearer to completion we will begin previewing the design itself. For now, I just wanted to introduce you to our line of thinking and aims for the interface side of IPBoard 3 development. If you have any feedback on things I've mentioned here, or more general feedback about improvements you'd like to see in the IPB3 skin, I encourage you to leave a comment.