Navigation

Designing for Over Twenty Million Users: WordPress 3.0

Web Design, WordPress | May 12, 2010

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

History of the WordPress UI

 

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.

WordPress in Arabic, Korean, and Czech

 

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.

WordPress Mockup Comparisons

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.

WordPress Header Mockup

 

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.

WordPress Ticketing for Development

 

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.

WordPress UI Group Homepage

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.


This post was authored exclusively for WDD by John O’Nolan, a seasoned web designer, writer and entrepreneur based in Surrey in the United Kingdom. John loves to talk to people, so why not follow him on twitter too?

Share this post
Comments (no login required)
  • http://lakeside.com.np/ Lakeside Techies

    WordPress just keeps getting better and better. No wonder it is the best open source CMS.

    • http://www.antzmedia.com/ Antz Media

      Yes Thats true….Wordpress is Worlds No1.

  • http://wpmututorials.com Andrea_R

    Nice wrapup John. :)

  • http://ricknunn.com Rick Nunn

    I love WordPress and I have to say the additions you made make it even better to use, regardless of how small they are.

  • http://webtolerant.com Amey

    Anybody know the date for the final version of WP 3.0 to be released?

    • http://john.onolan.org JohnONolan

      Hi Amey, there is no official date – Beta2 is out at the moment, after that it will go to Release Candidate 1 and after that a full release. So a few weeks to go yet!

  • http://xpressabhi.com abhishek

    we will see more features with the final version

  • http://ds.laroouse.com esranull

    fun article thanks john

  • Eric

    Could you explain why the UI team felt the need to change the header? It looks fine, but so did the previous version in my opinion and I’m curious as to what the reason behind it is.

    • http://john.onolan.org JohnONolan

      Hi Eric, the full reason was actually outlined in the article.

  • http://www.jordanwalker.net Jordan Walker

    Looking forward to using wp3

  • http://www.blog.skix.pl SkiX

    I hope that themes created for WP >2.8 will work on WP 3.0

    • kucrut

      They should work just fine (assuming you avoided most of the deprecated functions), I just tested my themes with RC1.

  • http://www.kayemedia.net Kaye Media

    Great article, really looking forward to this coming out of beta!

  • http://www.alejandroperazzo.com Punta del Este Real Estate

    ill have it in mind for sure

  • http://andrzejmazur.end3r.com Andrzej Mazur

    Can’t wait to have it officially released.

  • http://www.pandu.ch Claudio Rimann

    i’m currently testing the beta 2 for a multi-site project. the first pleasing thing to welcome me was that brighter header. like it, well done john!

  • http://twitter.com/sammographer Sergei Tatarinov

    Great article. I have a question though, I’m about to launch a blog and buy a theme for it. Considering WP 3.0 coming out in a few weeks, should I wait for it or should I go with 2.9 right away. Will 2.9 wp theme work with wp 3.0 or not?

    • http://john.onolan.org JohnONolan

      Hi Sergei,
      Most themes should work fine with WP3.0 as they did with WP2.9 however I would check with the theme author to be sure.

      • http://twitter.com/sammographer Sergei Tatarinov

        Thanks for a good suggestion, John!

  • http://knowledgecity.com Jae Xavier

    One observation worth noting is about with the WP admin interface…

    There are lots of features that populate the dashboard page. With so many features, just navigating through feature-to-feature is starting to take a little bit more time.

    My question is:

    Do all the features have to show themselves on the dashboard at one time?

    What is your experience with load times on the admin page?

    • http://john.onolan.org JohnONolan

      Not sure what you mean about features populating the dashboard page or navigating through them. That being said it’s entirely possible to customise the dashboard to be however you want it.

  • http://www.roundpeg.biz Lorraine Ball

    I don’t want to design for wordpress, but am glad folks like you do, so when we build websites using wordpress it works smoothly for us and out clients.

  • http://truvoipbuzz.com Alok @ TruVoIPBuzz

    Thanks to efforts of people like you, thousands of us can blog happily. Keep up the good work.

  • http://www.hastishah.com Hastimal Shah

    Great Article john.

  • http://www.lucascobb.com Lucas Cobb Design

    Great writeup John. Interesting read and I do understand your frustration designing with so many designers :D It might be a little more taxing than most projects you work on but its in the same boat as a client who just cant make up their mind until the last second. Thanks for posting.

  • http://www.kitaro10.com mariyam

    Nice article

  • http://ranzeal.com Raneez

    WordPress 3.0 Final version release on May 15th…..2 more days and so much excited !!

    • http://john.onolan.org JohnONolan

      I’m sorry Raneez, I don’t know where you got that from but it’s not correct. There is no official release date for 3.0 yet.

      • http://ranzeal.com Raneez

        Hey John…Its Official and from wordpress schedule updates
        Check it out here – http://wpdevel.wordpress.com/version-3-0-project-schedule/

      • http://john.onolan.org JohnONolan

        Hi Raneez – I’m afraid that is just a guideline. The final release is still several weeks away.

      • http://ranzeal.com Raneez

        Yeah..Exactly….now they changed the launching date to mid June…check out the link again

  • http://amplewebdesign.com web design

    I’m really getting excited about wordpress 3.0.

    Hope it does more on security, I’m been reading hacking on wordpress power site is on the prowl.

  • http://www.cmstheme.net CMS Themes

    I admire WordPress and how fast it is growing from time to time. Can’t wait for the stable release of WP 3.0

  • http://pixeno.com Pixeno Web Host

    I like the fact that they have moved from dark grey to light grey in the header.

    Great post!

  • http://www.natashastorm.co.za Storm

    I’m very excited to see the new version! WordPress is my CMS of choice, it has come so far from just a blogging platform. Nice article!

  • http://www.mycashloan.biz Cash Loan Bournemouth

    Love using WordPress and cant wait to see the new version.

    Another good article, thank you.

  • http://www.websprout.org Eric Di Bari

    Nice thorough review. I’m looking forward to WordPress 3, it should have a lot of nice enhancements.

  • Mho

    Nice

  • http://www.vectoreeno.com/ Vectoreeno

    I’m so excited over this upcoming release, especially for the custom post type feature. I think it’s great the you’re part of a historic release. Everyday, I check wordpress.org hoping for that blue button to say “Download WordPress 3.0″.

  • http://superdit.com aditiarahman

    wordpress is getting better and better, hope not hard to upgrade from the previous version

  • http://www.kitaro10.com Najam Siddiqi

    The development is really impressive one thanks for sharing.

  • http://www.bigtunainteractive.com/portfolio/ Adam Hermsdorfer

    John, very interesting article on WordPress’s UI. I was in San Francisco for WordCamp SF and heard Jane’s presentation on how to design plugin’s and the evolution of the new menu UI. Very impressive design decisions!

    • http://john.onolan.org JohnONolan

      Thanks for the kind words Adam – I haven’t seen that presentation yet but I’ve been wanting to :)

      Hopefully it’ll be up on wordpress.tv soon

  • http://www.obenlands.de Konstantin

    I’m really not too fond of the new color scheme, honestly. Are there plans to add the old admin color theme as an option in the userprofile?

    • http://john.onolan.org JohnONolan

      Nope.

  • http://www.pwrsites.com rob

    I can’t wait to try out the multi-site functionality. This will make posting to several blogs so much easier.

  • http://videousermanuals.com Troy Dean

    Yep, WordPress is the best CMS without a doubt. The new functionality around custom posts and the menu flexibilty in version 3 really kicks it up a gear.

    Keep pressing those words.

  • http://www.deluxeblogtips.com Deluxe Blog Tips

    I’m waiting for the version 3.0. Hope WordPress will take the prize of best CMS solution in this year :)

  • http://sahuspilwal.com Sahus Pilwal

    I’m yet to work with WordPress having previously installed 2.7, 2.8, 2.9 but never designed or coded a full WP site. Cannot wait to work with 3.0 in the next few weeks on my employers design agency site and on a few clients. Being a newbie i’m wondering whether it’s easier to learn WP 3.0 or install and use one of the older versions?? Any advice on this would be greatly appreciated.

    Cheers, Sahus

    • http://john.onolan.org JohnONolan

      Hi Sahus, the upgrade path is seemless – you can easily start working with WordPress 2.9 now and move to 3.0 later with a 1-click process.

      • http://sahuspilwal.com Sahus Pilwal

        Thanks for the reply John. Just to pick your brains again what about all the plugins/themes. Will they always work for future releases or do we have to wait until the developers re-update their code or themes? I’m wondering whether it’s worth using an older version of WP for plugin/theme compatibility? Sorry if this has gone a little off topic BTW! ;)

      • http://john.onolan.org JohnONolan

        It varies from plugin to plugin but the big ones are usually well up to date prior to release – and we do our best not to make changes to the core that will break plugins anyway ;)

  • http://www.imagomedia.be Tom Hermans

    Nice to hear from people who did all the work. Saw Jane’s speech in SF about UI the WP way, and while it all seems very logical, there’s a hell of a lot to keep in account when (re)designing a user interface that rich and flexible.

    Maybe someday I’ll sign up too for my 2 cents

  • http://www.sanalsirket.com sanal şirket

    this is a perfect post.. Thanks

  • http://sparkwoodand21.com Duncan

    Very excited about WP3.0 coming out. I’m very glad that they’re combining WP and MU together. Its going to be really interesting what new users are going to thing of the admin now too. Keep us posted.

  • http://studiomagnolia.com Cesare

    Now you have a big responsibility :)
    In a company you have to convince “just the boss”.
    Here you have to convince a lot of people!

  • http://www.example.com.ru/sign-up/ example.com.ru

    WordPress 3.0 works perfectly, but I am still missing the way to save different sets of plugins and only having to turn on or off the set, I am missing the ability to quick select the categories, just start typing the name of the category and this is filter for easier selection, I am missing a better image resizing or editing, anyway, I love wordpress.

  • http://www.sonicloans.net/easy-payday-loan.html Cassondra

    Me and my friend were fighting about an matter similar to this! Now I know that I was right. lol! Cheers for the information you article. With regards, Cassondra.

  • http://www.rt-creative.com RT-Creative

    really perfect post! thank you very much!