Responsive web design (RWD) is a web-building method that automatically adjusts content (such as [typography](https://www.masterclass.com/articles/how-to-pick-the-best-type-for-writing), images, screen resolution, and column layout) to fit different screen sizes of various devices without resolution loss. 

Initially described in Ethan Marcotte’s 2010 article “A List Apart,” responsive web design uses Cascading Style Sheets (CSS) and HTML to adjust settings like viewport and media queries so a website looks good no matter what device you use.
The sheer volume of new devices available in the modern world puts enormous pressure on web developers to optimize website usability across various technologies through responsive layouts. Building responsive sites mean you can:

- __Avoid browser window redirects__: Whether on a desktop or a mobile site, RWD applies flexible specifications, removing the need to redirect users to a different desktop or mobile version of a web page.
- __Create one website for all devices__: It takes a lot of time to create different website designs for the smaller screens of mobile users, larger screens of desktop computer users, and mid-size screens of tablet users. RWD provides optimal page load time and functionality on large or small screens.
- __Design the best website experience for each device and platform__: RWD creates universal flexible layouts across multiple brands like Apple iPhones and Androids and browsers like Chrome and Firefox.
Responsive design means developers build one fluid website design using breakpoints (pauses in the software) that adjust to the screen size of the user’s viewport, maintaining usability across different devices through various column layouts and responsive images.

Adaptive design means the developers build separate website designs for the viewport width of each specific device, and as the website loads, the screen generates the template built for that particular phone, tablet, or computer. The width properties usually cover six common screen widths from 320px (pixels) to 1600px.
Responsive websites usually include one or some of the following features:

1. __CSS and HTML__: All responsive website designs use cascading style sheets (CSS) and HTML, computer languages that create all the elements of a webpage. Use a stylesheet file or CSS3 code (the type of CSS code used for formatting web pages) in the style section of an HTML document to manipulate or control the design. For example, use the min-width and max-width properties to maintain the minimum and maximum screen width of content included on a style sheet.
2. __Flexbox layout__: Developers use a CSS module called a flexbox to build an ultra-dynamic design beyond what you can create within HTML.
3. __Fluid layout__: Fluid grid layouts allow for changeable values, such as the percentage of the viewport width, to account for various screen size possibilities.
4. __Grid layout__: Within CSS, you can create flexible grids that use portions of the available space instead of percentages to control dimensions.
5. __JavaScript__: You can use JavaScript (another scripting computer language) on older devices or browsers that don’t support CSS3 media queries.
6. __Media queries__: A media query functions within CSS3, allowing you to manipulate web content to adjust to different screen sizes and browser window widths.
7. __Responsive images__: Responsive images, also known as flexible images, use a dynamic value within HTML (attributed to img tags) to control image proportions, preventing them from displaying outside the constraints of your device’s screen. 
8. __Viewport meta tag__: Viewport meta tags at the top of each document control how the page displays. The viewport setting width=device-width instructs the browser to match the screen’s width to pixels, providing the same resolution no matter what size screen.
Get a [MasterClass Annual Membership](https://www.masterclass.com) and let David Carson be your personal tutor. The prolific and decorated designer—who’s been lauded as the “<a href='https://masterclass.com/articles/film-101-how-to-become-an-art-director' target='_blank' class='mc-text--link' data-mc-segment-trigger='true' data-mc-segment-event-type='Article Page Click' data-event-obj='{"textTag":"p","href":"https://masterclass.com/articles/film-101-how-to-become-an-art-director","linkCopy":"art director","category":"automated-link"}' automatic='true'>art director</a> of the era”—reveals his processes for going off the (design) grid, implementing typography in new and interesting ways, innovative uses of photography and collage, and so much more.
Your website visitors deserve to see your site at its best, whether they use a large monitor or a small mobile phone. Responsive web design involves building a web page that automatically adjusts to the viewer’s screen size.

Your website visitors deserve to see your site at its best, whether they use a large monitor or a small mobile phone. Responsive web design involves building a web page that automatically adjusts to the viewer’s screen size.

Responsive Web Design: What Is RWD?

Responsive web design (RWD) is a web-building method that automatically adjusts content (such as <a href='https://www.masterclass.com/articles/how-to-pick-the-best-type-for-writing' target='_self' class='mc-text--link' data-mc-segment-trigger='true' data-mc-segment-event-type='Article Page Click' data-event-obj='{"textTag":"p","href":"https://www.masterclass.com/articles/how-to-pick-the-best-type-for-writing","linkCopy":"typography","category":null}'>typography</a>, images, screen resolution, and column layout) to fit different screen sizes of various devices without resolution loss. Initially described in Ethan Marcotte’s 2010 article “A List Apart,” responsive web design uses Cascading Style Sheets (CSS) and HTML to adjust settings like viewport and media queries so a website looks good no matter what device you use.

What Is Responsive Web Design?

The sheer volume of new devices available in the modern world puts enormous pressure on web developers to optimize website usability across various technologies through responsive layouts. Building responsive sites mean you can:<ul class="mc-m-4 list-styled"><li class="">Avoid browser window redirects: Whether on a desktop or a mobile site, RWD applies flexible specifications, removing the need to redirect users to a different desktop or mobile version of a web page. </li><li class="">Create one website for all devices: It takes a lot of time to create different website designs for the smaller screens of mobile users, larger screens of desktop computer users, and mid-size screens of tablet users. RWD provides optimal page load time and functionality on large or small screens. </li><li class="">Design the best website experience for each device and platform: RWD creates universal flexible layouts across multiple brands like Apple iPhones and Androids and browsers like Chrome and Firefox. </li></ul>

Why Is Responsive Web Design Important?

Responsive design means developers build one fluid website design using breakpoints (pauses in the software) that adjust to the screen size of the user’s viewport, maintaining usability across different devices through various column layouts and responsive images.Adaptive design means the developers build separate website designs for the viewport width of each specific device, and as the website loads, the screen generates the template built for that particular phone, tablet, or computer. The width properties usually cover six common screen widths from 320px (pixels) to 1600px.

Responsive Design vs. Adaptive Design: What’s the Difference?

Responsive websites usually include one or some of the following features:<ol class="mc-m-4"><li class="mc-my-4"> 1. CSS and HTML: All responsive website designs use cascading style sheets (CSS) and HTML, computer languages that create all the elements of a webpage. Use a stylesheet file or CSS3 code (the type of CSS code used for formatting web pages) in the style section of an HTML document to manipulate or control the design. For example, use the min-width and max-width properties to maintain the minimum and maximum screen width of content included on a style sheet. </li><li class="mc-my-4"> 2. Flexbox layout: Developers use a CSS module called a flexbox to build an ultra-dynamic design beyond what you can create within HTML. </li><li class="mc-my-4"> 3. Fluid layout: Fluid grid layouts allow for changeable values, such as the percentage of the viewport width, to account for various screen size possibilities. </li><li class="mc-my-4"> 4. Grid layout: Within CSS, you can create flexible grids that use portions of the available space instead of percentages to control dimensions. </li><li class="mc-my-4"> 5. JavaScript: You can use JavaScript (another scripting computer language) on older devices or browsers that don’t support CSS3 media queries. </li><li class="mc-my-4"> 6. Media queries: A media query functions within CSS3, allowing you to manipulate web content to adjust to different screen sizes and browser window widths. </li><li class="mc-my-4"> 7. Responsive images: Responsive images, also known as flexible images, use a dynamic value within HTML (attributed to img tags) to control image proportions, preventing them from displaying outside the constraints of your device’s screen. </li><li class="mc-my-4"> 8. Viewport meta tag: Viewport meta tags at the top of each document control how the page displays. The viewport setting width=device-width instructs the browser to match the screen’s width to pixels, providing the same resolution no matter what size screen. </li></ol>

8 Key Features of Responsive Websites

Get a <a href='https://www.masterclass.com' target='_self' class='mc-text--link' data-mc-segment-trigger='true' data-mc-segment-event-type='Article Page Click' data-event-obj='{"textTag":"p","href":"https://www.masterclass.com","linkCopy":"MasterClass Annual Membership","category":null}'>MasterClass Annual Membership</a> and let David Carson be your personal tutor. The prolific and decorated designer—who’s been lauded as the “<a href='https://masterclass.com/articles/film-101-how-to-become-an-art-director' target='_blank' class='mc-text--link' data-mc-segment-trigger='true' data-mc-segment-event-type='Article Page Click' data-event-obj='{"textTag":"p","href":"https://masterclass.com/articles/film-101-how-to-become-an-art-director","linkCopy":"art director","category":"automated-link"}' automatic='true'>art director</a> of the era”—reveals his processes for going off the (design) grid, implementing typography in new and interesting ways, innovative uses of photography and collage, and so much more.

Want to Learn More About Tapping Into Your Graphic Design Genius?

Your website visitors deserve to see your site at its best, whether they use a large monitor or a small mobile phone. Responsive web design involves building a web page that automatically adjusts to the viewer’s screen size.

Your website visitors deserve to see your site at its best, whether they use a large monitor or a small mobile phone. Responsive web design involves building a web page that automatically adjusts to the viewer’s screen size.
