A case study in responsive design

Posted in Development on October 31, 2011 by Dan Sheerman

Dan Sheerman has been working away to implement the responsive design for Boagworld. With the job complete he shares a few lessons learnt.

Over the last couple of days, I’ve had the task of taking the Boagworld site and implementing all its responsive goodness. We went live quietly, so you will now be able to resize this very post as you’re reading it.

All done?

Can I have your attention back now you’ve had a good play, and poked holes at things that look dodgy in my stylesheets?

Okay, so Paul’s asked me to write a post outlining how I went about it, and some of the things I noticed along the way that might help if you’re attempting responsive front-end work for the first time, or just want some general tips, so here goes.

I don’t really like people telling me how to ‘best’ do things, so I’m going to try not to do that. Instead I will offer some general observations I had along the way and some ‘common sense’.

What are media queries?

Firstly, media queries. If you’re not already familiar with them, here’s a basic outline. What you’re looking at with media queries are essentially a form of conditional comments, just like the ones you’re used to using to crowbar IE into the shape. The difference is that with responsive/adaptive design, you’re targeting devices’ and browsers’ widths (and heights), as opposed to a specific browser version. The first thing you’ll notice about the media queries on Boagworld, is that there’s several stylesheets for different device widths. Unfortunately, they’re in the ‘wrong order’. There’s a reason for that.

Why build from mobile up?

When building for mobile devices, ‘common sense’ would dictate that we serve the least amount of data to those devices likely to view content on slower connections, or potentially less capable of dealing with lots and lots of (unnecessary) gumph.

In an ideal world, if we were browsing on a generic mobile device with a screen width of 480px and a slow EDGE connection, we’d want to be loading in just the styles necessary for the mobile layout.

We build the styles from mobile up starting with essential content. We then progressively call in more rules for more complex layouts that are utilised by devices with the ability and bandwidth to use them. Although it is not a hard and fast rule, devices with a smaller screen size are normally also slower at rendering web pages because of bandwidth and processor power.

Paul did it wrong. Don’t copy him!

With the Boagworld site, I already had the set of stylesheets that handled base styles, typography and branding along with the ‘desktop’ layout in percentages from Paul.

Without rebuilding the stylesheets that were already there, I’ve done the most horrible thing imaginable, and added all individual stylesheets in the ‘wrong order’.

As a result if you’re browsing on a generic mobile device with a screen width of 480px over a slow EDGE connection, you’re being served:

the full site stylesheet,
a few tweaks for generic big tablets in landscape,
a few tweaks for generic big tablets in portrait and generic small tablets in landscape,
a few tweaks for generic small tablets in portrait and generic smartphones,
and a few tweaks for generic mobile devices.

So sorry about that. I’m aware that it’s not the perfect way to do it, and I’ll certainly rejiggle the stylesheets to work properly (read: assign styles to selectors in the reverse order) at a time when I’ve got less shouting at Magento to do.

In terms of file size served, it’s actually not too bad, the most you’ll load in is an extra 9KB or so on top of around 15K (both quoted without compression) for all the desktop site’s styles.

There are a lot of individual stylesheets for the time being just for clarity and ease of development.

When everything gets rejiggled, I’ll be considering whether it’s more efficient to have larger stylesheets and fewer server calls, or smaller stylesheets only served when needed. I suspect with the filesizes, the difference will be negligible, but something that’s definitely worth considering.

Plan from the start, but don’t despair if you haven’t.

It’s always important to consider future implementation of responsive design when marking up any site. However, even when working with a fixed-width full site that has been coded with percentages, you can achieve some fairly comprehensive responsive techniques (as is seen from Boagworld).

When the content begins to look cluttered as the viewport is reduced, you can add break points that hide unnecessary or/and restyle elements. For example you can change display:inline-block to display:block so pushing columns below each other.

I did experience a weird bug when resizing with columns that were display:table-cell. So you may want to watch out for that one and use display:block instead.

Dealing with navigation.

We have two sets of navigation. One is more suitable for smaller screen sizes while the other is a ‘desktop’ version. Once this duplicated menu is added to the HTML it is simply a matter of showing or hiding them based on screen width.

It would be possible to simply restyle a single navigation bar but in our cause we wanted some elements (like subscription) to function a little differently so it was preferable to have two sets of HTML.

Dealing with content.

In terms of content, we’ve tried to keep it accessible at all resolutions. However, I did decide to hide the ‘fadey’ sidebar once the screen width drops down to tablet view. This is partly because the hover action required to ‘re-activate’ it, and partly to prioritise content readability.

Testing and browser quirks.

One thing you may notice if using Opera Mini is that the mobile menu drop-downs appear to post back to the server.

I had a hell of a time tweaking the JS to event.preventDefault() on those anchors. If anyone knows a solution, I’m sure you’ll let me know in the comments.

You’ll also, I’m sure, be thrilled to know I’ve tested it in Opera, and other browsers like Konqueror and Netscape to ensure graceful degradation for things like funky gradients – N.B. I haven’t actually tested it in Konqueror or Netscape… Or Android yet, actually.

Windows MobilePhones will, for their decision to make their mobile browser IE7 based, get Paul’s (really pretty) basic stylesheet. And as IE8 and below whistle loudly while strolling past media queries, that probably won’t change anytime soon.

And that’s about it. I’m sure we can rely on feedback to be left in the comments.

You may now resume dragging the corners of your browser about the screen like a crazy person.

Web design news 09/08/10

Posted in News on August 6, 2010 by Paul Boag

This week: The magic behind Amazon’s $2.7bn question, kick ass kickoff meetings and can you build an app in 10k?

The magic behind Amazon’s 2.7 billion dollar question.

“Was this review helpful to you”. These six little words earn Amazon more than $2,700,000,0000 of extra revenue per year. This article explains how Amazon’s review system, which shuns chronology in favour of a voting system and highlighting both positive and negative reviews to establish a wisdom of crowds aspect to user purchases. Whether it’s useful to everyone with an e-commerce site is doubtable, when only 1 in 1,3000 purchases of the example in the article write a review, Amazon relies on the sheer volume of sales to build up a comprehensive set of balanced reviews.

Kick ass kickoff meetings

You may already have them, but are you making the most out of your kick off meetings for your projects? In this A List Apart article, Kevin M. Hoffman covers some great tips such as when to include your clients in the process, asking the hard questions first and understanding that everyone is a stakeholder and recommendations for holding virtual kick off meetings if in-person meetings aren’t possible.

Can you build an app in 10k?

Then you have a couple of weeks left to enter the 10k apart competition. With over $10k in prizes up for grabs you can show your development chops by optimising every little byte and entering an app with a total filesize under 10 kilobytes.

Take a look at the apps already entered at http://10k.aneventapart.com/

Getting started with ecommerce

Posted in Web strategy on April 8, 2010 by Paul Boag

More from show 200: Drew and Rachel share their experiences of developing ecommerce websites.

Paul: Right, shall we talk about e-commerce, because I thought that might be something interesting to deal with. It follows on from the Perch conversation in a lot of ways. One of the challenges you’ve had to face surrounding commerce and working on e-commerce sites. I guess my first question is – there’s a lot of people who are wanting to sell stuff on their sites, a lot of people kind of go in from huge online retailers right the way down to someone that wants to sell their local band’s album. Where do you start when working on an e-commerce site? What are the initial things that you consider when developing an e-commerce site?

Drew: Hmmm…

Rachel: The first thing really that you need to think about is how are you actually going to take payments. Disregarding your actual shopping cart type stuff on your site, right from the outset you need to think about how you’re going to take payments. And there’s a whole bunch of options for that, and a lot of that is going to depend on the type of client and what they already have. If you’ve got someone who’s already got a physical shop, they’ve probably already got a merchant account with the bank.

Paul: Right.

Rachel: So most likely are going to want to take their payments through that merchant account, which basically is the bit that allows you to accept credit cards. If you’ve got a merchant account you’re able to accept credit cards off your own bat, you don’t need to use somebody else. The thing you should never do, and I still encounter people trying to do it, is think "Oh, it’s alright! I’ve got a PDQ machine or got some other way to take transactions, either over the phone or when people are there in the shop. I’ll just store the credit card numbers and then offline I’ll put them through my PDQ machine." And I still encounter people who think that that is OK. That is not OK. That’s not OK from your card agreement point of view because internet transactions are different, they’ve got a different level of liability and if your bank find out you’re taking internet transactions in that way, they will close your account.

So that’s really important, that people understand that dealing with taking payments online, even if they’ve already got that merchant account, that they need to speak to their bank and arrange to have that ability.

Paul: Marcus, have you got some kind of jingle going on? Because everybody in the chat room is screaming and shouting.

(Noise in the background)

Paul: Yeah. So it’s definitely that camera, OK. Right, I’m narrowing it down guys, we are getting there! We’ll start this whole conversation again.

Marcus: Don’t have to, as long as you can remember where you were.

(Audio from a few seconds ago plays in the background.)

Everyone: (Laughs)

Paul: Alright, now turn that down.

Marcus: How’ve you managed that?

Paul: I don’t know, cos I’m clever.

Rachel: I like the fact that I get a moo-ing camera, that’s excellent!

Everyone: (Laughs)

Paul: Is it back now? It is, I can see it going up and down!

Everyone: (Laughs)

Rachel: I really don’t make this noise.

Everyone: (Laughs)

Marcus: It’s gone, it’s gone, it’s gone…

Paul: Oh it’s gone! Right, so we’re now safe. Rachel, you no longer moo!

Rachel: (Laughs) Excellent!

Paul: I have no idea what happened there guys, I’m really sorry. I blame Marcus, because he’s in charge of sound.

Marcus: No, it’s Dave.

Paul: It’s Dave! It’s Dave! Dave heads out of the room and everything broke. Ok, that’s one. Someone should keep a note, that should be a first drink of the day. Every time we make a major screw-up.

Marcus: Ok, but who gets to have the..

Paul: Let’s pick Dave as the person that has to drink every time. What were we talking about?

Everyone: E-commerce!

Paul: That was it, we were talking about e-commerce. Let’s talk some more about e-commerce. Talking about the things you need to consider, and I’ve got no recollection at all to what you were saying (laughs).

Drew: Talking about people not taking…

Rachel: I think I was saying moo. (Laughs)

Drew: …about people not taking the responsibility of dealing with credit cards seriously.

Paul: Right, yes!

Drew: Because that’s something you do see a lot, I mean you see people emailing credit card numbers around.

Rachel: You see people storing them in plain text in text files in a database, it’s not as much as you used to, but it does happen. I think people don’t really understand all of the bits which go into taking payments, particularly if you’re using your own merchant account. Because you’ve got various bits; You’ve got your merchant account, so if you’ve got an account with HSBC or whatever that allows you to accept credit cards. That’s one part of the jigsaw, the other thing you then need is, because you can’t take these credit card payments actually yourself, you shouldn’t be generally storing them anywhere. Very very few circumstances should require you to store credit card numbers.

You need what’s called a payment gateway, which is the thing which allows you to send your credit card details securely. They actually do the processing, check it’s valid and then hand that off to your bank and the money goes into your account. All of the big banks have their own, or you’re hooked up with one. So you have the NatWest Streamline and Barclays ePDQ, things like that. If you’ve got a merchant account, your bank will be able to tell you who they use. You don’t necessarily have to use your bank’s one, there are other ones. We like PayPoint, which used to be called SECPay.

Paul: I’ve never come across PayPoint.

Rachel: PayPoint are great, they’re great for developers, they’re very very good.

Marcus: I remember SECPay.

Rachel: Yes, well PayPoint are SECPay, it’s the same company. They’re great, they offer payment processing facilities and they work with all the major banks. Your bank would be very happy if you said these are who we’re going to use if you’re gonna go the whole hog and have your own merchant account, be able to accept your own credit card transactions. Of course, what a lot of people do these days is use something like PayPal, which means you can have that ability to take payment online without having to have a merchant account.

A lot of people, if you’re a new business, you might find it difficult to sign up for a merchant account anyway. You tend to sort of need to be established and things before the bank will be happy to give you one.

PayPal

Paul: I mean the problem with PayPal obviously is that they seem to take an enormous slice compared to most other companies.

Drew: It depends what volume you’re doing really. For low volumes, PayPal works out cheaper. Because you’re not having to then pay for all the expense of the payment gateway, the traditional payment gateway.

Rachel: Because you have monthly charges and things, as well as your transaction charges, you normally have monthly charges for having the merchant account and a monthly charge for the payment gateway.

Paul: Yeah.

Rachel: So actually if you’re doing low amounts of transactions and not a huge amount of money, you may find actually that PayPal works out cost effectively for you.

Drew: The nice thing about PayPal is you’re paying per transaction, there’s no ongoing fee. So if you don’t make any sales, you’re not paying any fees. You’re only paying a percentage when you’re successful really.

Paul: Yep, that makes a lot of sense.

??: We paid £20 a month…

Drew: Oh yeah, if you upgrade to a bigger PayPal account with more features, then yeah, you do start paying.

Marcus: From the chat room here, "They take a big slice, take forever to process and support is awful".

Rachel: Yeah, I mean I think that’s the thing with PayPal is that people do have issues with them, and also not everyone’s clients are going to be happy to sign up with PayPal, or to even use PayPal. They’ve got a bit of bad press.

For us with Perch, most of our clients are very happy to use PayPal, they’ve already got PayPal accounts and that’s fine, but for a more traditional store that might not be the same. I think you do have to look at your customers a bit, and are they likely to be happy to do that. The nice thing about PayPal is that it gives you an easy "in" to all of this. You know, if you’re starting out, maybe you can’t get a merchant account or you want to test the water before you get a merchant account and go to all that expense, and also the expense of developing for it, PayPal gives you a really easy "in". You’ve not lost anything; If you decide it’s not working out, you haven’t got an ongoing charge, you’re not tied in for any length of time to use it. So it’s a good option, and there’s things like Google Checkout as well.

Paul: Yeah, I’ve never used Google Checkout, what’s that like?

Rachel: I’ve not actually developed for it yet. I hear tell that it’s relatively difficult to develop with, because people seem to be having problems, but I’ve not actually developed something for it.

Paul: Ahhh OK. So what are the things you need to think about from a technical perspective when you’re working on an e-commerce site? You’ve mentioned a few things, but what’s the key considerations from your point of view, as people building it?

Rachel: It depends on what you’re going for, if you’re using your payment gatewaym or with PayPal particularly, what you tend to end up with is what’s sometimes referred to as pay-page, which is where you go out to a third party site, the card details are taken on the pay-page by that third party, and then you’re transferred back to the site to finish the transaction.

Paul: Yeah

Rachel: Typically from a technical point of view, what happens then is a transaction ID is sent back so that you can do any post payment processing; Send out the download software, or passing on ready for shipping, or sending emails, or whatever it is you do after payment. The nice thing about that pay-page integration is that you never touch the credit card details. You don’t have any liability for them and they go out to the payment gateway and it’s all taken there. And of course that means you don’t have to worry about that. This is something that’s becoming a real issue because of something called the PCI DSS compliance which means that you have to comply with all sorts of things if you take credit card details, and that comes into play even if you just pass those details over and never actually write them down or store them. You still have to do all sorts of things with your server; making sure you’ve got the correct firewalls and have security scans and all kinds of hassle. So really we tend to recommend people do the pay-page thing, not do an integration where people take payment on their own site. Just because you then don’t then have that liability.

Drew: For a long time it was considered best practice that you keep the customer on your side the whole time, you manage the entire experience, you take the credit card details and in the background you pass those off for processing. But there’s a couple of things really, this PCI DSS is one big issue these days with the legislation that as soon as those credit cards touch your server at all, then you’re liable for all sorts of extra overheads that you really don’t want to be dealing with.

But the other thing is that there are far fewer payment gateways than there are online shops. People are likely to be more familiar with someone like WorldPay, or PayPal, or Google Checkout than they are with you, as somebody who is selling online. So the customer may well have more trust in who you’re using for processing than they do in you.

I know that from a personal point of view, when I’ve been looking for something online trying to find the cheapest price. You search around and find some odd looking store, and you don’t know anything about it, it’s just turned up in google and they’ve got the thing at a good price. If you see that they’re using a payment provider who you trust, using WorldPay or someone, you know that "Ok, they’re decent enough to get an account with (someone like WorldPay) and I can go back to WorldPay if I have any issues with this transaction". So it gives you a bit more confidence with buying from someone who’s reputation you ‘ll not necessarily be familiar with.

WorldPay

Paul: Absolutely…

Rachel: Clients will tend to say that, "I want control of the basket, and I want the payment to happen on my site". I think often when that’s asked, they haven’t really though through what they’re then going to have to deal with. There’s a huge amount of liability, there’s an awful lot of work that’s going to have to be done. It’s going to mean they’re going to have to have a more expensive hosting account for instance, because you’re not going to pass PCI DSS on a shared server or shared hosting account. So there’s a whole load of stuff that you’re going to have to worry about because you’ve touched those credit card details. Only in a tiny tiny way passing them on to the API.

So I think generally, we tend to try and guide people to using pay-page. Some of the providers, PayPoint, you can brand up the template so that they can look like your site. I don’t think purchasers are particularly upset by going out to a third party, they’re used to it. They’re used to going to a third party to make payment these days. As long as you can capture the output of the payment and deal with things on your side, you don’t have to destroy the experience because of that, you just need to design around it really, and make sure people know what’s going on when they go out to that third party.

Paul: Yeah, what about user considerations since you’re working on an e-commerce website, are there certain things you consider really important to think about when designing and kind of creating the front end part of all this?

Drew: Yeah, I mean for checkout processes it usually pays to be as straight forward as possible, in terms of your development techniques. Really, just in the same way as you do with design, you just strip away the distractions. It can serve you well I think to not try and be too flash. Just the process of taking payment details or whatever it is, just be straightforward, clear and reliable because you don’t want that part of your work to be the bit that’s letting you down. You don’t want people to be encountering weird JavaScript validation issues while they’re trying to sign up for an account because you want to get them through that boring process as quickly as possible. So that’s definitely a consideration, not trying to be too swish.

You need to think about, really from the outset, when you’re dealing with e-commerce stuff, the details like; How are you going to deal with delivery? How is delivery charged? And they’re the sort of thing that you not only need to communicate to the customer quite clearly but also you need to understand before you pick what sort of solution that you’re going to develop. If you’re going to use an off-the-shelf system, if you’re going to have to develop something bespoke, if you’re going to use a service like shopifyor something like that. You need to consider what your scheme is for charging for delivery; Is it that you charge by weight?, or do you charge by number of items? Does it become free after a certain value? There’s all these different ways which seem quite commonplace but you need to make sure that you can deal with them technically.

Paul: It goes back to what we were talking about earlier about thinking about things like VAT, and delivery charges as you say, discounts, refunds…

Rachel: Discounts are always an issue (laughs)

Drew: Discounts are a major major headache. If you think about all the different ways you can express a discount. Just go into a supermarket and look at the different ways they do discounts.

Marcus: Three for two.

Drew: Yeah, three for two, or buy one get one free.

Rachel: Or buy this thing and get this other thing free.

Drew: Yeah, or buy 4 of these and get this thing half price!

Everyone: Yeah.

Rachel: And people don’t think through this, people say "I want a simple e-commerce system for my site"and you start asking the questions, and they’ll say "Oh yes, we want the ability to do special offers", then you say "But what sort of special offers?" and then they come out with "Oh well we could do this, and we could do this or we could do that" and I think particularly if you’re building custom stuff. Obviously if you’re using third party shop or cart or whatever, then your gonna be able to say "Well, you’ve chosen to use this solution and this is what it offers". If you’re developing custom e-commerce and shopping carts there are so many details, and you really do need to tie those down at the beginning because you can really get scope creep. E-commerce sites are the place where we see the most scope creep and the most of where clients come back and say "Oh, you know what would be really handy if we could just do…" y’know? There’s so many different variations in, say, things like shipping, If you’re dealing with some physical products and some electronic downloads, you don’t charge someone shipping for electronic downloads and there’s so many different things that you need to consider. They really do need speccing out very very well from the outset.

??: We had a client once, who wanted us to basically create an area in the back-end of the e-commerce site that we were building for them that would basically allow them to create rules relating to discounts. And you think like "eh uh", it’s not gonna happen.

Drew: It gets mindblowingly complex, we tend to go one of two ways. Deciding on a type of discount they can do quite easily, so they can offer a 10% discount, or a 20% discount or something like that, but not combinations of products equal… this sort of thing. Or we can go down the other route of just putting the system in place and saying "Right, when you need to do a special offer, hire an hour of our time, and we’ll write the code for that special offer and that’s going to work out an awful lot cheaper than trying to build an enormous system that will deal with any sort of discount. Just come back to us, the maths isn’t complex. We’ll just sit and write it and then that’ll be in your store" and do it that way.

You think of the complexity that must be in supermarket till systems, the ways they deal with all those discounts, it must be mindblowingly complex and you really don’t want to be taking on the burden of that level of code inside your application. Because it’s just going to be very expensive and you’re going to have to maintain that code going forward.

Paul: My wife’s just arrived! Hello Cath!

Cath looking silly

Everyone: Hello Cath!

Cath: I come bearing food…and drink.

Everyone: (cheers) Yay!!

Paul: Are you gonna set up in the other room?

Cath: Yes.

Paul: Cool.

Cath: I’ve done it already.

Paul: Oh, you’ve done it already?

Cath: Oh, and by the way the GPS doesn’t work and you don’t … (not close enough to mic to hear)

Paul: Well, you got close enough.

Cath: So I’ve spent about a quarter of an hour driving around the countryside.

Paul: Well that’s ok. I’m getting told off live on a show by my wife!

Everyone: (Laughs)

Marcus: Sorry Cath, can you do it again later? But into a mic?

Everyone: (Laughs)

Paul: We’ll get you in properly in a minute Cath.

Cath: Bye!

Paul: Bye Bye! … Ryan!

Ryan: Yes.

Paul: Sorry, didn’t mean to shout into the mic. We‚Äôve got Elliot coming on soon?

Ryan: Yes we have.

Paul: Which is great

Drew: I should just say, we’ve also been asked… I’m wording this carefully… to "please can you produce magic" by one of our clients. Those were their exact words, "We would like magic".

Paul: How would you respond to that?

Drew: This was in an email, "we would like you to create some magic".

Rachel: We get asked for the "wow factor", I’ve not quite defined what the "wow factor" is and how it relates to me as a web developer but yeah. I like definable things.. I’m a programmer, I like definable…

Drew: I think that’s where I was going, with the discounts, is outline exactly to the point, "We’d like this form of discount, this form of discount" and apply that to a particular process.

Rachel: I think it’s fine saying these things can grow organically and we can decide when we get to whenever, but I think that’s gonna make it more expensive. If you know you want to do things to a tight budget, and get it done on time, you need to have that sort of stuff specced out at the outset because there’s just so many different combinations of things.

Paul: Someone’s put in another good thing which you get sometimes. Is it "zebedee"? says "It doesn’t ‘pop’ enough".

Everyone: (Laughs)

Drew: A design that "pops".

Marcus This is where we need the HTML5 audio tag. (Laughs) just get it to go "pop" "pop".

Everyone: (Laughs)

Paul: That’ll teach ‘em!

Thanks goes to Ruchard Adams for transcribing this interview.

HTML5 and CSS3 with Inayaili de León

Posted in Development on April 6, 2010 by Paul Boag

More from show 200: Inayaili de León tells us that we can be using HTML5 and CSS3 right now.

Paul: Best talk of the day! Yeah, you can come and join us – you can throw out Drew. It’s really good to have Inayaili on the show. She is one of those quiet yet very significant figures within the web design community, that is there in the background doing some absolutely great stuff. I think she has been writing some stuff for 24 ways recently, which was very good, really enjoyed that, and has got some other great stuff going on, so we welcome to the show Inayaili.

Hello Inayaili.

Inayaili: Hello.

Paul: It’s really good to have you on. Thank you for coming all the way to the … I was going to say studio.

[lots of laughing]

Inayaili de Le%C3%B3n

Image Source

Paul: [exaggerated voice] “Thanks for coming into the studio today”. So, we are going to have a bit of a chat about CSS3?

Inayaili: Yeah.

Paul: I thought I better check that. Ryan? Is that alright for you? CSS3? Yeah, it meets Ryan’s approval as well, so that’s really good. OK, we have kind of been building to this all day really, we have kind of mentioned CSS3 a couple of times.

Inayaili: I don’t know if you have noticed but I think we are halfway, euh…

Marcus: We are, this is halfway

Inayaili: … through the …

Paul: Of for fuck sake.

Marcus: We only have got six hours to go.

Paul: Ooh, whoa.

Marcus: I can’t work out, my recording thing I am doing here, says I recorded seven hours of audio. How can that possible be? Oh, it starts on 1, that’s why.

Paul: Because the whole space time continuum is [???]

Marcus: I answered my question. It starts on one hour.

Paul: I have got far too many windows open here, let me close some.

Marcus: Yes, we are halfway – jipee!

Paul: Wow, that’s worth celebrating. I am getting really cold in here as well.

Marcus: Shut the door.

Paul: Shut the door. Is that alright for a minute. Is everybody else getting a bit nippy? Good stuff. Right. Halfway joke by Marcus. That’s a good idea, as we got a few minutes.

Ryan: What’s that good one, you had …

Paul: Go on Marcus, go on my son. Will you hang a minute, I …

Marcus: Someone actually send me an email with a joke, but I can’t remember if it was any good or not.

Eum, am I allowed to tell a blond joke?

Paul: After I have just been telling everyone off in the chat room, for commenting on people’s personalities and personal appearances, and stuff like that, and then YOU want to tell a blond joke.

Marcus: Eh, eh, peoples … do you want to be more detailed about that at all, Paul?

Paul: No.

Marcus: No? Ok. Euhm, …

Ryan: Why would you [tails of into a giggle]

Paul: Strange Marcus, I don’t understand it. I have only been working with him seven years.

Marcus: No, I don’t want to tell that joke, it’s rubbish.

Paul: Goh, blooming heck, take your time mate. We’ll just sit here.

Marcus: Here we go.

[Cow jingle kicks in]

Paul: Oh, for crying out loud. That, that has to go! That was the thing that was endlessly looping.

[Jingle stops]

Marcus: Yes.

Paul: [reads from the chat room comments] “Paul has an actual egg for a head.”

Ryan: Excuse me, what is your conversation about?

Marcus: An actual head. There is a joke.

Ryan: We can’t keep people from following.

Paul: Yeah, I understand that. Can we kick that person? Actually there are a few people being a bit dumb.

Marcus: I can do a Christmas joke.

Paul: Yeah do … Nooo!

[background laughing]
[...]

Marcus: Blame them!

[giggling]

Marcus: Two men, two snowmen standing in a field.

Paul: Yes.

Marcus: One says to the other: “Do you smell carrots?”

Ryan: Carrots for noses.

Marcus: That’s actually quite a good joke. I know it’s kind of traditional not to have any reaction, but that is not a bad joke.

Carry on.

Paul: Is that it? Can we move on now? Let’s talk about CSS3.

Marcus: Oh no, I am just going to interrupt.

Paul: Let’s talk about …

Marcus: That’s a good set of interruptions.

Paul: You’re not going to interrupt Inayaili, because she is far too nice.

Marcus: No, I am going to interrupt you.

Paul: You can’t do that, it would be like …

Ryan: She came all this way.

Paul: It would be like, I was going to say kicking a puppy, but people get upset about that.

Inayaili: And I brought cupcakes.

Marcus: Yes, exactly.

Paul: And you brought cupcakes. Yeah. That’s made up for the fact that Relly couldn’t be here. In fact we ought to have the cupcakes brought in. I feel they should be coming in.

Right. Let’s talk about CSS3 and get to grips with some of it. Can we start really basic for people, because not everybody has the time to kind of look at CSS specs and read all the articles on it. So give us a really good idea of what kind of things does CSS3 allow you to do.

Inayaili: Well, I think the main thing it allows you to do is to have a cleaner mark-up. So when you are creating your HTML you can have a much more semantic, with less classes, with less id’s, markup. And it allows you to target some elements without adding a class.

Paul: Right. So we are talking about the improved selectors there. Things like the nth child.

Inayaili: Yeah. And then of course there are the other, more visual things: like adding text shadows, and border radius and box shadows and stuff, much more easily.

