These new pastures also happen to be somewhat familiar as it turns out I’m going to be spending a lot more time in the study of the flat I already inhabit.

I’m going freelance, flying solo, founding a company, starting a business, or however else you like to phrase the risky exchange of a consistent salary in favour of more creative freedom.

Why?

Mainly, I’m a control freak.

I really like the idea of having control of every aspect of a project, and the business as a whole.

Being in control of my own destiny means I can really focus on what’s important. One example: I’ll be moving from 100% PHP to a mix of PHP and Ruby on Rails before making the switch to Rails entirely. I’ve been wanting to do it for about 3 years anyway, now is the perfect opportunity.

I’ve also had an idea for a Mac/iPhone/iPad application. Over the past six months I’ve been fleshing things out, and am hoping the flexibility of freelance will give me some time to work on it.

Announcement!

So it’s official, Shock is open for business! A small web design and development studio. I’ll be building high quality websites and applications for people who want them.

• URL http://thisisshock.co.uk
• Email hey@thisisshock.co.uk
• Twitter @thisisshock

Got something I might be able to help you with? Get in touch.

I already got some business cards printed, I couldn’t resist.

The clever amongst you are probably already doing this, but it dawned on me recently when I needed to produce a quick sitemap at work.

Usually I reach for OmniGraffle, then spend the next two hours getting increasingly frustrated because it doesn’t do what I want.

It’s not fair of me to blame the tool¹ but I can blame my inexperience with it.

I remembered a blog post I had seen ages ago, and after a little time spent with Google I found just what I needed.

SlickMap is a clever little CSS file that takes semantic HTML lists and turns them into great looking sitemaps.

It took a few tweaks to the CSS but within half an hour I had finished the sitemap. It was quick because I know HTML and CSS really well, much better than I know any other tools.

Web Based Documents

The next example of this occurred the other day. I needed to produce a work proposal for a possible client.

Usually I would use Pages, because it’s designed for making documents. It makes sense, but I still end up wasting time floundering with something I don’t know well enough.

This time I decided HTML and CSS were the right tools for the job. Instead of messing with header styles I wrote semantic HTML and then styled it with consistent CSS. It does the job a Pages document would.

The type is set to a baseline grid, the document is viewable on mobile devices, it has a “clickable” table of contents and I can even see how many people have looked at it using Google Analytics.

These are bonuses, things that wouldn’t be possible with a normal document, but I get for free, by using the tools I know. It’s also going to be easy for the client to pass this single link around. It’s got a good looking print version and a link to a PDF version so hopefully everyone will get a better experience from it.

The Bigger Picture

We spend a lot of time thinking about the web and how to provide the best possible user experience.

Just recently I have also been thinking about how to provide a fantastic customer experience.

It’s becoming clear that we all need to take advantage of the web, and our knowledge of the former to improve the latter. Customers are users too.

The example he uses is the OSX Calculator.app which mimics a real-life object almost exactly. By definition then, it is also not as good as a piece of software designed without those limitations.

In this case the opposite is Soulver, a clear and simple application that does calculation in an almost perfect manner. I had never heard of it but now can’t get enough.

The post really got me thinking about taking software interactions and distilling them down into their purest form. There is no need to press “physical” buttons on the computer screen when I have real keyboard buttons right at my fingertips.

At this point I assume that a single keyboard button press is more “pure” than a mouse triggered action. A key-press which leads to an instant action is far superior to a mouse requires panning, pointing and then clicking. Cumbersome in comparison.¹

TODO

One of the examples I’ve been thinking about is creating a new “thing”, for instance a new row in a table based system or list.

The abundance of GTD applications means there are actually three different examples of this in the wild. In all cases there is also a mouse based button to trigger but here I’m more concerned with the keyboard.

Things

Lagging behind the other two applications, Things requires the classic command-N (⌘N) to add a new todo. Although it sticks to the convention laid out by Apple it does require a slightly awkward stretch to do it with one hand. Hitting return (↩) will confirm the new todo but hitting it a second time will only select the existing todo for editing.

