811345 - [desktop] Headers 'n' Footers

Status: RESOLVED FIXED

(Marketplace Graveyard :: Consumer Pages, defect, P2)

Description

[Wil Clouser [:clouserw]]

Attachment: footer mock

UX has delivered new headers and footers for the desktop site.  Attached are jpgs and psds.  Please direct questions to mhanratty or mushi.

Comment 1

[Wil Clouser [:clouserw]]

Attachment: header mock

Comment 2

[Wil Clouser [:clouserw]]

Assets are too large to attach.  Let me know if this link doesn't work http://cl.ly/3i2A1H3u2y3E

Comment 3

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: "Support" has been added to the footer navigation

Updated 11/13/2012

Comment 4

[Michael Maslaney [:mmaslaney] ([e-mail])]

"Support" has been added to the extended footer.


https://www.dropbox.com/s/kw3lz01bxicdp33/Marketplace-%28Desktop%29-i01-Footers_v2_mm.psd

Comment 5

[Potch [:potch]]

cvan- add your notes and ?s for UX here?

Comment 6

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/zamboni/commit/be78a93
https://github.com/mozilla/zamboni/commit/f4d23fe

Comment 7

[Christopher Van Wiemeersch [:cvan]]

(In reply to Michael Maslaney from comment #4)
> "Support" has been added to the extended footer.

Where should this link to?

Comment 8

[Maureen Hanratty]

Support link should direct here (same as "Get Help" on the "Feedback" screen) https://support.mozilla.org/en-US/products/marketplace

Comment 9

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/zamboni/commit/b89cdeb 

What's left before I close this bug?

* drop-down menu
* blue gear icon on :hover
* retina gears
* retina magnifying glass (with smaller text)

Outside the scope of this bug, but worth addressing:

* breadcrumbs (bug TBD)
* buttons for search filters (bug 811356)

Comment 10

[Christopher Van Wiemeersch [:cvan]]

Added drop-down menu with updated gear icons:
https://github.com/mozilla/zamboni/commit/e36193f

What's left? New search icon - and that's all, I swear.

Comment 11

[Michael Maslaney [:mmaslaney] ([e-mail])]

Chris, do you need a retina optimized graphic for the "Search Icon"?

Comment 12

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/zamboni/commit/6fee38c

(In reply to Michael Maslaney from comment #11)
> Chris, do you need a retina optimized graphic for the "Search Icon"?

Nope, I got it from the .PSD. Thanks!

Comment 13

[Maureen Hanratty]

Attachment: Tall footer

Michael--is this how you intend the footer to look, i.e. the Mozilla footer makes up for the extra space, for a screen with little content?

Comment 14

[Michael Maslaney [:mmaslaney] ([e-mail])]

Yes it is, Maureen.

Comment 15

[Michael Maslaney [:mmaslaney] ([e-mail])]

Chris,

A couple of comments for the Dev Hub Footer

Rocket Icon

• Drop shadows should be set to 90°. Currently their coming from the upper left side.

• Adjust the space between the rocket and the headline to 17px or it's equivalent.

Header

• "Develop Apps for Marketplace should have a typographic measure of 22px/30px (size/line-height)

• "Visit the Developer Hub" should have a typographic measure of 14px/48px

Background

• Shading is off (too dark) and the shading is beveled instead of raised, please refer to the comps for reference

• Center the vertical divider between the header and navigation

• The top and bottom rules for the footer are off (making it look beveled, instead of raised), the top is missing a highlight and the bottom is missing a shadow.

Comment 16

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Reference for DevHub Footer

Comment 17

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Reference for DevHub Footer

Comment 18

[Michael Maslaney [:mmaslaney] ([e-mail])]

CORRECTION:

"Visit the Developer Hub" should have a typographic measure of 14px/30px*

Comment 19

[Christopher Van Wiemeersch [:cvan]]

The spacing and the width will be addressed when we move our desktop layouts to a width of 768px. We're currently keeping it at 600px until bug 811350 is completed so as to not regress the site during our weekly pushes.

Many thanks for the comments, and I'll be addressing them immediately!

Comment 20

[Christopher Van Wiemeersch [:cvan]]

(In reply to Michael Maslaney from comment #18)
> CORRECTION:
> 
> "Visit the Developer Hub" should have a typographic measure of 14px/30px*

Changing to those measurements shows this:
http://f.cl.ly/items/25140i3b1x190p0v361o/Screen%20Shot%202012-12-10%20at%2012.26.39%20PM.png

Comment 21

[Michael Maslaney [:mmaslaney] ([e-mail])]

Chris,

The leading (line-height) looks good, thank you.

Questions: 

• is "Visit the Developer Hub" font-size 14px? It looks like the same size as the 
  header, which should be 22px.

• I had to make a line break in the header because of the limited space available  
  for the admin footer. Are we still accommodating this screen?

• If we are able to set the header to one line, could we vertically center the text 
  with the rocket icon

Thanks, again.

Comment 22

[Christopher Van Wiemeersch [:cvan]]

(In reply to Michael Maslaney from comment #21)
> Chris,
> 
> The leading (line-height) looks good, thank you.
> 
> Questions: 
> 
> • is "Visit the Developer Hub" font-size 14px? It looks like the same size
> as the 
>   header, which should be 22px.

font-size/line-height:
14px/30px http://f.cl.ly/items/3C062G240F1X2Y0R2t0J/Screen%20Shot%202012-12-14%20at%2010.35.15%20AM.png
20px/26px http://f.cl.ly/items/1g3s243O2o1V3g46092b/Screen%20Shot%202012-12-14%20at%2010.35.43%20AM.png

Which looks closer to what we want?

> • If we are able to set the header to one line, could we vertically center
> the text 
>   with the rocket icon

We are, yep.

Comment 23

[Michael Maslaney [:mmaslaney] ([e-mail])]

Chris could we do this:

"Develop Apps for Marketplace"
font-size: 22px;
line-height: 30px


"visit developer hub"
font-size: 14px;
line-height: 30px

Could we also remove the underline from the link? Not sure if this is a branding requirement

Comment 24

[Christopher Van Wiemeersch [:cvan]]

Thanks, Michael! Addressed comments above, including font-size/line-height changes:

https://github.com/mozilla/zamboni/commit/2a88f30
https://marketplace-dev.allizom.org

(In reply to Michael Maslaney from comment #15)
> Rocket Icon
> 
> • Drop shadows should be set to 90°. Currently their coming from the upper
> left side.

That's a straight conversion of the rocket icon directly from the PSDs:

https://github.com/mozilla/zamboni-psds/blob/master/media/img/mkt/icons/rocket.psd
https://github.com/mozilla/zamboni-psds/blob/master/media/img/mkt/icons/rocket-2x.psd

I tried re-exporting them, but they ended up looking the same. Wonder what I'm doing wrongly?

> Background
> 
> • Center the vertical divider between the header and navigation

I'm not sure where - what do you mean?

Comment 25

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Updates to the background and footer

Chris,

Couple updates:

• Attached, updated Rocket Icon the dev footer.

• Updated color background (attached a screen shot for reference)


Main Background Gray:


url("../../img/mkt/grain.png?d99a08c") repeat scroll 0% 0% rgb(208, 213, 217);


Dev Footer Background Gray and top rule:


border-top: 1px solid rgb(183, 183, 183);


url("../../img/mkt/grain.png?d99a08c") repeat scroll 0% 0% rgb(216, 220, 224);


• Providing links to the updated category icons and their tile backgrounds

Icons:

https://www.dropbox.com/s/soe4xp2h9mc8sch/marketplace-icons-singles.psd

Icon Background Tiles:

https://www.dropbox.com/s/d7pi6ky04t8fvmx/Marketplace-%28Desktop%29-i01-Home_v2_mm.psd

Let me know if you need additional assets for the Category section.

Comment 26

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Icon

Comment 27

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Category Icons

Comment 28

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Background Comparison

Comment 29

[Christopher Van Wiemeersch [:cvan]]

Reopening to address comment 25 next week.

Comment 30

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/zamboni/commit/f1444be

You can view the changes at https://marketplace-dev.allizom.org

Michael: thanks for your new icons, your help, and your continued patience! (: