Responsive UI
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.
<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>


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.


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.




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.




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.

