Which Screen Size Should Your Website Work On?
Are You Losing Potential Clients/Buyers Due To Incorrect Screen Size?
When you first learn about website creation, especially from a programmers point of view, you are advised to cater for everyone’s screen size and for people with eyesight/reading difficulties (by using Web Safe Colours for example), but these are not as straight forward to implement as you think!
SCREEN SIZE - SCREEN RESOLUTION
With the varying screen sizes (pixel dimensions/screen resolutions) available these days - such as 1024 pixels wide by 768 pixels high and 1280 pixels
wide by 800 pixels high consisting of 8 bits, 16 bits, 32 bits or 64 bits in formats of PAL, SECAM and NTSC - it is virtually impossible to cater for all
screen sizes.
Years ago the standard screen width was 800 pixels (dots). It then became 1024 pixels, and currently still is (May 2010), but not for long because 1280
pixels is becoming the new standard screen width. To play safe programmers back then would either create web pages that had a fixed width of 800 pixels
or create web pages that were expandable from 800 pixels to 1024 pixels.
This meant that a paragraph displayed on a web page that had a fixed width of 800 pixels, or on an expandable web page that was using a screen width of
800 pixels, would be displayed as short width sentences comprising of 6 lines high for example.
When the same paragraph was displayed on an expandable web page, that was now using a screen width of 1024 pixels, it would be displayed as long sentences
comprising of 3 lines high for example. So the paragraph width was expanded width-wise and shrunken height-wise when used on a screen of 1024 pixels wide.
This scenario is fine for text content because the text follows the width of the screen it is displayed on, but what about media size such as image width
and video width?
IMAGE SIZE
With images (photographs/screenshots) the text process could be applied, but text is unique in the sense that it can be expanded or shrunk (wrapped around
other content for example in order to fit the screen width being used). Images on the other hand are normally programmed with a fixed width, which means
they are either made with a minimum screen size in mind or have to be resized (shrunk) in order to fit onto that minimum screen size. The problem with the
latter is that resizing can lead to blurred, too small, loss of detail, images - They look good on a smaller screen but also look awful on a larger screen.
In other words; If you have a photograph that is 500 pixels wide it will be displayed as 500 pixels wide on a screen that is 800 pixels wide or 1024
pixels wide. It will also look good in terms of size. However, if you have a photograph that is 1000 pixels wide that you want displayed on a screen that
is 800 pixels wide that photograph will need resizing (shrinking) of course.....which can mean the photograph looks blurred etc as described above.
MENTALITY
What's wrong with the above approach is that not every website owner wants small, shrunken, images just because they will fit onto every screen width.
Sometimes they need a bigger image for maximum detail and visitor satisfaction, especially if they are selling small audio/video products or jewellery
for example.
Imagine you are taking a screenshot (image) of the insides of a Computer because you want to show someone where the memory slots are located, therefore
you need an image that shows everything as opposed to just a closeup of the memory slots. Now imagine that screenshot has a natural width of 1000 pixels
in order to see all of the cables, circuit boards and so on but you need it displayed on a screen width of 800 pixels. In this case you would have two
choices:
Either resize the screenshot to fit onto a screen width of 800 pixels or dismiss visitors with a screen width of 800 pixels in order to keep the original,
1000 pixels, screenshot size.
Ignore Smaller Screen Size Visitors
The downside of ignoring visitors with a screen width of 800 pixels, or any other screen widths for that matter, is that you may be losing anywhere from
10 to 50 percent of potential visitors/buyers, if not more. You would not know this for sure until you looked at your website analytics (statistics) to
see what screen sizes your visitors are using. 50% may be using 1024, 26% may be using 1280 and so on.
You could argue “Who gives a hoot about the visitor with a small screen”. “If they are not prepared to move with the times then they are not serious
buyers of my products anyway”. Unfortunately that mentality does not work well for a Wine or Perfume website simply because screen size would be
irrelevant due to their product screenshots naturally being of skinny bottles. Meaning, they would fit onto any screen size.
Keep Smaller Screen Size Visitors
If you really do not want to sacrifice your large screenshots by reducing them in size from 100% to 88% for example, because you want to cater for visitors
who want "Actual" screenshot sizes, I would advise you to think about making two websites, or two website folders, whereby each website/folder contains
web page content that fits its specific screen size.
You could create a folder called 800 for example that contains web page content (i.e. text and images) that can fit onto a screen width of 800 pixels.
Its screenshots would then, ideally, have to be 780 pixels wide or less. Any content that requires a screen width above 800 pixels but no more than 1000
pixels would be left in your public_html (website) folder as normal. Its screenshots would ideally be between 800 pixels and 1000 pixels only.
This means that any visitor with a screen width of 1024 pixels would keep viewing the web page content inside your public_html (website) folder as normal,
but any visitor with a screen width of 800 pixels would be redirected to the 800 folder.....using the following code, which you would place inside every
1024 web page.
<script type="text/javascript">
if (screen.width<1024)
{
window.location="800/index.htm"
}
</script>
That code sends visitors to an index web page within a sub-folder called 800, that resides in the public_html (website) folder, if their screen width is
less than 1024 pixels wide.
Alternatively you could create two separate websites, one for each screen size. In that case the code inside each 1024 web page would be as follows:
<script type="text/javascript">
if (screen.width<1024)
{
window.location="http://www.yoingco.com"
}
</script>
The above code sends visitors to the yoingco.com website (defaulting to its index web page) if their screen width is less than 1024 pixels wide.
THUMBNAILS
Another thing to consider is the use of a Thumbnail (Small Icon/Graphic) to represent an image or video whereby you only display the image or video, of
800 pixels wide for example, when a visitor clicks on that thumbnail. The visitor should then be taken to a separate web page, or pop-up window, that
displays the full sized image or video.
The advantage of Thumbnails is that they save space and are therefore ideal when you have a lot of article text with not much room for full sized images
and/or videos. On the other hand, if you do not have much article text it is better to fill the empty space with images and/or videos.
SPLIT THE CONTENT
To make a web page shorter, height-wise, you might also consider breaking up its content over two or more web pages. A big disadvantage of this approach
though is that many visitors might only read Page 1 of your article text.
Why? Because the juicy, golden nugget, bits of information might not naturally be available to them until they read Page 2 - Page 1 is still too long for
them, even though you have split the main page into two, because it now only contains the necessary (but boring!) introductory content for example. Visitors
might not know, or care!, from reading Page 1 that the juicy bits are just a page away. Hence why it is important to outline juicy bits in your intro.
What I mean by the just said is that sometimes you naturally tail-off (end) your article text with valuable links for example that cannot always be mentioned
in your intro, for whatever reason(s).....perhaps you want to surprise visitors with the valuable links or make it a point that they must read all of your
article text to the end. Either way, splitting content up in this scenario is not recommended.
BROWSER SIZE
Browser size is another factor. Just because a web browser is sitting on top of a screen size of 1024 x 800 for example does not mean the user will always have it maximized to its full screen size of 1024 x 800. They might have it open at a size of 900 x 500 or 700 x 400 for example. This may seem like a tedious detail to consider but the facts are not every user maximizes their web browser to its full screen size.
BROSWER STATISTICS
Besides looking at your own website statistics, from your Google Analytics account and/or from your website's CPanel AWStats, to see what display sizes
your visitors are using; another excellent resource worth looking at is the W3Schools website. It contains 10 Years worth of
Browser Statistics including
Browser Display Statistics and
Browser Operating System Statistics.
The W3 Global Statistics website should also be a
consideration.
As of 10th May 2010 those statistics show that 76% of web browsers use a Screen Resolution (Screen Size) of 1280 pixels wide (36.7%) and wider (39.3%),
compared to 20% using a screen resolution of 1024 pixels wide. Windows has more than 85% of the Operating System market (Windows 7 has 16.7%, Windows
Vista has 13.2% and Windows XP has 56.1%). And the web browser that most people use is Firefox (46%) and Internet Explorer (IE8 has 16.2%, IE7 has 9.3%
and IE6 has 7.9%).
DESIGNER VS CUSTOMER
If you are designing a website for a customer you sometimes have to guide that customer by not being afraid to tell them their ideas are not practical
and so on. Do not be one of those designers who say "but that's what the customer wanted". If the customer is wrong, usually because they know nothing
about website design, user interaction and internet marketing, you must advise them and explain why you feel an alternative will work better.
A classic example is using Flash Animation. If you want maximum visitors you should either create a static website with some flash animation or simply
a static website, but definitely not a pure flash animation website. Why? Because not all visitors will have Adobe Flash installed. Take it from me, a
computer engineer who goes around the houses fixing computers on a daily basis, that not everyone has Adobe Flash installed. The same applies to
JavaScript and Sun Java (JRE).
A lot of people still have either Windows 2000 or Windows XP installed with out-of-date security and standard features, not to mention corrupt/broken computers, normally because their computer cannot cope with extra updates such as installing Flash and Java. It slows their computer down. On top of this they might not be able to afford the latest computer or monitor screen. Hence why they still use a 800 x 600 screen size (old monitor screen), perhaps with Internet Explorer 6 installed. Remember some visitors might come from poorer countries than yours.
CONCLUSION
At the end of the day it boils down to two things - The percentage of visitors using the smallest screen resolution and the amount of media content versus
text content.
With regards to the percentage of visitors using the smallest screen resolution - If 32% of your visitors use a screen resolution of 1024 x 768, 59% use
1280 x 800 and 6% use 800 x 600 for example you should design for 1024 x 768 simply because 800 x 600 visitors would be a dead audience whereas 1024 x 768
visitors still have a percentage worth designing for.
When designing for 1024 x 768 make your web page width between 960 Pixels (Minimum) and 980 Pixels (Maximum). 1000 Pixels (Minimum) to 1160 Pixels (Maximum)
when designing for 1280 x 800.
With regards to the amount of media content versus text content - If you have mainly text content you should design for 1024 x 768, or even 800 x 600, but
if you have large media (images/videos) content you should try and design for 1024 x 768. If this is not possible, design for 1280 x 800 instead. Or make
your media content smaller.