Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Foundation


  • Visual foundation

    • Colors
    • Content density
    • Data visualization colors
    • Design tokens
    • Iconography
    • Layout
    • Motion
    • Spacing
    • Theming
    • Typography
    • Visual context
    • Visual modes
    • Visual style

  • Core principles

    • Accessibility
    • Responsive design
  1. Cloudscape Design System
    • Foundation
    • Core principles: Responsive design

    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.

      On this page

      • Introduction and goal
      • Responsive design in the system
      • General guidelines
      • System tools
      • Sources

      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

      Design resources

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

      Grid

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

      Demos

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

      Responsive elements

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

      Sources

      Responsive design sources

      • Responsive Web Design (RWD) and User Experience , by Amy Schade

      • Responsive Web Design , by Ethan Marcotte

      • Fluid Grids , by Ethan Marcotte

      • About
      • Connect
      • Privacy 
      • Site terms 
      • © 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.
      Made with love atAWS