Paul: Sure. OK. So why, you obviously started talking a lot about CSS3. Why have you got excited about it? Presuming you are.

Inayaili: Yeah. Exactly because of that. I can just create the most, cleaner markup possible, without having to create lots of divs, and lots of spans, and all that mess we used to do before, and so much more flexible. You don’t have to have Javascript to do some things, and especially because I don’t really do Javascript. So I like to do things in CSS – if I can.

Paul: There is an argument, isn’t there, you brought Javascript up there, that some of the things you can do with CSS3, actually begins to kind of stray on the territory of being behaviour, rather than design. You could argue things like hover state is already an example of something that is actually behaviour. So should we be doing those kind of things in Javascript, really? If we are going to be all semantic and all kind of correct about it. HTML is your content, CSS is your design, behaviour is your Javascript. Should actually these things be done in Javascript or is that just a bit [tails off]

Inayaili: I think that, euh, I am going to give the easy answer: It depends.

[Laughter in the room]

Inayaili: But, euh, it really does depend. If it is something, just a nicety, something that is going to be a little detail on the website, it’s not really crucial to be visible by everyone, and it can be easily done in CSS, much easier than with Javascript, then why not?

Paul: Yeah, absolutely. I think it is about pragmatism, isn’t it.

Inayaili: Yeah, exactly.

Paul: You do what the right thing is in any particular circumstance. I mean the other, I guess argument, against doing lots of CSS3 at this stage is one of browser support. Talk us through a little bit where things are with browser support, you know, what supports what and you know what can you start to do. You probably don’t know it all of the top of your head – that’s a really unfair question. But what is, you can be general, fudge it, make it sound like you know what you are talking about [laughs].

That’s what I do.

[Laughter in the room]

Paul: You don’t remember exactly what every single CSS is supported by what version of a browser – or is that just me who doesn’t know stuff like that.

Inayaili: Yeah.

Paul: OK. I’ll shut up at this point. Now then, would you like to answer that question and dig me out of the hole, thank you.

Inayaili: Yeah, well, it’s very hard because Internet Explorer, until 8, still doesn’t support CSS3, CSS3 selectors, so it is quite hard knowing that the most used browser from 6 to 8 doesn’t really support that. So you have to be careful in a way, you have to look at your stats, you have to see what your users are browsing the web with. But I think that most things are supported by Firefox, Safari, Opera and then CSS3 is not supported by IE.

Paul: OK. So how then do you justify doing work with CSS3, when there is so much dogginess surrounding the support, and it is so patchy, and things like that.

Inayaili: Well, in terms … One thing that I really like using with CSS3 is the advanced selectors. They just make your life really, really easy. Like if you are styling text, adding margins to paragraphs, and headings, and stuff like that, you can do it much more quickly with CSS advanced selectors. And if some browser doesn’t have a specific margin or a specific padding it is not going to break the layout. You have to be careful that way. There is also some nice Javascript plugins they have been made recently to support the CSS3 selectors for IE. That is really, really helpful. And I also usually use a tool that is called Modernizr, to [tails off]

Paul: Yeah, we mentioned that earlier.

Inayaili: So, you can kind of, euhm, it’s not having doubled the work, it’s not having to do the CSS for one browser, and then for another browser, with Modernizr you can kind of adapt your design based on which CSS properties the browser supports or not.

Paul: Sure. I mean, you wrote, I just had it on the screen. You wrote an article. This is just a little bit a move away from CSS3, but it does kind of all relate. You wrote an article for 24 ways, euhm, about having a field day with HTML forms. Which I thought was really interesting about some of the new stuff that can be done with HTML5 as well, and kind of combining that with CSS3.

Inayaili: Yeah.

Paul: Do you want to talk through some of that kind of stuff? That was a really interesting article and not everybody has probably seen it.

Inayaili: Euh, about what I talked on the article?

Paul: Yeah. You can’t remember, can you?

[Laughter in the room]

Paul: I wouldn’t be able to, and I can’t even remember what I wrote about this [year?] It’s nothing like throwing a curve ball in, isn’t there?

Marcus: I’ll save you for a minute, because I just love, a tweet from Matthew Panel [spelling?] here, which is: “Jeezes, is this Boagworld stuff still going on? Damn A-listers wasting my bandwith.”

[Lots of laughter]

Paul: Get him on the show. Tweet him back and say “Come on”.

Marcus: Yeah, ok.

Ryan: We can get him on Skype.

Paul: If we can get him on Skype, get him on.

Ryan: Get him to ring Boagworld.

Marcus: He is complaining about the lack of John Oxton on here.

Paul: Ooh, why didn’t we get John Oxton on?

Marcus: Because I can’t think of everything.

Paul: But I rely on you to think of everything. See, I just think it is quite interesting. I have got to say, I have got to be honest with you, that I haven’t, that I haven’t looked massively into HTML5, and CSS3 yet, I kind of know what they do in principle. I have had a little play around with them, but I have not actively used them yet, because I keep feeling it’s not quite there, it’s not quite time. But I think to some degree…

Inayaili: I disagree.

Paul: Yeah. I know you do, and that’s what I am interested in, because I think somehow, I am falling into something I know is wrong, and I know a lot of other web designers feel, they look at something like CSS3 and they go: “Oh, browsers don’t support CSS3″. Like it’s a blanket statement – if that makes sense. You know, that CSS3 has been taken as a whole, you know where some bits of it do have support – which I guess would be your argument, would it?

Inayaili: Yeah. I think people just dismiss it by principle and don’t bother looking at what could be done. They shouldn’t be doing that really. You should definitely …

Paul: I feel told of.

[Inayaili giggles]

Paul: Yeah, but, I mean there are some things that are … It is true it is not a thing set in stone, like box shadow has just been dropped from the spec, so … Has it really?

Inayaili: Yes.

Paul: But I like box shadow.

Inayaili: Yeah, I know, lots of people did. But the specs were just too complicated. There was no consent as to how it was supposed to work, so they just decided to drop it for now. For now.

Paul: For now? But that is a classic example of something. You see that just makes me worried. Because I would have used box shadow.

Inayaili: Yeah, but if you had actually read the specs, you could actually see.

[Consternation and laughter in the studio]

Paul: I feel under attack here.

Inayaili: You could feel that vibe that this isn’t really working right, that well.

Paul: Right.

Inayaili: There were lots of red notes saying: “Is this really right?”, “Maybe we should forget about this for a while”.

And even in other things like: I was just reading the text spec on my way here, and if you go to the spec it says: “we are considering removing multiple text-shadows”. So a text will only be able to have one shadow, and if you actually follow the development… I mean you don’t actually have to read the specs. One very good thing that I actually think people should have to do is at least subscribe to the decisions that are made for the CSS. It is something like every two weeks or something? It’s like a five line post. That only tells you ok, CSS box-shadow has been dropped, and it’s something that will be useful. And if you are interested it is something that you should …

Paul: Because that’s the big thing. You have actually answered that. I was going to come back with an aggressive response, but you have answered that. Which is I think is, the average web designer feels like they are sinking under todays work. They try and keep on top of what is relevant right now, just to keep up, you know it feels like a race web design, you know, trying to keep up all the time. And then you’re turning around and say now we have to read W3C specs. I am not Jeremy Keith, I prefer to put a bullet through my head. You know? And here you are saying that there is actually a nice little summary you can subscribe to. Where can you get hold of that?

Inayaili: If you search for, I think it’s like CSS3 workgroup, or something like that.

Paul: CSS3 working group [typing]. See what we get back. We have got 12 hours to waste so… [laughs]

[reads search engine results]CSS current work.

Ryan: This is the future Paul, it is not a waste.

[Laughter]

Paul: So here we go. Here is the …

Inayaili: There is probably a blog link under navigation.

Paul: “blog“, yeah, I got it.

Inayaili: So, that’s the short summary.

Paul: Oh, that’s the summary? So you can just subscribe to that blog? And you get a nice little summary.

Inayaili: It’s not like you are going to get a five posts a day, it’s very random, I think.

Paul: Now, I have got to say, this is not the most friendly document in the world. I have just read the first line.

Inayaili: You don’t have to …

Paul: [Reads from the document] “CSS WG has no problem with depreciated DOM active”.

Inayaili: No, you don’t have to understand everything. I don’t understand everything.

Paul: Oh, OK.

Inayaili: But some things are relevant and occasionally there are some relevant things, like OK, box-shadow, which has been dropped. And you would have…

Paul: And I would have gone into a panic. An run like: “[Shrieks] I have been using that!”

Inayaili: Yes, exactly.

Paul: So what, I mean that is a big issue. You know. If I kind have gone to a client and designed them a site and I had used box shadow. Sorry, I am being quite pushy over this, but you have been to me, so … And then suddenly that has been removed from the spec and is removed from support in the browser. That site is going to break. And they are going to come back to me, quite justifiably, and say “Why did you use an unsupported, unset in stone piece of technology?”

Inayaili: Euh, well, in that case the site wouldn’t break without box-shadow.

Paul: Yeah, the box-shadows would just disappear.

Inayaili: You just wouldn’t have the shadows. So you have to be careful that way.

Marcus: There is also the argument that if you don’t pay attention to what is happening on the W3C and you don’t contribute to the talks and discussions, then you can’t complain about specification, because you have shown no interest in it, and you have not contributed to any of this.

Paul: You have got to vote, otherwise, …

Marcus: If you are not going to be involved with it, and you are not going to talk about it, then you can’t complain about it.

Inayaili: One thing that is also important to understand, and I was just talking to Jeremy Keith outside, and he agrees, is that you don’t have to use the CSS3 to contribute. It’s very useful if you just go there, if you just try a few things, you don’t have to read the whole thing. That’s quite boring. But if you do your own things, try a few experiments, see how stuff could be used in real life, and then you send them your examples, or you send them your comments with an explanation on why you think something won’t work or something won’t be useful. And that is something the W3C are always looking for, like real examples to base the specs on.

Paul: Yeah, I mean it is difficult, isn’t it? Because, you know, OK, I just keep coming back to this. An everyday designer like, you know, I don’t know, Ed sitting through next door, doing his work in the other room right know.

Marcus: Will he be offended at that? Everyday he designs.

Paul: But he is!

[Laughing]

Paul: Alright, but he is not, he is NOT Jeremy Keith. Do you know what I mean?

Marcus: Nobody is Jeremy Keith.

Paul: He doesn’t, he can’t think conceptually. So what I am saying is that only a certain group of people is getting to really play around with this technology, and really… you know there is people like Andy Clarke, people like Jeremy Keith, that got the time, because of where they are in their careers …

Marcus: They are not being [..] by bullying project managers.

Inayaili: I don’t think it is because they have the time. I think it is because they are really, really interested in what they do.

Ryan: Yeah, outside of work it’s not. It’s not just a work thing, they do it in their own time.

Inayaili: I think if you really, really – I don’t like using this word, but passionate – about what you do, you will have an interest outside of 9 to 5.

Paul: Oh, absolutely, I do agree with that. I do agree with that. I also, there is a question if, you know, do you have to be, I am trying to think of the term, do you have to carry a certain reputation before anybody takes a blind bit of notice of you. You know, if I …

Inayaili: No.

Paul: OK.

Inayaili: The other day I was writing a very short post for my blog about the use of multiple columns in text and I was just doing some very basic examples just to try, just to make sure the example was working, and I was trying in Safari and Firefox and I noticed that one thing, it just wasn’t doing what the spec was telling it should be doing. And I thought: “Oh, maybe I just should report it to both Safari and webkit and Mozilla”.

Paul: Right.

Inayaili: And I just did a quick comment on the bug report website and it was actually like five minutes later it was actually introduced as a bug in Firefox.

Paul: Oh.

Inayaili: So, it doesn’t matter who you are.

Paul: That’s brilliant.

Inayaili: You can contribute.

Paul: So in your experience it’s been a very open process.

Marcus: It’s just about being bothered basically. Isn’t it?

Paul: Yeah.

Inayaili: Yeah.

[Laughter]

Paul: You see. But perhaps, it is just me or not, or a lot of other people, but you just presume you are not really going to get anywhere. You know, that you are just another voice in the crowd.

Inayaili: Yeah.

Paul: Perhaps I am being naive. You have been involved a little bit in this kind of process as well, aren’t you? Rachel? What has your experience been of dealing with these working groups and talking to them, and that kind of stuff.

Rachel: Certainly in the past with web standards project things. I suppose my experience is always been fairly positive. In that I think that generally, groups are just interested in what you have to say.

Paul: Right.

Rachel: You know, I don’t think there is any kind of wall up that says: “No, we only listen to people with this kind of reputation”, or whatever, but you know, …

Paul: Oh, that’s good.

Rachel: I think, it’s … you just have to get out there and start talking about stuff you care about really.

Paul: Right. I think that’s brilliant. You changed my view over that. I made perhaps assumptions that were false in that situation.

Inayaili: And for that example I just gave you, I didn’t have to read the whole spec, just to do my bit, I was just literally reading a very small proportion of the spec, just to write that quick blog post. And I came across a bug.

Paul: So is there any other kind of, moving on from that a little bit, is there anything else you get really excited about CSS3. There are people out there, that are like me, and maybe haven’t done their homework as well as they should be. What do you want to let them know about, that will make them go out there and get them stuck into this, and having a look.

Inayaili: I started to be really excited when I started to understand how CSS3 makes my life easier.

Paul: Yeah.

Inayaili: And, makes clients have to pay less, because you are spending less time dealing with some things that would take a long time, to work cross browser.

Paul: Can you give me a really good solid example of that. You know, what could I do with CSS3, that would make my life simpler.

Inayaili: Well, I am just looking at the example of the 24 ways post. And it just makes your life simpler coding forms in a big way. You can target different types of input and different labels, very easy.

Paul: So, this is using those advanced selectors, you were talking about.

Inayaili: Yeah.

Rachel: And I think another thing that I have certainly found, but I wrote on 24 ways about that as well, is in situations where you don’t have control over the markup. And that happens quite a lot.

Paul: Ahaaa!

Inayaili: Yeah.

Rachel: It’s that, if you are dealing with some CMS for instance, that spits out a load of markup, and you want to put rounded corners on something, or you might want to inject markup into that. But you can still target that CSS3, and have the effect.

Inayaili: Imagine you have a table, a data table, and you want the rows to have different colours.

Paul: Alternate.

Inayaili: Like you want red, blue and green. Red, blue and green. Red, blue and green. You can do that with CSS in like literally 30 seconds.

Paul: Rather than having to put a class on each one.

Inayaili: Yeah, and if you are really worried about “Oh it won’t show up on IE”. You can use one line of jQuery, or a little Javascript plugin and it will work, if you really … It’s not something that is going to affect massively the look of your website. It is just a background colour in a few rows. But it’s just instead of building this very complex Javascript thing, you can do it in CSS like that.

Paul: I mean, that I really, really get. We got a client at the moment where that is a perfect example. They got a website of something like 33,000 pages, it’s a big institutional website. And, you know, we are redesigning their site, and it’s all in a content management system, and all that content has been put in, you know, by various content providers. And we now got to go in, and that content has got to remain the same, but we have to redesign the site around it. So the HTML is staying the same. So it’s a really good example where maybe some of these advanced selectors will be really beneficial. And after all isn’t that what we said about HTML?

The Zen Garden right back in the early days. “You can change the whole look of your site without changing the HTML”, but really, we were fibbing a bit, weren’t we, until relatively recently. You would have to put bits in it.

Inayaili: If you have to go to the table and actually add a class in it for each row, you are doing it wrong. Well you are not doing it wrong, but you are over complicating.

Paul: You are not living the dream.

Rachel: And it is presentational as well. When you are sticking that kind of markup in, in your document it’s actually you are doing it, because you want something, it’s a presentational thing, you want to make striped tables. You shouldn’t have to stick something in your markup to make striped tables.

Paul: Yeah.

Rachel: It’s completely a presentational thing.

Paul: Yeah, completely. Ok, that, you have got me. You have convinced me.

Inayaili: Good.

Paul: You have got me on board. And actually, the bit that gets me most is that it takes us one step closer to that real ability to separate content and style. And THAT I am entirely behind. Especially for some of the, you know, the big clients that we deal with, there websites are too big to be changing huge amounts of content, so that is brilliant. And even for smaller websites, that’s obviously still very very relevant stuff.

Inayaili: But even for a smaller thing. Imagine you have a list of items and you have a margin for every item in it, and you don’t want the last one to have a margin, because it doesn’t need a margin and if it does have a margin in IE6 it is fine, but you can remove that with CSS from all the other browsers.

Paul: The other idea that always gets me, is that when you have a menu item, and you divide the menu item with a border-bottom. I bet you don’t want it on the last one, you can remove it. If it’s there it’s not the end of the world.

Inayaili: Yeah, it’s fine.

Paul: Exactly. Yeah, brilliant. Brilliant stuff. Thank you SO much for coming in and chat about that. Much appreciated and you are hanging around for a bit, aren’t you?

Inayaili: Yeah, I am.

Paul: Excellent stuff. Brilliant.

Thanks goes to Joke de Winter for transcribing this interview.

Running a successful web design agency

Posted in Web strategy on March 24, 2010 by Paul Boag

Mike and Keir from Carsonified interview Marcus and Paul on how they have made Headscape the successful web design agency it is today.

Keir: Okay, hi Paul

Paul: Hello!

Keir: Thanks for joining us.

Paul: That’s alright!

Keir: Thanks for agreeing to let us turn the tables.

Paul: Are we not saying hello to Marcus?

Keir: Oh sorry, hello Marcus!

Paul: He’s refusing to talk now!

Marcus: Hello!

Keir: So we’ll ease you guys in gently, first of all to you Paul, obviously now your company has grown big and strong and you’ve moved on really from being a web designer / builder…

Marcus: I want to see where this is going!

Paul: You’re going to ask me what my job is aren’t you?!

Keir: No! I’m not going to ask that I’m just going to ask do you miss doing that, being hands on, that sort of thing?

Paul: I have moments of it, yeah. Because I’m somebody who has a short attention span, and I like skipping from thing to thing, I felt like I’d reached a point where when I was designing, all my designs were looking the same. Which was an indication that…

Keir: I think Marcus is nodding for some reason Paul..!

Paul: That my designs all look the same?! So that to me was the part where I had to start moving on and doing different things. But no, I dabble still, I do Boagworld, I do Headscape, but yeah, I do miss it sometimes.

Headscape website

Keir: On the same subject, do you find it hard to relinquish that control at all?

Marcus: No!

Paul: (Laughs) No! Not at all!

Marcus: Sorry I was answering for Paul!

Paul: And I think you’re correct! No, I have certain standards that I think we should keep to as a company in terms of quality of code, that kind of thing. But the guys at Headscape are very good. So it’s often semantic arguments that we have rather than anything of value! In terms of design I have to battle against the fact that I have personal preferences in that I have a design style…you have a design style. When you’re working with a designer, not everybody at Headscape produces design that is in line with my personal aesthetic, and it should be that way because you want a broad range of stuff, but sometimes I struggle to recognise that this is a good piece of design, it’s just not what I like.

Keir: Is there not a Headscape aesthetic, a little bit?

Paul: I think there is to some degree, we pretend there isn’t and we tell our clients there isn’t, but I think there probably is, and I think that’s largely come about (a) because of my own personal bias, but (b) because of the type of clients we work with. With the majority of clients we work with we would be laughed out of the room if we did the kind of stuff you do.

Marcus: That’s a bit harsh! Bloody Hell!

Paul: I’m not saying its bad! It’s great design!

Keir: I think a nice big pumping heart on the homepage of Headscape? That would go down a treat Paul!

Paul: And I know that Mike can do that kind of design.

Marcus: We’ve been talking Mike up a lot lately.

Paul: I know!

Marcus: We’ll have to start interviewing you now!

Keir: Right, back to the questions!

Marcus: As an inspiration for the guys at Headscape to maybe go down a different route, and your work is very inspirational from that point of view. They all say ‘Ooo Yeah, we like a bit of that!’

Keir: That’s nice to know!

Paul: They need to have opportunities to break out from the constraints and the boxes that they’re put in because of the type of clients that we work for.

Keir: So that raises an interesting question, how do you deal with that internally when someone comes and the brief maybe doesn’t quite need a new avenue to go down – how do you hold a designer back from experimenting, do you suggest other outlets internally?

Paul: To be entirely frank with you, our problem at the moment is the other way round, that our designers self-censor themselves, because they work on so many of these kinds of sites, and they predict what the client is going to say and so hold back sometimes.

Keir: And are they normally right or is there room for expression?

Paul: Yeah, they are normally right, but that’s not the point. I see it as our job to push the client. I mean there’s a classic example, I won’t name the client but there was one recently that said they wanted something ‘different’ and ‘radical’ and so we said ‘are you sure?’, and then we did all this cool stuff for them and then they said ‘could we tone it back?’ and so I turned round and said ‘you wanted something radical?’ to which they responded ‘Yeah, we didn’t really did we?!’ (Laughs)

Keir: So what do you see as the hot topics, or is there anything in the web world right now that really excites you? Or even you Marcus?

Paul: (Pauses, sighs) No. No!

Marcus: I’m much more business oriented, so things that excite me are…

Paul: Spreadsheets?!

Marcus: No, no… God no! Because we’ve been doing this for a long time, and we were never the sort of people to say ‘in five years time we’d like to be there’ but then suddenly we find ‘Oh, we’re there!’, so then you find yourself saying ‘What now then?’ and so I’m more interested in what the new thing would be. Because I’m not a designer, I’m not a developer, so I don’t really feel it’s my job to get enthused about anything in particular, HTML5 for example. I’m like, ‘great, cool!’ Paul is much better placed to answer that question as it’s not my specialism. My specialism in this world, if I have one, is talking to people who have websites about what their website could do for them, and so to a certain extent I need to be informed, but he does that for me.

Boagworld Podcast Live

Image Source

Keir: So how do you split your work for a new client? I contact Headscape for whatever reason, we agree to meet, I give you a brief outline of what my requirements are, would I speak to you (Marcus) and what sort of stuff would you want to get out of me and then would you hand over to Paul or the Project Managers?

Marcus: It varies. If it was a really big project I’d say to someone on the phone…

Keir: Give it to someone else!

Marcus: (Emphatically) No! No! Rather than have a lengthy chat on the phone I’d say I’ll come and meet you, and it would usually just be me at that point. And for virtually all projects people will come to us with a ‘We want to do something’, not a ‘We’ve heard you guys are quite good, what can you do for us?’ 99% of the time people have a pretty specific idea that they want us to do x, y or z, so I’ll go along and talk about that, and question why they might want to do that – that’s really the big part of it actually. Why do you want to do that? How’s that going to help you? Is it going to make you more money, is it going to make people who come to your site happier?

Keir: So very much from the business angle, the benefits of having a web presence or what expanding it will do for their own business? Bottom line stuff really?

Marcus: Yeah, to a certain extent, but also that’s the kind of nice client who comes to us. Quite often what we’re doing is responding to invitations to tender, and then it’s case of a brief will come through and we will respond usually with a phone call and questions – what do you mean by this and this and this, are you sure you want to be doing that. We’ll respond with a proposal and hopefully we’ll be invited back to talk to these people, at which point I’ll wheel him out (Paul!) and he’ll enthuse at them for half an hour!

Paul: It takes me a while to latch on to the part of the project that excites me, because if you go into a pitch not excited about the project, you ain’t gonna win it.

Keir: Sure.

Paul: But once you’ve indentified that thing in it that really grabs you and you want to do then I’m away and it’s great. So I mean, I tend to go in at the pitch stage and I give the big presentation. Then we normally, if we win it, at the beginning part of the project is where I flesh out that stuff that I was enthusing about, so where we really develop and set the direction of it. I talk the client through the process, help them to focus the vision, and that’s done in conjunction with the development team, the developer, project manager, designer, all the rest of it. Once that process has been done I step back and the project manager runs with the project.

Marcus: That’s the big bit out that I do. Requirements, information architecture, stakeholder interviews, all that stuff, and then I’ll step away from it usually. Then project managers, designers and developers get on and build it.

Paul: Periodically through the project I keep my eye on it to make sure that that vision that was created at the start of the project hasn’t been lost at any stage.

Keir: Just quickly because I’m really keen to know, there’s a lot of talk in the internet about, and I hate the term, spec work. Mark and I have talked about this a lot. I’m of the opinion that doing a tender or response to a proposal could be deemed as doing spec work in some respects because by the definition you’re doing work – how much time or value and what’s the end product of that…

Marcus: Shall I tell you how I define it? I as a sales person, and I do information architecture as well and that is all paid work, but at least 50% of my role is as a sales person and sales people don’t get paid by clients.

Paul: They’re a cost of sale.

Marcus: So if it’s work that I’m doing then it’s fine, if I have to get a designer to do work as part of that document, then I don’t think that’s right

Paul: Because those are chargeable people, I’m a chargeable person.

Keir: We know that Paul!

Paul: The most that Marcus would require of me would be to bounce some ideas around in the proposal stage. The pitch obviously is free; we would go up and do that. But the way that I view it actually is that spec work in my opinion is work that you give to a client that could potentially be used in the actual project. So our proposal documents aren’t spec work….feel free to disagree

Keir: No, it’s interesting because you make it sound like you go to a pitch with nothing?

Marcus: Correct. We don’t pitch any graphics ever.

Paul: No. Never. Never any graphics.

Keir: OK, so how much work would you say goes into a pitch?

Paul: Into the pitch itself?

Keir: Not the actual time of the pitch.

Paul: OK, preparing for the pitch, well the proposal, a lot of work goes into that.

Marcus: At least a day. Usually two.

Paul: Because that, with the type of work that we do, there’s quite a lot of boilerplate in it, ‘We’re Headscape this is what we do’ but with large public sector organisations that we tender for they want to know a lot of detail like financial history, they want to know the name of your third child, but it’s not a document that necessarily contains lots of ideas.

Marcus: A good way to think about the process is – we’ve won the work, and the process usually starts off with him analysing the existing website, the brief they’ve got, talking ideas, he’ll make a bunch of recommendations out of his own mind as it were. I’ll then test that on a load of stakeholders via one to one interviews. Based on that we’ll then put together a report which pulls all that together. Then we’ll do information architecture, then we’ll do mood boards that will kick in to the actual design. And that’s a load of work that I’ve just described. If we value giving designs up front then all of that is pointless.

Paul: It’s the fact that before you make a recommendation to the client, either in terms of visuals or in terms of the direction or vision of the site, you need to understand the client, you need to understand the business and the objectives. You never get all of that from a brief. It doesn’t matter how thorough they think the brief is. So therefore our proposals are very detailed responses to the brief that has been provided. But oftentimes that not what we’ll end up delivering. Often we’ll win the work, do a lot of research work and then turn round to them and say ‘Actually what you asked for out of the gate was this, and that’s not the right thing, we need to be going in this direction.’ So the proposal document only really exists to establish our credibility and to get us to the point of actually winning the work. There’s not loads of stuff in that proposal that they could take and say ‘A-ha’ I really like these ideas I’m going to take these and go with another agency. It’s not that type of document, but with a piece of speculative design they could do that, they could say ‘A-ha’ I really like this bit of design, I’m going to take this and give it someone who is cheaper.

Marcus: To finally nail this point to the table! We see proposals and pitches, the proper response from us is to basically tell our prospective clients that we can do a really good job, and give them lots of reasons why. We think your project might be really similar to the one we did for this client. Look at all the work we did on this and this was the process we went through, with lots of pictures of what we did for that client, but no actual ‘ We might be able to do something that looks a bit like this for you.’

Keir: That’s a historical thing though because you’ve got a canon of work, you’ve got heritage. What would your advice be to young people up and coming, 18, 19 20 years of age when you’ve not got that canon, you’ve not got that history?

Paul: I would encourage them to actually do some voluntary work.

Keir: Build up the portfolio

Paul: Yeah.

Marcus: It’s the same when you’re looking for a job, we want to see your portfolio, what you’ve done before and we think clients are the same.

Paul: My attitude is, let’s take a piece of speculative design work is going to cost two days of a designers time – I’m just plucking random figures out of the air here – but you could spend two days doing speculative design work for some dodgy guy who says ‘If you do some speculative design work you’ll win the business’ – and let’s be honest, these are the kind of guys you are going to be working for when you start out – screw that for a game of soldiers, he’s just trying to get one over on you. I’d prefer to spend to the two days working for a local charity that have got no money but a really worthy cause, give them a great design that they can take away and build or do what they want with, and then I’ve got a good portfolio piece.

Marcus: That said, we used to do designs up front. We were shooting ourselves in the foot doing it.

Keir: Before we move on, I think the one thing that struck me was of your comments, and I think it was in response to a particular blog post was that spec design work was actually bad for the client, more than it is for the designer which is quite a unique perspective

Paul: I was reading some of my stuff over that because I think we have a rock solid argument. I won’t go through the whole argument now because there are other things to talk about but basically it boils down to the fact that as a designer or developer you are not well enough informed at the spec stage to produce anything other than a piece of show-off work – so all you are doing is going ‘Taa Daa!!’ look how talented we are! You are not solving any problems, you are not challenging their brief, you are literally just doing a bit of fancy work. And the reality is that if you are the client you are paying for it anyway, because we have to roll the cost of sale into the project. But here’s the killer. You’re not just paying for the piece of speculative work I’ve done for you, but you’re also paying for the speculative work I did for ‘Mike’ who turned us down., because we still have to recover the cost of time we spent doing Mike’s piece of work. So the reality is your paying for your own speculative piece of work and for other people’s speculative piece of work! Sorry, I’m pointing aggressively!

Paul Boag speaking at Future of Web Design

Keir: I’m retracting quickly!

Marcus: I’m gonna get him a box to stand on!

Paul: But I get really annoyed about it and really passionate about it. I would never hire a company that does speculative design work because I’m paying for other people’s design work! It doesn’t make sense!

Keir: Moving swiftly on! (laughs) Going back to the original question! So there’s nothing exciting going on in the world of web?

Paul: Sorry, I’m very aware we’ve gone off on a tangent! There are two levels of excitement. There’s the Silicon Valley, web app type of excitement that everybody features. The cutting-edge, we’re-some-fancy-agency-startup-with-lots-of-venture-capital. And then you go to a conference and there are large companies that are ‘dealing with scalability with over a million hits!’, and you think to yourself ‘very interesting, but no kind of impact on my life’ – but over time that sort of cool stuff tends to trickle down, and I get excited at the next tier down. I get excited when I start to see some of that really cool stuff that maybe is old hat now, that everybody was talking about a year ago or maybe two years ago, when I start seeing that appearing on average websites. Websites that the vast majority of us are working on.

Keir: Can you give an example of something that has done that for you recently?

Paul: Just this whole web application culture of Javascript driven, application-like / desktop-like, because for such a long time that was only for things like Gmail and Google Maps and stuff like that, but now that’s all trickling down and you’re starting to see rich internet applications in boring everyday sites, whether it be a university site or you know, Sussex Police! Anna was telling me about a Police website where is you hear a police helicopter flying over you at night you can look it up the next day and find out why it was there and what it was doing! And all of those Web 2.0 things about openness and transparency as well as some of the technology stuff like AJAX, all of that stuff is now becoming mainstream. And I get excited when fringe stuff becomes mainstream, and the bigger community of developers outside of ‘The Valley’ all start doing it. That’s why I get excited about the web, and that’s why I get excited about stuff that everybody else was excited about a year or two years ago!

Mike: We wanted to move on to the subject of blogging. As a company I believe you don’t blog?

Paul: Not as a company no.

Mike: So you blog as Boagworld, but recently we’ve been intrigued to see you’ve been blogging more personally on Posterous so really we’re trying to work out, is Boagworld purely on the education side and those on your micro-blog are more personal? We were particularly struck by one article – what was the title? ‘The Idea of Personal Brands Stinks’, you use AudioBoo, you have a lot of outlets, how do you decide what goes where?

Paul: You’re making a fundamental mistake here!

Paul: I make many Paul!

Paul: The fundamental mistake you’re making is that you’re presuming that I have a strategy! Which I really really don’t!

Mike: The question should have been, what do you get out of blogging professionally and personally?

Paul: I’ve never been so professionally interviewed!

Keir: Apparently Anna can cut stuff out! It’s apparent that you might get work out of your blogging, I don’t know, but you obviously get more out of it than just that?

Paul: OK! Let me see if I can find a question in there somewhere!

Keir: We don’t do this for a living you know!

Paul: There’s a few things to comment on. First of all, without a doubt, blogging is a major marketing tool for Headscape. The vast majority of our new business comes in via that. It is definitely and categorically a business tool. But it didn’t start out that way. When I started out blogging, it was a little bit of ego – we went to @media 2005 and they got different bloggers to stand up and I thought ‘I want to be like that!’ so I get very inspired and I started blogging partly because of that. But I quickly realised no-one was interested in what I was writing at the time so the blog for me became this place where I could take what I was learning and picking up and rationalise it in a way that made sense to me. So it became a way of me wrapping me head around everything that was going on. It was also a way for me to be storing and holding the stuff I was learning because my memory is horrendous and to this day I find myself saying ‘I’m sure I’ve written something on that’ and I go onto my blog and it’s a way for me to remember. I know it sounds stupid but I really do this, and so I’ll read through my blog and say ‘OK, so that’s what I’m supposed to think about this!’ But it really helps to clarify my thinking – so that was a big part of it. But Boagworld, the domain was bought and I thought I’d write a bit about web design, it was my personal website, and as I wrote more about web design as my head was buzzing with that at the time as this was the time of Web Standards and we were getting into accessibility. And then other people started to take an interest in it and it grew and grew – and then we started the podcast which really came out of the fact that (a) I’d got an iPod for Christmas that was just about beginning to support podcasts, and so I looked for a web design one and there wasn’t one so I thought ‘I’ll do that’ because it’s easier than writing one and I’m crap at writing.

Marcus: (Shyly) Hello, it’s Paul, this is the first ever podcast!

Paul: (Laughs) Which is pretty much what it sounded like!!! It’s like stepping back in time listening to those early ones.

Keir: How long ago was that Paul?

Paul: 2005/2006? I’ll have to have a look. No, it must have been 2005. It was growing, it was building momentum until it eventually became this thing of it’s own. It was beginning to have marketing benefits and I was beginning to spend some of my work time doing this. So relatively recently I came to this realisation that Headscape had robbed me of my blog! Which I’m quite happy with as it’s turned into this great marketing tool which is fun to do and I love it. But I had nowhere to share, I dunno, a silly video of James or some cool thing that was nothing to do with web design or whatever else. So that’s where Posterous came from. It was just an easy way for me to talk about something that wasn’t web design. Occasionally bits of web design get in there – I’ll tell you my dirty little secret for this one, which is that often, if there’s an idea I’ve had, I’m too lazy to write a blog post about it, I’ll record a video. But I won’t put the video onto Boagworld as there’s an expectation that I’ll have a transcript of it to make it accessible, and so I just put it on Posterous to get around it which is really naughty and I should be ashamed of myself! But I do occasionally do that. But most of the time Posterous is just about me having fun. Then you get into things like AudioBoo – AudioBoo is my idea of micro-podcasting, like Twitter is micro-blogging. So it’s little snippets of tips and advice. So, how do I decide what goes on where?

Keir: You’re interviewing yourself now!

Mike: Let’s go and get some coffee! Marcus?

Paul: So basically, if it’s not good enough and not long enough to be a blog post, it’ll become and AudioBoo, that’s if it’s about web design. If it’s about web design and it’s too long for an AudioBoo, it’ll become a blog post. If it’s not about web design, it’s Posterous.

Keir: So you do have a strategy!?

Paul: But where it falls down is where I’ll do a little AudioBoo about something which is the beginning of a thought, then it ends up as a blog post and then it ends up on the podcast as well. So it kind of ripples through.

Keir: That’s cool – it’s interesting to know all that but what I’d personally like to know is what makes you want to share such personal stuff sometimes? I know you’re a Christian and you talk about God, but you also talk about some other personal stuff sometimes too? What is it in you that makes you want to do that?

Paul: I think it’s two things. It’s two major parts of my personality. One is that I am a massive extravert, I’m a massive show-off – I’m never happier than when I’ve got a massive audience. To be entirely frank, you know!

Keir: Had anyone spotted that?!

Paul: Unlike Marcus I can’t sing or play a musical instrument! The best I can do is jump up and down, wave my hands in the air and say ‘Look at Me!’ So there’s that aspect to it. I think there’s another aspect to it. Somebody said to me right when I was a young kid, they said Paul, the thing about you is that you live with your heart on your sleeve, what you see is what you get. And I still think I’m like that now. I’m a very open person. If I’m grumpy everyone knows I’m grumpy, if I’m happy everybody knows I’m happy. I live my life in the open and always have. So I do that online, because I’m not a different person online than I am offline, and I know a lot of people are, but I don’t choose to be that.

Keir: Thanks Paul, that’s a nice explanation.

Mike: OK, one of the questions we have is about honesty and speaking and blogging. Do you ever…

Paul: I make up stuff all the time!

Mike: But it’s very hard I think to always be honest, in all spheres of life. Do you feel you are always as honest as you are?

Paul: Does this go back to the conversation we were having previously Mike?

Mike: It does yeah.

Paul: Because we had this conversation, me and Mike about when you stand on the stage, and sometimes you get off after a presentation and sometimes you go ‘Why did I say that?’ and you think, ‘I said that because I think that’s what people expected me to say’ rather than what I was actually thinking. I mean you gave the example about where you gave a talk about sketching where you said ‘Get away from your computer and start sketching’ when that’s not actually what he does. (Laughs) Well it was either a case of share an example where I had done that and I would rather humiliate you than me!

Mike: Yeah, I wanna reverse that! Anna can apparently cut things out.

Paul: No, no, no editing. We tell people that but it’s a lie! And I’ve done similar things, I’ll be honest. For me where the line comes with honesty is, I don’t think there’s anything wrong with saying ‘I think this is the way it should be’ – but where you fall down and it gets a bit shady is where you say ‘I think this is the way it should be’ but fail to mention that you’re actually there yet, we’re heading in that direction. And I’ve made that mistake too. But I do try and be transparently honest – I don’t try and dress up anything that I talk about, and in fact I’m probably a bit self-deprecating actually. Actually I think a lot of people think I’m a bit of a joker and a bit of a moron. But I do like to simplify things and I do like to take the mystery out of things – I think there are a lot of people, and this goes back to our conversation, I think there are a lot of people making out like their job is a lot fancier, a lot harder than it actually is – and we do like to justify our own existence by using lots of clever words., and having ‘processes’ and ‘methodologies’ and ‘systems.’

Mike: Cool, thanks, that’s interesting. So coming on to status, how important do you think status is in the industry?

Paul: OK, well I’m glad you worded that question the way you did, as I was worried that you were going to word it ‘How important is status is to you?’, and you’d purposely put the question of honesty beforehand! (Laughs)

Keir: We were going to ask ‘How big is your ego?’ but then we’ve scribbled that out! But this also comes off the back of your article about personal branding; the idea of web celebrity, a lot of people would refer to you as one of those.

Paul: I’m going to be entirely honest about this right – which I don’t think a lot of people are. Yes, I love it.

All: (Laughs)

Paul: Of course I love it! Of course you’re going to love it when someone comes up to you and says ‘You’re Paul Boag aren’t you, I really love what you do!’ and anyone who pretends that they don’t like being praised is a liar.

Marcus: I’ve got quite a funny story actually. I went to the Comedy Store in Leicester Square last Friday evening, and we got there and sat in our seats, and there was this young couple, both of them in their early twenties came and sat down next to us for the first half. And I kept seeing this guy look at me, and I thought ‘He’s recognised me!’

All: (Laughs)

Marcus: Nothing was said! Interval comes, I get another beer and sit back down. And he said, ‘I think I know who you are’ and I was like…you’ve got it wrong!

Keir: You’re Paul Boag!

Marcus: But supporting what Paul’s saying, I get recognised at conferences. ‘Say something’ that’s what they always say.

Paul: Yeah!

Marcus: Especially Americans!

Marcus: So I said to one guy, ‘You’re a web designer are you?’ and he said ‘No, I think my Mum’s got one of your records!’

All: (Laughs)

Marcus: It’s gone full circle now. If it’s someone young I expect them to recognise me from the podcast.

Mike: Didn’t your daughter’s friend come up and say she knew you from the podcast?

Marcus: Yes, yes, it still amazes me, because I just pitch up once a week and try and make it look stupid!

Keir: What band were you in again?

Marcus: A band called ‘Breathe’

Keir: And now it’s ‘Stroke the Toad?’

Marcus: Now it’s Stroke the Toad.

Paul: Yeah, to say you don’t like that, I mean, I was at Thorpe Park recently with my youth group and we were queuing up and some guy came up to me and said ‘Are you Paul Boag?!’ and my youth group were wetting themselves, they thought it was hilarious! And yeah I like it, course I do! And people are really kind, they’re really nice about it – but you gotta keep it in perspective right? You know, I’m a niche of a niche of a niche of a niche. I might aspire to be Leo Laporte, and Leo Laporte might aspire to be a daytime TV presenter who aspires to be I dunno, a mainstream TV presenter who aspires to be a film thing and so it goes on. And it’s the whole premise – and I reject the premise – but it’s the premise that because you’re well known, and because a lot of people have heard of you, that in some way your life is of more value. And I think that’s the point I was trying to get across in the personal branding thing. There’s this friend of mine I grew up with who got married to this Indian guy, and she works out in India – we actually raised money for her on the podcast over Christmas – and runs an orphanage out there with a couple of hundred kids who have had their lives ruined. She does more good in a single day than I will do in my lifetime. And OK no-one knows about here, and no-one is interested in her, and I get people come up to me on the Tube?? And that’s ridiculous to me! And that’s what made me angry and that’s what made me want to do that post. And then it all gets out of proportion and it all gets silly. Where in our culture – sorry this is all getting a bit heavy! – where in our culture did we get to a point where Kevin Rose can’t stand in a blimmin’ party without being mobbed by people? You know, that’s weird? There’s something screwed up there.

Marcus: That’s not weird? That’s normal?!

Keir: I guess celebrity is changing? When I grew up fame was the pop stars, the rock stars and now you’ve got tech celebrities.

Marcus: If they had a rock star in that room they would get even more mobbed, but it still happens.

Paul: Just because it’s normal doesn’t make it not weird. Just because it’s been going on for a hundred years, doesn’t make it not weird.

Marcus: I’d say it’s human nature.

Paul: Yeah, and I’m saying human nature sucks!

Marcus: Well deal with it!

Keir: OK, so it has some benefits to you, but it is important?

Paul: In the industry?

Marcus: I’ve been thinking about this. Who’s the most famous web celeb? Zeldman maybe? People with big web projects and big budgets go to Happy Cog because of Zeldman’s celebrity. Not only that – he wouldn’t be famous if he didn’t know his stuff and talked well etc etc.

Paul: The sad fact is there are designers and developers and agencies out there that are as good as Happy Cog.

Marcus: Course there are.

Paul: And there are certainly ones that are better than us. But they don’t get the exposure because they are introverted people. It makes me sad but that’s the reality.

Keir: You actually said the other day in your video…

Paul: Oh don’t quote me back! I’m going to have to contradict myself!

Keir: You said the other day that you could be introverted and be just as successful.

Paul: Yeah, I think you can, but in a different way.

Marcus: What, in a non-successful way?! You can be as good a designer, as good a developer without being famous, but if you’re trying to win business using the Zeldman / Happy Cog argument then you’re going to be a lot better off if you’re somebody who’s known.

Paul: Yeah, but you could still be known and be an introvert. It’s indentifying the methods by which you’re known. For example, Rachel Andrew. Until relatively recently she didn’t do a huge amount of public speaking, and even now doesn’t do massive amounts. But she’s written book after book after book after book. She’s known for that writing and that has given her the profile. You could be an introvert and blog, and have one of the best blogs in the world. You could be submitting gorgeous designs to CSS galleries and be winning work that way. So it doesn’t need to be by being mouthy and extrovert.

Keir: The funny thing is there are agencies out there that are as good as each other – some might win work because of their public persona, and then there are those who win work because they constantly put out a really high standard of work.

Marcus: There are others that might win work because they have a really pushy salesman! It’s just another way of marketing yourself or your company.

Paul: To be honest, look at yourself Mike. OK, you’ve done a couple of speaking slots, but you haven’t spoken a huge amount. But your work has been picked up by people, and people have gone ‘Wow, I really like that’ and that’s spread virally without you jumping up and down like I do going ‘Look at Me!’ So it’s perfectly possible, it’s just a different way of doing it.

Keir: Another question that’s worth asking is that a lot of people have become well down for their niche – recently you’ve been talking a lot about educating clients, Mike has talked a lot about creativity and where he gets ideas from., they tend to be offline. Andy Clarke talks a lot about progressive CSS, CSS3 that sort of thing, for someone who is looking to get their face known in the industry is that something they should do? Find something they’re really interested in and just push it out?

Paul: Absolutely. I remember much nearer the beginning I’d built up a popular podcast that a lot of people listened to and were passionate about. But I couldn’t get speaking opportunities. And I think it was Ryan actually, who was honest enough to talk to me about it and it was his response that was ‘I don’t know what it is that you do?’ – a lot of people don’t know what it is I do! But

Keir: That’s a whole other interview Paul!

Paul: He didn’t know what box to put me in. People like putting other people in boxes.

Mike: It makes picking speakers easy to be honest.

Paul: So you can go, ‘We need someone in this slot who’s going to talk about business’ or ‘development’ or whatever else. I packaged myself very specifically for conferences and speaker opportunities, I will talk about this kind of stuff. Once you’ve done it once, that’s it. But, the problem is you can’t do that forever. You need to re-invent yourself. Jeremy Keith is very good at that. He started off as the DOM scripting guy, then he became the microformats guy, now he’s the HTML5 guy. He knows how to move from thing to thing. He would say that his interests change and he moves on, it might be, it might be a totally subconscious thing, but it’s a damn clever thing, however you slice it.

Marcus: I would argue that this applies to life, not just web design. I’ve got quite big kids now, and I’ve been saying to them for years now relating this to subjects that they are studying, do what you like doing, not what you think you ought to be doing. It applies across the board. If you can do something well, you are going to enjoy doing it.

Keir: Yeah, that will come out when you speak about it, in the passion.

Paul: OK?! Finished with us?!

Marcus: You’ve got a whole podcast here! At least 45 minutes!

Paul: OK, well thanks very much for listening to Boagworld, we’ll see you again next week!

Keir: Thanks a lot!

Thanks goes to Andy Wickes for transcribing this interview.

Britt Selvitelle from Twitter talks about passion

Posted in Development on March 16, 2010 by Paul Boag

Britt Selvitte from Twitter talks about enthusiasm, passion and just getting your web application up and running.

Paul: So joining me is Britt Selvitelle from Twitter, good to have you on the show.

Britt: Thank you very much

Paul: I have just listened to your talk at the Future of Web Apps, which was excellent by the way, and just wanted to have a bit of chat with you about passion. Because that was the thing that really came across in your talk. You obviously started with this very melodramatic, on your knees “I love Software development” moment, which is always a good way to start when people have come in with hangovers.

Image Source

Marcus: I can honestly say I have never done that, gone down on one knee and said “I love software development”, ever.

Paul: Oh I thought you meant just generally speaking. I hope you did when you proposed.

Marcus: Yeah, maybe once or twice after a heavy session

Paul: “I love Alcohol”, “I love everything”

Britt: It is really is something I remember from years ago at school a professor of mine got down on his knees and spread his arms to the whole classroom of college students and said “I love Algorhythms!” and it really stuck in my mind.

Marcus: I wonder how many teachers are like that.

Britt: I know it was fantastic. He made such a great impression on me and I think that I would like more people to proclaim their excitement for creating these innovative bits of software.

Paul: Yeah and you gave us a quote as well which was really interesting, just tell us about that.

Britt: Yeah, Lars was one of the two authors behind Google Wave, which is of course getting huge amounts of press right now. And he said “I have been accused of being pathologically optimistic about it (google wave)” and that quote really struck home with me because, how funny or ridiculous it that being optimistic has actually become a derogatory term to people and something that people consider as being a jab.

Image Source

Paul: But that should be the ultimate compliment in a way.

Britt: of course.

Marcus: Sorry, if you are born as English person then that is just normal. We are all cynical and pessimistic people, although I am not personally…

Paul: But most English people are. You have this American dream thing going on.

Britt: Well y’know, I tell you in software development and in general there’s this fear of being overly optimistic because people have dealines and they don’t wanna promise too much because they will miss their deadlines but you have to have deadlines and you have to have structure. But the kind of energy about not being creative and excited about what you are doing is really stifling to people.

Paul: Yeah, that is what drives you and motivates you. If you don’t believe in what you are doing then it is going to be a job.

Britt: Exactly and I think a lot people end up not doing the thing, like they have an idea for the start up and they do one, and people accuse them of failing, then they do another and it doesn’t really work out, and they have this third idea, and maybe that is the idea that is really brilliant

Paul: Actually it was interesting in another interview where I gave this quote where Churchill talk about success is ‘going from failure to failure, with no loss of enthusiasm’

Britt: Yeah, absolutely. I couldn’t agree more.

Paul: And it doesn’t just apply to start-ups and things like that. A lot of the people that listen to this show are in-house developers in some corporate entity somewhere. And so often when we go in to companies and start working with them their in-house teams are ground down by politics and stuff like that and they need to re-kindle that enthusiasm.

Britt: Yeah, and I actually have a suggestion on that, something that works well for us is we currently work with a company called Pivotal Labs. And there are some contractors that are friends of ours who are really fantastic developers and of course twitters code base has been around since mid-2006. And so there is definitely some legacy, like when there is a new person they are pairing with they are always apologising, “I am sorry about this code, it is so terrible” and what’s really fantastic is when that new person (young blood energy) and say to the jaded person that has been looking at this code for three years and say “Chipper up little fella”, instead of grumbling about it, lets take thirty minutes or an hour out of our day, write some new tests and clean it up and actually touch on little bits of the code so that it improves overall and after three months, that guy will be bitter and jaded, so you need some new excitement. And often we find by moving people around, this isn’t something we have totally solidified yet because we are still working on a lot of our processes, but by kind of having some motion in the company and people looking at different things you often get some of that excitement.

Paul: Yeah, the other thing that really came across from your talk was, almost giving people permission, not that you are gonna have crap legacy code. It was this idea that it doesn’t all need to be perfect out of the gate, just get it out there, get going and lets streamline it later. That kinda thing.

Britt: Yeh, a lot of people, Front-end development specifically, at a certain point has to scale, but it doesn’t matter when you are by yourself. When you are doing a small project then the best thing to do is, like it’s the same in software, in general some people are for and against Google Optimisation, I am very much against it, I think you should just do something and rock it out and then worry about optimising it if it takes off. With scaling your front-end development team, that is not something you have to do until you have five or six people. The problem with Front-end development is that the language that we use is so expressive that they allow people to write, not necessarily good or bad code, but different code. Javascript allows you to write in hundreds of different styles, but they are all different. So it is not until now that we are all writing guidelines for how you should architect the look and feel of your JavaScript code within Twitter. But if you are just starting something, do not worry about that, get it out there for people to use.

Paul: Because you can get bogged down in that kind of stuff and you lose the momentum and the enthusiasm again. We are back to the same subject again. And talking about the whole thing of enthusiasm you struck me as someone who gets inspired by other stuff you are seeing online and you talked about different places and different things. What is it that really inspires you and what is some of the stuff out there.

Britt: I can give you one really geeky example, I don’t know what the limit is either 8 or 10 pages of apps on your iPhone. I have them all full, I have downloaded more apps than anybody I know. And those are the ones I have got on my phone. I have got several hundred sitting on the computer at home. I download these things because the concept of the iPhone and the way the user interface is constrained such that you have to innovate. I download them and I don’t really use them after that, I just want to see how they have got around these kind of constraints. Because constrained development is fantastic. That’s what I love about Twitter, because 140 characters makes you really choose your words. I sometimes spend 30 minutes authoring a 140 character tweet.

Paul: Okay, that’s obsessive!

Marcus: Basically, you hit enter and then you do the next one.

Britt: I start with a paragraph and then I slowly wittle down, until I have that core function that I want to get across.

Paul: But it is funny because so many people grumble and moan about the constraints on them. “Oh, the client wants this”, ” the client wants that”, “I can’t do what I wanna do” but, actually those constraints can be inspiring as well.

Britt: Absolutely, they are really inspired and I have done consulting and like we did a start-up in Kentucky where we did consulting for contract work and I think those constraints are necessary because the person that you are dealing with in those sort of situations just doesn’t know what you are working with so putting these constraints on them early on is often a really successful tactic.

Paul: Share the Tweetie 2 example, because I really loved that.

Britt: That’s just fantastic. Lauren is brilliant and his Tweet 2 is in Beta right now and I am helping him Beta test it. He has got this one feature where you are composing a reply to somebody, often the reply takes up the entire screen of the iPhone you lose the context of the message. So if you are trying to reply to a specific bit of the message it is only 140 characters but still you might want to check what you are replying on. And on Twitter that is fine because you can just look at the page. So he has this thing where you literally drag down the edit box, you can see a video of me doing this on the talk online, but if you drag down where you are typing it show in a de-emphasised form the tweet you are actually replying to. And then letting go it pops back up. It is something you really have to see to appreciate. It is an example of beautiful design and development that is what gets everybody at Twitter excited about what we do, creating these things.

Paul: You must find things people do with the Twitter API amazingly inspiring, because some of them are wild aren’t they.

Britt: Crazy, how inappropriate can I be?

Paul: You can be inappropriate, we can always remove it.

Britt: Yeah so, at SXSW in 2007 somebody had made a dildo-couch that vibrated whenever you got a tweet. So you put in your user name and sat down and whenever you got tweeted the dildo vibrated and I was like “Oh my God, what have we created” , it’s fantastic but good Lord.

Paul: I was in South-by and I don’t remember that

Britt: and something like that is really important to us, not only because it is inspirational and it feels good to have all these things that are changing the world. I had a guy came up to me when I was in a Rails conf in Germany in 2007, and he came up to me in a bar afterwards and said “I just wanted ask permission, because I don’t know if you allow this. I am using Twitter to send AIDS medication reminders to my patients in South Africa.

Paul: That’s incredible!

Britt: and I was like, “do I mind?, I couldn’t imagine a better way to use something”

Marcus: So it’s not just inane banter.

Paul: No, and it’s not just inane banter and dildo’s.

Paul: …and that’s amazing isn’t it that you start off with this really simple little idea. Because on the surface 140 character, because you put an API behind it’s being used in all these unexpected ways that you could never have planned.

Britt: and that’s a really good point because there are people now doing things that we could never have possible envisioned. I mean it would be ridiculously egotistical to think that we are going to come up with all the great ideas, or even a fraction. So, empowering other people and being able to feed off that and get back inspiration from those ideas!

Paul: On the subject of API’s on your talk you did talk about Alpha 1, the very first version you put out there, make sure it has an API. So, obviously you see it as a fundamental part of any decent web app.

Britt: I really do, and it something, that just came up last night when we were talking about API’s and I said “really it would be a shame to release an App, even the first release without an API” because, even if you release it and you don’t get adoption based on however you promoted it or something and then some other guy finds it and they’re like, this is what I have been waiting for my entire life. They can have access to that data and work with it and I really think that from day 1 it can define success or failure for that project. It is so easy with modern web-frameworks to toss in a basic API. It is worth the hour that you would delay the launch.

Paul: And that was the interesting thing about what you said, was that, y’know, it doesn’t need to be fancy full featured API, just do something basic, get that up and running,

Britt: It’s just amazing how people take twitter data. Even when we were small, everyday there would be an email sent out about some crazy thing somebody found online randomly. People do not give enough credit to how many people get excited about these things, they think ‘it’s just me, I’m weird’ and they do it and all of a sudden there is this big community being built around it.

Paul: and it’s quite interesting, obviously you are very much focussed on Web Apps and maybe a lot of people listening to this show aren’t building Web Apps and building more traditional web-sites, but I think even on a lot of these sites have got a lot of valuable data they could be opening up, for example we do a lot of work with Higher Education web-sites and they have lots of data in terms of courses that they run and stuff that’s going on, even that kind of stuff.

Britt: There is no doubt, I mean Twitter by no means now is a Web App, we are moving in that direction, but for the longest time we just had static pages with a bit of JavaScript spruced in. We are moving towards a sort of G-mail-esque sort of App. But, education, how many Colleges have really shitty web sites and where you have to dig through all the stuff, and how many students that are working on projects and could take this stuff and make that API and maybe create some brilliant way to, I mean, I remember being in College and trying to plan my classes and getting overlaps and classes and teachers that I didn’t know I was good or not, education is a perfect example.

Paul: This whole area of API’s, a lot of people go ‘oh API’s, that is for Silicon Valley start-ups’ y’know it is their kind of thing but actually I really don’t believe that I think it goes a lot wider than that. Y’know everybody should be looking at it.

Britt: If you have data you can make public, I think that is what a lot of people look at. This concept of an API, the idea of a public consumable API on the web is relatively new, I think a lot of people see the effort to build in, they don’t realise they have the data to put out there. They think, that’s really simple there is no reason for me to write and API. But even if you have just a little bit of data it just amazing what people will do with that. So if you are listening to this and working on something, even if you think just a little bit of the data is there, just do an API.

Paul: Of course the other thing is, that people are combining your bit of data with stuff from elsewhere and all these mash-ups and you might be contributing to something bigger.

Britt: And the other thing is that people think their data is not going to be useful to anyone else and that’s also a huge mistake and you cannot possibly imagine, like I said, it would be ridiculous to imagine that I could imagine even a tiny portion of any cases that you could use Twitter data for, so even if you think it’s useless, it’s an hour of work to throw in an API and do it.

Paul: Excellent, that’s superb and a really good message to end on, so thank you very much for coming on the show.

Britt: My pleasure, thank you so much for having me.

Thanks goes to Ben Hardcastle for transcribing this interview.

Building better forms with Steve Marshall

Posted in Development on March 4, 2010 by Paul Boag

Steve Marshall from Yahoo! draws on his many years of experience to share with us best practice in form design.

Paul: Joining me today is Steve Marshall who is here to talk about form design. Hello Steve.

Steve: Hey Paul.

Paul: Good to have you on the show, thanks for agreeing to do this. I think a good place for us to start is a little bit of an introduction about who you are and I guess why form design? Why we’re discussing that with you? So a little bit about those two things would be great.

Steve: OK, so I guess I’ve been working on the web for about ten years or so now, for the last three of them working at Yahoo. And a lot of what I’ve been doing at Yahoo has been on fairly high-profile sites that no-one would really think of, if that makes sense. You know the kind of unsung heroes of the web, that serve hundreds of thousands of page requests a day that no-one really thinks of as interesting websites in our community. Things like Yahoo TV, Yahoo Music, Games, video games – these sorts of things. And I guess really the reason I wanted to talk to you guys about this was it’s kind of a subject that’s very close to my heart because a lot of basic interactions on the web that can be made brilliant for everyone, if only people put a little thought into it – things like: search forms. A classic example for me is on google.com and even on Yahoo Search you have a search box and then you have channels, if you like, for that search so you can say “I would like to search the entire web,” “I would like to search for images,” “I would like to search for video,” these sorts of things. Typically they’re done with links. Now, if a screen reader user, for example, say goes to use that form they can fill out their search keywords, but they will never ever get to those links because in forms mode they don’t get presented with the links in the form. And so you know a little bit of thought about what actually the use case for this form is means you can maybe think about using the right elements for the right purpose.

Photograph of Steve Marshall

Paul: OK, fair enough. That makes a lot of sense. Well, you could come back with the question: “Why does that matter? Why is form design particularly important? Why is it worth us discussing?” How would you respond to that?

Steve: I guess there are a couple of things really. For one it’s essentially using the tools of HTML, CSS, Javascript the way they were intended to be used – using the right pieces of HTML for the correct use. Rather than grouping things in a semantic context, you wouldn’t group list items (<li>) with a paragraph (<p>), you’d group them with an unordered list (<ul>). And it’s just a case of doing the same with forms. Furthermore, though, it allows you to enhance accessibility and enhance usability in general, it means that your forms just work better for all the users of your site, whether they be using full on Javascript-enhanced CSS or if they’re on a really, really old crappy mobile phone that can only just about show HTML forms.

Paul: Yeah. I think as well there’s the aspect to it that forms are a fundamental user interaction on the web.

Steve: Exactly. Particularly given that we’re getting into web applications these days. A really good example of bad use of the web is Google Mail. When they first brought Google Mail out it was all Javascript and all really badly built. And because they did it this way and didn’t want to lose any functionality, they tacked on a basic HTML view. Now if they’d made the page properly and designed it with correct use of forms, correct use of semantics, all this sort of thing, then they could have just progressively enhanced until they got to the point where the main interface is and, for those user agents that couldn’t support all of the funky multi-selection and blah-blah-blah-blah-blah, they could’ve just… they would’ve just not gotten that because they couldn’t support it. And it would mean that they would have one interface to maintain rather than the, and I’m just looking at my Gmail account now, rather than the at least three that they have.

Paul: I mean, the thing is that so often forms are used, you know on an eCommerce site a form is used to make the purchase, you know it’s the call to action. On another site it’s used to signup to a newsletter, it’s kind of really fundamental stuff and don’t often get enough attention really.

Steve: Exactly. There’s a lot of talk about the ‘read-write web’ and the form is the ‘write’ part. The form is essentially the only tool – Flash aside – it’s the only tool that we have in the core HTML, CSS, Javascript bucket that we can use for all users of the web to allow them to contribute back to our sites or allow them to interact with us. So it is very important, but it very often gets really heavily overlooked.

Paul: So let’s talk about some potential ways to make your forms more user-friendly. What kind of advice would you have in regards to that?

Steve: It’s really about going back to basics; stopping for a moment and… you know it’s great to have really flashy ideas for the brilliant, wonderful things you can do with Javascript, but thinking about how your form would be interacted with if you just were using HTML. And a lot of people say “I test my site with just HTML; no CSS and Javascript.” But quite often that goes out the window when they’re talking about forms. A superb example of this is the work that Brad Wright did on Yahoo Answers with their workflow for adding a question to Yahoo Answers. Now there are hundreds of nested categories on Yahoo Answers that you can add your question to and in the Javscript-y workflow, as with quite a lot of sites, you select from the first drop-down and then another drop-down appears with a whole bunch of other categories in it, you know subcategory type things. Now what Brad could’ve done, like most websites, is just present one initial drop-down with all of the initial choices and then another drop-down with every subcategory from every choice, or presented one big drop-down with every subcategory listed with its major category or something like that. And that would’ve worked. It would’ve allowed people to select the right category, but it would’ve meant that you would have to scroll through a couple-hundred different categories to put your question into. What Brad did instead is use nested fieldsets and radio buttons so that you can select your top-level category with one group of radio buttons and then that is essentially the header for a fieldset, if memory serves, and that fieldset then contains the radio buttons for the subcategories of that category.

Paul: Wow.

Steve: It’s not elegant; you do get a really, really big form, but it makes sense and it provides the same level of information and the same flow that you would get with the progressive drop-downs. It’s things like that, just putting that little bit of extra thought in, thinking about how this might work with HTML. To go back to the search example I used earlier I have to – you know full disclosure here, this is something that I did myself about two or three years ago when I first started working for Yahoo and it’s something that various people trumpet as brilliant and I’m very proud of it.

Paul: Very modestly so.

Steve: No, but I feel like it’s an example that gets abused, but it’s a good example. Essentially, everyone as I was saying uses hyperlinks to create the channels for their search. Of course, if you don’t have Javascript, you type your search keywords into the box, you click on the ‘images’ link, for example’s sakes search for images about let’s say ‘Britney Spears,’ and what happens is you get redirected to the Image Search homepage with no keywords. Which will be really frustrating. The way I fixed that, if you will, is – rather than using links, which as I said won’t be presented to screen readers and will lose your keywords, as just two problems with it – I changed them for radio buttons and styled them to make them look like links. It’s a really, really simple change and it just changes the interaction ever so slightly so that people without Javascript, people using alternative browser modes, all these different things, can use that interaction and can benefit from it.

Paul: It’s interesting that you mention that search example. What other kind of accessibility problems are you seeing coming up when people are creating forms?

Steve: I guess most of the problems are around people not thinking about the way that their form would be interacted with in alternative browsers, and the classic example is the screen reader. But things like screen magnification: people may not necessarily group the form fields together or may put the errors away from the form fields to which they’re related and so if you’ve got someone with screen magnification or tunnel vision who doesn’t get quite such a broad view of the page – they only get maybe the couple-hundred pixels that they’ve got magnified – they don’t necessarily have the context of the error message right next to the form and so they don’t get to see that error message and will get frustrated by that.

Paul: To be honest I think that even applies with normal-vision users as well, that if you have an error message at the top of the form and you’ve scrolled down to the bottom, you need to put the error messages where you’re interacting; where the error’s occurring really.

Steve: Yeah exactly. And almost all of this stuff, with a couple of exceptions, it makes life easier for your regular users as well. It just… if it doesn’t improve life for everyone, it improves life generally for a significant enough portion of your user-base that it’s worth paying attention to, I think.

Paul: What about Javascript? You’ve mentioned Javascript a couple of times and although I would entirely agree that you need to use Javascript to progressively enhance a basic HTML version, there are some cool things and some useful things you can do with Javascript when it comes it forms and I was just interested in your opinion about what examples of good Javascript use have you seen with forms?

Steve: The absolute best one, well in fact two, that I’ve seen are on the Yahoo Finance site. One of which is the currency converter. It’s a really simple thing to do a currency converter, or so you would think. But the work that’s been put into the currency converter on Finance is so superb. They do things like: you type into the text box to specify which country or currency you want to convert from and as you type it will intelligently search through lists of countries giving you their currencies if you don’t know the currency for them. Currency codes if you search for currency codes. The full name of the currency and a whole bunch of other stuff. It’s just really smoothly designed. But if you don’t have Javascript, it still gives you a very good base interaction. The other example on Finance is, you have the ability to change the layout of the ‘Top Stories’ page. Changing layouts is something that a lot of people do on a lot of different sites, typically CMS type things. What they’ve done on the Finance site is made this thing work with Javascript, but it’s actually been built so that for screen readers and for various other users it works flawlessly; you don’t necessarily have to be able to see the form to be able to move the items up or down in the list. And quite a lot of people would say: “OK, well you should be able to drag and drop the items.” Well, that’s great, but what about the people who can’t use a mouse, for example… and things like that have been considered.

Paul: Do you think that there is a case where, although something works at a basic level without Javascript enabled, that it’s not always necessary to provide exactly the same functionality?

Steve: Oh, completely. That’s the interesting thing about the likes of the currency converter and the Finance layout changer: it’s the fact that the functionality is not presented identically, but it still gives you the core functionality, particularly with the currency converter – it still gives you the core functionality you want to be able to convert from one currency to another – it’s just that with the Javascript version it gives you much more entry into it, so you can do things like say “I’m going to Guatemala, I don’t know what the currency is, but give me the Guatemalan currency exchange with the Pound.” You don’t have to know that, whereas, with the non-Javascript version if memory serves, you would have to know which currencies you want. It gives you the option to search for them, but to use the interface you would have to know those currency codes. So yeah, using Javascript to provide a different, but enhanced interaction is perfectly fine so long as you can achieve the same results. And that’s the key thing, it’s thinking about what the problem is and what the best way to solve that problem is in the situation you’re in, whether that be plain old HTML or whether that be fully WYSIWYG, Javascript crazy nonsense.

Paul: Heh, “crazy nonsense,” is that a technical term?

Steve: Yes, that’s a very technical term.

Paul: OK, for some of the people out there that maybe are not the Yahoo’s of this world, they’re not the Google’s of this world, that are just basically creating fairly basic sites, what’s the fundamental advice that you would want to give people about form design? What are the things that they should be considering at the most basic level?

Steve: OK, I guess the big thing is, as I’ve said a couple of times, think about what your HTML is doing. By all means think about how you would like it to work with Javascript, but before you start implementing, think about how this should work without Javascript and without CSS. It’s also worth paying attention to accessibility experts in the world because that may impact the way you create copy for your form, for example. One of my absolute favourite pieces of advice is one that Ann McMeekin gave at a talk she did for the Web Standards Group where she told everyone there that apparently screen readers in certain configurations will read out the legend of a fieldset before each and every field, before each and every input within that field. So for example if you have a field whose label is ‘The Web’ and the legend of the fieldset that it’s in is ‘Search’ that’ll be read out as ‘Search The Web’. Try to use these sorts of thing to your advantage, but at the same time at least be aware of them so you’re not flying in the face of your users essentially and making their experience worse. Yeah it is really all about just thinking about what is the lowest barrier to entry, what is the core functionality that you’re working with.

Paul: You mentioned earlier ‘form mode’ for screen reader users. Can you explain that a little bit more? Because I don’t think… I confess I only relatively recently found out about this ‘form mode’ and I don’t think a lot of users realise the consequences of that. Can you explain how that works?

Steve: OK, so – full disclosure, I’m not an accessibility guru, this is all information I’ve picked up from having conversations with our accessibility gurus here. Essentially, screen readers are modal. Because the users of screen readers can’t see the web page, the screen reader presents them with various different interfaces onto the page and you can read through the page as a normal user would in HTML, reading through element by element, paragraph by paragraph. And that’s fine. But when you want to interact, you obviously need different types of controls and so screen readers provide what’s known as ‘forms mode’ and this is a special mode for editing input and working with forms where the screen reader will only present, as I understand it, form fields, labels and titles of fieldsets. So links, paragraphs of text, these sorts of things won’t be presented when you’re in ‘forms mode’.

Paul: That has real serious consequences doesn’t it?

Steve: Exactly, that has massive implications. So quite often people will provide explanatory text after a form field that’s not entirely clear or whose label is not entirely clear, saying ‘You need to fill out this field in this format’. Date fields are a classic example. They will put a paragraph underneath saying ‘Must be in the format ddmmyyyy’ and the screen reader user will never get that because it’s being presented to them in a paragraph (<p>). If the person building that form just took a couple of minutes to rethink the way they were putting the label together and put the label with ‘Date’ and then a <span> around ‘Must be in form whatever’ inside of the label and then styled it however they wanted, the screen reader user would get that and they would get all the advantages of knowing what format it should be in.

Paul: It strikes me it’s all about actually using the form tags that are available to us to the full degree. So many of us don’t use things like groups and legends and all of those kinds of things.

Steve: Yeah precisely. The interesting thing is that these things that aren’t really used are actually really, really beneficial. So for example fieldsets – again, as I understand it, I may be slightly misquoting here – fieldsets allow screen reader users to more easily jump between sections of a form. So if for example you have optional pieces of your form and they’re grouped in a fieldset which says ‘Further Details (optional)’ as the legend of that fieldset and they don’t want to fill out those further details, they can just jump over it to the next fieldset.

Paul: Which, yeah, is amazingly valuable. I mean as soon as you listen to a screen reader and hear how laborious it is, being able to skip over content is really important.

Steve: For those of us who are lucky enough to be fully visually capable and fully able to use motor skills – because of course this, whilst I think about it, this doesn’t just apply to screen reader users, this applies to people who have potentially fine motor skill issues so they have to navigate with a keyboard.

Paul: Which then you get into things like ‘tabindex’ and stuff like that.

Steve: Exactly, exactly. Which you know is a whole other holy war that I dread to get into for fear of upsetting someone. Yeah, these sorts of things again can help with that, and thinking about those sorts of things just makes everyones life easier. Because I mean, for example, I don’t always use the mouse, I will quite often use the keyboard. And I’m perfectly able with my hands and perfectly able to see, but I will quite often ‘tab’ through a form simply because my fingers are already on the keyboard and it saves me moving my fingers a couple of inches… because I’m lazy.

Paul: (CHUCKLES) So you’ve kind of mentioned a couple of people in this that you’ve learned various things from. If people want to learn more about form accessibility and form design and that kind of thing, where would you refer them to? Who do you really respect in this kind of field and you know that they should be following?

Steve: Oh, wow. I guess the people who, in terms of pure accessibility, I would say definitely Mike Davies who goes by Isafarro or Isolani exchangedly, Ben Hawkes-Lewis who I don’t think has a blog, or if he does, doesn’t blog enough. Dirk Ginader who is weboutput.de. Those three guys particularly, Ann McMeekin who guys by the name of pixeldiva. All of those guys are absolutely invaluable resources in terms of HTML, CSS, accessibility type stuff. Other than that I have to admit I don’t really know because this stuff is stuff that people don’t talk about enough.

Paul: Yeah, yeah totally.

Steve: So it’s very much a case of scratch what you can find from what’s left on the web, if you like.

Paul: Yeah. OK Steve thank you for that, that was very helpful. It’s good to kind of dig under the surface a bit. So thanks for coming on the show and hopefully we have you on again soon.

Steve: My pleasure. No problem. Yeah, hope so. Thanks a lot Paul.

Paul: Bye bye.

Thanks goes to Simon Hamp for transcribing this interview.

Creating your first web application

Posted in Development on February 28, 2010 by Paul Boag

Drew Mclellan and Rachel Andrew share their experiences of launching their first app (Perch). They talk about their successes and failures focusing particularly on the business, marketing and customer support challenges.

Paul : Drew and Rachel so you you launched something called Perch.

Perch

Drew : Yes

Paul : It would be great to hear a little bit about what you guys do your background and a little bit about Perch and maybe some of the things you did right and wrong and the process of creating a webapp and all that kind of stuff. But before we get to that there is a question, I am going to ask two questions to every guest that comes on the show one at the beginning of their interview and one at the end OK? So you are the first to answer this question and I am going to pick on Drew first so Drew is going to have to go first. What the question is Drew is ..

Drew : Yes

Paul : In your history working as a web designer, if fact lets not keep it to just web design, in your life as a whole what is the biggest cock-up you have made.

Rachel:[laughs]

Drew : probably I could think of a couple

Rachel:Daily

Drew : Yes [all laugh] thank you. Probably the biggest was actually a sort of user interface design error

Paul : right

Drew : on my part, I was working a a design agency which probably ought to remain nameless and I was sought of the lead developer there and I was asked to build a machine to send out spam basically, newsletters to the subscribers of a site the agency ran as so I duly built this thing it was in classic ASP back in the day and it had a nice form on the front where you filled in the subject line put the content of your email then there was a option and I thought it would be really user friendly to enable the person who was sending the email [Marcus makes background noise with the boagworld iphone app]

Paul : Oh Marcus!

Marcus : I can’t turn the volume off

Paul : It is not that difficult

Drew : anyway I though it would be really great, as a really fantastic usability feature to enable the person who is writing the email to send a test email to themselves, before sending it out to the list so you know they can see what the email is going to look like

Paul : Yes

Drew : Fine so I did that and unfortunately I did not spend much time making the UI look really clear, we handed this over to the director of the company who’s name was Arthur and he though he would try this out and wrote his test email which said “Arthur smells” but unfortunately because of my UI design cock-up he managed to send that out to the entire list of customers [laughter from everyone] but what was really great about was the responses we got for months following asking how Arthur’s odour situation was and if he had learnt to take showers ?

Paul : Yes that is a pretty good one I will give you that, that is a good example. rachel can you top that this is the question.

Rachel:I have my example of my own stupidity which has nothing to do with the web. Before I started working in the web I was working backstage in the west end as stage crew and managed to stop an entire west end show with my maglite [laughs] We had sort of two enormous big spiral staircase truck things that trundled in from the wings and they were on a track on stage and had a big spade you had to haul out and I am looking down this hole with a big maglite in my mouth and let go it goes down the track under the stage floor and jams up the revolve and stops the show [laughs]

Paul : That is fairly impressive,

Rachel:how embarrassed was I

Paul : I am very impressed by that

Rachel:but as a girl on stage crew they are always looking for a chance to give you a slap anyway so

Paul : Definitely that is pretty severe, OK so let’s get onto important stuff tell us about EdgeofMySeat what you do there, how it came about Yes let’s start with that and then go from there.

Drew : Well that’s one for Rachel really she started everything up

Rachel:Yes I started the company in 2001, way back in the day I had been working for dot com companies and really thought I could probably do things better on my own

Paul : We all thought that

Rachel:It was just at the end of the dot com silliness and it wasn’t looking good my daughter was three and a half and it was looking increasingly unstable where I was and I thought hang on I can probably maker enough money to survive on my own, so that is what I did and have been ever since. We specialise in doing development work for design agencies, most of our work is for design agencies and we do the back end development and it is mainly PHP these days we used to do all sorts of things but it mainly is PHP these days.

Paul : So how did you get the point of deciding you wanted to build an app, because that is a big jump if you have come from the background of you know you have been building stuff for other people to then get to a you know right we are going to build a app. What happened there?

Drew : Part of that I think is because the web is what we do there is always just a little dissatisfaction in building things for other people you have always got the ambition to do something yourself so I think part of it was sort of a need to actually just to do something that was ours and putting effort into something that was actually belong to us not just belong to a client but the other thing is as a small company from a business point of view we charge out at an hourly rate whilst there are two of us there is sort of a limit to the number of hours we can work in a day we don’t want to spend you know seven days a week twenty four hours a day working and even if we did that we could not go to twenty five hours, we are putting a cap on the amount of business we can do. So part of it from a company point of view is this idea that we could develop a different sort of revenue stream. So something that rather than selling an hour to a client we actually sell a product to someone and we can sell that product to lots and lots of people without having to invest more time in each sale

Paul : yes, very sensible

Drew : So that was sort of the direction we were coming from with that

Paul : So when you were going through this process looking back now at the process, what you build and launching it and then what happened afterwards give us some stuff about what you felt you did right and stuff that you felt you did wrong in the process.

Drew : What do you think Rach, what did we do right

Rachel:[laughs] I think we knew the market very well, although perch is developed for different sites than we normally work on, we have a big CMS product really that we only sell with our services that we install it for people so it is a very similar market just smaller sites generally and sites that do not have as much stuff and as much content to manage whatever it is still that same sort of market and we knew the key things that people wanted to do. They are the same really as people who are using our big CMS want to be able to do, but also it was the time implication of being able to install something very very quickly that did not mean you had to build your entire site around it. So these were things we knew that would make things easier, make peoples life easier in fact our lives easier even though we tend to get these big projects we tend to get things for existing clients where they day ooh we just have this little site but they want to be able to edit this bit here

Paul : Yes, so you did the classic thing of you built something for yourselves basically

Rachel:Yes we kind of knew that we would need it but also talking to other people we though hang on this is something other people need and people were sort of hacking around WordPress or whatever which is not always ideal for the sort of thing we are talking about.

Drew : So yes we both built something that we needed for ourselves and also we stuck to what we know

Paul : Yes

Drew : you know we do a lot of CMS development and so what we have done is developed a small CMS, it is not a complete change from what we do it is not new ground for us it is stuff we are very very familiar with and that means we can do it really really well and really cost effectively

Paul : Yes that makes perfect sense so the question is what did you do wrong, what went wrong in the process that other people can maybe learn from?

Marcus : Nothing at all

Paul : it was perfect from beginning to end

Drew : from a development point of view there is a massive difference that we discovered from developing a site and being in control of how it is deployed you know what sort of server it goes onto and being the person you know you as the developer are the person that puts things live and makes sure it is all running and everything, that’s quite straight forward. There is a massive difference to developing some software and giving it to people for them to go and install on their own server

Paul : Yes

Drew : and you don’t know what that server might be, you know we don’t know what operating system it is going to be running it could be a mac it could be linux it could be some other sort of unix it could be windows, ermhh perch is written in php which is fairly portable but there are subtle differences and there are different configuration options
t’s a whole world of tiny tiny little changes which you can’t account for but which we probably could have accounted for a little bit better than we did with hindsight, the very first update we put out addressed a massive number of tiny tiny changes and we very quickly got onto track with that yes you know it is pretty straight forward on any server but we certainly learnt a few lessons about running PHP on windows in those early days.

Rachel:Oh yes we know al-sorts now about running PHP on windows now and I think as well just the reliability of people’s servers, we tend to work with decent hosts we know decent hosts, the big projects we do we put those on servers we know are absolutely fine and will run and there will not be any problems, you know people have the flakiest of flakiest hosting it is really unbelievable the sort of stuff people are deploying client sites onto.

Paul : Hmmm

Rachel:You know you cannot rely on the database being there at every request

Marcus : A bit like the boagworld site

Rachel:[laughs]

Marcus : up until recently

Paul : Up until two days ago

Rachel:you know there is a awful lot of stuff that you have yo build into something that you are going to send out to people just to cope with the fact that the hosting, you can’t rely on the hosting being decent the database actually being there, it’s like stuff you think you could rely on and yeah people do not want to be told they are going to have to change your host, one of the things we made a decision early on was that it was going to be PHP5 and we still get people even though php4 has been end of lifed, but I have to use php4 my host only supports php4 and in that we really just say, you know it has been end of lifed if you host can’t give you a PHP5 account at this point there is a problem you want change you host

Marcus : change your host

Rachel:you know but that is the sort of thing you are up against it is that people are running old phps and whatever.

Paul : I remember recording an interview with you at future of web design which we still haven’t released, we got so many interviews that day it is a bit overwhelming

Marcus : Probably all covering the same thing

Paul : Yes I think it is pretty much but that’s OK, One of the things that I remember saying to you in that interview is what, why were you at future of web design why have a stall there and you talked about making it clear that it wasn’t a side project it was something you we’re really committed to, why tell erhh why do you think that is so important I guess is the question because a lot of people work on side projects you know, the web design community is full with applications that have been released as something along side their main point of work.

Drew : Yes I think people do do that and for all the right reasons people will do a little side project and they may do something like take a week of from normal client work to do something or they might just take a couple of days and put something out and quite often those things, the point of those side projects is in the exercise of building it and trying out a new way of working as a team

Paul : sure

Drew : or trying out some new technology, and it is about the process of doing that side project and it is not always about

Paul : right

Drew : the end product, and that is the point of it, which is absolutely brilliant but we wanted to be clear that this is not that sort of project we haven’t just built perch as a exercise in making a little content management system and we are not that bothered about it it is actually something we are very serious about and so I think it is important that people get that you know get that impression and realise this is another branch of our business, it is a real thing it is supported and

Rachel:and it is going to be upgraded we are going to be adding to it and you know it is not something that we are just going to get fed up with I think that is really important and that people know if they buy a copy we are going to be able to support it and we are going to be there and we are not going to sort of decide one day, you know are no we have had enough of this, it is important and is very much a part of what we do.

Paul : So tell us a little bit about the marketing and promotion and how perch has you know been promoted I guess how have you got the word out there about it ?

Drew : Primarily so far it has been via twitter

Paul : Ok

Drew : That has really been the main, the main source of traffic initially and that is where, I would not say we have put a lot of effort in but we have been mentioning it on twitter and we set up an account for perch, which is grabaperch on twitter and we sort of tweet out little ideas occasionally, promo codes and link to people’s sites which they have built which is a good example and that sort of thing and so it has really just been we started of spreading word of mouth that way and then we were a sponsor at Dconstruct down in Brighton this year and so we had a little stall there and banners and badges to give away and really our idea with Dconstruct was perhaps the people attending it might not be our direct customers. I think the sort of audience for Dconstruct are probably a little bit you know more involved web designers perhaps a bit more experienced and the sort of people we are probably targeting with perch are more people doing very very small projects maybe not working in a big agency perhaps they are just working on their own doing little individual things or they are a freelancer, but we thought maybe the audience at Dconstruct were perhaps influencers to those people and we would sort of get the word out that way

Paul : Right

Drew : So that is one thing we have tried

Paul : Did it work

Drew : It is always really difficult to measure especially when we are going for that sort of approach of trying to get perch known to influencers, it is then very difficult to see how that trickles down to actual users is hard to define,

Paul : yes

Drew : but in terms of marketing have we got the word out I think we are certainly starting to

Paul : yeah

Drew : yeah I think [laughs]

Rachel:Yeah we’re web developers not marketers and we are not, our general services really we don’t have to advertise, we are fortunate enough and established enough that we get, our work comes via word of mouth which is wonderful but I think with a product you do actually have to market it and you do have to advertise it and so that is something we are having to learn has we have never been in that situation before.

Paul : and how has that, how has that gone because it is a difficult thing if you have never done it before you know and you would not consider yourselves natural marketers ? That’s a major problem when you are producing a product it is kind of getting that exposure

