Closed Bug 531193 Opened 15 years ago Closed 15 years ago

Development of Mobile Landing Page

Categories

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

Product:
www.mozilla.org
Component:
General
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
VERIFIED FIXED

People

(Reporter: clooney, Assigned: sgarrity)

References

(
URL
)

Details

Attachments

(3 files)

Screenshot of IE 6 layout
684.23 KB, image/png
Details
Screenshot of IE 6 video clipping text
913.81 KB, image/png
Details
Screenshot of IE 7 layout issues
693.28 KB, image/png
Details 
Here is the new mobile landing page for SilverOrange development. There are two copy edits, but Silverorange may be in a better position to make those changes directly.
1) Change "Learn about sync" to "Learn about Weave Sync" link the bottom, left hand section.
2) Change "Download for your Nokia N900 at Firefox.com/m" to "Visit Firefox.com/m on your Nokia N900 to download." Only the URL should be bold/highlighted so as not to prompt people to click-through, but rather, type in the address on their phone.

Thanks!
The attachment may be too big. Here's the sendspace link to download directly: 
http://www.sendspace.com/file/t3qeo3
An initial implementation of this has been committed to trunk in r56940. Still some more to do (missing links, menu update, twitter stuff, etc.)
Thanks Steven. Just to be sure, do we have a clear plan for what should happen with this page vs the original N900-centric one? My understanding is that they both need to be in the mix, but with the N900 one moving to a new URL.

This is probably a question for Caitlin more than anything.
I have moved the Maemo page to /en-US/mobile/maemo/

There is also a "Firefox for Maemo" link in the right menu now on the landing page.
Just noticed, the "Firefox for Maemo" menu item doesn't highlight when on that page.
>Under The Mobile Story blurb:
Change existing copy to: "We've been working hard to make the new mobile Firefox the most modern mobile Web browser available. It's built on the same engine as the desktop Firefox 3.6 and is packed full of familiar features. Watch the video to see how you’ve helped us get here and where we're going next."

> Under Take Your Firefox Anywhere blurb:
Change existing copy to: "Enjoy the Awesome Bar, add-ons, one-touch bookmarking and more. Plus, with Weave Sync, it synchronizes perfectly with your desktop Firefox - all the way down to your open tabs!" 
The link below should read: "Learn more about Weave Sync"

>Under Devs: Expand your Reach
Change existing copy to: "Devs: Get in Early" 
Body: "Build rich mobile apps using open technologies like HTML5, CSS and Javascript, or create mobile add-ons for the first browser to support them. We're going places, join us for the ride."

>Change "Devs: Extend your reach" to "Dev: Get in Early"

>"Tell us what you think" to "Speak up! Give us feedback". The  link should have a little favicon in front of it. Is it possible to add a little note/talk bubble in front of it, so it's similar to Twitter and Facebook? Not sure how small we can make it, but would be nice and more clear that it's an action item. 

>In the Twitter section. Please remove the big T favicon on the bottom box and just put the arrows after Twitter and Identi.ca (so it doesn't look like we're preferring Twitter).
(In reply to comment #6)
> >Under The Mobile Story blurb:
> Change existing copy to: "We've been working hard to make the new mobile
> Firefox the most modern mobile Web browser available. It's built on the same
> engine as the desktop Firefox 3.6 and is packed full of familiar features.
> Watch the video to see how you’ve helped us get here and where we're going
> next."
> 
> > Under Take Your Firefox Anywhere blurb:
> Change existing copy to: "Enjoy the Awesome Bar, add-ons, one-touch bookmarking
> and more. Plus, with Weave Sync, it synchronizes perfectly with your desktop
> Firefox - all the way down to your open tabs!" 
> The link below should read: "Learn more about Weave Sync"
> 
> >Under Devs: Expand your Reach
> Change existing copy to: "Devs: Get in Early" 
> Body: "Build rich mobile apps using open technologies like HTML5, CSS and
> Javascript, or create mobile add-ons for the first browser to support them.
> We're going places, join us for the ride."
> 
> >Change "Devs: Extend your reach" to "Dev: Get in Early"
> 
> >"Tell us what you think" to "Speak up! Give us feedback". The  link should have a little favicon in front of it. Is it possible to add a little note/talk bubble in front of it, so it's similar to Twitter and Facebook? Not sure how small we can make it, but would be nice and more clear that it's an action item. 
John and I just spoke. Can we actually replace Tell us what you think with "Get Involved" and link to the new Get Involved page? I just realized it was missing from this landing page and it should definitely be here. It can still have the bubble note favicon. Thanks!
> 
> >In the Twitter section. Please remove the big T favicon on the bottom box and just put the arrows after Twitter and Identi.ca (so it doesn't look like we're preferring Twitter).
(In reply to comment #7)
> (In reply to comment #6)
> > >Under The Mobile Story blurb:
> > Change existing copy to: "We've been working hard to make the new mobile
> > Firefox the most modern mobile Web browser available. It's built on the same
> > engine as the desktop Firefox 3.6 and is packed full of familiar features.
> > Watch the video to see how you’ve helped us get here and where we're going
> > next."
> > 
> > > Under Take Your Firefox Anywhere blurb:
> > Change existing copy to: "Enjoy the Awesome Bar, add-ons, one-touch bookmarking
> > and more. Plus, with Weave Sync, it synchronizes perfectly with your desktop
> > Firefox - all the way down to your open tabs!" 
> > The link below should read: "Learn more about Weave Sync"
> > 
> > >Under Devs: Expand your Reach
> > Change existing copy to: "Devs: Get in Early" 
> > Body: "Build rich mobile apps using open technologies like HTML5, CSS and
> > Javascript, or create mobile add-ons for the first browser to support them.
> > We're going places, join us for the ride."
> > 
> > >Change "Devs: Extend your reach" to "Dev: Get in Early"
> > 
> > >"Tell us what you think" to "Speak up! Give us feedback". The  link should have a little favicon in front of it. Is it possible to add a little note/talk bubble in front of it, so it's similar to Twitter and Facebook? Not sure how small we can make it, but would be nice and more clear that it's an action item. 
> John and I just spoke. Can we actually replace Tell us what you think with "Get
> Involved" and link to the new Get Involved page? I just realized it was missing
> from this landing page and it should definitely be here. It can still have the
> bubble note favicon. Thanks!
Sorry. It's "Find out how to get involved"
> > 
> > >In the Twitter section. Please remove the big T favicon on the bottom box and just put the arrows after Twitter and Identi.ca (so it doesn't look like we're preferring Twitter).
Also, one visual request: let's make the text size for the copy under the "Take Your Firefox Anywhere" and "Devs: Get in Early" blurbs the same size as the text in the "Mobile Story" section. Right now it looks a little too big.

Thanks!
These changes are done in r57095 except for the changes to the Twitter/Identica elements, which we don't have in the page yet - Alex, are you working on those?
(In reply to comment #10)
> These changes are done in r57095 except for the changes to the Twitter/Identica
> elements, which we don't have in the page yet - Alex, are you working on those?

I'm not, but I can.  Should I?
-Alex and Craig are working on Twitter fields. (The copy is 25 characters so field can allow 115 characters).

-My one edit would be to change the video image to be to be called out (it gets lost currently). Can we add a frame from the video? If so, the frame of Madhave writing on the white board. If not, the all black image with the play button (similar to Steven's mockups).
I found a couple bugs while messing with the video player.

1)  The flash fallback player doesn't fit, it overflows into the sidebar and looks odd.

We could rearrange this, and use the full width of the box for the video, and move the text below the video player.  Or, give a width to the Flash player somehow.


2)  When no player exists, there is a message
"Alternatively, you may use the video download links to the right."  
but, there are no download links to the right.  

Need to add video download links and change the copy: s/to the right/below/
1) Please change Devs to Developers? Is there just not enough room? Please confirm?
2) Also, in Dev section, please capitalize S in JavaScript

3) Can we add example copy in the Twitter field (in light, gray copy). 
"At Pub Trivia Night!"  (to provide an example).

4) We also need to provide a hash tag for this so we can track (similar to firefox 5)

5) Please change right nav Firefox for Maemo to "Firefox for the Nokia N900"
(We can keep the Get Firefox section as-is)

6) Please move up the Get Firefox, and Spread the Word sections so we can see Join the Movement on the same plain.

Thanks!
Adding a few more notes here:

(In reply to comment #14)
> 1) Please change Devs to Developers? Is there just not enough room? Please
> confirm?
Agreed...looks to me like there's room.

> 2) Also, in Dev section, please capitalize S in JavaScript
Good catch.
 
> 3) Can we add example copy in the Twitter field (in light, gray copy). 
> "At Pub Trivia Night!"  (to provide an example).
How about the copy literally reads: (ex. At pub trivia night!)
 
> 4) We also need to provide a hash tag for this so we can track (similar to
> firefox 5)
Caitlin, what's your recommendation here?
 
> 5) Please change right nav Firefox for Maemo to "Firefox for the Nokia N900"
> (We can keep the Get Firefox section as-is)
This is a universal change - do we need a separate bug?
 
> 6) Please move up the Get Firefox, and Spread the Word sections so we can see
> Join the Movement on the same plain.
Agreed. Let us know if you think content changes are needed to make it all fit.

Also, two more nits that were brought to my attention:
- let's change "The Mobile Story" to "Our Mobile Story"
- in the Dev paragraph, the 5 in HTML5 looks a bit like a subscript - is anything we can do there, or is that just the way it is?

Thanks!!
Craig appears to have fixed the fallback flash video player size.

I've made changes 1, 2, 5 & 6 from comment #14.

