Why your web app should be responsive

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.

This blog in a narrow screen width
This blog in a narrow screen width

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.

Author: Alister Scott

Alister is an Excellence Wrangler for Automattic.

7 thoughts on “Why your web app should be responsive”

  1. Thanks for the insightful post. Was wondering if you have any more complex website/webpage examples that showcase what you talk about rather than this page/site itself, which is less complex than sites that are more like web applications.


  2. do you think this is true for complex applications? I have seen responsive beeing used over and over on simple websites, but none on applications that require the user to complete multiple complex tasks


  3. Do you have automation solution to test responsive web app, if only in term of “responsive”, meaning layout only? (not sure if Webdriver User Agent was that part of automation solution for responsive.) Thanks.


    1. +1, that’s a good discussion.

      As responsive design is reusing elements across the different layouts, it’s just styled differently to produce the desired layout, I would think the automated test approach would be to validate the current (CSS) styles applied to the elements match the expected ones, and also any media elements (images, video) are in the correct state (CSS style or DOM attribute set to “hidden’ vs “visible”, etc.) for the expected layout.

      Anything beyond that would be visual screenshot comparison of layout rendering.

      Besides these, the rest of testing the application is same as normal functional testing, which may or may not be specific to the layout under test. When not specific, the functional flow is same across all layouts, etc.


Comments are closed.