Rachel:I think that we are fairly lucky in you know we both write and we speak at things and so we have been able to use our own personal networks to some extent and also we are kind of excited about it we really like it so we are very happy to talk about it at things so that I think really helps being enthusiastic about your own stuff

Paul : What about all the other bits and pieces that go along side, so you have built this application that was the easy bit in someways, because that was the bit you knew I am guessing

Drew : yes

Rachel:hmm

Paul : and then you are faced with a whole plethora of additional problems like you know I have got to market this, I have to deal with refunds, I have got to deal with you know customer support all of those kind of stuff what kind of lessons have you learnt from doing that kind of thing

Drew : Yeah we deal with paypal, for support we use a webapp called Tender, which is a hosted support service

Tender

Rachel:It has been brilliant yes

Drew : and thats really great because one thing Tender does is it integrates with your sites login

Paul : ah right

Drew : so basically as long as you point like a subdomain of your site, so we use support.grabaperch.com and we point that at Tender’s servers because it is on grabaperch.com we ca set a cookie when a person logs into their account on our site which then automatically logs them onto the support site so we are not requiring customers to have one login to access their licenses and one login to access support it’s all integrated

Paul : and what was that called Tenderapp?

Drew : yes it is called Tender, so it it tenderapp.com I think

Paul : Ok we will have a look at that in just a second when I can bring up the url

Drew : Yes that is pretty good

Paul : So what is that, that er deals with all your support requests is that basically what is happening?

Drew : Yes it is basically a mix between a ticketing system and a forum in that it’s, so the tickets can be open so people can browse and find problems that people have had before and hopefully find, as time goes on they might find the answer to their problem already posted so they do not even have to ask it or if not they can ask and it has the option of making things private as well so if you need to ask something where you need to talk about the specifics of your server and you are not comfortable with that being public then you can make that private

Paul : oh OK that’s good

Rachel:it has been good, we have been really impressed with that it has been excellent as a service.

Drew : and the other thing that has been a big thing because normally as a agency we deal with invoicing clients we do that doing you know a few invoices a month because we tend to work on big projects so that’s fairly easy but when it comes to selling and potentially having to do multiple invoices every single day, you might be talking having to do you know hundreds over a month suddenly you have to think about that how do you deal with your accounts and fortunately before we did perch we had actually moved our accounting system out of, what were we using before quickbooks?

Rachel:I was using quickbooks yes

Drew : out of quickbooks onto

Rachel:[laughs]

Marcus : what were we using, I was using quickbooks

Rachel:yes, yeah I will tell you who does the accounting

Drew : yes er Rachel was using quickbooks and now rachel is using xero.com which is basically an online accounting package which is

Rachel:which is absolutely marvellous, even before the perch issue I don’t know how I would have dealt with it, we would have had to take someone on to deal with the data entry with perch if I had still been using quickbooks and we have an accountant but as a business owner i kind of like doing my own book keeping as I feel I keep an handle on things I like doing that, it doesn’t take me that long and I had moved into xero which is just fantastic it is so easy to do all the day to day stuff book keeping and there is bank feeds and things, the cool thing with perch is we then, erh xero have got an api

xero

Paul : ahhh

Drew : this is where I get really excited about accounting

Paul : [laughs]

Drew : our accounting system has a api

Rachel : so we can just sling those purchases the details, the customer details and all the VAT information crucially into xero and then I just need to go through and just check they are correct and approve them, which saves so much time

Drew : the other thing that xero does is then it links up with paypal dealing with that as if it was a normal bank account

Paul : oh nice

Drew : as we sell by paypal the invoices come in from our sales, oh I don’t know the accounting terms, one lot of things come in from paypal one lot of things come in from our website and rachel says yep they are the same they match

Paul : I can see know why you deal with the accounting Rachel

Rachel:yes

Paul : [laughs]

Rachel:yes it is one of my jobs [laughs] but I know , but xero if people are struggling with book keeping and accounting systems I would I really would recommend checking it out they have been fantastic

Paul : oh that is good, so oh You going to say something Marcus?

Marcus : No I was just going to say we have had similar issues, finance type issues with getsignoff and paypal, just awkwardness really

Paul : yes

Marcus : so I will pass on your thoughts to er

Paul : well this is really the guy we have to talk to as Ryan is now the man

Marcus : so true yes he is master of getsignoff

Paul : so getsignoff you have got to check to xero.com

Ryan : x – e – r – o .com ?

Paul : yes apparently it looks like it might be very useful, because we you know payment is a big thing, especially things like have you had to deal much with things like refunds, discounting and all those kind of things, because you talked about discount codes earlier

Drew : yes well one of the promotional things is we have printed out a load of moo cards and those moo cards have all got unique discount codes on them, which give people 20% off and we hand those out a conferences and what have you, so we had to building the shopping cart side of things was sort of that is what we do so being able to apply discount to an item before sending it through to paypal that was quite straight forward, it requires a little bit of thought to make sure you get that right but that in itself was quite straightforward

Paul : Yes OK fair enough

Rachel:the other thing to think about if anyone is thinking of selling products and things online is the VAT issue and I spent so much time on the phone to the revenue saying am I doing this right is this right, because you have got to deal with people in Europe who have not got VAT numbers so don’t need to pay VAT and people in the states who don’t pay VAT and people in the UK who have got VAT numbers but still pay VAT. You have got to deal with VAT correctly because if you don’t and get a long way down the line they are going to send you a very big bill at some point. So that is another issue of selling things like this is you do need to be careful of VAT and sort of local taxes and I imagine it is the same in the states with their tax issues

Paul : hmm I mean it is interesting isn’t it how much is involved in creating a web app you think you are just going to you know well I know how to code stuff I know how to build stuff, it opens up this whole realm of additional stuff afterwards that is the pain and misery.

Drew : yes you are right, writing the software was the easy bit [laughs] that did not take long at all and then I thought right I am ready to release this I had better make a website for it and then you start thinking about the fact you have got to have obviously all your product information so we had to start thinking about how do we describe what this is how do we show people, how do we put forward it’s good points all that sort of marketing and sales stuff

Marcus : Brand type stuff , I mean Perch has got a brand hasn’t it wether you like it or not, there are things that are associated with it you had to decide on, or at least recognise it I guess

Drew : Yes

Marcus : which then needs to be translated into the design etc etc

Drew : exactly then we had to figure out what the shopping basket type things user accounts what information do we need to collect what do we need for our accounting purposes what do we need in order to contact people ermh and then how do we let people manage their stuff so just the website in itself was a reasonable size project, which I sought of happened upon without really thinking about it

Rachel:[laughs]

Drew : so yes writing the code really is the easy bit

Paul : so what advice would you give to people who are in that same kind of situation where they are creating a web app, they come form a similar background to you they are web designers and developers, you know what’s the golden rule, what really are the things people need to focus on ?

Drew : I guess people need to decide whether it is something they decide they are going to turn into a business, as in do they actually want to make money from it, erm if they are going tot make money from it that takes, there are a whole load of extra complications which you have to account for, which will go away as soon as it is something you are just doing for fun

Paul : yes

Drew : and I would probably also say these days if you are thinking you are going to make money from it you need to plan how you are going to make money from it and kind of design that in so even if you are free when you launch to manage user expectations so people know it is free at the moment

Paul : for a limited time yeah

Drew : so I think that is really important to decide what are your aims is this something you actually want to turn into a bit of a business or is it just for fun and the experience of doing it

Paul : Sure

Drew : that would be the main one I don’t know

Paul : that’s fine that’s absolutely great, I mean this is all very relevant to us as we are in the process of turning Getsignoff from a side project into a business in it’s own right so all this stuff is brilliant and we have already talked about, well you and Ryan have talked about tenderapp and various other things and I think it is really useful and I think there are a lot of people who are out there basically considering doing the same thing, that they have an idea for an app and they want to do it and it shows it is not the quick easy solution that everyone thinks it is. I think there isa lot of people who thought I am fed up working with clients I want away from clients and have not really thought through the fact that they are replacing one set of problems for another set of problems and actually they are going from half a dozen clients to potentially thousands of little clients.

Rachel:and it is the amount, you have to account particularly if you are doing other client work as well as we are you then have to account in your schedule for a certain amount of dealing with support for instance and pre-sales queries and especially for a low price product if you spend you know what is not unusual an hour or two supporting a single customer which does actually happen that is a awful lot of your billable time used up in doing that. What we tend to find with perch is that people come back and buy repeat licenses and then of cause the support implication drops because they have already done it once.

Paul : right

Rachel:and they have worked out all the problems and they tend not to have to come back and ask more questions and of course there are a huge amount of people we never hear from at all, they get it they install it and it is absolutely fine. But for instance if someone is having, particularly in the early days someone is having problems with the server and something really weird is going on and we are trying to help them find out what is going on, because obviously it is going to be better for all our customers if we find out what the problem is and solve it in the software that can take up quite a lot of time and I think if you are really surviving on hour by hour client work you need to make sure you have got the time while you are building the customer base to afford to do that.

Paul : Yes OK well that was very interesting do you know we are a 12th of the way through the podcast everyone [cheers], which I feel is a major turning point.

Thanks goes to Shaun Hare for transcribing this segment.

The Ultimate Website Prelaunch Checklist

Posted in Mobile, Web strategy on February 8, 2010 by Andy Wickes

All of a sudden the site you have been working on for months is approved and the client wants it live. However, things can still go horribly wrong if you are not prepared.

We’ve all been there.

After months of development, meetings, conference calls, protracted arguments over typography, photography, colour ways and copy. All of a sudden the site is approved and the client wants it live.

Do you think to yourself, ‘I know every pixel on this site inside out’ and put it live?

Hopefully not. You’ll have a printed checklist which you complete before you go public.

By no means is this an exhaustive list. Neither is it presented in any particular order. Your own checklist will be very much tailored towards your own individual clients and the type of project you are delivering. Be sure to add your thoughts and suggestions to the comments at the bottom of the page.

Either way, get your team together, get out the red pen and start ticking them off.

Copy Checks

Check your spelling.

If it comes down to a web designer to highlight the smelling pistakes of a copywriter then so be it. Show the world you are no slouch and run a spell check. Better still, get your copywriter / project manager to do this. Be sure you check for widows or orphaned items in important paragraphs too.

Check your tone of voice.

Ensure this is consistent across all your pages, that your audience is being addressed the same way throughout the site. If your services include ‘Research & Development’ ensure it is expressed using ‘&’ everywhere it appears, always with capitalisation, and if you display times and dates be sure to express them the same way throughout. This is a cornerstone of well-crafted, easily scannable copy.

Check your details.

I’m quite serious about this. Phone all phone numbers you have been supplied. Do they work? If you’re building a site for The Royal Albert Hall, do they answer? And are they aware you are shortly going to launch a site, with their number on it, inviting thousands of people to call for more information? These are crucial checks to ensure that the entire marketing process, right down to (phone) calls to action are prepared for the site going live. Check email addresses you have been supplied and make sure they work and are being received by someone. Oh, and check they are not still pointing at you for testing – make sure the clients email address is specified when the site goes live.

Check through any ‘hidden’ copy on site.

Look at ALT text and ensure it is descriptive and not just ‘XXX’ – read through any text within Javascript functions, failure or alert messages, and also and remove anything potentially embarrassing or plain unnecessary.

Make sure you are not going live with any test copy on your site.

Check for instances of ‘For more information call XXXX,’ or worse still, ‘At ACME and Co we pride ourselves on [Dave, has the client approved the mission statement yet]‘ You get the picture.

SEO

Check your keywords.

Ensure you have your meta description in place, and that any keywords are suitable for the site. Do the keywords appear in your site copy where appropriate? Turn off your style sheets and read your site as a search engine will, and check your keywords are written in HTML and not all contained within images.

Check your titles.

Do you pages have relevant and descriptive title tags, and are your page names suitably descriptive.

Check your URL structure

Google has taken considerable steps within Webmaster Tools to reward site owners for declaring, and being consistent about canonical URL’s. That is to declare to Google which URL structure you will maintain on your site, to avoid the duplicate content penalty. So if you choose example.com/products over www.example.com/products, then check to ensure the links within your pages follow this convention.

Check you have a sitemap.

Generate an XML sitemap and submit it to Google, Bing, and Yahoo. Gsite Crawler is a great tool to help create these automatically for you.

Set up analytics on your site and schedule any weekly reports that might need sending to your clients, and also set up any statistical alerts you might need to notify you of any spikes in traffic that might signify malicious activity. Stats packages worth your attention are listed in the URL’s below.

haveamint.com

Standards and Validation

Clearly this is not something that should be left until the last few days prior to launch. But you should always make one final sweep through your content to check for validation issues. You should be checking your HTML, CSS, Accessibility and your Javascript. Quite often you can encounter validation issues late in the project with the addition of javascripts from a third party if a client has reporting software they wish to use, or if you are carrying advertising or inviting referrals from an affiliate network. As these are so often just thrown in to the code at the last minute it is vital to check that they don’t interfere with functions that were (up until then) working just fine. The Developer Toolbar for Firefox is a great time saver when it comes to validating your HTML and CSS, with the WAVE toolbar being similarly indispensable for checking against WCAG guidelines. That said there is no substitute for a good working knowledge of the WCAG guidelines as so much of them cannot be checked against by a plug-in, and requires common sense and a keen eye to avoid problems.

Web Developers Toolbar

Site Functions

Does everything work?

Again, this should have been tested long before now, but don’t go live without checking it. Often you will have moved a site from a development server to a production server in the run up to putting it live, and that may have upset your file structure. Maybe you have an API which relies on the address of a development server to work and will need altering if it is to work at the live address.

Check your search facility

Check your search facility if you have one and make sure that is pulling in results. Also check for dead links across the site with something like Xenu’s Link Checker.

Screenshot of Xenu

Check all browser variations

Check all browser variations that you promised to support, all screen resolutions and ensure that your site degrades gracefully without the support of Javascript and Flash. Your site should be easily interpreted by a screen reader with CSS switched off, and this can be checked by downloading a text only browser such as Lynx for the PC.

Think about common web conventions and whether your site breaks them. Are all your links consistently styled? If all links are underlined, check that no text is underlined for presentational reasons that people might mistake for a link.

Don’t forget to set up a print style for your site.

It is stunning quite how often this ignored. Insert this line into your <head> tags and create your print style sheet.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Security

Ensure you have your site files backed up, but assuming that this is something you do as a matter of course, ensure that you are backing up any databases on the website that might contain important customer data. There are services and applications who can automate this for you such as Site-Vault and Iron Mountain, providing you with the peace of mind that only a reliable backup can bring.

Screenshot of Site Vault website

Check your form fields against SQL injections, and test any anti-spam functions you have in place to prevent spam bots.

Protect any sensitive pages

Protect any sensitive pages or folders from being indexed on search engines by putting in place robots.txt files and by excluding them from within Webmaster Tools / Bing / Yahoo Site Explorer and also consider whether you need to use an htaccess file to disable folder view within directories.

Performance

Increasingly this is becoming more an issue. With rumours of Google rewarding faster sites with better rankings it is crucial that your pages load as swiftly as possible.

Safari 4 has a great tool within its developer menu which checks the speed of your pages downloading, and highlights which elements take the longest and therefore might need attention.

Check your image optimisation with a tool like Smushit.

Smush.it website

Check you have caching enabled if appropriate.

If possible consider the use of image sprites to reduce http requests to your site. SpriteMe.org offers simple online solution that might get you started.

Minify your Javascript and CSS files using a tool such as YUI or YSlow from Yahoo to ensure your code is delivered as swiftly as possible. Firefox add-ons such as Dust Me Selectors can help to remove unused selectors from style sheets, helping to keep file sizes down.

Legal

Those lawyers get everywhere. Links to legal policies are so often added to a footer element on a website and then given no further thought until moments before go live.

Copyright

Check that this is set to automatically refresh from the time stamp on the server, and that the copyright owner stated is correct. It won’t always be the client or brand who should be credited.

Terms and Conditions

If your site has a promotional element or takes payment then you will need to make available t’s and c’s. Always consult either the Institute of Sales Promotion or a lawyer for the best advice on these, or if they are supplied to you then make sure they have been checked.

Privacy Policies

If you use cookies, capture data, or distribute data, then you need one. The best advice is always to be honest, and to state clearly what you collect data for, how it is stored, and to whom might it be passed. So if you this might be you then be sure you have a clear statement explaining all of this, or least provide details of how you can be contacted for further information.

Company Registered Information

If you are a registered company then you must display on your website the registered company name, number, and address. Simple, but so often forgotten about. For more information visit either Companies House or Business Link online for more information.

Companies House website

Add icons and error pages

Add your favicon.

And while you’re at it, do you need one for mobile devices such as iPhones? Add this into the <head>

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

And this for an iPhone

<link rel="apple-touch-icon" href="/favicon.png" />

Create 404 pages.

Crucial for so many reasons. If the project is a re-design then search engines will have cached links to pages that will no longer exist. Use 404 pages to present users with links to where that information is now located. Webmaster Tools provides an easy way to produce 404 pages if you aren’t an experienced developer, but ignore these at your peril.

Example error page

Reach a point of zen in your code

Posted in Reviews on January 21, 2010 by Paul Boag

Zen Coding is set of plugins for various text editors that enable you to code much faster than you normally do.

My name is Ezequiel Bruni, and I’m a Canadian designer based in Mexico.

I just wanted to let you all know about a tool which is pretty awesome (and will make your life easier).

Zen Coding is set of plugins for various text editors that enable you to code much faster than I bet you normally do.

For example, let’s say you want a div, with a heading, and three paragraphs inside. In each paragraph element, you want a span element as well. Each element needs classes and ids, you get the picture. It’s tedious, even with copy and paste.

What if I told you that you could do all of that with just one line of code? Sound interesting?

Zen coding allows you to do that, and it’s pretty darn awesome.

To see how it works, go to http://code.google.com/p/zen-coding/

Zen Coding supports:

TextMate, Mac
Aptana, crossplatform
Coda, Mac
NetBeans, crossplatform
Espresso, Mac
Web IDE, crossplatform
TopStyle, Windows
Sublime Text, Windows
Dreamweaver, crossplatform

And there is partial support for:

IntelliJ IDEA, crossplatform
SciTE, crossplatform
gedit, *nix
SlickEdit, crossplatform

I’ve personally tried the Aptana plugin, as well as the gedit plugin on Linux, and I’ve gotta say, it’s beautiful. The way I code is certain to change, and I recommend Zen Coding to anyone who does a lot of HTML/CSS development.

I hope you check it out, it’s awesome.

180. Backend

Posted in Classic shows on August 26, 2009 by Paul Boag

On this week’s show: The Northeners are joined by the Headscape duo Craig and Dave. We talk about why you should care about .NET MVC and answer your questions about managing your code and friendly URLs.

Podcast: Download (39.7MB)

Download this show

Launch our podcast player

Our most complicated setup to date! Ryan in the studio, Craig and Dave in the barn and Stanton on the phone.

Housekeeping

Vote for our SXSW Panels!

It’s that time of year again and we’re asking our beloved listeners to vote for one or both of our SXSW panels.

Pain Free Design: Getting Client Sign Off

Boagworld Live – Open Mic

Any votes would be greatly appriciated!

News

Expanding your development skills with Creative Tech Projects

This post by Smashing Magazine tries to pursued you into doing something different every once in a while and points out that even if you’re a web developer, your next project doesn’t have to be a website! You can learn a lot by doing something outside your normal comfort zone, and there’s some great examples of different things you could play with, such as:

Write your own desktop application, using Air for example
Extend Firefox
Create interfaces for your favourite gadget, such as your iPhone or Wii
Play with Hardware, such as the WiiMote, Arduino kits or Lego Mindstorms

One of the things I love about working in this industry is the sheer amount of cool stuff available for us to play with. Admittedly, it can often be hard to find the time, or even justify spending time playing with cool stuff when client work is stacking up, but who knows, you might find that people out there would pay you good money to build things using the skills you acquire!

5 Advanced Photoshop techniques for web designers

Yes, this is a ‘top 5’ type post, but it’s quite a good one so I thought I’d tell you about it. This article on the Think Vitamin blog gives you a decent rundown of 5 popular visual effects in modern web design, and tells you how to replicate them.

There’s tons of screenshots and explanations of how to make awesome buttons, navigation menus, inset typography, faded shadows and depth. It’s a post to bookmark for those times when you have a spare few minutes to mess about in Photoshop and try new things.

Digg’s move to GIT

This is the first of a two part article detailing how the developers at Digg are making the move from Subversion to Git. I realise that source control doesn’t get discussed much on this show, but it’s something that every designer and developer should be using if they’re not already.

I’m not wanting to start a SVN vs GIT argument here, but I’m very interested in seeing how big established teams work in regards to source control and this is quite a candid account from the Digg team about the scaling issues they experienced as the development team expanded and SVN struggled under the load, and how they’re starting to use GIT to solve some of these problems, highlighting both the good and bad points of the new system.

Everyone will have their own source control preference, but if you’re part of a large team and have source control issues (don’t we all) then give this a read.

Feature: Why .NET MVC? (and why should we care?)

Having previously written about the highs and, perhaps more importantly, lows of working as a .NET developer. This article will continue the trip into Microsoft World, only this time it’s to the land of MVC.

Read the Why .NET MVC? (and why should we care?)

Listeners Questions

Managing your code

Question from Jamie…

I have recently started developing my own system for building web applications with. I have found that as projects have ticked by i have ended up with a large assortment of code of different versions and functionality. How do the backend development guys at headscape manage this code mountain beyond the project by project SVN style management?

Headscape has a strong design and consultancy background, however the development side of things has also been done internally since
the beginning. In fact the design and Tech teams are of equivalent size and we have a large number of legacy and currently running projects
at any one time. Source control and code management is therefore vitally important.

As a development team we rely heavily on three main methods of knowledge transfer over time, projects and team members. This includes
the standard approach of code commenting, a source control system and an internal wiki for snippets, interesting decisions, rationales,
product roadmaps etc. The wiki, in the context of code, provides a space for longer descriptions and reasoning behind technical design and
implementation approach.

As many of you may be aware a large number of Headscape projects utilise our in-house CMS. This acts as the base for our common code and
contains multiple projects – A common code repository (the equivalent of our ‘System’ namespace), a CMS class library project and
a base CMS Web project. When a new CMS project comes in we create a new project in source control, with the most recent labelled stable
version of the CMS code as the initial check in. Changes on this development are then logged only within the context of the project.

Throughout key stages of development and during project washup changes and enhancements that can be generalised from this project will fed
back in to the main project after review with at least one other member of the tech team. As some projects can be very bespoke we do not
currently utilise branching within our Source Control repository for the purpose of each project.

Friendly URLs

Daniel Farrell writes:

My university has a ridiculous URL naming scheme!

I can see what they are trying to achieve: human readable and logical ordering of pages. But by nesting on such a microscopic scale, they produce the opposite result. The pages are no longer memorable, and not even easy to read because you need a huge screen wide screen to see the whole URL.

Furthermore, because ‘software’ is a service provided by the ICT department is must be nested underneath it. This reflects the management structure of the department not necessarily the way a user thinks! For example, why couldn’t the URL be, /softwareshop/adobe?

What are your thoughts on human readable URLs and how would you tackle the problem of making such a huge site easy to use? Should I have more sympathy for the web team or do they need a good kick up the arse!

There are a number of reasons that large organisations use long and often convoluted URL schemes. One possibility is that different parts of the site could be hosted on different servers and managed by different people. There may be different systems running different sub sections such as a shop which generates its own URL structure under an already long base path.

Firstly, it doesn’t always matter. Unless it’s a URL you want people to remember, the majority of web users don’t really care what ends up in their URL bar once they start navigating a site. It makes no difference to a bookmark and can be shortened easily enough by any number of URL shortening services such as tinyurl or bit.ly.

So when does it matter? It matters when you want users to easily find something that could be tedious to find by navigating a site. A good example is TV or poster adverts where people need to remember the URL for a period of time or a subsite that isn’t linked to from the main site. (administration logins for example)

A good example of a website that manages this well is the BBC site. This is a huge site with many smaller subsites. It’s important for them to advertise concice and memorable URLs so many of their subsites are directly below the site root. One solution could be for the university to setup a series of shortcuts that redirect to the full URL.

Some tips for constructing easy to remember URLs

Keep sections concise. “personalcomputersupportandmobileservices” is bad, “ict” is good.
Try and use words that are easy to spell.
Avoid numbers and hyphens
If possible and necessary, create a couple of versions that are equivilent and redirect to the correct version (ie. Wikipedia’s redirection)

Why .NET MVC? (and why should we Care?)

Posted in Development on August 18, 2009 by Craig Rowe

Recently Microsoft was brought back to the attention of many, not just for the interestingly named Bing, the Yahoo ‘partnership’, or the delights of a browser
choice screen. Developers with their ear to the Redmond ground became aware of something being touted as the next big thing for Microsoft .NET development – ‘MVC’.

Although announced some time ago many users left it aside until a more complete release. Now however, with another release on the horizon and many examples of sites that use MVC (including the particularly well known StackOverflow) it is certainly something people are using on a daily basis.

As would any eager developer I tried the beta, had fun installing the final release and have now been involved working with and using it. My impressions so far are good. It would appear that Microsoft have addressed those amongst us bemoaning the issues of WebForms. For example lets take a look at a collection of comment snippets from the “don’t hate me for my .NET” post:

Markup

When I first tried the winforms model after being an ASP developer for many years part of me loved it’s rapid development but I always felt a bit dirty when looking at the source code…
Chris Morledge

A key point really here is that the abstraction that was provided by .NET webforms was/is, for some, a step too far. The masking of actual html output behind server controls, although rapid, caused friction between backend and front end developers. A carefully crafted html design would often be bounced back and forth as developers implemented using controls.

Conversely MVC is far closer to the metal in terms of both your html and indeed your required knowledge of the way the web works. Although views are often output with html helpers these are far easier to customize than creating your own Custom Control Adapters. With .NET MVC, webforms Developers will be reminded that there is no inherent state on the web (and perhaps hopefully of the separation between back and front end development – I’ve never been a fan of auto-generated javascript. It can lead to an over reliance and ignorance of approaches like hijax).

Tutorials Available

All of the training material and tutorials will show you how to do it the easy way
Tim Snadden

This has been an issue I’ve had with some Microsoft materials for a long time. Reading about things like <asp:SqlDataSource /> controls always left a bad taste in the mouth in terms of reusability, testability and layered architecture. However, some of the materials on the MVC site are bucking that trend.

Working around .NET

we crafted our own pseudo MVC framework
cmv

Similarly to cmv many devs have crafted their own implementation to separate presentation and logic concerns. I have previously discussed using XML and XSL for this. However now we don’t have to, or if we do want to with .NET we can at least work from an open source framework (yes MVC is on an open license) with a multitude of available view engines or even create our own view engines.

Seemingly few people who dislike the idea of using Microsoft technologies are aware of the Mono Project. An open source .NET implementation with an IDE (Mono Develop). For those of you who would like to know more I thoroughly recommend Miguel de Icaza’s appearance on the stackoverflow podcast. Mono is also not as open to legal attack from Microsoft as people may think.

So how is it done?

There are already many resources for learning .NET MVC, not least the asp.net/mvc site itself. In brief a project will contain:

Views

- Implementing IView (guaranteeing a Render() method)

The default MVC project from Visual Studio includes a number of sample views. These are instances of the ViewPage class. Data can be passed to these views by the controller through the ViewData property bag. However if you change the type to ViewPage<T> these views become typed views. For example you may have a ‘CustomerViewModel’ object (encapsulating view related information for a Customer entity/Customer BO) and so create a ViewPage<CustomerViewModel>. In this case the View has access to a ViewData.Model which will be a typed customer view model instance.In terms of team breakdown these ‘.aspx’ pages will be where the html is and where designers may wish to make their mark.

[csharp]
<%@ Page=”" Title=”" Language=”C#”
MasterPageFile=”~/Views/Shared/Cargowire.Master” Inherits=”System.Web.Mvc.ViewPage<IEnumerable<BlogPost>>” %>
[/csharp]

fig. 1.0

Controllers

- Implementing IController (guaranteeing an Execute() method) or generally inheriting from the Controller class

The Controllers job will be to direct the traffic based upon the request, including processing actions (using methods that return ActionResult)
that map to the ‘action’ url part. [csharp]
// GET: /Home/
public ActionResult Index()
{
… // e.g. Commands to return an IEnumerable<BlogPost>

// returns ViewResult(IView) (Ultimately inherited from ActionResult)
return View(blogPosts)
}
[/csharp]

