Website design

[dead-claudia]

(Inspired by this comment.)

*adorns UX cap for a moment* 🎩

mithril.js.org seems a little too plain and text-oriented thematically for a web framework. I feel it needs a little more design put into it to look better. A little more color and a little less dense, so the new reader isn't immediately slammed by a wall of text.

Compare the current site to some of these:

• Angular 2
• React
• Vue
• Ember

It's way easier to follow and way harder to get lost looking at Mithril for the first time when the site immediately grabs your attention and directs you where you likely want to go. And a nicer, more spacious design and layout would be wonderful. (Minimalism only goes so far before it doesn't look like any real design.)

Also, the logo really could use an upgrade. @rdsteg uploaded this nice album containing all the submissions for the logo so far. Currently, the logo doesn't stand out very well, and it no longer seems relevant to the framework - the three rings for what I'm guessing stood for M, V, and C bear no meaning for what's now an event-driven reactive framework.

---

Here's what I feel should be the front page:

• Mithril, with a short, quick tagline to advertise.

  • Introduce the framework very quickly, and make it look great. New visitors usually don't yet understand why Mithril is awesome, and developer attention spans are just as short as everyone else's, so we need to grab their attention quickly and tell them why they should care.
  • Reference npm install --save mithril
  • A couple links to the tutorial. It's okay to duplicate it here, so newcomers don't have to look around for the button instead of the most relevant spot.

• A few short details on why it's nice.

  • Simple (we know this, but they don't)
  • Versatile (integrates very well, batteries included)
  • Fast (the existing graph is okay, but it should also have a short summary along with it)

• Quick and simple snippet to show what it looks like. Maybe somewhere between React's examples and Ember's initial snippet, not so short it has little meaning, but maybe limit it to one or two idiomatic snippets, so it can be understood fairly quickly (React has too many IMHO).

• And finally, a link to the tutorial, to nudge them a little more (if they got that far).

---

/cc @lhorie @tivac (and anyone else with ideas)

*removes UX cap*

[pygy]

Do we really want to cater to people with an attention span so low they can't read a page of text?

I wouldn't be surprised to learn both the coding style and the simple home page are set up as passive deterrents against low quality contributions and support requests...

Mithril is reasonably successful without being a smash hit. The community is lively yet human-sized.

Its limited success makes knowing it a less marketable skill than knowing React or Angular, though... it's a tradeoff. I wouldn't want to live in eternal September.

[spacejack]

Here is a design concept I was playing with a while ago (reposting from the closed issue.)

http://www.spacejack.ca/mithril-design/

[dead-claudia]

@pygy I'm speaking from the perspective of advertising. And FWIW, I don't believe it'll devolve into absurdity beyond a larger number of dumb questions on Stack Overfow. To use Angular as an example:

• Their Gitter appears only somewhat more active than ours
• Their Google group has fairly light traffic, only just enough to require some structure
• Their GitHub repo would be better had they used labels better
• Stack Overflow is where most of the mess really is

I'm not quite that concerned about it. We tend to be a little more accepting of programming help here, but if things start really taking off, it's not that hard to start having them ask on Stack Overflow.

[gilbert]

Whatever the design, the home page definitely needs some live, working demos. "Look what you can do!" is a necessary message to deliver before you can say "Look how easy it is!"

[RobertAKARobin]

For what it's worth, I really like the site the way it is. My impression is that Mithril is intended to be extremely lightweight and no-BS, and the site reflects that. The only thing I might change is the logo, which looks a little hacky. I think it would be fine with no logo at all.

[orbitbot]

See also #1687 for wall of text, a sense of despair and suggestions.

Also FWIW, my bikeshed is a nice shade of purple, and I basically agree with @isiahmeadows' original points.

A fairly lightweight edit that might have a high ROI in "sense of freshness" might be to use multiple fonts on the website, eg. a separate header font. There are multiple sites that suggest font pairings, fe. with the current Open Sans (which is really common among OS projects).

[mike-ward]

Most frameworks I look at have about a 10-minute window to convince me they're worth the effort to learn. That means:

• The website loads fast. I assume the framework is rendering the page. Slow page and I'm out of there.
• Code example up front that gives me a gist of what to expect.
• Resource size and dependencies. Don't make me hunt to find these.
• Simple, flat page layout.

As you can probably guess, I like Mithril's web site for the most part. The tagline is a bit weak. Not sure why, but tags seem work best for me in three's like; "No nonsense, pure Javascript, blazing performance".

Maybe what is needed is not a full website redesign but a splash/landing page. My favorite splash pages are http://nancyfx.org/ and https://parceljs.org/

[dead-claudia]

@mike-ward I'm inclined to agree with you on the tag line being weak. As for that whole "rule of three", it's a thing. And yes, I do agree a splash/landing page is one big thing the site needs. (That would solve the biggest part of this bug.)

[osban]

I think @panoply has done some work on a new splash page, but I don't know in what stage it is now.

[panoply]

@osban I missed this, Apologies. I have something on file that I produced a while back but it's generated dynamically where the current docs is mostly static. I've got a fair understanding of how the docs and site are generated and what new site design would entail with the current setup and have time coming up the next few months.

[panoply]

Making some noise on this one. This has been a discussion point bordering at nauseum for several years now. While I personally like the sheer simplicity of the documentation it is time we really put some thought and action into this. The new generation and those seeking out alternatives in SPA frameworks are starting to become deterred and the current aesthetic is simply not welcoming.

Recently, I was having a discussion in a discord server with some younger developers. Putting aside their general lack of experience, when discussing SPA design, approaches etc I was excited to show them Mithril but their reaction was not good and without even reading on further it was completely disregarded. Grain of salt this, but here is a small extract from the conversation:

I view this as problematic as not only do we all collectively want developers to continue using mithril, we also want to attract new developers to the framework. Without new adopters we will see a steady decline and when a project like mithril which continues to hold serious virtue in this nexus, that it is not good.

Those of us using mithril and choosing it for projects in a lot of cases have been doing so half a decade (or even longer). Things move fast in this field and as a new generation starts to emerge we are going to find it hard to spike interest with the current design in-place for the documentation. As much as it pains me, "shiny objects" has potentially morphed from a matter of preference to somewhat necessity.

It's easy to write this off as "not a big deal" but from my standpoint and as someone who really advocates for Mithril, I feel as if the time has come to get with the times in terms of the documentation. I want developers to discover mithril and feel the same way myself and many of you felt but I worry that without a major overhaul in this area mithril will slowly fade.

[gilbert]

Not sure I understand the screenshot, can you explain it?

[kevinfiol]

@gilbert It looks like some developers on a Discord channel being dismissive of Mithril for 1. It using var in its documentation, 2. using hyperscript, and 3. using a single letter variable (m).

The latter of those two are things I think the Mithril community embraces, but the first can be fixed with a doc refresh.

Though I find the hyperscript versus JSX thing to be an uphill battle. Every Hackernews thread about Mithril featured comments that bikeshedded about hyperscript. It's like how every conversation about Lua devolves into bikeshedding about 1-based indexing. It's also gonna be harder to convince new developers who likely have been exposed to HTML already to use something that looks less like HTML over something that is already somewhat familiar to them (JSX/Svelte templates/template strings ala lit-html).

[tbreuss]

I've started an initiative to bring the website design a little step forward.

The idea behind is:

• keep the current web design, but make it more appealing
• fix all the obvious design/UI/UX issues
• fix obviously wrong content
• add or refresh content where necessary

I see this as a foundation for the next bigger web design update.

More infos can be found here: #2834