Browser Compatibility Options

[little mike]

is there a list of things that you definately DO to ensure that your site is compatible with as many browsers as possible.

Also is there a list anywhere of compatibility problems that are likely to arise.

[Ransak]

Hi Mike,

This is a great question.

When you first start to plan for your website there are two main things you should decide

1) What browsers to I need to comply with. Making pages that truely consider ALL browsers would leave us with: No tables, No javascript, No CSS, no Frames (Don't use these anyway) and definitely No Flash. We can even say no images since the very first browsers did not display images and there are those who use text readers. Obviously this is not the way to go, we have to make sites that are appealing to the majority audience while still taking the minority into account. So you have a choice, what browsers will you target?

My answer: I try to make well structured documents first, then add styling in after. CSS is the answer for this. If you want to maximize browser compatability you should fist focus on the structure of the document. This will enusre that even with no stylesheet the pages reads logically and it means that those with text browsers will understand your page.

2) How 'consistant' is consistant? You need to decide what varience you will tollerate in how your page displays in various browsers. It might be difficult if not impossible to achieve pixel-perfect design across all browsers.

My answer: For older browsers, content is more important than style. Users of older browsers must be used to pages not looking very 'sexy' like they do in modern sites. So as long as they can read the content they will be happy. Don't be too concerned with the like looking the same in all browsers. My rule is if 80% of the users won't notice something looks wrong - then leave it alone and move on.

Here are some other basic things to consider:

1) Picking a DTD (Doctype Declairation:)

Choosing the right doctype is very important. Browsers render pages differently. Newer browsers are in some cases extrememly different than older browsers as they have corrected errors in previous versions. You can order a browsers to render pages the old way (quirks mode) by selecting a 'transitional' doctype. More information on choosing the right doctype can be found here.

2) Choosing a target resolution:

If people are using an older browser, than odds are they are using an older monitor. 640x480 was common on 15 inch monitors. 800x600 is common on 17 inch monitors. Picking a resolution is important to your visitors since if you create the page too wide you will force your users to scroll horizontally - which is no good. You can avoid this by trying to use a liquid layout which will resize the content to fit in whatever screen resolution the user has. Here is a good primer on liquid layouts

3) Create 100% valid sourcecode:

Older browsers are not as forgiving as newer ones are. NN4 for example has a problem with open tables. If you forget the </table> tag, NN4 will go into a coma. Newer browsers can figure you forgot the tag and will put it in for you. So make sure you use start and end tags for everything <p></p>, <table></table>, <div></div>, etc. This is just good pratice.

Also make sure you close every tag that does not have an ending tag, with a backslash. This means don't use <br> which will still work, but use <br /> or use <img src="myimage.gif" /> This is also just good practice and is the begging of your road to learning XHTML.

You should run all pages through a validator

3) Colors:

People using older browsers and most likely older monitors may be limited in the colors they can display. Now a days this is not much of a concern, but you might want to consider limited your color pallete to the web safe colors known as the 216 color pallete. The reason why there is 216 as opposed to 256 colors which you'd expect in an older 8 bit monitor is because while 8 bits gives you 256 colors available, only 216 of them are common across the Mac and Windows operating systems. Use the 216 pallete and you will be sure the colors are a similar as possible.

These days a large majority of users are on a 24 bit "True Color" pallete. Just remember you nice color layout can turn into mud if viewed on an older monitor. It may or may not be an issue for you.
You can find a Web Safe color chart here.

4) Creating Separate Stylesheets:

You can create two stylesheets, one for NN4 and one for newer browsers.
In between the <head> elements you can have the correct sheet load for the correct browsers by using the following:

<link rel="stylesheet" href="nn4.css" type="text/css">/* This serves a sheet older browsers such as Netscape 4. */

<STYLE TYPE="text/css">
@import url(modern.css); /* hides 'advanced' styles from older browsers such as Netscape 4 */
</STYLE>

Older browsers simply ignore the @import link.

There are other various problems with CSS as each browser has it's own problems. A good list of the bugs you will find in browsers can be found here.

5) Images:

Netscape 4 does not support transparency in .PNG files so avoid using those if you want to support older browsers. Stick to the .gif format.

Also make sure you use the ALT attribute for your images and make sure they are logical. This ensure that text readers and those with images turned off can still understand the meaning of the images your using. If an images is simply a grahic or spacer with no relevance to the content, then at lest use a proper empty ALT tag. alt=""

For everything you've ever wanted to know about the Alt attribute go here.

6) Choosing a Character Set:

You might be familar with this line in your code: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> This is telling your browser what character set to use so it knows the proper letters and punctuation to display. Netscape 4 has some problems with non-latin characters so keep this in mind. A checklist for character encoding and the plateforms that support them can be found here

7) Javascript: These days most users have javascript available to them. Still there are a few who are using older browsers and a few more who surf with Javascript off. To accomodate these users make sure that there is no critical function that uses javascript only. For example, do not use only Javascript for links because if a use does not have javascript enabled, they will not be able to navigate your site. You can avoid this easily by using <noscript></noscript> tags and adding in content that users will see if they can not have javascript. The <noscript> defines alternate content to be used if the users browsers does not support whatever is in between the <script> tags.

8) Flash: If you must use flash, a good practice is to have an entry page that lets users choose Flash or No Flash versions of the site. Also, provide a 'skip into' link if you are dumping users into a flash splash page.

One good tool for generating the script for embedding flash can be found here. **Note this is untested by me. Supposedly it helps generate clean embedding code and write the code that give users alerts there is flash on the site and provides the links to install the flash plug in automatically. Really a neat thing if it's functional.

Well that's all I can squeeze out of my head. I'm curious to see what others come up with as this is an important topic

Frank V.

[little mike]

Hi Frank

You said it was a good question i had asked but it was not nearly as good as the answer. I know that the standard of the knowledge base in CR8 is very high from both moderators and members but i didn't expect such a long, detailed and informative answer. Thanks for taking the time you have, it is very much appreciated.

I only asked the question because i have recently started using Mozilla because of all the reported problems with IE and when i visited my site i found it had problems when viewed in that browser. You have provided some excellent links which hopefully will help me to make my site more cross-browser compatible. You also told me a few things i didn't know.

What i have said about IE has brought up another question. If more and more people do give up on IE as their preferred browser are we all going to have to rethink our design principles ( in other words at present most people will mainly design with IE in mind, but what of the future? )

Once again, many thanks.

[Adrian]

If more and more people do give up on IE as their preferred browser are we all going to have to rethink our design principles

It seems to be starting to happen Mike! Some places are reporting some overall drops in IE usage, if only by a few percent, it's still significant. I hope some of that trend will continue. I don't have a problem with IE being popular (well I do in a way, but not because it's IE, but because it's so far behind other browsers these days!) but it would be nice that the spread was a bit more even. I wouldn't even mind if IE had a 60% majority, that would still means some other browsers were well into double figures and considered more mainstream.

I think a lot of people will have to change some of their principles. Many people have already seen this and in a lot of cases have always known it. Those in the industry since NS was a major force know it only too well. Back then cross browser compatibility could be an absolute pain.

I would have to admit that it still is in cases, though probably not on the same kinds of levels it used to be. You can create perfectly acceptable designs without too many problems, on the other hand, many designs really do get annoying to impliment well.

For the people joining the industry while IE has been overly dominant and just worried about IE, yes they will need to change some of the princinples of their design, they will have to take into account that IE is broken in more ways than many other browsers are and they they need to learn some of the 'standard' stuff. Not necessarily web standards from the W3C, but I think people will need to look at them more than they have before. More I mean things that we know have standard implimentations, things that are documented and work.

OK, I better end my rant there for the moment! That was the long way round of saying "Yes"

[DianeV]

What both Frank and Adrian said.

As to IE, perhaps this will help people to make up their minds.

=> The site is Dan Renner's ITdiaries.com blog; Dan is my client, but the data is valuable.

[Scratch]

Excellent and thorough reply, although I don't agree on this Flash issue.
[quote]Flash: If you must use flash, a good practice is to have an entry page that lets users choose Flash or No Flash versions of the site. Also, provide a 'skip into' link if you are dumping users into a flash splash page. [/quote]

I take the same attitude to Flash as to images.. i.e. don't rely on it, because you can't be sure that it's there.

I think Flash is properly used in 2 contexts:

1) Pages where people are very clear in advance that they're launching a Flash page (e.g. a game, or applications that require Flash).

2) Where it's used inline on a normal page, like you'd use an image. In this case, it should have alternative text and degrade gracefully.

I'm pretty against having 2 versions of a site on principle, but not totally anti the idea. I am against splash pages that make you choose. They bug me.

Peace,

Scratch[/quote]

[bwelford]

I am against splash pages that make you choose. They bug me.

Me too, scratch. I'm sure it will also bug a fraction of your site visitors. No one can afford to lose a fraction of their visitors.

[Ransak]

Scratch/Barry:

I agree..I fubar'd that answer for sure. I was thinking more along the lines of those sites that aready use a Flash Splash Page should give the user an option to 'opt-out' if you must use something like that.

Frank V.

[little mike]

Hi guys, thanks for the feedback.

I'm a bit surprised that my questions didn't attract answers from more of the experts here they have. Maybe the answer you gave Frank was just so good.

[Tim]

Frank's answer was quite thorough! There's not much more to add to it.

[bwelford]

Hi little mike

I agree that Frank's post really covered the subject well and there's no need for more.

However ... I thought it might be interesting to add a small incident that happened yesterday to illustrate one aspect of this problem.

I don't do web design except for my own website but work a great deal as a facilitator/project manager between a business man and his web designer. I do a fair amount of website testing to ensure it will work well for my client. I have adopted as a standard approach a fairly rapid review of a website in IE and Opera but use Mozilla Firefox at a resolution of 800 x 600 as the real crunch test of the website. I believe that Firefox will show whether the website is following the standards and I believe currently that a worthwhile proportion of any audience will see the website in an 800 x 600 window so they must be accommodated.

<aside> - Incidentally the website I was looking at yesterday had a very frequently seen problem in having a horizontal scroll bar at the bottom at this resolution, although the sideways scrolling was only the matter of a few pixels. The problem was created because a horizontal banner consisted of images totaling 773 pixels. With Windows XP as I use, you can't have more than 760 pixels wide. In practice if you also want to keep the Mac 800 x 600 resolution crowd happy, I believe 744 pixels may be the max.</aside>

As I keep an eye on current views about browsers, I've developed the view that Firefox and Opera will handle standards-based websites well, while IE may have some glitches. Lo and behold this website I was testing was a prime example of that. All web pages had the same template with a vertical menu bar on the left (that in fact was a small piece of Flash coding). In clicking from one web page to another in Firefox or Opera, the effect observed was that the menu bar and the top banner did not move and only the text content of the web page changed. However in IE, moving from one page to another, each time there was a momentary juddering or slight resizing of each web page before it settled down in the same position. So we'll have to find out how to remove that glitch. (If anyone can suggest possible causes and things to look for to solve this glitch, it would be interesting, although that was not my reason for posting.)

I hope this brings another useful point of view.

[Scratch]

lil mike, to be honest, the main thing I do to give my designs the best chance of working across different browsers (and I don't achieve perfection by any stretch) is: I do *simple* design.

I work in Photoshop first, but all the time I'm thinking about how what I do will be built. The benefit of being both the designer and producer! I'm really strict about simplicity. The kind of thing this might result in is:

- Keeping overlapping to a minimum
- Wherever possible, using CSS to provide colour, border styles, 3D effects
- Sticking to classic layouts, with clearly defined screen areas
- This is a good one - STEAL OTHER PEOPLE'S CODE, which already works (I don't do this enough!) There are no prizes for reinventing the wheel (see http://www.webdesignfromscratch.com/pursui...he_original.cfm for my philosophy on this)
- In CSS, use separate elements for padding, because different browsers treat them differently. Avoid putting padding on an element whose width/height is fixed.

Peace,

Scratch