Wildwood Forest Studios
How does the display resolution setting affect the way my web site looks?
Resources
Intro
How does a web site work?
Buying a Domain Name
Beware Domain Scam !!
How does e-commerce work?
How do I advertise my site?
What are the SEO Basics?
Are there any cyber-laws?
What will the price tag be?
Can I just build my own site?
Can I manage my own site?
How do I set up e-Mail?
How about Real Estate sites?
What if I need help writing?
Display resolution settings?
What fonts can I use?
What is an RSS feed?
HTML versus CSS layouts?
What style should I use?
display resolution setting

You will notice that some web sites have blank space on either side of the content area, and some seem to fill the screen almost to the edges.

Of course you would want your site to use as much screen space as possible, but screen (or display) space is relative to a monitor setting chosen by each viewer. Since you have no control over this setting, your web site will need to accommodate all of your target audience. Then toss in the fact that monitor width/height ratios vary and it becomes even more complicated.

So how do you choose which setting to optimize your site for? There is not an easy answer, but let's explore the options?

In the not-to-distant past, Wildwood's policy was to advise our clients to opt for a layout that uses a width of approximately 780 pixels to display the main content of the page. Statistics showed that an overwhelming majority of users had their monitors set for 1024 x 768 dpi (dots per inch), yet there were still many viewers using the lower resolution of 800 x 600 dpi, and some using a higher resolution of 1280 x 1024. To accommodate all three of the above, we put the main content inside of 780 pixels. This left a margin to the right and left that would appear smaller or larger depending on the viewer's display setting.

Take a look at the following example ...

The site was designed in a layout with the main content within a width of 780 pixels with a green background that would fill in the outside margins.

Here is how it looks on 3 different monitor settings.

set to 800 x 600 dpi
Everything looks bigger,
but you see less of the
entire layout
set to 1024 x 768 dpi
Everything looks a bit
smaller, but you see more
of the entire layout and more
of the green background
set to 1280 x 1024 dpi
Everything looks a even
smaller, and you see more
of the entire layout and even more of the green background
 
After 2010 the Trends Changed...
In January of 2009, statistics began to show that there were very few people still using 800 x 600 dpi settings, so unless a client felt that their audience would consist of those few, we began designing more for a width of approximately 960 pixels to contain the main content. For a majority of viewers this would mean filling the width of their screens.

Looking at an example ...

The site was designed in a layout with the main content within a width of 960 pixels with a gray background that would fill in the outside margins.

Here is how it looks on 3 different monitor settings.

set to 800 x 600 dpi
Viewers have to scroll also
from left to right ... not good,
but affecting very few
set to 1024 x 768 dpi
Layout fills the screen
set to 1280 x 1024 dpi
 
2011 Trends...
Brandon Jones summed it up nicely:
"... the traditional “screen” that people view the web through has undergone an explosion of variety… no longer can we expect web-surfers to be on something close to a 19? monitor with a resolution somewhere between 1024×768 and 1280×700. Screens nowadays come in all shapes and sizes, from iPhones (and smaller phones) to 60? HDTVs. It’s not just resolution that can vary wildly though; the very aspect ratio of a screen (even on the same device like the iPhone) can change with the flick of the wrist."
So now we have another variable we are forced to consider .... aspect ratio.
 
We are convinced that in 2011, 1024x768 screen resolution still represents the largest percentage of available options. Therefore we will continue to design with this in mind.
 
Another Option ...

There is another option. That is to use a fluid layout where the width is not defined in pixels but in percents. Then we set the width to "100%" and it automatically fills 100% of the screen no matter what setting the viewer has. The negative to using this method is that it must be utilized with a less complicated layout and fewer images. Images have fixed widths, so you must be careful that the width they require is not exceeded by a smaller resolution setting.

At what resolution is your monitor set?



How do you set your resolution?
Win 7 users
Win XP users

Win 2000, NT, ME, 98 users
Win Vista users
Mac OS X users
Mac 9.x users

 

Win 7 users:

Click the Start Button .

 

Click Control Panel.

 

Under Appearance and Personalization, click Adjust screen resolution.

Click the drop-down list next to Resolution, move the slider to the resolution you want, and then click Apply.

NOTE: It may indicate the reccomended setting for your monitor, which may be different from that in the screen shot here.

 

 

Click Keep to use the new resolution, or click Revert to go back to the previous resolution.

   
   

Win XP users:

Right-click on your desktop and select
Properties from the pop-up menu.

In the Display Properties window, select the Settings tab.

Under Screen resolution, drag the arrow to the setting you prefer. Click OK to set.

ADVICE:

  • 1024 x 768 is the setting most web sites are designed for
  • Higher settings are best for viewing high quality photography or DVDs

Don't be concerned if your monitor goes black for a few seconds.

Click YES when prompted.

   

Win 2000, NT, ME, 98 users:

  • Click the start button in the lower left corner of your screen
  • Select settings and click control panel
  • Double-click display and select the settings tab
  • Adjust the slider to your preferred setting
  • Select OK
  • Don't be concerned if your monitor goes black for a few seconds.
  • Click OK if prompted to re-boot your computer
 

Win Vista users:

  • Open Display Settings by clicking the Start button, click Control Panel, click Appearance and Personalization, click Personalization, and then click Display Settings.
  • Under Resolution, move the slider to the resolution you want, and then click Apply.
 

Mac OS X users:

Click the Apple button and select system preferences

Select the Displays icon

In the list of Resolutions select the one you prefer

 

Mac 9.x users:

  • From the Apple menu, select Control Panels
  • If your option is "Monitors & Sound":
    • Click the Monitor icon
    • From the list of resolutions select the one you prefer
    • Your screen resolution will change
  • If your option is "Monitors":
    • Set the Show pull-down menu option to "Recommended"
    • From the list of resolutions select the one you prefer
    • Your screen resolution will change

 

© Wildwood Forest Studios, LLC
Alpharetta, Georgia