Just before the holiday we received my oldest son’s current school progress report. (Thankfully he is a good student and always does well.) This reminded me of a useful tool I’ve found to help measure websites with regard to best practices for search engine optimization (SEO) and web marketing. The tool is the Website Grader.

This tool essentially scans your site for common HTML related to best SEO practices. It combines that data with other data from around the web, such as the web ranking in Google, the number of inbound links on your site, and where your site stands in relation to social media. It then generates an overall grade and a summary report.

Using a tool like this can help you gauge your site’s current rank and determine where you can most effectively put additional resources and time to improve the SEO of your site, and also to get more inbound traffic and converted leads.

Here are some screen shots of what you can expect if you use the tool to generate a report.

After entering your URL, you get a summary grade for your site:

The grader tracks on-page SEO:

It also tracks off-page SEO:

It determines whether you have a blog, and if you do, grades it:

It analyzes what’s happening on your site with regard to social media:

It helps you track information about your competitors’ sites:

Finally, the grader looks at the forms on your site that help convert visitors to leads:

I recently gave a lecture to the advanced web design class at Farmingdale College. When I met up with professor Jack Harris, he informed me that the kids, mostly juniors and seniors,  saw Loewy Design’s page in the Flash/Dreamweaver Genius Guide, and they were looking forward to meeting with me. A bit embarrassed and very flattered, I asked Jack what book was he talking about and where could I get one.

I later found out that the book is published by Imagine Publishing and promises to be the essential guide to dynamic design and development. We were recognized for our website’s approach to animation and design using purely CSS and Javascript, a technological accomplishment but not exactly what I wanted to talk about in my little seminar. My talk was about the real world lessons that you can’t get from a textbook. I wanted to focus on the process of solving business and branding problems with the online medium.

I tried to push their tech questions aside but they kept coming. I eventually got my point across that the technology we’re using today will be completely different when the students immerse themselves in the job market. They’ll need to educate themselves on the latest versions of Flash and Dreamweaver and keep up with always evolving programming languages throughout their careers.

The most valuable information I could share with them was to describe our thought processes, not only about making a website look great but about creating one that will actually help your clients solve their business challenges. I gave them our secret sauce on how we deliver positive results to our clients and improve their bottom lines.  As a take-away, I provided them, and now you, with a list of reference tools organized by each phase of our process.

By no means is this the complete list, since it too is always evolving, but it could serve as a nice resource and good starting point for students, clients and peers.

Everyone–designer and developer alike–has a set of tools to rely on that make the day go smoothly. We all have tricks that help us be more productive and more efficient–and take less Tylenol!

Here’s my list of tools that I use on a daily basis:

CSS/HTML/JavaScript Helpers:
Firebug (FireFox Add-on)
This is probably my top choice for front-end development. You can see/edit/remove CSS styles and HTML markup on the fly with this great resource. It also has many built-in features that allow you to debug JavaScript code right from the browser.

Web Developer Toolbar (FireFox Add-on)
This tool is similar to Firebug in the functions it offers. I find the combination of the two to be useful; I choose between them depending on the situation. The Web Developer Toolbar’s auto population of form fields saves lots of time, and the inline ruler is quite handy when comparing designs to markup.

Dust-me Selectors (FireFox Add-on)
This is a helpful tool to keep stylesheets as lean as possible. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. It then stores the data, so when you test subsequent pages, selectors can be crossed off the list as they’re encountered.

HttpFox (FireFox Add-on)
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. This resource is useful if you need to know what files are being requested from a web server and you can’t get that information directly by viewing the source code.

CleanCSS
CleanCSS is a powerful CSS optimizer and formatter. It takes your CSS code and makes it cleaner and more concise.

Tabifier
If you work with messy coders or inherit old code that hasn’t been kept neat, this tool will save you lots of time and eyestrain by correctly indenting the code and making it easier to read.

Browser Testing:
XenoCode Browser Sandbox
You don’t have to keep installing different browsers; XenoCode lets you run the browser of your choice virtually from its servers. This service essentially sandboxes the browser, allowing you to run it without changing any of your computer settings. I usually have IE6 and 7 running along with my installed version of IE8.

IENetRender
Here’s another handy tool; it allows you to see real-time screenshots of your page in many versions of IE.

Browsrcamp
If you develop on a PC, Browsrcamp allows you to see screenshots of what your page will look like in MAC Safari. I’ve found that the PC version of Safari doesn’t always render pages consistently.

W3C Validator
This choice is an obvious one. Validation keeps developers honest and squashes most problems before they become headaches.

Version Control:
Assembla
Assembla offers a nice control panel interface for your version-controlled spaces. This particular one runs on Subversion. Even if you’re coding a project all by yourself, I would recommend some kind of version-control software as a must-have. It will save you hours of time.

Tortoise SVN
This is a great SVN client that ties right in with the Windows Explorer Shell. (Sorry, MAC users.) There are numerous subversion clients out there, but this one is my favorite because it runs silently in the background until you need it.

Server Environment Information:
Builtwith
Builtwith is a web technology information profiler; it lets you find out what a given site is using.

Domain Name Details
The name says it all. This is a good place to find answers to most of your common questions about domain names quickly.

This list is by no means exhaustive. There are lots of great products out there that you may find just as useful. It’s really all a matter of preference and comfort. What tools do you use in your development cycle? Feel free to share!