Archive for the 'Web Design' Category

Dec172006Running Internet Explorer 6 and 7 on Windows

While Internet Explorer 6 is (for the time being) still the most popular Web browser, IE 7 is rapidly becoming more common. Unfortunately, the two browsers can be very different in how they display Web pages; many of the display bugs found in IE 6 and earlier have been fixed in IE 7, so to really test your Web designs you need to preview your pages in both browsers. Because Windows doesn’t normally let you run multiple versions of IE side-by-side, you’ll need a workaround to do this kind of testing:

First, you can just get two PCs–one for IE 6 and one for IE 7. Alternatively, you can run a “Virtual Machine” on your computer (this only applies to Windows users; Mac users with Intel-based Macs have another solution.) A virtual machine lets you run a second (slow) copy of Windows on your computer. The virtual machine can be used to run IE 6 for testing purposes (you’ll use your regular, non “virtual”, machine for designing and developing your sites.) Fortunately, Microsoft supplies all of the pieces you need, for free: both Virtual PC 2004 and a “virtual hard disk” that includes a copy of IE 6 and a stripped-down version of Windows XP.

The instructions for setting up a virtual machine with IE 6 are at the end of this post, but I think I should mention a few of the drawbacks of this set up:

• It assumes you install IE 7 on your computer first. In other words your primary browser will be IE 7 and you’ll launch the virtual machine and IE 6 just to test your designs. (It’s possible to hold onto your version of IE 6 and install a standalone version of IE 7 as described on this Web site.)
• It’s RAM hungry. You need a fair amount of RAM (I have 2 GB) for this to work. Without enough RAM, IE 6 in the Virtual Machine tends to crash.
• It’s time-limited. The Virtual Hard Disk with IE 6 supplied by Microsoft is time-limited. On April 1, 2007 it will stop working (I wonder why they picked April Fool’s Day for this?) The people at MS imply that they’ll provide new updates before then, so you can keep testing this out, but they haven’t promised anything yet.)
• You have to preview files over the network. Since the virtual machine with IE 6 acts like a separate computer, you don’t have immediate access to all of the files on your computer. The virtual machine only see its own virtual “hard-drive”. There is a slight workaround which I discuss below. Alternatively, you can place your files up on a Web server and test them in IE 6 just by typing in the URL. (If you run a local testing server, you can also access the site via the local IP address of your main computer.)

If you’re still game for installing the virtual machine and IE 6, here’s how.

