In the new age of smart televisions, tablets, phablets and smartphones web sites are served to more devices and form factors than ever before. Apart from the massive differences in screen sizes, devices may differ in orientation, resoloution, DPI and more. Diverse nature aside users are ever increasingly using these devices to browse the internet.

The Why.

A 2012 Google study on “Navigating the new multi-screen world: Insights show how consumers use different devices together” revealed ( as shown in Fig.0 ) that the majority of people use multiple devices to surf web pages, shop online, plan trips, and manage their finances.

Fig.0 Source: Google

As of April 2015 Google rolled out an update that aims to boost the rankings of mobile ready responsive web sites. Mindful of such consumers’ behaviors and mobile-friendly-favored search rankings, web developers of today have to design websites that can exhibit a comparable and enjoyable user experience a wide range of devices and screen sizes.

One way to achieve this is to custom make web pages that fit different devices and screens. However, this is quickly ruled out as it is neither cost-efficient nor future-ready. The ideal way is to have one page that fits all. In order to achieve this, web pages must be made aware of and be able to adapt their contents and layouts to suit the diverse screen sizes, resolutions, and orientations of the devices that access them dynamically and autonomously. In other words, web design has to move from being device-indifference to device-responsiveness.