Posts Tagged ‘Website Design’


Posted on July 29th, 2008

2008 Web Design Survey

A List Apart is once again calling all web designers, developers and everyone else who makes websites, to take their annual survey.

I Took the 2008 Survey


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 8th, 2006

Accessible Fonts; PX Vs. EMs

All future sites designed by MCG Web Dev. will now feature font sizes set with ems. Here’s why:

Yesterday I received an email stating one of the websites I designed wasn’t accessible to the vision impaired. The lady noted she had trouble reading the website because she couldn’t enlarged the text with her browser.

After a quick look she was right. Apparently Internet Explorer will not allow a user to change the font size when a site’s text is set in pixels (note the Firefox browser will).

I have always used px in my CSS to set font size as it gives the web designer the greatest amount of control. However, as the lady above noted, “10% of computer users (as well as non-users) are vision impaired.” Now that can add up to quite a few people to alienate.

Font Sizing Options

There are quite a few options you can set font size with; pixels (px), points (pt), keywords (xx-small, x-small, small, medium, large, x-large, xx-large) and percentages (%). I however choose ems (em). Why? Not only will ems allow users to re-size their text (unlike pixels), they also give more precision then points and keywords offer. Plus you can setup ems to work like pixels.

In modern browsers the default size text is “medium” or 16px. By reducing the base font size to 62.5% ( body { font-size: 62.5%; } ) this takes 16px down to 10px. Thus 1em is now 10px, 0.8em is 8px, 1.6em is 16px, etc. For more information on using ems see Clagnut’s How to size text using ems.

UPDATE:

Received an “Atta Guy” award for the accessibility updates I made for the lady mentioned above. Turns out she is Sheila Ashcraft, Commissioner of the Michigan Commission for the Blind.


« Previous Page