Oneupweb : Default Cross Browser Incompatibilities

In any given agency, a website project involves—at a minimum—a working collaboration among designers, developers and programmers. And in my experience, where designers are more concerned with perfect visual detail in their work, developers tend to place the focus on factors such as page load times and site usability—both of which can sometimes lead to slight visual discrepancies between the original Photoshop design (designer masterpiece) and its finalized appearance in a browser (developer interpretation). Even so, good developers will make use of CSS tricks or javascript to ensure that there are as few discrepancies between the two as is technologically possible.

By default—and because different browsers are based on varying layout engines—visual page elements such as forms, scrollbars and typography will always vary slightly in appearance. While there’s no hope for visual typography discrepancies at this point in time due to browser default anti-aliasing versus non anti-aliasing (although CSS3 is throwing us a bone…), consistent visual scrollbars (note page internal, not browser) and form elements can be achieved through the use of various CSS tricks, javascript or a combination of the two:

1. Scrollbars – To achieve custom styled internal content scrollbars, try FleXcroll or jScollPane, both of which combine the use of CSS and javascript to achieve cross browser combatible, custom styled scrollbars without having to resort to Flash (no offense, Robert!). Please note that jScollPane is a JQuery plugin, and also requires the JQuery code base to function.
2. Forms – Cross browser, custom styled form fields are fairly easy to accomplish with CSS alone—simply start with reset styles, and add custom css to the <input>, <select> and <textarea> in your stylesheet. In order to achieve cross browser radio buttons and checkboxes, a little javascript is in order—try this JQuery plugin for added styling options.

I have first hand knowledge of the additional development time it takes to perfectly translate a Photoshop design to code—and it always comes down to the little details that tack on the bulk of the extra hours. That being said, I’ve found myself wondering, every so often, if those little details are actually worth the additional hours—but in the end, killer site design comes down to a combination of well thought out, intuitive usability tactics and unique aesthetics that can sustain (and entertain) the attention of your visitors. And what makes a site truly unique? The little details, of course!