Responsive design
Responsive web design responds to the needs of the users, and the devices they're using. It also ensures that what you’re building looks good and functions properly, regardless of use case.
Did this page help you?
Introduction and goal
What does responsive design do?
Responsive design makes your web page look good on all devices (desktops, tablets, and phones). It relies on resizing, hiding, shrinking, enlarging, or moving the content to make it look good on any screen.
Why is responsive design important?
Multiple statistics show that mobile internet usage has increased rapidly in recent years. Mobile devices are used increasingly for productivity, and users expect the same universal feature support independent of the device.
Responsive design in the system
Along with the proliferation of mobile devices is an increasing variety of screen sizes. Mobile phone screen size can be larger than a small tablet, and computer monitors rival the size of TVs. The device itself is no longer a clear indication of the size of the display, which is why device size can’t be the sole criteria used when designing interfaces.
Don’t build your designs for specific screen sizes, devices, or resolutions; instead, build for responsive, fluid content in a browser.
Responsive assessment
When you test your content by resizing the browser window, consider the following:
Does the content look good on all sizes?
Are there some sizes where the content wraps in an unexpected way? If so, consider adjusting your content to the breakpoint.
Are lines longer than the maximum readable length (70-80 characters per line)? If so, consider changing the layout.
Is there too much white space between elements? If so, consider adding a maximum width.