Just Beyond The Bridge

How Building My Own Website Nearly Drove Me Insane

Thursday, April 08, 2010

Pigeon-holed in “Web-Design

Sometime, about two months ago, I sent a link out to a couple of people whose opinions I value highly when it comes to design and interaction.

I had asked them for feedback on a nearly complete website. It was so nearly complete that it was perhaps just a click or two away from going live.

That website was my new company portfolio, on which I had been working heavily upon for perhaps four months, through the dark nights of autumn and winter. A huge amount of time had been invested to produce the site that would eventually replace the one I had built in 2006, a site which I had constructed six months before I even decided that web design was going to be my full time career.

I received two emails back. I deliberately had asked my confidants to be blunt and honest (the only worthwhile feedback) and within 12 hours, the entire site was consigned to the trash can.

This should have been traumatic. I had sweated detail after detail. I had included references so subtle that not even a super sleuth could have deciphered all the little tics and nods. The man hours lost, coffees quaffed and headaches endured all suddenly had been worthless. The fact was that the website on the end of that link was bad. Very, very bad.

That’s not to say the site I completed in January didn’t have considerable merits. The code was all HTML5, the CSS was packed full of ‘3’. There were embedded fonts when embedded fonts were still a mystery to most of us, and it was all sitting atop a frothy-light PHP framework that I’d handcoded from scratch. The underlying quality couldn’t have been higher.

About six or seven days ago I launched HiggsDesign.com. I didn’t really tell anyone; it sort of leaked out a few days after, and once a few people knew about it and had said nice things, it seemed the right time to acknowledge it. In fact the whole process of making it public was quite cathartic; like a weight lifting off my shoulders, after perhaps the longest, least pleasant web-design journey I have ever embarked upon.

To put this into context, I realised I needed a new portfolio a very long while ago. I started as a sole trader immediately after I graduated in 2006, then in 2008 the business became limited, and in 2009 I VAT registered the company. Still the website remained identical, and rarely updated.

Ever since I began trading, I’ve used my own name, my own domain and the old website that I knocked together at around the same time I wrote my dissertation.

But for a long time I had yearned for a better representation online. I wanted to drop the ‘Andy’ bit from my monikor for a long while, as I felt it limited what work the company could attract. Not that getting work through the door has been a problem - in fact probably my biggest issue over the past two years has been finding the time to work on personal projects for lack of time to myself. I’ve worked pretty hard, but it’s mainly through personal recommendations that I’ve earned my salt, rarely through freak visitations to my website.

I started the redesign around this time last year. A full 12 months ago now. I iterated quite a bit, but the same core elements remained. I struggled a lot to understand what I wanted, and spent much time debating very minute little details, putting off the big choices. When I think about it now, I was treading water furiously.

The thing is that I’ve since realised is that I was a terrible, terrible client. Of course, I’d read all those articles about making your own website being the hardest thing to do, but surely it wasn’t this difficult last time around?

I genuinely grew more and more frustrated with the project. I’d spend my weekends sat in my favourite coffee shop knocking back mochas and trying to hammer out something that would soothe this itch for resolve. It seemed like the project would never end.

I had quickly formed-up the most important pages in my mind, or at least the most interesting ones. The homepage, the folio and the contact page were all done, one by one they appeared in my browser window.

By the time I had weened myself off perfecting silly little details and moving onto the other serious pages like the about page, those other pages had stood stagnant for what seemed like months.

I struggled to get the tone right. Was this my portfolio, or the business’ portfolio? We, or I?

The battle continued.

In January I went away for a week to Austria with Tim and Stacey for some time snowboarding. The macbook came with me too, and I felt I finally had reached a stage where I was polishing the brass tacks. A good 10 months in the making, here was the final, glorious result. I was pretty much ready to launch, I thought.

When I received the first of the two replies to the emails I had sent, I wasn’t surprised. There seemed to be a lot of criticism. I took it pretty well I thought. Perhaps even a little too easily. I mean, I often challenge my clients when they request changes to the work I present to them (it improves the end result by a mile), and often defend my corner. With this, I didn’t feel like I could argue back. I agreed with everything that was said.

The observations were all true. The navigation was muddled. The copy was repetitive and inconsistent. The styling was over the top, and what was meant to be elegant had become kitsch. I’d really screwed up.

I felt nothing. By all accounts I should have had my heckles up, been annoyed, upset, angry, or at least felt something. But I realised by the time that I had read the second email, that this was a profound mistake with the project . It took a few hours to digest my emotionless stage and why I wasn’t surprised or angry, but I quickly realised that I had simply deluded myself that spending time on it meant that the end result would be good. By this stage, in my heart of hearts, I now knew that the whole thing needed to be reset.

I will say, I don’t believe this was in anyway ordinary. I had commissioned myself to work on a hyper-personal project that needed to resolve a number of incredibly complex business issues I had accrued over a four year period.

My mistake most likely had been working in pure isolation. Bar the odd look-in, I was the only person who had ever seen the site, and perhaps those who had seen it hadn’t had the heart to criticise earlier when they saw I had been working so vigourously at it.

The thing is, I have built up fantastic methods for working with my clients over the years. It allows me to get inside their business or organisation and produce website that they are truly pleased with. I work with them closely and we plan, iterate and resolve. But here, I had used none of these tools. I don’t think I planned anything really.

The whole thing had formed like some organic mutant. The core had been fired months ago, but some of the most important elements had been relegated to final-minute half-assed compromises in order to get the thing complete before I lost the remainder of my sanity.

