Website Design and Promotion

Website Review: Secondary Page Design

Today we're going to look at the "secondary" (i.e., non-Home) pages of Barbara's website, with particular focus on the design and layout. Again, for those of you following at home, you may want to open the site in a separate window so you can flip between reading this and viewing the site.

Font

As I mentioned in reviewing the home page, I like the colors used in the site. However, I find the font colors (khaki and yellow) a bit difficult to read on the burgundy background. In the larger point sizes and when bolded, they're easy to read, but at a font size of 3 or lower (the main text and menu), it's a bit of a strain on the eyes. White — or something very close to it — is always a safe bet when using a dark background.

On the Presentations page, I find the font of the first paragraph ("For a small group...") too bold-like. It's actually size 4 non-bold, but looks all bold. And, having a full paragraph in bold is a bit of overkill. I'd lower the font size (lightening the color) and only bold part of the paragraph for true emphasis. (Same goes for all the text on the "Inside Heart at Work" page.)

Better yet, for real control of font size, weight, and color, try using CSS stylesheets. It gives you much better control of the exact font sizes (in pixels, e.g.) rather than relying on HTML's 7-point system, which can vary widely from computer to computer.

I'd work a bit on the consistency of type usage. i.e., on the Presentations page, the two bulleted lists have different line spacing (double for the first list; single for the second). And, under "Retreats" the two headings are in different colors — I'd make them both yellow.

Menu

I like that there's a text menu at the bottom of each page. However, in my opinion, that should be secondary to a more obvious menu at the top or left (or right) of each page. People generally expect to find the menu in one of these positions, so that they can easily navigate through the site, without having to scroll to the bottom of the page or go back to the Home page first.

Graphics

Kudos for using a couple of photos on the page to make the reading easier on the eyes. I'd maybe adjust the spacing around them a bit, though. For example, on the Bio page, the photo near the bottom of the page touches a bit too close to the text above it. Again, CSS can really be your friend in getting the spacing you want (or, you can use HTML hspace and vspace, but I don't like the lack of control with these).

One Long Page

The "Intention and Philosophy" page is too long in my opinion. It looks like there's a lot of good information there, but some people get scared off when they see that much on one page. I'd break it up into four or five separate pages (which will also help with search engine rankings; more on this in a later post). Also, I'd do away with the grey borders around each section. No offense, but only people new to web design use the HTML 3-d table borders. They're just not cool ;)

I think that's about it for now. Next time we'll get into how effective the copy (text) is in the site in terms of getting results from visitors.

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:

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!

Seth Has Flipped…

Seth Godin just released yet another free ebook: Flipping the Funnel.

Basically the funnel refers to the process where prospective customers enter the top of the funnel and gradually become customers as they move along down the sales process. I wrote a post on the funnel approach to marketing on my marketing blog for healing professionals that you can find here.

Seth takes the funnel approach one step further. He talks about flipping the funnel over and turning it into a megaphone where you utilize the Internet to turn friends, prospects and customers into your fan club. From the ebook:

Turn strangers into friends
Turn friends into customers
And then…do the most important job

Turn your customers into sales people

Definintely worth the read and is illustrative of an approach to marketing that many are adopting.

Download flippingfunnelPRO.pdf