fakoo.de/en
Alphabets of disabled people

The screen width

The most important parameter for responsive web design is the screen width.

The term responsive web design means that the design of the website automatically adapts to the screen of the device used.

Individual elements of the page are either moved, displayed smaller or hidden completely when the size of the screen changes.

This ensures that the website can be used optimally regardless of the end device used, i.e. desktop computer, tablet or smartphone.

Determining the screen widths

There are basically two ways to react to the screen width. The obvious possibility is using Javascript to determine the width and to influence the elements of the website using certain functions. However, using Javascript to make page design changes has very significant disadvantages:

  • there are several specifications for screen widths, depending on whether browser elements are included or not
  • adjustments to the website can only be made after loading
  • the reaction to changes is delayed
  • if the user switches off Javascript or uses a browser without Javascript, the website remains in the original design
  • there must always be a permanent query of the screen dimensions in the background in order to be able to react

The second and absolutely more elegant option is to already define all adjustments in the CSS-instructions, i.e. to define different designs for different widths. This has decisive advantages:

  • all representations dependent on the width are stored in the browser memory before they are displayed by the browser
  • switching occurs without delay when the width of the browser window changes
  • with cleanly programmed CSS, the website always appears optimally on the respective device and also adapts to screen changes (rotation of the smartphone or similar) abruptly
  • Javascript is not required for the layout/design


Current screen widths

Here is a comparison of the different screen widths.

reported by browser via viewport:
CSS width

determined using Javascript:
Script width

Conclusion:
Any discrepancies that occur result, among other things, from the scroll bars. However, the CSS variant has a clear advantage over the Javascript variant for a functioning responsive web design.