[website] Add a templates & design kits section to the Material UI page #38617

danilo-leal · 2023-08-23T15:37:50Z

I have followed (at least) the PR section of the contributing guide.

This PR comes in preparation for removing the Templates and Design kits as items within the home page switcher. This removal will allow the introduction of Toolpad there (#38604) in a better way: not only having five products there is a bit overwhelming, but they don't sit, at least conceptually, on the same level as MUI Core, MUI X, and Toolpad. Templates and Design kits are more subproducts of Material UI (and Joy UI, in the future). With that said, their pages will keep existing, and we may add more Joy UI-related content soon as they're getting ironed out.

https://deploy-preview-38617--material-ui.netlify.app/material-ui/

mui-bot · 2023-08-23T15:42:10Z

Netlify deploy preview

https://deploy-preview-38617--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against eb556e2

zanivan · 2023-08-23T17:05:39Z

I like this a lot! It's a great way to showcase the available templates and what's achievable when customizing Material UI.

One thing, though, is about the removal of those items from mui.com—I wonder if doing this it wouldn't harm our number of access to both the templates and design kits page.

Maybe we could think of a redundant way to do this, by leaving exclusively the Material UI templates on mui.com/material-ui, and Joy UI templates on mui.com/joy-ui, and so on, but keeping an overall view on mui.com directing users to the mui.com/templates —IMHO we could also polish out this page a bit to add both Joy UI and Base UI templates in the future

danilo-leal · 2023-08-23T19:02:20Z

Yeah, the potential page views drop as an effect of removing the Templates & Design kits of the Products section is an important thing to acknowledge. It'd be great to set up a funnel view on GA to see where people are coming from when accessing those routes.

Overall though, doing so doesn't mean that the homepage shouldn't talk about them. I'm looking forward to revamping the homepage in a general way this year still but, until that's done, we could add a section that would point to /templates and /design-kits, with a copywriting that's a bit broader, covering them for all libraries (even if we don't have, for example, a Figma kit for Joy UI ready to go yet).

docs/src/components/productMaterial/MaterialDesignKits.tsx

oliviertassinari · 2023-08-23T21:59:50Z

docs/src/components/productMaterial/MaterialTemplates.tsx

+    [DEMOS[2]]: <ShoppingBag fontSize="small" />,
+  };
+
+  const TEMPLATES = {


Could we share these with https://mui.com/templates/? So we can easily keep it up to date.

Any suggestions on how to do that? Is creating a JSON file with it a correct way to do it?

docs/src/components/productMaterial/MaterialTemplates.tsx

oliviertassinari · 2023-08-23T22:08:49Z

Nice 👍

Product / Design ideas:

To consider if we want to have a horizontal scrollbar (new)

The section feels quite large on my end. I wouldn't be against having it a bit (10%?) smaller.

One thing, though, is about the removal of those items from mui.com—I wonder if doing this it wouldn't harm our number of access to both the templates and design kits page.

I doubt this is a frequent user flow. Most are likely coming from the side nav link, and the template pages in the docs. Google Analytics flow charts could tell us thoughts but I don't have the time to check.

Overall, I think changes like this should be reviewed by an engineer (not me). I did a quick pass while I was at it. What I can spot, mostly focused on page lighthouse score (e.g. performance). So to add a developer in the review 😁:

Three regressions in https://pagespeed.web.dev/analysis/https-deploy-preview-38617--material-ui-netlify-app-material-ui/ks6egcuxpv?form_factor=desktop I think we should fix:

Nº
1
2
3

I don't think we should load the images with background color, this prevents the browser to lazily loading them based on the viewport. These are now loaded
It looks like we could compress a bit more the images, ImageOptim found 10% win on the largest image.

siriwatknp · 2023-08-25T08:36:28Z

It'd be great if the height of the carousel is smaller. Currently, I cannot focus on it with my 13" Mac pro

siriwatknp · 2023-08-25T08:38:22Z

Not sure if some changes in this PR affect this section or not, but this looks like a bug to me.

Screen.Recording.2566-08-25.at.15.37.01.mov

danilo-leal · 2023-08-25T11:15:43Z

@siriwatknp Uhm... I'm afraid not. 😕 It's like this in the current prod version, too, and I figure it's because of the addition of the resizing handle there.

danilo-leal · 2023-08-28T22:12:28Z

@siriwatknp + @zanivan + @gerdadesign can y'all check this out again when there's time?

zanivan

Design-wise, looks great! 🚀

danilo-leal · 2023-09-06T17:36:07Z

@siriwatknp + @bharatkashyap Hey y'all, I'd appreciate it if you could chime in here and drop a dev-focused review! :)

bharatkashyap

🎉

danilo-leal · 2023-09-11T16:15:36Z

@oliviertassinari Anything that you want to point out about this one before merging it? 😬 Want to make sure we've got most of it covered as I still see some stuff on PageInsights, though many of them seem not directly related to the changes done on this PR.

oliviertassinari · 2023-09-11T16:44:56Z

PageInsights, though many of them seem not directly related to the changes done on this PR.

@danilo-leal in terms of engineering content:

