Quality or quickly?

What is more important, to reach market quickly or to launch with a quality product?

I received this question from Pete in South Africa…

I have been working on a small web application, which I hope to launch soon. My problem is that I am spending ages tweaking and improving it before launch. I fear that if I spend much longer on it somebody will beat me to market. What is more important, getting the product right or launching it quickly?

It is a good question and one with no single answer. It is certainly something we have been struggling with as we prepare to launch GetSignOff.

The advantage of launching early

twitter website

The prevailing wisdom is to launch early. The logic goes that by launching quickly you can be first to market and then refine the offering based on user feedback.

There is certainly something to be said for being first to market, especially online. It is easier to build some buzz around your product if it is an original idea. You can also establish a customer basis more easily when there is little choice available. However it is not without its drawbacks.

The disadvantages of launching early

You only get one chance to make a first impression. If a user does not like your product they are unlikely to return. They will therefore never see improvements you make later. The customer is lost.

Also, by launching early your competition has the chance to adapt before they launch. Few ideas are truly original and somebody somewhere will already be developing something similar. If you launch too early they have the opportunity to adapt their offering to undermine you.

Of course, the danger of delaying launch is procrastination. That has certainly been my experience. The idea for GetSignOff was formed over a year and a half ago and we wasted far too much time. Be careful you do not make the same mistake and spend too long obsessing over details.

How to make a decision

When to release is dependant on two factors, what you are releasing and who it is aimed at.

If you are releasing a traditional website it is important that the quality is high. There is no option to slap on a beta label, and users are less tolerant of problems.

getsignoff screenshot

If the product is a web application the decision is dependant on the nature of that application. If it is business critical, the users will have a lower tolerance for problems. However, if it is something like twitter then downtime and problems are more easily accepted. After all, the inability to twitter is not the end of the world (not that you would guess that from some peoples reaction).

The second factor that determines when you launch is audience. For example the audience for GetSignOff are other web designers. Although you couldn’t find a more critical audience, they do understand that a new product will have bugs. They are also experienced enough to work around usability problems and muddle through. However, if your audience is not so computer literate they are more likely to give up and try another site.

Fearing competition

There seems to be a fear of competition among web developers. They have this desire to be completely original, and so rush the launch of their application.

However, competition is to be expected and choice is good. I have received numerous apologetic emails and twitters from people pointing out the competition to GetSignOff. Their tone indicates that this is the end of the world. In reality it is to be expected. Even if GetSignOff was identical to its competition it would not be a problem. There are enough customers to go around. The web is a big place.

Take baked beans for example. There are a lot of varieties of backed beans and they are all basically the same. They do not even taste different. However, all of these varieties can exist side by side in the marketplace quite happily. There is enough demand.

In conclusion, there is no need to rush to market. Take your time and get your product right. However, be careful not to procrastinate and remember that you will need to tweak your application long after launch. No matter how careful the planning, you will not get it right first time.

134. Chrome

In this weeks show we give you advice on choosing the right hosting company, Teifion and John send us a review of dConstruct and of course we discuss the release of Google Chrome, can it topple IE?

Download this show.

Launch our podcast player

News and events

Managing and choosing fonts

With the new generation of browsers supporting embedded fonts in a consistent way, it is time for us as web designers to start taking typography serious.

One small part of this is how we manage and choose fonts. I confess, I have put little thought into font management. The result is that my choice of font is often not as thought through as it should be. A massive drop-down list in Photoshop does not inspire considered typography.

However, a couple of discovers this week have inspired me to put more thought into the subject.

The first is a review of 25 font management tools. This include both free and paid for software. It also has options for both the Mac, PC and even Linux.

You might ask why we need a font management tool at all. Trust me, if you start installing a lot of fonts on your system you will soon discover why. Large number of fonts become unmanageable and can cause serious performance problems. As a minimum you need an easy way to enable or disable fonts.

The second discovery was an online/AIR font application that displays text of your choice in every font available on your system. This in itself makes font selection much easier. However, this application also enables you to narrow the field by removing unsuitable fonts. It is a great visual way of getting the right typographic look.

jQuery supercharges menu rollovers

Although I am a standards based designer through and through, I have always felt like the nerd in the class. After all it is the Flash kids that get all the girls and attract all the attention with their cool (if somewhat inaccessible) animations and effects.

4 years ago Dave Shea attempted to smarten up our image a little with CSS Sprites. This was a technique for doing CSS based rollovers on menu items. It wasn’t as eye catching as Flash but it was a start and at least I didn’t feel dirty after I used it.

Jump forward to the present and we find a world where the ‘cool divide’ has been reduced thanks to Javascript. Dave therefore felt the need to bring his CSS sprite technique up-to-date on A List Apart, using a sprinkling of Javascript.

Using jQuery Dave takes the plain old CSS sprite menu and gives it an attractive new look. However, at the same time he maintains its accessibility thanks to progressive enhancement.

It is a slightly long winded article (like I can talk!) in places nevertheless it is a nice illustration of what jQuery and CSS are capable of. It is also a technique we can all make use of right now, something A List Apart has been missing sometimes of late.

Can Google Chrome Topple IE?

Without a doubt the biggest story of the week is that Google has launched its own browser called Chrome. At the moment the browser is only available for windows although a mac and linux will follow shortly.

More on my thoughts can be found here

Back to top

Feature: Choosing a Hosting Company

Hosting companies are a dime a dozen. They all offer very similar packages and all seem competitive on price. How then do you choose between them. We discuss this in this weeks feature.

Back to top

Review: dConstruct

Teifion: And the next part of the podcast is sponsored by Ticklefish Design and Searchlight Digital.

John: Hi I’m Marcus Lillington.

Teifion: No I want to be Marcus Lillington. Marcus is the cool one he doesn’t get my name too wrong.

John: No no. You agreed that we would both be Marcus.

Teifion: That’s a fair compromise. No one want’s to be Paul. Anyway right. On with the show. So Marcus what did you generally think of the conference?

John: I thought it was really good actually. Yeah I enjoyed it all. I enjoyed the free coffee.

Teifion: Which you didn’t tell me about till right at the end so I only got one cup.

John: No that’s right.

Teifion: I thought I was a bit unfair.

John: I thought it was sort of obvious there was free coffee. But with regards to the speakers, yeah I enjoyed all of them. Some of the speakers were speaking about things I don’t really you know, I’m not involved with directly but they all put their points across really well. I enjoyed all of them. I think I can take something away from each speaker. What did you think?

Teifion: I quite liked the fact that none of them talked for too long or too little. They were all quite engrossing and though again not directly related to what I do they were all very interesting and I did end up taking something away from it.

John: Yeah and there was humour in there as well.

Teifion: Oh there was Matt and Matt are hilarious.

John: Yeah Matt and Matt get the award for comic.

Teifion: With that subject what was your favorite talk during it?

John: My favorite talk was Tantek on microformats.

Teifion: Okay summarize roughly what he talked about. Except microformats that just kinda basic.

John: Yeah it is really. You know the concept of how microformats are I don’t really know what I’m saying again.

Teifion: Just keep going Paul does.

John: Yeah just how you shouldn’t have to keep reinputting data into all these different sites, all these different social networks that we go on. They should all, you know there should be one sort of central hub which is your sort of central place where you put all your details in and all these other sites that you choose to join up to and put information on. They should all just link up. Microformats again is a new subject to me. I’ve only done a basic vCard and that’s about it. It’s definitely something I’m going to read into.

Teifion: I’ll definitely agree with that summary.

John: Although a little long winded.

Teifion: No not long winded at all. Remember the people who listen to this are used to listening to Paul.

John: Yeah that’s true.

Teifion: Well I’d say that my favorite talk was Jeremy Keith on the system of the world it’s titled. I would have titled it something more like "Why the cloud can be smart and why it can be stupid. Why you think you can predict it and why you really can’t." It was a great intellectual talk and I’m pretty sure that most of it went over my head. Possibly into the head of who ever was sitting behind me. He basically said that you can’t predict what will be the next big thing like Facebook or Twitter but you can create good foundations or nurture something so that it’s more likely to be the next big thing.

John: Yeah that’s a good summary there as well. I mean basically I thought it was just about a black swan.

Teifion: That is true actually. It’s just all about the black swan. You can’t predict it. It’s got a big effect and after it you’ll all go back and say "Hey we knew this was coming.

John: We knew this black swan was going to be born.

Teifion: Yeah that’s how it works isn’t it. Tell you what, what do you think the best moment of the conference was to you?

John: Ah. I mean there’s a lot of moments but the best moment has got to be Teifion, as Marcus calls you, when you went up to Ryan Carson to thank him for the free complimentary tickets to dConstruct.

Teifion: I’d like to point out that yesterday as in the day before the conference I had a 5 hour train journey from South Wales to Brighton. I then went to bed really late and got up really early. I was really tired and confused.

John: Still no excuse. You call yourself a student.

Teifion: No I’m a graduate.

John: Oh okay. There’s a slight difference. But luckily for Teifion I pulled him back at the last moment to save his ???? it wasn’t Carsonified that supplied the tickets it was Clearleft.

Teifion: I knew it was Clearleft that supplied the tickets. I just got confused. Tall guys in hats are very confusing.

John: What about you? What was your favorite moment?

Teifion: I think it was when we actually went up to thank Jeremy for putting the whole event on and for possibly the free tickets. It wasn’t actually Jeremy that we needed to thank aparently. I like the way that you sort of thought how to do it. You went for the wussy catch his eye approach. I just walked up and said "hi thanks for the tickets. Have a business card." I didn’t actually give him a business card.

John: No but that is a funny point. Tef did hand out quite a few business cards. Which is good I mean networking is really good. Apart from the lady who you tried to impose your business card on.

Teifion: I don’t think she heard me.

John: No she just blanked you.

Teifion: It’s possible. It’s happened before. You remember why we went to see Jeremy don’t you. It’s because sadly Marcus your jokes are sadly not up to the calibre that we would like. Granted their not dire, I mean if Paul was in charge of it they would be dire or worse. But I think Marcus’ jokes could do with some improvements. So we went up to Jeremy to ask him for a joke. Do you want to tell the joke.

John: Yeah I would love to tell a joke. Apart from the fact that I actually can’t remember it. But seeing as you already knew it and knew the punch line you can tell it.

Teifion: Okay why did the chicken cross the mobile strip?

John: I don’t know. Why did the chicken cross the mobile strip?

Teifion: To get to the same side. If you don’t know what a mobile strip is Google it.

John: Unfortunately I don’t.

Teifion: That’s a shame. Well I suppose we’re hitting the 6 minute mark which if we were Paul we’d go "Well lets start on the news." or maybe waffle on a bit more. We’re actually going to have to conclude this partly because it’s not our own podcast. So I figured what we could do is we can end it with a question. What do you think of that idea?

John: Good idea.

Teifion: Well what I’m going to do now is I’m going to put you on the spot and I’m going to pause it for 30 seconds and you are going to come up with a question and then you’re going to ask it.

John: Brilliant. Was that the pause?

Teifion: Yes a good long 30 seconds.

John: I thought you were just going to do a pretend pause and then we’d just go right into it.

Teifion: No that would be something that Paul would do. Paul’s not cool.

John: My question to both of you Paul and Marcus is, "Would you advise up and coming web designers or developers to email and get in contact with local agencies with regards to getting some kind of work experience with them? Even if it’s only for like a day or two." So that’s my question.

Teifion: Fair enough. I suppose I could add a sort of additional question. It is "If you put so much effort into your work Paul you presume you put a lot of effort in to your family like. I know you put a lot of effort into youth work. Why is it so hard for you to put just a little tiny bit of effort into learning how to pronounce a name that so many people I know can so easily pronounce? It’s (he didn’t spell it so I don’t know). It’s really not that hard.

John: Teifion

Teifion: See if you knew me for longer you’d be able to pronounce it. Maybe Paul’s just not cool enough.

John: Maybe you should all just call him Ty from now on.

Teifion: That could work. Anyway that’s it.

John: O I’ve got one more point. Stanton.

Teifion: Where is Stanton?

John: Stanton we agree well we met him. He said he wanted to help and come in and say a few words at the end of the podcast but we don’t know where he is. He was last seen

Teifion: chatting up randoms.

John: Yeah that sums it up.

Teifion: I could guess at what he would say I could be completely wrong though.

John: I think we should end it on that note.

Teifion: Bye.

John: Bye.

Thanks goes to Curtis McHale for transcribing this review.

Back to top

To Version Control or Not?

Version control can seem like a very daunting thing to incorporate into your work flow, but once it’s there you can be left wondering how you ever lived without it. Paul Stanton gives his thoughts and experiences on the subject.

This post has stemmed from an e-mail by Simon Hamp whom has just started working for a PHP development team and has been given the task of assessing their current systems. Simon writes:

I wanted a professional opinion on a proposal I have made to move from file-based version control (i.e. manual folder management) to full-blown source code management.
Is it worth making the change from an existing system and move to something like Subversion for a team of our size, considering that this would change the processes for those who have been here the longest quite considerably?

Version control is one of those things that you already know you should be using, and if you’re like me, have promised yourself for a while that you’ll get round to learning and integrating into your own workflow. Chances are that one day, disaster will strike and you’ll realise why it’s so important.

I’m going to be honest with you here, I can’t profess to be an expert in version control. I’ve been playing around with it, and the team I work with are very close to making it a mandatory part of our design and development workflow, but I hope i can provide some form of assistance in your decision to adopt a version control system, and maybe convince myself in the process.

That being said, I don’t think there even is a decision to be made. You – need – version control. There’s no real question about it. The biggest challenge we face is integrating this into our existing workflows.

Let me take a step back, and explain what version control is for anyone unfamiliar with the concept.

Version Control Systems (VCS) (also known as Revision Control, Source Control or Code Management) is a way of managing multiple versions of the same information, which is most likely – in this case – the source code of your website.

In the simplest terms, VCS allows you to keep track of the development of your source code, keeping track of the changes you make as you go along with all the changes being stored in a repository. You may already use a crude method of version control yourself, naming files such as index1, index2 etc. VCS systems keep track of all these changes, and let you revert to any previous version if the need arises.

The real benefit of VCS comes when you have more than one person working on the same file. Instead of you overwriting each other’s changes, or attempting to manually merge the changes from one developer with the changes of another, the VCS can take care of all this for you, creating branches for each developer to work on which allows multiple developers to work on the same file simultaneously, then merging the changes into a single version, highlighting any conflicts or problems that may arise.

There’s plenty of more detailed descriptions of VCS systems online if you’d like to learn more (Wikipedia might be a good place to start), so I’ll save diving too deep into the rabbit hole for now, I’m sure that if you’d really like to learn more, Paul can work it into future shows. For now, I’ll return to our case in point; “Is it worth making the change from an existing system and move to something like Subversion for a team of our size”.

I work in a team of 11, with 2 other designers and 3 other developers, and we ran into issues recently with a site that needed some last minute changes made. I was asked to do some markup modifications and CSS changes which required me to modify multiple files. This project wasn’t in a VCS system, so I was given a copy of the files on a flash drive. I made my changes, re-saved the files to the flash drive and handed back to the designer. In the mean-time, the designer had made other changes to the files, and needed to merge my changes with her own manually by copying and pasting from my copies of the files. To further complicate matters, the developer then needed to take these files and integrate the markup and CSS into their .NET templates.

I don’t need to tell you that this was an absolute nightmare, at one point we were managing 5 local copies as well as 2 remote copies (one on the dev server, and one on the live server) To be fair I’m not sure if the team has ever hit a problem such as this before, with multiple people working simultaneously on a project and unfortunately we don’t have VCS as a mandatory part of our workflow as yet, but after this experience, I’m sure it won’t take long.

If we did have VCS, I could have checked out the necessary files, made my changes, and checked them in, the other designer could have checked out the same files and made her changes simultaneously, and also checked them in when she’d finished. Then we could have simply merged these together into one, any conflicts would have been highlighted for us to easily rectify. The developer, when ready, could easily deploy these from the dev server to the live one with a couple of commands.

There will be issues with integrating this into your own processes, especially with people who have their own tried and tested systems, but personally I think you really have to put your foot down here. VCS should be a mandatory part of your workflow, especially as your team grows and there are more people involved with projects.

If possible, I’d recommend arranging training sessions on whichever VCS you choose to adopt, you should only need a day, or even a half day to go through the basics of using a VCS for your dev team, I’d even wager (or should that be “hope”) that those who have been professional developers for some time will already have experience of one form of VCS or another and shouldn’t be resistant to using one.

My last point would be to explore the various VCS systems on offer. The main 3 that come to mind when writing this article are Subversion, GIT and Mercurial.

Subversion (SVN) is the system that most listeners will have probably heard of. SVN is a centralised VCS system which centers around a single repository. Subversion is a well known, and generally well supported tool with a wide range of user interface tools available such as such as IDE extensions for most popular IDE’s and Windows Explorer shell extensions like TortoiseSVN. There’s also native Windows and Mac GUI tools available to make the normal command line interface a bit easier to digest.

GIT and Mercurial are slightly different in that they’re Distributed Version Control Systems (or DVCS for short). While Subversion manages a single repository, a DVCS system like GIT has multiple repositories. The best way I can explain is that imagine if my team was working on a project, and we had a repository on our dev server, I can then clone that whole repository to my laptop, and take it away to work on at home, on the train, or at the top of a mountain if I so wished. With a centralised VCS like subversion, you really need access to that central repository to commit your changes, with a distributed system, al
l your developers can mainta

in their own local copies of the repository, commiting changes to the master repository when needed.

GIT is actually the system I’m getting to grips with at the moment, the branching, tagging and merge tools are more stable than the ones within Subversion. Please note that I’m not trying to bait anyone here, and I don’t want to get into a flame war about which VCS is better than the other. GIT’s distributed nature makes more sense to me personally, and allows me to manage my branch without network access if needs be, and in the event that our development web server with the master repository blows up, each developer has a copy of the repo in some form, and there is a good chance that the whole codebase can be rebuilt easily.

So I hope this persuades you into adopting some form of version control, but if you really ask yourself, you already know that you need to use it, and to return to Simon’s original question, I bet your developers already know they should be using it, they just need a little encouragement to integrate version control into their processes, the benefits far, far outweigh the disadvantages.

By Paul Stanton

130. Air

On this week’s show; Paul talks about better understanding disabled users. We have a tip from Jeremy about problem solving and Jonathan Snook introduces us to Adobe Air.

Download this show.

Launch our podcast player

Housekeeping

A few pieces of housekeeping I wanted to quickly mention at the start of this week’s show.

  • FOWA – The guys over at Carsonified have been kind enough to offer boagworld listeners a 15% discount off of the upcoming Future of Web Apps conference in London. The conference takes place between the 8-10 October and is an absolutely superb event. To claim your discount use the code FOWA-bw at checkout. There are only 50 discounted places, so be quick.
  • SXSW – Talking of conferences can I ask a favour of you all. Marcus is desperate to go to next years SXSW conference in Texas. However he is only allowed to go if he is speaking. As you may know speakers for SXSW are chosen using a voting system. So, in order for Marcus to attend SXSW he needs your votes. Give an old popstar a second chance. Go vote for him now!
  • Think Vitamin - Finally I just thought I would quickly mention an article I have recently written for the Think Vitamin website. It is entitled "the 5 hidden costs of running a CMS" and I thought you might be interested in check it out. It is an extract from chapter 8 of my book the Website Owners Manual, which as I have said many times before, you can download right now ;)

News and events

Designing for emotion and flow

Not long ago I wrote an article for boagworld on the importance of context. In that article I highlighted elements such as time, mood and environment as key factors that contribute to a users context when accessing your site. This context directly impacts how the user interacts with your site. What I didn’t tackle in my article is exactly how context should affect the way you design.

An article called "Design for Emotion and Flow" on the boxes and arrows website, takes my post a step further by going into a lot more detail about what affects users behaviour and how we should design in a way that accommodates their state of mind.

Its quite an in-depth article but worth the read. It touches on user physiology as well as issues of environment and although it can be slightly theoretical at times, it focuses in on what you can practically do towards the end.

Articles like this always leave me with mixed feelings. They can easily feel overly analytical to the point where you wonder if they are applicable in the real world. However, in my experience if you take the time to read and digest them, they start to influence the way you design on an almost subconscious level.

7 essential guidelines to functional design

By contrast our next article is much more down to earth. The "7 Essential guidelines to functional design" is another post by smashing magazine and focuses on some fundamentals of good design.

However, don’t get the impression that this is just an article for designers. The principles it talks about also apply to developers and website owners. Basics such as the goal and audience for your site are things everybody should be considering.

According to Smashing Magazine the 7 essential guidelines to functional design are:

  • Consider our product’s goal
  • Consider who will be using it
  • Consider what your audience intends to do with it
  • Is it clear how to use it?
  • How does your user know it’s working?
  • Is it engaging to your users?
  • How does it handle mistakes?

Whether this is the definitive list, I am not so sure. However, it is a worthwhile read especially if you are just starting out.

15 companies that really get corporate blogging

While we are on the subject of lists our next post is "15 companies that really get corporate blogging". What can I say, I am a sucker for a list!

This one is really for those of you who run a website and in particular run a corporate blog. As the name suggests it lists companies that do a good job at blogging. However, it is not the list that attracted me to this article, it is the reason why the companies got on the list.

There is a lot of good advice to be gleaned from this post. Just a few snippets I picked up include:

  • Don’t just pimp your products, talk about other stuff too
  • Post regularly
  • Encourage conversation
  • Be candid and open
  • Offer advice and lessons you have learnt

The list could go on. Corporate blogging is by and large a disaster with many companies just failing to ‘get it’. According to a recent report, 56% of corporate blogs just republish press releases and two thirds hardly ever receive comments. However, as is highlighted in this post there are a growing number of organisations that are doing things right and we should follow their example.

Learning from signage

If you have listened to this show for any length of time you will know I am a great fan of looking beyond the web for inspiration. I also believe there a lot to be learnt from other forms of design including signage.

It would appear that Mark Boulton would agree with this sentiment judging by his recent post on airport signage. Mark, compares the signage in two airports and looks at how the lessons learnt apply to web design.

Some of the gems he discovered include:

  • Signage should work without colour coding
  • Only designers care about fonts
  • Don’t rely too heavily on pictograms
  • Always put your ideas to the test

This is a great article which should (if nothing else) encourage you to look at the world around you for inspiration.

Back to top

Interview: Johnathan Snook on Adobe Air

Paul: Joining me today is Johnathan Snook who I recently saw at the @Media conference. It was great to see you there again Johnathon.

Johnathan: A pleasure to see you there as well.

Paul: You really got me with your presentation. It was an excellent presentation. Very, very enjoyable, and you touched on the subject of Adobe Air. It wasn’t the main thrust of the presentation, but it was the bit that really grabbed my attention so I thought "let’s get you on the show and have a bit of a chat about it" if that’s O.K. with you.

Johnathan: Absolutely.

Paul: Good. So, let’s start from the absolute basics so that we’re all on the same page. Could you just explain very briefly what Adobe Air is so that people that haven’t come across it before kind of know what it does.

Johnathan: Certainly. Adobe Air is a development platform for making desktop applications to make desktop applications cross-platform. So, something that you build once and that would work on Windows, Mac OSX as well as Linux.

Paul: O.K. And this is built using web technologies…

