MRMcGovern.com

So I’ve left the blog hanging for the past 8 months. Lately I’ve been working to figure out how I’m going to pay back $100,000 in student loans, and pay for my truck, which I need in order to get to work. I’m currently working two part time jobs, starting a company, and freelancing. Things are still moving slowly. On top of all of that I still live at home, which is not fun. I’ve created a chipin account, which basically allows people to donate through Paypal. We’ll see if this helps at all. If you’d like to donate just $1, or as much as you want, I’d be very greatful, it would be a huge help.

Previously, I wrote about Firefox and all of the great add-ons there are to help you develop websites faster and easier. These are all great to get you started and on your way to a great looking website, but any web developer knows that once you get past your initial HTML draft and open your page in Internet Explorer you are going to run into problems. So how do you get your pages to display correctly in Internet explorer?

First, before we get to the good stuff, we’ll just review the basics of what many web developers do to solve these cross browser compatibility issues.

Conditional Comments

One of the most common ways to get your design to display correctly in Internet Explorer is to use conditional comments. Conditional comments are just HTML comments that contain IF statements, these comments are placed in the page, and the IF statements are only read by Internet Explorer.

First, create a new CSS document and name is ie.css. Once this is done, we will need a way to link the CSS file, only if the page is being displayed in Internet explorer, so we’ll add a conditional comment.

    <!--[if IE]>
	<link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->

If you want to make a different stylesheet for different versions of Internet explorer you can specifically identify which version of Internet Explorer the comment is intended for.

    <!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="css/ie6.css" />
    <![endif]-->

You can even make conditional comments that affect any version of IE before a certain version, after a certain version and more by using lt, lte, gt or gte in the comment.

lt = Less Than
lte = Less Than or Equal To
gt = Greater Than
gte = Greater Thank or Equal To

For example, if I made a stylesheet intended for Internet Explorer versions 7 and older I would use the comment:

    <!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="css/lteIE7.css" />
    <![endif]-->

One little hack you can do if you get stuck on issues between different versions of IE is make the newer version emulate an older version of IE. This is also done a meta tag in the head like the example below.

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

Enough of the basics, lets talk about tools to help you get the job done.

Multiple IE’s

Multiple IE’s is a great tool developed by Tredosoft that allows you to install multiple versions of Internet Explorer on your computer. This program gives you the much needed capabilty of having two versions of Internet Explorer to test your pages in. Unfortunately Multiple IEs is no longer maintained, but can still be downloaded. It will only install versions 6 and older on your computer (you can choose which of these you want to install), and allow it to run along side version 7 OR version 8, not both.

Xenocode

Xenocode.com is a great website that hosts tons of applications that can be run right from the web, without installing them on your computer. Xenocode has Internet Explorer 6, 7, and 8, Firefox 1, and 2, Safari and more. Xenocode also has alot more than just browsers, and even allows developers to upload their own applications for anyone to use.

IE NetRenderer

As you may have seen in my post about Firefox add-ons there is a useful web application called IE netrenderer. IE NetRenderer allows you to either right click your page, and choose to render in IE 6, 7, or 8 (if you have the firefox plugin), or type in your web address directly into thier web form at http://ipinfo.info/netrenderer/.

The less desireable aspects of IE NetRenderer include the fact that it only takes a screen shot of the page as seen in IE, and perhaps even less desireable than that is the fact that NetRenderer only takes a screen shot of the viewable area. If the web page scrolls either down or accross, you will not see the parts of the page which you would have had to scroll to.

These are all very useful tools, some are older than others and some are more useful than others depending on what platform you are developing on. Conditional comments are my cross browser bomb squad, I would not be able to do what I do in twice the amount of time without them. My personal favorite is Xenocode when developing on a windows machine and NetRenderer when on Mac.

Yes that’s right, Firefox, a mere web browser is one of the best tools when it comes to front end web design. No, you can’t just download Firefox, open it, and “BAM” you have a website. Of course you will need to do a lot of designing and programming, but there are tools made specifically for Firefox to help with this. The list below will explain it all.

1) The Web Developer Toolbar
The Web Developer Toolbar allows you to disable different programming languages, or styles within a page, which allows you to see what languages certain page elements are programmed with. You can also find a lot of information about forms and images, edit HTML and CSS, re size the browser window to simulate different screen resolutions and much more. There are also tools like rulers and guides, which are very useful for lining up DIVs and things of that nature. There are just too many features in this add-on to list.

2) Firebug
Firebug allows you to inspect elements of a page and see what HTML and CSS correspond to it. You can also change the coding and styling of certain elements, or the entire page and experience it live right in the browser. This add-on is especially useful for debugging styling issues. There is also much more you can do with this add-on with DOM and scripting, etc. This add-on is a necessity.

3) Colorzilla
This add-on is very simple, but very useful for front end design, especially preliminary design, when you are first getting your color palette set up, and defining some CSS attributes. Colorzilla allows you to select any color on a web page with a tool that is much like the eyedropper or color selector in Photoshop.

4) IE Netrenderer
IE Netrenderer is an important add-on that many web developers, especially those who are starting out may over look. This add-on lets you take a screen shot of your web page in multiple versions of Internet Explorer. This is important to ensure that your website functions across all browsers. This add-on is especially useful on a Mac system because you cannot install Internet Explorer. On a Windows machine, a better solution would be Multiple IEs, which will not take a screen shot, but actually allow you to run multiple versions of Internet Explorer on your system, so you can test your sites with 100% interactivity.