The Hit List

Half way between both, The Hit List uses return (↩) for creating a new todo. Where it acts strangely is that you need an additional return to confirm the first and then create a second. Adding multiple actions in a row results in an odd double return pattern.

OmniFocus

Finally, we have OmniFocus return (↩) creates a new todo. Each strike of return gets you another. It’s as simple as starting a new line in a text document. It’s the lowest barrier to entry and it works exactly as you would expect.

TADA

It’s pretty obvious from the design of all three apps that a lot of thought went into each individual action, but it’s also clear that we need to reduce ever interaction down to its most basic form.

As designers we need to make sure that our users can get the most done with the least amount of effort. Keystrokes matter, lets keep them to a minimum.

Once I had finished sixth form I spent a few months dossing, skating and wasting money. By the end of it I was in desperate need of a job.

I was lucky enough to have already figured out what I wanted to do, and it was just a case of finding a suitable position. I sent out a lot of letters to local web companies which all amounted to nothing but after a few more weeks of waiting I spied a small advert in a local paper, responded and lined up an interview.

Equipped with a portfolio CD created in Director MX, and a hastily prepared HTML version in case, heaven forbid, they ran Macs, I attended Binamic HQ for what would be the second interview of my life.

Suffice to say, it must have gone alright as shortly after I had a call from Martin offering me the job I had been dreaming of: Junior Web Designer at a small web agency.

Developments

Binamic has been a great learning atmosphere. Having the ability to try new things, push things further and experiment means a massive amount, and the fact that I was able to do it at work meant that personal growth wasn’t left as an after hours activity, it was part of our success.

We all had the chance to work on a vast variety of projects, and develop our own styles of coding, designing and developing. I joined as a designer and will leave as a well-rounded web craftsman, with knowledge of all aspects of building a websites.

I changed from a PC-using Flash-fanboy to a Mac-based standards-loving loon. I don’t think it would have been possible if Binamic wasn’t moving forward. We didn’t stand still, we kept progressing.

The End

Now it seems, is the right time to leave. It’s been a blast. I’ve spent the past 5 years doing what I love, with people I like and getting paid for the privilege. There’s little more I could ask for.

Martin, Lisa, Tim, Peter¹ and Judy. It’s been awesome. Awesome.

What Next?

Well, I have a (not particularly cunning) plan. It’s also not totally formed yet, but I’ll be able to talk about it soon.

Over the years I have amassed a fair collection which is now stored completely digitally and continues to grow as I discover new records.

I’m showing it off over there in the right hand column, isn’t it pretty? You should probably ogle over it at full size.

Vital Statistics

Currently clocking in at 8.7 days worth of audio. Spread over 296 albums and taking up 14.52GB of hard drive space. It’s backed up via Time Machine and online to BackBlaze¹.

Play List

My collection is built using a Smart Playlist in iTunes. Although it already has a music section it’s far too broad and can include all manner of media. Instead I had to put together a rather hotchpotch set of rules to filter out all the noise. You can see it on Flickr if you’re interested in how it works.

Album Art

You might be able to tell from the screenshot, I am a little nutty when it comes to album artwork. I systematically went through and ensured every single album has artwork. iTunes already does a good job with this, but where the album wasn’t in the database I had to trawl the internet for suitable artwork, when I couldn’t find any I made it myself.

Stolen Sounds

I purchased the majority of music in my collection, since 2007 I have spent almost £1000 in the iTunes store. Before then all the music I owned was on CD. Some of the music you see here was borrowed from friends and family, ripped and returned.

There are also roughly five albums that were acquired illegally via Bit Torrent. This is always a last resort, for when I can’t purchase the record online or on the high street, and when that has been the case for a long while. Others were already completely out of print. This is not justification for breaking the law, but it is the truth.

Recommend a Record

I’m always on the look out for new music, and I always like to broaden my horizons. Although not everything is to my tastes I like to think I am open to pretty much anything.

