Closed Bug 653827 Opened 13 years ago Closed 13 years ago

Redesign MDN home page and header

Categories

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

defect
Not set
normal

Tracking

(Not tracked)

VERIFIED FIXED

People

(Reporter: jay, Assigned: chowse)

References

()

Details

Based on feedback, we need to change the layout and content on the MDN home page and also rethink the header.  

For the layout change, here are a few things we want to accomplish:

1. Remove the big promo slider (or move it below the fold)
2. Add a welcome message and developer messaging at the top
3. Put blocks for major MDN features with CTAs (Docs, Demos, Learning)
4. Emphasis on Web developer docs
5. Making the newsfeed secondary

For the header redesign, we want to have 2 versions:

1. Home page header should be made shorter and simpler, but still provide access to all sections of the site.
2. Header for the rest of the site should be an improved version of the banner nav we use for Learning and Demo Studio.
Depends on: 654616
First draft of the home page and header:

http://cl.ly/3w2i1S0l3B122m3u2727

Some ideas I'm trying:

* A more spare, flat visual style. I'd like to reduce the visual noise on the
  front page while still retaining the MDN character.

* A single consistent nav header for all MDN pages. There is no reason this 
  can't be comprehensive w/o being cluttered, and this affords more room for
  more content/branding on the front page.

* A short but catchy headline to 1.) explain the MDN acronym, 2.) establish
  its reputation as a definitive source for developers, and 3.) communicate
  that it is community driven. The challenge is to do this in 3 lines (or
  2 lines and some subtext).

  * BTW, if we have any useful social proof to include here (pages,
    contributors, traffic, testimonials, etc.), please let me know.

* A simplified layout with much more weight given to in-demand content (e.g.
  web docs), but enough hints of more content to draw the user's interest down
  the page.


Should have a second iteration w/ more content later today, but wanted to see what people thought of the current direction.
I know this is an early wireframe mockup, so some of my suggestions might be premature.. so take my feedback with a grain of salt if you're already thinking about and working on some of the visual stuff.

> 
> * A more spare, flat visual style. I'd like to reduce the visual noise on the
>   front page while still retaining the MDN character.

I think this is fine for the normal content pages, but I liked having some depth to the page on the home page.  The subtle layers for the content blocks provided that without creating too much noice IMO.  (eg. the stacked border for the promo block https://developer.mozilla.org/en-US/)

It will be great to retain *some* of that for the new home page... but I do like the more flat feel overall.  Not sure that's an easy request to make, but if you have ideas, try something to add a little depth or visual style to the major blocks of content.

> 
> * A single consistent nav header for all MDN pages. There is no reason this 
>   can't be comprehensive w/o being cluttered, and this affords more room for
>   more content/branding on the front page.

I like the new Topics pulldown inline with the other main sections of the site.  The only thing I will say is that the header looks a bit boring in black and white.  With no subtle background, the colored topic nav items and the horizontal logo, I think the current mockup would be fine for the normal content, but for the home page I would like to see a little color up there.

Also, I would prefer to keep the full vertical logo in the header, but like that you have removed the "Mozilla Developer Network"... which seems better fit for the headline below.
> 
> * A short but catchy headline to 1.) explain the MDN acronym, 2.) establish
>   its reputation as a definitive source for developers, and 3.) communicate
>   that it is community driven. The challenge is to do this in 3 lines (or
>   2 lines and some subtext).

I think we'll be able to come up with a good tagline within 2 lines, with some subtext to provide some more details.  I'll work with the team to come up with something... though your placeholder text looks pretty good to me. ;-)

I like the 3 simple bullets to the right... so we'll have to think about how to make the most of that space with some solid CTAs.

> 
>   * BTW, if we have any useful social proof to include here (pages,
>     contributors, traffic, testimonials, etc.), please let me know.

Chowse: Include where exactly?  In the top section where the tagline is?  For the bullets I noted above?

> 
> * A simplified layout with much more weight given to in-demand content (e.g.
>   web docs), but enough hints of more content to draw the user's interest
> down
>   the page.

I like the organization of topics and think it might be worth making that table full-width if we can fit everything in nicely.   The reason for that is I would like to have the promos below that block to be visible above the fold... even if you can only see the top half.  I know that might be bad design, so if you have any suggestions let us know.  Not sure if it's bad practice to only show some of that content above the fold.

Thanks for the initial wireframes... looking forward to the next iteration.  