1. Download Virtual PC 2004. Virtual PC 2004 is a free program that lets you run different (or additional) versions of Windows on your machine. In this case, it will let you run another version of Windows for testing IE 6. (If you’re running Vista you’ll need Virtual PC 2007 which is currently in BETA but which you can download from: https://connect.microsoft.com/programdetails.aspx?ProgramDetailsID=874)
2. Unzip Virtual PC, open the Virtual PC 2004 SP1 folder and double-click the setup.exe file. Follow the instructions that appear to install the application.
3. Visit the Internet Explorer 6 Virtual PC Image download page. On this page you need to “Validate” your copy of Windows, by clicking the “Continue” button. This process may require you to download an ActiveX control, so follow the instructions on the page. I’m not exactly sure how Microsoft “validates” your copy of Windows; they claim they don’t look at any personal information on your computer, but they must send some information back to the mother ship to make sure you’re legit.
4. Download the Internet Explorer 6 Virtual PC Image. Once your system has been validated you’re taken to the real download page. Click the Download button and choose “Save to desktop.” Go and get some coffee or a good night’s sleep. The file is 495 MB, so if you’re on a slow internet connection, the download could take a while.
5. Double-click the downloaded file, it’s named IE6AC_VPC.EXE. Running this file just zips it and leaves you with a “Virtual Hard Disk” image (.vhd file) which you can use to install Windows XP and IE 6. The file is named IE6Test.vhd.
6. Launch Virtual PC (go to the Start menu and select Microsoft Virtual PC). After the program starts you’ll be introduced to a set up wizard. Click the Next button to begin the setup.
7. Select the Create Virtual Machine option and click Next.
   
8. Type a Name for the virtual machine (for example, IE 6) and click the NEXT button.
   
9. Choose Windows XP from the Operating sytem menu and click Next.
   
10. Click the “Adjusting the RAM” button and set the slider to something larger than the recommended amount. Virtual PC is a memory hungry beast; the more RAM you have the better. I have 2 gigs on my machine and I found that with the recommended setting of 128MB, Internet Explorer 6 crashed continually. With 500 MB of RAM allocated to the virtual machine, IE6 worked OK.
    
11. Select the “An existing virtual hard drive” button and click Next. This is where the .vhd file you downloaded earlier comes into play.
    
12. Click the Browse button and locate the file IE6Test.vhd. Click the Next button.
    
13. Click the Finish button and you’re all set up.
14. When you want to run the new virtual machine and access IE 6, just launch Virtual PC, select the virtual machine from the Virtual PC Console and press the start button. This starts a completely separate version of Windows in a separate window. You can run IE 6 from there. The virtual machine acts like a separate computer so it can’t automatically see all of your Web site files on your computer.
    
15. Right click on the shared folder icon (see arrow in image below) in the lower left-corner of the virtual machine window and select “Share Folder.” The Browse for Folder window appears (see next step).
    
16. Select the folder you wish to share, choose a Drive letter, and check the “Share every time” box. You might want to select your entire C: drive on your main computer, or just a folder that holds your Web sites. The “Share every time” option makes sure that the next time you start the virtual machine that it remembers this shared folder.
    
17. Open IE 6 in the virtual machine and navigate to a Web file on your computer. You can do this by simply typing the Drive letter followed by a colon in the address bar: for example, Z: This provides a view of that folder’s files, just click through them until you find the Web page you want to test. It’s a good idea to bookmark the home pages for your various sites, so you won’t have to use this lame method to navigate to and test your Web sites in the future.
    

Posted in News, Web Design, CSS | 13 Comments » | Permanent Location

Dec72006Firebug: Free, indispensable Web design tool

Trying to figure out exactly why something on a Web page looks the way it does often involves figuring out the complex interaction of multiple CSS styles. The CSS concepts of inheritance and the “cascade” (which I discuss in chapters 4 and 5 of CSS: The Missing Manual) means that an element on a page might be formatted by more than one style. For example, a particular h1 tag might inherit a font face and font size that was defined for the body tag, a margin defined for the h1 tag, and a font color defined in a class style that’s applied to the tag. And that’s just a simple example.

Fortunately for us Web designers, there’s a free Firefox extension that makes it easy to see how styles affect a particular tag on the page. Firebug (http://www.getfirebug.com/) provides several helpful tools for analyzing your Web pages. One of the most useful is the style panel which lets you see which styles apply to a particular page element–it lists inherited styles as well as styles that apply directly to the element. It also crosses out any CSS properties that don’t apply to the element because they’ve been overruled by more specific styles.

Another useful tool is the Layout tab which provides information concerning the width, height, margins, padding, border and placement of an element on the page. This is a great way to answer simple questions like: how wide is this sidebar anyway (as you can read in Chapter 7 of CSS: The Missing Manual, this kind of question isn’t always easy to answer.) Although you can find similar features in Dreamweaver, I haven’t seen any free tools that offer this much helpful diagnostic information for Web designers.

And believe it or not, these are just a few of the things this incredible extension can do (it also includes a powerful JavaScript debugger for you programmers out there.) It only works with Firefox (there’s another solution for IE and other browsers mentioned on the Firebug Website). Download it today…it could save you hours of hair-pulling frustration.

Posted in Web Design, CSS | 1 Comment » | Permanent Location

Jul132006The Ultimate Web Development Machine

Designing Web sites can be a real drag. If you’re using CSS and any of the current techniques for building CSS layouts, you know that what looks good in Firefox doesn’t always look good (at least immediately) in Internet Explorer. Building and testing Web sites that work consistently across browser and operating systems is always a chore. And the best testing setup includes both Mac and Windows, Internet Explorer, Firefox and Safari. This usually means having a couple of computers you can switch between for testing Web designs. A waste of office space, money and time.

Fortunately, for me, I just got a new Mac Book Pro laptop. Its Intel chip is a real boon to Web designers, since it actually lets you run Windows on your Mac and test a Web site using Internet Explorer. Apple’s BootCamp software makes it easy to install Windows on the Mac, but it requires that you reboot each time you want to switch between OS X and Windows—kind of a pain.

But with a couple pieces of software it’s very easy to not only have OS X and Windows running side-by-side, but to easily switch between the two with a simple keyboard shortcut. Parallels Desktop lets you run Windows, and VirtueDesktops makes it easy to switch between the two operating systems. With Parallels you can even have multiple versions of Windows running side-by-side—the perfect way to test both Internet Explorer 6 and Internet Explorer 7.

I’ve written an article on the topic for an upcoming issue of Macworld magazine. It’s scheduled for the November issue (meaning it’ll be on the newstands early October.) In the meantime, check out the video of this setup in action.

Posted in Web Design, Tips & Tricks | 3 Comments » | Permanent Location

Dec102005What Page Dimensions Should I Design To?

When I teach Web design classes, students always want to know how wide and tall their web pages should be. This is an easy enough question to answer when you’re dealing with printed designs like brochures and magazines: the size of the paper you’re printing on…duh! But with the Web, the size of our “canvas” is not for us to decide. It’s based on the hardware and viewing habits of our sites’ visitors—from 15 inch to 23 inch (and above) monitors and resolutions ranging from 640×480 pixels to 2560 x 1600 (and up). And since not everyone maximizes their browser window to fill their monitor, we’re not even entirely sure if a browser is using the entire area of the monitor.

Know Your Audience

Determining how to approach your Web page design is, like most interactive design, largely dependent upon your audience. The more tech-invested your audience the more likely they’ll have powerful computers, the latest Web browsers, and larger than average monitors. But how do you really know?

There are a few approaches involving JavaScript and some server-side code that can let you track not only your visitors’ monitor sizes, but also what size they’ve opened their browser windows to. I’m not going to show you how to do it: you can find information on that all over the web (like here and here.)

For an easy, out of the box (and a little out-of-the-pocket) approach you can also try the basic site stats package Mint. This php/mysql/javascript stats tracking setup provides a few add-ons that let you track both the resolution of your visitors’ monitors, and the width of their browsers.

No one has yet viewed this site (at least since I’ve started tracking it) with a monitor that’s less than 800×600 pixels; in addition, over 97% of my visitors have their browsers expanded enough to display 760 pixels (wide) of page content.

A starting point

If you’re not going to do the research—after all, it is a bit of a bother to set up the JavaScript code to do this, especially if you’ve got a well established site with lots of pages—you can safely assume that the vast majority (if not all) of the people visiting your site have monitors that are at least 800×600 pixels.

It might also be safe to assume that even if they don’t have their browser windows maximized, they’d at least be willing to expand the window to see the entire width of your site’s pages. In that case it’s pretty safe to design to a maximum width of 760 pixels. This accounts for any browser “chrome” like a scroll bar that would nibble into that 800 pixel total. In addition, if you’re really concerned about the total visible height of a page—often referred to as the area “above the fold” (as in a newspaper)—then a cautious estimate is 410 pixels, giving you about 760×410 pixels to work with (height is pretty tricky as I discuss below.)

A quick look around the web showed that fixed width designs aimed at 800×600 monitors range in width from 705-760 pixels. This site, for example, is designed to 760 pixels wide.

Editor’s Note: April, 13, 2007.Since this article was written, I’ve redesigned the site. It now is designed to 890 pixels wide.

If you want to bite the bullet, like a few sites such as A List Apart have, you can even design for the next larger monitor resolution: 1024×768. This affords around 955×600 pixels of breathing room. A List Apart is set to 960 pixels, while The Onion opts for 957.

Don’t design for height

It’s pretty hard to design a page whose height will always fit a visitor’s browser window. There are a lot of elements that can potentially eat away at the amount of vertical space a browser can display: location bar, status bar, bookmarks bar, menu, tabbed browsing, the Taskbar on Windows, and the Dock on Macs. The safest assumption is that the top few hundred pixels (up to about 410) will be visible to any one visitor. So make sure that anything someone HAS to see fits within that space: so don’t hide your incredible, must-have, offers below this region, or visitors may quickly pass them over. What’s worse is a page proclaiming the virtues of being a member of the Web site, but hiding the “Sign up to be a member” link below the visible part of the page, so users have to scroll just to join. Most won’t.

If you want to get a rough (very rough) approximation of what your site looks like in different size Web browsers try this online tool.

Posted in Web Design | 3 Comments » | Permanent Location