Web Design Tools

Over the years I have created many websites, many of which I have developed and coded by hand, during these years I have used different tools to help me in creating the best sites with valid code.

As times change and new facilities and technologies become available to web designers, I have started to see new web design tools with far greater functionalities available to use online for free. These tools provide a fantastic option for web designers to quickly create, check or assemble valid code for their websites.

I have listed below just some of the best tools that I use in developing my sites.

Broken Link Check

Online Broken Link Checker

http://www.brokenlinkcheck.com/
Perhaps you are not using a cms with plugins to build your website, what if your site was coded by hand and you needed to check for broken links? Well there is an answer, it is Broken Link Check.

This is a free to use web app that scans you entire site for broken links and presents them in an easily readable format with links to view the link referring page.

As we all know, a missing page (404 error page) is not pleasant and not something we want our viewers to see. So to me this is a very handy web app.


Cookie Counter

Website Cookie Counter

http://websitecookiechecker.com/
A great tool for the counting of cookies on a website page, if you want to check your full site, you will need to enter each page of the site.


Cookie Checker

Website Cookie Checker

http://www.stratagia.co.uk/services/ict/share/cookie-tool/
This tools scans your page to see if it meets the new EU cookie law, beware there are limitations.


HTML Characters

HTML Characters

http://www.natural-innovations.com/wa/doc-charset.html
I have used this one for many years, very handy, quick and easy to scan for the correct character set.


HTML Codes

HTML Codes – Characters and symbols

http://www.ascii.cl/htmlcodes.htm
Much more extensive, a little longer to scan and my second choice in finding the correct character set.


CSS3 Generator

CSS3 Generator

http://css3generator.com/
I must visit this site several times a week! A great place to easily construct CSS3 declarations and styles with browser specific prefixes and cross browser support. Also offers access to a great CSS3 gradient tool.


Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/
A very comprehensive tool for generating CSS3 gradients with browser prefixes and cross browser support. The tools provides a visual editor to amend the design view the results with all css declarations and styles provided.


W3C Validation Service

W3C HTML Validator

http://validator.w3.org/
From the people who help create the website comes the HTML validation tool. Comprehensive is not the word for it, enter your url and the system scans your site returning a wealth of information on errors or warnings with your HTML.
Why validate a site? To make it future proof on the greatest number of computers / browsers / devices!


Favicon Generator

Favicon Generator

http://www.favicon.co.uk/
Help continue the branding of your website with a Favicon. What are these?
Well the tiny logo that appears within the URL text field of your browser, have a look at the URL at the top of the browser window, do you see the little icon before the ‘http://…’? This is the Favicon!
Make your 16*16px favicon in Photoshop, then use Favicon Generator to convert it into an ‘ico’ file type. Then insert the favicon in to your website by adding this code:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

  • Learn more from Celtic Web Design

    To learn more, contact us today to discuss your future desktop and mobile friendly website.