Redesign the front page about projectfluent.github.io

[stasm]

Let's do this slightly differently: can you file a PR which re-does the website according to this design but doesn't include the "Examples" section? This way you'll only have one interactive editor to work with.

Once this is ready and lands, I can help you add those two extra examples.

[Pike]

I'm a bit concerned about the copy in the mockup. It promises a bunch of stuff we don't have yet.

Also, I'd avoid wordings like "unfair", that makes us confrontational instead of improving.

[zbraniecki]

yep!

[zbraniecki]

@mathjazz - any feedback/suggestions on the design?

[mathjazz]

Good job!

I have some tiny ideas for improvements, none of which should block the release.

I'd rather provide my input after we're live - to avoid blocking us further. Is that ok with you?

[zbraniecki]

yeah! let's push it live and then improve :)

[stasm]

There are a few details which I'd like to improve going forward. I'm listing them here in case you choose to fix them before filing the PR:

• the text alignment in the list of benefits is weird and the icons don't make much sense,
• the font size of the examples output is too small,
• "Learn more" is aligned to the right and I don't think it looks good; perhaps remove it and link to the principles directly from the text?
• the liked-comment example is missing the $user external,
• I'd like to have a more prominent link to the playground,
• we don't have a Twitter account which the footer has an icon for,
• the chevron looks like something was supposed to expand/collapse.

[stasm]

I assume this is so because it's still a mockup. I'd r- if the PR has it too ;)

[stasm]

The "unfair" copy comes verbatim from https://github.com/projectfluent/fluent/wiki. @Pike feel free to edit it to better suit your liking. Thanks!

[zbraniecki]

Thanks for the feedback! I'll apply as much of the feedback as I can, although at some places negative feedback is not easily fixable as it is a matter of preference.
In particular:

the text alignment in the list of benefits is weird and the icons don't make much sense,

What do you mean "text alignment is weird" and can you suggest better icons from this list http://fontawesome.io/icons/ ? It would be more helpful for me than trying to guess icons to your liking.

the font size of the examples output is too small,

It's pretty tricky to pick the font that fits and spaces everything, I'll try to increase it.

"Learn more" is aligned to the right and I don't think it looks good; perhaps remove it and link to the principles directly from the text?

I believe it's a matter of preference. I do like it :) Do you think your preference should triumph mine?

I'd like to have a more prominent link to the playground,

Where would you like to have it? One idea I can see here is to link playground from each example widget. Something like "Play with it" that links to this example in playground?

we don't have a Twitter account which the footer has an icon for,

Hashtag projectfluent on twitter? :)

the chevron looks like something was supposed to expand/collapse.

What's your recommended glyph to use?

[stasm]

What do you mean "text alignment is weird" and can you suggest better icons from this list http://fontawesome.io/icons/ ? It would be more helpful for me than trying to guess icons to your liking.

I'd suggest narrower text, no icons and no <br>. Compare:

Versus:

It's pretty tricky to pick the font that fits and spaces everything, I'll try to increase it.

Yes, that's the general challenge :)

I believe it's a matter of preference. I do like it :) Do you think your preference should triumph mine?

When two personal preferences collide, we find ourselves in need of a solution which moves us past the stale mate.

Where would you like to have it? One idea I can see here is to link playground from each example widget. Something like "Play with it" that links to this example in playground?

Yeah, maybe something like this provided it does not increase the visual clutter. If each example had its title (see below) perhaps we could add an (Open in playground) link next to it.

Hashtag projectfluent on twitter? :)

Or just remove the icon…

What's your recommended glyph to use?

I recommend not using a glyph and instead using titles: Interactive example above the editor and Result or Output above the output.

[zbraniecki]

Applied your feedback.

I don't like the list icon removal, but I don't feel like spending too much time on it.
I applied most of your feedback except of:

• Didn't have time to add the "Open in playground" thing. I'd like to add it, but would prefer not to block this PR any further, and will work on it in a separate one.
• I didn't remove the chevron and didn't replace it with text because I feel like it becomes unnecessarily cluttered. I hope you're ok to let it be the way it is now.

[zbraniecki]

For the Open in playground - maybe we could use similar UI to what Rust book does - https://doc.rust-lang.org/book/first-edition/trait-objects.html - use the play arrow to open a playground with the example?

[stasm]

@zbraniecki With #9 merged, can we close this issue?