Thursday, November 1, 2007

Web Design for Authors: The Quick and Dirty Guide, Part 1 of 3

I started my own web design business when I was 13. It was fairly successful and I kept it up until I was 16, when I got really distracted by romance novels. (Damn you, Laura Kinsale! I could've been the female Bill Gates!)

I spent a few years in my late teens and early twenties working on the web teams of a number of companies whose revenues are in the billions. So, yes, I have some experience in this area.

After seeing a number of requests for web and MySpace help from authors on the mailing lists to which I belong, I decided to put together a trilogy of blog entries to help out my fellow authors who are interested in this topic.

Common Mistakes

According to Ann Bruce


  • Serif fonts--the fonts with the little flourishes at the end to help the eye travel to the next word--should be used for print only. For the web, since screen resolution is not as high as print, stick to sans serif fonts because serif fonts tend to blur together, making it difficult to read. The most popular fonts for the web are Arial and Verdana. The latter was created specifically for web use.
  • Fixed font sizes must be avoided. Users need to be able to adjust the font for comfortable reading.
  • Justified text usually results in uneven spacing and makes reading more difficult. Yes, I know text in books are usually justified, but remember the web is an entirely different medium.
  • Light text on a dark background is inherently less readable than dark text on a light background. That's not to say all dark backgrounds are bad, but unless the site is graphic intensive, like a photographer's site or a movie site, stick to light on dark. And never use dark on dark. Really, you want to sell reading material. If users can't read the content, such as excerpts, on your site, you're going to lose potential sales.
  • Text on textured backgrounds is WORSE than light text on dark backgrounds. It's not easy for the human eye to distinguish and read text when the background is busy. Sometimes, it actually HURTS!


  • Drop-down menus don't allow users to see all the navigation options right away. They hide information the users are looking for and can be confusing.
  • Non-standard menu headings confuse users. Really, users do not intuitively go to "Muse" to find a listing of available books. (This author's site was so confusing that instead of searching and buying up her back list list like I originally intended, I stopped reading her altogether.)
  • Image maps are wrong. Do you enjoy running your mouse all over the cute picture of someone's office to find the link to a book listing page? No? Then why do you think other users would? And really, it's not intuitive to have a desk lamp link to a bio page.
  • Users sometimes get lost in a site. Have a link to your home page on every page so they can find the starting point if they get in too deep.
  • Underlined non-link text is deceptive. Users have been trained--yes, trained--to associate underlined text with hyperlinks. If you need to emphasize something, try bolding or italicizing it.

Bells and Whistles

  • Big graphics = long loading times.
  • Animated graphics. Yeah, I used animated graphics...when I was 13 and just starting out.
  • Music increases the loading time and, frankly, not everyone shares your taste in music. I listen to Tool, 30 Seconds to Mars, Nine Inch Nails, etc. How many people would like to hear "The Kill" when they go to check out a romance author's site? Probably not many. But if you MUST ABSOLUTELY have music on your site because your life would not be complete without it, let the users start it. Unless you're doing a music band's website, don't ambush users.
  • So, you've won award or are part of a special network. Great! And you want to share it with the world. Great, again! But do you really need to clutter up your main page with EVERY SINGLE thing you've won? I came across an author's website and the home page with its 17--yes, 17--badges made me think they were ads so I skipped over every single one of them. Have the most current award and put the rest elsewhere, like on the bio page or have a separate awards page.

Just Say No and Other Miscellanea

  • Frames are evil and clumsy. Bookmarking doesn't work properly, causing problems when users try to return to the site. And if the users enter a framed page, navigation might be missing because it is located in another frame.
  • Opening new windows pollute the users' screens and breaks the BACK button. Do NOT break the BACK button. Let the users decide where they want to go. If they want to go back to your site, they using the BACK button.
  • Horizontal scrolling. Do I really need to explain why this is wrong?
  • Re-size my browser and I curse your name because I should be the only person in control of my browser.
  • Front Page and other cheap HTML editors create poor code riddled with bugs that may be incompatible with different browsers. Do NOT use them. Notepad should be your best friend if you don't want to shell out $$ for a good editor.
  • Typos are very ironic when found on an author's website. Proofread.

Agree with me? Think I'm off my rocker? Want to share something that irks you (e.g. text links that change size when the mouse rolls over them)? Please do so!

And next week: Part 2 - Tips and Tricks.


Karen McCullough said...

Hi Ann --

As a professional web designer myself, all I can say is "AMEN." You give lots of good advice that everyone should take to heart when thinking about designing a site. The only thing I disagree with you about is drop-down menus. Personally, if there are topics that can be grouped in a logical way, I prefer drop-downs to very long menus that can be confusing. I'd much rather see one drop down for "My Other Places" than separate links for "My MySpace", "My Blog", "My Other Blog", etc. Or just one link for "My Favorites" rather than links for "My Favorite Books", "My Favorite Places", "My Favorite Movies" etc.
--Karen McCullough

Anonymous said...

Thanks, Karen.

As for drop-down menus, if done right, they can work really well.

Unfortunately, I've seen too many websites use them incorrectly and categorize items in a not-so-intuitive manner (or maybe I'm just really dense). Until that changes, I think drop-down menus should only be used for forms.

N.J.Walters said...

Good advice, Ann. Some of the best websites I've been to are uncluttered and straightforward.

Anonymous said...

Exactly, NJ. IMHO, KISS should apply to everything. But "less is more" is a concept that is very difficult for most people. They see something flashy on another site and they want it for theirs, even if it adds no value.

Sam said...

Good advice.
As a neophyte wed designer, I am still learning from my mistakes!

Anonymous said...

Sam, welcome to the club! I most definitely learn from my mistakes. I've probably made at least half of the mistakes I listed--but there was value in that because I'm never doing them again.

Come back next week. I'm going to list a few tips and tricks I think every web designer should know about. They're basic, but well worth knowing.

Mechele Armstrong said...

Great advice! I have come to hate music on sites and MySpace pages.

I'm taking notes.

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

Mechele - Join the club. I find music on websites very annoying because if I already have music playing on my computer, the website's music (usually something I do NOT want to listen to), will play over it. Then I usually leave the site and never go back.

I'm a rather unforgiving surfer.

Meagan Hatfield said...

Hi Ann~

Love your tips - and your voice is hilarious! LOL! Now I just have to go destroy my entire site and start over. {{sigh}} :-)

Major congrats on your Brava final and best of luck with Kate!!

Oh, and for what it's worth, you could have any of the bands listed playing on your web page - especially 30STM - and I'd be one happy camper. *smiles* Don't know if you're in the Echelon or mailing list, but Mars is having 40% off gear today only:
Just in case you felt like shopping. :-)

Hugs and luv,