1371870 - Firefox Developer Edition page updates

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, enhancement)

Description

[Eric Renaud [:erenaud]]

- Update copy (localizable strings, l10n not required for launch) 

- Update images  

- Add side-by-side CTA section

Comment 1

[Maciej Pluta]

Team, this is the link to final and approved assets:

https://drive.google.com/drive/folders/0B1WOZUXv8dZuQmxoZXBQSWU5UUE?usp=sharing

Note: I'm missing GIF asset here: Final Creative/Debugger GIF, which will be added shortly and I will comment to confirm. 

Please feel free to reach out in case you'd have any questions.

Comment 2

[Maciej Pluta]

Team,

All final assets are ready under this link:

https://drive.google.com/drive/folders/0B1WOZUXv8dZuQmxoZXBQSWU5UUE?usp=sharing

Here is the mock up of the site:
https://thebrigade.invisionapp.com/boards/NQ39QA4T743HG/

From our POV this is ready for Moz.org. Please feel free to reach out in case of any questions.

Comment 3

[Eric Renaud [:erenaud]]

Craig, please let us know you think you'll have this PR in for review

Comment 4

[Maciej Pluta]

Hey Craig, please also let me know once the site is up on demo. My team needs to update stakeholders before we go live. Ideally, we would like to give a final go live approval, once our stakeholders are informed.

Comment 5

[Craig Cook (:craigcook)]

Work in progress on demo: https://bedrock-demo-craigcook.us-west.moz.works/firefox/developer/

Main thing still unfinished as of this writing is the download/newsletter block at the bottom but I should have that done later today.

I have a question about the three "value proposition" blurbs (Modernize, Customize, Optimize) and where they best belong on the page. The mockup has them under the grid image but the copy seems to refer to dev tools in general, not just the grid inspector. If we move them under the debugger image, it also doesn't seem right because it talks about responsive design and not specifically about the debugger. The copy deck implies they're somewhere below both

A few options:

1) rewrite those three blurbs so they're three points about the grid inspector specifically, 
2) move them under debugger and write three points about debugger specifically,
3) do both, and have three points about each feature,
4) remove them entirely

Comment 6

[Maciej Pluta]

Thank you Craig. Here is our feedback

- Mozilla nav "Download Firefox" competes with Developer Edition download button. Can we remove the nav until we figure out how the download CTAs work together more nicely?
- 3 value prop blurbs should be listed in the main hero box above the CSS Grid gif (to be exact: add a little space below main hero "Firefox Developer Edition automatically sends feedback to Mozilla. Learn more" and please move 3 value props there, so they are in the main hero section)
- GIFs do we want these to loop continuously? They stop looping after a little bit
- We want the links to TRY CSS GRID NOW and LEARN MORE ABOUT DEBUGGER and all links to open a new tab
- SPEAK UP link should go to Devtools Discourse page at this link: https://discourse.mozilla-community.org/c/devtools
- GET INVOLVED link should go to this GitHub repo for devtools: https://devtools-html.github.io/

Comment 7

[Craig Cook (:craigcook)]

