Web Design — David Hughes

15 March 2012

Redesign

I’ve been looking for a new theme for my blog for months, and found nothing that matched my fairly simple, yet exacting, requirements, so I thought I’d try and build my own.

Now given my rather patchy knowledge of HTML and CSS, and my non-existent knowledge of WordPress I knew this would be tricky – but I didn’t realise quite how tricky.

I tend to read most websites and articles using either Reeder or Instapaper, and that clean, typographically focussed style was what I wanted to realise for my theme.

I started building an HTML prototype and quickly found a number of errm ‘gaps’ in my coding knowledge. My good friend, great designer, and all round splendid chap Richard Wiggins very patiently helped me fill those gaps and get my prototype to the stage where it was time to make it into a WordPress theme.

Ahhh WordPress.

It’s fair to say I had rather underestimated what would be involved in making my design into a WordPress theme. “I just have to drop a few tags into the right place” I thought to myself. If only it was that easy.

WordPress does have some simple standard tags and elements you can use within a theme, but all are completely non-customisable, and in many places rather bloody stupid. All of the documentation on WordPress.org assumes a much higher level of knowledge than I possess, and again is limited and full of gaps.

All of which led to many moments of despair and pathetic whimpering. But, slowly, and surely I bent WordPress to my will and finally emerged victorious.

Having conquered the beast that is WordPress it was time to revisit the design which still wasn’t quite ‘right’. It was the selection of the wonderful Meta typeface family that finally made it work; specifically the combination of Meta Web Pro for the body and Meta Condensed for the headings.

It was great fun working remotely with Richard whose IM messages of “Make it blue! Make it blue!” transformed key elements of the design. Of course it was even more fun working over a beer or several in his local pub; beer being something I owe Richard rather a lot of now.

Richard then took over and finalised the design adding the real polish including the lovely navigation arrows you see to the sides of your screen, unless you are on an iPhone then they magically appear at the bottom. Which is because Richard also applied his responsive web design magic to my humble design adding yet another layer of shizzle.

If it hadn’t been for Richard’s help and encouragement this redesign would never have seen the light of day. He’s a brilliant designer – hire him NOW.

There are still a few old posts I need to tidy up but I’m very happy to be able to launch my new design.

27 April 2011

More On Responsive Web Design

The response to the new responsiveness of my blog has been really positive, with some nice comments via Twitter.

I was chuffed to bits today to see that my blog has been added to Media Queries; a site collecting the best examples of responsive design from around the web.

I also received my Kindle today, and thought I’d try this site in the ‘experimental’ Kindle browser. I was surprised by how well the browser renders websites, and amazed that it could happily handle media queries reformatting my blog in portrait and landscape views. Cool.

25 April 2011

Responsive Web Design

For months now I’ve been searching for a new theme for my blog. I wanted something simple yet stylish, with great typography, that used textures and colour well, and I quite fancied a retro Americana feel. Above all I really wanted it to be a responsive design.

I’d just about given up looking, and was moaning about it on Twitter, which prompted my friend Prisca Schmarsow to generously offer to work with me to create a bespoke theme for my blog. As we talked through some ideas I stumbled across the Liquorice WordPress theme; a theme which, whilst not perfect, seemed to tick many of the new theme boxes. I decided to see what I could do with Liquorice.

An evening hacking Liquorice around had it pretty much where I wanted it.

It’s a shame that Prisca and I won’t get to work together on a blog theme as we shared some nice ideas I feel, but I hope that when time allows maybe we will.

Within a few days my new theme had been commented on by a good friend who thought it was “more me”, and by my wife who, seeing it over my shoulder, spontaneously said how much she liked it without being asked by her needy husband.

But there was one vital ingredient missing: it wasn’t responsive.

Many of you are probably wondering what all this responsive malarkey is all about, and I can’t blame you as it represents the latest in web design thinking. In simple terms a responsive website is one that responds to the size of screen upon which it is being viewed; changing layout and dimensions to best suit that screen. Responsive design is supported by all modern desktop and smartphone browsers which makes it possible to easily create versions of a site tailored to the smaller screens of iPhones and iPads for example.

Responsive design is new to me, and I thought it was going to be a complicated exercise to retro-fit it to my new blog design. Luckily Liquorice is well coded, and even more luckily a good friend of mine Richard Wiggins of Pixel Creation offered to make my site responsive, and at the same time help me learn how a responsive design is created.

It was a fascinating, illuminating, and fun session; I was surprised by just how little code was required to transform this site. Richard did a superb job.

I’ve known and worked with Richard for over 10 years. He worked at the agency I employed to create the Psion Dacom website whilst I was New Media Manager there. He then left to create his own web design studio Pixel Creation. Richard is a very talented designer and one that is quickly able to transform what I’m thinking of into pixels. I’ve worked with some of the biggest agencies in the world and I choose to work with Richard whenever I can. I can’t recommend him highly enough.

See It In Action…

If you’re reading this on an iPad rotate it to see the site respond to the portrait and landscape views.

If you are on a desktop or laptop make the browser window smaller to see the site respond.

If you are reading this in IE8 or lower I’m sorry. I decided against the hacks required to make it work perfectly in your browsers although it works well in IE8. I highly recommend you move to a modern browser such as Google Chrome or Safari.

Lastly if you are reading this in a RSS reader get your arse over here now to see my new blog design.

8 June 2010

The Future of Web Conferences

In recent years I have been fortunate to be able to attend all of the major web conferences: @Media, Future of Web Apps, Future of Web Design and more. However this year with our credit being crunched, and a new cost conscious employer I’m only able to attend one, and for a varierty of reasons, some sentimental, I’ve chosen to attend @Media later this week.

When Future of Web Design took place a few weeks ago I must admit I started to doubt my choice; the buzz on Twitter was huge and very, very positive. It was oddly fun experiencing the conference vicariously via the Tweets, but it made me wish I was there all the more.

A request via Twitter to ‘crash’ the Future of Web Design party turned into an invitation to have dinner with Jon Hicks which, as is the way with web conferences, turned into dinner with Dan Cederholm, Mike Kus, Aral Balkan, Katie Atkinson and Ryan Carson of Carsonified – the organisers of Future of Web Design. I’d met Dan at @Media a couple of years back so it was good to see him again and it was a huge pleasure to meet Aral and Katie for the first time. This is the one of the many things I love about web conferences; the opportunity to meet your web design heroes who are all friendly, open, modest and very happy to chat.

I made it along to the conference party with Jon, and it was fascinating to watch the attendees with the slight detachment of not being one myself. They were literally buzzing with excitement at the day, the sessions and the chance to meet design greats in the Design Clinics, that were part of the conference, and at the party itself.

Over dinner Ryan talked about the Carsonified conferences, and it was clear that he is committed to creating great conferences that are as affordable as possible. Yes they are a business, but his top priorities are quality and affordability for the attendees. I love that Ryan always builds in great opportunities for socialising and ‘networking’; I feel this aspect of conferences is as valuable as the event itself.

If you can attend Future of Web Design I highly recommend it; I know I’ll be there next year.