Update the website code

[sanderdlm]

Hey all. I noticed a couple of weird CSS issues on the i3 site and decided to take a look under the hood. From what I can see most of the site's CSS (and JS) is pretty old and could use an update.

I've made a fork: https://github.com/dreadnip/i3.github.io and already put in a couple of hours reworking the base CSS (layout with flexbox instead of floats, improved typography, semantic HTML5, basic responsiveness with media queries, etc..). If you guys are open to this idea, let me know and I can finish it up and update the whole thing to modern web standards.

I haven't changed the design, so my version is a 99% visual replica of the current site. Although I personally would make some minor visual changes, I can understand if you want to preserve the current style.

I also noticed there is a very outdated jQuery dependency (1.6.2), that could be replaced pretty easily. The downloads page JS to show old versions is already refactored with vanilla JS on my fork. How attached are you guys to the gallery JS? It seems like it adds a lot of overhead for very little benefit. I don't think that the target audience of i3 would expect a fancy JS gallery 🤔

Again, just let me know what you guys want or don't want and I'm happy to put in some work.

[sanderdlm]

Now that I'm looking at it more: how open would you guys be to a simplification/slight redesign of the home and downloads page? I feel like the UI/UX could be improved by streamlining the current design.

[sanderdlm]

Digging a little bit deeper into the docs section of the site, I'm struggling to understand how the docs are built. From what I can see, the docs are written in AsciiDoc and then parsed by some converter into XHTML? If this is correct, how feasible would it be to upgrade to something like AsciiDoctor so we can output cleaner HTML5? I would gladly help work out the new HTML/CSS structure to accompany this switch.

[Airblader]

Personally I'm definitely open to modernizing the website a little. @stapelberg What do you think?

[stapelberg]

As long as the website design doesn’t change, and all URLs and anchors keep working, updating the underpinnings sounds good (in small PRs please).

[sanderdlm]

Alright. I'll start making small feature branches with the technical changes when I find the time. In the meantime, I've put up a gh-pages branch of my fork with everything combined, so you can see all of the changes in action: https://sanderdlm.be/i3.github.io/

Disregard the graphical changes. If you don't want those they can be left out. Lighthouse score should be 100 and the site should behave properly on mobile 🙂

[stapelberg]

Sounds great! Thank you so much

[squigglezworth]

For what it's worth, in my opinion, the website could benefit from some slight UI/UX changes - I really like most of the changes at the above link, though I think the navigation menu link highlighting needs to be changed, and some padding added on the sides of the content.

[sanderdlm]

While working on the site (see #84) I've noticed this trend where most of the content seems to be centered around the inner workings of i3, instead of the features or use cases. Besides the first paragraph on the homepage saying "i3 is a tiling window manager" there isn't any mention of what i3 actually does, or why one would use it.

I understand that a) the site content was written by the developer and b) i3 is targeted at power users and developers, but wouldn't it be worth mentioning what i3 brings to the table? e.g: simple config, hot reload, control fully from keyboard, multi monitor out of the box, fully customizable, efficient workspace control, ...

Even if you're not trying to "sell" i3 to the visitor, it seems to me that the current homepage content would be better suited on a separate page about the project background and/or philosophy, while the homepage could be used towards highlighting what makes i3 worth using.

[stapelberg]

Agreed—I noticed the same thing recently.

The website was created well over 10 years ago and evolved out of an initial project README, where it was more important to clarify how i3 relates to other window managers for people who are already using niche window managers :)

We can definitely update the wording to make it more clear to casual visitors what they have in front of them.

Let’s decouple this from the visual changes you’re proposing, though. One thing at a time :)

[sanderdlm]

I've put up a draft for the home page on a new branch, inspired by Wayland, Git and Deno's project websites. My main goal was to simplify the landing page to a short description, download button and screenshot. I moved most of the home page content to a WIP "about" page that you could use to write about the project philosophy and tech in more detail. I haven't touched the other pages, even though I'd like to do some re-arranging on those as well :) Small steps!

[stapelberg]

Thanks for taking a stab at this!

Here are some first impressions:

• Comparing the two versions side-by-side, I realize that I’m apparently attached to the “hero element”. I find it makes for a light yet interesting visual first impression.
• “downloads” doesn’t need to be a separate section. We intentionally don’t want people to download from our website, but go via their Linux distribution channels instead. The compromise is to make downloading (and version number/change log checking) easy-enough to reach from the front page.
• Regarding the text, I think we can go even further to explain the overall context, i.e. what is a window manager, why would you swap out yours, etc. — let me know if you want to make a suggestion, or if you’d prefer if I made a suggestion.