Author Websites - Tips & Tricks
January 15, 2013.
Update from July 2016:
Aall this still holds true, so I'm re-posting it, but I'd like to add that since writing this semi-outraged post, I've since started my own web design company, especially for authors. Go here.
Get your own domain name. In other words, the URL for your site should be in the format of www[dot]firstnamelastname[dot]com. Anytime I see "blogspot" or "wordpress" in the URL of someone's official site, I cringe. If your goal is simply to maintain a blog and only a blog, then it's fine. But if you're serious about becoming a writer with an online presence, you need to buy the real deal. It's usually about $12 for a year, and instantly ups your credibility. And don't worry, this doesn't mean you have to take on a more "complicated" site. You can still have your unique domain name map to a free .wordpress or .blogspot site for a minimal fee. If you have a common name, and the firstnamelastname is already taken, consider adding an "author" into the URL or being open to something other than a [dot]com. An alternate TLD such as [dot]co is becoming increasingly popular and perfectly respectable.
Your site MUST be responsive. And by responsive, I don't just mean it has to be functional, I mean responsive in the technical sense of the word. In non-nerd speak, a responsive site is one that looks good on a mobile device (smartphone, tablet, etc). Various studies have shown that over a quarter of ebook readers read on their smartphone, so you it's a safe bet they're also checking out your website on their phone. A responsive site/theme will automatically adjust to the tiny screen resolution. Be very aware of what your site looks like on a phone or iPad. If you have to do a lot of scrolling and zooming just to view your site, your site is likely NOT responsive, and it's time for an upgrade. If you're going the Wordpress route, most theme features will clearly call out "responsive" if they are. It's a key word. Get comfortable with it. The next generation of readers won't see a good mobile experience as a "nice to have," it'll be a MUST.
Beware the free theme. Notice I don't say avoid. I own several domains and have been known to rock free wordpress themes on quite a few of them. If you're willing to put in a little time and research, you can actually tweak these to be quite presentable. But since Wordpress and Blogspot were built primarily as blogging platforms, those free themes will pretty much always look like a blog that you bent out of shape to be an author website. If you're not ready to go fully custom yet, consider splurging on a premium theme (prices range from $10 - $100, with most of them landing in the $50-$70 range). Whenever I'm browsing for new wordpress themes, I can tell as soon as I preview one whether it's going to be free or premium, and the premium versions almost always look better. This is one of those cases where you get what you pay for, and in general, you'll have more options with a premium theme. As an alternative, I also highly recommend squarespace.com (used to build this site). It's not free, but it's a heck of a lot cheaper than the thousands you're likely to spend on a custom site, and some of their templates look completely professional with minimal effort.
No music. I'll say it again. Absolutely no music on your website ever. The possible exception is professional musicians, and even then, you risk pissing people off. Here's why:
- Your site visitor is sitting in her cubicle surfing the web as a break from that mind-numbing report she's supposed to be working on, and goes to your website to see when your next book is out. Your song blares through her computer's speakers, alerting her cube neighbors and boss to the fact that she's not on Excel. BOOM. She hates you.
- Your website's song is the same that played at your visitor's grandma's funeral the previous Sunday. BOOM. She hates you.
- Your website's song is the same one that was playing when her boyfriend dumped her last week. BOOM. She hates you.
- Your site visitor is already listening to her go-to playlist on iTunes or Pandora and is totally in a great place, and then your website song comes on and plays over top of her favorite song. BOOM. She hates you.
- In other words, your grandmother may think the song is "such a fun touch," but anyone born after 1980 is going to bust your balls over it.
Your website should always have clear navigation. The navigation refers to those tabs or links that allow users to get from one page of your site to another. On an author's site, the nav usually contains (or should contain) about/books/blog/contact, etc. I'm shocked at how many author's sites lack a clear way for users to get around--YOU MUST HAVE THIS. Navigation at the top of the page (below your header) is the most common/intuitive, although navigation on the left sidebar can work just as well so long as it's clean, clear and consistent on every page. Don't think you can get by with having icons and pictures all over the place to lead your readers where they want to go. They don't want to click on a sparkling, animated book shelf to see your list of books. They don't want to click on your picture to read your bio. Make it EASY for them, not PRETTY for them. Oh, and never think of your browsers "back" button as a viable navigation option. If your website visitor has to hit the back button at any point, you're doing it wrong.
Speaking of the navigation, where is your ABOUT page? Tell me you have one. Better yet, tell me that you actually call it "ABOUT." Not THE 411, not MY STORY, not THE SCOOP. Navigation is one area where it doesn't pay to be different. BIO is an acceptable alternative, although I still recommend ABOUT as it's more standard web speak. Readers are used to seeing it on ecommerce sites, organization sites, corporation sites, etc. ABOUT is universal. You want that. (note: "about me," is fine, but the "me" is unnecessary and adds text and takes up space. We'll learn below that too much text and not enough space is a BAD THING.
Web users like white space. They may not know that they like white space, but believe me…they do. Or, if your website's not white, think of it as blank space, or areas of the page without words/images/garbage. I've seen a dozen usability sessions where users are asked to select their preferred website "at a glance" and the cleaner/less cluttered websites always win. Think of it this way: on each given page of your site (say, your homepage for example), your user is going to only be able to make ONE CLICK at a time. Chances are, you have a pretty good idea of where you want them to go (Books, maybe About, or Blog, if you're not yet published). So we have at most, three preferred paths for the user, and yet so many of us are giving them a dozen or more things to look at on a given page. You're not going to delight them with options, you're going to bounce them (go Google Bounce Rate). I know that you have a lot to say, but don't put it all on your homepage.
Pay attention to the details. Seeing misaligned text, chopped off images, broken links, and one too many mundane stock photos on the same page is like nails on a chalkboard. This is especially common on authors' blog pages. Yes, blogs are more of a "free form" web space, but that doesn't mean it's a blank slate to slap up ten different thumbnails, forty different colors and stuff random links into your sidebar. If you want to make a career (or at least a serious hobby) out of writing, you have to take your website seriously. Imagine a potential editor coming to your site. What do you want them to see?
Ease up on the badges. You know what I mean, those icons/images/side bar clutter that proclaim you're part of this group, or love that blog, or won this award. You don't have to avoid them altogether if you're really proud of them, but start thinking of them as "noise" -- too much is a disaster. And remember what I said about white space above. You have a limited amount of time to engage a reader's attention. Do you really want to distract them with that neon orange blog award?
If you use video, give a text alternative. Video on a website is great if your user is home alone. But if they're looking at your website at work, they're not likely to risk playing a video to hear what you have to say (even if they have headphones, they'll be looking over their shoulder for the boss). If they're sitting with their laptop on the couch while the family watches TV, they're not going to click on that video. If they're looking at your site on their iPhone while in the doctor's waiting room, they're not going to click on that video. If you absolutely SHINE in front of the camera, then by all means, put video on your site, but give those who can't watch it a chance to read the highlights. This is especially true of book descriptions. I LOVE book trailers, but depending where I am, I can't always watch them when I want to. Give me a blurb with the trailer so I have a silent option.
Don't talk at them. Here's a hard truth: website users don't like to READ website content. Various studies have shown that web users read as little as 25% of what's on a given website. Ouch. The absorb rate is a little higher on blog entries, but even then, they skim. They don't want your inspiration quotes or fifty different review snippets on your book. Why? Because they're going to skim. Make it easy for them. With the exception of blog pages, limit the amount of text on each individual page. And on the blog pages, learn how to break it up. Use your enter key A LOT. Learn how to use selective bolding. Use header fonts to delineate sections so their eye can hit on key points and focus on what piques their interest. Note: this particular lengthy blog post should NOT be your guide. Do as I say, not as I do ;)
You need to use a boring font. You know how Manuscript Preparation 101 is "don't use a fancy font"? Same goes for your website. You don't have to use Times New Roman or Arial, but you MUST avoid anything that looks like script, that has "fun curls" or mimics handwriting. Even if the "handwriting" font is easy to read, this is one thing that readers hate. If you use one of those "casual" fonts for your body text (blog, book descriptions, etc), your user will absorb even LESS than the 25% I referenced above. The exceptions are your site's header/logo or your site's tagline, but even then, look at it on multiple screens to make sure it's easy to read.
Contrast. This is perhaps the most important thing you can pay attention to when it comes to your website's color scheme. You must have contrast. Meaning...the most pure ideal of contrast is black font on a white background or white font on a black background. Within the realm of color, it means you must have contrasting color. If you have a light yellow background, you'll want to use a dark blue font, not a medium orange font. If you have a purple background, for god's sake, don't use magenta font. Don't use grey font on a baby blue background. The second your reader has to squint, you've done it wrong.
Careful with those colored fonts: When it comes to "body text," (i.e., the bulk of text on your book description, your about page, your blog, etc), users hate red font. They really, really hate it. Sometimes they can't even identify that they don't like it, but sites with red font always come in dead last on performance. Lime green's also a bomb, even when used on a black background for contrast. The number one offender? "rainbow fonts," where each letter of a word is a different color. You think "pretty!" they think "kill me." Another major companies avoid using excessive red and green for content? The color-blind factor--color blind folks have a hard time picking up the red/green color families.
Make good use of header font: If you're chafing at the thought of using a dull font on your website, think of the header font as your outlet. If color is your thing, try some maroon, purple, deep aqua…use these SPARINGLY for things like book titles, blog titles, blog subheadings, etc.
Careful of animation: Luckily this isn't a factor on most author sites since so many of us use the free or cheap templates where fancy stuff isn't even an option, but every now and then I'll come across a big name author who spent big bucks on a custom website and succumbed to the siren song of Flash, or whatever the developers are using these days to create shit that moves. You'll know when you get this because often times you'll see a little "loading…" icon when you first get to the side while it amps up for whatever animation or in-your-face graphics are about to come your way. It's not always bad, but if you hit someone with a bad connection or someone on their phone, your risk them bailing while they wait for your fancy-pants site to load.
Color can be a good thing. If I just depressed the heck out of you with axing all of your colorful dreams, there are instances where color (in particular, strong color) can work in your favor. Color is an ideal tool for calling reader's attention to a specific part of the page. Imagine a white page with black font and maybe a small image or two. Now imagine a hot pink Buy Now button in there too…where's the eye going to go? Right. To the hot pink Buy button…exactly where you want it to. And I know I poo-pooed lime green text, but I've seen it do quite well as a "call to action" button (i.e, using it to identify something you want your user to click on), but ONLY when it's the primary color on that page. Don't put it next to an image or alongside a pink hyper link. Then you've gone from effective to messy.
Your site can be fun without being silly. By now you probably all think I'm pushing for everybody's website to be a boring white background with plain black font and no images. I'm not. I'm really not. There are fantastic websites out there that are bursting with color and images and fun fonts (in the headers only!), but most of those are professionally created. If you're using a template theme, resist the urge to toss up every hot pink swirl and turquoise polka dot pattern you can find in order to make your website "stand out." Even if your personality is bubbly, your books sassy and fun, and your brand "sparkly," your readers still want to see that you're a professional. I won't say resist the urge to be goofy, because if it's who you are, then you want it to be a part of your brand. But the goofy should be visually digestible (I just made that up). In other words, give order to your goofy. Clean lines, lots of space, minimal links. Which leads me to...
Less is more. This is pretty much always true in web world. I know it's tempting to stuff the right side of your blog with favorite links, recent articles, a blog roll, an "about" widget, four badges, advertising, your favorite Hemingway quote, a picture of your rabbit, all with a cheetah-print background. Resist. Resist the urge to let your website's sidebars become the equivalent of your junk drawer. Try this...Identify just THREE THINGS you want you readers to take away from your site, and focus on those. Example:
- I want them to visit my most recent blog post
- I want them to visit my "BOOKS" page and read about my upcoming release
- I want them to sign up my newsletter
Anything on your site not related to those goals? Clutter. All clutter. Kill it.
Give them a reason to come back. This may seem contradictory to my "three goals" suggestion above, but they key to a site that's clean and interactive is one that's updated frequently. This is easiest to do via a blog, but if blogging's not your thing, consider updating weekly with new trivia about your book, or having a "what I'm reading now" section, or even a "favorite recipes" page. Something that is updated regularly will give users a reason to come back, even if your book release is months away.
Some examples of good lookin' sites:
- The epitome of clean and simple, although I don't love the bottom navigation
- Pink is a hard color to work with on the web, since it can be jarring as a background and hard to read as a font but this is feminine and professional. There's enough information to keep the reader poking around on her site for awhile, but the content is organized and everything feels intentional.
- One of the few "darkly themed" sites that I like. She resisted the urge to go overboard, keeping it simple and easy to navigate while still standing out and capturing her brand.
- For those that like "meaty" sites, there's a lot here, but everything is clearly labeled. There's a lot to click on for people that are just browsing, but it's organized enough to suit users looking for something specific
- Proof that "girly and fun" doesn't have to be messy and silly. Your eye knows exactly where to look.
- I'm not a website designer, nor do I know much about coding outside of basic HTML/CSS, but I do have some expertise in the more elusive world of website usability. I spent six years working on a web team where I got paid to determine how customers use websites. My job was to figure out what they clicked on, when and why they bailed on a site, what they loved, what they hated, and what they didn't even realize that they loved or hated. I've watched dozens of volunteer test users try to complete "basic" tasks on various websites, and know which sites perform the best and why. I've spent way too much time analyzing whether a lime green button or a neon blue button will get more clicks (green). Some of my advice is possibly outdated, but I've tried to stick with "learnings" that I think are universal.
- Websites are a fiercely individual thing (or at least they should be!), and I'm sure there are plenty of opinions and alternate studies that would contradict what I've outlined below. If you feel strongly about something on your site…go for it. These are suggestions, not rules.
- Lastly, DON'T TAKE ANY OF THIS PERSONALLY. I'm not trying to hurt feelings here, nor do I have anybody's site in mind as I write this. I'm merely passing along information that I intend to be useful to those looking to improve potential readers' online experience.