Tools and references every blogger or webmaster should know about

[hermione]

I've been designing my own websites for the past 2 years, and these 2 years have consisted of a lot of long nights of code hacking trial and error, uploading and refreshing ad infinitum. Only a few days ago did I learn of 2 useful tools that probably could have saved me hundreds of hours that I could have spent sleeping instead.

So I thought I'd start a thread where we can share web design tools and references that save time and make webmastering easier.

• Filezilla
  A free FTP client and real timesaver. Filezilla is very easy to use and you can upload an entire site at one time. It can save your log-in information and you can log back in to your exact last location by using the shortcut "ctrl + r", and you can move from one directory to another by typing the destination address directly in the address bar. (Believe it or not, I designed my first 3 websites using my web hosting company's ftp interface where you have to browse for each file and can only upload 10 files at a time. )
• Notepad++
  A wonderful, free source code editor I learned about (on Twitter) from Mrs. Micah to whom I am eternally greateful. This program makes editing html, css, php and all sorts of code a lot easier than it is on regular Notepad or WordPad.
• Firebug
  This is a Firefox extension that lets you edit the code (html, css, javascript, etc.) of any webpage you're on to see the effect immediately without having to upload and refresh. A real timesaver.
• RGB Color Values
  This is my favorite reference for choosing colors for my site designs. You can test any hexadecimal color code on the background of the page to see how other colors show up with that color as both background and foreground.
• Common fonts to all versions of Windows & Mac equivalents
  When designing a site, you want to stick to fonts that are common to all systems and browsers so your visitors see your site as you intend. This is a nice chart showing the common fonts with their Windows and Mac names, font families, and in italic and bold styles.
• W3C Markup Validation Service
  Just type in the address of one of your webpages to check that your HTML, XHTML, CSS, etc. markup is all valid. Click on "Show Source" under More Options to see where exactly each error is.
• Web Page Analyzer
  Anaylizes your site and makes suggestions and offers guidelines for improving load time.
• iWebTool
  Many tools for checking page rank, backlinks to your site, website speed test and more.
• Google Webmaster Tools
  Submit your sitemap, set your preferences, check links and more to help get your site indexed by Google.
• Google Analytics
  Free and detailed statistics reporting on visitors, page views, traffic sources and more. There are no record limits as with free accounts from other web stats companies like StatCounter, Sitemeter and Active Meter.

Well, that's all I can think of for now. Hope it's useful.

[AlmostFrugal]

Good list! I have to add Paint.net (also via Mrs Micah) for design work: buttons, graphics etc. Very easy to use, and free!

[khorrell]

I'm trying to implement Google Analytics...if any of you have a minute to click on over, it would help me see if I've done it right! Thanks.

The Paycheck Chronicles

[hermione]

Originally Posted by khorrell

I'm trying to implement Google Analytics...if any of you have a minute to click on over, it would help me see if I've done it right! Thanks.

The Paycheck Chronicles

OK, I clicked over and clicked on a few pages. Hope it helps.

P.S. I've found that it can take a few hours for stats for a visit to show up in GA.

[AlmostFrugal]

Originally Posted by khorrell

I'm trying to implement Google Analytics...if any of you have a minute to click on over, it would help me see if I've done it right! Thanks.

The Paycheck Chronicles

I went and bounced around too.

For what it's worth, I find that I don't always get the same results (for the things I can compare) with Google Analytics and SiteMeter. So I usually just take the result with the higher number!!

[hermione]

Originally Posted by AlmostFrugal

I went and bounced around too.

For what it's worth, I find that I don't always get the same results (for the things I can compare) with Google Analytics and SiteMeter. So I usually just take the result with the higher number!!

I use GA, SiteMeter and StatCounter and don't get the same numbers either. I prefer StatCounter most because I find it the easiest to use as far as checking stats go. The "Recent visitor activity" is my favorite feature for a good overview of where each visitor came from, how many pages they viewed, entry and exit pages, IP and ISP, returning visits, country, etc.

[amyschiff]

Good list! I work in web design and can attest to the awesomeness of the firebug extension. I literally use it every day. If you work with IE7 the IE Developer toolbar is quite useful too.

If you ever find a color used on a website and want to know what it is, then Colorzilla is the firefox add-on for you. It puts a little icon in the bottom left of your browser: clicking once will get you an "eyedropper" tool that tells you the hex and rgb values of any color you hover your mouse over. Double clicking the icon will give you a web safe color picker to play with!

Another tool similar to hermione's RGB Color values is the Colour Contrast Check tool. You can use the sliders to pick a foreground and background color and the tool will tell you if there is enough contrast between the two based on the standards set forth by the world wide web consortium.

[khorrell]

Thanks for all the info. I'm such a newbie!

[purplefdu]

Hmm, might have to check out colorzilla. It will beat screenshot and matching by hand, lol. I've spent an hour or more matching the perfect shade of Blue Knight blue before and let me tell you it sucked.

[hermione]

Oh yeah, I use ColorZilla too and it is such a time saver. A tip for that is if you're trying to get the color of text, use the ctrl +++ function to enlarge the letters so you can get an accurate swatch of it.