Responsive UI

Modern Internet devices come in all shapes and sizes. The websites are expected to look good on all those devices, with a display that rescales effortlessly and in real-time. Responsive UI should be capable of providing clean, modern websites with a minimum of effort.

Our clients require their applications to perform equally well on all types of screens, from TV-sized monitors to smartphones. Grid Dynamics UI teams have developed new, responsive adaptive sites for three of the eight largest retailers in the US. We have the experience and expertise to design and produce to our client's specifications and expectations.

A fluid grid

The fluid grid requires all sizing elements in the web be specified in units relative to the display size, like percentages. Absolute units, like pixels, are not used since they cannot be resized as the display size varies.

Flexible media

Flexible media means video and images must be sized in relative units and aspect ratio must be preserved. The media must remain inside its containing element, fill as much white space as possible, and generally look natural.

CSS media queries

CSS media queries can be used to apply different CSS style rules to different devices. This can be used to adapt the layout of a large horizontal screen (such as a desktop) different from a small, vertical screen (such as a phone).

Responsive layouts

Layout must automatically adjust and adapt to any device screen size fluidly in real time. For example, as the browser window is resized, the website image must continuously render itself as the window is being resized.

Use a component-based approach everywhere

Component-based architecture breaks client-side code into small segments that implement individual features, isolated from each other.

Require all viewport states to be presented in UI design specs

Every responsive team has a list of responsive states for the viewport. All of them must exist as a UI design spec at all stages of development.

Define media breakpoints unambiguously

Define breakpoints which eliminates style intersections at exactly 480, 768, and 1024 that could cause errors. For example, 479, 767 and 1023.

Rely on the viewport, not the platform

Responsive styles are related to the viewport and should not depend on a browser or platform. Users should be able to see the styles that they expect to see on the mobile phone by resizing a browser window on the desktop.

Decide on a responsive grid system

In responsive development, you have to use some kind of a grid system. It may be an existing grid system such as Bootstrap or Skeleton, or it may be one you construct based on the styles you create.

Get rid of table layouts

A -based layout is not suited for use in responsive applications. Create a whole new responsive markup. Create a whole new responsive layout with Flexbox, CSS Grid, or similar.

Test the product with both emulators and real devices

Emulators have limitations with respect to testing responsive UI. Test on real devices at least at the final stage to avoid facing such issues.

Fix visual differences between the same components

As components are resized, some anomalies may "pop" in visual details These little inconsistencies destroy the user experience. Be prepared for some manual "tweaks."