0

This question already has an answer here:

I'm having a big doubt here regarding grid systems.

See, I have to design a medical dashboard application for a lot of devices: These are a 42 inch LCD screen, a regular computer screen (using 1200 as standard resolution), an iPad, and an iPhone.

My question is: I want a grid that has 10px gutters (that's very little so I'll probably make it custom), how should I standardize it across all devices?

Should I use a grid with the same columns and gutters and just take out column when the resolution gets smaller? Or should I get different grids for every device?

|improve this question

marked as duplicate by Graham Herrli, Benny Skogberg, Evil Closet Monkey, JohnGB♦, Charles Wesley Sep 3 '14 at 16:57

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

0

Or should I get different grids for every device?

No, because that will no longer be a responsive design.

First-up you probably need to stop thinking in terms of individual devices, that is just tying your hands, you should be thinking in more device-independent terms. There's no such thing these days as a ‘regular computer screen’, so don't fall into the trap of trying to design for one.

I'd strongly advise you design mobile-first, get your content hierarchy and functional design requirements sorted at the smallest scale first and then progressively enhance your design for larger screens as resolution increases. Include a break-point where the design breaks, not at some arbitrary device resolution which takes no account of your design.

|improve this answer
  • Thanks, but one of my main doubts is not about the breakpoints, but about what grid should or can I use. My main question is: Should the grid I use have the same number of columns no matter which resolution it is (dynamic column width), or should the column number drop off progressively when the resolution narrows (same column width, different column number). What are front-end devs used to do or which one is a best practice? – Elias Lopez Sep 3 '14 at 4:18
  • Use a grid that fits your design requirements, there is no 'best grid' answer to give you other than to say that the best grid for you is the one you create for your project. Make the grid fit your design requirements, don't design to fit an arbitrary grid. – Seth Warburton Sep 3 '14 at 15:26

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