IPB 3 IP.Board 3: Skin update

[iBotModz_Bot]

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.

 

Searching

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 [media] 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 [media] 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!

 

View the full article