In this blog post I'm writing about a few ways to debug and test websites for Internet Explorer (IE).

Windows XP mode

If you have Windows 7 (Professional, Enterprise or Ultimate) installed on your computer you can download Windows XP-mode for free from Microsoft. Windows XP mode is a Virtual machine that lets you run Windows XP on your Windows 7 computer. More information can be found at Microsoft’s Virtual PC site.

The best thing with XP-mode is that it is (at least now) shipped with IE6 as standard web browser. In this way you have the "original" way to test your sites on IE6.
Just don't allow XP-mode to install updates automatically, because it will overwrite IE6 with IE7.

If you want to test your sites on IE7 you can download a standalone version of IE. I prefer Tradesoft’s version which can be downloaded from Tradesoft's home page.

Using IETester

Another way to test different versions of IE is to use IETester. In this program you open tabs for different IE versions (from 5.5 to 8).
Windows 7 is supported in the latest release. In my opinion IETester works quite fine and in most of the cases renders the pages like the real IE-versions.
But once I did find an error in absolutely positioned CSS, so be aware! :)

DebugBar

I also want to give you a tip about DebugBar. It an add-on for IE that allows you to debug the site you are visiting. Just remember to activate the add-on by right clicking on the taskbar, selecting DebugBar and clicking the Activate button.

This is a walkthrough of whats new in the EPiServer CMS 6 RC 1 EMVP Christmas Special release. It will focus on UI function changes, since I haven't had the time to look to much at the API.

 View mode/public templates

The only thing changed here is the RCA with new icons:

Top menu

The top menu is updated:

The eye leads to view mode, the question mark is help and the rest is the same.

Dashboard

A couple of new gadgets/icons added:

When enetering for the first time, no gadgets are added:

And the added gadgets/settings are stored after a recompile now! Hooray!

 Edit mode

 Not much have changed here. 

WYSIWYG Editor

By default, Tiny MCE is used.

XForms

You can edit an XForm in Chrome atleast.

Admin mode

Nothing new in UI function design:

Drag and Drop of properties

You can now drag and drop any property on a page type in the admin mode.

Anything else?

Have I missed anything? Want better pictures? Post a comment.

Expression Web SuperPreview for Windows Internet Explorer is the quite long name of a great tool for testing web page layouts in different browsers (I'm just gonna refer to it as SuperPreview form now on).

SuperPreview allows you to compare how a web page is rendered in different browser versions. You can add several browser windows which you can display side by side or on top of each other. You can even add images to compare your web page with a Photoshop design mockup. The full version currently has support for these browsers: Internet explorer 6-8, Firefox and Safari.

Other features are: rulers and guidelines, zoom, browser size, DOM explorer, CSS properties and element highlighting.

SuperPreview is a part of Microsoft Expression Web but there is a free stand-alone version of SuperPreview that only has support for the Internet Explorer browsers.

More info on SuperPreview
Download the stand-alone version
More info on Micorsoft Expression

Check out The Vintage Web site to have a look at the dinosaurs of the Internet age. Beware of old school web design with centered blinking content, fire animations and sound effects.

Anyone having trouble making the newly built site look as neat in Safari 3 as in Firefox 3? In the quest for Safari compatibility there is a good tool to use. It´s contained within the default installation of Safari 3 and is called Web Inspector (Webgranskare in Swedish). Open the Preferences menu and check 'Show developer toolbar' under Advanced. A new menu option 'Developers' now appears in the menu field. Your current page will now be visible under Documents and available for stylesheet/javascript analysis.

As a GUI developer it's not unusal to work a lot with photoshop. The design is later translated into CSS for the page. Wouldn't it be nice if we could create a customer-centered design directly into the browser? We'd win time and also make it easier to time-estimate the actual work.

 

There are occasions when customers want to redo parts of an already existing web-page. Sure, you can locate the original PSD file (if it exists) or take a screendump, paste it into photoshop and start your layerwork. But for small fixes I found a better way. I recommend 2 add-ons for the firefox browser that will make your life easier in these situations.

1. Firebug - If you haven't already installed firebug for firefox do so, I see it as a mandatory plugin for any web-developer/designer. 
2. FireShot - A screendumping tool that has a lot of features.
   

 

Here's what you do:

Start directly with the CSS. In firebug's "inspect-mode" you start to work with the parts of the page you need to change. Edit CSS's on the fly until you're satisfied with your supercool design addition/change. Then righ-click on the page and chose "capture visible page and... e-mail". That's it! Now you're done with your design, you've sent it to your client and now you know how to implement it, which of course helps to time-estimate when the customer asks you to go-ahead with the implementation.

 

Otherwise the FireShot is a great tool on it's own merits. I, however, see it as a trusty companion alongside firebug in my search to optimize my work...