551785 - Mobile: new firstrun page

Status: VERIFIED FIXED

(www.mozilla.org :: General, defect)

Description

[Alex Buchanan [:abuchanan]]

A new mobile firstrun page is being designed.

Here is a recent revision, *not* final:
http://people.mozilla.com/~abuchanan/mozilla_firstrun_v7_1%282%29.jpg

Final PSDs are expected to arrive on or before Tuesday 3/16

Silverorange will be implementing the design (afaik).

Some notes:

* Need to figure out how we pull download count numbers for Weave and Starter Kit.  CC'ing Fligtar for advice.

* Weave box links to /m/sync
* Starter Kit and Tour links are unclear, need those.

related to bug 551757 (new landing page, new header + footer for all /m/* pages)

Comment 2

[Alex Buchanan [:abuchanan]]

From duplicate,

Rodrigo, the designer of the new First Run page, has made CSS recommendations
based on mobile readability and ease of navigation that we discussed.

I have uploaded the PSD files for all pages. The color/font sizes/ images
indications are all in the PSD files.  Here you have my recommendations for all
pages (CSS):

First run:

Justify logo and mozilla tab to left and right of the screen. Adjust the copy
on the width.

Create the light blue boxes (featured) for adjust to width. That will make the
boxes expand also when going to landscape mode.

Fonts: Use PSD to replicate font size in pixels or points. The N900 is a high
res screen so if working in pixels double the size for an optimal resolution.

Link areas: Create a link area background color (#b5d7e0) when the user selects
the light blue boxes (featured content) or under links. 

Spacing: Adjust spacing on page width.

Comment 3

[Alex Buchanan [:abuchanan]]

Attachment: Portrait PSD

Comment 4

[Alex Buchanan [:abuchanan]]

Attachment: Landscape PSD

Comment 5

[Caitlin Looney]

Attachment: FirstRun_portrait_png

Comment 6

[Caitlin Looney]

Attachment: firstrun_landscape_png

I'd like to replace yummy with readability in the Starter Kit Collection if/when it's ready.

Comment 7

[Caitlin Looney]

Mobile Starter Kit collection: https://addons.mozilla.org/en-US/firefox/collection/mobilestarterkit
 (Would like to add Readability as the fourth).

Comment 8

[Alex Buchanan [:abuchanan]]

(In reply to comment #7)
>  (Would like to add Readability as the fourth).

The fourth what?


(In reply to comment #6)
> I'd like to replace yummy with readability in the Starter Kit Collection
> if/when it's ready.

Yummy?

Comment 9

[Justin Scott [:fligtar]]

(In reply to comment #0)
> * Need to figure out how we pull download count numbers for Weave and Starter
> Kit.  CC'ing Fligtar for advice.

It looks like the latest png mocks removed the download counts. If you still need them, getting the Starter Kit downloads will be a bit tricky... we only expose those stats to the collection creator so they aren't available in the API right now. If you need them, we can try to do something for the next AMO release.

Comment 10

[Caitlin Looney]

(In reply to comment #9)
> (In reply to comment #0)
> > * Need to figure out how we pull download count numbers for Weave and Starter
> > Kit.  CC'ing Fligtar for advice.
> 
> It looks like the latest png mocks removed the download counts. If you still
> need them, getting the Starter Kit downloads will be a bit tricky... we only
> expose those stats to the collection creator so they aren't available in the
> API right now. If you need them, we can try to do something for the next AMO
> release.


I pulled them from the mockups because I wasn't sure if the cumulative counter was as honest as I'd like to be. Once numbers are impressive, we should consider this more social approach. Thanks for checking, Fligtar.

Comment 11

[Steven Garrity [:sgarrity]]

This new page is implemented in trunk in r64625 with a few caveats.

First, I don't have an N900, so I can't test properly. I have been testing on the desktop emulator, but I can't change orientation.

There isn't a good way to ensure that the three blue boxes are always the same height. This looks a bit odd. I can mess about a bit with min-heights, but these break down when you switch to landscape.

Comment 12

[Stephen Donner [:stephend] Not actively reading bugmail]

QA is in the middle of certifying AMO 5.8, and won't have time to properly look at this until tomorrow, at the earliest; is that fine?

Comment 13

[Alex Buchanan [:abuchanan]]

(In reply to comment #12)
> QA is in the middle of certifying AMO 5.8, and won't have time to properly look
> at this until tomorrow, at the earliest; is that fine?

That's fine, we're still missing link hrefs anyway.

Need:
Links for the 3 blue boxes (Caitlin?)
* Weave 
* Starter Kit
* Take the Tour

"See More Features" -> /m/features


(In reply to comment #11)
> First, I don't have an N900, so I can't test properly. I have been testing on
> the desktop emulator, but I can't change orientation.

From what I can tell, there is no portrait mode in Firefox (or microb) on the N900 (actually, nearly the whole phone is run in landscape mode)

> There isn't a good way to ensure that the three blue boxes are always the same
> height. This looks a bit odd. I can mess about a bit with min-heights, but
> these break down when you switch to landscape.

If it's not possible, let's not waste time trying to force it :)  These will end up varying as localizations come along, too.  

We had a similar issue with the "learn more" boxes browserchoice.m.c, you might check with Neil Lee (neilio) or Firebug to see what he came up with.


Other notes:

I love the new header style.

Footer links are a little hard to click without the stylus.  A bigger click area would be nice.

Font size seems OK.  Still a little small, but I personally don't have a hard time reading it.  Anyway, if it's too small, you can just double click and zoom in.

The blue background added to links as they are being clicked is great.  That kind of obvious feedback is very helpful on a mobile device.

So far, I don't see the value in designing two sets, for landscape *and* portrait.  Steven, is it even possible to have CSS apply to one or the other?  Via CSS media queries or something?  Is that a lot more work?  Seems like extra work for designers and developers, without much obvious benefit.

Comment 14

[Aakash Desai [:aakashd]]

> From what I can tell, there is no portrait mode in Firefox (or microb) on the
> N900 (actually, nearly the whole phone is run in landscape mode)

Just a drive-by comment, but portrait mode is planned to be included for Fennec 1.1 on maemo.

Comment 15

[Caitlin Looney]

(In reply to comment #13)
> (In reply to comment #12)
> > QA is in the middle of certifying AMO 5.8, and won't have time to properly look
> > at this until tomorrow, at the earliest; is that fine?
> 
> That's fine, we're still missing link hrefs anyway.
> 
> Need:
> Links for the 3 blue boxes (Caitlin?)
> * Weave
Weave should take user mobile Weave page: (http://www.mozilla.com/en-US/m/sync/)
> * Starter Kit
Starter Kit should direct people to download the starter kit in Add-ons Manager
> * Take the Tour
Is the .gif animation that is currently on first run, but with some update (added copy). I've sent these frames to Madhava -- should I send to Gavin? Steven? Alex? Thanks for confirming
> 
> "See More Features" -> /m/features
> 
> 
> (In reply to comment #11)
> > First, I don't have an N900, so I can't test properly. I have been testing on
> > the desktop emulator, but I can't change orientation.
> 
> From what I can tell, there is no portrait mode in Firefox (or microb) on the
> N900 (actually, nearly the whole phone is run in landscape mode)
> 
> > There isn't a good way to ensure that the three blue boxes are always the same
> > height. This looks a bit odd. I can mess about a bit with min-heights, but
> > these break down when you switch to landscape.
> 
> If it's not possible, let's not waste time trying to force it :)  These will
> end up varying as localizations come along, too.  
> 
> We had a similar issue with the "learn more" boxes browserchoice.m.c, you might
> check with Neil Lee (neilio) or Firebug to see what he came up with.
> 
> 
> Other notes:
> 
> I love the new header style.
> 
> Footer links are a little hard to click without the stylus.  A bigger click
> area would be nice.
> 
> Font size seems OK.  Still a little small, but I personally don't have a hard
> time reading it.  Anyway, if it's too small, you can just double click and zoom
> in.
> 
> The blue background added to links as they are being clicked is great.  That
> kind of obvious feedback is very helpful on a mobile device.
> 
> So far, I don't see the value in designing two sets, for landscape *and*
> portrait.  Steven, is it even possible to have CSS apply to one or the other? 
> Via CSS media queries or something?  Is that a lot more work?  Seems like extra
> work for designers and developers, without much obvious benefit.

Comment 16

[Alex Buchanan [:abuchanan]]

(In reply to comment #15)
> > * Starter Kit
> Starter Kit should direct people to download the starter kit in Add-ons Manager

Ok, but how do we link to that?

> > * Take the Tour
> Is the .gif animation that is currently on first run, but with some update
> (added copy). I've sent these frames to Madhava -- should I send to Gavin?
> Steven? Alex? Thanks for confirming

Ok, I think we'll need another new page then.  Caitlin, could you please open a new bug for this, and attach the new tour GIF there when it's ready?  Thanks.

Comment 17

[Caitlin Looney]

(In reply to comment #16)
> (In reply to comment #15)
> > > * Starter Kit
> > Starter Kit should direct people to download the starter kit in Add-ons Manager
> 
> Ok, but how do we link to that?

It's in-product, so we'll need to write some code to direct users right to Add-on Manager. Looping Finkle in so he's aware.
> 
> > > * Take the Tour
> > Is the .gif animation that is currently on first run, but with some update
> > (added copy). I've sent these frames to Madhava -- should I send to Gavin?
> > Steven? Alex? Thanks for confirming
> 
> Ok, I think we'll need another new page then.  Caitlin, could you please open a
> new bug for this, and attach the new tour GIF there when it's ready?  Thanks.

I can send you the files now. This gif animation will play if you select it from the first run page. Finkle, would love your opinion here as well.

Comment 18

[Alex Buchanan [:abuchanan]]

(In reply to comment #17)
> I can send you the files now. This gif animation will play if you select it
> from the first run page. Finkle, would love your opinion here as well.

I think we need a new page, because there's not room on the new firstrun page for this GIF.  We could maybe use some javascript to pop it up, and overlay it on the firstrun page (kinda like our pop-up video player) but it's easier to just make a new page and link to that.

Or, we could keep the GIF small, and replace the "Take a Tour" thumbnail with the actual tour GIF on the new firstrun page, and then not link anywhere.

Comment 19

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #17)

> > > Starter Kit should direct people to download the starter kit in Add-ons Manager
> > 
> > Ok, but how do we link to that?
> 
> It's in-product, so we'll need to write some code to direct users right to
> Add-on Manager. Looping Finkle in so he's aware.

Easy to do this. We have the same feature in the current firstrun page for Weave.

> > > > * Take the Tour
> > > Is the .gif animation that is currently on first run, but with some update
> > > (added copy). I've sent these frames to Madhava -- should I send to Gavin?
> > > Steven? Alex? Thanks for confirming
> > 
> > Ok, I think we'll need another new page then.  Caitlin, could you please open a
> > new bug for this, and attach the new tour GIF there when it's ready?  Thanks.
> 
> I can send you the files now. This gif animation will play if you select it
> from the first run page. Finkle, would love your opinion here as well.

will play in it's current area or should it overlay the entire firstrun page while playing?

Comment 20

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #18)
> (In reply to comment #17)
> > I can send you the files now. This gif animation will play if you select it
> > from the first run page. Finkle, would love your opinion here as well.
> 
> I think we need a new page, because there's not room on the new firstrun page
> for this GIF.  We could maybe use some javascript to pop it up, and overlay it
> on the firstrun page (kinda like our pop-up video player) but it's easier to
> just make a new page and link to that.

I'd rather "fake" a new page by just making the GIF overlay the firstrun page using some JS and display:none

Comment 21

[Alex Buchanan [:abuchanan]]

If the Starter Kit links to the add-ons manager, doesn't it make sense to have Weave link to the same place?  Currently, Caitlin recommends we link to /m/sync

Comment 22

[Caitlin Looney]

(In reply to comment #21)
> If the Starter Kit links to the add-ons manager, doesn't it make sense to have
> Weave link to the same place?  Currently, Caitlin recommends we link to /m/sync

Hi Alex, sorry for confusion. In my last response, I was hoping for the Starter Kit link to take user to Add-ons Manager in-product to complete install, which is what we talked about (hence the comment for code vs. url to make this happen). 

Talking to Finkle now about what's possible.

Comment 23

[Mark Finkle (:mfinkle) (use needinfo?)]

I'm just saying what is technically feasible. Does collector have a /m/ page?
Should we be consistent?

Also, if this page is going to replace the current about:firstrun page (meaning
the firstrun content is shipped with Fennec), we need to get this landed ASAP.
March 26th is the string freeze for Fennec 1.1

Comment 24

[Caitlin Looney]

Attachment: .gif animation updated

Comment 25

[Alex Buchanan [:abuchanan]]

Talked to mfinkle briefly in IRC.  We're not sure what the workflow would be for viewing the collection in the add-ons manager.  We're also not sure if that would require the user having already installed the Collector add-on.

Since we're on a short schedule, I recommend we link to AMO for both Weave and the Starter Kit.

So,

Weave:
https://addons.mozilla.org/es-ES/firefox/addon/10868

Starter Kit:
https://addons.mozilla.org/en-US/firefox/collection/mobilestarterkit

We could link to /m/sync for Weave, but it seems like just another hoop the user has to jump through, since they'll end up on that AMO page anyway.  Also, both linking to AMO is consistent.

Caitlin, sound good?  If so, I can have this wrapped up tomorrow morning.

Comment 26

[Caitlin Looney]

You actually don't have to have the Collector add-on because it'll take you to the AMO page where you can pick and choose from the collection. 

But agreed, I spoke to Fligtar a bit about this too and he wasn't sure of the code required so that one could see the individual add-ons in the collection rendered in the add-ons manager.

In sum, yes. Please link to Weave in AMO and Mobile Starter Kit in AMO to take users directly to the download, as well as keep things consistent. 

Thanks Alex and Mark.

Comment 27

[Steven Garrity [:sgarrity]]

Weave & Starter Kit links are added in r64789. Talked to Alex and he's going to take it from here.

Comment 28

[Caitlin Looney]

Great, thanks.

Comment 29

[Alex Buchanan [:abuchanan]]

I added the tour GIF, using the original animation (not the updated version, since there's still debate about that)

Check it out on your N900.

Comment 30

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: patch

This patch implements the new firstrun page using the current GIF. The strings are all in place. All the images should be in place too.

There is something strange going on with the "FAQ | Privacy Policy", but we can fix that later.

Comment 31

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: patch 2

Updated patch

Comment 32

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Comment on attachment 435329 [details] [diff] [review]
patch 2

+      <div id="follow">
+        <p>&firstrun.follow;</p>
+        <ul>
+          <li id="follow-twitter"><a href="http://twitter.com/mozmobile"><img src="chrome://browser/content/firstrun/twitter.png" height="41" width="42" /></a></li>
+          <li id="follow-facebook"><a href="http://www.facebook.com/firefoxformobile"><img src="chrome://browser/content/firstrun/facebook.png" height="41" width="42" /></a></li>
+        </ul>

As said on IRC, just remove the en-US reference when landing.

Comment 33

[Mark Finkle (:mfinkle) (use needinfo?)]

initial patch pushed:
http://hg.mozilla.org/mobile-browser/rev/f2f28abf8a1b

let's resolve this bug and do any follow on work in new bugs

Comment 34

[Caitlin Looney]

thanks for everyone's work on this.

Comment 35

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED; tested on my N900, but as we all know, this is going away with bug 556349.

Comment 36

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Post-fix screenshot of page, rendered on an N900

For posterity.

Comment 37

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #35)
> Verified FIXED; tested on my N900, but as we all know, this is going away with
> bug 556349.

Stephen - you can verify on the N900 itself using "about:firstrun"

Comment 38

[Stephen Donner [:stephend] Not actively reading bugmail]

(In reply to comment #37)
> (In reply to comment #35)
> > Verified FIXED; tested on my N900, but as we all know, this is going away with
> > bug 556349.
> 
> Stephen - you can verify on the N900 itself using "about:firstrun"

That points to the old, in-production page, for me.

Comment 39

[Alex Buchanan [:abuchanan]]

(In reply to comment #38)
> (In reply to comment #37)
> > (In reply to comment #35)
> > > Verified FIXED; tested on my N900, but as we all know, this is going away with
> > > bug 556349.
> > 
> > Stephen - you can verify on the N900 itself using "about:firstrun"
> 
> That points to the old, in-production page, for me.

Is that because you don't have the most recent build of Firefox Mobile?  (the newest firstrun page was added to the Firefox chrome this week, afaik)

Comment 40

[Stephen Donner [:stephend] Not actively reading bugmail]

I run 1.0, not the nightlies; should I?

Comment 41

[Alex Buchanan [:abuchanan]]

(In reply to comment #40)
> I run 1.0, not the nightlies; should I?

If you want to see new first run pages, e.g comments 37 and 38, you'll need to run a nightly, because the first run pages are now built as part of the Firefox chrome.