Hey guys, so I've been writing code for a while now and pretty comfortable with most things I need to build nice looking sites and UI's, good code practice included.
I've been chatting with a few designers and been introduced to some design agencies that are beginning to ask me to make sites for them from their designs.
Im more than comfortable translating a layout in Figma etc into HTML and CSS. But there's something thats preventing me from going for it. And that's how to handle the design between the provided (designed) breakpoints.
Most designs I have had shared with me have two designs for each page/section. One for mobile, and one larger for say 1440px laptop. What is the best practice for handling how it scales between the two. Obviously I'm going to need media queries, but do you scale the type sizes fluidly between the two and interpret the design and layout changes through the viewport widths between? For me it feels like there is an almost infinite range of possibilities for some scenarios, and I'm sure the designers would be very particular about how it looks. But, surely there must be some kind of industry standard way or expectation at least on what should happen there?
Just wanted some opinions on the best way to go about it. If anyone could shed some light or share an opinion I would be grateful to hear it.
Top comments (1)
You can write the html/css code by hand or you can use nocode tools like Desech Studio to speed up the process.
You will import your figma design file and then you will get a clean html structure with elements positioned with css grids. You still have to adjust the margins and sizes afterwards, but it's much better than writing all of it by hand.
Check this youtube video for more details.