thetransient » user interface design

Test environment for supported browsers using Microsoft’s free virtual pc’s

Erik Phipps — Sun, 01 Mar 2009 23:57:04 +0000

With the release of IE8 RC1, I’ve realized that my supported browser testing environment is sadly lacking. The best way to create a testing environment with all the supported versions of Internet Explorer is to use the free virtual machines supplied by Microsoft themselves. In order get full use out of the virtual machines, I’ve decided to install the browsers that I don’t use on a regular basis (Safari, Opera, etc.) on one of them. No need to clog up my physical machine with extra applications if it can be avoided. One drawback is that the Virtual PC’s are time-bombed, but it doesn’t take much time to re-install the four or so browsers needed.

Here is my setup:

Physical PC

Physical Mac

IE6 Virtual machine

IE6 (comes installed on Virtual Machine)
Google Chrome
Safari
Opera
FireFox 2 (be sure to install with DOM Inspector enabled)
Flock

IE7 Virtual machine

IE7 (comes installed on Virtual Machine)

Notes:

Why IE7 virtual machine? IE8 RC1 has both IE7 and IE8 rendering engines but some differences do exist between the way IE7 renders and the way the IE7 engine embedded in IE8 renders. Therefore, the IE7 Virtual Machine is necessitated.

Virtual machine hosts file. For the virtual machines, you’ll need to add any local development sites to the virtual machine’s hosts file.

192.168.1.103 dev.myblog.com
192.168.1.103 dev.favoriteclient.com
192.168.1.103 dev.someothersite.org

The physical machine’s IP can be found by running ipconfig /all at the command prompt.

IE7 server error. I also had to disable the IE7 add-on named Diagnose Connection Problems in order to hit certain sites in my development environment.

Quirks mode buried but not dead

Erik Phipps — Thu, 29 Jan 2009 06:57:06 +0000

Good old Quirks Mode. It’s like an undead being slumbering in a forgotten sarcophagus waiting for some unsuspecting designer to stumble upon it. A few weeks or so ago, I began a UI project that, over the years, was designed for Internet Explorer’s Quirks Mode rendering engine. I hadn’t worked on markup for Quirks Mode for over a year and it didn’t take long for it to drain me of all my web standard’s complacent life-blood! Sadly, this project is still not finished with and will surely turn me into some blood-thirsty zombie-oid.

Unclutter your website with simple jQuery javascript show and hide

Erik Phipps — Sat, 06 Sep 2008 05:39:49 +0000

Here’s a tip to reduce clutter on a page with lots of repeating links, icons and/or elements. Say you have a list of search results on your website and each result has many action icons and links. It isn’t necessary to have to links and icons visible at all times. The non-vital content can be hidden by default and only shown when the user hovers over the search result containing element.

Check out this hiding non-vital content example.

The method for the example is very simple and can be accomplished with a small jQuery function and a single class assigned to each element we want to hide. This can of course be done with plain old javascript as well but I’ll use jQuery because it’s so darn easy.

Here is the jQuery code:

$(document).ready(function() {
//hide secondary content
$(".secondaryContent").css("visibility","hidden");
 
// toggle secondary content items on hover
$("#p110_showHideExample li").hover(function() {
	$(this).find(".secondaryContent").css("visibility","visible");
},function(){
	$(this).find(".secondaryContent").css("visibility","hidden");
});
});

Now all we need to do is add the class “secondaryContent” to any element we want to be visible only when the user mouses over the containing element.

For example, here is the remove link html from the upper right corner of the example:

1	<div class="delete secondaryContent"><a href="#">X</a></div>