Good Website Design for Erotic Authors

Originally written for the Erotic Authors Association

Disclaimer: I am a professional web developer (programmer), not a website designer. But over my years of training and work, and through setting up sites for myself and other people, I’ve learned a thing or two about this business, which I am passing on to you. I am always willing to advise or help authors get started, or give tips or assessments of sites. Please contact me if you would like that kind of assistance – but please note, I will not make a site for you unless I know you or you pay me* :)

A number of people helped me with the draft of this article, and I thank them for their generous assistance.

*And I don’t want the work, actually

Why have a website?

Why does an author need a good website? Two reasons – readers and publishers.

Why make it a good one?

Authors are an important part of the marketing strategy for any book. Publishers almost always want to know if you have a website, because that’s a major tool for selling copies, and they will look, so that website needs to reflect your professionalism and show your work off to best effect. They will look at it as a potential customer would – and so should you.

Readers want to know where they can find your writing. If you’re selling books, if they like one of your stories, they will use your site to find out where they can get more of the same. The website doesn’t have to reveal a lot of personal information – but it still reflects on you and gives a reader an impression of how seriously you take yourself and your writing.

Your website is like your CV. And unless you’d really fill your CV with spelling errors, mixed fonts and glitter, then why would you want a website that gives the same unprofessional impression?

Basic principles

1. K.I.S.S
Keep It Simple, Stupid. That means the site should do the job you want it to, and no more. Readers come to your site looking for your writing. They don’t want to have to wade through gateway screens, silly animations, flash screens or try and work out how to turn off embedded movies or music. A lot of really cool Javascript tricks will probably end up annoying your readers more than entertaining them – and more so if the scripts are broken, which happens more often than not. On that point, using Javascript for menus or to prevent the user from using the backbutton, or in any way to take control from the user of their browsing window will send a user away from your site so fast it will make your head spin. Do Not Do This. I tell you three times.

Also, choose an overall design and colour scheme and use it on every page. You don’t expect fonts and page sizes to change between chapters in a book, so why do you want every page on your site to look different?

If you’re not a designer, keeping it simple is even more important. Far too many sites are ruined because their owners behave like a kid with a new set of finger paints.

2. Two mouse clicks should take the user where they need to be
Don’t force users to click through multiple screens to just get a listing of your stories or your books. Ideally have the same menu on every page, and a way to get back to the home page from every page. Think about the structure of your site, and present information logically (e.g. your fiction page should not be the place where users have to come to get a link to your blog.)

Also, make links obvious – they don’t have to be underlined but they should stand out. Pseudolinks drive users crazy. Don’t play with the link style. Underlining should only be used for links – don’t change the bolding or typeface of a link a user hovers over, as it makes the text jump around and drives readers insane. Underlining on hover is elegant and common, but don’t rely on it as the only way to signal a link.

3. Put the important information on every page, and make it easy to find
Important information is how to contact you, where to buy/read your books/stories. Everything else is optional.
Another peeve – all information and content should be viewable on the web. People who put important stuff in Word docs and PDFs for download instead of reading on the site, drive me insane. A lot of people cannot download stuff from websites because they browse from work or school or the local library. Make everything into a webpage that you can possibly manage and your visitors will love you.

4. Check your links work from every page
It’s incredibly easy to overlook this. Broken links look damn unprofessional, and are a real reader turnoff.

5. Cross browser compatibility
All browsers are not the same, strangely, and each has minor quirks. Check your site in every major browser you can load on your machine, and make sure it works on Macs as well as PCs. You can’t afford to lose a single book sale – the small effort in making your site cross-browser compatible will be repaid by the extra site hits.

As for telling a visitor which browser they ‘should’ or ‘must’ use to visit their site – well, it’s a big internet, lots of authors. I can take my Mac and my Firefox and my money somewhere else.

Also, consider people using WebTV – they can’t download a page bigger than 200k. Remember that when you are archiving long stories.

Remember there are other browsers like Lynx ( a text only browser available on a number of platforms, including Mac) which are used by people with visual disabilities. Try to check your site with them too.

6. Check your accessibility
This is a huge issue and one too complex to go into here (I give links to the main accessibility guidelines below). But every site should take account of users with poor vision, at the very least

  • pale backgrounds with strongly contrasting dark text are preferred by the majority of users. However, official RNIB (Royal National Institute for the Blind) guidelines state that there is no single standard which works for all users. What is important is allowing users to modify the display to suit their own needs
  • do not use small fonts (nothing below 12pt)
  • do not make font size impossible to override – ensure your style sheet permits resizing (this is principally a problem with Internet Explorer)
  • do not ever use graphics to replace nontrivial text – especially in navigational menus (and another reason not to do this is that search engines can’t index the text. No search results, fewer visitors. This is bad.)
  • wherever possible, optimise your site for 800 x 600 monitors. That means putting the important content on the left of your screen, and making sure that it’s still usable in a window of those dimensions.
  • use alt tags for all images so text browsers and voice readers can pick them up
  • make link text meaningful

