New home page

[TahaHachana]

Preview: http://fsharporg.apphb.com/

[fsgit]

Could you please send a link to the preview? Thanks!

Is it this one? http://fsharporg.apphb.com/

[TahaHachana]

It is, with the new logo of course.

[ReedCopsey]

@TahaHachana If you grab the latest, full favicon support for all devices/resolutions (and the new logo) are in place. It'd be nice to see these in the design.

Below the navigation bar, right now, the font is 28px, with a line height of 40 and 1px letter spacing. Could you try changing to something around 20px font, no line height override, and no extra letter spacing? It looks great in the header, but its a "bit much" through the rest of the page.

[dsyme]

Hi @TahaHachana, I took a look with @mathias-brandewinder. We think it's looking fantastic!

We did come to the conclusion that we think the logo and "Install" that's currently on the right should likely be first in the flow, over on the left? When we look on a small sceen (admittedly by reducing the browser size on a desktop) then all we see is text, no logo etc. In contrast, http://fsharp.org shows the logo first

We also wonder if replacing the logo might make things feel fairly different since there won't be the big F#, so it would be good to see that in place

But it feels like this is getting very close!

[TahaHachana]

I deployed two new preview versions:

• Logo on the right on large screens and at the top on small ones: http://fsharporg.apphb.com/
• Logo on the left: http://fsharporg.apphb.com/about

You'll notice that I used the 256X256 logo, the 128X128 looks too small.

[ReedCopsey]

I'd recommend dropping the animation on the logo itself. I don't "love" it
in general, but its also making the logo not show up at all on iOS...
(It's strange, on iOS 8, the logo is invisible until you go to change
browser screens, at which time you can see it - I suspect the animation is
messing it up).

As for logo on left or right - I actually like both versions, especially
now that the small screen issue has been addressed.

-Reed

On Sat, Oct 4, 2014 at 11:39 PM, Taha Hachana notifications@github.com
wrote:

I deployed two new preview versions:

• Logo on the right on big screens and at the top on small ones:
  http://fsharporg.apphb.com/
• Logo on the left: http://fsharporg.apphb.com/about You'll notice
  that I used the 256X256 logo, the 128X128 looks too small.

—
Reply to this email directly or view it on GitHub
#317 (comment).

[ReedCopsey]

@TahaHachana Would it be possible to make the testimonials and sponsors order and list "randomly" from the total list of both? It'd be nice if they could be randomly selected for including on the main page by default, with each view a different set initially.

[TahaHachana]

For the sponsors section it's possible to shuffle the logos after the page loads, this functionality is available in the preview: http://fsharporg.apphb.com/.
Randomizing the testimonials is a bit tricky if we want to avoid a negative impact from an SEO perspective caused by hidden/JavaScript generated content. The best solution I can think of is to update the list after the page loads.

[cdrnet]

FYI, the sponsors section is now blocked by the EasyList list (##.sponsor-link filter) e.g. in Ad-Block Edge. I see the left and right arrows but nothing between. It was not blocked when I checked the last time a few days back.

[TahaHachana]

@cdrnet Changed the class name, it should show up again now.

[cdrnet]

@TahaHachana indeed, it does. Thanks!

[dsyme]

Minor nit - change "Corporate Sponsors" to "Corporate Supporters". These companies have indicated support for F# and willingness to use the logo on the front page, but do not "sponsor" it (though they may contribute in other ways).

[ReedCopsey]

@TahaHachana Removing the animation fixed the iOS issues. I'm actually liking the logo on right/top version better, the more I look at it.

Re: randomizing the testimonials - having some in place, then swapping out at load might be a good idea. We could pick and choose the ones that provide the best SEO keywords that way, but still prevent certain ones from being seen more than others. Seems like a very nice option for that.

[TahaHachana]

I implemented testimonials shuffling in the preview based on this selection, the pull request is also up to date.

[dsyme]

Great work. A couple of things:

• I find it strange that the "menu bar" appears at the bottom - especially on small screens where it is actually off the bottom and you get the reduced "horizontal bars" in the bottom right hand corner until you've scrolled down a fair way, then it jumps to the top right. What's the reason not to have the menu bar always visible in some form (as a bar or the reduced horizontal bars), always at the top or top-right?
• Could you make it that clicking on a testimonial will take you to the full testimonial list? And that each link on the name for the testimonial takes you to the full list, rather than to the link given for the individual? (since the links for the individuals might easily give a 404 over time)

[ReedCopsey]

@dsyme I actually like the current menu bar behavior (since it's only on the main page). It keeps the header bar area front-and-center. On mobile, the menu bar is relatively large, so putting it at the top detracts from the logo and text, I think. On other pages, the menu is always anchored at the top (since there is no header area).

That being said, I think this is in a great state right now, even if its not "perfect". I'd like to propose we merge this, and then try to do clean ups and changes over time for any other issues that crop up. We'll get a lot more visibility and traction if there are problems once it's live, and I feel that, in its current state, it's already significantly better than the current main page.

[ovatsus]

I like the new design, but I miss is the links on the left. They currently are a duplication of the menus, but I think they are more usable and discoverable.

[TahaHachana]

@dsyme For the testimonials, should each snippet point to the full testimonial (using the permalinks) or just to /testimonials?

[dsyme]

@TahaHachana To the permalink.

@ReedCopsey When I look at http://fsharporg.apphb.com on my mobile, the menu choice box (horizontal bar box) doesn't display at all until I scroll down at least 1.5 full pages. (This happens on a reduced-size desktop window also). It feels like the menu is a bit detached - . The menu should be visible on the first screen for all display sizes, shouldn't it?

But I agree it should be pretty easy to fix. It does feel like we could go ahead and merge soon - @TahaHachana can you give as an all-clear when you're done with updates for the testimonials? BTW how does this affect the design and layout of secondary pages? (guides, install etc.)

[TahaHachana]

The testimonials section uses the permalinks now. For inner pages, this is for example how the first videos page is going to look like.

Regarding the navbar, if it's too much below the fold when viewed on mobile we can display it at the top of the page on small and medium devices and under the header on large ones.

[TahaHachana]

Is there a problem with how inner pages would look like or something?

[dsyme]

The inner page looks good. I think this is almost ready to merge.

One request - can we keep it simple and make sure the navbar (or reduced bar-box) is always showing, preferably at the top? At the moment on my laptop (IE 11, 1366x768) the navbar is at the bottom, and when you click the actual menus they are displayed off the bottom of the screen where you can't see them.

[TahaHachana]

The navbar is now always at the top of the page, I think this is better for both new and regular visitors.

[fsgit]

We will proceed with a trial merge of this!

[dsyme]

Issues I've seen so far:

• It feels like the Rajdhani font is not appropriate for headings and main-body text. It's fine for the front page and the navbar, but not for things like the guides or testimonials.
• On IE, some menu bar choices such as --> "About" --> "Documentation" go to a short section below the "Online Documentation" anchor, because the navbar is overlaid
• On http://fsharp.org/testimonials/, the word "Testimonials" is overload by the five-item social-sharing toolbar that flies in from the left.
• In general the "fly-in" effect of the social-sharing navbar is a little distracting
• Training --> "Online Learning" doesn't seem to go to the right anchor because of the navbar problem
• Training --> "Video Lectures" doesn't seem to go to the right anchor because of the navbar problem
• Training --> "Textbooks for F#" doesn't seem to go to the right anchor because of the navbar problem

Otherwise everything is looking good!

[dsyme]

Oh, when you press "Install" on the front page the dropdown shows below, partly off-screen.

[dsyme]

On smaller screen sizes, when using the minimized toolbar with the three stripes, the second-level of toolbar choices shows in grey font