Banner design and regions
Check your banner on mobile and with a keyboard
Make sure visitors can read and use the banner on different devices.
1. Test a narrow screen
Open the published website on a phone. Check portrait and landscape views. Confirm that the text, buttons and category controls fit without hiding essential content.
2. Test keyboard navigation
On desktop, use Tab and Shift+Tab to move through the banner. Check that focus is visible and that buttons work with the keyboard. Open and close the detailed settings too.
3. Check readability
Zoom the page and review text contrast against the background. Make sure long translations remain readable and buttons do not overlap.
4. Test the settings button
After saving a choice, find and activate the settings button on each device. If anything is hard to use, adjust the relevant design settings or report the issue with your browser and screen size.
Placeholder[SCREENSHOT PLACEHOLDER HC-38-1: A neutral mobile page showing the entire demo banner and all action buttons. Use only dummy website details, names and branding.]
Placeholder[SCREENSHOT PLACEHOLDER HC-38-2: A keyboard-focused banner control with a visible focus outline; crop out browser and account identifiers. Use only dummy website details, names and branding.]