1015987 - [META] Create custom "make" pages for partner coding campaign

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[lainie]

3 Webmaker landing pages co-branded with campaign partner.

-One page features Meme Maker https://thimble.webmaker.org/project/45564/remix 
-One page featuring Online Poster https://thimble.webmaker.org/project/21788/remix
-One page featuring basic Thimble make (link to come)

Here's an X-Ray Goggles mock-up with draft copy and bad formatting: http://lainie.makes.org/goggles/lainies-remix-of-resources-mozilla-webmaker

Will confirm deadline–is it possible to aim for June 6?

Comment 1

[Matt Thompson (@OpenMatt :OpenMatt)]

* Lainie: just so I'm clear, is what we basically need here?

1) A page that looks something like this:
https://webmaker.org/privacy-makes

2) With some custom copy at the top. Plus a gallery of makes underneath it.

3) Hosted at a url like: "webmaker.org/foo"

4) Lainie will provide the copy. And the makes she wants included on the page.

Am I understanding that right?

Comment 2

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Chris: this sounds like a job for... Gallery Maker? Would that be useful here?

Comment 3

[lainie]

@ Matt, yes sort of, but three separate pages, each featuring one specific make, not a gallery.

Comment 4

[Chris DeCairos (:cade)]

If each of these pages is featuring only a single make, we'll probably not need to use galleries.

Comment 5

[Cassie McDaniel [:cassiemc]]

Lainie is it possible to incorporate this into our next sprint, which ends June 13? Or is June 6th a hard deadline? Need more info here to know if it's possible, so emailing now.

Comment 6

[lainie]

Let me find out what the drop deadline is...

Comment 7

[Matt Thompson (@OpenMatt :OpenMatt)]

Just talked with Lainie -- we have a much clearer sense of what's required here.

* Here's an updated mock-up -- please have a look:
https://dl.dropboxusercontent.com/spa/6c38yp3crbxni5b/ouchzjb5.png

* What's required: a page on webmaker.org that includes (see mock-up)

1) "Made w/ Code" branding 

2) Welcome copy. Explaining what the page is, how it connects to the Made w/Code campaign, and what we're inviting users to do.

3) A standard "Webmaker published make" thumbnail. 

4) At a URL like: “webmaker.org/madewithcode_meme”

Lainie will provide 1, 2 and 3.

We need to produce three of these pages total. Exact same template. Different content. 

WHY?

* Because this is a huge partnership
* Because the partner specifically requested it
* Because they find sending their users straight into our Thimble edit window (without any context or guidance) is too confusing for their users

Comment 8

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Cassie:

* does that make sense? 
* can we assign this to one front-ed dev to produce next week? (And minimize / eliminate design work?)
* Lainie will provide all content.

Comment 9

[Cassie McDaniel [:cassiemc]]

Yes this makes sense, Matt. 

I don't think we can eliminate design work here, but it's a very quick job. Lainie can you get them to provide vector logos in .eps format?

Comment 10

[Cassie McDaniel [:cassiemc]]

Sorry I think I misunderstood the logo requirement. If they're not needed from partners, maybe we just need the 'Made with Code' branding in .eps format, if that exists. (really high res is second to vector)

Comment 11

[Matt Thompson (@OpenMatt :OpenMatt)]

* Lainie: we need more info on the deadline for this
* Moving to [june13]

* Lainie: I think all of this is one you right now -- you get us the content, we'll get the 3 pages done.
* I'm happy to help with copy -- just start an etherpad and file the link here

Comment 12

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/ht9394041a025b89e8

Here's a quick mockup so that when time comes we can build quickly. We will need some finalized copy for this and the vector logo still in order to complete it.

Feedback welcome.

Comment 13

[Matt Thompson (@OpenMatt :OpenMatt)]

* R+. I love this.

* Lainie: me n you need to get busy on the real copy and content for these pages. Can you start an etherpad draft and paste the link when you're ready?

Comment 14

[lainie]

I shared an etherpad with Matt that has draft copy, maybe we can finalize today. Also separately sending Cassie the campaign logo files now.

Comment 15

[Matt Thompson (@OpenMatt :OpenMatt)]

Attachment: HTML for Make a Meme page copy

Comment 16

[Matt Thompson (@OpenMatt :OpenMatt)]

* Cassie: polished copy in HTML form attached

* Can we now assign this to a dev to create the page on staging? Using your design, and the attached HTML?

Comment 17

[Matt Thompson (@OpenMatt :OpenMatt)]

Cassie: to see what the HTML looks like: http://openmatt.org/copy-for-made-w-code-meme-page/

* Note that we decided to make it a numbered "1-2-3" list. For ease of use.

Comment 18

[Cassie McDaniel [:cassiemc]]

Looks good matt, will find out in standups today who has bandwidth.

Comment 19

[Matt Thompson (@OpenMatt :OpenMatt)]

* We should have the rest of the copy completed today.

* Lainie: do you have an updated deadline for this?

Comment 20

[lainie]

Updated deadline for final URLs is June 10. Still waiting to find out what the URL for the campaign is so we can link to it.

Comment 21

[lainie]

URL will be www.madewithcode.com

Comment 22

[Cassie McDaniel [:cassiemc]]

This should be ultimately assigned to Aki (who is having computer woes this week so we should check June 10 works for her), but we still need some content before it can be built.

* I need the logo in CS6 format, preferably horizontally stacked, not vertical (have emailed Lainie about that separately
* I need to email the dev the logo separately (sensitive partner information) and put the template psd is on dropbox
* Matt/Lainie can you provide a url to the Meme maker make we need to include here?
* There will be 3 pages right? This copy is for just one... Perhaps the other two should be filed as separate bugs.

Comment 23

[Cassie McDaniel [:cassiemc]]

Just saw that the make to be linked was listed on the Redpen. Putting here for posterity: https://thimble.webmaker.org/project/45564/remix

Comment 24

[lainie]

I'll check on a CS6 format and if there is a horizontally stacked logo, although there may not be. 

Matt's reviewing copy for the other two pages.

Comment 25

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/ht9394041a025b89e8

Updated design with copy. 

Matt - the copy next to the images needs review too. Dunno if you want to shorten the copy, does feel a bit text heavy but maybe I've been looking at it too long.

Comment 26

[inactivate account for kate]

Comment on attachment 8435037 [details]
https://redpen.io/ht9394041a025b89e8

Looking good, i think it needs a few more notes and/or sketches about mobile display of some areas

Comment 27

[Aki Rose Braun [:akirose]]

My computer should be back in my hands in "48-72 hours" and since I used to work with the people fixing it, I know it has priority. I'm not overly concerned about the deadline. It'll be tight, but I've had worse.

Comment 28

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Lainie: how do I change the "Tutorial" copy in this make?
https://thimble.webmaker.org/project/58498/remix

Does anyone know? I re-wrote it and need to update it.

Comment 29

[Matt Thompson (@OpenMatt :OpenMatt)]

(In reply to Cassie McDaniel [:cassiemc] from comment #25)
> Dunno if you want to shorten the copy, does feel a bit text heavy 

yes, you're right. let's ship it for now -- but I'll try to keep the others way shorter.

Comment 30

[Cassie McDaniel [:cassiemc]]

Attachment: https://redpen.io/ht9394041a025b89e8

Updated with mobile view

Comment 31

[Cassie McDaniel [:cassiemc]]

Aki, the files you need – psd, jpg, and svg for the thimble graphic – are on dropbox: https://www.dropbox.com/sh/6l88euy64pcx1gi/AADV3QUflZIdYy9kpKqG1Bb5a

Comment 32

[Matt Thompson (@OpenMatt :OpenMatt)]

Comment on attachment 8435037 [details]
https://redpen.io/ht9394041a025b89e8

* I think "Captions" for the images here are redundant. The image is already explained in the body copy. I'd vote for removing.

Comment 33

[Matt Thompson (@OpenMatt :OpenMatt)]

* I believe all remaining work will happen in the individual tickets. 
1021225 1021245 1021264

Comment 34

[Matt Thompson (@OpenMatt :OpenMatt)]

* Note: correct style in all copy for referring to the campaign is: "Made with Code"

Comment 35

[lainie]

I confirmed there is no horizontal logo, unfortunately, but I see the mockup in Comment 31 was reworked to use the logo as they provided it, and is placed above the fold which they also requested ;)

It's looking great, thank you!

Comment 36

[lainie]

Cassie, just emailed you all the logos they have - hopefully one of those formats will work.

Can you let me know what the URLs will be for these pages? Something like:
* webmaker.org/madewithcode_meme
* webmaker.org/madewithcode_poster
* webmaker.org/madewithcode_firstwebpage

I need to tell them the URLs by Tuesday, June 10th. Let me know if that's not possible.

Comment 37

[Cassie McDaniel [:cassiemc]]

Recommend dashes over underscore but might be personal preference. Aki, feel free to make the call here. 

* webmaker.org/madewithcode-meme
* webmaker.org/madewithcode-poster
* webmaker.org/madewithcode-firstwebpage

I also forwarded Aki the logos because I was still unable to open the vector files, hopefully she is able to open them.

Comment 38

[Aki Rose Braun [:akirose]]

I recall a conversation elsewhere that we were eliminating underscores in subdomains, avoiding them in URIs? Let's stick with that and use dashes instead.

Comment 39

[lainie]

Please let me know if these are final:

* webmaker.org/madewithcode-meme
* webmaker.org/madewithcode-poster
* webmaker.org/madewithcode-firstwebpage

Do they also need ref IDs or no since they're unique URLs? Also, they're going to link to webmaker.org from the campaign's "About" page, so do we need a ref ID for that? 

I'd like to share all final URLs with the partner by tomorrow (even if the pages aren't done).

