Jump to content

IP.Board 3: Skin update

We wanted to use this blog entry to bring you an update on the brand new IPB3 skin. In my previous entry, I didn't go into any detail about the skin itself, but I did introduce the Style Guide and some goals/ambitions for the front-end interface. We're now at a stage where we can talk about the skin itself.

Whereas most of our other entries explain one particular feature in-depth, this post will be more of a quick-fire overview of some of things we're implementing on the front-end of IPB3, and some other tidbits.

Popup Windows
We took the decision to try and eliminate all popup windows from IPB3. Popup windows create several problems: in this day and age, you can't guarantee a user will even see them due to popup blockers, and secondly, with the myriad devices accessing the internet now, you can't be sure that a popup window will be supported, or a good user experience.

Instead, where browsers support it, inline ajax-populated popups are being used. Where browsers don't support it, the user is taken to the content like they would any other page. Our goal is to keep the entire experience confined to one browser window/tab, as I believe it should be. This includes friends management and warning management (for moderators).

Unobtrusive Javascript
Going hand-in-hand with the above was a desire to make IPB fully usable even if you had javascript disabled. As such, we've worked to make every feature, as far as is possible, available and usable even without javascript. There are some exceptions to this, e.g. the post editor (although you can still post, you'll just see a textarea), but on the whole we're on our way to making IPB3 much more accessible than IPB2.

Getting at user information
IPB has a lot of relevant information about each user, but presently it can be tedious to access the important details quickly since you have to go to their profile, taking you out of your workflow. New to IPB3 is a user card which can be accessed almost anywhere; wherever you see a username, simply hover over it to get all the relevant information for that user, including photo, contact details and reputation. This has been implemented in such a way that skinners and modders can also integrate it incredibly easily. We've also added a new bbcode which allows users to create these special links from within their posts.

Better uploading tools
In the past we've had numerous calls for TRUE multiple attachments. You'll be pleased to know that we've fully integrated SWFUpload into IPB3 for webservers that support it (which should be most). For those unfamiliar with this tool, it allows users to select multiple files in the Open dialog, and javascript then manages the upload queue for you. Another cool improvement is we now support upload progressbars with no additional server requirements! In addition, if you upload images, you'll see a thumbnail immediately, making it easy to insert the right image to your post, right where you want it.

The search form and results page have both been completely redesigned. Since the search mechanism in IPB3 underwent such a big change in being able to search all applications at once, we needed a new interface that made this easy to use. The result is a search form that adapts, showing you additional filters based on the applications you've chosen to search. The search results page combines all results from the applications you selected, but also allows you to show the results from just one application at a time. And finally, multiple results from one object (e.g. several matching posts in one topic) are grouped together so it's really easy to see the breakdown of your results.

Other significant improvements
While almost every page of IPB3 has been recoded from scratch and improved, some areas have undergone more changes than most. I'll cover them briefly so you know what you can expect when we unveil the skin:

  • Improved board index
    One of the first steps I made when developing the new skin was to look at each major page and figure out if it could be made more useful than it is now. One result of this process was to improve the board index - and the new hooks system made this possible. The board index now features a collapsible sidebar, showing relevant information such as recent topics, top posters and more. Naturally, since this is hook-based, mod authors will be able to easily add their own data to this area.

  • User control panel
    The control panel was a big focus right from the start. We first knew we were going to remove the messenger from the UCP, since it didn't fit conceptually. What was left has been redesigned, with settings broken down into tabbed sections, showing only the menu for that section - this should prevent new users from being overwhelmed when they open their UCP and seeing so many links.

  • Messenger
    As noted above, the Messenger is now its own complete section, reducing clutter.

  • User profiles
    User profiles have been redesigned, bringing them more into line with what users might expect from their favorite social networking sites. One new feature we're excited about is a Recent Activity feed, which allows you to see quickly what content a user has contributed recently, be it topics or posts, calendar events, images and more. This is made possible by the search index, which we covered in a previous post.

Media tag
We've added a new bbcode tag, which will insert all kinds of media right into a post. If you put a YouTube link in a media tag, it'll insert the YouTube player; similarly, if you link to a Flickr album, it'll insert a Flickr slideshow. New media handlers can be created in the ACP for those sites we don't support out of the box, while still using the same tag - making it really simple for your users.

Quick PM
One last feature to mention - we have implemented a Quick PM feature, which allows you to PM a member from topic view without leaving the page. We hope this increases personal communication, and reduces the chance of topics going off-topic.

I hope that gives you some idea of what you can look forward to with regards to the front-end appearance of IPB3. We'll be previewing the actual design of the skin in the coming weeks as we ramp up testing, so if you have any questions, comments or suggestions on the things I've covered here, now is a good time to get them out!


Recommended Comments

Personal topics would be awesome, as apposed to email-style PM's. Being able to select who can view this topic from the start. When someone deletes the "personal topic" they remove themselves from the view. Once everyone "deletes" themselves, the actual "personal topic" is deleted. I've always needed a help desk, but such a feature replacing the PM system would completely fill that need. Being able to conduct a conversation with a member with several staff members would be very ideal.

Link to comment
Share on other sites

Seeing that SWFUpload has a requirement of having flash (not mentioned in the blog entry), I trust that if the user did not have flash (which would be rare) it would degrade into a simple single upload box?

