John's Web Toolbox

Jazz Up Your Forms With MooTools Pt. 2 | StoutLabs

2008-09-17T13:42:00.001+01:00

Im using this to create a nice, user friendly form on my web site

Jazz Up Your Forms With MooTools Pt. 2 | StoutLabs

WooThemes | Premium WordPress Themes

2008-09-01T16:48:00.001+01:00

Some really cool Wordpress Themes that I found, might use some in my next project...

WooThemes | Premium WordPress Themes

Low cost usability testing - UserTesting.com

2008-09-01T10:29:00.001+01:00

A low cost usability testing service. I havnt used it yet but I plan to and believe it can be invaluable tool in any professional web designers arsenal!

Low cost usability testing - UserTesting.com

Setting Up A Virtual Host in Apache

2008-08-29T13:24:00.001+01:00

I've been trying and failing to get my local Apache server configured to run several of my web sites locally on a single instance of Apache. Their online documentation is very obviouslly written by geeks for geeks and is difficuly to fathom out.

Luckily I found this well written and straightfoward guide to what I wanted to achieved and I was up and running in no time. Back of the net!

Setting Up A Virtual Host in Apache

reate a new audio media with Odiogo podcasts.

2008-08-22T12:09:00.000+01:00

Convert your blog posts into a computer generated podcast automatically with this service.

Bloggers create a new audio media with Odiogo podcasts.

HTML Email Design PDF from MailChimp

2008-08-12T15:41:00.002+01:00

Everything you need to know about designing an managing HTML Email from the good folks at Mail Chimp

html email design PDF

Web Design Dashboard

2008-07-31T11:56:00.001+01:00

A great dashboard/list cointaing links to everything related to building and marketing web sites.

AgencyTool Web Design Dashboard

Google AdWords: Keyword Tool

2008-07-29T14:17:00.001+01:00

A great tool from Google which shows you how many times a particular keyword is searched and all similar keywords related to the term you type in.

Google AdWords: Keyword Tool

Keeping Navigation Current With PHP

2008-07-24T17:06:00.001+01:00

A List Apart: Articles: Keeping Navigation Current With PHP: ""

WampServer

2008-07-07T15:19:00.001+01:00

I've been trying to setup and configure PHP, Apache, MySQL , and phpMyAdmin on my PC to install wordpress and christ almighty, talk about painful! I think you need a degree in computer science to get it all up and running!

After pulling my hair out for nearly two days I have just stumbled across this gem of a package called WAMP. It contains everything you need in single install with a handy GUI menu to make the installation and configuration a million times easier.

Install PHP 5 Apache MySQL on Windows : WampServer

Best Fonts for the Web | KathyMarks.com | notes, incarnation 5003

2008-06-21T23:27:00.001+01:00

Not a tool but a good article on which fonts work best for t'internet.

Best Fonts for the Web | KathyMarks.com | notes, incarnation 5003

Free Site Search Engine - put a search engine on your web site or add search to your blog

2008-06-16T13:43:00.001+01:00

Free Site Search Engine - put a search engine on your web site or add search to your blog

Favicon Generator and Gallery

2008-06-11T16:44:00.001+01:00

Generate a favicon simply and easily using a bitmap image on your computer.

Favicon Generator and Gallery

How to Create HTML Wireframes

2008-05-29T12:10:00.001+01:00

Not a tool as such but a great article and guidelines of how and why you should use HTML to create web site Wirframes. Well worth a read if you want a wireframe creation framework or if you want to learn what a web site wireframe is and how to create one.

HTML Wireframes and Prototypes: All Gain and No Pain - Boxes and Arrows: The design behind the design

Make Friendly URLs with Shorty

2008-05-12T10:28:00.001+01:00

Shorty is a simple tool for creating shorter, human- readable links from long URLs. You install Shorty on your server, so the links you create with it never go away. You can also manage your links and see how often people click on them.

Shorty

Detecting search keywords for which a site is ranked high.

2008-05-02T09:56:00.001+01:00

With Seodigger.com you can find out for which keywords your site ranks high enough to be in Google Top 20. You can analyze your own sites as well as sites of your competition, using the information obtained for SEO analysis, building a semantic core, finding out how well is a site optimized for this or that search request, and a lot more.

