Improve the Try Matrix Page by MTRNord · Pull Request #3239 · matrix-org/matrix.org

MTRNord · 2026-02-26T08:32:19Z

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>

cloudflare-workers-and-pages · 2026-02-26T08:32:36Z

Deploying matrix-website with Cloudflare Pages

Latest commit:	`b0786f9`
Status:	✅ Deploy successful!
Preview URL:	https://35981ec4.matrix-website.pages.dev
Branch Preview URL:	https://mtrnord-get-started.matrix-website.pages.dev

View logs

HarHarLinks

looks very promising to me!

static/js/providers-carousel.js

sass/_try-matrix.scss

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>

awtj8o81ryywg793

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

static/js/providers-carousel.js

templates/try-matrix.html

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

thibaultamartin · 2026-03-03T12:39:27Z

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>

HarHarLinks · 2026-03-03T14:04:10Z

templates/try-matrix.html

+                    <label for="pf-linux" class="platform-filter-btn">Linux</label>
+                </div>
+
+                <div class="client-cards">


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

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

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:

What is the goal?

Can it be ~1 consistent size?

(Should text in general be larger on m.org?)

templates/try-matrix.html

sass/_try-matrix.scss

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

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

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

… lightbox for some clients multiple screenshots make sense. The parent is limited to 4:3. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

awtj8o81ryywg793

Here are a few suggestions, focused on the experience on small viewports.

Other than the included comments, we also have a text positioning issue on CTA buttons:

sass/_try-matrix.scss

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

MTRNord · 2026-03-05T10:18:24Z

@awtj8o81ryywg793

Other than the included comments, we also have a text positioning issue on CTA buttons:

Thats fixed by using clamp now so it doesnt overflow as likely. I also centered the text within now.

MTRNord · 2026-03-05T14:45:25Z

Note: Missing/blocking is that I also add the missing screenshots.

weeman1337

I like the new TL;DR

Other than that only some smaller notes.

templates/try-matrix.html

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

HarHarLinks · 2026-03-08T15:43:24Z

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

HarHarLinks · 2026-03-08T16:07:43Z

sass/_try-matrix.scss

+
+    // ── Account tiers (Create an account section) ─────────────────────────────
+
+    .account-tiers {


this is starting to get nitpicky, but the nested boxes on mobile are wasting space with double padding, wondering if that could be avoided responsively.

HarHarLinks · 2026-03-08T16:09:02Z

sass/_try-matrix.scss

+        }
+    }
+
+    .scroll-down-indicator {


would it be within reason so try and always have both the CTA and this on screen on mobile? The iPhone 11 simulation with my custom root font size of 18 gives me this thanks to the header wasting 50% of v-space:

The no download needed text is also BS on mobile.

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

thibaultamartin · 2026-03-19T15:24:24Z

@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 · 2026-03-19T18:32:03Z

@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 · 2026-03-20T10:53:40Z

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

MTRNord added 2 commits February 26, 2026 09:16

Initial rework of the try-matrix page

778140f

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

improve the hosting by adding all of the hosts and animating it

39318c4

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

MTRNord self-assigned this Feb 26, 2026

MTRNord requested a review from a team as a code owner February 26, 2026 08:32

HarHarLinks reviewed Feb 26, 2026

View reviewed changes

static/js/providers-carousel.js Show resolved Hide resolved

sass/_try-matrix.scss Show resolved Hide resolved

MTRNord added 2 commits February 26, 2026 10:20

improve the carousel code

a3517e2

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

improve card hover to match upcoming changes in #3172

ef789ff

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

MTRNord requested a review from HarHarLinks February 26, 2026 09:23

This comment was marked as resolved.

Sign in to view

MTRNord added 7 commits February 26, 2026 18:28

Improve the "Start chatting" section

cf5c896

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

add a quickstart hero and use a table instead of cards

9095763

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

allow quickly filtering by platform

72883df

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

denote B2C and B2B on the hosters on try-matrix

a14b5e9

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>

fix broken link to the clients

3303297

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

revert changes to the hosting page

a1bc740

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

Word the Self-Hosting buttons as CTAs

dde2972

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

This comment was marked as resolved.

Sign in to view

MTRNord requested a review from weeman1337 February 26, 2026 17:58

awtj8o81ryywg793 reviewed Feb 27, 2026

View reviewed changes

static/js/providers-carousel.js Show resolved Hide resolved

static/js/providers-carousel.js Outdated Show resolved Hide resolved

static/js/providers-carousel.js Outdated Show resolved Hide resolved

static/js/providers-carousel.js Outdated Show resolved Hide resolved

HarHarLinks reviewed Feb 27, 2026

View reviewed changes

templates/try-matrix.html Outdated Show resolved Hide resolved

MTRNord added 3 commits March 3, 2026 10:53

make the css vars the source of truth

7ace6e1

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

add reuse comment to the provider-carousel

92f4e53

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

Replace the table with dropdowns

2fb8dc5

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

fix the quickstart layout on mobile and add some anchors to he clients

09c01da

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

HarHarLinks reviewed Mar 3, 2026

View reviewed changes

templates/try-matrix.html Outdated Show resolved Hide resolved

HarHarLinks reviewed Mar 3, 2026

View reviewed changes

templates/try-matrix.html Outdated Show resolved Hide resolved

HarHarLinks reviewed Mar 3, 2026

View reviewed changes

sass/_try-matrix.scss Outdated Show resolved Hide resolved

MTRNord added 6 commits March 3, 2026 15:54

clamp paragraph font size on mobile a bit more

e44271d

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

improve the wording

c8f986f

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

improve the title sizes, pill colors and hide the element web button …

64a1253

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

make the mobile client button primary on mobile

d3ca3ff

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

remove the platform filter

9c03ff7

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

allow multiple screenshots side by side and have an indicator for the…

6f62643

… lightbox for some clients multiple screenshots make sense. The parent is limited to 4:3. Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>

MTRNord force-pushed the MTRNord/get-started branch from 197b92e to 6f62643 Compare March 3, 2026 17:02

awtj8o81ryywg793 reviewed Mar 5, 2026

View reviewed changes

sass/_try-matrix.scss Show resolved Hide resolved

sass/_try-matrix.scss Show resolved Hide resolved

MTRNord added 2 commits March 5, 2026 11:14

improve mobile behaviour

6bc0ca4

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

increase the lightbox indicator also on desktop

0a18bfb

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

MTRNord requested review from HarHarLinks, awtj8o81ryywg793 and thibaultamartin March 5, 2026 10:18

weeman1337 reviewed Mar 5, 2026

View reviewed changes

templates/try-matrix.html Outdated Show resolved Hide resolved

templates/try-matrix.html Outdated Show resolved Hide resolved

templates/try-matrix.html Outdated Show resolved Hide resolved

templates/try-matrix.html Outdated Show resolved Hide resolved

MTRNord mentioned this pull request Mar 6, 2026

Add a basic css-only lightbox to the figure shortcode #3262

Open

MTRNord added 3 commits March 8, 2026 15:31

enlarge the good for text

c7eb549

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

use _blank and improve CTGA wording and app wording

0efc733

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

Use "Invite more people at once" for the premium wording

72893e3

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

HarHarLinks reviewed Mar 8, 2026

View reviewed changes

fix heading semantics and font sizes

b0786f9

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

HarHarLinks added enhancement This would be an improvement to the website. aesthetic Visual inconsistencies or improvements labels Mar 24, 2026

MTRNord added the help wanted Issues we consider that external contributes can help us with. label Mar 26, 2026


		// ── Account tiers (Create an account section) ─────────────────────────────

		.account-tiers {

Uh oh!

Conversation

MTRNord commented Feb 26, 2026

Description

Related issues

Role

Timeline

Signoff

Uh oh!

cloudflare-workers-and-pages bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying matrix-website with Cloudflare Pages

Uh oh!

HarHarLinks left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

awtj8o81ryywg793 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thibaultamartin commented Mar 3, 2026

Simple instructions

Clients list

Bells & whistles

Uh oh!

HarHarLinks Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MTRNord Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

HarHarLinks Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

awtj8o81ryywg793 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

MTRNord commented Mar 5, 2026

Uh oh!

MTRNord commented Mar 5, 2026

Uh oh!

weeman1337 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

HarHarLinks commented Mar 8, 2026

Uh oh!

HarHarLinks Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

HarHarLinks Mar 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HarHarLinks Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

thibaultamartin commented Mar 19, 2026

Uh oh!

MTRNord commented Mar 19, 2026

Uh oh!

HarHarLinks commented Mar 20, 2026

cloudflare-workers-and-pages bot commented Feb 26, 2026 •

edited

Loading

HarHarLinks Mar 3, 2026 •

edited

Loading

HarHarLinks Mar 8, 2026 •

edited

Loading