763650 - [NativeUI GA] implementation bug for Mobile Features page updates

Status: RESOLVED FIXED

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

Description

[John Slater]

Implementation bug for the content changes covered in bug 724643.

Comment 1

[Lee Tom]

PSD is here:
http://cl.ly/2S2L1T3v2N0l2D3u2F0f


* This page is updated to our new 12-column responsive grid (940px wide) 
Graphic pads (backgrounds in white) extend to width of 1000px wide, but page should be coded to allow for scrollbar at 1024

Comment 2

[John Slater]

Hey guys. We reopened the design bug to make a few additional content changes, so don't do too much work on the PSD from comment #1 just yet. Will have the new one tomorrow.

Comment 4

[Lee Tom]

Thanks for your patience, All! 

Here's the revised PSD:
http://cl.ly/3D192H0r0p44461X3H2u

Comment 5

[[github robot]]

Commits pushed to dev at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/b8b9d535bc1bb08953ae079ecb505853e0afc698
Fix bug 763650 - implement mobile features page

https://github.com/mozilla/bedrock/commit/d5ea5428049c09e4e1a1aefb1f6d56b781fab48c
Merge pull request #184 from craigcook/bug-763650-mobile-features

Bug 763650 mobile features

Comment 6

[Lee Tom]

Hi folks. A few minor changes here:
http://cl.ly/1o2t052P1X2v2D2P2F0o

Comment 7

[Jaclyn Fu]

Edits on links:

tabs: http://support.mozilla.org/kb/tabs-quickly-switch-websites-firefox-mobile#os=android&browser=m14

sync: http://support.mozilla.org/kb/how-do-i-set-up-firefox-sync#os=android&browser=m14

HTML5 learn more: https://developer.mozilla.org/En/Mobile

Safe: http://support.mozilla.org/kb/configure-mobile-privacy-and-security-settings#os=android&browser=m14

awesome screen: support.mozilla.org/kb/use-awesome-screen-search-firefox-android#os=android&browser=m14

Under the download button at the top, instead of systems and languages it should be "supported devices" that links to mozilla.org/mobile/platforms

And for "what's new" under the download button it should link to "mozilla.org/mobile/notes"

thank you!

Comment 8

[Matej Novak [:matej]]

Looking good. Let's just lowercase "features" in the headline: Mobile features

Comment 9

[[e-mail]]

Hello

thanks for the chance to review.  a few quick comments (my guess is that most will be applicable to R2)

1.  In responsive design (when is narrow the page) the image of the phone disappears

2. Why in the trailing navigation at the top of the page do we have "Home" instead of "Firefox?"  Ideally would read Firefox - Mobile - Features.  Headline would then read ""Firefox for Android Features"

3.  Green download button does not call out "On Google Play" or indicate that we are sending you to download the software from a different site. What was the take-away from our last discussion regarding calling out Google Play?  Link at bottom of page does a good job.

4. We need to explore another way of providing context on things like the Awesome Screen that does not send people to the help section.  Could we not have a rollover definition appear / disappear on roll-over?  This is true for all links on the page.  Provide a brief summary with a link to learn more (we're sending people to every corner of the mozilla universe currently. 

5.  The static image of the phone screen looks dull.  Could we not replace with an animated GIF that rolls through the home screen (shown), Wikipedia (since it's open source) or Google search / You Tube video (just a suggestion / if we can support)?  Just looking to build excitement and let people know that this is a web browser that let's them do all the things they do already.  (BTW - we should explore showing more than our screen on the Google Play image (or be sure to provide multiple screenshots on the GP page)

Thanks.  Apologies for sounding link a broken record.  What's the best way to capture the next round of changes, and getting those into a development calendar.  

Pete

Comment 10

[John Slater]

Adding a bit of extra info & comments to what Pete said:

(In reply to [e-mail] from comment #9)
> 1.  In responsive design (when is narrow the page) the image of the phone
> disappears

This was intentional. We could have fit the phone in, but it would have taken up a disproportionate amount of room and pushed the other content awkwardly down the page, so Lee & I made the call to drop it.

 > 2. Why in the trailing navigation at the top of the page do we have "Home"
> instead of "Firefox?"  Ideally would read Firefox - Mobile - Features. 
> Headline would then read ""Firefox for Android Features"

Good idea. This would require changing the bread crumbs in more pages than just this one, though, so let's save for R2.
 
> 3.  Green download button does not call out "On Google Play" or indicate
> that we are sending you to download the software from a different site. What
> was the take-away from our last discussion regarding calling out Google
> Play?  Link at bottom of page does a good job.

I thought we had discussed this and said it was ok not to specifically call out Google Play on the button? Personally, I don't feel like that's an essential piece, but am happy to discuss (esp for R2!).
 
> 4. We need to explore another way of providing context on things like the
> Awesome Screen that does not send people to the help section.  Could we not
> have a rollover definition appear / disappear on roll-over?  This is true
> for all links on the page.  Provide a brief summary with a link to learn
> more (we're sending people to every corner of the mozilla universe
> currently. 

Good thought...let's definitely discuss for R2 (I'm keeping a list).
 
> 5.  The static image of the phone screen looks dull.  Could we not replace
> with an animated GIF that rolls through the home screen (shown), Wikipedia
> (since it's open source) or Google search / You Tube video (just a
> suggestion / if we can support)?  Just looking to build excitement and let
> people know that this is a web browser that let's them do all the things
> they do already.  (BTW - we should explore showing more than our screen on
> the Google Play image (or be sure to provide multiple screenshots on the GP
> page)

I know we had discussed this earlier and I like the idea...another great one for R2.

> Thanks.  Apologies for sounding link a broken record.  What's the best way
> to capture the next round of changes, and getting those into a development
> calendar.  

I'm keeping a list...once we sort through all these pages we can regroup and get them onto the site in the next few weeks.
 
> Pete

Comment 11

[John Slater]

Also, can we fit "All the awesomeness of Firefox, packed into a mobile device." onto one line? It feels like the header area is pretty big and is pushing the main content down a lot...that might help.

Thanks!

Comment 12

[Craig Cook (:craigcook)]

(In reply to John Slater from comment #11)
> Also, can we fit "All the awesomeness of Firefox, packed into a mobile
> device." onto one line? It feels like the header area is pretty big and is
> pushing the main content down a lot...that might help.

It can definitely fit on one line at the desktop size, but it'll still wrap to two lines at tablet size unless we shrink the font significantly. However, at tablet width it has more words on the second line so it doesn't look so bad, and I think that's better than making the font too small. Mobile views shift the layout anyway so I think they're fine at two lines.

Comment 13

[John Slater]

Two lines for tablet/phone is fine...if we can get it to one line for the desktop that's great. Thanks!

Comment 14

[Chris More [:cmore]]

Live: http://www.mozilla.org/en-US/firefox/mobile/features/