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

March 22, 2024
Image

UX design adapts, playing a crucial role in enhancing user engagement and satisfaction. By putting your users at the center, you can leverage UX design to drive solutions that resonate, fostering customer retention and boosting conversion rates.

March 6, 2024
Image

While options such as in-house teams, consultants, or freelancers exist, they may not always provide the comprehensive, cohesive approach that a specialized agency can deliver. Working with a professional design agency ensures a reliable solution, bringing together expertise, innovation, and a tailored perspective.

February 27, 2024
Image

With user experience becoming a big deal in web and app design, UX audit has become super important. It’s like a product roadmap, showing its effectiveness, boosting conversions, and ensuring users easily achieve their goals.

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