I’m a postman!

This entry was posted on October 26, 2007

When I was a mere six years old (it seems so long ago!) I played the most important part in my school’s Autumn production: the postman.

Fourteen years later I’m ready to reprise my role for one time only. That’s right, today I’m a postman!

Leave me a comment with your name and your url (as well as anything else you want to say) and I will get back to you for your snail mail address. Once we’ve done that, I will personally draw / colour you a postcard and hand-deliver it to your doorstep!*

Although I’m in the UK, this offer isn’t just for UK residents. If you have a postal address, you can participate. I have some spare pennies I’ve been saving up that I can use for stamps. The only limitation is that I only have 25 blank postcards to customise, and that this offer is only open to people with their own website (I want to see your site so I can have some idea what you’d like to see on a postcard). You don’t need to be a regular commenter on my site, as I’d love to see some new (perhaps shy) people speaking up!

So go ahead, leave me a comment, and we’ll see what you’ll get in the post…

*When I say “hand-deliver”, I mean “take to the post office”. I won’t actually be the person delivering your card, it’ll be the postman.

21 lovely people have commented

8 steps to a more readable blog

This entry was posted on October 24, 2007

What use is a blog that your visitors can’t read? Where’s the point in you working hard on great content if no one can see what it’s about? Here are my top 8 tips to making your blog more readable.

  1. Keep your lines short. No more than 15-20 words is good. If you have a fluid layout that’s designed to stretch for larger resolutions, consider using max-width in your stylesheet so you can limit the width to 1000-1200 pixels.
  2. Use a generous line-height. 140% is a good rule of thumb. Too much and you risk your visitors’ eyes getting lost. Too little and your text will be unreadably squashed.
  3. Colour contrast is good! Dark grey (not black) on white is best, and dark on light is easier to read than light on dark.
  4. Never ever ever use Comic Sans MS. Ever.
  5. Small text is not good. Yes, it’s good for your meta data, but it’s not good for your main body text. If you do insist on using small fonts, at least size them in a unit other than pixels so all your visitors can resize your text as needed.
  6. Allow plenty of space between blog entries. If you’ve spaced out your text, you should space out your entries. Whitespace is good - cramped blogs are not.
  7. Never use more than three different fonts. One font is best, two fonts is acceptable, but three’s a crowd. Instead, try experimenting with font-variations, font-weights, colours, and sizes. You’ll be surprised what you can achieve.
  8. Don’t type all in capitals. Capital letters on the web implies that you are yelling at your readers. Do not yell at them!

19 lovely people have commented

A brief introduction to semantic HTML

This entry was posted on October 23, 2007

Wiktionary defines the word “semantics” as:

  1. (linguistics)The science of the meaning of words. Semantics is part of linguistics.
  2. The study of the relationship between words and their meanings.
  3. The individual meanings of words, as opposed to the overall meaning of a passage.

HTML is a language (the letters stand for HyperText Markup Language), and semantic HTML is markup that has proper meaning. In simple terms, this means using the right tag for the right job.

The easiest way to get to grips with writing semantic HTML is to think about what the meaning of your markup is. HTML is about meaning and structure, it’s not about presentation - that’s what your CSS is for!

So no more using the <b> tag to make your text bold. Bold text means nothing. Why is your text bold? Is it because it needs a strong emphasis on it? That’s what the <strong> tag is for. The <strong> tag will make your text appear bold by default, though you can back it up with CSS by placing strong {font-weight:bold;} in your stylesheet.

No more using the <i> tag either! Italic text has no meaning. We use italics when we want to place an emphasis on something, which is why we have the <em> tag.

Those two changes are the easiest to make when starting out with semantics. Semantic HTML is no different to normal HTML, only in that it focuses a lot more on the meaning of each tag, and heading towards completely separating structure from presentation wherever possible.

So no more <p class=”header”> for your titles. There’s six different heading levels you can use from: <h1> all the way down to <h6> - surely that’s enough choices for you?

One large change that you might need to make is your use of tables. Despite thousands of people harping on about why tables are bad for your layouts (including myself), let’s stop and have a think about it for a second. Why do we have tables? What should tables do? What’s their purpose? What do they mean?

Tables are used to portray tabular data. Numbers, statistics, correlations, employees’ choices for the company’s Christmas do, the list goes on. Tables are not used for portraying your header, sidebar, main content, and footer! You wouldn’t display your layout like that on paper, and you definitely couldn’t show your layout in a graph, so please, don’t use tables for your layouts.

The discussion of semantics could (and has) gone on for days. I just wanted to outline a brief introduction for those of you who weren’t entirely sure what semantic HTML is. It doesn’t have to be an overly complicated thing if you don’t want it to be. All it requires is a little bit of thought on your part about what you really want your markup to mean. Good luck!

8 lovely people have commented

« Previous · Next »