595279 - Add Firefox 4 for developers link to main MDN page

Status: VERIFIED FIXED

(developer.mozilla.org Graveyard :: Wiki pages, defect)

Description

[Eric Shepherd [:sheppy]]

We need a link to:

https://developer.mozilla.org/en/Firefox_4_for_developers

Added to the main page, prominently positioned.

Comment 1

[Jay Patel [:jay]]

I'll update this bug next week with the mockup of what we need for this bug.  It'll be a simple addition to the sidebar with a promo for Firefox 4 for Dev link + a bunch of "quicklinks" that have been requested in the feedback so far.

Minor change we can get on staging for a quick round of testing and then push to production during the week.

Comment 2

[Jay Patel [:jay]]

We might want to get this one bug fixed before we ship 0.9.1, so I will try to get some copy and design together by next week so we can try to push this out ASAP.

Comment 3

[Fred Wenzel [:wenzel]]

Hey Jay, I can help with this. Please assign the bug back to me when you've got an idea where to put the link. Thanks!

Comment 4

[Jay Patel [:jay]]

Attachment: new mdn front page mockup v1

I don't have the creative skills to make a clean mockup or the final design files, but this attachment shows what I want the home page to look like.  This mockup includes a few changes also noted in bug 602093,

Most of the creative assets should be in the .psd files we used to build the original site out.

Comment 5

[Jay Patel [:jay]]

Adding Chowse to help clean up my mockup and put together something webdev can work with.

Comment 6

[Chris Howse [:chowse]]

Attachment: MDN Front Page Mock-up v2

Here's an updated mock-up w/ Jay's changes. I'll upload the accompanying PSDs shortly.

There are a few issues I hit on when putting this together:

* There's a bit of redundancy between the 'Popular Docs' block and the
  initially-visible 'Docs' tab below the main promo block. With the Promo tab
  shrinking in height, this could make them both visible above the fold.

* By shrinking the Promo block in height, the background images may need to be
  resized and recropped. I don't have the originals to do this with, though.

* With its added content, the sidebar is now as tall (if not taller) than the
  main column, even before adding back the Twitter feed. I'm tempted to simply
  remove it on the front page, or reduce it to a single follow link.

Comment 7

[Jay Patel [:jay]]

