Expert team, exceptional design, exponential growth.

Enquire Now
journal

Responding correctly to Responsive Web Design

Consider this scenario – Dave is planning a trip in the summer. Since it’s going to be sunny, he browses some sunglasses on his desktop at work. At home, while binge watching Netflix on iPad, he browses some more sunglasses and shortlists a few. Finally, while going to sleep, he selects and orders a pair from Amazon on his smartphone.

Consider this scenario – Dave is planning a trip in the summer. Since it’s going to be sunny, he browses some sunglasses on his desktop at work. At home, while binge watching Netflix on iPad, he browses some more sunglasses and shortlists a few. Finally, while going to sleep, he selects and orders a pair from Amazon on his smartphone.

For the same purpose, Dave has used a desktop, an iPad and a smartphone. Three different screens. And this scenario is getting more and more common as we speak. This infographic does a nice job of capturing the multi-screen human behaviour in the modern era. Add to this the rise of different devices people are using now – phablets, tablets, laptops, 2-in-1s, consoles, wearables, phones with notches, and so on.

What does this mean for your product, app or website?

This brings us to the concept of Responsive Web Design (RWD), which was originally defined by Ethan Marcotte in A List Apart, in… 2010. At the time, it focussed on making print-friendly designs work accurately in the web medium. But today, the concept still applies, although, across multiple devices, in different forms. It is not just making the website mobile-friendly, anymore. It is very simple to define RWD in one word. Water. It is equally hard to ascribe the properties of water, to the design you are building for users to watch on their screens.

Google recently announced a redesign of the Google Translate website, which does a good job of displaying the basic aspect of RWD – scaling the layout as per the screen requirement.

But this is the surface. You are well aware that your team will ensure the app or website is readable on smaller screens. But as we delve deeper, there are a lot of considerations you have to make while making your website responsive across devices, in a meaningful manner. It is challenging to build a responsive website, but it is even more challenging to know whether you are doing it right or not!

Aligning team with the correct approach

Continuous testing across multiple devices is essential in getting it right. The biggest consideration often comes on what content to keep and what not to, as you go on smaller screens. RWD is not a Bonsai. Taking a website and crunching it down in a bid to make it mobile-friendly is a cardinal mistake, and often a way out. You need to fundamentally evaluate use-cases, and decide what should go in your mobile website vs desktop one. You may need to alter your product features if required.

This is the primary reason why Inshorts is so much popular over mobile versions of say, someone like The Indian Express. People browsing news on their phones do not want the first paragraph with tidbits that make you want to read the whole story, they want a gist of the whole story in one paragraph.

When you move from a large office to a smaller one, you don’t opt for shorter tables and tiny chairs, you optimise the use of space around you. Maybe you don’t need such a large conference room. A smaller telephone booth will do. Perhaps the open cubicle system works better than secluded cabins.

It is all about balancing the User Experience

It all boils down to the kind of user experience you want to deliver on what screens. Today, making your content accessible to users at any place is not a problem, it is about how efficiently you design the system for a particular use-case; how you align the experience which will deliver the action you desire from your users. This will ensure your product or website achieves scale effectively, builds multiple sources of revenue and offers streamlined experience to your users – and in the process, appears prettier on every device they look on. Consider this scenario – Dave is planning a trip in the summer. Since it’s going to be sunny, he browses some sunglasses on his desktop at work. At home, while binge watching Netflix on iPad, he browses some more sunglasses and shortlists a few. Finally, while going to sleep, he selects and orders a pair from Amazon on his smartphone.

For the same purpose, Dave has used a desktop, an iPad and a smartphone. Three different screens. And this scenario is getting more and more common as we speak. This infographic does a nice job of capturing the multi-screen human behaviour in the modern era. Add to this the rise of different devices people are using now – phablets, tablets, laptops, 2-in-1s, consoles, wearables, phones with notches, and so on. This brings us to the concept of Responsive Web Design (RWD), which was originally defined by Ethan Marcotte in A List Apartin… 2010. At the time, it focussed on making print-friendly designs work accurately in the web medium. But today, the concept still applies, although, across multiple devices, in different forms. It is not just making the website mobile-friendly, anymore. It is very simple to define RWD in one word. Water. It is equally hard to ascribe the properties of water, to the design you are building for users to watch on their screens.

Google recently announced a redesign of the Google Translate website, which does a good job of displaying the basic aspect of RWD – scaling the layout as per the screen requirement. But this is the surface. You are well aware that your team will ensure the app or website is readable on smaller screens. But as we delve deeper, there are a lot of considerations you have to make while making your website responsive across devices, in a meaningful manner. It is challenging to build a responsive website, but it is even more challenging to know whether you are doing it right or not! Continuous testing across multiple devices is essential in getting it right. The biggest consideration often comes on what content to keep and what not to, as you go on smaller screens. RWD is not a Bonsai. Taking a website and crunching it down in a bid to make it mobile-friendly is a cardinal mistake, and often a way out. You need to fundamentally evaluate use-cases, and decide what should go in your mobile website vs desktop one. You may need to alter your product features if required.

This is the primary reason why Inshorts is so much popular over mobile versions of say, someone like The Indian Express. People browsing news on their phones do not want the first paragraph with tidbits that make you want to read the whole story, they want a gist of the whole story in one paragraph.

When you move from a large office to a smaller one, you don’t opt for shorter tables and tiny chairs, you optimise the use of space around you. Maybe you don’t need such a large conference room. A smaller telephone booth will do. Perhaps the open cubicle system works better than secluded cabins. It all boils down to the kind of user experience you want to deliver on what screens. Today, making your content accessible to users at any place is not a problem, it is about how efficiently you design the system for a particular use-case; how you align the experience which will deliver the action you desire from your users. This will ensure your product or website achieves scale effectively, builds multiple sources of revenue and offers streamlined experience to your users – and in the process, appears prettier on every device they look on.

Design Creates Experiences that Facilitate Product Goals.

With more than 20 years in the UI/UX sphere, we craft experiences that match user expectations, thus enabling brands to achieve their business vision.

20 +

Years in Design

200 +

Satisfied Clients

500 +

Successful Projects

40 +

Designers On-board

Take a Look at Our Journal
Image

Remember the era when animals such as horses, camels, donkeys, etc. were the widely used mode of transport? When a four wheeler vehicle was invented to replace this transport using animals, people in that era had contrasting judgements – one where they were agasted with the ease, convenience and support the four wheelers could provide. And the other opinion was that this innovation can be harmful to humans and animals through accidents being caused!

Image

Imagine a world where your smartphone could diagnose diseases before you even feel symptoms or personalized medicine is as routine as checking your email. With the convergence of technology and healthcare, these mere imaginations are shaping into realities.

Image

Customers expect fast, easy, and personalized online interactions, and delivering that can increase user satisfaction and loyalty. But how do you stand out in a crowded market? This guide is packed with practical strategies and actionable tips to help you level up your digital customer experience.

There’s a Lot Happening Behind the Scenes in Our Lab!

This project attempted to identify the gaps in this food delivery app and propose UI/UX design ideas to expand Swiggy in different ways for the users to use it for more than just a food delivery app, in turn setting it apart from its competitors.

Image

Our team attempted to fill in the gaps, in terms of its interface and user experience design; for offering a more enhanced and assisted experience for the users throughout their journey.

Image

Exploring possibilities of turning an OTT platform into something more than just for entertainment purposes. Here’s our attempt of working out new sources of income benefiting the platform as well as the audience?

Image