Redesigning QMO…

It’s been over a year since the Mozilla QA team started the QMO (quality.mozilla.org) “alpha” experiment.  We started with a simple Drupal install and added a few modules to create a new (temporary) home for Mozilla QA.  We wanted to figure out what a community website focused on quality assurance might look like.

It was my first time working with Drupal, so the early setup and configuration was definitely a learning experience.  I collected a lot of feedback from the QA team and community to put together something that worked for us.  Although the current QMO site has given us a platform to do more than our old blog on mozillaZine, we decided to take what we have learned over the past year and create a better QMO site that was more user-friendly, functional, and secure.

The first step towards an “official” QMO site was redesigning it from the ground up.  I had to think about the site design (wiki), put together a rough site architecture (.pdf), and create a website design RFP (.pdf) before finding someone to help us.  We decided to work with Airbag Industries during this first “visual refresh” phase of the project.  With input from the QA team and commuity I defined a number of page templates and after a few weeks of collaboration with the Airbag team…

We now have our final HTML/CSS templates (click the main navigation menu to see the different templates)!

6 comments

  1. nice tamplate, but still some problems with good semantics, for example text-transform: uppercase; for the footer, since its more a style.

  2. Looks great – nice work!

  3. Hello Jay,

    The font-size has not been defined with relative units, I’m afraid. The font-size is rather small: remember that some of us set minimal font-size to 12px or bigger.
    The layout breaks when minimal font-size is set to 12px: the search button and search field are rendered on next line.

    You reset all elements, *all*, at the beginning of http://people.mozilla.com/%7Ejpatel/qmo/templates/css/mozqa.css
    but all inline elements, div and many others do not have a padding or a margin by default. Instead of resetting all elements, why not just *set* those that need to be reset?
    Anyway, on top of that, you then later again set *for a second time* many (if not all) of those elements.

    I checked your stylesheets and I think you are over-constraining. There is definitely over-declaring, for sure.

    Regards, Gérard

  4. @Gerard: Thanks for your feedback. I am sure the CSS is far from perfect, but we will look into fixing it during the next phase of the project. Since we still have to convert these templates into a Drupal theme, your suggestions are definitely helpful.

  5. Hey Jay,

    We’d love to help Mozilla with the project. Please contact me at your earliest convenience and we can talk shop.

    Cheers,

    Mordecai
    Advomatic

  6. This post is the reason why Drupal is a leading CMS. Better than Joomla or WordPress IMO.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>