Afternoon readers,
The subject of this next post is yet another aimed at educating business owners and other people on a slightly more technical aspect of web design, but one that is asked about a lot by new clients after a launch of a new website or during the testing phase of a project. If the word technical has put you off reading any further, please don't go...it really is a basic subject and we're sure you'll learn something by the time you've finished reading. It certainly is "stuff you need to know".
That subject is the question - "why doesn't my website fill the entire screen?".
The answer is a display setting on your computer called "screen resolution".
What is screen resolution?
Well, it's simply the number of pixels that your monitor can output on a particular setting. A pixel is a unit of measurement that defines accuracy of an electronic display, you'll see it used in descriptions of LCD televisions, and digital cameras (mega-pixels) as well as computer monitors. The higher the number of pixels, the more accurate the image / picture / photo will be.
When it comes to computer monitors, the screen resolution is measured by the number of pixels wide it can go by the number of pixels high it can go. This will be represented by two numbers, width first, height second, for example 1024 x 768.
To find out what your screen resolution is (on a Windows XP computer atleast), right-click on your desktop (that's the main Windows screen, that has your wallpaper on it) and choose "Properties". Then select the "Settings" tab, and in the bottom left of that window it'll tell you - complete with a slider to change it as well.
How does this impact on a website?
Unfortunately for us web designers, there are many factors that can affect the display of our work that are completely out of our control, screen resolution being one of them. This is because it's a local setting on each individual computer / monitor, and just think how many millions / billions of computers there are in the world today!
There are currently about 6 different screen resolution sizes being used... the higher the resolution, the more pixels there are to fit onto the screen, and therefore the smaller a fixed-pixel item (such as a website) will appear, and the more space there will be around it.
How do we get around this problem?
There are three ways of solving the issue.
- To use a fluid web design, or not set any fixed-widths to the items on a website. This option isn't preferred by many, as it doesn't give very good control over how each individual item on a website relates to the item next to it. Often leads to a very "stretched" looking website when viewed on a higher resolution.
- With the majority of websites now developed with stylesheets, or CSS technology, a lot of the larger websites often go for a method that involves detecting which screen resolution the visitor is using, and rendering the web page with a different stylesheet, that determines different widths. Whilst a perfectly suitable option for large website projects with large budgets, due to the longer development and testing time this method requires, costs will always be higher, and makes this an unsuitable option for many start-up and small business websites.
- The preferred method used here at Tippabush, is to build the website to a size that will be viewable by the most users. By going for a smaller size, it is still viewable to those with larger resolutions. Using a larger size, those viewing it on smaller resolutions would end up having to scroll across to view the right-hand side of a website - and this is something that users simply won't do the majority of the time.
Current Screen Resolution Stats
By analysing current statistics, we can tell that designing for 800 x 600 pixels, often called the 800px rule, is the best option. The below statistics were taken from the last two weeks from TheCounter.com.
- 1024 x 768 - 53% of internet users
- 1280 x 1024 - 22%
- 800 x 600 - 13%
- Unknown - 5%
- 1152 x 864 - 3%
Therefore, designing for 800 x 600 means that a website will be viewable by 91% of users (sum of all users using that resolution and everyone above it). This is likely to remain the standard for another few years yet, as people only usually get a higher screen resolution on buying a newer computer, and I would say that 800 x 600 would have to drop to below 10% of internet users, before many web designers start to design mainly for 1024 x 768.
Want to see what we're talking about?
Browse to our website www.tippabush.co.uk, which is designed for 800 x 600, and try reducing and /or increasing your screen resolution as described above (you may well get a warning that your screen will go blank for a few seconds), and see how the size of the website changes.
Another reason for 800 x 600...
Another major reason for designing for this size is what happens when a user decides to print out your website, or a page from it, which many people do for future reference, order confirmations and other reasons.
With any web page designed for a larger resolution, when it's printed, sections from the right-hand side will no doubt be pushed onto another page, wasting paper and annoying users (we've all been there!). However, one designed for 800 pixels wide, fits perfectly onto the width of an A4 sheet of paper.
Again, there are alternatives to control this, which leads us nicely onto our next blog topic...print stylesheets.
Please contact us for any further information on this subject or to make enquiries.
