Closed Bug 551785 Opened 10 years ago Closed 10 years ago

Mobile: new firstrun page

Categories

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

defect
Not set

Tracking

(Not tracked)

VERIFIED FIXED

People

(Reporter: abuchanan, Assigned: abuchanan)

References

()

Details

Attachments

(7 files, 1 obsolete file)

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)
Duplicate of this bug: 552729
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.
Attached file Portrait PSD
Attached file Landscape PSD
Attached image FirstRun_portrait_png
Attached image firstrun_landscape_png
I'd like to replace yummy with readability in the Starter Kit Collection if/when it's ready.
Flags: in-litmus?
Mobile Starter Kit collection: https://addons.mozilla.org/en-US/firefox/collection/mobilestarterkit
 (Would like to add Readability as the fourth).
(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?
(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.
(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.
Assignee: nobody → steven
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.
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?
(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.
> 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.
(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.
(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.
(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.
(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.
(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?
(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
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
(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.
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
Attached file .gif animation updated
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.
Assignee: steven → buchanae
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.
Weave & Starter Kit links are added in r64789. Talked to Alex and he's going to take it from here.
Great, thanks.
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.
Attached patch patch (obsolete) — Splinter Review
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.
Attachment #435314 - Flags: review?(21)
Attached patch patch 2Splinter Review
Updated patch
Attachment #435314 - Attachment is obsolete: true
Attachment #435329 - Flags: review?(21)
Attachment #435314 - Flags: review?(21)
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.
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
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
thanks for everyone's work on this.
Verified FIXED; tested on my N900, but as we all know, this is going away with bug 556349.
Status: RESOLVED → VERIFIED
(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"
(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.
(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)
I run 1.0, not the nightlies; should I?
(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.
Duplicate of this bug: 521077
Duplicate of this bug: 552729
Component: www.mozilla.org/firefox → www.mozilla.org
Component: www.mozilla.org → General
Product: Websites → www.mozilla.org
You need to log in before you can comment on or make changes to this bug.