Closed Bug 656455 Opened 14 years ago Closed 14 years ago

Header design changes for QMO website

Categories

(Marketing :: Design, task)

x86
macOS
task
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: cmore, Assigned: tshahian)

Details

Attachments

(1 file)

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1 Build Identifier: The QMO website (http://quality.mozilla.org/) is a wordpress-based website that is going to be modified in the near future. WebDev is going to add extra tab on the top of the website and a build a plugin to integrate with bugzilla. Since the team is going to be changing the front-end, we felt it would be a good opportunity to bring the website more inline with the Mozilla brand. We do not have the resources to overhaul the whole template, but there could be some header changes done to integrate the Mozilla logo/tab or Lizard head. Currently, it is not extremely obvious that you are on a Mozilla website. We need some input on changes to the existing template so our front-end coder can make the changes while we are updating other parts of the website. Additional information: ---- > * Who is the target audience of the website? The Mozilla QA community. In other words, Mozilla community members who participate in QA or are interested in doing so. > * What is the goal on this website? To facilitate the coordination for the QA community and communicate with and within its members. > * Does the community contribute to the website? They can. Mostly, they participate in forums and use the calendar to find out about test days. > * Are there any compelling reasons now to have it separate from the overall Mozilla brand? Not to my knowledge. The current branding was inherited through the last few years of the site's existence. ---- Reproducible: Always
Status: UNCONFIRMED → NEW
Ever confirmed: true
@Tara: Do you want me to schedule a meeting when our calendars are free to meet about the design changes?
Yes please :)
Tara, Here are your design ideas: * Move social media icons out of the header and into the right nav. * Remove the blue header crosshatch pattern behind the tabs. * Use the same vertical blue background image and treatment like on mozilla.com. * Add the gray Mozilla tab on the top right -- similar to mozilla.com. * Style the existing tabs to work on lighter background. Let me know when you have a mockup available. My next meeting with the QMO people is on May 26th and I wanted to have something over Chris Cook (external consultant) sometime later next week. Thanks for meeting briefly today!
Edit: Craig Cook, not Chris.
Hey Chris. Does anyone on your team have the last PSD for the website ? it helps to have that so we can hack it and do a mockup.
Craig Cook should have original file formats for all graphics.
Great. Craig, if you can email 'em to me, I'd really appreciate it.
There was never a single mockup for the current design; it was all assembled in the browser in HTML/CSS. The only graphic assets I have are for single components like the logo, the tiling background image, and the individual team logos. So I'm afraid you might be better off hacking together some screen shots to illustrate anything specific you have in mind, or even give me a rough sketch and I should be able to get the gist. But that said, all of the points in comment 3 are clear enough from the description and easily accomplished without referring to a mockup. I can make those changes in live code and have a staged preview for you to look at in a few days.
@Craig: Do you have a dev instance that you could prototype the HTML/CSS changes on the website using the description above? If so, please proceed with creating a mockup as long as it doesn't affect the current QMO website. When you are ready to present, just post a link here and we will have Tara review it. Thanks! Chris
All the theme work will be staged first at http://mozilla.focalcurve.com/qmo/ for initial review and visual tweaking (that's my "proofing server"). I'll let you know when it's updated.
Thanks Craig!
The header is updated at http://mozilla.focalcurve.com/qmo/. Some areas of the site are still being worked on, so we're just looking at the header design for the moment.
@Craig -- Looks good! The only feedback that I have is since the website is a 100% liquid layout, the Mozilla tab is on the far right when the browser is expanded to 100% width. I am not saying this is bad, but is just is a bit out of sight compared to the right of the fixed width mozilla.com. We'll wait for Tara's feedback to decide to proceed. Thanks!
(In reply to comment #13) > @Craig -- Looks good! The only feedback that I have is since the website is > a 100% liquid layout, the Mozilla tab is on the far right when the browser > is expanded to 100% width. I am not saying this is bad, but is just is a bit > out of sight compared to the right of the fixed width mozilla.com. We'll > wait for Tara's feedback to decide to proceed. The tab is on the far right across other Mozilla sites as well, it's just that most other Mozilla sites aren't liquid. Really what you're noticing is that I had the navigation anchored to the left close to the logo, when the other sites have the nav offset to the right, closer to the tab. The liquid layout does give us a different challenge since everything moves as the window moves, but it's easy to anchor the nav to the right instead of the left. So that's what I've done. I think it looks better (and more consistent with the other sites).
Will defer to Tara on overall matters, but it's looking good to me so far. Thanks Craig.
Craig: I am not sure why, but to me the "Mozilla" text does not look straight to me for some reason - the "Z" looks a little lower.
@marcia: I double checked and the "Z" is the same height as the one on mozilla.com. It does look a little lower, but it is because the top of the Z is lower, but the bottom is straight. It is same on mozilla.com.
Craig: The nav is now on the right and I agree that it looks better on the left.
Hey guys. Sorry for the slowish response. This looks great Craig, thanks for whipping it up. Quick thoughts: * The mozilla tab looks great to me, I don't mind that it moves and I think it works well here. * I also checked and the z's are the same, same tab on both sites. But since Marcia has superhero vision, the .00000001 pixel it might be off is what she is seeing. Overall, this is great. I know you guys are working on some other edits and the following comments are out of scope for this bug... but I think that there are a number of things we can still do to improve the design of the page. I personally feel that the layout of the content can be cleaner, and stronger. The illustrated icons are pretty big and I don't think there's much value in having them be at that size. We can save space by reducing those and arranging the information a little better. I also think it's worth adding a short blurb at the top of this page to put everything in context. Anyway, my quick 2 cents. Otherwise, looks great. Chris... let me know how you'd like to proceed.
The z is indeed ever-so-slightly shorter than the surrounding letters, but it's just the way the font is designed. The humps of the m, o, and the a crest slightly above the x-height (the tails and bowls dip just below the baseline as well). These subtle misalignments are deliberate and you'll find them in any well-designed font because they help balance the letterforms. It would look even weirder without them. For example, if the top and bottom of the o were to fit exactly within the same x-height defined by the z (with its perfectly straight cross-members), the o would appear too small and confined, and out of proportion with the other letters. These subtle differences become more obvious when you shrink text down and render it in pixels. The m, o, and a wind up a full pixel taller than the z because that's how the shapes have to be interpolated at this size (and you can't cut a pixel in half). But one thing we can do to trick the eye is add the tiniest hint of an antialiased edge along the top of the z, just enough to imply closer alignment without actually changing the size or shape. It's like adding half a pixel, but it's really an optical illusion. Just in case someone else was also bitten by a radioactive eagle and has the super vision to notice.
Thanks Craig :) That's interesting and very helpful. I wouldn't change the tab since that's the official one we've been using everywhere and, as you said, it's how the font is designed. Chris, should we close? Let me know. Thanks.
Looks good and thanks everyone for the feedback! Tara: Yup, I'll close it now. Thanks
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: