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
It might be especially crucial for first screens that need to look exactly as designer crafted them on every screenThat's not possible not exactly unless you have them give you a PNG 🤷
Huge loseless image as fcp and lcp is not great idea, lack of real semantic markup too
There should be better approaches
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
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
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
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 😄
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?
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