Another DIY web site question

Hi Everyone

I have been reading with great interest the various recent threads about building your own web site. They couldn't of come at a better time as I am just at the stage where I am ready to publish my own.

Unless I have missed it somewhere, I don't think it has been mentioned about page size, apart from a link that mentioned the average size of a monitor nowadays is 19 inch's, so therefore a page size of (off the top of my head) 1024 x 768 is needed.

I am working on a laptop with a 15 inch screen and have made my site to fit comfortably in that. Amateur Photographer magazine mention that for a 15 inch monitor, my pages should be 640 x 480, so this is the size that I assume I should set. The default size on my web building program is 800 x 600.

So my question is 'What size should I set my pages at, bearing in mind that my one pet hate is a site that I have to scroll around on to read?'

My images fit comfortably within my monitor (another pet hate) and I would like to keep them that way.

Your help will be much appreciated.

Kind Regards

Stoo

19" is average? Must have been a bloke who posted that!

A brand spanking new PC might come with a 19" monitor but there are zillions of 15" and 17" jobs out there and just as many laptops.

You can safely assume a 1024 pixels wide screen, knock off a few for the browser border and a bit of screen showing and call it 980(ish). Even gluttons for pixels like me with dual 19" monitors do not want the browser too wide as it makes it difficult to read. APUG has it about right to my mind.

If you do a google, I'm sure there are statistics somewhere that show the number and resolution of screens in use around the world.

Have fun, Bob.

You also need to be careful comparing types of monitors. Measurements for CRT monitors perversely include areas beyond where the image is visible. IIRC A 15 inch LCD monitor has approximately the same viewable area as a 17 inch CRT monitor.

800x600 may be a reasonable compromise.

Personally, I'm a firm believer that the web is supposed to be browser-independant. What I mean by that is that the size or resolution that the viewer has their screen set to shouldn't affect your site. I'd agree that horizontal scrolling is bad but vertical scrolling is fine. If you don't want to have to scroll at all, that's fine but remember that some people (such as myself) have big monitors and it drives me nuts when I go to a site that only uses a small part of my browser window. What particularly drives me nuts is when I have a ton of unused horizontal space on my screen yet still have to vertically scroll to read a thin column of text, particularly if the font size looks tiny on my monitor.

How you do that is by not using fixed font sizes and making sure that at least one element in your page has a width and/or height that can "stretch".

Now obviously, that doesn't help you with photos because the images will have fixed pixel dimensions. I'd say keep things under 600 pixels wide so that you can be reasonably sure that you won't have to horizontally scroll even when viewed at 640x480. Actually, I'd be tempted to go one step further and only include an image that big (or possibly, even bigger) as something that's linked from a smaller thumbnail. On my site, I use 150x100 thumbnails and I also have a 300x200 size image that I use for inline images (included with text). Both of those images link to my bigger size; 600x400. I used to offer a 1200x800 size but due to filesize considerations I eliminated that.

Much of that reasoning has as much to do with being concerned with filesize as it does with design. I prefer having a responsive site that comes up quickly (can still be a concern even with broadband) that offers me the option to look at a bigger version of images that interest me. The load time concern isn't as much of an issue with broadband but consider that a lot of hosting companies charge for bandwidth usage or have bandwidth limits so keeping the file sizes down will avoid excess charges from your hosting. Plus it keeps your disk usage down which means you can put up more images with the same amount of disk space, which is why I dropped my larger image size.

MattKing said:

You also need to be careful comparing types of monitors. Measurements for CRT monitors perversely include areas beyond where the image is visible. IIRC A 15 inch LCD monitor has approximately the same viewable area as a 17 inch CRT monitor.

800x600 may be a reasonable compromise.

Click to expand...

That's why personally I'd recommend to only deal with pixels when talking about screen dimensions. That 17" CRT could be set at 640x480, 800x600, 1024x768 or 1200x1024 (which I find too small on that size monitor) to name just the common resolutions. The physical size of the screen is meaningless, it's the resolution that determines how much you can see on the screen.

It might take more time, but I'd suggest a touch of CSS to control the sizes varying on the computers' resolution.

frugal said:

