Bitbutter

Our visual experience of the world can be described in terms of negative space and positive space. Positive space corresponds to the area 'inside' an object's edge. Negative space is the geometry that's left over if we were to cut out the object of interest from a photograph. Generally negative space corresponds to what we would call 'background'.

Graphic interface design uses visual conventions based on our familiarity with physical machine interfaces. The two-dimensional representation of a button is a staple of contemporary GUI design.

GUI designers have various ways of suggesting to a user that a particular group of pixels affords clicking, that they should be read as being a button. Several of these techniques depend on mimicking the look of a real button. In real life, buttons tend to protrude from their casing, they are usually the 'figure' rather than the ground, so several techniques for making pixels look button-like depend on creating the illusion that the top surface of the 'button' is closer to the viewer than its immediately surrounding 'casing' is.

One way this can be achieved is by simulating the effect of light falling on the button by creating highlights and shadows. Giving a button rounded corners is another way.

Why should rounded corners suggest greater proximity than sharp ones?

Look at your surroundings as if you were looking at a photograph, closing one eye may help to see things this way. Look at the visual boundaries of the objects you see. The corners that make acute angles along the outer edge of these shapes are almost always rounded to an extent that is visible to the naked eye–even the corners of most machine-made objects are at least slightly rounded.

In your field of view you will also be able to see some very sharp 'corners' but these will almost always belong to the negative space that surrounds overlapping figures, and not to the figures themselves.

The brain, when experiencing a rectangle with sharp corners, can 'read' the shape as representing a recessed plane or a protruding one. To me it seems that when the rectangle is given rounded corners, the likelihood that it represents a protruding plane is increased because of a subconscious rule of thumb: figures tend not to have sharp corners, but negative spaces often do.

The power of this principle is I think demonstrated by examining graphical user interfaces that rely almost entirely on the shape of control elements to suggest their affordances. One example is the digital music application Tracktion. The softened rectangles used in Tracktion are instantly recognisable as buttons (we don't mistake them for 'recessed' input fields for instance) even when the subtle lighting effects are removed.

Google favours pages when important keywords are reflected in their urls. Normally a page in a rails application that shows a single record has a url that looks like this recipes/show/12. If this particular recipe is for pasta sauce, Google would prefer the url to be recipes/show/12-pasta-sauce. Because rails isn't interested in what appears after the number in the :id part of the url, we are free to add words there to help search engines without affecting how our application functions.

The seo_urls plugin aims to make it easy to create more descriptive urls for 'show' pages and increase your application's visibility to search engines.

Install from the root of your application like so:

script/plugin install http://svn.redshiftmedia.com/svn/plugins/seo_urls

Apply the plugin to a model like this:

# Apply it to a model like this:
class Recipe < ActiveRecord::Base
   seo_urls
end

# Or to use an attribute other than name or title:
class Recipe < ActiveRecord::Base
   seo_urls "shortname"
end

The plugin looks for 'name' or 'title' attributes and if they are available it uses them to generate a search engine friendly string. to_param method is overwritten so that it returns the the numerical id of the record with the search engine friendly string appended to it.

# An example model
@recipe=>{:id=>12,:title=>"pasta sauce"}

# Without the plugin:
recipe_url(@recipe)=>"/recipes/show/12"

# With the plugin:
recipe_url(@recipe)=>"/recipes/show/12-pasta-sauce"

It can be a little tricky to get code in your Wordpress blog to look as good as it does in TextMate. I began with this article as a guide but departed form it in a couple of places. The following steps describe how I set up code formatting on this blog.

First, install and activate the wpuntexturize Wordpress plugin to suppress curly quote transformations.

In TextMate select the following menu option: Bundles > Textmate > Create CSS from current theme.

Run Edit > Find on the resulting document and replace all instances of '.yourthemename' (eg. '.cobalt') with an empty string (").

Save the resulting file as mate.css inside your WP theme folder and upload to your site.

Modify the header.php file for your theme to include the mate.css file. Add a line beneath the first stylesheet link so that the first two stylesheet links look like this: (substitute the example values here with your own site url and theme name)

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="stylesheet" href="http://www.myblog.com/wp-content/themes/mytheme/mate.css" type="text/css" media="screen" />

To include some code in a blog post, select the code portion in TextMate and then choose Bundles > TextMate > Create HTML from selection (don't use the line numbers option, it makes it fiddly for people to copy and paste your code).

Copy the contents of the generated file and paste them into the Code view of your WP post.

I've noticed that not all code inserted in this way will be faithfully highlighted as it is in TextMate, but most of it is.