1140601 - MDN 10th Anniversary Landing Page (Design)

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Ben (:bensternthal)]

Tracks design of MDN Homepage in support of 10th anniversary events. Think "tweaks" not "redesign".

Dates and details coming soon.

Comment 1

[Lizz Noonan - she/her (:lizzn)]

MDN is turning 10! A straightforward landing page is requested. 

Brief: https://docs.google.com/document/d/1qO7-la3TxUxN1W-qFiCnn18EqqWJ5tNU9gZ5MF7ZRgM/edit#

Schedule: https://docs.google.com/spreadsheets/d/12X41mVvJyy-l7O86V_lyYPGXG79t1G5VDQvbO3S-FM8/edit#gid=365264923

Wiki: https://wiki.mozilla.org/Engagement/Campaigns/MDN_Support/10_Anniversary

LP Content: 
 - Audio series by MDN staff and volunteers, covering the 10 years of MDN history as well as a vision for the future of MDN
- Testimonials from prominent MDN supporters and contributors
- Link to Hacks blog post
- Link to downloadable social media avatar & cover photo
+
- Downloadable/linkable promotional banners and other online media web developers can use on their sites to promote MDN (Separate Bug)

Design Elements Needed
- Hero Image + Headline (using MDN 10th logo/creative)
- Sections: 
     * Audio series
     * Testimonials
     * Link to Hacks blog post
     * Participate section - links to Link to downloadable social media avatar & cover photo AND downloadable/linkable promotional banners

Comment 2

[Lizz Noonan - she/her (:lizzn)]

staging site: https://developer.allizom.org/en-US/docs/MDN_at_ten

Comment 3

[Justin Crawford [:hoosteeno] [:jcrawford]]

I'd like to clarify this bug: We're building a standalone landing page for the 10th anniversary and we will link to it from the MDN home page. 

We previously made a landing page for the MDN fellowship program that lives inside of the MDN application[0]. This means it can easily inherit a lot of MDN's features, such as the header and footer and text styles as well as application tools like waffle (to switch it on/off). 

For ease of implementation and management I suggest taking this approach. Thoughts?

[0] https://developer.mozilla.org/en-US/fellowship

Comment 4

[ali spivak]

Landing page assigned to Sheppy. 

Content: https://docs.google.com/document/d/1nkPsvV8HdPiHtmNNTNKl9se5zeNFgTpX9smDBABdVXQ/edit#heading=h.yp13tfazdg4z

Waiting on design from Matt.

Comment 5

[mternoway]

Attachment: mdn10_homepage.png

Comment 6

[mternoway]

Attachment: mdn10_historypage.png

Comment 7

[mternoway]

Attachment: mdn10_contributionpage.png

Hi all, I've attached layout examples for 3 of 4 pages (landing, history, contribution) for the MDN 10 site. The social campaign page is still a work in progress. Overall the site uses some familiar MDN elements for consistency, but also gives off a unique feel to commemorate the 10th anniversary. If all is ok with these I can share the final PSDs.

Thanks,
Matt

Comment 8

[Eric Shepherd [:sheppy]]

The plan has been and as far as I know remains to implement this entirely within wiki content, with no new code required other than additions of any CSS we need to get as close to this design as is practical. A conversation I just had with Ali and Stephanie a few minutes ago has us all agreeing that this is the plan.

Stephanie will be doing the best she can to reinterpret these designs to allow us to implement a best-practical-match in the wiki.

Comment 9

[Matej Novak [:matej]]

(In reply to Eric Shepherd [:sheppy] from comment #8)
> The plan has been and as far as I know remains to implement this entirely
> within wiki content, with no new code required other than additions of any
> CSS we need to get as close to this design as is practical. A conversation I
> just had with Ali and Stephanie a few minutes ago has us all agreeing that
> this is the plan.
> 
> Stephanie will be doing the best she can to reinterpret these designs to
> allow us to implement a best-practical-match in the wiki.

I just want to make sure this aligns with our understanding and expectations here since that's the first I'm hearing about this approach.

Comment 10

[Stephanie Hobson [:shobson]]

:matej, please post the PSDs immediately.

:lizzn, how hard is the 22nd as a deadline?

Comment 11

[Stephanie Hobson [:shobson]]

(deadline for building out the site, sorry if I was unclear).

Comment 12

[Lizz Noonan - she/her (:lizzn)]

Hi Stephanie - it would be great if we could hit the 23rd for the page, which is the anniversary date. However, if that is not possible, please let us know :)

Matt, can you please post the PSDs?

Comment 13

[mternoway]

landing page:
https://www.dropbox.com/s/2j3ylie87e9w0zq/mdn10_homepage.psd?dl=0

history page:
https://www.dropbox.com/s/ehybqrrl38zumww/mdn10_historypage.psd?dl=0

contribution page:
https://www.dropbox.com/s/n60oqlhulk15326/mdn10_contributionpage.psd?dl=0

Comment 14

[Eric Shepherd [:sheppy]]

(In reply to Lizz Noonan (:lizzn) from comment #12)
> Hi Stephanie - it would be great if we could hit the 23rd for the page,
> which is the anniversary date. However, if that is not possible, please let
> us know :)

Is the text for the social campaign done? It's labeled "Hold for content" in the Google Doc. Similarly, I don't know what's up with the "Support MDN banners" material. Without all the text and campaign details, we won't be able to finish this up.

Comment 15

[Lizz Noonan - she/her (:lizzn)]

The social campaign is not going live with the webpages. We are waiting for the MDN social media contractor to start. 

That box will link to the banners instead, until we have content for the social media campaign.

Comment 16

[Stephanie Hobson [:shobson]]

:lizzn A first round of stuff will likely go live today. I expect it to have the home, contribution, and history pages. I won't consider it "done" but it should be good enough to show to the public without looking broken :)

Comment 17

[Lizz Noonan - she/her (:lizzn)]

(In reply to Stephanie Hobson [:shobson] from comment #16)
> :lizzn A first round of stuff will likely go live today. I expect it to have
> the home, contribution, and history pages. I won't consider it "done" but it
> should be good enough to show to the public without looking broken :)

Thanks Stephanie! Would you mind please letting us know via a bug comment when that first round is live?

Comment 18

[Stephanie Hobson [:shobson]]

The necessary code has been added to the site but the content has not. :sheppy is working on it while I work on bug 1186660 and bug 1186655. He wanted to continue working on staging so the content has not been migrated yet. We're still working out how to host the audio file as well.

Comment 19

[Stephanie Hobson [:shobson]]

First round is live here: https://developer.mozilla.org/en-US/docs/mdn_at_ten

Comment 20

[Matej Novak [:matej]]

Was this reviewed on a demo server or anything like that before going live? Something looks off about the menu on the left side (which I also don't see in Matt's design in comment 5).

Matt, could you weigh in?

Comment 21

[mternoway]

Thanks Stephanie. Looking great so far. I realize that this site structure is reliant on the MDN template, so some of my design elements might not be possible to implement. The main one being the site navigation.

A few tweaks 

- I would like to see the background dino head in the above fold area reduced in size (similar to this http://cl.ly/image/34311o3e013G) where the chin and neckline are more visible...with its current positioning it's missing some key details to give that recognizable dino head shape.

- For the main headline, are we able to highlight the 'your Web.' in the light blue? This is used in other areas of the creative. I realize that this might be close to the hyperlink colour, although it is a different shade of blue. 

- Can we give some more spacing between the top of 'The history of MDN' and the bottom of above fold area, as well as spacing below 'The history of MDN' and 'Contributing to MDN'.

- For the testimonial boxes, can we alter the outline colour from the navy to something a bit lighter (#5b88c6). I'm hoping the lighter colour will give the illusion that the line is a bit thinner and less bold.

- For the blue CTAs (Learn more and Join today) can we increase the amount of left and right padding within the box shape.


Sorry to sound nit picky, but hoping these little changes give a bit cleaner look.

Thanks,
MT

Comment 22

[Eric Shepherd [:sheppy]]

Stephanie, let me know what if any of this stuff you need me to do.

Comment 23

[Stephanie Hobson [:shobson]]

These all sound do-able except for the blue "your Web". Getting the headline up there was pretty hacky and I couldn't find a method that would allow us to inject HTML.

How much would you like the padding on the CTAs increased? Right now they use 20px which is the grid on MDN. 30px? 40px?

Comment 24

[mternoway]

Thanks Stephanie. I think 30px should do it. Just want to ensure the button shape looks wider than taller.

Comment 25

[Stephanie Hobson [:shobson]]

Attachment: Screen Shot 2015-07-27 at 09.52.26.png

Oh, I misunderstood, I thought you were asking for more padding on the navy blue boxes around the whole message, not the buttons. In that case, the buttons have 8px padding right now. How does 12px look (see attachment)?

Comment 26

[mternoway]

Ah, that makes more sense now. Yes that looks great with your example. 

Thanks,
MT