fig. 1.1

Models

- Component(s) for maintaining state

Models can take many forms including business objects mapped to sql through linq to sql
or of course a number of layers including services, repository and business object classes.

Routes

- defined in Global.asax

[csharp]
routes.MapRoute(
“Default”, // Route name
“{controller}/{action}/{id}”, // URL with parameters
new { controller = “Blog”, action = “Index”, id = “” } // Parameter defaults
);
[/csharp]

fig. 1.2

The Process

Figures 1.0 – 1.2 illustrate a simple example using .NET MVC. In this example a route has been defined for the blog controller and the action ‘Index’. When a site visitor hits ‘http://site.com/blog/index’ the .NET MVC Framework will invoke the Blog Controller’s Index method. This method will ultimately retrieve an IEnumerable<BlogPost> instance which can then be displayed within the typed view. For example the view content could be:

[csharp]
<% foreach (var post in Model) { %>
<div>
<h2><%= ViewData.Model.Title %></h2>
<p><%= ViewData.Model.Body %></p>
</div>
<% } %>
[/csharp]

fig. 1.3

In this simple example the BlogPost class is a business object that could well map directly to a persistant storage entity. However in a more fleshed out system it could be that the View is typed to a ‘BlogPostsViewModel’ that contains items that can be enumerated for listings, plus items for category description etc.

Final Thoughts

This article has attempted to do two things. Firstly to act as a sequel to “Don’t Hate me for my .NET” but secondly to introduce, at a basic level, .NET MVC. The example given is to provide a flavour of MVC development on the .NET platform and could be expanded to cover a number of other currently favoured approaches and technologies including more detailed assessment of the Model and how the dependencies interact.
However, that may be for another day.

The community around .NET MVC is already thriving with a plethora resources, many of which I have linked to when possible above.

Sources / Related Links

168. Personality

Posted in Classic shows on June 3, 2009 by Paul Boag

On this week’s show: Paul explains how to give your site real personality and Dave shares some top tips for writing secure code.

Podcast: Download (20.9MB)

Download this show.

Launch our podcast player

News

Typekit – the messiah of web typography?

There is some big news this week for those website owners and designers keen to use custom fonts on their websites.

For the longest time web designers have been limited to a small subset of fonts that were known to be present on the majority of users PCs. Although CSS font stacks allowed designers to choose less common fonts, because they could specify a safe alternative if that font was unavailable, this did not guarantee the user would see the design as intended. The only way of forcing a particular font was using Flash (via sIFR) or images. However, both of these approaches created potential accessibility problems.

The irony of this situation is that browsers provide a way to embed fonts in your webpage using @font-face. The problem is not technological but legal. Font foundaries are concerned about loosing control over the distribution of their fonts.

This is where Typekit comes in. Typekit is a soon to be released tool from usability expert Jeff Veen. When writing about the service he says…

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts. This really is going to change web design.

In short, they provide an easy and legal way to use custom fonts. Of course, there are still some unknowns. We do not know what font foundries have signed up for the service and so have no way to know what fonts will be available (or how many). We also do not know the prices involved. However, presuming you are happy to use Javascript to deliver your custom font then this looks like a very promising solution.

Apple vs Microsoft – A website usability case study

The Web Designer Depot is running an interesting post that compares the usability of Microsoft and Apple’s websites. Let’s be honest, pitting Microsoft against Apple is a little bit of a gimmick. Its actually very hard to compare these two websites. The two companies are aimed at very different markets (as the post itself admits) and are on very different scales. Apple is much more focused as a business than Microsoft and so the Microsoft site is always going to be more complex.

That said, it is extremely interesting to see the two sites deconstructed from a usability point of view and it does identify a number of common usability issues that we can all learn from.

The article focuses on the following areas…

Homepage design
Flow
Navigation
Readability
Search
Aesthetics
Consistency

I am sure it will come as no surprise that Apple won hands down. However, I think it is interesting to note that the primary reason for Microsoft’s failure was its size. The larger a site is, the harder it is to maintain consistency, ensure quality and handle navigation. There is a lesson here for all owners of large websites – if you want your site to be usable, make it smaller by simplifying. Apple applies the principles of simplicity to everything from their products to their websites and it results in exceptional usability.

Reinvigorating old blog posts

This week I came across possibly the most ridiculously named idea in the whole of the web – “Sneeze Pages“.

Although the name is stupid the idea is actually a good one. According to Sitepoint a Sneeze page is…

a page that propels people in different directions deep within your blog by highlighting a variety of posts that you’ve previously written.

In other words it is a way of drawing users attention to older blog content buried deep in your archive and therefore increasing the ‘stickiness’ of your website.

As the post on Sitepoint points out, the problem with blogs is that new user rarely get past the last dozen or so posts. The wealth of content in older posts is largely invisible. It therefore makes a lot of sense to create the occasion post which draws attention to this older content.

The Sitepoint article suggests four types of “Sneeze Pages”:

Themed Sneeze Pages—these are posts or pages on your blog or site that revolve around a single theme (e.g. The best of Boagworld usability advice)
Time-related Sneeze Pages—these pages are based around a defined period of time (e.g. What you might have missed this month)
Retro Sneeze Pages—another variation of the time-related sneeze page is to do one that unashamedly shows off a number of posts ffrom a particular point in its history (e.g. The best of 2008)
Series Sneeze Pages—this is the technique of writing a series of blog posts exploring a topic over a period of time with lots of interlinked posts. (e.g. My 10 harsh truth posts)

Personally this strikes me as great advice and you can expect to see several such posts from me over the coming weeks and months.

Creating WCAG 2.0. accessible forms

I never get emails asking us to cover accessibility in more depth. Its just not a sexy topic. Designers, developers and website owners know they should care about accessibility and even endeavor to make their sites accessible. However, it doesn’t really excite people.

However, it is an important topic and one I will continue to cover on the show. I would also argue it can be inspiring too. I will never forget the first time I watched Robin Christopherson from AbilityNet use a screen reader. Its not until you see it in action that you realize the challenges people face.

The same revelation came for me again when reading Accessible Forms using WCAG 2.0. Its not a light read and takes some getting through. However, it has some great insights into exactly how screen readers deal with forms and yet how easy it is to improve the experience if you know what you are doing.

For example did you know that screen reader users have to enter a special “form mode” to complete a form. When in this mode the screen reader will only read form elements. It will ignore any instructional text, unless it is wrapped in a label or other form element. This can easily be a real problem.

There is also advice on…

Colors and fonts
Mandatory fields
Use of Javascript
Timeouts
Grouping form elements
and much more

Personally, I feel this should be required reading for all designers and developers.

Feature: How site personas can enhance your sites

If your website was a person, what type of person would it be? It is an interesting question. Take a look at your website for a moment. Look at the design, read some of the copy. Can you picture a single person that represents your site? If the answer is no, then you may benefit from the creation a site persona.

Read How Site Personas Can Enhance Your Website

Listeners feedback: Stop hackers hacking your hackey code!

Steve from Aberdeen writes:

You promote the show as being for all those who “design, develop and run websites on a daily basis” but actually don’t cover much for us developers! How about covering some more developer orientated topics such as website security.

Its a fair accusation Steve, which is why I we have Dave on the show this week. He is going to provide a basic introduction to website security.

Security is a complicated monster to tackle, so it helps to think about it in really, really basic terms. Stuff comes in, stuff goes out. We have to assume that anything that comes from the user is dangerous, or tainted, and can’t be trusted in any way what so ever. We don’t even know for sure that the user is who they claim to be. Trust no-one. We also have to be 100% sure that anything we send back to the user is safe, un-tainted, and uncompromising. You don’t want to send dodgy scripts to your users, and neither do you want to send back valuable clues to the inner workings of your code. This is not meant to be an all-encompassing guide to preventing attacks, but instead a set of guidelines to writing applications in secure way.

Minimise

The first rule is this. Minimise areas that accept input from the request, and minimise areas that send response. Sanitisation and validation should be the first thing you perform on data received and the last thing before you return it. Following a sensible architecture such as the Model View Controller approach separates data received by the Controller area and data returned to the View. This will make your life far simpler when you start tackling such issues. This applies to all forms of input (form data, querystrings and cookies) and all forms of output (HTML, redirect, file download).

Validate

A commonly overlooked validation is confirming the data has been intensionally sent from the user. There’s nothing to stop a 3rd party website posting to your website, so it doesn’t matter how secure your login form is, the posted data could be coming from any of the dodgy websites your user has open. An easy solution is to use a random key as part of every posted form, unique to the users session. This way you can easily verify the form has been posted from a tightly controlled page you served to your user. It’s not enough to look at referrer headers, because these are easily faked. ASP.Net web forms, to their credit, do this by default.

Use White-lists over Black-lists. Lets say for example you’re validating a phone number, you don’t specifiy every non-digit character you want to remove, you strip everything that isn’t 0-9. A little too obvious? The same applies to the classic script tag. If you start trying to remove every form of <script> tag, you’ll end up playing catch-up against tricks using <img>, <body> and clever encoding. If allowing any kind of HTML through is necessary, you’d better be damned sure who submitted it and who is going to be able to see it.

Storage

So you’ve received your data, it looks pretty good. Whatcha gonna do with it? If it’s heading towards a database, you can’t be too careful. Escape it, or better yet use parameterised queries. If it’s the file system that your data is ending up, put it somewhere sensible. Ideally, this would be somewhere outside of your webroot, or in a protected folder. Whatever happens, you don’t want anything here directly accessible or executable. Just to be sure.

Responses

OK, so we’re sending a response. Just because the data we received passed our tried-and-tested validations doesn’t mean it’s safe to send back to the user. We HTML encode everything, unless absolutely necessary. If it’s plain text, fairly straight forward. If you’re putting suspect data into an HTML attribute, it might be an idea to verfify the format. If you think you’re outputting an SRC or HREF, check it at least looks like a path. If your response happens to be a redirect, double check nothing funny is going on with the URL. If your response is a (serious) error, make it look friendly, but don’t give away exactly what went wrong. If you want to send them a file, attaching it and manually setting the MIME type is more controlled to simply pointing them at the file.

This is not intended as a set of golden rules, rather a few key points to help you think about the code you write. Most new forms of injection and hackery are just clever ways of attacking poor code. Writing sensible code will keep you one step ahead of such attacks.

Don’t hate me for my .NET

Posted in News on May 8, 2009 by Craig Rowe

I’m an outcast trying to fit in…

I’m an outcast trying to fit in… at an event like FOWA I’ll feel like working with .NET is akin to admitting to owning the Rednex single ‘cotton eye joe’ from the glory days of ’94… but then I’ll go to a Microsoft event and feel like a pariah obsessed with miniscule details that I shouldn’t worry about (unobtrusive javascript.. element ID and exact markup control…).

A generalisation this may be but it highlights the difference in perception between languages such as PHP/Ruby and .NET in the world of web. So much so that people often don’t even list .NET when they reel off examples after the phrase ‘your language of choice’.

I don’t so much want to ‘put the record straight’ just to put forward my experience starting out with PHP and moving to .NET, with a sprinkling of the stuff I usually hear against .NET.

Background

Following a pretty standard path I started out in web development with static HTML, moved on to being scared by CGI then dabbling with javascript and later some PHP and Actionscript (with some VB6 and Java studying thrown in there for good measure too). This led to my first full time role being as a PHP developer, which later evolved into a C# position.

.NET WebForms vs. Everyone Else

The first thing I (and many others) realise when moving to .NET (Webforms) is that it’s really not the same paradigm. In fact I’d go so far as to say that if you skipped straight to learning Webforms, you haven’t learnt web development. What you’ve learnt is winforms. And the reason for this is that that was the intention of Webforms – to assist winforms developers in making the leap to the web and to mask the lack of state.

The ‘innovation’ therefore of postback/viewstate persisted server controls was that as a developer you didn’t have to worry about working in a stateless environment as you did with other languages. Nor did you really have to worry about the actual markup output (in the same way that you wouldn’t worry about how the pixels rendered for a button in a windows app). Submit buttons and Select boxes can have server side Click and IndexChanged events and before you know it you’re well away without worrying about html or javascript or even css (if you went with some rather questionable attributes available on server controls for presentation).

What this caused however was a largely negative view of .NET from the non .NET side of the tracks, and it’s generally the sort of stuff I continue to hear.

Poor Markup
- Large amounts of encrypted ‘viewstate’
- Large amounts of generated javascript
- Crazy ID attributes
PHP (or misc web scripting language) is easier to use
- .NET feels more like Application Programming rather than web scripting which can make it seem overkill for small tasks.

However this is not an attack on .NET (whether people know it or not). This is an attack on a particular way of coding in .NET webforms. Yes, Microsoft pushed .NET to be used in those kind of ways but that doesn’t mean you had to do it that way.

In the same way that developers don’t use the visual interface of Dreamweaver to generate their markup .net developers don’t need to use server controls and viewstate. Just because it’s there and assists some people in their needs doesn’t mean everyone should use it.

Much of my recent work for example has relied heavily on generating Xml as the content and using Xsl to create the presentation, thus bypassing the majority of asp.net server controls and their associated scripts/viewstate/long ids.

Without taking this approach you can still make your own user and custom controls, but be smart about how you make them. Turn off viewstate when not needed, use standard html controls when you don’t need the functionality provided by an asp server control and use repeaters with your own standard html templates rather than .NET rendered gridviews.

.NET or not .NET?

It could be argued that doing these kinds of things is not ‘.net’ but thats not true. It may not be entirely ‘.net webforms’ but you are still using the power of the .net frameworks class library. You are still using the, in my view currently unchallenged awesomeness of, Visual Studio (and yes I’ve used eclipse.. it’s not as amazing as you might like to think) and you’re still getting the ability to write in the same language for your website, windows services, silverlight, xbox and windows applications.

Admittedly it’s unfortunate how long it has taken for the release of asp.net MVC (although lets be honest PHP weren’t flying off the blocks with full and complete OO support so no-ones perfect). However the key is, as with so many things, that the quality of your .net output is down to the quality of the development.

Wrap up

I too, when I was asked to swap to .net from PHP, thought .net was an overcomplication. “I want to just call the database and do a loop outputting html in my markup. I don’t want to put a GridView in the markup then in a ‘code behind’ ‘load event’ access the database and databind to the grid”.

It’s a leaning curve as with all things. My early PHP was, going back on it, messy to read and understand as it was all mixed in with markup with include files all over the place. Similarly my early .net work probably relied on an overuse of server controls. As you get in to something you get better at it. And although .NET seemed like a greater move away from static pages than PHP (which is probably why I saw it as an overcomplication) I now personally love working with it.

I’ll wrap this article up briefly with some reasons I like .net that either I haven’t found at all, or have found harder to do in other environments/languages.

Similar syntax to java/javascript/actionscript
Reusable classes across web applications, windows applications, windows services, IIS modules, xbox games
Very easy to cache with a large variety of inbuilt assistance
Extremely OO friendly

I’m not saying .NET is the best, or amazing, but its certainly not something to be looked down upon or avoided purely because it’s Microsoft or because of a misunderstanding surrouding it. Over the time I’ve been using it it’s got better and although the picture I paint in the intro to this article is still true, it is less so nowadays. Css Control Adapters have been around a long time to assist with poor rendering, MVC is upcoming, and along with things like ClientID mode the bad things are going or easily avoidable.

I’m not sure I’ve covered everything I would have wanted to in this post, as it is such a vast area and this was really just a one sided conversation from the POV of .NET not being quite as sucky as many people think. Please fire any points gripes or questions at me.

Mini Glossary (for those .net virgins among us)

One form to rule them all

Webforms asserts that each page has one form that contains all elements rather than multiple forms as and when necessary. Or to quote…

For example, most ASP.NET Web pages contain a single server-side Web Form, with multiple Web controls inside the Web Form. The Web Form is an HTML control (System.Web.UI.HtmlControls.HtmlForm). Those Web controls inside the Web Form are children of the Web Form.

Postback

Form field data is posted to the server and used to repopulate form field values automatically e.g. if you change an instance of a textbox server control before posting back .net maintains the value you posted from the first screen. Similar to the following manually achieved effect in PHP:

<textarea name="body" id="body" cols="40" rows="5">
     <?php echo htmlspecialchars(stripslashes($_POST['body'])); ?>
</textarea>

Viewstate

The encoded (and optionally encrypted) first hidden field used by .NET as a means to persist programatically set control properties.

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTMwMTcxNDUyNmRk4HWhWoozWLYUelHWkPh3E67bXGo=" />

A control will gain its final value after the following cascade: Initial declarative value, Posted value from Request.Form (if postback), ViewState value (if changed via code after a postback).

Crazy IDs

Until the upcoming 4th version of .net developers were not trusted to know if there server control IDs were unique and because the built in viewstates, postbacks etc relied on it someone decided to make damn sure that control IDs were unique and context based on their location in the control heirachy. This led to ids like “ctl00_asp_menu_links_ctl03_contextLink”. Which, if someone added a parent or reshifted markup slightly, would change. Particularly helpful for clean client side development.

This post was written by Craig Rowe, developer at Headscape. For more posts from Craig visit his blog.

Hampshire Web Developer required

Posted in News on May 1, 2009 by Paul Boag

Are you a web developer living in the south of england? Once again, Headscape is looking for a talented, enthusiastic developer to join our team. We really need to stop expanding ;)

It was only 5 minutes ago we hired Helen but we are already looking to hire a new developer. We are looking for somebody with a computer science background, who is passionate about the web and can work out of our Hampshire offices.

Who we are looking for

We are looking for a server side developer who is absolutely passionate about the web and keen to develop new skills and experiences.

We are looking for somebody that loves finding innovative solutions to problems, enjoys working as part of a creative team and excels under pressure.

We need somebody with a computer science background preferably with a first or upper second degree.

Although Headscape is almost exclusively a .net development house, we do not require you to have specific experience in this language. As long as you can write great code, we will teach you the rest. (Anti-Microsoft Bigots need not apply!)

What we can offer

Headscape has a lot to offer employees. Just some of the benefits include…

A great working environment (watch our recent tour below)
The chance to attend industry conferences
All the training and careers development you need
The opportunity to work with an amazingly talented team
Loads of challenging and complex work that will stretch your skills
Some great client work to add to your CV
A decent office chair! :)

As for salary – Headscape always try to pay well and also pass on our success in the form of bonuses when things go well.

Where you would work

One of the best things about working for Headscape is our offices. Check out the video tour below. This was originally recorded to show people the room we have for rent. However, it also gives you a nice idea of where you would work.

The office is based in Lockerley, Hampshire. This makes it well placed for those living in Bournemouth, Winchester, Southampton, Romsey, Basingstoke and Portsmouth. However, its such a damn nice place that it is worth relocating for!

Interested?

So are you interested? If so (and you are not a recruitment agency) then email your CV to [email protected] or call him on 01722 320596.

Case Study: Wiltshire Farm Foods

Posted in User experience on April 23, 2009 by Paul Boag

One of the biggest challenges of running a successful website is balancing the needs of users with those of the business. This is especially true when an existing business model conflicts with user needs.

Although not always the case, one situation where this conflict can arise is with franchise based businesses. For the last few years I have been working with a franchise business called Wiltshire Farm Foods. Although, their business model has been phenomenally successful it caused significant problems for their online customers.

When business models and user needs conflict

When hired to redevelop the Wiltshire Farm Foods website I saw an opportunity for a quick win. Before a user could enter the website, they were required to provide a postcode. This was a massive barrier to entry as users do not like handing over personal information (such as a postcode) without being given a reason. From looking at the website statistics it was obvious many users were abandoning the site because of this requirement. I couldn’t understand why the company had created such a huge usability hurdle.

The Old WFF homepage

The answer was simple – Wiltshire Farm Foods had chosen to give their franchisees control over pricing. Without knowing where the user was located it was impossible to provide a price.

The decision to give franchisee variable pricing was a good one in the pre e-commerce era. However, as the importance of the web grew, it created a significant problem when competing against large supermarket chains with a national distribution network and standardised prices.

Although this was a problem for online users, the model worked for the business as a whole. Wiltshire Farm Foods had an incredibly successful relationship with its franchisees. Some had been with the company since day one. The business was driven by the entrepreneurial spirit of its franchisees and independent pricing was a key component of that success.

Working within constraints

With the variable pricing constraint remaining unmovable it became a case of managing the impact. Our first step was to move the point at which users were asked for a postcode. Instead of requesting it up front, we only asked for it when users asked for a price. This allowed users to view products and clearly linked the request for a postcode with pricing. We also explained why this step was necessary to reassure users this was not a ploy to send them unsolicited mail. However, ultimately we could not get around the extra step required to see prices.

It would have been counter productive to dig our heels in and refuse to compromise the user experience. Instead we took a pragmatic approach and worked within the business constraints. Ultimately this worked in our favour. When Wiltshire Farm Foods saw the increase in sales that came from moving where users entered their postcode, it encouraged them to consider changes in their business model.

Users now get a web price for each product when they arrive on the site for the first time. This price is then ‘adjusted’ once they login or provide a postcode. The user is notified of the change and because the price normally decreases they are generally happy. It is not ideal but it is a dramatic improvement that has greatly increased sales.

Turning a negative into a positive

Although the introduction of web prices is significant, it has not been the biggest change in the site. The real change has happened in my own thinking. In the beginning I saw the franchise model as a hurdle to overcome. However, I have since come to realise the benefit it has to the overall user experience, especially for the site’s target audience.

The Wiltshire Farm Foods audience is elderly with the average purchaser being in their eighties. Not only does this audience have certain accessibility requirements, they also have a number of concerns that need addressing.

One of their biggest concerns is security, both when purchasing online but also when meals are delivered. They are nervous about letting strangers in their house and yet need help unpacking and storing their meals.

The Wiltshire Farm Foods franchise system accommodates this perfectly. Customers always get the same driver and feel they are dealing with a local supplier rather than a national brand. They can even pay with cash on delivery and place new orders directly with the driver.

The problem was that the website did not reflect this local caring service. I was so preoccupied with the negatives of the franchise system, that I failed to identify it as a major selling point.

Franchises can offer personal service

Fortunately as I grew to understand the business model, I was able to grasp what Wiltshire Farm Foods had known since the beginning – that service was what set them apart. Wiltshire Farm Foods did not need to be overly concerned about universal pricing because they offered things no national supermarket could. They offered a friendly, caring service from police checked uniformed drivers. These drivers would even unpack meals and take next orders. However, most importantly they were a local supplier who customers came to know personally.

Once I understood this important selling point it fundamentally altered my approach to the site. The homepage shifted away from merely showing products to promoting the service that was supplied alongside the meals.

WFF homepage

The homepage now focuses on promoting these ‘value added’ services through the use of animation. However, more importantly we made a feature of postcode entry. Entering your postcode no longer just revealed your region specific pricing, it introduced you to your local franchisee. Gone was the faceless national brand and instead you were given the names and phone number of your local supplier. Soon you will even see a photograph of your local franchisee and details about their delivery schedules.

Screenshot of the local outlet information

All of this helps to reassure the user and personalise the experience. Computers are seen by many (especially the elderly) as impersonal and cold. Techniques like this humanise the experience and connect with users.

Lessons learnt

There is a lot that can be learned from the development of the Wiltshire Farm Foods website. We can learn about the importance of understanding your target audience and their motivations. We can learn how a perceived limitation in a business model can be turned into a strength. However, what excites me most is the opportunities provided by the Franchise model to engage with users in a more personal way that is lacking in many websites. With the growth of online social interaction there is the potential for an unprecedented level of customer care.

162. Social Media (Yuck!)

Posted in Classic shows on April 21, 2009 by Paul Boag

On this week’s show: Paul interviews Mel Kirk about using social media for marketing. Marcus, explains why you need a thick skin as a web designer and we give you the chance to interview Elliot Jay Stocks.

Podcast: Download (35.1MB)

Download this show.

Launch our podcast player

Housekeeping

In last week’s show I promised exciting things to come in the boagworld forum, and this week we begin to deliver on that promise.

Listening to the interviews with top web designers on this podcast is interesting, but wouldn’t it be even better if you could be the one asking the questions? What would you ask one of Britain’s most talented young web designers? Would you ask him about Photoshop techniques or about what makes his career a success? Well, now you have the chance.

Elliot Jay Stocks used to be the Senior Designer at Carsonified before going freelance. His clients now include WordPress, Blue Flavor and FreeAgent Central. He produces some truly stunning work and is considered one of the best web designers around.

He has kindly agreed to take questions from the boagworld community over the coming week. So starting on Wednesday 22nd April you can visit the Boagworld forum and ask him whatever you want. This is an amazing opportunity to really understand the working practices of another designer and discover the secret of his success. It is a rare opportunity to see how somebody else approaches the challenges of building an effective website.

Ask Elliot a question now.

News

Website management: you can’t automate everything

Sometimes I think I have experienced some kind of mind meld with Gerry McGovern. I continually find myself nodding furiously when I read his stuff. This is certainly true of his post recent post “Website management: you can’t automate everything“.

Gerry is writing about something I have mentioned on this show many times before – content management systems are not enough to solve your content problems. Gerry writes…

The school of content management brought us such developments as portals, customization, personalization, and distributed publishing. These management-free, technology-driven solutions have led to public websites and intranets teeming with poor quality, badly organized, out-of-date content.

What do you get when you personalize crap content? Personalized crap content. What do you get when you distribute publishing rights to people who canâ€™t write, donâ€™t care about what they write, think metadata is a country bordering Outer Mongolia, and will never, ever review or remove what they publish? You get the website you deserve.

He goes on to say…

Technology is important, even critical, but we still need quality people to manage websites if we want those websites to deliver value to the organization.

Amen to that!

IE6 Update: Pure evil!

While Gerry McGovern rants about content management, I want to do the same about a terrible website from people that should know better.

IE6Update has good intentions but its approach is at best misguided and at worse evil and manipulative.

The aim of IE6Update is to encourage IE6 users to update to a modern browser. I think we can all agree with that objective. IE6 lacks the functionality of modern browsers and its rendering engine struggles to handle modern websites. What is more, its a pain in the ass for developers.

That said, the end does not justify the means. IE6Update provides a Javascript ‘snippet’ that can be added to any website. This code displays a notice to IE6 users telling them that their browser is out of date and they should upgrade. So far so good. I consider that an acceptable thing to do presuming IE6 users can still access your content.

My problem lies in the way they do this. Instead of displaying a styled message consistent with the rest of the site, they choose to disguise the message as an official IE notification bar. This tricks the user into believing they are being asked to perform the upgrade by Microsoft.

This is the kind of approach you normally associate with malware or dodgy advertising. It is not the kind of thing you expect to come out of the web design community.

I spend half my life trying to explain to clients why they should treat users with respect. Something like this undermines that work by legitimising deception. If you want to tell IE6 users to upgrade then that is fine. However explain the benefits of upgrading, don’t trick them into doing it!

Where Have All the Flexible Designs Gone?

Craig Buckler asks an interesting question over at Sitepoint – Where Have All the Flexible Designs Gone?

Flexible sites are those which adapt to fill the whole browser window no matter how it is resized. As Craig points out, traditionally these have been considered good practice because they work at any resolution and the user is put in control of sizing.

However as Craig goes on to say, there has been a decline in flexible sites recently, with an increasing number of designers adopting a fixed width approach. Craig cites a number of reasons for this including…

Their consistency with design mock-ups
The pixel perfect control they provide
The additional cost of building flexible sites

Although these are valid reasons for fixed width design, they are nothing new. Flexible sites have been around for years. Why then are they dying out now?

There are two reasons why I generally no longer recommend flexible sites to clients…

Support for page zooming – All modern browsers now support page zooming. This removes the needs for sites to accommodate increased text sizes. If the user wants the site to fill the screen they simply zoom in. What is more a flexible site can cause horizontal scrolling when zoomed so creating a usability problem. This is especially in IE7.

Graded browser support – Because I deliver different experiences to different browsers using different stylesheets it is no longer necessary to have a “one design suits all mentality.” I can deliver one stylesheet to capable browsers and another to small screen devices.

Although there are still reasons to use Flexible design, the argument is no longer as convincing as once it was. The return on investment often no longer justifies it.

Help your site convert

Smashing Magazine have released two posts that provide excellent advice on encouraging users to complete a call to action.

