I’m having problems trying to figure out a good workflow when designing a responsive website.
I’ve tried a few approaches, nowadays what I’m doing is:
- Do all html and css work with the window maximized (about 1400px wide)
- Then I shrink it and insert
@media screen and (min-width: 600px)for example, when I see the layout go nuts, then fixing it - Shrink a little more and then for ex.
@media screen and (min-width: 400px)and so on…
In the HTML I use <meta name="viewport" content="width=device-width, initial-scale=1">, as that0s how it comes from the HTML5Boilerplate.
Working backwards that way, from big window to small, everything seemingly works out great and I end up having a good mobile version of the site.
Nice, right? No. The problem is that when I maximize back again, some things are messed up and it’s incredibly hard to fix those. As in frustrating, time consuming…
I’ve tried this painful process both directions (from big to small and viceversa).
Using the vw unit has helped a lot (now I put it everywhere) but it is still kind of a nightmare, at least for me.
I’ve even tried programs like Macaw or Reflow but I’m not very comfortable because in the end I’ll have to do some retouching/optimization by hand so why not do it all by hand to begin with…
I must be doing something wrong. What is it? What’s the best/easiest way to do this? Is working with max-width instead a better idea?
There must be an obvious workflow I don’t know about.