responsive

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Minimum viewport dimensions for Primer

Pages should adapt to the browser's viewport size without loss of information or functionality, starting at a minimum viewport width of 320px and a minimum viewport height of 256px. Supporting these smaller sizes enables people with low vision to use GitHub with a browser zoom enabled, up to 400% on a 1280px wide screen.

Responsive web design definition at GitHub

Responsive means experiences are inherently adaptive. Interfaces should not only adjust layout and spacing when resizing a page, but work efficiently to provide an experience tailored to the paradigms and affordances of the person's device. Responsive design must adapt to the form factor (viewport size, pointing device support, device metaphors, power, and affordances) and respect user preferences (browser default font size, reduced motion, color scheme, contrast preferences).

Minimum interactive target size

The AA accessibility standard requires a minimum target size of 24px. However, it is recommended to aim for the AAA standard of 44px when possible. For example, the medium size button is visually 32px in height but may not meet the AAA standard on mobile, so consider utilizing the large button size instead or increasing the touch target to 44px by adding space above and below the button.

Avoid pointing device media queries

Pointing device media queries such as coarse or fine are unreliable because many devices possess the ability to respond to cursor, touch, keyboard, voice, and other forms of input simultaneously. Additionally, browsers may not be able to detect the presence of input augmentation. Avoid relying on this type of query to conditionally modify parts of an interface.

Hover support consideration

Browsers report if the primary input mechanism can hover over elements with the hover media feature. Devices that don't support hovering such as smartphones and tablets may need adapted experiences. Features that rely on hover such as tooltips or hovercards may not be available on these devices. Make sure the information presented is still accessible through other means, such as a direct link to a page with the information.

User preference media features

GitHub must respect user preference media features by default. These include: prefers-color-scheme, prefers-contrast, prefers-reduced-motion, forced-colors, and inverted-colors. Providing a way to override these options within User settings is also recommended.

Browser default font size support

Users may set their operating system or browsers to use larger or smaller fonts. GitHub should respect these preferences to enable people with low vision to increase the size of text on the page. Primer design tokens are designed to support rem units, which are relative to the browser's default font size. Use Primer-provided design tokens to ensure consistency across the system.

Device compatibility and performance

GitHub cannot discriminate against devices and connection speeds. Experiences need to be fast and performant, even on low-powered devices and slow connections.

Give your agent this brain