{"id":30054,"date":"2024-11-12T12:39:38","date_gmt":"2024-11-12T12:39:38","guid":{"rendered":"https:\/\/www.seobility.net\/en\/blog\/wiki\/responsive-web-design\/"},"modified":"2025-02-26T09:23:37","modified_gmt":"2025-02-26T09:23:37","slug":"Responsive_Web_Design","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/en\/wiki\/Responsive_Web_Design","title":{"rendered":"Responsive Web Design"},"content":{"rendered":"

What is responsive web design?<\/span><\/h2>\n
\n
\"responsive<\/a> <\/p>\n
Figure:<\/b> Responsive web design – Author: Seobility – License: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Responsive web design is a creative and technical paradigm for creating web apps and websites. The same HTML code is sent to all devices, but all elements of the website, such as textual and audio-visual content, automatically adapt to the size and width of the display used. When using responsive web design, large images, which can easily be displayed on a 27-inch monitor, may not be displayed on a smartphone because they would take up too much space and the page would be of no value to users. This is important because smartphone users primarily visit a website to retrieve information (e.g. opening hours, addresses, etc.). Mobile websites should, therefore, make it easy for users to find the information they need quickly and not be distracted by too many graphic elements.\n<\/p>\n

Responsive web design is based on a complex interaction of different technologies. The use of modern web standards such as HTML, CSS (especially media queries<\/a>) and JavaScript<\/a> enables developing websites that automatically adapt to the respective device. The main advantage of responsive web design is that content on a website no longer has to be optimized for each possible device separately. In addition, a responsive website offers a much better user experience and usability<\/a> than traditional mobile websites.\n<\/p>\n

Why is responsive web design so important today?<\/span><\/h2>\n

The number of mobile devices is constantly increasing and so is the number of internet users surfing the web via such devices. Before responsive web design became popular, there were often two versions of a website, one for desktop and one for mobile devices. However, with the launch of the Apple iPad, a new screen size was introduced to the market and it quickly became clear that this concept had no future in the long run. To avoid that a new website has to be created for each new device type, responsive web design was developed. Responsive web design made it possible to offer the best user experience on different devices with only one website.\n<\/p>\n

How it works<\/span><\/h2>\n

A page equipped with responsive web design takes into account the individual requirements of different devices. Websites are adapted in such a way that they are displayed to every user as clear and easy to use as possible.\n<\/p>\n

Important criteria for the adapted display are the size and resolution of the device as well as available input methods.\n<\/p>\n

In particular, HTML block elements must be treated differently in responsive web design. If the design grid occupies several columns, the block elements can be individually adapted to the width of the respective viewport<\/a>. In the context of web design, a viewport defines the area of a page that is visible on mobile devices. If it is no longer possible to display block elements next to each other at lower resolutions, they are simply moved one below the other or positioned individually (see figure below).\n<\/p>\n

Images are scaled to the size of their surrounding elements, textures for backgrounds can be omitted, and logos can be reduced in size like images or replaced by smaller versions. Horizontal navigation<\/a> bars, which are often used for desktop display, can be redesigned as a vertical list and only be unfolded after being clicked.\n<\/p>\n

Technical implementation<\/span><\/h2>\n

The three essential prerequisites for the technical implementation of responsive web design are:\n<\/p>\n