Create a 2020 landing page

[rviscomi]

Goals:

• start serving a 2020 page to test out our infrastructure and make any fixes to ensure that it can support multiple years
  • avoid duplicating code used by both years, reuse in year-agnostic files (templates, static resources)
• work out any kinks in SEO
• work out any design kinks in the year switcher UI
• inform readers about our plans for 2020
  • ways to contribute and how to join the project
  • set expectations about a 2020 publication date

We're on our own in terms of design, but we can borrow any needed UX patterns from the 2019 home page - it doesn't need to be completely reimagined with each new year.

UX goals:

• be clear that we're talking about 2020 which is unpublished as of yet
  • the current desktop home page design uses an image for the "2019" so we may need to get creative to update this
• provide a clear way to switch to and from 2019, similar to the language switcher

Besides direct links, the only entry point onto this page from the rest of the site will be via the year switcher on 2019 pages. We won't be routing top-level navigations to https://almanac.httparchive.org to this page until 2020 is officially published.

[rviscomi]

@bazzadp any thoughts on the technical implementation, especially related to multi-year support on the backend? I think we've done a really good job of planning ahead and keeping things organized by year.

Also, any thoughts on translating the landing page? IMO translating it would be nice to have but somewhat of a lost cause since this page is temporary by design and will be overwritten when 2020 is published. One consideration is that users may be on a translated page when they use the year switcher to visit this landing page: should we have English-language content on each combination of /<lang>/2020 pages? If we have translators willing to do the work, I don't see a reason not to do it?

[tunetheweb]

@bazzadp any thoughts on the technical implementation, especially related to multi-year support on the backend? I think we've done a really good job of planning ahead and keeping things organized by year.

Don't think it should be too difficult to be honest, if we're keeping the design reasonably the same. That was my big question for you - how different is it going to be? And that's wider than the langing page, and more about the 2020 edition.

There's a balance to be struck here between keeping it very similar or not:

Positives to keeping it similar:

• Emphasises the Web Almanac brand
• Makes it easy to switch between years without a jarring move of year selectors about the page and the like.
• Less development required!
• More maintainable in future

Negatives

• Maybe gets a bit boring?
• How to differentiate the years?

To be honest, I was envisaging the same, with maybe a different colour scheme and new characters and hero images. But then I'm a boring kinda guy, and also not that great at design. So would appreciate input from someone more creative here. Not sure what your thoughts were on this?

Depending on the answer to that, we possibly want to move some of the templates from templates/2019/base to a templates/base and maybe some of the styling out of 2019.css to an almanac.css?

Another question (again past the landing page) is how to manage different chapters. I recall seeing someone asking about a Cookies chapter and think that's an interesting one - it's already a section in Security chapter but that's quite long already so maybe warrants a chapter on it's own. Also do we need the resource hints chapter as it was quite short or should it be sacrificed for new blood? And will HTTP/2 be renamed to note the incoming HTTP/3? All those could create interesting questions as to how to handle year-switching within the chapters. Maybe a simple redirect to the most appropriate chapter or ToC if that chapter doesn't exist for that year?

Anyway, digressed terribly from landing page there..

Also, any thoughts on translating the landing page? IMO translating it would be nice to have but somewhat of a lost cause since this page is temporary by design and will be overwritten when 2020 is published. One consideration is that users may be on a translated page when they use the year switcher to visit this landing page: should we have English-language content on each combination of /<lang>/2020 pages? If we have translators willing to do the work, I don't see a reason not to do it?

I think we should translate for the 3 additional languages we have if we can get volunteers. I also think with the new templating system we introduced in #676 this is relatively easy. We should be able to reuse a lot of the scaffolding translations done there already and may only need one phrase (e.g. "Coming Soon"), or a short intro paragraph, translated.

[rviscomi]

Depending on the answer to that, we possibly want to move some of the templates from templates/2019/base to a templates/base and maybe some of the styling out of 2019.css to an almanac.css?

Not all years' designs will look the same so a core "almanac.css" might not age well. I'll leave it up to you how to best resolve future compatibility with deduplicating 2020 and 2019 styles.

Another question (again past the landing page) is how to manage different chapters.

I see what you mean. If I'm reading a 2019 chapter and select 2020 from the year switcher, what happens if that chapter doesn't exist in the new edition. (Or going from 2020 to 2019). I think the only answer is that we have to assume chapters will be added/removed/renamed and there is no presumption of consistency. Maybe all year switches should navigate to the home page.

Re translations, SGTM. If we have the ability to translate the temporary landing page, let's do it.

[tunetheweb]

Any thoughts on wording for this @rviscomi ? As you know in #893 we implemented the framework so just needs padding out with a bit of wording.

And is it something you want to get out sooner to attract contributors? Or prefer to leave until nearer launch?

[rviscomi]

Thanks for the reminder. I'll take a turn and send a PR.

[rviscomi]

The 2019 header is a bit congested now that the year dropdown is included from #950. Let's use this issue to explore layout fixes. It may be as simple as adding a margin to the logo. We may also want to explore options to avoid the TOC text from wrapping. For example, adding a tablet-specific breakpoint to switch to the hamburger menu.

[rviscomi]

The graphic on the 2020 landing page is misaligned. I think this was a side effect of @catalinred's recent change in #894