What Is Responsive Web Design?

Date First Published: 12th July 2022

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty Level: 5/10

Learn more about what responsive web design is in this article.

Responsive web design is a technique that automatically adapts webpages to the visitor’s screen size and width without user interaction. Responsive web design ensures that all the content of webpages display properly on any device with a single design, including mobile devices, tablets, and computers. The aim of responsive web design is to ensure that website visitors have the same user experience, regardless of which device they use to browse the website.

With responsive web design, it is unnecessary for web developers to develop specific display sizes for smaller devices. Instead, their responsive code is designed to automatically adapt to a wide range of devices.

Non-Responsive Web Design

Non-responsive web design is the opposite of responsive web design. A non-responsive web design will use a fixed page layout of around 1000 px that displays well on desktop computers, but has unreadable content that is too large to fit within the viewport display width of a smartphone.

Search engines, such as Google penalise websites with a non-responsive web design. The number of visitors using mobile devices to browse the web is constantly increasing, so it is important that websites are mobile-friendly and responsive. In 2015, Google announced that mobile responsiveness will become one of the factors in determining search engine rankings and that they will boost the page ranking of mobile-friendly websites.

How Is Responsive Web Design Implemented?

Responsive web design is implemented in the code of HTML pages. The HTML property below automatically resizes the webpage to the size of the device being used to view it:

Responsive web design can be implemented in CSS by adding properties that load different styles when the screen is below or above a certain width. For example, the CSS element ‘column’ below changes when it detects that the screen size is less than 600 px in width.

For images, they can be made flexible and responsive by not having a fixed width, such as:

Instead, a percentage can be specified for the width, meaning that the width of the image will automatically resize to the width of the screen, such as:

In these images below, see how the design of this article is responsive and automatically adjusts the webpage to the visitor's screen size and width without user interaction.

History

Originally, desktop computers were the only way to browse the World Wide Web. At that time, the design of websites were simple and used fixed page layouts of around 1000 px. Regardless of the screen size, the page height and width would stay exactly the same, causing issues when viewing webpages on mobile devices, such as the text being too small, the content being wider than the screen, and the clickable elements being too close together.

Web developers began to create specific versions of websites for mobile devices with a fixed page width of around 320 px. However, the device the visitor is using to browse the website will not always have approximately the same page width as the mobile design, becoming an issue due to different devices with different screen sizes. Web developers had to create a separate subdomain for mobile versions of their websites, such as ‘m.website.com’ with ‘m’ being short for mobile.

Audi.com was the first website that had a responsive layout that adapted to browser viewport width. It was launched in late 2001.

Glenn Davis introduced a method called liquid layouts. Liquid layouts meant that content of websites were displayed based on a percentage and could be adjusted based on screen resolution and size.

Ethan Marcotte invented the term ‘responsive web design’. In a 2010 article called A List Apart, he described the use of three techniques called fluid grid, flexible images, and media queries. The practice of responsive web design was described in his book called Responsive Web Design, written in 2011.