Category Archives: Website Design

What the Font is Going On?

Just a quick post today to cover a bit of Font 101 for you. You might be surprised to see this…

Fonts_2

Hard to believe those are both size 12, eh? Different fonts, especially serif (e.g., Times New Roman) vs. sans serif (e.g., Arial) can look to be different sizes even when they’re the same. But it’s really an optical illusion.

So, what’s the lesson here? Make sure to test your fonts at different sizes to get the look you want.

Be Considerate With Your PDFs

Quick tip: When linking to a PDF file, either within a web page’s copy or from a menu button, it’s a good idea to make some kind of note that the link will open a PDF file (and you may also want to note the approximate size of that file) — e.g., "Annual Report (PDF – 100KB)". So many people hate PDFs that, if they knew the link was going to open one, they wouldn’t click it. In fact, I get frustrated myself when I’m just quickly perusing a site, flipping from page to page, and then, all of the sudden, I’ve hit a link to a PDF and the dreaded Acrobat loading delay begins, without an easy way out. Patience is at a premium these days. Let people know if they’re going to have to wait beforehand and you’ll tick a lot fewer people off.

Low Wattage Color Palette

Ever thought about how the colors on your computer’s monitor affect the amount of energy it uses? Of course it makes sense that white uses more energy than black, since more light is needed to display lighter colors. Check out the "Emergy-C" low wattage palette on ecoIron’s blog to see what colors go relatively easy on wattage. Not too hard to design a nice looking web site with that palette.

You can see the differences in wattage used for various colors at http://www.microtech.doe.gov/EnergyStar/info.htm. There’s also info there about which popular screensavers are best for energy savings. Interesting stuff.

Comic Sans – Do I Amuse You?

Okay, the second part of that title is one of my favorite all-time movie quotes, from… anyone?  Joe Pesci in Goodfellas.

Anyway, just a quick note on font usage here, in particular the use of Comic Sans. Why do so many people like this font? It’s the most casual of the "web safe" fonts. Stay away from it, unless you really don’t want to be taken seriously.

Stick with the more accepted and more conservative fonts on your web site, such as Verdana, Arial, Times New Roman. Spice things up a bit with Georgia and Trebuchet. But, if you want your site to look at all professional, no Comic Sans. Ever.

Follow the F

Jakob Nielsen of useit.com has an interesting article discussing an eye-tracking study, which shows reading patterns of web page viewers. Turns out to be a F-shaped pattern: Readers’ eyes start at the top, in a horizontal motion, then move down the page and do a second horizontal movement, then scan the left side of the page, in a vertical motion.

What does this mean in terms of designing a web page?

  1. Visitors to your site won’t — initially, at least — read everything that’s on the page; they’ll scan first.
  2. Your first two paragraphs of copy (text) should be very important.
  3. It’s a good idea to start each paragraph, subheading, bullet point, etc. (i.e., the part of the left side of the page) with information-rich words to grab the reader’s attention.

More on Domain Names

No, not moron domain names… ;)

For those who find statistics interesting (okay, I do), check out Dennis Forbes’ post on The Search for a Domain Name.

He’s studied stats for registered .com domain names and discovered that all 2- and 3- letter combinations are taken as are nearly 80% of all 4-letter combos. And, the 5-letter ones are starting to fill up. So, don’t expect to miraculously find a very short acronym type domain name, at least not of the .com variety.  You might get lucky with a 4-5 letter one.

Mostly it’s just a fun read and might give you some good trivia to share with your friends. For example, did you know that the most common beginning letter for domain names is… S?

Okay, maybe this guy has too much time on his hands! :)

Let the Review Begin!

The winner of our free website review is: Barbara Babkirk. Congratulations, Barbara! And, thanks to everyone who entered our draw.

So, we begin reviewing Barbara’s website — www.barbarababkirk.com — with today’s focus on the design of the home page:

Barbarababkirkscreen_captu

On the right is Barbara’s home page. Of course, if you’re following along at home, you might want to actually open up her site in a new browser window.

Colors

Overall, I like the color scheme. The scarlet red / burgundy /yellow combination is quite nice, in my opinion. However, I find some of the smaller yellow text difficult to read on the home page — e.g., the "learn more" under the ribbon at the top left and the text underneath Barbara’s name. Same goes for the khaki colored font in the bottom text menu. I would suggest that she use a font that is lighter in color (or white) and/or sans serif, such as Arial or Verdana, for easier readability at a small size.

Menu Bar

The main menu is easy to find, right in the middle of the page. This is good. You can quickly get into the rest of the site. There are a couple of suggestions I would make about it, though:

  1. Again, the font is hard to read. I have trouble making out some of the words. Script fonts can be nice, but you need to pay extra attention with them to make sure they’re readable. If staying with the yellow color and this font, I’d try making it bold for starters. Or consider going a bit larger, a lighter color (white or close to it), or an easier-to-read font altogether.
  2. I like the photos but, for the most part, don’t see the relation to the headings beneath them. For Bio, it’s pretty obvious, but the rest don’t seem to reinforce the headings. It is a good idea to use icons and words in menus to reinforce what each item is, but the images need to be representative. For example, the photo above "Contact" might be of someone talking on the phone.
  3. Also, I’d either make all of the photos the same width or follow a pattern, such as every odd numbered photo (counting from the left) one width and every even numbered one another width. This would tidy it up.

Misc.

One other minor thing I’d fix on the home page is the overall page width. For some reason, I’m getting a horizontal scroll bar (at the bottom of my browser window). This isn’t the end of the world, but it shouldn’t be there. A quick look at the page’s source shows me the table used for this page is set to 103% — meaning wider than the screen. There’s no reason it should ever be set to higher than 100% (unless you’re an artist, wanting to show your portfolio in a different way). For the most part people hate horizontal scroll bars. Luckily, here, there’s no need to use it to see anything to the right, so I’m guessing that was just a typo that should be fixed.

Overall, there are nice elements to the home page and it’s obvious thought was put into the design, which is appealing, but could use a bit of tweaking.

More to come in the next few weeks…

CSS isn’t All it’s Cracked Up to Be… Yet

I’ve been hearing/reading a lot of debate about CSS vs. tables layout. Particularly in favor of CSS is the CSS Zen Garden website and book. Both show many wonderful examples of very nicely designed sites, amazingly all done from the same HTML code, but just using a different style sheet.

On the flip side, however, as KillerSite.com’s Stefan Mischook points out, to get the layout you want, using CSS, you often need to incorporate "hacks" which don’t work on all browsers, namely IE7.

I agree with Stefan that many CSS advocates have a bit of a "holier than thou" attitude in that if you use tables, rather than CSS to create a website, you’re just like soooooo 2002. Bottom line is it doesn’t really matter how you create the site, as long as it looks good and works (on all recent browsers). Not once has a client of mine complimented me on the coding I did in creating their website.

CSS most definitely has its place — in fact, I use it all the time, mostly for fonts and other things. But, if your site works best using good ol’ HTML tables, then don’t feel bad using them!

Do I Need a Site Map?

Before I start… Last chance to enter our FREE draw to win a professional review of your web site.

Okay, what’s the deal with site maps? I’m not talking about Google Sitemaps, but having a "table of contents" type of page on your site. No, you don’t NEED one, but they can be useful for a couple of reasons:

1. The obvious reason – it can help your visitors find a page, without having to dig around too much (especially if your site map is somewhat organized). And, it can be an easy way to have a quick glance at all that’s available on your site.

2. Google likes ‘em. It places importance on your site’s pages (partially) based on how many clicks it takes to get there from your home page. If you have a page that’s buried within a section within a section within a section, Google figures that’s not an overly important page. But, if it’s within a click or two from your home page, it’s probably worth something. If your site map is linked from your home page, then it’s only 2 clicks to each page listed. Not too bad.

New Year’s Promotion: Free Draw

We are offering a FREE DRAW to win a professional review of your existing website.  The review will point out what’s working and what’s not in your website and will be an invaluable tool in helping your site to get the results you’re looking for — more visitors, more clients, more sales. We will provide suggestions to help improve the site’s design, navigation, copy (text) from a marketing perspective, and make your site search engine friendly so that your site will be better indexed in the search engines.

The lucky winner will have their site reviewed on our blog, which will also provide you with some additional exposure for your services.

To be automatically entered in the draw to have your website reviewed, simply subscribe to our newsletter, Net Results (at the top left of this page). Note: We will never share your contact information with any third party. You may unsubscribe at any time.

Deadline for contest entry is January 27, 2006.  Get your entry in soon!