Seamlessly scalable display for all devices
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.
We are experts in Responsive UI
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.
Building blocks of a responsive UI
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.
A few responsive UI tips
Use a component-based approach everywhere
Require all viewport states to be presented in UI design specs
Define media breakpoints unambiguously
Rely on the viewport, not the platform
Decide on a responsive grid system
Get rid of table layouts
Test the product with both emulators and real devices
