One of the biggest challenges facing development teams, who are increasingly becoming tasked with the job of targeting their applications to a multitude of different devices, is how to create the best user experience without overburdening their teams with an excessive amount of work, and intimidating costs for future application maintenance. After all, gone are the days when everyone in the office had a seventeen inch screen supporting 1024×768 resolution, and every new hire was given the same RIM device sporting the exact same screen resolution. Now, in the BYOD world (Bring Your Own Device), UI developers have to develop applications that will render properly on a variety of different devices with a variety of different screen sizes.
It has always been a challenge to create websites that render well on a variety of screen resolutions, but the proliferation of tablets and smart-devices of varying sizes has greatly complicated the issue. In October of 2012, for the first time ever, tablets represented the largest percentage of all computer products sold in North America, and that means a flood of unpredictably sized devices, from six inch minis to twelve inch monsters, both of which can render both horizontally and vertically, will be entering the workplace. So how can developers deliver applications that can keep up with this maelstrom of device types and screen resolutions? In many cases, responsive design is the answer.
Responsive designs to the rescue
“You have different breakpoints by which the design changes as it scales down,” says Nate. On the desktop, the page is full featured. “But as you squeeze down a device size, the application might start removing some features or putting other features down at the bottom giving priority to more important pieces of content.”
Developing responsive designs
So how are developer creating responsive designs?
One way to achieve this effect is by using media queries. “Basically, it’s a feature of CSS. You can target different device sizes or different aspects of the device and have CSS properties only apply there, so your design can drastically change depending on device width, the size of the window and other things like that,” says Nate.