With this in mind, if you have the time take a quick glance at my collection, see what I’m missing and suggest something fresh for me to check out in the comments. Go ahead and post up your own collection somewhere and I will do the same.

Hopefully with your help I can expand my collection even further and take my musical tastes in new and interesting directions.

At work, I simply don’t have that luxury, but here on my own personal project anything goes, so it was totally reasonable to ignore a whole range of browsers. As it turns out, only 10% of the first months users were using Internet Explorer, though that subset of visitors does have the highest bounce rate.

Here’s what the site looked like in Internet Explorer 6 prior to making any changes. I think you’ll agree, not pretty. No wonder IE users didn’t stick around.

VMWare Fusion

During my current development workflow I use MAMP locally on my Mac and then use Capistrano to deploy changes to the production server. I also use VMware Fusion to test IE, I have three virtual machines, one each for IE6, IE7 and IE8.

By default, VMware instances can’t “see” the MAMP server so I had a look around and followed most of this handy tutorial by Sean Sperte. Although the setup hasn’t killed anything yet it has made testing IE a cinch.

HTML5

Internet Explorer does not play nice with any of the new HTML5 semantic elements, which means that any CSS rules applied to them will be ignored. Thankfully this has already been solved by a number of clever people and I went for the aptly named HTML5 Enabling Script put together by Remy Sharp.

In one hit this solved most of the problems, so I only had a little bit of tidying up todo. Unfortunately this solution is only going to work if Javascript is enabled but it’s a small price to pay if I am still having fun.

IE Only CSS

I went with a single IE only CSS file served using a <!--[if IE]> conditional comment. Below are some highlights, if you can call them that.

rgba

I used a lot of rgba() in this design as it meant I could create borders quickly and easily without having to dip into Photoshop to pick colours.

One quirk I did notice is that rgba() seems to affect border definitions which use the short-hand syntax and means you can’t override them with another short-hand definition. The only place I needed to work around this was on the standard anchor styling, so I had to fall back to the long hand.

Drew wrote previously about using rgba so go and have a read if you want to learn more.

Canvas Background

For the time being Internet Explorer is getting a simple display:none on the div that holds the abstract Processing.js canvas.

PNG

The design uses transparent PNG files in a couple of places, but it was pretty trivial to recreate them as GIFs and serve them to IE6 using the trusty * html hack.

Jumping

The bane of my IE life, I seem to have a knack for creating rendering issues that seem to snap into place when you roll over a link in Internet Explorer. The cousin of the IE/Win Guillotine Bug, these jumps don’t cut off any content but to shift and redraw when a :hover occurs.

Fixing these problems usually requires a lot of trial and error, and some patented “crazy debugging background colours and borders”.

Result

You can see the full IE Only CSS file if you want to have a closer look at what I needed to tweak, it’s vaguely commented and if you have any questions fire away in the comments.

After only a couple of hours the site is now looking pretty reasonable.

Finally

My initial intention was to go through and fix every little thing, redefine every rgba() colour, sort every little bug and get it perfect, even in Internet Explorer.

But then I thought, do websites need to look exactly the same in every browser?

Exactly.

I’ve included links to their MySpace pages¹ websites and Twitter accounts so please be sure to go and have a look and listen if these are bands you haven’t heard of before. If only have time for one though, make sure it’s Sound of Rum, they are something a little bit special.

Time Passes…

A few days later I was plugging through my feeds in Fever, as usual I found something that looked pretty interesting and clicked through to the site to read it.

Once I was there I read the first paragraph, part of the second, skimmed the next couple, glanced at the comments, closed the site and returned to Fever.

Then I realised the problem.

The Problem

It’s already a given that people don’t read on The Internets, there’s so much information available it becomes more efficient to absorb the content from multiple places than it is to sweat the details of one particular blog post or article.

I spend days stressing over the navigation and flow of websites. A user needs to be able to find what they need, get to it, consume it and move on. Heaven forbid they stop and take the time to actually read and enjoy the content.

