search

Kinto / kinto-website

Website for the kinto ecosystem
http://www.kinto-storage.org/
2 stars 5 forks source link

Modernize the website #21

Closed dstaley closed 4 years ago

dstaley commented 4 years ago

This PR does a bit of clean up and modernization of the Kinto website. I tried to keep the design/content exactly the same, except for the few small tweaks mentioned below.

You can preview the site here.

Highlights

  1. Removes support for Internet Explorer. It's 2020, and the modern web is a wonderful place. Dropping support for Internet Explorer allows us to use nice things like CSS variables and CSS grid.
  2. Replaces Font Awesome with an inline SVG containing just the icons used. Font Awesome clocks in at 77 KB, whereas the inlined icons only increased the size of index.html by 4.3 KB.
  3. Replaces the webfont with a reasonable default font stack. This saved 20 KB, and also increases perceived load time since the browser can instantly render text as opposed to waiting for the webfont.
  4. Removes the nav link to the blog and replaces it with a link to the documentation. The blog only has one post, and it's a bit strange to give it such a prominent location. The blog link has also been removed from the footer (but the post is still there, so anyone who has an old link should still be able to get to it).
  5. Changes the CTA in the hero to "Install Kinto" as opposed to a link to the section that's immediately under the CTA.
  6. Adds a link to the tutorial in the hero.
  7. Replaces the raster code screenshots with SVG versions. These are over 50% smaller and look perfect at any resolution.
  8. Adds a sample curl invocation (fixes #12).
  9. Fleshes out meta tags with support for Twitter cards.
  10. Replaces the vast majority of the CSS with a modern, CSS Grid powered version.

The Numbers

This new version uses 62% less bandwidth, loads 24% faster, and makes 41% less network requests. It's now one HTML request, one CSS request, and eight image requests.

It also scores a perfect 100 in Lighthouse.

Potential Future Improvements

I wanted to get this out there for feedback, but there's a few more things I have in mind:

  1. Replace CSS with a CSS preprocessor to help with organization.
  2. Add a section on "Kinto in the wild" showcasing companies/products using Kinto.
  3. Find a way to create a cohesive experience between the site and the docs.
  4. Add a Kinto.js/kinto-http.js playground
  5. Add support for dark mode
magopian commented 4 years ago

Didn't dive in the nitty gritty of the code, but the changes look good to me, specifically the link changes and the curl example (gorgeous!).

This is awesome!