Useful Online Web Design Tools

Here is a nice little online collection of useful tools for any web designer.

Golden Ratio
This tools calculates the golden ratio for your designs.

Grid Calculator
Very handy tool for the designer who uses grids to mock-up site layouts.

Reflection Maker
A tool with creates a reflection for any image.

Table Generator
A tool for creating tables with column classes applied.

CSS Type Set
A tool for testing out CSS styles on your web content.

Markup Generator
Markup Generator is a simple tool created for xhtml/css coders. It’s main purpose is to speed up your work by generating xhtml markup and a css frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.

Vector Magic
A tool that generates Vector artwork from a bitmap image. It is allot like Illustrator's live trace.

YAML Builder
An interactive code-generating tool for authoring custom CSS layouts.

+dwebb

12 Firefox Extensions for Web Designers

I just updated Firefox to Version 3.0 and although I still have to test pages in IE for the web, I exclusively use the mozilla based browser for all my surfing needs. Firefox's use of extensions greatly enhances it's functionality and there are a number of great plug-ins for the web professional. Here are 12 that I use and have found very helpful.


Screengrab! 0.95
Screengrab saves entire webpages as images...
FireShot
FireShot is a Firefox extension that creates screenshots of web pages. Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify captures and insert text and graphical annotations.
ColorZilla
Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies...
MeasureIt
Draw out a ruler to get the pixel width and height of any elements on a webpage.
JavaScript Debugger
a powerful JavaScript debugging environment for Mozilla based browsers.
Picnik
Add a menu options and a toolbar icon to make importing images into Picnik easier.
Autofill Forms
Autofill Forms enables you to fill out web forms with one click or a keyboard shortcut.
Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page
Web Developer
Adds a menu and a toolbar with various web developer tools.
YSlow
YSlow analyzes web pages and tells you why they're slow based on Yahoo's rules for high performance web sites.
CSViewer
A simple CSS property viewer

Let me know if you have any favorites and i will add them to the list ;)

+dwebb

Online Tools For SEO Ranking

Here are some great online tools for checking on the ranking of websites. It is a collection of services to benchmark your site performance versus your competitors.

1. SEO Tool - Rank Checker
2. WebSiteGrader
3. Keywordspy
4. Compete
5. Touch Graph
6. Check Your IndexRank
7. SeoDigger
8. Xinu Returns

+dwebb

Useful Web Development Tools

There are many tools out there to make your web development job easier. Here are a couple I have come across online in my travels.

CSS:
CSS Grid Builder
CSS Sprite Generator
Blueprint: A CSS Framework
CSSTidy
logicss: CSS Framework
CSSFly

Ajax:
Clean AJAX
Sajax
Google Web Toolkit

Javascript:
JavaScript Code Improver
JSUnit
Venkman: JavaScript Debugger

Browser Plugins:
Firebug
Web Developer extension for Firefox
Internet Explorer Developer Toolbar

Web Performance:
Test Everything
Pingdom Tools

+dwebb

Web Design / Development Podcasts

I am always looking for new resources in web design and development. I recently came across these Audio and video podcasts that highlight design news, new web technologies and applications, and the latest trends in the design and development field.




Web Design

Audio:
Boagworld - This long running podcast interviews allot of experts in the web design field.
The Rissington Podcast - A humorous podcast that answers questions from it's design user base.
Audible Ajax - Discuss the latest news on Ajax and the changes in the field.
Web Axe - This podcast covers web accessibility issues.
Rookie Designer - Podcast covers a variety of web design topics.

Video:
Web Design TV Videocast - Covers various web applications
Adobe Creative Suite Video Videocast - Tools and features of Creative Suite 3
Lynda.com Videocast - Based on the award winning training videos on design.
Photoshop User TV - Tutorials and tips in using Photoshop
Layers TV - Everything Adobe
Photoshop Killer Tips - Tips and tricks for photoshop

I will add more to the list going forward. :)

+dwebb

Create a "invisible" folder on your desktop

Here is a neat little trick to create an invisible folder on your computer. If you want to hide some files, a "invisible" folder can be handy.

Here's how to to create one on your desktop.

1. Right-click on your desktop and select New > Folder to create a new folder.
2. Right-click the folder and select Rename. Erase the name of the folder so there is nothing there.
3. With the name field still active hold down your ALT key and type 0160 on your number pad (Make sure Num Lock is on). Release ALT and press Enter.
4. Now richt-click on the nameless folder and select Properties.
5. Press Change Icon in the Customize tab and select one that has no image.
6. Press OK and you have your invisible folder that can only be accessed by going to C:\Documents and Settings\[USERNAME]\Desktop.

+dwebb

Ajax / Javascript Galleries for your Website

Here is a great list of JavaScript and Ajax based solutions for adding a photo gallery to your website. Most are elegant and clean and will get the job done nicely.

1. Galleria
2. LightWindow
3. (E)2Photo Gallery
4. Spry
5. Imago
6. slideViewer
7. Minishowcase
8. AJAX Image Gallery Powered by Slideflow
9. Lightweight Image Gallery
10. PhotoFolder
11. JaS gallery
12. MooFlow
13. Highslide JS
14. jqGalViewIII

+dwebb

Finding Jobs Using RSS Feeds

There are a number of good job sites available in which you can search for jobs using RSS feeds. Some have unique content and others pull job listings from many sources. The best one varies by your industry and location.

CareerBuilder.com - Displays job title and 2 line description, Click button “Get jobs via RSS”.
CollegeRecruiter.com - Displays job title, location and 2 line description, Need to use separate query builder. Then look for text that says “Your Custom Link is Below”
Craigslist.com - Full feed with entire job listing., Result page has RSS auto discovery. You can also scroll to the bottom and look for RSS button.
Hotjobs.com - Displays job title, location and 1 line description, On the results page, look for XML button on left side towards the bottom
Monster.com - Displays job title, location and 2 line description, On the results page, scroll down and to the left there is a XML graphic and text link “Save as RSS feed”

+dwebb