Interview with Matt Hamm

Some time last year I interviewed Matt Hamm as I was impressed with his web design and illustration skills. At the time I was writing for an online design magazine which unfortunately didn’t progress into anything so the interview was ditched along with the blog. Recently however, Matt has re-visited my questions and has updated them based on his current work. Here it is, finally, published for all to see.

Thank you for taking time out to answer some questions Matt.  Firstly please tell us what you are up to right now design wise?

Matt: Currently I’m building a website for a sheet music download website. Lately I’ve been illustrating more characters for and working on a rather sweet little project called  I have also illustrated a children’s book series recently, which I’m really excited about.

Read More


A quick guide to Google’s new Custom Font API.


CSS Quick Tip #2: @font-face Render Issues?

I was messing with @font-face again (as you do) and noticed that the text rendered slightly differently on different browsers and couldn’t understand why?

It was like the text had a certain level of bold applied to it, even though in my CSS I had specified the font attributes correctly. As a bit of a perfectionist I decided that I wanted it to render the same across all browsers (who wouldn’t?) and not settle for “well it looks ok in X and Y but I’m not too fussed about Z”.

After some digging around I found that all that’s required is a single font attribute that needs to be added to your CSS:

font-style: inherit;

I added this to my reset section of my CSS but if you aren’t using one then add it directly to your text element (h1, h2, p etc) that’s using @font-face.

This may not be a specific fix for all of you but it’s definately a good place to start and you should include it on anything that uses @font-face in the future.


Create a stylish content box using only CSS3

With web designers visual methods being driven more and more by CSS lately and less of a reliance on images, it’s now pretty easy to create neat elements for your site. Here’s an example of a content box based on stylish web trends made possible with, our ever improving friend, CSS3.

There are some slight differences in the syntax between mozilla and webkit browsers, especially for the gradient, but the more you use it the more it becomes second nature. Lets go…

Step 1
We don’t need to show our html markup as it’s just a standard doctype with a div inside the body tag <div id=”container”> and inside this div a <h2> title and some lorem ipsum text inside <p> tags.

First lets start by adding a basic reset and styling for the typography

html, body, div, h1, h2, p { border: 0; margin: 0; padding: 0; }

a { color: #007ae1; }
a:hover { color: #003c6f; }

h2 {
text-align: center; padding-top: 20px; margin-bottom: 10px; font: 24px Georgia; color: #333;

p {
font: 13px Helvetica, Arial; color: #333; padding: 10px 15px 0 15px;

Step 2
In the HTML we created a div with an id of container, all of the below is encased inside #container { }, so lets move on to the fun part of styling it up

Firstly the sizing and positioning:
margin: 30px auto;
width: 250px;
height: 270px;

A subtle border and rounded corners:
border: 1px solid #fff;
border-radius: 10px; /*Fallback for if/when IE supports it*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Then the background colour elements:
We need to declare a fallback colour for IE (we could use a background image for IE users but currently I’m conforming to the “it doesn’t need to look the same in every browser” so for users with supporting browsers, they get a more visually pleasing experience) then apply a linear gradient going from a subtle grey at the top downwards but finishing 15% from the top:background: #ffffff; /*fallback for IE*/
background: -moz-linear-gradient(top, #f1f1f1, #fff 15%);
background: -webkit-gradient(linear, 0 0, 0 15%, from(#f1f1f1), to(#fff));

And lastly the box shadow:

By declaring a 0px distance for the X and Y directions we get a nice shadow all around our box and by using rgba we can alter the alpha channel to drop the opacity to make it more of a subtle effect:box-shadow: 10px 10px 5px #999;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

The end result:

An easy to style content box with CSS3 and not a single image in sight. It also degrades ok for non-supporting browsers (IE!) and is easier to edit at short notice without having to re-slice and upload images. Give it a go on your next build.


Use Google’s Asynchronous Tracking

We all need some kind of analytics for our web projects otherwise it’s like selling a product and not knowing how much profit you’re making.

Google Analytics suits most people as it has a huge range of features and, of course, it’s free.

The issue that has plagued Google Analytics is how (or more specifically where) you placed its tracking code into your html. In a similar way to Twitter, if you use Twitter’s own method of displaying your Tweets on your web page, the two required javascript files that you need to include in your html are always recommended to be placed at the bottom of your markup, just above the closing </body> tag. This is done so that your site can render everything properly and then loads your Tweets last. It makes perfect sense as if there’s an issue with the Twitter feed, it doesn’t hinder your site’s loading time.

The same principle applies to the Google tracking code. As it needs to load a javascript file (ga.js) and sync with Google, this could have an impact on your load time.

Google has a new(ish) code snippet that optimises how browsers load the ga.js file. The syntax is different but the tracking customisations are exactly the same. It allows the code to be placed within your head tags along with any other javascript file links and starts running in the background as soon as the page starts to load. The other obvious advantage is that Google’s tracking beacon will be sent a lot sooner before the user leaves the page.

Overall its a more efficient and semantically better way of using the Google tracking code in your markup. Let’s take a look at how to set it up.

Step 1
Remove the current tracking code from your page (if you have any customisations then copy it to a text file first to be safe).

Step 2
Go and grab the new code snippet: and paste into the bottom of your <head> section. Then get your unique web property ID (this is shown when you first log into your analytics account and is a code which looks like “UA-1234567-1”) and paste it in place of “UA-XXXXXXX-X”.

Step 3
Place any customisations back in using the asynchronous syntax (check the usage guide here: and you’re good to go!

Migrating to the new tracking code is quick and easy and will provide another tool in increasing your site’s load time and also pushing your analytics accuracy up a notch.