Responsive web design involves making your web application optimized to the screen of the device it is running on. In the past, most web applications would use user agent strings, which are sent by the user’s browser, to determine whether to display a mobile formatted version of the application, most often a completely reformatted and often cut down version.
Historically it was easier to differentiate between what is a mobile device and what is a desktop device, but we’re now in a situation where it’s no longer black and white: just a continuous scale between a small screen and a large one. Mobile phone tablets (phablets) such as the Samsung Galaxy 8 raise questions about what actually is a mobile device; it is a phone, but at 8 inches is also a high res tablet.
Previously you would have had to make a decision about what version of your web app to show on a Galaxy 8 phablet – which would most probably have been the mobile optimized one: which isn’t ideal on such a high resolution screen.
With responsive web design, CSS3 media queries enable you to determine actual device width and dynamically provide a version of your web application appropriate to the device: whether it’s a 27″ iMac or a 3.5″ phone. For example, this blog is responsive: if you’re reading in a desktop browser, resize it down to a typical phone width and you will see what I mean.
Whilst at first it may appear to be more complicated to design a responsive web application, it is future proofing your web application against an ever increasing range of devices and screen sizes, and provides simplicity in not having to use user agent strings to determine to switch views. Most importantly, it provides the best user experience, now and in the future.