There are many more useful web development tools out there, but these I feel are by far the most useful I’ve seen. I swear by these and use them with every single one of my projects, I suggest you do the same.

Ever wanted an easy way to make a website look good from the start without taking your focus away from programming? With Blueprint CSS you can set up a basic wireframe, with nice typography in just minutes!

Blueprint CSS is a CSS framework made up of pre-defined classes. Styles are controlled not by editing CSS, but by the way classes are assigned to page elements. Blueprint CSS works by creating a 24 column grid that you can size and position elements on by assigning certain classes.

In just 15 minutes, including designing the banner in Photoshop and writing this blog post, I was able to build a nearly-complete web page. With a few lines of our own CSS we’ll be able to have a great looking page.

To get to this point, you’ll need to download and install Blueprint CSS. To install, just drag the “blueprint” folder into your site root. Then all you need to do is create your html file with the appropriate classes defined, which you can find below. Remember to link the CSS files in the head of your page or it won’t work.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Blueprint Test</title>
<link media="screen, projection" type="text/css" href="blueprint/screen.css" rel="stylesheet">
<link media="print" type="text/css" href="blueprint/print.css" rel="stylesheet">
<!--[if IE]>
<link media=”print” type=”text/css” href=”blueprint/ie.css” rel=”stylesheet”>
<![endif]–>
</head>
<body>
<div class=”container”>
<div class=”span-24″ id=”header”>
<img src=”images/header.jpg” alt=”Blueprint CSS - Example”/>
</div>
<div id=”navContain” class=”span-24″>
<ul id=”nav”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>
<div id=”news” class=”span-6″>
<h2>News</h2>
12.23.08 - Tested Blueprint CSS
</div>
<div id=”content” class=”span-18 last”>
<h2>Blueprint CSS</h2>
<p>
This div is set to span 18 of the 24 grid columns and show up as the last column in the row.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra massa et erat auctor porttitor. Nunc in turpis. Suspendisse pulvinar cursus sem. Ut luctus dui vel nulla. Nulla
rutrum adipiscing ante. Proin sed felis id ante ultrices semper. Etiam aliquet sollicitudin arcu. Integer vehicula ultrices eros. Aliquam sed neque eget ligula aliquet blandit. Sed
rutrum scelerisque ipsum. Donec et arcu. Praesent luctus. Curabitur ullamcorper auctor arcu.
</p>
</div>
<div id=”footer” class=”span-24″>
&copy; 2008 mysite.com
</div>
</div>
</body>
</html>


Now we’ll create a new CSS file for our site, and link it to our page. I like to call mine styles.css, and since Blueprint doesn’t use that name, we will go ahead and use it. In that file, we will spruce up the navigation, and footer.


#navContain ul{
background-color:#7090C9;
left:-18px;
position:relative;
width:950px;
}
#navContain ul li{
display:inline;
list-style-type:none;
padding:10px;
}
#navContain ul li a{
text-decoration: none;
color: #FFFFFF;
}
#footer{
color: #ffffff;
text-align: center;
background-color:#7090C9;
}


There you have it! A simple, great looking page in no time.

Live Example

Every action has an equal and opposite reaction. This statement has been true since the dawn of time, but not since the dawn of the web. Static web pages no longer keep today’s tech-savvy, smart phone addict at bay. People love interactivity, whether it be with other people, computers, or their iPhone. If you have something on your website that is dynamic and exciting, people will keep coming back. People will keep coming back, and they will show other people who will also keep coming back. An exciting and dynamic website will drive more traffic and keep users coming back for more.

So how does one incorporate these interactive pieces into a website?

A great way to add some eye catching effects to your website is by using jQuery’s slide animation. This is a simple jQuery script that will allow you to toggle the visibility of site elements. This ain’t your grandad’s visibility toggle, it actually uses animation to show or hide a chosen element.

Heres How to do it:

Download jQuery and place it on your web site with any other javscript files you might have. Then we’re going to create a javaScript file that will contain all of your jquery scripts to make exciting animations.

First we declare the name of our class

var MYSITE = {};

Then create our constructor function, right now this does nothing, since we have no functions to call when our page loads. The red part is our “list”, which will contain our trigger and target, this will most likely be different for you. The green part is our trigger, or the item we click on to expand or collapse the target. Finally, you guessed it, the blue part is the target. This is the element that we will be able to toggle the visibility of.

$(function() {

jQuery.MYSITE.compactor(’div#page div#content div#body div#post-3.post div.entry‘, ‘p‘, ‘div‘);

}

Finally we create our class

jQuery.MYSITE = {

compactor : function ( list, trigger, target ){

$(list).find(target).css({display :”none”});
$(list).find(target+":first").css({display: "block"});/*This will show the first target when the page loads. This line may be removed if you would like all of the targets hidden at the same time.*/

$(list).find(trigger).addClass(" link").hover( function () {
$(this).addClass(" linkOver");

}, function () {
$(this).removeClass("linkOver");
}).click( function () {
$(list).find(target+":visible").not(this).slideUp("def");
$(list).find(trigger).not(this).removeClass("linkOn"); $(this).addClass(" linkOn").next(target+":hidden").slideDown("def");
return(false);
});

}

}

Last but not least don’t forget to add jQuery and the file you created to your pages. it should look something like this:

<script type="text/javascript" src="jslib/jquery-1.2.6.min.js">
</script>
<script type="text/javascript" src="jslib/scripts.js"></script>