Johnathan: Yeah, It’s really great that they’ve managed to leverage what they know things like Flash, Flex, and really the kicker is being able to develop desktop applications using HTML, CSS and JavaScript that, obviously, a lot of us web developers are going to be familiar with.

Paul: Sure. So, I mean that’s I guess why we’ve included it on the show even though it’s a web design podcast, that kind of line between the web and desktop applications seems to be blurring and Air is a big part of that. What drove you to kind of investigate it and kind of look into Air as a product?

Johnathan: For me, it was just a curiosity. The platform, what it could do, knowing that I could create a cross-platform desktop application was kind of enticing. When we build for the web we’re trying to do things as cross-platform as possible make sure that we target as many browsers as we can, and really be able to reach out to the people and do really cool things. So, for me it was like, O.K., well what can I do with this what are the possibilities. One of the first things that went off in my brain was building a Twitter application. At the time, when Twitter was up for more than 24 hours straight, it was kind of cool to be able to build a desktop application to kind of separate out from the web, because the web site was frustrating me to know end, and to be able to put in stuff that made the site more usable for me and in the end was a tool that I got to use every day and that I enjoyed to use.

Paul: Cool. I’ve kind of got a basic understanding of it. I understand what it does and I understand the kind of technologies that exist under it, but can you kind of give me an idea of, you know, how it works as such. I know how to create an HTML page, CSS and Javascript and stuff like that. How do I get from there into turning it into a Air application?

Johnathan: It’s surprisingly quite easy. What happens is, if you look at the Air runtime, is it essentially runs your Air application, so you don’t create a .exe file or a .dwg file you don’t create an executable in the traditional sense. What you end up doing is creating a .air file that you use to distribute. The Air runtime actually handles that. Building that .air file, there is an SDK available from Adobe that allows you to compile this Air file. So, those Air files are pretty straight forward, they’re really just like a ZIP file with some extra information in it. So, to create an actual Air application, you can do it just using a normal text editor, you can do with specific IDEs like Eclipse. If you’re into Flex development, they have Flex builder. If you’re into just doing HTML and CSS kind of thing, you might want to look into Aptana they have Air support built right in. If you’re a fan of Dreamweaver, there’s a Dreamweaver extension for automatically compiling your application, and being able to set properties on your application. So, things like how big should the window be when it opens up, can I resize it, what kind of stuff can I do with it. That obviously, in this GUI sense, to a certain degree can make things a lot easier. So, I think there are a lot of benefits to using an IDE with built in support, but you don’t have to. There is the capability of just using a normal text editor and then running the SDK command line sequences to actually generate the Air file. It is really straight forward.

Paul: So, the one selling feature or one thing about Air that’s been promoted quite heavily is the fact that you can take online applications offline in a sense. The application is still usable even if you’re not connected to the Internet at a particular point in time. I think they showed off, right from the beginning, an eBay example of that where you could do all kinds of things offline, and then when you connected it was all uploaded. How does that kind of process work? There must be some kind of local database that’s running, one presumes.

Johnathan: That’s correct. I think some people may be familiar with Google Gears in having the local storage using the SQLite database. Adobe Air actually does something very similar. They do have a local SQLite database that you’ve seen create local databases and store any information there. There’s actually different ways. You have access to the local file system, so you can certainly write new files. Say, if you wanted to create new text files, xml files, new binary formats. So, if you wanted to create an image editing software that stores files in a binary format, you could do that. So, there’s a lot of flexibility there because you do have some access to the local system. You have network connectivity, so you can do either regular AJAX calls or you can do socket connections. You can connect to web servers. You can connect to remote database servers. You’ve got a lot of flexibility and a lot of control because of that.

Paul: You seem quite enthusiastic about the development environment. What has been your impression of it. Was it something that was a steep learning curve, but when you get there it’s really cool, or is it easy straight out of the box? What were your impressions?

Johnathan: I think it’s going to depend on what it is you’re trying to do. I think that there are going to be some frustrations. There are going to be some things that you have to understand about the environment. To give you an example; the HTML/CSS stuff is pretty cool it basically runs on a WebKit engine, which is the same engine that powers Safari. That gives you a lot of control and stuff, but ultimately that WebKit engine is still running within a Flash runtime. So, there are some limitations to that because of the fact that Adobe just simply hasn’t built in certain support. Things like support for double byte character encoding, so Chinese and Japanese character sets can be more difficult. However, they are working on that. Version 1.1 is supposed to be coming out soon it will have support for that, but right now you’re limited because of that.

Paul: What kind of people should be delving into this. Is this the kind of thing that only a hardcore developer like yourself should be touching or is it something that somebody like myself that would be a front-end interface designer should I even bother picking it up or am I better keeping away?

Johnathan: It’s really easy to develop in. I think you can make really quick solutions really straight forward. To give you a comparison; there is a Mac software called Fluid for creating site applications, but that is separated from the browser. You can kind of plot the same kind of things with Adobe Air because you do have that WebKit engine. You can basically use it as a browser. So, to give you a quick example; Muxtape, which is an online mix-taping thing you upload MP3s, and then people can go to your page and listen to your mix tape… The problem is that if you accidentally close the browser, you lose that information. I think there are a lot of websites that have this stickiness factor where you want to decouple the application from the browser. So, I put together a really basic example in which you type in a URL and it loads up a mix tape. That’s a very straight forward interface, but to be able to do that in a desktop application that I can minimize to the dock or the system tray is something that is, I think, a lot more appealing than running this kind of stuff through the web browser. And, it was really easy to put together. I spent about an hour one evening to put that kind of thing … I mean it is a very basic prototype, but the fact is that it is very straight forward to put that together. So, I think if web developers have ideas, they can really take advantage of that and build pretty cool stuff.

Paul: So, it’s not something we need to be intimidated of, then.

Johnathan: No, absolutely not.

Paul: The other thing that maybe is a bit of a concern to us very standards-based designers in comparison to the Flash community is that Adobe says we support CSS and HTML, as well as Flash, but obviously Flash is their product. You kind of get this feeling that they’re going to always support Flash more and that CSS and HTMl are a bit of an afterthought. Is that the case, or is that unfounded?

Johnathan: To a certain degree, it is the case. It’s, I think, unfortunate. I think they are more familiar with Flash. They’re more familiar with that environment. So, as you try to build the equivalent of a browser within this Flash runtime it’s going to be extremely difficult and I think things are going to get missed. And, I saw that sort of along the Beta process. Things like no support for "undo." I mean, that’s a pretty basic thing, but the fact that that’s not built in there does hamper people trying to build HTML-based applications. It works great in Flash-based applications and then what you end up running into is, to give you another example with Snitter, my little desktop Twitter application because it’s built using HTML and CSS, it had certain limitations, but there’s other Twitter clients built with Adobe Air that were built using Flash that actually have different limitations. So, people would say, "Well this application can do it just fine. Why can’t yours?" You have to kind of explain to them that it’s because of the limitations of how the environment was developed. Despite the fact that they are both still Adobe Air applications, technically they’re done differently and there are maybe more limitations as a result of that.

Paul: Is there an opportunity to mix Flash and XHTML and CSS and whatever else together, or do you have to make this decision up front?

Johnathan: No, absolutely not. Certainly, within the Adobe Air environment, you have that flexibility to create these little hybrid applications. I think Snitter, for example, is a good example of it. There’s a lot of Flash components out there that can do certain things. For example, a bunch of folks made an iMap component, so you can actually connect to an iMap server. However, that component is Flash-based. Another component out there that I saw was a Jabber client. So, let’s say you wanted to do a GMail chat client or some other Jabber-connected application, you can import those Flash runtimes into your application and use them from Javascript. So, you do have that flexibility to use both technologies and take advantage of that. I’ve certainly done that with Snitter, and I’ve done that with other applications as well because we have that flexibility of the environment. I think there is that sort of understanding that you can do that, and actually look out for the solutions that not only are HTML and Javascript, but that are Flash-based as well and come up with new ways of thinking because I think, traditionally, as web developers, we tend to separate those two as much as we can.

Paul: That’s quite interesting. You talked about this kind of hybrid approach of combining Flash and HTML at @Media combining them together and about how we had some fears as standards-based designers of even touching Flash in any kind of context. Is that a kind of approach that you would apply beyond Air to the web generally?

Johnathan: Absolutely. I think MuxTape is a great example of that. To be able to play MP3s isn’t something that’s easily done using Javascript. However, you can take advantage of Flash and use its capabilities to play MP3s to create new interfaces that aren’t specifically 100% Flash-based; that we have something that’s still HTML and Javascript that interacts in ways that I think a lot of us are comfortable with, but still have access to a lot of features that Flash offers to us you know, the fact that we can create the bridge between the two; we can do that on the web just as well as we can do that within Adobe Air.

Paul: O.K. That all sounds very interesting and it certainly has made me want to kind of pick up Air and have a play with it and kind of get my hands dirty. I guess, perhaps as the last question then, is what tips would you give to people like me that haven’t yet touched Air and are considering having a play. What are the big traps to avoid? What are the good things to start with. Where should I begin the journey, so to speak?

Johnathan: I think probably one of the first things you should do is head over to the Adobe web site. They have a number of really good resources to start off with. Obviously, you’re going to need the SDK so you can actually build your applications, but they also have the dev center where they have a number of introductory articles to learn how to build applications and it doesn’t mean those applications have to be built using Adobe applications like Dreamweaver, you can certainly do them without. So, there’s a lot of really good tutorials on there. From there, they lead off to a number of resources outside of Adobe that would certainly help you get started.

Paul: What about mistakes? What were the big mistakes you made up front that, with hindsight, you would avoid? Or, did you get it right the first time?

Johnathan: I don’t make mistakes! Well, I think one of the cool things about the environment is certainly the flexibility to take advantage of a lot of advanced CSS. Because you are using the WebKit engine which, when it comes to CSS 3 support, is one of the most advanced, you know that you have support for things like rounded corners, border radius, that you have support for multiple backgrounds, image-based borders you can do some really cool stuff with that that is really fun to play around with. You can create transparent applications, so if you wanted something that was completely and uniquely shaped, you can do these really cool things. The downfall for that is that you can quickly start running into performance issues. If you start creating all of these alpha PNGs that are layered over the top of each other, they give you a lot of flexibility, but unfortunately are a performance drain on how much your system can actually handle. I think that was one of my initial mistakes going in and saying "Wow, I’ve got all of this stuff that I can use let me throw everything at it" and then realizing that, you know, maybe that wasn’t the best solution. I think we still have to be wise in considering how we structure our CSS, how do we structure the design in such a way that, while it’s still flexible, it still does things from a performance-minded aspect so we’re not doing things that are going to unnecessarily slow down or application. Those are things that we’ve got to think about.

Paul: That’s some really good advice Johnathan. Thank you so much for coming on the show. That was a great introduction to Air. Hopefully it’s encouraged a lot of people listening to the show to go out there and give it a go. Thanks for coming on and talk to you again soon.

Johnathan: Awesome. Thank you very much.

Thanks to Aaron Cooper for transcribing this interview.

Back to top

Listeners feedback:

Getting a feel for accessibility

Our first contribution is from Kenneth and is about accessibility:

I listen to your podcast all the time and am working hard to become a very good web designer. My question for you is about accessibility, I hear a lot of people talking about it but not a lot of web designers are working hard on it to create sites that disabled people can use. I want to be a person who builds accessible sites that really work. How would someone know if their site is really accessible? How can you feel what disabled people are feeling when they visit your site? Could you talk about the different tools that disabled people use to go online so that we can use those tools and try to understand how they feel.

Okay. Let’s start by clearing up a minor point. Validation is not directly related to accessibility. Having a site that validates does not make it accessible. Equally, a site that does not validate is not necessarily inaccessible. Admittedly a site that validates is more likely to be accessible, but that is all. It is great you validate your code and you should continue to do so. However, it is okay if your site does not always validate. There are good reasons why Boagworld does not and I am sure the same is true for Clear:Left.

Let’s turn our attention to the heart of the question; how can you better understand the experiences of disabled users? It is an admirable aim but one that ultimately is impossible to achieve. There are so many different types of disability that you cannot associate with them all. That said, I can make a few suggestions which might help.

A good place to start is by trying out a screen reader. Increasingly screen readers are bundled with operating systems. Recent versions of Microsoft Windows come with a basic Narrator, while the Mac OS includes a more feature-rich screen reader called VoiceOver. However, the most widely used screen readers are the separate commercial products like JAWS for windows. This is probably a good place to start as JAWS offers a free trial version for you to experiment with.

However, be warned. When you first use a screen reader it is an intimidating experience. They take a lot of getting used to and can leave you with the impression that a blind person will never be able to use the internet. An alternative would be to watch a demonstration of a screen reader in action. Ian Lloyd did an excellent demonstration for Boagworld a while ago.

Of course not all visually impaired users are blind. Some use screen magnifiers which enlarge screen content. Again, most operating systems have this functionality built in so you can easily try this for yourself. However, there are also a number of commercial products you can try out too.

The other form of visual impairment worth investigating is colour blindness. Although not as serious, it is far more common and affects a large number of users. There are a couple of tools which will give you an idea of what a colour blind person is seeing. The first is Colorblind Web Page Filter which allows you to enter a url and see what that page would look like to a colour blind user. The second is Sim Daltonism, a colour blindness simulator for the Mac OS. Both will help you better understand what the web is like for colour blind users.

The final little tip I want to share with you is kind of stupid but does sort of work. I do a lot of design for the elderly and they often suffer from a mixture of visual problems and motor issues (like arthritis). In order to better understand their experience I have bought a pair to ski gloves and some reading glasses (I don’t need reading glasses). Every now and again, I surf the site I am designing wearing both the glasses and gloves. The glasses make the screen hard to read while the gloves hamper my use of the mouse and the keyboard. There is nothing more frustrating than trying to select something from a drop down menu wearing ski gloves!

Turning problems upside down

Our second listener contribution for today is not a question but a tip. It comes from Jeremy and he writes:

I can’t remember the name of the book off the top of my head (Getting Things Done?) that you’ve been recommending, but you mentioning it reminded me of a problem solving method that I learned a few years back that I thought you might enjoy. It’s called turning the problem upside down. It sounds stupid, but honestly it works pretty well.

The principle behind it is if you can’t figure out a solution to a problem or are having trouble coming up with different ideas, you turn the problem upside down, or invert it, and then come up with solutions for the backwards problem. For some reason it’s much easier to think of the backwards solutions. Then you flip them back to normal and there are your solutions. Sounds confusing, so here’s an example:

Problem: You want to increase traffic to your website

Turn the problem upside down: You want to decrease traffic to your website

Some ‘off the top of my head’ Solutions:

  • Make the site unfriendly
  • Randomly shut it off
  • Never update anything
  • Be rude
  • Keep key content hidden or difficult to find

Now let’s flip the solutions back again and see if they solve the original problem:

  • Make the site more warm/friendly
  • Make sure it stays up reliably
  • Be good about frequently updating content
  • Be aware how of my copy and if I’m talking down to my visitors
  • Make sure the good content is easy to find and prominent

What a great little tip! Excellent when you are suffering from creative block. I love it when you guys send in suggestions rather than questions. I know from the forum that the boagworld audience is hugely experienced and its great when you share that experience. Keep them coming!

129. Conferences

This week’s show sees the return of Ryan and Stanton, holding the fort while Paul and Marcus sun themselves on holiday. .

We’ll be talking about taking your first steps into the world of conferences and answering your questions about font smoothing and browser emulators

Download this show.

Launch our podcast player

News and events

Release of Firefox 3.1 Alpha

Last Wednesday saw a new developer release from the Firefox team. Firefox 3.1 Alpha, or “Shiretoko” is now available for download. Shiretoko is built on a pre-release version of the Gecko 1.9.1 platform and introduces several new features for you to play with.

  • Web standards improvements in the Gecko layout engine
    • They don’t actually say what improvements, so I guess we’ll have to trust them with this one but from what i can gather, they’ve added a lot more CSS3 selectors like :nth-child, the CSS3 “word-wrap” property, CSS3 columns, text-shadow, box-shadow, border-image and more.
  • Text APIfor the <canvas> element.
    • This is a quite detailed API for drawing vector text within the canvas element, and is sure to set the hearts ot typophiles beating just a little bit faster.
  • Support for using border images.
    • The design community has been screaming for this for as long as I can remember, the ability to specify images as borders. The whole rounded-corner craze might be slightly out-of-style now, but I’m sure we’ll see some innovation with this feature very soon.
  • Support for JavaScript query selectors.
    • Now I’m not completely down with the javaScript kids, so I apologise if i don’t get this quite right. But the query selectors seem to be a way to target specific selectors instead of having to filter a result set provided by the getElementsByTagName() call, you can now do the filtering before you execute the query.
  • Several improvements to the Smart Location Bar.
    • When you start typing a URL, Firefox starts giving you options to choose from, you can now filter those results while you’re typing.
  • A new tab switching behaviour.
    • Pressing Ctrl+Tab now gives you a filmstrip style overlay which lets you quickly navigate to your open tabs, and mimics the similar feature in most operating systems nowadays.

The alpha is available from the Mozilla Developer Center.

A List Aparts’ 2008 Survey

It’s that time of year again, the A List Apart team have unleashed their 2008 survey “for the people who make websites”. The survey gathers a massive amount of information, with around 33,000 people taking part last year and covers a wide range of questions covering all aspects of our beloved industry.

The survey covers everything from Age, Gender and Geography to Education, Employment, Vacation (holidays to the rest of us) and those oh-so-important salary details, how many hours worked and your methods of staying upto date with what’s happening in the industry. The data gathered is compiled into a comprehensive, yet easy to read report, and they also provide the raw (anonymous) data so you can do your own number crunching if you so wish.

You can also have a look at the 2007 survey results if you wish, and Paul and Marcus will no doubt be covering the results of this years survey when they’re published. So this is a call to arms really, help improve this survey by taking part at Alistapart.com. We took part, so should you!

The Future of Web Font Embedding

The last news item is a blog post by Richard Rutter on the future of web font embedding. With both Safari and Firefox supporting web fonts in their 3.1 releases, and development releases of Opera, it could be time to start playing with web fonts.

Richard starts by defining web fonts as using the @font-face rule to point to regular TrueType or OpenType font files on a web server, this is to clear up any confusion with Internet Explorer’s proprietary web font support with uses EOT font file, which is also a way to wrap the fonts in DRM, which i think might severely hamper any efforts to bring web fonts into the mainstream.

The font foundries and type designers seem to view web fonts as the death of their industry, insisting that their revenue streams will be destroyed by piracy and free font embedding, rather than seeing this as an opportunity to really boost their industry.

There’s nothing to say that the @font-face rule has to point to a locally hosted font file, The opportunity exists for the font providers to host the fonts themselves, and charge for their useage. This saves us, as designers, from having to install fonts on the machines we design on, and will undoubtedly allow us to choose from a much larger selection of fonts which can be switched quickly and easily.

Back to top

Feature: A Year on the Conference Circuit

This week’s feature has stemmed from a listener who asked “which conference would I suggest for a first timer”? And “how difficult is it if you don’t actually know anyone there”? Having attended a couple of the big conferences this year I thought it would be useful to share my experiences.

Back to top

Listeners feedback:

Font Smoothing

Steve Writes: I have been listening to your podcast. I really like it.

I jusr want to ask a question. On mac, the fonts seem to be all thicker than windows. What setting are u using? I’ve been using best for lcd. Today I changed to automatic, and the fonts were much thinner. It looks more alike with windows fonts.

Do you think this is a big problem for mac users? Since the fonts will look different. Which setting do you think is the best for web designer on macs?

The difference of Mac fonts compared to their Windows counterparts originates from Apple’s legacy in desktop publishing and graphic design, the fonts are rendered in a way which would give a closer approximation to how they would look when printed.

Mac’s use a specific font wrapper called dfont, this contains extra information to preserve certain features like font outlines and hinting which can then be rendered more accurately on-screen meaning that in general, fonts look better on a Mac, whichever smoothing method you choose.

If you’re a designer, I’d heavily recommend testing your design in as many different browsers as possible, but also on different operating systems as well. I work primarily on Windows Vista (don’t shoot me) and have a dualscreen setup, my second screen can be flipped over to my Mac where I can test in Safari, Firefox and Opera on Mac, I also run a Ubuntu system to test in. Rather than running a standalone IE6 build on vista, I run a full XP virtual machine with IE6 running natively as I just don’t trust the standalone builds.

One of the main things you’ll have to accept is that your design might not look identical on any combination of browser or operating system, and because you’re probably designing websites to be viewed by other people, I’d recommend keeping your font smoothing to the default setting of “automatic” which is most likely going to be the case for your target audience.

Browser Emulators

Andy Asks: Hey guys. Been listening (on and off) for a while now and love the show.

I was wondering if there is such a thing as a browser emulator, software that allows you to see your site as it would appear on IE, Firefox, Safari, Opera, etc. If there is one, is it total crap and not really work.

The answer to your question is yes, there are several websites that can provide you with this type of service.

One of the more popular sites is Litmus which is an online emulator that validates your HTML and CSS as well as presenting you with a screenshot of your website loaded in up to 23 different browsers across various operating systems. It can also provide you with a report of any compatibility issues it has come across. However there is a fee to get any real use out of this service.

What Litmus does it actually does very well; however there are a couple of major draw backs I’ve found:

  • You can’t have an interactive experience – Not all issues can be seen from a screenshot and more often than not you need to just take your mouse and navigate around the site to find problems.
  • You can’t test javaScript – You can’t see javaScript animations from a screenshot.

As Paul said in the previous question, there’s no substitution for the real thing, which is having multiple setups with multiple browsers installed. However that’s not always a viable option especially for freelancers working from home who don’t have the budget (and space…) to have several machines and licenses for operating systems needed for testing, in which case sites like Litmus are invaluable.

My advice is if you can test on the real thing, do, if you can’t then take a look at Litmus.

Back to top

An interview with Freelancer Magazine

I have just finished an interview for Alex Stubbs over at freelancermagazine.com. Being a clever cookie he massaged by ego and convinced me to take part even though I am on a family holiday in Scotland.

I hadn’t come across Freelancer Magazine before, but it certainly looks like a superb site. If you are a web design freelancer or are considering making the swap then definitely check it out. It has great features, useful resources and of course star studded interviews!

But before you disappear over to their site take a look at the interview.

Thank you, Paul, for taking the time to speak with us.

Absolutely!

So how are you enjoying your vacation in Scotland?

Scotland is one of the most majestic places in the world. At least if it isn’t raining. I have found it incredibly inspiring being out of the office and away from the web. I have achieved so much more here because I am free from distractions.

Getting to the meat of our discussion is your weekly podcast on Web Design, which is to date the longest running and most popular web design podcast.

I believe you started this in 2005 and it has been gaining more and more recognition since. How do you feel this medium has served you and your web presence over the years?

I was very fortunate to stumble into podcasting. I started out blogging but found that hard work. I love writing but find it much harder to express my enthusiasm and excitement for a subject. Podcasting was a natural fit for my personality.

I doubt you would not be interviewing me if it wasn’t for the show. It has done a huge amount for my personal profile and that of my web design company Headscape. It is also what has enabled me to write the Website Owners Manual too. I doubt any of that would have happened if I had just stuck to blogging. There are simply too many blogs around. You need a way to stand out from the crowd and in my case that was through podcasting.

Any future plans for video podcasting?

I have thought long and hard about video podcasting and yet I do not have an answer for you. On one hand video podcasting is hugely popular and an enormous growth area. It would also enable me to show code and designs. This is something that constantly frustrates me about audio podcasts.

However, on the other hand I am aware that many people listen to my show while walking the dog or commuting to work. You cannot watch a video podcast in such circumstances. Video demands your attention in a way audio does not.

Probably at the end of the day it will come down to return on investment. Doing a full blown video podcast is a lot of work. Unless we can make it pay for itself I doubt it will happen. For now people will have to be satisfied with the audio show and the live ‘behind the scenes’ video stream.

You also have a new project in the works which has gone live recently on boagworld.com: “The Website Owners Manual. Which from what I’ve read seams to be an evolving manual for anyone interested in running a successful website (from start to finish)….

I am really excited about the Website Owners Manual for a couple of reasons. First, there are so few books aimed at website owners or managers. They are all aimed at designers and developers. However, the client is key to the success of a project and there are certain things they need to know. Second, I am excited by the way this book is being produced. Instead of simply being published, this book is evolving through social participation. You can get access to chapters right now and have the opportunity to comment on and contribute to those chapters. I collect your feedback and adjust what I am writing accordingly. At the end of the process you get the final product. Its publishing 2.0… or something like that .

Sounds very progressive! Here at FM the bulk of readers seem to be beginning freelancers who themselves will need to know a bit of knowledge you’ve outlined in this manual… what points do you think this book would be most important to our readers?

I think the main thing will be how to better communicate with clients. The problem with most people who choose to start freelancing is that they under estimate the challenges of dealing with clients. You might be the best designer or developer in the world, but if you cannot deal with clients effectively you will fail. The website owner manual shows you what clients need to know and demonstrates ways of presenting that information to them.

So you’re the Creative Director at Headscape, you run a weekly podcast, you speak at numerous web design and marketing conferences, and still find the time to write a book. I think even David Allen himself would be proud… whats your productivity secret? Whats your daily life like?

I am a huge fan of David Allen and follow the Getting Things Done methodology closely. However being organized is only half the battle. The other half is recognizing what you are good at and sticking to that. I know I am an ideas person. I am great at starting stuff and terrible at finishing it. I therefore surround myself with people who are good at following through.

At Headscape I have three fellow directors who are expert at managing me to be at my most effective. They bring me in for short bursts of activity when a load of ideas are required and then quietly push me to the sidelines when the REAL work begins.

With the podcast, I rely heavily on the community to make it happen. There are people who transcribe the interviews, moderate the forums and even produce the show. There is Paul Stanton who helps me source news stories. Ryan Taylor produces the show by organizing guests, writing show notes and much more. Finally there is Anna Debenham who is our technician. She edits interviews, manages the site and handles the RSS feed.

These people all give up there time because they love the show. That makes me feel very honoured. I would be lost without them and feel guilty that they don’t get more out of it.

You started out as a Web Designer and evolved into other areas since, I’m guessing mostly due to your success with your podcast. How was your early experience when starting out as a Web Designer?

I started out designing for the web back in 1994. I was working for IBM producing CD-ROMs for the first generation of multimedia PCs. While doing this IBM decided to start taking the web seriously and so I got involved very early on.

I was just a junior designer which was why I was given the web stuff. It just wasn’t important back then. My career ended up growing in line with the growth of the web. As the web became higher profile so did my job until eventually I ended up working as a creative director at a dot com company in the late nineties.

Basically, I just lucked out. A lot of success is luck. The idea that successful people are in someway more talented or better is just not true. It is about being in the right place at the right time. That and having a big mouth and being willing to shout about how good you are!

What advice do you have for those looking into starting out as a Web Designer themselves?

Wow that is a hard one. Its very different starting out today compared to my experience. That said, here is my gut reaction.

First, know the basics. Focus on HTML, CSS and Javascript before anything else. Don’t get distracted by the latest fad or the more exciting trend. These are the fundamental tools you will always need.

Next, find talented people you admire and get alongside them. Don’t be shy in approaching them. In my experience they love the attention!Follow their work, ask questions and look at who they follow and admire.

Finally, get involved in the web design community. Go to meetups, conferences and other events. You will learn so much from your peers. Far more t
han from a book
or university course.

128. Details

On this weeks show I’m accompanied by our Producer Ryan and Researcher Stanton. We Interview Dan Rubin on the Details of Design, and answer your questions on managing a bigger team and terms and conditions.

Play

Download this show.

Launch our podcast player

News and events

Silverback Launches

This week has seen the release of Silverback, the highly anticipated app from the guys at Clear:Left. After months of speculations about what Silverback actually was, the “spontaneous, unobtrusive, usability testing software for web designers” is finally available for download.

We’re sure a majority of you know all about Silverback, but for those of you who don’t, Silverback, which is available exclusively for the Mac, is Clear:Left’s answer to convenient usability testing on the go. Utilising the iSight and screen capture facilities of the Mac, user’s experiences can be recorded and reviewed at a later date, taking away the costly and often difficult to setup up approach of using specialist equipment like multiple camcorders which can lead to hours of time spent trawling through video footage.

PatternTap

Whether you’re a designer or developer, there are many occasions where you go on the hunt for inspiration in interface design. Normal CSS Gallery sites give you great examples of full site design, but usually don’t focus on the small details of interface design. The only site i’ve ever been aware of is Christian Watsons “Elements of Design“, which is a great resource showing examples of elements like comment forms, calendars & date pickers, footers, image captions and so on.

There’s a new site I’ve come across this week called PatternTap.com which also wants to collect these design patterns and focus on specific elements of design and to help you to reference, collect and organise them for your own needs.

PatternTap is shaping up to be an absolute goldmine of inspiration, and looks like it will build into a large resource of design element exmples. There’s currently 46 collections, everything from 404 pages, audio players, pagination and search boxes. It let’s you create your own “lightbox” style user sets, so you can keep your favourite examples organised for future reference.

I’ll definitely be adding this to my toolbox of design inspiration links, and recommend you give it a look too.

Google App Engine Update

This week also sees the release of a small update to the Google Apps Engine. The Google Apps Engine allows developers to build applications on Googles own infrastructure. I have to admit that the Google Apps Engine is not something I’ve developed with personally however that doesn’t stop us talking about it so let’s run through the list:

  • Firstly you can now have up to 10 apps on your account as opposed to the previous limit of three 3, the Engine also limits developers to 1000 files per application, so the increase in the number of apps you can now have is a welcome addition.
  • Time windows for Dashboard graphs: Zoom in on the data in your dashboard to get a more accurate picture of whats going on. You can zoom in to see graphs for the last 24, 12, and 6 hour periods.
  • Log files can now be downloaded in plain text.
  • And finally you can send email as the logged in user: If you’re using the users API, you can now send email from the email address of the currently-logged-in user were as before it was only possible from the administrators account.

S3

So some of you may be aware that Amazon’s S3 service suffered from some 6 hours of downtime recently, this echoes the issues of service availability that happened back in February.

For those of you who don’t know, the S3, or “Simple Storage Service” is a scalable and inexpensive data storage infrastructure, which allows you to store and retrieve any amount of data.

So this is a fantastic idea – in theory, it means that if you’re developing a large website or web app and need lots of storage, you don’t have to pay for huge webhosting plans with lots of physical diskspace, you store your assets “in the cloud” as it were, and you’re charged based on how much storage space you, and how much bandwidth you consume.

Lots of large sites rely on the S3 service for their storage needs, Twitter, BaseCamp and SlideShare to name but 3 and the recent downtime has raised the age old issue, “are we putting all our eggs in one basket?” Jonathan Boutelle put it best in a recent blog post, stating “When S3 goes down, the internet goes down”. Aral Balkan also wrote recently urging people to have contingency plans in case events like this happen again, stating that the Open Source Google App Engine SDK could be the answer.

Back to top

Interview: Dan Rubin The Details Of Design

Paul:Joining me today is Dan Rubin who I recently saw at the @media conference. Good to see you or speak to you again Dan should I say?

Dan Rubin:Good to speak to you Paul.

Paul:It was good to meet up with you at @media. It feels like a long time since we met up and it was great to hear you speaking there. That was a first for me.

Dan Rubin:Thanks. It was a privilege to be able to help out Patrick it being very last-minute.

Paul:Oh was it?

Dan Rubin:He sent me an email about two weeks prior saying someone had dropped out and of course I wasn’t going to say no.

Paul: laughs

Dan Rubin:It’s been over 10 years since my last trip to the UK, so it was a great opportunity.

Paul:Cool. Well I have to say considering you only had two weeks to put together the presentation, it was truly phenomenal. It was an excellent presentation and I really enjoyed it. You were talking about ‘design is in the detail’ I guess was the kind of subject you were tackling?

Dan Rubin: I’ve been talking a lot lately about the level of detail, the attention to detail and the design and I’ve done a couple of presentations with Brian Veloso over the last year on that same kind of topic. This was an extension of that injecting some of my own little personal preferences into the talk and got to cover things like typography and some of the simple practical things that you can improve very easily that result in a big improvement and typography, and little tricks in using grids, not on how to make them but how to actually implement them and how they can help workflow and bring things together and make layouts tighter and better without
that much effort and the same thing with digital transformations in photography and a lot of pixel detail that a lot of people don’t notice and its all about the subtle level of design.

Paul:I got this vague feeling that as you were talking you were a little bit appologetic for some of these manushi that kind of individually you sit there and go ‘how is anyone going to notice that?’, but accumulatively they have this effect on the design don’t they?

Dan Rubin:Well that’s the thing. It comes down more to feeling than seeing but its about as a designer what you feel with your eyes more than anything else and how that translates to what users or viewers or readers also feel but since they don’t know it is there, they are likely to never actually see it, but as a designer you’ll know it is there, you can see it, and the trick is to get it to the point of you can still see it but it is not really visible it is just felt.

Paul:A subconscious expression?

Dan Rubin:Yes.

Paul:You covered loads of tips in your presentation and there was some excellent stuff in there but if you had to pick out one that has the biggest impact on a design, which of the many things you talked about would that be?

Dan Rubin:I think what it would be is to really underscore trusting your eyes and it seems a really simple concept and whenever I put that up on the screen you get giggles from the audience. The truth is many of us don’t actually take the time as designers to just step away and look at what we’re working on. It doesn’t matter whether it is for screen or print. The medium is a material at this point and it is just having faith in what you see and what you feel. That’s what being a visual creative is all about. It is trusting what you see. It is the same as being a good musician comes down to trusting what you hear and sometimes we forget that, and we start getting into designing based on the rules or how we think we are supposed to do things or designing on technical limitations alone. When we do that we stop using our eyes.

Paul:It’s interesting in the presentation you talk quite a lot about some of the details and the mechanics of design. You were talking about font sizes going incrementally up, your heading and your sub headings and there being a mathematical relationship in their sizes. You talked about being consistent in your margins and padding and how all those things inter-relate. Are we saying that design is something that can be learnt and it is a mathematical thing and it’s a set of rules that you just adhere to? Or is there some sort of underlying artistic thing, some people just know how to do it and it’s not something that can be learnt. What’s your opinion on it because I get mixed feelings from you? On one hand you talk about these rules and on the other hand you talk about stepping back and looking at your design and it feels more kind of arty-farty if that makes sense!

Dan Rubin:What a load of questions and rightfully so! It’s something I’ve written about before years ago and had a bit of back and forth on the topic with Paul Scrivvens of 9 Rules, with him arguing that you don’t need any natural artistic ability because he didn’t think he had any, yet he was clearly doing things that looked good. I was arguing the opposite but when it comes down to it it’s really not something that you can say definitively either way. Just as there are people who naturally seem to be good musicians or good athletes or good at math and programming, there are people who seem to naturally be good at design and any kind of creative endeavours. It is really difficult to tell whether that seeming innate ability has come from something that happened in very early childhood development or if they were born with it. I do think that however difficult it is to put a finger on it, once you get old enough, especially to the point w here probably most of your listeners are doing what your doing for a living already or you are thinking of changing from one thing to another, you’re past that point of subconscious development where you need to put conscious effort into something and you can. I think you can be trained to do most of the things designers do. You can even train yourself to see the way that creatives see. The older you get the harder it becomes to incorporate into the way you view the world. That is a big part of it. That comes down to sometimes the different personalities. How hard is it to put a finger on what makes you ‘you’. I would say as a teacher, and I spend a lot of time teaching high school students over here about music as well, since that’s my other passion, and it’s specifically not just playing music but it’s specifically singing which is one of those things that you can either carry a tune or you can’t. I’ve also seen kids who can’t carry a tune when they start singing learn how they train themselves. They learn the proper muscle memory, and it’s amazing to see what people can actually accomplish when they put their mind to it. If you are listening out there and you want to become a better designer or maybe you’re not a designer and you’re a programmer or a web standards junkie, and I can say that because I am one too, and there isn’t any reason that you can’t become a better designer, or become a designer from scratch if you realy really want to.

Paul:I think that’s really important to say because I think so many people are intimidated from getting involved in design because there’s almost a bit of snobbery. If you’re not artistic, you’re not artistic there’s nothing you can do about that. I personnaly don’t believe that that’s true. Like you say I think there are some people that are naturally inclined that way but I think a lot of the principles that you were talking about in your presentation pretty much anybody can pick up on and do, which is what encouraged me so much hearing you talk.

Dan Rubin:That is one of the reasons why one of the reasons I say one of the most important thing is to trust your eyes and that’s instinctual. These rules, as a good teacher you have to teach these rules. When you start learning any discipline the first things that you are taught are the basics.The basics are things that many people, once they learn enough, don’t conciously think about, but what you find if you deconstruct their work is that they are doing them, they have incorporated into their flow into their process so it’s second nature to them. What we think of as instinct is really just experience.

Paul:Yeah. One of the things you did mention in the presentation that grabbed my attention is you talked a lot about texture and adding more texture to your design and about how that creates a real feel. There seems to be a slight skism, I don’t know if that is the right word, but like 2 different camps in design at the moment. People like yourself, Elliot Jay Stock is another example that does very rich, very textured design. It’s absolutely gorgeous. At the other end of the extreme you’ve got people like 37signals doing this minimalistic functional design. How do you feel those two sides fit togeth
er? Is there a role for one or the other or have they both got their place

Dan Rubin:I really think that both have their place and more than that it’s popular to create divisions. Not just these days, if you look at any industry that spends a lot of its time looking at itself, like we do, you start to find reasons to create little clicks within it or factions or what have you. If you just ignore those splits that happen because we spend way too much time looking at what we do and try to deconstruct it and answer that question of ‘why’. What you find is that it’s all the same thing. When I talk about texture it is important to understand that it doesn’t just mean rough or ??bulap or brick. Texture can also mean smooth and polished and speaking directly about 37signals for instance. I’ve used their apps and I’ve loved them since the first time they came out. If you look at the first versions of Base Camp and Backpack, before their incremental re-design they’ve actually added the little drop shadow over time. If y ou look at it as a designer you see the flaws in the way they’ve done it because it doesn’t look real and it just ends at some edges, it has hard edges, but that’s not the point. The point is they added it because it created a separation, they added it because they felt it needed it. The rest of the interface doesn’t need any other texture because it isn’t supposed to have a feel to it. It’s actually supposed to totally get out of the way and there are different approaches to minimalism. You can use minimalism in subtle detail where you add in things like I was showing in my presentation, or you can use minimalism where you keep taking away and 37signals apps feel right, they always have felt right to me so as far as I’m concerned that means they’ve hit the nail on the head. It shows when you see people trying to recreate the application interface and theat style that 37signals uses and they get stuck in this pattern of adding things, like they feel ‘well, that’s 37siganls l ook so I think we have to add things to make it better, to make it better, and they never work as well because it’s not just about that. So the answer is, and I try to underscore this when I talk to people about this or present about it or even write about it, as much as these things can be presented as rules and definitive this is the way to do something. the fact is you have to do what works best for you and your particular project or circumstance or situation, and you also have to be open to the fact that what works for you right now might change. It might be different next year, next month or next week, and being able to adapt to your situation as a designer specially is really important, because you have to adapt if you’re doing client work, you have to adapt from project to project, because your style might work for one client but you might need to tweek your style to do what’s best for another client. If your working on your own applications, what works for your users now might not work for your users once they become users that have used your app for a year and they’re experts now.

Paul:You talk about tweaking your style. How easy is that, do you think, to do in reality? I mean I’ve got a very strong style in my design, and I really struggle and I look at someone like Cameron Moll’s style and I just love it. I love the light-handed feel, he’s very delicate, beautiful design, and I wish I was more like that, but there is no way I can make myself become like that, or can I? Is there a way of changing your style?

Dan Rubin:I think we’re all naturally mimics. I’m not going to dig into my opinions on human adapability too much. I spend a lot of time thinking about that as far as evaluating how people use things, whether it’s interfaces or products and it’s interesting to start to see those patterns but you can see it on a global scale too. Historically human beings are species very, very adaptable and that happens on macro and micro levels. If you want to adapt your style you can. You look for the inflences you want to model yourself after. This is just how people learn to be designers when they’re starting out, or learn to be artists. When I took my first watercolour and oil painting classes when I was 11 or 12, the way we learnt was to recreate examples that were painted by masters. So learn how to use the brush strokes they use, to learn how to mix colours the way that they use them, to learn how to use the tools the way that they use them becau se you only discover your preferences and your style by mimicing, copying others. You find out what works and you decide what works for you and what doesn’t. So changing how you design and how you see is not necessarily easy, because at a certain point you’re reprogramming muscle memory and from my experience with singing I know how difficult that is to do. Once muscle memory has been built up to the point where you don’t think about it and you just react, it’s very difficult to break that down and re-build it. Difficult does not mean impossible.

Paul:That’s really interesting that you say that because I’ve always very much struggled to design in any other way than I already do, but I obviously need to push myself in this area. Talking of 37signals, I’m sure you have been following their recent post and various reactions to it about skipping Photoshop, and how they move straight into building with HTML and CSS and I just wondered what your opinion was on that.

Dan Rubin:I know I’d get roped into this discussion somehow. There has already been some great responses from people like Jeff Croft and Mark Boulten to the 37signals post on that, and even interestingly enough a follow-up post sourced by 37signals announcing that they were looking for an additional designer for their team that can push them into different directions that they havent been going naturally. That comes back to the whole adaptability and willing us to change and being open to it. In the argument itself I can’t say I always start in Photoshop or Fireworks or some sort of visual tool. I think Jeff said 37signals starts with a visual tool, it’s pencil and paper. I think even if your tool is a marker on a whiteboard to a certain extent everybody tends to start there, even if you don’t start there you start with a picture in your mind. So there’s some level in the process where a visualisation is occuring, if that’s fair to say. When it comes down to it why does the tool that you’re using to visualise really matter? It starts in your head if you’re a primarily visual person you can either realise that vision by programming it and seeing it in the browser or using Photoshop as a tool. All of these are just tools when it comes down to it, they’re not the end result. They’re just part of the process. I’ve done both. I’ve built straight from XHTML and CSS many times and I do tend to find that most visual designers that have weighed in on this conversation also find that in my opinion the result ends up being more simplistic. that’s not necessarily to say bad. It’s just different and you’ll find that the tools that you use as a visual creative influsence the end result because that comes down to constraints. 37signals of course is huge on constraints and you do save time when you’re doing straight HTML and CSS, you skip a lot of the temptation to play around like I know I do with layers and layer setting s and percentages of opacity. I spend a lot of time playing when I’m in Photoshop, I don’t think that’s bad. That’s part of the creative process when using that tool. When I used to paint which I havent done in way too long. I would play with my
palatte, when I was doing oils my palatte and my palatte knife was tool before I got to the canvas, and I would play with mixing my colours ‘and that’s not quite right’ and ‘wait and go over here’ and sometimes you get it onto the canvas and it doesn’t look the way you want it to and have to wait for it to dry and then you paint over it because that’s what you do with that tool. When you’re doing watercolours you don’t have that forgiveness of the tool, you have extra constraints, so you don’t experiment as much putting it on the paper, putting the paint to paper because you know once it’s dried and there you can’t go back. you can’t paint over it. So you adjust your style depending on the tools and the workflow and it’s all good, it ‘s just all different and you have to I think do yourself a favour and experiment to find which works best for you and don’t be afraid if you’re working on a project and you think ‘this doesn’t feel like it needs a lot of subtle gradients and lines and shadows and Photoshop work. I might just be able to build this without using Photoshop at all’. So do it if it feels like that will work best go that route. If you feel the opposite go the other route. If you feel like it should involve a lot more natural media pull out your watercolour pad and paint something and scan it in and incorporate that

Paul:It really down to the right tool for the job thought process.

Dan Rubin:Exactly. The thing that 37signals does really well is stick to their guns. They state their opinion so firmly that people can easily interpret it as law and I think that’s very important. In any industry it’s very important to have people who do that, who can stick to what they believe so strongly and apply it so universally that it creates this set of rules, but it doesn’t mean that they have to be followed or cant be partially followed or bent or broken and you find just as much as 37signals is enfatic about skipping Photoshop. There are other people who would never in a million years go straight to HTML and CSS, doesn’t mean that either camp is right.

Paul:OK. One last question just to wrap this up. We’re running out of time but there’s something I wanted to ask you which is: We’ve been already talking about that there are people that may be want to learn to be better designers, to find their style and to move into this area, perhaps they’ve been a developer background and they’ve been previously put off exploring design because they have been made to feel inadequate. What kind of resources would you encourage people to look for or look at in order to get going I guess?

Dan Rubin:Whether you’re starting from scratch or just trying to improve what you already have it’s important to touch on a couple of specific areas, and those are typography, layout and working with colour. This applies just to design because it’s worked whether you’re designing on the web or designing in print or branding or whatever you’re doing. Typography is kind of my first love with design and if you want to learn about typography you have to go out and buy ‘The Elements of Typographic Style’ by Robert Bringhurst. It’s the bible for typographers. It’s really easy to read too because he’s a well respected Canadian poet as well. He just happens to be an excellent typographer and book designer, so if you are in a rush, you cant get to the book store or Amazon right away Mark Boulton’s series ‘Five Simple Steps To Better Typography’ is a great place to start as well and he references a ton of other good resources. Start there if you a re going to start online but no matter what buy ‘The Elements of Typographic Style’. When it comes to layout there are a lot of things that you can learn about layout but you’ve got to learn about grids, even if you never use them. Do yourself a favour of learning and I’ll reference Mark again, actually I’ll reference Mark in all three of these. He’s got great starter tutorials about this stuff so ‘Five Simple Steps To Designing Grid Systems’ is really a great place to start. Cameron Moll has written about Griding The 960 and read up over on Khoi Vinh’s site about grids. ‘Grids Are Good’ is a great demonstration as well, and if you want to get a physical book to hold ‘Grid Systems In Graphic Design’ is a great, great phyisical book and I think it’s important to as web designers to also reference ‘Print’, because Print is where all these design rules come from and typography rules and colour rules, so learn from these different implem entations and you’ll figure out things that you can do that you didn’t think about, because you haven’t seen them on the web. So ‘Grid Systems In Graphic Design’ is by Josef Müller Brockmann I believe would be the pronounciation, look that up. Colour, and this is something that’s very preferential maybe but read up again Mark Boulton’s ‘Five Simple Steps To Designing With Colour’. He’s great at teaching, he’s great at communicating all these things. Also play around with some of the online tools like Adobe Kuler, is fun. Look at what other people are putting together, look at combinations, again feel is important. Whatever feels right for what you’re trying to do. Another cool tool is Colorjack. You got a couple of ways of mixing colours and it’s really, really cool to look at. Finally on the topic of colour whenever using colours in an interface please be aware of the different types of colourbl indness that exist, and there are lots of tools online. Photoshop CS4 will have some tools built in as well but there are plug-ins that you can get right now for all sorts of tools and online tools as well that allow you to see what you’re designing, or even just a colour palatte. See them through the eyes of someone that has these various colourblindness afflictions and make sure that whatever you do doesn’t render something unuseable to what ends up being a large percentage of the viewing public when it comes down to it.

