Improve the Try Matrix Page#3239
Conversation
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Deploying matrix-website with
|
| 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 |
HarHarLinks
left a comment
There was a problem hiding this comment.
looks very promising to me!
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>
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>
This comment was marked as resolved.
This comment was marked as resolved.
awtj8o81ryywg793
left a comment
There was a problem hiding this comment.
Alongside the points raised in this review, I've noticed that the "Get an app" table isn't responsive.
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 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 instructionsOn 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 Clients listSeeing 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 Bells & whistlesTwo lines of CSS could go a long way:
|
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
| <label for="pf-linux" class="platform-filter-btn">Linux</label> | ||
| </div> | ||
|
|
||
| <div class="client-cards"> |
There was a problem hiding this comment.
the client cards and their text is surprisingly small on mobile, and partially also on desktop
There was a problem hiding this comment.
Need more details here I think. Not sure what exactly you mean. It feels fine on my side
There was a problem hiding this comment.
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?)
|
can we get more anchors so i can send people e.g. to the pick a server section? |
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
|
@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! |
|
(https://github.com/AlexanderVanhee/Gradia looks like it might create very pretty screenshots) |
| // Multi-screenshot layout — images sit side by side, each fills its slot | ||
| // with cover so the 4:3 container is always full |
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>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
HarHarLinks
left a comment
There was a problem hiding this comment.
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.

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.
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>

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