646192 - Setup and launch MDN affiliate buttons

Status: VERIFIED FIXED

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

Description

[Jay Patel [:jay]]

Attachment: current set of buttons (need to uupdate some copy and tweak colors to create a more complete set)

We have the buttons designed/created, but need to make sure we setup the appropriate affiliate links for them before asking the community to use them across their websites and blogs.

Until we are able to build a more robust affiliates program with dynamic button + links generation (for user-based tracking), we need to get a short-term solution on MDN... which I see happening in a few steps:

1.Polish copy and colors for affiliate buttons (current set of buttons are attached so people can see what we're working with)
2.Generate unique tracking codes for each type of button (generic, html, css, javascript, hotrod, toolbox, etc)
3. Create an affiliates page on MDN under /promote/buttons to host buttons and link snippets

Laura:  Can you help me get #2 done?  A few people are anxious to get some buttons up, so at least we can give them the images and links individually until the page is ready.   Thanks!

I can then work with design and webdev to get something up soon for the broader community.  And then work in more features for MDN 0.9.5 or 0.9.6. Thanks.

Comment 1

[Luke Crouch [:groovecoder]]

Jay can you include links to supporting materials for this? Wiki? Basecamp? etc.?

Comment 2

[Jay Patel [:jay]]

More details about this are now on the wiki: https://wiki.mozilla.org/MDN/MDNv09x/v095

Comment 3

[Les Orchard [:lorchard]]

More details added to the wiki page from email thread. And some questions:

> what it's about:  creating web badges for our community to put on their blogs and website to promote MDN docs and demos.  pretty much the same idea as these examples:
>
>      badge builder 5000 found here: http://www.w3.org/html/logo/
>     old spreadfirefox affiliate buttons: http://www.spreadfirefox.com/affiliates/homepage
>     new firefox 4 buttons: https://www.mozilla.org/contribute/buttons/

Is the idea for MDN, basically: 3 drop-downs (eg. design, topic, color) that update a dynamic preview image and a textarea with copy/paste button HTML

> where it will live:  /promote/buttons or /affiliate/buttons

I can just pick one, if it doesn't much matter. Would rather not change it later, though. (Not sure how our hassle with .htaccess rules is working, these days)

Also... should this appear in the site navigation somewhere / somehow? (maybe a chowse question)

...
> how it will work:  here pretty much how i see the page layout in order:
>
>     Title + description of what the affiliate buttons are about
>     Get started instructions... that will walk them through a step-by-step process to get the button created
>     Form that will allow user to select 1. button graphic/theme, 2. button topic/text, and 3. button color
>     Through the steps in #3, it will be awesome to show a preview of the options available... so start with the #1 field showing the hotrod, toolbox, etc. by themselves, then buttons that preview the topic/text in field #3 and then a final set of buttons in 3 colors to choose from.
>     Once the final button is selected, we should generate an affiliate code for that button that the user can cut and paste into their site.
>
>
> Les:  Is that helpful?   I'm going to work on the wireframes today, but hopefully the above details with the spreadsheet and buttons (banner ads as you called them) give you a sense of what we're trying to accomplish.

Cool. Will help to have wireframes, to nail down the page and interactions. Seems simple enough, but wrong guesses on my side means we'll spend time repeating work. :)

Comment 4

[Les Orchard [:lorchard]]

Also... looks like we don't have all 40 spreadsheet permutations represented in the attached PNG. More images forthcoming, going to be sliced into individual images?

Comment 5

[Jay Patel [:jay]]

(In reply to comment #3)
> Is the idea for MDN, basically: 3 drop-downs (eg. design, topic, color) that
> update a dynamic preview image and a textarea with copy/paste button HTML

Kind of... I still need to work through the form/ux in the wireframes... will have something by EOD.

> 
> > where it will live:  /promote/buttons or /affiliate/buttons
> 
> I can just pick one, if it doesn't much matter. Would rather not change it
> later, though. (Not sure how our hassle with .htaccess rules is working,
> these days)

After discussing this with the team, we have decided the page will be called "Promote MDN", so let's go with just /promote for now.  If we branch out to sub-pages in the future, we can figure the IA out then.

> 
> Also... should this appear in the site navigation somewhere / somehow?
> (maybe a chowse question)

Not sure we need a nav item for this, but open to feedback and suggestions. Since Chowse is working on the new header design for 0.9.5, perhaps we can reserve some space for a promo CTA?

> 
> Cool. Will help to have wireframes, to nail down the page and interactions.
> Seems simple enough, but wrong guesses on my side means we'll spend time
> repeating work. :)

Yeah, I think it'll help to have some wireframes to look at.

Comment 6

[Jay Patel [:jay]]

(In reply to comment #4)
> Also... looks like we don't have all 40 spreadsheet permutations represented
> in the attached PNG. More images forthcoming, going to be sliced into
> individual images?

Yes, I am working on this today as well.  I didn't realize what a pain it was going to be to take each button and create individual images.

Do we have a preferred file format for buttons like these?  Should I save them as a .jpg or .png?  I will have all the permutations by tomorrow hopefully.

Comment 7

[Les Orchard [:lorchard]]

Not entirely sure if stage9 is pulling from kuma/mdn yet, but I committed some work-in-progress:

https://github.com/mozilla/kuma/commit/01b1cf3ac30c377022c33ad5e7bbe6cd5429fa1f

Still pending button images, along with styling and copy. But, there's some JS that switches between drop-down choices to select one of the 39 button URLs and builds some HTML.

Comment 8

[Les Orchard [:lorchard]]

(In reply to comment #6)
> (In reply to comment #4)
> > Also... looks like we don't have all 40 spreadsheet permutations represented
> > in the attached PNG. More images forthcoming, going to be sliced into
> > individual images?
> 
> Yes, I am working on this today as well.  I didn't realize what a pain it
> was going to be to take each button and create individual images.
> 
> Do we have a preferred file format for buttons like these?  Should I save
> them as a .jpg or .png?  I will have all the permutations by tomorrow
> hopefully.

I'd say either is fine, though .png is probably the better of the two

Comment 9

[Jay Patel [:jay]]

Attachment: Wireframe for the Promote MDN page

Lorchard:  Hopefully my wireframe make sense.  It has some placeholder copy that we can start with.  Here are some notes on the way I designed the UX:

1. I wanted to create a step-by-step process, where the first select determines what comes next.  So by default, we should only show Step #1.
2. Once the user selects the button style, we can display Step #2 so the user can select a color.
3. If the user picked the last option from Step #1, there is no copy/<foo> to update... so they just get the button preview and source code that points to http://developer.mozilla.org/docs.
4. If the user picks one of the other options, we should show Step #3 so they can choose what to replace <FOO> with... which will determine the button copy and the link for the button.

As soon as the user makes a selection for #1, we can show that light gray button... then with the color chosen #2, we can update the preview.  And depending on whether they need step #3 or not, we should have the info we need to create the source code snippet and URL to display.

Let me know if that is clear.  I'm assuming we will need to figure out the best way to name the files... so let me know after reviewing the flow how I should proceed in creating the .png files for all the button variations.  Also, I'll leave it up to you to look at the tracking URL spreadsheet to figure out how to code all that into the button creation process.

Thanks!

Comment 10

[Les Orchard [:lorchard]]

(In reply to comment #9)

> 1. I wanted to create a step-by-step process, where the first select
> determines what comes next.  So by default, we should only show Step #1.

Okay, so this doesn't necessarily have to be a multi-page wizard kind of thing, but we just don't reveal steps on the page until the previous step has a choice?

> Let me know if that is clear.  I'm assuming we will need to figure out the
> best way to name the files... so let me know after reviewing the flow how I
> should proceed in creating the .png files for all the button variations. 
> Also, I'll leave it up to you to look at the tracking URL spreadsheet to
> figure out how to code all that into the button creation process.

Easiest naming convention is to include the tracking code in the filename. 

So, something like: button-mdn1.png, button-mdn2.png, ..., button-mdn39.png

That way, I can just pair the rows of the spreadsheet straight up with the image filenames.

Comment 11

[Les Orchard [:lorchard]]

More progress, on the interactions at least:

https://github.com/mozilla/kuma/commit/08b691178e6bebc2e8a17e2e9fedae6b43bcdf15

stage9 hasn't updated from my last commit, yet. But, changes should be visible here eventually:

https://developer-stage9.mozilla.org/en-US/promote/buttons

Comment 12

[Jay Patel [:jay]]

Les:  I have uploaded all the web buttons here http://people.mozilla.org/~jpatel/mdn/promote/buttons/

I created a "light" and normal version for the foo buttons in case you want to implement a hover effect on those before the user clicks on them.  Wasn't sure if that would be easier to do with CSS, but created the files anyway.

All the others are labeled according to the tracking codes in the spreadsheet.

Comment 13

[Les Orchard [:lorchard]]

(In reply to comment #12)
> Les:  I have uploaded all the web buttons here
> http://people.mozilla.org/~jpatel/mdn/promote/buttons/

Checked these images in, along with some code tweaks, here:
https://github.com/mozilla/kuma/commit/a4fcd708c755c88d7c4a93c943aa2122d9e93d0a

> I created a "light" and normal version for the foo buttons in case you want
> to implement a hover effect on those before the user clicks on them.  Wasn't
> sure if that would be easier to do with CSS, but created the files anyway.

Not using these, yet, but probably will work them into the CSS tomorrow. There's also no indication border of which button is selected yet, but it does work.

> All the others are labeled according to the tracking codes in the
> spreadsheet.

Looks like they match up so far!

Comment 14

[Jay Patel [:jay]]

Looking awesome Les!  Thanks for getting that together so quickly.

After playing with the page a bit, here are some thoughts on how we might improve the layout and flow:

1. I personally hate radio buttons... could we replace them with color buttons for Step #2 and tag buttons for Step #3?   Do we need someone to whip up the images or do you have CSS magic at your disposal for that?

2. Let's style the URLs in step #3 to be smaller

3. Would it make sense to make the buttons in Step #1 smaller?  Not sure we need them to be full size if they're just there for the user to pick from.  Thoughts?

Also, even without the copy at the top of the page, the form is pretty low on the page, so we'll have to figure out the appropriate place in the copy above the fold to put a link to an anchor below so users can jump straight to the form.  Perhaps we can put a "Get Started" button near the top once the copy is in place?

Les: I'll work on the copy and have that for you tomorrow.  Let me know if you need anything else from me... otherwise, looking forward to seeing that page take shape.  Nice work!

Comment 15

[Les Orchard [:lorchard]]

(In reply to comment #14)
> Looking awesome Les!  Thanks for getting that together so quickly.
> 
> After playing with the page a bit, here are some thoughts on how we might
> improve the layout and flow:

This is where we should probably have chowse (and maybe craig?) take a look at the page, now that it's functional. I didn't put much effort into the styling, because making a page usable / attractive is not something I'm good at.

Could really use some mockups here, rather than iterating a commit at a time on styling in code.

Comment 16

[Les Orchard [:lorchard]]

(In reply to comment #15)
 
> Could really use some mockups here, rather than iterating a commit at a time
> on styling in code.

Though, FWIW, I can handle the HTML/CSS/JS once we have a mockup.

Comment 17

[Jay Patel [:jay]]

I'll see if Craig can help us out since Chowse is on PTO.

Lorchard:  Can we get that page up under just /promote?  I don't think we need to go two levels down to /buttons since this page will probably stay this way for a while.  Thanks!

Comment 18

[Luke Crouch [:groovecoder]]

You mean like this? https://developer-stage9.mozilla.org/en-US/promote

;)

Comment 19

[Jay Patel [:jay]]

I just realized that the blank/preview buttons for Step 1 are wrong for the "Developer Powered" version (shouldn't have the "from" before MDN logo).

I have uploaded the correct images here:
http://people.mozilla.org/~jpatel/mdn/promote/buttons/devpowered_foo_light.png
http://people.mozilla.org/~jpatel/mdn/promote/buttons/devpowered_foo.png

Please update those images at your convenience.  Thanks!

Comment 20

[Les Orchard [:lorchard]]

craigcook's updated the page in this commit:

https://github.com/mozilla/kuma/commit/6a9619f08b9aadf91e0f83f752a717e0b8c7aa4e

So, it's mostly there, but we still need some final copy to replace the greek'd intro.

Comment 21

[Les Orchard [:lorchard]]

Additional copy tweaks:
https://github.com/mozilla/kuma/commit/85b02959a7d76b93b8e39c0961102468d91e25a7

Comment 22

[Les Orchard [:lorchard]]

More style, copy, & interaction tweaks:

https://github.com/mozilla/kuma/commit/e6862bfac4ed0c6c73708435ce331866a0d659ce
https://github.com/mozilla/kuma/commit/204581b26ac57bab0e6de0911c9c5df333642097

Comment 23

[raymond [:retornam] (inactive)]

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