The big bonus about making your site accessible to disabled visitors is that it becomes much more usable for all visitors. Good, clean navigation and design benefits all visitors and encourages repeat business.

7. Give readers an opt out of your elaborate design – better still, don’t use elaborate designs
You can create a site and use alternative style sheets to give visitors a choice. The only problem with that is that most web users have no idea how to change the basic style of a page – but the ones who do, like sight-disabled visitors may appreciate the facility.
At the very least, use a browser like Firefox which lets you turn the stylesheet off, and then check that a visitor who does this, can still use the site (another reason Flash sucks, by the way.) This is also a way of making sure that basic accessibility is being complied with.

8. Remember not everyone has broadband
And not everyone wants to wait three minutes for a page to load anyway. Cut down on images, imbedded movies, and keep each page relatively short. See my point above about using PDFs – webpages are much quicker to use.

Also on the subject of images – don’t steal pictures, okay? If you’re a pro author, you expect people to pay to read your books and stories. Don’t steal from other artists. Stolen art is tacky – and illegal.

You can commission images, or some artists will allow the use of their work for a website in exchange for the exposure. Also, a site like Flickr allow you to search for images which are licensed under Creative Commons.

9. Remember the users from public places, like work and libraries
Don’t put the porny stuff on the front page, and make sure you don’t surprise people with stuff that can get them sacked. And no, a warning page at the very beginning is not enough.

Remember not everyone can download where they browse – and very few people want to be blasted with loud music when they hit a website. Especially music that can’t be turned off!

10. Listen to your users
If a reader says your site is confusing, the correct way to react is to check the point, see if you can fix it, and ask other site users for feedback. Remember, most site visitors will never contact you about anything, good or bad. If it annoys someone enough to get them to write to you, then it’s a problem you need to look at. You might not be able to fix it, you might decide the benefits outweigh the disadvantages, but telling them it’s their problem is not acceptable.

Common mistakes and outright ‘don’t do this’ issues on EAA member sites.

I skimmed through some EAA author sites, and found a mass of terrible design. I’m not linking to spare the blushes of the site owners, but I make no apology for my criticism. I’m a reader and site user too, and these make browsing no pleasure at all.

  1. Black backgrounds – okay, some users find these easier to read. Many do not (but see above.) However, if you couple it with blue, pink or red fonts, then you are either saying you don’t care if we can’t read your text, or you’re trying to make the reader go blind.
    White on red is pretty hard to read too, especially when the font is small.
    And moss green on black ain’t working for me either.
  2. Stupid, stupid fonts – that’s anything that looks like script, Gothic lettering, or even pictures. Comic Sans is for amateurs and real designers will laugh at you for using it.
  3. Text in a dozen different colours (KISS, remember?) Another sign of amateur site design, and makes the author look like a 12 year old girl. Even worse when the colours are kermit green, aqua and purple. Yuck.
  4. Animated gifs – for anything. See above. And animated, twinkling backgrounds? The work of the devil.
  5. Ticker tapes and marquees – scrolling text. Cheap and nasty – and really bad for accessibility.
  6. Iframes and frames – so the URL never changes (this can be a problem with advanced techniques like AJAX as well.) Not such a big one, if you have a menu on every page, but it does make it harder to navigate – and to send a link to a friend when you find something wonderful. Why are you trying to stop your readers doing that?
  7. Different colours and design on every page – yuck. Tells the reader they’re looking at legacy design. Learn how to use a style sheet, it will make your life so much easier.
  8. Menu highlights that aren’t – the standard practice is that the menu item for the page you are on, should be distinct in some way (see my website for an example of this.) If you (a) don’t make it distinct and (b) make another unrelated menu item highlighted instead, you are going to confuse people.
  9. Idiotic font size – either too big or too small. Seriously – go look at any professional company’s website and look how they do it. Do you see 48point font in use? Then why are you using it?
  10. Too much space taken up on the important (i.e. left) side of the page with graphics – accessibility again.
  11. Out of date or empty content. If you don’t have something on a page, why are you linking to it?
  12. Front page with no content. Why? Why would you do this? It’s like a storefront with nothing in the window. At all.
  13. A home page which is a list of search results. Words fail me.
  14. Too busy – if your front page looks like someone threw up on it, there is so many links, menus, graphics and google ads, visitors will go somewhere else.
  15. Pale colours, dark fonts good. Clashing colours, bad. Link colours can be something other than the default, honest. Style sheets are wonderful things.
  16. Blocks of text which are graphics – this is so stupid, I can’t believe people do this. One – some people don’t load graphics because they’re on dialup. Two – people using text browsers or voice readers. Three – it means people tend to use stupid, stupid fonts and colours (and in this case, they really did.) Four – search engines can’t index your site, so someone looking for your latest book, won’t find it in Google.
  17. Porny images on the front page. Yeah, thanks. Way to get someone sacked at work. And if they block images to save themselves – hey, they don’t see a damn thing because your front page is nothing but images.
  18. Content ‘frames’ which are too small. This results from people not bothering to think about other browsers and other monitor sizes.
  19. Every single page is nothing but a single big, slow loading image. No text. Bad author, no biscuit. Also, every link is ‘target=”_blank” ‘ – why do you want me to open dozens of browser windows to look at your site? The rule is, links within a site should replace the current window content. Links to an external site, can be new windows or tabs.
  20. If you are going to include a photo of yourself on the front page, can you make it a good one? A fuzzy webcam self-portrait does not give a good impression.
  21. Image only menus and links without at least ALT text may look pretty, but your sight disabled visitors will hate you. So will anyone who views without loading graphics. Use a stylesheet and unordered list menus, and everyone can be happy.
  22. Myspace makes really, really sucky homepages. Also, it doesn’t look professional. You want to be taken seriously, take your website seriously.
  23. Wonderful – you have an age checking gateway page. With no way of getting past it. Bye bye.
  24. We know your name, your biography – but how do we contact you? Don’t you want feedback?
  25. We don’t actually need to learn about the weather, phases of the moon, or any other irrelevant stuff from your front page. It would be better if your menu had meaningful labels too so we knew what each link led to.
  26. Web images need only be 75dpi in resolution because that’s all your monitor will display. Bigger than that, and your page can take forever to load. Which it did.
  27. Your banner takes up the top half of the page – on every page. Why?
  28. Your front page is all centred text. This is also pretty amateurish.
  29. It took me 11 page downs to get to the bottom of the front page. That is much, much too long. And no ALT tags on the menu images. Bad. Using images instead of text for menus – really bad.
  30. Thanks, I’ll decide what screen resolution and browser I want to view your site in.
  31. Uh, I have to page down twice before the content of your home page appears. Did you check this in other browsers before you went live?
  32. Readers want to know about your books. Your biography should not be your front page.
  33. A Flash home page, after a gateway page which is almost impossible to read. Fail.

