[again] Full redesign of the website ! :')

[SkyzohKey]

Hey guys.

I'd like to replace that horrible crap website we currently have by something better since too long now. So I jumped in the train, created a git repository, coded, coded, coded, made some illustrations, coded and again.

This was pretty short to do, and it is not finished yet. Feel free to have a look at:

• The GitHub repository
• The live demo
• The Crowdin localization project

From @nurupo on the previous redesign issue I've had opened:

• The website is static, e.g. can be hosted on GitHub Pages:
  • Yes. React SPA runs well on Github Pages.
• The static generator it uses can generate static websites as well as blogs:
  • Yes, just to wire up some components, easy to do.
• Whatever you use has good documentation and examples:
  • Yes. React.
• Whatever you use has a reasonably sized community:
  • Yes again, React.
• It supports i18n:
  • Yes. Even at runtime, thanks to react-i18next. And it's already translated in English & French.
• It has small installation footprint (including dependencies):
  • 90kb gziped.
• It's in Debian package repository:
  • NodeJS is in Debian repo.
• It uses a language that is commonly known / people who maintain the website know or could easily pick up (e.g. python is a pretty good choice):
  • Javascript, what else?

[anoadragon453]

Looks awesome! I especially like the logo and the font choices. A couple notes:

The navigation buttons run off the side of the screen on mobile, it may be good to have them run over onto a second row, or put them behind a hamburger menu.

These buttons overlap awkwardly on mobile. Would look better if they remained vertically aligned on separate rows on smaller sized displays.

The libre logo (love it though!) looks a little squished on small displays. Might be good to have each box on it's own row so that they don't get squished horizontally against one another.

Overall really nice, and cool to see you around still :)

[tox-user]

Sorry, but I think I would prefer to stick to using the old website then.

horrible crap website
Why is our current website horrible?

I'm sorry to say this, but I'm afraid your work might go to waste. One reason is that many people, including me don't like the idea of being forced to run JavaScript programs just to access a website. JS should only be optional, unless you are making a web app. Another reason is that @nurupo recently started changing the tox.chat's layout to integrate the blog into it. Plus it seems to me that the website maintainers are not interested in getting any big improvements from the community.

[SkyzohKey]

@anoadragon453 Ok, I fixed the responsiveness.

@tox-user That's why I included a link to the old website (legacy) that should be moved to old.tox.chat once the new one is deployed.The blog also is going to be implemented with the new website design (by myself or contributors if this is adopted).

The old website was fun, but the layout is ugly, and does not convey the right message. The JS issue should also be fixed with server side rendering (you run a small "server" that just serves the index.html file. On first load you receive a plain html/css page that then load required chunks to make the website interactive. I have pre-support for that in server.js file. ;)

[tox-user]

Personally I think that JS shouldn't be required for the site to work and keeping an old version of the site is not the best solution. I'm curious what others have to say about this though. I definitely like your design - it looks very nice. The new Tox logo hasn't been accepted yet, so I wonder if it would look just as good with the old one. I tested your website on Tor Browser and unfortunately it doesn't work on the highest security settings, even with JavaScript enabled. Not sure what the problem is exactly.

[SkyzohKey]

@tox-user I'm working on Server Side Rendering, that will remove the need for JS to render/display the page. JS will be used for navigation (can be using simple links too, ie. On Tor). The main principle of React is that it works pretty well for JS enabled users, and degrades nicely without it. I have to write some more code for that to happens, but that's definitely planed :)

[nurupo]

The redesign looks okay. Not a big fan of comic-sans-y fonts though, they seem to be used in most (all?) headers. Also, some images look a bit off, e.g. there is something weird about the head/eye/mouth in this image, the "Free Software" icon misses the point of free software by having a dollar sigh -- free software is not about the price. I'm also not sure what the "Try the web app" button is about, I assume it's just a placeholder button? And we probably don't want to link to the Spectrum like you did in the footer, nobody uses that. We better link to Reddit, Twitter and IRC, if possible. With those things fixed the website would look good. It doesn't look that much different from the current website though, the main changes are a different color alternation (the page starts with a dark navigation menu instead of light) and it uses images instead of icons from Font Awesome project.

As @tox-user has noted, the new logo hasn't been accepted by the community, at least not yet.

As far as looks go, that's about it.

Now to what is behind those looks. I don't understand why did you change the website to use React, NodeJS and JavaScript. Changing how the website looks can be done using our existing setup, there is no need to switch to different technologies.

Here are my reasons against changing the website to use React, NodeJS and JavaScript:

• There is no reason to change it to use those technologies in the first place, you can achieve the same looks using the setup that we are familiar with and had used for several years now.
• The website now requires JavaScript, it's not optional anymore.
• There is a big learning curve to make changes and contribute to the website, e.g. just compare index.js and index.html, the former is a a lot of JavaScript code with a little of HTML inserts, the former is a lot of HTML with some small code inserts. The former looks to be overengineered for what it should be, the latter is a lot simpler.
• The people who have been maintaining the website or contributing to it in the last several years are me, @robinlinden and @tox-user. I can't speak for others, they can voice their opinions below if they want, but I don't know React, NodeJS and JavaScript, and I have no interest in learning them to maintain the website, fighting with HTML and CSS is already enough for me, so I simply won't be able to maintain the website anymore if we were to switch to use those technologies.

