The Ultimate Guide to What Every Author Website Needs – Part 2

- 0 comments - Website

Some time ago (ages ago) I wrote a blog post called “The Ultimate Guide to What Every Author Website Needs – Part 1“, and then some hefty deadlines came along and then some more, so I’m only now getting around to Part 2.

Just to recap, Part 1 focused on everything that I thought was absolutely essential to be on an author’s website – the kind of stuff readers are going to be looking for and the kind of stuff that will give you the best chance of promoting your books to potential readers.

For this second part, I want to talk briefly about some of the other considerations you need to take into account when you’re building (or buying) your author website. Apologies in advance, because some of this stuff is more technical than the stuff in the previous part, but it’s stuff you can check up on, and if it needs fixing, well, it should be fairly easy to find a web designer who can handle it for you.

Responsive Design

Suppose you’re hanging out with friends in real life, rather than online, and someone mentions a book or an author. It/they sounds/sound interesting, and you figure you’ll find out more. You whip out your phone and look them up. Maybe you look on Amazon or Goodreads, and that’s all good, because you’ll get a good experience.

But suppose you look on the author’s website, because you’re after more info than either of those sites can give you. And when you get to that author’s website, you can’t read it. The whole giant website is squeezed into your phone’s screen. You have to zoom in enormously then swipe back and forth for every line.

What a pain. Unless you’re really determined, you might give up. I certainly have. Maybe you’ll remember to check later at home, or maybe, like me again, you’ll forget. You might have bought that book or become a fan of the author’s for life, but you didn’t because their website doesn’t work properly on a phone and you gave up. Game over.

Increasingly, people are using phones and tablets to access the web. Some people don’t have a desktop or laptop at all anymore, and that trend is only going to increase. Depending on your demographic, most of your readers may already prefer to look at websites on their phones or tablets.

If your website isn’t as good or better on a phone screen, you’re doing yourself and your readers a disservice.

There are two strategies you can take to deal with this. (Big companies like Amazon will often run two or more completely different sites for mobile and desktop, but there’s no need for you to do this).

Mobile Theme

First up, if you’re using WordPress (and probably some other systems) you can install a separate mobile ‘theme’ or plugin that will detect if a mobile device is being used and give a simple, smaller version of your website.

This solution is definitely better than nothing, but it tends to lead to functional and bland websites rather than brilliant ones on phones. Still, it’s a solution you can use right away and it will help.

Responsive Design

The better solution if you’re starting a new website is to use what’s known as ‘responsive design’. This website you’re looking at now (patricksamphire.com) uses responsive design. If you’re looking at it on a laptop or desktop, resize your browser window (by grabbing hold of the bottom right corner and dragging it). You’ll notice that, as you make the web browser smaller or larger, a lot of things change. The header changes. The navigation changes. The layout of the page changes. The size of the images changes. All these changes are designed to make the website work as well as possible for screens of all different sizes.

Here are some screenshots of the homepage on a phone, an iPad and a laptop.

First up, here’s what it looks like from a relatively modern phone (click for larger photo):


Screenshot from Nexus 4 phone.

Next up, here’s a second generation iPad held vertically.


Screenshot from iPad held vertically.

Then the same iPad held horizontally – with more horizontal space there’s room for the navigation to show up.


Screenshot from iPad held horizontally.

Then finally on a laptop:


Screenshot from 13 inch MacBook Pro.

As you can see, no matter what device you’re using to look at the website, you’ll get the same content but a layout and design that’s suited to the way you’re looking at it. Lower down on the page, you’ll notice that the number and size of the columns also changes.

Light and Fast

No matter how small or big your website is, it needs to load quickly for people who visit it. If you make them hang around staring at a blank screen, a lot of them will leave. How quickly? Ideally, you’d want to get your website to load in one second, but that’s not always realistic for a smaller site, so you should aim for two seconds. If your website is taking ten seconds, you’ve got problems.

There are a lot of technical factors that go into making your website fast, and sadly many web designers don’t seem to know what these are or can’t be bothered to deal with them, and it may be hard to tell by just looking at their portfolios whether designers really know what they’re doing in terms of fast and efficient websites or not.

The main things that will slow your website down are:

  1. Too many and too large images, including background or header images
  2. Too many javascript files being loaded (which can come from too many plugins, social media sharing buttons, and bad web development)
  3. A slow web host
  4. How far your visitor is from your web server

