Today we got asked this question, and thought it would be worth posting:
What size should I design my website?
The answer varies depending on who is going to be viewing the website and, more importantly, what size screen they are using. As a general rule, your website should be as small as it has to be to fit comfortably in your viewer’s smallest screen resolution without creating a horizontal scroll bar.
As of today, the average website visitor (typically more than 90-95% of your visitors) is using a screen resolution that is at least 1024 x 768 (according to http://www.w3counter.com/globalstats.php). This is the standard resolution for a 17” monitor. The larger the screen, the larger the resolution that can be displayed.
To find out what size screen resolutions your visitors are using, you can install Google Analytics on your website. This code will also tell you what browsers they are using and other helpful information. The following is a screenshot from the Google Analytics for FlipStudios.com. You can see the break down of the various screen resolutions for our website visitors.
Rule of Thumb
A good rule of thumb is that you create your website design with a width of 960px. This will allow for some space on either side of your site design, which will give your website visitor a sense of balance to the design. This also allows you some additional benefits that we’ll cover in a future article.
The height of your site really depends on how much content you have and how much you want your website visitors to scroll up and down to view your website content. Generally 1500px is a good standard height for your website content, but keep in mind that the less scrolling that has to take place, the more likely your website visitors are to see the content you are providing.
Display Important Info “Above the Fold”
As with print design, it’s a good idea to display the most important text or images “above the fold” or “above the scroll line”. A website user at a resolution of 1024 x 768 will see about 550px of your design without having to scroll down to see more, so try to design the important elements of your design within the top 550px.
Design Templates
Click below to download a Photoshop or Illustrator design template to help structure your website design files:
Download Adobe Photoshop template
Download Adobe Illustrator template
Tags: google analytics, photoshop, resolution, website design
Ta very much for making this post. Could prove to be useful in the near future!