How To: Design for multiple browsers

James Williamson for Lynda demonstrates designing for multiple browsers. The most frustrating aspects of web design is constantly dealing with the settle and some times not so settle differences in browser rendering. While they moved to a standard spaced, CSS control presentations has made life infinitely easier for web designs. Dealing with bad browser behavior is one of most unfortunate side effects. All browsers render our pages same because each browser reads and renders the HTML and CSS as based on its internal rendering engine. There are four major rendering engine being used by the majority of browsers today and each of the have subtle differences in how they render. In addition each updated version of the rendering engine will contain new rendering rules than the last one meaning that even without a browser older version will render pages differently than new once. This type of behavior is inevitable. When new standards have been issued how a browser decides to support those standards is absolute manufacture dependent. As new properties and capabilities have been added to CSS, browsers must change to keep up. Following are the steps for coding multiple browsers:

1. Write valid HTML and CSS markup
2. Understand how layout works in CSS and write it correctly.
3. Research browser differences and their level of CSS support fro different tutorials and articles. http://www.quirksmode.org/css/contents.html is one of the favorites of the tutor.
4. Create a plan for when browser workarounds are needed.

Once you have a solid grasp on CSS in its browser level support you can begin to build a strategy along dealing with browsers. Every designer is unique and following are some basic steps that could avoid you from getting bitten by browser bugs.

1. Know your audience
2. Avoid CSS hacks when possible
3. If you use hacks, isolate them
4. Test in as many platforms as you can: Online emulators can simulate platforms
5. Focus on standards