So spring is finally here, which I guess means it’s time for a redesign. Actually it’s less of a redesign and more of a design evolution.

I have to admit, I always find it incredibly difficult designing for myself so it was quite a challenge to simply improve the current design rather than completely trashing it and starting again.

The More Things Change

The most noticeable change from the previous design is the new sidebar. Before none of the sidebar content really stood out from the main content, in fact it began to just blend into the background. By giving the sidebar it’s own distinct portion of the site it helps to differentiate between the two halves of the site.

The header image has also evolved from the previous design. As much as liked the rich colours of the previous iteration it just didn’t seem to fit with the new sidebar. I have still kept the image, it’s just a little more muted now.

Dreaming in Type

I have also paid much more attention to the typography of the site than I have in the past. Here are a few examples of some of the typographic choices I have made:

• An Unordered List
• Lists now have hanging bullets, neat!

“ I have also added hanging quotes on blockquote elements. Much better looking than before! ”

David Rapson — Design Sandwich

The one typographic point that I am not yet happy with is my sites baseline grid. Because I would prefer the text to scale smoothly as the the text size increases I have declared the line-height in em’s. This unfortunately makes for some really ugly looking values, particularly for headings, so for the time being I am using the generic value of 0.5em for the headings which seems to give a reasonable amount of spacing — but it’s not quite perfect, which annoys me.

Note: Since writing this I have experimented more with em based baseline grids and I think I’m making some headway with it. Sill not perfect by any means but getting closer.

The More They Stay The Same

Despite the changes I have mentioned the overall feel of the site has stayed the same, which is why I am calling this redesign an evolution and also why I am calling this version 2.1. So with that said, I hope you enjoy version 2.1 of Design Sandwich.

I am attempting to build a small content managment system, nothing on any grand scale, just something to help me learn PHP a little bit better. Things are starting to make some progress now but it could be a few more weeks before I have anything substantial to say about it.

It is probably quite strange for a person to get exited about a software update but many of us do, and earlier this week I was one of those people. That’s right, Coda 1.5 was released!

For the uninitiated Coda is an app for Mac OS X billed as “One window web-development”. Just think of it as Dreamweaver only done right.

For those of you who already run Coda then you don’t need me to tell you what’s so good about this update, but for everyone else here is a quick overview of the good, the bad & the ugly in this update.

The Good

Subversion

For me this is probably the most important update to Coda. Now I am fairly new to version control but I’ve been using it recently for some smaller projects and it has been working really well. Subversion is by far the most popular version control system at the moment and it’s the one I’ve been using locally. This was a much requested feature and it’s really encouraging to see a developer truly listening to their users.

Custom Books

The books feature was cool before, but not quite as useful as it could have been. Well they’ve fixed that in 1.5 as you can now add web pages as books which means you can link to whatever documentation you require from within coda. The only downside is that you can’t include local PDF files, unless I’m missing a trick here?

The Bad

Subversion

Wait, this is a good thing right? Well, yes but it could be better. For one thing you can seemingly only manage subversion files locally and it would be nice if it would recognise files checked out via the built in terminal rather than having to use the GUI. I guess that as I prefer to use the command line why do I need a GUI, but TextMate has similar functionality and I find that really easy to use – which leads me on to my next point.

It’s no TextMate

OK, so it’s not really fair to compare Coda to TextMate as TextMate is meant for all types of programming not just web development and serves a slightly different purpose. Saying this I use them for almost the same thing, TextMate for development and Coda for managing live sites, it would just be nice if coda was a bit better at just working on a local machine without the need of an accompanying live version. Oh well I own both anyway and I am not in any rush to stop using TextMate, so it’s no real issue.

The Ugly

The good news is that despite a few niggles here and there there is nothing truly ugly about this update or about coda in general and as long as the guys & gals at panic continue releasing updates which accurately address users needs then they should do well. Oh and keep the updates free guys.

The letterpress cards I mentioned in a previous post arrived today. I have absolutely no idea what I’m going to do with them yet but it’s cool to see what Lauren has been up to.

It’s always nice to get goodies in the post, especially when someone has gone to the trouble of shipping them from across the pond — or across any pond for that matter — so many thanks once again Lauren.

I’m quite interested to see what she’s been up to on her letterpress course.

I will post pictures when it arrives.

Basic Small Caps

In essence, the only thing you need to do to transform all of your headings to small-caps is to use the following line of CSS:

h1,h2,h3,h4,h5,h6 { font-variant:small-caps };

But if the heading is written with the normal capitalisation – e.g. A Heading – you would see the following:

A Heading

A Better Method

So does this mean that you have to make sure ALL the headings are written only in small-caps? And what happens if you want to change it back to normal capitalisation.
Well today I discovered this little trick to ensure that text is displayed in pure small-caps:

css_selector {
text-transform:lowercase;
font-variant:small-caps;
}

Now even if you type a heading as ‘A HeAdINg’ it will still output correctly as small-caps

A HeAdINg

Final Thoughts

Now you can just enter all your headings using whatever default formatting you prefer & CSS will transform the headings in to pure small-caps.

What’s more if I ever want to change the way the headings are presented I can just change or remove the CSS.

N.B. It is important to note that not all typefaces have a true small-caps weight, so often the letters will just render as smaller capitals, however this can still look quite nice depending on the typeface used.

As you can see one of my cats was equally excited, which seemed quite fitting – if you are familiar with Murakami that is.

All I can say is that 2009 is set to be my most organised year yet, which is good because it is also the final year of my degree.

I know the site only went live about a fortnight ago but I have decided that  because the design just wasn’t ‘me’ enough, and also because the cms it was running on is just not ready for public consumption I have decided to move over to wordpress and give the site a bit of a make-over whilst I’m at it.

I hope you enjoy the new look