UI - Responsive Design

1 - 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.

3 - 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).

4 - Tools

4.1 - 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.

4.2 - Cross-device testing

5 - Documentation / Reference

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap