Advice for do's & don'ts in layout and graphics

You have inspired me to write an article about this. But, I'll try to answer your question as briefly as possible.

Screen Resolutions - I'm not sure where the latest data can be found, but the last I heard, 1024x768 use was just under 50%, 800x600 use was around 50% and all other resolutions combined were a percent or two. That tell us that, for all intents and purposes, we only need to worry about those two. Anyone that is running resolutions other than 800x600 or 1024x768 is probably quite used to display anomalies.

Browsers - The browser situation roughly parallels the resolution stats, insofar as you only have two main browsers. IE, of course, claims the lion's share of users with around 70% and Firefox has around 30% and all other browsers total around 2% or so. Most people who use Opera or Netscape or whatever also have Firefox and/or IE. They are used to visiting sites that don't display well in their preferred browser and they will switch browsers if they want to visit your site badly enough. But, should they have to? That's another question.

Personally, I'm insistent that anything I build works well in all the major browsers. I don't have the AOL browser, though. I'm allergic to spyware and AOL is the mother of all spyware. I don't know for sure, but I'm guessing it's loaded with stuff that I don't like. But, that's off the topic.

One of the great things about making webpages is that there are so many ways to skin the same cat. You have so many options and tools at your disposal that it is often hard to answer general questions with any kind of specificity. This is one of those cases. There are just so many variables that it's impossible to give you a solid answer. For instance, I just made a theme for my design site that has one image as a background. The image is 765px x 700px or so. Obviously, that leaves me no wiggle room. Anyone viewing the site at any resolution less than 800x600 is screwed and anyone viewing it at a greater resolution will have space on both sides of the image. I don't have any idea how that will convert in a PDA or other alternative browser. In this case, I centered the background and used a to center all the content. That sucks, by the way, because it is the only part of my whole site that needs the transitional doctype. All the rest is strict xhtml. So, in this case, I had to make some compromises.

However, on the same site, I have a theme that only uses one header graphic. All the rest is code and css effects. That is a much more friendly design because it will easily resize. I could make it fill the screen at any resolution, but I don't like that effect, personally. I like symmetry and form to remain somewhat constant, so I used ems, primarily, and percentages, where appropriate.

As far as testing goes, the best you can do as a person with one monitor is test at different resolutions and in different browsers on your machine. Then, when you think it's ready, have your colleagues and friends test it.

As for the png transparency issue, there are a few ways around it. First, there is code. You can deal with this issue with php and probably other ways, also. It's easy to find fixes for it. My solution is I simply don't use them. I always use a solid background or I use css effects with transparent backgrounds. That solves the problem. I don't recommend using large images at all. If I recall correctly, dialup still accounts for at least half of all users on the net. I don't believe it's right to penalize them any more than they are already being penalized. I stay away from large images and, especially, flash. If it's vital to use them, then I would make a low-bandwidth version of the site. That's the decent thing to do, anyway.

I hope that kind of answers your questions. It is pretty hard to give you a solution, though, without knowing more about the layout and the particular issues you are facing. I have found that, with experience, you can get things to work by using the back door, so to speak, when the front door is locked. There are a lot of tricks and techniques that will make most things possible, but there is always compromise involved. The trick is to make concessions where necessary while still preserving the integrity of the design.

Good Luck!

Good Rant... I mean article there Michael... their other considerations too... most found on this forum if your patient enough to read through the whole threads...

There is no real work around for the png at the moment, even if IE7 supports transparencies it wont work in the older versions, so really you need to use gif for a bit longer.

I have to disagree with a lot of what Michael said, especialy the browser bits.
Opera is a widely used browser, but is set as to identify as IE (has built in agent switcher) and even Mozilla has a agent switcher addon which can be set to IE.
So really all these stats that people give as to what is the popular browser is guess work and nothing more. Also if you have a techical based site the odds are your viewers know about these other browsers and use them, but a newbie site (intro to word etc) the main viewers would be IE folk.

Resoultion switchers are guess work as well, a lot of people have side bars, or screen not at max (look top right now, do you see one square or two). Ideally use a floating layout (percentage) is a lot more flexible but some sites don't work to well if the content width is not there. In which case a fixed size is needed.
800x600 is still the size to work around, you can resize your moniter (even some sites online that will show you differences) but don't take that as gospel.

Degrading, ideally back to Netscape 4.7, even full CSS sites can be degraded nicely, true some of the layout features will be missing but as long as it's readable in it's degraded form there isn't a problem. Sorry I don't have AOL either, never have.

On using percentages vs ems, really it depends where you use them, percentages for layout and em for text is fine, even percenet for text, just fixed size is not very good as IE etc can't resize them.

Good luck

One thing cannot be argued, there are a LOT of ways to skin this particular cat and there is no way to prove much of what has been said here.

I think that's one of the great things about making websites. It is as much an art as it is a science - as much provable fact as unprovable hypothesis. No two designers see these issues in the same light.

I've also been dealing with the screen resolution issue. It's all about compromise. My monitors are set at 1152 x 864. So layouts that accommodate even 1024 x 768 can appear under-sized, I have to keep reminding myself.

I've looked at the minimal screen resolution being assumed in the design of the major portals and several high-end commercial sites, such as major newspapers, where resolution translates not only into audience convenience but also into advertising dollars, and sometimes into paid subscriptions (e.g., the New York Times.)

