ILIAS-eLearning
Default-HTML-Frame for Mail in System Style (1/3)
What has been changed?
ILIAS system mails previously used a basic HTML template that included the default ILIAS logo and the installation title "Open Source eLearning". Customizing this mail layout required manually overwriting the corresponding template file in the System-Style, which was technically functional but not aligned with system-wide design principles.
We developed a solution that:
- Uses a modernized look & feel for system emails
- Integrates logo and color values from active System-Style
- Eliminates the need to overwrite the mail template separately
- Introduces a new UI layout component ("Mail Page") to the kitchen sink for reusability and consistency
Why was it implemented this way?
The main goal was to centralize styling logic and make mail templates easier to manage when applying individual System-Stylings. By providing a new SCSS file which can be customized via System-Styles , we aimed to:
- Ensure visual consistency across interfaces
- Reduce the need for manual adjustmenting Templates of the System-Style
This decision was based on discussions we had with @Amstutz, where he gave us the initial impulse to bring the mail layout into the UI framework.
A technical challenge we encountered was embedding the logo. To ensure that the logo would be delivered as an attachment and correctly referenced in all email clients, we had to directly embed the image from a given file path. This method gives full control over how the image is embedded and allows the mail to include it as an actual attachment, increasing compatibility and flexibility for users.
How was it tested?
Manual testing was conducted across a wide range of mail clients to ensure rendering consistency. This was particularly important because many email clients use outdated rendering engines, leading to inconsistent support for modern HTML and CSS standards. Not all clients could be tested due to device constraints. Results:
| Mail Client | Tested on | Known Issues |
|---|---|---|
| Apple Mail iOS | :white_check_mark: 04.10.2024 | |
| Apple Mail macOS | :white_check_mark: 04.10.2024 | |
| Gmail Desktop | - | |
| Gmail iOS | :white_check_mark: 22.10.2024 | |
| Gmail Android | :white_check_mark: 15.10.2024 | |
| Gmail Mobile Webmail | - | |
| Outlook Windows | - | |
| Outlook Windows Mail | - | |
| Outlook macOS | :white_check_mark: 04.10.2024 | |
| Outlook.com | :white_check_mark: 15.10.2024 | |
| Outlook iOS | :white_check_mark: 04.10.2024 | |
| Outlook Android | :white_check_mark: 15.10.2024 | |
| Yahoo! Desktop | - | |
| Yahoo! iOS | - | |
| Yahoo! Android | - | |
| AOL Desktop Webmail | - | |
| AOL iOS | - | |
| AOL Android | - | |
| Samsung E-Mail Android | - | |
| Thunderbird Windows | :white_check_mark: 04.10.2024 | |
| Thunderbird macOS | - | |
| ProtonMail Desktop Webmail | :white_check_mark: 04.10.2024 | |
| ProtonMail iOS | :white_check_mark: 22.10.2024 | |
| ProtonMail Android | :warning: 04.10.2024 | Mail scrolls horizontally |
| WEB.DE Desktop Webmail | :white_check_mark: 15.10.2024 | |
| WEB.DE iOS | :white_check_mark: 16.10.2024 | |
| WEB.DE Android | - |
Notes for reviewers
We're still looking for a clean and user-friendly way to notify developers and designers of System-Styles that two SCSS files need to be compiled now instead of just one.
Currently, this introduces a second compilation layer, which is not ideal. An alternative approach, extracting the mail section from the compiled CSS, was discussed in the same meeting with @Amstutz, but was ultimately dismissed by mutual agreement, as it was considered less sustainable in the long term.
We're considering developing a small script to assist with this step. Feedback on this point is welcome :)
Related Tickets / References
Feature Request:
https://docu.ilias.de/go/wiki/wpage_7280_1357 Due to the work on the UI component and the PR, the FeatureRequest will be reworked accordingly before it is presented again to the JourFixe for 11/Trunk.
Internal Reviews:
- https://github.com/marvin-matuschek/ilias/pull/1
- https://github.com/marvin-matuschek/ilias/pull/2
Related PR's:
- https://github.com/ILIAS-eLearning/ILIAS/pull/9565
- https://github.com/ILIAS-eLearning/ILIAS/pull/9566
