What's the point of responsive/adaptive design in doing UI?

Question

I apologize if this is such a bad question but I have zero clue about web or UI design. I'm a graphic designer but I was tasked to just design a website using Photoshop cause that's what I'm familiar with.

Now I'm tasked to convert that web design I did to a mobile version. Which I totally get since the layout would entirely change in a phone. I'm trying to learn figma and watching videos about converting your web design to mobile. And I heard about "responsive" and making your design adaptive. So what they would do is freely size the artboard and the layout just follows. Which I thought was cool, but what is the point of that?

Don't I only need one design for desktop, and another layout for a mobile? Aren't the developers in charge of that? Since my design is only for reference anyway and the output I'll give them is just a static image?

Answer 1

The problem with "desktop" and "mobile" is that there's no standard size for either one. Is it a small laptop screen? A huge retina monitor? Landscape tablet? Portrait phone? Responsive design allows your design to work at any screen size, regardless of the dimensions by shifting and stacking content in the way you determine is best for the experience.

While the developers may have some idea of how to go about deciding how the content changes, they may end up doing something that makes sense programmatically, but causes usability problems. Your job here is to guide them on how the content should shift within that responsive framework, so that all users will have the appropriate experience.

Here's an article that touches on the concept of "mobile-first design", which can help you determine what content makes sense depending on the device: https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/