(In reply to Maciej Pluta from comment #6)

> - Mozilla nav "Download Firefox" competes with Developer Edition download
> button. Can we remove the nav until we figure out how the download CTAs work
> together more nicely?

Rather than remove the entire nav I've hidden just the download button. If that's not enough we can still remove the whole global nav but should then replace it with some other minimal navigation (which I know we discussed previously but once I started building the page just including the global nav was simpler).


> - 3 value prop blurbs should be listed in the main hero box above the CSS
> Grid gif (to be exact: add a little space below main hero "Firefox Developer
> Edition automatically sends feedback to Mozilla. Learn more" and please move
> 3 value props there, so they are in the main hero section)

Done.


> - GIFs do we want these to loop continuously? They stop looping after a
> little bit

They should be looping forever. Perhaps it's something in your browser? There's a setting somewhere in Firefox to prevent inline animations from playing, and in other browsers you can usually hit Esc to stop animations (that used to work in Firefox also to but was removed a while back).

Or are you saying we should *not* make them loop? I can set it to repeat a set number of times and then stop if that's preferable.


> - We want the links to TRY CSS GRID NOW and LEARN MORE ABOUT DEBUGGER and
> all links to open a new tab

I would recommend against this because it's usually a bad user experience in practice. People who want to return to the previous page will use the browser's back button, and a new window/tab breaks that history and can seem to trap the user in a window they can't return from. It cuts off the path they originally followed and they have to find a new way back to where they were. The best way to prevent that trap is to make it really explicit when clicking a link will open a new window, e.g. a clear notice like "This link will open a new window," and that's not great because mostly discourages people from clicking links. Furthermore, anyone who leaves the page and does *not* use the back button to return likely has no desire to return anyway and will continue to browse in the new window as if nothing happened. Hence, opening links in a new tab is bad for people who actually want to come back and does very little to bring back the people who don't.

But we can do it if you really insist...


> - SPEAK UP link should go to Devtools Discourse page at this link:
> https://discourse.mozilla-community.org/c/devtools
> - GET INVOLVED link should go to this GitHub repo for devtools:
> https://devtools-html.github.io/

Done.

I've also finished styling that bottom section and I'm still doing some cross-browser testing and little bits of code tidying but I think it's pretty close to complete at last. We should be able to get it live first thing next week, pending final review and approval.

Comment 8

[alainez]

Craig...thanks! Some comments in the NAV, New Tab and Value props section inline below. 

(In reply to Craig Cook (:craigcook) from comment #7)
> (In reply to Maciej Pluta from comment #6)
> 
> > - Mozilla nav "Download Firefox" competes with Developer Edition download
> > button. Can we remove the nav until we figure out how the download CTAs work
> > together more nicely?
> 
> Rather than remove the entire nav I've hidden just the download button. If
> that's not enough we can still remove the whole global nav but should then
> replace it with some other minimal navigation (which I know we discussed
> previously but once I started building the page just including the global
> nav was simpler).

The Mozilla nav is very distracting. When I land on the page all my eye wants to do is see what's happening in the white nav above the content. I'd love to see just a clean devtools experience here and that means removing the nav until we figure out how to make those components work better together. Can we do?
>
> 
> > - 3 value prop blurbs should be listed in the main hero box above the CSS
> > Grid gif (to be exact: add a little space below main hero "Firefox Developer
> > Edition automatically sends feedback to Mozilla. Learn more" and please move
> > 3 value props there, so they are in the main hero section)
> 
> Done.
> 
Can you make the words Modernize Customize Optimize bold so that they stand out from the blurb?
> 
> > - GIFs do we want these to loop continuously? They stop looping after a
> > little bit
> 


> They should be looping forever. Perhaps it's something in your browser?
> There's a setting somewhere in Firefox to prevent inline animations from
> playing, and in other browsers you can usually hit Esc to stop animations
> (that used to work in Firefox also to but was removed a while back).
> 
> Or are you saying we should *not* make them loop? I can set it to repeat a
> set number of times and then stop if that's preferable.
> 
> 
> > - We want the links to TRY CSS GRID NOW and LEARN MORE ABOUT DEBUGGER and
> > all links to open a new tab
> 
> I would recommend against this because it's usually a bad user experience in
> practice. People who want to return to the previous page will use the
> browser's back button, and a new window/tab breaks that history and can seem
> to trap the user in a window they can't return from. It cuts off the path
> they originally followed and they have to find a new way back to where they
> were. The best way to prevent that trap is to make it really explicit when
> clicking a link will open a new window, e.g. a clear notice like "This link
> will open a new window," and that's not great because mostly discourages
> people from clicking links. Furthermore, anyone who leaves the page and does
> *not* use the back button to return likely has no desire to return anyway
> and will continue to browse in the new window as if nothing happened. Hence,
> opening links in a new tab is bad for people who actually want to come back
> and does very little to bring back the people who don't.
> 
> But we can do it if you really insist...

I have a different opinion of new vs current tabs link but we have been using the current tab link in /developer for the past few years and no complained so I think we should do as you suggest : )
> 
> 
> > - SPEAK UP link should go to Devtools Discourse page at this link:
> > https://discourse.mozilla-community.org/c/devtools
> > - GET INVOLVED link should go to this GitHub repo for devtools:
> > https://devtools-html.github.io/
> 
> Done.
> 
> I've also finished styling that bottom section and I'm still doing some
> cross-browser testing and little bits of code tidying but I think it's
> pretty close to complete at last. We should be able to get it live first
> thing next week, pending final review and approval.

Comment 9

[Craig Cook (:craigcook)]

(In reply to alainez from comment #8)

> The Mozilla nav is very distracting. When I land on the page all my eye
> wants to do is see what's happening in the white nav above the content. I'd
> love to see just a clean devtools experience here and that means removing
> the nav until we figure out how to make those components work better
> together. Can we do?

I've removed the full navbar and replaced it with the old basic nav, and no longer with a white background. This deviates from the common branding we're moving toward but I suspect in the near future this page should get the same treatment as our other product pages, so this is already something of an interim design and we can get away with being different.


> Can you make the words Modernize Customize Optimize bold so that they stand
> out from the blurb?

Done.

Comment 10

[Craig Cook (:craigcook)]

Attachment: Github pull request https://github.com/mozilla/bedrock/pull/4957

Comment 11

[alainez]

Craig - this looks good. 

I have one small copy change from devtools.

In the debugger section, please...

Change: Debug Firefox, React and Ember experiences with the “go anywhere” debugger
To: Debug Firefox and framework apps built on React and Ember with the "go anywhere" debugger

Thanks! Let me know if you have any questions.

Comment 12

[Maciej Pluta]

Thank you Craig and the team! TL&I would like to share go live approval for this Thursday (7/13). Please confirm once the site is live.

Comment 13

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/38d467aa1af4f339d609c997fe44c3e38b58bb5d
[fix bug 1371870] Redesign Firefox Dev Edition page

https://github.com/mozilla/bedrock/commit/e557c8b41a7be011980d0d2435cf0a4ee92c7a18
Merge pull request #4957 from craigcook/bug-1371870-developer-edition-redesign

[fix bug 1371870] Redesign Firefox Dev Edition page