Blaze New Media

I’m working on a generic Wordpress MU based social network platform, and have been for a month or so now. I’ve set up a blog for people to check the development status.

When I wrote about turning Wordpress MU into a social networking platform a little while back I never could have imagined the amount of interest it would generate.

I’ve heard from a lot of people. Some who are looking to build a new site, some running a site on old software, and others looking for extended Wordpress MU functionality. It seems that people liked what they saw with ChickSpeak, and wondered if I would be offering the solution to the public.

BuddyPress is my offering, and although it is not close completion just yet, I wanted to let people into the development process with a dedicated blog.

Head on over and let me know your thoughts.

I recently completed my biggest project yet; a fully fledged social network aimed at female college students. The difference? It’s built on Wordpress MU.

Wordpress MU (WPMU) is basically the multi-user version of Wordpress, the popular blog/cms tool. The aim of WPMU is to allow for one installation to spawn multiple Wordpress blog instances. Basically, you can install WPMU on your server and run as many individual Wordpress instances as your box can handle.

Wordpress MU has the basics of a social network right out of the box - individual member blogs, member profiles and the ability to scale well.

Don’t Hack - Just Plug

Wordpress also has an excellent plugin API, as well as a whole host of quality pre-built plugins ready to download and activate. The key here is that I didn’t have to hack the core - I could just achieve the additional functionality needed by building dedicated plugins.

Plugins were built and used for private messaging, advanced profile management, online polls, photo management, multi-blog search and user credential management.

Not Blogs, But Member Home Pages

The crucial part to the whole project was morphing Wordpress MU to stop it from generating new blog instances and instead generating new member home pages.

A member home page includes a users own personal profile front and center, their own personal “journal” as a feature of their home page, as well as private messaging functionality.

To achieve the desired change it was down to making a new Wordpress theme. The theme would have exactly the same look and feel as the core site - making it look like the new member home page was still part of the core site itself.

Within the theme, I removed the code that usually makes the blog posts front and center, and changed it to the code that outputs the users profile. The blog code was moved to the sidebar so it could still be accessed as the members “journal” feature.

Finally, the code to output the users new private messages was added to the sidebar, as well as some code to output polls, photos and other smaller bits and bobs.

A nice feature of Wordpress MU is it places member pages on a subdomain, so any members home page can be found at http://membername.chickspeak.com. A nice touch, as it’s then easy to remember the to link to your profile.

Adding Some BBPress Magic

The project also called for a fully featured discussion forum. The forum needed to work seamlessly with the site, using the same login credentials and the same look and feel. Another project called BBPress fit the bill perfectly. BBPress is a no-frills forum/bulletin board application built by the same guys (Automattic) as Wordpress. It has the same style, plugin architecture and most importantly can share the credentials data and cookie information. Perfect.

Limiting Credentials

The final step was to limit the administration functionality that a member has on their own blog. This stops them from signing up new users, deleting content they shouldn’t be, or changing the theme of their member page. I created a simple plugin that disabled the menus for these settings in the Wordpress admin interface. The pages could only be accessed by site-wide administrators if needed.

I’ve only really glazed on what I did with Wordpress MU to turn it into a fully fledged social network engine - but you get the overall idea. I’d be happy to answer anyones specific questions if you have them.

ChickSpeak is up and running over at ChickSpeak.com. Feel free to take a look when you get a chance, I’d welcome any feedback. You can also click the image thumbnails in the article to get full screenshots.

I picked up Dan Cederholm’s book “Bulletproof Web Design” about six or seven months ago. I really enjoyed it, and it highlighted a number of great techniques. Now, with the release of IE7 a few months back, I can’t help but think a couple of the techniques days are numbered.

Personally, since reading the book and even before that, I’ve made programming flexible and scalable (aka bulletproof) designs one of my top priorities.

The only trouble is I find it takes a whole lot longer to program something to be bulletproof, than it does just to whip it up the old fashioned way. It’s absolutely worth it, but it’s a lot more fiddling with images and extra markup in any case, which takes time.

Now, the aim for many of these bulletproof techniques is to keep your site design together when the browsers text is resized. Take a look at Dan’s site and resize the text in Firefox as an example of a great bulletproof design (he is the author after all!).

If you have a copy of IE7 installed, try bringing up Dan’s site and resizing the text again in there. See the difference?

IE7 has taken on something called “page zoom” which basically resizes everything on the page in unison. The first time I saw this was in Opera, and it’s a really nice feature. So instead of the text on your page bursting at the design seams when it’s resized, all the containing boxes and graphics will also resize at the same time.

When Opera was the only browser using page zoom it didn’t really matter, as Opera only counts for a very small percentage of users. Now that IE7 is using page zoom, it becomes a very different matter. We may end up with 70-80% of web users with page zoom as their default behavior.

If Firefox chipped into that, and switched to page zoom in their next version, we’re looking at perhaps 95% of internet users with page zoom instead of simple text resizing.

If that becomes the case, then would it be right to say that it’s pointless to do the extra work to make your designs bulletproof for text resizing? I personally think so.

Maybe I’m getting ahead of myself a little, it’ll take some time before IE7 picks up and overtakes IE6 as the major player. Its numbers however are moving fast thanks to the Windows automatic updates feature (and the fact IE6 is a security train wreck). IE7’s page zoom is also not up to the standard of Opera’s just yet.

So for now at least, I’m continuing with the good practice of bulletproofing for text resizing. I’m sure however, that in the next year or so, the practice will become close to redundant. Then we can all relax knowing that our sites will look great at any size.

At least, until we start talking about resolution independence.

Despite the fact even the “Design Standard” version of CS3 is going to give my wallet a considerable beating, I’m intrigued by one particular part of the package.

Adobe Device Central looks cool, very cool. I’ve not tried it in the public beta of Photoshop, which I now read has a beta version of it included.

I’ve had a bunch of clients recently ask for handheld stylesheets and thankfully I’ve had a Windows Mobile device on hand to test them out. I’m about to sell it though, and even with an actual device, I’m still limiting myself to one platform.

Has anyone spent time using this tool? If so, how have you found it so far? It looks great, but who knows how it will actually work until I get a *final* copy of it.

Come to think of it, maybe this is just for flash mobile… I really hope not, but I suppose that would make sense.

As a web professional, being able to do this on one computer with very little trouble makes me happy to own my Intel Mac.

Of course, this is all down to a great virtualization program called Parallels Desktop that lets you run any windows application within your Mac OS X desktop.