Link to comment
Share on other sites

@Michael -

You simply use the attachments system as you would now. :) IPB will do the rest.

[quote name='Luke' date='Sep 9 2008, 12:13 PM']Seeing that SWFUpload has a requirement of having flash (not mentioned in the blog entry), I trust that if the user did not have flash (which would be rare) it would degrade into a simple single upload box?

swfupload already does this (it only builds the flash object if the user can support it), however we will have an on/off setting for this feature in case an admin determines they don't wish to use it globally.

Link to comment
Share on other sites

@Luke, surely they did do just that. They are aiming to be more "device" compatable as well, as since neither WM or iPhone/iPod Touch support Flash, it would be very likely they did do that for computers without flash.

I like the sound of Quick PM. Great feature.

Link to comment
Share on other sites

[quote name='Malefickus' date='Sep 9 2008, 06:01 PM']I have it on good authority that there is a browser for WM devices that supports flash...

Aside from that, I'm looking forward to finally seeing a preview of this skin! I'm almost drooling here!

Almost? :lol:

Link to comment
Share on other sites

Sounds fantastic! - absolutely fantastic, really impressed with the feature list, amazing. Honestly - this is really gonna impress the community, really love the fact you're encouraging people to communicate and have embrassed the whole social networking scene, top job.

May I ask - what I was hoping for (amongst SEO URL's - which you have done wooo) - and that's "Status Updates" - e.g. - "I'm currently working on my blog" or "I'm out to a party tonight" - a bit like you see on Facebook or Twitter, so users can update their status perhaps have an option in the member bar or something?.

Look forward to seeing the preview skin..woop!

Link to comment
Share on other sites

These really are some useful, well-thought out and wholly beneficial new features, sincerely well done and thank you for taking IPB into its next generation!

Inline Quick PM - stroke of genius. I spend so much time opening new tabs to PM people and them come back to the topic.

Sidebar, again brilliant. Monitors now have much more real estate that can be used to better the user experience and availability of information. Gone are the days of 800x600, with affordable £150-160 21"/22" monitors now available to the masses. You could make this moveable with drag and drop like blog content blocks too, so members could choose where they want it.

On the board index, one thing I hope we see this time is out of the box CSS divs instead of tables for the forum sections, or please make it easier to add rounded corners and curves to skin templates instead of all those confusing table elements.

Well done guys!

Link to comment
Share on other sites

[quote name='WebbyB' date='Sep 9 2008, 02:11 PM']...and that's "Status Updates" - e.g. - "I'm currently working on my blog" or "I'm out to a party tonight" - a bit like you see on Facebook or Twitter, so users can update their status perhaps have an option in the member bar or something?.

We didn't mention everything we're doing for the skin ;) There's actually a few other things we haven't mentioned yet.

Link to comment
Share on other sites

Great update, thanks again for taking the time to write these up. Lots of great nuggets in here!

Since the messenger was mentioned here, one thing I beg of thee is to please add the ability to search your PM folders. I literally have thousands of PMs and it is mind-bogglingly numbing to try and find something in a message someone sent me months ago. :)


Link to comment
Share on other sites

[quote name='Rikki' date='Sep 9 2008, 07:11 PM']We didn't mention everything we're doing for the skin ;) There's actually a few other things we haven't mentioned yet.

Please tell us you're making PMs more like private threads. :wub:

Link to comment
Share on other sites

Great features! I'm a new costumer here and I don't resist for a second that I bought a license! :D

But here are some bad news:
This means that the SWFUpload JavaScript API cannot trigger the File Dialog in Flash. Which means SWFUpload is permanently broken for Flash Player 10.We have 4 options:1. Hope Adobe will have mercy and roll back this change and save SWFUpload.2. SWFUpload support ends at Flash Player 9 and is not moved to Flash Player 10 (in other words, the project dies in 6 months to a year after the release of Flash Player 10).3. Change the SWFUpload whole design philosophy dropping the JavaScript API (at least the portion that triggers File Dialogs and starts/stops/cancels uploads) and forcing a Flash Movie UI on our users.4. Try to implement a kind of mix of Flash UI and HTML UI and complicate things by making the Flash UI configurable enough to match the HTML UI.Unless Adobe is going to take their FileReference APIs serious and fix the bugs that are plaguing us (mod_security issues, data return issues, IO Error issues, Linux compatibility, etc) then I don't see a very bright future for any Flash based upload component. Is it worth the fight?
This is a quote from the SWFUploader's forums. Here is a link for the topic: http://www.swfupload.org/forum/generaldiscussion/551
In brief this says that it will not support the new Adobe Flash Player 10.

The response from Adobe on the Adobe Forms is that a security change in Flash Player 10 prevents indirect calls display to File Dialogs.

Link to comment
Share on other sites

It is a little up in the air right now, however, personally I don't think Adobe would cut that functionality in the final release. YUI also have functions that rely on this now, Wordpress implemented it, and sites like Flickr use it. I think they'll realize this is a valid use of Flash, and keep it available.

Link to comment
Share on other sites

Will the topic and reply page be much different and easier to use? And also what are somethings that will be different with the WYSIWYG editor?

Another thing is when you post a quick reply it should dynamically submit the reply into the topic without it redirecting and refreshing the page.

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.

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.


  • Create New...