Browser Display Statistics

Most common browser display width

[Lynne]

Hello :)

Just wondering what you feel the most common browser display would be?

On W3Schools.com it says:
".. most users are using a display with 1024x768 pixels or more, with a color depth of at least 65K colors."

The statistics showed only 20% at 1024x768 with 76% higher.

Interested in feedback ... what do you think is the most common setting? What do you use and optimize for?

Thanks & Regards

Lynne

[tedster]

Things are going in two different directions today - but the larger screens are often used by people who do NOT run their browser at full screen, so you really need to look at window size, not screen size.

And the other direction I alluded to is the mobile, handheld or smartphone. That's a small screen challenge.

For most sites I've built lately, I assume 960 pixel width. If I actively want mobile users, currently I create a mobile site especially for them. Otherwise, I just slough of that responsibility to the mobile browser builders.

[Fotiman]

I agree with tedster... 960px width is probably the ideal width to develop a site to today.

[tedster]

Google Labs has a helpful page on the topic of window size distribution for users:

[browsersize.googlelabs.com...]

[Lynne]

Thank You Tedster & Fotiman!

I wrote to my client who has a beautiful image she wants showcased as an opening page then leading in to the main website. I suggested the image be no wider than 960 pixels and she sent me back a link to a website with an image background measuring over 1500 pixels wide and said she wants me to do it that wide! So she's going wider and I'm wanting to go smaller :-S

I did notice with the link she sent me that the background had a logo area (incorporated in the background image - it isn't an image over top) that is centered even though my browser width is 1152px.

Next question: How do you center a background image rather than have it come out from the left? The coding for this seems to be in a separate css style sheet. I've tried to use "center" in my css but it doesn't seem to work(?)

Thanks so much guys! It can be difficult when you have a client who knows what she wants, but I'm struggling to do it within the constraints we face as webdevelopers.

Regards,

Lynne

[Lynne]

Ooops, no cancel that ... it does center ... I'd been working with an html page that still had the image coding in the body so once I removed that and it drew on my separate css file, it does center the image.

However at 1500px wide it cuts off the title :-S

... And she wants the title bigger too :-S

How do you handle clients wanting it their way when you know many people won't see what she sees on their computer screens and that the website title will be cutoff! I have advised her but she is giving me directions to continue doing it her way anyway!

Regards

Lynne

[tedster]

If the client doesn't acknowledge your expertise, then the relationship is already in trouble. If you don't want to bow out (or you legally can't) try sending them the link above to Google Labs.

[pageoneresults]

website with an image background measuring over 1500 pixels wide.

When you say background image, you're referring to the image assigned to the body and/or html correct?

I've been faced with similar issues and in the end, we were able to use some JavaScript and dynamically size the image based on the users viewport dimensions. That gets a bit tricky and required some CSS layout stuff to make it all work.

Browser Resolutions are just the first step in identifying available screen estate. Those viewport dimensions are what counts and most are going to be less than.

I just went through stats for 5 sites and averaged things out. 1024x768 still leads the pack but not by much. That 1280x1024 is almost tie for 1st.

1024x768
1280x1024
1280x800

Do you have a fixed width or fluid design. It sounds like you may need a little fluidness to accommodate those on higher resolutions and larger viewports?

[Lynne]

Thanks Tedster & PageOneResults,

Hmm, yes Tedster it is a difficult situation and after you sent me the link this morning to Google Labs I did forward it on to her and suggest she look.

PageOneResults, hi ... I don't feel I will have any issues with the main web design. The background image I'm alluding to is an intro page where people will click to enter the website. I personally see no need for this but she has spent megabucks on an image she wants to be fully showcased and she decided she wants it as an entry point to the rest of the website.

The difficultly I have is the center of the design is circular (and the dimension overall rather square), so if I use css to stretch it to fit any browser width, the circle becomes oblongated and she doesn't like that. So the only other way I felt I could do it was to size down the image, place on a colored background and center. BUT then as mentioned above she is now looking at the image width being around 1500 :-S

If you have any other ideas it would be greatly appreciated, otherwise I'll make sure her actual site is all okay (by coding it fluidly) and if she gets enough complaints that people either aren't seeing the intro page as you'd expect, she might actually concede I knew what I was talking about LOL.

... sometimes you've just got to smile, do what you can, and leave the consequences with the person making the decisions ... it this case it has become her call !

Many thanks! :)

[tedster]

If you scale the height and width aspects proportionally according to the available real estate, then you will not distort the image.

Or, you can just ask her to look at her existing idea on an assortment of other computers at your neighborhood Best Buy or whatever.

Also note - you need javascript to measure the available client width and height, and then to do this scaling.

[Lynne]

Thanks for the tip!

Googled for the javascript you mentioned and that could be the answer, thanks so much :)

She has responded and said she found the google labs link very interesting. She suggests though she would rather cater for those with a larger screen and doesn't think it's be too much bother for someone with a smaller screen to scroll ... hmmm, I'll look into javascript and scaling first I think!

Thanks again!