Conclusion

Throughout this learning module, we learned the basics of styling Material UI components using the McMaster Digital Brand Standards as an example of a consistent theme. We also covered the basics of mobile user interface design and we learned how to evaluate a website for AODA compliance using the Wave tool. You created a single-page application using Next.js and MUI that contains the following UI elements and features:

A custom favicon
Styled text using the Typography component
A theme that uses the McMaster Heritage Maroon and Heritage Gold colors
A styled responsive navigation bar with two configurations depending on the screen size
A responsive footer that adapts its layout and position to the device’s screen size
Support for dark and light mode (in addition to following the user preference)
Breadcrumbs with a styled universal back button
Styled buttons using a custom MacButton component
A styled speed dial component
A styled file input widget
A styled dropdown menu
Vertical tabs that make use of a drawer on mobile devices
AODA compliance
Accessible focus indicators
A “Skip to Main Content” button
Localized (Canadian French) pages

While we only scratched the surface of what you can do with Next.js and Material UI, we hope that this learning module provided you with the basic knowledge needed to create modern and responsive websites.

We recommend the following resources if you want to learn more about Next.js, Material UI, the McMaster Brand Standards, and the web accessibility guidelines:

You can also use the PageSpeed Insights tool to assess your website in terms of performance, accessibility, best practices and SEO score. The tool can grade the mobile and desktop versions of your website. Please note that your website needs to be web accessible without the need for a VPN connection or login credentials for this tool to work. Alternatively, you can use the Lighthouse tool that is built into the Google Chrome browser to assess any website that requires logging in using credentials.

The final version of this demo website is available on GitHub: McMasterRS/lmr_building-modern-spas

If you require additional help with styling your McMaster website or if you happen to be using a different tech stack or framework that the ones covered in this learning module, please feel free to book a consultation with the Research Software Development team by emailing rsd@mcmaster.ca.