Differential D15016 Diff 40963 source/introduction/responsive.rst

Changeset View

Standalone View

View Options

source/introduction/responsive.rst

  • This file was added.
1​Responsiveness
2​==============
3​
4​Introduction
5​------------
6​
7​Responsiveness means that the user interface adjusts to changes in screen or
8​window size. While Plasma and especially Kirigami are highly responsive, this is
ngrahamUnsubmitted
Done

means, that -> means that

ngraham: means, that -> means that
9​not a replacement for :doc:`optimized convegence <convergence>`. It is not
10​supposed to be used as a replacement for different UI and UX for different
ngrahamUnsubmitted
Done

is not -> It is not

ngraham: is not -> It is not
11​​interaction methods (mouse, touch, pointer, remote, ...) or different ​form
12​factors like mobiles and televisions. Instead, it means to adapt to different
13​screen sizes in the same form factor class, like different window
14​sizes and screen resolutions in ​desktops and laptops.
ngrahamUnsubmitted
Done

Maybe also add a section about adjusting to the window size, like Discover does. Something like:

different resolutions in desktops and laptops. -> different window sizes and screen resolutions.

ngraham: Maybe also add a section about adjusting to the window size, like Discover does. Something like…
15​
16​.. raw:: html
colomarUnsubmitted
Done

This sentence is quite long.
Suggestion for splitting it:

Responsiveness ​is not supposed to be used as a replacement for different UI and UX for different ​interaction methods (mouse, touch, pointer, remote, ...) or different ​form factors like mobiles and televisions. Instead, it means to adapt to different screen sizes in the same form factor class, like different resolutions in ​desktops and laptops.

colomar: This sentence is quite long. Suggestion for splitting it: Responsiveness ​is not supposed to…
17​
18​ <video src="https://cdn.kde.org/hig/video/20180620-1/CardLayout1.webm"
19​ loop="true" playsinline="true" width="536" controls="true"
20​ onended="this.play()" class="border"></video>
21​
22​Examples of responsive behavior:
ngrahamUnsubmitted
Done

for -> of

ngraham: for -> of
23​
24​* Components can display more or less content, depending on the available
25​ space.
26​* Margins between elements can shrink and grow
27​* Multi-column navigation layouts, grids and grid-like layouts can change the
28​ number of displayed columns
ngrahamUnsubmitted
Done

Another possible item:

  • Multi-column navigation layouts can show more or fewer columns at once
ngraham: Another possible item: * Multi-column navigation layouts can show more or fewer columns at once
29​* Images can resize
colomarUnsubmitted
Done

grid like -> grid-like

colomar: grid like -> grid-like
30​
31​Although elements can resize vertically, horizontal or in both directions, it
32​is recommended that row-like elements, elements such as menu bars only
colomarUnsubmitted
Done

directions

colomar: directions
ngrahamUnsubmitted
Done

elements, like a menu bar, only -> elements such as menu bars only

ngraham: elements, like a menu bar, only -> elements such as menu bars only
ngrahamUnsubmitted
Not Done

elements, elements -> elements

ngraham: elements, elements -> elements
33​shrink or grow horizontally.
colomarUnsubmitted
Done

row-like

colomar: row-like
34​
35​.. raw:: html
36​
37​ <video src="https://cdn.kde.org/hig/video/20180620-1/Responsive1.webm"
38​ loop="true" playsinline="true" width="536" controls="true"
39​ onended="this.play()" class="border"></video>
40​
41​Action bar shrinking only in the horizontal direction.
ngrahamUnsubmitted
Done

shrinking horizontally only -> only in the horizontal direction

ngraham: shrinking horizontally only -> only in the horizontal direction
42​
colomarUnsubmitted
Done

horizontally

colomar: horizontally
43​Keep in mind that not all controls or parts of a layout can and should be
ngrahamUnsubmitted
Done

mind, that -> mind that

ngraham: mind, that -> mind that
44​responsive. Often it is more important to retain the size for usability,
45​familiarity and alignment and aim for :doc:`optimized convergence
46​<convergence>`
47​by selecting different
48​:doc:`navigation <../patterns/navigation/index>`,
49​:doc:`command </patterns/command/index>` and
50​:doc:`content </patterns/content/index>` patterns for different formfactors.
51​
52​It is recommended to test your user interface against the most common
53​screen sizes of the targeted form factor.
54​
55​