We are also a little too invested into Jinja templates and Pelican at this point. I'm currently converting the blog from WordPress to static pages, markdown + a custom pelican blog theme, and making it integrate with the rest of the website, so that it looks the same -- same navigation bar, styling, footer, etc. Ideally the blog would reside in this repository and would share the same global Jinja templates and styling the website does. I'm also trying to convert some of the website pages, like About and FAQ, into markdown that would be processed by a page template, adding nav bar, footer and styling so that they would look the same as they look now, but stored in markdown. We can't do this with index, downloads and clients pages as their layouts are a bit too complex to be generated off markdown, but it works well for most other pages. This would allow to create new pages easily without need to mess with HTML and CSS, just write a markdown file and you got a page. If you add a Table of Contents to such a page, you can even make something akin to a wiki, if it's something we would want (here is an example of this, the ToC is in the left).

[SkyzohKey]

@nurupo I understand your concerns. They are logic and good to me, the key in this rebranding is to make Tox's image better appealing. React is a pretty good library to work with because it allows you to decouple website parts into many more smaller components that helps you to DRY/KISS.

You are not forced to have JS enabled with React SSR (Server Side Rendering) as I explained in my previous reply. SSR just send the "html/css" page that has been rendered on the server to the client. No JS. Just plain html/css. Then if you have JS enabled you enjoy loading-free navigation. If you don't have JS, you navigate like Ye ole good web, using hyperlinks.

React provides both of the best worlds. I understand that you already fight against CSS, but what I try to do is to help you. To help you winning the fight. Look, I'm a web/mobile/software developer. That's my job. I do started fighting with HTML & CSS about 11 years ago, so I guess my experience in the shipping of web products should be enough.

@robinlinden & @tox-user put works, aswell as you do @nurupo. I'd just like to enter the Tox.chat website team, so that we can all learn from the experience. React on itself is a great asset on a CV.

Well, if you don't like the approach, feel free to take the design and integrate it on the current codebase (whose I find really poorly coded, sorry for that). But then I won't be able to contribute anymore on the website, because I hate Bootstrap, and I find the current website process time-consuming & useless.

Look. With React you just run yarn start and you're ready to update the website by adding components, reusing existing ones, etc. With the current setup you do have to generate the website again and again every time you want to update it. (Or maybe not, but that's how pelican worked for me in the past so...)

ps: this is not an attack reply, just my humble opinion & tentative to help the Tox community. Because I love Tox, and I'd really like to see it grow. Grow to the point when we fucking eat those Skype/Messenger shits. :)

ps2:

the "Free Software" icon misses the point of free software by having a dollar sigh -- free software is not about the price.

I tried to convey the free as in libre, but go try to explain this with a picture while trying to continue matching your illustration style + brand style. That's hard to explain such a concept as liberty and freedom with a picture. ;)

ps3:

I'm also not sure what the "Try the web app" button is about, I assume it's just a placeholder button?

This is meant for when the Universal Tox client is ready to use in webbrowser so that new people can test the app in their browsers before installing anything. :)

ps4:

We better link to Reddit, Twitter and IRC, if possible. With those things fixed the website would look good.

Next commit will include that. Here 😝.

ps5:

There is a big learning curve to make changes and contribute to the website, e.g. just compare index.js and index.html, the former is a a lot of JavaScript code with a little of HTML inserts, the former is a lot of HTML with some small code inserts. The former looks to be overengineered for what it should be, the latter is a lot simpler.

This is just caused by the massive imports (webpack convert the imported files as string path to the generated static files). Refactored in this commit so that IndexPage is easier to read. 😋

[anoadragon453]

Just saying that as a consumer and dev I love the bubble font. It feels really friendly.

[ProMcTagonist]

The icon featured here is a generic messaging icon. It says nothing whatsoever about what differentiates Tox from the crowd, namely its distributed and encrypted nature. This makes the presented icon, in my opinion, a large downgrade from the Tox logo, which cleverly communicates secure messaging.

I tried to convey the free as in libre, but go try to explain this with a picture while trying to continue matching your illustration style + brand style. That's hard to explain such a concept as liberty and freedom with a picture. ;)

Handcuffs breaking open?

[SkyzohKey]

@ProMcTagonist about the handcuffs, great idea! Gonna revist the icon ASAP. About the logo, I still have to put some "tox spirit" on it, you're right, but usually icons with locks scares the user (did an a/b test on that).

[JosefWN]

What about exporting the icons as SVG instead? With compression on the web server the file size is close to nothing compared to PNG. SVG:s scale perfectly and browser support is excellent these days.

EDIT: Loading the page there are some 404:s.

[SkyzohKey]

@Puffton I could do it the SVG way of course but some illustrations are buggy (borders appears larger than they should be). 404 are due to the fact that i only have made Landing/Download pages yet ;)

[onebod]

On page https://tox.chat/download.html it says:
"After you've installed, try adding GroupBot, and then invite some friends!"
The link to "adding GroupBot" returns error:
"The address wasn’t understood
Firefox doesn’t know how to open this address, because one of the following protocols (tox) isn’t associated with any program or is not allowed in this context.
You might need to install other software to open this address."

I get that it probably works after installing Tox, but you might like to consider user expecations as well as those of the technically savvy - not a great front-of-house experience.

I pass this on as I appreciate that you are trying to help people, but you know people!