(In reply to comment #6)
> Created attachment 484358 [details]
> MDN Front Page Mock-up v2
> 
> Here's an updated mock-up w/ Jay's changes. I'll upload the accompanying PSDs
> shortly.
> 
> There are a few issues I hit on when putting this together:
> 
> * There's a bit of redundancy between the 'Popular Docs' block and the
>   initially-visible 'Docs' tab below the main promo block. With the Promo tab
>   shrinking in height, this could make them both visible above the fold.

I would rename the sidebar block "Quick Reference" and then make the News & Updates tab the default view for the home page.  That way the Docs tab is hidden and if someone clicks on it, they can see all the other links to the docs.
> 
> * By shrinking the Promo block in height, the background images may need to be
>   resized and recropped. I don't have the originals to do this with, though.

Austin:  Would you be able to crop/resize the bg images?  Or just use the same, but have some of the images just hidden from view if placed with absolute positioning to the upper left of the block?
> 
> * With its added content, the sidebar is now as tall (if not taller) than the
>   main column, even before adding back the Twitter feed. I'm tempted to simply
>   remove it on the front page, or reduce it to a single follow link.

Could we just shorten the Twitter block to show 3-4 tweets?  I want to add a "Latest Discussions" block below the tabbed block for forum threads in the next 0.9.2 release, so that should fill in the extra space in the main column eventually.

Does that all work for you guys?

Comment 8

[Austin King [:ozten]]

(In reply to comment #7)
> Austin:  Would you be able to crop/resize the bg images?

We should get the original assets. I *can* resize the background image in the Gimp, but it will be higher quality if @chowse does it from the original vector graphics.

This design should work with variable higheth content, as this box will probably grow and shrink over time. Maybe fade out the bottom of the grey Mozhead?

Comment 9

[Jay Patel [:jay]]

(In reply to comment #8)
> (In reply to comment #7)
> > Austin:  Would you be able to crop/resize the bg images?
> 
> We should get the original assets. I *can* resize the background image in the
> Gimp, but it will be higher quality if @chowse does it from the original vector
> graphics.

The .psd is now available here: http://people.mozilla.com/~jpatel/mdn/assets/leetom/

The "home-final" should have layers with each of the 4 rotating bg images... I am fine with just cropping the bottom off.  I think the top 2/3 of each image look fine... but if Chowse wants to crop the best parts out of the complete image, that's good too.
> 
> This design should work with variable higheth content, as this box will
> probably grow and shrink over time. Maybe fade out the bottom of the grey
> Mozhead?

Yeah, that block was designed a bit large to handle variable content... and it was fixed size.  If we want to and can do so with the current images to make it variable height, I'm good with that. 

We plan to swap out those images and content from time-to-time, so whatever will be the best long-term solution is what we should do.

Comment 10

[Chris Howse [:chowse]]

Attachment: MDN Front Page Mockup v3

Comment 11

[Jay Patel [:jay]]

(In reply to comment #10)
> Created attachment 484406 [details]
> MDN Front Page Mockup v3

That looks awesome!  Thanks Chowse.

Comment 12

[Chris Howse [:chowse]]

(In reply to comment #7)
> I would rename the sidebar block "Quick Reference" and then make the News &
> Updates tab the default view for the home page.  That way the Docs tab is
> hidden and if someone clicks on it, they can see all the other links to the
> docs.

These seems reasonable. I'd change the order of 'Docs' and 'News' tabs if we do this though (there were font issues when doing this with the original PSDs, so the mocks still have the original tabs).

> Could we just shorten the Twitter block to show 3-4 tweets?

This is fine... it still hangs lower than the main column (even w/ the News tab open), but it's a small difference, well below the fold, and the last element before the footer, so I don't think it matters much.

We can discuss how the Latest Discussion block will fit into this at some point later.

(In reply to comment #8)
> This design should work with variable higheth content, as this box will
> probably grow and shrink over time. Maybe fade out the bottom of the grey
> Mozhead?

Are you referring to the Promo block (School of Webcraft, Add-on Builder, etc.) or the tabbed block (News, Docs, etc.)?

If the former, I don't think a variable-height block would work with the carousel. We could use a different type of control that works better with variable sizes (e.g. tabs) or we could arrange the text differently in each slide so that it fits better w/ the block's size. For 0.9.1, though, resizing the backgrounds is probably the quickest solution.

If the latter, I don't see a problem w/ the current design. Making the tab control change height isn't unreasonable, especially if the content is taller than one page. A fixed height would be beneficial if we could fit all the content in one page (i.e. the tabs would still be accessible while viewing the contents), but that would re-introduce the sidebar height issue above. I'd say defer this until 0.9.2.

Comment 13

[Chris Howse [:chowse]]

PSDs w/ the new promos, sidebar, and layout:
http://people.mozilla.com/~chowse/drop/mdn/home/v1/moz-dev-home-update.psd.zip

Comment 14

[Austin King [:ozten]]

(In reply to comment #13)
I'll give that a stab soon.

Comment 15

[Austin King [:ozten]]

(In reply to comment #13)
@chowse - The Gimp isn't cutting it. Can you slice these? Thanks!

Comment 16

[Austin King [:ozten]]

Okay, code up V3. @chowse is going to get me exact details for gradients and any fonts I got wrong.

@jay some feedback and questions:

In general, we should attach copy to this bug, so I don't retype it from mockups and designer can copy/paste from it. Having a style guide and/or saving out an annotated mockup would speed up production work considerably.

Popular Docs
- Developing for Mobile - link? I put /en-US/mobile

Be heard box - I need some clues, again I don't have Photoshop... made an approximate version. (chowse to get me details)

- link? I put it to https://developer.mozilla.org/forums/viewforum.php?f=3

Comment 17

[Chris Howse [:chowse]]

@ozten: Here's the formatting for the 'Be Heard' block (once you substitute for the correct selectors):

#outer-block {
   border: 4px solid #f8d575;
   boz-shadow: 0 3px 0 #ce9757, inset 0 1px 1px rgba(0,0,0,.4);
   background: radial-gradient(center 90deg, circe farthest-side, #f8b82f, #f5a91f);
   padding: 18px;
   text-align: center;
}

#heading {
   font-family: League Gothic;
   font-size: 44px;
   color: #fff;
   text-shadow: 0 4px 0 #934d09;   
}

#tagline {
   font-family: Georgia;
   font-size: 11px;
   font-weight: bold;
   font-style: italic;
   line-height: 13px;
   color: #630;
   margin: 13px 0 10px 0;
}

#button {
   width: 133px;
   padding: 13px;
   background: linear-gradient(-90deg, #f2bf50, #f9e5ad);
   box-shadow: ;
   box-sizing: border-box;
   font-family: Impact;
   font-size: 16px;
   color: #82460b;
}

Comment 18

[Austin King [:ozten]]

(In reply to comment #17)
Thanks!

Comment 19

[Jay Patel [:jay]]

(In reply to comment #16)
> Okay, code up V3. @chowse is going to get me exact details for gradients and
> any fonts I got wrong.
> 
> @jay some feedback and questions:
> 
> In general, we should attach copy to this bug, so I don't retype it from
> mockups and designer can copy/paste from it. Having a style guide and/or saving
> out an annotated mockup would speed up production work considerably.

Sorry... I meant to put in links and copy earlier, but Chowse asked about the copy and I just pointed him to the old Deki home page (which had all the topics that Sheppy recommended for the Quick Reference block with the links... see https://developer.mozilla.org/en) and I actually liked Chowse's copy better for the forums promo block, so left it as is.

I will do a better job with annotating mockups in the future... unfortunately, I did not get a style guide from Happy Cog, so will figure out what one should look like for MDN once we have these new pages together.

If anyone has experience putting that together, I can use the help. ;-)

> 
> Popular Docs
> - Developing for Mobile - link? I put /en-US/mobile

actually, can we please make that /en/mobile.  That is the docs home for mobile.

also, /en/Developing_add-ons for the "Developing Add-ons" link.

> 
> Be heard box - I need some clues, again I don't have Photoshop... made an
> approximate version. (chowse to get me details)
> 
> - link? I put it to https://developer.mozilla.org/forums/viewforum.php?f=3

Please link to the main forums page /forums, that should be fine.

Thanks!  And sorry for not having the copy and links ready for you.

Comment 20

[Jay Patel [:jay]]

Scratch what I said about the "developing add-ons" link in the quick reference.  Can we please point that to https://addons.mozilla.org/en-US/developers/.  That was decided earlier as the better link for Add-ons.  Thanks!

Comment 21

[Chris Howse [:chowse]]

(In reply to comment #17)
Forgot a few details:

#button {
   box-shadow: 0 3px 0 #914808;
   text-shadow: 0 -1px 1px rgba(255,255,255,.86);
}

Comment 22

[Austin King [:ozten]]

Awesome, thanks chowse and jay!

Comment 23

[raymond [:retornam] (inactive)]

qa-verified-staging http://mdn.staging.mozilla.com/en-US/

Comment 24

[raymond [:retornam] (inactive)]

qa-verified-staging https://developer-stage9.mozilla.org/en-US/

Comment 25

[raymond [:retornam] (inactive)]

verified fixed https://developer.mozilla.org/en-US/