Scaling whole section

What would be good approaches to scale whole section (preserve original composition) instead of wrapping texts and images on smaller screens? It might be especially crucial for first screens that need to look exactly as designer crafted them on every screen Only relevant for laptops and desktops, not mobiles
8 Replies
Jochem
Jochem•2mo ago
It might be especially crucial for first screens that need to look exactly as designer crafted them on every screen
That's not possible not exactly unless you have them give you a PNG 🤷
Arctomachine
ArctomachineOP•2mo ago
Huge loseless image as fcp and lcp is not great idea, lack of real semantic markup too There should be better approaches
Jochem
Jochem•2mo ago
not for a pixel perfect design at all screen sizes you'll never get it exact otherwise it's just a responsive layout. You can scale things (for fonts you can use a clamp with a rem and a vw component), but again, won't be pixel perfect because that doesn't exist outside of rasterized images
Alex
Alex•2mo ago
In a theory you could get close if you size everything using only vw units. In practice this would be terrible for usability and accessibility, and you still can't account for all the different aspect ratios screens come in
Jochem
Jochem•2mo ago
html and css aren't intended to create a perfect recreation of your design documents, they're designed to create living, responsive documents that adjust to the place they're displayed. Your job as a frontend developer isn't to create a pixel perfect copy of the original design from the designer, but to create an interpretation that works on all (most) screensizes. If the business is demanding a pixel perfect copy on all screen sizes, they're asking something impossible. They're asking for three parallel green lines drawn in red marker, that cross at both ends
Kevin Powell
Kevin Powell•2mo ago
Jochem has nailed it, and to build off that, if the designer doesn't realize that the web isn't a print document, they aren't a very good designer. Hopefully it's just ignorance, and having an open converstation with them could help... you could also look up the video Why is CSS so Weird by Miriam Suzanne and send it to them 😄
Arctomachine
ArctomachineOP•2mo ago
Funny that searching this exact phrase gives 2nd and 3rd results from Kevin. Youtube got some insider info 😀 So if truly pixel perfect is not possible, what approaches can be used to achieve otherwise best match? I see suggestion about vw only units, what else can be applied for this task?
Jochem
Jochem•2mo ago
just remember not to only use vw units and to test up to 4k. Especially fonts should always always always include a rem or em component so they respect the user's font size preferences

Did you find this page helpful?