Closed Bug 726141 Opened 12 years ago Closed 12 years ago

Create new MDN Apps page (targeted for MWC Dev Apps launch) using new Learn "HTML 5 & Mozilla" template page

Categories

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

Product:
developer.mozilla.org Graveyard
Component:
Wiki pages
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: havi, Unassigned)

References

Details

+++ This bug was initially created as a clone of Bug #712387 +++

new MWC Apps page will have the Html5 & friends look and feel (http://mozilla.focalcurve.com/mdn/learn-html5.php) and it will replace this page:
https://developer.mozilla.org/en-US/apps

Deliverables: new content by the end of today. (awaiting final naming decisions from Comms team to finalize copy)

Visual design for new Apps masthead: end of day, Monday 

The place where the demos are will be a visual, but we're not ready to display clickable Apps -- so we will defer to visde for best graphical treatment.  Also by end of Monday.
the requested URL for this page is: developer.mozilla.org/mwc
I thought the url was https://developer.mozilla.org/en-US/apps.

The page we discussed doesn't sound like an mwc page to me, it sounds like an apps page.
This will be the tracking bug. We can point both url's to the same page if that will save us from having to pick. We don't have time to design by committee here. ;)
Target Milestone: --- → 2.3
Depends on: 726166
Depends on: 726167
Thanks Luke & Stormy for clarifying and sorry to add noise. 

Yes, for purposes of product marketing at MWC it will be : developer.mozilla.org/mwc

(this can be a redirect)
Target Milestone: 2.3 → ---
First draft of copy doc for this page lives here. :

https://etherpad.mozilla.org/mwc-apps

Janet, Joe, Ragavan, Dan, Stormy et al, your feedback on the copy before 12 noon PT on Monday or sooner, pls. 

Questions or clarification on what's there? Ping me.
Hey Havi - thanks for posting the copy etherpad, it's helping me understand this page better. As far as the modules described on the etherpad go, are you envisioning those all going in the sidebar? It seems like since we don't have any content to take the place of the demos in the HTML5 & Friends template, it might be nice to put some of that content there. Am I reading the situation properly?
Hey Jason - thanks for having a look and yes, that's a good point. I was holding onto the idea of a visual/pretty picture, but since we really don't have anything to show yet and the current video needs a refresh, it makes great sense to move some of the documentation content into the body of the page.... 

I'd love to see this page get a little more color and visual pizzaz than the one it replaces (https://developer.mozilla.org/en-US/apps) - but I guess we're not giving you a whole lot to work with... 

I defer to your design judgment on this  but is there any possibility of screengrabbing from some of the demo apps and doing a composite image that suggests the range and selection of apps, without requiring or implying that any of it to be clickable? Just thinking aloud here...

thanks!
Are either of the developer videos going to be done in time for the launch of this page? One possible option may be to use those to lead into a : check out what some of our cool partners are doing with Mozilla/HTML5, here's you can too can get involved that then points to both docs as well as our BD contacts.
Sorry, I meant partner videos in my comment above, not developer videos - the ones Havi and Rainer have been working on.
Ragavan, I had that thought too, but the timing isn't going to work because we won't have a finished video for tomorrow, which is when we lock on the content, and it won't really work on page till we have a working marketplace... 

I am going to update the copy doc based on the product roadmap messaging that Erica just sent:

https://wiki.mozilla.org/Roadmap
Havi: That's too bad about the timing on that video, that would totally be cool. Oh well, next time! ;)

My opinion is that we should make this page center around whatever content we do have - in this case, that is developer docs and information about the advantages of Web Apps in the first place. One idea about how to accomplish this:

<idea>
Pick the three most important things for potential devs to know, and center them prominently on the page in headlines. Something like:

1) Built using Web Technology
2) Cross Platform Apps
3) Mozilla Marketplace
(just examples)

Each headline would have a brief, one-sentence description to give more detail about the headline, and a link at the end to content that would let them learn more about that topic. For the above example, links could be:

1) Built using Web Technology -> Getting Started (MDN Doc)
2) Cross Platform Apps -> More info about supported platforms, etc.
3) Mozilla Marketplace -> Visit the mozilla marketplace
(again, just pulling these out of thin air)

Of course, we should only link to content we will have by that time. We could still use the "Intro Paragraphs" text from the etherpad below these headlines, but that way potential devs wouldn't have to sift through paragraphs to get the most pertinent info. Well, what do you think about this idea? 
</idea>

