Responsive Web Design: What Is RWD?

Responsive web design (RWD) is a web-building method that automatically adjusts content (such as typography, 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. 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. 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. 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. 4. Grid layout: Within CSS, you can create flexible grids that use portions of the available space instead of percentages to control dimensions.
5. 5. JavaScript: You can use JavaScript (another scripting computer language) on older devices or browsers that don’t support CSS3 media queries.
6. 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. 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. 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 and let David Carson be your personal tutor. The prolific and decorated designer—who’s been lauded as the “art director 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.