Overview
"Responsive web design" aims to design websites in such a way that they adapt dynamically to each particular output medium  (desktop, tablet, smartphone) and are easy to use on any device.

The S10 framework offers suitable means for this, which are usually sufficient. Additional techniques, for example one's own CSS stylesheet with "Media Query" or "Grid Design", can be combined with the S10 Framework if required.

Example
The same list looks as follows on different devices:

Desktop

Smartphone landscape format

 
Smartphone portrait

In this example we can see the main ideas:

• Fluid Layout
  In the filter area of the table (selection of customer, period...), the individual elements occupy the available space without a fixed line-by-line division being defined. The size of the elements remains fixed.
  
  
• Dynamic column selection
  Only in desktop format are the customer name and the order type displayed. In smartphone portrait format, the currency and the customer reference are also omitted.  
   
  
• Dynamic column widths
  The column "Net value" is slightly wider on the desktop than on the smartphone.
  

 1. Fluid Layout
Create the individual blocks as <div> element of the CSS class "infoblock", e.g.

 <div class="infoblock">
   <label class='label output' name='matnr'></label><br />
   <input class="input valuehelp range" name="matnr_range" style="width:150px" />
 </div>

This defines a fixed block of label and input field:



The entire area contains a number of such "infoblock" elements, which are listed one after another without line feeds:

<div>
  <div class="infoblock"> ... </div>
  <div class="infoblock"> ... </div>
  <div class="infoblock"> ... </div>
</div>

The entire available area is filled with the info blocks when they are displayed, and the division adjusts automatically depending on the format:


Smartphone landscape



Smartphone portrait


For each block you can optionally specify its own width and height, e.g.

<div class="infoblock" style="width:160px; height: 50px;">

Different heights of the infoblocks within an area should be avoided, because otherwise the layout looks very unstable.

In addition to class="infoblock", the S10 standard also includes the predefined similar classes "infoblock2" and "infoblocktext", which can also be used together within an area.

class="infoblock"
Mostly sufficient for one input field

class="infoblock2"
About twice as wide, for especially long input fields

class="infoblocktext"
Suitable for output of smaller continuous text. Width like infoblock2, but variable height.

If you want to completely suppress individual info blocks depending on the device format, you can additionally specify one of the following classes:

"portrait"
The output width of the device, or window width if desktop, is below 620px.

"landscape"
The output width of the device, or window width if desktop, is over 620px.

"desktop"
The output width of the device, or window width if desktop, is over 1200px.

"noDesktop"
The output width of the device, or window width if desktop, is below 1200px. 

Example:

<div class="infoblock landscape">
  <label class='label'>Order reason</label><br />
  <span class="output" name="augru@text"></span>
</div>

Tip
To test the display, you can choose from a range of device sizes, for example, in the Chrome browser, F12 developer mode.

 
2. Dynamic column selection
To do this, add one of the classes "landscape" or "desktop" when defining the columns, if the column is to be displayed only in that format.

Please note: Add the class to both the column heading and the column itself, otherwise the headings will shift in relation to the table columns.

Example:

<div class='colhead output desktop' style='width: 120px' name="auart@text"></div>
...

<div class='outputcelldiv desktop' style='width: 120px;' name="auart@text"></div>

This causes the column with the text for the order type to be displayed only in "desktop" format.

3. Dynamic column widths
To do this, use the following specifications, again for both the column heading and the table column

--portrait-width
--landscape-width
--desktop-width

These dynamically override the indication width. For example, if the user turns their device from "portrait" to "landscape", some columns can be displayed wider.

In addition to an absolute width, you can also specify percentage widths here as well as calculation expressions with the CSS function calc(). If, for example, in the "landscape" case you have defined some columns with a fixed width of the total width 420px and want to give another column all the space still available, this can be done with

--landscape-width: calc(100% - 420px);

If you want to divide all the remaining space equally between two more columns, it would be

 <div … style='--landscape-width: calc(50% - 210px);'></div>
 <div … style='--landscape-width: calc(50% - 210px);'></div>

A suitable design of the column widths is somewhat tricky even with these tools. The following procedure has proven successful:

A Start with the same column width
Define all columns with the same width, e.g. width: 100px; so that you can test the application and the correct values appear in the table. The next steps are much easier with realistic test data.

B Select the optimal design for the desktop
Now define an optimal desktop layout with width. If you decide to use percentage values for some columns, it is usually a good idea to add a maximum width here with max-width: so that the table columns are not pulled apart unnecessarily when the window is very wide.

C  The "landscape" case
Next, define the "landscape case". The first decision should be which columns you want to omit completely, for example, a text on the order type. If you provide a detail view for each table row, such additional information can be placed in the detail view so that it is accessible to the user with one click even in the smaller formats. Give these columns the additional class  desktop so that they only appear there.

Next, go through the columns where a fixed width makes sense. For example, for material numbers and customer numbers it makes little sense to display only the first 6 digits, whereas a location can usually be inferred from the first 15 letters, even if there are locations with many letters.

Now define a sensible width for the remaining columns with-landscape-width so that you arrive at the desired total width. Test the whole thing, e.g. in Chrome with F12. On the desktop, you can also drag the window width smaller and observe which columns are omitted or become narrower.

In the case of text columns, perhaps define a percentage distribution of the width still available.

D The "portrait" case
We must now carry out procedure C for the "portrait" format. The considerations are almost the same. You now enter the class landscape to suppress columns and set the column width with -portrait-width. Now almost every pixel matters here. If you know that all users' devices have a certain width in portrait mode, you can observe this limit. Otherwise, the question is which older devices with smaller widths should be supported. On the web, a search with e.g. "smartphone display size" will find the screen dimensions of common devices.

In contrast to the landscape mode, the decision to do without some columns is made easier by the fact that the user only has to rotate the device to display more columns.
  

Components: S10 Framework