For issue 3 in Comment #14, we'll need some JS changes to automatically selected/over-write example twitter text before that is added and I can't get that done tonight.

Waiting for clarification on issue 4.

Also made the additional text changes from comment #15. I think the sidebar could use a bit more style cleanup, but I'll have to come back to that.
r57280 updates some empty links
r57291 adds the twitter hash tag #fxmobile to the end of the tweet, and adjusts the allowed length accordingly.
One more small copy change here...in the "Take Your Firefox Anywhere" section, let's change the last sentence to read:

"Plus, with Weave Sync, it synchronizes perfectly with your desktop Firefox - even your open tabs!"

(In reply to comment #14)
> 5) Please change right nav Firefox for Maemo to "Firefox for the Nokia N900"
> (We can keep the Get Firefox section as-is)
Also, as discussed this should be "Firefox for Nokia N900" now.

Can we get these fixes made today? Would like to get this to 110n soon.

Also, where do we stand on QA? Have you guys had a chance to check this out yet?

Thanks all-
The bug is not marked fixed, and I'd rather not test while it's enduring churn.
r57302, makes the text updates in comment 19

r57306, darkens the video player overlay per comment 12

I'm looking at the Twitter box example text and JS now.
r57318 implements the twitter input placeholder text.

That covers everything so I'll resolve this fixed.  Reopen if I missed something or there's more to do.  Thanks.
Status: NEW → RESOLVED
Closed: 15 years ago
Resolution: --- → FIXED
Do we support IE 6 for this page?
(In reply to comment #23)
> Do we support IE 6 for this page?

Caitlin, what's the IE6 priority for this page? I would say we should support it, but am not sure how important it is in the grand scheme.
I'll make an IE6-friendly version of that background image when I get to the office on Monday.
Are the Twitter and Facebook links coming soon?
They should already be in there:
Facebook: http://www.facebook.com/firefoxformobile
Twitter:http://twitter.com/mozmobile
r57420 adds the FB and Twitter links
(In reply to comment #25)
> I'll make an IE6-friendly version of that background image when I get to the
> office on Monday.

This is one in r57434. There are still some issues in IE6 with the twitter/identica features. I'll take a look.
(In reply to comment #29)
> There are still some issues in IE6 with the
> twitter/identica features. I'll take a look.

I'm on a roll replying to myself. This IE6 issue is also fixed in r57435.
Thanks Steven! My one edit for this page is the size of the video when selected to play. When viewer selects to watch, can it enlarge? This is an example: http://www.mozilla.com/en-US/firefox/firefox.html
We should probably try to fix the two issues in comment 32 / comment 33.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(In reply to comment #31)
> Thanks Steven! My one edit for this page is the size of the video when selected
> to play. When viewer selects to watch, can it enlarge? This is an example:
> http://www.mozilla.com/en-US/firefox/firefox.html

I'll see what I can do.

It's pretty late in the game to be making edits like this, let's watch out for this stuff earlier next time.

Steven, could you take a look at the IE 6/7 issues please?
IE6/7 layout issues should be fixed in r57491.
(In reply to comment #31)
> Thanks Steven! My one edit for this page is the size of the video when selected
> to play. When viewer selects to watch, can it enlarge? This is an example:
> http://www.mozilla.com/en-US/firefox/firefox.html

This is one in r57495. I agree with Alex that it's very late in the process for a major change link this.
I think we've covered everything.  I did a quick check in IE, and it looks OK.  Steven, thanks for picking up the modal video player stuff.

I found a minor, edge-case bug in the modal video player.  I've filed bug 533519 for that, so we can move ahead here.  It's not a launch blocker.
Status: REOPENED → RESOLVED
Closed: 15 years ago → 15 years ago
Resolution: --- → FIXED
Sorry, didn't realize this was a major change. John Slater mentioned it as an edit during last week's review and I thought it had been captured.  John I thought this was something we had done before pretty easily? Am I explaining it correctly? Please confirm and apologies if it's more difficult that I presumed and not enough time.
(In reply to comment #39)
> Sorry, didn't realize this was a major change. John Slater mentioned it as an
> edit during last week's review and I thought it had been captured.  John I
> thought this was something we had done before pretty easily? Am I explaining it
> correctly? Please confirm and apologies if it's more difficult that I presumed
> and not enough time.

No big deal.  It's done now.
(In reply to comment #40)
> No big deal.  It's done now.

Thanks Alex!
(In reply to comment #41)
> (In reply to comment #40)
> > No big deal.  It's done now.
> 
> Thanks Alex!

Thank you! thank you!
Verified FIXED; I think this is ready for localizers (not saying it's perfect[1], but it looks pretty good).

[1] Minor alignment issue with the Twitter logo in IE 6, but I'm not sure it matters.
Status: RESOLVED → VERIFIED
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.

Attachment

General

Creator:
Created:
Updated:
Size: