Update Download app example page banner image

[MewenLeHo]

Description

Update 'Download app example' page banner image to add the new version with the '2023 Red Dot Award for Interface Design' message.

Motivation & Context

Keep the page up to date.

Types of change

• New feature (non-breaking change which adds functionality)

Live previews

• https://deploy-preview-2268--boosted.netlify.app/docs/5.3/examples/
• https://deploy-preview-2268--boosted.netlify.app/docs/5.3/examples/download-app/

Checklist

Contribution

• [x] I have read the contributing guidelines

Accessibility

• [x] My change follows accessibility good practices; I have at least run axe

Design

• [x] My change respects the design guidelines defined in Orange Design System
• [x] My change is compatible with a responsive display

Development

• [x] My change follows the developer guide
• (na) I have added JavaScript unit tests to cover my changes
• (na) I have added SCSS unit tests to cover my changes

Documentation

• (na) My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• (na) My change introduces changes to the migration guide
• (na) My new component is well displayed in Storybook
• (na) My new component is compatible with RTL
• (na) Manually run BrowserStack tests
• [x] Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• [ ] Code review
• [ ] Design review
• [ ] A11y review

After the merge

• [ ] Manually launch Percy tests

[netlify[bot]]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	68b56779fe6ab72b4d600fe56adbb12bc2563edb
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6596cd0a1a5fdb0008ba8477
😎 Deploy Preview	https://deploy-preview-2268--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[MewenLeHo]

Notes:

Previous banner was 1600*625px, new one is 820*501px, rendered size in desktop is 1100*469px. The scaling transformation may looks pixelated.

Text in image is usually a big no for accessibility so I added some context in the alt atribute. Feel free to suggest another text if needed.

I kept the previous banner in the directory since I do not know if this banner is temporary or not.

Should we also update the thumbnail in example page (https://deploy-preview-2268--boosted.netlify.app/docs/5.3/examples/)?

[julien-deramond]

Added "upcoming a11y review" for the alternative text and "upcoming design review" to check if the rendering is OK (image not too pixelated).

Should we also update the thumbnail in example page (https://deploy-preview-2268--boosted.netlify.app/docs/5.3/examples/)?

Yes, please. But maybe wait until there's a final version of the image.

[MewenLeHo]

Designers requested a change in wording too. I will need to redo the thumbnails but I will wait until design review is ok.

[Aniort]

hello dear friends, in my opinion, this logo "Reddot winner 2023" is not a a11y issue, except that it's a text image and it's a bad thing. But, the issue, here, is that as a "normal", classic user, I don't know, the hell, what is Reddot ?! For ergonomics reasons, we should explain a little bit more Reddot for example "Orange Design System App, winner of the 2023 Red Dot Design Award for User Interface and User Experience within the category of Brand and Communication Design" with a paragraph (p) displayed under the text to the left of the image, nothing more to say...

[julien-deramond]

/cc @CyriaqueBillard

[CyriaqueBillard]

hello dear friends, in my opinion, this logo "Reddot winner 2023" is not a a11y issue, except that it's a text image and it's a bad thing. But, the issue, here, is that as a "normal", classic user, I don't know, the hell, what is Reddot ?! For ergonomics reasons, we should explain a little bit more Reddot for example "Orange Design System App, winner of the 2023 Red Dot Design Award for User Interface and User Experience within the category of Brand and Communication Design" with a paragraph (p) displayed under the text to the left of the image, nothing more to say...

Would be nice to have tough.

[MewenLeHo]

• [x] New image: ok
• [x] Text in image so adding description in alt attribute: ok
• [x] Change title on the left: ok
• [x] Add a paragraph on the left to give more information about Red Dot Awards (same content as the alt attribute): ok

@CyriaqueBillard and @Aniort: could you please have a look on the new version and tell me if it is ok for you or not.

To do:

• [ ] Redo thumbnails (wait until we reech an agreement)

[CyriaqueBillard]

• [x] New image: ok
• [x] Text in image so adding description in alt attribute: ok
• [x] Change title on the left: ok
• [x] Add a paragraph on the left to give more information about Red Dot Awards (same content as the alt attribute): ok

@CyriaqueBillard and @Aniort: could you please have a look on the new version and tell me if it is ok for you or not.

To do:

• [ ] Redo thumbnails (wait until we reech an agreement)

Some changes to be applied.

• The headline block in the banner has a fixed width of 480 px.
• The copy block in the banner has a fix width of 480 px with right padding of 40 px, or fix width of 440 px if more convenient technically.
• Banner to expand vertically when adding text without enlarging the width of those text blocks.
• Updated image is attached.

[Aniort]

fine for me !