New design

[ttraenkler]

Finally I took a shot at a new design of the WebAssembly.org and I would like to get the community's feedback on it if people like it. Colors (purple anyone?) or specific wording are subject to change and not everything is fleshed out intentionally as this is just a preview. Stack wise it does not use any frameworks and the content pages can be generated from the same .md files already in the repo.

Colors: There is a dark and a light theme, the dark one having a slight blue tint instead of the Wasm purple for readability, but colors are subject to change. The prefers-color-scheme set in your OS is used as the default picking light or dark mode based on your preference.

Made with ❤️ for the WebAssembly community. If anyone is open to sponsoring this work please reach out to me. The original plans go back to a discussion with @binji in 2019 but life had other plans. I previewed it to @tomayac who encouraged me to open an issue here.

Themes

Landing page

Page example generated from Markdown files

[tomayac]

Thanks for posting the proposal here. Is there a deploy preview available for folks to compare side by side? I'd be especially interested how it handles the arguably most complex page, /features.

[ttraenkler]

Thanks for posting the proposal here. Is there a deploy preview available for folks to compare side by side? I'd be especially interested how it handles the arguably most complex page, /features.

Here is the preview. The earlier screenshots above are not entirely up to date, the latest refinements are deployed at the preview URL. Aligned the contents and wording more with the current version, removed redundant navbar items, made header sticky on the features table so you always know which feature column you are looking at to maintain orientation.

[rossberg]

