After nearly 3 years working from home (off and on) I’ve decided that despite how much more productive it made me it also made me a much duller person. The less I worked from home and the more I worked in client offices the more I began to feel depressed at the prospect of working from home when I had to and not seeing or talking to anyone all day. This comic from the Oatmeal fully sums up exactly what it’s like to work from home: both liberating and frightfully dull at the same time.

My new desk space

I’ve put off getting any office/desk space for ages as I’m often only working from home once every couple of months or so and for only 1-2 weeks blocks at a time but for this current project I don’t need to be in the agency’s offices at all for the project duration (8 weeks) so I thought I’d take the plunge.

Advantages

So far I’m absolutely loving it; the office gives me the discipline to start and finish work within normal work hours and not bunk off after lunch and watch too much Come Dine with Me on telly when I fall into a gumption trap.

I’m sharing with other freelance web developers so it means if I’m stuck on a coding problem or a business question I can get their advice and that is really useful.

I can come and go as I please – there’s no expectations for me to sit at the desk during slow times and if I need to take a walk to think about a programming problem I can without a boss thinking I’m a slacker. Essentially, it’s all the advantages of working from home but without any of the crippling loneliness.

Disadvantages

It does have disadvantages too, it costs money (not a lot mind, £10 a day) then I have to think about either making a packed lunch* or buying it from the local shop near the office (again more money). There’s also transport to and from the office – if I can cycle (nice weather permitting) then it’s free otherwise it’s petrol costs/bus tickets which is another few quid a day – basically having this desk space adds £10-£15 to my daily overheads.

But right now, I believe the advantages far outweigh those costs.

Going forwards

Most of my work requires me to work in the offices of digital agencies and it remains to be seen if there will be more lee way from them letting me work from this office as opposed to in in their offices – I guess I’ll jump off that bridge when I come to it.

* To be fair, someone else often makes my packed lunch and for this I am eternally grateful.

Background

I met with mediaburst a couple of months ago and we both decided that the whole site didn’t need to be made mobile; instead just certain aspects of it did. We both agreed that people wouldn’t be likely to want to sign up for mediaburst products via a mobile site rather they’d want to read more about mediaburst via their blog posts and case studies.

Mediaburst also felt that not having a mobile site considering their position as a mobile supplier may look a bit odd so they wanted one to cover that gap. They didn’t feel a mobiles site would get a lot of traffic therefore it needed to be kept simple and within budget.

Content

I think it’s a common myth that people on their mobile phones are in a rush to get stuff done and don’t want to read that much. I spend a lot of time on my phone reading websites when I’m utterly bored e.g. when I’m on the bus or waiting for my girlfriend and in those situations I want content to read.

The homepage of the site leads customers in to read the work and blog posts – hopefully they will read enough of these for them to absorb the mediaburst brand and to get in touch about purchasing products/services from them. It also gives existing customers an easier way to stay in touch with mediaburst – perhaps they’re an existing customer who can’t be bothered to read the blog but when they’re on the train home after work they may feel more open to reading mediaburst blog posts.

Refactoring the design for mobile

StiffRowlands did such a great job branding the original site and creating a mobile version was simple – it was just a case of decided what information was paramount and which information could be cut away.

The idea was very much to keep it simple and to copy, where possible, existing iPhone design ideals such as Back buttons and next/previous arrows in page headers. The Guardian’s iPhone app was a major source of inspiration as I feel it does a great job of making lots of content easy to navigate through.

Separate mobile site vs CSS stylesheet

In a lot of cases, it makes sense to simple add a different CSS stylesheet to create a mobile version of a site – but in this case, the mediaburst.co.uk website is quite heavy; it uses lots of WordPress custom fields and lots of different templates for different pages and I felt that a mobile user should get a much more streamlined site – one that was quicker to download and respond because it was doing less work on the server.

Mobile URLs

The site lives at www.mediaburst.co.uk/m/ and further sections of the site have URLs like:

• mediaburst.co.uk/m/work
• mediaburst.co.uk/m/blog
• mediaburst.co.uk/m/blog/blog-post-slug

The /m/ is a handy way for me to a: keep the site structure simple and b: recognise when WordPress should be showing a mobile themed template. I could have opted for an m.mediaburst.co.uk subdomain but that would have complicated matters further and this was to be a small project with a quick turnaround time.

