MCGWD Blog


Posted on September 10th, 2007

Top 10 Free Online Website Design Tools

The following is a list of my top 10 favorite online website design tools. Best of all, they are all free services. Let me know if I’m missing something special here.

Note: I intentionally left-out validation and testing type services. They will be covered in another post later.

  • Em Calculator
    Converts pixels to ems. Great for converting fonts from px to ems without reducing the base font size to 62.5%.
  • Lorem Ipsum Generator
    Generate paragraphs of classical Latin literature from 45 for use as “dummy text” for your mock-ups and layouts.
  • The Hivelogic Enkoder
    The Enkoder helps protect email addresses by converting them into encrypted JavaScript code, hiding them from email-harvesting robots while revealing them to people.
  • Kuler
    Color inspiration from Adobe Labs. Quickly find, create or share harmonious color themes online, then download the colors as swatches to be used in PhotoShop.
  • XML Sitemap Generator
    A fast and easy to use online sitemap generator that creates not only an XML sitemap (to be submitted to Google), but also a sitemap in text format (to be submited to Yahoo!).
  • FavIcon Generator
    Easily create a favicon (favorites icon) form most image formats. A favicon is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu and is a good way to brand your site and increase it’s prominence in your visitor’s bookmark menu. This generator by Dynamic Drive even supports transparency when using a gif or png.
  • hCard Creator
    A simple form from Microformats.org to create hCards. hCards are a type of vCard in semantic XHTML that enables applications to retrieve its information directly from web pages without having to reference a separate file.
  • StatCounter
    A reliable, invisible and highly configurable hit counter that offers tons of real-time detailed web stats. Through your own profile, manage all the sites you create and setup profiles/permissions so your clients so they can analyze and monitor their own stats too. I find this to be even more informative then Google Analytics!
  • IconFinder
    A search engine that queries icons to use on your website with “Creative Commons” or similar type licenses. Not sure if this constitutes as a tool but it sure is a handy time saver.
  • TypeTester
    A tool for selecting type primarily for screen as PhotoShop mockups are rendered somewhat different when you slice your PSD into a HTML/CSS layout. TypeTester enables you to see how type will look in its’ natural environment – a web browser.

Posted on August 1st, 2007

Interviewed by Web International Awards

Recently I was interviewed by the folks over at the Web International Awards. The WebIA interview is currently on their home page, but If you happen to miss it there, you can read the full interview here.


Posted on June 24th, 2007

Gaps Under Images in IE6

In IE6 and below, images within a div will have a gap or space below them. This is caused by the fact that images are not block elements; they’re inline. The pixels at the bottom are the space below the baseline where text descenders would go (tails on letters like g, j, p, q and y).

The Fix:
Using CSS, set display:block; on the img.

This is not a problem in IE7.


« Previous Page|Next Page »