Tag Archives: Browser

Simple Browser Detection and Redirect with Conditional Comments

There are numerous ways to detect a users browser and then do with them as you wish (redirect, alternate style sheets, etc). Most of this involves JavaScript or server side scripting of some flavor. All of which is fine and good, but I wanted an even simpler way to detect a users browser, without any client or server side scripting. So, I created a simple way to do this using conditional comments. Of course, when I did this, I thought I was a genius for about 2 seconds until I realized that it was so simple, that probably lots of people have done this… so I did a quick Google search and found exactly that. However, no two approaches are exactly the same, and here is my truly unique (because it came straight from me brain) approach.

For my current project (in development), Microsoft IE6 and IE7 will not be supported browsers (big shock I know). So I want my conditional comments to target any IE browser less than version 8 and prevent the user from accessing the site, and offer them alternatives to either, upgrade their browser, or switch to a more modern browser.

Now, before we get started, I must state that I did not spend a ton of time trying to make this aesthetically pleasing. If the site visitor is using IE6 or IE7 to access a website, then they should not be expecting a whole lot… there are no rounded corners, fancy fonts, transparencies, etc.  Just a bare bones message to get the point across.

Step 1 – In the body of the page, right before the closing body tag , I put the following html:

<!--[if lt IE 8]>
<div id="IEredirect">
<div id="IEredirectText">
<p>You are attempting to view this website using an outdated browser.  To view this site, please upgrade your version of Internet Explorer or consider using a more modern browser via the links below.</p>
<br />
<p id="safari">
<a href="http://www.apple.com/safari/">Apple Safari&lt;/a>
</p>
<p id="chrome">
<a href="http://www.google.com/chrome/">Google Chrome</a>
</p>
<p id="firefox">
<a href="http://www.mozilla.com/en-US/">Mozilla Firefox&lt;/a>
</p>
<p id="ie8">
<a href="http://www.google.com/toolbar/ie8/index.html">Microsoft IE8</a>
</p>
</div>
</div>
<[endif]-->

Step 2 – In my linked CSS stylesheet I apply the following styles to the unique ID’s:
/*begin IE redirect*/

#IEredirect {
position: absolute;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 1000;
left:0px;
top:0px;
background: url(../images/bgBlack30p.png) repeat fixed center top;
}

#IEredirectText {
position: relative;
width: 500px;
height: 400px;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #ffffff;
margin-top: 100px;
border-bottom: solid 2px #000000;
border-top: solid 2px #000000;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
}

#IEredirectText p, ul {
padding-top: 20px;
margin-right: 20px;
margin-left:20px;
}

#IEredirectText a {
margin-left:60px;
font-size: 20px;
}

#IEredirectText a:hover {
color: blue;
}

#IEredirectText #safari {
height: 50px;
background: url(../images/icon_safari_bw.png) no-repeat left 0px;
}

#IEredirectText #safari:hover {
background: url(../images/icon_safari_color.png) no-repeat left 0px;
}

#IEredirectText #chrome {
height: 50px;
background: url(../images/icon_chrome_bw.png) no-repeat left top;
}

#IEredirectText #chrome:hover {
background: url(../images/icon_chrome_color.png) no-repeat left top;
}

#IEredirectText #firefox {
height: 50px;
background: url(../images/icon_firefox_bw.png) no-repeat left top;
}

#IEredirectText #firefox:hover {
background: url(../images/icon_firefox_color.png) no-repeat left top;
}

#IEredirectText #ie8 {
height: 50px;
background: url(../images/icon_ie_bw.png) no-repeat left top;
}

#IEredirectText #ie8:hover {
background: url(../images/icon_ie_color.png) no-repeat left top;
}

Step 3 – I put the following images in the above referenced “images” directory:

(don’t forget that last little square there)

Now when someone visits the page, they will see the image below with a 30% transparent black overlay background (in IE7) or a white background (ie6).  If they want to upgrade their browser, all they have to do is click one of the icons listed.  On hover, the icon goes from black & white to color.

Gregg – http://richterwebdesign.com


Firefox 4 Preview

Saw this video yesterday on YouTube and wanted to pass it along.  What I like most about this is the amount of thought, consideration, and effort given to the User Experience (aka UX design) for just the tab functionality alone.  I also love the idea of application tabs and how they will function different from document tabs.

Of course I realize that I geek out on this stuff way more than most.  But, between RWD & my day job as an IT Applications Manager, I spend an enormous amount of time in various browsers.  As more and more enterprise & personal applications are added to the web, our time spent there will obviously continue to increase.  Browser functionality and the User Experience will continue to evolve and there are likely features that don’t yet exist today that 5 years from now we won’t fathom living without… think tabbed browsers.  The browser makers (Mozilla, Opera, MSoft, Apple & Google) are in an all out war & like everything else, the competition brings big change & benefits to you and me.

Of course, being a Web Designer in Seattle, I would like nothing more than to see the hometown team from Redmond put together an adequate browser… but that’s not happening anytime soon.

Gregg – http://richterwebdesign.com