At the Future of Web Design conference earlier this month, I was inspired.  As a developer primarily and a designer when I have to be, the talks and people at FOWD were perhaps more valuable to me than if my main focus was on design.  I don't need inspiration to develop, but I do to design.

But an incredibly busy week and a bit later, I find I haven't had an opportunity to really make use of the ideas that were triggered at the conference; not only that, but the inspiration is beginning to fade.  And I will struggle to find time to watch the talk videos over the next few weeks.

I had intended to shove together a new portfolio site, to match my shiny new business cards, before the first day of FOWD.  Naturally I didn't manage to stick to this deadline, continued to work on the site during the conference, and to this day the redesign remains unfinished at localhost/.  It is so far responsive up to iPad dimensions, but the design that I was initially satisfied with has fallen out of my favour, so I'm struggling to finish.  I've been browsing collections of great web design, like this one, as well as staring agonisingly at localhost/, hoping for re-inspiration.

Turns out I dislike quite a few of the designs on that list.  Some just have too much blank space.  Many go way overboard with the 'Web 2.0' look; glossy buttons, excessive rounded corners, and the like.  Pretty on first glance, perhaps, but after seeing so many sites in the same style, you suddenly realise the genericness of them all; they give an impression of designers who forgot that the purposes of, or the companies behind the sites have their own personalities and branding that can't be represented simply with shiny buttons and background gradients.

I am currently a fan of textured backgrounds, and I'll confess I am currently of the opinion that a text shadow automatically makes almost any header text look better.  I'm sure this will wear off, just like glossy buttons did.  But I'm still struggling to find a style that suits me personally (and matches my business cards).

So far, just writing about it has helped a little, and I think I have enough beginnings of new ideas to push on.  Watch this space.

Their previous version of this particular site was the image from the event poster, with links mapped onto it.  It was mere moments before my progressive enhancement / responsive design OCD kicked in.  The site in question is to advertise this year's University of Lincoln Grad Ball, and is little more than an online poster.  So here goes.

1530
Marked up the page, with HTML5 tags and the content from the poster, using currently non-existent classes where needed, and also including a few non-existant images. Added my own mini CSS reset for the elements I was using.

1545
Cut the couple of images I needed out of the poster png and uploaded them.  Spent a while trying to find something to match the obscure Mac font that had been used on the poster.  Impact was close, but didn't quite cut it at small sizes.  Played with weighting and letter spacing for ages, but eventually picked a font from Google Web Fonts that did the trick and styled all the typography related stuff.

1605
Aligned, padded, margined and weighted everything as I wanted.  Remembered to use a HTML5 enabling script so versions of IE lte8 would actually bother to style things properly.

1625
Took a step back to look at content.  The organisation of it was great for a poster, where you can pretty much see everything at once, but in any scenario where scrolling is a possibility, the most important stuff needs to go at the top.  So I rearranged some things.

1630
Used CSS to hide a couple of elements that would do more harm than good on a device with a small display. Used media queries to show them for displays with a greater width than 480px.  With help for IE, of course.

Nasty, dirty cheating
One of the images I used consisted mostly of text, with a few images plonked around it.  I didn't have the energy to recreate this in a two-column list, especially not with the apparently randomly floating images.  The image is only used for 480px+ of course.  Mobile get a list.  Unfortunately, I just used display:none.  So mobile browsers are still loading the image.  I hate me, too.  But hey, I had an hour.  It's better than the whole site being an image.

READ MORE ABOUT RESPONSIVE DESIGN.

I wrote that in capitals, because it is not a suggestion.

And, if you're University of Lincoln final year student, get your tickets for the Grad Ball, and resize your browser window while you're there.  It's going to be the best one yet, as they say every year.

It doesn't really seem like much when summarised like this, but I do wish I was paid more than £6 an hour.