DEV Community

anurag-anand
anurag-anand

Posted on

What is the best way to tackle responsive design with minimal redundant code ?

I work at a startup with a team of 6 people, We work primarily on MERN stack. I handle the UI /UX part but we have a hard time making sites completely responsive, it even looks different on the laptops of our fellow devs while production. We are using responsively to check on different screen sizes. Is there some tricks or best practices there for it to make my life easier? a resource or some guidance about how to tackle responsiveness like a pro. We use flexbox,bootstrap but converting the UI screens to actual code never goes smoothly. ultimately we have to put media query breakpoints writing multiple css to get the job done which I personally hate but sometimes that becomes the only resort.
Please tell me how can I and My team become more competent . Thanks

Top comments (6)

Collapse
 
kilianvalkhof profile image
Kilian Valkhof • Edited

I wrote a guide with all the rules I stick to when creating a new responsive design, which will really help you: polypane.app/blog/responsive-desig...

Using media queries is not a problem but it's important to consider how you use them. If you just add one whenever you need it, you'll make your live way more complicated. So pick a direction (mobile first or desktop first) and stick to it. After that, having a tool that can keep track of your media queries is a big help (this is something Polypane can do for you, check it out!)

Collapse
 
danishkhanzaada profile image
Danish

Can you use 3rd party Libraries ? We develop mobile apps in react native and there is a package for handling responsiveness ...Quite Handy !... You can check out this package React Responsive ... Might be helpful.

Collapse
 
anuraganand profile image
anurag-anand

okay thanks..I will take a look

Collapse
 
nimitwalia89 profile image
nimit walia • Edited

I usually dont rely on css frameworks. Flex box and media queries usually handle stuff pretty well. To conditionally render elements of different device size u can use react-device-detect or react-responsive. Also keep max width of website below 1200px if possible. So u dun have to worry about large displays

Collapse
 
gixxerblade profile image
Steve Clark 🤷‍♀️

I'm no expert but I have been studying inconsistencies across browsers. Do you guys normailze your css so it's consistent across all browsers?

Collapse
 
jwp profile image
John Peters

Switch to Grid only. Use Scss in root. Get rid of 3rd party css except perhaps material.