960px web design starter canvas

960px web design starter canvas

by Jeff Jimerson  |  February 1st, 2010
Design, Tips-n-Tools


 

 
7
 
 

Not too long ago I discovered that, contrary to long standing belief, it’s impossible to add more time to my workday. It was a Tuesday, I think. Anyway, I figure the next best thing would be to start doing those things I do most often—like designing websites—a bit more efficiently.

 

Here's a Photoshop file I created to help squeeze a few more minutes into the day. The canvas and columns are sized for a 960-pixel wide design — about perfect for a 1024×768 monitor resolution. Web designers, feel free to use and improve. I'd love to hear what other kinds of tips and tricks you’ve got.

 

P.S. Speaking of efficiency, if you’re like me you could use a little professional help now and again. If so, I recommend giving the Productivity Maven a ring.

Jeff Jimerson

» View all posts
» View website
 
 

Reader comments (7)

 

Hi Jeff. That’s cool. For those of you looking for a combo design and development tool for a 960 pixel grid, check out http://960.gs/.

It’s a simple CSS framework that lets you build a flexible 960 pixel grid with varying column widths. It also comes with Photoshop templates to match the css.

Some people say that using a CSS grid framework creates non-semantic HTML and is a step backwards– but I’ve seen good arguments on both sides. Using 960.gs has worked well for me : )


North Krimsly | February 02, 2010

Nice. Thanks for the link, North. FYI, Cameron Moll has some good thoughts on the subject of 960px-width design in this oldie-but-goodie post.


Jeff Jimerson | February 02, 2010

I used the 960 grid system on a larger site, I actually used there system to make my own custom grid. It worked great on creating a solid layout structure very quickly. Tho it is very important if you use a grid system to design within the limits of your system.
 

Writing that sounds like it makes for constrained design but using s grid seems to help me focus on good solid design, keeping elements and spacing consistent.

 

Ill give your PSD a try later this week on a new site and let you all know how it goes!


Ron Sparks | February 02, 2010

Cool, Ron. Don't forget to take a cookie break. 


Jeff Jimerson | February 02, 2010

I use 960 for almost all my projects lately. If you haven’t seen this video on NetTuts, you should go watch it now!

http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

This is a great tutorial to get started. Once you get the basics down, it really speeds up development and design.


Vin Thomas | February 09, 2010

Alan and I love the 960 grid system. Its a huge time saver and helps us (designer/developer) talk the same layout language.

There are a lot of other options besides the 960.gs system.

Here’s a link to the “Definitive List of CSS Frameworks”.

http://www.w3avenue.com/2009/04/29/definitive-list-of-css-frameworks-pick-your-style/

Lots of great options out there.


Jason | February 09, 2010

Jason thanks for the list of frameworks you posted looks awesome, but I am afraid if I start reading it ill get sucked into the rabbit whole!


Ron Sparks | February 09, 2010
 


Leave a reply