Check out our web design blog for anything from marketing to SEO.

Internet Explorer, Firefox, Opera, and Chrome are the leading browser programs out there. However, they all render websites differently - Even more so if you are using an older version of those browsers. It all started long ago when Internet Explorer was taking over the market from a now almost hardly remembered browser called Netscape. We wont get into the details of that battle, but you obviously can tell that Internet Explorer won if you are using any modern computer from within the last 5-8 years or so. The problem that was left in the wake of that browser battle is that some people say that technically Microsoft cheated. Why? Microsoft started introducing browser specific code allowing it to render website elements in various ways that browsers such as Netscape could not. This may have been the undoing of Internet Explorer in future markets. When newer browsers came out, they were going to make sure that would not happen and started doing the same thing. Now that was fine, but what about us designers? Will we have to learn a different way of coding, something to work across every different browser? This is where organizations such as the W3 Consortium step in. In a nutshell, they are responsible for telling the browser companies out there that designers would like to start to have things work the same way in all browsers. It doesn’t always work that way, but it’s a start. It then opened up a new world for browser markets.  

Internet explorer is only updated maybe once a year if we are lucky, where as the other browsers update around a monthly basis to quarterly.  This allows those browsers to take advantage of the newer technologies being released for website viewing, set by standards that the W3 and a  few other organizations suggest to the browser companies and allowing  designers to take advantage of those technologies. The problem is most  non-tech-savvy users out there probably haven’t even heard of them, or  don’t care to because Internet Explorer fits their needs. As much as  we would like to rant about telling them to either press the friendly  “Windows Updates” message that has probably been blinking for the last  five years or telling them to switch to a different browser,  unfortunately it’s not practical to use that defense with your clients.  Even though as of this year, older versions of Internet Explorer are finally losing the average market share of users, there are still enough viewers out there using older browsers for it to be a topic of  conversation.  

As web designers, we are constantly striving to keep our websites cross platform (and now cross device) uniform. This keeps the designs as close as possible, regardless of what kind of devices they are viewed upon. Any person, amateur or professional, has come across this problem at least once. But as designers, where do we draw the line between using the emerging css3 technology to accomplish the visual aspects or  deviating from the design for older browsers using javascript fallbacks,  alternate css2 stylesheets and image hacks?    

For those less tech-savvy, a CSS (Cascading stylesheet) is much like a reference sheet to tell a website how it should look. Before CSS, when a coder wanted to display a link in red, they would type something like  this:  

Click <a href=“http://www.zenuity.com”><font color=”#FF0000”>Here</font></a> to go to Zenuity. Which looks like this when rendered by your browser:

Click Here to go to Zenuity.

The

<font color="#FF0000">

and

</font>

would turn any text inside of  those tags red. If you were a designer, the problem was that if the client wanted to change the colors of the links to blue, you would have to go through hundreds of lines of code and change #FF0000 to #0000FF, which is the hexadecimal color for blue. Thus CSS Stylesheets were formed to select elements like links, text, background, and sizes of objects or areas on a webpage. And since the stylesheet was referenced on every page of the site, a coder could make changes to one file, and affect the look of something, or everything, across the entire site. In situations where a website could potentially have hundreds of pages, you can see how this would be beneficial (Think what it would be like if CSS didn’t exist, and a website like Facebook wanted to change their look). In CSS if you wanted to target all the links on your site and make them red, something like this would exist in the CSS stylesheet:

a {
color: #ff000;
}  

Note: This next small section is the technical stuff!
If you notice in the first example, the link started with “

So when CSS2 became a standard and was supported in all browsers, even older ones, it revolutionized the way websites looked and functioned. Website coders received a moment of relaxation. As with all good things, you always are left wanting more. While CSS2 can do things like adding a border to your paragraph and changing its background color, if you wanted it to have things like rounded borders you would have to use an image of a border and hack it out using a lot of content separators or tables. Think how you can change background colors of a cell in a program like Microsoft Excel, its not difficult.  You can even use borders. HTML has similar things it can do with stylesheets, but if you wanted your Excel table to give the illusion of having rounded borders, you would have to add extra cells and upload an image that has rounded borders in to the corners of the table and work from there. Website coders have been doing similar work for a long time. However, CSS3 can do that. The problem is that not all browsers will support it.  

This is where the dilemma comes in: Do we use one of the previously described methods that will allow older browsers to see the same thing  as the newer browsers, or try to convince the client that its not  necessary? The rule of thumb is that there is no rule of thumb.  Ultimately, it’s the clients decision. However, there are a few things you can start to do to help point your clients towards the better path of browser code depreciation.  

Firstly, make sure your designs at least work correctly in the older browsers, even without the CSS3 elements rendering if you’re using it in your markup. If menu items are misaligned in Internet Explorer 7 but look good in Internet Explorer 9, for example, 9 times out of 10 your client will be using Internet explorer 7 and your arguments will be mute in the ears of a client/consumer. Once you have cleaned up your coding to work across browsers for the small stuff, show them the designs side-by-side in older browsers and newer browser FIRST. The reason is, this gives you an opportunity to show the customer that for newer technology browsers, your site not only will be ready but will also look better. On top of that, because your code is cleaner and your not working hacks or work arounds, your site will potentially load faster and you wont have to go back and update the code as quickly. (I personally like to use the reference about how a brand new computer is obsolete in a few years and building websites to work specifically for older technology is along the same kind of lines). So long as the design still works for the older browsers should be the most important part, but embellishing the code to work the same in the older browser could potentially affect the performance of the site.  

Obviously there are a significant amount more pro’s than cons, but it will ultimately be up to your client to decide. In many situations, you may have taught them a thing or two about website technology, and may have inadvertently introduced them to a better browser choice to view sites the way they were meant to be. However, some customers will insist that they want the website to look exactly the same as the mockup they were originally shown because they want it to appear that way on their Windows 98 machine running Internet Explorer 6 before they show it to their friends and family to get feedback before adding glitter text and changing the entire design completely. Ok, that last part was a rant, but if you’re a website designer, you probably caught the jest. As a designer at Zenuity, this issue has always been a daily of educating the client on what’s best for web practices.  

Sometimes we win some, and sometimes we lose some, but the customer will always be right, even if from a designer standpoint they are wrong. The best thing you can do is educate your clients to the best of your abilities, and hope for the best.