Some people have asked me about what sizes they should start off with to design their website.

Here’s a very short tutorial I wrote to answer that question.

Firstly, determine what screen resolution that you expect viewers of your site will have. If you don’t know what screen resolution is, I’m surprised you’re in this course.

In the world, the minimum screen resolution for which web designers expect users to have is 800 x 600. However, the move towards bigger screens is in process and a fair share of users are using the 1024×768 screen resolutions too.

So it all depends if you want viewers with 800×600 to have to scroll horizontally to see the right side of your website, if, you designed your page with 1024×768 users in mind.

Naturally, if you’re designing for 1024×768 users, you’ll have a bigger canvas to play with. Once you’ve decided, here are the sizes that you should be using when you start up a new file in Photoshop.

800×600 = anything lesser than 780px(width) / anything(height)
1024 x 768 = anything lesser than 1000px(width) / anything(height)

Using this width will ensure that the website you designed will not have a horizontal scrollbar at the bottom. This is because if you use 800 as the width, the browser’s scrollbar(which is approximately 20px wide) will cause the site to have a scrollbar at the bottom, which, is plain ugly and unprofessional looking!

As for the height, well, most users do not mind to have to scroll vertically down as many people have the scroll mouse now.

However, if you’re a perfectionist, keep in mind how you want your site to look like before any scrolling is done. Will a picture be cut off unpleasantly? Or will your splash page have that little extra below that people have to scroll down to see? If you are that particular, try limiting the height of your overall webpage to be at least 200 pixels less than what resolution you have chosen.

That’s basically all, if you have any questions, feel free to comment this post, or email me and I’ll try to answer them.