The New Ubuntu Website

Matthew Nuzum —  — 27 Comments

OK, soon the new ubuntu website will release.

That is such a heavy statement. For the last three months, my sole focus at work has been getting this site ready. It has involved a major redesign, a major architectural change and dramatic streamlining of the content.

This process has been a lot of work. We decided to switch away from the Moin Moin platform (we still use it on all of our wikis and for several smaller websites though). As you may know, we at Ubuntu love Python and use it whenever possible. However, we had a bad taste in our mouth from a haywire Plone incident, and decided we just couldn’t use plone again. There are no other major oss python CMSs out there. That means we needed to consider Java or PHP based CMSs as well.

The fact is, we don’t have that much in-house java expertise. Several of us have done a bit of java coding, but collectively we have a much greater pool of PHP experience. I personally have been coding primarily in PHP for over 5 years and invested 4.5 years writing a commercial CMS. Taking this into consideration, we narrowed the list down to a few choices and began evaluating and contacting the devs and security teams for each of our final choices.

The decision was difficult. We finally chose Drupal. They have excellent documentation, the cms is easy to extend through modules, they have a responsive security team and it’s easy to learn to edit and add content.

By mid February we had the new theme in place. I found it quite easy to create themes for Drupal. I started from scratch and referenced a few of the included themes. I had to ask for some layout advice in #css on freenode. After some discussion about equal height columns, Zeroes (correct me if I got your nick wrong) suggested using a sliding doors layout. This blew my mind at first because I’d only used sliding doors for tabs, but it was brilliant. It works perfectly. You’ll notice if you inspect the code that I have equal height columns inside equal height columns. The outer columns use sliding doors, the inner columns are created using “skidoo too“, which is the way I’ve been using for years to achieve equal height columns. The benefit of sliding doors over skidoo is that sliding doors can use a background image for the columns.

Around this time I also started noticing a few problems in the layout for IE 6. I was faced with the choice of using CSS hacks or adding a few lines of javascript. I opted to use javascript. This led me to search out a js library that could make my life easier. I found mootools by way of transcorners. What a find. I’ve used prototype, scriptaculus, jquery/behavior and mochikit. I fell in love with mootools because of its small size (35k packed) and complete functionality. It’s fast, has a ton of time-saving helper functions/classes, easy ajax/json (and I mean *easy*) and some beautiful special effects. I’m only barely scratching the surface of this library, but I’m so impressed with it I will definitely be using it more soon.

The biggest challenge has been migrating content. We’ve been working on it, working on it and working on it. I don’t think we can get it all done perfectly before release, but that’s ok, because a lot of our content is fluff. We know it, we have plans to do something about it and it will work for now.

Also around mid-Feb we begin doing a burn in of Drupal on the new website. The fabulous Canonical sysadmins found a problem. Drupal was not able to handle more than about 75 simul connections with our configuration. That’s not good. However, the sysadmin’s skills are eclipsed only by their tenacity and they soon worked out a solution. In the final analysis, each server can now handling 5,000 to 6,000 simul connections. You guys rock.

So as the site releases, my favorite part is the new download page. Right now you’ll just be impressed by its vastly simplified layout. However, I’ve already written the code to enable automatic mirror detection. When we release, you’ll have to choose a mirror. However, shortly after we’re sure everything is OK, we’ll turn on the mirror detection code which will use a little AJAX to randomly choose a mirror that is close to you and pre-select it. We’ll still give you the choice to change the mirror but most likely you won’t need to. The brilliant launchpad devs have written some code that probes the mirrors to see which ones have gone away. The new site will benefit from this information to help prevent problems with dead mirrors, something that was a painful tragedy when 6.10 released.

We use launchpad to track bugs with the website. There are some known glitches. I’m eager to hear about any others that turn up. You can also e-mail me or /msg me on freenode (I’m newz2000). If I’m online, you can always find me in #ubuntu-matt.

I could go on and on. I’d love to discuss some of the design decisions and go into details over technical hurdles, but this post is long enough now and I really need to focus my time on getting the site out.

If it helped, please share!Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Matthew Nuzum

Posts Twitter Facebook

Web guy, big thinker, loves to talk and write. Front end web, mobile and UX developer for John Deere ISG. My projects: @dsmwebgeeks @tekrs @squaretap ✝

27 responses to The New Ubuntu Website

  1. Matthew:

    Congratulations for your job (and your team).

    We are waiting for the templates ;-)

    Kind Regards!

  2. Hi Matt,
    Thanks for the writeup, you have done superb job with the site! Can you expand more on the performance issue you mentioned? What was the problem and what was the fix?
    Thanks,
    Chris

  3. Sadly I think the http://ubuntu.com redesign is poor: the two items ‘desktop’ and ‘server’ are lonely in an ocean of white. This seeds the secondary impression of Ubuntu having very frugal offerings.

    Furthermore the banner for the Ubuntu Live conference dominates the page far too much resulting in the remainder of the page inheriting it’s rarefied purpose: http://ubuntu.com appears to be a corporate promotional site, not the homepage of a fabulous hip operating system used by millions.

    I think the design of http://www.ubuntu.com/products/WhatIsUbuntu/desktopedition however is great. Sadly few will reach it from a homepage whose design appears driven toward business events, not individuals use.

    The coldness and self-diverting focus of the homepage design will drive potential users away. As it stands, Ubuntu doesn’t look like it has much to do with Human Beings.

  4. I like the new Ubuntu home page design! Great job!

  5. […] il lavoro svolto da Matt Nuzum’s cambia faccia ad ubuntu.com […]

  6. Nice new site I love it! Please dont make it fixed width. This is one of the worst things to happen on sites lately. All of them are fixed width. When we zoom in (enlarging fonts) the paragraphs become blocky. Keep it just how it is.

  7. (Nitpick for the CAPTCHA substitute: While a good human-verifier, do note that ‘add’ can also mean “Append the text characters ‘2’ and ‘3’ as ’23′” to some people. Even math majors…my excuse is I also did computer science, overloading the verb. “Subtract” would be a bit less ambiguous for us fringe-cases.)

    @Joseph Frantz: There is a compromise between a fixed-width page and one that accounts for text-zooming users: Fixing the page width in ems will allow graceful zooming (save the banner).

    The “Floating in space” page design is too useful to do away with. It allows a designer to keep line length easily readable; removes the obligation of filling extra space with extra fluff any more advanced than light gradients; and also allows a graceful solution for the footer-at-bottom-of-screen-vs.-window problem that IE6 (and the W3C, to a certain, vertically-ignorant extent) present designers. I have yet to see a solution tying a footer to a browser that works in IE6 *and* allows dynamically growing content in the page, account for redraws – add a six-inch block to some pages with these footers, and whoops! just blew through the careful positioning, giving a paragraph a bandana.

    Matt, you deserve a pat on the back for the redesign of the download page. It is so much more user-friendly now that there isn’t a big list of tiny-type URLs to large files. It’s pleasantly interactive now. Good work on the rest of the site, too.

    –Alex

  8. On second glance at the download page: What happened to the torrents?

  9. I like the new Ubuntu website but in my opinion Drupal was not the right choice. Considering your Python expertise the obvious choice was Django, the Python web framework. Of course Django is not a CMS out-of-the-box, it’s a framework. However building a custom CMS with Django will take no more time than hacking an existing one (Django has a built-in admin interface, generic views, flat pages, and many other CMS features). Moreover it’s already used by a few high traffic content-driven sites and its performance is great. For more info about Django you can visit the official project site at djangoproject.com

  10. (Disclaimer: This is not an attempt to turn this thread into a “why didn’t you choose Python-based framework X”, Drupal is a fine system and several of the people I hang out with are CivicSpace/Drupal developers :)

    I guess I see the off-hand comment about Plone in the article as sniping without any proper reasoning behind it, so I’ll try to fill in some of the blanks.

    Plone was used at Ubuntu/Canonical to initially launch their website(s)
    back when they started in 2004, and it was done because it was the only thing that could get them up and running in a matter of days. The Plone site was always meant to be temporary.

    The reason I know is because I worked for them at the time, so they did
    indeed choose Plone because they had people who knew it back then.

    This was also Plone 2.0, a very different Plone than the later versions, and none of the systems (including Drupal) were very sophisticated/scalable/reliable at this point.

    The fact that they didn’t reevaluate Plone after 3 years of additional development on the project is disappointing, but not surprising. People tend to treat software like static entities, and if you’ve had bad experiences with an earlier version, you rarely go back and try it again later.

    There’s a reason Plone is still Python’s leading CMS. :)

  11. Today I read the exciting news that my favourite Linux distribution (ubuntu) was now using my favourite CMS (Drupal). There was a link to your site and I was even more excited to see that you are a Christian! It was interesting to see how much we have in common. I spend half of my life working with Drupal and other open source software, and the other half trying to plant a church, and teaching theology. My theology website is http://loveintruth.com
    I have a passion to see quality Christian resources available freely on the internet and I think Drupal is a great tool for this purpose. I spent some time reading through your blog. Great stuff–keep up the good work!

  12. Hi, can you elaborate more on– first– what the most important Drupal features for you were– and second– how you had to reconfigure it to go from 75 connections to thousands?

    Thanks

  13. Due to popular demand, I think that I should create a follow-up with more details. I have another long post I’m working on first, then will do one to hopefully answer all the whys and hows. If you have a question you’d like to know the answer to, post it here and I’ll see what I can do.

  14. I would really like to see you clarify the choice for drupal as we are in the process of evaluating CMS’s and regard plone as our best choice.

    Furthermore I would like you to point to the current syntax errors in your xhtml output (see the url for details).

  15. good work

  16. How much time does it take for Drupal Implementation for creating a website?
    Can anyone let me know how much time it would take for Drupal implementation for the purpose of creating a website. I am new to Drupal. Any Inputs in this regards is really appreciated.

  17. It depends on what you mean by “implement.” If you mean have a site running with a standard theme? Not long, probably 15m. To create a theme? Drupal is easier than most since you only need a single php file and there are many existing options to use as models, so just a little longer than is typical of your designers. However, a big site will take much planning and ideally a test site where you can do some trial and error. For a site like Ubuntu.com you’d want to allow at least 2 months.

  18. cheap computers October 9, 2009 at 2:39 am

    I guess it was the only thing that could get them up and running in a matter of days. The Plone site was always meant to be temporary.

  19. Ah yes, the classic story of web-dev. Everyone knows PHP, java makes everyone shrug. Finding a CMS that doesn’t make you cringe and pull out your hair. The crash-course in CSS, (sliding door approach is a great idea for pretty much anything imho)…ah web-dev troubleshooting. It’s almost univeral step by step.

  20. […] Nadie se esperaba este diseño aún después de las declaraciones de Matt Nuzum sobre lo que iva a ser el rediseño de la web (14/03/2007). La decisión era difícil. “Finalmente elegimos Drupal. Tienen una documentación excelente, el CMS es fácil de extender a través de los módulos, tienen un buen equipo de seguridad y es fácil aprende, corregir y agregar el contenido… Ahora nuestro servidor es capaz de manejar entre 5.000 a 6.000 conexiones simultaneas fácilmente”. […]

  21. OK, the site is now live! If you see a problem, I really want to hear about it.

  22. Lob für Drupal

    Zur neuen Ubuntu-Site: We finally chose Drupal. They have excellent documentation, the cms is easy to extend through modules, they have a responsive security team and it’s easy to learn to edit and add content. – von hier.

  23. Great work done on ubuntu.com. Congrats!
    Every thing looks very well done and polished.

  24. I found your blog through http://ubuntu.wordpress.com/2007/03/17/ubuntus-new-website/

    There was a comment there on the new Ubuntu website.

    As I stumbled on the pages of your blog, may I say I was impressed. Of more than one coincidence.
    1. You work for Ubuntu. I use Ubuntu.
    2. You are a christian. I am also.
    3. You are a creationist. So do I.
    4. You are married. So am I.
    5. You probably read AnswersInGenesis.org. I do for sure.

    and some other things that really amazed me. For one thing, this finding (your blog) was the best thing that happend today (Sunday). I am so pleased to see that a devouted serious uncompromised bible-believer is the webmaster of ubuntu.com. And really, the (Ubuntu) website was really nice before, but now it is even more. It is such a ‘fresh water’ to see that smart people can and are hard-core serious christians. That was rejoicing for me.

  25. I like the design however when viewing it at higher resolutions it seems overly stretched. Maybe fixed width will help it to look a little better?

Leave a Reply

*

Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>