Add Search To Your Website for Nowt

2008-04-30T17:07:00.001+01:00

A free search engine for your t'internet site. It's Free for sites with up to 50 pages. Upgrade to a reasonable Pro licence for 99 US bucks and you get 200,000 plus it will index PDFs and Flash.

A handy tool if you want to add search to your own site and you dont have to use Google advert ridden technology to do it......which is nice.

Zoom Search Engine - Add search to your website, intranet or CD/DVD

Really Cool Free Fonts - datfont.com

2008-04-30T13:25:00.001+01:00

I really liked the font used in the Vimeo.com website logo so was hunting it down today, its actually called 'Black Rose' and i found it on this web site called dafont.com.

There is also a load of other cool free fonts as well. Check it out.

Download Free Fonts Searchable by Category

2008-04-10T12:44:00.001+01:00

There's a plethora of free font sites out there in cyberspace, this collection I found to be particularly well designed, easy to navigate and preview and most importantly - you can filter the font sets by styles.

For example, you can click 'Gothic', 'Curved', 'Handwritten', etc, and the site will load just the fonts relevant to the category you select. This is the first time Ive seen such a feature and find it to be very useful when picking a font to be used for a particularly style of site I design.

Download Free Fonts | UrbanFonts.com

Simulate Eye-Mouse Tracking Heatmaps

2008-04-07T13:47:00.001+01:00

Feng-GUI service is an automatic alternative to eye-tracking.

See which area of your website get most of the attention. This artificial intelligence service simulates the human vision and creates an attention heatmap and it claims to be 70% accurate. See their comparison charts on the site.

This is a cost effective solution to generating heatmaps.

Feng-GUI - Feng Shui for Graphic User Interfaces

Position a footer at the bottom of a page

2008-03-12T10:08:00.003Z

Not a tool as such, more of a technique to place a footer at the bottom of a page using CSS. Ahh, this used to be a piece of cake in that halcyon days of table based design, but is pretty tricky in CSS based layout. This good article called FooterStickAlt from the Man In Blue should solve a lot of problems, I know it has for me.

Check out the example page I have produced here and see how the footer looks across all Grade A browsers

Yahoo CSS Grid Builder Tool

2008-03-11T10:07:00.002Z

A tool from Yahoo which creates a HTML file for virtually any CSS based grid layout you desire. The code this tool generates is based on its grid.css framework and will work across all Grade A browsers.

YUI: CSS Grid Builder

Yahoo YUI - CSS Templates

2008-03-06T12:13:00.001Z

An excellent CSS development framework provided by the Yahoo developer network.

Run a free SEO report on your web site

2008-02-08T09:58:00.000Z

Looking for a simple tool that will give you some solid search engine optimization ideas? Look no further than Web Site Grader, a nifty little Web-based tool that will point you in the right direction for higher rankings.

Domain Tools: Whois Lookup and Domain Suggestions

2008-02-07T00:00:00.000Z

Domain Tools: Whois Lookup and Domain Suggestions

Monitir your sites and other's page rank with PaRaMeter

2008-02-06T13:32:00.000Z

PaRaMeter - free Google PageRank software. Monitors Google page rank. Online help.: "PaRaMeter stands for 'Page Rank Meter' - a free Google PageRank™ checking and monitoring tool. It is a simple application. Add all URLs whose PageRank you want to check to the list using the corresponding field. To update PageRank (PR) of all URLs, please click the Update PR button.

If you want to exclude some URLs, clear the checkbox to the left from these URLs. After the update is over, you should see the Page Rank values in the PR column. The Trend column shows the change since the last update.

You can export the data to a CSV file using the Project | Export to CSV menu item."

Dreamweaver Keyboard Shortcuts

2008-01-30T15:54:00.000Z

A handy PDF that details all the Dreaweaver keyboard shortcuts for the PC. Can be a real time saver, Ive downloaded it and have printed it out + is pinned to the wall next to my monitor.

dreamweaver_8_shortcuts_pc.pdf

Switch - Audio Converstion Tool

2008-01-21T13:40:00.000Z

It's been a while since my tool post, just been doing a lot of tedious content work - oh well, needs must sometimes. Anyway, I have recently had the need to try and convert some of our old speeches from WMA to MP3 format due to the new audio player I am implementing on the Kleeneze Intranet.

I have found this ace and free tool called 'Switch' which does the job quickly and with little fuss.

Switch

Create a visual Site Map

2007-12-01T21:55:00.000Z

WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online. As a WriteMaps user, you and your team will be able to build and access your sitemaps from anywhere, without having to rely on proprietary desktop apps and static files.

Generate a colour scheme for your site

2007-11-30T23:11:00.000Z

Do ever struggle to come up with a colour scheme/palette when building a site from scratch? Yep, me too. So with that in mind, simply pick your base colour and go to the colour wizard and it will suggest a multitude of various colour schemes for you to use on your site.

Color Wizard - Color Scheme Generator - Color Theory for web designers

Google Website Optimizer tool

2007-11-23T14:00:00.000Z

Google Optimizer is the latest in the amazing free arsenal of free tools from Google, the aim of which is to help you increase your web site converstion rates and ultimately you or your companies ROI. The Google Website Optimizer overview video tells you all you need to know to get started and here's a link to the Google Website Optimizer main page.

It basically allows you to create several different versions of a web page (which you design) which has some sort of 'call to action' and will then randomly serve these variations of the page to your users. It will then report to you which was the most effective in terms of conversation rates and will ultimately increase your ROI. Pretty interesting to see how good (or crap) your web pages are at achieving their goals!

Google Website Optimizer - Webinar

2007-11-23T09:15:00.000Z

Great new web site SEO Optimizer tool from Google - watch the introduction video on YouTube now.

Introduction to Website Optimizer Webinar

Create a Flash photo album with JetPhoto

2007-11-21T16:59:00.000Z

A very cool photo album creation tool. You can create impressive Flash and/or HTML photo albums, which can also integrate with Flickr, use GPS locations which links with Google Earth so you can see exactly where you took your photo! The majority of the features are free also.

See the cool Flash version of the Kleeneze Marrakech Conference album I created with JetPhoto.

Find broken links on your site with Sleuth

2007-11-19T14:59:00.000Z

Excellent and more importantly FREE broken links checking tool called Sleuth. Pretty comprehesive and an invaluable tool in any webmasters toolbox, especially if you have a large site. I uncovered 6 broken links on the site I manage which I didn't know about.

Find broken links on your site with Xenu's Link Sleuth (TM)

SE XML Sitemap Autodiscovery using robots.txt

2007-11-19T14:46:00.000Z

Tell Google, MSN, Yahoo, etc, how to find your XML Sitemap with Sitemaps Autodiscovery. This is something I have just implemented at work, not a tool as such but I thought it was a pretty important/useful piece of information.

Search engines will check your robots.txt file for a link to an XML sitemap file, then get the file from that location. This is a big plus because all the major search engines regularly check robots.txt files as part of their ordinary crawling. My Robots.txt file now does all the work for me in telling all the major search engines where to find my XML sitemap.

Search Engines Unite On Sitemaps Autodiscovery

Cooktop: The free XML editor

2007-11-19T13:59:00.000Z

A free and easy to use XML and XSL editor. The good thing about this tool is that you edit your XML and XSL in different tabs and run the transformation at the click of a button to see if your files are valid and it transforms how you would expect (or not!) You can use it in conjunction with several XSL transformation engines, should you so desire.

Cooktop: The free XML editor for Windows

.htaccess file generator

2007-11-16T13:39:00.000Z

A handy tool you can use to generate a .htaccess file. Very useful if you are running an Apache web server - NB - This doesn't work on sites hosted on IIS.

.htaccess Generator :: Webmaster Toolkit

Also, I found quite a good .htaccess tutorial to give you a good grounding of what you can and cant do with the file.

Accessible drop down menu.

2007-10-29T15:24:00.000Z

UDM is a fully-featured and accessible DHTML menu, that provides useable content to all browsers - including screenreaders, search-engines, text-only browsers and any web enabled device such as PDAs, iPhones ®, and Blackberrys ®.

Accessible Website Menu: Ultimate Drop Down Menu 4.5 - List-based Semantic DHTML Menu

Screen Capture with ScreenHunter

2007-10-12T15:22:00.000+01:00

I'm currently building a You-Tube styles video application. A sub-task of this is to create thumbnail images of all the videos in the player, and this is turning out to be quite a labourious print-screen-athon. I was having to print screen, past into a new Fireworks doc, crop the image to the size I wanted, export and save x 70 odd times. Zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz.

Having seen the graphic deisgner in our office using a screen capture tool on his Mac the other day, I've gone about the task of finding something similar for Windows and after a quick Google search Ive discovered the following nifty free little tool called 'Screen Hunter'. Does everything I need and saves loads of time, mouse clicks and my sanity! Press F6 to start the capture tool, click and drag the rectangle to capture the area of the screen you want and your in! You can save to JPG or GIF and to a folder you specify on your PC.

Free Screen Capture - ScreenHunter

Free Flash Video Player (FLV) Player

2007-10-12T11:29:00.000+01:00

If like you me, you are involved in Video Streaming production, the viewing of videos encoded in the Flash FLV format isnt a straightforward as you would have thought. You can't just double click the FLV to preview it, you need an external player, and this Free FLV Player is just the ticket!

It also displays important video properties of the stream such as the encoding video and audio bitrate's.

Free FLV Player

Create a Collapsible DIV with Javascript and CSS

2007-10-11T14:08:00.000+01:00

This isn't a tool or application as such, but it's such a handy little trick for a web designer to use I thought I'd post it here. This is an excellent article that shows you how to show/hide DIVs on a web page by using some clever and simple JavaScript.

Although you are show and hiding content, it will not have a nagative impact on your SEO as Google with still index all the pages content using this method.

Harry Maugans » How to Create a Collapsible DIV with Javascript and CSS

See where I implemented it for for Kleeneze on their web site. Upon the user clicking a link, I showed and hid different client testimonials on a page.

Test your web design in different browsers - Browsershots

2007-10-09T15:56:00.000+01:00

I recently stumpled across this excellent resource for checking your your web pages in different browsers and OS's. Crucially if you dont have a Mac, it supports this, in addition to Linux and Windows. I have seen a similar service called BrowserCam in the past but you had to pay lots of cash for their service, wont be using them again, "cash-back!".

Test your web design in different browsers - Browsershots

Google Releases Improved Content Removal Tools

2007-10-08T12:03:00.000+01:00

A good artcile I found on how to remove yours, and others, web pages from the Google Index.

Google Releases Improved Content Removal Tools

Free CSS Validation Service

2007-10-04T10:24:00.000+01:00

I have sometimes been pulling my hair out as why a certain page element isn't displaying as it should and quite often this can be down to an easily typed and difficult to spot syntax error in your CSS file. When I come across such unexplainable problems I regularly validate my CSS just to make sure - it's also good practice to do so regardless!

Validate your site CSS file(s) with the following free validation service from the goodfellah's at the W3C. You can validate it against different versions of the CSS standard, the medium for which the sylesheet is to be embedded to and various different warning reports, so blaze away on the link below! You can even place a CSS valid button on your site and everything when you are valid - which is nice.

The W3C CSS Validation Service

PS - This site is CSS valid, naturally!

Magic DVD Ripper

2007-10-03T15:45:00.000+01:00

Pretty good and cheap DVD ripper for download. I use this program as the first port of call when preparing video content on DVD for streaming on the web i.e I use it to rip a DVD to AVI format which then can be used to convert to Flash Streaming FLV or Windows Media Streaming ASF format.

"Thats MAGIC"!

Magic DVD Ripper - rip DVD to hard drive or blank DVD

Google Sitemap Generator @ xml-sitemaps.com

2007-10-02T11:04:00.000+01:00

A spiffing online Google XML sitemap generator tool. Also, create HTML sitemaps for your t'internet site and CSV sitemaps for Yahoo. Pretty sweet. If you dont know what a Sitemap is read the below, mmmkay.

