Responsive UI
Content
Codesnippets

Responsive UI

Content
Codesnippets

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.

Grid

The flexible and optional grid consists of 12 columns and can be nested. The spacing between the columns is 0.25 rem (one quarter of the basic type size). The maximum width is determined for each project.

The minimum spacing to the left and right-hand edge of the viewport is 4 %. On very large screens, the content is centred.

1
1
1
1
1
1
1
1
1
1
1
1
1
11
2
10
3
9
4
8
5
7
6
6
HTML
<div class="aui-grid grid">
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--1"><i>1</i></div>
 <div class="aui-cell aui-cell--11"><i>11</i></div>
 <div class="aui-cell aui-cell--2"><i>2</i></div>
 <div class="aui-cell aui-cell--10"><i>10</i></div>
 <div class="aui-cell aui-cell--3"><i>3</i></div>
 <div class="aui-cell aui-cell--9"><i>9</i></div>
 <div class="aui-cell aui-cell--4"><i>4</i></div>
 <div class="aui-cell aui-cell--8"><i>8</i></div>
 <div class="aui-cell aui-cell--5"><i>5</i></div>
 <div class="aui-cell aui-cell--7"><i>7</i></div>
 <div class="aui-cell aui-cell--6"><i>6</i></div>
 <div class="aui-cell aui-cell--6"><i>6</i></div>
</div>

The interior spacing of modules from the grid columns is handled in different ways: the spacing between images and tiles is narrow and is the same as the column spacing; the horizontal spacing of text and other elements from tiles and images is significantly larger.

Tile alongside tile with spacing = column spacing
Text to the right of a tile

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.

Visuals with sufficient space around the main motif can be more easily trimmed and changed in size so as to to ensure optimisation for different viewports.
Main motifs covering the entire image area are not suitable to be adapted to the viewport in size and aspect ratio.
Your CI-Support
May we help you?
Contact us