Closed Bug 1120700 Opened 9 years ago Closed 9 years ago

[Fx OS Q1 2015] Implement Mozilla.org Fx OS consumer page redesign

Categories

(www.mozilla.org :: Pages & Content, defect)

Product:
www.mozilla.org
Component:
Pages & Content
Version:
Development/Staging
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: malexis, Assigned: espressive)

References

(
URL
)

Details

(Whiteboard: [kb=1627971] )

Attachments

(6 files, 1 obsolete file)

Updated FxOS consumer page wires as of Feb 4, 2015
2.06 MB, image/png
Details
Screen Shot 2015-02-15 at 20.51.27.png
22.14 KB, image/png
Details
FFxOS_ConsumerPage-PageChanges_Feb23.png
704.20 KB, image/png
Details
FFxBG_LightRays.png
96.12 KB, image/png
Details
FFxOS_ConsumerPage-PageChanges_Feb24.png
597.71 KB, image/png
Details
Screen Shot 2015-02-26 at 21.58.55.png
604.60 KB, image/png
Details
Whiteboard: [kb=1627971]
Depends on: 1125898
Hi Steven-

How much extra effort would it be to code the "Comes with everything you need" section of the page (wireframe here:  http://cl.ly/image/3c0Z1L3B122Y/o) like this http://tympanus.net/Tutorials/CSS3FilterFunctionality/index2.html ?

Thx,
Jen
Flags: needinfo?(steven)
(In reply to Jennifer Bertsch [:jbertsch] from comment #2)
> Hi Steven-
> 
> How much extra effort would it be to code the "Comes with everything you
> need" section of the page (wireframe here: 
> http://cl.ly/image/3c0Z1L3B122Y/o) like this
> http://tympanus.net/Tutorials/CSS3FilterFunctionality/index2.html ?
> 
> Thx,
> Jen

Here's an example Ty mocked up http://cl.ly/image/0F3q0I2i323h
(In reply to Jennifer Bertsch [:jbertsch] from comment #2)
> Hi Steven-
> 
> How much extra effort would it be to code the "Comes with everything you
> need" section of the page (wireframe here: 
> http://cl.ly/image/3c0Z1L3B122Y/o) like this
> http://tympanus.net/Tutorials/CSS3FilterFunctionality/index2.html ?
> Here's an example Ty mocked up http://cl.ly/image/0F3q0I2i323h

After taking a quick look, this seems feasible. I would (VERY APPROXIMATELY) say this would take a couple of additional full development days sort out.

We would also have to address this interaction in a mobile view.
Flags: needinfo?(steven)
Assigning over to Schalk. We'll get you up to speed Tues at our check-in meeting.
Assignee: nobody → schalk.neethling.bugs
Depends on: 1128587
List of countries for conditional  OS version content:

non launch markets : show 2.0 content

launch markets :
show 2.0 content
2.0 : Japan

show non-2.0 content:
1.4 : Bangladesh
1.3T : India, Philippines, Bangladesh
1.3 : all other countries except below (Montenegro, Costa Rica, Russia, Chile, Mexico, Hungary, Australia, Colombia, Uruguay, Guatemala, Greece, Hungary, Poland, Panama, Czech Republic, Spain, Macedonia, El Salvador, Peru, Germany, France)
1.1 : Brazil, Italy
Specific requirements for how 2.0 page content and interaction will change for locations that need to promote 1.3, 1.3T, and 1.4:

1. Replace main, large image of the OS UI with respective image of the OS available per location. Needed assets - one image for each OS - 1.3, 1.3T, 1.4. This will be displayed by location. We will provide a list of which locations should see which screenshot.

2. No pop-out demo area. Large image of UI is static. Demo content refers to 2.0 features only and does not apply to 1.3, 1.3T, or 1.4.

3. For all locations that see 1.3, 1.3T, 1.4 - Remove 3 benefits below large OS image. Replace with a single benefit and image that works for all 3 OS versions.
Logic explained in comment 7 shown in wireframe mockups.
(In reply to Jennifer Bertsch [:jbertsch] from comment #6)
> List of countries for conditional  OS version content:
> 
> non launch markets : show 2.0 content
> 
> launch markets :
> show 2.0 content
> 2.0 : Japan
> 
> show non-2.0 content:
> 1.4 : Bangladesh
> 1.3T : India, Philippines, Bangladesh
> 1.3 : all other countries except below (Montenegro, Costa Rica, Russia,
> Chile, Mexico, Hungary, Australia, Colombia, Uruguay, Guatemala, Greece,
> Hungary, Poland, Panama, Czech Republic, Spain, Macedonia, El Salvador,
> Peru, Germany, France)
> 1.1 : Brazil, Italy

Small question. Bangladesh is listed for 1.4 and 1.3T so, which one do we show? or is there no real difference between those two? Thanks!
Flags: needinfo?(jbertsch)
Firefox OS 2.0 is already available in Germany for the Alcatel One Touch Fire E since December. Why showing 1.3 content in Germany and not 2.0 content?
(In reply to Sören Hentzschel from comment #10)
> Firefox OS 2.0 is already available in Germany for the Alcatel One Touch
> Fire E since December. Why showing 1.3 content in Germany and not 2.0
> content?

Thanks, Soren.  The list I looked at must have been out of date.  I will update.

(In reply to Schalk Neethling [:espressive] from comment #9)
> (In reply to Jennifer Bertsch [:jbertsch] from comment #6)
> > List of countries for conditional  OS version content:
> > 
> > non launch markets : show 2.0 content
> > 
> > launch markets :
> > show 2.0 content
> > 2.0 : Japan
> > 
> > show non-2.0 content:
> > 1.4 : Bangladesh
> > 1.3T : India, Philippines, Bangladesh
> > 1.3 : all other countries except below (Montenegro, Costa Rica, Russia,
> > Chile, Mexico, Hungary, Australia, Colombia, Uruguay, Guatemala, Greece,
> > Hungary, Poland, Panama, Czech Republic, Spain, Macedonia, El Salvador,
> > Peru, Germany, France)
> > 1.1 : Brazil, Italy
> 
> Small question. Bangladesh is listed for 1.4 and 1.3T so, which one do we
> show? or is there no real difference between those two? Thanks!

Hi Schalk-

Good catch.  Bangladesh is 1.4.  However, we will show the same content for all non-2.0 countries.  I'll update the list in the next comment.

Thanks all,
Jen
Flags: needinfo?(jbertsch)
UPDATED Feburary 5, 2015List of countries for conditional  OS version content:

non launch markets : show 2.0 content

launch markets :
show 2.0 content
2.0 : Japan, Germany

show non-2.0 content:
1.4 : Bangladesh
1.3T : India, Philippines
1.3 : all other countries except below (Montenegro, Costa Rica, Russia, Chile, Mexico, Hungary, Australia, Colombia, Uruguay, Guatemala, Greece, Hungary, Poland, Panama, Czech Republic, Spain, Macedonia, El Salvador, Peru, France)
1.1 : Brazil, Italy
Updated February 12:  For launch, we are only supporting v2.0 for all locales and locations.  Thanks.
The various icons and assets needed for the page, do I need to export these from the PSD or will they be provided separately?
Flags: needinfo?(jbertsch)
This is not in the PSD, do we keep the current header and just change the titles or, is this going away?
(In reply to Schalk Neethling [:espressive] from comment #15)
> Created attachment 8564772 [details]
> Screen Shot 2015-02-15 at 20.51.27.png
> 
> This is not in the PSD, do we keep the current header and just change the
> titles or, is this going away?

That header is going away.
Flags: needinfo?(jbertsch)
(In reply to Schalk Neethling [:espressive] from comment #14)
> The various icons and assets needed for the page, do I need to export these
> from the PSD or will they be provided separately?

+Ty

However, I assume you should just export them from the PSD.
Flags: needinfo?(tflanagan)
Here's some preliminary feedback on what's up on demo3 now https://www-demo3.allizom.org/en-US/firefox/os/#

Most of my comments may be solved once page is responsive. 

- When demo area is expanded, all content should be constrained to the user’s viewport size if possible. They must be able to see the ‘x’ to close, title, toggle/nav, and phone area. If this isn’t possible, when animation from the first state of the product page resolves to the demo area, top of demo area should be at top of user’s screen so they can see the ‘x’ and title. For example, when I clicked into the demo area right now, this is what I saw http://cl.ly/image/3X15292X0s3F

- The app switching animation could start quicker and could be faster overall. (Schalk mentioned this as well)

- In the ‘Apps for all you do’ section, the navigation (app category toggle) seem to have too much space between them http://cl.ly/image/0A2r06321E3v


Schalk, do you have the info you need to make the conditional Get a Phone button appear only for countries where it is available?
Based on what's up on https://www-demo3.allizom.org/en-US/firefox/os/ I have a few comments:

• "Firefox OS" is in live text, but should be the wordmark.

• I think this is already being figured out, but the top row of apps on the home screen is different than what was in Ty's designs.

• Can we make the three text columns under the "Smart has never been so simple" section a little narrower? In particular I'd like "apps" in the third one to not be on its own line, but in general it would be good if they came out a little more evenly.

• In the Marketplace section, is the subhead the right size? It seems pretty big compared to the headline.

• Also in the Marketplace section, "Youtube" should be "YouTube"

Thanks.
Oh, I didn't know the animations were up as well. Very nice!

Some of the screenshots have recently been updated (including the browser and text message screens we're using). Let's make sure we're using the latest versions.
Quick question. If there are no feed links for a locale, I assume we will skip the entire 'in the news' section, correct?
Flags: needinfo?(jbertsch)
Flags: needinfo?(hhabstritt.bugzilla)
(In reply to Schalk Neethling [:espressive] from comment #22)
> Quick question. If there are no feed links for a locale, I assume we will
> skip the entire 'in the news' section, correct?

Yes. This is correct. It's a conditional area. If there is no news feed for a locale, the news section will not be displayed.
Flags: needinfo?(jbertsch)
Flags: needinfo?(hhabstritt.bugzilla)
(In reply to Holly Habstritt Gaal [:Habber] from comment #23)
> (In reply to Schalk Neethling [:espressive] from comment #22)
> > Quick question. If there are no feed links for a locale, I assume we will
> > skip the entire 'in the news' section, correct?
> 
> Yes. This is correct. It's a conditional area. If there is no news feed for
> a locale, the news section will not be displayed.

Thought as much, thanks!
Hi Team-

As I mentioned in the webprod channel, the hover/animation needs some more tweaking from Holly, Ty, and Schalk on the demo server (https://www-demo3.allizom.org/en-US/firefox/os) to really make it shine, so I'd like to descope it from the March 1 live date since we still have quite a bit of work to do on the page, including the navigation, geolocation, and responsiveness.

One possible post March 1 solution could be to have the animated demo section open from links in the "Designed to be simple" section rather than from the pulsing/hover thing in the phone close up area.

Schalk - Do you have any questions about Matej's feedbackin comment 20 above?  Do you have any questions about geolocation (get a phone vs sign up) and responsiveness for this page?  When do you think those will be implemented?

Mike-  Could you please remind us what the schedule is for this page?

Thx,
Jen
Flags: needinfo?(malexis)
(In reply to Jennifer Bertsch [:jbertsch] from comment #25)
> Hi Team-
> 
> As I mentioned in the webprod channel, the hover/animation needs some more
> tweaking from Holly, Ty, and Schalk on the demo server
> (https://www-demo3.allizom.org/en-US/firefox/os) to really make it shine, so
> I'd like to descope it from the March 1 live date since we still have quite
> a bit of work to do on the page, including the navigation, geolocation, and
> responsiveness.
> 
> One possible post March 1 solution could be to have the animated demo
> section open from links in the "Designed to be simple" section rather than
> from the pulsing/hover thing in the phone close up area.
> 
> Schalk - Do you have any questions about Matej's feedbackin comment 20
> above?  

Nope, those are all clear.

> Do you have any questions about geolocation (get a phone vs sign up)

agibson mentioned that I can just reuse the current logic so, there is no problem there.

> and responsiveness for this page?  When do you think those will be
> implemented?

That is my main focus for tomorrow.

> Mike-  Could you please remind us what the schedule is for this page?
> 
> Thx,
> Jen
(In reply to Jennifer Bertsch [:jbertsch] from comment #25)
> 
> Mike-  Could you please remind us what the schedule is for this page?
> 
> Thx,
> Jen

We'll need to be code complete with a PR submitted Feb 24 to begin review Feb 25

https://app.smartsheet.com/b/publish?EQBCT=818173bf2daa4682bca75efdf3aa7f0c
Flags: needinfo?(malexis)
Where would I find the list of URLs the links on the page should point to? Like for example, all the help links just before the email form. Thanks!
Flags: needinfo?(jbertsch)
Hi all,

I have put together a visual containing my feedback and tweaks needed for the site. I focused on layout and formatting mostly since were no longer including the demo/simulation section for launch.
Flags: needinfo?(tflanagan)
(In reply to Schalk Neethling [:espressive] from comment #28)
> Where would I find the list of URLs the links on the page should point to?
> Like for example, all the help links just before the email form. Thanks!

https://docs.google.com/a/mozilla.com/document/d/1zA9QnCI0aL6KgcxpIH5qzRORxvZcxcydNzj3hlSbSiM/edit
Flags: needinfo?(jbertsch)
(In reply to Jennifer Bertsch [:jbertsch] from comment #30)
> (In reply to Schalk Neethling [:espressive] from comment #28)
> > Where would I find the list of URLs the links on the page should point to?
> > Like for example, all the help links just before the email form. Thanks!
> 
> https://docs.google.com/a/mozilla.com/document/d/
> 1zA9QnCI0aL6KgcxpIH5qzRORxvZcxcydNzj3hlSbSiM/edit

Thank, added.
(In reply to tflanagan from comment #29)
> Created attachment 8568183 [details]
> FFxOS_ConsumerPage-PageChanges_Feb23.png
> 
> Hi all,
> 
> I have put together a visual containing my feedback and tweaks needed for
> the site. I focused on layout and formatting mostly since were no longer
> including the demo/simulation section for launch.

Thank you for the feedback, issues addressed and pushed to demo3
Hey Ty,

So I made the sections bleed to the full width of the viewport (this is what I was asking about a little while ago ;)). As you will see one demo3 though, the 'image' I have available for the 'rays of light', as jpetto calls them, is fixed at 1400px.

I know there was mention that this was going to be done using CSS3 but, just wanted to make sure that, that is the case and if not, do you have a tillable version of the rays of light?
Flags: needinfo?(tflanagan)
The current FxOS page displays either a sign up or get a phone button, as will the new page but, the current one has some text that accompanies these buttons.

https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/firefox/os/index.html#L114

I just want to confirm that, for the new design, there is no additional text copy that goes along with the buttons, all that will currently happen is that we will either show a sign-up button or a get a phone button.

Correct?
Flags: needinfo?(jbertsch)
I have pushed the code that adds the logic for the 'get a phone' / 'sign me up' buttons. One thing to note here though is that the resulting modal dialogs, does not 'match' the design/theme of the new FxOS page.

Not sure if that is something we need to change now or later.
The 'Learn more about Mozilla' link in the community section, do I link to

mozilla.org
mozilla.org/contribute
mozilla.org/mission
Quick general update on next steps from my side:

* Make page responsive
* Enable interactions for Apps for all you do section
* PR
* Review, refine

Let me know if I am missing anything or, if any of the points above should happen earlier in the cycle. Thanks!
Thanks, Schalk. There's definitely still something odd going on with the background. Hopefully you and Ty can get to the bottom of it.

Can you check Ty's visual in comment 29 again for where he suggested adding line breaks for the three blurbs under "Smart has never been so simple"? They look better now, but I think his breaks would make it even cleaner.

There's a pretty big gap above the Marketplace button. Can you check that spacing as well?

When can we expect to see the functionality working for the "Apps for all you do" section?

I also realized we'll need a new title and description for this page:


[TITLE]

Firefox OS — Just what you need — Great smartphone features, apps and more — Mozilla


[DESCRIPTION]

Firefox OS is designed to give you just what you need, just when you need it. It comes with apps for all you do and you can download more of your favorites from the Firefox Marketplace. Smart has never been so simple.
(In reply to Matej Novak [:matej] from comment #38)
> Thanks, Schalk. There's definitely still something odd going on with the
> background. Hopefully you and Ty can get to the bottom of it.

I made a mention of that in comment 33 will see how we are handling that. I assume there is a global way we will implement those 'rays of light' and it won't be just for this page.

> 
> Can you check Ty's visual in comment 29 again for where he suggested adding
> line breaks for the three blurbs under "Smart has never been so simple"?
> They look better now, but I think his breaks would make it even cleaner.

Yes, I saw those and will add them in.

> 
> There's a pretty big gap above the Marketplace button. Can you check that
> spacing as well?

I believe I used the spacing indicated but agree that the gap looks to big so, I will revise.

> 
> When can we expect to see the functionality working for the "Apps for all
> you do" section?

A little later today

> 
> I also realized we'll need a new title and description for this page:
> 
> 
> [TITLE]
> 
> Firefox OS — Just what you need — Great smartphone features, apps and more —
> Mozilla
> 
> 
> [DESCRIPTION]
> 
> Firefox OS is designed to give you just what you need, just when you need
> it. It comes with apps for all you do and you can download more of your
> favorites from the Firefox Marketplace. Smart has never been so simple.

Does all of that go in the hero space area aka. above the button and phone image?
:habber, should we aim to have the hero space, always fill the viewers initial viewport (except probably on very high resolutions but say, up to ~1400px) i.e. the blue area with the large phone image, with the phones bottom edge being at the bottom edge of the viewport?
Flags: needinfo?(hhabstritt.bugzilla)
(In reply to Schalk Neethling [:espressive] from comment #39)
> (In reply to Matej Novak [:matej] from comment #38)
> > 
> > [DESCRIPTION]
> > 
> > Firefox OS is designed to give you just what you need, just when you need
> > it. It comes with apps for all you do and you can download more of your
> > favorites from the Firefox Marketplace. Smart has never been so simple.
> 
> Does all of that go in the hero space area aka. above the button and phone
> image?

This is a meta description. It doesn't appear on the page itself.
(In reply to Matej Novak [:matej] from comment #41)
> (In reply to Schalk Neethling [:espressive] from comment #39)
> > (In reply to Matej Novak [:matej] from comment #38)
> > > 
> > > [DESCRIPTION]
> > > 
> > > Firefox OS is designed to give you just what you need, just when you need
> > > it. It comes with apps for all you do and you can download more of your
> > > favorites from the Firefox Marketplace. Smart has never been so simple.
> > 
> > Does all of that go in the hero space area aka. above the button and phone
> > image?
> 
> This is a meta description. It doesn't appear on the page itself.

Ah right, gotcha!
(In reply to Matej Novak [:matej] from comment #41)
> (In reply to Schalk Neethling [:espressive] from comment #39)
> > (In reply to Matej Novak [:matej] from comment #38)
> > > 
> > > [DESCRIPTION]
> > > 
> > > Firefox OS is designed to give you just what you need, just when you need
> > > it. It comes with apps for all you do and you can download more of your
> > > favorites from the Firefox Marketplace. Smart has never been so simple.
> > 
> > Does all of that go in the hero space area aka. above the button and phone
> > image?
> 
> This is a meta description. It doesn't appear on the page itself.

But that is still an l10n change though right? Can we still make string changes now? :flod?
(In reply to Schalk Neethling [:espressive] from comment #40)
> :habber, should we aim to have the hero space, always fill the viewers
> initial viewport (except probably on very high resolutions but say, up to
> ~1400px) i.e. the blue area with the large phone image, with the phones
> bottom edge being at the bottom edge of the viewport?

That sounds like a good initial rule to follow. That will result in the first state of the page being bold and clean as we imagined it. Put it up on demo like this and then we can comment further. It could be that by doing this on small viewports, it makes the content at the top of the page too small. If this is the case, being sure that at least the top half of the phone image w/ links (animated pulses) into the demo area are shown in the viewport upon landing on the page.
Flags: needinfo?(hhabstritt.bugzilla)
(In reply to Schalk Neethling [:espressive] from comment #33)
> Hey Ty,
> 
> So I made the sections bleed to the full width of the viewport (this is what
> I was asking about a little while ago ;)). As you will see one demo3 though,
> the 'image' I have available for the 'rays of light', as jpetto calls them,
> is fixed at 1400px.
> 
> I know there was mention that this was going to be done using CSS3 but, just
> wanted to make sure that, that is the case and if not, do you have a
> tillable version of the rays of light?

Im not sure how jpetto has faired with making them CSS-ready, but yes the idea is to have a them be CSS gradients versus image-based and be reused across other pages we design/redesign. We should check-in with jpetto to see what progress he has made. I think he is coding the redesigned nav too which will also be on this page. 

Have you managed to implement all the changes I included in the feedback mockup, or still in the process of doing so?
Flags: needinfo?(tflanagan)
(In reply to tflanagan from comment #45)
> (In reply to Schalk Neethling [:espressive] from comment #33)
> > Hey Ty,
> > 
> > So I made the sections bleed to the full width of the viewport (this is what
> > I was asking about a little while ago ;)). As you will see one demo3 though,
> > the 'image' I have available for the 'rays of light', as jpetto calls them,
> > is fixed at 1400px.
> > 
> > I know there was mention that this was going to be done using CSS3 but, just
> > wanted to make sure that, that is the case and if not, do you have a
> > tillable version of the rays of light?
> 
> Im not sure how jpetto has faired with making them CSS-ready, but yes the
> idea is to have a them be CSS gradients versus image-based and be reused
> across other pages we design/redesign. We should check-in with jpetto to see
> what progress he has made. I think he is coding the redesigned nav too which
> will also be on this page. 
> 
> Have you managed to implement all the changes I included in the feedback
> mockup, or still in the process of doing so?

Done. Just need to add in those line breaks for the paragraph text.
(In reply to Matej Novak [:matej] from comment #38)
> Thanks, Schalk. There's definitely still something odd going on with the
> background. Hopefully you and Ty can get to the bottom of it.
> 
> Can you check Ty's visual in comment 29 again for where he suggested adding
> line breaks for the three blurbs under "Smart has never been so simple"?
> They look better now, but I think his breaks would make it even cleaner.
> 
> There's a pretty big gap above the Marketplace button. Can you check that
> spacing as well?
> 
> When can we expect to see the functionality working for the "Apps for all
> you do" section?
> 
> I also realized we'll need a new title and description for this page:
> 
> 
> [TITLE]
> 
> Firefox OS — Just what you need — Great smartphone features, apps and more —
> Mozilla
> 
> 
> [DESCRIPTION]
> 
> Firefox OS is designed to give you just what you need, just when you need
> it. It comes with apps for all you do and you can download more of your
> favorites from the Firefox Marketplace. Smart has never been so simple.

Added.
(In reply to Schalk Neethling [:espressive] from comment #34)
> The current FxOS page displays either a sign up or get a phone button, as
> will the new page but, the current one has some text that accompanies these
> buttons.
> 
> https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/
> firefox/os/index.html#L114
> 
> I just want to confirm that, for the new design, there is no additional text
> copy that goes along with the buttons, all that will currently happen is
> that we will either show a sign-up button or a get a phone button.
> 
> Correct?

Hi Schalk-

We should use the "Sign up for our monthly newsletter and get the latest on Firefox OS" copy string that is currently live on the Fx OS page, but place it under the button (above the phone image) and make it a smaller font.  Ty can provide feedback on font size/opacity.

Thx,
Jen
Flags: needinfo?(tflanagan)
Flags: needinfo?(schalk.neethling.bugs)
Flags: needinfo?(jbertsch)
Quick question, what should 'see more' link to in the 'In the news' section?
Flags: needinfo?(schalk.neethling.bugs)
(In reply to Schalk Neethling [:espressive] from comment #49)
> Quick question, what should 'see more' link to in the 'In the news' section?

https://blog.mozilla.org/press/category/firefox-os/
German https://blog.mozilla.org/press-de/category/firefox-os/
French https://blog.mozilla.org/press-fr/category/firefox-os/
Italian https://blog.mozilla.org/press-it/category/firefox-os/
Polish https://blog.mozilla.org/press-pl/category/firefox-os/
all es locales https://blog.mozilla.org/press-es/category/firefox-os/ (note, this one is dependent on the fx OS blog posts being added to the right category)
pb-BR https://blog.mozilla.org/press-br/category/firefox-os/ (note: this one is dependent on the fx OS blog posts being added to the right category) 
LatAm Spanish (so all es locales other than es-ES) https://blog.mozilla.org/press-latam/category/firefox-os/
Pushed to demo3:

1024 x 768 and 768 x 1024

Let the feedback begin ;)
Will you be adding more breakpoints or a more fluid responsive method? Just curious when I should start my "responsivizing" related comments :) 

On retina display the Firefox OS logo looks a little fuzzy. Do you need a higher res version?

Small style comment regarding button hover-states. The "Get a phone" and "Sign me up" CTA has a nice hover style. This hover state is also consistent for the "Apps for all you do" categories. I'm not seeing a hover state for the Marketplace button, currently. It should take on the same hover style as the other blue buttons on the page.
(In reply to Holly Habstritt Gaal [:Habber] from comment #52)
> Will you be adding more breakpoints or a more fluid responsive method? Just
> curious when I should start my "responsivizing" related comments :) 

Go for it now, even though I am not done, I like feedback ;) So please do not wait. It also helps with the timezone thing ;)

> 
> On retina display the Firefox OS logo looks a little fuzzy. Do you need a
> higher res version?

I extracted that from the PSD so, sure.

> 
> Small style comment regarding button hover-states. The "Get a phone" and
> "Sign me up" CTA has a nice hover style. This hover state is also consistent
> for the "Apps for all you do" categories. I'm not seeing a hover state for
> the Marketplace button, currently. It should take on the same hover style as
> the other blue buttons on the page.

Interesting, they should all be the same... let me have a look. Thanks!
As far as responsive comments go... as I scale the browser, the content is not adjusting to the browser size until I size it way down. Will you be adding more breakpoints for larger viewport sizes? For example, the initial state of the page for me cuts off the right side of the page http://cl.ly/image/0x2o411M3U2Z  The content looks good at 2 of the smaller breakpoints, but I have to scale it down quite a bit to get there... 1) http://cl.ly/image/100R200m3j3M 2)http://cl.ly/image/0L0l3t161h2v

I'm not sure if there is a standard set of breakpoints or another more fluid method that we typically use on mozilla.org for making content scale/respnsify nicely, but you can probably check out some of our other pages (ie: /firefox/desktop) if you'd like to see what was done in other projects.


Sometimes when I scale the browser size down (manually, by dragging the corner) the page skips back to the top and I have to scroll back down to the content I was viewing.
Could we also please see the "Dialer, Messages, and Markeplace" images at the top of the phone?
(In reply to tflanagan from comment #45)
> (In reply to Schalk Neethling [:espressive] from comment #33)
> > Hey Ty,
> > 
> > So I made the sections bleed to the full width of the viewport (this is what
> > I was asking about a little while ago ;)). As you will see one demo3 though,
> > the 'image' I have available for the 'rays of light', as jpetto calls them,
> > is fixed at 1400px.
> > 
> > I know there was mention that this was going to be done using CSS3 but, just
> > wanted to make sure that, that is the case and if not, do you have a
> > tillable version of the rays of light?
> 
> Im not sure how jpetto has faired with making them CSS-ready, but yes the
> idea is to have a them be CSS gradients versus image-based and be reused
> across other pages we design/redesign. We should check-in with jpetto to see
> what progress he has made. I think he is coding the redesigned nav too which
> will also be on this page. 
> 
> Have you managed to implement all the changes I included in the feedback
> mockup, or still in the process of doing so?

Hi Jon-

Just pinging you on how the CSS for the "rays of light" gradient is coming along and if you have anything Schalk could borrow for this page?

I didn't realize this was a dependency for this page...

Hi Ty-

If Jon doesn't have anything we can use, can you help us?
Flags: needinfo?(jon)
(In reply to Jennifer Bertsch [:jbertsch] from comment #48)
> (In reply to Schalk Neethling [:espressive] from comment #34)
> > The current FxOS page displays either a sign up or get a phone button, as
> > will the new page but, the current one has some text that accompanies these
> > buttons.
> > 
> > https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/
> > firefox/os/index.html#L114
> > 
> > I just want to confirm that, for the new design, there is no additional text
> > copy that goes along with the buttons, all that will currently happen is
> > that we will either show a sign-up button or a get a phone button.
> > 
> > Correct?
> 
> Hi Schalk-
> 
> We should use the "Sign up for our monthly newsletter and get the latest on
> Firefox OS" copy string that is currently live on the Fx OS page, but place
> it under the button (above the phone image) and make it a smaller font.  Ty
> can provide feedback on font size/opacity.
> 
> Thx,
> Jen

Ill have something designed for tomorrow with formatting and placement for the sign up form
Flags: needinfo?(tflanagan)
Attached image FFxOS_ConsumerPage-PageChanges_Feb24.png (obsolete) — 
Schalk,

Here is my next round of formatting feedback. I realized you were using em sizing for most of the copy instead of pt. This should help speed things up.
Attached image FFxBG_LightRays.png — 
Jen,

If we need a backup option for the light rays, we can use the attached PNG
Sorry, I missed a few changes which I noticed after uploading the feedback graphic. 

Added some feedback around the marketplace icons placement and spacing
Attachment #8568950 - Attachment is obsolete: true
I have not made any progress on the rays of light CSS. It was going to be a finishing touch, but, after talking with Ty today, it became clear that it's not really part of the nav - it's part of the underlying page. The nav exposes the page below, which is where the rays reside.

Apologies for the lack of transparency on my end - things have been so hectic that I've been dealing only with the next most important task at hand. Haven't had much time to think big picture.

I do have some ideas as to how it could be implemented, which perhaps espressive, sgarrity and I can discuss over a 15 min chat. If we don't have time to do it the "right" way, we should be able to fall back to using an image (as sgarrity has done on the newly live /mwc page).
Flags: needinfo?(jon)
(In reply to Jennifer Bertsch [:jbertsch] from comment #55)
> Could we also please see the "Dialer, Messages, and Markeplace" images at
> the top of the phone?

Done.
More responsive related changes pushed to demo 3
Pushing more responsive related updates to demo3.

Having looked at stats-counter and related resources, I am focusing on the following screen resolutions and provided breakpoints as needed:

1366 x 768 (most popular screen res)
1920 x 1080
1024 x 768
1280 x 800
768 x 1024
360 x 640
320 x 568

And then also the following resolutions which I typically use on my mac:

2048 x 1280
1680 x 1050
1440 x 900
(In reply to tflanagan from comment #59)
> Created attachment 8568951 [details]
> FFxBG_LightRays.png
> 
> Jen,
> 
> If we need a backup option for the light rays, we can use the attached PNG

I have used this one and it works great! Thanks Jen. I know we 'should' be implementing this using CSS but, this is a nice stop gap to have available.
(In reply to Schalk Neethling [:espressive] from comment #65)
> (In reply to tflanagan from comment #59)
> > Created attachment 8568951 [details]
> > FFxBG_LightRays.png
> > 
> > Jen,
> > 
> > If we need a backup option for the light rays, we can use the attached PNG
> 
> I have used this one and it works great! Thanks Jen. I know we 'should' be
> implementing this using CSS but, this is a nice stop gap to have available.

+1 totally agreed.
Hi Schalk-

The page is coming along nicely!

Is it possible to have the page load showing the white space below the blue top area to encourage people to scrool?  See attached image.

Also - when do you think you'll have the Apps area coded like http://tympanus.net/Tutorials/CSS3FilterFunctionality/index2.html

Thanks,
Jen
Flags: needinfo?(schalk.neethling.bugs)
(In reply to Jennifer Bertsch [:jbertsch] from comment #67)
> Hi Schalk-
> 
> The page is coming along nicely!
> 
> Is it possible to have the page load showing the white space below the blue
> top area to encourage people to scrool?  See attached image.
> 

Sure, we were kinda last talking about the blue hero area filling the view port, but this does not happen on all resolutions anyhow so, I think it is a good idea to lessen the height a bit so the next section is slightly visible.

> Also - when do you think you'll have the Apps area coded like
> http://tympanus.net/Tutorials/CSS3FilterFunctionality/index2.html
> 

I believe the responsive part is now done, or very nearly there at least so, I am going to focus next on the above. Will update the bug once that has been pushed to demo3.

> Thanks,
> Jen
Flags: needinfo?(schalk.neethling.bugs)
Pushing the latest responsive tweaks to demo3, please feel free to do some additional testing. I am confident in the way it behaves now but, I could have of course missed something so, the more eyes on it, the better.

Thanks!
Thanks, Schalk!  I am sharing the page with Mary Ellen at 5pm pacific today so it would be great to have both of those things done by then (I know it is getting late in your day...).

Also, when do you think we'll be able to see the navigation on the page?  Tomorrow?


PS  I'll look next at the update you just pushed.
Pushing the apps for all you do interaction to demo3 now.
(In reply to Jennifer Bertsch [:jbertsch] from comment #70)
> Thanks, Schalk!  I am sharing the page with Mary Ellen at 5pm pacific today
> so it would be great to have both of those things done by then (I know it is
> getting late in your day...).

I believe we are just about there, going to apply the change now to ensure a bit of the second section (white) is visible above the fold.

> 
> Also, when do you think we'll be able to see the navigation on the page? 
> Tomorrow?

Yes, I reckon tomorrow. jpetto is going to open his PR EOD today so, I should be able to rebase that onto my branch and add it to the page.

> 
> 
> PS  I'll look next at the update you just pushed.
Hi Schalk. The page is looking really great. I think it's very close. 

One thing I'm noticing is that if I don't start viewing the page with my browser at full-screen, I won't see any homescreen apps in the hero image. This is what I see http://cl.ly/image/2m1g3C2R1h3S (the image cuts off just below the search field)

Since the main focus of this page is the OS, it's pretty important that it's clear there is a home screen and apps (not just a search field). 

Are you able to find the balance of making this work for smaller viewport sizes while the hero image is large enough AND conveys the apps on the home screen?
(In reply to Holly Habstritt Gaal [:Habber] from comment #73)
> Hi Schalk. The page is looking really great. I think it's very close. 

\o/

> 
> One thing I'm noticing is that if I don't start viewing the page with my
> browser at full-screen, I won't see any homescreen apps in the hero image.
> This is what I see http://cl.ly/image/2m1g3C2R1h3S (the image cuts off just
> below the search field)

I have seen this now on some resolutions but, I am working on resolving that along with the request from Jen in comment 67

> 
> Since the main focus of this page is the OS, it's pretty important that it's
> clear there is a home screen and apps (not just a search field). 

Completely agree, not intentionally left that way ;)

> 
> Are you able to find the balance of making this work for smaller viewport
> sizes while the hero image is large enough AND conveys the apps on the home
> screen?

Yeah, I reckon I will be to find a sweet spot across viewport sizes.
(In reply to Jennifer Bertsch [:jbertsch] from comment #48)
> (In reply to Schalk Neethling [:espressive] from comment #34)
> > The current FxOS page displays either a sign up or get a phone button, as
> > will the new page but, the current one has some text that accompanies these
> > buttons.
> > 
> > https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/
> > firefox/os/index.html#L114
> > 
> > I just want to confirm that, for the new design, there is no additional text
> > copy that goes along with the buttons, all that will currently happen is
> > that we will either show a sign-up button or a get a phone button.
> > 
> > Correct?
> 
> Hi Schalk-
> 
> We should use the "Sign up for our monthly newsletter and get the latest on
> Firefox OS" copy string that is currently live on the Fx OS page, but place
> it under the button (above the phone image) and make it a smaller font.  Ty
> can provide feedback on font size/opacity.
> 
> Thx,
> Jen

Hi Schalk and Ty-

Just a ping that we need to get this added to the page.

Thx,
Jen
Flags: needinfo?(tflanagan)
Flags: needinfo?(schalk.neethling.bugs)
(In reply to Jennifer Bertsch [:jbertsch] from comment #75)
> (In reply to Jennifer Bertsch [:jbertsch] from comment #48)
> > (In reply to Schalk Neethling [:espressive] from comment #34)
> > > The current FxOS page displays either a sign up or get a phone button, as
> > > will the new page but, the current one has some text that accompanies these
> > > buttons.
> > > 
> > > https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/
> > > firefox/os/index.html#L114
> > > 
> > > I just want to confirm that, for the new design, there is no additional text
> > > copy that goes along with the buttons, all that will currently happen is
> > > that we will either show a sign-up button or a get a phone button.
> > > 
> > > Correct?
> > 
> > Hi Schalk-
> > 
> > We should use the "Sign up for our monthly newsletter and get the latest on
> > Firefox OS" copy string that is currently live on the Fx OS page, but place
> > it under the button (above the phone image) and make it a smaller font.  Ty
> > can provide feedback on font size/opacity.
> > 
> > Thx,
> > Jen
> 
> Hi Schalk and Ty-
> 
> Just a ping that we need to get this added to the page.
> 
> Thx,
> Jen

I assume we just need to add this below the 'sign me up button' when shown, correct?
Flags: needinfo?(schalk.neethling.bugs)
(In reply to Schalk Neethling [:espressive] from comment #76)
> (In reply to Jennifer Bertsch [:jbertsch] from comment #75)
> > (In reply to Jennifer Bertsch [:jbertsch] from comment #48)
> > > (In reply to Schalk Neethling [:espressive] from comment #34)
> > > > The current FxOS page displays either a sign up or get a phone button, as
> > > > will the new page but, the current one has some text that accompanies these
> > > > buttons.
> > > > 
> > > > https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/
> > > > firefox/os/index.html#L114
> > > > 
> > > > I just want to confirm that, for the new design, there is no additional text
> > > > copy that goes along with the buttons, all that will currently happen is
> > > > that we will either show a sign-up button or a get a phone button.
> > > > 
> > > > Correct?
> > > 
> > > Hi Schalk-
> > > 
> > > We should use the "Sign up for our monthly newsletter and get the latest on
> > > Firefox OS" copy string that is currently live on the Fx OS page, but place
> > > it under the button (above the phone image) and make it a smaller font.  Ty
> > > can provide feedback on font size/opacity.
> > > 
> > > Thx,
> > > Jen
> > 
> > Hi Schalk and Ty-
> > 
> > Just a ping that we need to get this added to the page.
> > 
> > Thx,
> > Jen
> 
> I assume we just need to add this below the 'sign me up button' when shown,
> correct?

Yes please.  Do you want to make your best guess adding the text tomorrow and Ty can provide feedback?
(In reply to Jennifer Bertsch [:jbertsch] from comment #77)
> (In reply to Schalk Neethling [:espressive] from comment #76)
> > (In reply to Jennifer Bertsch [:jbertsch] from comment #75)
> > > (In reply to Jennifer Bertsch [:jbertsch] from comment #48)
> > > > (In reply to Schalk Neethling [:espressive] from comment #34)
> > > > > The current FxOS page displays either a sign up or get a phone button, as
> > > > > will the new page but, the current one has some text that accompanies these
> > > > > buttons.
> > > > > 
> > > > > https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/
> > > > > firefox/os/index.html#L114
> > > > > 
> > > > > I just want to confirm that, for the new design, there is no additional text
> > > > > copy that goes along with the buttons, all that will currently happen is
> > > > > that we will either show a sign-up button or a get a phone button.
> > > > > 
> > > > > Correct?
> > > > 
> > > > Hi Schalk-
> > > > 
> > > > We should use the "Sign up for our monthly newsletter and get the latest on
> > > > Firefox OS" copy string that is currently live on the Fx OS page, but place
> > > > it under the button (above the phone image) and make it a smaller font.  Ty
> > > > can provide feedback on font size/opacity.
> > > > 
> > > > Thx,
> > > > Jen
> > > 
> > > Hi Schalk and Ty-
> > > 
> > > Just a ping that we need to get this added to the page.
> > > 
> > > Thx,
> > > Jen
> > 
> > I assume we just need to add this below the 'sign me up button' when shown,
> > correct?
> 
> Yes please.  Do you want to make your best guess adding the text tomorrow
> and Ty can provide feedback?

Sounds like a plan to me.
(In reply to Jennifer Bertsch [:jbertsch] from comment #75)
> (In reply to Jennifer Bertsch [:jbertsch] from comment #48)
> > (In reply to Schalk Neethling [:espressive] from comment #34)
> > > The current FxOS page displays either a sign up or get a phone button, as
> > > will the new page but, the current one has some text that accompanies these
> > > buttons.
> > > 
> > > https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/
> > > firefox/os/index.html#L114
> > > 
> > > I just want to confirm that, for the new design, there is no additional text
> > > copy that goes along with the buttons, all that will currently happen is
> > > that we will either show a sign-up button or a get a phone button.
> > > 
> > > Correct?
> > 
> > Hi Schalk-
> > 
> > We should use the "Sign up for our monthly newsletter and get the latest on
> > Firefox OS" copy string that is currently live on the Fx OS page, but place
> > it under the button (above the phone image) and make it a smaller font.  Ty
> > can provide feedback on font size/opacity.
> > 
> > Thx,
> > Jen
> 
> Hi Schalk and Ty-
> 
> Just a ping that we need to get this added to the page.
> 
> Thx,
> Jen

I have added this, not pushed to demo3 yet. Will ping in the bug once pushed.
What is the smallest resolution/screen size that we aim to support with this page?
Flags: needinfo?(jbertsch)
Flags: needinfo?(hhabstritt.bugzilla)
New responsive updates as well as the string re: sign me up pushed to demo3.
flod brought it to my attention that the 'Other Firefox OS versions' link points to //www.mozilla.org/firefox/os/devices/tv/ I am thinking that is probably not what we want.
Hi Schalk-

This bug is getting a little nuts, so I'm starting an etherpad to prioritize outstanding work:
https://etherpad.mozilla.org/fxos-outstanding-1march2015

Thx,
Jen
Flags: needinfo?(jbertsch)
(In reply to Schalk Neethling [:espressive] from comment #80)
> What is the smallest resolution/screen size that we aim to support with this
> page?

Response from agibson on this question. 

Smallest breakpoint in sandstone is 320px (standard portrait width for a lot of phones) https://github.com/mozilla/bedrock/blob/master/media/css/sandstone/lib.less#L121
Flags: needinfo?(hhabstritt.bugzilla)
v0.3 - now to make the responsive tweaks.
PR opened:
https://github.com/mozilla/bedrock/pull/2783

I am gonna let it brew overnight ;)
(In reply to Jennifer Bertsch [:jbertsch] from comment #50)
> (In reply to Schalk Neethling [:espressive] from comment #49)
> > Quick question, what should 'see more' link to in the 'In the news' section?
> 
> https://blog.mozilla.org/press/category/firefox-os/
> German https://blog.mozilla.org/press-de/category/firefox-os/
> French https://blog.mozilla.org/press-fr/category/firefox-os/
> Italian https://blog.mozilla.org/press-it/category/firefox-os/
> Polish https://blog.mozilla.org/press-pl/category/firefox-os/
> all es locales https://blog.mozilla.org/press-es/category/firefox-os/ (note,
> this one is dependent on the fx OS blog posts being added to the right
> category)
> pb-BR https://blog.mozilla.org/press-br/category/firefox-os/ (note: this one
> is dependent on the fx OS blog posts being added to the right category) 
> LatAm Spanish (so all es locales other than es-ES)
> https://blog.mozilla.org/press-latam/category/firefox-os/

This has been done.
Hey Jen,

Any feedback on the below two items?

flod brought it to my attention that the 'Other Firefox OS versions' link points to //www.mozilla.org/firefox/os/devices/tv/ I am thinking that is probably not what we want.

---

The 'Learn more about Mozilla' link in the community section, do I link to

mozilla.org
mozilla.org/contribute
mozilla.org/mission
Flags: needinfo?(jbertsch)
(In reply to Schalk Neethling [:espressive] from comment #88)
> Hey Jen,
> 
> Any feedback on the below two items?
> 
> flod brought it to my attention that the 'Other Firefox OS versions' link
> points to //www.mozilla.org/firefox/os/devices/tv/ I am thinking that is
> probably not what we want.
> 
> ---
> 
> The 'Learn more about Mozilla' link in the community section, do I link to
> 
> mozilla.org
> mozilla.org/contribute
> mozilla.org/mission

For Learn more, let's link to the homepage www.mozilla.org

For the Other versions, let's leave it pointing to the TV page

Thanks.
Flags: needinfo?(jbertsch)
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/b0440e908d7da9dbb49d04291cd073f6dc4b30bd
Fix Bug 1120700, implement new design for firefox/os

https://github.com/mozilla/bedrock/commit/03533b058e0e178cc83813447c5c712277ecf6b3
Merge pull request #2783 from schalkneethling/bug1120700-implement-fxos-consumer-page-redesign

Fix Bug 1120700, implement new design for firefox/os
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/ebfd67a36587ac44c7453f2051b121942b20c4ff
Bug 1120700 - Misc tweaks and fixes for new FxOS page

Reworked the hero space for more fluid spacing and alignment of elements, and to allow easier text wrapping especially for l10n.

https://github.com/mozilla/bedrock/commit/ce0113931322037592c1bbcbc5024317e765720e
Merge pull request #2798 from craigcook/bug-1120700-firefox-os-tweaks

Bug 1120700 - Misc tweaks and fixes
The latest code, including the commits from comment #91, is in production, but the design does not go live until the waffle switch "firefox-os-index-2015" is activated. The switch is active in the dev and stage environments, but not yet on production. I scheduled the switch to be activated in production at 9AM PST with the following commands on the bedrock admin node:


$ export DIR=/data/bedrock/www/www.mozilla.org-django/bedrock
$ export PYTHON=/data/bedrock/www/www.mozilla.org-django/venv/bin/python
$ export SWITCH=firefox-os-index-2015
$ echo "cd $DIR && $PYTHON manage.py switch $SWITCH on --create" | at 09:00 2015-03-01
job 27 at 2015-03-01 09:00
Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/90bec7ae5db8bb312c4c34dec6079a1d1489ec41
Bug 1120700 - Fx OS consumer page: restore page title on old template

The title was changed for the old template, not the new one.
At this point we can't add the new one to the new template without breaking all locales.
I suggest waiting for the next update of the page, which shouldn't be far.

https://github.com/mozilla/bedrock/commit/feaa4b823b4e8807314ee68c3feddbb620550dad
Merge pull request #2801 from flodolo/fix_title

Bug 1120700 - Fx OS consumer page: restore page title on old template
Flags: needinfo?(tflanagan)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: