How to Design Websites within the 960 Grid
One useful angle from which to carve into the challenge of designing web pages it to start with why web pages are 960 px wide. But are they? No, not all of them. But there are powerful compelling reasons why web designers are gravitating toward making pages a standard width of 960 px: function and form.
First of all, a very, very wide range of viewports can display a 960 px page. How can both a full-sized monitor and an iPhone display a 960 px page? That question has a two-part answer:
A 960 px page won’t fill the entire width of a full-sized monitor — but that’s a good thing. A web page that fills the entire width of a large-screen monitor would be too hard to digest. Lines of text would be too long to read. Page content would be too stretched out for visitors to absorb as a unified whole.
Mobile devices have more pixels per inch than full-sized monitors. So even Androids, iPhones, and other small devices can display 960 px pages.
The other attraction of using a 960 grid is that “960” is easily divisible. That means you can break down (divide) your page in manageable chunks — columns — to help plot your design. For example, say you base a design on a three-column approach, each 320 px wide.
The figure shows just such design: a 960 grid divided into three same-width columns, using Adobe Illustrator as a design tool. In this illustration, a header (in white) fills the top of the screen, and the three columns are placed below the header.
Or, a 960 grid can be easily split into eight columns (120 px wide) or 16 columns (60 px wide). This real estate breakdown makes it easy for a designer (which might be you!) to create appropriately sized artwork for ads, banners, and other content.
In fact, if technical issues were the only issue, web designers could have standardized web page sizes a bit larger than 960 px, and the containers would still fit in mobile devices. Most viewports, including mobile, claim to be at least 1024 px wide — but the value of using 960 lies in the ability to use the “divisibility” of that number in workflow.
The essential point is that designers — using programs like Adobe Illustrator, Adobe Photoshop, or even a sheet of graph paper — can create as many as 16 evenly sized columns (60 px).
And, by creating their design on top of that 16-column grid, they then turn the artwork over to a web designer who translates the page to HTML and CSS using a 960 px-wide container, and multiple columns that match those in the original artwork.