HTML Standards and deviating browsers

Question

Good evening everyone.

This is a story anyone developing web applications is surely aware of - You create a site, which is well coded and elegant in the browser of your choice - until you run it in a different browser, which a lot of the time required hacking and slashing to create a functioning site.

I wish to enquire the techniques used by developers to ensure their code works well the first time around in the plethora of web browsers with all aspects related - such as :xhtml, html5, javascript, css, etc..

As a side note, what developers do about IE progress - with the majority of the world still on IE7, and IE9 only including new css and html standards how long do you think standard practice will(if ever) take to achieve?

I am quite interested in your response, as I cringe at the thought of cross browser compatibly issues.

Regards, Byron Cobb.

Answer 1

My advice: Use a decent CSS reset or framework. Good CSS frameworks are: 960, Blueprint, YAML and YUI grids.

For your javascript you should use a library like: JQuery, mootools or Dojo. You will still have a few browser incompatibilities, but using any of these tools should fix about 90% of them.

Good luck! (ps: I use Mootools and Blueprint)

Answer 2

I am developing for all major browsers out there (IE 6+, Firefox 3+, current Safari, Chrome, Opera 9.5+). My main advice to keeping code clean and eliminating extreme hacking sessions is the following: Test your page simultaneously in all Browsers. It is a lot easier to fix multiple small Problems than fixing a complete page in a single pass. Style issues are really easy to fix when working this way. JavaScript is a bit more challenging, but still much easier when working like this. jQuery often helps with this kind of problems. I include the new standards here and there but i am making sure, that graceful degration takes place. Standards compliant browsers get the full experience. Older ones get less eye candy while still delivering a working page.

Answer 3

If you really want to have some fun with the IE6 crowd, try this: http://ie6update.com/

All kiding aside, with a strong understanding of box-model tactics, a great framework, plus quirksmode.org, you should have no reason to have to do a bunch of exotic hacks to make your site work. Design intelligently for standards that are viable today and save the bleeding edge techniques for demo sites. High-value corporate sites don't HAVE to be exotic, they need to be good and reliable. Otherwise, be willing to design parallel sites so that those who refuse to update can at least get by. Most of all, stick to the standards...a few W3 errors is too many.

Understand your audience too. I can't tell you how many designers do dark on dark and small fonts for older crowds. Likewise for using exotic javascript or worse flash where it's not appropriate. Solicit feedback from others....in reality, even if we "get" this game, we really only really understand our own preferences.

Practice progressive enhancement. For example, Jquery UI will round corners, but will gracefully degrade to square for the IE (behind) crowd. Consider using HTML 4.01 strict as opposed to XHTML because it is closer in syntax to the future, HTML5. (XHTML is no longer being advanced anyway)

Finally, test everything you do in multiple browsers or in a tool like Adobe's browser labs. Turn off Javascript and CSS...is the result acceptable? Run without flash...does your site work? How does it look on a mobile browser?

It's not a fun game to play sometimes, but it's what makes us professionals. Good luck!

Answer 4

1. Learn the standards.
2. Write code according to the standards.
3. Test the code in popular browsers, and see where it breaks.

“The standards” are HTML, CSS, JavaScript and the DOM. jQuery does a lot to smooth out JavaScript and DOM inconsistencies between browsers, and is a bit of a nicer interface to the DOM in my opinion.

“Popular browsers” at the time of writing are IE 6–8, Firefox 3, and the latest versions of Safari, Chrome and Opera. Safari and Chrome have hardly any differences as they use the same rendering engine, and Safari, Chrome, Opera and Firefox have very few differences as they’re all about the standards.

I cringe at the thought of cross browser compatibly issues.

They‘re really not that bad. (When you ignore IE. And its issues are at least reasonably Googleable when you encounter them.)

Answer 5

I think it is important you start with a good set of defaults and follow best practices, it is not much of a hassle to work with deviating browsers. I worked on http://html5boilerplate.com so we have a list of links up there (along with the actual boilerplate) that make a web developer's job much easier.