Why are some websites too big to fit across my computer screen?

A client and friend of mine has recently mentioned concern over the width of her website (which I designed and built.)  Basically, she thought the website was too wide because it didn't fit on her computer screen.  I tried to explain about the standards of screen resolution, but I think the technical jargon formed a barrier between what I said and what she heard.  So, for the sake of all my non-techie friends, I offer this idea in layman's terms:

Pixels - dots of information

Computer screens, like older printers, show information as a series of dots.  For instance take a look at these two pictures:

         Here's a circle (think of this as zoomed out):         and here is the same circle zoomed in          Looking at the zoomed in version, we can see that the circle actually is a bunch of square dots. 

At the risk of over-simplifying the issue, let us call each of those square dots a pixel. Here's a bonus question:  Looking at the zoomed in version of our circle, if each pixel is represented by a square, then how many pixels were used to create the circle? 
(Hint: the black pixels are grouped in bunches of  either 1, 2 or 3 pixels)

Did you count 32 pixels?   If so, then you didn't consider all the White pixels inside and around the black ones. It takes both the black and white pixels to make the picture.

So what is the difference between viewing the zoomed out circle verus viewing a zoomed in version?
    1) When we zoom in, we see more detail, but the circle takes up more space on our screen
    2) The zoomed out circle is smaller and perhaps more difficult to see clearly.

In a nutshell (and over-simplifying) :  

        A lower screen resolution can be compared to zooming in on a picture.
            1) You see more detail
            2) The picture looks larger on the screen
            3) Not as much information will fit on your screen

        A higher screen resolution can be compared to zooming out of a picture.
            1) You see less detail
            2) The picture looks smaller on the screen (if the picture was text, it might be harder to read.)
            3) More information will fit on the screen.


That's all well and good, but why are some websites so big?


There are no real rules about how to create a website, but there are standards.  Typically standards are either set by the industry or are dictated by popularity. And, as computers have become more powerful, the industry standards have gone up.

For instance, improved standards for both computer processing speed and Internet connection speed has changed the way we use email. It used to be just text, because images took too darned long to send.  These days you can attach several pictures, music, Flash files and even video clips to your emails because most people have the more powerful computers and the fast internet connections to accept the load.

The same thing happened with screen resolution. In the 1980s and 90s, the standard resolution was 640 by 480 pixels (the grid of information on your screen was set to be 640 pixels wide by 480 pixels tall.)  Many computers had higher (and lower) resolutions available, but this was what the majority of people were using.

Around the turn of the century that standard moved to 800 by 600 pixels.  More people were using the higher resolution. Computer manufacturers began using the new resolution as the default setting. Again, you could change your resolution back to 640 by 480, but when you bought a new computer, it was already set to 800 by 600. And again, higher resolutions were available, but not so widely used.

Then around 2004 the resolution moved again, this time to 1024 by 768 pixels. Once again, as the new standard grew, computer manufacturers began making this the new default setting. In 2009 more than half the computers accessing the internet are using a HIGHER screen resolution than 1024 by 768, but it is currently still the standard. In a few more years, the standard may change again.

According to W3Schools Web Site (an internet resource for programmers) about 93% of computers using the internet now are set to a screen resolution of 1024 by 768 or higher.  4% of computers still use the 800 by 600 resolution and 3% is unknown.

So what happened is that the standard for websites changed to accomodate the standard resolution of 1024 by 768 pixels. It is considered acceptable to design web pages taller than will fit on the screen and so scrolling down to see more of the page is a normal practice. However, it is generally considered unacceptable to design a web page wider than will fit on the typical scrreen: 1024 pixels ( I usually design for 900 or 1000 pixels wide, depending on the style of the website.)


Websites still look too big for my screen. So how do I change my screen resolution?

If websites typically are too wide for your computer, then you very likely have a lower screen resolution - probably 800 by 600 pixels. However, your screen resolution can almost certainly be adjusted. In windows, changing the resolution is pretty simple. Try the following (You might want to print this page out first):

1) On your desktop right-click your mouse in a blank space (no icons). A menu box should appear. Choose ‘Properties’. This should open a little window entitled ‘Display Properties’ which has several tabs across the top.

2) Click the tab named ‘Settings’.

3) About half way down the box you should see an area named “Screen Resolution” with a slider bar in it. The more you move the slider to the right, the higher your screen resolution can be adjusted (in the picture, the resolution is set to 1680 by 1050 pixels.)
See if you can slide yours over to 1024 by 768 pixels. If you have an older monitor, it may not go higher than it's current setting, but give it a try.

4) Click the “Apply” button. The screen will go blank for a few seconds and should come back on with the new resolution. You’ll see a message box that reads “Your desktop has been reconfigured. Do you want to keep these settings?” IF THE SCREEN GOES BLANK AND STAYS BLANK, don't panic. The resolution should revert back automatically in 15 seconds.

5) If you click ‘Yes’ then you’re done. Click the Okay button to close the Display Properties window. If you don’t like the resolution you’ve chosen, then either click “No” and it will revert back to the old setting OR do nothing and it will automatically revert back to the old setting in 15 seconds.

If all goes well, you should now be able to view those websites without having to scroll sideways.  You'll also see a difference in the way other programs look on the computer screen.  Remember, if you decide you just don't like it, you can follow this same procedure to put it back to a lower resolution.

Enjoy!

 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this post.
Comments

  • 4/30/2011 5:12 PM Alex wrote:
    This article did not help at all. My resolution 1920x1080and I should be able to view any website BUT some still run off the right side of my screen.

    There has GOT to be another reason than resolution. I am using Firefox browser and everything worked fine until a week ago and no, I did NOT change anytime on this end,

    I really hate needing to scroll sideways to see the right edge of the site :-9
    Reply to this
    1. 6/8/2011 7:22 PM Webmaster wrote:
      Sorry to hear of your screen troubles, Alex

      You may not be aware that many browsers have a "zoom" function which enlarges/shrinks the perspective of the website you're viewing. Perhaps this setting needs to be checked. In my Firefox, the setting is under the View Menu.

      thanks,

      Dana
      Reply to this
Leave a comment

Submitted comments are subject to moderation before being displayed.

 Enter the above security code (required)

 Name

 Email (will not be published)

 Website

Your comment is 0 characters limited to 3000 characters.