Internet Explorer 8 effects on your website
April 12th, 2009 by Kevin Rapley
Summary:
Web browser, Internet Explorer 8’s release means we will be developing websites differently. Microsoft has finally kept their side of the bargain to build a web browser which complies with the standards set out by the WAI. Up until now web developers have had no choice but to hack their way through to producing modern design layouts. With IE8, we can begin designing and developing more complex grids. But a new problem now arises, support for IE6 and IE7. On a case by case basis we must decide to A). Go the extra mile for these older versions, adding extra code to make them look the same as IE8, FireFox, Opera, Safari and other compliant browsers. B). Create extra stylesheets for IE versions up to and including IE7 which serve a dumbed down version of the design, acting as a gentle poke to upgrade. C). Decide not to create versions for IE up to and including IE7, the content will still be readable but the design will be visibly broken.
Microsoft’s latest version of their web browser Internet Explorer will mark a new dawn for the way in which we design and develop websites. For years web developers have been lobbying Microsoft to write a version of IE that fully obeys the standard for cascading style sheets (CSS), the coding language used to manipulate the visual presentation of a web page.
IE8 delivers, catching up with other web browser vendors such as FireFox, Opera and Safari, meaning the CSS tool kit has increased. IE, with such a large market share has dominated the way in which we have designed and built websites. In the early years of the Internet when websites were built using tables to layout, grid columns within the design could run alongside each other easily and at the same length. Then a movement towards web standards developed. Web standards made us build more accessible web pages, banishing table based layout ensuring that tables were only used to display tabular data. We did this through semantically written HTML and separating content from design with external CSS.
Unfortunately not all browsers handled the CSS specification as they should have. Many of the issues arose from IE, which either mishandled the specification or did not cater for certain areas of it at all. Talented CSS developers found ways to manipulate the specification, hacking ways to build the kind of deigns that were available to us in table based layouts. This didn’t come without its problems. Column lengths would not line up, extending only to the length of their containing content. To overcome this we use background images to fake the appearance of equal length columns. This is the most obvious visual problem to overcome, but underlying within the code we were either floating these columns beside one another to create the appearance of columns of giving absolute coordinates to where each content block should be with pixel perfect precision. Both ways are effectively a hack.
This brings us to the present. IE8 has caught up. We now must ensure that we write our code differently to keep our side of the bargain. Using what is known as CSS tables, we can create content columns that behave like they did when they were in table based layout. But, this time it is all handled by the CSS. We make the columns behave like tables but without writing them into tables, which are purely semantic markup for tabular data. This creates a structure which is future proof, browsers from here on in will always support CSS tables, layout structures are also hack-free and behave in the same way across all modern browsers. An additional plus, development is made easier.
Hang on a moment, what about IE6 and IE7? Not everyone has made the switch from these older browsers yet. IE6 has been a problem browser since its conception with particularly buggy support of the CSS specification. It is getting very close to the time when IE6 will finally stop being supported. We have all been keeping a close eye on the web analytics to see how many web visitors are still using IE6. There have also been some public campaigns within the industry to call time on E6. When we say we will stop supporting IE6, what we mean is that we will no longer code to make IE6 appear the same as a design within a modern browser. The website will be accessible but it will not look the same. Then we have IE7. This is the main crux of our problem. Many people will still be using IE7 for some time to come. Businesses that were on IE6 will upgrade to the next stable version, which in their eyes will be IE7. IE7 does not support CSS tables, which means we must on a case-by-case basis discuss with our clients what they wish to do about this browser.
The 3 options
- Ignore older browsers
- Provide a simplified layout
- Reproduce the layout with older techniques
Ignore older browsers
Commercially, this is not a viable option. If, say you were a self employed photographer then you may consider this as you could make assumptions that your client base would be using a modern browser, and probably not the Microsoft offering. Anyone who is using IE6 or IE7 will still be able to access the website; however no effort would be made for these older browsers so designs would appear visually broken.
Provide a simplified layout
A much more commercially viable option is to serve a separate CSS stylesheet to IE6 and IE7. The stylesheet provides a simplified layout to these browser versions so that although they will not contain content within grid columns, the content is styled to look as though it should exist within the website, for instance spanning the whole width of the web design layout rather than only taking up the width of one column in the enhanced design. Content blocks then stack one after another vertically. This method gives the web visitor a gentle poke to upgrade to a modern browser without affecting the overall experience. This solution is also cost effective with little extra development time required to cater for older IE versions.
Reproduce the layout with older techniques
There will be some clients who will insist that the webdesign layout must look as close as possible in every browser. They will insist this because either their core audience uses IE6 and IE7 or there is a large enough percentage of their readership to justify the added expense. The added development time increases the timescales and cost of the project to serve separate CSS stylesheets to IE6 and IE7 which reproduce the CSS table’s layout with older techniques.
But why should we build a website in CSS tables if the older techniques are working? CSS tables provide further opportunities for more complex design work and because they provide support for forwards compatibility of browsers, we must keep our side of the bargain and build websites that use the CSS specification to the best of the browsers abilities to ensure the vendors further develop compliant browser technology. Even if this means writing extra code to support websites that are required to reproduce the layout with older techniques. IE6 and IE7 won’t be around forever, once their usage levels drop through the floor we can easily remove the separate stylesheets.
Related posts
Tags: CSS, CSS tables, FireFox, IE6, IE7, IE8, Internet Explorer, Opera, Safari
This entry was posted on Sunday, April 12th, 2009 at 3:37 pm and is filed under Digital, Interface design, Web browsers. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
