Internet Explorer 8 and below are probably still a headache when
implementing user interfaces
If, like me, you have a large corporate or public
sector user base to design for then Internet Explorer 8 and
below are probably still a headache when implementing user
interfaces. This can be a pain when creating websites,
but given time you can work around most issues with
conditional comments and CSS "hacks".
When writing more complex web based applications it is not
always so easy. I'm currently working on an application called
Connect, which I'll talk more about when the project is ready to go
in my portfolio. I wanted to use HTML 5, some aspects of CSS3 and
more importantly I wanted it to have a responsive interface for web and
mobile device use. I began designing and prototyping the first cut
of the interface and it soon became apparent that older versions of
Internet Explorer simply weren't going to be up to the job.
In steps Google Chrome Frame.
Integrating Google Chrome Frame into your website
You can cut and paste the code from the website linked to above
and Chrome Frame will be instantly available on your interface. As
long as Chrome Frame is installed on the users machine, then the
meta tag is all that is required to make any browser become a
Google Chrome emulator:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
or to target specific browsers:
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
There are two methods to detect and prompt to install
Chrome Frame, one of which is client side and the other is server
side. Both are good, but I decided to keep this client side.
<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script>
CFInstall.check({
mode: "overlay"
});
</script>
</body>
</html>
This will open the following prompt window.
Not very pretty I hear you say...
You can easily customise the Javascript and add a bit of CSS to
make the prompt more in keeping with the theme of your
interface.
<!--[if lt IE 8]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<div id="overlay"></div>
<div id="chromeFramePrompt">
<h2>Plugin required</h2>
<p>We notice that you are using an old version of Internet Explorer. You will be able to use Connect, if you install the Chrome Frame plugin from Google.</p>
<p>Alternatively, please update your browser.</p>
<div class="buttonContainer">
<a href="http://www.google.com/chromeframe/eula.html?user=true" class="primary">Install plugin</a>
</div>
</div>
<script>
CFInstall.check({
mode: "overlay",
node: "placeholder",
preventPrompt: "true",
onmissing: ChromeFramePrompt
});
function ChromeFramePrompt() {
$("#chromeFramePrompt").show();
$("#overlay").show();
}
</script>
<![endif]-->
Add a sprinkling of CSS and you get something like:
The pros and cons of using Google Chrome Frame
The pros
- Write standard compliant CSS
- No need for conditional comments, extra CSS files and nasty
hacks
- Use grids for responsive web design
- A unified user experience regardless of user client
capabilities
- Less code = less testing = less development time
The cons
- You have to install a plugin
- The plugin is approx 170MB in size
- You currently need admin rights to install, unless you are
willing to point your users at the developers channel
- Microsoft claim there are security issues with Chrome Frame,
but then they would say that. If you use IE6 then you are obviously
not interested in security anyway.