Table of Contents

About

Responsive UI design means designing an application by keeping in mind that he'll be used on a range of device screen with different sizes.

Responsive layouts in material design adapt to any possible screen size.

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

Behavior Container

The whole UI component are contained in a container that may have two behavior:

  • fixed-width container (meaning its max-width changes at each breakpoint
  • or fluid-width (meaning it’s 100% wide all the time).

Tools

Screen resolution

  • Web: Emmet Re:view is a tool for testing responsive design. It displays your current web-page in a series of views so you can see how your design behaves on different screen resolutions. All views are syncronized: you can scroll, click, fill-in forms in one view and get instant feedback in all others.

Cross-device testing

Documentation / Reference