Help - Search - Members - Calendar
Full Version: A Question About Screen Resolution?
MonsterSmallBusiness Forums > MonsterWebDesign > Designing Your Storefront
Trooper
Hi,

I just have one question. Does anyone know what most screen resolutions are set at? The reason is I got a new Dell in March and I never checked my resolution, but it was 800 x 600 default. Now, I saw something earlier that MC does their stuff in 1024 x 768. I designed most of my site in 800 x 600 and despite the 100% width some of my design doesn't look good in 800 x 600 but ok in 1,024 x 768.

Should I keep my change of screen resolution to 1024 x 768 or go back to 800 x 600. What do most customers have theirs in?

Anyone? Anyone?

Thanks in advance.
ultimatekeychains
I think alot of this is preference and depends on your user base. I believe the majority of users are still at 800x600. However, that gap is quickly closing as people upgrade to big and better monitors. I have designed my site at 800x600. However, I don't really like how it looks in 1024x768.

Sure I can use 100% for my size instead of 780px... but then the header looks screwy in 1024x768 and fine at 800x600. I'd love to find out how I could modify my header to expand or collapse depending on the width of the users screen. I assume this is done using tables and background images?

MonsterGuru
Trooper,

Great question. Despite the fact that more and more 19" and 21" monitors are showing up on residential computer desks, it is still more common to see shoppers and web-browsers set their resolution to 800x600.

Here in the design department, we still design all MC store sites at 800x600. Why? Because this is the lowest common denominator. If you design for 1024x768, people surfing on smaller browsers will see scroll bars (or maybe not, and think your site is 'broke' and move on) and may not even see your important cart information on the right of the screen.

1024x768 is slowly growing, but right now, the majority of users (50% or greater) still browse at the smaller resolution. It is a safe bet, when designing your site, that you keep the maximum width of graphics and content under 800 pixels, otherwise you jeopardize the visibility of your site for those lowest common denominators.

Hope this helps! cool.gif
MonsterGuru
Ultimate,

About creating headers that scale? The trick we use in the design department is exactly as you assumed. Using tables and backgrounds. You can create a table cell at the very right of your header that contains a simple table background image (that looks like the colors in your header graphic) that is set to scale 100%.

This way, no matter how wide the browser is set to, the header will scale. This looks best and is what we recommend if you wish to maintain a color or background pattern across the entire width of the page.

Good luck!
ultimatekeychains
Thanks, I'll give that a try.
Scorpio


Here's the data from a travel-related page with 3/4Million uniques over the 15 months ending in Oct 2002. It's rough data, but still gives an idea.

screen resolutions
Unique Visitors Percentage

800x600 412205 61.18%

1024x768 153079 22.72%

640x480 74592 11.07%

Other 12682 1.88%

1280x1024 10225 1.51%

1152x864 9483 1.40%

1600x1200 1474 0.21%
ultimatekeychains
I think 640x480 people are used to sites being too big and having to scroll. Also, 1024x768+ users are used to alot of sites being a little smaller. I'm sticky with designing my site for 800x600. biggrin.gif
krazykickz
640x480...lol..that is crazy...that would drive me crazy.

It is good to design on 800x600, but i view on the higher resolution, that big screen drives me crazy.

However, on v4.o it squishes your site in on the 800 x600 resoultion if you do not design on the 780 pixels scale. However, the 780 pixel scale on the higher resolution looks really bad and squishes the site up.

I have talked to Jen about this, but they would have to mark my site as custom to put the transparent image I need in.... sick.gif in which i can not receive updates.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.