Best practice - site development

Hi guys

I am working on a really cool site for a game and I need some advice. I have a good understanding of basic HTMl and CSS. I have reasonable design skills also.

I am up to pro typing my interface and I have a couple of questions.

  1. I am using illustrator and the grid system to get an idea of who the site will look. I was using 960 grid as a way of streamlining my workflow (in terms us using the template grid file, not coding anything yet) and I want to find out if I am on the right page. We know roughly what we want, so rather than go into details, should I just present colour blocks of where different elements might sit?

What are some other tools? I am very familiar with illustrator and I feel some of the other mock-up tools might do the same thing. I can use it quickly. again, just checking I am on the right page. I would of course use css and HTML to create the final layout. I really want to present a bunch of interface ideas so should I start with basic layouts?

  1. Mobile. I am looking at the ‘golden grid system’ to take advantage of the @media tag. Should I design for an old nokia first and scale it up? Can my intail template designs be for a modern browser and work backwards? Am I making sense?

  2. What about doing mock up in ccs3. I did a tutorial about that here I think. Is that the way to go, just do the mock ups in css 3 to begin with and float everything around?

Thanks for your help. I am really excited about my project and can’t wait to share it with you all, it’s going to a killer page/concept.

  1. I use this: http://www.omnigroup.com/products/omnigraffle/ Though it’s for mac (not sure what OS your run)) and it is not free. I also found this: http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/

if they are mock tools I got Balsamiq now.