Closed
Bug 795976
Opened 12 years ago
Closed 11 years ago
Create new buttons
Categories
(www.mozilla.org :: General, defect, P1)
www.mozilla.org
General
Tracking
(Not tracked)
RESOLVED
FIXED
Future
People
(Reporter: matej, Assigned: tyronflanagan)
References
(Blocks 1 open bug)
Details
(Whiteboard: u=user c=ux p=2)
Attachments
(6 files)
We should update our buttons on the style guide and on our sites. Reference: http://mozilla.seanmartell.com/nothingtoseehere/guide-3_0005_6.jpg (There may be some other variants as well. Sean will add them once we've figured them out.)
Comment 1•12 years ago
|
||
+1 Would be great if we could get this done soon. Steven, what's the prognosis?
This is a bit of a blocker to bug 791061 - which I was hoping to roll out prior to the Engagement offsite on the 15th. Is this week possible?
Updated•12 years ago
|
Whiteboard: u=user c=ux p=2
Target Milestone: --- → Future
Comment 3•12 years ago
|
||
Assigning over to Steven. bug#791061 is almost ready to go. John, what's the timing here? Are we targeting to make these change in time for the offsite?
Assignee: nobody → steven
Comment 4•12 years ago
|
||
Hey Mike. Thanks for checking in. Upon further review, we actually need to make a few more design revisions, so we're not ready to start coding these. Also, the issue in bug 791061 has been cleared up (and no longer depends on these buttons), so having this resolved by next week is no longer critical. Will post the final button designs here when we have them.
Comment 5•12 years ago
|
||
Ty will be creating the final button designs, so am adding him here. Using http://mozilla.seanmartell.com/nothingtoseehere/guide-3_0005_6.jpg as a starting point, here's what we need: Desktop - big button with Firefox logo on it - example in the above mockup is a good starting point, but it needs to call out Free Download prominently (see http://www.mozilla.org/en-US/firefox/new/ for reference) - big button with no logo - same notes as above, just without the logo - little button with Firefox logo on it - also needs to call out Free Download (ex. http://www.mozilla.org/en-US/firefox/features/) - little button with no logo on it - same notes as above, just without the logo Mobile - big button with Firefox logo on it - example in the current mockup is a good starting point, but we need to add the word "Free" in there…perhaps "Free at Google Play" (Matej, please confirm the wording) - big button with no logo on it (http://www.mozilla.org/en-US/firefox/fx/ is a good starting point) - little button with Firefox logo (adding free messaging) - little button without Firefox logo (same changes) Ty, let us know when you think these will be ready...thanks!
Reporter | ||
Comment 6•12 years ago
|
||
For mobile we've been using "Get it free from Google Play." You can see it in use on a new button here: http://www.youtube.com/firefox (though the desktop button there is a one-off since we couldn't detect the user's OS).
Comment 7•12 years ago
|
||
Please note that using an italic font in the buttons will require pages to include the italic variant of the Open Sans web font, which will pull in another 60Kb or so. We can certainly do this, but if you're on the fence about the italics, know that there is a performance side-effect.
Reporter | ||
Comment 8•12 years ago
|
||
There's probably a good reason for this, but why can't the buttons be images vs. having live text on them? Or could they be a combination? So "Firefox" would be live, but "for Android" would be part of the image.
Comment 9•12 years ago
|
||
Having the buttons as images would also increase the file size. Let's try doing without the italics as a starting point and see how that looks. For what it's worth, our current buttons - ex. http://www.mozilla.org/en-US/firefox/new/ - don't have italics and seem fine to me. (Steven, thanks for flagging.)
Comment 10•12 years ago
|
||
(In reply to Matej Novak [:matej] from comment #8) > There's probably a good reason for this, but why can't the buttons be images > vs. having live text on them? Or could they be a combination? So "Firefox" > would be live, but "for Android" would be part of the image. We try to ensure that the download buttons display immediately upon page load, so the green background and key text are immediately visible while the download button logos and any other images/resources on the page load.
Updated•12 years ago
|
Blocks: download-buttons
Comment 11•12 years ago
|
||
I ran these buttons (see attached mockup) by Pascal for l10n issues and he brought up a few points: 1. Short locale codes ("EN-US") are kind of robotic - could we use actual language titles like "English (US)" or is that too much extra text? 2. The "Get it on Google Play" string can be quite long in some languages. German, for example: "Kostenlos aus dem Google Play Store" This probably won't work in the right-aligned text position.
Comment 12•12 years ago
|
||
I believe we'll need to work with L10N to get new strings as that "Get it on Google Play" is our standard. As mentioned in the style guide, it doesn't always have to be direct translations. As for the language titles, that'd take up more space so I'll have to know what the longest would be and work from that to adjust the design if that's the route we want to take.
Comment 13•12 years ago
|
||
By removing the word "download" and indicating it with a arrow (in some version) is fine for sighted users, but for screenreader users it's not clear what this link leads to. As an example, the link text for Mac OSX is. "Firefox for Mac OSX, EN (US)" that could easily be mistaken for a link to a page that describes Firefox for Mac OSX. It's a easy fix though, just add a non-visual element <span>Download </span> before "Firefox for Mac OSX."
Comment 14•12 years ago
|
||
I'll second comment 13 from a SEO point of view. I think a lot of people search for "download firefox".
Comment 15•12 years ago
|
||
Yeah, it's a bit confusing (apologies) but the mockup in comment #11 isn't quite right. In addition to needing to keep the word download as mentioned in the previous comments, we also need to keep the word free...tests have shown over & over that it really makes a difference when we make that clear. My notes in comment #5 still seem accurate when it comes to the content direction for this. I think we should update the buttons with the Sandstone-y visual tweaks, but we need to follow those guidelines.
Comment 16•12 years ago
|
||
Another note, we need a declination of those buttons for Aurora.
Comment 17•12 years ago
|
||
I believe this is blocking the implementation of the non en-US Social API download pages (Bug 808570). That said, any estimate on when this bug will be complete?
Assignee | ||
Comment 18•12 years ago
|
||
Im working on download buttons today through tomorrow. Will share them tomorrow folks :)
Comment 19•12 years ago
|
||
If you ever need more details or have specific questions, feel free to jump in #www to ask pascalc or me (if we're around).
Comment 20•12 years ago
|
||
Thanks Ty and Rik for the updates. Process Questions: 1. So then is this a creative bug, or a implementation bug? It's currently assigned to Steven, not Ty so I'm a bit confused. 2. I see this bug marked as "Future." Pending the designs being delivered to WebDev, what's the estimated "live" date of these new buttons? 3. Who "owns" this project? I'm not sure who would be best to answer these questions. Okay, that's all the project management I'll sprinkle into this bug for now. As you can tell I'm trying to get clarity around when this bug will ultimately go live, so that we can have a better sense into when our global Social API campaign is able to launch. Any insight into that would be great.
Comment 21•12 years ago
|
||
Thanks Laura. It's a little confusing, but right now the ball is in Ty's court. I've reassigned the bug to him to reflect that. Also to be clear, the plan is for Ty to update the Sandstone button designs to include the content details called out in comment #5. Then it's over to webdev to implement (but I can't answer your other questions beyond that, though).
Assignee: steven → tyronflanagan
Comment 22•12 years ago
|
||
I intend to work on the HTML/CSS/images implementation with Anthony when the design updates are confirmed.
Comment 23•12 years ago
|
||
OK - thanks for more clarity.
Assignee | ||
Comment 24•12 years ago
|
||
Quite the balancing act this :P Here is the design for the updated buttons based on the requests and feedback. I have tried to keep it light on copy and tried to keep them easier for L10N to modify. Kept with using only Open Sans (Regular) and got rid of any wordmarks or use of a second font face (i.e Georgia).
Assignee | ||
Comment 25•12 years ago
|
||
Here is the updated button on the /firefox/new page
Comment 26•12 years ago
|
||
Thanks Ty! These look good to me. As discussed with Jennifer, we'll want to test different versions soon to figure out the best possible combination but this does a nice job of bringing the current elements into a more Sandstoney look. Any other comments before we wrap up the design here?
Comment 27•12 years ago
|
||
Hi, Here are the string changes with l10n impact: The screenshot use 'Free download' with a lowercase d, we currently have 'Free Download' with an uppercase D, is the lowercasing intentional? The "What’s New" link is now called "Notes", can we use "What's New" or "Release Notes" that we already have translated and not a new term? Same with "Free from the Google Play Store" which was changed to "Get it Free from Google Play". Ideally, "Systems & languages" would be one of the variants we already have translated on the PHP site: All Systems & Languages Other Systems and Languages Other Platforms & Languages Also, I see that there is no OS indicated in the button, we no longer want to expose that information? Overall, if we can't reuse existing strings, I would need the full list of final strings soon so as to launch the translation of those in our 80+ languages. Thanks
Reporter | ||
Comment 28•12 years ago
|
||
(In reply to Pascal Chevrel:pascalc from comment #27) > Hi, > > Here are the string changes with l10n impact: > > The screenshot use 'Free download' with a lowercase d, we currently have > 'Free Download' with an uppercase D, is the lowercasing intentional? Yes, that was an intentional on my part. On the whole, we're trying to use a lot less capitalization of things like headers and titles in Sandstone. > The "What’s New" link is now called "Notes", can we use "What's New" or > "Release Notes" that we already have translated and not a new term? Not sure about this change, but I'm guessing we're trying to keep everything as short as possible. I'd prefer "Notes," but "What's New" also works for me. Ty, can you comment on this as well? > Same with "Free from the Google Play Store" which was changed to "Get it > Free from Google Play". I definitely want to keep this new wording, which we'll be using as our standardized line for download buttons pointing to Google Play. > Ideally, "Systems & languages" would be one of the variants we already have > translated on the PHP site: > All Systems & Languages > Other Systems and Languages > Other Platforms & Languages The current buttons already use "Systems & languages" (here, for example: http://www.mozilla.org/en-US/firefox/new/) so there's no change here. Do we not have that localized? Again, it's an issue of length. Let's keep it like this if we can. > Also, I see that there is no OS indicated in the button, we no longer want > to expose that information? That's another question for Ty (or John). > Overall, if we can't reuse existing strings, I would need the full list of > final strings soon so as to launch the translation of those in our 80+ > languages. > > Thanks
Assignee | ||
Comment 29•12 years ago
|
||
> > The "What’s New" link is now called "Notes", can we use "What's New" or > > "Release Notes" that we already have translated and not a new term? > > Not sure about this change, but I'm guessing we're trying to keep everything > as short as possible. I'd prefer "Notes," but "What's New" also works for me. > > Ty, can you comment on this as well? I went with "Notes" instead of "What's new" to keep each link short. Will this change translate poorly though? ----- > > Also, I see that there is no OS indicated in the button, we no longer want > > to expose that information? > > That's another question for Ty (or John). Was trying to avoid having too many elements on the button itself. We already include OS detection, which I feel its something we no longer need to expose on the button.
Comment 30•12 years ago
|
||
What's the next step here?
Comment 31•12 years ago
|
||
(In reply to John Slater from comment #30) > What's the next step here? I had been waiting on Rik's before getting into this, but I'm going to start working on implementation now. So far we have the following button variations: size (large/small) icon (with/without firefox icon) platform (desktop/android) I think we also need to address the channel (release, Beta, Aurora). There's also Nightly, but I don't think our buttons actually address nightly downloads, so we might be able to ignore that for now. Ty, can you address the release/beta/aurora variations?
Updated•12 years ago
|
Priority: -- → P1
Comment 32•12 years ago
|
||
Rik, are you done with this or should we get pmac/mkelly to pick up the python side of things? I've been working on the CSS/images, but can only go so far there.
Comment 33•12 years ago
|
||
I wrote up some of the basic requirements for the download buttons. I think we can simplify the templates quite a bit: https://etherpad.mozilla.org/download-buttons
Comment 34•12 years ago
|
||
I won't be able to work on this given the level of coordination that it requires. Sorry.
Comment 35•12 years ago
|
||
Thanks for letting us know, Rik. Steven, do you need another WebDev-er to help here?
Comment 36•12 years ago
|
||
Ty and John - Do we have final art for the buttons? If not, when do you expect to have design complete? Thanks!
Comment 37•12 years ago
|
||
Ty, can you update?
Comment 38•12 years ago
|
||
I've been working on the assumption that the attached design is final (though it's not too late for changes). I'm attaching the PSD version here too. When this is confirmed as final, we should post the PSD to the assets.mozillalabs.com site and keep it updated there. With Rik on another team now (fare thee well, Rik!), pmac is taking on the coding portions of implementing these. We can either close out this bug and open a new bug for implementation, or reassign this to pmac.
Comment 39•12 years ago
|
||
I created an implementation bug#820937 to simplify things and assigned to pmac.
Comment 40•11 years ago
|
||
Buttons are done currently being implemented.
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Comment 41•11 years ago
|
||
Commits pushed to master at https://github.com/mozilla/bedrock https://github.com/mozilla/bedrock/commit/28b2f1073c203b1222b40b4bef75b809dd4fcd8d Add new download button styles from Bug 795976 https://github.com/mozilla/bedrock/commit/294324ecc82b9657a3f091941ecbc59b1c107192 Adjustments to home page for new download buttons (Bug 795976) https://github.com/mozilla/bedrock/commit/6f4200f44204f18aa337d5a00443b01546809e95 Adjustments to /fx page for new download buttons (Bug 795976) https://github.com/mozilla/bedrock/commit/f7f3e6a9458657029154336d1f5fcde394f56736 IE6 & IE7 fixes for new download buttons (Bug 795976) https://github.com/mozilla/bedrock/commit/fdeb1b5f19d853074097113d992d5cdeedc754f4 Drop custom button styles from /firefox/partners Bug 795976 https://github.com/mozilla/bedrock/commit/e071823f5525af87ec16cec32dcdf0738c3a9ee2 Fix logo in mobile layout of /firefox/new Bug 795976
Comment 42•11 years ago
|
||
The button looks a bit broken on production in Firefox, Chrome, Safari. The Firefox logo is not well positioned see attachment
Comment 43•11 years ago
|
||
I agree Raymond - the one on the homepage doesn't look quite right.
Comment 44•11 years ago
|
||
Yeah, image caching issues. I'll update the CSS with some cache-busting suffixes.
Comment 45•11 years ago
|
||
Commits pushed to master at https://github.com/mozilla/bedrock https://github.com/mozilla/bedrock/commit/60c168a540d829fbec0d1345789b1b6683f6ef4d Bug 795976 - change image URLs to force the CDN to refresh https://github.com/mozilla/bedrock/commit/a60c18ecb7b42fe5f52aa473b116562d4f9081f5 Merge pull request #672 from craigcook/bug-795976-new-buttons Bug 795976 - change image URLs to force the CDN to refresh
Comment 46•11 years ago
|
||
You need to log in
before you can comment on or make changes to this bug.
Description
•