Comment 40

[Aki Rose Braun [:akirose]]

Comment on attachment 8431727 [details]
https://redpen.io/ht9394041a025b89e8

>https://redpen.io/ht9394041a025b89e8

Comment 41

[Aki Rose Braun [:akirose]]

Comment on attachment 8435037 [details]
https://redpen.io/ht9394041a025b89e8

>https://redpen.io/ht9394041a025b89e8

Comment 42

[Aki Rose Braun [:akirose]]

Am I making these on the angular side or the nunjucks side of webmaker.org? Are they going to be evergreen or will they have a shorter lifespan that’s generally related to marketing efforts?

Comment 43

[Aki Rose Braun [:akirose]]

The first design on the redpen is very obvious to me, but I’m unclear what the football design is for. Since that was not in the dropbox, is it safe for me to ignore for now?

Comment 44

[Cassie McDaniel [:cassiemc]]

Yes ignore the football one. I presented it during demos as a concept only.

Comment 45

[Matt Thompson (@OpenMatt :OpenMatt)]

* To confirm: we'll use these URLs for the pages:

* webmaker.org/madewithcode-meme
* webmaker.org/madewithcode-poster
* webmaker.org/madewithcode-firstwebpage

Comment 46

[lainie]

Can someone let me know if we need RIDs on these, or a special one for webmaker.org that will be linked from the "About" page on the main partner campaign site?

Comment 47

[Matt Thompson (@OpenMatt :OpenMatt)]

* @ Lainie: do we know the URL for the Made with Code campaign site yet?

Comment 48

[lainie]

Yes, it's madewithcode.com I also put it in this bug https://bugzilla.mozilla.org/show_bug.cgi?id=1021245

Comment 49

[inactivate account for kate]

Aki: can you do them in angular? That way you can use makerstrap

Comment 50

[Aki Rose Braun [:akirose]]

I have everything set and ready to be merged in once #1021245 is ready, but I think I need help sourcing my links. should they have query strings on them? If so, what should the query strings be?

Comment 51

[Matt Thompson (@OpenMatt :OpenMatt)]

* Which links?

Comment 52

[Aki Rose Braun [:akirose]]

All of them?  I don't know if the links should have query strings (RIDs?) on them or not, or if so what they should be.

Comment 53

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Aki: can you demo these today?

Comment 54

[Aki Rose Braun [:akirose]]

Absolutely. Do you have an answer about those links?

Comment 55

[Brett Gaylor [:brett]]

Aki I think we want to set the RIDs from Made With Codes site, so, when they link to webmaker.org/ourmadewithcodesite, it should be webmaker.org/ourmadewithcodesite/RIDfoo . But you don't need to hard code that RID code in, we'll make sure they just link to us using a RID.

Does that make sense?

Comment 56

[lainie]

Brett, does this mean I need to provide Google with different URLs? There are four total:

* One to webmaker.org that will come from the campaigns "About" page, where we're listed as a lead contributor
* One direct to the meme page - webmaker.org/madewithcode-meme
* One direct to the poster page - webmaker.org/makdewithcode-poster
* One direct to the first webpage page - https://webmaker.org/madewithcode-firstwebpage

If there are specific links with RID codes for all of these (or any of these), I need to get them over to Google ASAP. 

Lainie

Comment 57

[Brett Gaylor [:brett]]

Lainie, yes. We need to get them these RIDS and basically we pick them.  Do they have multiple different places where they'll send FROM?  or do they just have one campaign site?

You want one RID for each source, so we could use these for their campaign site:

https://webmaker.org/madewithcode-meme/?ref=madewithcode
https://webmaker.org/makdewithcode-poster/?ref=madewithcode
https://webmaker.org/madewithcode-firstwebpage/?ref=madewithcode

and 
https://webmaker.org/madewithcode-meme/?ref=twitter

if we want to send ourselves via twitter, or
https://webmaker.org/madewithcode-meme/?ref=bsd

If we want to send from BSD etc.  anything after ref= we just choose ourselves and it'll start recording.

Comment 58

[Aki Rose Braun [:akirose]]

Attachment: https://github.com/mozilla/webmaker.org/pull/802

Abstracts the pages into json content (sorry, markdown is a post-makerparty project)

Comment 59

[[github robot]]

Commits pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/2b6b4b11bc1a05d93d4c3d5ba061b0f7b7e504d3
Bug 1015987 - [META] Create custom "make" pages for partner coding campaign

https://github.com/mozilla/webmaker.org/commit/41bd10cfbd633342b5c43e07c10f7993f0bcd0ca
Merge pull request #802 from gesa/1015987/abstract-mwc

Bug 1015987 - [META] Create custom "make" pages for partner coding campaign