Responsive Design: Key Considerations for Product Requirements

By:
Read tme:
Web Design
,
Product Management
,

In the words of Andy Clarke, "Web design is responsive design. Responsive web design is web design, done right." As a product manager, it is essential to understand the significance of responsive design in web development. By comprehending the different types of layouts involved in web design, such as static, adaptive, and liquid, product managers can make informed decisions and create better products that cater to users' needs across various devices.

Static design

Static design is the oldest type of web design, where pixels are used to create fixed width layouts that do not respond to a user's screen or browser width. We don't want an entire website to be static, but static elements are important when the stability of an elements size matters. For example, the width of this articles title is static to ensure it's position relative to the color cards behind it.

GIF of a static website being re-sized
Static Layout - responsive-grid.webflow.io

Adaptive design

Adaptive design is often confused with responsive design. It is concerned with the most commonly used screens and devices, and designers create several static layouts and combine them with CSS media-queries to accommodate them.

GIF of an adaptive website being re-sized
Adaptive Layout - responsive-grid.webflow.io/adaptive

Liquid design

Liquid design, in contrast, is not concerned with the device being used and uses relative units like percentages to maintain a layout, regardless of the screen type. However, as screens become narrower, these types of layouts can become awkward.

GIF of a liquid website being re-sized
Liquid Layout - responsive-grid.webflow.io/liquid

Responsive Design

Responsive design combines adaptive and liquid design. Media queries are used to target specific device sets, such as monitors, tablets, and phones, and relative units are used to ensure smooth transitions between devices and media queries.

GIF of a responsive website being resized
Responsive Layout - responsive-grid.webflow.io/responsive

Is that everything you need to know?

Of course this is a introductory look at responsive design, but it's an essential starting point for any Product Manager or Software Tester aiming to make informed decisions and create better products. By incorporating responsive design as a product requirement, it tells your developer that  the website being accessible and user-friendly on different screen sizes and types is important.