
So you’ve built a website! Grabbed some DIY tool like WordPress or Go Daddy’s Website Builder. Spent anywhere from a few hours happily dragging and dropping some content around to a few days yanking at the roots of your hair trying to get your pages to display correctly.
And now your new site is up and running, ready for the world to see so you can start raking in those millions.
But is it any good?
That’s a tough question to ask after the fact, but it’s an important one if you want a successful website. Why not ask it now, with this checklist in hand? I’m about to give you some important points to consider when it comes to building a good website, and some ideas for how to improve yours if you’re repenting a little late.
There’s a whole lot here to digest, but nobody said building a good website was easy! So give yours the once-over and use this checklist as your guide.
Layout
When my company builds websites, we start with the layout first. It saves a lot of “moving things around” later. Imagine you’re rearranging your living room furniture. You could walk in and start hauling sofas and bookshelves around, or you could sit down with a piece of paper and measure the walls and sketch out the places your furniture might fit and look best.
But what if you’ve already hauled the sofa? Well, it’s time to stand back and survey the room.
1. Do you have clearly defined content areas? You wouldn’t push your sofa, TV, cabinets and shelves up against each other in the middle of the room. And you shouldn’t cram your website stuff together, either.
You should be able to see “white space” around the elements on your page.
White space is what you’re looking at right now, between the sentences on this page.
White space means there isn’t a giant block of junk stuck together making your head hurt when you look at it.
If you can’t see spaces or imagine drawing lines between content areas, you need to rearrange the pieces. When people look at a web page, their eyes need to be able to rest. Space lets the eyes rest. Spaces between the header and the text, between the content and the sidebar, between the 22 things crammed in the footer.
One of the biggest “new guy” website mistakes is thinking that every square pixel on the page needs something on it.
Repeat after me: empty space is good. Empty space will help me get MORE customers and make MORE sales because people won’t be so overwhelmed by “stuff” and leave my site.
Survey your layout and open up the space if you have to, make the page longer if you have to, use the “delete” key liberally if you have to. Just let it breathe.
2. Do your content areas have a purpose? Why did you cram 22 things into the footer? Why do you have 4 sidebar sections?
“New guy” mistake #2 is picking a template (or theme) and then filling in the spaces. Lots of templates come with a footer with three widget areas or a big image space on the home page.
With nothing much to do with those spaces and probably no plan to begin with, many people just start cramming stuff in.
Remember when you moved into your first apartment or house? You had all this empty room, so you started filling it. You probably didn’t need 6 chairs and 12 candles and two dozen throw pillows, but there was space. You had to use it.
Same thing happens with websites. When your template gives you three sections on a page, you stick something in them.
Repeat after me: everything on my page must have a reason to be there.
Avoid the cram approach by thinking about how you can use space to get your message across or add something interesting, useful or valuable to your visitors. Break out your services into sections, move your social icons into a different and more useful space, create a space for inspirational quotes or daily tips. Choose content that has purpose and fills a need, not a space.
3. Are your important content areas strategically located? If you put your sofa facing the wall and your TV facing the opposite direction, it may look great in the room but it’s not going to be very effective when you want to catch an episode of Mad Men.
“New guy” mistake 3: put stuff where it fits or looks cool without consideration for whether it works.
If your newsletter signup is at the bottom of the page or your social icons are buried somewhere in that darn footer, that’s probably not the most effective use of space.
Decide what the primary function of a page is and put content related to it in an immediately visible and obvious place. If you don’t care much whether people join your newsletter list, then go ahead and put the signup box at the bottom of your page. Otherwise move it to the top and make sure it’s big and bold.
Repeat after me: Every page on my site has a goal. Content that helps me reach that goal must be prominent.
Your page needs a hierarchical structure so the most important stuff is top, front and center and the “other” stuff gets relegated to the bottom. That’s why you find Privacy Policies in small print at the bottom. Unless you really, really, really want someone to read your privacy policy instead of joining your list, structure your page to put the best stuff up front.
Branding
With all the talk about “personal branding” these days, too many business owners make the mistake of thinking that a big photo of themselves on top of their site constitutes a brand. This might work if you’re a blogger with good hair, but not if you’re running a business.
Yes, I know, businesses need a “face”, a personal touch, a real story. Tell it in the “About” section.
What your company needs is a brand. Whether you have an expensive logo designed by a professional or nothing more than a company name, use it wisely.
4. Have you defined a color palette? So you don’t have a 25-page, $5,000 branding guideline. That’s not free reign to use every color under the rainbow at whim. Choose a color palette that represents your business and stick to it.
“New guy” mistake… oh heck, who’s counting… is using a yellow banner today and a green one in six months and maybe a red-white-and-blue one in July. That doesn’t say brand. That says schizo.
Here’s a good tool: Adobe Kuler. Hit the “Create” button and you can plug in a color you like and it will give you complimentary colors, shades of colors, analogous colors. Instead of studying color theory you can pick out a pretty good palette of colors that are meant to work together.
Once you have a color palette, keep the hex values of the colors you’ve chosen. That’s the alphanumeric value that defines the exact shade of a color so that no matter who builds your site or what program they use, the color will always be exactly the same. If you can enter a hex value into your website builder or if you have the option and ability to edit CSS, this ensures a consistent look.
Repeat after me: my website is not an art project.
Headers, footers, backgrounds, headings, links – anything on the page that’s a color should fit in the same palette.
5. Have you picked a font? Please, oh please, god, don’t let it be Comic Sans. Everyone loves the Comic Sans font, and I can’t explain why, but the result is that it’s become the red-headed stepchild of fonts. Promise me you will avoid it no matter how cute or quirky you think it is.
Google has a ton of free web fonts for you to choose from. If Ariel is just too boring for you, find something that fits the brand image you want to portray.
Repeat after me: I will choose one font. I will use one font.
“New guy” mistake 43: using a different font for headers, text, sidebars, quotes. It makes a page messy and disjointed. You may not consciously look at a site and think, my heavens; they’re using four different fonts! But subconsciously, psychologically, you’ll have a sense of disharmony.
If you want to create a good user experience, pick a font. Just one. And when you do, make sure it’s big enough to read. Anything less than 12 points can be tough on the eyes. It would be terrible to lose business because your prospect got a headache from squinting.
6. Do you have a style? Part of your brand is an overall style. It’s a bit ethereal, but you recognize style when you see it. Stark. Corporate. “Artsy”. Elegant. Modern. Victorian.
Even if you know nothing about websites or brand, I bet if I said the word “Contemporary” you’d get an entirely different mental image than if I said “Retro”.
What’s your brand’s “style”? This will speak to a great degree about your goals and values. If you’re a modern tree-hugging company your style will be different than a traditional corporate company.
“New guy” mistake umpthennnt: grabbing snippets of styles from other websites because they’re cool. Some clipart here, a scroll there, a little bit of retro-modern somewhere else. You’ll end up looking like you’re in the midst of an identity crisis.
Repeat after me: I will not “borrow” design ideas from other websites no matter how cool they are.
In fact, I need you to stop looking at other people’s websites for inspiration entirely. Look to your company, instead. If you have a vision, a set of values, a goal, let that inform your style. Choose it, stick to it.
Content
Ah, content. So vital to any marketing, yet so neglected. If your idea of “content” is “have an About Us page”, you’ve got some homework to do. All the perfect fonts in the world can’t make up for poor content.
Some bad content is a side effect of too much space. You know how when you moved into that big house with four rooms and you had no furniture? Who could afford to fill a whole house? So maybe you got some hand-me-downs or shopped at flea markets and discount stores to fill the space.
If your website is filled with what amounts to Ikea content, it’s time to get out your keyboard. (No offense to Ikea owners, trust me, I spent many hours with the dratted, cursed hex wrench. Makes you that much happier to upgrade to furniture that’s already glued together.)
7. Did you proofread? This is so elementary that it requires repeating: did you proofread? I mean really, really proofread? And then get someone else to proofread?
I can’t tell you how many times I’ve written a blog post, proofread it, proofread it again, and then gotten an email the next day, inevitably from my father who keeps me on the straight and narrow… “Second paragraph. It’s ‘the’, not ‘teh’.”
Maybe forgivable in a blog post (I hope?) where we crank out multitudes of paragraphs in a short time without the luxury of passing a post off to multiple proofreaders. But on your business website perfection is a must.
New guy mistake something-or-other is thinking (a) it doesn’t matter or (b) it’s somehow cute or endearing to be “real”.
You cannot underestimate the damaging power of even one misspelling, let alone more than one, let alone misspellings coupled with poor grammar or punctuation.
Repeat after me: I will only publish something on my site after at least two people have thoroughly read and corrected it.
You must have a smart friend somewhere who knows the difference between their and there, so get them to help you make sure your website meets basic spelling and grammar standards.
8. Do you say what you do? A shocking number of websites still fail the simple “what am I?” test. If you can’t go to your home page and understand in five seconds or less what your company does, it’s time for some clarity.
In fact, anyone coming to your site for the first time should be able to land on any page and have a pretty good sense of what you’re about.
New guy mistake #97 is thinking you need to be clever, interesting and “catchy” instead of direct. Unique turns of phrase or eccentric photos are doing you no favors if they leave people with a sense of… “huh?”
Repeat after me: the attention span of my prospects is about the same as a two-year-old child. I will make my website easy enough for a two-year-old to figure out.
State what you do, clearly, and first. Make it short and sweet in plain English. Don’t use the word “synergy”. Ever.
9. Is your photography good? Not just that outsized headshot of you on top of the page but every photo should be clear and web-optimized.
If you’re going to use an outsized photo of yourself, please make sure it’s not blurry and pixelated. And please don’t Photoshop out the background so your headshot is hovering in mid-air with an “I Photoshopped out the background” halo around it.
Even if your website is DIY, leave Photoshop to the pros unless you’re an ace with a mask and the pen tool. If you said, “the what?” to either of those, that’s a pretty good indication you should leave the photo alone.
“New guy” mistake 803 is grabbing the nearest photo of yourself and then enlarging it to fit in a space you don’t know what to do with. Here’s a photo tip: you cannot make a photo bigger than it is if you want to retain the quality. You can reduce the size, but if all you have is a 100 x 100 pixel photo, don’t try to fit it into the 500 pixel space in your header. It’s going to be a blurry mess.
When you use any photography on your site it should be sized properly before it goes onto your website. Some DIY tools let you resize a photo once you’ve dropped it into place. Avoid this. If you want your photo smaller, crop it or resize it in a photo editing program so it fits exactly before you drop it into your website. Otherwise your file sizes can be too big and negatively affect download time, site speed and even search performance.
When you output a photo, you should also “save for web” which lets you reduce the file size – as long as you can retain the quality – to get the smallest, most efficient size possible.
Repeat after me: I will never use a stock photo of a man in a business suit. Photography represents my company, values and brand as much as colors, fonts and copy.
And please, purchase your stock photography so you can use it without the watermarks.
Optimization
It’s great that you have a website, but wouldn’t it be better if people could find it? For that you have to pay attention to the less obvious and sometimes invisible bits of a website. Although SEO is an entire study by itself, there are some fundamentals that you can and absolutely should pay attention to.
10. Are your page titles relevant and unique? Each page of your site should have a page title with keywords that are relevant to the page. Whatever the subject of your page, choose 1-2 keywords and use those as near to the beginning of the title as possible.
“New guy” mistake 901 and 902 is either not putting in page titles at all, so you end up with the default and rather useless “Untitled” or putting in page titles that are literally the name of the page. “About My Company” may be true, but that is helpful to neither search engines nor people.
Repeat after me: the only reason someone will click on a link to my site in search engines is if the title tells them something about my page that they want to know.
Here’s a quick title tip: keep titles relatively short. Google truncates titles after about 60-70 characters so if your key point is beyond that, searchers won’t see it.
11. Have you included page descriptions? These are sometimes used as the description in search engines so use them to give searchers more information about your site and to give search engines more keywords to hook into.
“New guy” mistake eleventy billion is to ignore descriptions altogether. You can ignore them, but you’ll be missing an opportunity, so take the time to write them.
Repeat after me: I will not cram my page descriptions with keywords.
Descriptions should be written in sentence format, or close to it. Repeating keywords or variations of them is not helpful and probably won’t inspire anyone to click your link.
Here’s another quick tip: Google truncates descriptions after about 130-150 characters. You can make them longer, but try to stay close to that range and make sure that even if they do get truncated, your important points and keywords can still be read.
12. Are you using keywords on your pages? You might want to crack out the old Google keyword tool and see what people are really searching for when it comes to your products or services. Sometimes it’s not what you think. Here’s a post about how to pick those keywords.
Once you have that information, use those keywords on your site pages, in the copy, in the headings, in the image ALT tags and in the links. But be careful not to overdo it. Google is getting especially uppity lately about “over optimization”. If you read your copy and a particular word or phrase sticks out because you’ve used it 432 times, cut down on its usage.
There is a point of diminishing return on keyword usage. Not enough and your site won’t be relevant for that word. Too much and your site will be snubbed as over-optimized. Here’s a post on some strategic places to use keywords.
“New guy” mistake all-too-common-and-a-half is not using keywords strategically at all. I’ve had many conversations with many people who say, “I want my site to be found on Google for keyword ABC.” And yet keyword ABC is nowhere to be found on their site.
If a keyword is used either infrequently or not at all, even pixies with magic fairy dust won’t get your site on Google for it.
Repeat after me: every page of my site is an opportunity to optimize for a different keyword.
You don’t need to use the same word on every page in every conceivable place on your site. Choose keywords that relate to the specific content of a page and include them on a page-by-page basis.
The Little Big Things
There are some details that are easy to take for granted or overlook altogether. I’ll make this easy for you and give you the short list of “must-dos” if you want your website to be any good.
13. Make sure your links work. Obvious? Maybe, but have you taken the time to click on every single one to be sure?
14. Make sure your contact form works. Confirm that your required fields are required and if someone doesn’t fill them out correctly, your error messages are clear. Make sure your submit button does, in fact, submit the form to you, and the user knows this, either by seeing a “thank you” message or by getting a confirmation email.
15. Install analytics. Even if you have no idea what to do with them, one day you will, and you’ll be glad you’ve been accumulating data. Google analytics is free and easy to use. Here’s a post on what to do with analytics if you’re just getting started.
16. Get Webmaster tools working. You may not know what to do with these either, but start right by putting them in place and you won’t regret it later.
17. Set up canonicalization. A very big word, but a very simple and important concept: whether you type in www.yoursite.com or yoursite.com or www.YoUrSiTe.com they should all resolve to one single name. It doesn’t matter which iteration you choose but you must choose one. For example, if you try to type in a variation of this site’s domain in your browser, you will see that every single time it goes right back to www.websearchsocial.com. This is important for search engines.
18. Set up “friendly” page names. By default, some programs will name your page with an ID, so you’ll see a string of strange letters, numbers or symbols in your URL string. On this site, we’ve changed that so it defaults to the post title. This is important for search, too, and will make your links look a whole lot more legitimate – and useful – to the end user.
19. Make it mobile friendly. This may be as simple as using the right plugin or as challenging as rethinking your layout altogether, but with mobile usage skyrocketing, it makes sense that your site is accessible on more than a desktop computer. Here are some tips for making your website mobile friendly.
Deep breath!
How did you do? Did you check your website against these tips and find places to improve? If you’ve done everything perfectly without my help, maybe it’s time to become a web developer!
There’s a lot to building a good website, and more than even I could fit into one post. But I hope I’ve helped point you in the right direction.
Got questions? Want to know if something you’ve done is “good”? Ask away! I’d love to help.
Impressive article! I’d like to add the last (20th) paragraph: Make sure your name is easy to fund. I’ve seen nomerous portfolio websites with no author’s name. It looks very very strange
Good one – which coincides with having contact info, too. Sometimes people forget that if they want customers, people will have to get in touch with them! Especially with a portfolio site, but for any business, it’s important to have a name so people who want to get in touch with you know they are calling a person and not just a room with a phone in it. Thanks!
OMG Carol, I forgot everything that’s involved when setting up a blog for the first time. Dang, my head got dizzy reading everything.
Now I did not have a check list when I started and I had to learn as I went with what the heck I was suppose to do. I’m sure my blog does not fall into any guidelines of what you should and shouldn’t have, or maybe in some areas it does. I know as far as the shock value when you land on my blog, that’s definitely not a problem. You can’t go wrong with white right!
I did use a plug-in for some cool fonts but one day that one quit working although it was working on another of my blogs so I just said to heck with it and got rid of it. My fonts might be boring now but oh well. Darn, and they were so cool too.
This is a fabulous post, I mean chalked full of great tips. But then again, all of your posts are. Great job Carol, very impressive list. A must have for any new blogger.
~Adrienne
Believe me there were plenty
of things I wish I knew before I started, too. Trial by fire, right? Besides, no matter how much you “know”, by the time you know it, something changes. I’ve tweaked my blog 945,321,345 times (and that was just last week…)
I actually used to have a font plugin, too – on my business site – until one day it stopped working and I didn’t realize it and one day while talking to a client no less, we were looking at my site and I suddenly realized the fonts were broken. Argh! These days I stick to the basics. Google fonts is great too, but can be a bit overwhelming because there are so many. My humble opinion: unless you’re picking a really unique font for a logo or something special, just stick to the basics!
Blogs can get away with a lot more than business sites because they are more informal. But I still think basics apply, like choosing colors and fonts, and definitely using white space. Even blogs can get pretty busy. Yours, however, is really nice. It’s easy to read and you have a nice organized sidebar.
Glad you enjoyed and thank you for sharing your thoughts!
#1 and #2 are incredibly important. I can’t tell you how many real estate sites I look at that have a crazy navigation structure. I don’t know where to click to access homes for sale, and/or the home page navigation is so over-loaded with pages that I don’t know where to start. It’s overwhelming!
Imagine how that looks to the consumer.
Everything should be done intentionally and with a purpose. Where do you want people to go? What do you want people to do? Then, design accordingly.
Totally agree. I think a lot of the problem arises because people put “design” before content. They look for a nice-looking theme, fall in love with one then try to cram stuff wherever, because the theme has certain spaces and navigation structures. I always start with the structure first so we can figure out what works best and what will get people from A to B and make it easy to find the most important things.
I bet real estate is particularly challenging. There are a lot of options so it’s even more important to be mindful of how thing are going to work. Sounds like a niche I’ll be glad to leave to you 😉
Hi Carol Lynn, what an awesome checklist! It’s so ironic that I just come from a blog that had (hold on cause I bet you never saw this before either) 2 different Facebook like boxes. Yes, I said it and if it was a trick to make me stay on the page longer they got me. One box was at the top of the sidebar and the other was in the footer and I went back and forth twice because I could not believe what I was seeing! That reminds my of your furniture analogy – it’s like have two dining room tables in the living room. LOL!
Thanks for advice and the links to all the tools. They will come in handy I’m sure.
Ileane, you made me laugh. I know just what you’re talking about. Obviously someone didn’t know what to do with some space so they plunked something into it! It does make things confusing because you don’t expect to see the same thing twice and you automatically think it’s probably something different… but it’s not… maybe we should send that person my post 😉
Your analogy with two dining room tables was hilarious and true. Thanks for sharing that!
Hi Carol,
This is really a very complete and awesome post about what should be done with a website.
I am a blogger and I have good hair, therefore, I’ve got my picture on my header 🙂 I totally agree, though, that depending on what type of site (business) you have your picture might not be a good idea.
Ahaha, comic sans font. That’s so true, everybody loves that font. Thanks for saying that, though. I’ve seen sites with awful font and colors to the point that you are wondering if they wanted to make people flee from their site.
Ah, dear proofreading. Like you, how do I hate when someone points out what I should have seen a long time ago. I’m not mad at them for telling me, no, but I’m mad at myself. Unfortunately, in my case, the only person that could proofread my writing doesn’t like to do it, so he leave typos behind. Not to be trusted 🙂
Thanks for this great post, again, Carol.
Sylviane, you are allowed to have your photo on your site! You definitely have some nice hair 🙂 But you don’t even have your photo on top of your blog!
I try and follow my own “rules” but when it comes to proofreading that is definitely the hardest part. I actually have my mom do it, poor thing… last time we redesigned our business website she was clicking from page to page and ended up clicking on the link to our blog so she started proofreading the whole blog. Good thing I found out early or she could’ve been there a while!
And as for my blog, my dad reads it every day so he’s pretty good at pointing out my omissions. If not for them, I guess I’d be in trouble! But at least I will never use Comic Sans 😉
Wow girl! You got me looking at my site now to make sure my site is on track. This was an excellent post for everyone to re-check their own site to make sure stuff didn’t fall through the cracks. It’s so easy to do and I appreciate the reminder. You hit all the right points about everything new and old bloggers fall prey too.
I think I saw myself in some of those, but I had to redefine what my blog means to someone new coming to visit for the first time and if I gave them content they could act on. In regards to proofreading, I totally agree because I could read something slowly word for word and boom, miss something out of nowhere. I hate that, but it happens.
Again, Carol, excellent and thorough post. I bet you were tired after this one! LOL!
Sonia, a website is never done… every time I look at mine I think of half a dozen “should’ves”. Sometimes it helps to have the list and say yes… yes… nope, better fix that! One the plus side, it can be fairly easy to fix some mistakes, especially of the “cram” variety, which I think is a lot of people’s biggest offense. We have this nice big empty page and we want to use it! And sell stuff! And show stuff! next thing you know it’s like your grandmother’s attic 🙂
Thanks for your input and I’m glad this was helpful!
Some nice pointers. As a professional designer, I put together a list of some of the tools I use when building a website. They give great pointers as to what I am missing or need to work on – http://jeyjoo.com/blog/how-good-is-your-website-free-website-healthcheck . They look at important factors considered by Google when ranking a website such as pagespeed, responsive design, html errors, serps and seo (as discussed here).
Thanks Mike, that’s a great resource list! It’s a good place for someone to start if they want to get the basics in place before worrying about all the details like “are my links blue enough”? I would love to add this to our week roundup this week.