Paul:WOW !! That’s a good set of resources !! My word.

Dan Rubin:You didn’t think I’d be that prepared did you?

Paul:That’s a superb list. I certainly didn’t know about all those posts from Mark Boulton. there was some great stuff in there – Thank you very much Dan. Just to say that Dan’s talk at @media will be no doubt going live at some point and you’ll be able to download it and listen to it. Definitely do that, it was superb. So check that out. You will be able to go the shownotes for this episode for all those links that will be useful as well. No doubt you won’t be able to remember them all. Dan thanks for coming on the show, it’s very much appreciated and we will get you back on in the future.

Dan Rubin:Thanks very much for having me Paul. It was a pleasure.

Thanks to Sarah Galley for transcribing this interview.

Linkage

You can find Dan Rubins site, Superfluous Banter here.

Typography
Layout
Colour

Back to top

Listeners feedback:

Managing a Bigger Team

Jon asks: We are a company of 4 people – myself (owner, design lead and general business development/project management person), one designer, and 2 developers.

We are hopefully about to merge with a slightly larger company in a neighbouring town who have slightly more staff than we do (7 in all), and who have more of a project management structure – 2 project managers, using the services of 1 designer, 3 developers, and 1 designer/developer. I would end up as owner/MD of the enlarged company.

My question is really about project management? What do you think is the best organizational structure for a company of 11 people? I was feeling pushed on the project management side before this merger came along, and the merger will bring 2 project managers with it. How does Headscape do it for example – I think you have project managers there – do the designers and developers report to project managers, or do the project managers pick from a pool of design and development resource as required? What are your thoughts generally on the whole project management side of things.

A-ha… this is part two to a question I answered a few weeks back relating to pricing work after two companies merge. I wanted more detail at the time and now I have it!

Comparing to Headscape, we have 4 designers, 4 developers, 3 project managers, 2 business development/analysts and 1 lazy good-for-nothing called Paul … seriously though, Paul effectively markets Headscape and I have to say he’s rather good at it (ungrits teeth…)

Following the merger Jon will have a team of 11. As he is new MD, I think it is imperative that he much reduces the design and PM aspects of his role and concentrates on bringing in business as there are quite a few more mouths to feed.

That leaves roughly 3 designers, 5 developers and 2 PMs. Depending on the work you’re doing I think that is ok especially considering Jon can bolster both the design and PM groups if needed.

Regarding the allocation of work, project managers should rule the roost. Full stop.

It is their job to manage resources. Delivering projects effectively and on time means that they must know that they are in charge regarding who does what and when they need to do it by. A certain amount of fitting the right person to the job should be done but generally, the rule should be that the next piece of work goes to the next available person. This would be particularly useful advice in a merged company where it would much easier to keep going back to ‘your’ guys because you trust them.

One thing that has worked really well for us is to set invoicing targets for the project managers. We don’t operate performance related targets but it still really helps to focus minds on hitting milestones at the end of months.

Terms and Conditions

Adam writes: I am developing my own web application. In summary, it’s a site with user submission of content in a social networking format with video uploads. Anyone can register an account.

I of course have to try and write Terms of Service for this and I am getting stuck. I am wondering what Headscape uses, especially for Getsignoff, and whether you found a pre-written terms of service, or had a specialist write one.

What’s your solution to the problem, and what should / should not be included.

I have to confess to conferring with Headscape’s fount of all legalese knowledge on this – our MD Chris Scott. I tried to get him on the show but he’s still a little jittery after the last time all those years ago… anyway, Chris put together the TOS for Getsignoff and these are his thoughts on it:

For Getsignoff I looked at the TOS of other online services like Harvest, Basecamp, Youtube and Flickr. I’m not a legal person, but this gave me enough material to be able to identify the key issues that I thought we needed to cover in our TOS.

I assembled this into a brief for our legal adviser that was part overview of what we wanted to achieve and part draft TOS using adapted clauses from other TOSs.

Our legal adviser pretty much re-wrote what I had given him but this was from a position where he had a good understanding of how we wanted Getsignoff to work.

The bottom line with this sort of thing is that you really need to get a professional legal person to assist.

Back to top

 

127. Context

In this week’s show we discuss taking context into consideration when designing websites and we answer your questions about video for an elderly audience and the most influential books in the industry. 

Play

Download this show.

Launch our podcast player

News and events

Working from home

The first post this week appears on A List Apart and applies to a growing number of people in the web design business. That is because it is tackling the subject of home working.

According to the home business report (PDF) published in October 2007, home based business account for 28% of all employment and have a combined UK turnover in excess of £364 billion.

No doubt that percentage is even higher among web designers. Therefore it comes as no surprise that this subject is being increasingly written about in web design circles.

This particular post is written from the perspective of a home working mother. However, her advice applies to anybody consider working from home. This advice includes:

  • How to draw the line between work and home
  • How to isolate yourself from the rest of the family while working
  • How to explain to your client the screaming child in the background of a conference call
  • How to win clients that are understanding of your situation

If you are already a home worker, I am not sure this article tells you anything you wont have already learnt the hard way. However, if you are considering making the switch for whatever reason this is definitely a worthwhile read.

British Standard for accessibility

Some time ago the British Standards Institute and the Disability Right Commission teamed up to release the first formal guide for business on website accessibility entitled PAS 78.

PAS 78 was intended to be a web accessibility guide, aimed at website owners rather than web designers . Personally I found the result somewhat disappointing. Although the advice was solid the language was hard going and it referred too often to the WAI guidelines. Although these guidelines are superb they are too technical for most website owners.

However, despite my personal opinion the document has proved very popular and is now being converted into a full British Standard. A British Standard is a common standard used across a variety of products produced in the UK. Although anybody can claim to meet these standards without external review, it is possible to be officially certified. Once certified you can display a BSI Kite Mark. This is a symbol of quality universally recognised in the UK.

Personally, I think this is a much better route for web accessibility to take. The alternative is legislation and that carries with it numerous problems. The team working on the standard is excellent and I look forward to seeing the result.

Growing your business through twitter

The next post solves an embarrassing problem I have. When sitting in the pubs with my mates, they occasionally catch me twittering. It is particularly embarrassing because I cannot really explain why I do it. Fortunately now I can thanks to a post from Tiffini Jones at Blue Flavor.

Actually the truth be told, Tiffini’s post refers heavily to another by Elliot J Stocks a few months earlier. He suggests that twitter is:

  • An ice-breaker
  • A purveyor of "ambient intimacy"
  • A broadcasting / marketing tool
  • A fount of knowledge
  • A social network

Both posts communicate well the power of social networks if used wisely. This has certainly been my experienced and without tools like Twitter this site and podcast would have been nowhere near as successful.

I know a lot of people look down their nose at twitter. They claim it is a time waster, unprofessional and dull. However, I think they are missing the potential. I believe that networking tools like Twitter will in time diminish the role of search engines. Increasingly people will turn to online contacts for recommendations about products, services and information, rather than relying on the algorithms of Google.

Smart CSS aint always sexy

My final article today, demonstrates a sea change in the web standards community. It is a controversial article on the Digital Web Magazine entitled Smart CSS aint always sexy CSS.

The article challenges some of the basic arguments of standards zealots. For example is it so bad to name a class ‘red’? Do we need to pursue semantics at all cost, even when it compromises performance or maintainability?

This seems to be representative of a growing group of designers calling for a more pragmatic approach to web standards. Increasingly I am seeing little examples of rebellion against the more extreme supporters of standards. Whether it is the posts of Jeff Croft or the twitterings of Andy Clarke, it would appear there is the beginning of a more grown up approach.

Does this mean we can throw away good practice? Not at all. It simply means we are mature enough in our knowledge to bend the rule sometimes. Before you can paint like Jackson Pollock, you first need to know how to paint traditionally.

The morale of the story is that if you are new to standards then you should stick to the rules. However, if you are more experienced, there is nothing wrong with making compromises from time to time.

Back to top

Feature: Content is dead, long live context

No, content is not dead. Yes content is important, but there can only be one king and I am beginning to wonder if it is context in this weeks feature.

Back to top

Listeners feedback:

Video and an elderly audience

Steven writes: I am currently working on a website that is going to be targeted toward an older demographic. There seems to be a large disagreement on whether video should be included on the site. The site is quite in depth and video explanation could be crucial. The main argument seems to be that people might not have the flash player and in turn not be able to view the video. On the other hand the Adobe site says that market penetration on flash player is over 99%!? Is flash video a usability issue?

One of the largest clients Headscape works with is trying to reach an elderly audience and so I have put some thought into this issue already. Unfortunately as with all of life, it is not a straight yes or no answer.

I see no reason why you cannot use video on your site. Although I do not believe Adobe when they claim flash has 99% penetration, I do believe the vast majority of your audience will have it installed. In my experience those who do not have flash are those behind a corporate firewall.

Although you can expect the vast majority to have flash I don’t believe you can design solely for it. The elderly develop visual, physical and cognitive c
onditions that can make it hard to interact with flash in some circumstances. Although a well designed application can minimise these problems, it will still affect a significant number of users.

I am afraid that although you can use flash, you will have to also provide an alternative. This could either be in the form of a transcript or captions (depending on the nature of the video), but additional work is required.

Most influential books

Teifion asks: What are the two most influential books you have read. Not just for web design but work and life in general.

I think this is possibly the hardest question I have ever had to answer. Choosing just two books has been horribly difficult. In an attempt to cheat slightly I have changed the rules to reflect BBC Radio 4s Desert Island Discs. This means I get the Bible and the complete works of Shakespeare for free! My choices are therefore…

  • Getting things done by David Allen – I know I have spoken endlessly about this book before but that is because it has had such a profound impact on me. It is an easy book to dismiss with statements like "I don’t need to read it because I am already organised" or "it just tells you to write lists". In fact it is about a lot more than that. Getting things done has made me radically rethink my life and what I spend my time doing. It has made me question my priorities and change what I spend my life doing. Yes, I do write a lot of lists now and yes I am more organised but that is not what I got from this book. It taught me to take control of my life and decide what I want to achieve.
  • Designing with Web Standards by Jeffrey Zeldman – I bought this book entirely by accident and yet it set my entire career in a new direction. Before reading this book I was feeling uninspired and stagnant in my career. I was bored with web design and felt that I had gone as far as I could. Reading this completely re-inspired me and introduced me to the web standards community. Without this book I doubt I would still be doing web design and certainly wouldn’t be doing this podcast or speaking around the world. Thanks Jeffrey!

Content is dead, long live context

No, content is not dead. Yes content is important, but there can only be one king and I am beginning to wonder if it is context.

The more I consider context the more I recognise its impact on every aspect of a website. Context affects design, usability, accessibility and content. Its influence is profound, and yet it is largely ignored by many web designers.

But what is context when applied to a website? Its actually hard to define. It is easier to think in terms of the users context while access your website. Understanding this context affects how you design a site.

We put a lot of emphasis on user centric design. We believe that understanding users is important. For example, we believe in carrying out user testing. However, think for a minute about the way we do this. We bring the user into an artificial environment (such as a usability lab). We remove them from their normal context.

Equally when we create personas they focus on demographics (age, sex, job etc) rather than their context. We miss a crucial part of the jigsaw.

So what is the users context? I have identified 5 aspects that form his or her context. These are:

  • Environment
  • Device
  • Comfort
  • Mood
  • Time

Let’s look at each of these in turn.

Environment

Environment refers to a number of factors including location. The kind of information a user wants to access is dependant on his or her location. For example somebody planning a weekend break using their PC at home, will want information on hotels and attractions. When they are actually on their break and using their mobile phone, they are more likely to want information on the nearest pub or the opening times of a museum they want to visit.

Location does not just affect content. It can also affect design. Viewing web content outside will mean battling with sunlight and so high contrast is required. Alternatively, you do not want to be dealing with fiddly form elements while being jostled at a train station.

However, environment is not just about location it also includes distractions and surroundings. For example a mother of three toddlers may find it hard to concentrate on a complex survey, with the children demanding her attention. Equally a user accessing the web from a library is not going to appreciate audio suddenly playing on your website.

Environment also defines the type of device we use to access the web. This is another aspect of context.

Device

Although location and the device often go hand in hand (you tend to use a PC at home and a mobile while out), this is not the only affect device has on context. The device also determines the input methods available.

Few mobile phones come with QWERTY keyboards. None come with a mouse. You can access the web via games consoles like the wii. These generally rely on gamepads, remotes and on screen keyboards.

Different input devices should radically affect the user interface. Not only do each of these devices alter how you interact with the system, they also alter how you view the information.

Typically PC users are sitting close to their monitor and viewing at relatively high resolutions. Games consoles are normally attached to a TV where you sit much further away and the resolution is lower. Mobile devices have a lower resolution still and the viewing position is different again. This all affect the design of your website.

Talking of viewing position, the other factor that needs considering is the users comfort.

Comfort

How physically comfortable a user is affects the length of time they will interact with your site. Although you cannot know whether your target audience is comfortable or not, sometimes you can make an educated guess. For example, if you know your users will be accessing your site via a kiosk in a shopping mall, they will probably be standing and not stay long.

Comfort is to a large degree dictated by environment but not entirely. It can also be dictated by physical conditions. If you are launching a site aimed at those who suffer from back pain or weak bladders, do not expect them to spend a long time on your site!

In some ways comfort is also closely linked to our next factor, mood.

Mood

There is no way we can predict the emotional whims of our audience, but they do have an affect on attention span. Those who are busy or stressed get irritable with a site quicker. They are likely to give up and walk away. Conversely those who are relaxed muddle through and are more tolerant of bad design.

It is important to consider the likely temperament of your users. For example, business executives are likely to be less patient with a site than a pensioner siting in his villa in the south of France.

Environment, device and comfort can all have an impact on mood. However, the biggest influcening factor is time.

Time

It is obvious that the time available to a user affects how long they spend on a site. However, we often do not take this into account when designing a site. Unnecessary form fields and key content buried deep within your site, are just 2 ways we ignore the time constraints users operate under.

Online banking is a good example. It is so complex to login to my account that it is quicker to pick up the phone. With time being a valuable commodity users will often choose a competitors site because they can get things done faster.

Of course, in reality there is a lot of overlap in these facets of context. However, I have yet to read much about context that isn’t directly related to mobile devices. Hopefully I have demonstrated that context applies to all the work we do and not just to mobile websites.

125. Copy

In this weeks show we discuss how to give personality to your site copy and we talk with Elliot Jay Stocks about going freelance.

Play

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and Events

The clever chaps at Carsonified

If you happen to follow any of the guys at Carsonified on twitter, you cannot help but know they are working on a not-so-secret project called Matt.

It is an interesting idea that they have done once before. They stop all normal work for a week and blitz a small self contained project using an Agile style approach.

The final result is not what counts. It is the exercise itself that I find interesting. By doing this periodically they…

  • Create a lot of buzz which reflects well on their company
  • Build a great sense of camaraderie
  • Get to try out new technologies and techniques
  • Break the routine of everyday work
  • Push people’s comfort zones and help develop new skills

It’s a great plan and one more of us should adopt. It is certainly something I would like to do in Headscape. Of course it is more tricky when you have clients with deadlines however the principle still applies. You may find it hard to do this for a week, but maybe a single day is possible.

Adobe make flash searchable

The big news of the week is an announcement by Adobe that they have been working with both Google and Yahoo! to improve the indexing of flash. This is no real surprises as the SEO of flash has been a major headache for the technology. The surprising bit is that they have succeeded, at least in the case of Google.

Apparently Adobe have created a special flash player for the search engines that acts as a virtual user. This user trawls through each swf converting the content into something search engines can understand.

Apparently Google is in the process of rolling out the technology. Unfortunately Yahoo! apparently have "some work to do." Nevertheless this is a promising step forward.

Of course until Adobe make it easy for the average blogger or website owner to deep link within a flash file, the 73 million flash sites are not likely to be highly ranked.

Colour blindness on the web

My final story for the day is a post on colour blindness by Richard Rutter. To call this news is a huge stretch as the article was published in 2005. However, I have only just found it so it is news to me!

I have to say I love this post. At the very beginning Rich tells us he is colour blind and so I braced myself for feelings of guilt and inadequacy as he tells me my sites are inaccessible. Instead I got this…

The thing is, colour blindness on the Web isnÕt a big deal. You do have to bear it mind (as I will show later on), but there is no need to let it dominate any design decision.

What a breath of fresh air. He then goes on to give some very simple advice that anybody can follow…

  • Do not rely on colour alone to convey information (such as on Jeff Veen’s blog)
  • Do not write instructions such as "click the green button"

He goes on to dispel some misconceptions and provides good examples of where things can become a problem.

If you worry about the large number of colour blind users out there (and you should do), then give this post a read.

Back to top

Feature: Copy with Personality

Too much of the copy I read on websites is bland and uninspiring. Its time to add some personality. We look at this in this weeks feature.

Back to top

Interview: Elliot Jay Stocks on Going Freelance

Paul Boag: So joining me today is Elliot Jay Stocks previously from Cansonified now a freelance web designer, in the depths of Norway I hear earlier.

Elliot Jay Stocks: Yes. That’s all the hype depending on how you look at it.

Paul: Well it’s really good to have you on the show.

Elliot: Thank you for having me.

Paul: Normally when we get people on the show it’s to talk about some specific area of expertise or something like that. Although I know you have many, many areas of expertise I wanted to get you on the show just because of the really interesting thing that you’ve chosen to do. The fact that you’ve left a fairly well known company that had a really good reputation. That you’ve decided to go freelance. And you’ve decided, at least for a short length of time to work from Norway, as a bit of an adventure. Is that the right way to put it?

Elliot: Yeah I guess so. I don’t like to do anything by halves. I like to do everything at once. So we gave up our flat my girlfriend went off travelling to the far east. I moved to Norway and at the same time decided to start up my own business. So quite a few life changing things at once.

Paul: Cool. I mean that’s really exciting and I guess that’s the power of freelancing, that you’ve got the freedom to work from wherever you want.

Elliot: Yeah and the power of the web in general. You know whenever anybody says "How can you do that?" I say I’ve got my laptop and as long as I’ve got an internet connection then it’s all good. Although having said that my internet connection here is really dodgy.

Paul: Which is why I’m calling you on an ordinary phone line.

Elliot: Right. Where I’m staying unfortunately there is something wrong with the router where it doesn’t allow ftp or any way to send email out. So there’s no upstream traffic. Which isn’t that great when you’re a web designer. So my new office, as it were, is one of the local coffee shops.

Paul: In order to get ’round the problem. So we’ve got loads of people listening to this show that either are web designer’s in an agency of some description or in house designers somewhere or alternatively people maybe not working in web design at all at the moment but want to. So we get lots of questions about freelancing and I thought okay let’s get somebody on the show that’s literally just gone through this process. And kind of ask you a few questions about you’re experiences a
nd how its gone. I guess the biggest one and the one that we probably should start with is overcoming that kind of fear factor of giving up a regular income. How did you kind of convince yourself that this was a good idea?

Elliot: I’d been thinking about going freelance for a while. Not to swat at Carsonified, but sort of the entire time I’ve been working at a web designer. I started off doing freelance things in University. So like doing site for things like friends bands and things like that. I mean I carried on doing that as soon as I started working in the industry and have carried on the last 4 years or so doing bits and bobs, evenings and weekends. Although I’ve only just started doing it fulltime I’ve got quite a bit of experience doing it on a part-time basis which obviously is a little less scary, when you’re making. I think the other thing as well at Carsonified most days of the week I actually worked from home, in London, so that was a really good testing ground to see if I had the self discipline to work by myself all day and stay motivated and stuff like that. So because of that it was slightly less scary making the actual jump.

Paul: So would you recommend that to somebody who is considering going freelance? To kind of build up some work on the side and also if possible to negotiate some home working to see how you get on with it?

Elliot: Yeah definitely. It’s something that’s not suited to everybody. Obviously there’s the appeal, everybody thinks WOW I’d love to work from home, loads of freedom fantastic. But, people I have spoken to have said I find it very very hard to get motivated when I’m at home. It’s easy to get distracted. The other thing as well is it can often be quite lonely. Jonathan Snook recently wrote a post about this on his site. He was disussing these ways of battling freelance loneliness. You know going to the local coffee shop for instance. Which is another thing to bear in mind when you’re doing it. There’s the option of working entirely by yourself. Working in the public, like the coffee shop. Working in a shared working environment. I’m still undecided really. I get on fine working by myself, but when I get back to the UK we’re not sure exactly where we’re gonna go. Depending on where we do go I may look into some kind of co-working space or whatever. There’s a possibility that we might go Oxford way, if so I may shack up with the old Rissington chaps, which would be lovely.

Paul: That would be superb.

Elliot: Yeah.

Paul: Well obviously no it wouldn’t because they’re nothing but rude and obnoxious to me so I’m in no way supporting that decision.

Elliot: And they’re a rival podcast.

Paul: Well it’s not so much the rival podcast it’s the fact that they’re just so jealous and envious of my huge success (Paul laugh maniacally).

Elliot: Well I hear you’re the one who gets noticed on the tube anyway.

Paul: Well yes this is true. Okay moving back to the interview and on with the questions. Cashflow is obviously something that always scares people. Not just when making the leap into freelance. How do you actually fund it starting off? You know in those first few weeks. How did you go about that? What was your solution to the problem?

Elliot: I’m not sure that my solution is the best one. People always say to make sure you have some money in the bank. You know enough to see you over for 2 or 3 months so that if it’s very slow starting off, if you’re not getting a lot of work in or if you are getting work in but clients are slow paying you’ve got a sort of fall back plan. I made sure I had a bit of money in the bank so that if it all went horrible wrong I’d still be able to survive. Luckily at the same time because we moved out of our flat and I am now living in Norway temporarily. Although Norway is horrendously expensive to anyone but Norwegians it’s actually cheaper working out here living here at the moment because of the reduced rent compared to what I was paying in London. So that was one factor that made it a little bit easier. The other thing is that I alread had a lot of work already booked in before going freelance. I think more than anything that’s the important thing when people make that jump, is having the work there. So rather than jumping and saying okay I work for myself now I better go get some work. To already have as much lined up as possible. Fortunately I am in a position where I had loads of stuff booked up a couple of months in advance. That was a good safety net. Obviously clients can be slow to pay so I always ask for 25% deposit before I start. That’s 25% based on the estimated amount of the project. But it’s a nice little safety net to have in there. It means you have a little bit of cash and if they decide that they want to be horrible at the end and not pay you’ve got a little bit of something to fall back on.

Paul: Sure. I mean it’s interesting that you said that you were fortunate enough to get some work lined up before you began. I mean the obvious question is how did you achieve that. You must have been marketing or been selling yourself in some way in order to attract that work.