Blue Sky Solutioneering

My proposal, and something that I think will compliment Project52 perfectly is to make sure I read, and I mean really read at least one blog post a week, for a year.

I’ll update this post every week, with a single post or article which I have read, savoured and enjoyed, and then maybe you can go and read it too.

1. Week 1

   The Complete Pride And Falls

2. Week 2

   Redesigning Portal: Valve’s Artist Speaks

3. Week 3

   The iPad Launch

4. Week 4

   A Case for Space

5. Week 5

   Hostages Rescued by Courageous Racist

6. Week 6

   The scariest pricing idea ever. That works.

7. Week 7

   Should Website Budgets be Required Info

8. Week 8

   Back In

I’ve got mixed feelings about this reboot. It gives us all a second chance and hopefully the website is going to be in a much better position to keep track of everyone’s progress.

Although totally optional, it feels like anyone who has already started needs to start again in order to get the most from the project.

It was probably a pretty tough decision to make but I’m hoping a fresh start is going to help the movement. It will be a real shame if it ends up hurting it instead.

You can consider my previous posts a little bonus.

Once again, I’ll update this list every time I publish a new post. Keeping track of my progress as the weeks and months go by…

And please wish me luck, I’m still going to need it.

1. Week 1

   Read52

2. Week 2

   Gigged

3. Week 3

   Now for Internet Explorer

4. Week 4

   Collection

5. Week 5

   Bye Bye Binamic

6. Week 6

   Minimal Interactions

7. Week 7

   The Web Tools You Know

8. Week 8

   This is Shock

I want to delve deeper into the overall design of this site at some point in the near future but first it makes sense to look at the backbone of the design, the grid.

Process

Usually I start a design by creating a wireframe and basic grid, and then building on top of that framework. I very rarely have to revisit the grid once I get started.

With this site there was a definite push and pull between the design and the supporting grid. On several occasions I got to a point in the design where the grid wasn’t working so I had to scrap it, recalculate and try again. One of the outcomes of this constant tweaking was the removal of gutters between columns – they where making it more difficult to create new elements that fitted well so they had to go.

The refinement of the grid eventually paid off, once everything settled down and I got comfortable with the constraints that the grid enforced. New elements would almost design themselves.

Most of the vault went that way, the grid literally told me where everything should be, the numbers confirmed it and once everything was in it all looked right.

Vital Stats

The final (all important) numbers:

• Total Grid Width: 960px
• Base Unit: 6px
• Margin: 12px
• Baseline: 24px (with a 12px offset rhythm where required)
• Column Width: 48px
• Column Count: 20

#grid

Throughout development I used the wonderful #grid to ensure everything was adhering to the grid. It’s an invaluable tool, particularly useful when typesetting to a baseline grid where you need to ensure every element is keeping rhythm.

#grid is still installed, so you can use the following keyboard commands to take a look at the grid for yourself:

Structure

As you will hopefully see below I chose a non-symmetrical three column grid which suited the content and the overall aesthetic I was aiming for.

1. Columns 1–5: Header Content
2. Columns 7–16: Main Content
3. Columns 18–20: Additional/Meta Content

Column numbers go from left to right, 1–20. Columns 6 & 17 are left blank to act as gutters.

The Reveal

The logo overhangs into the eighth column whilst the navigation above it begins in the sixth column. This is the only place in the core layout where an element breaks the grid.

The two column indent from the logo is repeated in the content area using paragraph indents and over-lines. Together they help to strengthen the relationship between the header and content area.

Although small, the three column sidebar has just enough room to fit some important post meta data and repeats the double column width yet again.

The Critical Zero logo mark anchors the left hand side of the footer whilst the main content starts in the third column, once again mirroring the two column spacing. The footer also reveals the twelve pixel margin which surrounds the whole site.

See for Yourself

I created an alternate colour scheme to produce the above example which makes the grid layout even more apparent. You can view any page in this style by adding ?grid to the end of the page URL in your browser. Here’s the homepage, for example.