So after thinking about my lack of emotional attachment (and taking that as a warning sign that something was totally awry) I consigned it all to the trash and started over.

That was two months ago. I quickly started over, and this time I took input from day one. My coffee people have still been doing a roaring trade, but for the past eight weeks or so my vigour has been tempered by planning the whole thing out before I moved to code.

Some things have changed since then - of course they have - but that initial plan, plus the assistance of some trusted council, really focussed the objectives of the project and I progressed quickly and efficiently.

Of course things could always do with improvement. Before I launched the new site, I felt the thing lacked the beauty and complexity of the original version, but I don’t have to dwell long to think of every mistake and wrong turn that made up that last attempt. This is so much better.

Perhaps the most salient of all lessons learned from this experience was that I shall never attempt my own projects again without taking feedback and criticism from the start. Where in my professional relationships with clients I actively consult anyone and everyone, I managed to isolate myself here in some trance-like way, and it proves that that method had nothing but a detrimental effect on the project.

I am not dispondant about the time i spent working on the dead site, nor do I regret building it. Of any project I have worked on in the past four years, it is the single greatest leap forward in my knowledge of the use of the technologies we work with. The underlying framework of that site became the underlying framework of the new site. The HTML5 and structure have become foundation stones for a whole construct of new techniques that I have become expert in. It has had a truly profound impact on all my work over the past two months.

Today marks the 6th year since I posted the first message on this blog. Since then my career has progressed a long way, and oddly enough, this project has taken up a large part of that time. But I’m so pleased with the result, and the affirmation I have had has only strengthened my resolve to continue building websites and improving my techniques.

A couple of days ago Si (@Si) and I spent a few hours in a mobile workshop with Dan Rubin (@danrubin).

During the break Si and I discussed a few updates we’d like to make on our Formula One season calendar, F1Calendar.com, and try out some of the new stuff we’d learnt. Over the past day or so, I’ve spent a little time making some minor (purely iPhone/iPod Touch/iPad) improvements for those who want to use them.

However we struck a problem when saving the site to the homescreen. I’d noticed that by default, Apple handhelds use the full page title to label the icon it creates - very good for search engines, bad for users of the iPhone. As a user, it can be very fiddly to shorten it down.

I couldn’t find anything on Google (though I didn’t look too hard), but it occurred to me that back in the bad old days, it was entirely normal to see horrific animations going on in the title bar, and wondered if a bit of JS couldn’t do the job of shortening it down for mobile users - and indeed it can.

One line of code that sniffs the user agent can alter the page title. It doesn’t affect desktop browsing users or people on other mobile devices, but just is a nice touch for the users of Apple touch devices.

<script type="text/javascript">
  if( navigator.userAgent.match(/iPhone/i) || 
      navigator.userAgent.match(/iPod/i) || 
      navigator.userAgent.match(/iPad/i)
    ) {
         document.title = "F1 Calendar";
      }
</script>

Schimples. (There was an earlier error in this code - some extra parenthesis - this has now been rectified.)

I’ve guessed the iPad string there; if that’s wrong let me know, but the other two will work for sure. A nice touch for any site you imagine will be used this way.

And so now, when you visit F1 Calendar on your iPhone, not only will you get a better handheld experience than before, you’ll also have a nice, short title to use immediately, whilst it won’t compromise the search engine performance.

Try adding F1Calendar.com to your homescreen and see the result.

Update: You might want to use this alternative version for a more robust future-proof version (basing the search on the browser rather than the device). It depends on your application. (Thanks Edd)

<script type="text/javascript">
  if( navigator.userAgent.match(/Mobile/i) && 
      navigator.userAgent.match(/Safari/i)
    ) {
         document.title = "F1 Calendar";
      }
</script>

This is Just Beyond The Bridge

Something About Me

Called Andy, I am passionate about design, love to travel, and have a knack for all things digital. This is the full story…

April 2010
M T W T F S S
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

More Stuff

Back Catalogue

  1. Apr ‘10
  2. Jan ‘10
  3. Oct ‘09
  4. Sep ‘09
  5. Aug ‘09
  6. Jul ‘09
  7. Jun ‘09
  8. Apr ‘09
  9. Mar ‘09
  10. Feb ‘09
  11. Jan ‘09
  12. Dec ‘08
  13. Nov ‘08
  14. Oct ‘08
  15. Sep ‘08
  16. Aug ‘08
  17. Jul ‘08
  18. Jun ‘08
  19. May ‘08
  20. Apr ‘08
  21. Mar ‘08
  22. Feb ‘08
  23. Jan ‘08
  24. Dec ‘07
  25. Nov ‘07
  26. Oct ‘07
  27. Sep ‘07
  28. Aug ‘07
  29. Jul ‘07
  30. Jun ‘07
  31. May ‘07
  32. Apr ‘07
  33. Mar ‘07
  34. Feb ‘07
  35. Jan ‘07
  36. Dec ‘06
  37. Nov ‘06
  38. Oct ‘06
  39. Sep ‘06
  40. Aug ‘06
  41. Jul ‘06
  42. Jun ‘06
  43. May ‘06
  44. Apr ‘06
  45. Mar ‘06
  46. Feb ‘06
  47. Jan ‘06
  48. Dec ‘05
  49. Nov ‘05
  50. Oct ‘05
  51. Sep ‘05
  52. Aug ‘05
  53. Jul ‘05
  54. Jun ‘05
  55. May ‘05
  56. Apr ‘05
  57. All Archives

Search