Foundation.mozilla.org: Fixed button layout on welcome

[xmatthewx]

Continuing the work #288, let's find a way to have fixed layout buttons on the welcome screen. I'm concerned that a ton of users will bounce if they only see a wall of text.

desktop

desktop is good and resolved.

mobile

side-by-side, they fit well. the style could be better, but many fewer people will be likely to bounce.

[sabrinang]

With the amount of words and type size "join the network" would fall on two lines making bigger buttons. Included a bit of a fade to hint there is more text but it might not be obvious.

1 - using grid margins balances can help balance out the buttons
2 - side-by-side style you have above, no margins

@xmatthewx feedback?

[xmatthewx]

I like the button margin. Much better. Instead of fade (element could block your thumb swipe), let's try a white background with single pixel shadow like in desktop above.

[sabrinang]

[xmatthewx]

@gvn – we'd like to put the Welcome page's buttons in a fixed container at bottom of the screen. It's up to you whether you tack this on now, or bump to next milestone and revisit this next week. I made this a separate ticket to unblock your build.

Rationale: We worry that a ton of visitors will bounce without accessible buttons. We hope they read info first, but this gives them some choice.

Desktop mockup is in first comment. Mobile mockup is comment right above.

@sabrinang can pass along specs or sketch if needed.

[gvn]

I'll see how hard it is to add now. I'd recommend just solving the root problem through copy editing though.

[gvn]

@sabrinang If you're done with this work can you remove your assignment?

[xmatthewx]

@gvn - we need a bit more padding at the bottom on mobile. Do you want me to file a new ticket?

[gvn]

Sure