UI - Responsive Design

Card Puncher Data Processing

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





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

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



Share this page:
Follow us:
Task Runner