Optimize website for wide viewports

[tunetheweb]

As noted in a recent PR there are a couple of inconsistencies with the home page, design, notably:

• - It's full width, but the other pages are constrained (to 1280px or 1324 - note bringing these inline with above PR)
• - The Start Exploring button in the top right, means the other navigation items (TOC, Contributors, and Methodology) are in a different place on the home page than every other page and "jump" as you navigate to/from this - Completed in Support translations #684

Are these items we want to fix? Or happy this should be different? The original design seemed to have a more constrained width (except for the header) though did always have the Start Exploring button in the same place as currently.

Thoughts?

[tunetheweb]

I'm gonna suggest constraining the home page width to the same width as the other pages. Gimme a 👍if you agree or a 👎is you prefer it to remain full width.

[tunetheweb]

I'm gonna suggest we move the "Start Exploring" button down from the header into the body, so we have a consistent header. Gimme a 👍if you agree or a 👎is you prefer it to remain where it is.

[tunetheweb]

@HTTPArchive/developers anyone got an opinion on this?

[catalinred]

I'm gonna suggest constraining the home page width to the same width as the other pages. Gimme a 👍if you agree or a 👎is you prefer it to remain full width.

The index shouldn't necessarily use a fixed page width as the other pages, as it can use a mix from both worlds .e.g. full width header, fixed-width featured chapter, then full-width contributors block design etc.

I do agree on the point that stuff should be implemented consistently, therefore the index page should use indeed the newly added .container used within #573 but that's another story and task.

I'm gonna suggest we move the "Start Exploring" button down from the header into the body, so we have a consistent header. Gimme a 👍if you agree or a 👎is you prefer it to remain where it is.

At this time, on the index page, the "Start Exploring" is indeed redundant as it links to /table-of-contents, as the "Table of Contents" menu item does too. So I guess this is a valid point as we have two links that go to same resource.

We should either link to the first Table of Contents chapter (to justify the "Start exploring" meaning) or just remove it completely from the header as @bazzadp suggests, as it's already in the "HTTP Archive's annual state of the web report" section below.

Thanks for raising these questions @bazzadp

[tunetheweb]

At this time, on the index page, the "Start Exploring" is indeed redundant as it links to /table-of-contents, as the "Table of Contents" menu item does too. So I guess this is a valid point as we have two links that go to same resource.

We should either link to the first Table of Contents chapter (to justify the "Start exploring" meaning) or just remove it completely from the header as @bazzadp suggests, as it's already in the "HTTP Archive's annual state of the web report" section below.

To be clear, I have no problem with multiple links to the same page especially if some of those links are in the header and if we specially want to call them out in the body. And I actually quite like the “Start Exploring” call to action. I just think it’s current location is problematic as the menu items jump between pages so it’s not consistent so think it should be moved down out of the header.

[catalinred]

To be clear as well, I was just trying to add to the conversation as you asked above for an opinion and as you know, I also raised the "jumping" header issue here.

FWIW, I still believe multiple links to the same page within a menu is a UX issue.

[tunetheweb]

Oh within a menu I agree with you.

I just meant I like having the “Start Exploring” call to action itself, just not in the menu. It should be moved down the page IMHO. But actually, I forgot there is already another “Start Exploring” button there (in yellow)!

So yeah we definitely don’t need it in the menu.

So think we’re agreeing with each other? 😀

[rviscomi]

I agree that the UI could be improved for ultra-wide viewports, but I don't know if fixed-width is the right solution. There are some parts of the design that seem to be optimized for full-width, for example the header background and Contributors section. Maybe the compromise is to have background graphics/colors full-width but their text context fixed?

Not sure about the Start Exploring button consistency issue. 40% of visitors land on the home page and I think it's good to have as many prominent calls to action as the UI can afford. The header links jumping is a valid point but there are other home-specific aspects of the UI that change as well (eg the header background) so I'm not too concerned about it.

[tunetheweb]

BTW this gets worse when you add the Language switcher:

Without this extra CTA it's much neater IMHO with logo on left, nav in middle, and language on right:

So I still think we should remove it from the header.

It would also be interesting to see which of the four CTAs to table of contents is used most. @rviscomi can you enable Enhanced Link Attribution in GA->Properties and in Google Analytics tag in GTM to allow this to be seen?

[tunetheweb]

And btw another design issue on the home page is the buttons:

• Top right "Start Exploring" CTA is filled yellow (empty on hover).
• Next "Start Exploring" CTA is empty (yellow on hover).
• Featured Chapter CTA is filled dark blue (empty on hover).
• "See all Contributors" CTA is empty (yellow on hover).
• "Learn about our Methodology" CTA is empty (dark on hover)

Shouldn't these be more consistent UX? Or is the alternating filled/not-filled part of the design?

[rviscomi]

So I still think we should remove it from the header.

I have no strong feelings about this so your idea SGTM.

@rviscomi can you enable Enhanced Link Attribution in GA->Properties and in Google Analytics tag in GTM to allow this to be seen?

I don't think this will give us much better visibility without also adding unique IDs to the buttons.

Shouldn't these be more consistent UX? Or is the alternating filled/not-filled part of the design?

At the time our designer gave me a good reason for these but it's not obvious to me now. I agree that we can be more consistent.

[tunetheweb]

I don't think this will give us much better visibility without also adding unique IDs to the buttons.

Oh good point! Yes either the link or a parent needs an I’d. Happy to turn these on if I submit a PR with this? Think it would also be good for future anyway in case a question like this arises.

[tunetheweb]

Going to close this. We solved one of my concerns and the full width home page, while a little inconsistent, isn’t that unusual and is per the design.

[tunetheweb]

Reopening this after discussion in #947

I still think we should revisit the home page on ultra-wide monitors. Should we limit this the intro paragraph and icon to a max certain width to avoid the big blank space?:

Happy for background image to stretch to full width - though need to test that text remains readable at all widths and we don't lose the grey back ground for any of the white text. E.g. in this extreme example you can see the featured chapter text already has a problem that we should fix as part of this if easy:

I'd also prefer the navigation menu to be same size as chapters for consistency and to avoid having to scroll right across the screen to use it! This may be fixed as part of #951

Also, while the contributors can have a higher max than the intro-paragraph/image it probably should still be constrained at some point as above extreme example shows.

[tunetheweb]

@HTTPArchive/developers anyone with good CSS skills fancy tackling this one?

[catalinred]

If that's ok, I'll take a look and try to come up with something.