Regardless of the body content, as far as a header goes, I think it would be cool to get together an image that illustrates the fact that apps can be on multiple devices, like a computer/tablet/phone all running the same app. I'll work with Ragavan tomorrow to see how feasible this is. If it's going to be tough, we can try and find a high-res version of http://cl.ly/382G3W3L3Z450m1z2t0z.

One final question: is the product name still not locked down? Like, what do we call Apps?
I've updated the copy document w/names and language driven by the release of Product roadmaps & messaging:

Page Title: Mozilla Marketplace for Open Web apps | Mozilla Developer Network

Header: 
Apps

Tagline: Build and distribute cross-platform HTML5 apps 

- i added some more verbiage in case we can't accomodate a graphic or video we can do a version with more text for now and update in later cycle. 

all changes reflected here: https://etherpad.mozilla.org/mwc-apps

PLS REVIEW and APPROVE ASAP. PLS ADD anything you think we're missing
jason: ping -- 

a couple ideas in response to your <idea></idea>

1- rainer might be able to pull a high-res still from our recent video shoots - i'll email him and put you on the cc: - since he shot some stills w/his canon5 D and did some screengrabs of responsive design in action that could make a nice still. 

I think you're right about the headlines for brevity and ease of scanning, but we're missing some key functionalities so how about this: 


1) Get started with making apps (https://developer.mozilla.org/en/Apps/Getting_Started)
2) Follow the Open Web apps project : https://wiki.mozilla.org/Apps
3) Sign up for the Apps Developer newsletter (this is the module you guys built for the existing: 
apps page: https://developer.mozilla.org/en-US/apps

if this works i break up the paragraph copy into smaller chunks under each of the 3 headlines. LMK. thanks!
Havi: Awesome, your headlines totally work, let's go with those!

Regarding the graphic, I'd love to see the responsive design stills. If that doesn't work, I'll just ask the other designers for the source file to the header on https://apps.mozillalabs.com/ - I remembered where I'd seen that graphic before this morning ;). Yay!
Jason, yay! if you can spec out approx wordcount based on lorem ipsum, i will provide tagline and short paragraph copy under each of those 3 headlines. 

I'll ping Rainer off bug, and put you on cc. (then i'll be offline for a bit btwn home and caltrain to mtn view) but backonline by mid-morning. thanks.
Jason: 

A: top level tagline:  Build and distribute cross-platform HTML5 apps 

B: sentences for each of the three headlines.


1) Get started with making apps (https://developer.mozilla.org/en/Apps/Getting_Started)

The  Mozilla Marketplace for open Web apps lets you build app experiences powered by open Web standards like HTML 5, JavaScript, CSS and friends.

2) Follow the pen Web apps project : https://wiki.mozilla.org/Apps

Mozilla puts you back in control of the app experience —   from  development to distribution to direct customer relationship management.

3) Sign up for the Apps Developer newsletter (this is the module you guys built for the existing: apps page: https://developer.mozilla.org/en-US/apps
Mozilla  is unlocking the power of the Web as the world’s largest marketplace. Learn more about the Mozilla Marketplace.
Folks, per my conversations w/Jason, Ragavan - captured the latest here. 

A: top level tagline:  Build and distribute cross-platform HTML5 apps 

B: sentences for each of the three headlines.


1) Getting started  (https://developer.mozilla.org/en/Apps/Getting_Started)

The  Mozilla Marketplace for open Web apps lets you build app experiences powered by open Web standards like HTML 5, JavaScript, CSS and friends.

2) Follow the project : https://wiki.mozilla.org/Apps

