Help support children's hospitals

Donate to Extra Life!

7 design tips for bloggers

[Blaugust Day 11]

As a blogger, I’ve had to make some design decisions over the years, such as theme changes and screenshot choices. And as a web designer, I’ve learned that sometimes I was wrong. 😛 So I give to you, my fellow bloggers, some tips that I’ve learned along the way.

(Note: these are not hard and fast rules, more like guidelines.)

1. Have readable and legible text.

The details of readability and legibility can get a little complex but they boil down to this: will your readers have little to no difficulty reading what you wrote? For most blogs, text is the majority of your posts so you’ll want to make sure your visitors can actually read it. Half of this involves your font choice and size. If you take a look at the Lobster font, it’s a nice font with a lot of character that’s fine to read when it’s larger, so it would be most suited for headings. But in the paragraph example underneath…it takes some effort to actually determine what it’s saying. This would not be a good choice for body text. Fonts like Open Sans and Droid Serif are certainly more plain, but they’re very readable even at small sizes and could definitely be used for body text. And for the love of god and all that is holy, never ever use Comic Sans unless you’re making an actual comic.

The other half involves colour and contrast. I think we all know that black text on a white background or vice versa is pretty easy for just about everyone to read. But you might want to change those colours up or have your links stand out more in your body text. Or say you want to put some text over an image. There’s so many different ways you can spruce up your blog with colours and images…but you still want to make sure your visitors can read it. And while you might be able to read it, others who have poor eyesight or are colour-blind might have problems with it. The folks at the W3C have thought about these accessibility issues and put together a set of standards for websites to shoot for.

I definitely don’t expect you to read that massive page, all you need to know is that they come up with a contrast ratio for determining whether text has enough contrast from its background. And there are some helpful folks who have made tools that calculate just that. If you know how to get the hexadecimal value of your text/background colour, there’s an online checker that you can use. If you have no idea what a “hexadecimal value” is, there’s the Colour Contrast Analyser, a free and very tiny program you can download that also calculates the ratio and has easy to use colour pickers that work on any window. (Note: Ignore the WCAG AAA number, the WCAG AA is good enough for most websites.)

Having text over an image is a more complicated matter since images usually have a variety of colours at different light levels. A good rule of thumb is to sample an area on the image that’s closest to the brightness of your text. If you have whiter text, get the colour from the brightest area. If you have blacker text, get the colour from the darkest area. If the image has both extremes, consider putting a solid colour or at least semi-transparent colour behind the text. An example of that would be my current logo.

logo-example

2. Make finding things easy.

There’s a variety of ways you can do this using tags, categories, and date archives to group similar posts. While I would suggest having at least one of those (and which one(s) depends on the style of your blog), having a search box somewhere on the page is something I would heartily recommend. No amount of categorizing or tagging is going to equal the flexibility of a search box. And make sure it works too.

3. Know how your blog looks on a smartphone/tablet.

Even if you don’t own a smartphone/tablet or use yours for reading blogs, you should have an idea of what your blog looks like on one. The best way to test that is to get a hold of as many different devices that you can (or at least know people who own them). That way you can make sure things like menus work properly, because you can’t exactly hover a mouse over something on a touchscreen, can you?

Barring that, you can fake this by using one of the many available responsive design tests, such as this one by StudioPress. Or you can just resize your browser really small to see what it would look like.

small-browser

If your blog doesn’t look so good (you have to zoom in to read anything, there’s a lot of horizontal scrolling), there’s a pretty simply solution. On WordPress.com, a lot of themes are already mobile-friendly as long as you didn’t turn that option off. If you have a self-hosted WordPress blog, Jetpack has a mobile theme available or there’s an assortment of plugins that do the same thing. Blogger also has mobile templates too.

4. Know how your posts look in an RSS reader.

Following the same line as the previous tip, you should know what your blog’s RSS feed looks like in a reader. Most blogs look fine without any changes, but there have been times where I’ve noticed random things like certain lists missing from a post I’m reading. I found out that Twitch videos, for example, don’t work in an RSS feed and need to be replaced with Youtube videos.

