Nifty Web Design Helps

This is a web based tool that creates a Color Palette based on an image. This site analyzes a picture and produces a color palette. Instead of uploading an image though, you point to the URL of the image on the web.

Tried and tested color combinations. This site is a huge help in selecting color palettes.

COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or even in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.

One of the coolest color wheels out there .... complementary,  various split-complementaries, analogous, triadic, tetradic, clash, neutral, 4-tone, 5-tone, 6-tone, etc.; includes RGB and RYB,

Extract color schemes from any image, effortlessly and from Flickr randomly

This online tool helps you to easily create a favicon for your site from a graphic, logo or photo.

This site helps you identify fonts. Upload a scanned image of the font and they will display the closest matches in their database.

Campaign Monitor is an easy-to-use email campaign and list manager—one of those Web applications that can make a Web designer’s life a little simpler. It offers reporting, unsubscribe and bounce-management features and an open API for integration with your own applications.

Compare fonts for the screen

ping, WHOIS, traceroute, and other network and domain name tools.

Convert Fonts to sIFR SWFs Remotely. A cool little web app which lets you send a TrueType font via a web form and receive a .swf file suitable for sIFR in return!

Firebug offers a wealth of development tools :  you can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page and check to see how changes would affect the elements on the page.

The home of Firebug. Firebug allows you to inspect and edit HTML, tweak your CSS and see what happens, visualize CSS metrics, monitor network activity, debug and profile javascript, quickly find errors, explore the DOM and execute javascript on the fly. In addition Firebug gives you a set of powerful logging functions that help you get answers fast. Develop and debug.