Dealing with these one at a time:

  1. Images: make sure that you crop or resize images to the correct size before you upload them, and make sure you optimise them. If you don’t know how to optimise images and you’re using WordPress, install the Smush.it plugin, which will help compress the image.
  2. Javascript: don’t use social media sharing plugins (see Part 1 of this series for details), disable and remove any unnecessary plugins, and make sure your theme is well constructed.
  3. Web host: most of you will be using shared web hosting. To be honest, you’re in a bit of a lottery there, because if you share a server with someone who is using it heavily, the server will be slower. You basically have the choice of moving to a faster (and more expensive) hosting provider or dealing with the one you’ve got. And while you can’t do much about other users overloading your server, you can at least ensure that your own website doesn’t make too many demands on the server. Using caching plugins and maybe even a Content Delivery Network (cdn) will speed things up a lot. This website runs on a shared hosting plan, and it generally manages to be pretty quick. But sometimes, on a shared hosting plan, it’s just going to be slow. You have to decide how much money is worth spending. Whatever you do, though, don’t use a free hosting provider (an exception would be using the wordpress.com or blogspot free blogs).
  4. How far away: Make sure you host your website in the country from which you expect to get most of your visitors. A shorter distance between the web host and the visitor will mean a quicker delivery of the content. A Content Delivery Network will also help overcome issues related to distance from the server by storing copies of your website on different servers around the world.

How Do You Know How Fast Your Website Is?

There are various services available online that will measure the speed of your site and give you an analysis of what is slowing it down. My personal favourite is GTmetrix. It will tell you the page load time, the total size of the page, and a whole bunch of other information about what is slowing down the site.

Your aim should be:

Page load time: around 2 seconds or less.
Total page size: ideally less than 500KB, but absolutely never more than 1MB. The version of your website that is delivered to a mobile phone should be smaller than the one going to desktops.

For comparison, I just ran this website homepage through GTmetrix, and these are the results I got (for the full-sized version of the website):

Page load time: 2.27s
Total page size: 443KB

So, not as fast as I would ideally like, but as I said, when you’re on shared hosting, you can’t always control how fast the server will respond. When I look closer at where the delay is coming from, it’s down to the speed of the server (and, I’ve noticed, over the last few days, my website hasn’t been responding as fast as normal).

Luckily, a lot of the files that are slowing down my website on first visit (like the stylesheet) will be cached by the browser and subsequent pages will be faster.

Another service you can use to test how long your website takes to load is Pingdom.

If your website is running too slow, ask your web designer or developer to look into it. There’s almost certainly something that can be done to speed it up. That way you’ll get more visitors and they’ll stay longer.

Readable

Okay, suppose that someone has found their way onto your website. It loaded quickly and fitted your phone’s screen nicely.

Now all your visitor has to do is read it, right?

And that’s where problems come in far too often.

Here’s what you must have if your website is going to be readable:

  • Large text – the text on this website is about as small as you should ever have.
  • A clean simple font – nothing fancy or curly or difficult to read. Just because a font is readable on your screen doesn’t mean it will be on every computer. Different operating systems and different browsers render fonts differently, and sometimes badly. Don’t just grab a font you like from google fonts or a free fonts site. Choose something widespread, professional, and simple (many of these are free).
  • Dark text on a light background – definitely not light text on a dark background. Dark backgrounds work on things like photography sites where there are lots of pictures and not much text, but on a site that has any significant amount of text (that is, more than a paragraph or two per page), then it’ll be almost unreadable for many, many visitors, and they won’t strain their eyes to try.

Clear Navigation and Structure

You need some form of navigation if people are going to find their way around your website, but navigation is actually quite difficult to get right. Here are a few guidelines to help you:

  • The main (top level) navigation should contain six or seven items, tops, including ‘Home’. If you offer more, people’s eyes will skip over the items or they will click something more or less at random.
  • You need to match the navigation items to what your visitors expect. For example, if you write fiction, your visitors are most likely to be looking for a main navigation item with the text ‘books’ or ‘novels’ or something similar. An item like ‘bibliography’ is less helpful, unless you’re writing for an academic audience. Likewise, if you use the title of your book or series, unless you are really famous, no one will know what you’re talking about. Furthermore, if you bury the link to your books as a subsection under some other heading like ‘about’ or ‘biography’, it won’t lead people to your books easily.
  • ‘Dropdown menus’, where you hover a cursor over a menu to get other items to appear are also a bad idea. People often find them difficult or impossible to use, and they can be a problem on touch screens.

Sometimes people include too many navigation items at the top level because they have heard of the ‘three click rule’ – that you must never make anyone click more than three times to get to any part of your website. Let’s be clear about this. There is no such rule. There never was any evidence to suggest that it mattered. Yes, don’t make people click on things unnecessarily without getting anywhere, but as long as you are being interesting, people will follow you as far as they need to.

The structure of the website, that is, how the pages fit together with each other internally doesn’t have to match the structure of the navigation, but you’ll find it easier if it does.

Okay, folks, that’s it.

Like I said, sorry some parts of this are a bit technical and dense in places. But you should be able at least to check whether your website adapts to different sized screens and whether it loads quickly, and if doesn’t, someone should be able to help you fix that.

If you’ve got any questions, please do feel free to ask them below or on Twitter.

If you’re interested in my web design work (or, for that matter, my ebook design work), please drop over to my other website at 50SecondsNorth.com.

Good luck with your author website!

0 comments

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <em> <strong>