Mocking up a mobile site - Any good tips / programs?

[Rob_B]

I'm currently mocking up a mobile site (to possibly be turned into an app) I have 0 HTML/app experience so my part is just to create a feel for it, I'm currently using Excel to do this but wondered if there are any good guides/tips/software that can help? Currently I have a grid & I have to create new tabs, obtain & shrink images, add links etc & it just feels like there must surely be a simpler way to do things!

The general idea is to have a homescreen of 9 tiles, each tile links to another page with further tiles (as many as needed) for that sub category, each of these tiles then links to a page, my idea is to keep it 3 clicks deep at the most to get whatever you need. Nothing out of the ordinary, I'm not trying to create the most amazing &original site ever!

Has anyone done anything similar & can give me any ideas?

Cheers folks!

Rob

[kalniel]

Balsamiq mockups is very handy for this kind of thing:

http://balsamiq.com/

[pauldarkside]

Balsamiq mockups is very handy for this kind of thing:

http://balsamiq.com/

Chrome throws up: "balsamiq.com contains content from <snip>, a site known to distribute malware."

False positive?

[finlay666]

The general idea is to have a homescreen of 9 tiles, each tile links to another page with further tiles (as many as needed) for that sub category, each of these tiles then links to a page, my idea is to keep it 3 clicks deep at the most to get whatever you need. Nothing out of the ordinary, I'm not trying to create the most amazing &original site ever!

To follow on from this I would suggest actually aiming for 2 clicks at the most to do most things and 4 for other tasks

Also mock up on paper what you want to do scale wise for a device, you can't fit very much in 3.5" diagonal space

[kalniel]

Chrome throws up: "balsamiq.com contains content from <snip>, a site known to distribute malware."

False positive?

Balsamiq are kosher - we use them at work.. as for the website I don't know. They were hacked a month ago and they might still have a warning based on that. Details:
http://news.ycombinator.com/item?id=3075405
http://pastebin.com/gvTgYEEd

[Rob_B]

Cheers guys, I'm not looking to spend anything yet as this is just a side project

[scaryjim]

As fin says, paper mock ups - even if it's just a very rough scribble of locations - will give you a feel for the space you're working in.

Decide what screen size and resolution you're targetting: if you're aiming for general smartphones you'll need to aim for ~ 3.2" @ 320x480 screens; for higher end smartphones you can head more to 4" @ 480x800.

Personally I'd use a paper scribble for the rough layout; drawing a box of the right size on the paper then filling in the spaces in pencil; then I'd use a graphics package like Paint.NET (or indeed you could just use paint!) to create a blank image of the appropriate resolution and set up the buttons etc,; that'll give you an idea how what size your fonts will have to be, how the colours work together, stuff like that.