And that’s only half way down the ‘B’s. Out of dozens of sites, I found exactly four that didn’t grossly violate major site design and accessibility principles. That’s a really poor success rate. It doesn’t make our business look serious, or professional.

 

Examples of good practice

http://www.frontiernet.net/~veronicaarch/ – there should be a ‘hover’ style so people get feedback where their mouse is, but this is a clean, elegant site that reflects well on the author.

http://anna-black-salon.blogspot.com/ – a nice example of how to use your blog as your website. Not perfect, but much better than 90% of what I’ve seen. Reordering the menus and putting them on the left would make life easier for the reader though.

http://alessiabrio.blogspot.com/ – another blog home page. The banner’s a bit big but it does the job.

http://www.rachelkramerbussel.com/index.php – the link back to the home page should be more obvious, but this is a good, usable and sexy page, which makes the author look good.

Useful tools and tips

These days, you don’t have to be a programmer to have a slick site with good menus and consistent appearance. You can choose a Content Management System (CMS) like Geeklog or Joomla, or blogging software like WordPress – all free and all relatively easy to customise (and there’s a stack of people using this stuff and willing to help.) You can customise your Livejournal or Blogger page too, if you don’t want to go the full website route. You’re going to have to learn the basics of HTML and stylesheets, but if you run your own website, this is basic stuff you should know anyway. Or ask someone who does.

Even if you don’t use one of these tools, and have to code each page separately, you can still apply the principles of good design, usability and accessibility I talked about above. There is no excuse for a bad website. None.

A good website is an investment – it doesn’t have to cost anything but time. But getting it right will make you money, so if you have to pay to get a piece of art to be the right image for you, or you have to pay to get a decent website host (which shouldn’t cost more than about US$60 per year), then do it. It’s worth it.

Also – exploit your readers’ knowledge and desire to help. Don’t be afraid to ask for help. If you see a site which looks great, ask the owner how they made it. I’ll gladly tell people how I made mine, and most authors will do the same. The trick is to know the good stuff when you see it.

The best time investment you can make, if you can’t pay or ask someone else to make you a good website, is to learn HTML. It’s really not that hard, and if you can manage Livejournal or your blog, you can probably manage to create a basic webpage. A webpage can be simple and still effective – something too many authors just do not appreciate.

Useful links

Web Content Accessibility Guidelines (WCAG) Overview

Accessibility: Principles of Accessible Design

Web Site Development Information

RNIB Web Access FAQs