Tips for a Writing Blog

Alright, so here’s the skinny: you’ve decided to start a writing blog. You are not hugely familiar with formatting, either because you don’t really read blogs online or you’re just not on top of the options. Add to this the fact that you are viewing your posts within an editing window rather than the mainpage and, lo and behold: disaster.


Here are some things you need to stay on top of for readability’s sake. (I am specifying this for writing blogs, because it’s assumed that people are going to spend a lot of time sitting there reading the damn thing. Other blogs might have picture posts, short posts, etc.)


Width. Some poor souls are out there still using a 1024×768 pixel monitor, but those of us with laptops have gone widescreen and those of us with desktops likely have a minimum width of 1280 pixels (that’s a 17″ fullscreen). It doesn’t work with WordPress because of the javascript, but if you’re using Statcounter to record blog hits, you can also get some data on the screen resolution of your viewers. Don’t worry about mobile content, because sites tend to have a special mobile viewing website that smartphones and tablets will automatically redirect to.

As a reference, this scheme is a total of 960 pixels wide, with 648 given to the main window and 266 given to the sidebar. It’s fixed width: no matter how wide your screen is, this is how it’ll look.

Anyway. My main monitor is 1440 pixels wide, so I am personally a huge fan of flexible width–70 to 80% of the screen, plus 250-300 pixels for a sidebar. If you prefer fixed-width windows for both (the main reason to do this is that you have some kind of border or header image that won’t look as pretty otherwise, or the weirdness imposed by the CSS of flexible width sites annoys you), then go with 600-800 pixels for the main screen. Remember that whatever’s on the left side will be visible by default–right sidebars are best.


Color. Dark background, light text is my overwhelming preference. The monitor is a giant lightbulb in your face; there’s a reason that staring too long at a computer screen causes headaches. Be kind, take this into consideration.

Alternately, a neutral color scheme isn’t so bad. Just avoid white (#FFFFFF) backgrounds and text, as well as low-contrast schemes.


Spacing. If you look at the huge gaps between some paragraphs on this blog, you’ll notice that it’s on purpose: I’ve left some paragraphs close together because the topic’s the same and gone with the huge ones for transitions. If you’re reading this, you’re likely using autoformatting/a visual rather than an HTML editor, so I’ll leave it at this: do not allow walls of text to form. The above about ‘width’ helps deal with this, too, but keep in mind that Internet reading isn’t quite like print reading. It’s distracting and the resolution is lower.

Put blank spaces between new paragraphs. Obviously, it’s a bendy rule, so apply with discernment. Too much space doesn’t look good, either.


Images. I’ve totally violated this rule on my own blog, and I’m walking a fine line between guilt and ‘ooooh the transparency is so pretty’…but make sure your images don’t take too long to load. The safe side is a lot nicer than in the days of modems; nevertheless, assume your readers are on a terrible broadband connection of 728kbps (that’s seven hundred and twenty eight kilobytes per second). If you’re going to have a background image, either try to make it a small repeating pattern or keep it under 700 kilobytes and make sure that the site it’s hosted on won’t be easily overloaded by traffic.

Note, though, that this background image is the only image that has to load on every single page. As I’ve mentioned, I use flexible width, which doesn’t work so well with border images and that kind of thing…but it’s also really distracting and, honestly, gimmicky. Want something that looks gorgeous without using images? TRANSPARENCY. Seriously, it is so. pretty. (I’m going to swallow my guilt and direct you to my regular blog, just because.)

But be warned! Transparency, and a number of other features (e.g., hover menus) don’t work on Internet Explorer. (If you clicked on the link above, you may have already learned this. You may also have read the bottom disclaimer, where I point out that, frankly, I don’t care a bit about Internet Explorer.)

As for images within the body: pay attention to wrapping. Do you want the text squashed in next to it? What side? Should it just be below? …Your call. Use the preview button for this, even if you use it for nothing else.


SIZE. Oh boy this is a huuuuge pet peeve for me. Here’s the thing: my vision is awful. I have thick Featherweight lenses; objects are blurry six inches away from my face. So I am not going to ruin my eyes further by straining them to read your damn tiny text. I don’t care that you like it: I care that I can’t see it well.

AUDIENCE. You’re not making this for yourself, you’re making this so other people will see it. Want them to stick around? Make things as convenient as possible for them. Stick with default sized text, which tends to be anywhere from 12 to 18 size depending on the particular font. (Obviously, too big isn’t cool either: don’t use heading sizes for paragraph content.) Just let the person and their individual browser decide.


I think that’s all I have to say on the topic. If you want my help, ask–though be warned: I’m not a professional web designer. I have built non-personal websites, but not for money.


Say something!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s