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
anurag-anand
Posted on
What is the best way to tackle responsive design with minimal redundant code ?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (6)
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!)
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.
okay thanks..I will take a look
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
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?
Switch to Grid only. Use Scss in root. Get rid of 3rd party css except perhaps material.