Best screen size for web site.

[Nefrit]

Hello!
What would you say is the best screen size of a website. I've just started on a new one, but i know it wont fit on most monitors. Mine is set to 1280 x 960 which makes it hard to judge on smaller resolution. I hate changing it as is messes with my icons .
So, what's a good size to use in this age?

[charlesh]

In designing sites, you'll have to play with this one a lot. Right now, the standard out there is design to 800x600. Not all of my sites fit that profile, since I am 1280x1024, but I try and keep the design close to about 700-800 px wide and perhaps static 600-700 px tall, though the width is more important since we can always scroll down.

By the way, speaking of monitors and such, I just bought the Huey Pro by Pantone to correct my monitor color. I noticed that the sites I was designing were showing up in all sorts of odd colors on different monitors, even with web safe colors, so I decided to invest in some color correction, so that I know what it should look like on a color corrected monitor. The unit works great and I would highly recommend it.

CharlesH.

[andychev]

By the way, speaking of monitors and such, I just bought the Huey Pro by Pantone to correct my monitor color. I noticed that the sites I was designing were showing up in all sorts of odd colors on different monitors, even with web safe colors, so I decided to invest in some color correction, so that I know what it should look like on a color corrected monitor. The unit works great and I would highly recommend it.

I have this problem all the time. Mainly with one customer who i think has their monitor so bright you could {fill in the blank} I will spend hours designing a site only to be told at the last minute that the colours look wrong on their monitor. I do try an explain that depending on the monitor it will look different but it is often difficult to get through and easier to spend the time making it look right on their monitor rather than everyone elses. The customer is always right! There was one occasion where i did this only to be called the next day and told that they didnt like the way it looked on a colegues monitor 'could i change it'

[Baby Products]

Selecting the best screen size for a website depends on various factors, including your target audience, the type of content, and the design approach you're taking. In today's web design landscape, creating responsive websites that adapt to various screen sizes is a best practice. Here are some considerations:


1. Responsive Design:
- Responsive web design is the practice of creating websites that adjust and look good on different screen sizes and devices, such as desktops, laptops, tablets, and smartphones.
- It ensures that your website's layout, content, and functionality adapt fluidly to provide an optimal user experience regardless of the screen size.


2. Mobile-First Approach:
- Many web designers and developers now prioritize mobile devices when designing websites. This means starting with a mobile-friendly design and then progressively enhancing it for larger screens.
- This approach caters to the growing number of users who access websites on mobile devices.


3. Common Breakpoints:
- While there's no one-size-fits-all answer, some common breakpoints (screen width ranges) are often used in responsive design:
- Mobile: Under 768 pixels wide
- Tablet: 768 to 1024 pixels wide
- Desktop: Over 1024 pixels wide
- These breakpoints can vary based on design preferences and user data.


4. User Analytics:
- Analyze your website's user data to determine the most common screen sizes and devices used by your audience.
- This data can help you tailor your responsive design to the specific needs and preferences of your users.


5. Fluid Layouts:
- Use percentage-based layouts and relative units (e.g., em, rem) for fonts and spacing to create designs that adapt smoothly to different screen sizes.


6. Testing:
- Regularly test your website on various devices and screen sizes to ensure that it functions and looks as intended.
- Consider using browser developer tools or online responsive design testing tools.


7. Accessibility:
- Ensure that your website is accessible to users with disabilities. This involves providing options for text resizing and maintaining proper contrast ratios, which benefit users with varying screen sizes and visual impairments.


8. Progressive Enhancement:
- Start with a basic, functional design that works on small screens, and then enhance the design and features for larger screens. This ensures that the core content is accessible to all users.


In summary, there isn't a single "best" screen size for a website in today's context. Instead, focus on creating a responsive design that accommodates a wide range of screen sizes and devices. This approach ensures that your website remains accessible and user-friendly to as many visitors as possible, regardless of the device they are using.

[rlhanson]

I have the issue of designing art for the web and for print so I can't rely on the Huey which adjusts for lighting, etc.

One technique I have done in the past when I am creating a site for a customer who already has their branding designed is to scan a business card or letterhead and then match that color in my pallete. It seems to help a little.

Andychev - I probably would have sent a few squares of colors for them to choose from. You have more patience than I for sure.

Original question: I use 700 - 800 max and try to keep my main content area under 600px.

[cookie_guy]

Like the others, I aim for a 700, but attempt to design it so that the content area can expand if the screen is larger. If someone has some nice screen real estate its always good to fill it up.

If you use Google Analytics on your site, one of the stats it records is the screen resolution. Most say that theres less than 10% of internet users using 800x600. Some of my clients systems use 800x600 so the stat is skewed to 15% on my current project.

It also tracks geography of customers and their net connection, (DSL or Dialup etc.).

While AWSTATS doesn't require any coding on your page, Google Analytics runs a brief script at the end of your HTML which logs the usage and details to Google. It can cause a slight slowdown now and then, but my clients have enjoyed the very pretty and detailed output.

[charlesh]

I also use Goog and like it because you can nail down to the day, whereas Awstats (albeit pretty stats) doesn't allow you to specify a single day or just a few days, only the month. Plus, conversion tracking and the integration with adwords is kinda nifty, though a bit overrated for my site since if I get an inquiry, I know I've made a conversion.

Regarding what Lynne had said

I have the issue of designing art for the web and for print so I can't rely on the Huey which adjusts for lighting, etc.

I thought the whole Idea behind color correction was to be able to represent on-screen what you should see in print. I've corrected this monitor and you can hold a pantone swatch and it looks exactly like it should. And, yes, the Huey does compensate for lighting, but you can turn that off. One of the things I found interesting was that you can still hold the color correction and change the screen temperature in degrees kelvin for warmer, cooler, etc. The Huey's settings allow you to do this and still maintain your corrected profile.

Charlesh

[rlhanson]

I've corrected this monitor and you can hold a pantone swatch and it looks exactly like it should. And, yes, the Huey does compensate for lighting, but you can turn that off.

Thanks for the additional info Charlesh - I actually had purchased a Huey awhile back and never installed it because I didn't realize I could turn the feature off for lighting compensation.
I just knew it sometimes can be a nightmare trying to color match for printing and definately didn't need any variances on my side.

Thanks again for the correction!

[gael]

its 800px by width, its the standard website size and the height can be up to any length,. you need to be particular about the standards coz there are still people who still uses a 14 inch monitor in their home,. You have to be very particular this instances, to better, serve your viewers.

[jammybush]

its 800px by width, its the standard website size and the height can be up to any length,. you need to be particular about the standards coz there are still people who still uses a 14 inch monitor in their home,. You have to be very particular this instances, to better, serve your viewers.

Thanks gael for the additional info provided. Really useful for me.