Designing for Over Twenty Million Users: WordPress 3.0

WordPress 3.0 is, without doubt, one of the most exciting updates to the platform in a very long time.

As well as things that all users will notice such as custom menus, custom backgrounds and a new default theme, there are also massive additions to the code-base such as the ability to run multiple sites from a single install and custom post types.

These things bring WordPress up to speed as an extremely powerful CMS as well as a publishing platform.

Since January of this year I’ve been getting involved with the core WordPress community to contribute back to its ongoing development and today I’d love to tell you a little bit about how that works.

Getting Involved in The Community

WordPress has always had a strong development community and indeed the developers have had regular meetings and resources to organize themselves with for years.

The problem is that I’m no developer. I can do a little PHP here and there and I’m pretty handy when it comes to theming WordPress but it’s certainly not what I specialize in. Thankfully, an OpenSource working group for the WordPress UI (User Interface) was started recently, which is headed up by Jane Wells: the head of all things UX (User Experience).

As soon as I got involved with the UI group, I realized that the standard of my work was going to need to be pretty high. The history of people involved in the WordPress UI is basically of a who’s who of the biggest designers in the world, from Jason Santa Maria to HappyCog Studios (Zeldman).

Designing for Over Twenty Million Users

The first project that I tackled for the UI group was one to refresh the header and footer of the WordPress administrative system; daunting to say the least. It’s a change in WordPress 3.0 that (sadly) doesn’t get mentioned very often but it’s the number one thing that most users will notice when they upgrade.

The founder of WordPress, Matt Mullenweg, mentioned in his keynote at the annual WordPress conference in San Francisco recently that an estimated 8.5% of all sites on the internet are running on WordPress. With about 246 million websites on the internet in total (Dec 2009), over 20 million people (and more if you consider that many WordPress installs have more than one admin user) will see the new admin header design; assuming that they upgrade to the latest release. That scares the crap out of me.

Designing for WordPress is nothing like designing for a client. With so many users, there are considerations that you would never normally dream of. For example, as a rule of thumb when designing anything with text in it: the element needs to be flexible enough to expand to double its normal width. Why? Because WordPress is translated into about 70 different languages and not all words are the same length when translated!

Of course when it comes to languages, the width of the text isn’t the only issue; some are written from right to left. You probably didn’t know that WordPress has an entire set of RTL (Right To Left) style sheets and images. Even something as simple as a drop-down menu has to be given extra care and attention because the graphics used will also have to work when mirrored horizontally with the controls on the opposite side.

The Design Process

OpenSource design is a little different from OpenSource development. When it comes to contributing code there isn’t a whole lot that’s subjective, however with design a lot of things can come down to personal opinion. For this reason, Jane Wells guides the work of the UI group and has final sign-off on design decisions.

If you thought it was hard taking all of the user interface nuances into consideration, then you definitely don’t want Jane’s job. She has to assess every decision in relation to WordPress as a whole, its values and its plans for the future. She has to manage the requests of the people at the top, which may not always translate into what the people at the bottom want to hear. She does an amazing job of organizing everything, I definitely don’t envy her workload.

Jane set the brief for the new header and footer, which was to lighten them up to promote accessibility (dark text on a light background) and to move away from the very dark gray that has been in WordPress for a long time. A couple of mockups were put forward and then after discussion in the UI group meetings, one version was chosen to be implemented.

The Development Process

Once the design had been finalized, I could have quite easily stepped back at this point and let one of the developers implement it… but where would the fun in that be? Learning how to code for WordPress was another really interesting experience, nothing like anything I’ve done before.

Editing the core WordPress CSS files is, quite frankly, petrifying. Deleting a single class in a CSS file could, hypothetically, break any number of plugins and themes for millions of users, you can’t just code it how you think it should be and move on.

The structure of the CSS is also fairly different to normal. There are CSS files which control the core layout and CSS files which control the admin ‘skin’ (which is changeable). In order to add a 1 pixel border to the header and footer, the border itself had to be defined in the core css file but the color of the border had to be defined in the ‘skin’ css file. With this type of code structure, any plugin or theme developer can over-ride these styles if they want to.

All Change, Let’s Do This Differently

Another difference in working on an OpenSource project is that everything is in constant development, nothing is ever finished. Once the new admin header and footer had been completed they were revised a further four or five times. In fact just a few days ago we made the decision to port them over to using CSS3 gradients with a fallback solid color.

This is frustrating at times because you can end up feeling like you put in a lot of work that ends up not being used (I can’t even tell you how long I spent on the original graphics for those gradients) but ultimately it leads to a better outcome, which is what we all want.

Want to Design for WordPress?

Being able to say I’ve designed something for such a massive platform gives me a real feeling of accomplishment but don’t forget that anyone can contribute to the WordPress UI group. If you’re interested in making UI contributions to the next release of WordPress, then head on over to http://make.wordpress.org/ui to see the current discussions and meeting schedules.

Right now it’s a pretty small but focused group, I would encourage anyone to get involved and shape the future of WordPress. The best thing about OpenSource is that if you don’t like something, you can contribute towards making it better.

Finally, if you want to check out WordPress 3.0 before it launches then you can pick up a copy of the public beta from WordPress.org.

John O’Nolan

Founder at Ghost.org. Writes about Open source, startup life, non-profits & publishing platforms. Travels the world with a bag of kites.