The first, imaginatively titled Design To Sell: 8 Useful Tips To Help Your Website Convert, covers subjects such as…

Subliminal Suggestion
Preventing Choice Paralysis
Try before you buy
The Gutenberg rule

The followup post 7 More Useful Tips To Help Your Site Convert goes on to cover…

A/B Testing
Scannable Feature Lists
Streamline The Sign-Up Process

Both articles offer lots more tips than those listed here, providing explanations and examples for each.

It is easy to believe only ecommerce sites need to convert. However, that is not true. All sites need some form of call to action, so these two posts should be required reading for all website owners and designers.

Interview: Mel Kirk social media for marketing

Paul: So I’m very excited today to have joining me, Mel Kirk. Hello Mel, how are you?

Mel: I’m very good thank you. How are you?

Paul: Very good. It’s good to have you on the show. Feels like I’ve had so much to do with you and yet we never had you on the show and that is a sin and I am truly sorry.

Mel: No problem. We have known each other for years now I think so…

Paul: We have, haven’t we. Let’s start with a little bit of an introduction for those people out there who maybe don’t know you as well as myself. Can you tell me a little bit about your background and where you come from and what kind of stuff you’re involved with, that kind of thing?

Mel: Yeah, absolutely. So I moved into web space about four or five years ago when I started work at Carsonified, which was Carson Systems at the time and what was arranging their events, Future of Web Apps and Future of Web Design. And from there I heavily became involved in promoting the apps that they were building and then eventually moved on to communities manager before I finally left, which was about eighteen months ago. And then after that joined Aardman Animations, Wallace and Gromit…

Paul: Aah, yes

Mel: Everyone recognizes it when you say Wallace and Gromit and my main project there was to work on a video platform called Formations. Which was a joint venture with Channel 4 which was in effect, it’s like a YouTube for animation…

Paul: OK

Mel: …which was brand new when I joined so my work was really around building a community around the new site there and getting that to launch, which we did. And then most recently I joined WhiteLabelDating.com as marketing manager of, so I see some very interesting sites.

Paul: Yes, that’s an interesting career move. I didn’t know about the last one. That’s fascinating. Ooh, we’ll have to come onto that one later.

Mel: Absolutely. Um so yeah, now I’m kind of responsible for researching our target audiences and their behaviors and reviewing user perspectives and brand building, all of that kind of stuff.

Paul: So is it fair to say you describe yourself as a marketeer?

Mel: Absolutely, yeah.

Paul: So, that’s good because we haven’t had a marketeer on the show before and I’ve gotta say I think that there area lot of web designers out there that are a little bit snobbish when it comes to marketing and so I think it’s a good subject for us to cover on the show and talk about, a little bit about online marketing and how to approach that kind of thing, so it’s good to have you here.

Mel: Thank you.

Paul: Right, where to begin. Um, OK let’s start at the beginning. Let’s say that somebody has got a really good product or company that they’re very proud of, they’re very excited about but they need to generate some kind of awareness online of who they are or what they do. Where do they start? Where do they begin that process?

Mel: I think for me the main thing before you implement any kind of strategy is research. So knowing your market inside out. Taking the time to work out how those people communicate and where are those discussions taking place. And then becoming a part of that conversation but doing it genuinely with something to offer. So don’t be afraid to say that you’re bringing something new to the table and that you’re obviously there to promote what you have to offer but in return being able to go into forums for example and answer questions for people, to be seen to have an opinion on current topics so that gradually you build yourself up to be seen as an expert in your field so that people have confidence in the service that you’re offering or the product that you’re trying to sell to them.

Paul: Sure. So it’s about establishing yourself as an expert more than it is pimping your product or service.

Mel: Absolutely, and I think nowadays people are used to being marketed to so they turn off as soon as you start to kind of start to heavily sell a product to them so you have to really be going there with a genuine interest and wanting to help those people in some way and they’ll be receptive to that.

Paul: Now you talk there about researching and going and finding out where people congregate and where they are online. How do you go about doing that process? You know, what’s involved in researching?

Mel: So, first of all you need to know kind of who you’re targeting your product at so know your product inside out before you go out there to start to try to find where those people are. Then once you know the kind of topics they’re likely to be discussing or the types of people that you’re after, looking for groups. User groups, Google is fantastic resource that should be used fully. I know it’s so simple, but so many people don’t spend enough time fully researching on Google kind of the different sites that are available or the different social networks that they can join so the first thing that I do, I know that everybody kind of mentions it now but having a look on Facebook, seeing what kind of groups are out there, checking LinkedIn, seeing what activities are taking place already. Setting up Google Alerts, using TweetDeck with alerts on there so that you’re currently being updated with the conversation as it’s taking place and then you’re kind of in a position to join that and to have something that you feel will be valuable that you can contribute to that.

Paul: So those alerts and things that you’re setting up aren’t necessarily alerts
directly related to your own brand or your own products but alerts to what things that your target audience might be interested in?

Mel: Yes, so for me I would set up alerts that were dating specific so that I know the current issues that are going on. I then may set up alerts thinking “OK, well our target audience is 18 to 35. Generally, what’s of interest to these people?” And setting up alerts, it can be completely abstract, searches out there. For example, if you’re targeting guys, I know it’s stereotypical I guess, but um, new beer brands, new video games. Things that you know that they’re likely to have an interest in that you can start to build some commonality there.

Paul: So you’re not even, in that situation you’re not necessarily, I’m guessing with dating you go after guys quite heavily. They’re a big audience to you so you wouldn’t necessarily go after alerts for dating related stuff, it could necessarily be kind of alerts for anything your target audience are interested in, just so you can work out where they are I’m guessing.

Mel: Absolutely. I mean if you look at the dating industry as an example. If we’re targeting guys, we may know that guys in that age have certain interests whether that’s gaming or socializing with friends that may not consider going on a dating site but if you’re already talking to them and raising your own brand awareness then when they get to the point they’re considering a dating site, you’ve already built that brand with them and they recognize you as a name so.

Paul: Sure. I think the thing that often strikes me that both clients and web designers maybe aren’t involved in in marketing is that they often underestimate how long all this stuff takes. To build that relationship and that brand takes a considerable time. It doesn’t kind of happen overnight and often people seem to expect instant results which surprises me. I saw one other thing as a use of Twitter that kind of grabbed my attention and I wondered if you did the same thing was that he would create alerts on questions, whether it be whatever, so that when somebody asks a question, you can go in and respond. Is that the kind of thing you do as well?

Mel: Absolutely. It’s not just about going in and leeching off the community. It’s about going out there to give them the answers to their questions so that you are actually providing a service and some value to them rather than just spamming them and I think that really is the difference. It’s about wanting what’s best for your users rather than just trying to sell your service.

Paul: Yeah. I’m guessing that people can kind of see through anything that’s more direct these days and are uncomfortable with it.

Mel: Well there’s so much of it, unfortunately.

Paul: Yeah, there is. Let’s talk about techniques then, or techniques and tools. You’ve already talked about TweetDeck, you talked about Twitter, you know you mentioned alerts, Google Alerts and that kind of thing. What other kind of tools do you use for reaching people that you, your target audience? What other tools are available to you?

Mel: Um, so for us a big thing is the blog. Being able to have an open conversation with our community. Whether that’s with partners that are using us or the end members that are signing up to the sites. I think for me one of the biggest things with the blog was probably with Formations when we didn’t actually have a product, but we already had people waiting to use it by the time we launched it. And that was purely by going out there saying, “We’re going out as a new venture. We totally want your opinion. We want to know what it is that you are looking for from our service.” And then when you finally go out there and you roll out your new service or your product and you’ve built in their feedback then all of a sudden you give them a sense of ownership and they become your brand advocate so I can’t talk highly enough about the blogs but that’s assuming you actually listen to the feedback. Having a blog and just having it be one way would never work.

Paul: I mean it’s interesting there that you talked about having an open conversation through your blogs…

Mel: Yeah

Paul: …and using the feedback that you receive. How do you go about that? How do you stimulate conversation? I mean I’ve had clients that have set up a blog and they’ve written a lot of article and never a comment will appear, you know. What kind of ways do you use for stimulating that conversation?

Mel: OK, I probably shouldn’t say this. Oh, no, it’s all gonna go down hill, but poking friends, I know it sounds bad. Poking friends to try to get them to spread the word for you. You never know what contacts those people will have. You will have built up a network of people yourself and it’s about not being afraid to ask those people for help. Everybody needs help at some point so asking them to spread a link if they can. But then also when you’re going out there and you’re talking to people that you think are going to have some interest in your blog don’t be afraid to go into conversation, add something and drop your link there, but that’s not going in and purely just linking, like link baiting at all. Have something valuable to say, but don’t be afraid to link that to your own site.

Paul: But what if you’ve kind of got people that are coming to your blog but they’re not engaging, they’re not posting comments? So you’ve got an audience but they’re a very passive audience. Is there stuff you can do to encourage them to participate more?

Mel: Very much. I think the way that the blog is used can be critical on how many comments and how interactive that then becomes. I think Gary Vaynerchuk does a fantastic job on his blog where at the end of each video he tells you to comment. It’s very very easy to see as soon as you hit his page, what you need to do to leave a comment or to contact him on Twitter. The call to action there is very very clear. And similarly the videos that I do at Random Mel, the first and last thing I do is to put the URL at the start and end of the video and then if I want someone’s comments on something specifically then I make sure that I tell them what to do. You can’t just assume that your users are going to know, or want to comment, so you have to really prompt that from them.

Paul: Yeah, I mean I’ve seen that a lot in blog posts where the blog post has been written as this diatribe of “I’m the expert. I know what I’m talking about. Here’s the stuff,” and you’ve got nowhere to go as far as responding to it. It’s almost like the person doesn’t want a response. They’re certainly not asking for feedback, or they’re not asking any kind of question you can respond to.< /p>

Mel: Absolutely, and at the end of the day it doesn’t matter how senior you may be within your industry or how much you know. There’s always something that you can be learning from these people. And being able to get feedback from those, that’s information and data that these huge organizations that aren’t up to speed with social media yet would pay thousands of pounds for. So it’s a real advantage if you use it properly.

Paul: I mean there’s a kind of follow on issue here that you’ve kind of built some excitement around whatever your product or service is, you may have done enough work to get in the position that you’re currently in of actually having a group of passionate people there waiting for your product to launch, and creating that initial buzz is easy, or easier but it’s maintaining that buzz over a long period of time and maintaining that engagement with users so I’m interested in how you go about keeping that relationship going over the longer term. What kinds of things do you do there?

Mel: So one of the main things here I think is having content available to them. Having something new so they have an incentive to come back. You can’t just expect to launch and for that high wave to be maintained. But I also think that it’s worthwhile bearing in mind that you should be there just to facilitate the conversation between them. If it’s some kind of website that you have, for example, for people to communicate with one another. It’s not necessarily for them to communicate with you, but you’re helping them to achieve whatever it is that they want to get out of your service.

Paul: Yeah.

Mel: So continually trying to update your service to make it the best that it can possibly be and to actually have a look back and to not be afraid to change it if you can see that users are using the service in a slightly different way than you thought they were going to. Not being afraid to go, “OK, well it’s not quite what we had planned, but let’s go along that route.” Just as flickr was born I guess.

Paul: Yeah.

Mel: So being able to change that and giving the users a sense of ownership. I can’t stress how important that is. Because they become your advocates and no matter how well you communicate with these people, you’re always going to be the person that is promoting a product or service, whereas your users are doing it because they genuinely believe in you.

Paul: There’s a kind of interesting potential problem in that, that if you as a marketing person is the person that is engaging with the community and if the community is feeding back ideas about the product and service and you’re wanting to take those on board, there’s gotta be a very good relationship between marketing and the people actually developing the product or service. How has that worked in the past? Have you found that people have been very receptive to that?

Mel: Um, so we’ve had something very very similar here at White Label where we are now positioned with the development team, because as far as I see it, marketing and development very much fit as one. And marketing now own all of the projects that we’re doing so that we were able to take our users needs to drive that forward and to prioritize that. Development is incredibly important, but it really does have to be the users’ needs that drive forward what’s most important to them. And so we have regular updates with the development teams but like I say we very much take responsibility for new features and functionality which is added there.

Paul: That’s very interesting. There’ll be a lot of people that’s listening to this podcast that are probably deeply uncomfortable with the idea of new features being driven out of marketing.

Mel: Yeah.

Paul: Why do you think it should be marketing where that’s based rather than the development team?

Mel: I say marketing simply because in terms of my role I very much kind of look at the usability of the site…

Paul: OK

Mel: …so trying to increase user experience so maybe that’s kind of somewhere in between I guess, rather than traditional marketing. But if I can see conversations that are taking place and I can see how users are kind of functioning on the site and how we might want to implement changes then it’s kind of easier to get buy in from the development team when I can go to them with hard evidence as to what it is our users actually want.

Paul: I mean that’s quite a quantum shift in the way that marketing operates. Do you get a sense that marketing as a discipline is changing quite radically and if so, in what kind of ways?

Mel: Absolutely. I guess when you introduced me as a marketeer I cringed slightly because I did marketing years back when I worked in a bank and things were very very different back then. But I would say that marketing now has very much come along the lines that it is grass roots and that’s what I feel comfortable with. It’s not necessarily acting as a marketing function but it’s about being a user advocate and working out what can we possibly do to make their lives as easy as possible and to delight them? So not just give them the service that they’re expecting but that little bit extra as well. And I think that’s where marketing comes in now because then as soon as they’re happy, there are so many tools out there for those tools to vocalize whether they’re happy with the service or not, they do the rest of the work for you.

Paul: So do you find that largely it’s about creating a passionate, enthusiastic community that then does peer to peer word of mouth marketing rather than sinking large amounts of money into banner advertising or whatever else?

Mel: Totally and we find that it’s sustainable whereas if you pay for PPC and as soon as you stop that you’ll tend find that traffic to the site will stop as well. Whereas if you’ve got an active community out there that are truly engaged with what you have to offer then that’s going to be sustainable in the long run.

Paul: Of course the downside to that is that you’re not in control of the message in the same way as you would be with traditional marketing and that you are very dependent on the good will of your community for that to succeed. So the question then arises, what do you do when things go tits up? What do you when things go wrong and there’s negative publicity and people are bitching and moaning online? How do you manage that ki
nd of situation?

Mel: I think from my point of view it would be to not be scared to hold your hands up and to admit when you’ve made a mistake. If you can be totally transparent in what you’re doing and you can explain why something hasn’t gone quite right. If you look at Facebook and how they took a step back not that long ago I think that was quite a brave move for them, but then you become an approachable company that people realize it’s humans behind the brand and as soon as you have that they become a lot more forgiving. Obviously there are going to be some people out there that bitch about you no matter what and unfortunately they are going to exist but all that you can do is kind of educate them as well as you can so they’re portraying the right message for you and then if it is as case that you’ve done something that your community don’t agree with, holding your hands up and not being afraid to change that to their demand.

Paul: I mean it’s interesting there that you talk about exposing the humans behind the brand, that increasingly seems to be the philosophy of a lot of companies, to encourage their employees to blog and to twitter and to do all of these kinds of things. But I think in a lot of other companies there’s quite a high level of fear again about losing control of the message and that traditionally that’s something that marketing want to do and the idea of opening it up to everybody within the company seems quite horrendous. How would you reassure people that are having those kinds of doubts?

Mel: I think if there’s a small-scale project that you can start that on to prove that the fear is often a lot worse than the actual reality behind it then that’s always a good way to begin. I would say that enabling your staff to have a voice is always a great way if they’re able to blog or to tweet. That’s not to say that you don’t go out there and say, “OK. If you’re going to be associated with the company, you need to be careful,” for their own rights as well as ours. You still have to be sensible with what you’re doing out there, but at the end of the day people buy from people they don’t buy from big companies. And the most successful companies out there are the ones where their employees truly believe in the products and they kind of do a lot of the work for you rather than just marketing function.

Paul: Very interesting. I mean to some degree mind these days, increasingly all of us online are having to be marketeers to some extent. We’re all managing our own personal brands and our own personal identities and who we are and how we’re perceived online. I’m quite interested in your perspective of that, because I know that you have been amazingly honest and open online and that that’s come back to bite you on some occasions. So what kinds of hints and tips would you give to people that are trying to manage their online identity? I hate that phrase, that sounds awful, but you know what I mean. You know what I mean.

Mel: Yeah. So, I think my biggest word of advice would be to be yourself. I think at the end of the day, if you can go to bed at night and you can sleep knowing that you’ve been true to yourself and you haven’t gone out there and tried to scam anyone or anything like that then I think that’s the biggest hurdle. There will always be some people that will question or criticize whatever moves you make but that’s a sign that they’re actually paying attention so although that may not be positive, it’s kind of the old PR way I guess, that any publicity is better than no publicity. And I guess for me, work with companies that fit your ethos. So, I’ve been approached by companies before where I’ve felt really kind of uncomfortable around the product that they’re offering. I don’t feel that I could sell it whole heartedly. I know that that will reflect personally on me so I will only associate myself with products and services that I truly believe in. I think that then kind of maintains people’s perspective of you I guess. But yeah, being honest is the main thing I think.

Paul: What about in regards to how open you are? I mean we’ve talked a lot about open and transparency. Is there a line do you think? Is there a point where you should just shut your mouth and not speak, so to speak?

Mel: I think that there is, and I think that that varies for each individual and it really depends on how comfortable you feel online. Some people are quite happy putting everything out there, and so that’s absolutely fine for them, that works. I’m probably among one of those. Exhibitionist, if you will. And then there are other people, they don’t want everybody to see what’s going on on Facebook. They don’t want everyone to know what’s going on in their personal lives. And that’s absolutely fine too. So you have to do whatever fits with you best. I mean, for me personally, I’m very very out there in the space and that’s just because that’s the way that I choose to lead my life. That said, you generally, apart from me on Twitter saying that boys smell, won’t find me talking about relationships or stuff that’s hugely personal to me. It will be about my lifestyle, it will be about my work, but it won’t be incredibly personal stuff. That’s my line, so. What’s your line?

Paul: I don’t know what my line is. I knew you were going to say that. That’s just because I’ve just posted on Twitter that I’m chronically depressed and don’t want to work anymore. So you’re picking me up on that. No, I think for me, I tend to say everything slightly tongue in cheek, but then there will always be a kind of element of truth in it. So I perhaps am more personal than I think I am online, but I just dress it up in humor to kind of cover it up so, I mean that comment, for example. Yeah, I’m a bit pissed off today and I’m not really in the mood for working, so I’ll exaggerate it and make a joke out of it and make a bit of fun out of it. Sometimes that can be really dangerous. Humor does not translate very well, especially into text format. So yeah, it’s difficult isn’t it? It’s kind of, you have to feel it out and work it out for yourselves I guess. Anyway this is supposed to be me interviewing you, you’re not allowed to ask questions to me.

Mel: I’m sorry.

Paul: You’re breaking the rules Mel. OK, one last question to wrap up with. Which is that, let’s face it, social media has become a little bit of a dirty word at the moment.

Mel: I hate that now.

Paul: I know, it’s horrible, horrible, horrible. And there’s so many people out there that are kind of piggy-backing off of the back of it and I’m fed up. If I have one more person decide to follow me on Twitter that’s got the words “social media” in their title I’m gonna scream, but underlying all of that, actually there is something of value there and it’s this whole, you know, what we’ve been talking about really, this whole kind of community driven aspect to marketing and to our product development and all of that good stuff. But, here’s your chance to rant Mel. Give us some of the things that really anno
y you about social media. Some myths maybe that surround social media that need dispelling.

Mel: Oh my goodness, and this is to wrap up?

Paul: Yeah. Something light and breezy to end with.

Mel: OK. So, for me, everybody saying that social media is really really easy would be my biggest thing. It’s easy enough to do, if you know what you’re doing, but not everyone can do it. Some people know how to communicate with communities, other people don’t. And it’s kind of about knowing your strengths so, for example, some people may be hugely technical, but when it comes to knowing how to market themselves they aren’t always that forthcoming. And so it really does depend on the person that you’ve got doing your social media for you I guess. My next big one would be that giving away ideas and content shouldn’t be free, that you should be charging for that in some way. I know there are plenty of people out there that say that. But if you’re going to be seen as an expert, you have to prove yourself. You can’t walk into a space and kind of stamp your feet and say, “OK, look. Pay me as a social media expert because I know so much.” You have to provide something to people, show that you know what you’re doing and be prepared to do a lot of work for free in the meanwhile and then gradually those paid projects will come along. Next one would probably be viral campaigns. Easy. They’re very hit and miss. Everyone now thinks they can upload a video to YouTube and now hit the big time and it’s really not the case. It really does depend on the audience and how they react to each piece that’s put out there. And then I guess my last one, and it’s my last one, I promise, will be that there’s now way of tracking the effectiveness of a social media campaign. I just don’t believe that at all. I think that no matter what you’re working on you should always set yourself targets. Now whether that’s a number of comments that you want to appear on a blog post or a number of members that you want to sign up, search engine optimization. There are so many things that you can track, but everyone still believes it’s slightly fluffy, and are nice to have and I couldn’t disagree with that more. So…

Paul: I like that one. That’s a really good one. I totally support you in that, that I think that making things measurable, even if you don’t meet those targets, I think having targets and aiming towards them is vitally important.

Mel: Absolutely. And anybody who comes in and says that they can do social media for you without those, I wouldn’t trust in a million years.

Paul: Excellent Mel! That was really interesting! It’s really good for us to kind of branch out and look at these things. You know the Web is becoming so much more than just putting up websites and we need to be talking about this kind of stuff more so it’s great to have you on the show. Thank you for your time.

Mel: Thank you for inviting me.

Paul: We’ll have you back again soon, no doubt. Goodbye!

Mel: Thank you.

Much thanks goes to Todd Dietrich for transcribing this interview

Listeners feedback:

In this week’s listeners section, Marcus answers a question about handling criticism from clients and we hear from Japh about Internet Explorers future.

The need for having a thick skin

This question in from Bill:

Currently my working life seems to be one long string of criticism and rejection. I try to get involved in debate as guys like you recommend I should, but my ‘real-world’ take on things usually gets shot down.

Trying to win work is even worse. I try to make sure that I don’t give too much away to potential clients up front and I try to discuss sensible budgets with them, but their expectation is that I will redesign their homepage for nothing to ‘see if I’m good enough’ and any budget request is met with ‘you tell me’.

Even though Paul and I pretend to be big and tough, nothing-can-touch-us types, the truth is rather different. My constant need for adoration and Paul’s megalomania mean that we both take criticism very hard. Ok, I’m joking, but there is a grain of truth in there.

No-one likes criticism or rejection, so what’s the best way to soften any blows?

All of the people

If you decide to lay your soul bare in a blog or regularly provide advice in a forum or through articles, then chances are someone will disagree with you. Quite often they’ll be rude and destructive in their criticism as well.

Try and take any positive criticism as an addition to any debate and get wholeheartedly involved. But, be prepared to accept that, sometimes, you might just actually be wrong.

To those people who are intent on using you as a punch-bag – ignore them. Getting into any kind of argument will almost certainly end up with you looking and feeling worse. You will tend to find that you have a lot of allies in situations like these – let them fight on your behalf.

So, accept it, you cannot please all of the people all of the time.

Go for it

All that said, you should still get involved in debate, post questions and views and comment as much as you can. You will get yourself known and even if that’s as the ‘real world’ guy then so be it.v

I’m guessing that the work you are trying to win is fairly low-end. Getting involved in discussion is a very effective way of promoting yourself. It shows that you are keen and (hopefully) that you know what you are talking about. This should start to attract a better calibre of client.

However, this does not happen overnight, so be patient.

You’re worth it

Trust you’re ‘gut’ when dealing with potential clients. Quite often people are genuine when they say that they have no idea of budget. This doesn’t automatically mean that they are a waste of time; just that they need educating in your processes.

However, if someone is trying to manipulate you into doing work for free – and that doesn’t necessarily mean doing unpaid mock-ups, it can just as easily mean scoping out an idea (why should you not be paid for being creative?) – then walk away. You will regret it if you don’t.

Walk away.

Talk money

I’ve said this before so apologies for the repetition but I think it’s important.

Ask people, up front, what their budget is. Explain that you need to know it to respond with the most appropriate solution for them. You may only be able to squeeze in a quick 2 or 3 page flat site within their budget or you may be able to offer a huge variety of functionality and testing.

If you don’t get anywhere by asking (and, as I mentioned previously, they really may not have a clue) then create a 2 or 3 paragraph solution with associated tasks (a mini proposal if you like) and email that to them with an associated ballpark price.

This will either stimulate discussion or get you dismissed out of hand. Both outcomes are good news.

Stick to your guns

We decided, quite a while back, and for very good reason, that we would not do any unpaid mock-up design work. In some cases this
has been seen as a positive thing (once it has been explained) but with other potential projects I’m sure it has adversely affected our chances of winning the work. However, we should stick to what we believe is right. Chopping and changing presents a negative image to both potential clients and our staff.

If you do decide to present initial mock-up ideas don’t be tempted into iterating them further. Any client who asks for is again asking for free work and is most definitely to be avoided.

Stay calm!

Sometimes the people we have to deal with are mouth-open-wide-unbelievable in their arrogance, rudeness, pickiness, narrow-mindedness, impatience etc etc…

Sometimes we are manipulated into doing work for free.

Sometimes we are strung along through a pitch process when we have no chance of winning it.

This can be a little irksome and, at times, we may feel that an adversarial approach is the right one! It isn’t. It can only damage your reputation.

Even if you don’t see eye-to-eye with someone it doesn’t mean that they will never hire you or recommend you to someone else.

So, in essence, work on your patience, cherish your good clients and keep your skin thick.

IE6 and IE8

Finally, Japh has posted an Audioboo on last week’s discussion about the future of Internet Explorer.

Hi. So, there’s been a lot of talk lately about the IE8 being moved to an important update hopefully to prompt people to upgrade form IE7 or whatever previous version to IE8. So, I just wanted to put in my two cents and specifically I guess this is a response to Paul Boag’s recent audio review about this topic. I agree with Paul that IE8 being an important update won’t kill IE6, mostly due to corporations. As IE7 was made a high security update quite some time ago and a lot of users upgraded before then and since then from IE6 to 7. I think those users will proceed as they have been and upgrade to IE8 like the good little lemmings that they are. And it will be the corporates that are stuck back in IE6. Mostly, I think, this has to do with maintenance periods and things like that and the various support deals that corporations have with Microsoft. But there is some good news there as well in as much as Windows XP’s life span is being reduced. Microsoft’s reducing support on that to be the extended support instead of their main line support which basically means you only get security fixes and that’s all. So, for corporations, even though they’ve paid up and so they get it little bit longer than everybody else it’s kind of a bit of a kick in the pants for them and telling them they need to move into high gear and start upgrading their standard operating environments to include the latest operating system which will include hopefully the latest browser – IE7 at least if not IE8. And I think that’s probably going to start happening early to mid next year. So, it’s not too far off before we would have , you know, hopefully, complete death of IE6. That’s my two cents.

If you are an iPhone user then why not submit a question via AudioBoo yourself? Go to Audioboo.fm for more information. Once you have recorded your boo tag it with “for boagworld”. No iPhone? No problem. You can also submit comments by skyping “boagworldshow” or emailing us an MP3 file.

Bamboo Juice

Posted in Talks on April 18, 2009 by Paul Boag

I was fortunate enough to speak at the first everBamboo Juice conference on the subject of selling web design services. If you were there or are just curious, this page will allow you to access my slides.

My talkwas entitled ‘Winning business in tough times‘ and covered the following…

As the economy slowly collapses like a giant soufflé, where does that leave us as web designers? How do we ensure the work keeps rolling in? Paul shares his experiences of winning new business in the tough times while still nurturing existing clients. He explains how business development is everybody’s concern, not just the sales team.

You can eitherdownload a PDF of my slides(31.1mb – includes speaker notes) or watch here thanks to Slideshare.

When to outsource web work

Posted in Web strategy on April 9, 2009 by Paul Boag

Your in charge of your organisations website. It has become moderately successful and now you have a decision. Do you hire a full time web designer or outsource to a web design agency?

In many situations the decision to develop in-house or outsource is not down to you. Either an internal team already exists, or you are forced to outsource because you cannot fund in-house staff. However, occasionally you will have a choice. How do you decide between developing your website in-house or outsourcing to an external agency?

Lets take a moment to compare the choices.

Using an in-house team

Using in-house staff provides a number of benefits…

Internal teams are more cost effective for long-term projects and ongoing maintenance.
Because in-house teams work within the business they can understand organizational objectives and target audience, better than an external agency.
An internal team is committed to evolving the website over time. They are constantly looking for ways to improve the site.
An in-house team is able to promote the website internally and ensure it does not become neglected.
Because an internal team is not juggling multiple clients they can (if well managed) be more responsive than an external agency.

Outsourcing to a web design agency

However, outsourcing can also bring some substantial benefits…

Outsourcing is more cost effective for short projects where the expenses of hiring, salary, training and equipment would be prohibitive for an in-house team.
An external agency brings a fresh perspective that institutionalized in-house teams cannot offer.
External agencies have a broader perspective of the whole industry, rather than what is happening within a single company.
An external agency needs to constantly ensure it is cutting-edge to stay competitive. This ensures that the quality of work is consistently high.
Because external agencies tend to be larger than in house teams they have more specialized and highly skilled staff.

The choice

There are good reasons to go with either approach. It comes down to two things, the length of the project and the funding available. If your website needs constant development and will evolve on an ongoing basis then an in-house team may be more appropriate. Of course, supporting an in-house team can be expensive. There are the initial costs of recruitment and equipment, as well as the ongoing expenses of salary and training. For shorter development projects the benefits and cost savings of outsourcing may outweigh the convenience of an in-house team.

In reality, the decision isn’t between internal or external. There is no reason why you cannot combine both approaches. For example, an external agency could be used for development work while ongoing maintenance could be handled by an internal web editor. Equally, you could do the bulk of development internally, but bring in external agencies for specialist work such as search engine optimization or user testing. This hybrid approach works well because it combines the strengths of both in-house and external.

This is an extract from Paul’s book – The Website Owners Manual

160. Education, Education, Education

Posted in Classic shows on April 8, 2009 by Paul Boag

On this week’s show: We speak to Aarron Walter about teaching web standards. Ryan Carson starts a series on web applications and Paul talks about remote user testing.

Podcast: Download (30.2MB)

Download this show.

Launch our podcast player

Housekeeping

A couple of quick pieces of housekeeping to kick off with…

Huge thanks to Ryan Taylor, Paul Stanton and Sarah Parmenter who did a stellar job standing in for myself and Marcus on last week’s show. They were actually far too good and I have already started receiving requests that they become the permanent hosts! Anyway, if you didn’t hear last week’s show then make a point of downloading it.
My second piece of housekeeping is a quick plug for Bamboo Juice, a grass roots conference taking place in Cornwall on the 24th April. Myself and Jeremy Keith are just two of the speakers in what will be a packed day. It’s so good to see smaller conferences like this springing up outside of London and so I would encourage as many of you as possible to attend. Best of all its only £99 (£79 for Boagworld listeners!)

News

To be honest, what with SXSW and my week’s holiday I am feeling completely out of touch with the web design world. Fortunately, Mr Stanton is continually updating our twitter feed with juicy stories. I have therefore picked 4 that caught my eye.

How to create a great web design CV

Poor old Smashing Magazine. People do like to tease them (myself included), but they write some damn useful articles. A recent example that caught my eye was ‘How To Create A Great Web Design CV and Resume?‘.

This post is essentially two articles in one. It starts by asking 10 designers to design a hypothetical CV for a fictional individual. Each designer writes a short paragraph about their chosen approach and you get to look at some nice examples.

The second part of the post provides 10 useful tips for creating a great CV. Suggestions include…

Make it printable
Have a summary
Link to online projects
Show your personality
Keep it simple and understandable

For the complete list of tips read the whole post.

Its a good post, but I am not sure whether producing a ‘designed CV’ is entirely necessary for web designers. If I was hiring a print designer then I would expect a CV to look impressive. However, if I am recruiting a web designer I think I would be just as happy receiving a cleanly designed CV that links to a stunning portfolio website.

There are a lot of differences between designing for the web and print. It is possible to be good at one and not the other. Therefore, a printed CV doesn’t tell me much about a persons capability as a web designer. That said, a well designed CV isn’t going to hurt your cause!

Design: Make it Memorable

One tip that could have gone in the Smashing Magazine article, is to make your CV ‘memorable’ and not just ‘flashy’. This picks up on the theme of a post over at 37 Signals entitled Designers: Make it Memorable.

The post talks about the difference between making something visually appealing and actually memorable. Too many sites are impressive but fail to leave a lasting impression. At one point in the post the author writes…

I started to recall those amazing Flash Sites of the Day. You know those sites that get passed around via IM in your office on a slow day? Simply amazing design and programming. Problem is: I can’t for the life of me remember what those URLs were much less the company/product that was being featured! Isn’t that the point with those sites? That the impact should be profound so that you remember Product or Company X?

This is a lesson that all those involved in the web design process need to learn. Whether we are designers or website owners, we have a tendency towards thing that provide the wow factor. However, often it is the thing that makes us go wow we remember rather than the message being communicated.

Statistics and website owners

Our next article of the week is an ‘all too brief’ post on web stats entitled How to Sell Statistics to Clients.

The post focuses on a common problem – most website owners know they should be tracking website statistics, but don’t really know what they are looking for. In fact the author writes…

In my experience, the loudness or frequency of a person’s request for web statistics is inversely proportional to their understanding of them.

That has often been my experience too.

He goes on to identify three ways that we as web designers can help rectify this problem. These are:

Providing cheat sheets that help the client understand terms like ‘hits’ ‘page views’ and ‘unique users’.
Add web metrics training into the budget of your projects.
Provide summaries and reports for the client on key metrics such as conversion rates or sales.

To be honest this is a much bigger problem than can be covered in a short blog post. Too many website owners think that having Google Analytics will solve their statistics needs. However, having the data is not the same as understanding it. If this information is misread it can lead to bad decisions about the future development of a site.

Specialist vs. Generalist: Who Wins?

The final post this week is of interest to pretty much everybody who listens to this show. It asks which is better – the Specialist or the Generalist.

This is an important questions for both web designers and website owners. As web designers we need to know whether we should be specialising in a specific area of web design. It is important for our careers and our businesses.

As website owners we want to know whether the pain of dealing with multiple specialist suppliers is worth the increased expertise you would receive over a generalist.

It has to be said the article is written mainly from the web designers perspective. However, I think there are lessons to be learnt for all sides.

The post outlines the pros and cons of both approaches, but ultimately comes down on the fence when it says…

There are advantages to being in both groups, but I think the only way to be truly successful is by being a little of both. You can be a specialist, but in order to be able to develop a profitable business, you may need to be able to supplement your specialty services with some add-on services that may not be exactly in line with your focus.

Personally, I think it depends on how you define specialist. The type and level of specialisation can vary massively and the way you position yourself will define your success. For example, you may specialise in a certain discipline (e.g. Ruby on Rails development) or in a specific market (Higher Education).

Ultimately, whether you are a website owner seeking an agency or a web designer forging a career, it is all about balance.

As a web designer, if you specialise too much you will not find work. If you generalise you cannot differentiate yourself.

As a website owner you want a web designer who is enough of an expert to deliver an outstanding solution, but you do not want so many specialists that your project turns into a nightmare.

Interview: Aarron Walter on Interact

Paul: Hello, and so joining me today is Aarron Walter. Good to have you on the show, Aarron.

Aarron: Thanks for having me.

Paul: And the reason we have Aarron on the show is because he is going to talk about a new initiative.. is ‘initiative’ the right word, Aarron?

Aarron: Yeah, yeah.

Paul: Let’s go with that. A new initiative from the web standards project, called Interact. Now, let’s kick off, Aarron, by maybe you telling our listeners a little bit about what Interact is.

Aarron: So, whilst Interact is an open curriculum framework, basically we’ve been recognising that the Web Standards Project has been around for a long time and we’ve done a lot of things to try to get standards into industry. And to a certain degree we’ve made some big triumphs in that respect, but there are still a lot of websites out there that aren’t following standards and people that are sort of behind. And we saw the Achilles heal as to why that’s not happening, as really, education. So, you know, our medium’s really young and it hasn’t really found it’s bearings with how we’re going to marry industry and education, so whilst Interact is a curriculum that has a series of courses that teach not only web standards, but best practices.

So there’s of course the stuff that you would expect from WaSP which is the front-end development courses that teach progressive enhancement and semantic markup and that sort of thing. But we have six learning tracks that include foundations; there’s a course in there that’s like an intro to internet concepts and how people can use the internet to teach themselves and use RSS, that sort of thing.

So there’s front end development, there’s a design track, there’s server side development, there’s user science and then there’s also professional practice. So what we’re trying to do is create a collection of courses that are very modular, to try to get these into schools. And we recognise that not every school is just going to take the entire curriculum and integrate that into their program. You know, if you’re a Computer Science program maybe you’ll take a course or two, if you’re a design program you’ll take a course or two, or even just grab the assignments or look at our competencies.

Each course is based on competencies, which are the things a student has to master before they can pass a course. And then the evaluation methods: So each course has assignments, it has exam questions, it has readings that come from Operas own web standards curriculum – we’ve been collaborating with them. It has textbooks, it has pretty much everything that an educator could need to teach a particular topic.

Paul: Okay, so is this something that is then aimed entirely at educators, or if somebody wanted to get into web design and they were trying to learn it in their spare time, could they just go to this and use it in isolation by themselves?

Aarron: To some degree, I guess they could, but Operas web standards curriculum is really learner-centric, so if you’re trying to teach yourself, that’s probably the place to go. But ours is very much focused on educators, because we feel like there’s a lot of great resources out there on the web if someone wants to teach themselves, but there’s not a lot of great stuff for educators to get stuff into their courses.

Paul: So, when you say ‘educators’, I mean what kind of level are we looking at here? Earlier you mentioned schools. Are we talking about school age, or are we talking about higher education? What are we covering here?

Aarron: I’d say our primary target is higher education, colleges, universities, even training programs to some degree. But we are also seeing some of our content in high schools as well and we’d like to see that more. Especially foundations courses like the web design one course or the internet fundamentals course. If students could go into college with a solid foundation, then they can start to focus more on "What can I do with these techniques?" than theory and concept.

Paul: So is this design to be fairly international or is it quite U.S centric in the way that it’s written.

Aarron: We want it to be very international and the people that have worked together on this are from lots of different places. We’ve got some folks in Europe, Canada and of course some folks in the U.S, so it is in an international group that’s coming together and we’re actually working with WaSPs ILG group – that’s the International Liaison Group. And we’re working on, this year one of our big goals is to try to get a lot of our content translated to different languages.

Paul: Okay, so there will be multiple language versions of all of this as well at some point?

Aarron: That’s the direction we’re heading, yes.

Paul: So, I mean, how did this come about in the sense of, you know, well, how did you get involved in it for a start and what was the motivation behind it?

Aarron: So, I’ve been teaching for the past ten years in different schools in the U.S and colleges and universities, but I’ve also been working in the industry as well. And I got on WaSPs mailing list, I just joined the mailing list and started to talk to some folks and then they invited me to join – it was a year ago, I guess it was at the very beginning of 2008 – and so I joined the education task force who created the Interact project. And basically there were ideas about the curriculum and I’d heard lots of people say "Yeah, what we really need is, you know, education’s way behind" and they’re happy to point fingers and "We need a curriculum", but it just never was really transpiring from anyone coming from the industry and so we kind of just decided we need to do this. And I’ve helped create curricula before as a faculty member at the Art Institute of Atlanta and so I had some ideas and we had a really great group of folks that are in the education task force – people that are educators and people that are experts from the industries. So, yeah.. actually South by South West was where this all started, which is pretty amazing, of course there are lots of great people there. So Glenda Sims, who’s one of the heads of WaSP these days introduced me to Chris Mills from Opera who was working on his project and we kind of had some drinks at the Geeks Club bowling event and we just kind of went crazy talking about these ideas. And Steph Troeth then Leslie Jensen-Inman and we all had these ideas, and then we just set a goal for ourselves in 2008 at South by South West and we said "In a years time, we’re gonna be back and we’re gonna have a curriculum." and that’s what we did. This year we launched our curriculum at South By.

Paul: That’s quite an impressive turnaround for the amount of information that’s in there. How did you draw everything together? Where did it all come from?

Aarron: Well, we met every week online and we talked and we established a course template, which really helped us. The stuff that we really needed to put in these foundation courses, we all know what needs to go in there. It’s just a matter of getting around the pedagogy or the educational part of it. So we developed a template for assignments, a template for a course and a template for learning modules which are basically like, you know, a teacher could teach a concept like let’s say, HTML forms in a weeks time. So we developed those templates and then from there we just assigned courses to different people and we used a wiki and we just met regularly and.. I gotta say, you don’t have to have a huge group to develop a curriculum.You just have to have a few people who really have their heart in it and.. we have some amazing folks, so..

Paul: So, what kind of response are you getting so far from H.E institutions? Are they interested in adopting it? If they are, how are they going to go about that, because, I mean, my impression is that it always takes forever to get a curriculum approved at a university or whatever. So I’m just interested in how that process is going.

Aarron: Yeah, education is.. one of it’s benefits is that it’s slow to move, so once it gets a solid foundation it keeps that solid, but you know, one of it’s drawbacks is that it’s slow to move. And so we’ve got some schools that are really excited about it and generally the folks that.. you know, it’s only been a couple of weeks that this has been live, we’ve got some folks that are really excited about it and those are folks that were kind of headed in the same direction themselves. So we’ve gotten some responses from schools in Europe and some schools in the United States that are interested in pulling some stuff in. And we have a school that’s looking at using a lot of our content right now. So we’re in the early stages of trying to get this out there. I think the easiest part is building the curriculum, because we know what needs to go in there. The hardest part is getting it into schools. So one of our strategies is to get the endorsements of folks in the industry, so we’ve gotten endorsements from Google, from Yahoo, from Adobe, from W3C, from Opera, from Mozilla – they’re all just super excited about what we’re doing and that sort of brand recognition can help us get our foot in the door with schools. And of course going out to conferences, we’ve got folks at the European Accessibility conference right now, talking about it, so we’re just trying to get out there and let people know.

Paul: Excellent. That sounds brilliant. I mean, I know that a lot of people that listen to the Boagworld podcast – there’s a large number of students that we’ve got listening and I often get complaints about this, that what they’re being taught at university bears no resemblance to what they’re hearing on this podcast. And I’m hoping that that’s because the podcast is right and the university is wrong and not the other way around. So if they’re listening to this and they’re getting really excited about it and, you know, they’ve gone to your website and they’re seeing the curriculum – I’ve got it on front of me now and it does look really exciting – how do they make this happen in their institution? What would you encourage them to do?

Aarron: So, this is the interesting thing – that so many of us have complained about a problem, but there aren’t a lot of people that will take that complaint and turn it into action. So if you’re a student or if you’re an educator what we need you to do is, there’s a page that’s called Advocate Standards (http://interact.webstandards.org/advocate/) – you can get to it from the homepage of http://interact.webstandards.org. It kind of just describes what standards are, why they’re relevant to you and we need people to share that information with their teachers, we need people to share just this website with their colleagues and show them the testimonials of the people who believe in this and want students to come out of schools with these skills. So we need people to act in a bottom-up sort of way, you know, grass roots. Take this to your classroom, take this to your teacher, take this department chair and just let him know. That’s the most powerful thing that people can do right now.

Paul: I mean, what I’m quite excited about from looking at this curriculum is that it contains a lot more than "Here’s how you code in X language" or whatever and even has got more in it than just design and user experience stuff. All this stuff about professional practices is very exciting too. Could you perhaps tell us a little bit about that?

Aarron: Yeah, so professional practice, we want people to not only get the concrete skills of "I can code a standard compliant page" or "I can construct a usable website", but we want people to be able to present their about their work and you know, be able to survive in a real career in the web. And so professional practices is going to have a series of courses to do that. We’ve got some pretty exciting ones that are coming up. There’s ‘writing for the web’ – it’s going to be a really cool one, that Alan Hussain from a List Apart is going to be creating. And we have a presentation course that’s coming down the line. So, we’ve got a number of those coming up.

Paul: That’s quite interesting, you just said something that I hadn’t grasped which is that there’s more to come here. That this isn’t the end of the line. It sounds like you’ve got lots more that you’re still developing. Is that right?

Aarron: Yeah. We call it a living curriculum, because you never write a curriculum and then you’re done. Especially in our industry, things change so fast. is what of course we’re going to be working on this year. Our design track is light right now and we want to try and address that ASAP, so we’ve got Dan Rubin and Ethan Marcott, are working together to create a foundation design course, that is specific to what web designers need to understand. And we also have Dan Mall is going to be helping us with a Flash course and Aral Balkan is also going to help us with some flash stuff too. We have a lot of stuff going on this year for new courses, so we hope next year at South By when we see everybody that we’ll have a brand new stack to add to Interact.

Paul: Excellent, so do you kind of envisage, from an institutional point of view that, like we were saying, it takes a long time for a curriculum to get approved and that part of the problem has always been that, by the time it’s approved it’s out of date, when it comes to the web. So is the idea that you’re going to get institutions to buy into the Interact curriculum in its evolving nature so that they always get the most up to date version of it. Is that the kind of plan? They’re not grasping one moment in time from it, if that makes sense?

Aarron: Yeah, exactly and we want to take some of the hard work out of being a teacher. I speak from experience, there’s so many things you have to keep track of and trying to keep pace with a lot of changing technologies and concepts, that’s hard on top of the umpteen other plates you’re spinning. So that’s exactly what’s going to happen, is that our courses, they’re not chiseled in stone, they’re published on the web, they’re in an expression engine and we’ll change those as they need to be changed. But that said, we need to strike a balance, because we can’t be chasing every new technology all the time, we have to evaluate and there has to be foundational concepts that remain steady. Separation of presentation and content, that’s steady foundation concept. But new technologies or techniques, they might change.

Paul: Okay, I mean, the whole area of education and web design is massively exciting and there’s so much going on at the moment in so many different fields. I mean, from your perspective, what else out there is really exciting you at the moment that you’re seeing.

Aarron: There’s so much, I just feel like last year that I just saw so many companies, organisations, individuals that, it seems that everyone just was pissed and they just walked out their house and they were headed in one direction until it was like everyone sort of meets up in one big mob. And so, what Opera’s doing, what Chris Mills has done with the 55 articles that he’s brought together and edited for Opera Web Standards Curriculum, that’s huge. Those are all rolled into WaSP Interact as our recommended reading, so that was fantastic. Yahoos Juku project, if you’ve heard of this it’s quite amazing. Nick Fogler, who’s the running Juku – Yahoo actually has a training program, where they bring students that are not employees, they’re not hiring them. They bring them in and they train them to be front end engineers over the course of a few months. And they’re doing it because they’re trying to solve this problem on their own. So, we’re talking with them about how they’re solving problems and looking to collaborate and discuss what we can learn from them. John Allsopp who runs Web Directions (the conference series), he brought myself and Chris Mills and Steph Troeth together with a number of other experts and we did Ed Directions, which was a day long workshop that taught teachers how to teach these concepts in their classroom. So there’s just so much stuff that’s happening right now and that’s just the tip of the iceberg.

Paul: Exciting stuff. It sounds like it’s a really good time and it’s great to have you on the show. How you manage to fit all of this in alongside earning a living too is quite beyond me, but it’s really good that so many people are volunteering and pitching in. That’s great. Okay, let’s get you back on the show, I guess in a years time and sees what’s changed. But thank you very much for coming in now and I will talk to you again soon. Thanks.

Aarron: Thanks for having me.

Thanks goes to Andrew Marquis for transcribing this interview.

Listeners feedback:

We have two emails this week dealing with two totally unrelated subjects.

Remote user testing

Our first email is from Steve. He writes…

Catching up on past podcasts, I listened to the episode on User Testing (#150). A method I’ve used that I haven’t heard tossed around much is remote user testing using a screen sharing program like GoToMeeting.

I used this for usability testing of our Intranet and it has several advantages:

No need for people to come to central testing facility, or you to go to them.

The user is at their own computer, so more comfortable.

Ability to record the entire session (screen and audio) so others can look at it later.

Tester can conduct testing while in his underwear only (I didn’t do this, but you could.)

What do you think of this method?

Sounds interesting although it would not be my preferred approach.

It’s easy to become a snob when it comes to usability testing and so let me make it entirely clear – any usability testing is better than none.

If you have no budget for user testing, test on friends and family. If time is tight, test on a colleague sitting nearby.

In the same way, if you are having trouble arranging sessions then use Steve’s approach. Something is always better than nothing.

That said, I do have some concerns with remote testing. These include…

It sets a minimum bar of technical competency. A user has to be able to connect to the system in order to participate. I know this would have been beyond the capabilities of some test subjects I have worked with.
It is less personal. Face to face usability testing puts users much more at their ease and allows you to build a relationship that facilitates honest feedback.
It does not allow you to read non-visual signals. Users will often pull a face or shift their positions when they are frustrated. As a facilitator you need to be able to see these signals and ask what they mean.
You are not seeing exactly what the user is seeing. You can only see their screen. You cannot see other distractions such as TV in the background. You cannot see the position of their keyboard and mouse. You have a limited field of view.

My preferred approach is to test in people’s homes. Not only are the users more relaxed, you also get a unique glimpse into their world. You see where they access the web, you learn about their home environment and even gain a better understanding of their character.

However, we do not always live in a perfect world and so would definitely use remote testing if better options were not available.

Finding a job

Our second email is a rather despondent one from Andrew…

I have one question, In the past you’ve talked about hiring new for staff, but as far as I can tell you’ve never discussed how to look for a job. I’m currently looking for a career in the industry, but I can’t get a resume to any company or even talk to someone of said company. Almost all the businesses I’ve approached (or at least tried to) either work from home, are no longer at that address, or no longer in business, and actually are just freelancers. And when I find a job posting online its for someone far more experienced then I am. I’m completely demoralized.

You have my sympathy Andrew and I have to say its a tough time to to break into any new sector including web design.

I am also probably not the best person to answer this question. I have been completely unemployable for some time now due to my ill defined skillset and opinionated character :)

So, I am going to try something different with this question. If you have some advice for Andrew, post a comment below. That way we can get the Boagworld community helping each other.

In the meantime here are a few random ideas from me…

Give up on the cold calling technique. Randomly contacting agencies is largely a waste of time. You have to get amazingly lucky to contact an agency who happens to be currently recruiting.
Try for an internship. Admittedly you will not get paid, but it is a foot in the door. You get a chance to improve your skills and also get to know the people in the industry within your area.
Be willing to move. There are jobs out there but they are often further a field.
Put yourself in a neat little box. Potential employers need to know what you do. Are you a designer, a coder or a server side developer? Companies don’t know what to do with people who know a bit about everything.
Start networking. The best place to find job opportunities is by attending conferences and meetups. Even if you cannot afford the conference itself, turn up at the parties and stand in the halls. Just get yourself out there.
Register with recruitment agencies. As an employer I hate recruitment agencies because they cost me money. However, we do still sometimes use them and it doesn’t cost you anything to be listed with them.
Ensure your website is perfect. The first thing I do when I look at a potential employee is check out their website. Their site has to be outstanding. It needs to look amazing, be well coded and rich with great content that demonstrates a passion for the web.

Hopefully that helps Andrew and keep an eye on the comments for more advice.

Series: Building A Better Web Application by Ryan Carson

Ryan Carson: Hi I am founder of Carsonified a small web company in Bath, England. I am an American as you can probably tell, as for living in England I have been here about nine years. So a little bit of history about us real quick so you know who I am. I have a computer science degree and I have been involved in building four web apps and we are building a fifth truvay.com which will be released later in 2009, and we have sold two of our webapps dropsend.com and heyamigo.net. So the stuff that I am going to share with you today are lessons I have learnt the hard way basically as we have built web apps.

So the first thing I want to talk about is the Admin area that you will build for your web app. What a lot of people don’t know is that the Admin area is really the key to good customer service. If you haven’t enabled really easy customer service then it makes it hard to actually please your customers when they have problems so the first one to make sure you build into your admin for your web app are one click refunds so if someone calls and complains and says hey I am having trouble this month I am really frustrated please help you want to be able to just go into the admin do a search for their email address, their name or their company or anything and bam one click and refund their last invoice and what this does is it gives you, it gives you the ability to just make them happy right away. With a lot of web apps these days on recurring billing you will probably be charging people 5,10,15, $20 a month so losing that amount of revenue in return for really making a customer happy is super important. So make that easy for yourself to refund that money.

The second thing I would make it easy to do is have one click password reset that automatically sends out email with the new password, so with Dropsend it was really hard to reset people’s passwords and that was the number one request people had problems with, they couldn’t remember their password. So if I was to do it again what I would do is I would actually build the admin so I could forward an email from somebody presuming they had sent it from the email address of the account, forward it into Dropsend or the admin and it would automatically know that what it needed to do is reset the password for that email and then it sends out a new one so literally you do not even have to visit the admin area to reset someone’s password you just forward an email that would be amazing, so that’s the way I would do it next time.

The next thing I would do is also doing a one-click resend invoice. So a lot of people they don’t understand they can go into their "My Account" area of a web app to see their past invoices and what they will do is they will just email you and say hey you know I need last month’s invoice. If it is hard for you to find that or send that it is going to make you less likely to help that person so I would do a search on the email address show a list of invoices bam one click and it emails them a pdf version of the invoice. That’s another, that leads me onto another area that I would like to talk about that is invoicing. If you are doing recurring billing sort of every month billing your customers make sure that you are not re-inventing the wheel I would recommend a web app called Spreedly.com and what it is basically it is a web service for recurring billing they have done all the hard work, written all the code, the code for the Dropsend recurring billing was at least I think 1200 lines of PHP and it was good solid code but it was really hard and painful to write. So I would recommend don’t re-invent the wheel use a service like Spreedly because it is making calls to an API if later you decide you don’t want to use a service like Spreedly any more that layer has been abstracted out so you could replace it with your own billing system or another one and it won’t kill you, but I would say hands down don’t rebuild reoccurring billing it is a real pain in the ass.

The last tip I would say about your admin area is make sure that it is easy to give your customers credits. you want to be able to login search for an email address and just give them, hey I want to give them five bucks towards next month, ten bucks just to make them happy and you will have lots of happy customers. So that is my five minutes of tips, thanks Paul for letting me be a part of this. Take care Bye.

What are media queries?

Why build from mobile up?

Paul did it wrong. Don’t copy him!

Plan from the start, but don’t despair if you haven’t.

Dealing with navigation.

Dealing with content.

Testing and browser quirks.

The magic behind Amazon’s 2.7 billion dollar question.

Kick ass kickoff meetings

Can you build an app in 10k?

Copy Checks

Check your spelling.

Check your tone of voice.

Check your details.

Check through any ‘hidden’ copy on site.

Make sure you are not going live with any test copy on your site.

SEO

Check your keywords.

Check your titles.

Check your URL structure

Check you have a sitemap.

Standards and Validation

Site Functions

Does everything work?

Check your search facility

Check all browser variations

Don’t forget to set up a print style for your site.

Security

Protect any sensitive pages

Performance

Legal

Copyright

Terms and Conditions

Privacy Policies

Company Registered Information

Add icons and error pages

Add your favicon.

Create 404 pages.

Further reading

Housekeeping

Vote for our SXSW Panels!

News

Expanding your development skills with Creative Tech Projects

5 Advanced Photoshop techniques for web designers

Digg’s move to GIT

Feature: Why .NET MVC? (and why should we care?)

Listeners Questions

Managing your code

Friendly URLs

Some tips for constructing easy to remember URLs

Markup

Tutorials Available

Working around .NET

So how is it done?

Views

Controllers

Models

Routes

The Process

Final Thoughts

Sources / Related Links

News

Typekit – the messiah of web typography?

Apple vs Microsoft – A website usability case study

Reinvigorating old blog posts

Creating WCAG 2.0. accessible forms

Feature: How site personas can enhance your sites

Listeners feedback: Stop hackers hacking your hackey code!

Minimise

Validate

Storage

Responses

Background

.NET WebForms vs. Everyone Else

.NET or not .NET?

Wrap up

Mini Glossary (for those .net virgins among us)

Who we are looking for

What we can offer

Where you would work