Elliot: Selling myself. (laughs at Paul’s implied dirty joke)

Paul: Selling yourself in the nicest way.

Elliot: Yeah to some degree. I’ve been very very fortunate and I haven’t had to look for any work yet. So far people have got in contact with me so I haven’t had to go out there and kind of beg for clients or anything. Obviously Carsonified was quite high profile stuff. Prior to that when I worked in the music industry luckily I got work with some very high profile artists and bands so because of that and because I had those things in my portfolio that was part of the marketing. People see these kind of bigger bands in your portfolio. It definitly makes it easier because regardless of the work I think it kind of impresses people if they see a name that they recognize. In terms of marketing I guess this time last year, or I guess just over a year ago, the recent version of my site and things kind of took off from there really. I’ve put that on a load of CSS galleries which obviously helps because they get so much traffic. I think still sites like CSS Beauty and Web Designer Wall they’re still some of my biggest refers even now. So I think getting you’re site on there, getting people to look at it there that often has a snowball effect of having the other galleries picking it up and other sites and
things like that. So that obviously helps. In terms of the work for the next few months, I’m actually launching a new version of my site which will probably launch in a month or two’s time. And I’m gonna do the same things again. Put it on lots of gallery sites. Tell people about it. I think having a new site with an emphasis more on the work more than just being a blog that will hopefully help as well in the continuing marketing. Luckily enough, doing things like this even lets people hear about you some more and I guess the thing with marketing it’s just to get your name out there in which ever way you can. To get people hearing about your stuff.

Paul: So would you recommend, if someone’s talking about going freelance, say a new graduate that has just come out of university. Would you actually encourage them to try working for an agency where they can perhaps build up a portfolio of bigger clients before they go freelance? Or is there really no reason why they shouldn’t go freelance straight away.

Elliot: No. I would definitely encourage working for an agency or as an in house designer for some kind of company before hand. When I left university my flat mate and I were condsidering starting up a business and I was thinking about this this morning actually. If we’d have done that and we could have done it I guess and maybe done okay out of it but the first thing is. I don’t think I would have then got access to the kind of high profile clients that I have got through my previous work experience so in that sense I probably would have still be struggling now to market myself and convince people I can work with big brands. The main thing that I, you know the wealth of experience that working in an agency will give you is definitely something not to be under estimated. Dealing with clients. Dealing with rediculous deadlines. Obviously these are things that your pick up being freelance as well but being inside an agency and working with other people and getting a feel for the industry that you are in, the working environment. The requirements. Things like that. All of that stuff. I am very grateful that I decided not to start my own business that early on and actually went to a real job as it were. So I would definitely recommend that people do it, that graduates do that. As well I thinks it’s just you learn a lot about who you are as a designer and where your strengths are. I mean when I was at Young life I was completely Flash. 100%. I barely new HTML at all when I started there because I was so interested in Flash. Obviously now that has completely changed. Now its much more, well completely standards based. That’s sort of where I specialize in now. If I hadn’t gone through that process I may not have realized that.

Paul: Okay so we’ve done the kind of exciting stuff of kind of talking about setting up, or deciding to take the leap and go freelance. We talked where the work comes from. What about all the boring stuff? What was your experience of the admin of going freelance? Setting up all the kind of legal requirements. What did you do there? You kind of muddle your way through that yourself? Did you get any help? How did you approach it? What were the big problems?

Elliot: A bit of muddling through. A bit of asking around. There’s still some things that I have yet to do. For instance I haven’t yet got a business bank account. Which I’m waiting till I get back to the UK. Mainly because I was setting this up at the time of moving, leaving the country. It was very very complicated. As I’m not getting paid immediately for some of the projects I am doing its fine to wait till July and set it all up then. You know what a nightmare UK banks can be anyway. So still waiting about that. One of the first things I did was get an accountant. I was quite nervous about this because one of the things that really dawned on me was how do you…First of all how do you find an accountant and then once you’ve found one how do you say "Ah they’re good.": You know, if you’re choosing a designer you can look at there work and it’s very easy to see what their like. What their styles like. What they’ve done. This kind of thing. With an accountant I think it’s really hard. You can only seem to go mainly on recommendations from friends and colleagues. Luckily I’ve had some dealings before with Nick who is Carsonified’s accountant and really nice guy and I figured well I’ll get a consult with him and if he fancies doing accounting for myself. I had a quick meeting with him. He was very friendly. I got to ask him all sorts of mundane tax questions which he answered for me. That was one of the first things I got sorted. So that was a big weight off my mind. To have someone who could look after all that stuff. Everybody has always said to me, in fact I think you may have said to me yourself, a good accountant will always pay for themselves and then some. In the time they save you. In the expertise. When the taxes come and all this kind of thing. So everybody recommended to me that I get an accountant from the first thigns and I guess that I would even in these early days say the same thing to anyone else thinking about that. In terms of paper work and stuff like that, one of the things I really really underestimated, although luckily I found out the truth in the first week, is how long it would take to manage my calendar. I just thought yeah I’ll book things and it will be fine. What I didn’t realize was that when projects need to shift round or you had to allocate couple of extra days for this. This had to move. The scheduling was actually, not a nightmare, but something you really have to make time for. The tricky thing is at the end of that you have nothing to show. There’s no realy paperwork to go with it. It’s an output as such. It’s easy to leave it off for, to neglect it. But obviously it’s something that needs to happen. In terms of paper work I made sure I designed myself a nice little invoice template so at least doing paper work isn’t as mundane as it has to be. Caus I got some nice little pretty pictures on my invoices. Doing that kind of stuff and obviously kind of chasing people to pay the money. Although actually so far everyone’s been very good. I haven’t got anything to complain about.

Paul: It’s interesting isn’t it. That when you kind of sit down and think about going freelance and whatever else you do the calculations if I charged this per hour and you know I work 40 hours per week WOW I’m gonna be so rich. But very quickly you realize that well actually half of my time is probably taken up with non-paid work like managing your calendar, project management, invoicing. Dealing with the accountant and all of the that kind of stuff. It’s easy to forget that side of things. What about the business plan? Did you put any kind of business plan together or did you just go oh sod it I’m just going to do it?

Elliot: I said oh sod it I’m gonna do it. For the kind of stuff that I’m doing I didn’t see the point in doing a business plan. Because I know exactly what I’m doing which is providing a design service to clients on a project by project basis. I don’t have any plans to grow the company as it were. This may change over time of course but at the moment I have not interest in turning it into an agency and employing other people. Obviously there are some financial benefits to doing that. A lot of people will tell you it’s the best thing to do and you gradually get less involved with the day to day stuff and are just running the company but to be honest at least w
here I am now I wouldn’t be happy doing that. Because I actually love doing the day to day, the hands on design work and if I wasn’t doing that I wouldn’t be happy and that’s the reason I’m doing this anyway. So at the moment there’s no, it’s not like I’m a start up and I have a product and I need to predict sales and growth in that way. I think just being a designer we’ve got it a bit easier. So maybe I’m going about it the wrong way. Maybe I’m being unprofessional but this if fine for me.

Paul: No I have to say I would agree. You know it’s not like you’ve got big costs going out. You don’t have offices that have to be paid for on a monthly basis. You don’t have staff that you have to worry about. And pensions for those staff. You know there’s no major complexity to it that kind of demands a business plan. I mean ultimately you just need to know that you are earning enough each month to pay your accountant and feed yourself.

Elliot: That’s right yeah exactly. I think as long as you can go into freelance work and aim to earn at least as much as you were earning in your day job then I don’t think you’re going to run into too much trouble. As you say it’s probably safe to assume that half of your week you’re not actually going to be getting paid for because technically you wont be doing paid work like you say you’ll be doing the invoicing, chasing up things like this. So if you say you’re only working 2.5 days a week I think it’s a fairly safe bet to go on. If you can say that in those 2.5 days you’re going to earn at least as much as you were earning in a week when you were in fulltime employment then you’re not going to go too far wrong. Obviously a lot of what we aim to do and what is happening with me luckily at the moment is earning more than what I was earning in fulltime employment. So in that respect it’s yeah it’s good and I don’t think there too much to worry about there. As I said before luckily we as web designers have very very few overheads. Like you say if you’re renting an office that’s one thing and obviously there’s the accountant but actually accountants are very very reasonably priced anyway and I’m paying it all in a lump sum just to get it out there and get it done. Luckily there isn’t too much that we have to spend much money on.

Paul: Okay last question and to wrap up with. How far in, sorry when did you set up again? I’m trying to think how long you’ve been doing this now?

Elliot: Doing it fulltime has been since around the 20th of April.

Paul: So it’s still very early days. You’re just over a month in. So so far pros and cons of being you’re own boss? What things have you liked? What things have you not liked?

Elliot: The main pro and so far they’re living up to what I expected the pros and cons to be. Some of the main pros are the freedom of being you’re own boss. Obviously to an extent you’re clients are your bosses but just having the freedom to decide when you think this deadline should be. Doing the work when you like to where you would like to is a really great thing. When somebody comes to you to estimate a project being able to be generous enough with the hours to know that you can really spend a decent amount of time on the project. Not to a degree where you’re kind of taking the mickey as it were. But knowing that you can really give some really good time to a project instead of it being rushed. Also picking and choosing the clients. If you have got a fairly steady amount of work coming in and you can afford to say no to some things then that’s great cause it means that you can just work on a project that you personally find interesting. As I said before the financial benefits are working out well so far. That is a game when anyone goes freelance as well as freedom there is the monetary benefite as well. I can’t express enough this sense of freedom. Just having a chat with you this morning and then toodling off into town later this morning to go and do some work from a coffee shop and I’ll probably work a bit later this evening because we’ve had this chat this morning but you know having the freedom to do that and not having to worry about needing to stick to normal working hours and things like that. Not that employers aren’t flexible to these things but knowing that you’re the only person you have to please that does make a massive difference.

Paul: So what about cons? Those were all pros.

Elliot: They are aren’t they.

Paul: You’re still in the honeymoon period aren’t you?

Elliot: Yeah I agree. Give me a year and I’ll be all disheveled and angry. The only con I’ll say is that it can be a bit lonely sometimes. I mean I guess it’s hard to judge cause I’m in a foreign country where I only know a few people anyway. There way a while where I was working from my room here when the connection was a bit more reliable and that was great but I found I’m actually much happier being around more people now. Seeing more people during the day. I think I’m fairly well self disciplined like I said before cause I’ve had the experience of working from home before for quite a while but even so I found that I sometimes get a little bit distracted when I’m at home. You know go for a little wander. When you’re sitting down maybe in a coffee shop in public it’s more like this working environment, you can focus a bit more. I think even if you work from home most of the time maybe spend one day a week heading out and working in a public space just to see how it compares. I definitely find my concentration is a little bit better when I’m in somewhere like that.

Paul: That’s really interesting because that’s something I’ve never tried doing. You know I work from home the vast majority of my week and I’ve never kind of gone and sat in a coffee shop. Mainly because I don’t drink coffee but also because, I don’t know its just never occured to me. I will go and try it today. There we go. We’ve got a little coffee shop around the corner I really like so I will go and sit in there and do some work for a while.

Elliot: Of course as soon as you get there there will be really loud music and you won’t be able to concentrate.

Paul: Probably. So Elliot you’ve definitely taught me something. I like that idea. What has that never occurred to me? Never even thought about doing that.

Elliot: Of course I have only been doing it for a month so I could be completely and absolutely wrong.

Paul: Yeah it could be a nightmare couldn’t it. But that’s why I wanted to get you on really. I wanted to get you on at the early outset of you doing this just to kind of give that unique perspective of somebody who’s just gone through the process. The stuff that you’ve covered has been great. I really apre
ciate the time that you’ve taken to come on. We’ll get you back on again in the future when you’re a year down the line and see how you feel then.

Elliot: Yes that would be a good test.

Paul: It would be.

Elliot: Something to aim towards perhaps?

Paul: Yeah. So you’ve got to stay as a freelancer for at least a year otherwise it would be very inconvenient. Alright good to have you on the show Elliot and we will talk to you again soon.

Thanks to Curtis McHale for transcribing this interview.

Back to top

Listeners feedback:

Wayne Henderson from Southern California has sent in an audio file for this week’s show consisting of two separate but equally good questions.

Hello Paul, Hello Marcus this is Wayne from Wayne Henderson voiceovers and as you can tell from my voice I’m obviously from Bristol, no wait actually Southern California and I have two question I would love to hear your comments and thoughts on. One, with the iPhone really taking off, gaining in popularity and other smart phones basically copying the iPhone, do you think it’s still even necessary to have the .mobi and designing for .mobi and my other question that I’d love to hear your thoughts on is kind of on the fringe of web design, I was wondering with WordPress being so popular, how do you feel about someone maybe being a WordPress design and installation expert? Taking the themes, customising them tweaking some things, changing some code and then kind of really helping other people to implement WordPress into their websites? Let me know what you think about that? Thanks guys.

Let me address each in turn.

The .mobi domain name

