UI - Responsive Design

Card Puncher Data Processing


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


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

Discover More
Android Tablet Handset Design
Android - Responsive Design (Multiple screens)

Responsive UI in Android. See also: See A modular fragment allows you to change your fragment combinations for different screen sizes. ...
Application - Web Design

Css Flex Align Content
CSS - Flex Box

flex is a layout model that lays out object in a single axis focused on space distribution and content alignment. flex means: flexible layout as flexible size Flex layout is superficially similar...
CSS - Responsive (Breakpoint)

responsiveness in CSS An element that defined the width: as percentage or fix with a max-width property in percentage generally equal or below 100% Example: Bootstrap use media queries to create...
CSS - Responsive typography

Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries See also: ...
Data System Architecture
Image/Aspect Ratio (width/heigth)

Aspect Ratio is the ratio between the width and the height of an image and has several impacts.
Grid Row Container Column
UI - Grid

A Grid is a layout and an element of responsive design 12 columns are just enough for all needed customization Classes of the following box within a 12 columns grid are: Top Red Box: row...
On Off Automaton
UI - Toggle or Collapse (Display or hide elements) (On/Off)

Display or hide UI components. “”|“”O |OSPAimes/status/907487309142126592Twitter Generally toggle activity, when using a responsive design appears to what is called breakpoints: Display...
Android Screen Buckets
UI Responsive Design - Breakpoint

layouts are responsive (ie change) at what is called breakpoint. Use line measures as a factor for picking breakpoint. where: viewport example (ie the size of the display device) Ipad: 768...
Area Graph Sunspot 1700 2003
Viz - Graph Aspect Ratio

The aspect ratio of a graph between the height and width of the axis. rate of change0963488414The Elements of Graphing Data (1994) Viewers can best understand changes in the slope of the line when...

Share this page:
Follow us:
Task Runner