Almanac.httparchive.org: Implement home page design

[rviscomi]

@HTTPArchive/developers

Using the design in #46, implement the HTML/CSS/JS. For any assets that we don't have (specific fonts or images) use placeholders for now.

[tanhengyeow]

@rviscomi I'm interested in this 😄 Do we want to go with mobile-first or desktop-first implementation?

[rviscomi]

Desktop first, just because we're still waiting on the mobile designs 😁

[tanhengyeow]

@rviscomi Do we want to consider using normalize.css or is custom reset preferred?

[rviscomi]

Yeah normalize SGTM 👍

Also FYI the mobile designs are almost ready: https://invis.io/72TAN6ORY9J

[tanhengyeow]

@rviscomi Are the mobile designs/assets needed for the home page finalized? If so I can factor that in the current PR as well.

Another approach would be that I finish up the current PR taking care of the desktop design first and follow up the mobile design in a separate PR :)

[rviscomi]

Yes, the mobile home page design is final and ready to be implemented. I think it'd make sense to do both desktop/mobile responsively in one PR since they will share the same code. Does that sound good?

[tanhengyeow]

Yep sounds great since they are all finalized 😄

[rviscomi]

Here's the link to the interactive designs with colors/fonts/etc annotated: https://projects.invisionapp.com/d/main?origin=v7#/console/18174420/379965024/inspect

[rviscomi]

@HTTPArchive/developers: is anyone available to help finish the implementation of the home page design? @tanhengyeow and I have made some progress on this in the design branch. It's not quite fully responsive and there are some graphical elements still to be implemented, like the header background (see the original designs). If you're able to contribute, feel free submit a PR into the branch.

The goal is to have two stylesheets: one specifically for the home page and another more general stylesheet that is for the site-wide design.

[MSakamaki]

I can will help.
python is a beginner, javascript/css/html is good.

I will try to find implementation I can do it.

[MSakamaki]

@rviscomi
sorry.
The link of the above link (original design) does not seem to be seen due to insufficient authority.
How can I view it?

[rviscomi]

@MSakamaki what's your email address? I'll invite you to the Invision project.

[MSakamaki]

@rviscomi
Thank you! My email address is: [email protected]

[MSakamaki]

Is there any discussion or answer to the breakpoint (responsive width) of this website?
Currently, 600, 800, 900, and 2048 are set.
(2048px was added by me)

If not decided, is it worth discussing?
(Creating common breakpoints helps you create a general style sheet.)

[rviscomi]

No strong feelings on breakpoints. Use whatever is needed to keep the layout looking good.

[rviscomi]

@MSakamaki @tanhengyeow how are you both feeling about the home page? The design branch has the latest implementation. If that looks good we can merge that into master and close this issue. We can always iterate on it with small fixes as needed but I'm mostly concerned with getting the major pieces built.

[MSakamaki]

@rviscomi @tanhengyeow
If the home page only scope to the path en/2019/index.html, I agree to close and merge.

I would like to discuss the next probrem with new issues.

The layout of the “91 people” style differ depending on the browser.
(should supported?/not supported?)
I think this should be supported, but I couldn't come up with the ideal approach.

Firefox

Safari

Chrome

[rviscomi]

Thanks @MSakamaki! I'll close this and file a new issue to resolve the browser discrepancy.

[rviscomi]

Oh, I just remembered that I had a discussion with the designer about this! We actually agreed that it might be best to remove "PEOPLE" from the design entirely. My concern was that "91" is just a placeholder and if the final number of contributors is something like 73 we won't have a straight edge to put the word "PEOPLE" against, like the number "1" has.

Here's the full discussion for context:

And my original comment in the design

@MSakamaki @tanhengyeow WDYT? This would obsolete the browser compatibility issue, simplify the design, and obsolete any design issues when we replace it with the final number of contributors.

[MSakamaki]

@rviscomi @tanhengyeow
The solution seems very straightforward.
I feel that this large 91 is a very good layout, so I agree with the idea of removing "people".