Jump to content
Rikki
 Share


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.

 Share

Comments

Recommended Comments



"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
- Ensure Javascript is unobtrusive"
> Excellent!

Link to comment
Share on other sites

[quote name='BryanH' date='May 30 2008, 03:53 PM']For the 'fancy' skin, please include a stylesheet for DARK forums and LIGHT forums! Pretty please! :)

I don't think we'll be doing a light one and a dark one... but all images will be PNG, so you won't end up with white rings around buttons etc. when you change a background color yourself :)

Link to comment
Share on other sites

Looks great. Another good idea to a new skin would be new board index appearance. the current one used by ALL the other forum softwares so changing the way the board index displayed will be a plus. But good overall progress!

Link to comment
Share on other sites

[quote name='vadim88' date='May 30 2008, 01:16 PM']Looks great. Another good idea to a new skin would be new board index appearance. the current one used by ALL the other forum softwares so changing the way the board index displayed will be a plus. But good overall progress!
Not so much though - You don't want to get away from the main focus of IPB, which is to be an effective and usable forum software.

Link to comment
Share on other sites

[quote name='Zachary Stoler' date='May 30 2008, 04:43 PM']Can we varify that GIF's will not be used anywhere in the product(except customization, avatars, etc.)?

I'm not going to say absolutely, because gifs can still have a place in some situations. But on the whole, yes, I am planning to move to PNGs.

Link to comment
Share on other sites

This is great news!

I dislike GIFs (although I must give them credit for compatibility and INCREDIBLE longevity). But PNG's are so much easier to work with.

Can't wait to see the previews!

Link to comment
Share on other sites

[quote name='Rikki' date='May 30 2008, 12:57 PM'][quote name='BryanH' date='May 30 2008, 03:53 PM']For the 'fancy' skin, please include a stylesheet for DARK forums and LIGHT forums! Pretty please! :)

I don't think we'll be doing a light one and a dark one... but all images will be PNG, so you won't end up with white rings around buttons etc. when you change a background color yourself :)

Maybe you should poll this. The very first thing half of my users say when I update to a light skin is "when can we expect a dark alternative". Having the light and dark ship standard would really increase the usability right out of the box for ost admins.

Link to comment
Share on other sites

I just hope you have taken some consideration for a two column forum layout for the board/forum view. Its preferred when we have a long list of forums. This will help to reduce vertical scrolling for guys like me.

Link to comment
Share on other sites

[quote name='.om' date='May 31 2008, 09:01 AM']I just hope you have taken some consideration for a two column forum layout for the board/forum view. Its preferred when we have a long list of forums. This will help to reduce vertical scrolling for guys like me.

This won't be a feature of the default skin, but the new template system certainly makes this possible :) I'm incredibly excited about the possibilities the new template system will open up.

Link to comment
Share on other sites

Very interesting read. Looking forward to see how the now skins would look like and all those other new features. Thank you for keeping us posted on the development of the 3.0 version

Link to comment
Share on other sites

great! Looking forward to 3.0 then..now give us a sneak preview soon..being a designer myself..just can't wait to have a look at whats 3.0 gonna look like :D

Link to comment
Share on other sites

I hope as well with all that, that IP.Board will support an easy multi languages translation, and support languages like Hebrew and Arabic that are written from right to left.

Link to comment
Share on other sites

Ah, :) Just finished coding finally my damn skin ;)... Looks like I'll have to learn even more now... Oh well! Learning is cool anyways!
It sounds pretty cool though! I'm looking forward to easier skinning.
Cheers,
-Lone, W.

Link to comment
Share on other sites

I'm actually salivating at the thought of making custom skins without template edits to move block level elements. :)

Think about how great it will be to move something along the page without having to edit the skin's HTML and the php that creates it. :D

PS: I think you should show me what you have so far. ;) I'd also love to work with you on the three skins shipping with IP.B 3.

PSS: I've taken a very brief glance through the style guide and wouldn't mind talking a few things over about that. PM or e-mail me your AIM name.

Link to comment
Share on other sites




Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...