The Community Of Over 578,000

Home ›› Conversational Design ›› A guide to the Responsive Design paradigm

A guide to the Responsive Design paradigm

by Rounak Bose
Share this post on
Share on twitter
Share on linkedin
Share on facebook
Share on reddit
Share on email
Share on print


Responsive web design is not just about adjustable screen resolutions an automatically resizing images. All benefits need to be skilfully taken advantage of and all limitations have to be worked around. And this is where we dip our toes into the vast expanse that is responsive design. It is a whole new generation way of thinking.

All aboard the time machine! We’re going back to the late 1970s — in search of a user interface designer. Come to think of it, that title hardly existed then, and the job description was somewhat different too. In some ways, you could say that your work was pretty serious but quite easy in other ways. It was easy because whatever you may be responsible for designing — a piece of technology, software applications, or even hardware — in all probability, you would be designed keeping in mind a big fat desktop computer that would only be used by a handful of really skilled personnel. And that was it — there were no other situations or no other cases or even no other users to keep in mind when designing. Even if you fast forward to around 15 years, into the mid-1990s, probably the desktop computers have gotten a little bit smaller in size but the situation is basically almost the same.

What it currently looks like

Things now have started to look a lot more complex. User interface designers are dealing with smartphones, tablets, smartwatches, and all sorts of smart things — from lightbulbs and door locks to robot vacuum cleaners. If you listen to podcasts you would know that every advertisement brings forward some new smart objects. But what does that mean for user interface designers?


Well, everything that is “smart”, needs inputs through human interaction, and anything that requires an interaction model, needs a user interface.

Interface designers to the rescue!
We would have to be ready to design for a large variety of devices and myriads of interfaces. But that is not the most critical part. Very rarely will you find someone who uses only one smart device (say, only a smartphone — no laptop; or vice versa). That only means we have to design for people who use multiple smart devices in conjunction at the same time.

Let me give you an example.

As I write these very words, Spotify is playing LoFi beats on my iPad. If I so desire, I can use my Macbook or my iPhone or even my Android smartphone to open up Spotify and start playing a different song or playlist on my iPad itself. This manoeuvre is possible only because of consistency in design and technology in the Spotify apps across all these devices — all of vastly different screen sizes and even different underlying operating systems.


Left to right — Spotify iOS app, iPad OS app, MacOS app

We need really comprehensive understanding of the benefits and shortcomings of each of the device types or platforms, making sure that when designing we make use of this knowledge to influence design decisions while building a product. All benefits need to be skillfully taken advantage of and all limitations have to be worked around. And this is where we dip our toes into the vast expanse that is responsive design.

Most articles on the internet will tell you that the idea of responsive design came around in the years 2012–2013. However, this concept was born at least around 1991. CTO of Xerox PARC, Dr. Mark Weiser had written an article, so famous that just this one article got upwards of 13000 citations. And this is one of the many articles put forward by this forward-thinking HCI researcher.

In his 1991 paper, Dr. Weiser established a framework of three main types of devices, and thus three types of platforms. He called them —
1. tabs,
2. pads, and
3. boards.

These are precisely what has come to be smartphones, tablets and wall-sized displays, or large desktop displays like we are used to seeing all around us now.Come to think of it, it is pretty cool that someone in the beginning of the 90’s could predict something so remarkably accurate — it is exciting to see Mark Weiser’s vision come to fruition.

And as we get better at designing for these platforms, we get better at designing better platforms.

If you’ve done any course related to responsive design, or heard about it from anyone — you would know that all you need to do to make a website responsive is to make it aesthetically pleasing and properly functioning for all types of screen resolutions. Know this — responsive web design is not just about adjustable screen resolutions an automatically resizing images. It is a whole new way of thinking about design.

To get a sense of how one goes about responsive design, it is important to understand that, a designer does not just lay out the desktop version of the website, and then sort of hack around with a tablet layout and a phone layout. Instead, she/he looked at everything altogether and then implemented a design that was consistent across the specific screen sizes the users are looking at — the webpage width. That is precisely where the importance of platform and context lies, and why one should understand the nuances of each platform while designing for the same.

Here are some of the most important steps taken to enable a responsively designed website.

1. Adjusting screen resolutions

With great number of devices, come great variety in screen resolutions, definitions and orientations.


Account for varied screen resolutions

Every single day new devices with new screen sizes are being developed, and there is a pretty good chance that each of these may be able to capably handle the variations in size and functionality, and even colour. One will find some being predominantly used in portrait, some in landscape, and some totally square — designing for both portrait and landscape is a no-brainer. One also needs to enable both these orientations to effectively switch in an instant upon page load, keeping in mind the hundreds of different screen sizes.

Yes, it is quite possible to bundle these sizes into main categories, design for each, and make every design the most flexible possible. You can also use the Goldilocks approach to responsive web design — this states that you should be ideally making designs that are device-independent layouts, that will look perfect regardless of the device that you are viewing them on.

2. Accommodating touchscreens and cursors

You are as probably going to poke at the screen with your fingertip — as you are, to use mice to roam around the digital canvas with a pointer/cursor.


Design keeping in mind whether for touch or non-touch inputs

Necessary or not, touchscreens are becoming more popular by the second. They were so in fashion, that in August 2017, a US navy destroyer vessel, USS John S. McCain crashed into a Liberian oil tanker killing 10 and injuring close to 50, simply because the mechanical controls were replaced by touch-screens — which the sailors were very inexperienced in, and which provided no tactile feedback, compared to mechanical throttles.

It is extremely important to choose the platform that appropriately meets the purpose, and not the other way round. That said, there are innumerable applications of touch screen and pointer-based interfaces today. It would be foolish to assume by the current trends that smaller devices will have touchscreens and larger displays will have pointer input. Many laptops and desktops have touch support.

Touchscreens have different design guidelines than purely cursor-based interactive systems, and they have different capabilities as well. However, it is not too effort-intensive to make a design work for both in terms of usability and desirability.

3. Flexible everything!

Blessed are the flexible, for they shall not be bent out of shape.


Like water, your design should fill the shape of the containing vessel 

Text, images, videos, forms, newsletters — everything. In the early 2010’s, flexible layouts were almost considered a “luxury” for websites, and even then the only thing that was considered flexible were the structural elements — the column layout, and the text. Images would end up breaking these flexible layouts, and when pushed enough, even the columns would give way to chaos. Effectively these designs could give or take a few hundred pixels, but more often than not, could not adapt when changing from a wall mounted ultra-wide monitor to an iPad — they weren’t really flexible.

Now, images can be automatically adjusted. Even the layouts can be made to never break — there are workarounds to make it totally flexible, although the columns might get squished and turn out somewhat illegible in the process. This may not be a complete fix, but it allows for multiple options and ways to smoothen out the transition from one device type to another.

4. Hiding content when possible

Isn’t everyone hiding something?


Hide all that is not immediately required

You should definitely do it for content on websites — judiciously and carefully, of course. As much as it is possible to scale down elements proportionally to fit everything into a smaller screen; making each and every piece of content from a large display, available on a small-screen mobile device is not always the best answer. Simpler navigation, focused content, rows instead of multiple columns are all best practises for small-display environments. But, it is also necessary to prioritise the content strategy and make it such that nothing of tremendous importance (primary information) is excluded — while secondary information should ideally be included, and tertiary information is what can be hidden — again, judiciously.

All said and done, you definitely can not plan out and design a website that is responsive, content-focused and mobile-first, the same way that websites have been created for years now.
If your ultimate goal is to design a website that does not have a fixed-width and serves small-display-devices the styles they require, there is no point in using a dated set of procedures that actually contradicts the above goals.

Also, the drawbacks are costly.

Failure to be platform-aware can lead to the failure of a product


Platform-awareness is indispensable knowledge

If there is something that cannot be stressed more, it is this — your design should be fluid and must understand the context of each platform before adapting to the screen size and constraints. To you and me, it may sound crazy, but we need to keep in mind the simplicity and ease of use of the users who go from smartphone to desktop, back to a tablet, out for a jog with their smartwatch and return home to their smart AC set at the right temperature and loaves baking in the smart oven.

The story has only begun …

Remember Dr. Weiser from a few scrolls up this blog? What he had envisioned in around 1990, is that what we understand as computing will become one with our environment. So much so, that we will hardly recognise when we’re interacting with a computer while going about our day. He expected that we will use computers everywhere, even possibly while spending time with our families, no longer think of these as computing devices, or as individual smartphones or tablets. We will look at them as simple tools that help get jobs done, dare I say — like something along the lines of a hammer or a wrench.


They’re all just tools in the end

We can actually see this happening, and when it does, it’ll be a tremendous success for user interface design. At the same time it will be a persistent challenge for us, designer folk — and we’re really excited looking forward.


post authorRounak Bose

Rounak Bose,

I help brands, businesses or organisations solve problems and gain design direction that aligns with and satisfies their goals - in a smooth and enriching experience through ideals of lifelong learning, teaching and growing!

Share on twitter
Share on linkedin
Share on facebook
Share on reddit
Share on email
Share on print

Related Articles

Building digital products for the web’s next billion users
  • Connectivity issues are further inflated by accessibility gaps. This, in turn, undermines user experience and creates obstacles for the wider use of digital products.
  • When designing for users, it’s worth considering such issues as poor connectivity, accessibility constraints, levels of technological literacy within different countries and cultural barriers.
  • In order to satisfy the needs of the next 3 billion users, it’s vital to build inclusive and accessible products that will provide solutions to the critical problems the next generation will face.
Share:Building digital products for the web’s next billion users
The Liminal Space Between Meaning and Emotion
  • To innovate well is to search for meaning behind the innovation first. This requires investing time into discovering what users need and think of unique ways to serve them and better solve their problems.
  • Emotions are widely misunderstood in UX design and often manipulation is used to predict user behavior. However, a much better approach to UX design is storyscaping, which aims at empowering users, rather than controlling them.

Read the full article to learn more about liminal space and how to apply this thinking to your design.

Share:The Liminal Space Between Meaning and Emotion

Stop frustrating your users. Invest in notification strategy instead.

The UX of Notifications | How to Master the Art of Interrupting
  • As part of UX, notifications are key to leading the user to a better interaction with the product. Therefore, notification strategy should have a central role in UX design.
  • A good starting point is to create a user’s journey map and identify major pain points. This should serve to understand when and where notifications might be of help, rather than create confusion.
  • It’s a good practice to use a variety of notifications and provide the user with opt-outs so they don’t feel overwhelmed.
Share:The UX of Notifications | How to Master the Art of Interrupting

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and