Posts Tagged ‘usability’

Protect your Site from Bots and Help Digitize Books

June 1, 2009

Having investigate multiple different CAPTCHA solutions to prevent spam bots or “not so serious” visitors from registering for a site’s account, I am can highly suggest reCAPTCHA. It is a very secure implementation that will also make good use of the time people spend entering answers to challenges by using part of the answers to digitize books.

Running IE6 and IE7 at the same time on the same machine

February 1, 2008

Synopsis: Get IE 6 & 7 running concurrently on the same machine with this tool: http://tredosoft.com/Multiple_IE

My goal is that websites I work on or are responsible for function properly on at least 98% of all current browsers. At the time of this post, across sites I monitor, I observe the following

Browser Usage Statistics

Browser Version Visitor Share
Internet Explorer 7 40% to 50%
Internet Explorer 6 30% to 40%
Firefox 2 15% to 25%
Safari 3 3% to 5%
Safari 2 around 1%
Others (combined) never more than 2%

This means I will have to test sites and scripts on IE6 & 7, Firefox 2, as well as Safari 2 & 3 to get 98% coverage. For Safari 2, I am keeping an old, cheap Mac around (Safari 3 runs on Windows), but the real issue is testing IE 6 & IE 7 concurrently. I have tried several strategies, of which the last one is by far my preferred approach:

Strategy Pros Cons
Two Computers
RDP (remote desktop) into another computer running a different version of IE from the one on which is the primary development machine.
  • No need to try running two different versions of IE on the same computer
  • If the other computer is already available, the second-quickest way to get going; otherwise, see Cons
  • Needs another computer (which may need to be configured first)
  • Implies that another license of Windows is needed
Virtual Machine
Run a virtual machine with a different browser version. This configuration requires that the virtual machine can “see” the development machine’s IP address on which the site being worked on is running. I solved this by installing the Microsoft Loopback Adapter, assigning a custom IP address in the 10.0.0.* network and running the virtual machine (Virtual PC) in Shared Networking mode. I then configured either Apache or IIS to listen on that IP address. For .Net development, I pointed the IIS web root directory to the same folder I had my solution/project in.
  • Needs only one computer
  • It’s always a good idea to have a “clean-room” environment around for testing
  • Takes more effort to set up
  • Use additional system resources on the development machine compared to just a browser
  • Needs an additional license of Windows
Running Internet Explore 6 & 7 concurrently on the same machine
That is the model I have sought to implement in the past, but have found it cumbersome to get both versions running in parallel. I finally came across a “product” that solves this problem well: A Multiple IE Versions Installer offered for free by TredoSoft (see http://tredosoft.com/Multiple_IE).
  • Needs only one computer
  • No need for a virtual machine
  • Actually the quickest way to get going once everything is said & done (not counting all the time I spent searching for this).
  • Some have reported problems with IE crashing or even their entire Windows installation getting hosed by this.

I am surprised that I was not able to find this last solution earlier. Team members & I spent a lot of time setting up environments to support proper cross-browser testing (which I believe is not optional). I wasted a good amount of time scouting the Internet for a way to get IE 6 & 7 work in parallel and had been successful with the manual steps once in the past (but not in any repeatable fashion). One of the main reasons for this post is therefore to raise link popularity for the above tool and maybe someone else will find this helpful.

I know there are tools available online that take a screen shot of a site as it renders on different browsers, but that’s really not an option during a heavy design cycle, in which one switches back and forth between browser and IDE a lot. Also, only the real thing lets you test script/AJAX interaction–of course.

Update: The menu bar in both browser versions installed on the same machine is apparently shared, leading to the Help > About Internet Explorer command showing the version 7 About dialog even when in IE 6. This can be confusing, but it’s still IE6 (as a simple IE6-specific object detection JavaScript snippet or the observance of IE6-specific rendering bugs will reveal).

BTW, parralel is spelled parallel 😉

Google Maps: Many Markers Slow in IE6

February 1, 2008

Synopsis: Detect IE 6 in script and use GIFs for custom marker images instead of PNGs.

Working on implementing a Google Maps-based search that updates markers as you zoom or pan: Interactively placing and removing more than 50 markers (custom ones or the default) on a Google map using their API makes Internet Explorer 6 grind to a halt–even on a fast computer. Some have identified a caching problem, but even if that’s solved, your visitors will probably experience an awful slowness rendering lots of markers, if they use IE 6. It turns out that this has to do with how the PNG-format-based markers are displayed by Internet Explorer: Google Maps uses the “filter/AlphaImageLoader” hack, since PNGs are not directly supported by that browser. Any other browser renders several hundred markers just fine (and fast). The AlphaImageLoader filter is apparently putting a serious damper on IE’s rendering performance.

The “Workaround”

The only way to not to use PNGs for map markers is, well, not to use them. The following discussion assumes that you know how to create custom map markers. I highly suggest not using icon shadows, because avoiding them cuts the number of transparent images to “paint” in half, which is going to help all browsers. For IE6, we simply select a GIF image instead of a PNG. The entire custom marker definition could thus look like this (JavaScript fragment):

// one way to detect IE6 and IE6 only
var is_ie6 = (
	window.external &&
	typeof window.XMLHttpRequest == "undefined"
);     

// define custom marker
base_icon = new GIcon();
base_icon.image = is_ie6 ?
	"/media/images/map_icon_ie6.gif" :
	"/media/images/map_icon.png";
base_icon.transparent = null; // don't use transparency mask
base_icon.shadow = null; // don't use shadow image
base_icon.iconSize = new GSize(16, 15); // icon size matches image
base_icon.shadowSize = null; // self-explanatory
base_icon.iconAnchor = new GPoint(8, 7); // *center* of the icon
base_icon.infoWindowAnchor = new GPoint(8, 7);
base_icon.infoShadowAnchor = null;
...
// this marker can now be placed on the map
marker_options = { icon:base_icon };
marker = new GMarker(new GLatLng(_lat, _lng), marker_options);
map_obj.addOverlay(marker);

One place to see this in action is on the map search for LamongeRE (which is now defunct).