Essential Web Developer Tools (Validation, Browsers, Transparent PNG’s and More)

When getting ready to design and develop any web site – whether for a client or for myself – there are a few sets of resources that I find myself going back to EVERY single time.

Of course I save all the great resources I come across on Delicious, however only a select handful get an “essential” tag for quick reference.

I’m here to share with you a few of the sites that I consider to be “must have’s” in any web developer’s toolbox – and find out which resources you find absolutely necessary, as well!

Screen Resolution / Browser Size

When beginning the actual design stage, you should already have in mind a good idea of your web site’s target audience… are they a high tech group likely to have the latest computer equipment or are they a less computer savy bunch, who is running on an older computer with a small screen size?

Knowing how technical your audience is will help give you an idea of just how big you can make your site design.

A techie audience will likely have monitors boasting at least 1280×960 pixels and up. A less technical audience is going to have a smaller resolution, however, and it’s important not to leave these folks out!

Enter the W3C Schools statistics – particularly those of web browser displays. They don’t keep a complete list of stats, however they do focus on the lowest case denominator, which is the important group when determining how large your site design should be.

• W3 Schools – Browser Display Statistics

Until recently, I’ve played it safe by designing web sites with the 800×600 resolution market in mind. I just didn’t want to risk turning off that audience with horizontal scrolling. As individuals and companies upgrade their computers, however, the number of people still using such a small screen size has dropped dramatically – currently only about 8% still use this size.

The average user – 48% – is currently using a screen size of 1024×760 pixels. In most cases, unless you have a very specific (tech vs non-tech) audience, this is who you should be designing for.

I’ve found a fantastic set of tools at BrowserSize.com – two services being “Size My Browser” and “What’s My Browser Size”

• Browser Size

“Set My Browser Size” gives you 6 pre-defined resolution sizes, as well as the option to type in a custom set of dimensions. Hit submit and it’ll automatically resize your web browser to the specific pixel dimensions, giving you an exact vision of how your web site will look on the various screen sizes. They even let you resize to 640×480. I’m glad those days are a thing of the past!

“What’s My Browser Size” will tell you both your browser and full screen dimensions and color depth, as well as do a plugin check to let you know which popular plugins are (or aren’t) installed on your browser.

Both great tools, but I find myself frequenting “Set My Browser Size” quite frequently when developing a new site.

XHTML / CSS Validation

In today’s world, web sites need to be developed with valid, standards compliant code. A well coded site will function better, look better among various web browsers and often times do better in the search engines, too.

The World Wide Web Consortium (W3C) is the organization that determines current web guidelines and standards. With this they have provided two invaluable tools that EVERY web developer should utilize.

• The W3C Markup Validation Service
• The W3C CSS Validation Service

These tools for (X)HTML and CSS allow you to validate your code by providing a URL, uploading your file, or simply copying/pasting your code into a textbox.

The result? You’ll either get a green light – the A-OK that your site is coded to valid web standards. Or the red light saying your code is a bit off…

What’s great about the validation tools is that they will outline for you exactly what is wrong. Ok, it doesn’t necessarily tell you how to fix it, but it’ll tell you exactly which part of the code is wrong, as well as what line the error can be found on, etc.

It’s trial and error on your part here to fix the code, but you can keep re-validating until it’s perfect.

Web Browsers

Once your code is validated, it’s time to check for cross-browser compatibility. Technically you should be checking this throughout the entire web development process to be sure there are no big surprises in store for you.

But knowing your code has validated will give you the best chance of your site displaying properly among the latest web browser versions that support web standards.

You can keep up to date on the current browser trends with another set of statistics from W3 Schools.

• W3 Schools – Browser Statistics

This will help show you which web browsers (and browser versions) you need to keep in mind when testing your site. I personally keep checking back to see when Internet Explorer 6 will finally be out of the mix! It seems we’ve got a bit of a wait on that one, though…

Another great tool is the Browser Shots web site. While it’s best to have at least the most recent web browser version installed on your computer for testing, there are times when you can’t have multiple installs on a single computer (say IE6 and IE7). And if you don’t have a second computer running the older browser, or a virtual machine, etc. you’re kind of stuck. Not to mention PC vs Mac, etc.

• Browser Shots

With Browser Shots, you enter your URL and select from a LARGE number of web browsers, browser versions, and platforms. You can even select the screen resolution, color depth, as well as other features you do (or don’t) want taken into consideration.

Hit submit, then you can leave and come back to screenshots of your site as displayed in a wide range of browsers/versions across several platforms (currently Linux, Windows, Mac and BSD).

Easy Transparent PNG’s for IE6… YES, I said IE6

Don’t get me started on all the pit-falls of Internet Explorer 6 (though you can read more about the issues surrounding it here). However, one of the biggest problems web developers face when creating a web site is IE6′s inability to properly render transparent PNG’s. There are some options…

• keep your transparent PNG’s and say to heck with IE6
• miss out on great design options just to cater to IE6
• develop two separate versions – one for IE6 and one for the rest of the world
• search for tutorials and hacks that may or may not work well, and may not be standards compliant

For the longest time I decided to forgo transparent PNG’s – it just wasn’t worth the headache. Then I discovered the Save the Developer’s campaign, which focuses on trying to get people to upgrade from IE6.

I decided to promote the cause on this blog, and went ahead with my transparent PNG’s without worrying about an IE6 fix. What I did instead was install the Save the Developers javascript code, which places a little notification box that only IE6 users can see, urging them to upgrade.

Not the best solution, since as of August 2008 25% of web users are STILL using this outdated web browser. But, maybe it helped a few people to upgrade. I’m thinking the Save the Developer campaign is doing at least a little bit of good, because 6 months ago, the percentage of IE6 users was 30% – slow, but still improvement!

Then came the wonderful day when I was introduced to a little code snippit from Google:

• ie7-js – Google Code

It’s just three little lines of code, but all I can say is WOW! I implemented this on the main iDesign Studios web site, as well as a few recent client sites, and I must say that the script works like a charm! The next step is to setup the script on this blog as well…

Just make sure that all of your transparent png’s end with “-trans.png” in the filename and you’re set. You’ll also need to keep in mind that it doesn’t work with repeating/tiled background images, or with background image positioning.

But this bit of code makes life MUCH easier – and prettier – too.

What’s in YOUR Toolbox?

These are all tools that I refer to on just about every site that I develop… what about you? If you could only use one (or two) web references when developing a new site, which one would it be?

My MUST have’s are without a doubt the W3C’s XHTML / CSS Validation tools.

What’s on your essential list? Please share in the comments below!

About the Author

Selene M. Bowlby is a web designer and front-end web developer with over twelve years of professional experience in the design industry. As the owner of iDesign Studios she specializes in creating custom web sites for other businesses. more »

Related Posts

• Save the Developers! Taking a Personal Stand!
• Save the Developers! Upgrade Your Browser
• 6 Phases of the Web Site Design and Development Process
• Guest Post on Freelance Folder – 15 Key Elements All Top Web Sites Should Have
• Guest Post on Essential Keystrokes – Essential Tools Series

Tags

Sponsors