I'm making a web page. What browser screen width should I assume most readers are using?

[Bucky]

I know I should make my layout accommodate any size browser, whether their screen is set to 800 pixels wide or 1600 pixels wide, but I'm putting little pictures along the left or right side of the text, anchored to paragraph breaks, and the size of the pictures will affect the flow of the text, so I need to have some clue about the dimensions of browsers looking at this stuff. Furthermore, the size of the font will impact how far down into the paragraph each image pushes, but I guess I can't really adjust for that. I expect the geeks who like teensy tiny text cause they hate scrolling and the legally blind readers who need thumb-sized letters on screen in order to read are used to seeing messed up layouts.

My readership, should I ever have any, will skew a little toward the nerdy. I know, big shock. Will that impact the width of browser I should optimize for?

[Bucky]

1. sigh

you suck

[Urban Prairie]

2. 1024 pixels

is my guess, but anyone who doesn't know by now that they can click "view" and use the drop-down tools to adjust the zoom in/out and text size of web pages must be a real computer n00b or luddite, and that doesn't appear to be an issue for those that you are expecting to visit your website.

[Auggie]

3. 1000 was recommended by Lynda.com

1000 x 700 without scroll

[Bucky]

8. Without scroll? That's html blasphemy!

But yes, advice is centering around the 1024 display. Those 1280 snobs can suck it.

[Auggie]

12. 1000 takes into account the edges of the browser window

[EvolveOrConvolve]

4. If it's techie people visiting your site

Then definitely make it 1,024 pixels wide. I use a 23" widescreen monitor (I'm a total nerd) with a resolution that has it at 1,680 pixels wide, and 800 pixel web pages look tiny to me (and kind of silly).

You could also do like DU and make your site's width dynamic (eg, it stretches to fill 100% of the monitor no matter what the resolution is set to). That requires a lot of consideration during design, but I think makes it more attractive. But, I don't even know if that's a practice that's recommended any more. I haven't kept up on my design guidelines and best-practices.

[Bucky]

6. I was afraid 1280 was becoming the standard. My screen is 1280, but I window at 1000 or so

It's not that hard to be a dumb kind of dynamic, honestly, when you do tables. You just set your columns to percentage values and hope you've correctly added up to 100. Or set thin columns to whatever width and let your biggest column absorb all the variation. This latter strategy still manages to protect your browser's aesthetics for the occasional luddite still using an 800 pixel width.

According to this website ( http://www.w3schools.com/browsers/browsers_display.asp ) 1024 width browsers are down to 20% of the market. But again, not everyone displays their browser windows at full screen now.

[EvolveOrConvolve]

9. That's what I've done in the past

Make the left column a static 200 pixels, then a second column on the right that fills the rest of the screen. That's pretty easy to do with HTML tables. It's probably also possible with CSS, but I'm not all that learned in the ways of the CSS, so I can't say exactly what you would have to do.

[Bucky]

10. Actually this is my first venture into CSS

Nothing heavy duty, just trying to avoid eating myself alive with font tags. Beyond that, I'm purely static--even making my sites in Notepad. But like you my webmaking skills are an eon behind the times. Fortunately there's enough cut-n-paste help sites out there I don't have to learn java scripting. Bah--nine years ago I had cutting edge knowledge of website assembly. Eight years ago I was already way behind the times.

[lunatica]

5. I always say 100% because it fits in the screen no matter how much you resize it.

Create tables with two or more columns so no matter how they resize it the photo will be next to the text it belongs to. You put the text in one column and the photo in the other. You can set the photos to always align along the top of the text or the bottom. Web pages aren't print pages. There are certain things you must sacrifice and one is being dead set on a specific format.

But others probably have more experience than I do in these things. My knowledge is not as good as other's.

[Bucky]

7. Sadly, tis so - I wish I could just force people to do things my way.

I still want text to wrap around the pictures, which are just illustrating a story. Have a blank jump between some paragraphs because of a picture seems unaesthetic to me and would interrupt the narrative flow.

I do appreciate your input, so don't self deprecate. I far prefer the thoughts of the interested amateur, who's going to be more representative of the target audience.

[pokerfan]

11. optimize for 1024

but make sure it looks nice (liquid layout) at any resolution. While monitors (and resolutions) continue to get larger on the desktop you also want to make sure that your page will look good on smaller screens, such as a netbook or even a phone.

I find that my desktop (1920 pixels) too wide for reading if the entire browser is maximized so I normally have it squished to ~1280 (whatever it takes to get rid of the horizontal scroll buttons on DU). I use the left over screen space for smaller windows, processes I'm monitoring, etc.

[Forkboy]

13. I'm using 1440 x 900.

I'm only kinda sorta nerdy though, more so when it comes to Godzilla....

[datasuspect]

14. 3

check the baud rate and see if your computer has a rockem sockem refresh rate.

[hunter]

15. Don't assume anything.

It'll be a cellphone, a big screen, or a little window. You never know.

Check out the style sheets on some of the html books at http://www.gutenberg.org and work out from there, or jump right into css with both feet using some tutorial like this (which was ranked high by google; I know nothing more about it...) which has got the wrapped text effect it sounds like you want:

http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

I like very simple for my own personal websites. I'll get agitated if they don't render well on text only browsers like ELinks. I leave it to the reader to pick font size and such. If I wanted it to look like a pamphlet I'd make a pdf or something...

[Bucky]

17. That's probably pretty sound advice.

But I can't imagine anyone reading what I write while on the bus, in line at the bank, or out at dinner with family.

[quakerboy]

16. 1920x1080

its obvious that you should plan for the future. Perhaps even 3840x2400

[hunter]

18. Oh bother. Lasers writing to each light sensitive cell of your retina is where it's at.

Or maybe you're in a box attached to a genetically engineered body like in the movie Avatar. If that's the case stay away from "the porn site that never ends" especially if you are a guy. People starve to death doing that.

[quakerboy]

19. Seriously.

Why did no one tell me about these things when I was young and needed this info? And I do not accept "because it didn't exist yet" as and adequate reason.

[DarkTirade]

20. While the nerdy do tend towards the higher resolutions...

they also might be stuck checking your site on work/school/the occasionaly cheap-ass nerd like me who uses a refurbished 300 dollar laptop computers that are set for lower resolutions. So I'd try to optimize for the smaller screens, but if you can find a way to use the space of bigger ones too then go for it.

In fact, I probably wouldn't go over 200-250 pixels or so for the width of the button panels, that leaves a little room for decorative stuff and a middle content section even on a 640x480 screen. I think most of the buttons I make are in the 120-150 pixel range. Then again, I usually go for very simple design style, plain colors, etc.