WordPress set-up

The three main pages: Home, Work and Blog are set-up as normal pages in WordPress (just with a mobile-friendly template) so the client can edit the title and introductory copy. The individual work posts and blog posts are complete copies from the full website blog and case study pages- I didn’t want the client to have to rewrite these posts to make them mobile friendly as it would have meant too much work for them There is a switch in the template that works out if the blog post/case study should be showing the mobile template (worked out by whether the /m/ is in the URL).

There is some jiggery-pokery in the functions.php which checks if the user is running a mobile and if they are it redirects them to the mobile site. At first I wanted to simply show the site with the option for mobile users to switch to the mobile version but mediaburst felt it was best to redirect clients automatically in case they missed the mobile site link.

Project duration

From start to finish this project took 4 days. Including all meetings, design work and client approval. A very fast turnaround time thanks in all to the commitment from both parties to keep the site very simple.

Further reading

Mediaburst wrote more about their new mobile website on their blog.

Background

The original design for stina.co.uk featured a very dark palette which I really liked. However, the client (who also happens to be my girlfriend) admitted she hated it and so I starting to think of concepts that reflected her personality more and made it more obvious she was as an interior designer. One Friday night, whilst eating a curry in Manchester city centre curry house we both noticed the restaurant’s feature wall which was covered in a large flock wallpaper and the idea hit – why not just use a large flock wallpaper for the background.

The idea further developed into the making the website’s design capable of supporting different wallpapers styles. Perhaps there would be a wallpaper or a texture that Stina had used in a recent commercial interior that she wanted to feature. The wallpaper would be linked in the footer of the site allowing people to find it and buy it if they wished.

The site

This simple is as simple as they come. It has a homepage, about page, portfolio, contact page, and a blog. The idea is to keep the site simple and to showcase the work whilst simultaneously ensuring it is obvious to visitors who Stina is and what she does.

CSS3, HTML5, etc

With more browsers supporting CSS3 features it felt like the right thing to do to use CSS3 to layer semi-transparent black and white boxes on top of the colourful background using rgba colours. This way the design would work if the background image was any colour (to an extent anyway).

The design also features the usage of @fontface via Google web fonts and a nicely formatted iPhone version too.

(Part of) The listings page

A little background

The Drum is a leading industry magazine and all the agencies that I’ve worked for subscribe to it – if anything just to see which agencies beat them to a particular pitch. The Drum emailed me a few months ago to say I would be featured but, unfortunately, the publication date kept getting pushed back. Thankfully, last week at long last, the guide came out with the 23rd July issue.

It feels great to be in a guide like this alongside fellow Northern Digitals: Stewart Hamilton-Arrandale, Matt Booth, Ian Hogg and Andy White.

Questions

Along with the listing, the guide featured some of the freelancers answering questions about freelancing. The answers were really interesting and I got a lot out of reading the responses of fellow freelancers to the same questions I had been asked.

(Part of) one of the question pages

Summary

It’s also important not to let things like this go to my head. There are lots of talented freelancers, who aren’t featured in this guide and I can’t honestly say this guide is the most accurate listing if I’ve been featured and they haven’t.

Having said that, it is always nice when a bit of recognition is thrown your way – whether you feel worthy of it or not.

From left to right: Shaun Fensom (MDDA), Malcolm and Gavin from Band on the Wall, Ben and Jon from Cahoona and me

It was great feeling hearing Band on the Wall announced as the winner and a surreal experience getting up on the stage and shaking hands with the presenter Terry Christian. This website was the product of a lot of hard work not just on my part but also from the guys at Cahoona *, everyone involved at Band on the Wall and winning the award feels like recognition that that effort was well spent.

* Big thanks also to Tim Fletcher, the front-end freelancer who came to the rescue towards the end of the project to make sure it got finished!

Everyone on stage - with presenter Terry Christian

This was my second attendance at an awards ceremony (Big Chips 2009 was my first) and I had a great time: ate some truly wonderful food and drank some fabulously free wine (thanks Jon and Ben). If I’m completely honest, winning a Big Chip was something I’ve always coveted since before I was a professional; I saw the awards from afar as a student and always felt that the day I’d won one would be the day I’d finally become a proper web developer.

Cahoona

It’s been a very interesting journey watching Cahoona go from a small agency which very few people had heard of this time last year to one that everyone has heard of now. I think the work they’re producing is of a very high quality and I was glad to see them pick up another award, the Tasty Website award for their own website cahoona.co.uk.

As with most of the many ideas I’ve had, FrontEnders got shelved until one day when I had some free time I decided to go for it. I launched it with a simple tweet ‘Introducing, FrontEnders‘ and I hoped that a few of the other web developers I’d met at Northern Digitals might get a giggle from it but, thankfully, a few more people liked it too.

Unfortunately, too many people liked it and my server ground to a halt. The beautiful design I’d created with the huge map of London in the background and the high quality images of the scenes were killing the server, so cue some optimisation.

Optimising the site

I’d originally saved all the images out at 80% quality but this was giving file sizes which were too big and I felt this was one area where people wouldn’t notice a compromise so I resaved those images as 40% quality and took the file sizes down from an average of 30Kb to 12Kb. I did the same with the large background map image too.

After resaving in Photoshop I then used (the Mac OS X software) imageOptim to strip a few more bytes from the images.

But that still wasn’t enough, so I decided to give Amazon S3 a whirl. For those who haven’t heard of Amazon S3, it’s a service which allows you to host your media on Amazon’s servers for a nominal fee. Amazon S3 documentation makes it seem a lot harder than it is and it took me quite to work out how to:

• set-up the DNS records so I could use subdomains like media.front-enders.com
• upload files to Amazon S3′s ‘buckets’
• change permissions to people could view these files on S3
• log-in to Amazon S3′s management console and find my security credentials

Bizarrely, that last point was the hardest part of all of this.

Thoughts behind the design

My main desire for this design was to keep it simple and therefore quick to build and deploy. I wanted to use a splattering of bleeding-edge CSS3 for the sake of it to try and impress some of the potential audience. Font-face was used for the logo purely to save me time designing a custom logo.

If I’m completely honest, a lot of touches of the design involving CSS3 are extremely self-indulgent and are only there because I felt they’d lead to more people retweeting or linking to the site.

CSS3  used on the site

• Background image that stretches to full width/height of viewport (webkit browsers only)
• @font-face for logo
• rgba used to give certain background colours an opacity
• text-shadow (coupled with rgba) to give text slightly more readability
• CSS transformation/transitions to move the episodes images on hover

Quirky touches

There are some aspects of the design that I wouldn’t dream of putting on a live site such as the rude message that any IE6 users get or the 404 error page that features no useful information. I don’t believe in the ‘hardboiled’ approach of giving IE6 users a crap experience but once again for this non-important site I felt I’d be more likely to get kudos from an audience made up of web developers with this approach.

Statistics

At the time of writing, FrontEnders has been visited by around 3,000 different people. It has steadied to getting around 200-500 people on the day of an update. The site also jumped to a PageRank of 5 in 2 months.

Lessons learnt

Twitter is a powerful marketing tool, and getting the attention of the right people on twitter (at the right time) can lead to huge swathes of traffic with little or no other forms of promotion. It proves that having the right idea in the right hands can produce great results.

In my opinion, all the talks were interesting; and as front-end developer, I think it’s fair to say I was the main audience for a lot of the talks which consisted of the following topics:

• Designing for mobile devices
• SEO
• HTML5 APIs (read, JavaScript)
• Graceful degradation vs progressive enhancement in browsers (CSS)

Designing for mobile devices

Mobile is a big topic right now and it was really refreshing to hear a mobile developer (with actual experience) in Ben Childs from Common Agency, tell us that creating separate mobile experiences for different mobile devices was the way forward, as opposed to doing nothing ‘because the site looks okay on an iPhone’. I use my mobile phone (iPhone) a lot to check websites and yes, the scaling of websites is cool but frankly, I don’t need to see absolutely everything the same as on my iMac when I just want to check the football scores or the TV listings.

Sidenote: Sadly, I don’t get to do nearly any mobile interface work due to client’s budgets not stretching that far, but I think that will change in the next year or two as the usage of the mobile internet increases and clients realise they can make more money if they cater for different audiences.

SEO