Those sites tend to want browser widths between 840px and 1000px, based on where the horizontal scrollbar disappears, or sometimes on where the layout no longer reflows. For instance, Google News seems to want roughly between 850 and 1000, but will let you go as narrow as 550 before content disappears.

These sites also don't appear to be sending out content based on their reading of my screen resolution; when changing my res all the way down to 800 x 600 I simply lose additional content off the right side, including advertising.

So they generally seem to have decided that lower res users will just have to accommodate their designs, rather than the other way around.

There are some statistics showing display resolution trends at this site.
http://www.w3schools.com/browsers/browsers_stats.asp

As of last January:

57% = 1024 x 768
20% = 800 x 600
17% = higher than 1024 x 768
0% = 640 x 480
6% = unknown

Note that this is a site for those interested in web technologies, which will skew the numbers. Still, consider that for the last several years, 1024 x 768 has been the standard default settings for new consumer PCs, e.g., Dell.

It seems those with lower resolutions, as with those using older OSs and older browser versions, will increasingly have a frustrated surfing experience. They're destined to upgrade at some point.

So in some ways the decision to accommodate them becomes increasingly moot. They're unlikely to hold a 975px width against my or your site, any more than they would the use of colors that are not "web safe." On the other hand, if we use that "extra" width with intelligence and style, the majority of our visitors will appreciate what we're showing them. At least I hope so!

For the site I'm developing, I've tentatively settled on a page with a centered width of about 850px, though I might increase that some as the design evolves. That's a bit larger than sites in the same genre, but I'm willing to take that small liberty.

At the same time, I'm not giving any consideration to browsers older than IE 6 and the latest Firefox/Mozilla, plus whatever is current on OS X. At least not upfront; when I'm done maybe I'll consider some retrofitting. Why? Because anyone still using those browsers is already having a degraded web experience the moment they stray from Yahoo's or Google's home page, and at some point, well, that becomes their problem, especially given that modern browsers (unlike faster connections) are free for the asking. A bit selfish and elitist? Hmm... I suppose.

I think of it as comparable to the shift from video tape to DVD, or audio cassettes to CD. Not everyone has a DVD or CD player, but few if any current films and music are released on VHS or audio cassettes. At least on the web, they can still see *something*, and again, upgrading the browser is a free and relatively trivial task, and one that's certainly worth it.

You make some excellent points. One thing that is important to consider is your target audience. If your site is about PHP, for example, you will be seeing much higher resolutions than a dating site or a site about puppies. If your site is for senior citizens, onb the other hand, I'd bet that most of your users will be using lower resolutions. For commercial sites with a broad range of users, I'd expect the nunbers for 800x600 and 1024x768 to be roughly equal, with very few above or below those two.

Again, this is all very interesting and worthy of consideration, but very hard to prove in any definitive way.

This has made fascinating reading. Thank you.

I agree that my target audience is an important factor in the resolution size, so I've started coding (and checking what existed) based on 800x600 to be on the safe side. I have an idea that a fair number of visitors to the site will be 'the common man' and from responses I had regarding the original holding page, I think it's probably my safest bet as I don't think there are any guarantees about the computer literacy of my visitors either. It will be interesting to see once the site is live and I have some logs to look at the number of people using out-dated browsers. My own personal feelings regarding the location the site primarily targets is that the number will probably be high. (That's my own assumption based on the fact that 80% of the comments I have had on the site so far have come from people with out of date browsers. heh)

WebberificGrrl, I have the same feelings about out-dated browsers. It's one of my biggest bugbears... I know a few people who can't be bothered with updating their computers or their software and in some cases this is a pretty big security risk. I guess my hopes are that some of the people who haven't upgraded their browser in five years might actually consider doing so. I'm thinking of having a link to browser update info, just to cover my back as I anticipate more antiquated browser visits.

I have been testing with the latest versions of FireFox, IE and Opera. I did test with the AOL browser as well and the site looked fine, but after installing it my computer seemed slightly laggy, so it has since been uninstalled. I really just wanted to know what this one particular person was seeing. If the validators are correct, I don't think I'm doing too much disservice to the older major browsers.

Thanks again for the comments and advice. It's greatly appreciated.

I think I have a major site re-design ahead of me and this info will be exceptionally useful when I arrive at that point. (Content has been slow to be provided and trying to plan and build a site when 'We have some content for that' actually means 'We have a brief paragraph and 10 images for that' is complicated. ) Until then, I just have to finish plugging in the content as it arrives in order to get their site live (7 days late now).

A lot of people don't update because they think "why should I, it works .."
In car terms, they own a mini but the trend is SUV's, the mini does everything it should but smaller and in smaller doses. The SUV has all the bells and whistles but over 3/4 of the owners wouldn't use them let alone know they are there.

A lot of people (my mum for one) just use the PC for emailing and the odd web page to look at, my neighbour just plays games and probably doesn't even know he has a browser on there. Another neighbour uses it for her kids, to play games, look up kid stuff and all the safe stuff which in some cases outdated is safer as it wont load a lot of undiresable stuff, then the net nanny plugins ... So unless you surf all the time keeping up with the newest browsers isn't high on the list for many people.
Some people will always download the newest everything, even if they don't need it.
I surf everyday, don't have/want the flash plugin, have two latest browsers out of 6 and still use NS4.7 to view and test sites as I perfer that one. If I go to a site that wont work on Firefox or Netscape (7) I just close the page and go to another site.

There will always be a lag with browser version updates.