[Design-devel] Homepage banner for Debian bookworm release

[Laura Arjona Reina]

Dear Juliette, website team
I've had a look at the chosen Emerald theme for bookworm. Thanks 
Juliette for the work!

https://wiki.debian.org/DebianArt/Themes/Emerald

For the website homepage banner we usually struggle mainly because we 
don't specify in advance our needs: a flexible image or system that can 
be displayed in very different screens and resolutions: narrow ones as 
cellphones, very wide as desktop monitors... and also, if possible, in a 
format that allows translations of the motto "the universal operating 
system".

In former releases, we usually got this result adding some changes to 
the proposed website banner:
0.- Get the original svg.
1.- Split in two images, one for foreground and one for background.
2.- Stretch the foreground image (reorganising components) so the main 
picture fit in 500 or 600 px
3.- Provide the foreground svg to translators so they can edit, 
translate, and then convert to png to be used in their language CSS.

Recently Leighton (in CC) provided an improvement to our CSS files 
(thanks!) that would set a plain colour to be used as background, so we 
now only need the foreground image.

I have taken the SVG from source repo of Emerald theme:

https://github.com/julietteTaka/Emerald/blob/main/WebsiteBanner.svg

and made my proposal for foreground image, that I committed in our 
"bookworm" branch of the webwml repo:

https://salsa.debian.org/webmaster-team/webwml/-/blob/68832f1d0af14a825fdf1f332900e531b0aae431/english/Pics/emerald-fg.svg

(600px wide, and we'd use #05475cff for background colour via debhome.css).

I have tested this locally with Firefox developers tool and changing the 
adaptable view to different screens (iPhone, other mobile screens, very 
wide screens...) and it seems it works well. However:

* I may made some mistakes aligning the different elements in the 
picture, or you may have better ideas
* I may have overlooked any best practice from the 
design/UX/accessibility point of view (not much experience in those areas)
* There may be a better "method" to get what we need, than plain 
background colour in CSS + Narrow foreground image

So review/opinion/contributions from design experts are very appreciated 
(CC'ed design-devel mailing list, too).

Kind regards,
-- 
Laura Arjona Reina
https://wiki.debian.org/LauraArjona