Take Quark Xpress, an industrial-strength tool for graphic design professionals. Professionals. In other words it’s for people who have an understanding of the underlying concepts and principles of typography and graphic design, and not simply a ‘good eye for it’. If we don’t have that understanding we may as well use Microsoft Word. And I don’t mean that derogatorily: with a basic understanding of typography – grids, leading, kerning, proportion, space, etc – an awful lot can be achieved in Word.

Too often we presume that it’s easy, that the tool will do it for us: at best this is naiive; at worst it is disrespectful and undermining both of the professional designer and of the integrity of our own work. We wouldn’t presume that simply learning to use Microsoft Word will make us write good novels: by the same token we shouldn’t presume that learning to use Quark Xpress will make us produce good leaflets.

More of us than ever are using the written word and images to communicate, so we need to start appreciating the hard-won skills required for good graphic communication. Instead of spending £500 on a two-day Quark Xpress Essentials course, people would be much better advised to spend £400 on a week-long basic typography or graphic design course. Then they can choose which tool is right for them: be that Quark, InDesign, Scribus or even Word.

We should be learning the skills to make our communication more effective, not how to use a tool that we won’t appreciate.

• Possibly related posts

  1. Web Design Dashboard
  2. What should I do with my feet?
  3. So this is what I do…

There are always those who ignore the rules, which only serves to make other people indignant and angry. And let’s face it, few people are going to ask a hooded youth to turn his music down.

I avoid quiet coaches now because I’m happier dealing with legitimate noise than feeling like someone is selfishly invading my space.

Simply sticking a sign on the window (which actually is surprisingly easy to miss) isn’t going to deter people who don’t give a toss. Making the place feel more subdued – dim the lights, put curtains on the windows – would help.

And beds. Beds would be great.

But as it stands, doing away with the quiet rule altogether would make journeys in those carriages a lot more tolerable.

• Possibly related posts

  1. Chiltern Railways impress with their use of Twitter

Visit Tweelove

• Possibly related posts

  1. Wherefore art Romeo and Juliet on Twitter?
  2. Government Department News Feeds on Twitter
  3. Twitter flash mob in Birmingham tomorrow

Obviously (I hope!) you need to start by going to ‘Settings’ then ‘Postalicious’ in the admin area of your WordPress blog.

1. Set value for ‘Minimum bookmarks’ to 1.
2. Select ‘Post at most … bookmarks per post’ and set value to 1.

This will ensure that each new bookmark appears as a separate post on your blog. Unfortunately you can’t also set a specific time, so a new post will be added whenever Postalicious is updated. (Postalicious will update either hourly or automatically: you can change this at the top of the Postalicious settings page.)

Now to get it to display what you want. This is how I did it (see example post):

Settings

Post title (single day)

Changed value to %title%.

This makes the title of the post on your blog the same as the title of the bookmark on delicious.

Post title (two days)

Changed value to %title%.

You shouldn’t need to worry about this if you’re only displaying one post at a time, but it’s probably worth it just in case.

Bookmark

Changed value to <p>%date%</p><p>%description%</p><p><a href="%href%">Visit <strong>%title%</strong></a></p>

This is the bulk of the post, and you have quite a lot of control over configuring it if you know a little html. My code explained:

<p>%date%</p><p><a href="%href%">Visit <strong>%title%</strong></a></p>

1. <p> opens a paragraph
2. %date% will display the date the bookmark was added
3. </p> closes the paragraph.
4. Again, <p> opens a paragraph;
5. <a href="%href%"> opens the tag for a hyperlink
   • %href% adds the web address for the bookmark;
6. Visit <strong>%title%</strong> is extra text that I wanted to add
   • %title% inserts the title of the bookmark (as in ‘Post title…’ above);
   • <strong>%title%</strong> makes the title bold;
   • </a> closes the hyperlink;
7. </p> closes the paragraph.

That’s how I’ve done it anyway, but of course you can use whatever html you want.

Post template (single day)

Changed value to %bookmarks%.

This field can have other text and html, but it must contain %bookmarks% in it somewhere. %bookmarks% inserts everything from the ‘Bookmark’ field (explained above) into the main body of your blog post.

Post template (two days)

Same as for single day, above. You shouldn’t need this if you’re only displaying one post at a time, but better to be safe than sorry.

Notes

The values with percentage signs (%title%, %href%, etc) are the codes that Postalicious uses to add the content to your post. When you save the settings (don’t forget to do that!) these values will still be there. Don’t worry, the published post will look as it should do.

To make the posts look different I also tampered with my theme’s templates, but that’s more complex and beyond the scope of this post.

• Possibly related posts

  1. Delicious bookmarks moved
  2. ‘Listening’ to the web with Addictomatic
  3. 31 Days to Building a Better Blog

The poster seemed to want two things. Firstly, to “leverage the strongest, most engaging elements of online campaigning and communications and transport them to the offline world”.

This is interesting but flawed. ‘Online’ and ‘offline’ are two different realms; replicating the benefits of one within the other would at best be a waste of effort, and would in fact probably be impossible. It would certainly seem to defeat the object of operating in two different realms in the first place.

To me, his second point is the key one: to “make finding relevant content easier, not harder”. However, the answer is not to make content available in as many formats as possible so as to give every potential user exactly the same experience.

Rather, we should be understanding our audiences (who are we targeting and why) and ensuring we are as accessible to them as we possibly can be; audience first, content and delivery second.

This is not simply about the presentation of our content, but about the whole design of our organisations.

For example, when someone phones our switchboard can we guarantee the call will be answered immediately? Will that person be able to provide a satisfactory answer? Will they have the initiative, for example, to offer to post a DVD or a web page transcript? Are they able to do that at no cost to the recipient? If not, are there systems in place to manage the transaction?

