Implement notification design spec

[Verdi]

More in https://drive.google.com/open?id=0B2y0OSD97CR6QnpHVG1lODRrQ3M

[schalkneethling]

Some of the font sizes mentioned are way to small and pose an accessibility issue. The light gray on white is to low contrast and again poses a11y issues.

With regards to the button on the right. This is clearly designed for people with large viewports and, looking at the general audience, it would make more sense to have the button below the copy from the start.

Thoughts?

[Verdi]

• The light gray text is meant to be incidental but it couldn't hurt to increase the contrast. I'll update that.
• The 12px font size is what we use for snippets and things like tab labels, menu item labels, etc.
• The spec is for a 1366 wide screen which is the most common (more than 80% have a screen at least this wide). But the design can be responsive down to about 900px by dropping the "Welcome to Firefox" text, making the outside margins smaller and bringing the progress and close buttons closer to the content. For a browser window smaller than 900px we can just crop the snippet (or maybe make it scroll horizontally). Below this point many websites and apps scroll so the user is probably trying to do something else besides reading and acting on the notification.
  • 1024 wide screen
  • Smaller browser window

[Verdi]

"Progress Pill" and Welcome to Firefox

• The background color on the pill is the same as the "Welcome to Firefox" text - #767676
• It's border radius is 12px.
• The whole notification is 120px tall and the pill & text is centered vertically.
• When the space between the end of "Welcome to Firefox" and the notification icon to the right is less than 50px, drop "Welcome to Firefox"

[Verdi]

Notification Content:

• The icon is 64X64 max with 15px between it and the text to the right.
• The text box should be 420px wide with 15px between it and the button to the right.
• The button text should be on one line and have 15px of padding left and right. The button itself is 40px tall.
• This whole section should be centered vertically and horizontally.

[Verdi]

Close button:

• Only visible when the pointer is over the notification

  • The close button has it's own hover state:

[schalkneethling]

Posted by @jenniferdavidson

Design Request: Raccoon face for private browsing

@mart3ll @verdi Is it too late to ask for a new asset? I'm thinking it would be neat to include the private browsing raccoon face, instead of the emoji style face on the private browsing notification. What do you both think?

@schalkneethling

As we still need to get the GA things done and incorporated, we have some time but, it will depend on Sean's availability. Easy for me to update.

[schalkneethling]

Posted by @jenniferdavidson

Design request: Add a Firefox logo or fox icon

This one is for Michael. @verdi Can we add some fox icon or Firefox logo on the notification design? I'm just noticing that the only branding we have is the words 'Welcome to Firefox', and I'm wondering if we'll see the same issues as Onboarding v1.1 where the branding wasn't clear enough and participants weren't sure that it was actually Firefox serving up these notifications.

[Verdi]

RC6: The height of the notification bar is 163px - should be 120px.

[Verdi]

RC6: The "pill" and "Welcome to Firefox" is 245px from the left edge - should be 50px.

[Verdi]

RC6: Drop "Welcome to Firefox" when it's closer than 50px to the notification icon to the right.

[Verdi]

RC6: Everything in the notification should be centered vertically but it's not.

[Verdi]

RC6: Icon, notification copy and button should be centered horizontally as a group but they're not.

[Verdi]

RC6: Button is 48px high - should be 40px.

[Verdi]

RC6: Button text should be Segoe UI Bold, 12px.

[Verdi]

RC6: Button color should be #0094FB, border color should be #006ECF, and the radius should be 2px.

[Verdi]

RC6: Please make the headline font smaller and reduce the bottom margin.

[Verdi]

RC6: Close button should be 56px from the right; 50px for the hover version.

[schalkneethling]

All other copy is sans-serif and the standard across Mozilla(for now) is Open Sans so, wonder we should just use Open Sans instead of Segoe UI Bold? With that said, including a font for just one piece of copy is going to increase the size of the add-on, and I am not sure if the payoff is large enough. Thoughts?

[Verdi]

So this is not supposed to be a web property, it's part of the product so I wanted to use system default fonts. Would we have to include Segoe UI? Wouldn't it be on the user's computer? We can use open sans as a fallback for the odd case where it fails for some reason. @pdolanjski are we going to have Windows XP in this test (they have a different default font)?

[schalkneethling]

Would we have to include Segoe UI? Wouldn't it be on the user's computer?

If we feel confident enough that it would be on the users computer then no, I can just specify that, with a fallback to sans-serif

[pdolanjski]

No Windows XP. XP users are now on the ESR 52 release and won't get future versions.

On Tue, Apr 11, 2017 at 11:23 AM, Schalk Neethling <notifications@github.com

wrote:

Would we have to include Segoe UI? Wouldn't it be on the user's computer?

If we feel confident enough that it would be on the users computer then no, I can just specify that, with a fallback to sans-serif

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mozilla/onboard/issues/46#issuecomment-293298667, or mute the thread https://github.com/notifications/unsubscribe-auth/AFFXg5velRj9ZT2sjp6p-SQd7jepubEnks5ru5rqgaJpZM4MyDxl .

[schalkneethling]

Font change landed in https://github.com/mozilla/onboard/pull/88

[Verdi]

Here's a few last tweaks:

[schalkneethling]

@Verdi How does this look?

And on hover

[schalkneethling]

Missed the bold of the copy on the button. I have added that locally.

[schalkneethling]

Also, should we bump the font size and letter spacing a little now that it is bold?

Before

After

[Verdi]

Almost there

[schalkneethling]

@Verdi Here are a couple of screen shots. To make it as responsive as possible, I had to make a few calls here and there with regards to width, positioning etc. Let me know your thoughts.

[Verdi]

Mainly the button needs to go in the same group as the icon and text and then that group gets centered.

[schalkneethling]

Gotcha, seems like you want the whole thing generally more left aligned(except for the x out button) rather then taking about the entire available space. I will make this update an cut a new release.

Thank you for your continued testing and feedback.

[Verdi]

Hi Schalk - I was looking at the notification markup and css with another mozillian and we thought it might be easier to get the right alignment (progress on left, icon+text+button centered, close on the right) and make it responsive by using grid. Here's a codepen example - https://codepen.io/jensimmons/pen/RVNBdo - this seems to work pretty well.

[schalkneethling]

Thanks @Verdi it looks great, will update.