The Open Web apps project (https://wiki.mozilla.org/Apps) and Marketplace (https://wiki.mozilla.org/AMO:Roadmap/2012) put you back in control of the app experience. 

3) Sign up for the newsletter (this is the module you guys built for the existing: apps page: https://developer.mozilla.org/en-US/apps
Mozilla  is unlocking the power of the Web as the world’s largest marketplace. Sign up to learn more about Open Web apps.
havi, jason

back in aug, we did some user research with consumers and we found that web and open didn't bring up good connotations. granted this is a dev page and not consumer, but i think using the terms open and web would be detrimental to our project.

here is a 4min video on that http://fs2.mv.mozilla.com/research/apps/consumer/on-web-apps.mp4

so for the title, can we use something like
"Mozilla Marketplace | Mozilla Developer Network"
"Mozilla Apps Project | Mozilla Developer Network"
"Mozilla Apps Initiative | Mozilla Developer Network"

instead of "Mozilla Marketplace for Open Web apps | Mozilla Developer Network"
All good feedback, but please note: we have to finalize copy by EOD tomorrow so we can implement by Wednesday/Thursday to push on Tuesday before MWC.
(In reply to Diane Loviglio from comment #18)

Is that link a Mountain View-only link? Can you provide an external link for us too please?
luke- 
when we collected these interviews, we told them we'd keep their data private (we don't do that anymore with user research), but we did then, so i don't feel comfortable putting it on my people account.

however, if you VPN to MV, you can view the video.
i can also send it to you via yousendit or something, I just don't want to put it up on the web. :)
Diane -- thanks! Ragavan has approved all naming - and these naming decisions are all blessed and locked for MWC by PR/messaging folks (came thru this weekend):  "Mozilla Marketplace for Open Web apps" |  is the product/platform name for this dev cycle and on MWC print collateral and at least till after MWC. 

So we are finalizing copy based on that at least till after March and the actual Marketplace launch. 

*******

Luke, also, this page will be the destination for the new graphic you guys are building for the MDN homepage -  https://bugzilla.mozilla.org/show_bug.cgi?id=725757
Craig: copy for the revised below the fold: "What's your interest" section -- 
What's your interest -->> Resources for apps developers

Clickable title: Apps documentation hub (https://developer.mozilla.org/en/Apps) -
Caption: Documentation topics for Open Web apps use HTML5 and innovative, Mozilla-designed APIs. 


Clickable title: HTML 5 & Mozilla (http://mozilla.focalcurve.com/mdn/learn-html5.php) - 
caption: Web technologies for building build cross-browser, cross-device app experiences. 

Clickable title: For mobile apps developers (https://developer.mozilla.org/en/Apps/For_mobile_app_developers) 
caption: If you already develop apps for mobile devices, here's how to develop Open Web apps. 

Clickable: For web developers (https://developer.mozilla.org/en/Apps/For_Web_developers)
caption: If you already develop Web sites, here's how to make them into installable apps. 


Using apps offline (https://developer.mozilla.org/en/Apps/Using_apps_offline)

Caption: How to design apps so that they can be cached and used without an Internet connection.
I just updated the etherpad with the latest copy at the top: 
https://etherpad.mozilla.org/mwc-apps

Final copy for new Apps Landing page on MDN: 
Page title: Mozilla Marketplace for Open Web apps | Mozilla Developer Network

Headline: Apps
Tagline: Build and distribute cross-platform HTML5 apps

Above the fold modules:
1) Getting started  
The  Mozilla Marketplace lets you build app experiences powered by Web standards like HTML5, CSS3, JavaScript and related APIs.
Learn more. (https://developer.mozilla.org/en/Apps/Getting_Started)

2) Follow the project 
The Open Web apps project (https://wiki.mozilla.org/Apps) and Marketplace (https://wiki.mozilla.org/AMO:Roadmap/2012) put you back in control of the app experience. 
Learn more. (https://wiki.mozilla.org/Apps)

3) Sign up for the newsletter 
(this is the module you guys built for the existing apps landing page https://developer.mozilla.org/en-US/apps)
Mozilla is unlocking the power of the Web as the world’s largest marketplace. Learn more about Open Web apps.
Sign up now. (opens an email submit form)
        
Below the fold text box: 
   
What's your interest -->> Resources for apps developers

Clickable title: Apps documentation hub (https://developer.mozilla.org/en/Apps) -
Caption: Documentation topics for Open Web apps, using HTML5 and innovative, Mozilla-designed APIs. 

Clickable title: HTML5 & Mozilla (http://mozilla.focalcurve.com/mdn/learn-html5.php) - 
Caption: Web technologies for building build cross-browser, cross-device app experiences. 

Clickable title: For mobile apps developers (https://developer.mozilla.org/en/Apps/For_mobile_app_developers) 
Caption: If you already develop apps for mobile devices, here's how to develop Open Web apps. 

Clickable title: For web developers (https://developer.mozilla.org/en/Apps/For_Web_developers)
Caption: If you already develop Web sites, here's how to make them into installable apps. 

Clickable title: Using apps offline (https://developer.mozilla.org/en/Apps/Using_apps_offline)
Caption: How to design apps so they can be cached and used without an Internet connection.
Feedback from Erica Jostedt last night suggesting faint grey HTML5 Logo added to Apps masthead/header, similar to logo treatment placement here:

https://developer.mozilla.org/en-US/demos/tag/tech:html5/

we expect a staged version for final review later today.
Static template is finally ready for review at http://mozilla.focalcurve.com/mdn/section-apps.php
This is awesome -- thank you for whippin' it up! :) 

A couple small fussy things, if it's possible to tweak: 

COLORS: Is it possible to 'match up' the page colors with colors of the new learn HTML5 page (http://mozilla.focalcurve.com/mdn/learn-html5.php) so they look like more of a pair - use the orangey-red underlines instead of the gold horizontal rules? 
And on the HTML5 logo go with either full orange or all grey -- that faded orange looks just a little too washed out to work. 

In the 3rd box under "Sign up for the newsletter" -- trying to fix the spacing/kerning that leaves a large space at the end of the 2nd line:
Mozilla is unlocking the power of the Web as the world’s largest marketplace. Learn more about Open Web apps.-->
Mozilla unlocks the power of the Web as the world’s largest marketplace. Learn more about Open Web apps.


Under 'Resources for Apps Developers' -- BAD LINK: 

For mobile apps developers (http://mozilla.focalcurve.com/learn/html5) --> https://developer.mozilla.org/en/Apps/For_mobile_developers
will  http://developer.mozilla.org/mwc be able to redirect to this page when it's built? TIA!
(In reply to havi hoffman [:havi] from comment #27)
 
> COLORS: Is it possible to 'match up' the page colors with colors of the new
> learn HTML5 page (http://mozilla.focalcurve.com/mdn/learn-html5.php) so they
> look like more of a pair - use the orangey-red underlines instead of the
> gold horizontal rules?

We have an established color scheme throughout MDN, but since we're already breaking consistency by making the Apps page completely different from the other four landing pages, we can probably get away with violating the color scheme. It's gone full orange now.
 
> And on the HTML5 logo go with either full orange or all grey -- that faded
> orange looks just a little too washed out to work. 

I tried a few different treatments. Gray was too weak and full strength orange competed with the title. I also tried different title treatments but with a word as small as "Apps" it really needed something to give it more weight. But now that the title background has gone orange the logo can be full color too and they work well together.

> In the 3rd box under "Sign up for the newsletter" -- trying to fix the
> spacing/kerning that leaves a large space at the end of the 2nd line:
> Mozilla is unlocking the power of the Web as the world’s largest
> marketplace. Learn more about Open Web apps.-->
> Mozilla unlocks the power of the Web as the world’s largest marketplace.
> Learn more about Open Web apps.

Trying to control line breaks and word wrap is usually an exercise in futility. Text will wrap as it likes. I've made the text a little smaller so it doesn't demand quite as much space and I think it looks ok, even though now "Marketplace" wraps to a new line in the Follow box. Alas, there's not much more we can do about it. It's just the way the web works.
Sorry I totally missed this earlier: inside the sign-up for the newsletter module, after you click "Sign up": 

Sign up now for the Apps Developer preview and recurring newsletter. First 5000 subscribers gain early access to resources, tools, and exclusive info. Join us!.--->

Sign up now for the Apps Developer newsletter for access to resources, tools, and exclusive info. Join us!.
Update this page on 2/27 or 2/28 when Marketplace goes live sometime during MWC. Module 3 (right side) changes:

Sign up for the Newsletter --> Submit Your Apps

The Mozilla Marketplace (marketplace.mozilla.org) is now open. Submit your apps now. 

(The link on "Mozilla Marketplace" goes to marketplace.mozilla.org )

Craig, Luke: I can file as separate bug if you guys prefer.
Commit pushed to mdn at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/d5d3a3d323d33f566f357e4717811f4f35dd5d48
Bug 726141 - new apps page

Still needs some form handling for the newsletter subscribe
(In reply to havi hoffman [:havi] from comment #32)

> Craig, Luke: I can file as separate bug if you guys prefer.

Please do, so we can track that work separately and we'll call this task resolved. Thanks!
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
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.