The design of your website goes a long way to getting your readers to stick around longer, browse more pages, and return more often. Readability and accessibility can be key in converting readers to customers. So why do so many sites defy simple principles of solid web design?
They don’t know any better. It’s easy to get carried away with a design concept – or lack thereof – and miss out on simple steps to make your site more accessible.
Take a look at your web space. Are you following these principles?
1. What’s your justification?
When it comes to the main content of your blog or website, center justification doesn’t work. It’s hard to read because your eyes need to find the starting point of the next line at a different place every time. When your text is left-justified or fully justified, your eyes go to the same place on the page with each new line.
Center justified also has a habit of looking a bit sloppy. While on your screen, with your settings, it might look pretty good, you have to remember that other computers & browsers will make the text look different.
2. Give me some space!
White space – the empty space in between elements – is an often ignored principle of web design. We have so much to fit into our pages that elements get cramped and confused. I know this from experience because I just can’t seem to get the white space right on Scoutie Girl.
Take a look at your own site. Is there ample space between your content and your sidebar? How about between the items on your sidebar? Is there sufficient space between your images & your text? Are your headers set apart from your text with white space?
Respect each element on your site by giving it the space it deserves.
3. What’s the link?
Since links are the currency of the internet (wait, I thought that was PayPal?), it stands to reason that you should make them look important. Your links need to be readable, prominent, and in keeping with the style of the rest of your site.
If they don’t look different, people won’t know to click on them. If the color is unreadable, people won’t be able to understand what you’re saying. If they’re not prominent, people will ignore them.
4. Size really does matter.
There seems to be a trend on craft & design blogs towards really tiny text. While you may like how the letters look at that size, if people can’t your text, they’re not going to make a habit of visiting your blog. Text should be at least 12px in size – 13 or 14px is even better. 15 or 16px makes your text very readable.
For comparison, the text on this site is 15px in size. The text on Scoutie Girl is 12px.
In an aging population – even an aging internet population – it’s important to make your text big enough to be ready easily. And as a web professional who spends upwards of 12 hours a day on the computer, it’s good for fairly young eyes too.
5. Tell everyone you’re important.
Headers (like the one above) tell people – and search engines – that text is important. They give our eyes a place to stop, rest, and refocus before diving into another piece of information.
Headers are also a great way to carry the design of your site over into the content. Taking the time to style your headers to match your site and look special gives you a more professional look.
They’ll help people read through to the end of articles too. Score.
6. Color me surprised.
Carefully, carefully, consider the colors on your website. You can use all sorts of color theory guidelines to help you pick the colors that will work best for your branding and business; however, you must also consider what kinds of colors work best on the web.
High contrast is important. If your background color is too close to your text color, it’s not easy to read. But you don’t have to go black & white. Check out Dave Navarro‘s site (or really anything designed by Reese) to get a feel for a softer color palette that’s still easily read.
Also, be careful of colors that burn. You know the ones. Used as a highlight here or there, these colors can make your site pop! Used for text or large images, they make your head spin.
The colors you use on your website & in your text not only communicate your brand but are the primary way readers access your information.
As websites replace phone books (does anyone still use those?), it’s up to you to make your site accessible to any number of potential customers who could be visiting you – ready to buy – for the first time. Ensuring that your site is easy on the eyes helps those customers stick around longer, browse more, and complete the sale.
What would you add to this list?
Want to get the whole scope on how to set up a website – from start to finish – using WordPress? My ecourse – Website Kick Start – is launching soon and I want you to be the first to know. Click here to get the scoop.
"wonderful blend of heart and soul
Kick Start Labs is a New Economy microbusiness community. 
Imagine your business at the next level of success. Insight Intensives are for coaches, authors, designers, and others. 
Startups: turn your big ideas into profitable business models & compelling outreach. Email us to learn more: general@taragentile.com.
"The
These are really great tips! I have trouble figuring out the white space on my website. I’m trying to break up my paragraphs, so they’re easier to digest. And, I’m trying to figure out how much space I need between paragraphs and headers. It’s really important to me to figure out how to make my blog posts easily readable, and it’s something that I’m working on daily. When I go to a blog that has really lengthy paragraphs with no headers or bolding, I usually don’t stick around for long.
But, the blogs that lose my interest the fastest are the ones with the crazy colors that make my eyes bleed. The content is the most important part of a blog, and if I can’t read it, because you’ve chosen a bright yellow font on a red background, I can’t concentrate on your content. My best tip is to have someone who’ll be honest look at your website or blog to make sure it’s easy to read and navigate.
As a graphic designer, I really appreciate this post. I will admit to occasionally falling into design snobbery and not wanting to stick around websites that are either hard to read or difficult to navigate, no matter how good or useful the content may appear to be. I just can’t endure!
There are some great resources out there for folks who need to update their web template, and all of them are a search or two away!
I agree, .tif! Doesn’t matter how “good” the stuff of a website is if you can’t stand to be there.
Great post Tara! You rock! Seriously. This pointers are key + often so overlooked. I particularly appreciate your advice about white space + justification. It is such a turn off to enter a site full of wonderful content that is so hard to read + that is saturated with sidebar garbage! I also have some homework to do with my links = gotta make them more important. Thanks for the reminder!!! xo.
Hi Mayi!
Thanks! I agree that sidebars are one of the worst offenses ever. I am working on an overhaul of mine at SG because I’m just *not* happy with them. Will definitely post on that soon!
Tara
What a great article!
It leaves me with so many questions … I hope I can sign up for the Website Kick Start. I need it.
Yay! Something I understand and am doing right
Very well explained and to the point. You are good!
Thanks so much for the point about the text size. One of my pet peeves is text that is too small and I can’t understand why so many big sites use text that require me to put on the $15 glasses I bought from Target, *just* so I could read them!
Amen, Alison!
Hear, hear! Excellent suggestions.
I just increased my pt. size from 12px to 13px the other day, despite my personal preferences, because I thought to myself “Hey, if you’re writing articles, people need to be able to actually READ them.” LOL!
Off to tweak my blog a little bit more. I actually think right now I have a little too much contrast (just #fff & #000) and maybe a dark shade of gray text would be more soothing.
It’s so true, Nicole! And I think it really helps to think about things from an outside perspective. Just because something seems pretty easy for us to read doesn’t mean others think the same way.
Thanks for stopping by!
Hey Tara!
What a great write up for your audience. Especially love the contrast section.
Thanks for the props on Dave’s site. We both appreciate it!
Reese
Hi Reese! I really appreciate you stopping by. Glad you liked my post!
Tara
Awesome tips, Tara! I totally agree.
I think the only thing I’d add is maybe a clean, well organized sidebar. If I’m visiting a site (versus reading in a feed reader), I really appreciate a sidebar that isn’t too busy and that is organized. Sidebars that are too busy tend to distract me from the actual content, and if I can’t find the info I need, I’ll give up and leave.
Hey Brandi!
Couldn’t agree more about the sidebar, of course. I know mine isn’t awful – but I’m just not happy with it right now. I’m planning an overhaul – or at least a strategic reworking and I’ll write up a post on that experience soon!
Tara
I like the point about white space and left justification.
I have a border thing on my blog that I like…but am sick of. I was considering doing away with it and after reading this, I will for sure.
I never thought about the justification thing. That is very helpful, thanks!
I am back with one more thought that came to me in my sleep. I am currently designing a new site and that happens
Pick a font and stick with it! It makes me crazy when a site has different fonts, sizes, and colors all over the place. Not to say there are not times you may use a different font, but it tends to read better and be more visually pleasing when the font stays the same.
Hey Gwyn! I do agree with you… but at the same time using two different fonts for contrast can be helpful.
I like to mimic my sites on the logo fonts. So I use one web safe font that looks similar to the logo for the text and another – for contrast – for the headers. You can see what I mean on SG!
Great points! I’ll have to share the text size advice with my husband. He is always telling me to make my text bigger. Thanks for such a clear and concise list.
Is there a principle related to animated gifs used for some ads? I’m always torn in my opinion of these. I can find them very distracting when I’m trying to read a post or article.
Hey Cyn!
Going to have to agree with your husband on this one
Especially because of the TypeKit font that you’re using. The serifs are difficult to read at that size but a little larger and I think it would be grand!
As for animated gifs, I’m not opposed but I’m not thrilled with them either. I think I’ll be phasing them out on SG for the new year. I don’t see a difference in the click thru rates.
Hey Hey! Great tips; I even shared them with my web designer-boyfriend!
I found you though brandigirlblog.com , a gal who is taking the same decor8 e-course that I am, and I just wanted to send out some props for being a great source of information. I’m new to the world o’ blogging, and having a resource like your website will make things much less scary. Bookmarked
Much thanks!
xo,
Vikki
Hey! There’s Brandi just above! Maybe the blogging world isn’t so big after all
HA!
HA! Hey Vikki! You’re right – it’s a small blogging world after all!
Hi Tara!
What a great collection of tips! So helpful to read through and think about my blog making sure I follow these guidelines. The other thing I would mention is the importance of consistent photos. Blogs that have different size photos often end up jumping and it’s hard to concentrate on the content of the photos themselves. Properly sizing photos is one of the most important things I learned (from you
. Thank you for that!~
xoxo, Jenya
Hi Tara,
Great post! As a graphic designer, I’m used to following these principles–type justification and sizing, information hierarchy, color palattes, and positive/negative space–in print layouts. But as I’m crossing over into the blogging world, these same ideas that usually come so naturally to me are a bit harder to remember to apply. Thanks for pointing out that in websites and blogs they are just as important!
I gave in and upped my font from 12px to 13px. It didn’t make a huge difference in aesthetic value but hopefully it will save a few people that extra grab for their glasses.
Great tips! I have the hardest time with sidebars too… so much to stick in, but so little space!
Great list, I’d have to say that I’m not to bothered by mixing a couple of different fonts as long as they are readable, but why oh why would somebody use a font that you have to struggle to read. I attempted to sign up to a UK based design network website but gave up because I just couldn’t handle the font they had used. A network for designers??? please.
I found your article via Twitter. I’m a blogger, not a business owner, but all of the principles you’ve mentioned fit with blogging too! So I just upped my font size a bit. ^_^
Also, I’m slowly learning CSS so I can customize the template on my blog. And one thing that I’ve read a lot about is that ideally, you shouldn’t use px because it can’t be resized in Internet Explorer. (I apologize if this is common knowledge.) If a reader using IE can’t see the text then they can zoom in, but that affects the entire page and not just the text.
Em or percentages are recommended because they work in all browsers. (More info is here: http://www.w3schools.com/css/css_font.asp)
Originally I didn’t care, but then I looked at my site stats and realized that 45% of my readers use IE! I dove into the CSS and it was really easy to switch everything from px to em or a percent. It was a simple change that made my blog more accessible to nearly half of my readers. Well worth the effort! ^_^
I searched for long and finally find a valuable, valid and practical simple tips that surely produce result, thanks for your informative post.
I look forward to more!
Preserve the favorable work! You锟斤拷ve got +1 more reader of one’s great blog:) Isabella S.