By Gail Seymour
Almost 40 percent of Internet users view your pages with browsers other than Internet Explorer, making cross browser compatibility more important than ever to Web design. Here are 10 tips to reduce browser issues:
Design in Strict Mode
Specify “strict mode” in your coding, which forces IE to behave more like other browsers. This way your pages are more likely to render true to design across major browsers. To enable strict mode, use the following Doctype declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
Relative Design
1024 x 768 or larger screens may dominate, but smaller and non standard screen sizes still make up a sizable chunk of the market. Design using percentages rather than pixels or other absolute sizes where possible to ensure your pages are balanced across multiple screen sizes, and avoid dual directional scroll bars, which are a real browser turn off.
Design for Speed
Consider browsers using dial up or mobile broadband, whose connections may be slower, and who have higher bandwidth costs. Read ten ways to make your Web site load faster. Use CSS style sheets and move repeated script code to an external file and link to it.
Code Compliant Design
Whether you're using WYSIWYG Web authoring software, or coding by hand, test the resulting code for compliance using the W3C Validation Service. It's also worth running code through their other validators that check RSS feeds, CSS stylesheets, Mobile content and look for broken links. If you have access to server logs, download the LogValidator which will help you improve your site progressively, focusing on the most used pages of your site first.
Design for Accessibility
Always use alt descriptions with graphics, to accommodate browsers for the blind. If these graphics are linked, provide a text link as well. Also avoid using tables and graphics for page layout, using CSS instead.
Use CSS Carefully
CSS style sheets can improve accessibility and download times, but can cause display issues. These mostly relate to browser window sizes. For best results, use percentages and em sizes, which are relative to the user's settings.
Balancing Graphics
Provide width and height attributes for graphics and allow the browser to render elements around it while the graphic downloads. Without them, the browser must completely render the graphic before continuing. Forcing the browser to resize graphics with relative dimensions leads to poor image quality, so these sizes need to be specific and match those of the graphic being displayed.
Incorporating Rich Media
Avoid using Flash for site design, as it's invisible to search engines. Always provide text-based alternative content that explains the content of audio, video and flash elements, too, for readers who can't or don't want to access media files.
Beware of Scripting
Most browsers will handle simple scripting in multiple languages, but if you want to deliver complex dynamic Web pages across multiple browsers, you will need to test your pages in action across all major browsers. As a general rule, use server-side scripts where possible for compatibility, but be aware of increased download times and bandwidth issues.
Testing
As well as testing for code compliance, use a service like Adobe browserlab to view pages at different screen resolutions, with different operating systems and different browsers. Use the “onion skinning” feature to highlight differences and if you can, use the Dreamweaver plug-in to test different stages of interactive content.
About the Author
Gail Seymour has been a Web site designer for more than 10 years. During that time she has won three Sitesell design awards, and has provided the content and copy for dozens of Web sites and more than 50,000 Web pages.