Skip to content

Improve the Try Matrix Page#3239

Merged
MTRNord merged 36 commits into
mainfrom
MTRNord/get-started
Apr 10, 2026
Merged

Improve the Try Matrix Page#3239
MTRNord merged 36 commits into
mainfrom
MTRNord/get-started

Conversation

@MTRNord
Copy link
Copy Markdown
Member

@MTRNord MTRNord commented Feb 26, 2026

Description

Well its a whole redesign. I suggest having a look at the deployment for all the things. Trying is better than words in this case

Related issues

Role

Website and Content WG

Timeline

Whenever

Signoff

See commits

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
@MTRNord MTRNord self-assigned this Feb 26, 2026
@MTRNord MTRNord requested a review from a team as a code owner February 26, 2026 08:32
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Feb 26, 2026

Deploying matrix-website with  Cloudflare Pages  Cloudflare Pages

Latest commit: 09430a1
Status: ✅  Deploy successful!
Preview URL: https://7f43b1e6.matrix-website.pages.dev
Branch Preview URL: https://mtrnord-get-started.matrix-website.pages.dev

View logs

Copy link
Copy Markdown
Contributor

@HarHarLinks HarHarLinks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks very promising to me!

Comment thread static/js/providers-carousel.js
Comment thread sass/_try-matrix.scss
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
@MTRNord MTRNord requested a review from HarHarLinks February 26, 2026 09:23
weeman1337

This comment was marked as resolved.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
This requires a followup change later to also display this on the
ecosystem. This is out of scope at this time

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
@MTRNord

This comment was marked as resolved.

@MTRNord MTRNord requested a review from weeman1337 February 26, 2026 17:58
Copy link
Copy Markdown
Contributor

@awtj8o81ryywg793 awtj8o81ryywg793 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alongside the points raised in this review, I've noticed that the "Get an app" table isn't responsive.

Comment thread static/js/providers-carousel.js
Comment thread static/js/providers-carousel.js Outdated
Comment thread static/js/providers-carousel.js Outdated
Comment thread static/js/providers-carousel.js Outdated
Comment thread templates/try-matrix.html Outdated
MTRNord added 3 commits March 3, 2026 10:53
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
@thibaultamartin
Copy link
Copy Markdown
Contributor

This is an amazing redesign! Thanks for tackling it, the Try Matrix page has needed some love for a long time, and this redesign is made tastefully and efficiently!

Simple instructions

On desktop, I like that the simple "Get Element X and create an account on matrix.org" instructions take the whole. It keeps things simple for people who just want to give it a go.

On mobile, the instructions are slightly larger than the screen as seen from an iPhone 11 Pro, a reasonably not too old device. Fiddling with the font-size, I can make the instructions fit in. Maybe it would make sense to clamp the font-size page-wise depending on the screen width? I don't mind a media or container query either.

Clients list

Seeing all the featured clients in a simple and compact list is really great. It's nicely presented and less overwhelming than the regular view we have on /ecosystem/clients.

For the screenshots, I think we should enforce a specific aspect ratio. 4:3 seems to be an interesting one. For desktop, it's seamless. For mobile, we can ask to have a collage of 2 or 3 screenshots in the same image to achieve the same aspect ratio.

I think it could be interesting to have an anchor for each client as well, so it's possible to link to /try-matrix#fluffychat. It would make it easy to turn the "Get Element X" CTA into an anchor that points the user to the Element X entry on that same page.

Bells & whistles

Two lines of CSS could go a long way:

  • Adding scroll-snap-type: y proximity; would let the window scroll nicely to the most relevant content
  • Adding scroll-behavior: smooth; would give us smooth scrolling when clicking the arrow. It would make it more obvious that we're staying on the same page.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Comment thread templates/try-matrix.html
<label for="pf-linux" class="platform-filter-btn">Linux</label>
</div>

<div class="client-cards">
Copy link
Copy Markdown
Contributor

@HarHarLinks HarHarLinks Mar 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the client cards and their text is surprisingly small on mobile, and partially also on desktop

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need more details here I think. Not sure what exactly you mean. It feels fine on my side

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The font size seems to change somewhat arbitrarily all over the place, and there is even some inconsistency (e.g. between "good for" text and the m.org homeserver details.

Maybe let's take a step back:

  1. What is the goal?
  2. Can it be ~1 consistent size?
  3. (Should text in general be larger on m.org?)

Comment thread templates/try-matrix.html Outdated
Comment thread templates/try-matrix.html Outdated
Comment thread sass/_try-matrix.scss Outdated
@HarHarLinks
Copy link
Copy Markdown
Contributor

can we get more anchors so i can send people e.g. to the pick a server section?

Comment thread sass/_try-matrix.scss
Comment thread sass/_try-matrix.scss
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
@thibaultamartin
Copy link
Copy Markdown
Contributor

@MTRNord This is a great PR already and I wouldn't want to let it bitrot, do you have some bandwidth to tackle it or would you rather someone else takes over :) ?

@MTRNord
Copy link
Copy Markdown
Member Author

MTRNord commented Mar 19, 2026

@MTRNord This is a great PR already and I wouldn't want to let it bitrot, do you have some bandwidth to tackle it or would you rather someone else takes over :) ?

I would love if someone can help with the client screenshots. I am kinda lacking motivation for that currently :/

So yes help appreciated!

@HarHarLinks
Copy link
Copy Markdown
Contributor

(https://github.com/AlexanderVanhee/Gradia looks like it might create very pretty screenshots)

@HarHarLinks HarHarLinks added enhancement This would be an improvement to the website. aesthetic Visual inconsistencies or improvements labels Mar 24, 2026
@MTRNord MTRNord added the help wanted Issues we consider that external contributes can help us with. label Mar 26, 2026
Comment thread content/ecosystem/clients/cinny.md
Comment thread sass/_try-matrix.scss
Comment on lines +356 to +357
// Multi-screenshot layout — images sit side by side, each fills its slot
// with cover so the 4:3 container is always full
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm obviously contain isn't great either but cover means images are cut off
image

Comment thread templates/try-matrix.html Outdated
HarHarLinks and others added 4 commits April 6, 2026 02:13
Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com>
Co-authored-by: Kim Brose <2803622+HarHarLinks@users.noreply.github.com>
Signed-off-by: Marcel <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Comment thread templates/try-matrix.html Outdated
MTRNord added 2 commits April 9, 2026 17:16
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Comment thread templates/try-matrix.html Outdated
Comment thread templates/try-matrix.html Outdated
Comment thread templates/try-matrix.html Outdated
Copy link
Copy Markdown
Contributor

@HarHarLinks HarHarLinks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trying it on my phone, it feels pretty good.

I noticed the "close" x in the lightbox is always top right of the screen, i.e. sometimes very far from the actual image or even over it's border. Could maybe improve the placement some time.
Screenshot_20260409-174408

Also the lightbox seems to make it into browsing history, so browser navigation after checking out all the lightboxes is pretty annoying.

These are pretty minor issues I wouldn't block on though.

Comment thread templates/try-matrix.html Outdated
MTRNord and others added 3 commits April 10, 2026 14:07
Co-authored-by: Kim Brose <2803622+HarHarLinks@users.noreply.github.com>
Signed-off-by: Marcel <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
@MTRNord MTRNord merged commit 5f039b0 into main Apr 10, 2026
7 checks passed
@MTRNord MTRNord deleted the MTRNord/get-started branch April 10, 2026 12:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

aesthetic Visual inconsistencies or improvements enhancement This would be an improvement to the website. help wanted Issues we consider that external contributes can help us with.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants