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.

General guidelines

  • Dive deep into the use cases and concept of your interface before you build wireframes.

  • Consider the user context or scenario for using your service (for example: in a hurry, small browser windows to large displays) and prioritize your design decisions accordingly (for example: mobile first).

  • Don't reduce functionality or remove content for smaller viewports. Users should be able to access the same content regardless of the browser window they are using.

  • Incorporate responsive design early in your design process. Design a uniform and seamless user experience across breakpoints, and don't design for specific devices or screen sizes.

  • Don't rely on a fixed position of elements in your layouts. The more fluid your design is, the better the responsiveness of your interface.

System tools

We’ve built a design sticker sheet where you will find all the design system components, and demos based on different breakpoints.

Use the Grid component to build consistent, balanced, and responsive layouts across your AWS service.

Check out our demo pages to see how layouts work across breakpoints.

All our components are responsive, but it is up to you to build the layout where they will live.

Sources

Responsive design sources