: Tips for developing a responsive website 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:
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.
More posts by @Turnbaugh106
1 Comments
Sorted by latest first Latest Oldest Best
I dont think anyone can give you specific advice on why respnsive design is so hard to code, but there are usually two approaches. A. you design for the smallest possible screen and work your way up (mobile first), or b you start with the largest possible screen and work your way down. You can get very elaborate with things, and its a matter of user preference on what divs you want to show / hide, and or restyle based on your responsive designs. After years of dealing with responsive designs here is how I approach it.
I always design for Monitors First at the largest possible screen. Here are my Breakpoints:
Greater than 2560 width (then i just letterbox the site into 2560)
1921 - 2560 - Huge Screens (cinema displays)
1441 - 1920 - HD Screens
1100 - 1440 - Macbook Airs
Tablets (device orientation portrait) modernizer touch enabled
Tablets (device orientation landscape) modernizer touch enabled
Phones (device orientation portrait) modernizer touch enabled
phones (device orientation landscape) modernizer touch (we just overlay a div and tell them to turn their device, because a landscape phone is impossible to design for).
Again, it all depends on what works for your project, the number of breakpoints you have. If you are using something like twitter bootstrap, they have a nice set of breakpoints (not as high as 2560) which should give you a nice start (if you are willing to pay for it with tons of unused css classes). .
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.