665261 - The mozilla.com "download Firefox" button should look clickable in IE6

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect)

Description

[Frank Yan (:fryn)]

The download button looks better after the bug 664988 's fix (thanks John and Stephen!), but I still think the download button should look like a button or a link that can be clicked. A gradient background, even using an image, would help with this.

(In reply to bug 663988 comment #2)
> Designing for IE6 is tricky - we want the site to work in IE6 for the
> reasons you said, but we also can't let the lowest common denominator (in
> this case, very low) hold us back on making the site look good for other
> browsers.

I'm only talking about the download button on the home page. We don't need to expend any effort making the rest of the page, the site, or any of Mozilla's sites look or work better. The mozilla.com home page could be a user's first step to getting and loving Firefox, and we should make it great.

(In reply to bug 663988 comment #7)
> I'll take this - we've previously determined that a slightly degraded
> appearance in IE6 is acceptable as long as it's not distracting and it is
> still functional.

The download button is only useful if (all else equal) the home page is attractive and trustworthy enough in appearance to convince a user to click it. Users will associate a more beautiful page with higher quality product. This is a small, inexpensive change that can make a large difference. Also, converting users from IE6 helps move the web forward.

Comment 1

[Frank Yan (:fryn)]

To put it more concisely:

For web pages in general, the WORSE the page looks/behaves in IE6, the MORE likely users will upgrade from IE6 to a better browser. Then over time, web developers will spend LESS time developing for IE6.

However, for http://www.mozilla.com/firefox/new/ the BETTER the page looks/behaves in IE6, the MORE likely the users will update from IE6 to the latest stable release of Firefox. Then over time, web developers will spend LESS time developing for IE6.

Comment 2

[Laura Forrest]

Hey Frank - I see that Steven made changes to this button in Bug 663988 but it would help if you could upload a new screenshot showing what the current button looks like to IE6 users.

Comment 3

[Frank Yan (:fryn)]

Attachment: screenshot

Comment 4

[Frank Yan (:fryn)]

(In reply to comment #2)
> Hey Frank - I see that Steven made changes to this button in Bug 663988 but
> it would help if you could upload a new screenshot showing what the current
> button looks like to IE6 users.

Absolutely.

Before bug 663988 fix:
https://bug663988.bugzilla.mozilla.org/attachment.cgi?id=539026

After bug 663988 fix:
https://bug665261.bugzilla.mozilla.org/attachment.cgi?id=540622

The page background gradient also seems to be gone in IE6, which makes the broken background for the Mozilla logo much more glaring.
It would be fantastic if we were able to restore the gradient too.

Comment 5

[Steven Garrity [:sgarrity]]

Thanks for posting the screenshots Frank. I'm not sure why the stripe/gradient page background (not the button background) is missing in the second shot though. That should work in IE6 (and does in my testing setup here).

The green button part of screenshots is accurate though.

The reason the logo is on a solid green background in IE6 is that IE6 doesn't support alpha transparency in PNG images, but you can give a PNG a solid background color - which is what we do here. We could create an entirely separate image for IE6 we determined it wasn't worth the additional maintenance, and would be a large download, which could hurt the performance of the page.

Comment 6

[Frank Yan (:fryn)]

Attachment: download button

(In reply to comment #5)
> Thanks for posting the screenshots Frank. I'm not sure why the
> stripe/gradient page background (not the button background) is missing in
> the second shot though. That should work in IE6 (and does in my testing
> setup here).

I'm not sure either. I don't have an installation of IE6 available, so I've been testing the pages using https://browserlab.adobe.com

> The reason the logo is on a solid green background in IE6 is that IE6
> doesn't support alpha transparency in PNG images, but you can give a PNG a
> solid background color - which is what we do here.

As a front-end engineer myself, I understand.

> We could create an
> entirely separate image for IE6 we determined it wasn't worth the additional
> maintenance, and would be a large download, which could hurt the performance
> of the page.

The download-logo.png image is 20kB. The large png on the right is ~60kB. For the purpose of demonstration, I just created and attached a makeshift png for the entire download button, and it is only 37kB. The 17kB increase is negligible to the rest of the page resources.

How does the minimal work required for maintenance outweigh the benefits of converting more IE6 users to Firefox, so we can reduce the massive amount of effort web developers have to spend designing/coding for IE6?

Comment 7

[Alex Faaborg [:faaborg] (Firefox UX)]

>We could create an entirely separate image for IE6 we determined it wasn't worth >the additional maintenance

Getting a pixel perfect page to help convert IE6 users to a modern browser seems worth the maintenance.  This page, compared to all of the pages on the Web, is perhaps the one that actually really matters (well, also the Chrome and IE9 download pages).  I'm also interested in fixing bug 661063.  Overall it seems like the very purpose of mozilla.com is to successfully convert over IE users.

Comment 8

[James Long (:jlongster)]

(In reply to comment #7)
> >We could create an entirely separate image for IE6 we determined it wasn't worth >the additional maintenance
> 
> Getting a pixel perfect page to help convert IE6 users to a modern browser
> seems worth the maintenance.  This page, compared to all of the pages on the
> Web, is perhaps the one that actually really matters (well, also the Chrome
> and IE9 download pages).  I'm also interested in fixing bug 661063.  Overall
> it seems like the very purpose of mozilla.com is to successfully convert
> over IE users.

I just took a look at some metrics for mozilla.com. I don't use our stats dashboard very much, and it's quite complicated, so this could be wrong. But it looks like around 8% of our users are using IE6. That's more than I thought and it does convince me that we should put more effort getting our download pages looking better in IE6.

I'm not saying we should support IE6 all over mozilla.com, but I think the landing pages are important if 8% are using IE6. Maybe this can be a Q3 goal?

Feels like a low hanging fruit that could be a fun small project (improve button, use IE6 filter effects maybe?, etc)

Comment 9

[Steven Garrity [:sgarrity]]

Good points all around. I'll take this.

Using filter effects in IE doesn't really help us much due to the lack of alpha-transparency support in PNG images. I'll work something up though.

Comment 10

[Steven Garrity [:sgarrity]]

I've got a version setup locally that gets the IE6 appears to be almost the same as that of a modern browser. The catch is that it's a fixed-height button.

I'm CC'ing Pascal to see if that will be a problem for l10n. I know it used to be that we required a flexible height download button, but now we've dropped the file size, can we get away with a fixed height button in IE?

Comment 11

[Pascal Chevrel:pascalc]

fixed height may indeed cause an issue, can you send me your patch so as that I test locally on my side?

Comment 12

[Steven Garrity [:sgarrity]]

Attachment: Patch for IE6 download button

Pascal, here's the patch for the single-image fixed-height download button (image coming up next).

Comment 13

[Steven Garrity [:sgarrity]]

Attachment: Image for IE6 download button

Here's the image for the previous patch.

Comment 14

[Steven Garrity [:sgarrity]]

Pascal is going to test this out with locales, but that probably won't be done in time for the 2.10 cycle.

Comment 15

[Pascal Chevrel:pascalc]

* html a.download-link span.download-content {
+    background: url(/img/home/download-ie6.jpg) 0 0 no-repeat;
+}

It's hard to test a background image change without the image in the repo :)

Comment 16

[Steven Garrity [:sgarrity]]

(In reply to comment #15)
> * html a.download-link span.download-content {
> +    background: url(/img/home/download-ie6.jpg) 0 0 no-repeat;
> +}
> 
> It's hard to test a background image change without the image in the repo :)

The image is attached here in comment #13.

Comment 17

[Pascal Chevrel:pascalc]

I tested 20 locales in IE6 and it looks good for all of them

Comment 18

[Steven Garrity [:sgarrity]]

Implemented in trunk in r91561. Merged to stage in r91562.

Comment 19

[Steven Garrity [:sgarrity]]

A fix for sub-pages in trunk in r91571. Merged to stage in r91572.

That leaves two merges that will have to go from stage to production:  r91562 and r91572.

Comment 20

[raymond [:retornam] (inactive)]

qa-verified-trunk http://www-trunk.stage.mozilla.com/en-US/firefox/new/

Comment 21

[James Long (:jlongster)]

pushed to production r92138

Comment 22

[raymond [:retornam] (inactive)]

verified fixed http://www.mozilla.com/en-US/firefox/new/

Comment 23

[Frank Yan (:fryn)]

We regressed this.

Comment 24

[Frank Yan (:fryn)]

Attachment: www.mozilla.com viewed with IE6

This is www.mozilla.com viewed with IE6.
It looks broken and not trustworthy.

Comment 25

[Frank Yan (:fryn)]

Attachment: www.google.com/chrome viewed with IE6

For comparison purposes, this is www.google.com/chrome viewed with IE6.

Comment 26

[Chris More [:cmore]]

Steven Garrity: Can you check out what we need to be adjusted with the CSS to make the download button render better for IE6? 

The CSS is here: https://github.com/mozilla/bedrock/blob/master/media/css/sandstone/buttons.less

Comment 27

[Frank Yan (:fryn)]

(In reply to Chris More [:cmore] from comment #26)
> Steven Garrity: Can you check out what we need to be adjusted with the CSS
> to make the download button render better for IE6?

One idea off the top of my head is to make the button a flat background-color and large enough to surround the logo image, so IE6's lack of support for PNG transparency isn't apparent. Of course, only do this for IE6, via conditional comments or something. There are many ways to make the button look clickable, and I'll leave that up to Steven.

Here's an ASCII mockup just for fun:
 ____________________________
|  _____                     |
| /|-, \\   Firefox          |
||  L   }|                   |
||  \__/ |  Free Download    |
| \_____/   12.0 for Windows |
|____________________________|

Comment 28

[Steven Garrity [:sgarrity]]

We do something like Frank's suggestion from comment #27, but the background color in the PNG, and height of the container were a big off. Here's what it looks like if both are cleaned up:

http://labs.silverorange.com/files/mozilla/screenshots/mozorg-ie.png

This obviously isn't ideal, but I think it's a reasonable fall back for IE. The download button is still visually prominent and readable. 

We could hack in a completely different background image for IE6, but we were hoping to avoid that kind of extra layer of complexity.

Comment 29

[John Slater]

Comment #28 is fine with me. We shouldn't be spending a lot of time on beautiful designs for IE6 users...it just needs to be recognizable as a button and be clickable.

Thanks guys.

Comment 30

[Steven Garrity [:sgarrity]]

This tidy-up work is now in a pull request: https://github.com/mozilla/bedrock/pull/131

Comment 31

[[github robot]]

Commits pushed to dev at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/6952aaf7953450c1a9df61002453165d6761259e
Tidy up download button in IE (Bug 665261)

https://github.com/mozilla/bedrock/commit/2849ea178f3806e6fa954e7b4ad0c7101cd0415b
Merge pull request #133 from sgarrity/bug-665261-iedownload

Bug 665261 iedownload

Comment 32

[Steven Garrity [:sgarrity]]

This minor cleanup is in dev now - ready for qa: http://www-dev.allizom.org/en-US/firefox/new/

Raymond, it should look like the screenshot from #28 in IE6, and look the same as it does in production everywhere else.

Comment 33

[raymond [:retornam] (inactive)]

qa-verified-trunk http://www-dev.allizom.org/en-US/firefox/new/

Comment 34

[Steven Garrity [:sgarrity]]

This has been merged to master and will go into production with the next push.

Comment 35

[James Long (:jlongster)]

Raymond, how come you re-opened this?

Comment 36

[raymond [:retornam] (inactive)]

James this was re-opened in comment 23

Comment 37

[Steven Garrity [:sgarrity]]

raymond, it looks like it got reopened when you removed the qawanted keyword.

Comment 38

[David Lawrence [:dkl]]

Restoring unintended removal of in-testsuite flag.