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



[quote name='Y0Y0' date='Jun 3 2008, 07:56 PM']These are great news, I'm sooo looking forward to the upgrade.
How long do I have before moving to PHP5.x?.
Zend dropped support for PHP4 January 1st, 2008. :P

Link to comment
Share on other sites

[quote name='Y0Y0' date='Jun 4 2008, 12:56 AM']These are great news, I'm sooo looking forward to the upgrade.
How long do I have before moving to PHP5.x?.

its already moved to php5, see the first blog post they made about ipb3.

Link to comment
Share on other sites

[quote name='Κeith' date='Jun 4 2008, 12:02 PM'][quote name='Y0Y0' date='Jun 3 2008, 07:56 PM']These are great news, I'm sooo looking forward to the upgrade.
How long do I have before moving to PHP5.x?.
Zend dropped support for PHP4 January 1st, 2008. :P

Well I'm in the middle of transferring to another host running the latest and greatest :P

Link to comment
Share on other sites

[quote name='Jaggi' date='Jun 4 2008, 10:49 PM'][quote name='Y0Y0' date='Jun 4 2008, 12:56 AM']These are great news, I'm sooo looking forward to the upgrade.
How long do I have before moving to PHP5.x?.

its already moved to php5, see the first blog post they made about ipb3.

Thanks mate but that's not really what I meant. Cheers never the less :lol:

Link to comment
Share on other sites

I got a few suggestions for rules to add:

  • Set proper meta info in the page head as apropiate. My main example is the Link tag. It makes it much easier to navigate sites that has it. Several browsers shows it to the user in some for. For example, SeaMonkey has a toolbar with buttons that navigates to the indicated pages.
    • The meta information must be consistent and logical. For example, the link to the next page should point to the next page of the current topic, not the next unread topic.
  • Needs a section about favicons, for example the only markup that may be used to embed them.
Link to comment
Share on other sites

aiii thats great!

please ensure to have the semantic css sections. currently a lot of css classes are used in the profile and the board index with no selector around it. if this is cleaned out in v3 that would be great!

please dont forget that some weird people use background images (which are per style). the path placeholders should be possible in all style sheets.

thanks a lot! :-)

Link to comment
Share on other sites

well, I must admit I'm a little disapointed that you've decided to include 3 skins by default. I would have much sooner have seen this new IPB3 version come with just one default skin (that matched the admin cp) style and colour wise. Lot's of people have complained in the past about the fact the current IPB admin cp style does not match any of the two forum default skins now. You have to go way back to much earlier IPB version to see that.

Although, it will not be too bad if the other two skins that are not the default shipped, are not tied into the forums coding so they can just be deleted if you only want the default style installed. But I have a strong feeling that will not be the case.

And please, make the admin cp skin match the forums default skin.

Link to comment
Share on other sites

Very good news.

I have just completed a 1.6million dollar web improvement project at work. A few areas I believe Invision needs to focus on during this task are mentioned here http://forums.invisionpower.com/index.php?showtopic=276196

Your comments:


I do hope a switch is offered to allow administrators the option to turn the lo-fi version on or off depending on their SEO preferences.

My other suggestions are.

Please look at centralizing the html. This would include removing all HTML from lang files and other core functions and placing it back into the templates or CSS where it belong.

Centralize the CSS styles and refer to them with an include rather than including all the styles in each and every page.

Perhaps look at combining some of the CSS. The concept of having 4 CSS files and only having access to one of them via the admin panel leaves a little to be desired.

Look at bringing a majority if not all the skins images into the CSS and out of the templates and other random location. This will allow designers and developers an easy way of updating their look and feel without having to spend hours in front of firebug, homepage and a html editor trying to locate that one image that makes the page look rubbish.

Please get rid of pop-ups and consider replacing them with friendly JavaScript HelpBalloons, click for examples. In an age where just about every browser now blocks pop-ups one should look at the alternatives on offer. (Where this comes in handy is when you want to add a link to your post and you are constantly asked by the browser if you want to allow this action.)
Look at introducing inherit; where needed to insure the CSS comes back WC3 compliant. Please check the CSS on completion to confirm it will validate prior to release.

If you need a tester I would be more than happy to help out if it means the next release comes out clean and compliant.

It would also be a big plus if you took the time to amend the entire web accessibility issues currently plaguing the software. This includes but is not limited to changing <b> to <strong> here are the guidelines set out by WC3… http://www.w3.org/TR/2002/REC-UAAG10-20021217/

I know you have talked about the changes you are considering to the heading, but perhaps all so consider that those changes may be short lived according to WC3 and the CSS3 plans to remove H1, H2, H3 and H4 and come up with a more compelling approach.


Perhaps consider centralizing and normalizing the language files with some sort of GUI interface in the admin section that allows the users to search and replace content without having to FTP in.

I know that this is off topic but it would be nice to think that during the build of 3.0 considerations is placed on centralizing the search tool. I don’t believe that it is all that useful to have:
A search for Blogs
A search for Downloads
A search for Members
A search for Topics
A search for Gallery images and comments

In six separate pages, rather introduce a search that allows the user to choose the area they wish to search in one search location.

I hope I have not made the product look bad by taking the time to put all this feedback together, in fact the opposite I believe the product in well worth every penny, I just believe introducing these changes will take it that it to the next step and that’s one step further ahead of the competition.

Cheers
zeroanarchy

This last skin will do away with the present lo-fi version

Link to comment
Share on other sites

[quote name='zeroanarchy' date='Aug 20 2008, 06:50 AM']Very good news.

I have just completed a 1.6million dollar web improvement project at work. A few areas I believe Invision needs to focus on during this task are mentioned here http://forums.invisionpower.com/index.php?showtopic=276196

Your comments:
I do hope a switch is offered to allow administrators the option to turn the lo-fi version on or off depending on their SEO preferences.

My other suggestions are.

Please look at centralizing the html. This would include removing all HTML from lang files and other core functions and placing it back into the templates or CSS where it belong.

Centralize the CSS styles and refer to them with an include rather than including all the styles in each and every page.

Perhaps look at combining some of the CSS. The concept of having 4 CSS files and only having access to one of them via the admin panel leaves a little to be desired.

Look at bringing a majority if not all the skins images into the CSS and out of the templates and other random location. This will allow designers and developers an easy way of updating their look and feel without having to spend hours in front of firebug, homepage and a html editor trying to locate that one image that makes the page look rubbish.

Please get rid of pop-ups and consider replacing them with friendly JavaScript HelpBalloons, click for examples. In an age where just about every browser now blocks pop-ups one should look at the alternatives on offer. (Where this comes in handy is when you want to add a link to your post and you are constantly asked by the browser if you want to allow this action.)
Look at introducing inherit; where needed to insure the CSS comes back WC3 compliant. Please check the CSS on completion to confirm it will validate prior to release.

If you need a tester I would be more than happy to help out if it means the next release comes out clean and compliant.

It would also be a big plus if you took the time to amend the entire web accessibility issues currently plaguing the software. This includes but is not limited to changing <b> to <strong> here are the guidelines set out by WC3… http://www.w3.org/TR/2002/REC-UAAG10-20021217/

I know you have talked about the changes you are considering to the heading, but perhaps all so consider that those changes may be short lived according to WC3 and the CSS3 plans to remove H1, H2, H3 and H4 and come up with a more compelling approach.
Perhaps consider centralizing and normalizing the language files with some sort of GUI interface in the admin section that allows the users to search and replace content without having to FTP in.

I know that this is off topic but it would be nice to think that during the build of 3.0 considerations is placed on centralizing the search tool. I don’t believe that it is all that useful to have:
A search for Blogs
A search for Downloads
A search for Members
A search for Topics
A search for Gallery images and comments

In six separate pages, rather introduce a search that allows the user to choose the area they wish to search in one search location.

I hope I have not made the product look bad by taking the time to put all this feedback together, in fact the opposite I believe the product in well worth every penny, I just believe introducing these changes will take it that it to the next step and that’s one step further ahead of the competition.

Cheers
zeroanarchy

Thanks for your comment, it's great to get a big long list of ideas and questions. I'll answer them numerically, so I hope it makes sense and you can match question to answer.

1) The lo-fi version will be a skin in 3.0, and I assume it will be installed and enabled by default. If you don't want to use it, it's as simple as disabling the skin.

2) Centralizing html is sometimes harder than it seems. It's something I've tried to do wherever possible, but sometimes it would just make things unnecessarily complicated to do so.

3) Do you mean caching the CSS to a .css file rather than including all the css right in the page header? If so, this is already an option in 2.x, and the same option will be available in 3.0.

4) IPB 3.0 will support multiple CSS files, all editable within the skin manager. The default skin will probably have a 'reset' css file, a 'layout' css file and a 'colors' css file. How other skin authors choose to make use of this powerful functionality is entirely up to them. We could take it even further and have a css file for each section of the board, however, I think that then starts to become cumbersome for novice skinners.

5) I don't think removing *all* images from the templates is ideal. <img> tags are used where appropriate. However, buttons that have language strings in them (e.g. 'New Topic') are now CSS generated, so you just need to change the background image in the CSS to change the button - no more need to change a dozen buttons in Photoshop. Additionally, I'm trying to move all icons into macros, so that if you want to switch the icon set we're using for another, it's pretty easy to go through and change.

6) Removing popups is definitely something I'd like to achieve, but it's going to come down to time. We'll see how things go as to whether we manage to get this in.

7) Valid CSS is definitely a target for release.

8) Another aim is semantic XHTML throughout, which should help a huge amount with accessibility. This is one of my champion causes in IPB3 :)

9) H* tags may be removed, but I think given the speed web standards actually become usable in the wild, I think we'll be safe for the duration of IPB3's lifetime.

10) I believe better language editing is already implemented - I think there was a previous blog entry about it too (here)

11) Centralized search is already implemented, as well as a live search tool (if enabled by the admin). All sections of the board can be searched through one interface, and all results are compiled in one interface too. (here)

If you have any other ideas or questions, feel free to post them, we appreciate it.

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...