249447 - The Mozilla Update site does not use a consistent look and feel

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Public Pages, enhancement)

Description

[Kyle Adams]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040608 Firefox/0.8
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040608 Firefox/0.8

The Mozilla Update site's look and feel is very different from the rest of the
Mozilla site.  This is an extension of the disparate branding that Steve Garrity
identified in his "Branding Mozilla: Toward Mozilla 2.0"
(http://actsofvolition.com/steven/mozillabranding/), and should be corrected for
many of the same reasons.

Reproducible: Always
Steps to Reproduce:
NA

Actual Results:  
NA

Expected Results:  
At the least, the same typography and color scheme as the rest of the site.

Comment 1

[alanjstr]

That's what you get for letting someone completely independently design a
website and get it up and running mostly on their own.

Are you going to complain that Bugzilla does not look like mozilla.org?

Comment 2

[Kyle Adams]

Bugzilla is generally not a consumer-facing web site, whereas the Update site
is, so I'll withhold any complaints on the Bugzilla site :-)

Comment 3

[Wolf [:wolf]]

So basically, your request is that Update use the same stylesheets, etc as
mozilla.org?

Comment 4

[Kyle Adams]

It goes a little deeper than just stylesheets.  The images used on the tabs at
the top of the page, for example--those should probably be changed to resemble
the "downloads products support..." navbar at the top of the mozilla.org site,
which doesn't use images at all.

Comment 5

[Flash Bang]

(In reply to comment #4)
> It goes a little deeper than just stylesheets.  The images used on the tabs at
> the top of the page, for example--those should probably be changed to resemble
> the "downloads products support..." navbar at the top of the mozilla.org site,
> which doesn't use images at all.

I'll add my vote to this as well..

mozilla.org has a very nice stylesheet and general layout. Seems quite
userfriendly, etc.

Since update.mozilla.org is an "extension" of the mozilla.org website, and the
part of the website that customers will potentially interact with the most, i
think it should share the similar look and feel.

vote++

Comment 6

[Wolf [:wolf]]

One thing to note.. Update != www.mozilla.org... 

Yes, they're both end-user facing sites.. and the current design of update is by
no means finished, in some areas it just plain sucks, but simply put, I don't
believe matching the style of mozilla.org is going to work here.

Most of the problems with update's design have already been filed as other
bugs... Though the site's design does suffer from a lack of integration points
with its sisters. I neither want to clutter the design with external links that
aren't relevant, or duplicate content that would have to be maintained in two
places.

Re: Comment #4: If the tabs were removed and matched the products, support, etc
links on mozilla.org, users would most likely *think* that's what they were.
which is not a good thing. Since the links are very different.

Comment #0 references a branding article, which discusses the use of imagery.
particularly the Mozilla, Thunderbird, and Firefox logos.. Update does maintain
consistant branding. Not sharing a site's style doesn't make it any less "mozilla"

I realize this comment might be read to mean I'm looking at this bug as a
wontifx, not at all. There's valid points here.. but if the expected resolution
is that update will suddenly adopt the mozilla.org styles and return to being a
tan/brown with similarly placed items.. that's not likely to happen.

Constructive comments about stuff that can be changed to improve the feel of it
are welcome. Me too comments such as #5 probably aren't.

--> Confirming Bug as a valid RFE.

Comment 7

[Richard Klein]

http://bugzilla.org has recently updated there website styles.  They have done a
very nice job of complementing mozilla.org.  I believe update.mozilla.org would
benifit from a similar approach.

Comment 8

[Kyle Adams]

> I neither want to clutter the design with external links that
aren't relevant, or duplicate content that would have to be maintained in two
places. <

Agreed, but I'm talking about design and layout, not content (including links).
 I think the site can borrow enough look and feel to "fit in" without hampering
its very different purpose.

My interpretation of branding appears to be a little different--mozilla.org sets
a particular visual style that is associated with the mozilla.org brand of web
site.  Not sharing in that visual style decreases the associaion with
mozilla.org.  I see a parallel to the discussion in the article on sharing
common elements across the icons and images for Thunderbird and Firefox. 
Substitute "Mozilla applications" with "mozilla.org web sites", "icons" with
"layouts", and "application" with "web site":

"The new Mozilla applications each stand alone, yet they are related and are
often used side-by-side. A common style element and style can be applied to
icons and logos that are appropriate for each application."

We may have to find some middle ground here--I think the update site would
benefit by incorporating many of the elements created by a talented designer
(Dave Shea) for the mozilla.org web site.  Furthermore, I think it could do this
while at the same time being able to stand alone.  The Bugzilla web site
mentioned is a good example--a lot of the elements from mozilla.org were
incorporated, but enough customization occurred to fit the purpose of the site.

This may be a case where a picture is worth a thousand words; I'm going to try
and take a quick whack at a redesign of the front page based on what I'm
advocating above.  I'll post the URL if/when I finish it.

Comment 9

[Richard Klein]

Attachment: Example of what we are possibly looking for

Like Comment #8 said a picture is worth a thousand words.  I grabbed the
stylesheet from bugzilla.org and the welcome page from update.mozilla.org and
here is an example of what could be done.

Comment 10

[Kyle Adams]

(In reply to comment #9)

Is that a photoshop'd screenshot, or did you actually tweak the HTML and CSS for
the various sources to create that image?  If the latter, could you attach your
HTML and CSS?  I'm working on pretty much the same thing, so I'd hate to
duplicate effort if you've beat me to the punch :-)

Comment 11

[Jed B]

Regarding attachment 153062 [details] that is great.
I currently LOVE the current design for Update.m.o but I do agree that a
consistent look between mozilla.org projects is a must.

And this screenshot is great. I vot for it.
Also I think it's important that it render well in Opera and IE so they can see
what they are missing.

Comment 12

[Richard Klein]

Attachment: files used to create example

Here is the css, images, and html I used to create the example.  I've also
added an example of the extensions front page.	The pages are just static html.
 I basically just copied the stylesheet and layout from bugzilla and the
content from update.mozilla.org.

Comment 13

[Richard Klein]

Attachment: Here is the example of the extensions front page

Comment 14

[Flash Bang]

I REALLY like this look. The only thing that i like about the current look and
feel that i dont like about this one is that you cannot switch between
applications as easily, because the application names are not as clearly visible.

Maybe just a personal opinion, but other than that, I have to say i like this
design a lot more than the current one.. Looks VERY professional and consistent
(very clean looking).

Also, bugzilla.mozilla.org is also moving to a more consistent look and feel
with mozilla.org, so the major components of mozilla.org's web presence have
been transferred over to use the same style. update.mozilla.org will fit right
in if it uses the styles described above. If not, i believe it will feel like a
third-party site (like texturizer.net).

New Bugzilla look and feel being tested here (WIP).
http://mecha.mozilla.org/bztest/

The official bugzilla site has also adapted a similar lookandfeel
http://www.bugzilla.org

Anyway, just trying to bring up some points to the discussion. In the end, it
will be up to Wolf, and the mozilla.org guys..

Comment 15

[Tobias Sager]

Please make sure you keep the font size relative (as in the proposed layouts) as
the current static font size solution on the site gives very ugly results.

Nice (X?)HTML Strict / CSS would allow to squash bug 246851 and bug 247572.

(Please do not forget bug 245948 while designing)

Comment 16

[Wolf [:wolf]]

This bug has my support. :-) Though its very likely it'll center around the new
website-beta announced today. and not the bugzilla.org look (though I personally
like the bugzilla look much more than the current mozilla.org which I
intentionally avoided when designing Update.)

I added after-aviary1.0PR to the status whiteboard, which means this is on
target to get visited between 1.0PR and 1.0.. (probably closer to 1.0PR.)

So, if any of you were worried that Update would reach 1.0 with the current
look, put those fears to rest, it most certainly will not.

Comment 17

[Tristor]

Wow, that's hot... I say use it.. and screw website-beta.mozilla.org :D

Comment 18

[Wolf [:wolf]]

Bulk Moving Web Site bugs to new component.
(Filter: massumowebsitespam)

Comment 19

[alanjstr]

Can we mark this as fixed now?  

Comment 20

[Wolf [:wolf]]

I'll mark it as fixed when I feel it is. Thanks.

Comment 21

[Kyle Adams]

I would certainly not consider it fixed, since the update site is still out of
sync with the rest of mozilla.org in terms of visual consistency.

Comment 22

[Wolf [:wolf]]

(In reply to comment #21)
Comment #19 was in reference to http://update-beta.mozilla.org. Not
update.mozilla.org.