Web Sites made Easy

Coding a website to work in both Firefox and Internet Explorer can be downright frustrating. You get your website looking good in one browser, then you or a user opens it up in another browser and you are alerted to it looking mangled and almost un-readable. To help avoid this follow these six easy tips.

1. Know what browsers you want to code for! Look at your websites statistics and know what browsers your users are viewing your website with. Of course it would be nice to have your website look the same in every browser, but lets get realistic. This is not going to happen. Every browser looks a little different. You just need to know what the differences are and whether you can live with it or not. Obviously, if your navigation bar drops down when the user scrolls over it in Firefox, but does not drop down for Internet Explorer users then you wont be able to live with it. If you have 50 viewers using Internet Explorer 7 & 8, 40 users viewing in Firefox, and 2 users viewing in Safari, then it is going to be a waste of time for you to optimize how your site looks in Safari.

2. When coding out your website be sure to check how your website looks in each browser. This means after you put in an area that content will be held check your site. Do not wait until your site is fully coded before checking. If you wait you will find yourself having more problems and less ways of being able to fix these problems. It may take longer to code out a page when you have to check it in both browsers after every content change you do, but it will be shorter in the long run because you will not have to go back and re-code everything once it has already been completed.Check after every major change, such as content held in a div or text wrapping around an image.

3. K.I.S.S.! Keep it simple ________. Most users today do not need a fancy layout that will take their connection forever to download and view. They want a website that is easy to navigate and has the content that they are searching for. Do not blow your whole time developing the layout of your site. It is the knowledgable content that the visitor came for, not the fancy flash image that takes them 2 minutes to download until they can view it. Besides attracting viewers, keeping your website simple enables it to be more functional on other browsers. The more specific your commands get, some browers will not support it. Creating a website with 90% javascript may be fun for you, but if a user does not have scripting enabled on their browser they will not be able to see much of your website.

4. Process of elimination. Do not change all of your code at once while trouble shooting your browser issues. You want to make one change at a time and view it in both browsers. The ultimate goal is to find the change that makes both browsers appear the same. This is very hard to achieve if you are changing multiple lines of code at once. If your first attempt doesn’t work, change it back to the original and try something else. Some of the most common errors with Firefox and Internet Explorer are CSS issues. Both browsers parse through your CSS differently. If you don’t have a padding or margin defined for an object in your HTML each browsers has different spacing or ways to handle the code.

5. Make sure your tags are closed. If you want to keep your website as robust as possible for other browsers, I strongly recommend you code in XHTML. XHTML is similar to HTML, it just means you have to close all your tags and you cant shortcut on coding. Everything must be done to a tee. Though this takes longer, and can be difficult to trouble shoot what you forgot, it will make your website more robust for other browsers. Remember, if you open a paragraph tag you close it. If you open an img tag you add the / > to close it.

6. Use the W3C validator to check your code. It parses through your code using the DOCTYPE you declared to tell you what problems, if any, there are. From this you can take its reccommendations and fix your code. Once it passes through the validator as XHTML or HTML transitional you can post a picture link they give you on your website. This shows visitors that you took the time to make sure your code is correct.

Filed under: Browser Compatability by Zach