Skin of Stars

Hey all, just a quick one today. I just had a job interview and I was asked the question “which design websites do I frequent”? I ummed and erred a little before mentioning Digg and Slashdot. Not very design focused I know (except maybe Digg’s design section). I also said that I trawl the blogs for Ideas, which is true. I neglected to mention one of my favourite sites though, one which each and every one of you should have in your Feed Reader: A List Apart. I love that site and I felt a little ashamed for forgetting it, so as penance I am reminding you all to check it out.

Hey All,

Just thought I would tell you all about a new site that I’ve created for homework. It’s for an Oxford based band called Branch Immersion, a three piece acoustic outfit, some friends of mine. The site is hosted on the uni servers at the moment but I expect we’ll host it here at SkinOfStars towers soon enough once they’ve bought their domain name and I’ve ported the static pages to WordPress.

This is an original design and I must be honest, one I am very proud of. Please check it out at the temporary address (I’ll update with the final address later):

http://wwwusers.brookes.ac.uk/06021836/u75131

http://skinofstars.com/branch_immersion

Hey All,

I’ve decided to do a blog hack in a day and here you see the result. I was struggling with Drupal as a blogging platform, and frankly an anything platform, so I decided to move to the decidedly easier WordPress. I’m not saying there is anything wrong with Drupal, it’s a great platform. The problem is that it’s built for so many tricks that you have to give it a real shove when you want something simple. For example, handling images. On a content sytem one would have thought that would be an obvious feature, but with drupal you have to go get a plugin. Madness I tell you! Not that getting WordPress means I’ll be bloggin frantically, but it makes life a lot easier.

So here is how I got from Drupal 6 to WordPress 2.7 in a day:

1. Backup the Drupal database & import the data into WordPress

Moving around between platforms is quite common, so you’ll often find a script to aid you in moving database info from one structure to another. WordPress has many such scripts built in for many platforms, but for Drupal I got my assistance from Mike Smullin. I had to make some minor changes, for example I added this SQL statement to change my Drupal post_type ‘story’ to WordPress’s ‘post’

UPDATE wp_posts SET post_type = REPLACE(post_type,’story’,’post’);

Pretty easy stuff really. If you’re going to do it yourself, make sure you do it locally on backup copies. I hosed a few before I got it right.

2.Theme Hack

Ahh yes, the inevitable theme quandry. I had thought about what I wanted Skinofstars.com to look like for a while, but I wanted to do it reasonably quickly as I hate it when these things hang around. My layout plan was simple enough. Only one or two blog posts on the front page with info on my other nettyness, like tweets. I also knew that I’d want access to other pages (as you find in the Further section.. not sure on that name). So I searched some WordPress themes and came across Grid Focus. It seemed to have the right level of minimalism that I was looking for as well as reasonably suitable layout. In order for it to work for me though I had to make a few hacks including some JQuery magic to include my further section (hope you like the transitions) and some layout hacks for the differences between a narrow and wide content column (you’ll see if you view this in single/comments mode).

3. Content Update

Probably one of the most time consuming parts. Much of my old content was Uncategorised for no reason and lacked any tags. Many posts from back in the Blogger days didn’t even have a title. I went through almost all of them (I’ve taken a break from the 1996 stuff) and finally managed to put these years of outpourings into some kind of order.

4. Update to server

Well, that’s just a bit of FTP and MySQL. Job done.

I’ve been looking at some interesting research regarding the manner in which users read web pages. I’d come across click mapping previously (links below), software that records where users click, but the Nielsen Norman Group’s eye tracking study follows where users actually look. Though their study tends to focus on commerce aspects (how much do users look at your adverts?) it is also fascinating stuff for those of us wanting to create clean and clear designs.

First thing that’s worth noting, users rarely spend time looking where you want them to. They tend to follow common patterns, the most notable being the F pattern (a couple of quick horizontal scans of the page as we head down it). This means it is for us, the designer, to be aware of this and place our most important content in these areas. One might argue that a regular visitor would know where the most important information on a site is held, yet anyone with any sense knows that we want to make a site clear for everyone.

Now for banners and adverts/promotions. I’m not going to say how to get people to read them (in fact, I’d recommend getting AdBlock Plus to just cleans the web of them!), but if you want to ensure people read all information on your page then make sure that it doesn’t look like an advert. Users have an automatic tendency to ignore anything that looks like a promotion.

Next up I’ll point to Nielson’s study on how pages are read. The key point is that people don’t read, they scan. If you want to make life easy then you could put important anchor words in bold to aids the reader down the route you’d like them to take. When you’re marking this up in HMTL consider whether you should use the ‘b’ or the ‘strong’ tags. Are you merely creating a visual guide (b/i) or do you want to emphasise a word (strong/em)?

The final point I’ll pick up from Nielson is his discussion on screen sizes. Nothing surprising here, most people use 1024×768, that’s a laptop widescreen. One thing I’d like to add to is the misconception that laying out a web page is like laying out for a newspaper or a magazine. Screen sizes and resolutions are not fixed, there is no ‘above the fold’, like we find in newspapers. Even different choices of preferred system fonts or different browsers have an impact on where the cut-off will be on different machines. Interestingly, Neilson does point towards making site layouts fluid for different. Though I don’t consider this such a hard n’ fast rule, I’d like to point you CSS monkey’s 456 Berea St’s article on elastic layouts.

That’s it for this week folks. Happy building.

Some further linkage:

* A wordpress clickmap: http://www.rogerstringer.com/projects/wpclickmap

* A more general use clickmap using PHP and JQuery: http://css-tricks.com/tracking-clicks-building-a-clickmap-with-php-and-jquery/

* Strong or Bold? http://www.think-ink.net/html/bold.htm