Because we use background images, we can't lazy load them on mobile. Not ideal, but also the same as before as I understand it, so unless @siriwatknp want to take on this, a fight for another day
https://deploy-preview-38617--material-ui.netlify.app/static/images/cards/birds-of-tokyo.jpg https://deploy-preview-38617--material-ui.netlify.app/static/images/cards/yosemite.jpeg complain it's too large of an image vs. where we display them
there is a lost h6 on the page
(outside the scope of this PR) We should consider an image CDN, there are often more efficient image format. it can resize the images on the fly.)

Anything that you want to point out

On mobile, the arrows are maybe too large

danilo-leal · 2023-09-11T17:53:19Z

@oliviertassinari thank you! Couldn't find the lost h6, though 😅

oliviertassinari · 2023-09-11T23:47:57Z

thank you! Couldn't find the lost h6, though 😅

Ah right, it's gone. All good on my end then.

I pushed a commit to fix https://www.webpagetest.org/vitals.php?test=230911_BiDcC2_BK6&run=3#cls, this one has been annoying me for some time.

Screen.Recording.2023-09-12.at.01.48.17.mov

add the two new sections to the Material UI page

721860c

danilo-leal added the website Pages that are not documentation-related, marketing-focused. label Aug 23, 2023

danilo-leal requested review from oliviertassinari, zanivan and gerdadesign August 23, 2023 15:37

danilo-leal self-assigned this Aug 23, 2023

fix the leaking border radius + make the slider start from the 2nd image

93ca476

oliviertassinari reviewed Aug 23, 2023

View reviewed changes

danilo-leal requested a review from siriwatknp August 23, 2023 22:18

fixes and adjustments post review

4a9690e

danilo-leal added 3 commits August 25, 2023 08:08

reduce the template section more

342d4bb

adjust flash code line start

313a157

remove horizontal scroll from this section

ef7c790

zanivan approved these changes Aug 31, 2023

View reviewed changes

danilo-leal added the package: material-ui Specific to @mui/material label Aug 31, 2023

danilo-leal requested a review from bharatkashyap September 6, 2023 11:08

bharatkashyap approved these changes Sep 7, 2023

View reviewed changes

danilo-leal added 2 commits September 7, 2023 10:33

round of polish

dad9590

a bit more polish

8a715ae

reduce slider buttons size on mobile

100ca30

fix layout shift hero

eb556e2

danilo-leal merged commit 1915190 into mui:master Sep 12, 2023
18 checks passed

danilo-leal deleted the add-templates-designkits-tothe-materialui-page branch September 12, 2023 00:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[website] Add a templates & design kits section to the Material UI page #38617

[website] Add a templates & design kits section to the Material UI page #38617

danilo-leal commented Aug 23, 2023 •

edited by oliviertassinari

Loading

mui-bot commented Aug 23, 2023 •

edited

Loading

zanivan commented Aug 23, 2023

danilo-leal commented Aug 23, 2023

oliviertassinari Aug 23, 2023

danilo-leal Aug 23, 2023

oliviertassinari commented Aug 23, 2023 •

edited by danilo-leal

Loading

siriwatknp commented Aug 25, 2023

siriwatknp commented Aug 25, 2023

danilo-leal commented Aug 25, 2023

danilo-leal commented Aug 28, 2023

zanivan left a comment

danilo-leal commented Sep 6, 2023

bharatkashyap left a comment

danilo-leal commented Sep 11, 2023

oliviertassinari commented Sep 11, 2023 •

edited by danilo-leal

Loading

danilo-leal commented Sep 11, 2023

oliviertassinari commented Sep 11, 2023 •

edited

Loading

[website] Add a templates & design kits section to the Material UI page #38617

[website] Add a templates & design kits section to the Material UI page #38617

Conversation

danilo-leal commented Aug 23, 2023 • edited by oliviertassinari Loading

mui-bot commented Aug 23, 2023 • edited Loading

Netlify deploy preview

Bundle size report

zanivan commented Aug 23, 2023

danilo-leal commented Aug 23, 2023

oliviertassinari Aug 23, 2023

Choose a reason for hiding this comment

danilo-leal Aug 23, 2023

Choose a reason for hiding this comment

oliviertassinari commented Aug 23, 2023 • edited by danilo-leal Loading

siriwatknp commented Aug 25, 2023

siriwatknp commented Aug 25, 2023

danilo-leal commented Aug 25, 2023

danilo-leal commented Aug 28, 2023

zanivan left a comment

Choose a reason for hiding this comment

danilo-leal commented Sep 6, 2023

bharatkashyap left a comment

Choose a reason for hiding this comment

danilo-leal commented Sep 11, 2023

oliviertassinari commented Sep 11, 2023 • edited by danilo-leal Loading

danilo-leal commented Sep 11, 2023

oliviertassinari commented Sep 11, 2023 • edited Loading

danilo-leal commented Aug 23, 2023 •

edited by oliviertassinari

Loading

mui-bot commented Aug 23, 2023 •

edited

Loading

oliviertassinari commented Aug 23, 2023 •

edited by danilo-leal

Loading

oliviertassinari commented Sep 11, 2023 •

edited by danilo-leal

Loading

oliviertassinari commented Sep 11, 2023 •

edited

Loading