Responsive web design
Depending on which device you use to open the redesigned TU Dortmund University website published in December 2018, the individual pages will look different. This is thanks to the so-called "responsive design", which was taken into account when designing and creating the site.
This means that clear differences can be seen, especially on different device types such as desktop PCs, laptops, smartphones and tablets. However, a page can be displayed differently on different monitors.
As we often receive questions about the different presentations, we have summarized the most common ones for you.
Responsive web design (also known as responsive web design or RWD for short) is a design and technical paradigm for creating websites so that they can react to the characteristics of the end device used, especially smartphones and tablet computers.
Source: Wikipedia
With the increasing technologization of Germany, the number of end devices available to users increased and with it the number of different display sizes on which websites ultimately had to be able to be displayed.
Websites "suddenly" not only had to be displayed well in the usual monitor resolutions, but also take into account the needs of mobile users on smartphones, tablets and other end devices. Initially, this often led to problems, as the desktop version was often displayed 1:1 and only scaled down on smaller devices.
Buttons became almost unusable and the website could not be used without zooming or scrolling horizontally. Operation became a pain.
To counteract this, the so-called "responsive design" or "adaptive design" was developed.
The website "recognizes" whether you are accessing the page from a smartphone, tablet, desktop PC or other end device and "recognizes" the available width of your device. The area available to display the website on your device is called the "viewport".
The arrangement of the elements for different viewports is already stored in the HTML structure during the basic creation of the website. The browser now only has to recognize the viewport of your device and can display the content as it is intended in the structure. Important content can thus be brought into focus.
For example, on a desktop monitor three elements are displayed in a row, on a tablet only two elements are displayed in a row and on a smartphone all elements are displayed one below the other.
According to statistics from ARD and ZDF, the proportion of daily mobile internet users amounted to 37% in 2019. If you look at the past few years, you can see a strong upward trend. In order to make the content of www.tu-dortmund.de available to these users in the best possible way, the former design was modernized not only with regard to current design trends, but also with regard to mobile devices.
The importance of responsive designs with regard to search engine friendliness should also not be neglected. Websites that offer a mobile version or a responsive design are ranked better by search engines on mobile devices than desktop-only solutions.
Of course, you can get a quick overview of the appearance of the page on different widths by changing the size of the browser window.
However, it should be noted that not all cases are covered here. The actual behavior of some elements may differ, especially as it is difficult to test specific display widths in this way.
We therefore recommend that you use the "Display" function built into Typo3. You can find out how to use this on the left.
If this function is temporarily unavailable, you can use the "Test screen sizes" function integrated in Chrome or Firefox.