"By placing a formatted xml file with site map on your webserver, you enable Search Engine crawlers (like Google) to find out what pages are present and which have recently changed, and to crawl your site accordingly."

XML-SITEMAPS.COM

Search Engine Robot Simulator

2007-10-02T10:58:00.000+01:00

A cool online tool that will simulate how a Search Engine bot will index your web page and display the results to you.

Search Engine Robot Simulator - XML Sitemaps

Encoding Best Practices for Prerecorded Flash Video

2007-10-01T16:12:00.000+01:00

Quick tips for setting encoding parameters for Flash Video from Adobe.

Adobe - Developer Center : Encoding Best Practices for Prerecorded Flash Video

IE WebDeveloper - DOM Inspector, Script Console, Logging messages and HTTP Monitor

2007-09-27T21:42:00.000+01:00

Im on a IE tip this evening....youve all heard of Firebug, the excellent DOM inspector for Firefox right? Well this is soimething similar for IE, I was wanting the same Firebug functionality for IE when trying to fix an annoying quirk IE was doing when developing a site and stumbled across this on my search of the t'internet.

V.useful - enjoy!

IE WebDeveloper - DOM Inspector, Script Console, Logging messages and HTTP Monitor

Install multiple versions of IE on your PC

2007-09-27T21:37:00.000+01:00

An absolute godsend for testing your web sites on older versions of our good friend Internet Explorer, in particular that little blighter v5.5. Install all version of IE 3 (!!!) onwards onto your PC via a single installer. You can even run muliple versions of IE at the same time. A brilliant program and its free.

Install multiple versions of IE on your PC | TredoSoft

Pixels (X) to Centimeters Conversion Calculator

2007-09-26T16:10:00.000+01:00

Convert pixels to cm's and vice versa with this handy calculator. Useful if you want to convert dimensions from print to web and vice versa (which Ive had to do today!)

Pixels (X) to Centimeters Conversion Calculator

How to centre a DIV on the viewport

2007-09-25T14:22:00.000+01:00

Does exactly what it says on the tin!

Center DIV/Container/Layer IE : flumpCakes

Ten CSS tricks you may not know | evolt.org

2007-09-25T13:57:00.000+01:00

Ten useful CSS tips you might not know or have forgotten (i know of a few I had forgotten about!)

Ten CSS tricks you may not know

Bulk Rename Utility

2007-09-24T10:56:00.000+01:00

Not a web tool as such, but a fantasic windows tool that bulk renames groups of files in one hit. Can be a big time saver if you need to rename a lot of files (which I frequently need to do)

Download it now!

Bulk Rename Utility

Website Hosting With Apache

2007-09-22T21:04:00.000+01:00

Good article for how to set up your own Apache web server. No to IIS!

Beginners Guides: Website Hosting With Apache - PCSTATS.com

Pullquotes with CSS

2007-09-13T14:48:00.000+01:00

Handy small CSS article to make a quote stand out.

Pullquotes with CSS:

IE NetRenderer - Browser Compatibility Check -

2007-09-12T14:16:00.000+01:00

This is an IE renderer which lets you preview your site in muliple versions of IE, which is nice!

IE NetRenderer - Browser Compatibility Check -

Ning: Build Your Own YouTube, Flickr or MySpace

2007-09-12T11:13:00.000+01:00

Ning: Build Your Own YouTube, Flickr or MySpace

Make a Flash Countdown Banner

2007-09-11T21:18:00.000+01:00

Create a Flash Countdown timer, can be fully customised to your own needs.

kirupa.com - Date Countdown Timer

CoffeeCup Google SiteMapper - Create Powerful Google Sitemaps in Seconds!

2007-09-11T20:49:00.000+01:00

CoffeeCup Google SiteMapper - Create Powerful Google Sitemaps in Seconds!

Flash font browser

2007-08-29T14:27:00.001+01:00

Browse all your system fonts on a web page with this Flash app:

http://www.stcassociates.com/lab/fontbrowser.html

Welcome to John's List

2007-08-29T13:16:00.000+01:00

Welcome one, and welcome all to John's List! Here you will find a list of useful web applications and PC applications which help me in my day to day job as a web designer.

Enjoy and feel free to post any app like or find useful.