There are two issues here which I would like to cover separately. First, let me look at this issue of whether we need to be designing for mobile devices at all. My answer is a categoric yes. No matter how great mobile browsers become, it is always going to be a different experience to surfing the web on a computer. Let me give you just three differences…

  • Size – Mobile devices have smaller screens than a PC. No matter how clever the mobile browser is a considerable amount of zooming and panning will be required to view a conventional website.
  • Controls – Not all mobile devices come with a QWERTY keyboard and none come with a traditional mouse. This can create problems on some sites, especially those with mouse over effects.
  • Context – Probably the biggest reason for creating a mobile version of a site is context. Mobile devices are not used sitting at a desk. They are normally used on the go. This affects the type of information being requested as well as the level of concentration being given to the task. When it comes to the mobile web context is king.
  • It is also worth mentioning that we are a long way from everybody having a smart phone. The majority of phones still provide a terrible web experience.

    It is harder to give a definitive answer about the .mobi domain. Unless your website is primarily mobile focused I think it is probably unnecessary. Most sites seem to use a sub domain rather than a seperate extension. For example twitter uses:

    http://m.twitter.com rather than http://twitter.mobi.

    I have even found myself guessing this format. I certainly never think of typing .mobi. Also on a purely financial note, you have to pay for .mobi while a sub domain is free.

    That said, I don’t have anything against .mobi. It is certainly a valid choice.

    Becoming a WordPress specialist

    Wayne’s second question was about becoming a WordPress specialist. It is good idea for a couple of reasons.

    First, as he point out, WordPress is hugely popular and there is certainly a market out there. It is also a well established product that has been around for a while and isn’t about to disappear. Having a clearly defined market is always a good strategy.

    Second, I am a great believer in specialising. With so many web designers out there you need to do something in order to stand out from the crowd. Specialising in WordPress is a good step in the right direction.

    However, I would argue that you could specialise further. You may choose to specialise in setting up WordPress for a particular sector or by using it in a particular way.

    Although this approach feels counter intuitive as you are narrowing the number of people who can hire you, it actually makes good business sense. By specialising you become the best in your limited field and so people are more likely to select you over your competitors.

    Back to top

    124. HTML 5

    In this weeks show we explore how to create better online surveys and Lachlan Hunt joins us to discuss HTML5

    Download this show.

    Launch our podcast player

    Watch the behind the scenes video (Part 1)

    Watch the behind the scenes video (Part 2)

    News and events

    Removing Microformats

    The story that has generated the most email this week is the BBC announcement that they will be dropping the hCalendar Microformat. This decisions comes because of long standing accessibility concerns over the machine readable content within that particular Microformat. The problem is that code meant to be used programatically is potentially read out to screen reader users and displayed as meaningless tooltips to sighted users.

    The decision of the BBC to adopt Microformats was a huge boost to the movement. Equally the rejection the hCalendar is a blow. However, it is important not to get this out of proportion. Remember, they are only rejecting a single Microformat not the whole approach.

    The other thing to consider is that the BBC is a public service organisation with an incredibly high obligation to ensure maximum accessibility. In many ways they are in a unique position. Although it maybe appropriate for your organisation to pull hCalendars too, it should not be based on the decision of the BBC.

    My advice is as follows. If you already have hCalendar information on your site I would probably leave it (dependant on your exact circumstances). The Microformat community is working on a solution and I would implement that rather than removing hCalendar entirely. If however, you are not yet using hCalendar then I suggest you hold off until an updated specification is released.

    Becoming employable

    In the past we have spoken about becoming a professional web designer. I know that many people who listen to this show or read the blog are students. You are concerned that the skills you are being taught are out of date and will not improve your employment prospects. How then do you become a more employable web designer? What skills do you actually require?

    Andy Rutledge tackles this subject in his post "the employable web designer". Without a doubt it is the best post I have read on the subject of web design career development. I highly recommend you read it.

    The thing that impresses me is that it looks beyond the obvious design and technical skills required to be a web designer. It also tackles the business and communication skills too. He really drives home quite how wide an understand a good web designer has to have.

    My only criticism is that it could feel demoralising. You may read the list and think it is an unachievable aim. However, I don’t think that is the case. What Andy outlines is the optimal requirement of a web designer, rather than what is needed to get your first step on the ladder. I certainly did not have all of the attributes listed when I started.

    All we need now is a second post telling us how to gain the skills he lists.

    Better CSS font stacks

    David (a boagworld listener) sent in the next story. It covers a subject that I am currently still grappling with. It is a post about CSS font stacks.

    If you code in CSS you already know about font stacks. It is where you specify the fonts you wish to use. You can say for instance; use Helvetica and if that isn’t available use Arial. If that fails use a generic san-serif font.

    For many of us that is as far as our thinking goes. The majority of us use very basic font stacks that are uninspiring to the point of being insipid.

    I love this post because it lays out a very clear methodology for improving your font stacks. It also goes on to provide an impressive selection of font stacks organised into heading and body fonts, allowing you to instantly improve your site

    If your site is looking tired and boring, but you don’t have the time to redesign, consider adding a new font stack. Such a simple change could make a real difference.

    Do flexible layouts still matter?

    Our last story of the day is a post from Smashing Magazine entitled Flexible Layouts: Challenge For The Future. To be honest I was ensure whether to include this post or not. On one hand it covers an issue many people have been asking me about. On the other, its arguments seem stretched and the whole thing ends with an advert for a CSS framework.

    The article tackles zooming and fluid design. The new generation of web browsers – Firefox 3, Opera 9.5 and Internet Explorer 7 – provide full screen zooming. This gives users has the ability to enlarge the whole interface, not just text. Some are arguing that this is the end of fluid layout because zooming tackles many of the accessibility concerns associated with fixed width sites. However, this article strongly disagrees.

    The author argues that flexible designs are better for mobile devices, that pixels are becoming less important and that the user shouldn’t be required to customise a site to their needs (it should be done automatically). Although his arguments are weak at times and he uses some fairly dodgy comparisons I do generally agree with him. I see no reason to think fluid design will go away anytime soon.

    That said, I am in no doubt that page zoom does reduce the number of occasions fluid sites are necessary. Ultimately there is no right or wrong answer. It is entirely based on the situation. For example Boagworld, Headscape and The Website Owners Manual all use fixed designs. However, many of my client websites do not. That decision is based on numerous factors such as device, user base and business priorities.

    Back to top

    Feature: Creating a Better Survey

    The web allows us to interact with our customers more than any other medium. One of the tools in our arsenal is the online survey. However, these are often badly implemented. In this weeks feature we find out how we make your surveys more effective?

    Back to top

    Interview: Lachlan Hunt on HTML 5

    Paul: Joining me today is Lachlan Hunt; It’s good to have you on the show

    Lachlan: Thank You Very much

    Paul: It’s great to have you here I really appreciate you taking the time to join us, now the reason that we asked Lachlan on the show is because he posted a brilliant article on the A List Apart site about the subject of HTML 5 and I have been keen to look at this subject for a while partly because of my own ignorance to be honest, um, so lets kinda kick off by if you could perhaps tell us a little bit about where HTML 5 is at the moment I know that kinda getting a language to a release like this finalized is a massive process so can you tell us where we are at in that process.

    Lachlan: OK, it’s, um, a really an ongoing process with browsers implementing different parts of it progressively so it’s not, you know, going to be all implemented at once and ready to go in one, er the next few browser implementations. We have some features implemented already and shipping in browsers other features which are being worked on at the moment and other are planned for, but still a few years of yet. But it is gradually getting there. We are trying to focus on what authors really need, instead of trying to do it all at once

    Paul:Ahh, okay so that a slightly different approach that we have seen in the past, the idea of an incremental roll out. So how does that work from the W3C’s point of view are they doing modular releases is that how it works

    Lachlan: Um, at the moment no, but the way the spec is structured each part of the spec, what I am trying to indicate is the stability of each section of the spec as we go along. SO thing like the Canvas API which has been in browsers for a few years now, it should be getting to IE very soon. That section is pretty stable, Other things for example "data grid" or a lot of the web forms are not widely implemented.

    Paul: OK so that quite an interesting approach to the problem I guess from what you were saying earlier to me there is a community base element people can get involved and contribute. How is that all working then?

    Lachlan: Well we’ve got a REALLY REALLY open mailing list on whatwg.org anyone can subscribe at the moment there wa about 800 subscribers on that list anyone is free to subscribe and post feedback about the spec if they want to, but that’s not for everyone obviously because it’s quite a high volume mailing list and not everyone can keep up with that. We have also got an open blog on http://blog.whatwg.org/ where absolute anyone who wants to can write an article submit it and have it published. Anything to do with what the WHATWG are about, HTML5 and anything related to it at all. It’s also a good way to let the community know what’s going on by publishing articles also to find out what people think because they keep posting comments on there as well. We have also got an open forum which is at http://forums.whatwg.org/ again anyone can subscribe to that, am sue you know how a forum works

    Paul: So there are lots of different ways to be involved, I have to confess things like that can feel quite intimidating to get involved in. You’re kinda worried about putting your foot in it, and saying something really dumb, is there kind of Opportunities to lurk and are people fairly friendly over there? I guess you are going to say yes aren’t you

    Lachlan: Yeah everyone is friendly over there,they are nice sort of area to go to aim at web developers and people who aren’t quite as technical with the spec areas and stuff. You can ask any question you want and just learn whatever you want as well. Their is also the w3c side of it as well. Which is strictly related but is more focused on the actual technical side and issues so yeah. The What WG and the W3C are both publishing exactly the same spec and they both work on it together and feedback can be sent to either place, it will all be taken into account

    Paul: Oooh, that’s useful. So looking at kinda the state of affairs at the moment with HTML 5, reading through your article there was some things in there that really sounded quite exciting, there was this thing about structure and some kind of additional elements that could be used, which provide a little bit more structure, headers and footers and things like that can you tell us a little about that, and maybe explain a bit of what those do.

    Lachlan: Well at the beginning of the work back in 2004 / 2005 we basically took a look at what a lot of site where doing and we noticed that they were all using a similar structure. All the blog’s were using headers and footer and generally things like column layouts to show articles and stuff like that. So we wanted some semantic elements to come and cover each of those features that people actually used, solving the real problems that they were actually focusing on. instead of having to do "Div" elements for everything, which is what people do we give them an actual element and that also has a side effect of increasing accessibility because an element with specific semantics can be hooked into the accessibility API’s and help someone with assistive technology navigate the document a bit easier.

    Paul: Okay, because I mean reaction just glancing at it quickly and not thinking about it was what’s wrong with the div with an ID Equals footer, or an ID equal header or whatever but like you say, as you think about it more it become obvious that if those are considered distant elements, one person might call it a footer another might call it "the bottom" or whatever else if they have consistent semantic names then you know you can have screen readers and stuff jumping to the footer or avoiding / not reading the footer depending on what is set in their preferences, is that what you are thinking?

    Lachlan: Yeah that sort of it, it’s also helping the authoring side too, as there are lots of Div elements in source code which makes it easier to read if you have got elements with different names

    Paul: yeah very much so, I spend half my life trying to which closing Div relates to which elements, that very exciting. Obviously the other big area you talk about in your A List Apart article is the audio visual elements and there is a lot that’s happening in there. It’s always had the vague feeling that HTML has never had any kind of, erm, erm, the audio visual elements have always been and after thought, what happing in HTML 5 in regards to that?

    Lachlan: Well we have added the video and audio elements to the spec to try and allow video to be added directly to HTML, at the moment we have sites like youtube revel and all the other video site out there using flash to embed video and using the flash to give customized controls and stuff to the user, it’s really awkward, depending on proprietor technology, so we want to open that up a bit give a very very easy to use Javascript API to hook into and promote custom controls and all sorts of cool stuff with videos and of course audio as well. We have got experimental implementations of that in opera and in webkit. I have heard mozilla is considering implementing it as as it is now I am not sure of the status of their implementation. However the one big problem with video and audio at the moment is with Codecs, there are a whole load of software patent issues going around and we are not quite sure what codec we are going to standardize upon or if we are going o be able to get common codec support among the browsers, That’s an open issue but I am no lawyer to I cannot really go into that, so the ultimate aim is that you will be able to embed your movie file, your avid file or whatever directly into the HTML without the need to kinda pump it through something like flash

    Paul: cool

    Lachlan: that make it a whole lot easier to the authors hopefully

    Paul: Yeah, you kind of, to some extent got to ask the question why do we need that when we have got a solution like flash

    Lachlan: Well because Flash is a proprietary technology it’s managed only buy Adobe , they control it, they control the changes and what does and what does not go into future versions of it, however the thing with HTML is that it is an open standard platform which can be implemented by anyone and maintain interoperability between those venders.

    Paul: It’s intrusting isn’t it that adobe has just announced they are opening up the flash format, do you wonder if that’s a reaction to some of the stuff you have been doing to kind of force their hand if they want to stay ahead o the game and dominant they need to be open

    Lachlan: Yeah I don’t know how that going to work though, it depends, if they open the format up and actually make it an open development process where anyone can contribute to the future version and features which go into it or whether they just write the specs and tell other people to implement based on what they write, so I don’t know much about that. It will be interesting to see how it goes.

    Paul: Very interesting, Now the next thing you cover in the A List Apart article is something which you titled "Document Representation" now I have to confess this confused me, so do you want to explain a little about what you meant by document representation. What you were getting at there.

    Lachlan: Yeah, well in the past we have had HTM, and XHTML with two separate specs, HTML 4.1 which a lot of people use and XHTML 1.0 which a whole lot of other people use one of them is based on XML and is really really strict syntax that requires well formedness and is supposed to when you serve it correctly, if you make a well formedness error the browser is suppose to stop processing and throw and error message saying "Sorry I cannot handle this" where as HTML is more sorta loose and convenient in its error handling, it’s the traditional inspired by SGML, although really only syntactically similar these day but the error handling is a bit more lenient and you can get away with making a lot more errors. So instead of having two distinct language which you can use we have combined them into a single language which share the same elements and attributes and everything and as much a possible and when the browser reads those file it produces and internal representation called the DOM, a lot of javascript user will be familiar with the DOM as they work with that with their scripts to modify the document through the DOM. That’s an internal representation which is mapped, the DOM which is sort of mapped to by the syntax’s, the HTML and the XHTML syntax’s so it give the authors a choice of which syntax they want to use

    Paul: So why do we need that choice what is the key difference, I mean you talk about HTML being more lenient are there other reason for choosing one over the other.

    Lachlan: erm, well I don’t really know. However a lot of authors do prefer the strict syntax of XHTML like to make sure they quote the attributes and encode all their ampersands properly. They like to know they have done everything perfectly as with HTML a lot of people do make mistakes inadvertently and don’t want end users to see big error messages, so it’s a bit more user friendly if some little small error slips though their CMS and causes problems.

    Paul: So it’s basically come down to personal preference then

    Lachlan: yeah

    Paul: Okay, that’s fair enough, so both, we are going to see equal support for both of them in browser manufacturers are we

    Lachlan: Well that’s the hope we have said that we have got good support in most browsers, it’s just IE which is lagging behind

    Paul: (Sarcasm) Oh that’s a suprise (Laughs) Okay are there ant other things in HTML 5 that might be of interest to those listening to the show which we should be paying attention to?

    Lachlan: erm, well, as I said before we got canvas implemented in most browsers

    Paul: So tell us, what’s canvas

    Lachlan: It’s a 2D drawing API that you can use javascript to draw dynamic image with. People have used it to implement things like graphs that are built using tables of data which are on the page. People have also gone and done 3D games with it which is really cool

    Paul: Wow, that incredible. I mean that sounds very similar to SVG is it a different thing.

    Lachlan: It is different SVG is entirely done with XML, you modify that with script via the DOM by changing elements and attributes and stuff or with CSS. Canvas is an immediate mode graphics API where it is more like a bitmap sort of thing where as SVG is vector graphics, and canvas is bit map. They can both do images, the same sort of images, if you like but we have both vector images and bitmap images, so they both can serve different purposes.

    Paul: Right, I see. Okay that’s good, so okay the big question, kind of the final question everyone is going to have is when can they start doing some of the cool stuff. Now you said right at the beginning this is going to be modular support based thing so we are going to be able to see some of these elements before others. You know some parts before other, so what can we do now, what are we going to be able to do soon give us an idea of where things are at.

    Lachlan: erm, okay let’s see I think what’s being implemented at the moment. Cross document messaging is being implemented at the moment, that’s an API that lets you send message between documents with javascript without worrying about cross domain security issues,

    Paul: Oooo…. that’s good.

    Lachlan: Yeah it’s a really, really handy API that been implemented in opera for a while and I heard mozilla is implementing it soonish and should be in firefox 3 thought I am not entirely sure about that. That should be very very soon, erm, what else have we got, we got…. hmmm, this is tough

    Paul: Sorry put you on the spot there (laughs) is that last one supported in webkit?

    Lachlan: erm, I am not sure I would have to double cheek that

    Paul: Okay that’s fair enough

    Lachlan: yeah,

    Paul: Okay so any other elements? Things like the structural changes are any of those being supported yet?

    Lachlan: Not quite yet, erm as far as I know support for those requires changed to the phaser, and to implment the new pharsing algorithm in HTML 5, as far as I know browsers are not yet focusing on doing that because..

    Paul: Okay that’s a shame, because that one I liked the sound of, what about the audio and the visual stuff?

    Lachlan: We have experimental implementations in opera which supports OGG video, though it’s not really in a public build version yet, there is a experimental version which was released last year sometime. And webkit also has support in their nightly builds, which supports mpeg 4 unfortunate they don’t support the same codec but you can experiment with them.

    Paul: (laughs) That would be far to easy

    Lachlan: yes I know

    Paul: So it’s all progressing slowly but, erm you know obviously the one name which has been very absent in the list you keep mentioning is Internet Explorer, so I expect we can probably see some slower movement there. We are talking you know in the years before this all becomes mainstream and we can actually start using it. Is that a fair comment to make?

    Lachlan: Yes it will be several years before the entire spec is finished, we are hoping that it can get finished sooner rather than later but realistically it’s going to be quite a while yet, But it is important to know people will be able to use theses features before the spec is finished; so it depends on when browsers start supporting features authors can go ahead and use it.

    Paul: That’s great and real exciting that you can start to do that sort of stuff. you know that we don’t need to wait for it all to be set in stone before moving forward. And it’s always exciting as well to see the future, know what coming up and be aware of everything. so is there somewhere people can go a websites address and keep an eye on what is currently supported by browsers.

    Lachlan: Not at the moment but that’s something worth looking into, I think there is a wiki on the Working Group site, it does have some implementations listed but I am not sure how up to date. But it’s something I think we should look into

    Paul: Yeah it would be great to have some kind of single page which says what features are supported by each browser that you could check back every few months see what’s going, there you go there is my contribution to the working group (laughs). Alright it was really good to speak to you and thank you so much for your time, What we will do is to get you back in further down the line and have a check to see where we have currently got to in the development of HTML 5, Thank you so much for your time.

    Thanks to Jamie Knight for transcribing this interview.

    Back to top

    Listeners feedback:

    Staying healthy on the web

    Evan writes: My question to you is not entirely related to design, development or management but rather about health in the web industry. This is very important but we often seem to forget about it. We spend hours upon hours at our desks but are unaware of the damage this could be having on our health. Eyeballs almost touching the screen, typing without a break, sitting incorrectly – just a few examples. So, what do you do to maintain good health while working?

    I am possibly the worst person in the world to answer this question. I consistently abuse my body while at work. In fact a physiotherapist friend said I had the worse posture in front of a computer she had ever encountered.

    However, there is possibly something to learn from my terrible example. Let’s look at what I do and compare that to best practice.

    • I sit with my leg tucked up under me – Posture while working is important. Both feet should be flat on the floor, rest your wrists on the desktop in front of your keyboard and make sure your monitor is at eye level (in other words avoid laptop screens).
    • I stoically refuse to use anything other than my preferred mouse and keyboard – Using the same keyboard and mouse in the same position day after day can cause damage. Try using a variety of different hardware and positions. Push your mouse and keyboard nearer or further from you to change the position of your arms.
    • I believe that an individual pixel should fill my field of view - Leaning too close to your monitor is a particular weakness of designers who want to position that pixel ‘just so’. This not only damages your eyes but also your back. When you learn forward your neck and back support the weight of your head. When sat upright, the head is supported by a straight spine and therefore your chair bears the weight.

    On the upside I do take regular breaks. I would like to claim this is because of my health. However, I think it has more to do with my short attention span. I get easily distracted and wander off to do something more interesting.

    From Photoshop to HTML

    I see a lot of PSD 2 HTML services on the internet but never tried any out. It seems to be an great option for an designer for making an quick website, to edit later myself.

    What is the opinion of you guys? Love to hear you discuss this topic in one the next podcasts.

    An long time listener from Holland.

    I have to confess to being a snob over these services. Until recently I have always doubted the quality of the code but after seeing some recent examples I have begun to change my mind.

    We are even considering giving them a try at Headscape, just to see what happens. Certainly from an economic point of view they make sense especially if you have more work than you can handle. That said, I do have three concerns.

    First, results may vary. Without a personal recommendation it could be hard to find a provider who can produce the quality you require. Anybody can convert a photoshop document into HTML. However, it is much harder to do so using techniques like microformats, semantic markup and accessibility. Also, just because the quality was good once, does not mean it will be so again. As the good providers get busy it can lead to a decline in quality.

    Second, people code in different ways. Unless careful attention is given to commenting, it is hard to pick up somebody elses markup. This is fine for relatively static sites where only small changes are required. However for projects where change happens regularly as the site evolves, it is more important that the markup is tailored to your style of coding.

    My final concern is that this could lead to designers not learning HTML. As I have said before on the show, I believe all designers should be able to code themselves. You need to understand how the web works and markup is apart of that. Also, if you cannot code how can you judge the quality of the markup you receive?

    Back to top

    123. Plight

    In this weeks show we review Textmate and the Top 5 Tips for Web Designers and we discuss the plight of in-house designers.

    Play

    Download this show.

    Launch our podcast player

    A quick request. We are really in need of some more transcribers to help with the interviews we do. The team we have are doing an amazing job but it would be great to spread the load.

    If you feel you could help once in a while please drop an email to Ryan our producer and he will add you to the list.

    News and events

    SPAM meltdown

    It is always with fear and trepidation that I mention HTML email. It inevitably leads to a torrent of comments ‘educating’ me about the evils of HTML in email, and that we should only use plain text.

    Although personally I wish HTML email was never invented and try to limit its use, I do accept it is here to stay. Despite its many drawbacks it is statistically more effective than plain text from a marketing perspective.

    You will be hard pushed to pursued a client to forgo HTML. Inevitably we will have to produce HTML templates occassionally. Of course, being conscientious, when we do produce HTML emails we want to ensure they look great and are well coded. This leads me to a couple of stories worth mentioning.

    The first is that Patrick McNeil (of Design Meltdown fame) has launched a new site called Spam Meltdown. The site showcases examples of great email design in much the same way as Design Meltdown does with websites. Patrick has done an amazing job on this site and he has my sympathy because he is subscribed to over 1000 mailing lists! The designs he showcases are organised by style, colour, industry and topic. As with design meltdown this categorisation approach works really well. You can quickly find inspiration by looking at categories that are relevant to your project.

    The second news item worth mentioning is that Campaign Monitor have updated their chart for CSS support in email clients. Campaign Monitor is a service which allows you to send HTML newsletters, but they do a lot more than just take your money. They are actively involved in improving standards support among email clients through the email standards project. Next time you are trying to produce an HTML email template check out their CSS support grid as it will clearly show you whether a particular CSS property is supported.

    Form Analytics

    While I am on the subject of cool services like Campaign Monitor, I also want to mention Clicktale. Clicktale is a service that allows you to track users as they move about your site and even anonymously record their actions. The last time I mentioned them this disturbed many people who saw it as an invasion of privacy. However, I see it as a valuable tool for learning about user interaction and improve site usability.

    If you share my view, then you maybe interested in a new service they are starting to offer. You can now not only track users as they click around your website, you can also watch how they interact with forms.

    In addition to video recording, the new form analytics service also provides three invaluable reports…

    • The time report – This shows how long users spent completing each field.
    • The blank report – This provides information on fields that have been left blank on submission.
    • The refill report – Which highlight fields that have been completed incorrectly.

    If you run a site that requires users to complete long or complex forms then you will see the benefit of this service. On a high trafficked ecommerce site this would be invaluable, substantially reducing the number of users dropping out at checkout.

    Art direction hits the blog

    This week has seen the launch of Jason Santa Maria’s new personal website. For those of you who do not know, Jason is the creative director at Happy Cog (Zeldman’s company).

    Normally, I would not mention the launch of a new personal website. However, Jason has done something very interesting. His new design is well executed but plain. It certainly is not as inspiring as his other work. The reason for this simple approach is that it is a framework upon which he will build.

    The idea is that each of his blog posts will have a custom design to accompany it. The design will therefore reflect the content. In effect he is bring art direction to his blog. This is a bold experiment and something that Zeldman has written about before.

    Although I am fully behind the idea of bringing content and design closer together, I do have some reservations. First, there is a possibility that the constantly changing design could make navigation around the site confusing. Fortunately from what I have seen so far that will not be the case. Jason has been careful to ensure key navigational elements remain in a consistent location and have similar styling wherever you are in the site. However, if other designers were to adopt this approach would they be so careful?

    My second concern is a purely practical one. If each article not only needs writing but also designing, will that reduce the amount Jason posts? In other words is a blog really the right place for this type of art direction?

    However, despite these reservations I am really pleased Jason is trying this approach. A personal website should be the place to experiment and try new things. Too many blogs (including my own) are cookie cutter solutions with some pretty graphics slapped on top. Its superb to see somebody doing something different.

    Prototyping

    My final news story of the week returns to a subject we have touched on recently. How do you wireframe a modern web application with its high level of interaction? In show 120 I mentioned that one approach might be to utilise flash. Today I want to point you at an article on the List Apart website, which suggests that building prototypes maybe better than struggling with wireframes.

    When I first saw this article I was hesitant. After all I can barely pursued my clients to pay for wireframes let alone a full blown prototype. However, the more I considered what was being suggest, the better the idea seemed.

    The majority of time spent getting an application working is spent on bug fixing, browser support and non-core functionality. The rough ‘outline’ of an application can come together very quickly. What is more, unlike wireframing, a prototype can be used as the basis for the final build. It does not get thrown away like a wireframe.

    The article also points out that prototypes are better for demonstrating difficult concepts to clients. They encourage earlier collaboration between designer and developer, and provide something substantially better to user test against.

    With almost every new website having some form of web application, we all need to consider how to better conceptualise their operation.

    Back to top

    Feature: The plight of the in-house designer

    The more organisations I work with the more sympathy I have for in-house designers and developers. It is a role that can be thankless and isolating. How then can their lives be made that much easier? We discuss this in this weeks feature.

    Back to top

    Reviews: Textmate and Top 5 Tips for Web Designers

    We have two reviews this week by our lucky competition winners Teifion Jordan and John McFarlane. Teifion and John will be going to this year’s dConstruct in Brighton.

    dConstruct is the affordable one day conference for people designing and building the latest generation of social web applications. Tickets cost £125 inc VAT and went on sale yesterday so be sure to check it out.

    Textmate by Teifion Jordan

    Hi, I am Teifion Jordan, I am reviewing a program created by someone far smarter than me. I am going to be looking at Textmate. Textmate is a Mac only application though there is a similar editor called eText Editor for Windows.

    First impressions of Textmate are that it’s pretty sparse, it looks like any other editor. I throw it a PHP file and it colours the text in, just like any other editor would. The colour scheme can be changed, both text and background colours can be altered, which is quite a neat touch. I can even make parts bold, italic and underlined which is a neat touch. It requires knowledge of Regular expressions but I can actually add in more rules for what to colour in! I used this to make variables used as array indexes appear differently, something I have wanted to do for some time. Not since I was a toddler, but definitely some time.

    But enough moaning about how the program itself is both smarter and better looking than me, I wanted to try some code. I found that if I typed "foreach" in a PHP block and hit tab, I was presented with an entire foreach loop. Closer inspection revealed that there were dozens of snippets and commands for PHP and dozens more for each of the many languages and some things that were not languages. With 5 minutes of effort I had setup Textmate to post my blog posts for me, I am now one step closer to not having to put any effort at all into blogging.

    It is possible to create your own snippets and not at all hard either. I now have one to tell me that I am beautiful and another to create a PostgreSQL query. I can also write new commands, I can write them in command line script, Python, Ruby and PHP to name a few. All of the commands are completely open sources, so you can see what’s already been done, and sort of plagiarise that sort of work for your own means. Except plagiarism is bad so don’t ever do it.

    I can edit columns, I can write new snippets, commands and even entire languages, I can Regex, I can manage projects with a hierarchal file structure. It’s like before I was walking but now I’m on a push bike. I can’t make use of the ability to run down pedestrians until I learn how to do balance and pedal. Okay, the running down pedestrians was a bad example but anybody that is still listening and not calling the police must have understood it so I’ll continue. There’s nothing I can’t do in Textmate, I just need to look at the extensive online manual to learn it. And there I think is it’s biggest failing.

    Textmate is a really lovely program to use but it’s so complicated. Coda, as a contrast, is a more intuitive application but it is to Textmate as a spade is to a chainsaw, that is, meant for a different problem and with fewer moving parts but also with the ability to digs holes? I’m sorry, my mind wandered. What I meant to say is that Textmate is great for dealing with code but not so much the design which is what apps such as Coda excel at. I’ve now been using Textmate for 10 months and I still think there is potential to unlock, though, that might be because I’m a thickie.

    I suppose I should wrap this up by saying that I would heartily recommend anybody thinking about writing lots of code to give TextMate a good look. It takes a lot of time to get a lot out of it, but there really is a lot to get out of it.

    Thank you very much for listening, I hope this was at least semi-informative

    Top 5 Tips for Web Designers by John McFarlane

    Hi, I’m John McFarlane and this is the first ever review brought to you live from my living room. Today I’m reviewing a post that has been submitted on the boagworld.com forum. The title is "Top 5 Tips for Web Designers". I’ve been reading through the replies and I’ve put together my top 5 top tips.

    In at number 5 submitted by richquick, allow time and money for personal development, read blogs, buy books, attend conferences, experiment and learn new techniques and technologies.

    In at number 4 posted by Jayphen, surround yourself with designers, whether they’re colleagues, real world contacts, online contacts, forums, podcasts. The more you talk about design the more you learn and I’d like to add to that e-mail designers for advice and let them know your experiences.

    In at number 3 posted by some guy called Paul Boag, develop with the latest best practices, ensure you separate content, design and behaviour. Make sure everything you build uses progressive enhancements.

    In at number 2 another one by Paul Boag, it’s an obvious one but one that can’t be put across more clearly, know HTML, CSS and javaScript inside out, you need to know the core technologies that underpin the web back to front. I’d like to add to this point, the basics of HTML and CSS are easily learnt but don’t be fooled into thinking that you know enough, you really need to know these subjects to an advanced level. This will benefit you when your implemented the latest best practices.

    And that brings me on to my number 1 tip and that is love your job, I think if you love this industry and have a passion for web design, I think those qualities will guide you to achieve your goals. So enjoy your development and don’t rush yourself too much. Take the time to develop the right way, build contacts and friends and embrace the industry as a whole.

    That about raps up this weeks review. I hope you’ve enjoyed the very first show live from my living room. Thank you and goodbye.

    Back to top

    Listeners feedback:

    Newspaper columns on the web

    Adrian writes: Hey guys, long time listener from the states. I’ve been working on a new personal site lately and I’ve become fixated on the idea of using newspaper style columns. Since you two seem to know a thing or two usability, I’d figure I’d ask for your thoughts.

    It seems like most people view them as a print concept that doesn’t translate well online but seeing as most screens these days are widescreen and vertical space is taken up by menu bars, docks and browser extensions, going horizontal strikes me as a logical solution.

    I appreciate the logic. It is true that more computers than ever have widescreens and that vertical space is at a greater premium than horizontal. However, I would think very carefully before employing newspaper style columns. As I see it there are two concerns:

    The usability concern

    As you point out, people reference usability concerns as the primary reason against newspaper columns. In a newspaper, copy runs across several columns with the eye darting from the bottom of one column to the top of the next. This is acceptable because the user can view the entire newspaper in a single glance. There is no such thing as a scroll bar.

    On the web it is different. You are unable to predict the height available in a browser window and so users will almost certainly have to scroll. This means the user will scroll down one column as they read and then have to scroll back to the top to start the next column. This is far from a pleasurable reading experience.

    It is also important to consider width as well as height. As you say newspaper style columns works well on high resolution, widescreen monitors. On anything less the story becomes unreadable with narrow columns and short line lengths. The alternative is to allow both horizontal and vertical scrolling. But as I am sure you, know this is the ultimate usability error and should be avoided at all costs.

    The technical concern

    There are also technical considerations to take into account. How will a story be split over multiple columns? Currently this cannot be done in CSS, although this may appear in CSS3.

    One option would be to manually layout each block of text. However, this isn’t going to be practical with anything other than the most static of sites.

    The only option is to use some server side code. However, even this is not without its problems. Consideration needs to be given to inline elements such as images or quotations. What happens if they appear at the end of one column? Does a quote get split? Will the design accommodate larger images? What happens when text is scaled?

    Although all of these technical problems can be overcome, you are forced to ask whether it worth the effort. This is especially true considering the serious usability concerns.

    Estimating dev/creative work

    Kirk Henry asks: I’m not sure if this should be listed as a question or not but her goes. I’m a Creative Director for a dev shop with some very large fortune 500 companies and a problem I always seem to come across is difficulty in the estimating process. We use excel documents, have some standard hours for comps but have to do custom estimation for multi media projects etc… my estimates are always pretty decent but I want to know what you guys use or what software you would recommend. I have been listening on itunes from the start and love the show.

    Ok, this is probably the most important subject that we (and I mean the web community) don’t talk about. Why? I think, because it’s difficult to pin down a method of reliably estimating a project and, more so, we’re all guilty if underestimating time and again… these are my thoughts:

    The first thing to ask yourself is ‘how serious is this project?’ I have a sixth sense for requests for quotes that fit into the following brackets:

    • ‘We have this idea but have no idea how much it will cost and we want you to do all the research work involved in scoping it. Of course we won’t pay for the research and there’s no way we’ll pay sensible money for the work once we know what it is’
    • ‘We have a supplier that we want to work with but my boss says I need a couple of other quotes’
    • ‘Us guys in sales and marketing have been doing some blue sky thinking and want a quote to redevelop Google….’

    You get the idea – timewasters. You need to deal with these requests quickly – this is how I do it. Have a chat with whichever department(s) would do this work if it ever materialised – get them to give you wide ballpark figures. Add in PM and contingency and send them an email. 99 out of a 100 won’t even bother getting back to you. Some will, but they’re usually trying to get free scoping (‘can you give me a bit more detail on how you reached those figures’).

    Anyway, I’ve ranted long enough timewasters, back to Kirk’s question.

    First question – do you know the budget? If yes, then you are looking to fit a scope into a set amount of effort. Can you do it? Will the ‘client’ be happy with the scope that fits their budget? Do they understand what that scope is (especially if you have reduced it to fit their budget)? DO NOT get creative with your effort allocations just to fit within the budget. Either ask for more (up front) or walk away.

    If you don’t know the budget then you are looking to scope a project from scratch. If it’s a really big project then ideally you should be being paid to scope it as we’re looking at business analysis and consultancy here.

    Break down the project into rough task areas. It’s likely that you’ll have done other projects that include similar tasks so you’ll know efforts on these (though ask yourself if you got it right last time). For the ‘new’ tasks, break it down further and you will probably find other smaller tasks that you have done before. For the really new stuff then you need to talk to an expert (designer/developer/IA) and get them to think the task through. They will provide you with an informed guess. That’s right – guess. Because people are guessing it is really important to overestimate fixed price projects. This is the cost to the client of having a fixed price.

    Don’t forget to charge for meetings (if 3 people are attending then charge for 3 people!). Project management is notoriously undercharged. We have a rule of thumb of 15 – 20% (and that’s probably light).

    The golden rule of estimating is don’t be tempted to lower your probably already too low price just to win the work. Be prepared to walk away.

    As far as tools to help with estimating go, MS Project is great at separating tasks, linking resources to tasks and giving you a good idea of how long things will take. But, I tend to find that it is over the top at the quote stage and tend to stick with Excel.

    Back to top

    The plight of the in-house designer

    The more organisations I work with the more sympathy I have for in-house designers and developers. It is a role that can be thankless and isolating. How then can their lives be made that much easier?

    I last worked as an in-house designer/developer over 8 years ago, so I don’t feel I can really comment on the subject. I therefore enlisted the help of the boagworld forum and dug out various emails I have been sent over the last couple of years. I also picked the brains of Paul (our researcher) and Ryan (our producer) to compile 10 quick tips for improving the lot of in-house staff.

    1. Coding with others in mind

    The general consensus seems to be that as an in-house coder it is important to consider the next guy. Whether you are working as part of a team or as a lone developer, sooner or later somebody else will have to pick up your code and work with it.

    Two techniques were suggested for coding with others in mind. The first was to carefully comment all of the code your produce and if appropriate even create supporting documentation. The second was to have a library of reusable code so that all work produced is consistently marked up. That way it can be passed around the team easily.

    Personally, I believe this is good practice whether you are working in-house or not. Certainly Headscape use an extensive library of HTML, CSS and Javascript snippets.

    Of course, if you are working alone the need for a library of snippets is less pressing. However, our next problem is a bigger concern.

    2. Seeking out like minded people

    Many in-house designers/developers are working in isolation. There are a relatively few organisations that can afford a web team. Working alone has two obvious drawbacks. First, it is hard to keep up-to-date with new approaches because you are learning on your own. It is easy to get stuck in a rut, using the same old techniques. In web design stagnation can be dangerous both for your career and for the evolution of the site you are supporting.

    Second, it can be lonely. Even though you have other people with whom you work, they do not share your experiences as a web developer. You cannot moan about shared problems or ‘geek out’ on code or typography.

    The solution is something we have spoken a lot about before. Make contacts within the industry both online and off. Use tools like forums, twitter, and mailing lists. Offline, look for meetups and conferences you can attend. Nothing in your area? Don’t let that put you off. Setup something yourself. If somewhere as backwards as Dorset has a web designer meetup then there is no reason why your area cannot!

    3. A demonstration speaks a thousand words

    The feeling of isolation can be exasperated because management often simply fail to ‘get’ what you are trying to do. It can be amazingly frustrating when you have a great idea but you fail to make others see why it is so good.

    One solution might be to build a proof of concept or prototype. It is often much easier to convince management of an idea if they can see it in action. Some even spend their evenings producing prototypes as they are not given the opportunity while at work. Personally, I cannot help but wonder whether you should actually be looking for a new job if you are forced to develop ideas in the evenings!

    4. Impose some structure

    One idea I agree with is that in-house developer you should work within the same rigid structure used by external agencies. Too many in-house teams are treated like a free resource people can turn to whenever they like. This leads to scope creep and (more importantly) to the web team being undervalued.

    So what do I mean by a rigid structure? I am talking about things like:

    • Statements of work
    • Change control procedure
    • Client signoff
    • Project milestones (for both yourself and the client)
    • Resource assignment and budgeting

    These techniques ensure projects run smoothly, limit scope creep and project a professional image to the internal clients improving their perception of the development team.

    They are also worth applying no matter how small the job. For example if you have been asked to change some copy on the website always confirm what the requirement is via email. This acts as a mini statement of work. Project management doesn’t need to be onerous to be effective.

    5. Encourage internal charging

    Of course the best way of making somebody value your work is to charge them for it. There seems to be a general consensus that where possible internal charging is a good idea. However, often this is outside of your control.

    If you are unable to charge internal clients there are alternatives. One option is to calculate how much you cost the company per hour. Once you have this figure (even if it is an approximation) you can start to include it in statements of work. List all of the tasks to be done, associate a time with each of these tasks and include the cost to the company for each.

    Hopefully this will make internal clients think twice before using up your time. If you want further leverage start submitting a monthly report to management outlining what work you have been doing and the associated costs. Let clients know you are doing this as a further incentive for them to think twice.

    6. Be the authority

    Another piece of advice that was generally agreed upon is the need to be seen internally as an expert. How you are perceived is important if you want your opinion to be respected.

    Avoid being hesitant or negative about ideas because you are unsure how to implement them. Instead research solutions and if appropriate bring in an expert. Using specialists does not undermine your authority. Rather it demonstrates that you can manage a project even if it is bigger than your personal capabilities.

    7. Exude confidence, personality and enthusiasm

    On the subject of negativity, avoid saying ‘no’. Many internal web teams are perceived as a barrier to be overcome. Internal clients often turn to external agencies in an attempt to bypass them entirely. Once you are ‘out of the loop’ you loose control entirely.

    A better tactic than saying ‘no’ is to say ‘yes’ but go on to explain the consequences. Once you have explained the negative impact of a suggestion, be quick to provide a positive alternative of your own.

    Be confident and enthusiastic about every project. Avoiding being perceived as the stereotypical geek sitting in the dark barely uttering a word. Ensure you are likeable. If people like you they will listen to and respect your opinion.

    8. Broadcast your successes

    To further enhance your reputation internally make sure you broadcast your successes. If you launch a new sub-site or feature, ensure you tell as many people internally as possible.

    If the company has an internal newsletter or mailing list make sure you write something for it explaining what you have done and why in plain English. Focus on what the project brings to the business rather than how it works and why it was challenging.

    Offer to run workshops about the web or give a mini-presentation on web strategy to management. Anything to make you appear pro active and a benefit to the business.

    9. Understand the politics

    A lot of the points so far relate to company politics. Every organisation has its internal politics and ‘rising above them’ isn’t a realistic option.

    One area where politics becomes particularly important is sign off. If you are having trouble getting something approved ask yourself the following questions…

    • Does my internal client have the power to sign off themselves or is there somebody else I should be talking to?
    • Who are the people influencing those signing off?
    • Who are the opinionated trouble makers slowing down the process?

    In many cases the person who appears to be the decision maker is not really. They are being controlled by management higher up or influenced by a few vocal individuals. If this is the case you need to speak directly to these people or at the very least give your client the tools to force sign off through.

    10. Stick to the facts

    Finally, always have facts to back up your opinion. This is especially important if people within the organisation do not respect your opinion.

    Facts and figures are especially good but when that is not an option turn to an expert opinion. Quoting an internationally respected author like Steve Krug will generally carry more weight than your own opinion.

    That said, remember to explain who this person is and why their opinion matters. You cannot expect the heading of marketing to have a clue who Steve Krug is.

    Where an internal client remains unconvinced by an experts opinion turn instead to the weight of evidence. Don’t quote just one expert, quote ten. The shear number of people saying the same thing will impress.

    So there you have it. Advice straight from the boagworld community. If you have anything to add, post it in the comments below.

    122. Screencasting

    In this weeks show we have Ian Lloyd discussing Sitepoints HTML reference and we take a look at creating screencasts.

    Play

    Download this show.

    Launch our podcast player

    Watch the behind the scenes video

    News and events

    Typography everywhere

    This week has seen a plethora of posts about typography. There is an article about changes being made to typography in Firefox 3, a post dedicated to working with paragraphs and some future developments in CSS 3 fonts. Combined with the growing support for embeddable fonts, it would appear that web typography has a rosy future.

    Although all of these posts are interesting, I feel we are not making use of the typographic tools we have already. I have learnt a huge amount by reading what people like Richard Rutter and Jon Hicks have to say on the subject. For example how many of you…

    • Ever change the default kerning
    • Really get specific in your cascade of fonts
    • Consider vertical alignment
    • Think about the relative sizing of our various typographic elements

    The list could go on.

    Many web designers choose to ignore web typography because it is so restricted. However, this will soon change. We need to learn to walk with the basic tools currently available before we run with what is to come.

    Accessibility cheat sheet

    Our next story follows on nicely from last week’s feature in which we addressed accessibility quick fixes.

    Aaron Baker has written an accessibility checklist aimed at designers and developers who know little about web accessibility. The idea is that by simply referring to the list during development they will be able to avoid the major accessibility issues.

    Aaron is the first to admit this isn’t an ideal solution. He also accepts the checklist fails to cover everything. However, in my opinion he has done a damn good job at making the accessibility guidelines… accessible!

    What I like most is that he also provides a PDF version that prints out as a single page. Instead of having to wade through pages of W3C guidelines you can print out a single page and pin it to the wall. Ideal for those starting down the road of accessibility.

    Does this mean we can ignore WCAG? Absolutely not. However, this is certainly an easier starting point for those who are intimidated by the subject of web accessibility.

    Advice on wireframes

    We are having an interesting discussion within Headscape at the moment. Where does the job of an information architect (IA) end and that of a designer begin? When it comes to wireframing in particular, the line is blurred. A wireframe is often produced by the IA but can strongly define the layout and design. This reduces the designer to skinning a site, which is a real waste of their skills.

    I was therefore excited to read the first in what will be a series of posts on wireframing. The author identifies exactly the problem we have been struggling with and talks about page description documents. These documents differ from traditional wireframes because they do not endeavour to establish a layout. Instead this is left to the designer. A page description document focuses on identifying and prioritising content. It is then down to the designer to represent this on the site.

    It is an interesting approach and one that I think has a lot of merit. However, I am equally excited to see the other posts in this series, where the author promises to show us example wireframes and provide more details on his approach.

    Top five tips for new web designers

    The final news story of today is an unusual choice as it comes from our own forum. Our forum is always full of great threads, but one in particular caught my eye this week because it covered the most common question I get asked; ‘what advice do you have for a new web designer?’.

    It is not a long thread (yet!) and so is easy enough to follow. However, each poster has provided some excellent advice in the form of their top 5 tips.

    The tips include…

    • Advice on business
    • Techniques for improving your skills
    • Areas to focus on
    • Books and sites to read
    • What to learn first
    • How to increase your profile

    Without exception they are all gold dust and if you are new to design then definitely give them a read.

    Equally if you have been a web designer for a few years take a moment to post your own contribution. I think you will probably learn something at the same time.

    Back to top

    Feature: Creating Screencasts

    Video is becoming an intrinsic part of the web and not just dumb ass videos on YouTube. Video can be used to show off products and provide online presentations. But how do you create a high quality screencast on a budget? We look at this issue in this weeks feature.

    Back to top

    Interview: Ian Lloyd on Sitepoint HTML Reference

    Paul: OK. So joining me today is Ian Lloyd. Hello Ian.

    Ian: Hello Paul!

    Paul: Have we had you on Boagworld before or is it just .Net?

    Ian: Erm… Actually never in real life person. I did the video thing for you before, the screencast.

    Paul: Yeah. That’s it. I knew there was something.

    Ian: I’ve heard my dulcet tones before.

    Paul: Yeah but not on a live, real, happening interview type basis.

    Ian: Is this happening? What as in cool, hip and happening? Wow.

    Paul: This is happening right now! So there we go. That’s exciting. So the reason I have Ian on the show today is that he had just undertaken and completed a mammoth project no less, in the form of a HTML reference guide that is now available via SitePoint. Now we’ve talked before on the show about the CSS reference guide but the HTML one is a new project that is beta at the moment. Why have you showed a beta tag on it? Come on, put your money where your mouth is. Commit to a real live version!

    Ian:Well that’s not really my shout in fairness but I think the reason they do it is that with all the will of the world and all the technical editing that goes on and all the rest of it, invariably there’s going to be things that will crop up.

    Paul: I was always under the impression that you were infallible Ian.

    Ian:Well I would to keep that myth going but it’s obviously completely untrue. But no, I think it’s sensible. From what I can gather they did this with the CSS reference and they told me that they did get some good feedback as a result of doing this. So it gives them an opportunity to capture anything that has so far evaded various editing stages. There are little things that you can easily, easily miss. So it makes sense. Put it in front of a whole bunch of pedants and you will find that things will be revealed that you weren’t aware of.

    Paul:Yes certainly. So tell us a little bit about how the project came about. How did you end up working on this from SitePoint and how you get involved?

    Ian:Right… Well it’s actually quite a long story that I’ll try and shorten down. Basically I’ve got a bit of history with SitePoint. It goes back to probably 2001/2002, something like that where I was writing articles for them. I had written a few and they had been scored quite highly. At the end of 2003, I took a year out of work.

    Paul: Ah I didn’t know… Yes I did know that.

    Ian:While I was travelling around the world I made it my business to try and call in on people that I knew from the web. You know, you’ve part of the world so I’ll pop in and say hello. That’s what I did with the SitePoint guys. I was in Melbourne for a while so I thought I’d pop in and say hello. So we did lunch and I was having a chat with one of the guys there who was saying “Oh, have you ever thought of writing an accessibility book?” and I was like “Oh, I don’t know. I don’t know if I’ve got a book in me. It seems like a lot of work.” But not long after that I was asked if I’d like to do some tech editing and I thought “Yeah OK, I’ll do that” and I actually did it while I was still travelling around Australia in the van. So that was actually quite easy to do, wasn’t too bad at all. And then what happened is that when I got back to the UK I was asked “Do you want to write a book?” and this is the beginners book you have reviewed in the past on the show. So it’s kind of been an escalation from there really. So there was that book and I did a couple of bits and pieces for APress and then not so long ago I got the call back from SitePoint saying “Do you want to do this HTML reference?”. At the time I thought “I don’t know. I’m not sure. Does the world need another HTML reference?”. But I kind of thought that when I did the first book, and that’s done pretty well and I’ve had some really good feedback, so I though “Well, let’s think about this. Maybe it’s worth doing”. In my mind I convinced myself that this wouldn’t be a difficult thing to write…

    Paul: *Laughs knowingly*

    Ian:See you think you know HTML. You think you know it because you use it everyday and I though “Well how difficult can it be?” compared to say the Javascript reference they were writing. There’s a million and one ways you can approach something with Javascript where as with HTML there’s a finite number of elements or tags, whichever you prefer to use, that you can use in any given scenario so you think it’s pretty straight forward isn’t it. That’s what I thought anyway and I was also thinking in terms of browser compatibility the bigger problems come from the CSS you put over the top. That’s where you get all the quirks happening. So I thought to my mind, “Yeah this isn’t going to be too difficult a job”. But I think I underestimated it.

    Paul:Is that not always the way when it comes to any kind of project like this that it always ends up being loads bigger than you thought it was going to be.

    Ian:I think it actually surprised me how much more work there was involved. I don’t know if you did that little test a little while ago that was one of those things everyone was sending around, how many HTML elements can you do in 2 minutes or something. Everyone was having a go at it. You think you know quite a lot but then you realise there’s so many more you didn’t know and there was so many that I vaguely remember and but probably would never use. That was the funny thing, writing about these elements where I think “Well, that’s that one done. Never going to use and nobody’s every going to read it either but it’s got to be covered.

    Paul:So with the CSS reference guide that they produced they have now turned it into a book. Are they intending to do the same with this? Is that the plan?

    Ian:Absolutely. And that was the other strange thing I thought “This is kind of a strange business model. They are going to put it on-line for free but also gonna do a book. Will people actually buy a book?” But I’m sure they don’t do these things without doing the research first. I’m pretty sure they’ve got a good idea on what they’re doing with this. I never went into it thinking I’m going to make millions out of this because it’s never going to happen. Anyone who’s written a book, yourself included…

    Paul:I’m still witting so I’m still in that naive state of thinking “Yeah, it’s going to sell hundreds of thousands of copies and millions of copies and I’m going to be rich”. So don’t shatter it.

    Ian: Sorry Paul.

    Paul: Just say how much money I’m going to make.

    Ian: Oh yeah, you’re going to be rolling on a bed of money. You’re not going to know what to do with the stuff.

    Paul: Excellent. Wonderful. Great. I’m looking forward to that. *laughs* So basically it’s gonna turn into a book before too long.

    Ian: Ah yes.

    Paul:You mention that there were some things in there that you thought “I’ve written this but I’m never going to use this and probably no one else is as well”. I noticed there were a couple of sections in there dedicated to depreciated HTML tags and stuff that people actually shouldn’t use. That’s a bit of an unusual decision isn’t it – to put in stuff people that people actually shouldn’t be using. Why take that route?

    Ian:Well the thing is because it’s a reference you have to include everything. So everything that is in the W3C approved recommendation, everything in there is included. Even if it’s as much use as a chocolate teapot it has to go in there. And that includes the deprecated tags but there’s also things that are included such as blink or bgsound or marquee that were never actually defined in any standard but because they have almost universal support, not all of them have the same level of support, but basically there’s a lot of elements out there that were never defined in the standard but are well supported. So the decision is this has to go in there, we can’t deny it’s existence. It may not be something that anyone would want to use but as it’s a reference book we should include it. There were some that we didn’t include that I can’t remember off the top of my head what they would be. Things that were perhaps defined in Netscape 4 and just are not supported in anything and given that Netscape 4 is dead and gone a long time ago, there were some things that didn’t make it in. But the reason for having a second index that said “Here are some elements that you shouldn’t use or should avoid or these are deprecated ones” was really a case of saying that we’ve got this index of all these things and I don’t want anyone to think that because it’s in the index that it’s necessarily approved. So I wanted to kind of pull them out and say “It’s in the reference but actually we don’t really you to use those.”

    Paul:Which are the worse culprits? Which are the ones you think that people are using a lot and they really, really shouldn’t be? Your chance now to lecture people and preach to them about their bad HTML.

    Ian:Well strangely enough I don’t actually see a lot of them used now. I think probably the most common is people using the bold and italics, the <b> and the <i> tags, when really they should be using strong and em. Then again the b and i tags do have their place but they are usually misused. Thankfully the kind if things that I wouldn’t want people to use, you don’t tend to see much nowadays anyway like the blink, marquee or bgsound that was always a pet hate of mine. You’d visit a site and then suddenly you’d get some Indonesian Gamelan music blaring through that was set in a bgsound. I was kind of thinking it’s good that this is gone but if you go to any page on MySpace and they’re replaced it with something that has got sound in Flash. So yeah, that may have gone but they have replaced it with something equally annoying.

    Paul:Now there’s a little question there. You say that bold and italic have got that place. How is it supposed to be used? Educate me as to the proper use of those two.

    Ian:Well if you what you are actually marking up something that describes something typographical. So if you are putting the b tag around something because you are describing it as bold. So it’s that kind of context. I use in the examples on the reference it’s like I’m describing a sign of something like that. So there are reasons when you use it but generally speaking when people are using it is when you want emphasis or strong emphasis. In most cases what I would end up using would be strong and em because that is what I’m normally trying to do, emphasis.

    Paul:What other kind of bad practice have you been seeing? What are the things, not just with specific tags but general bad practice, that are your pet peeves when it comes to HTML? What things are people doing a lot that just piss you off?

    Ian:Like I said earlier, because of the kind of sites that I tend to look at I don’t actually stumble across too many coding sins because that’s kind of the circles I’m in I suppose. The funniest thing is when you see your own mark-up from years ago and I’ve just had to do this for something at work where I’ve taken on a reworking of something written 10 years ago and I’m like “Oh my God. This is awful”. It had been duplicated 5 times instead of one file with the logic inside that one file. So it was like “Hang on. I have to do this five times over?”. But it was nice to go back and see something that was old and table layout and all the rest of it and give it a good clean up in the process. So yeah, it’s funny when you look at your own mark-up and think “I’ve moved on”.

    Paul:Even when you just look at what you learned from when you started doing standards to when you’re doing it now. I look back on the early standards work I did and it’s all div-tastic. There’s just divs everywhere.

    Ian: Oh yeah. But there’s no meaning to the document as such.

    Paul: Yeah. No meaning whatsoever. It used CSS so it must be alright *laughs* Which obviously doesn’t quite work does it in reality but there you go.

    Ian:I guess the kind of thing that I really see a lot is just general sloppiness. People not closing tags when they’ve said they are using XHTML or unsymmetrical opening and closing. Those kind of things. Probably the first thing is missing alt attributes for images which is such an easy thing to put right but I see it so often. I guess probably the worse offences come from the kind of people who probably have never looked at a reference and may never look at a reference so I don’t know that this would solve the problems. And by that what I mean is people who would never actually get their hands dirty in the code. They’ll be using things like Frontpage, Word. You know – save as HTML in Word. You just want to beat them over the head with a large reference book. I don’t know if those kind of people are beyond hope. Maybe we we’ll be there at one point who knows. Maybe they are not beyond saving.

    Paul: Nobody is beyond hope.

    Ian:Funnily enough, I was saying about the Frontpage thing. It’s quite shocking I was looking at the program for a local college evening course and out of curiosity I flicked through to the computing section to see if they were doing any web design courses and
    yay, there were. How To Build A Website and it was a seven week course, how to build a website using Frontpage. And it was like head slap, what are they doing?

    Paul: Ah. That’s amazing that people are still doing that.

    Ian: Shocking. So yeah. It’s not going to go away in the short term still.

    Paul:When you were going through this reference, putting it together, was there a tag that you came across that you thought “Why don’t I use this more often? That’s an underused tag.” For example, I’ve just suddenly started using definition lists more.

    Ian: Paul, you’ve taken the words right out of my mouth. That’s exactly what I was going to say.

    Paul: There you go then.

    Ian:That’s exactly one of those things that I don’t tend to use an awful lot myself but there are certainly uses for it. When we did this quiz thing that we were talking about earlier, I did with some people at first. So few of them had actually heard of definition lists. It was like “What is this markup of which you speak? What is this dl? What is this dd?” They had never heard of it and it surprises me but, I don’t know, maybe it shouldn’t be a surprise. You see list items used absolutely everywhere but it seems to be a bit of mystery to people. So that would be one that people could use more often and I’d certainly like to see people use them more often.

    Paul:Umm. I’ve found it really useful. It’s surprisingly how many of the things, for example a news story where you have a title and then the description underneath the news story. There’s loads of examples like that where there are these paired matchings that suit a definition list so well. It’s a cool tag, if a HTML tag is capable of being cool which is probably doubtful.

    Ian:There are some others as well which I would certainly like to see people use more often and they’re not ones that I don’t use, I use them all the time. Things like the accessibility specific type ones like for forms: label, fieldset and legend. I’d like to see them used more often. To some people this is something that they still don’t get. Of course in general, using the proper semantic markup. As you’ve already mentioned sites that are div-tastic. Stick a couple of headings in there and some unordered lists and already you’re starting to give your document more structure.

    Paul:So talking about semantics and all that stuff, I noticed that you have a section dedicated to Microformats. Microformats aren’t really part of the W3C specification so why did you decide to include them?

    Ian:Because it’s really cool. Yeah, it’s really cool stuff Paul. No, the reason really is because in the process of drawing up the table of contents, looking at all the elements we needed to cover, it became clear that there are certain things that HTML can’t do. Obviously this is not a revelation otherwise Microformats wouldn’t have come about anyway. But it felt right to put it in because essentially although Microformats are still developing they do go through a rigid process of being documented, discuss, ratified and all the kind of thing. So while it isn’t W3C recommendation it feels like it’s controlled. Also it doesn’t really do any harm. You can add this in over the top of HTML. You’re still using plain old HTML but adding that extra richness in without necessarily doing any harm. So it felt like something safe to put in. I guess the only problem with putting something like this in, at least for the printed version of the book, is that as they are developing it can get out of date. At least with the on-line version as things get added and they are adopted, that can easily be added in. It felt like a useful thing to do.

    Paul:And it’s good to give Microformats higher profile because I think there are still a lot of people that are unaware of them. So it’s good.

    Ian:I was gonna say it is by no means a complete Microformats reference. It really is still a fairly entry level introduction. I mean there are books out there specifically for Microformats. If someone really wants to learn more they’d do better to pick up a book or go to Microformats.org to learn more. Hopefully it would give some exposure to it that perhaps wouldn’t otherwise. And the other good thing about it is because the reference on SitePoint is very, very searchable hopefully by the time that Google’s indexed it you will find people that stumble across that wouldn’t have done otherwise and just from doing a search from inside the site itself. There’s a chance that people might learn about Microformats when they might not have otherwise of done. But we’ll see.

    Paul:Bearing in mind that a lot of people listening to this podcast are web designers and you know, they are sitting there going “Well I know HTML”, like we were saying at the beginning that you have this perception that is something you know back to front. So just to finish up with is there a kind of one area that you really want to challenge people over or one piece of good practice that you’d like to push people on where they’re not as hot as they should be.

    Ian:Hmmm… That’s a tricky one. I’m obviously aware that the audience of the podcast know a fair amount already. I guess you do have some people that are relative beginners so I’m not entirely sure the advice is appropriate for the audience. But the kind of advice that I would always give is that, and maybe I’m teaching people to suck eggs here, but really it’s so much more useful if you can learn from the ground up. You know, learn the code using really simple tools. I use Dreamweaver a lot, an awful lot, but that’s because I know how Dreamweaver is going to handle the markup. I know if there any little forbals, what it’s gonna do. So it’s very quick for me to use that without causing any real damage. But I wouldn’t really recommend that to a beginner. I’d say learn the basics. Walk before you run. Obviously things like I mentioned earlier – Word and Frontpage. Never, ever dream of using anything like that because they just do an awful, shocking job of it. In essence, HTML is not difficult to get to grips with. What I tend to find is a problem is what you then layer over the top of it. It’s the browser incompatibilities with CSS and obviously with Javascript it can be as simple or as complex as you like. HTML is not massively difficult to learn but it’s still useful to learn from the ground u
    p and not let a tool do it for you. I think that’ll be my advice.

    Paul:On one hand it’s not difficult to learn but on the other hand I think it’s quite difficult to master, if that makes sense. It takes quite a long time…

    Ian:You’re talking about the pedantic kind of… When you start to argue about the fine details about which element is appropriate for this usage and you can get into some debates over some things, yeah.

    Paul:I liked the way you referred to it as pedantic. Do you think we’ve gone a little bit overboard with our obsession with HTML and marking up everything correctly?

    Ian:I don’t know. I think it’s a good thing that people discuss and try and squeeze the most out of it. But there are some grey areas and you do sometimes think it is a bit limited, hence things like Microformats adding the richness on top of it. But I don’t know. It’s usually good natured, put it that way.

    Paul:Oh OK. I thought I was going to get you to say something really controversial that would get you flamed but I didn’t quite manage to…

    Ian: What luck “HTML SUCKS!”?

    Paul: Yeah like “Just use Frontpage. It’ll be fine man.”

    Ian: Yeah something like that.

    Paul:OK. Thank you so much for coming on the show and where can people check this out if they want to try out this reference for themselves?

    Ian: The HTML reference is at http://reference.sitepoint.com/html and if you want the CSS reference, replace /HTML with /CSS. And I understand that the Javascript reference written by James Edwards aka BrotherCake is still ongoing. So at some part there will be a third part to this reference. So we’ll have all three layers.

    Paul:And I have to say I’ve been impressed with what I’ve seen so far. I’ve actually been using the HTML reference believe it or not. In fact I used it yesterday to check something. I can highly recommend it. Much better than that crappy old W3Schools so you can ignore that from now on and use that instead. OK, thanks very much Ian. That was really good and I look forward to seeing you soon.

    Ian: OK. Thank you very much Paul.

    Thanks to Lee Theobald for transcribing this interview.

    Back to top

    Listeners feedback:

    Can you trust developers?

    JW writes: I have been on the buying side of both fixed and hourly projects with lackluster results lately. The process can be quite frustrating for me with some of the following bubbling to the top:

    • Inaccurate estimates both in cost and time
    • A lack of commitment to carry out all agreed items within a scope when it takes longer to accomplish than originally planned.
    • The need to ask for more money when the scope doesn’t change.

    Which leaves me asking “How much is the developers “word” worth?”

    JW’s email goes on to talk about the differences between fixed price and time and material work. I believe that this is where the heart of the problem lies.

    I know many within the web design industry will disagree with me but I advise in my upcoming book to only work with developers willing to agree to a fix price contract.

    There are always exceptions, such as when you have found a developer you know and trust. In such circumstances I suggest the complete opposite. However, generally speaking I don’t believe it should be the client who takes the risk for projects overrunning. Obviously, if the scope is changed by the client then additional work should be priced and agreed (once again on a fixed price contract).

    Make sure the scope is clearly defined up front even if it delays the project starting. The tendency is to jump right into development work as soon as possible, especially when deadlines are tight. However, this could cause problems later.

    Unfortunately, occasionally you will encounter a developer who agrees to fixed price project only to move the goal posts part way through the project. By this stage it is difficult to walk away. How then do you avoid ending up with this kind of developer?

    There are two approaches that work well. First, before engaging a new developer ask to speak with a selection of their existing clients. If possible, contact clients independently of the developer. That way you won’t just get fed a tame client who is bound to say nice things.

    Second, for larger projects consider separating off some of the initial work into a smaller self contained project. That way you can ‘try the agency out’ before committing to a larger project with a greater degree of risk.

    In answer to the original question, I am sad to say you cannot trust a developers word. You have to put safe guards in place and mitigate the risk.

    The life cycle of a website

    Richard asks: What is the life cycle of the websites we develop as web designers? Do you see it as a short term year / year and a half, or a longer term two / three years? What kind of time period should we expect to wait before being contacted by a client about a potential redesign?

    I would like to challenge two presumptions you make in your question. First, you are presuming sites should be redesigned periodically. Second, you suggest that the client has to come to you. In my opinion, neither are ideal scenarios.

    I have written before about how, ideally websites should evolve rather than going through a continual cycle of redesign. I do however accept that this decision lies with the client and not yourself. Nevertheless I would encourage you to work hard at persuading the client of the benefits this approach brings. This serves both your interests as a web designer and those of your client. Throwing out all previous work on a site every couple of years is lunacy and totally unnecessary.

    I also have to say that you are doing your clients a disservice by simply waiting for them to contact you. It is your role to continually suggest ideas on how their site could be improved based on emerging innovations.

    We offer our clients the opportunity to regularly meet with us (free of charge) to discuss their site and where they should go next. This encourages them to think in terms of evolving their sites. It also ensures the sites do not stagnate and die.

    Not that this approach is completely altruistic. By speaking with our
    clients regularly we ensure they don’t forget us and increase the likelihood of repeat business.

    Do we always take this approach? No. Some clients don’t want us continually pestering them. Some simply cannot afford to move their site forward. In this case we take a more passive role, encouraging them to read this blog or just ‘keep in touch’. However, this is the exception not the rule.

    So to answer the original question; I would argue that the life cycle of a website should ideally be indefinite, as it evolves and changes overtime. This happens through a partnership between agency and client.

    Back to top

    121. Coda

    In this weeks show we discuss 5 quick fixes to accessibility, and we review the mac code editor Coda.

    Download this show.

    Launch our podcast player

    Watch the behind the scenes video

    News and events

    Skipping Photoshop

    The biggest news this week is a post from 37Signals entitled ‘Why we skip Photoshop‘. The article outlines some excellent reasons why they choose to bypass designing in Photoshop, instead going straight from sketches to HTML/CSS. Reasons include…

    • Mock-ups are not interactive
    • Photoshop draws you into the details too early
    • Text on Photoshop is not like text on the web
    • Photoshop is not productive
    • Photoshop does not aid collaboration
    • Photoshop is too complex

    They are all valid points. However, although I accept this is right for 37Signals, it is not right for Headscape. Our view is echoed completely by the response of Jeff Croft at Blue Favor. He argued…

    • 37Signals are working with an established visual aesthetic
    • That 37Signals aesthetic is simple and so is better suited to pure HTML/CSS
    • That 37Signals do not work with clients
    • That working in HTML/CSS can lead to constrained design.

    That said, the post has made me consider experimenting occasionally with the approach. For me that made it worth reading.

    It is a great discussion and I am really glad Jason at 37Signals brought it up. It has certainly created a lively debate including posts from Jon Hicks and Mark Boulton.

    Web Designers should do their own HTML/CSS

    But we haven’t finished with 37Signals yet. They have posted a second blog entry this week entitled ‘Web designers should do their own HTML/CSS‘. The title is fairly self explanatory and they put forward a good argument as to why designers should never produce a design and then simply hand it off to ‘code monkeys’ who make it work.

    At the end of the article they write…

    We simply don’t consider designers who don’t get their hands dirty with the materials relevant to the kind of work we do.

    If you’re a designer working with the web who still doesn’t do your own implementation, I strongly recommend that you pick up the skills to do so.

    Whether you agree with 37Signals or not, the message is clear: You will struggle to get a job if you do not know how to code pages as well as design them.

    We would certainly never hire somebody unless they know HTML/CSS just as well as they know Photoshop. The nature of the web means that an understanding of the medium is crucial to creating a great user experience.

    Beyond CAPTCHA

    I hate SPAM. I hate it with a passion. I particularly hate comment/forum SPAM because it not only inconveniences me but also affects my users.

    One common approach to the problem is CAPTCHA. CAPTCHA presents the users with a distorted word(s) that they have to type in before they can comment.

    An example of CAPTCHA in action

    Although in principle CAPTCHA sounds great it does have a number of weaknesses…

    • It creates accessibility problems
    • It are hard for normal users to complete
    • It can be beaten by spammers
    • It make SPAM the users problem

    In short, CAPTCHA doesn’t work. So what is the alternative? Well, that is what James Edward (AKA Brothercake) explores in a post on Sitepoint entitled ‘Beyond CAPTCHA‘.

    He looks at server side solutions, services like Akismet and honeytrap approaches. He also looks at OpenID and other forms of authentication.

    The conclusion is that there is no perfect solution. However, he argues we need to stop making this the problem of users and take on the responsibility ourselves.

    I can certainly see his position and generally speaking I agree. However, when you are faced with limited time and budget it can be necessary to cut corners. Personally, I cannot stand CAPTCHA and I regularly fail to complete them first time. However, I have no problem completing a basic question such as found on the boagworld website.

    Read the article and make up your own mind. At the very least it will offer you some alternatives to CAPTCHA that can be implemented quickly and easily.

    Website Owner’s Manual

    Our last news story is a little bit of news about the book I have been working on. For a start it has a title; ‘The website owners manual‘. However, the big news is that you can start reading it and contributing to the final version.

    Back to top

    Feature: Quick Fix Accessibility

    Complying with accessibility guidelines can seem like a massive undertaking. However, addressing 5 simple problems can make a huge difference to your sites accessibility. We discuss these in this weeks feature

    Back to top

    Review: Coda

    Find out why I am seriously considering abandoning the code editor I have been using for over a decade in favour of Coda for the mac in this weeks review.

    Back to top

    Listeners feedback:

    Team working environment

    Gareth writes: I have been “promoted” from a support desk position for an Oracle based financial system to the company’s single web designer. We are not by trade a dedicated web design firm and as such i am having to develop procedures and polices by myself. I have been reasonably successful in this thanks in large part to your podcast, which has in turn led me to blogs and websites such as A List Apart, Sitepoint, Headscape (obvious one that) and many more that have also helped me.

    Due to the sheer volume of work that is coming in this year we have found ourselves needing to recruit an additional web designer. At the moment i have all of my work saved on my laptop and all my tasks and appointnments stored in my Outlook.

    What tips can you give me in relation to creating a centralised working environment that can be used by both myself and this new person as well managing our work loads. What do Headscape do? I should probably point out that we will be office based in the sane room rather than working from home.

    Why is it that Ryan our producer, keeps picking questions he knows I am not an expert on. I am a front end interface guy. What do I know about this kind of thing! Also we primarily work remotely so have a different setup anyway.

    That said, I am willing to give anything a go and ignorance has never stopped me before.

    Okay, if you are sitting in the same office communication is not going to be the primary problem.
    However, you still may want to take a look at Basecamp. Its a great way of organising team working.

    The main problems will come in the form of file sharing, backup and overwriting each others work. One thing you might want to consider is a version control system like Subversion. At Headscape we use something called Source Anywhere however this is just personal preference. These systems allow you to…

    • check out files, preventing others from overwriting them,
    • rollback to previous versions of a file,
    • branch files, allowing multiple versions of the same file.

    However, for some this might be an over the top solution. The biggest danger is overwriting files. There are a number of code editors which prevent this including Dreamweaver and Coda. This just leaves the problem of shared storage and backup. You could solve these problems separately. However, personally I like the look of Drobo. Its not that cheap ($499 plus the drives) but it provides an incredibly expandable solution that minimises the problem of data loss.

    No doubt my ignorance is showing in this question so if you have better advice please post it on the show notes.

    Internal Search

    Stephanie writes: I have a question regarding internal site search. I am wondering what types of solutions there might be for enabling a site search when one does not have a development team to turn to. All I can come up with is Google custom search and it has some drawbacks (ad serving in the free edition and blog posts do not get indexed right away).

    Love the new site!

    So you want to add search to your site eh? If you’re using a popular engine such as MovableType, then there will be a built in search, so let’s assume you’re not. If you’ve just built your site using HTML, or aren’t happy with the results of your CMS’s out-of-the-box search, you still have options.

    If PHP is your game, you can install a spider on your server, such as Sphider. This will index your site and provide a very customisable solution, that doesn’t send queries off to a third party server. If you’re looking after a large site, with huge numbers of pages and documents to index, you might consider a program called SearchBlox. SearchBlox is expensive, but powerful. It runs as a java based web app on your server, with many fine tuning features that will keep even the most fastidious of clients happy.

    If it’s a free, third party service you’re after then you might consider Atomz or Google. Atomz is easy to setup, free and customisable but does include text based ads, similar to Google. The indexing schedule is regular, but only weekly. Google is an established name in search, but also has the downside of irregular indexing and ad supported results. It is of course possible to spend a little extra money to remove these, with Google Site Search

    There is however an interesting alternative service called JRank. JRank don’t stuff adverts into the results, they only require that you provide a link to their website on the page that you set as the index for crawling. They also have a REST API, so without much work you can integrate the results in your website, as the PHP code below demonstrates:

    <?php
    $jrank = file_get_contents('http://www.jrank.org/api/search/v2.xml?key=[API key]&q=[query]');
    $xml = new SimpleXMLElement($jrank);
    $result = $xml->xpath('//entries/entry');
    while(list( , $node) = each($result)) {
    echo '<h3>' . $node->title . '</h3>';
    echo '<p>' . $node->content . '</p>';
    echo '<a href=”' . $node->url . '”>' . $node->url . '</a>';
    }
    ?>

    An interesting point in the question was that Google doesn’t index blog posts right away. In my experience, search is used to find old articles or those that can’t easily be found by tags or menus. Newer articles should be easy to find from the home-page of the site, particularly if it is a blog site. If powerful search is required, then you’re going have to put up with the ads, or fork out for a bespoke solution.

    Back to top

    Quick fix accessibility

    Complying with accessibility guidelines can seem like a massive undertaking. However, addressing 5 simple problems can make a huge difference to your sites accessibility.

    The Pareto principle (also known as the 80/20 rule) states that, for many events, 80% of the effects come from 20% of the causes. This is true for accessibility where a small number of issues cause the vast majority of problems. But what are these issues? That is a subjective question, but here are my top 5:

    Poorly described images

    By now you probably all know that images should have associated alt attributes, which describe them to visually impaired users and search engines. However, a related problem is the content of these alt attributes.

    Many people have realized the benefit of alt attributes for search engine placement and so stuff them with keywords making them far too long.

    All content images should have an alt attribute that clearly describes what is being shown in a concise manner.

    Badly labelled links

    It is not just images that are labelled badly. There are also problems with links. The text contained within a link should describe that link without context. This is because screen readers have the ability to read all links on a page as a single list. Users can then quickly navigate without listening to the entire page. However this is problematic because a link entitled ‘click here’ does not explain where it leads. A better link would read ‘click here for latest news’ or simply ‘latest news’. Where a longer description is required a title attribute can be added.

    Descriptive links also help sighted users to quickly scan for the next page to visit.

    No alternatives to media

    It is not just images that need describing. When using video, audio or any form of media that requires a plugin (that some users may not have) it is necessary to provide an alternative version. This alternative should either be in the form of a transcript (in the case of audio) or captions (in the case of video or other media where visuals and audio are synced).

    At first glance this seems a massive undertaking. However, there are a number of services like castingwords.com who provide transcription at a very reasonable rate. There are also tools like overstream.net, that help create captions.

    Reliance on Javascript

    Javascript is a programming language that can be used to achieve many of the interactions we see on websites. From popup windows to services like Google Maps, Javascript is amazingly flexible and heavily used.

    Javascript is not inaccessible. In fact it was created by the W3C and sits alongside HTML (which provides the content) and CSS (which provides the design) as the language which provides behavior. The problem is not the technology but the implementation.

    Not everybody has access to Javascript. Search engines in particular tend to ignore it. It is important that all content is accessible even when Javascript is turned off. The most common problem is using javascript to create navigation and other links. If Javascript is not available it is impossible to follow those links to the content beneath. Equally when Javascript is used to add content, this becomes inaccessible if Javascript is disabled.

    The simple rule is to never rely solely on Javascript as a method of accessing content.

    User controlled text

    The final accessibility mistake I see regularly is text that cannot be resized. By default all major browsers allow users to set the size of text on a webpage. This is needed because website owners cannot predict users visual requirements. Most people with visual problems need to be able to increase font sizes. However, there are some visual impairments that require smaller text to fit within a limited field of view.

    Although browsers provide this functionality by default, many web designers disable it. To be brutally honest there is no good reason for this beyond laziness. By fixing the font size the designer reduces the burden of testing but it provide no other tangible benefit. In short, ensure the fonts on your web site are scalable.

    By addressing these five problems you will dramatically improve the accessibility of your website. None of these issues are particularly hard to overcome and the financial investment is minimal. However, by doing so you will increase the amount of traffic to your site and the number of visitors able to successfully navigate it.

    Website Owner's Manual

    I have been working on my book (The Website Owner’s Manual) for a while, but finally I have something to show you.

    Update: You can now order the website owners manual and get access to chapters as they are written.

    No, I haven’t finished it and to be honest my progress continues to be slow. In fact it is so slow my publisher is currently looking for a release date of December! Oh the shame :(

    A recap: What the book’s about

    First of all a quick recap on what the book is about. This is what my publisher has written…

    Just because you’re responsible for your organization’s web presence doesn’t mean you know how to build a website. The job of planning, launching, and managing a site often falls to people who have little or no experience in web design or development. Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

    Website Owner’s Manual helps you form a vision for your site, guides you through the process of selecting a web design agency, and gives you enough background information to make intelligent decisions throughout the development process. This book provides a jargon-free overview of web design, including accessibility, usability, online marketing, and web development techniques. You’ll gain a practical understanding of the technologies, processes, and ideas that drive a successful website.

    So, basically it is a book aimed at website owners rather than web designers. That said, I think there is a lot of useful content in for web designers as well.

    Content includes…

    • Secrets to a successful website
    • Defining roles and evaluating objectives
    • Planning and measuring your success
    • Page design and branding
    • Layout challenges
    • Creating killer content
    • User testing
    • Content management systems
    • Web design best practices
    • Domains and hosting
    • Website promotion explained
    • Techniques for engaging visitors

    All useful stuff, whatever your job title. What is more it shows web designers how to better communicate with clients. In particular it helps define the role of the client. I can imagine this is a book many web designers will end up buying for their more ‘challenging’ clients.

    The news: Get early access to chapters

    Of course most of this you already knew. The interesting part is that you can now read and contribute to the first 5 chapters of the book.

    The thing I love about Manning (my publisher) is that they run something called MEAP (Manning Early Access Program). The aim of this program is to engage the reader in the process of writing the book. Think of it as user generated writing.

    For between $23 – $40 you can join the program and gain access to all of the chapters as they are written. You will also get the final book when it is released.

    Each chapter is released in a very rough and ready form including all my horrible, badly drawn, sketches. You can read each chapter and make suggestions, corrections and comments via the books own private forum. I will be checking it regularly and working with you to improve the book.

    What a bloody brilliant idea!

    So if you fancy getting involved go to the Manning website (yes it is horribly designed!).

    There is even chapter one waiting for you free of charge.