Thanks to NetRenderer’s free web testing tool, you can instantly test what your site looks like in IE, without even owning a PC. Simply type in a URL, and NetRenderer will open a remote version of IE, capture a screenshot of your site, and deliver it straight to you.

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany. Just type in a URL in the field above and try it out – it’s free! Unlike other screenshot services, we are able to process a large number of capturing jobs in parallel and in realtime, making it the fastest service that we know of.

From my own tests, it really is quite speedy. Because it doesn’t yet support other browsers such as Firefox, Parallels would be a better option for more robust testing.

And how about a tool to see what sites look like on a Mac, without a Mac?

via Erik Spiekermann

The book details 37signals’ rapid prototyping and web-app development process with the goal of showing you “the smarter, faster, easier way to build a successful web application.”

If you’re familiar with the company’s successful web applications, Backpack and Basecamp, the ebook essentially answers the question, “How’d they do that?”

Designers and studios working with new up-and-coming technology firms will also find the book useful for getting a better understanding of the philosophy and working methods being adopted by many “Web 2.0″ companies.

PDFs of the eBook are still $19, but the HTML version is absolutely free. Yay!

37signals via Lifehack.org

The list is a bit intimidating at first, but you are sure to find something useful. It covers subjects ranging from daily blogs to technologies like CSS and techniques like AJAX to royalty free photo resources. I’m keeping The Web Developer’s Handbook bookmarked for handy reference.

SSI allows you to reuse a piece of code without having to hand code it into every single page. For example, you can keep a navigation header (or any other repeating element) of your site in a file by itself. When you want to include the header on a page, you simply insert a tiny piece of code to point to it. The web server writes the header into the page each time it loads.

To make a change to the header you only have to change one file. Every page that “includes” the header will reflect the change automatically, saving worlds of time and energy.

This tutorial explains the technical details, and other ways of achieving the same thing with PHP and ASP. All are easy for anyone comfortable with HTML code (I’m a beginner myself). I got a demo working in under 30 minutes.

Figuring this out was an “Ah hah!” moment for me. I knew it was possible, but I had no idea how easy it was. This may be the most important tool I have learned for developing web sites.

Do you have any simple, yet indispensable techniques for web development? Tell us about it, or link to a tutorial in the comments below.

.net magazine’s 20 pro tips:

1. Planning
2. Do it by hand
3. Stylesheets: importing vs linking
4. Smarter gradient backgrounds
5. Commenting
6. Use simple PHP to build sites
7. Set fonts using ems
8. IE Box Model Hack
9. Space saver
10. Test, test and test again
11. Format fundamentals
12. The ‘title’ and ‘alt’ attributes
13. The correct format for pseudo classes
14. Use semantic mark-up
15. Favicons
16. Change capitalisation using CSS
17. Wrapping text around images
18. Universal character sets
19. Print styles
20. Learn from others

If that wets your appetite, read the tips in detail.

Christian Watson of Smiley Cat Design takes Khoi’s technique a step further by incorporating a ruler and finer grid into his background image.

Khoi Vinh’s technique [via Subtraction.com] Christian Watson’s elaboration [via Smiley Cat Design]

Notable new features include:

• The ability to undo closing a tab
• A built in real-time spell checker
• Improvements to security, RSS support, and built-in web search.

The love for small icons is also not dead for part-time web developer and student, Mark James of famfamfam.com, who’s designed several icon sets of great craft. The icons show a keen eye for pixel pushing and are grouped in sets called Mini, Silk, and Flags. Best of all, they’re free and can be used anywhere, like in software applications, websites, and cute productivity blogs. Who says bigger is better?

View Mark James’ icon sets

1. First, come up with a list of standard display sizes your sites will likely be seen on. They may include both traditional and widescreen ratios:
   • 800 x 600
   • 1024 x 768
   • 1280 x 800
   • 1450 x 900
   • 1680 x 1050
2. Next, open up Photoshop or your favorite image editing program, and draw boxes with a 1-pixel stroke for each display size. Label each box with their respective dimensions. If you want to be fancy, lower the opacity of the lines and labels to make them translucent.
3. Place an image of M&M’s, Stephen Colbert, or your favorite desktop background as a layer below all the dimensions and labels.
4. Export as a flattened image in a format that’s friendly with your operating system, and set it as your desktop background.
5. Now when testing websites, just resize the browser window to fit the desired screen dimension.

If you’re lazy like me, you’ll probably want a template instead of making one from scratch. You can download the one I’ve made in Photoshop here:

desktopwithguides-psd.zip

UPDATE (June 23, 2006): After getting on the front page of digg.com, the server went down, so I didn’t get a chance to highlight some of the additional points our kind readers have sent in and some additional information I thought might be useful:

1. Many readers suggest using javascript bookmarklets or the built-in functionality of browser extensions in Firefox to resize windows according to desired screen dimensions. I like this too, but I also like having guides on the desktop because they help me see the relationship between a window and the screen’s edge. Many people make their browser windows smaller than their monitor display size to make room for other windows and interface elements such as start bars and docks, so having guides is useful for testing arbitrary window sizes. Plus, I just think it looks cool, but I’m a nerd. ;-)
2. On a Mac, desktop backgrounds start from the top of the screen, and not the bottom of the menubar, which means the guides on the desktop background I showed takes into account the menubar. If you’re on a PC, you might want to draw another set of lines representing the Windows Start Bar.
3. Here are some links to browser statistics. Some of the information doesn’t take into account the latest browsers, but they are a useful reference:
• Browser News: Resolution Trends
• Real World Browser Stats
• Sizing Up the Browsers
• Browser Resolution Trends