Responsive UI

A display that can be adapted to any device creates a positive user experience that is consistent across all systems. It makes Audi applications and websites accessible to as many users as possible. The principles set out here serve as a guide.

Layout System

The Audi layout system guides designers to create unified design solutions and interfaces. With its responsive spacing matrix and clear layout guidelines, the Audi Layout System supports designs that work across all breakpoints and devices, as well as ensure consistency in the communication of the brand identity. The detailed documentation with examples is integrated in the Audi React Library and in the Audi Sketch Kit, which enables designers to work directly with it. The following terminology describes the layout system:

Content area

The content area is defined by the size of the page margin, which separates it from the left and right side of the page.

Layout region

Most components are placed inside a layout region, which usually stretches to the full width of the content area.

Spacing system

Elements can be placed inside a layout region by using the spacing system to define distances between them.

In order to keep the layouts consistent, predefined page margins are recommended for the various breakpoints. The maximum content width is 1920 px.

Breakpoints	Page Margin
XS 320 - 374	16 px
S 375 - 767	28 px
M 768 - 1023	40 px
L 1024 - 1339	60 px
XL 1440 -1919	96 px
XXL 1920	96 px

Spacing helps page components breathe and gives clarity and visual rhytmn to the content. The spacing system utilises a system of responsive spacers that are dynamic across different breakpoints. This allows the information on the page to adapt to any screen size.

Performance

Audi websites are accessed all over the world using varying devices. In order to create pages that are quickly accessible for everyone, it is necessary to allow for poor devices and their internet access.

The question that must always be asked is whether the website is impressive on an older smartphone with a poor internet connection and high data costs.

Large cover images can be formatted for high performance using CSS Media Queries.

Integration of images in the viewport by means of JavaScript adversely affects performance.

Content and Functions

Content and functions are offered in equal measure on all devices and are optimised for display and use in differing resolutions.

No functions are omitted on mobile end devices: after all, resolution cannot be the only factor in deciding what the user wants.

If a piece of information or function seems superfluous on a small screen, it is worth asking whether it is needed in the first place.

The only exceptions here are devices with very limited facilities such as smart watches and of course native mobile applications.

Content and functions are shown in different ways on large and small screens but are always available to the user.

Content and functions should not be added or removed based on screen size.

Device-Independence

In developing new components or websites, interaction elements are created for every possible device. This means: all applications can be operated easily by mouse, keyboard or touch input. Only this is future-proof and truly responsive.

More and more end devices support entry by touch. For this reason, all UI elements must be optimised for touch, no matter what the resolution.

Small elements and narrow spacing hinder easy operation on touch devices.

Element Queries

Adaptations are made to every element, module or layout as required so as to ensure optimum display in all resolutions. No global breakpoints are applied based on the screen sizes of certain devices.

This ensures independence from current resolutions, simplifies maintenance of the components and means that the design is the deciding factor when it comes to optimum display.

Changes to display and functioning are determined separately for each component.

The application of global breakpoints on the entire site prevents optimum display of elements on certain screen sizes.

Parameters

Responsive design offers more possibilities than simply adaptation to horizontal breakpoints. All information and parameters relating to a screen are to be incorporated in the design: width, height, aspect ratio and device orientation.

If stage design is scaled proportionally, it makes sense to scale the aspect ratio of the stage based on the aspect ratio of the viewport.

If the height or aspect ratio of the viewport are not taken into account, information might be more difficult to find.

Flexibility

Videos or images are adapted to the layout depending on viewport size. In order to display content responsively, it must be prepared in such a way that the size can easily be changed and there is sufficient space available to trim the size of the visual material.

For example, images on large viewports have to be trimmed differently from images on small viewports; in the same way, background images adapt dynamically to the viewport ratio and look different on big viewports as compared to small ones.