“The Hodge” gave a very interesting talk about SEO (and bagels), and once again it was nice to hear from a speaker who clearly knows what they’re doing.; it was great to hear an SEO professional denounce a lot of SEO practices as ‘bullshit’. The majority of people in this industry are not this honest; which is a pity.

It was also really refreshing to hear a bit of humour from this speaker; and I have to admit this was my favourite talk of the night.

HTML5 (aka JavaScript)

‘Oh bore off HTML5′, I hear you say, ‘we’ve had enough of you already.’ Well, yes, the truth is that HTML5 kind of sucks, we have a lot of new (borderline useless tags) but, there is a silver lining; the real selling point of HTML5 will be these HTML5 APIs which will allow us to pass off a lot of work we do in JavaScript to the browser; of course, we’ll all still be writing JavaScript – just not as much of the mundane stuff (hopefully).

Some of the people I was with did seem to get a little lost and, dare I say, a tad bored during some of the more technical parts of Remy Sharp’s presentation. While I find it quite fascinating that, in the near future, form validation could be done by the browser I don’t think that everyone else shared that enthusiasm.

Graceful degradation in browsers (CSS)

By far the most controversial talk of the night was from the headliner, Andy Clarke.  His point: for years (7 to be precise) we’ve been told to progressively enhance websites; make it work in IE6 then add visual flourishes to Safari/Chrome/Firefox browsers but his idea is to flip that approach and make the site look best in better browsers then successfully downgrade the site so it looks decent in IE6/7. Will IE users miss out? Probably not, Clarke noted because in the real world people using websites don’t check that it works in IE6 and Firefox; they just use the browser they use and don’t really care if it looks a bit different on someone else’s machine.

Will you be able to adopt this approach on every project starting from today? No, probably not, but you can definitely start to do it with some clients and you should definitely be starting to educate clients about the browser differences and why websites shouldn’t look the same in IE6/7 as they do in Firefox 3.6. People don’t expect the mobile web to look as good on their 10 year old Nokia as it does on an iPhone so why should it be any different with desktop browsers.

Summary

There was a lot of talk at last night’s Speak the Web about how good it was to have something going on up north for a change – and it really was. Fun as it is to take a trip to London/Brighton for a web conference it does start to get expensive so the fact that some local boys put on something for us Northerners was really cool.

From reading the blurb on the website, I got the impression at the conference was to be more like a gig than a traditional conference and that’s exactly how it was. There was a headlining act and some some supporting speakers leading up to them; it felt very relaxed and informal and I think it was definitely the right approach. The fact that it was in the pub meant everyone was a little more lubricated  with alcohol and consequently more prepared to have open and frank discussions about the talks once they’d finished.

I felt the price was right here too; £20 for a few hours of inspiration is a good deal as far as I’m concerned and I’d be more than happy to attend another Speak the Web should the organisers choose to keep this juggernaut running.

Disclaimer

I feel I have to point out that I know both of the organisers, Rich and Dan, either through work or through Northern Digitals; but this has not coloured my review in any way.

What’s the fold?

The fold is an old media term used to talk about the content that is above the physical fold on a broadsheet newspaper’s front page. On a website, the fold is traditionally the point at which most people’s browser stops before they have to scroll to view the rest of the content.

This analogy may sound a bit weak and old hat but it is actually very strong because just as the content above the fold on the newspaper draws in potential readers who will pick up said paper from the newsagent shelf and unfold it to read the rest so to does the ‘above the fold’ content on a website encourage the user to click-through to the next page or scroll down to the bottom and read all the content.

Screenshot of the BBC.co.uk homepage

But nobody scrolls

You’ve probably come across inexperienced clients who think users won’t/don’t scroll and that all their content should be above the fold. The problem here is not that ‘there is no fold’ it’s that the client doesn’t understand what their most important content is.

Users scroll everyday in Microsoft Word, Excel and their email clients. They scroll down on BBC news pages all day long; to put it short they expect to scroll to find the content that they need.

So what’s the point

Content is king, and the most important content should be at the top so as to draw the user’s attention; auxiliary content should follow after it and your design should inform the user that they can scroll to see more content.

basecamphq.com screenshot

Part of your job is client education

The next time your client wants the entire kitchen sink placed ‘above the fold’; it’s your job to help them work out which of their content is the most important (to their customers); what is the primary goal for that page and then explain to them that this primary content needs to go towards the top and in view when the website loads – then the supporting content can go below.

Your client won’t complain when the click-through-ratio on their call to action buttons improve once those press releases get moved down the page a wee bit.

What the talk was about

The topic of Budd’s talk, Designing The User Experience Curve, was user experience in the wild and how by taking notice of user experience in real world situations could enable us to create better online experiences.

When you visit a hotel/shop/restaurant and there’s an aspect that is hard or confusing about using/receiving the provided service then it generates a less than optimal user experience and often you find yourself rejecting the idea of reusing that service in the future. Likewise, when you have a good experience, which can be triggered by any number of small things, you find yourself reusing that service in the future.

Sometimes that meal in the restaurant tastes just a little bit better when the waiter has built up a rapport with you and sometimes that hotel bed feels just a little bit lumpier when you’ve spent 20 minutes waiting at reception being ignored while you try to check-in.

So why did that inspiring talk ruin my life?

Ever since that fateful day, back in April 2008, I’ve found it impossible to do anything without judging the level of user experience I’m receiving – it’s made me notice far more when I’m getting a poor user experience e.g. whenever I:

• walk into a shop and don’t receive any kind of greeting from a member of staff.
• reach the till at the supermarket only to find that the special 2-for-1 offer doesn’t apply to my item.
• sit down at a football ground and find myself squashed in like an animal.

In the past, these events washed over me a lot more but now I can’t ignore them.

But…

Ultimately, this talk forced me to constantly think about user experience and this habit has definitely bled through to my professional life. So, really I should be extremely grateful that Andy Budd ruined my life because let’s face it, he didn’t at all.

View Andy’s talk (on vimeo)

Andy Budd – FOWD London 2008.

What about you?

Have you seen any conference talks or blog posts which have left a lasting impression on you and/or completely altered your way of thinking?

Have semantics been improved?

The big selling point of HTML5 from the gurus has been that it will give HTML more semantic meaning but I just don’t believe this claim.

Just how are the <section>, <article>, <aside> et al more semantic than simple <div> tags. I can appreciate that this may make it easier for screen-readers and search engine bots to pick up what the role of content blocks are on each page but personally I would have much preferred a different solution; one whereby <div>s can be given roles e.g.

<div role="nav">

or

<div role="header">

The syntax

As a lover of HTML, it’s really saddens me that the HTML5 allows HTML tags to be written in uppercase, lowercase, with closing tags, without closing tags. Whereas, I don’t much like XML’s habit of completely falling over when it reaches a validation error I do think HTML coders should be encouraged to write HTML in one single standard.

For me, I like the syntax of XHTML because I think it’s better practice and I would have loved to have seen HTML5 adopt that more aggressively.

What I do like

HTML5 is not all about those new tags, it’s supposedly more about improving web apps – and taking a lot of the things we rely upon JavaScript for like date pickers into the browser. For now though, a lot of these bits aren’t available but the good news is that the odd browser is making use of different input types and using <input type="email" /> is a simple change and can really improve usability for iPhone users.

I’m also a fan of being able to wrap block level elements with links which is often a requirement and currently involves some jiggery-pokery to get it to work and validate.

CSS3 – where it’s really at

For me, CSS3, is really the one to watch and as more browsers support CSS3, we’ll be able to cut out extra <div>s and classes like ‘first’, ‘last’, ‘odd’, and ‘even’.

A lot of the post on 2009′s 24 ways revolved around CSS3 and a lot of designers are starting to make use of text-shadow, rgba, box-shadow and border radius to improve their designs.

Summary

Honestly, I’m still not sold on HTML5, I’m yet to see the benefits of it outside of a few of its characteristics but I am building new sites with the new HTML5 doctype and whilst I’m not a fan of some of the new tags, I do think it’s moving in the right direction.

Instead of moaning about HTML5′s inadequacies I should be getting involved by reading the spec and joining in with the mailing list but let’s face it the spec is a snooze-fest and the mailing list, and frankly most online discussions about HTML5, just seem like cliquey arguments for the sake of it.

What do you think?

Are you using HTML5? If yes, to what extent? And if not why not?