0

still learning CSS and am a little confused about something.

Why do designers do wireframing/mockups based on a 960px layout?

I'm not talking about the 960 grid system, I'm talking about stuff like PSD mockups etc. I've noticed in a lot of articles online and in tutorials that designers often do mockups based on a 960 canvas size. I realize that 960 is still the most used pixel size for computers, but if, for example, you're going to be building a responsive website that is based on percentages, then why would you still do your wireframe/mockup in 960px, if you'll be doing media queries for 1024px, 768, 320, etc?

Any insight would be much appreciated!

asjd
  • 5
  • 4
  • 1
    I'm no designer, but I would hazard a guess that it's for similar reasons that we have 24 hours in a day: it divides well. – Niet the Dark Absol May 13 '14 at 22:27
  • 1
    It's mostly for historical reasons. If you have 1024px screensize (which for long time was the most feasible size to use), you don't have the full with available. E.g. the scrollbar takes a way some pixels and perhaps some browser toolbar. It's some kind of safety gap to avoid horizontal scrolling. – Christoph May 13 '14 at 22:27

3 Answers3

1

960px is used because it is divisible by 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, and 16... - allowing designers to have a huge variety of different column widths and possible layouts. There are probably other "magic" numbers in this respect.

Also as pointed out, a width of 960px fits the majority of resolutions "nicely".

Mimouni
  • 3,564
  • 3
  • 28
  • 37
0

A good designer will do mockups for each breakpoint, not only 960. And for each breakpoint they will have a grid to work within.

davidcondrey
  • 34,416
  • 17
  • 114
  • 136
0

They must be old fashioned designers. Modern designers should build mock-ups for larger and smaller sizes and do responsive layouts if possible.

You might also have very specific resolution sizes you need to design for, such as for certain mobile devices, check out this useful list of screen resolutions: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Andrew
  • 18,680
  • 13
  • 103
  • 118