Thanks for giving this a go! Just my personal opinion: This looks nice and modern. In general, I like the structure and the more professional look & feel and the no-nonsense design (assuming it'll get a few friendly colour accents :) ). The folded FAQ, too. I cannot speak to the underlying dependencies and maintenance burden, but would hope that they are as minimal as we can get away with. Two things that I’d perhaps change are the following:

• The strong marketing vibes, with ad-like over-sized headlines and numbers as selling points. Personally, I think this is not needed on this site, and distracts from its actual information content.

• Related, the heavy reliance on scrolling. With the old page I immediately see the most relevant info on one page; here the information density is perhaps a bit low, especially on the initial page.

(While we’re here, a couple of data items are in need of an update if they are to appear prominently on the main page:
o There are only 3 browser engines left, but 10-20 others appeared.
o OCaml is missing as one of the more well-supported languages; possibly others.)

[ttraenkler]

@rossberg Thanks for the feedback:

Thanks for giving this a go! Just my personal opinion: This looks nice and modern. In general, I like the structure and the more professional look & feel and the no-nonsense design (assuming it'll get a few friendly colour accents :) ). The folded FAQ, too. I cannot speak to the underlying dependencies and maintenance burden, but would hope that they are as minimal as we can get away with.

This is plain HTML and CSS with minimal changes to the existing setup and content, no frontend framework and the static sites are rendered statically with a template preprocessor (I use Eleventy instead of Jekyll since it is more modern and does not require Ruby, but that's not required).

Two things that I’d perhaps change are the following:

• The strong marketing vibes, with ad-like over-sized headlines and numbers as selling points. Personally, I think this is not needed on this site, and distracts from its actual information content.
• Related, the heavy reliance on scrolling. With the old page I immediately see the most relevant info on one page; here the information density is perhaps a bit low, especially on the initial page.

In essence it is just placeholder content to be filled with life, it is up for you to define what page should represent and this issue intentionally focuses on design, not content since I know this will need its on scope. I agree it should be tailored more towards professionals and a bit condensed.

At the same time what I know from community work hosting the Discord, conferences and meetups is that the community overall is too inward focused and the core ideas of WebAssembly needs to be defined in concise and simple terms somewhere and friction should be reduced to understand what it is about and how to get started. A lot of gems are hidden in the depths of some documentation or proposal, like for example mixing modules in different languages, and module sandboxing or that it runs on IOT devices. But as said for this I would suggest to open a separate issue and land this with minimal content changes.

(While we’re here, a couple of data items are in need of an update if they are to appear prominently on the main page: o There are only 3 browser engines left, but 10-20 others appeared. o OCaml is missing as one of the more well-supported languages; possibly others.)

Yes I noticed OCaml in particular, also that no interpreters are listed on the site like Wasm3 or WASMi, but decided to touch the content as little as possible in this design issue to make this an incremental update to touch base first.

[ttraenkler]

I cannot speak to the underlying dependencies and maintenance burden, but would hope that they are as minimal as we can get away with. Two things that I’d perhaps change are the following:

@rossberg I put up a draft PR so @tomayac can take a look if anything needs to be changed, but I was very conservative keeping the old setup unchanged. From your perspective, content pages like your news post about 3.0 can still be published as markdown unchanged.

• Related, the heavy reliance on scrolling. With the old page I immediately see the most relevant info on one page; here the information density is perhaps a bit low, especially on the initial page.

Except for the landing page, the contents are unchanged and the layout should take about the same space, just the FAQ in the docs got foldable and so more compact, since I had the same objection to the endless FAQ scrolling on the old page. So your objection should only be a concern on the landing page, which people would normally not look at anyways after the first time. The FAQ on the landing page is almost a duplicate of the one in the docs, so that could be eliminated as well, but then I would recommend to structure the docs pages more clearly so newcomers don't have a hard time to find out what's most relevant to them. The browser and coverage section and the Start building could also go if you don't see it fit there, but one could think of a concise onboarding workflow on the landing page conveying the core ideas for people who don't really get the idea of WebAssembly.

[ttraenkler]

@rossberg Regarding colors, the original WebAssembly Summit website in 2020 I designed in collaboration with @pranjal9599 plays on the WebAssembly purple color theme as a reference. For reading long texts like documentation this will be tiring and not everyone likes it, so it's always a fine line to walk and intense colors like this should be used sparingly potentially on the landing page.

[ttraenkler]

Purple accent (for the hero section only):

Lighthouse score:

[wffurr]

@ttraenkler, thank you for putting in the work to build this design, write this proposal, and start a discussion. There's a call for website subgroup volunteers in #448 and some related work in making the spec more accessible in the Wasm reference manual, on MDN, and on the spec repo.

I'd like to back up and talk about the higher level issue that's not addressed in the issue post or PR - what problem is being solved by a new website design?

The original plans go back to a discussion with @binji in 2019 but life had other plans. I previewed it to @tomayac who encouraged me to open an issue here.

Can you elaborate on the discussion with @binji? I spoke with @tomayac and we don't have any context on a new website design.

At the same time what I know from community work hosting the Discord, conferences and meetups is that the community overall is too inward focused and the core ideas of WebAssembly needs to be defined in concise and simple terms somewhere and friction should be reduced to understand what it is about and how to get started.

Is this the main problem that you're going after? If so, please lead with this in the issue description and let's have a community discussion about the best way to solve this problem. Some details, examples, more context, etc. would all be helpful in understanding this and coming up with ideas on how to address it.

A lot of gems are hidden in the depths of some documentation or proposal, like for example mixing modules in different languages, and module sandboxing or that it runs on IOT devices. But as said for this I would suggest to open a separate issue and land this with minimal content changes.

Let's identify the main issue to discuss first before anything is landed. At this stage, the contours of the problem aren't clear much less how to make progress on them in a systematic way.

[yowl]

I like it, maybe move the Get Started button to a menu as at the top right I didn't see it at first.

[ttraenkler]

@ttraenkler, thank you for putting in the work to build this design, write this proposal, and start a discussion. There's a call for website subgroup volunteers in #448 and some related work in making the spec more accessible in the Wasm reference manual, on MDN, and on WebAssembly/spec#1515 (comment).

Thanks for mentioning #448, I am glad to see activity there and am happy to contribute there to the discussion about content, this issue is about design only and texts are placeholders and sections can be removed if there is no consensus without harm.

I'd like to back up and talk about the higher level issue that's not addressed in the issue post or PR - what problem is being solved by a new website design?

If I may quote myself here: "In essence it is just placeholder content to be filled with life, it is up for you to define what page should represent and this issue intentionally focuses on design, not content since I know this will need its on scope."

The draft PR is not ready to be merged but to align on the technical setup if there is a general consensus on going for a new design.

Can you elaborate on the discussion with @binji? I spoke with @tomayac and we don't have any context on a new website design.

Nothing elaborate, IIRC when we were organizing the WebAssembly Summit in 2020 and I was working on the conference website we suggested to give the page a fresh design and add a community section to the page to link to local WebAssembly communities.

At the same time what I know from community work hosting the Discord, conferences and meetups is that the community overall is too inward focused and the core ideas of WebAssembly needs to be defined in concise and simple terms somewhere and friction should be reduced to understand what it is about and how to get started.

Is this the main problem that you're going after? If so, please lead with this in the issue description and let's have a community discussion about the best way to solve this problem. Some details, examples, more context, etc. would all be helpful in understanding this and coming up with ideas on how to address it.

Not in this issue, but in general that was my motivation to do community work like founding the Discord or hosting conferences or meetups since not even within the community the full vision was clear to everyone. I am happy to contribute to the content discussion, but this is out of scope for me for this issue, it is just about visuals.

A lot of gems are hidden in the depths of some documentation or proposal, like for example mixing modules in different languages, and module sandboxing or that it runs on IOT devices. But as said for this I would suggest to open a separate issue and land this with minimal content changes.

Let's identify the main issue to discuss first before anything is landed. At this stage, the contours of the problem aren't clear much less how to make progress on them in a systematic way.

I agree content changes need discussion and am happy if there is interest in refining the content, but intentionally this was not in scope for this issue.

[tlively]

This looks really nice! In terms of process, I don't want to bog this down by forcing design-by-committee from scratch, especially since this proposal is about the site style rather than content. I would propose that when we're done iterating on this issue, @ttraenkler should bring this to a CG meeting for wider exposure, final feedback, and a consensus poll.

Here's my personal feedback:

• My top request would be to make hyperlinks stand out more. I find them very hard to identify, especially in comparison to the old design.

• I agree with @rossberg that it would be good to have slightly higher information density on the homepage.

• I like the purple gradient on the dark mode page. I think the light mode could use more color.

• It would be best to use the real logos for products and services where available rather than vector recreations of them to avoid running afoul of anyone's branding guidelines.

• "Run code in any language fast, secure and portable" does not read very well IMO (and is not grammatically correct). Unfortunately I don't have any good suggestions for replacements off the top of my head.

[ttraenkler]

This looks really nice! In terms of process, I don't want to bog this down by forcing design-by-committee from scratch, especially since this proposal is about the site style rather than content. I would propose that when we're done iterating on this issue, @ttraenkler should bring this to a CG meeting for wider exposure, final feedback, and a consensus poll.

Thanks for the feedback. I am open to present this at some point at a CG meeting.

• My top request would be to make hyperlinks stand out more. I find them very hard to identify, especially in comparison to the old design.

Definitely, this is an early preview to get your input before investing too much upfront without a consensus and the idea is to add more contrast and a color accent there. Work is still ongoing and I am aware of a few other issues that I would fix before suggesting this is ready for the final review. To give some context I just gave this a go to play with the idea and what the challenges with the technical setup are, but I thought I should open the discussion early rather than doing all the work upfront to get alignment.

• I agree with @rossberg that it would be good to have slightly higher information density on the homepage.

Acknowledged, the current preview already got a bit denser. There is still room for improvement but I am a bit hesitant to do more work on this without alignment on the content.

• I like the purple gradient on the dark mode page. I think the light mode could use more color.

Acknowledged, as mentioned colors are work in progress.

• It would be best to use the real logos for products and services where available rather than vector recreations of them to
• avoid running afoul of anyone's branding guidelines.

If that section finds consensus and we have the material, happy to do so.

• "Run code in any language fast, secure and portable" does not read very well IMO (and is not grammatically correct). Unfortunately I don't have any good suggestions for replacements off the top of my head.

Agreed, this is something that needs discussion. I imagine it will not be easy to find consensus on something that fits there visually and does not feel off so if I make changes this will still be a placeholder text subject to change.

[tlively]

Definitely, this is an early preview to get your input before investing too much upfront without a consensus

There is still room for improvement but I am a bit hesitant to do more work on this without alignment on the content.

Great, let's get that consensus! I would add an agenda item to ask the CG for consensus that this direction looks reasonable and that they would be open to landing a new design once feedback has been addressed.

[ttraenkler]

Great, let's get that consensus! I would add an agenda item to ask the CG for consensus that this direction looks reasonable and that they would be open to landing a new design once feedback has been addressed.

@tlively Sounds good to me. Please emphasize this is an early draft and not all aspects have stabilized - in particular texts are placeholders, design and colors are not final and subject to change, the layout will become more compact and the idea is to land this with minimal content changes - so we avoid getting hung up on discussions about details. Nonetheless ideas and constructive feedback on the current state can steer things moving forward. If this stirs up discussions about improving the content very welcome, but we should redirect controversial content discussions to a separate issue so we can iterate fast and ship incrementally. I would also like to point out this is voluntary work, so I need to timebox the first iteration to a few days and have already spent a few on it. Open to sponsorships if people want to support this effort. It probably makes sense I take part in that meeting if people have questions or feedback.