I also really prefer RSS feeds that give you the whole post rather than just a summary. I know that some bloggers prefer summaries because you get less page views if people are reading your blog from an RSS reader, but speaking as a reader, I’d like to have the full post from the beginning without the extra click. Especially since I read a lot from my phone and loading blogs takes up more of my data usage (plus some blogs are hard to read on my phone as pointed out on Tip #3).

If you don’t already subscribe to your own RSS feed, it’s really easy to do so. Clean Casuals put together a great guide about it back in May. Like Aywren, I also use Feedly because it’s simple to use and I can access it through the web or through the app on my phone. Speaking of RSS feeds…

5. Have links to your RSS feed and social accounts on your blog.

Feedly is pretty good at discovering the RSS feed for a blog, but sometimes it doesn’t work and I don’t know if other RSS readers have the same feature. So it’s a good idea to have the link anyways, even if it’s just in your sidebar or footer. And if you want to have an image for it, the standard RSS icon is both free and recognizable.

If you don’t have any social accounts (Twitter, Facebook, Google+, Youtube, etc.) then the RSS icon is all you need. But if you do, you’ll want to link to them somewhere if you want them to be easier to find. After all, how would a reader know that you’re on Twitter if you don’t have a link to Twitter anywhere on your blog? For WordPress.com users, some themes offer built-in social links support and there’s a widget available as well. Self-hosted WordPress blogs can get social icons from Jetpack or there’s about a million different plugins to choose from.

I know that a lot of gamer-focused social sites (such as Anook, Player.me, Steam, Twitch, and Raptr) aren’t well known enough to have made it into some of these addons. If you’d like to add them to your blog and need an icon image, let me know in the comments. I can make them on a case-by-case basis or if I get enough interest, I could make a bunch of icons of various styles and sizes for anyone to use.

6. Edit your screenshots if they need it.

Rades at Orcish Army Knife has not one but two awesome tutorials on how to create/edit better screenshots and he does a great job at explaining everything. If Photoshop is too expensive for you (and it is ridiculously expensive), GIMP does a lot of the same things and it’s completely free. It’s not the easiest program to learn and use though so if you’re looking for a middle ground, I recently found this excellent image editing program called Pixeluvo that’s just $35 USD. It’s even on Steam too. I pretty much use it for all of my day-to-day image edits because it’s just so easy to use.

I’m pretty bad for just throwing screenshots up as is and usually isn’t not that big of a deal, but one time I really should be editing every screenshot is when they’re taken at night. Wurm Online is especially bad for this since it doesn’t have very good lighting to begin with. While it might be evident what you’re taking a screenshot of while you’re playing, it might be impossible to make out any details when it’s within a post. To make an example of myself, the left side of this image is what I used in an old blog post and the right side is how I should have edited it first.

wurm-edit

So while there will be times when you want to use the original screenshot for the effect, there are others when your readers will just want to see that the heck you’re talking about.

7. Don’t have anything autoplaying, videos or otherwise.

I’m glad this isn’t something I recall coming across on any of the blogs I read but I still feel I should include it. Have you ever opened up a site only to leap out of your chair because some video or music on it began blaring through your speakers? I think there’s a special level in Hell reserved for those site owners, alongside people who talk in movie theatres. Unfortunately I committed this sin not too long ago when I added some Twitch videos to a post and didn’t realize that they autoplayed. Once I found that out, I replaced them with Youtube videos that thankfully do not autoplay off of their site. The moral of the story: learn from my mistake.


If I missed any tips or if you have questions about anything here, feel free to post in the comments! I’m always happy to help out where I can.

Liore wrote a great post about making sure your comments work a little while ago and it was what inspired this post. Keep up with the awesome work, Liore!

(Visited 171 time, 1 visit today)

9 comments

  1. Thanks for the tips! My annual reader survey has been coming back to me with people wanting me to change my design a little, and I’m concerned on how to approach the matter safely. Your post really helped me get a stable mind – and a few ideas.

  2. Thank you! This is great. I am one of those who use a background image, well I got it yesterday, and been a bit worried if it was hard to read. I had a comment that they saw things just fine, but I decided on a darker picture, hopefully that is working out okay. Mind taking a look and see of it’s okay?

    1. I checked it with my contrast tool and most of it is fine.The only problem really was around the lanterns but those are pretty small areas overall. If you’d like, I could darken it a bit for you. Also, that’s a beautiful screenshot!

      Edit: Forgot to say that it’s too bad you can’t darken that semi-transparent background just a touch, that would probably solve everything!

      1. Thank you for checking 🙂 i can darken it a bit myself 😀 Yeah i wish i could darken that transparent area , free wp is often very limited in things you can do :/ thanks again 🙂

        1. That’s why I like self-hosted WordPress myself, I like customizing too much and don’t mind working out the odd problem. Although the free WordPress is a pretty great service for people who want something free that just works.

          1. I do like to have myself a self hosted, but last time I did I wasn’t happy with bluehost. This time around bf didn’t really see the point in me having a self hosted, so here I am. I miss more customisation, but maybe one day I will get something 🙂 At the moment this does work though.

  3. I’m so bad about putting up dark colored screen shots. I never think about how it might look on other monitors, I just know it looks ok on mine. I do make sure to periodically check my site on a mobile phone/device though, that’s a good tip.

Leave a Reply

%d bloggers like this: