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?

These posts, collected from around the web, start with the oldest first. Links like these can be found in my delicious feed or by subscribing to this site’s RSS feed.

The $300 Million Button

Guy changes one button on a website which leads to a lot of extra revenue. Hooray for usability.

10 Harsh Truths About Corporate Websites

Smashing magazine lays down the law on the corporate website.

The $50 logo experiment

“Here’s the truth, though, and why all the good designers need to relax: the vast majority of the self-described designers on sites like CrowdSpring aren’t really designers.”

What I learned redesigning the Campaign Monitor newsletter

This reads like a fantastic how-to design HTML emails.

Independent Software Development

Good insight into what it’s like to set-up and run your own software (web-app) house by Garrett Dimon of Sifter.

College vs Start-up

Daniel Teller sums up my opinion on this subject pretty well.

Why payment prior to launch is so important

A good case study about an awkward client not paying up from Sarah Parmenter.

Why I think SEO is bullshit

Sam Brown lays down the law on SEO.

Dear American Airlines

Ah, I remember the complete storm this article caused. The follow-up, Dear Dustin Curtis, is worth a read too. As is the follow-up follow-up, The Incompetence of American Airlines & The Fate of Mr. X.

Link Building from A-Z

If in 2010 you wish to stop paying your SEO provider then read this, then read the rest of the articles at SEOMoz.

Promoting your product or service with banner ads – is it worth it?

Really interesting write up about experience using ad banners/landing pages from CampaignMonitor.

Stop Password Masking

Jakob Nielsen calls for the end of the asterisked password field.

How to Increase Sign-ups by 200%

Simple tip about how 37Signals increased sign-ups with a little A/B testing on some copy.

The World’s Best Web Designers Are Unknown

John O’Nolan let’s .NET magazine have it after their inane article about the top 20 web designers in the world.

Spammers, Evildoers, and Opportunists

SEO’ers came in for some right stick in 2009, first Sam Brown, then Derek Powazek kicked their bums. The follow-up, SEO FAQ is equally good.

Never knowingly undersold?

How John Lewis tackle the shop v e-shop rivalry and a short summary of the problem.

8 ways we increased ecommerce sales by 10,000%

Case study from Headscape (boagworld) on the increased sales of one of their clients.

9 usability mistakes even the big boys make

Some nice examples of common user interface/experience errors on big websites.

Top Tips for Account Managers

Ed Baldy provides digital account managers with some useful guidelines.

The HTML5 syntax options problem

To me, HTML5 just seems like a bit of a mess and it would appear that Robert Nyman, kinda agrees.

The Apple Store’s Checkout Form Redesign

Review of apple’s online store’s checkout forms being redesigned.

Stuff I’ve learned at Microsoft

Sriram Krishnan, a Microsoft employee tells us what he’s learnt from working there for 5 years.

Open up the functions.php file within your WordPress theme: and add the following code:

/**
 *	remove_widows()
 *	filter the_title() to remove any chance of a typographic widow
 *	typographic widows
 *	@param string $title
 *	@return string $title;
 */
function remove_widows($title){

	$title_length = strlen($title);

	if(strpos($title, 'a href=') > 0){
		// this is a link so
		// work out where the anchor text starts and ends
		$start_of_text = strpos($link, '">');
		$end_of_text = strpos($link, '</a>');
		$end_of_text = ($title_length -  $end_of_text);
		$anchor_text = substr($title, $start_of_text, $end_of_text);
	} else{
		$start_of_text = 0;
		$end_of_text = $title_length;
		$anchor_text = $title;
	}
	// convert the title into an array of words
	$anchor_array = explode(' ', $anchor_text);

	// Provided there's multiple words in the anchor text
	// then join all words (except the last two) together by a space.
	// Join the last two with an &nbsp; which is where the
	// magic happens
	if(sizeof($anchor_array) > 1){
		$last_word = array_pop($anchor_array);
		$title_new = join(' ', $anchor_array) . '&nbsp;' . $last_word;
		$title = substr_replace($title, $title_new, $start_of_text, $end_of_text);
	}
	return $title;

}

add_filter('the_title', 'remove_widows');

Explanation

This code basically takes WordPress’s the_title() function and pre-filters it so that the last two words are separated not with a space but with a   instead (which is the HTML code for a space). This tricks the browser into not breaking up the word.

This code will come into action wherever the you use the_title() in your WordPress theme. Note: this won’t fix widows on any headings (<h2>, <h3>, <h4>, etc) in your body copy (which is echoed in your theme with the the_content() function).

Semantics

Another solution would be to wrap the last two words in a HTML tag like a span tag and then set the CSS of that element e.g.:

h1 span{
 white-space: nowrap;
}

but that involves extra HTML and extra CSS.

Can you improve the code?

Have you spotted an error or think you can improve upon the function? Let me know in the comments.

]]>