Understanding web design via backwards engineering: Three fun WYSIWYG tools

by Angelique on November 17, 2009

Here are three tools that you will like to play with even if you are not designing a website.

screenshot of the Web Developer tool for Firefox in action

My favorite is Chris Pederick’s Web Developer Tool for Firefox. The screenshot above (click to see a large version!) shows the “edit CSS” feature. Mess around with the CSS and see the results immediately in the upper screen. You can do the same with the html. It’s a great way to learn which CSS class or selector does what; just enter some outrageous number or color and see what blows up in the upper screen! You can also use it to quickly try out a new look.

Screenshot of the Microsoft IE Web Developer tool in action

Microsoft makes a Web Developer tool for IE8. (I assume this tool also existed for earlier IE incarnations, but I never checked.) I don’t find it as easy to use as the Firefox tool, but, to be fair, I tried it for the first time today. I am using it to try to figure out why my blog layout is screwy in IE.

Screenshot of the PXtoEM tool in action

Finally, if you have pixel-brain, and the code you are uncovering with the above tools is in ems, and you wonder how they relate to one another, use the PXtoEM web-based Pixel-to-EM converter and code-generator tool. The site can generate CSS code for you, and it also has easy-to-understand explanations of ems and their useage and why you should use ems in your CSS instead of pixels.

Have more questions about this subject? Need help establishing a social network presence for your product or service? I can help you! Contact me at info@afmarcom.com or 602.735.3107.