If anyone else has feedback, please chime in here.
(In reply to comment #2)
> > * A more spare, flat visual style. I'd like to reduce the visual noise on the
> >   front page while still retaining the MDN character.
> 
> I think this is fine for the normal content pages, but I liked having some
> depth to the page on the home page.  The subtle layers for the content
> blocks provided that without creating too much noice IMO.  (eg. the stacked
> border for the promo block https://developer.mozilla.org/en-US/)

I would like something to give a bit more contrast and depth to the content blocks, but I'm not convinced the isometric shadows are the way to do it. I will experiment a bit more with visual treatments once the layout and content are solid.


> > 
> > * A single consistent nav header for all MDN pages. There is no reason this 
> >   can't be comprehensive w/o being cluttered, and this affords more room for
> >   more content/branding on the front page.
> 
> I like the new Topics pulldown inline with the other main sections of the
> site.  The only thing I will say is that the header looks a bit boring in
> black and white.  With no subtle background, the colored topic nav items and
> the horizontal logo, I think the current mockup would be fine for the normal
> content, but for the home page I would like to see a little color up there.

I can experiment with some color treatments in the next iteration. But, with the exception of search, I actually WANT the top nav bar to be more subtle. The content on the front page will reiterate much of what's in the nav bar, but with more detail and personality. I'm treating the nav bar as a way of keeping the MDN brand present and providing shortcuts for those that want them.


> Also, I would prefer to keep the full vertical logo in the header, but like
> that you have removed the "Mozilla Developer Network"... which seems better
> fit for the headline below.

An earlier design did include the vertical logo:

http://cl.ly/1E2b093f3U3S1O0x1p3o

Unfortunately, it either forced the bar to become taller to accommodate it, or had to be laid over the bar, making it much too large.

> I like the 3 simple bullets to the right... so we'll have to think about how
> to make the most of that space with some solid CTAs.
> 
> > 
> >   * BTW, if we have any useful social proof to include here (pages,
> >     contributors, traffic, testimonials, etc.), please let me know.
> 
> Chowse: Include where exactly?  In the top section where the tagline is? 
> For the bullets I noted above?

It could be included in the bullet points, or it could appear below the headline (take http://www.kickstarter.com/ for example).

> > * A simplified layout with much more weight given to in-demand content (e.g.
> >   web docs), but enough hints of more content to draw the user's interest
> > down
> >   the page.
> 
> I like the organization of topics and think it might be worth making that
> table full-width if we can fit everything in nicely.   The reason for that
> is I would like to have the promos below that block to be visible above the
> fold... even if you can only see the top half.  I know that might be bad
> design, so if you have any suggestions let us know.  Not sure if it's bad
> practice to only show some of that content above the fold.

I'll give this a try, though I'm a little concerned it'll make the doc block to wide and narrow (unless we add more content). I agree keeping those promo blocks (partially) above the fold is important; I must have misjudged the viewport size in Omnigraffle. I may be able to bring them up in the current design by shrinking some gutters and losing some frames.
> I think this is fine for the normal content pages, but I liked having some
> depth to the page on the home page.  The subtle layers for the content blocks
> provided that without creating too much noice IMO.  (eg. the stacked border for
> the promo block https://developer.mozilla.org/en-US/)

I also like how the current home page splash does seem to pop out.

> I like the new Topics pulldown inline with the other main sections of the site.
>  The only thing I will say is that the header looks a bit boring in black and
> white.  With no subtle background, the colored topic nav items and the
> horizontal logo, I think the current mockup would be fine for the normal
> content, but for the home page I would like to see a little color up there.

I'm torn on this - I think Jay's right but I also think a consistent slim header is more important; not sure we want to change the header between home and the rest of the site.

> Also, I would prefer to keep the full vertical logo in the header, but like
> that you have removed the "Mozilla Developer Network"... which seems better fit
> for the headline below.

I actually like the smaller logo - as we add more content and features to MDN we want the header to use as little space as possible. We're already running into "fold" issues on the dev derby page.

> I like the organization of topics and think it might be worth making that table
> full-width if we can fit everything in nicely.   

I'm actually a fan of a full-page sidebar (like AMO and SUMO) - makes an easy spot for rotating CTA's and/or promo's.

> Thanks for the initial wireframes... looking forward to the next iteration.  
+1
MOAR MOCKS!

Homepage w/ fixups and more content:
http://cl.ly/0R362F3Y2H2M0b2H2E3j

Site header in various states:
http://cl.ly/3E0h1V1p222R1m2N1U2A

Site header variations:
http://cl.ly/223c093q0V0m0X1b0F2g

I'm actually keen on some header variations (search on the left, smaller text for the sections, sign up/log in more visible) and would love to know what you guys think.
I like these a lot. Are the variations different ideas for how it might look, or ways it would look under different circumstances? I presume the former but want to be sure.
sheppy: most of the header designs are options for how it might look.  there are a couple of mockups in there that show a variation for when a menu item is selected though.

chowse: i like the way the home page is shaping up.  there are also so many choices for the header, i'm going to think about those some more before providing feedback.
(In reply to comment #5)

> I'm actually keen on some header variations (search on the left, smaller
> text for the sections, sign up/log in more visible) and would love to know
> what you guys think.

I agree on the header variations you mention. I think mixed case is more readable for the section names, but would like to see the size bumped up a bit to compensate.
But only a little bit. Too much bigger and things get out of hand.
I love the pop-up for sign-in (like Twitter). Should/can we do the same for register?

I like the header text in Camel-Case more than ALL-CAPS.

I love the section titles on the left side of the "Docs for ..." box

It's not the design's fault, but the whole topics vs. sections thing is confusing. Almost like there's Addons Docs, Addons Demo's, Addons Learning, ... Mobile Docs, Mobile Demo's, Mobile Learning ... etc. We only have topic-specific content for Docs, and Mozilla's strategy for Mobile and even Addons is leaning more and more on Web - Open Web Apps for Mobile, and Jetpack for Addons. So, should we remove topics from the header and show them only on the docs landing page?
Chowse: Here's my feedback after having more time to look at the comps..

Header:

1. I prefer the search on the left side right next to the logo.  It just makes sense since most users already find us via search and will continue to use it within MDN to navigate from doc to doc (in a lot of cases)

2. I like the Bebas Neue type for the header navigation.  It created a more consistent feel with the logo and the headings/titles in the body of our pages.   If l10n ever becomes an issue in terms of fitting the width of the page, we can explore creating the nav in a second row or decreasing the font size... but for now, I think we'll be ok.

3. I prefer the 3rd variation with the vertical divider that separates the nav sections and also lists out the sections of the site.  I think Topics are ok with the pulldown, but want to give people 1-click access to the main areas of the site.

4. The states all look good to me.  The only one I think we might want to work on is the pulldown.  I like that we retain the arrow pointing to the item, but not sure how I feel about the box overlapping the horizontal line that divides the header and body.  Small nit, but wanted to note it.

-----------

Home page:

1. I think the overall page layout is good.  Curious to hear what others think.

2. I think the full-width docs block works well too.  We'll have to style the tabs to match the rest of the site design, but the layout and orientation of things looks great!

4. Promos look fine, but will wait until you have another mockup showing the demos bar below it so see how things look if we reserve the bottom right for discussion content and lay out the demos horizontally.

That's all I have now... I know you'll be out most of next week, so we'll adjust the schedule for the home page and header refresh accordingly.

TEAM:  Based on Chowse's availability, I have decided to push out this particular update to MDN 0.9.6, which will is tentatively set for 6/14.  That will give us enough time to wrap up the design, implementation and give l10n some time to localize the new content.
I'm not clear on how this navigation connects to the overall site architecture. 

Is the plan to de-emphasize the section landing pages (Web, Mobile, Add-ons, Mozilla) going forward? Because that's what these header designs seem to imply. By hiding those links in a dropdown we're effectively hiding those pages and they'll likely see a dramatic drop in traffic. This design is making "Docs, Demos, Learn, Forums" the primary navigation (because that's all you can see) and the section landings are reduced to secondary navigation (stashed away in a dropdown, easily overlooked or ignored).

The original Happy Cog design made it clear that those pages were meant to be the big draws, acting as hubs of activity for each section and major jumping-off points to reach other content specific to each topic. This new navigation implies a different architecture, and pushes those landing pages aside to steer people instead to the docs, demos, learning, and forums. Is that the new content strategy? Should we plan to phase out the section landings if they're no longer where we want to drive people?

Or, if the section landings are still important, the navigation should reflect that hierarchy and the links need to be prominently exposed so visitors can orient themselves and find the section they're interested in.

(Forgive me if this has already been hashed out elsewhere and I'm just late to the party.)

A dropdown navigation works well on the docs, demos, and learning sections (and could work for the forums, though they still have the full header right now), because when you're there we can assume you're already *in* the place you want to be and all other destinations really are secondary. The real navigation in those sections happens through links in the page content, not in the header, so it makes sense to hide those other destinations somewhere out of the way. But I would expect the most important navigation to be visible on the home page and major landing pages.
> The original Happy Cog design made it clear that those pages were meant to be
> the big draws, acting as hubs of activity for each section and major
> jumping-off points to reach other content specific to each topic. This new
> navigation implies a different architecture, and pushes those landing pages
> aside to steer people instead to the docs, demos, learning, and forums. Is that
> the new content strategy? Should we plan to phase out the section landings if
> they're no longer where we want to drive people?

Personally, I say yes - the topic landing pages are secondary content and we can phase them out. The reason I say it is Mozilla's dev strategy seems to be going all-web - web for mobile with Open Web Apps and our mobile web initiatives; and web for addons with Jetpack and Addon SDK developments.

But I also don't know if that's been hashed out already. Even if it has, it might be worth re-hashing?
Chowse said he was going to chime in on the IA questions Craig raised, but after seeing Luke's comment, I thought I would set the record straight so we're all on the same page.

Yes, we are changing our content strategy for MDN.  Originally when we worked with Happy Cog, we set out to experiment with putting all the developer segments on the same level.  However, as we knew back then, and are starting to put more resources behind now, it's the Web developers that are the key segment MDN serves.

This redesign exercise is to better serve what is probably close to 90% of our traffic with content they will find useful... but still make it easy enough for other segments to get to where they're going. I was a big proponent of giving all the segments equal billing when we worked with Happy Cog, now I like to think of this as providing those segments the most important stuff up front (Web is applicable to all of them), but still provide them the option to dig deeper into their areas via the Sections' landing pages for Mobile, Add-ons, Mozilla.  It's also important to note that the other 3 segments have their own sites, blogs, channels... so I don't feel bad for giving Web developers an official home on MDN.

Since that first version of the site was designed, we have also added a new sections to the site that are very Web focused and so it make sense to make Docs, Demos and Learning the main navigation items now.  

Craig does bring up an important point in terms of what is visible in the header when you are in certain sections... and I think Chowse's mockups address that in different ways.   Although I do like having the search bar on the left near the logo, one side-effect is that the current location the user is in will be displayed off to the right now via the arrow indicator for Docs, Demos, etc.  Currently it's kinds of nice to see the MDN logo + the section next to each other since it bring together the two for a single site feel "MDN Learning", "MDN Demos", etc.  Not sure if we can have our cake and eat it too in this case with the nav.  But I'll let Chowse and Craig think about that one.
Thanks for the feedback everyone. To respond to some of your points:

(In reply to comment #10)
> I love the pop-up for sign-in (like Twitter). Should/can we do the same for
> register?

Possibly. Looking at the current registration page, we have 4 fields and CAPTCHA, which might be a bit much for pop-up. There are techniques we can use to simplify this, like eliminating the password confirmation and using an alternative to CAPTCHA (see http://www.smashingmagazine.com/?p=95518). But if we're going to the trouble, it might be better to create a better registration page, explaining why you should want to become a member.


(In reply to comment #11)
> 2. I like the Bebas Neue type for the header navigation.  It created a more
> consistent feel with the logo and the headings/titles in the body of our
> pages.   If l10n ever becomes an issue in terms of fitting the width of the
> page, we can explore creating the nav in a second row or decreasing the font
> size... but for now, I think we'll be ok.

Unfortunately, we haven't resolved the issues with Bebas yet, so we're stuck with League for now, and League is only readable when it's large. While I like its consistency with other headings used in the site, I don't think it would be too disruptive if they adopted a different style.


(In reply to comment #11)
> 4. The states all look good to me.  The only one I think we might want to
> work on is the pulldown.  I like that we retain the arrow pointing to the
> item, but not sure how I feel about the box overlapping the horizontal line
> that divides the header and body.  Small nit, but wanted to note it.

I tried a version w/ a unified bar and menu (http://cl.ly/373S2C1c0v1j1m193H1j) but wasn't too happy with it. Slightly off-center also didn't work unless I removed the arrow (http://cl.ly/3F3a1O2s440H3B3K0h3B). Maybe below the bar (http://cl.ly/1k0L2T2E1S1x251W2j0k)? Any thoughts on these?


(In reply to comment #11)
> 2. I think the full-width docs block works well too.  We'll have to style
> the tabs to match the rest of the site design, but the layout and
> orientation of things looks great!

Do you mean like these? http://cl.ly/3r2X212N2b3A2m2H332N



(In reply to comment #12)
> I'm not clear on how this navigation connects to the overall site
> architecture. (...)

I'll admit, I didn't take this into consideration when I began these design. I began by trying to provide a way to concise way of accessing all of our top-level pages. As you suggested, it would be trivial to swap which group of pages shows up in a drop-down.

Taking a look at our analytics, each of the section landing pages has represents <0.05% of our traffic YTD, so they either continue to remain transparent to our users, or they are not of interest to our visitors.

I've considered other ways of highlighting these sections on the front page, such as giving them a dedicated block near the top (akin to where the 'tabs' on the Web Docs block are now).
chowse:  i like the below the bar pull-down menu.  and yes, the tab styling would be great to implement in a similar fashion to what we have now.  or create one that we can use consistently in both places.
(In reply to comment #14)
> Currently it's kinds of nice to see the MDN logo +
> the section next to each other since it bring together the two for a single
> site feel "MDN Learning", "MDN Demos", etc.

Well, it's certainly possible (http://cl.ly/0m0E012L3e0T3H3o2e2j). However, it will likely have layout problems. I could remove items from the right menu when they're selected, but this wouldn't work for things in the dropdown. As is, the left and right sections come precariously close to meeting in the middle and will definitely overlap when localized.

To compensate for lack of proximity, we could also put more emphasis on the selected section (http://cl.ly/2v2s0i3J2m0X2f1a0N1j) or de-emphasise other options until hover (http://cl.ly/2d0p04160S2f2n3Q193r).
If we're officially downplaying the Web, Mobile, Add-ons, and Mozilla sections, then it definitely makes sense to emphasize Docs, Forums, etc in the main nav and push those landing pages aside as secondary destinations.

Also, in the original Happy Cog designs, the "four sections" scheme was a pretty integral part of the branding, what with the accent colors and iconography. But if those landing pages are no longer our primary emphasis, and we're not dividing the site into those four main categories, it might be good to lose the accent colors while we're at it. Each section was originally branded pretty strongly as its own fully-fledged community, but now they're just turning into auxiliary hub pages to find related docs. The accent colors, big headers, and unique icons suddenly all seems like a bit much.

Then we could use those accent colors for our new areas of emphasis instead. Maybe orange for Docs, red for Demos, blue for Learning, green for Forums? Unfortunately there are only so many colors to choose from so it does limit how many major sections we can have. We could eventually add purple for a fifth section, but that's pretty much it. But five sections is a good number so we may never need more anyway.
I like Craig's idea about re-assigning the colors.  If we can at least try out the new color/sections combos in the header, that'll be great.  We can go clean things up on the actual landing pages for /mobile, /addons, and /mozilla later.
(In reply to comment #17)
> (In reply to comment #14)
> > Currently it's kinds of nice to see the MDN logo +
> > the section next to each other since it bring together the two for a single
> > site feel "MDN Learning", "MDN Demos", etc.
> 
> Well, it's certainly possible (http://cl.ly/0m0E012L3e0T3H3o2e2j). However,
> it will likely have layout problems. I could remove items from the right
> menu when they're selected, but this wouldn't work for things in the
> dropdown. As is, the left and right sections come precariously close to
> meeting in the middle and will definitely overlap when localized.

Yeah, I don't think that will work.  It makes the header too crowded and also breaks up the clean organization up there.  I think we'll be fine with the last option you note below.

> 
> To compensate for lack of proximity, we could also put more emphasis on the
> selected section (http://cl.ly/2v2s0i3J2m0X2f1a0N1j) or de-emphasise other
> options until hover (http://cl.ly/2d0p04160S2f2n3Q193r).

I like the last mockup: http://cl.ly/2d0p04160S2f2n3Q193r.  If we can highlight the de-emphasized items on mouse-over and emphasize the selected item as you did, that'll be great!  I think adding colors to the items will help with this approach as well.
Target Milestone: 0.9.5 → 0.9.6
Updated headings:

http://cl.ly/0q2V1x2d1K2v1p432d07

Short version:

* Experimenting with migrating the Web/Mobile/Addon color scheme over to the
  Docs/Demos/Tools sections. Will probably need a few more tweaks to find the
  right balance between legibility and distraction.

* Now that Bebas Neue's line height issues are fixed, I'm trying to 
  reincorporate into the top nav. Not sure how this will scale w/ L10n.
 
* Including a hypothetical auto-complete on the search field.

* Adding more drop-down menus and pop-up tips to improve navigation, explain
  some of the more obtuse choices, and provide more incentives to explore.
And some more explorations for the front page:

Textured heading block + tooltips for the web docs:
http://cl.ly/3n0Z0v3B2f1v2F2m3B0w

A horizontal spread of demos:
http://cl.ly/1y3d0K2w012Z2y26323R

Two column layout of news and demos:
http://cl.ly/1r0R171j1X141M0F0t0t
We discussed the mocks during our MDN meeting today and I had a follow-up with Chowse to discuss some of the changes we want to make.   He said he'll have new mocks for team to review soon.  I think we need to finalize the remaining tweaks with this next round in order to get the header and initial home page design into 0.9.6 for 6/14.
I really like the design. Yet I always come back to confusion with the topics - web, mobile, addons, mozilla, and sections - docs, demos, learn, forum. Right now it seems the information we have is:

Web
  News
  Docs
  Demos
  Learn

Mobile
  News
  Docs

Addons
  News
  Docs

Mozilla
  News
  Docs

And yet we organize it like so:

Topics
  Web
  Mobile
  Addons
  Mozilla

Docs

(Web) Demos

(Web) Learn

Forums

The latter organization is just confusing, isn't it?
Luke:  The architecture for MDN is hard.  We spent A LOT of time thinking about it when we first designed the new MDN pages (2009!)... and I think we ended up with the Web, Add-ons, Mobile, Mozilla categories because it felt more natural to do it that way by segment.

However, things have changed in our strategy and the goal now is to make MDN = Web (for the most part), especially when we think about Docs, Demos, Learning, Events, etc.   So our challenge is to convert the site (at least the home page) to a Web developer portal... but still find a way to guide visitors to the docs for Add-ons, Mobile, and Mozilla that will continue to live in the Mozilla Doc Center wiki.

There is no easy or ideal way to accomplish this...  but I think what we have right now in Chowse's mockups will help us head in the right direction.   Let's get that out and see what the feedback is like.

To date, the analytics show that the developer segments we were hoping to help out with the current naviation did not come (or find it as useful as we had hoped).   The vast majority of our traffic and audience continue to be Web developers... so we are going to focus on improving content for Docs, Demos, Events, etc that is Web related. 

Other teams are welcome to continue using the wiki for documentation and we are going to do our part to make that easier to discover (via landing pages, search, wiki tagging/filtering features, etc)... but the layout and UI we are desiging is all Web.

Hope that helps.
Yeah. Since that's the case the layout that makes most sense to me is to lose the "Topics" stuff from the navigation altogether, but leave it in the "docs" landing page - since that's the only thing we provide for the other topics anyway?
(In reply to comment #26)
> Yeah. Since that's the case the layout that makes most sense to me is to
> lose the "Topics" stuff from the navigation altogether, but leave it in the
> "docs" landing page - since that's the only thing we provide for the other
> topics anyway?

Good point.  We could do that, but then it will feel like we're completely abandoning those other segments, since their docs and content will be "buried" in the landing pages with no clear nav path.

I still think we need to have a nav element that points to the landing pages for Mobile, Add-ons, and Mozilla (e.g. Topics->Mozilla going to https://developer.mozilla.org/en-US/mozilla).  Those landing pages are essentially "home" pages for those other developer segments, so we need to make sure people can get to them from the MDN home page... and the nav menu seems like the only good way to do that.

We are basically turning the MDN home page into a better "Web" home/landing page... but the other landing pages still need to exist and should be accessible.

I'm open to other ideas on how we can create a link from the MDN home page to those landing pages.  But still think the Topics nav menu is our best approach without overdoing it.   Maybe it's the title/name "Topics" that is confusing?  Should we consider changing it to "Developers"?
If it's any help, here's how I've started to think of it in my head: http://dl.dropbox.com/u/15094365/mdn-reorg.jpg

As I understand it, we're keeping all the same pages we have, we're just shifting the emphasis. Pages that were previously secondary destinations are now the primary ones, and what was primary is now secondary. Even if we weren't redesigning the header, we could just swap the links and still implement the new architecture. Those old landing pages now become secondary destinations, just shortcuts to quickly reach content about those specific topics. Which is why I think we need to de-brand them: all the same neutral color, and lose the icons and big headers.

Instead of funneling visitors to specific areas of interest, the real thrust of MDN is now all about documentation, demonstration, education, and community. That's how I see it, anyway. Unless I'm wrong.
Exactly what Craig said. ;-)

I have already talked to Chowse about using a single color for the Topics and re-use the colors for the new primary nav items (among other things related to the last few comments here).  So let's give him a chance to come up with new mockups so we can all provide feedback on that.
That's why you guys are the design types and I'm the code-monkey. That subtle change makes it MUCH clearer. Well done. :)
Sean Martell had a chance to look over the current mockups and provide some feedback. Here's a variation he proposed:

http://www.cl.ly/0p1R2S2C1M2x2D1H3n3U

And here are some of those changes integrated into the main page:

http://cl.ly/1a0M193k0N3O09403Q16

Any thoughts?
(In reply to comment #31)
> Sean Martell had a chance to look over the current mockups and provide some
> feedback. Here's a variation he proposed:
> 
> http://www.cl.ly/0p1R2S2C1M2x2D1H3n3U
> 
> And here are some of those changes integrated into the main page:
> 
> http://cl.ly/1a0M193k0N3O09403Q16
> 
> Any thoughts?

fwiw, I like that.
Updated the mock to include copy from bug 654616:

http://cl.ly/2O2i1t0r0H3A1Z2o2D0t/mdn-home-7.png

If there are no major issues, I will finish up the Learn/Demo/Aurora/Fx4 callouts and mark the design complete.
<3

Only nit-pick I have is still "Anyone can contribute and each person who does only makes us stronger." - it seems wordy and clumsy compared to the rest. Why not just "Anyone can contribute to make us stronger." ?

Does the big black leaderboard stick for every page, or just for the first-time visit? Seems like it takes up a bunch of above-the-fold space?

New thought (sorry): to emphasize the message of turning visitors into contributors, we could/should include a "docs that need help" section in the docs block? And/or a "Submit demo" link to the "Amazing HTML5 Demos" section?
(In reply to comment #34)
> <3
> 
> Only nit-pick I have is still "Anyone can contribute and each person who
> does only makes us stronger." - it seems wordy and clumsy compared to the
> rest. Why not just "Anyone can contribute to make us stronger." ?

+1.  Let's use Luke's shorter sentence.

> 
> Does the big black leaderboard stick for every page, or just for the
> first-time visit? Seems like it takes up a bunch of above-the-fold space?

This is up for debate.  I think we can leave it there for a while... but slowly phase it out for repeat visitors.  Is there a way to do it so that it sticks for N visits and then gets hidden (but still accessible with a tab that slides it down?)

> 
> New thought (sorry): to emphasize the message of turning visitors into
> contributors, we could/should include a "docs that need help" section in the
> docs block? And/or a "Submit demo" link to the "Amazing HTML5 Demos" section?

There is a lot of whitespace in that block (which I like)... so instead of making it crowded, could we find a way to include a "Help improve our docs!". CTA in the tooltip/details on mouseover for areas that need help?

-----------

And a few other things that stand out to me:

1. With the extra space in the docs listing, maybe use the last spot to point people to "/docs"?

2. Since we're moving away from using colors for the developer segments, I don't think we should use the color codes for the blog feeds.  Can we replace them with something else?  Maybe icons to start the text block?

3. In the demos block, we should say "Browse Demo Studio" instead of using gallery there.

4. FF4 for Devs should just become "Firefox for Devs" to be consistent with our version-less approach to the browser releases.

That's all I have now... most of that can be done during implementation, but wanted to throw it out there as Chowse finalizes the page.

Chowse:  What color did we decide to use for Demos for the nav mouseover?  From our last discussion I thought it was:  Docs = Orange, Demos = Red, Learn = Green, and Forums = Blue?
Latest mocks with your feedback:

http://cl.ly/1T1n1d3k220j0v1O2H2W/mdn-home-8.png


(In reply to comment #35)
> (In reply to comment #34)
> > <3
> > 
> > Only nit-pick I have is still "Anyone can contribute and each person who
> > does only makes us stronger." - it seems wordy and clumsy compared to the
> > rest. Why not just "Anyone can contribute to make us stronger." ?
> 
> +1.  Let's use Luke's shorter sentence.

Done.

> > Does the big black leaderboard stick for every page, or just for the
> > first-time visit? Seems like it takes up a bunch of above-the-fold space?
> 
> This is up for debate.  I think we can leave it there for a while... but
> slowly phase it out for repeat visitors.  Is there a way to do it so that it
> sticks for N visits and then gets hidden (but still accessible with a tab
> that slides it down?)

We should: we already do something similar for the "What are add-ons?" promo on AMO. I've also added a way to dismiss the block.

Moving forward, I feel this block should be smaller and should steer users to a dedicated "About" page. We could even reduce it to a hang-down banner, similar to what StackOverflow or Kickstarter provide.

It comes down to the question of the first-page's purpose: is it to introduction to MDN's purpose and offerings, or to highlight new and featured content, or somewhere inbetween. 


> > New thought (sorry): to emphasize the message of turning visitors into
> > contributors, we could/should include a "docs that need help" section in the
> > docs block? And/or a "Submit demo" link to the "Amazing HTML5 Demos" section?
> 
> There is a lot of whitespace in that block (which I like)... so instead of
> making it crowded, could we find a way to include a "Help improve our
> docs!". CTA in the tooltip/details on mouseover for areas that need help?

I'll give that another look. As we migrate away from highlighting Mobile/Addon/Mozilla content, we could replace the list of links at the bottom of the Web Docs block with ways to participate. I'm hesitant to add much more content than that this late in the design process. I can certainly incorporate it into future iterations, though.


> 1. With the extra space in the docs listing, maybe use the last spot to
> point people to "/docs"?

I added a subtler "and more..." link at the end of the list that will take users to the docs landing.

> 2. Since we're moving away from using colors for the developer segments, I
> don't think we should use the color codes for the blog feeds.  Can we
> replace them with something else?  Maybe icons to start the text block?

Also done. The connection to the Topic now shows up in the news item's subtext.

> 3. In the demos block, we should say "Browse Demo Studio" instead of using
> gallery there.

"Browse Demo Studio" may not scale with l10n. I've replaced it with a more terse "More Demos" link.

> 4. FF4 for Devs should just become "Firefox for Devs" to be consistent with
> our version-less approach to the browser releases.

Updated, though I'm not as sure the connection will be as clear. The message needs to be "what's new in the latest version of Firefox of interest to web developers". "Firefox for Devs" almost reads like how Firefox can be used for developers (e.g. DevTools). Maybe something like "What's New in Firefox", but this doesn't expressly call out developer-relevant features.


> Chowse:  What color did we decide to use for Demos for the nav mouseover? 
> From our last discussion I thought it was:  Docs = Orange, Demos = Red,
> Learn = Green, and Forums = Blue?

Yep.
Thanks Chowse!  All of your changes make sense... I just had a few comments:

(In reply to comment #36)
> 
> > > Does the big black leaderboard stick for every page, or just for the
> > > first-time visit? Seems like it takes up a bunch of above-the-fold space?
> > 
> > This is up for debate.  I think we can leave it there for a while... but
> > slowly phase it out for repeat visitors.  Is there a way to do it so that it
> > sticks for N visits and then gets hidden (but still accessible with a tab
> > that slides it down?)
> 
> We should: we already do something similar for the "What are add-ons?" promo
> on AMO. I've also added a way to dismiss the block.
> 
> Moving forward, I feel this block should be smaller and should steer users
> to a dedicated "About" page. We could even reduce it to a hang-down banner,
> similar to what StackOverflow or Kickstarter provide.

I think eventually we might have enough content for a dedicated "About MDN", but for now, how about this as a compromise:

- Leave the "x" there so people can close that block, but add a tab to the bottom right of the block that says "About MDN" (so when it is collapsed, people can still click on it to see the messaging and any other content we may add to that block in the near future).

> 
> It comes down to the question of the first-page's purpose: is it to
> introduction to MDN's purpose and offerings, or to highlight new and
> featured content, or somewhere inbetween. 

It's really somewhere inbetween.  Right now, the main purpose is for introducing visitors to MDN... and secondarily pointing them in the right direction once they are there.

> 
> 
> > > New thought (sorry): to emphasize the message of turning visitors into
> > > contributors, we could/should include a "docs that need help" section in the
> > > docs block? And/or a "Submit demo" link to the "Amazing HTML5 Demos" section?
> > 
> > There is a lot of whitespace in that block (which I like)... so instead of
> > making it crowded, could we find a way to include a "Help improve our
> > docs!". CTA in the tooltip/details on mouseover for areas that need help?
> 
> I'll give that another look. As we migrate away from highlighting
> Mobile/Addon/Mozilla content, we could replace the list of links at the
> bottom of the Web Docs block with ways to participate. I'm hesitant to add
> much more content than that this late in the design process. I can certainly
> incorporate it into future iterations, though.

I like that idea.  In future iterations, we can explore making that block all about Web docs + CTA for contributing.   But we will need to find another place to put the links to Mobile/Addon/Moz content.  I want to migrate away from highlighting them, but not remove them altogether if possible.


> 
> > 4. FF4 for Devs should just become "Firefox for Devs" to be consistent with
> > our version-less approach to the browser releases.
> 
> Updated, though I'm not as sure the connection will be as clear. The message
> needs to be "what's new in the latest version of Firefox of interest to web
> developers". "Firefox for Devs" almost reads like how Firefox can be used
> for developers (e.g. DevTools). Maybe something like "What's New in
> Firefox", but this doesn't expressly call out developer-relevant features.

I think Firefox for Devs will be ok if we have the right copy below that says something like "See what's new in Web standards support and developer features in the latest version of Firefox".  Will that work?
(In reply to comment #37)
> I think eventually we might have enough content for a dedicated "About MDN",
> but for now, how about this as a compromise:
> 
> - Leave the "x" there so people can close that block, but add a tab to the
> bottom right of the block that says "About MDN" (so when it is collapsed,
> people can still click on it to see the messaging and any other content we
> may add to that block in the near future).

Here's how collapsed block might look:

http://cl.ly/1w2B27183m2E0Q3k3D2l/mdn-home-9.png

This might be redundant, since we show something similar in a pop-up when you hover over the MDN logo (see http://cl.ly/0q2V1x2d1K2v1p432d07/mdn-header-v3.png). But it makes sense after immediately collapsing the block, if it doesn't add too much complexity.

Oh, and to answer Luke's earlier question: the intro block should _only_ show up on the front page. If we want to call it out on wiki or other pages, we should make it as lightweight as possible: a menu-anchored pop-up or a hang-down banner, at most. Anything more will certainly alienate users.


> > Updated, though I'm not as sure the connection will be as clear. The message
> > needs to be "what's new in the latest version of Firefox of interest to web
> > developers". "Firefox for Devs" almost reads like how Firefox can be used
> > for developers (e.g. DevTools). Maybe something like "What's New in
> > Firefox", but this doesn't expressly call out developer-relevant features.
> 
> I think Firefox for Devs will be ok if we have the right copy below that
> says something like "See what's new in Web standards support and developer
> features in the latest version of Firefox".  Will that work?

Yes, that could work. The size of the block will probably require something terser though: "See what's new for web devs in the latest Firefox."
Chowse: I like the collapsed tab.  If we did that, we could just not do the mouseover block for the logo.  That's my vote.  

And I agree... if we want to have a single line hang-down banner, we can do that on non-home pages.  But I don't think we need that right now.  I rather plan out a dynamic hang-down banner that we can use to promote things and make announcements on various pages... so we can explore that later.
Hey everyone.

As Jay and I discussed earlier today all of the features mentioned  have been added to Agile Bench. I unfortunately cannot link to the individual user stories on Agile Bench, but they (In reply to comment #0)
> Based on feedback, we need to change the layout and content on the MDN home
> page and also rethink the header.  
> 
> For the layout change, here are a few things we want to accomplish:
> 
> 1. Remove the big promo slider (or move it below the fold)
> 2. Add a welcome message and developer messaging at the top
> 3. Put blocks for major MDN features with CTAs (Docs, Demos, Learning)
> 4. Emphasis on Web developer docs
> 5. Making the newsfeed secondary
> 
> For the header redesign, we want to have 2 versions:
> 
> 1. Home page header should be made shorter and simpler, but still provide
> access to all sections of the site.
> 2. Header for the rest of the site should be an improved version of the
> banner nav we use for Learning and Demo Studio.

Hey everyone.

As Jay and I discussed earlier today, all of the features mentioned here have been added to Agile Bench as user stories. Keep in mind that they have been rewritten slightly to better fit with Scrum (As a <type of user>, I want <some goal> so that <some reason>).

I unfortunately cannot link to the individual stories, but they are all there.

Let me know if you have any questions.
John
I should have noted that, due to limitations of the free service, only three people were able to be added users to our Agile Bench. You should have already received an email if you have an account on the site.
Here's the penultimate design for the front page (minus a few graphic assets):

http://cl.ly/0k0W1K2U0P3o1t0g3v0Q/mdn-front.png

Notable changes:

* I had to rearrange some elements in the page header to accommodate l10n.
  Amounted to an extra 5px, so nothing serious.

* Google branding on search has been moved outside of the search box. I would
  still prefer a watermark, but we now have a fallback if that can't happen.

* I've added two treatments for highlighting that the Demo Gallery accepts UGC:

  * Making the 6th photo a CTA to submit a demo. May not scale well for l10n
    and removes space for an extra demo, but blends well with the layout,
    especially if we eventually add more content below.

  * A handwritten CTA below all the photos. Requires more scrolling and adds
    an extra font payload (Rabiohead, ~30K), but fits with the small photo
    album motif.

  Let me know if you have a preference.
Nice work Chowse! 

I like the 6th photo as CTA... it stands out more and think it'll be more clicks.

My only nit is that the logo is higher than the MDN wordmark... I know we never finalized plans for that, so I'll let Craig play with those 2 pieces to see if we can find a happy balance for the height (hopefully both the same will look ok).
Chowse:  To be consistent with the nav menu colors, shouldn't we make the "Learn" block green (if the bg will remain green after Sean's graphics are added)?

I still don't know what colors we should be using for Firefox vs Aurora, so we can update that in a future release if needed.
(In reply to comment #44)
> Chowse:  To be consistent with the nav menu colors, shouldn't we make the
> "Learn" block green (if the bg will remain green after Sean's graphics are
> added)?
> 
> I still don't know what colors we should be using for Firefox vs Aurora, so
> we can update that in a future release if needed.

Colors corrected and some placeholder images added:

http://cl.ly/201b362R1F27071T1Q0p/mdn-front.png

For Aurora, I intend to use the 'space' backdrop used in the About Aurora dialog (http://cl.ly/0n1D1R0Z3c2n0c3t1904/Image_2011.06.08_4_58_04_PM.png).

For Firefox, I'm not as sure. I could use a lighter blue background with a sunburst, which we've used in past promotional material. I'm also happy to continue using a non-descript black background, as we use for the current "Fx4 for Developers" block.
Missing assets have been received and final PSDs have been handed off to development. Marking this one closed.
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
verified fixed https://developer.mozilla.org/en-US/
Status: RESOLVED → VERIFIED
Version: MDN → unspecified
Component: Website → Landing pages
Product: developer.mozilla.org → developer.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.