One example of its use is right clicking over any element on a web site and from the context menu that appears choose "Inspect Element" - very handy. In the Firebug window you can hover over code to reveal a lot of information. You can also make live .css/ html changes on the fly (they don't stick after you refresh the page), very useful.

Check the width, height, or alignment of page elements. A huge help.

Absolutely essential for all professoinal web site developers: adds a menu in the toolbar of your Firefox browser allowing you to do many things: view and disable css, add and edit stylesheets,  outline divs, show images, show dimensions, view alt attributes, show deprecated elements, preset the browser window size, validate,
etc., etc.

A fast and small color picker that includes a mouse tracker. Run it, simply point to a color and it will tell you the hex, RGB, HTML, CMYK and HSV values of that colour. CTRL+Shift+C copies the color.

Essential Read.

A huge library of tutorials.

A great place to learn CSS, XHTML advanced XML, SQL, Database, Multimedia, WAP and more. Can also get certification here.

A fully functional FTP client that is integrated as a tab into Firefox ... free, secure, cross-platform.

As a designer its always handy to have a collection of pre-made vector objects available to use in your designs, whether its illustrator files or photoshop shapes - here is a very nice selection of usable objects.

Excellent quality images for both print and web... and the price is right!

Includes the SWFobject Way which is how I'm doing it now using the Dreamweaver extension available at the Communitymx web site:  http://www.communitymx.com/abstract.cfm?cid=D982E

After trying a number of Flash embedding techniques, I've finally decided this is the one for me. SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.

SWFObject forum and faq. They are great at answering your questions.

From the author of SWFObject: .....  Yes there is a problem somewhere in the flash player install process, but it's a very small problem overall.

Usually you can fix your computer by doing an uninstall/reinstall of the player.

It seems like this is a big issue from all the posts here, but in testing on a large website, we found that only 0.04% of people suffer from the problem.

This must be the easiest way to get full support for PNG-transparency in Internet Explorer 6. The technique even works for PNG-transparency in CSS backgrounds.

Comprehensive and well-organized document on Web Accessibility.

Test your connection speed

hugely helpful!

The IE Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.

The Best Practice Guide To XHTML and CSS

Advanced Eyedropper, colorPicker, Page Zoomer and other colorful goodies. A collection of tools, including a Color Picker similar to the one found in Photoshop, an Eyedropper that helps to get a color reading from anywhere in the ...

Browser stats, operating systems, screen resolution, web trends

Semi-transparent backgrounds are nice. They would be more popular, but Internet Explorer doesn't support .png transparency. There are a few clunky workarounds. Here's another that's a little less clunky.

Help keep yourself current by reading this blog regularly.

Site with a ton of links to sites with free vectors available for download.

A handy list from NCDAE that neatly (think: handout) lays out the Principles of Accessible Design.

Free, high quality buttons and icons that may be of use to web designers and developers

This is a "plug & play" style sheet switcher that lets your visitors switch between a list of alternative style sheets to apply to your site. With a change of style sheet the entire look of your site can be transformed. Persistent cookies are used to store the user's selection and automatically recall that style sheet upon his return.

Incredible: create personalized radio stations based upon your favorite musical artists or songs. An essential tool for geeks like me who are attached to their computers for most of the day (and night). Can't believe such a cool tool is FREE! Thank-you Thank-you !

Filled with good information and best practices for sending email newsletters.

high quality free fonts selected monthly by Smashing magazine

Good magazine to read.

Discussion of Safari for Windows from iVirtua Community.

swf Image Replacement. Using JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. Through progressive enhancement, it looks through your page and can easily add some new flavor to standard image styling.  Using JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website

examples of how swfIR can be used.

Occasionally I have an issue with hasLayout. Here's a great article about it.

CSS and Web Standards News ... read this daily to keep current. This is a community driven news site dedicated to web standards.

This article demonstrates that the vast majority of people scroll, with almost all of them scrolling right to the bottom of the page. Their conclusion is that there really is no reason to squeeze all of your content above the fold.

2.28 MB of downloadable syndicated content icons.

Generates "Lorem ipsum" in many varieties: classic, ALL CAPS, bulleted list, numbered list, and short paragraphs. Very handy.

A must-read for web developers

Lightbox is an interesting way to display images on a page.... requires javascript. It displays a large image by overlaying it on the page. The window opens up to the size of the large image. Can include a title and caption. This site also includes a forum.

In a hurry? Need to get a site up fast? There are several quality free templates on this site to help you get going.

SWFObject blog

Discusses various Flash embedding techniques including and recommending UFO and SWFObject.

Lots of nifty shortcuts, bookmarklets, etc for web designers and developers

An easy way to add Google maps to your web site and has a wonderfully clean and easy to use interface.

You can quickly add new points of interest and even draw lines showing routes. You can also select from a massive range of icons and add your own marker info just by clicking on a point.

Finally they make it incredibly simple to add the map to your site. You can enable or disable a range of features (including map controls and draggability) and add it to your site by copying and pasting a tiny fragment of code. However, the nicest thing from my perspective is you can do all of this without registering for the site.

Nifty online functionality by Adobe ... pick your primary color, it generates a set of four matching colors. Lots of palettes listed here. Create your own account.

All about Google site maps.

A wall of imagination, ideas, tutorials and web trends. Very helpful for the web site designer.

A number of resources that will help you identify a font.

Urban Dirty is a regularly updated online photo library featuring hundreds of grimy, slimy, gritty and grubby textures (managed by Paul Burgess). They range from crusty concrete to mysterious splats, all intended to bring a bit of dirt to your designs. Images are available in various sizes and offered free for any purpose.

Create your own stripes quickly and look at stripes created by others.

Forums, social media, galleries and more. FInd some places to to get help from other webmasters and provide help to others.

Good list of tools and sites

Lots of great css ideas on this site.

Two bookmarkets which apply grids to an html page. The first one applies a layout grid image to the body of a page. The second creates a div, positions it absolutely and then applies the grid image to it. Because the image is transparent you get a nice overlay effect. There is also a show/hide layout grid bookmarklet.

Comprehensive article on web site design and usability.

Elegant tool for quickly building forms.....