So how we organise and present ourselves is at least as important as how we present our information. Moreover, it’s about how we understand and manage our internal processes. (It’s a no-brainer really, but surprisingly ill-understood.)

In order to give the best service to our users – not just those in the extremely broad categories of ‘online’ and ‘offline’ – we must understand our target audiences; and we must strive to appreciate fully their experience of the points at which they interact with us.

*The forum cited is members-only, so I haven’t included links to it. If you’d like to know more about the post referred to please do contact me.

• Possibly related posts

  1. Manage your online reputation
  2. How would we spot a nervous breakdown on Twitter?
  3. Birmingham Forum

These graphics can be seen on trains in the UK. The one on the left was seen on First Capital Connect, the other on London Underground.

What do you think they mean?

Let’s find out…

The one on the right means ‘don’t put your feet on the seats’. The one on the left means… erm… the same. It appears to be saying ‘please do put your feet on the seats’ but actually the message they want to convey is the opposite, as we’ll see.

For the purposes of this post I removed the accompanying texts. Let’s put them back in:

So far so good. And the other one?

Not so good.

The graphic on this sign is at best completely superfluous as it adds no value to the message being conveyed. In fact, it would be better if it wasn’t there at all. Take away the text (a non-English speaker, for instance, would rely on the graphic alone) and it gives completely the wrong message.

It irritates me no end that people are still creating information graphics that fail utterly; that there are still people who think the graphic is there for the sake of it, and have not realised that its entire purpose is to help communicate their message: if it doesn’t do that, it shouldn’t be there.

A note on the images

You may notice that the photos are a bit distorted and have been patched up a little. This is because they were taken at severe angles on moving trains with a mobile phone, and so were Photoshop-ed a little to make them easier to read. The only substantial alteration was the removal of text for the first example.

• Possibly related posts

  1. If we’re communicating graphically we need to understand graphic communication, not how to use Quark
  2. So this is what I do…

I’ve set body {font-size;) in absolute units and then used ems for all other measurements, which works well.

The difficulty is in getting text to align to a baseline. If I want to set an element to a different font size and then set its line-height, the line-height is calculated on the newly computed font size, and not on the size set in the body tag (I may be missing something important here though!).

For example, suppose we had these styles:

• body {
• font-size: 10pt;
• }
• li {
• line-height: 3em;
• }
• p {
• font-size: 2em;
• line-height: 3em;
• }

The browser would render the li as 30 points high (3 x 10pt). But it would render the p as 60 points high because it is using the newly calculated font-size of 20pt (ie 2 x 10pt), and therefore line-height = 60pt (ie 3 x 20pt).

This makes life interesting if we want to set text to a baseline. What I’ve done so far is to presume a point size per em (10pt, in the  example above) and calculate the measurements from there.

For example, for p to be 30pt high:

• p {
• font-size: 2em;
• line-height: 1.5em;
• }

ie 30pt / (10pt x 2) = 1.5.

In other words, if:

• x = em measurement for desired line-height
• a = desired line-height (30pt in this example)
• b = default font-size (10pt in this example)
• c = current font-size in ems (2 in this example)

then:

x = a/(b*c).

But, like I said, maybe I’m missing something.

• Possibly related posts

  No related posts.

This post just shows the grid, I’ll get onto typography later.

I set up this grid, which divides into 2, 3, 4 and 6 columns and horizontal modules (based on the classic design by Karl Gerstner (hence refreshing myself with Ellen Lupton yesterday, in case you were following me on Twitter!):

then transferred my sketches to it:

and transferred those to digital:

and without the grid:

and voila (it’s changed a bit since though): see the html draft front page here.

Each block of text aligns to the grid at some point (If the blocks were long enough you’d be able to see where the lines line up). But more on this later. For now, you can see the draft front page here.

From grid to finished design:

• Possibly related posts

  1. Website re-design: again

I seem to have cracked baseline alignment and everything seems to be re-sizing pretty well. I can’t imagine it’ll work in IE (without a separate stylesheet) but it works fine in both the latest Mac versions of FireFox and Webkit (Safari nightlies).

It’s a simple design, but it might get more sophisticated if I can be bothered. It’s all done in CSS so very easy to add prettiness. It’ll probably change somewhat before it goes live anyway (for instance the image is just there for experimentation purposes and may well disappear).

All I have to do now is shoe-horn it into WordPress!

If you’re really keen you can see the draft front page here (use Firefox or Safari to guarantee seeing it properly). And If you’re lucky I might even put up my initial sketches at some point: bet you can’t wait.

• Possibly related posts

  1. Redesign grid

• I wanted to keep it clean, simple and interactive.
• Sizes are in ems, so the stylesheet is easily tweaked to make the box smaller if need be.
• No widths are declared, so it should fit easily into fluid layouts.
• The logotype is in a heading as this makes logical sense, but only if there is a way for the user to select which level of heading it should be (it’s currently h1).
• There are rounded corners specified in the stylesheet, but I’ve commented them out because I think they’re ugly. The problem is that to keep it simple I did them using the Mozilla and Webkit proprietary tags rather than images. This would be fine except I wanted the h1 to have a background colour, so it too needed rounded corners in order to fit in the rounded div. I could have done it so that the div was purple and all elements except h1 had a white background, but the corners would look bad if added to a page with a background colour in a browser that doesn’t support rounded corners. Best to comment out the styles I think (easy to change though: I’ve put them in an easy-to-find cluster at the bottom of the stylesheet, just in case).
• The Creative Commons licence is just there while this is being created, and can change.

• The finished badge
• My original design (png)

• Possibly related posts

  No related posts.