Mobile first workaround and responsive images

Design help General
#1

Hi,

I was designing my portfolio using Webflow in mobile first.
For that I used a workaround like this :
I create a container of :
320px width in the 1080 px desktop design (wich contains all the site)
568px width in the 1280px design
768px width in the 1440px design
and a 100% width in the 1920px.

Then, when I export the code, I change in the Webflow CSS the lines
@media screen and (min-width: 1280px) to @media screen and (min-width: 568px)
@media screen and (min-width: 1440px) to @media screen and (min-width: 768px)
@media screen and (min-width: 1920px) to @media screen and (min-width: 1080px)

(I also rewrite some rules on an other css file)

And I was quite happy with this process.

BUT HERE’S THE PROBLEM :

Recently (didn’t noticed this before), I realize that the images in desktop had a crappy resolution (but not on every computer, even with the same navigator, wich is weird).

I find out that this is due to the responsive image. I’m guessing Webflow see that in resolution smaller that 1920px my images are in wrappers, so it suggested to the navigator to take a smaller version of the image.

So HERE’S MY QUESTION:
Do I have only those three options :
1 - forgetting the mobile first workaround and redesign everything (I soooooo don’t want to do that)
2 - don’t use image reponsive at all (but that would be terrible for the loading time on small device)
3 - make the image responsive myself (with differents tag containg different version of my images, wich would be displayed regarding to the device witdh (does an image is loaded when it is in display: none ?)

Hope you guys have some idea.

Thanks !

Seb

Here is my site Read-Only:
https://preview.webflow.com/preview/ug-v5?utm_medium=preview_link&utm_source=designer&utm_content=ug-v5&preview=0b13c69d5c864f4c5345a26e3691f0be&pageId=61cdbb1024aba5f29c6a86a6&workflow=preview

#2

“Mobile first” is most often a publishing strategy — “we’re focusing on the mobile audience/market” — rather than a technique. But of course, the technique also exists if you create a website with @media rules going up rather than down like Webflow does.

You’re approach is interesting, but it’s a lot of work :slight_smile:

You’re better off rethinking your strategy. You can craft entire designs and layout that will behave great on every device without having to make changes to address responsivity. That is, when you use only % and other variable units.

You can still work your base outer structure using REMs, for example setting the dimensions of your sections (mainly padding) and container (mainly 100% width with a max-width in REM). Once done, everything inside of it should be designed in an elastic/adaptable way. There’s always a way :slight_smile:

You’ll then lay out your element for Desktop, then quickly go down to Smartphone.

And you can adopt this strategy for every website you make, not just the “mobile first” ones.