That's why personally I'd recommend to only deal with pixels when talking about screen dimensions. That 17" CRT could be set at 640x480, 800x600, 1024x768 or 1200x1024 (which I find too small on that size monitor)

Click to expand...

Bob, Matt, Frugal and Jadoto.

Thank you all for your replys.

When reading my original thread again, I almost fooled even myself that I know what I'm talking about when it comes to web site design, so I feel I must mention that I do not.

I followed Bobs advice first and googled on the subject of page size etc. I am afraid that it was information overload for me, and the head began to throb!

Frugal, I thank you for wording your answer so that even someone like myself can begin to understand how page design works. When I mentioned my pet hate, scrolling, you assumed right that it is the horizontal variety that I dislike, though I am designing my personal site to be scroll free, i,e: have a 'continue' link if neccessary, though I doubt if it will be.

I feel that as Matt mentioned, I should play it safe with a 800 x 600 sized page for a number of reasons. Firstly, my web design company chose this as the default size and it is already built in the design format builder, so one can only assume that their feeling is that this would be the favoured size to go with. when I googled on the subject, screen res of 800 x 600 seemed to crop up the most, and was favoured by all. and the fact that I can design my site and view it on my own monitor with no real problems is of great importance to me.

One bit I did not quite understand was your second answer (above) Did you mean that If I set my pages to any of the mentioned sizes ( 640 right up to the larger 1200, my pages would still appear too small on a 17 inch monitor? and that I should set the pges larger? sorry for sounding a bit thick!

Jadoto, again, I appologise for sounding thick, CSS? If you are talking about adjusting the head and body (here I go again, sounding technical!!!)
It is way beyond me. And I'm probably way off on what your talking about, but if your talking about 'liquid' page size, from my google search, it told me that alot of design companys are moving away from this, as it can cause more problems than it solves.

As I said, I feel I should go with 800 x 600 to start with, and tick the box which says'center in browser' so at least, if I am understandng correctly, on a large monitor my site will not be squished to one side.

I'm sure that when I go live, alll you good people will be able to tell me your likes/dislikes etc, as constructive critique is always welcome.

Thanks again

Stoo

Stoo Batchelor said:

I followed Bobs advice first and googled on the subject of page size etc. I am afraid that it was information overload for me, and the head began to throb!

Click to expand...

While not directly related to this topic, you might want to read my article on Dead Link Removed. The big thing to remember is that when you're dealing with screen display you just think about pixels (which it seems like you are).

Frugal, I thank you for wording your answer so that even someone like myself can begin to understand how page design works. When I mentioned my pet hate, scrolling, you assumed right that it is the horizontal variety that I dislike, though I am designing my personal site to be scroll free, i,e: have a 'continue' link if neccessary, though I doubt if it will be.

Click to expand...

That's what I thought. It's fairly easy to eliminate horizontal scrolling, vertical scrolling can be tougher but it will depend on the type of site you're creating.

One bit I did not quite understand was your second answer (above) Did you mean that If I set my pages to any of the mentioned sizes ( 640 right up to the larger 1200, my pages would still appear too small on a 17 inch monitor? and that I should set the pges larger? sorry for sounding a bit thick!

Click to expand...

No problem. What I mean is that the physical size of the monitor doesn't change but you can change the number of pixels displayed on that monitor. If I choose a lower resolution (say 640x480) each pixel will be fairly large, if I choose a higher resolution (say 1280x1024) each pixel will be prety small (and personally I find it too small), because in both cases they're filling up the same space.

Now in terms of how this affects your web site, let's just stick to pixels. Let's assume you design your page so that it doesn't scroll when viewed at 800x600. If someone has their monitor set to 640x480 then they'll have to scroll, possibly in both directions, to see all of the content. If someone views the site with their monitor set to a resolution higher than 800x600 they won't have to scroll but the site will only take up a portion of their browser window.

I am a web disigner, 800 x 600 is the standard size I use, as do most other site designers. CSS = Cascading Style Sheets. They give you greater control of your design accross the whole site.

Some people may tell you to "never use flash because search engines won't find you". That has changed in the last few years. Flash now allows MetaData in the file and there are other tricks to use that allow the info to be spydered by search engines. Just an FYI.

Good luck with the site and let us see it when your done.

D.

My wife is a web designer as well and formats all of her sites for clients at 800 x 600 also, that seems to work quite well...we still don't use flash, but that is beause most of our customers don't want it, myself personally have flash blocked on my Firefox, to much of a pain to deal with.

Dave

See http://www.useit.com/alertbox/screen_resolution.html

If Jakob says 1024x768 I think that is what you should do.

I forgot about this one as well: http://www.useit.com/alertbox/designmistakes.html

Good advice. Especially #10.

Best,

Will

OMG, any self respecting new media designer laughs out loud at Jakob! What ever he says do just the opposite and you should be just fine.

D.

Derek Lofgreen said:

OMG, any self respecting new media designer laughs out loud at Jakob! What ever he says do just the opposite and you should be just fine.

D.

Click to expand...

I was going to say.....who the hell is Jakob????????

Dave Parker said:

I was going to say.....who the hell is Jakob????????

Click to expand...

Jakob Neilsen is one of the first, if not the first, expert on web usability. It makes sense that most graphic designers want to do the opposite of what he recommends, since they are creating eye candy, and he is touting usability, i.e., sites that work quickly and efficiently on a number of levels.

Best,

Will

Well I would say he is a self proclaimed expert. There are to many variables to know what res people are running and how they use there browser window. It could be grandma with an apple cinima display running at 800x600 because she can't see the text of the operating system menu. The best way to go is to design for the least capable system, and that is 800x600. It may change as time goes on but for now that is the industry (web design) rule of thumb.

Isn't a photographers web site supposed to be eye candy? Then take what Jakob says with a grain of salt.

D.

Will S said:

Jakob Neilsen is one of the first, if not the first, expert on web usability. It makes sense that most graphic designers want to do the opposite of what he recommends, since they are creating eye candy, and he is touting usability, i.e., sites that work quickly and efficiently on a number of levels.

Best,

Will

Click to expand...

Not all web designers are graphics designers, I can tell you the websites my wife designs for our clients are not web candy, they are working websites that generate tens of millions of dollars in sales every year for the clients, and are very usable, if they wern't the clients would go elsewhere..

By the way, who declared him and expert? Just wondering, because virtually every web design company we are affilliated with use the lowest common denominator, which currently is 800x600 to appeal to the broadest base of users..

But to each his own, one thing for sure in the web world, if it don't work the people visiting will let you know real quick.

Dave

Derek Lofgreen said:

Well I would say he is a self proclaimed expert.

Click to expand...

I stopped doing this stuff awhile back (1998) but from Wikipedia it looks like Nielsen comes up quite often if you do searches on web design or usability or human computer interaction. I remember Schneiderman being an expert in the area as well. Maybe things have changed a lot in the last few years though. You guys seem to know more about it than me.

Thanks,

Will

I note that APUG works without horizontal scrolling on a 800 pixel wide screen but can be expanded wider if you want. Seems the ideal solution.


Cheers, Bob.

Bob F. said:

I note that APUG works without horizontal scrolling on a 800 pixel wide screen but can be expanded wider if you want. Seems the ideal solution.

Click to expand...

Exactly, as I mentioned before, I'm very much against designing specifically for any resolution, simply because I think it goes against a lot of what the web is about.

But, that doesn't mean that I throw out all concerns about resolution, I just make sure that my site can resize to accomodate just about any resolution. For me, that means making sure nothing with a static width is wider than 600 pixels, so that even on a 640x480 display it'll work fine. Now I'm all for including bigger images than that but I think they should be something that the user has to explicitly click on to get to (preferably with some indication of the size of the image) so that if they want that bigger size then can, but it's a deliberate choice by the user.

As I also mentioned earlier, a side benefit of this is that your pages will be really quick to load due to the small file sizes, which will make your site feel responsive and also cut down on any possible bandwidth usage bills.

Now I think a lot of people have different ideas of what "designing" for a resolution means. If you're just making an assumption about the smallest pixel width you'll support (say 800 pixels for 800x600) but the site can expand to wider, then that's fine. If on the other hand, you're designing all of your site in such a way that it only uses that 800 pixel width even when viewing with a larger monitor then that's bad. Or worse, if it only takes up a 800x600 "chunk" and then you scroll in that, really bad.

As someone else mentioned, there's a big difference between a web designer and a graphic designer. I think there's also a big issue with designers that are used to the print world designing web sites and not understanding how things are different. Designers from the print world are usually used to wielding absolutely dictatorial control over the placement of everything on the page. A lot of them (not all of them) come to the web with that same mindset and then try to do the same thing online. What usually ends up happening is you get sites that can look amazing in the setup that they designed for but break in strange and bad ways as soon as you veer from that setup. Yes, there are ways you can make it more browser independant but I find the best way to do that is to give up some of that control and be willing to let each browser handle the page as it will. What you end up with is a site where there might be subtle differences in different browsers but the site remains functional and still looks good.

Hi again everyone.

First, apology for the delay on my response to your more recent answers. Had a few problems. My wireless router packed up, and then the control panel for my future site refused to let me in on port 2082. All sorted now.

Will, I thank you for the links to Jakob. I can see that his name stirs up some bad feeling. I did take the time to take a look at the info. Alot of it did seem to make sence, though the page size he recommends does not agree with all on APUG. I will be taking note of which direction that fellow APUGers send me, as aposed to 'Jakob', as theirs is usually tried and tested info from more than one person, and on this occasion, all seem to be in agreement.

Derek and Dave Thanks again, You have confirmed what I was thinking, that the 800 x 600 px is the way to go. Especially as web design plays a strong part in both of your lives.

Bob,Thanks again, another vote for the 800 width. I was wondering what Sean used and was about to P.M him. You saved me the job and also me bothering him.

Frugal, Again, thank you for taking the time to sort through my answer/questions one at a time. I found your answers very helpful and informative and I am slowly beginning to understand how this thing in front of me works.

I did visit your DPI vs PPI link. Very interesting, infact, I enjoyed your site very much. I won't lie and say that I totally understood it, but I had just finished night shift so the brain wasn't up to it. I will be revisiting it though, and I am sure I will grasp it then.

I am totally with you on image size. I find also that by keeping the images at a smaller size they appear alot crisper and sharper to the eye, which appeals to me.

I will also go back to 'Jakob' for a look. I sure some of his Knowledge will be helpful.

And certainly Derek, I will let APUGers have the url of my site. It should be published over the next couple of days. I'm sure there will be a few problems to iron out at first though.

It won't be the most extravagant site you have looked at but then, as they say, the K.I.S.S approach is always the best.

Again, thanks ALL

Kindest Regards

Stoo

Stoo Batchelor said:

Derek and Dave Thanks again, You have confirmed what I was thinking, that the 800 x 600 px is the way to go. Especially as web design plays a strong part in both of your lives.

Click to expand...

Unless I'm missing something - I think the point was not to let the WIDTH exceed 600 pixels - and set the HEIGHT to 800... (??) since you'd still be NTSC (640x480) compatible.

No, the content should fit within a 800 pixel (actually more like 764 to allow for scroll bars) width. Height realy doesn't matter unless your design doesn't allow for it. Hardly anyone uses 640x480 anymore. I don't even think modern video cards will run that low of a resoulution.

D.

I'm going to chime in as well as someone who's being doing web design for years. Several sites I work on are accessibility based (they deal with paralympic sport). I work on the philosophy that eye candy is great, but if you can't get to the underlying data it is useless. Relative CSS makes a great technology in this respect, and allows for a good abstraction between data and presentation. *But* it's not perfect, and sometimes you have to give a little. I have dealt with several sites where try and try again, I've not been able to produce a dynamic solution to the problem. In these cases, I rely on fixed CSS and "aim" for 800x600. It churns my stomach a little every time I do this, but needs must.

1024x768 sounds ideal until you realise that most office users are still running of 15" monitors, and they feel "uncomfortable" working at 1024x768. Hell, at my current place of employ, one of my directors insisted on a "high-resolution laptop". We delivered a very expensive HP model, and the first thing he did was ratched the resolution down from 1900xwhatever to 800xwhatever (widescreen).

Derek Lofgreen said:

I don't even think modern video cards will run that low of a resoulution.

D.

Click to expand...

My brand new high spec 512mb DDR Nvidia runs 640 x 480, not that I would understand why anyone would run at that low of resolution, but it still does it...most of my video editing programs require a minimum of 1024 x 768

Dave