3

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:

  1. Do all html and css work with the window maximized (about 1400px wide)
  2. Then I shrink it and insert @media screen and (min-width: 600px) for example, when I see the layout go nuts, then fixing it
  3. 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.

5
  • This question appears to be off-topic because it is about programming which is off-topic at Pro Webmasters. Programming questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines.
    – John Conde
    Sep 22 '14 at 19:08
  • John can I just copy paste it to SO then? Sep 22 '14 at 19:09
  • I don't think so. In its current form it might be construed as too broad. You'll need to ask a more specific question (singular) and probably set up a jsfiddle that shows what's actually happening.
    – John Conde
    Sep 22 '14 at 19:11
  • It is a workflow, full-site issue, how am I supposed to jsfiddle that? I'll modify it to make it more concise and copy it to SO then Sep 22 '14 at 19:31
2

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). .

3
  • Do you use min-width or max-width? And out of curiosity, how long would it take you to markup this SE webpage for example, in RWB? Sep 22 '14 at 19:07
  • I always start with largest resolution first, which in my case is 1921-2560. For that range I dont use any mediaquries. Then I have one for 2561 + (4k monitors) and with that I add the css to vertically center the site with a background (3 column like) but with margin auto. And then I go through each of the viewport ranges (min-1441 max 1920, min-1100 max-1440 ....) and work them down one at a time. What saves lot of time is not trying to target two different viewports in a media query. For example lets say i want to hide something for screens 1440 and below, id dont bother writing a..
    – Frank
    Sep 24 '14 at 0:06
  • .. another media query for that. It just gets too confusing. For me its better to just start with a blank css file called responsive.css with all the ranges defined first, and them work at them top down. If code repeats (which it usually does) I dont really care. Its not the best approach for high traffic sites, but having a few extra lines of repeating css code (when its the same for multiple ranges) seems a lot cleaner to me than having multiple rules which can overalap and consfuse.
    – Frank
    Sep 24 '14 at 0:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.