Essential Tools for new web designers - mjcpk web design and development

Essential Tools for new web designers

The term Web Designer is quite loose. You might be a designer who never codes, a coder who dabbles in design or, more often, someone who is a jack of all trades. Freelance Web Designers can often be a one person band. The client expects you to handle everything to do with their website: domain registration, hosting, email, design, coding, databases, seo, site submissions, promotion, visitor statistics and more.

So how do you handle all these extra jobs and keep your clients happy? The trick is to use a number of free services and applications to take the load off. Here’s 10 to get you started.

1. Dynamic Drive Favicon Generator –  http://tools.dynamicdrive.com/favicon/

It is the little details that are important in site design. Professional sites have a favicon and so should yours. This tool creates a favicon from a image that you uploadand provides the .ico file and code to use it.

2. Stripe Generator – http://www.stripegenerator.com/

A single colour background can be flat and unimpressive but making your own tiling striped background isn’t always a quick and easy process. This tool allows you to create them quickly, preview your results and even try out a number of different ideas.

3. Background tile generator – http://bgpatterns.com/

If stripes aren’t your thing how about a patterned background (with or without a texture)? Again, it is quick and easy leaving you time to worry about the bigger issues.

See http://singlefunction.com/15-online-background-generators/ for more background tools

4. Google Webmaster Tools – www.google.com/webmasters/tools/

For essential info about your site Webmaster Tools is a must. Register for a Google account and sign your site up for free. Highlights include: number of inbound links to your site, submit a sitemap to ensure Google finds your pages, any errors Google found while indexing your pages, what people are searching for when your site appears in the listings, keywords on your site and much more. All of this is collected for you and in one easy place. It will take a bit of time and learning to be able to make use of some of the data but it is worth the effort.

5. Google Analytics – www.google.com/analytics/

How many visitors has your site had? Which sites did they come from? How long did they stay? What were they searching for? Did they perform any specific tasks while they were there? What browser did they use? What language do they speak? Which country do they come from?

If you want to know the answers to these questions and, more importantly, be able to tell your clients then you need Google Analytics. Add a small bit of code to every page on your site and then Google does the rest and displays pretty graphs and statistics for your viewing pleasure.

6. Google Adwords + Adsense - http://adwords.google.com/ and www.google.co.uk/adsense

These tools build on the previous two. Once you have reliable data about your site you can do something with it. If the number of visitors is low then maybe you could use an Adwords campaign to bring in more traffic. If you have lots of visitors maybe you can use Adsense to generate some income. With statistics to back you up it is far easier to sell an idea to a client (or even yourself).

Like all the Google tools they save you time and money which are both precious to a freelancer. Google also provides a lot of information on how to use their tools effectively. This includes written and video tutorials and guides.

7. W3 Schools validator – http://validator.w3.org/

Ensure you have kept to the standards with this tool. It is a good way to improve the standard of your code. Don’t just validate at the end of a project though. Check repeatedly as you go and fix errors as you find them. Most importantly try and understand why something was an error and learn from the experience.

8. FireFTP – http://fireftp.mozdev.org/

FireFTP is a plugin for the Firefox browser that lets you transfer files to your website by FTP. There are lots of FTP clients out there but this one is always with me, in my browser. It is quick and simple to use and it is easy enough to transfer the FTP account details between computers if you use lots of different ones.

9. FireBug – http://getfirebug.com/

I first started using Firebug to check for errors in javascript but I quickly learned that it could do so much more. One of the handiest features is the ability to edit the CSS of a page directly and see the results in the browser. The is helpful both to learn how things work and tweak your designs without having to go back and forth to a text editor and then refresh the browser every time. It can also edit HTML in the same way.

10. Rank Checker http://tools.seobook.com/firefox/rank-checker/

Rank checker allows you to enter a number of search terms and to check where your site ranks for those terms on a number of different search engines.  I routinely check the rankings for multiple sites across 5 search engines. With about 20 keywords each, checking them would nearly be a full time job without Rank Checker.  The results can be exported as a spreadsheet for conversion into graphs and charts to show clients if you want.

So there we have it, 10 tools I wouldn’t be without. They’re all free to use and save me a massive amount of time. Not only will using these tools help you do your job but they will also teach you new things on the way. The only way to be a good Web Designer/Developer is by continuing to discover and understand new things. The web changes quickly so it is important not to be left behind.

Tags: , ,

Comments are closed.

£25 Search Engine Keyword Monitoring

Monitor you site's rankings for up to 100 keywords across 5 search engines. How successful is your site? »

£40 Website Promotion
Assessment

How is your site doing? How is it ranking? How many links to it are there? From where? Get a full report. »