Homepage banner for Debian bookworm release
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
Reply to: