145. Baby Jack

On this week’s show Paul looks at how to communicate better with your users. Marcus examines ways to improve your contracts and Ryan has a baby (not actually on the show).

Download this show.

Launch our podcast player

Watch the behind the scenes video

Housekeeping

Two pieces of housekeeping before we begin:

  • First, congratulations to Ryan Taylor our producer and Michelle on the birth of their first child. We want to send our love to them all and welcome Jack Taylor to the world!
  • Second, just a quick note to say we will be holding our live Christmas special on the 8th December at 2.30PM UK time. The show will be an open question and answer time so either send in your questions in advance or come along and join us in the chatroom. We will also be doing a feature on this years top Christmas gifts for geeks. You can vote for your suggestions over at UserVoice.

News and events

Google goes social

The biggest and most controversial story of the week is the addition of SearchWiki to Google search results.

SearchWiki is a way for you to customize search by re-ranking, deleting, adding, and commenting on search results. You can move the results you like to the top or add a new site. You can also write notes attached to a particular site and remove results that you don’t feel belong. These modifications will be shown to you every time you do the same search in the future.

However, most controversially you can also share some of these changes with other users. This has led to fears of spamming and negative commenting as users attempt to manipulate the results.

Personally, this feels like a storm in a tea cup. It is an interesting new feature but I really do not see it catching on in any significant way. Only the most extreme power users will bother using these features and the majority will never see the change.

For example, even if website owners do attempt to manipulate users by spamming notes or adding negative comments about competitors, the vast majority will never see these notes. Users have to actively choose to view other users notes from a tiny link in the footer.

I say let stupid website owners spam these comments. It will keep them busy doing something which ultimately will make no difference to the popularity of their site.

Where this could be useful is when I can identify friends who I trust. Being able to see their notes or reordering of results would be of interest to me. Until then, this is non-starter.

In browser web development tools

In last week’s show we listed your top web development applications. Interestingly several of those applications were browser addons such as the web developer toolbar and Firebug.

This week Smashing Magazine has reviewed 15 in-browser web development tools that offer a variety of debugging and coding features.

The list ranges from the web known like FireBug to the more obscure like Fangs (for showing how a screen reader might read a page) and ColorZilla (for quickly listing all the colors on a particular web page).

Other tools featured include:

  • YSlow – a Firefox extension that analyzes a Web page for front-end performance.
  • Fiddler – an Internet Explorer extension that analyzes and profiles a Web page’s HTTP traffic.
  • DebugBar – a debugging extension for the Internet Explorer.
  • Web Accessibility Toolbar – an extension for Internet Explorer and Opera that quickly evaluating and analyzing your Web content’s accessibility.

If you are regularly coding this list is a must read.

From tables to CSS and back again

Kevin Yank, the co-author of Everything You Know About CSS is Wrong has written an excellent article on Think Vitamin telling us it is time to build websites using tables.

Before you all start sending Kevin hate email I should point out he is referring to CSS tables.

Let’s face it, the worst thing about CSS is its support for column based layout. Sure, it does a great job at absolute position but floats just make no sense! As Kevin writes…

You couldn’t come up with a more convoluted way of expressing page layout if you tried!

Fortunately with the imminent arrival of IE8 all major browsers will soon support CSS tables. This means any group of elements can be made to display like rows and columns within a table. Suddenly designing layout in CSS is as easy as using HTML tables.

I know what you are thinking… ‘what about IE6 and 7?’ Kevin addresses this in his article. He suggests that because it is so easy to layout using CSS tables we will have the time to design in CSS tables for modern browsers and the fall back on floats for IE6 and 7. He goes on to suggest that perhaps it is worth simplifying your design slightly for these older browsers to further speed up the process. He believes (and I agree) that clients would agree to this if they understood the cost savings.

Overall, I think this is a very exciting transition and one that will help bring across those hold out ‘table based designers’.

Advice for long term success

Our final news story today is some advice from the founder of Amazon. Jeff Bezos has done an interview with the ‘US News and World Report’ on how to run a successful business. The advice he shares is something that applies to all of us whether we are running a website or building a freelance career.

From reading the article I took away three lessons…

  • Have a long term strategy – Whether in business or running a website, you need to look ahead. Too many of us are thinking about the short term. What feature should we implement next? Where is the next salary is going to come from? Jeff encourages us to look further and work towards long term and visionary objectives.
  • Do not be distracted – Jeff also encourages us not to be put off by others who do not ‘get’ your long term vision. Stick to your guns and keep going. It is easy to have your confidence knocked by the criticisms of others or problems you encounter along the way.
  • Take risks – I am a great believer in taking risks from time to time. A part of this is excepting failure. If you want to double the amount you succeed you must also double the number of times you fail. As Churchill once said Success is the ability to go from one failure to another with no loss of enthusiasm.

Sure, the interview is not about web design and is written by a guy who can afford to think long term, ignore others and take risks. However, it is still good advice and something we need to take on board both as web designers and website owners.

Back to top

Feature: Successful communication

We put a lot of time and attention into the content on our sites, but what about our other communications? We send out newsletters, post blogs, participate in forums. All of these reflect on our brand and the way we are perceived.

In this week’s feature Paul examines how to improve our communications with users.

Back to top

Listeners feedback:

Sign-off and payment

We have this question from an anonymous listener:

I have a designer’s contract in front of me and I am getting a ‘feeling’. The contract doesn’t discuss much in terms of scope; just really limits risk for the designer. Though I can understand the need, I raise an eyebrow to focusing more on ‘not getting burned’ than ‘providing a good design’ … so here is the big question. The designer wants 50% upfront and 50% on an arbitrary completion date or “prior to file relinquishment, or upload and/or assembly of website on clients web server.” My thought is I am not paying $X for a pdf mock-up … I am paying for a site redesign and would like to see it work live prior to getting signoff. (or payment) Inevitably, there is a trust issue; I believe we have both been burned in past client/ designer relationships and are treating each other cautiously. Is there an industry norm which could help the situation? My perspective is how it will look live, especially considering different browsers, am I off base as a client to see the design work live prior to payment?

Ok, so picking this apart from the top:

Firstly, having a contract is a good thing. Full stop. But, you don’t have to blindly agree to whatever is put in front of you. If you don’t like what you’re reading then amend and send it back. This may also mean that you want to get legal advice – I guess that depends on your confidence dealing with the legalese involved in most contract documentation.

Contracts should be made up of two parts:

  1. the terms and conditions (the legal stuff) that should cover obligations, deliverables, rights, liability etc.
  2. the Schedule that should be a detailed description of the project – tasks, timescales, price, payment terms etc. It should also include detail on what the testing process is, what browsers/operating systems etc.

Ideally risk should be limited for both parties. A good contract makes expectations clear for both sides and lays out what should happen if something goes wrong.

Regarding payment terms, it is perfectly normal for a contractor to ask for a percentage of the total cost up front. But, it doesn’t necessarily have to be half up front, half on completion. We often spread invoicing over 4 or 5 different points over a project. This is good for our clients as it is an incentive for us to reach certain milestones along the way. One question I have here is – does this particular designer want payment literally on commencement? We provide 30 days for our clients to pay bills, so even though we may invoice on commencement, we will be a month into the project before we receive payment.

Ok, more detail… the contractor wants final payment:

  • On an arbitrary completion date – you should not agree to this. Payment by a particular date is not acceptable as the work may not be completed and the delay may not be down to you.
  • Or “prior to file relinquishment” – this is not unheard of. Basically, they are saying ‘you pay us and you’ll get your stuff’. Which is fair enough as long as you (quite rightly point out) have witnessed the site operating correctly in a ‘live’ environment. I’ll come onto this shortly.
  • Or upload and/or assembly of website on clients web server – this is what you want I believe.

A ‘live’ environment doesn’t necessarily have to mean your web server. We test all our web development work on our own development server prior to making it live and we ask our clients to sign-off on this environment prior to pushing live. We do, however, rarely invoice until the site is live because there are possible issues with the live environment that we may not have envisaged. Particularly, hosting platforms often need to be able to support certain technologies – if they don’t, you have a problem. If the designer is providing the hosting then that is unlikely to be an issue. It also gives them an option of taking your site down if you don’t pay. That way, they can happily make the site live prior to sending you the final invoice. Do they offer hosting?

So, in conclusion, I would push for the final invoice to be on live and tested release of the website. I would also propose that payment is split into 3 points – on commencement, on design look and feel sign-off and finally, on live and tested release.

Back to top

 

141. Feedback

In this week’s show, Paul Annett joins us to discuss how he pushes the boundaries of CSS and we look at how to improve your website through user feedback.

Download this show.

Launch our podcast player

News and events

Working from home

I suspect the vast majority of people listening to this podcast spend at least some of their time working from home. In today’s world, doing the type of work we do, there is no reason not to.

However, home working is not the utopia some believe. It has its own challenges and problems. For me it is a constant sense of guilt that I am not pulling my weight in the business. For others it is a lack of motivation or fighting the distraction of housework and family.

With some many of us struggling with the relatively new environment of home working it is great to see people sharing their experiences in a new A List Apart article (Working from home: Readers respond).

This article has some great advice and although it contradicts itself in parts (different people deal with home working in different ways) it is full of ideas that I either already implement or will be soon.

While I am talking about A List Apart I want to quickly mention "Progressive Enhancement with CSS". This is a follow up article to "Understanding Progressive Enhancement" an article we mentioned in an earlier show. It is a great article that explains one possible technique for ensuring your CSS squeezes the best out of as many browsers as possible. If you have a chance, give it a read.

Everything you know about CSS is wrong

Talking about CSS, yet another book on the subject has been released this week. However, this one is different. Written by Rachel Andrews and Kevin Yank, "Everything You Know About CSS Is Wrong" is aimed at web designers who already know CSS well. The emphasis is on emerging techniques and future CSS support.

I haven’t read this book yet (although I do have it on order), but it looks very exciting. It has been a while since I have got to experiment with CSS and so this will hopefully point me in the right direction.

It tackles subjects like Internet Explorer 8, CSS tables and CSS3. These are all topical subjects and so the book appears to have a lot of potential.

I will review the book once I have read it and we intend to get Kevin on the show to talk about some of the techniques.

Reduce your business costs with free stuff

With the economy in tatters and a general sense of impending doom, we are beginning to see posts on how to cut cost and tighten belts. One such article is "Reduce Your Business Costs With Free Stuff" on the Think Vitamin website.

The article is a mixture of ideas on how to save money in your business. Some will save you thousands and apply only to larger companies, while others save only a few pounds a month. However whatever type of business you run, from a humble part time freelancer to a multi-national design agency, there is something in here for you.

Ideas include:

  • Cutting costs on your phone system without reverting to VoIP
  • Subletting office space
  • Open source versions of basecamp, Microsoft office, campfire and much more
  • Moving email and hosting in house

Although I think some of the suggestions are somewhat short term (Managing email internally would quickly become an expensive headache) I generally agree with most of what is suggested.

If you are beginning to feel the squeeze then this one is worth the read.

HTML Email: What mail clients are people using?

Finally this week there has been an interesting evolution in our understanding of HTML email clients. This has been nicely summarised by Alex Walker on the Sitepoint blog. He writes:

There are lots of reasons for hating HTML Email, but perhaps no#1 on most people’s hit list is having to produce HTML Email to deliver to potentially hundreds of different mail clients and configurations.

Now, clearly it’s completely impractical to test your work on hundreds of mail rigs, but the question is, where do you draw the line? Generic browser usage statistics are reasonably common, but mail clients stats?

In the past you could confidently make up whatever numbers you liked on those question without fear of being caught out. But that may be changing.

Litmus, who produce an excellent web-based browser and email testing suite are now publishing email client usage statistics from their new Fingerprint email analysis system. It makes very interesting reading.

Alex goes on to summarise the key findings which include:

  • 60% of people use web based clients
  • Just over 80% of the HTML email market is dominated by Outlook, Hotmail and Yahoo!
  • Business still generally stick with Outlook although they seem reluctant to upgrade to 2007

Interesting stuff.

Back to top

Interview: Paul Annett on Pushing the Boundaries of CSS

Paul Boag: Joining me today is Paul Annett from clear:left, good to have you on the show Paul.

Paul Annett: Thank you very much. Nice of you to have me here.

Paul Boag: So Paul is, with a few others from his company, the people who really make clear:left happen, rather than Andy and Jeremy and Rich, which we know, well Richard does work, but Andy and Jeremy certainly don’t do anything do they?

Paul Annett: Well, you know, they fly around the world a bit you know?

Paul Boag: Yeah that counts. I guess..

Paul Annett: No, we all chip in, obviously. Everyone does their fair share, so we say.

Paul Boag: Very diplomatic of you. I feel like I can insult them over this as I do the equivalent of no work in my role as well.

Paul Annett: I was going to say… Well there’s eight of us at clear:left, yeah we all just chip in. We’re all caught making the tea, that sort of stuff.

Paul Boag: Cool. Well tell us about your role. What is it you do at clear:left?

Paul Annett: Well, I’m a user experience designer. So that means, well it’s more than just making a web site look pretty, which were are accused of sometimes in the trade; to make sure that the sites are easy to use, as well as a pleasure to use really. That’s something that’s often overlooked with some web site design companies, obviously none of your audience.

Paul Boag: Obviously not.

Paul Annett: It’s a vital ingredient in the mix really. My job does overlap with some of the other guys in the office. Basically, we all know each other’s jobs fairly well so we chip in and share some responsibilities. My main focus is UX design. We’ve also got the others guys doing information architecture, they tend to start the project off with handing over wire frames or prototypes to me. Then once I’ve finished my bit I then hand over the designs to our front end developers who then code up the HTML and CSS. As I say we do overlap a bit more than that but that’s basically how it works.

Paul Boag: I’m quite interested in how that works. You are saying you don’t do too much HTML and CSS, or how does it work.

Paul Annett: I don’t do a lot right now, I used to when I was freelance before joining clear:left. I used to do pretty much everything on a project. I don’t do a lot now; I don’t really have time to. The occasions when I do get time to are when we are working on our own projects. I especially seem to have had a bunch of project holding pages or client holding pages in the past where Natalie and Jeremy who do the front end are busy doing other projects and we need to just get something up there while the design is being made. So I will code up that kind of thing. I don’t really get to work on a lot of the big life projects, but then I’m no where near as proficient as Natalie and Jeremy are at those kind of things. I think they would have a fit if they considered my code going live.

Paul Boag: See that’s quite interesting, isn’t it? You’ve begun to build a bit of a reputation as somebody that does-I don’t know-CSS embellishments for want of a better word on some of your designs. You know the kind of thing that other web designers go oh. The most kind of well known example would be the Silverback holding page where you have the clever resizing background How did that come about? Where did that idea come from?

Paul Annett: It comes from… it’s fortune, really, that I happened to be building that page because it was one of the holding pages. I always look for something unusual to do, or something that’s going to catch someone’s eye, that kind of thing. That particular technique was quite appropriate because the site has quite a niche audience, in terms of web designers. People who wouldn’t necessarily pick up on the subtleties and things that I like that are in there, they’re like hidden gems, wouldn’t care. Web designers seem to catch on to that, it’s something they haven’t seen before. The particular technique itself was just a happy accident, really, because I virtually designed the site, it’s a very simple little holding page with the gorilla icon, designed by Arch Nemesis podcaster, John Hicks.

Paul Boag: Well he designed our logo as well so he can’t be that arch nemesis

Paul Annett: That was fantastic drawing on it’s own. But then when I put the vines there, I was just thinking finally give it some kind of depth. I was fiddling around with some of the CSS, and because I don’t know, this is a benefit, because I don’t know CSS like the back of my hand. I do sort of dip in and out. I might make mistakes. Those mistakes might accidentally do something that makes me go oh hang on maybe I can actually use that for something, which is what happened in this case. I happened to position the only layer of vines that I had a percentage off the screen. It moved in relation to the grid. That got me thinking, well maybe I can do this with multiple layers of vines. I didn’t think much of it at the time, but I happened to mention that I had launched the holding page on twitter and a few people.

Paul Boag: All hell broke loose.

Paul Annett: Yeah the few people that follow me thought oh that’s nice and they twittered it, and other people twittered it. Before we knew it, a day later, we had 25,000 views on the web site and we were thinking wow we’ve hit something here. 50% of those people signed up for more information about our product, which it didn’t even exist yet, and the web site didn’t even say what it’s about. So they were just intrigued to find out more based on the what they had seen.

Paul Boag: So that caught you very much by surprise then?

Paul Annett: Oh yeah We were kind of overwhelmed. If it had been, in an anyway, some kind of planned INAUDIBLE machine, then we would have waited until we had actually started building the app probably. We had over 10,000 people signed up for something we were thinking we’ve really got to pull something out of the bag here. Hopefully we did.

Paul Boag: Well you do have very good feedback on it. That really demonstrates well the power of design, that even something that, let’s be honest, is maybe, gimmicky is not the right word but you know, isn’t fundamental to the functionality of the site, yet had a huge marketing impact. So it was very worthwhile.

Paul Annett: Exactly. These things, they are gimmicky. They’re things that people come back to and play with and just want to fiddle around and look at it again. They don’t mean anything. The idea is that they entertain me and maybe some other web designers. It just happened that it entertained 25,000 web designers.

Paul Boag: Is this something that you do regularly? Do you sneak things like this in a lot?

Paul Annett: It is something that I like to do, as I said, to entertainment myself. But I do now look for places where I can sneak these things in. I think I’ve always done it really. I always strive to do something unusual. Back in the days of my freelance site, which is nice-design.co.uk, which is still there but not updated since IE8 so if you are using IE8 it will break. Even then, that was one of the first sites where the header and the sidebar were fixed and it was only the content that scrolled. It’s an unusual thing to see, other than the framesets, obviously, back in the day. I always try to sneak these things in. And when I’ve been working here at clear:left, last year’s de-construct site where we snuck in an Easter egg. There’s a style switch on it, I don’t know if you saw it, but when the site launched it was like a wire frame and along the top there a time line which said the progress of the site as it was being built. It was played as if it was being built live as the event got nearer. The time line at the top was actually a style sheet switcher and we deliberately hid the mouse cursor and made it not look like a bunch of links so that if people found it by chance then they would be pleasantly delighted at the surprise of these extra designs on the site that they’d found. Actually we had a few people email us and say terrible usability, they don’t look like links and the mouse cursor doesn’t look like a hand when you move over them. They kind of missed the point, it wasn’t supposed to look like a link, it was supposed to be a hidden little gem for people to find. That got good feedback as well.

Paul Boag: It’s that creating a sense of satisfaction from a user that they found something special or you know, it’s that little bit of wow factor.

Paul Annett: Yeah. When people are then able to say their friends oh go on look at this, then they feel like part of an exclusive little club of people that are in the know. Definitely.

Paul Boag: You talked a lot of the Silverback example of how basically that came about because you were fiddling with CSS and then something didn’t behave as you expected it to and you saw some potential in there. So that was very much a technology driven way of coming to it. Is it always like that or are sometimes these things planned in from the start. I guess in others words, do you have the ideas and implement them or how does it happen?

Paul Annett: It really varies. Sometimes it’s design driven, like with the de-construct site last year, that was design driven and we wanted to have something which resembled the process that building a web site out there. The silverback one was kind of technology driven but also slightly design driven because I wanted to give it that depth. To take that one step further, I’ve used the same technique on the UX London site. UX London is another conference were running next year in June, uxlondon.com. The technique that I used on silverback is reimplemented there. There’s no three dimensional movement or anything like that, but as you resize the window, the logo changes color. That’s just done by having a transparent window through the logo in the shape of the U and the X, so as you resize the window, the background color behind the whole page slides sideways and changes the color of the logo. This kind of this could be done with Flash, it could be done with Java Script, but I don’t know Flash, and I don’t know Java Script, so it is me trying to find my own little work around and quirky way of doing things really.

Paul Boag: I guess the thing that you know when you start thinking about these things is browser support. Some of these things you are doing are kind of either very advanced CSS or very hackerish CSS so either way you come up with browser support issues. Do you worry about that or is it just that they’re extras and it doesn’t really matter.

Paul Annett: Well fortunately because the audience for the sites that we’ve done in this sort of extreme way are web designers so you know they are going to be using the latest browsers. They’re going to be using firefox and they’re not going to be using IE6. We wouldn’t go to that sort of an extreme on a client web site and everything that we do, everything that leaves our doors is valid CSS, valid HTML. It wouldn’t be allowed not to be if you know what I mean. We’re very standards aware as a company, but I do like to kind of push the boundaries on things a little bit and see what I can get away with. Not in anyway inaccessible, but just not very conventional and if it doesn’t work in IE6 and doesn’t work in other browsers then as long as we implement something that looks the same but without the effects then that’s fine. The silverback site, if you look at it in IE6 is just a gorilla in front of some vines, no movement, nothing lost. Nobody coming to that site will be like there’s something missing here, but they just won’t get that extra little embellishment.

Paul Boag: It’s that graceful degradation.

Paul Annett: Progressive enhancement really. Most people that do have the technology get the extra stuff. This isn’t a company policy, but personally I’m usually in the favor of, I’ve seen quite a couple of sites recently that had a browser upgrade nag bar where if you’ve got IE6 then it says hey just upgrade your damn browser, you’re missing out on stuff. We’d never do that, we wouldn’t put that on a client site here, but I might put that on my own site. I haven’t, but I might.

Paul Boag: Sounds like a good idea to me. What’s the kind of process you go through in getting these extras added in? Are they kind of planned in from day one. When you, say for example, did the UX London web site, did you have it in your head right from the beginning that you wanted to do this with the logo, or something occurred to you further down the design process? When did it happen, is it in the design stage, the build stage?

Paul Annett: With that particular one, that was something that I tried out on a previous site. It didn’t really work 100% and we thought we’ll do something else with the site. But I had it in the back of my mind that I wanted to do it from the start on that project. But in general, again it varies really. If, sorry to be so vague and unspecific.

Paul Boag: No no, that’s the nature of design isn’t it?

Paul Annett: One thing I do advocate is that with all our client’s stuff, as well as our own stuff, I always present mock ups in a browser. I never send out a JPEG of mock ups to clients because for start, they are going to view it at the wrong size, they are going to look at it in preview or some kind of windows equivalent, image viewer, and it’s going to be resized to fit their screen, so they’re not going to see it in the context of the web site anyway. Not only that, but it also gives you the opportunity to actually build part of the site so you might have the header as a flat JPEG and the footer as a flat JPEG and the left hand side as a flat JPEG but the right hand side, where you want some kind of interactivity, you could spend a little bit of time building that so that it kind of explains to the client that this is what I want to happen here, roughly. Obviously it wouldn’t be the final thing because you don’t want to invest that much time up front, to give them that little bit of insight. That’s what I do when I am building holding pages or whenever I do get the opportunity to do something like that in house here is that I’ll code up some bits I think is the unique, gimmicky bit of it, and all the rest will just be a flat JPEG. It’s just to sell the idea internally, if you like, and to have everyone gather around my Mac here and ridicule me and laugh at you.

Paul Boag: It makes sense that more and more web design that we are doing these days has got so many interactive elements with use of Java Script and various other things, that a static JPEG doesn’t always cut it anymore does it?

Paul Annett: No, exactly. Another thing we do to combat that here at clear:left is that we often build prototypes of a site, instead of having like a paper wire frame which we often do as well but if there are interactions that need to be explained to the client we’ll build a flat wire frame of it in HTML just using framework and Java Script libraries and simulate the AJAX side of things just with hard coded Java Scripts. It’s also not production quality code, but the prototype wire frame and the flat JPEG combined will give the client a better idea of exactly how the finished site will be.

Paul Boag: Sounds good. We’ve talked a couple of time about is this gimmicky, is this not you know… I’m quite interested as where you feel the line is drawn between good design here and tipping into that naff gimmick area. Do you know what I mean?

Paul Annett: Yeah. There are a couple of things that haven’t seen the lights of day yet, which maybe they will one day. I guess it depends on how much time it’s going to take and how much value it gives us at the end of the day. Using a similar kind of thing with positioning elements we’ve got these great big letters in the clear:left office and we regularly rearrange the letters that spell clear:left to spell different words on the shelf at the office. To simulate this online I’ve built a little page which has got the word clear:left across the page when it’s at full screen at 1024 pixels wide and as you resize the window all the letters swap places because they’re all positioned at different places at different percentages off the screen, blank bits of image and all this complicated CSS positioning going on. When you reach 800 pixels wide it says elf:cartel. So it doesn’t have any fundamental reason or… it doesn’t do anything, it’s pointless, so it’s not going to be anywhere probably. But that is too, possibly gimmicky. There are some ideas which are not necessarily web based which are gimmicky but do work like when we were planning this year’s de-construct and INAUDIBLE wants to get some silverback promotion in there. I talked to him why don’t we just have a gorilla one day running around dishing out silverback branded bananas. Everyone laughed and thought it would be stupid, and then we did it. And then it was really successful and everyone loved it. Yeah, it was a bit of a gimmick but again it kind of fitted with the brand so it worked.

Paul Boag: It’s a fine line isn’t it, you walk in things like that? Because you know you could have been absolutely ridiculed for something like that. How do you know what is going to go down well and what’s not? I guess you don’t.

Paul Annett: Yeah, luck. I was ridiculed for that here in the office but we went with it and it seemed to work. It was great fun.

Paul Boag: I’ve seen pictures. It looked entertaining if nothing else. Going back to the online stuff, even if you develop something like that, it never sees the light of day, you never know that technique may come in use in a future web site that you develop and it might be appropriate.

Paul Annett: Yeah there’s always like a library of that stuff that we’ve kind of half developed and ideas that we’ve got, notes, that kind of thing. It might well see the light of day in the future

Paul Boag: Let finish off with just a kind of general advice that you like to give designers out there that they look at some of the cool little things that you do and they think I’d really like to do that but I don’t want to just go out and copy him because there’s nothing imaginative in that. I want to kind of get into that mentality of looking for opportunities to do this kind of thing. What advice can you give them? How can you start them off?

Paul Annett: There’s loads of stuff that’s come out as a result of the silverback hype, if you like. There was an article that I did on ThinkVitamincom which kind of explains how to achieve that technique. People have taken that and done all sorts of other things with it. I’ve seen someone creating moving 3d images and that style of a zoetrope(?) toy thing, which uses the same kind of principles but applied in a different way. So by all means, the best advice in all cases of web design is to look at the code, see how someone else has done something and see how you can adapt that to your own stuff. One thing that I really rely a lot on is, especially in these hidden Easter eggie things, is alpha transparency and thinking of how you can create a window through the front layer of a web site so you could have, instead of having a white background on the web site, put a white foreground layer with a window through it, shaped in the shape of whatever, and see how you can make that interact with the background layer so as you perhaps scroll down the page something becomes visible through this previously invisible transparent window. There’s a site called webleeddesign which does this brilliantly. That’s my ultimate, I would have loved to have made something like that, it’s really good. Only that one page, but it’s really nice with that alpha transparency in the front there. Think about what you can do with resizing the text on a browser so-we redesigning the clear:left site at the moment, hopefully it will be online soon-now I’m giving up an Easter egg that’s coming up on it.

Paul Boag: No one listens to this podcast so it’s fine.

Paul Annett: There are certain things hidden on certain pages and if you bump the text size up a couple of points then those things would become visible because of course you can control the position of things based on ems. As you resize things, your font size gets bigger, it perhaps moves in relation to the other things and things begin to peak out from behind something that was previously in front of it. I play around with that kind of thing a lot. That’s the advice I’d give you in terms of this particular way of doing things.

Paul Boag: That’s some great advice there, there’s lots of possibility. I like what your saying that it only takes a small number of techniques, you talked about transparency there, you talked about the background stuff, and you talked about the font resizing, but the possibilities of just those three things are endless really. You could do all kinds of things with them.

Paul Annett: Exactly, combine them in different ways. Again someone take this and do something with it, but imagine a line going diagonally across the screen but in font of that you’ve got a completely white page and across that white page is a very narrow slot of transparency, so if your line starts at the top right hand corner all you see is a dot in the top right hand corner but as soon as you start scrolling down the screen, that dot moves to the left because it’s visible through that hole. That’s a very basic example of how you could use windows of alpha transparency interacting with the background to do something which moves horizontally as you scroll vertically. I haven’t done anything with that yet as I haven’t thought of anything good to do with it but maybe someone can.

Paul Boag: That’s absolutely brilliant Paul, there’s some really good advice in there and thank you for taking the time to come on the show. I hope we can get you back on before too long.

Paul Annett: Thanks. Thanks very much for having me.

Thanks goes to Troy Oltmanns for transcribing this interview.

Back to top

Feature: Improving your site with user feedback

Users can be invaluable when deciding how to move a website forward. We should always listen to what they say. However, sometimes that is easier said than done. Read more here.

Back to top

136. Stagnation

In this week’s show we talk about overcoming stagnation and Ed Merritt shares a technique to achieve fixed footers without the use of javaScript.

Download this show.

Launch our podcast player

News and events

Design by committee vs design by community

We all know that design by committee sucks, but why? What is it that makes the process fail and what would happen if you took it to the extreme, and opened up the design process to an entire community?

That is exactly what Mark Boulton has done with the redesign of the Drupal website. With over 200,000 registered users this is a significant community and not the kind of environment where you would feel inclined to design in the open.

However, according to Mark it has generally been a success.

The key would appear to be scale. In design by committee you typically have a handful of decision makers, and one or two dominant individuals who overwhelm the others. It is an environment of conflict and compromise.

However when designing by community, the sheer scale of the community drowns out anybody who seek to dominate the process. You move from an environment of personal opinion to one where you are monitoring emerging trends.

So next time you have a client wanting to design by committee, consider opening up the process rather than locking it down to one or two decision makers.

Self Directed Projects

When was the last time you worked on a personal or internal project? Do you do anything that is not paid client work? If not, then according to IdeasOnIdeas you should start.

This post interviews several designers about their their non-client work. It becomes obvious as you read that self directed projects offer real tangible benefits. These include…

  • R&D – The chance to experiment with emerging technologies and techniques, that otherwise you would not get to try out.
  • Build visibility – Higher exposure online as people are attracted to your work.
  • Prove capability – Demonstrating your ability to deliver solutions not in your portfolio of client work.
  • Increase skills – Allowing you to improve your skills in areas where they are weak or have not been maintained.
  • Team building – Building a sense of common purpose among your team in a way that is more engaging than client work.
  • Creates passion – Allowing you to work on a project that generates excitement rather than ones that simply pays the bills.
  • As a release mechanism – The chance to play, and let off steam after the limitations of client work.
  • After years of spending all my time on client work, I have now reached a point where most of what I do is self directed and I can honestly say it is a joy. I also think it has been hugely beneficial for Headscape.

    Understanding Disabilities when Designing a Website

    Back when I was a teenager the government launched a massive campaign warning of the dangers of unprotected sex and in particular the risk of contracting HIV. It was a very powerful campaign and led to a generation growing up much more aware of the risks. However this campaign wasn’t followed up for the next generation and the rates of sexually transmitted diseases increased.

    Why do I bring this strange analogy up? Because I believe we are in danger of doing that with web accessibility. Many of us are getting bored of talking about accessibility. It feels like we are covering the same old ground. Why do we need another article about accessibility basics? We have heard it all before, right?

    Well maybe some of us have, but there is a new generation of web designers who have not. They need to know what we take for granted. Also, it wouldn’t hurt us to be reminded every once in a while.

    That is why I was so pleased to see Digital Web publishing an introduction to accessibility this week. Sure we have heard it all before and you might be tempted not to bother looking it up. However, I would encourage you to take the time. I guarantee it will give you at least one piece of advice which you fail to implement currently.

    More ways to find inspiration

    I often talk about how we need to look for inspiration beyond the web. In fact in this weeks Smashing Magazine, they post some incredibly inspiring graffiti that is worth a look. But, can we be inspired by other websites or does that always end in plagiarism?

    It’s a dangerous game when you start turning to gallery sites for inspiration. Before you know it you can find yourself lifting far too much of the design.

    How then can you be inspired without ripping off somebody else’s website? One way is to look at the design and ask yourself which specific elements you like. Is it the navigation, their styling of bullet lists or the way they handle the footer. By looking at individual elements rather than the whole you remove the temptation to copy the entire thing.

    This is what a designer from Portugal has done. He has made screen grabs of websites and placed them in his flickr account. However, rather than grabbing the entire site, in most cases he captures only a fraction of the page. He removes the temptation to steal a whole design and yet provides himself with inspiration next time he needs to design a comment form or build an online calendar.

    Take a look at his inspirational flickr feed and hopefully it will encourage you to take a similar approach.

    Back to top

    Feature: Overcoming Stagnation

    For many websites the days of rapid growth have passed and they have slipped into stagnation. How then can you re-energise a site and start it growing again? We look at this in this weeks feature.

    Back to top

    Listeners feedback:

    Fixed Footer without javaScript

    Ed Merritt (one of our very awfully clever designers at Headscape) has come up with a innovative little CSS technique I have encouraged him to share with you.

    Ed begins…

    A client recently asked me if it was possible to have a page footer which would stick to the bottom of the browser window if the content didn’t fill the window, but behave normally (i.e. be pushed down by the content) when the content was tall enough. Read more here.

    Back to top

    Fixed Footers without JavaScript

    Ed Merritt (one of our very awfully clever designers at Headscape) has come up with a innovative little CSS technique I have encouraged him to share with you.

    A client recently asked me if it was possible to have a page footer which would stick to the bottom of the browser window if the content didn’t fill the window, but behave normally (i.e. be pushed down by the content) when the content was tall enough.

    This footer behaviour is not a new idea; I’ve seen it on a few sites over the years, the most well known probably being version 7 of Shaun Inman’s site. Take a look at the ‘Work’ page with JavaScript enabled, then disabled to see the effect in action.

    I suspect that this behaviour, which can look great in the right situation, has not been widely adopted because existing solutions have always relied on JavaScript for what should be a simple presentation issue.

    The technique described in this article is purely a CSS solution and works in all modern browsers, tested down to IE5.5.

    Firstly, here’s a demonstration.

    The HTML

    <div id="container"> <div id="content"></div> <div id="footer"></div> </div> 

    The CSS

    *, body {margin: 0; padding: 0;} #container {display: block; position: absolute; min-height: 100%;} #content {display: block; margin-bottom: 3em;} #footer {position: absolute; display: block; bottom: 0; height: 3em } 

    IE6 Stylesheet

    body, #container {height: 100%;}

    this should be referenced using a conditional comment:

    <!--[if lt IE 7]> <link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen"   /> <![endif]-->

    How it works

    As you can see, the mark-up and styling are pretty simple. Here’s a quick run-through of what’s going on…

    • #container is set to be at least as tall as the browser window using min-height and although IE6 doesn’t understand this, it treats height in exactly the same way. #container must be positioned absolutely, or this will not work.
    • #footer is positioned absolutely at the bottom of #container
    • #content is given a bottom margin equal to the height of #footer to prevent the two ever overlapping.

    Known Issues

    The simplicity of this technique makes it fairly reliable and the only real issues to consider are for IE6 and below. For these browsers you’ll need to specify any additional containers as also having a height of 100%.

    For example, if your mark-up was:

    <div id="extraContainer"> <div id="container"> <div id="content"></div> <div id="footer"></div> </div> </div>

    In your IE specific CSS you’d need to specify:

    body, #extraContainer, #container {height: 100%;}

    Conclusion

    This is a nice and easy solution to those unsightly gaps below your footers and while it won’t be appropriate for every site, it might come in handy from time to time. Please let me know if you find any problems with it.

    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

     

    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

    Question: Headscape tabs

    David Bridle writes: How did you get the tabbed menu to work in the headscape website? 

    The navigation on the Headscape website is built using the Javascript library jQuery. I have mentioned jQuery a number of times before so I won’t bother to repeat myself here.

    I don’t claim to be a javascript expert but I have made Headscape as accessible as I know how. I am sure there will be people out there that could have done a better job but I will share what I did (for better or worse).

    I am not going to get into too much code as I am not the right person to teach that. I also think it is more important to show you the techniques rather than post code that can be copy and paste into your own site. If you want to learn how to actually reproduce what I have done then I recommend the excellent documentation on the jQuery site or the designers guide to jQuery.

    Choosing AJAX

    It was important to me that the content found under each tab was accessible with Javascript disabled. My initial thought was to include all of the tabs in the page load. However, it quickly became obvious that this would make the download too large and would not allow for adding content in the future.

    Eventually I concluded that I wanted to use AJAX. Using Jeremy Keith’s HIJAX approach I built one page for each of the case studies found under the tabs. I then linked to these from the homepage tabs using normal hrefs. Clicking on each tab would load the appropriate page.

    Screenshot of Headscape website with Javascript disabled

    Each of these individual pages were complete with a header and footer as well as the content I wanted to include on the homepage.

    The Javascript

    The next step was to create some javascript which prevented the default action of loading the entire page, and instead load only the portion I wanted.

    This was achieved with a function that was triggered on clicking each tab. The function was attached unobtrusively (rather than included in the HTML itself) so I could easily remove it later if I wanted to alter the way the site worked.

    The function carried out the following actions:

    • It captured the url of each link
      $("#csMenu a").href
    • Append to the links the specific element I wanted to import using AJAX
      var addr = $("#csMenu a").href + " #caseStudies
    • Load that content into the appropriate place on the page (which had the id = csCont)
      $("#csCont").load(addr)
    • Applied some of the inbuilt effects in jQuery to make the animation fade in and out.
    • Prevented the default action
      return false;

    In reality it was slightly more complex because I needed to trigger additional functions to add a popup facility to some of the links within the imported content. However, fundamentally that was it.

    The problem with AJAX

    The only problem that remained were screen readers. Although the site worked with Javascript disabled the use of AJAX would confuse screen readers. Without getting too technical Screen readers are able to run Javascript but don’t always realize when AJAX has updated the page.

    A lot of people cleverer than me have been struggling with this issue and failed to come up with a solution. That is why some developers such as Brothercake recommend against the use of AJAX.

    I had good reasons for the choice of AJAX (which I won’t get into here) and so had to find a solution. This ended up being a simple hidden message telling screen reader users to disable Javascript. Thisl enable them to navigate the additional pages without problem. This message was the first item within the body tag and was hidden using CSS so it was only heard by Screen reader users.

    No doubt I will receive criticism for this decision and to some extent rightly so. It presumes users know how to disable Javascript in their screen reader. Even if they do, it is not an ideal solution. Users should not be required to change preferences before they can view a site. However, the state of screen readers is far from ideal either, and it is was the best compromise I could find.

    So there you have it. That is how I produced the tabs on the Headscape website. I would be fascinated to hear what other approaches people would have used. How could I have done it better?

    109. Rissington?

    On Show 109. IE8 divides the web design community, Anton Peck talks about imagery, and the Rissington Podcast crew stand in for Marcus.

    Download this show.

    Launch our podcast player

    News and events | Anton Peck on imagery | Listener emails

    Unfortunately Marcus is not yet back on active duty but does thank you all for your kind support. However, do not fret. You do not have to endure another show of me waffling on by myself. Stepping into Marcus’ still warm shoes are two giants in the world of web design and podcasting. From the infamous Rissington Podcast we have Jon Hicks and John Oxton.

    News and events

    Microsoft to automatically roll out IE7

    First up I was sent an article by several listeners which seems to indicate Microsoft is intending to do an auto-update of Internet explorer on the 12th February.

    When IE7 was initially released Microsoft made the decision to make the upgrade to their latest browser optional. So even though a user had requested automatic updates they would not receive IE7 unless they specifically approved it. This decision not to force users to update frustrated those in the web design community who wanted to wave goodbye to the evils of IE6.

    However, it would now appear Microsoft has decided to take the plunge and will be rolling out IE7 as part of the automatic update. Not all users are signed up to receive these updates but those who are will be using IE7 from February 12th (if they are not already).

    Expect to see a significant decline in IE6 users to your site very soon. Perhaps it will not be long before IE6 follows IE5.

    IE8 divides the standards community

    Talking of Microsoft and Internet Explorer, probably the biggest story of the week is Microsoft’s plans for IE8.

    IE8 promises to be a huge step forward in standards support and has been significantly rebuilt in order to enable this. However, such dramatic changes in their rendering engine comes at a cost. They fear that by becoming more standards compliant they will break many websites which are not built with standards in mind.

    The way they have dealt with this problem is to introduce a small piece of code that you drop into your pages which can be used to specify what version of IE your site is designed to work with. The browser then renders the webpage as if it was that version of the browser. So for example you could specify that a page was designed for IE7 and a person viewing the page in IE8 would see the page as if it was rendered in IE7.

    If no browser is specified then it defaults to rendering the page in IE7 that way no matter what changes Microsoft make in future browsers legacy sites are still rendered correctly.

    What on the face of it seems like a very sensible plan has caused uproar in the web design community. A List Apart and Eric Meyer seem to be generally supporting the principle while many others including the likes of Jeremy Keith strongly object.

    One of the main sticking point seems to be that this approach breaks progressive enhancement. In other words I may choose to implement a piece of functionality on my site knowing that it wont currently work in IE7 but does work in other more compliant browsers such as Firefox. If i don’t add this special code when IE8 comes along it will look at my page see the code is absent and so render it as IE7. That means even if IE8 supports the functionality now it wont use it because it is rendering my site as IE7.

    Its a complex issue with good arguments on both sides. In next week’s show Eric Meyer and myself will discuss it in more depth.

    HTML 5 is coming

    Still on the subject of the future of web design we now turn to HTML 5 which has just been released in draft format. Sitepoint provides a nice little summary of what is in and what’s out. There is also a summary of the differences between HTML 4 and 5 which is very useful as well.

    I cannot claim to have read the entire specification yet but I have to say what I have seen contains some exciting stuff. Having HTML tags to define common areas like headers, footers and navigation offers some interesting possibilities and its good to see built in support for video and audio.

    The big shame is that practical application of this is still a long way off but its nice to know that there is potential there.

    Career advice for web designers

    Of course all these upcoming technologies wont matter to you if my predications of a couple of weeks ago come true and we all find ourselves without a job! This week I was pleased to discover I was not the only one with a pessimistic attitude towards the coming year. Robert Scoble has posted a entry entitled “what to do if you are laid off in 2008 recession“, which I thought was a particularly cheery title.

    Actually it is a really good post with some excellent advice. What I like most about it is that the advice applies as much to a student trying to break into web design for the first time as it does to a out of work professional.

    In fact if you are considering a career change of any kind (or have had one forced upon you) then this is a good read.

    Advice includes…

    • Spend at least 30% of your day job hunting
    • Start a blog
    • Share your knowledge with the world
    • Demonstrate your skills on youtube
    • Networking
    • Contact web start ups because they are hiring.
    • Volunteer
    • Prioritise friends and family

    The list goes on and is definitely worth reading.

    Back to top

    Expert interview: Anton Peck on imagery

    Paul: So joining me today, as I said at the start of the show, is Anton Peck. How are you Anton?

    Anton Peck: I’m doing great Paul. Thank you.

    Paul: It’s good to have you on the show.

    Anton Peck: I know. It’s about time isn’t it? *laughs*

    Paul: It seems like it’s been a while. We haven’t actually had you on BoagWorld before have we?

    Anton Peck: No, no. This is the first time.

    Paul: But I’ve known you from… Where did we first meet? Was it South By Southwest?

    Anton Peck: Yeah. I think we had sorta done virtual communication before then through email, IM or whatever. But we actually first met at South By Southwest last time.

    Paul: Cool. So Anton, tell me and the listeners a little bit about yourself. How do you describe yourself? Do you primarily describe yourself as a web designer or an illustrator?

    Anton Peck: That’s a tough call. The illustration is more my fancy, my hobby. It’s where my passion lies but the design is what I’ve been doing for a long time. So it’s sort of my trade of skill.

    Paul: I see. So you’re kind of torn between two worlds.

    Anton Peck: A little bit.

    Paul: But fortunately those two worlds do overlap quite a lot which is why we have you on the show today. We thought it would be good to get Anton in really not to just talk about illustration but to talk about imagery on the web generally as that’s kind of his thing really, amongst many others, because you have a growing reputation. You do art-casts don’t you which are like illustration tutorials? Is that a good way to describe them?

    Anton Peck: Yeah, that’s probably a good way to describe them. That is the rumor that I do those isn’t it. I don’t do them as often as I should but I do manage to get them out every once in a while.

    Paul: And they are excellent. I have to say, I really do enjoy watching them. So let’s talk a little about imagery on websites and the use of imagery on websites. Let’s start off with a really nebulous and broad question that I guess is pretty impossible to answer but I’m going to ask anyway, which is what makes good imagery for a website? How do you go about picking imagery for a website?

    Anton Peck: Well there’s a few things and some of them might seem obvious. First of all the images should complement the content of the website so that the substance isn’t too diluted from its original intent. I know that might seem kinda out there and obvious but it’s probably disappointing and surprising that there’s a lot of website owners that would want to put an image on a website because it’s really pretty or cool.

    Paul: I guess it’s important to have imagery that relates to the branding or message you are trying to communicate.

    Anton Peck: Right because imagery is meant to support the content rather than take away from it. You don’t want to pull everybody’s focus right away to the images but at the same time you want to support what’s already there. The images should have some interesting quality about them which could mean how well they have been cropped or resized. They should be saved at a pretty decent quality if they are JPEG’s or GIF’s. Not over compressed as they can sometimes diminish the personality of the website. When you go to a website and you see that it’s over compressed it really doesn’t look very good.

    Paul: So for a relative newbie, an amateur that’s getting into web design, there’s always this question of GIF vs. JPEG. What do you use and when?

    Anton Peck: Well for photographic style images that have a lot of… I would say colours but that’s not quite accurate but more photographic style images I would use JPEG’s. Then for images like logos, things that seem very flat and have a limited palette, maybe go with the GIF’s. Although I tend to do that a little bit less now that PNG’s are finding a little bit more broad support among browsers.

    Paul: So do you use PNG’s very much?

    Anton Peck: Every so often. They compress nicely especially when you use the adaptive palette which is similar to a GIF format but they can actually get a little bit smaller.

    Paul: Cool, yeah. That’s been my experience as well.

    Anton Peck: It just gets a little tricky when you are trying to do transparency.

    Paul: Yes, exactly.

    Anton Peck: That’s a whole other discussion.

    Paul: Yeah, I don’t think I’m going to open that can of worms today. So any other tips for selecting good imagery?

    Anton Peck: Well I would say it’s got to be appropriate and tasteful of course. So that way you can minimise the risk of offending someone or losing possible business. If you might have a certain sense of humour and want to put something on your website, you might have to watch out for how that might appear to someone else.

    Paul: And I guess cultural considerations come in there as well. It’s easy to forget that the worldwide web is worldwide.

    Anton Peck: Definitely.

    Paul: The next big issue that a lot of people face is this whole kind of stock imagery kind of question. You reach a point where your website’s becoming relatively important to your business or you’re a web designer that’s working for certain clients. At what stage do you say that actually stock imagery isn’t the way to go, perhaps I should be getting something specifically commissioned whether that be commissioned illustrations, commission photography or whatever. It’s a difficult line. What’s your opinion on stock imagery? Is it the devil’s spawn or does it have a place? What do you think?

    Anton Peck: No, I think it definitely has a place. It offers a great solution for those trying to find a good quality image when they can’t afford a commissioned photograph.

    Paul: So what kinds of site do you use for stock imagery?

    Anton Peck: I’ve been a fan of Crestock.com lately.

    Paul: Ooo! I haven’t heard of that one.

    Anton Peck: Yes and actually they have this huge contest going on where you can win a Mac Pro and all kinds of equipment. It’s a Photoshop contest and I happen to be one of the few judges on that particular site.

    Paul: Ahh. So what’s this website again?

    Anton Peck: It’s Crestock.com.

    Paul: OK. I’ll check that out. Sounds good. So does that do both illustration and photography or…

    Anton Peck: Yeah. They have a wide range of different material. They have background textures and you can search for pretty much anything there. A lot of it is user supported so if you even feel that you are a good photographer you can submit your work and see if you can even sell it and make a little bit of money off of it.

    Paul: Oh cool. So when selecting stock photography, what should you look for? What should you avoid? The trouble with stock photography is a lot of it can look really similar to one another. What advice would you give about selecting stock imagery?

    Anton Peck: Well there’s no real secret to it. There’s not a lot of advice either other than just go through a lot of it. Don’t try to find the very first searches you come across as that would be a higher chance it would be used somewhere else. You want to get a unique image, something that’s probably not as commonly found. It’s always a little disconcerting when you come across a new image that you see on 13 different sites like, “Oh that’s the same image used there”.

    Paul: Yeah. It becomes obvious that it’s stock imagery.

    Anton Peck: Right. So you want to find that unique image.

    Paul: Yeah, couldn’t agree more.

    Anton Peck: And the only way to find the perfect, unique image is to just go through a lot of it.

    Paul: Yes! Which does take time doesn’t it.

    Anton Peck: Certainly.

    Paul: When it comes to commissioning stuff is there any particular advice you would give there in regards to briefing the photographer or the illustrator? I mean when somebody commissions you to do a piece of work, what kind of information are you after from them?

    Anton Peck: Since they would commission me as an illustrator rather than an actual photographer, I’d mainly look at what they are trying to achieve for their website and how they expect it to support what they’ve done. One of the things that I was gong to talk about for commission photography, even though I’m not one, was the benefits for the websites because you can have a one of a kind image that fits exactly what is needed for the page. A photographer can come out to the business and take photos of the staff and location which is obviously something you can’t do with stock photos.

    Paul: Yeah, which obviously makes a huge difference. I think often at times people actually want to see that kind of stuff because on the web you’ve got no way of judging what the company behind the website is really like. So to be able to see real imagery of real people and real locations does add some credibility and trustworthiness to a company. It’s not just somebody working out their back bedroom or whatever.

    Anton Peck: Exactly what I was thinking, yes.

    Paul: OK so you have a budget. How much difference does it make actually commissioning imagery rather than getting stock imagery. Is there really a difference? Is it really worth going out and getting stuff specifically commissioned?

    Anton Peck: I would say if you are looking to get high exposure and if you were a big enough business I would definitely say do it.

    Paul: So why is that? What difference does it make?

    Anton Peck: Well that’s exactly what I mentioned earlier. It’s the one image that you are going to own or the website is going to own and it’s not going to be found anywhere else. Completely unique.

    Paul: You do feel that when you go through these thousands and thousands of stock images that “Well, it’s pretty much unique. Who else is going to use it?” but it’s amazing how often images turn up. I’ve got a little program that changes my desktop image on a regular basis and I’ve had this really nice one that I loved and kept for a while which was a cityscape of London that had been made all futuristic and I thought “Wow! What a great image”. And then I’m going on the tube and there’s the same image plastered across the wall. It’s amazing how often they do turn up again.

    Anton Peck: Yeah it’s takes away a little bit doesn’t it?

    Paul: Yeah definitely. Definitely. You’re an illustrator, let’s get onto the role of illustration. What advances or disadvantages do you think that illustration has over photography. When should you be using photography, when should you be using illustration?

    Anton Peck: Illustration’s gonna provide a whole different type of personality to a website that you can never find in a photo. You can create situations, objects, environments that would either be too expensive to reproduce or they just don’t exist in the real world. Things that you just can’t do with a photograph. Again, that’s going to have to be through the interview of the illustrator trying to describe whether the job is appropriate or not. Actually that would be up to the art director trying to commission to decide whether they need an illustrator or a photographer. But custom website illustrations are so unique right now. When you do have a custom illustration it stands out a great deal more than a photograph. I think one of the greatest examples that stands out on the top of my mind would be Andy Clark’s website with Kevin Cornell’s image that he did of that scooterboy, the guy on the scooter.

    Paul: Yeah, it looks superb. That’s stuffandnonense.com, if I remember.

    Anton Peck: .co.uk

    Paul: Oh .co.uk. Well check that out.

    Anton Peck: Just try to imagine if Andy would have reproduced that with a photograph. It wouldn’t have the same personality I don’t think. He wouldn’t have been able to pull it off.

    Paul: So do you think that photography has less personality generally or is it just the stock photography that has less personality?

    Anton Peck: I wouldn’t call it a more or less personality thing as much it would be a different type of personality. It depends on what you’ve going for.

    Paul: Do you think there’s some situations where illustration just isn’t appropriate because it would create the wrong kind of personality or is illustration flexible enough to be able to work in most situations?

    Anton Peck: No I think illustration is not appropriate for everything. I think there’s probably a time and a place where an illustration is not going to do the job of a photograph. The photograph tends to look a little bit more… I was going to say professional but I don’t think that’s the word for it. There’s a sort of business approach… I don’t know. Illustration is very personal. It’s one of a kind. It seems that if you have a corporation maybe an illustration isn’t going to work unless it’s a certain kind of illustration.

    Paul: Yeah I kind of know what you mean. There’s something… A photograph has a kind of… trustworthiness isn’t the right word but a realism to it perhaps that lends itself to certain circumstances.

    Anton Peck: Definitely. It’s really hard to distinguish between the two. It would really boil down to the specific case that it was going to be used.

    Paul: Tell us a little bit about some of the different types of illustration and why you would pick when. Obviously every kind of illustrator has very different styles but are they any kinds of broad categories you would recommend in certain circumstances?

    Anton Peck: Well, let me think off the top of my head. It seems like you have a real nice vector, flowery styles with flat colours like Veerle. Her work is fabulous and it’s all Illustrator. Her style is just so unique. Then I think of Kevin Cornell. His style is so organic and painted. Then there’s styles like my own. I tend to learn for more photorealism in some cases. My own personal gallery doesn’t lean that way too much. There’s a few different styles out there and it’s hard to say when it’s going to be used properly.

    Paul: Do you think that some styles date more quickly than others? You talked about that flowery style where you see a lot of art deco type shapes being used on the web at the moment. Do you think that illustration goes through more fashion trends than photograph does?

    Anton Peck: I would venture to say yes and in a way. However like all fashion trends, it always comes back. Right now the big popular thing is artwork that looks like it’s straight from the 70′s. The muted brown colours and the nice organic curves, swirls and circles, things like that. Those are going over quite well I think.

    Paul: It’s interesting isn’t it. I think there some sites that need to be fashion conscious and on the cutting edge of what’s going on and there are others that need to be generic and long lasting. It very depends on what kind of industry you are in as whether you should follow these trends or not I guess.

    Anton Peck: Right. Or then if it seems to expire then you can just change it out and get a new one.

    Paul: The glory of CSS, the separation of content from design.

    Anton Peck: Absolutely.

    Paul: OK Anton. Thank you very much for coming on the show. It’s really interesting that we haven’t tackled the discussion of imagery before.

    Anton Peck: I did have one real quick public service announce if you’ll let me have another minute.

    Paul: Yeah, go for it.

    Anton Peck: For your listeners I’m wanted to just bring up that they shouldn’t take images, and I know it’s kind of obvious, take images from fountain sites or Flickr or Google Image search. That’s just bad practice and they are normally just going to get found out and it’s not a very nice thing to do. If they find images on sites that they like, they can contact the owner to obtain permission.

    Paul: And it’s surprising. Often the owners are very happy and flexible to accommodate that. If you take the time to contact them they are often very flattered that you asked. Good piece of advice. OK thank you very much Anton and we’ll get you back on the show again in the future. Good to talk to you.

    Back to top

    Listeners email:

    Textmate reviewed

    Teifion shares his thoughts on Textmate for the mac, an incredibly powerful text editor with a sophisticated plug-in architecture.

    I have to confess that I have only opened Textmate once and found myself unsure where to begin. I do know however that Teifion and many other web developers rate it extremely highly and use it as their primary development tool. In the show I pick Mr Hicks and Oxton’s collective brains about its benefits and whether I should make the effort to learn it properly.

    Javascript or JQuery

    The second listener contribution comes from Will who writes…

    I was listening to your last one and you said it would be important to learn javascript for 2008. I know bits of javascript but don’t particularly like it and don’t know ajax yet, however, I have been playing with jQuery and find it much simpler. Do you think it’s a good alternative to learning all of javascript and have you used it at all?

    Personally I think it is important to learn a language from scratch and that relying too heavily on libraries can cause problems in the long run. Although there is nothing wrong with you learning jQuery I would suggest it should be an addition to learning Javascript rather than a replacement.

    If you want to know if Mr Oxton and Hicks disagree with me you will have to listen to the show :)

    To leave an audio comment for the show skype “boagworldshow” or call +44 20 8133 5122.

    Show 93: dconstructed

    On this week’s show: Paul talks about how to make the most of the footer, Marcus explains why cold calling never works and Gary Marshall shares some great advice on writing content.

    Play

    Download this show.

    Launch our podcast player

    News and events | Why cold calling never works | Making the most of the footer | Gary Marshall on writing better content

    News and events

    iPod Touch

    Unless you have been living in a cave for the last week you will already know that Apple has just released a new range of iPods including the massively exciting iPod Touch. What is so exciting about the iPod Touch is that it is basically an iphone without the phone. This means it has WiFi and a fully functional web browser. This is a major development in the web design world as it will mean millions of internet enabled iPods and a whole new audience in a whole new context.

    What is more Apple has also done a deal with Starbucks where by songs played in Starbucks can be purchased directly on the iPod. I am convinced this is just the tip of the iceberg in terms of context / location aware mobile web. It won’t be long before you arrive at a University Campus and access a campus map or go to a shopping mall and access all of the menus of the various restaurants.

    With the iPod being such a universal device now is the time to think about how you are going to utilize the power of the mobile web.

    Free photo manipulation tools

    This week I came across a site stuffed with loads of free photo manipulation tools. These guys have certainly been busy as there are loads of really fun tools including a Mosaic maker, CD cover creator and even a Hockneyizer. However, probably the most useful tool to us web designers is the palette generator. Upload an image and it will automatically create a colour palette based on it. Nice!

    dconstruct feedback

    This last week also saw the dconstruct conference in Brighton. I was fortunate enough to attend it and got to hear some truly remarkable speakers. I am not even going to try and recount all that was said, however I do want to particularly mention three superb talks.

    Tom Coates, gave a mind blowing presentation on shifting our thinking from a website model to a data model and the consequences of this in terms of how we develop applications and how users navigate data. Tom’s presentation really felt like a glimpse of things to come.

    Leisa Reichelt gave an inspiring presentation about how we develop projects. Amongst other things she talked about Agile development and I have to say this was the first time it has been explained in language I understood. This talk definitely made me reconsider how we run projects.

    Finally, I couldn’t mention dconstruct without talking about Jared Spool’s presentation on experience design. Jared (who is a superb speaker) took us through how to create great experience design, explaining why it is important and how to draw together the necessary skills to make your design stand out from the crowd. Compelling stuff.

    The reason I mention all of this is that all of these talks will soon be released as podcasts and I wanted to strongly encourage you to check them out!

    170+ Expert Ideas From World’s Leading Developers

    The final story today is the release of an article on the smashing magazine website. The guys at the magazine interviewed 50 designers and asked them 6 questions. This has led to an article with 175 professional suggestions, tips and ideas.

    Its always fascinating to see how other designers work so this article is definitely worth a once over.

    Back to top

    Marcus’ bit: Why cold calling never works

    Ok, to say that cold never works is a bit strong because very occasionally it does. I should also qualify that I am talking about winning quality web design work here.

    So, a more appropriate, but considerably more boring, title would be: why cold calling almost never works when selling quality web design services.

    But, in my opinion, you don’t really even need to qualify the ‘what’ you are selling. I guess there are certain products or services that can, effectively, be sold over the phone to a person/organisation that you don’t know but I expect they are few and far between.

    The word ‘effectively’, in the last sentence, is pivotal to this. I would love to see the ratio of telesales staff costs against actual sales won via the telesales force for, say, a double glazing company over the last year. The fact that I seem never to be called these days by double glazing companies suggests that my suspicions are correct and it simply isn’t worth it.

    I don’t know anyone who likes being called out-of-the-blue and certainly, no-one who has actually bought anything through this process. I think most people are instantly ‘on guard’ and mistrusting of a cold call. This has worsened, I believe, over time and has now reached the point where it has almost become a joke.

    Anyway, I’m rambling off the point – back to web design.

    You can’t create a project that doesn’t exist

    This is the main issue. Even if you are lucky enough to find a receptive listener, the chances of calling them right at the point where they are thinking about starting a web project is remote. The best you can hope for is that contact will be made later when a real project does happen.

    You may not be talking to the right person

    It is very possible that the one successful call that you made after a day’s banging the phone was actually to a chatty junior who cannot make or even influence decisions. Asking to speak to the ‘marketing director’ or ‘person in charge of the web budget’ etc is a recipe for an instant hang up.

    Even if you are speaking to the ‘right’ person, chances are they will have to go to other partners or directors and that group will want to know track record, where did the recommendation come from etc.

    Making yourself known

    Ok, so you can’t actually win work cold calling but you can occasionally start the process of winning work through a cold call. However, I would say from experience, that this cannot be a completely cold call. You need at least one thing connecting you to the person at the other end – and the direct mail piece you sent them two days ago does not count because they will have instantly thrown it in the bin!

    The kind of things that can make this type of call potentially worth it are:

    • Work done for one of their competitors (vertical selling)
    • Locality (“we’re in the same town”)
    • Professional connection e.g. a print designer you are close to works for them
    • Social connection e.g. my neighbour Dave Smith works for your accounts department and thought I should call you….

    But remember you are simply selling your professionalism, skills and competence; basically, just the chance to pitch for work when it comes around.

    However, I would recommend that the majority of your efforts are spent on a) ‘hot’ calls to people who contact you with real projects and b) your existing clients as they are usually your best prospects.

    Back to top

    Paul’s corner: Making the most of the footer

    This week I thought I would try and tackle a question from Peter in Italy…

    Disclaimer, copyright, accessibility statement and privacy policy; these are the links that can often be found in the footer of a page. Why is it important to add this information on a website and what should this information include?

    The footer is the graveyard of many websites. The place where links are sent to die. However it doesn’t have to be that way.

    Back to top

    Gary Marshall on writing better content

    Paul Boag:
    So, joining me today is Gary Marshal, a technology journalist and author and many other good things as well. Hello Gary.

    Gary Marshall:
    Hi Paul, how are you doing?

    Paul Boag:
    Not too bad, good to have you on the show, we had you on once before as I remember.

    Gary Marshall:
    Yeah it was a couple of months ago now wasn’t it?

    Paul Boag:
    Yeah it was a little while back. What I thought would be good today is to get you on to talk in broader terms about writing for the web, and writing in general, as obviously that’s what you do for a living. That’s your job, and so I thought I’d kick off with really a question about copy writing and copy writers; do you thing website owners should be looking to get a professional copy writer in to work on their website rather than doing so themselves?

    Gary Marshall:
    I think it depends a lot on the website that you have, if your doing something where your unique selling point is a fantastic price for a product, then it probably doesn’t matter too much what the copy’s like, but the more important the text of your site is, the more important it is to have good text. So take for example if your site is a brochure then obviously the quality of copy then is really, really important. There’s also the technical side of writing as well, which is not so much a copy writer but more of a technical writer for that so you know, product information, frequently asked questions, support, that kind of thing.

    Paul Boag:
    What benefit do you get from getting in somebody who does this professionally in preference to trying to do it yourself, where’s the real kind of money earner in it? If that makes sense, the return on investment.

    Gary Marshall:
    Yeah. Well it really depends on what your sites all about. One of the things about getting a professional to do it is it saves you time, the same way you would get somebody in to do stuff around the house because your time is better spent doing what your good at. But particularly with copy writing, if you get somebody who is pretty experienced in this, what they’re doing isn’t so much writing, but its writing that works. So you know a good copy writer can say more in a sentence than your average guy can say in 700 paragraphs, which is one of the reasons that guys in advertising get paid so much, because they come up with these fantastic strap lines that lodge in peoples minds.

    Paul Boag:
    Yep ok that’s fair enough. Obviously the main thing that puts off people from getting a copy writer is the cost associated with it and sometimes its just prohibitive, although I have to say that I get somewhat confused that people recognise they cant do design and they get a designer in to do that but somehow people think they can do copy which is somewhat confusing sometimes.

    Gary Marshall:
    Yeah, it’s not that expensive. If your going to have a multi page, 1000 page website then yeah it is going to cost you a fair whack of cash, but he majority of writers tend to be paid by the word, so you’ll set a rate, and what it is you want to get and the end result isn’t going to be an awful lot of money. Your looking at a couple of hundred quid for a couple of thousand words, its not a lot.

    Paul Boag:
    No I suppose in the grand scheme of things that isn’t much at all is it? If you think of the amount that people pay for content management systems and design work and usability testing and all that other stuff.

    Gary Marshall:
    Provided they’re good at what they do. Of somebody is going to polish the text in your website, and make what you do sound absolutely fantastic, if that makes the difference between somebody hiring you or not or somebody buying your product or not then it’s paid for itself.

    Paul Boag:
    So, making the presumption that there are some people out there that just aren’t in a position to hire a professional copy writer and its just not an option – what advice would you give someone who is starting out writing copy for their own website? Where would you start? What are the most common mistakes?

    Gary Marshall:
    I think the most common mistakes are thinking from your own point of view rather than from your visitors point of view, I’d say that’s probably the worst offence that you can do, and it’s the old moaner when if you have a frequently asked questions section it’s the questions you hope people would ask rather than the one people actually do ask, you get an awful lot of people where on a website the fist page is the entire corporate history and as a visitor I don’t care, I don’t want to know this stuff I want to know what are you going to do for me why should I hang about here. So it needs to be very much ‘put yourself in the customers shoes’. Have a look at other websites and see what you like about them and what works on those sites. The other thing you need to think about big style is search engine optimisation. I was talking to someone the other day who was saying ‘when we do searches on particular products and particular areas we just don’t come up in the results at all’ and I said ‘do any of these phrases or words feature on your site?’ the answer was no. That was probably why they weren’t featuring in the search results! It might be obvious to you that your search should come up if you look for, I don’t know, web design companies in Brighton, but if you don’t have the words ‘web design’ and ‘Brighton’ in your website its not going to be indexed by any of the search engines. That can be a really difficult one to pull off, you see a lot of  bad copy writing that’s done purely on the basis of SEO, where they’re just trying to get as many different phrases in as they possibly can to try and get it up in the Google rankings and I think that’s counter productive because ultimately your trying to get humans to read this and if somebody comes to your website and the whole thing is stacked with all these meaningless phrases that don’t actually give you any useful information at all, then your just going to go ‘what a waste of time, I’m out of here’

    Paul Boag:
    Do you think there’s a difference between writing for the web and writing for other mediums?

    Gary Marshall:
    Yes

    Paul Boag:
    What kind of differences? What should people be doing differently?

    Gary Marshall:
    The biggest one is brevity, simply because your reading on a screen – you’ve no control over what sort of screen people are going to be reading on for starters, so I might be looking at it on my BlackBerry, you might be using a 22 inch monitor, but web content doesn’t lend itself to huge blocks of text and long, long sentences so you need to think much more visually than you do with the printed page I think, break it up a lot more and have a lot more white space. The way to present it can be important also, even having a bigger gap between lines can make a big difference to whether your text looks appealing or not. Again, work back from the basis of ‘what is it that your visitors are going to want here?’ You need to really start with that. I find that bullet pointing is usually a very good way to approach it. So, you sit down and think ‘what are people coming to my website for? And what is it they’re going to be looking for?’ and answer that first. If you’ve got a bit of spare time go into you full corporate history and everything you’ve done in your life, but concentrate on the purpose of your site first.

    Paul Boag:
    It strikes me that websites, unlike other mediums aren’t linear, so you have the option to start with the top level brief information and highlights, and people can kind of dig down to the in depth stuff if they want to.

    Gary Marshall:
    Indeed, one of the things you see in print a lot is the use of ‘pull quotes’ to draw your attention to a particular bit of the body copy, and its basically a sales technique and exactly the same thing works on websites and can be very effective and can encourage people to read more. The other thing I would say is try not to link too much in your actual body copy because every little blue line there is a potential reason for someone to disappear.

    Paul Boag:
    Ok that’s interesting.

    Gary Marshall:
    I think it can get in the way – if you’re trying to engage people you don’t want people to go off on tangents because you’ve got this short attention span thing going on.

    Paul Boag:
    Yeah I can accept that – the other thing as well is that if the page is full hundreds of links it makes it visually quite difficult to read as well.

    Gary Marshall:
    Yeah and avoid these kind of hover over adverts that infest websites. If it looks like a link I expect it to be a link and if I move my mouse over it and just get ‘find out about hotels in Guatemala’ or something its instantly away from the website. There’s something as well, I don’t know if its true or not but in journalism school they teach you when writing for tabloids you should write on the assumption that your reader is going to be a small child, and I think that can work with websites as well because it really does focus you on getting the information there quickly with the minimum amount of waffle and without going off on huge tangents. And like the old press thing as well where you have all the information in the first paragraph and you expand on it as you go along, so you should be able to chop from the bottom. If you’ve written 500 words, you should be able to chop the bottom 250 off that without losing sense of what you’re doing.

    Paul Boag:
    Yeah that’s good. So, websites are one thing – your kind of corporate websites and things like that, but more and more organisations are starting to use blogs as a method of communicating. Do you think there’s a difference there? What advice would you give to people writing posts for blogs?

    Gary Marshall:
    Be sure that you want to do it in the first place. Jacob Neilson quite famously said the other week that businesses shouldn’t blog, and he’s getting a bit of a headline generator there – he doesn’t mean no business should blog, but it can backfire because the nature of blogging is very much off the cuff, very quick reactions to things and that’s fine if it suits your particular kind if business, but if people are coming to your site for in depth information then I don’t think blogging does suit because by it very nature blogging is your most recent thought at the top so if you don’t have regular readers its quite easy to fall into the trap of assuming everybody knows the context of what your talking about, and they might not because you wrote about it 3 weeks ago or 3 months ago. That’s quite a common pitfall I think. The other thing about blogging is because it’s quick and easy it does encourage you maybe not to craft things as well and not think things through. You have got to remember that this stuff potentially hangs about for eternity. So it might be tempting to, I don’t know, slag off the competition or something but it could well come back and bite you later on. I think with blogging, it comes back to any sort of writing – you need to know what your trying to achieve with it because if you don’t have a clear idea of what your blog is going to bring to your website, and what benefit its going to bring to your visitors and customers it’s a potential massive waste of time and effort that you could be spending on something more interesting.

    Paul Boag:
    Yeah.

    Gary Marshall:
    I sound really negative; I don’t mean to be really grumpy today! But I think it’s a bit like in the early days in the web there was always these wonderful ‘do-hickeys’ and logos you could slap all over your website and lots of people did without actually asking ‘does this bring me any kind of benefit whatsoever?’. Done well, blogging can be a fantastic thing on a website. I’ve seen a few examples of it in all kinds of things – I was looking for drum loops for ‘Garage Band’ and I was looking at the various drum loop companies and I found one that the owners blog, and they talk about how they do the stuff, what they’ve got coming down the line, why they think that they’re great and nobody else is and all this kind of stuff and I really quite warmed to them and that encouraged me to have a look on their website and I ended up spending money on it. Other sites that are just plain old e-commerce things and really don’t care. Unless your doing a kind of niche market where I don’t know, ‘golfing grandmothers’ or something then the very fact that you’ve got a niche people are more likely to pay attention to what you’ve got to say. I don’t care if the marketing director of Comet has a blog; I have no interest in what he’s got to say – so adding it to something like that would be a waste of time. I don’t want to read a blog on ‘great big faceless ISP dot com’ whereas ‘Merchant city music’, which is a music shop in Glasgow, I’d be quite interested in what these guys have got to say, so ‘We’ve got some amazing stuff coming in!’ or ‘we were away seeing a band last night and they were fantastic!’. That feeling that your part of a bigger picture can be really effective, particularly with smaller businesses.

    Paul Boag:
    Yeah, good stuff I couldn’t agree with you more. I think there are a lot of blogs out there that shouldn’t be out there and there are also some places that should be blogging that aren’t.

    Gary Marshall:
    Yeah I would agree with that.

    Paul Boag:
    OK thank you very much for your time Gary, it was really good to talk to you again and no doubt we’ll have you back on the show in the future

    Gary Marshall:
    No doubt!

    Back to top

    Making the most of the footer

    The footer is the graveyard of many websites. The place where links are sent to die. However it doesn’t have to be that way.

    This week I thought I would try and tackle a question from Peter in Italy…

    Disclaimer, copyright, accessibility statement and privacy policy; these are the links that can often be found in the footer of a page. Why is it important to add this information on a website and what should this information include?

    Good question! Why do we will fill our footers with all of this stuff? I suspect the truthful answers is three fold:

    • that we are lemmings, blindly following what others have done before.
    • that the only reason the footer exists at all is as a way of “finishing off” the bottom of the page.
    • that the footer is a dumping ground for information which doesn’t fit neatly anywhere else in the site.

    This somewhat reactionary approach cannot be healthy so lets take a step back and look at what is commonly found in footers and what better solutions might be out there.

    What is often found in the footer

    To start with let’s examine the list of footer items that Peter proposed:

    • disclaimer
    • copyright
    • privacy policy
    • accessibility statement

    Legal rambling

    First up, disclaimer and copyright. These two links are often joined by various other forms of legal talk. Generally speaking, these are a waste of time from the users perspective, but often have to appear for legal reasons. Exact legislation varies from country to country (for example in the UK you have to display certain company registration information), however few people actually care about this stuff.

    If nobody cares about this information why are we linking to it from every single page of the site (as footers tend to be universal)? What is more, why do we separate them out into numerous links? Why don’t we simply have a single link marked “legal information”?

    Peter in his question asked what should be included in this information and to be honest I dare not try and answer that. I am no lawyer and as I have already said the answer will depend on your location. However, I would suggest that where possible this information is written in plain english rather than the legal jargon used on many sites. Take a leaf out of the creative commons book.

    The users rights

    Peter also mentioned privacy policy in his question. I would bundle this into a general category that appears a lot in footers. Lets call it “user rights”. This includes things like privacy, return and cancellation policies.

    Unlike the legal ramblings, depending on the type of site, many users may actually be interested in this information. On ecommerce sites in particular users want to know these kinds of things and having that information gives them the confidence to buy.

    If you are selling stuff or if you are collecting personal data then consider including this kind of information in your footer.

    Accessibility

    Finally, the last item Peter identified is the accessibility statement. I have to say I like seeing an accessibility statement link in the footer. It tells me that the website owner has at least considered accessibility and thinks it is important enough to justify a link on every page. However, although I appreciate the sentiment I feel that there are better ways of going about it.

    The trouble with an “accessibility statement” is that it smacks of more ass covering. The emphasis is on defending the site against those that might criticize it rather than helping those users with accessibility needs.

    If you are having trouble using a site because of a disability you do not immediately think “what I need is an accessibility statement”! What you actually think is “I need help”. Accessibility should sit under a help section and should be written within that context. “What help can you provide people with disabilities” rather than how do you defend the fact that your site doesn’t scale.

    Of course it could be argued that people only look for help as a last resort. Perhaps it should be sold as a “guided tour” instead ;)

    Whether this help section (or whatever you call it) should be on the footer at all is another matter. In my opinion it is too important to leave in the graveyard of your average footer. However maybe if the footer becomes something more, it might be the right place. That leads us nicely on to asking what role the footer should actually fulfill.

    What role the footer should fulfill

    So if the footer is not a dumping ground for rogue links, what is it for? Well for a start, I would suggest it has a lot more power than we give it credit. Think about it for a moment…

    • We know most users are now comfortable with scrolling and reach the bottom of the page.
    • The footer appears at the end of the body content when users are looking for their next action (after scanning the page).
    • It appears on virtually every page of your site.

    The problem is that historically footers have been limited to a single line consisting of a few unattractive text links. However, there is absolutely no reason why they cannot be more. A growing number of sites demonstrate that if we free the footer from our artificial constraints it can be a powerful navigational aid. It can provide quick links to killer content and even be used for up selling and cross selling on ecommerce sites.

    When next you design a website I would encourage you to seriously consider how you can make the footer more than a place where unloved links go to die. Take a look around at how others are beginning to use the footer in more innovative ways.

    Emerging design trends

    Web 2.0. brought with it a lot of things. One was a new style of design. However, design is a fickle thing and we are already seeing some new trends emerging.

    Gradients, reflections, drop shadows and rounded corners are all classic elements of web 2.0. design. For a while now these kind of stylings have dominated emerging websites. However, I have started to notice a shift recently and I have to say I like what I am seeing. Below I outline a few of the design elements that are currently in vogue and why I particularly like them.

    Don’t get me wrong. This is not to say that I think these design elements are new (many are blatantly not), I am simply saying that they seem to be becoming trendy again.

    Goodbye to the Fold

    With web 2.0. came bigger font sizes and bolder designs. A consequence of this was less emphasis on cramming content above the mythical line that is the fold. Although many elements of web 2.0. design are falling out of favor, rejecting the fold seems to be growing in popularity. You see more and more sites willing to embrace the idea that users do in actual fact scroll and at this years @media the whole subject was met with considerable passion!

    Personally I view this as a huge step forward for design. In many ways it is as significant as the end to the web safe palette. We now know that users are happy to scroll and although it is still good practice to keep key content above the fold, that doesn’t mean everything has to be.

    It was always a false concept anyway with the fold moving depending on resolution, browser type, toolbars and window size. Accepting this and moving on, is progress indeed.

    Functional Footer

    The footer has always been an underused page element. Often it was used as nothing more than a nice way to finish off a design and a place to dump all of the crap that we don’t know what to do with! Now however, we are beginning to see sites that actually utilize this screen element to provide supporting navigation and information.

    These “expanded footers” such as you find on Apples website, are being adopted more widely and provide some real “added value” to the user. They often contain things like; contact information, related links, and about us.

    Resolution dependent layout

    Another feature that seems to be growing in popularity is resolution dependent layout. This is where the layout adapts based on the viewable area. The most classic implementation of this is where at resolutions greater than 800 by 600 a third column of content is displayed. At 800 by 600 the content is pushed down to the bottom of the main column.

    This is quite a hard feature to explain. It is much easier if you see it in action. Go to Patrick Haney’s website and reduce your window size. As you reduce it down you will suddenly see that the third column disappears and the content can now be found at the bottom of the page.

    This approach makes better use of available space than either fixed width (with its empty space) or fluid (with its long line lengths). In my opinion this approach gives a real alternative to the fixed/fluid debate.

    Right column navigation

    Traditionally navigation on the web either appears on the left or at the top. Right hand navigation has somewhat been frowned upon. However, more recently this trend seems to have been changing with more websites adopting it. I think this is partly due to blogs, which seem to have right hand navigation by default. However, it has always struck me as strange that the convention is towards left. If you think about it there are a lot of good reasons for right hand navigation…

    • It puts the content first visually
    • Your cursor natural hovers near the scrollbars on the right
    • We are familiar with right hand navigation from tabs in books
    • We know from usability research that whether navigation is on the left or right, it makes no difference in the time it takes to complete a task

    Overall I am hugely in favor of right hand navigation and I am glad to see it becoming more popular.

    Focus on content

    I have also observed a growing movement towards more content focused websites. By that I mean that more user interfaces are becoming understated in order to put the emphasis on the content rather than the design.

    The most classic example of this is Garrett Dimon’s blog which is understated to the point of minimalism. The entire site is built to make the process of accessing and reading the content as easy as possible.

    Although this doesn’t work well for every site (where there is as great a need to build brand identity as convey information) I do think that overall this is a healthy move. Too many designers are more concerned with showing off their design prowess than they are with focusing on content. The irony is it takes more design skill to build a clean, content orientated design than something more flashy.

    Emphasis on typography

    Finally, thanks to people like Richard Rutter we are seeing a growing interest in typography. For too long web designers have ignored typography concluding that we are too limited in fonts to do anything useful. However, typography is more than type. It is about things like leading, spacing, and style. Much more than typeface alone.

    A growing number of web designers are recognizing this and doing ever more creative things with the limited number of fonts at our disposal.

    So there you go. Those are the design trends I see emerging at the moment. What about you? Have I missed anything? What other things are going on that we should all be aware of?

    Right, all I need now is some time to redesign this site :)

    Show 82: Microsoft drones

    This week on Boagworld: Paul talks about managing enquiries, Marcus asks whether you should add links to your website on client sites and Rob Borley talks about ASP .net.

    Play

    Download this show.

    Launch our podcast player

    News and events

    Staying Creative

    I came across a great article this week by Keith Robinson about how to keep being consistently creative. Constantly being creative can be a challenge sometimes, especially when a chunk of your time is spent on less creative activities like coding or consultancy. This article provides some incredibly practical advice about how to keep those creative juices flowing.

    The one part that particularly resonated with me was the need for time to play. I am very fortunate at Headscape that Chris and Marcus let me have time to experiment and try new stuff. The result is that I am much more creative than when I used to do production work all the time.

    However, this article also offers advice for those of you who don’t have the same luxury. It talks about how to force yourself to engage on even the most dull project as well as the need to pursue your own projects and interact with other creative people.

    WCAG Samurai

    Over a year ago now Joe Clark published an article on A List Apart entitled “to hell with WCAG 2.0“. Following this slamming attack he went on to create the WCAG Samurai who would develop an alternative to WCAG 2 based on WCAG 1. A year later and we have a working draft of WCAG 2 as well as the recently released WCAG Samurai guidelines.

    I have to say the WCAG Samurai Errata is a lot easier to understand than WCAG 2.0 but WCAG 2.0 has come a long way since Joe Clark’s article. Personally, the arrival of the WCAG Samurai guidelines have generated mixed feels in me.

    I not an accessibility expert and so am naturally drawn to the Samurai guidelines. They are easy to understand and don’t use confusing or vague language. However, at the same time I have a feeling that yet another set of guidelines is only going to confuse matters.

    I guess my hope is that all of the different interpretations on accessibility will make clients realize that accessibility is about more than confirming to a series of checkpoints and encourage them to start thinking in depth about their accessibility policy.

    Movable Type 4 (Beta)

    Yes I use Movable Type. I know the rest of the world uses WordPress but movable type works for me. I run the boagworld website on movable type and have no intention of changing so don’t bother writing in trying to convince me.

    That said, I wanted to point out the recent release of a beta for Movable Type 4. I have to say I haven’t installed it yet but it looks good. Its still in beta and apparently buggy in places but some of the features look impressive.

    They have revamped the interface which in my opinion was better than WordPress anyway. They have improved the content management capabilities, finally added a WYSIWYG editor and added support for Open ID.

    If you are not already a Word Press drone then check it out.

    Mobile web developers guide

    This week the dev.mobi website has released a comprehensive guide for mobile web developers.

    If you have listened to this podcast for any length of time you will know that I am constantly banging on about the mobile web. Developing websites that work on mobile devices is going to become ever bigger business and although it is a challenging area, I think it will be a huge niche for those willing to embrace it.

    Of course, at the moment it is a relatively immature market and finding good information can be tricky. However, this guide looks very good. I can’t claim to have read it all yet but from what I have seen this is a must read if you are looking to explore the area of the mobile web further.

    Agony uncle: Promotional links

    I was ferreting around in the forum for something to chat about and found this question from Remy:

    I was wondering what the opinion was on adding a “Site built by Such and Co.” at the footer of a client web site.

    



    I remember thinking it was normal practice in the late 90s and early 00s, but the more I look around today the less and less I see other web design/developer firms doing it.

    



    I do think it’s a cleaner design if you don’t add a link off to a random (to the user) web site, but I remember hearing on one of the podcasts on boagworld that this is how this had contributed to Headscape’s (page)ranking on Google – i.e. by having well ranked web sites linking back to Headscape.

    



    Just want to see what other people thought before I go and slap a nasty ‘who dunit’ at the bottom of my client’s web site.

    This is a fairly old post and there’s a lot of interesting and useful stuff on there. But I thought that chatting things through, and letting people know what Headscape does, could be useful.

    It generates business

    It really does. Lots of it. I can honestly say that I think our credit (which was, interestingly, on a separate credits page) on the old National Trust site played a major part in whether or not Headscape would have survived its first couple of years.

    I try to make sure that I always ask new enquirers how they discovered Headscape. Off the top of my head, I would say that around 1 in 20 say they followed a link from one of the sites we have built. We are currently talking to a prospect that followed the link on one of the university sites we developed.

    Don’t expect a link

    Whether a link appears is up to the client. Ask them if they mind. If they do, ask if you could have a link on a credits page or possibly just on a single page (e.g. ‘About this site’ if they have one or the contact page).

    If they still mind, leave it.

    We formalise the arrangement in our terms and conditions, as follows:

    The Contractor shall have the right to incorporate, in a readily viewable location, a credit and hypertext link in the Deliverables.

    Use useful wording

    Useful wording to a search engine that is. For example, ‘Designed by Headscape’ doesn’t really help page ranking at all, whereas ‘Web design by Headscape’ does as it includes the search term ‘web design’.

    Beware CMS based sites!

    There is always the possibility that doing this could backfire. If a client has control over aspects of a site’s presentation then there is always the possibility that they could make a nasty mess of your excellent work. You have to ask yourself whether a link, in this case, is valuable.

    Client corner: Handling enquiries

    The idea of the client corner section is that we tackle questions clients have. However, this week I answer a problem I am facing myself; how to handle enquiries better. We get enquiries from the Headscape website and I just don’t think we handle them very well. I always have the feeling some are getting lost and when I go away on holiday they just don’t get answered. After some thought on the subject I think I have come up with some enquiry handling techniques that might help.

    Ask the expert: Rob Borley on ASP .net

    I often get people asking to know more about the way we work as Headscape. What technologies do we use, what approaches do we take, how do we make business decisions? To be honest I often avoid this questions because I don’t want this podcast to feel too much like a Headscape sales pitch. However, several times I have been asked by people why Headscape works mainly with ASP .net instead of PHP or Ruby on Rails so I thought we might take a look at that decision.

    Knowing little about server side coding myself I thought it was best to get Rob Borley (our technical lead) onto the show to talk about the decision we made in going down the .net route.

    Its actually a really interesting segment that gives a real insight into how we run our business and how we go about making decisions in regards to technology.

    Statstastic! Jakob loves his stats

    I am currently reading Jakob Nielsen’s new book “Prioritizing Web Usability” and would highly recommend it for any user experience designer. The book is packed with some excellent statistics and I thought I would share a few of them with you.

    Average visit

    When a user is researching a new topic or trying to buy a purchase for the first time, they visit an average of 3.2 sites in addition to any search engine they might use to find the sites. On average they spend 1 minute and 49 seconds on each site with the exception of the final site they visit while trying to complete their task. In this case, they spent an average of 3 minutes and 49 seconds.

    The initial page

    Interior pages account for 60% of initial page views with the homepage making up the other 40%.

    The homepage

    The average user spends on 30 seconds on your homepage and will read only 10 to 20 words. What is more they will only scroll 23% of the time.

    Interior pages

    Users will spend slightly longer evaluating an internal page they initially arrive at. You can expect a user to spend 45 to 60 seconds on such pages. However, that time is reduced to 27 seconds on subsequent pages. This all means that you cannot expect users to read much more than 100 words of any individual page they visit.

    Page linking

    Surprisingly almost half of the links people clicked on within an interior page are found in the content body on the page. The other half was primarily made up of clicks on top, left or right navigation, with only a small percentage clicking on footer links.

    Search engines

    93% of users viewing a search engines results page did not go beyond the first page of results. Of those users, only 47% even bothered to scroll that first page. Finally, a massive 51% of users simply clicked on the first result in the listings.

    Thoughts so far

    Although I am only part way through the book, I am finding it incredibly enlightening. My only criticism is that Nielsen often comes across as being full of his own self-importance and spends too much time initially promoting his own companies activities. Despite that however, I would thoroughly recommend this book to anybody interested in website usability.

    Sticking up for the humble site map

    I was working on a site map yesterday and realised how little thought I give them. They tend to be an after thought in the design process. Vowing to repent of this half-assed attitude, I set out to learn all I could about this under appreciated site tool.

    Why site maps are cool

    Perhaps it is a sad reflection on the state of my life but I have come to consider the humble site map quite cool. I used to add them to a site mainly because they were required if the site was to be Priority 2 compliant. However, I was to discover they have many hidden benefits:

    • Site maps are a lifeline if users are lost or frustrated with a site. Users often turn to them as a last resort. This means they are a great opportunity to save a visitor who would otherwise be lost to your competition.
    • Site maps can often be more successful than a homepage at directing a user to the content they require.
    • Search engines love them because they give quick access to the most important sections of the site.
    • Users who require a speech browser find them incredibly useful too as they can skip directly to the content they require without navigating through the sites hierarchy.

    How to build a great site map

    So, what did I learn about how to make a decent site map? Well there are a few simple tips you can follow to guarantee success:

    Don’t be shy

    Do not hide your site map away. According to testing carried out by Jakob Nielsen 85% of users were unaware that sites they visited regularly had a site map. Avoid this by not hiding your site map down in your footer and by clearly naming it "site map"

    Keep it clean

    Make sure your site map is clean and simple. Do not over design it or make it a navigational challenge in its own right

    Don’t try and be clever

    Do not use JavaScript to make your map expand and contract like windows explorer. This undermines the whole idea of a site map which is that you can see an overview of the whole site in one go.

    Show where they have been

    Use link colours to show users which pages in the site map they have already visited.

    Show where they are

    If you can use server side coding to show the user where they were in the sites information architecture before they entered the site map. This is the same principle as using a "you are here" marker on a map.

    Don’t go overboard

    If you have, a large site do not show every page on the whole site. A site map should not be more than a couple of screens in depth. More than this overwhelms the user.

    What have I missed?

    So there you have it, my guide to the perfect site map. If you have any additional ideas of how the humble site map can be improved please let me know.

    Sample site review

    A part of my job at Headscape is to provide site reviews for clients. These range from short overview reports to detailed studies on particular aspects of a site. I recently completed a review for a small ecommerce site called TrapAWasp and felt that it neatly tidied together a number of different issues I had been discussing in this blog. The client has been kind enough to allow me to publish it here so hopefully it will be of some use to others. Please bear in mind that this is only a condensed site overview and doesn’t tackle issues in much depth.

    Summary

    As with all ecommerce sites there are two key factors that dictate its success or failure. These are the number of visitors that are driven to the site and the number of those visitors who are then converted into customers. It is these two factors that Headscape uses to assess the effectiveness of an ecommerce site.

    Without looking at the web logs of a site it is hard to tell just how successful the site is at converting users. However, the initial indications for TrapAWasp are good. The site is generally well designed, has few significant usability problems, and addresses most of the major questions raised by users considering purchasing online.

    A more important problem exists with regard to driving traffic to the site in the first place. Although good use is being made of Google Adwords the organic listing on search engines (in particular Google) is very poor. We believe there is significant opportunity here as a cursory analysis of the competition makes us believe it would not take much to push TrapAWasp to the top of Google’s ranking.

    Visitor conversion

    In many ways TrapAWasp is an example of good design. It is clean, simple and focused on enabling users to complete a purchase in the minimum number of steps. However, as with all sites there is always room for improvement and so below we outline several issues which should be addressed.

    Design

    The site has a strong visual identity. It is well branded: the site name, use of imagery and introduction leaves the user in no doubt as to what the site is about. However, two issues are of concern and should be addressed.

    Screen resolution

    28% of users are still viewing their computers at 800×600. Unfortunately TrapAWasp has not been optimised for this resolution and therefore requires limited horizontal scrolling in order to be able to read the product descriptions. This also creates problems with the number of products the user initially sees on page load. At 800×600 it appears TrapAWasp only offers 2 products while at 1024×768 the site offers only 4 products. Although users will scroll they tend to make judgements on whether a site has what they want without scrolling down a page. Jakob Neilsen a leading usability expert suggests that key content and products should be visible without the need for the user to scroll. One possibility would be to move the "view details" link to below the description so compressing the amount of space required for each product. Although this wouldn’t make all of the products visible it would help the situation as well as correcting the visual imbalance of white space next to the last two products.

    Click here for more on scrolling and screen resolution

    Browser compatibility

    Although well over 80% of users’ access the World Wide Web using Internet explorer it is a mistake to ignore other browsers. Due to numerous security scares more and more users are turning to alternative browsers such as Firefox. Firefox has now captured well over 8% of the marketplace and is continuing to grow rapidly. Although not serious, http://www.trapawasp.co.uk/ does have some problems displaying in non-IE browsers. Some examples of the problems encountered include text being rendered with the wrong font and images being incorrectly positioned. Although it could be argued these problems do not affect the usability of the site it can knock consumer confidence leading to the belief that the site is in some way unprofessional.

    Usability

    Usability is an extremely important area of ecommerce design. If a user finds a site hard to use they will often choose to turn to the competition rather than struggle to overcome the obstacles they are facing. Generally the usability on this site is excellent. However, three issues should be addressed.

    Delivery address

    One minor but very frustrating issue with the checkout form is the need to enter address information twice. Even if you do not check the box marked "Check if you require goods dispatched to an alternative address" you are still required to enter the delivery address. Small problems like this can prove incredibly frustrating and should be avoided if possible.

    Deteracat

    Another potential cause of confusion is the sudden appearance of a link back to Deteracat on both the checkout and credit card pages. We have no problem in principle to the advert for Deteracat on the right hand side of these pages as cross selling is a good idea and one that should be encouraged. Our concern rather, revolves around the "continue shopping at Deteracat" button in the main body of the page. This immediately generates doubt in the minds of users at a critical stage in the buying process. The user is left wondering if they have selected the right products or whether they have been transferred to another site. We understand the motivation for this approach and the ability it gives the user to purchase products from both sites at the same time however we believe that the confusion this causes outweighs the benefits.

    Addressing user concerns

    One final issue with regard to usability is the "how to buy" section. It is good practice to have a section that addresses many of the frequently asked questions users have regarding online purchases, but we feel that there is still room for improvement. More information needs to be provided within this section with regard to security. Users are hesitant to give credit card and personal details unless they know it is secure. Although you do provide this information on the credit card page this is late on in the process and after the user has already given you significant amounts of information. On a similar vein it would also be wise to provide some form of privacy statement here. Again we are aware that this information is available from the footer but we do not believe this gives the information the prominence it deserves. Finally we believe that the how to buy section should include information on delivery times as this is another common question and a significant number of users will be unable to view the flash animation on the homepage. In short there needs to be greater emphasis placed on answering users queries and that this section may need a name change to accommodate this kind of information.

    Accessibility

    It is easy to dismiss accessibility as being an issue solely about the disabled however the truth is that it is a much broader issue than that. Accessibility refers to ensuring a web site is accessible to the widest possible audience including disabled users, those with poor vision or motor skills such as the elderly, and those working within various technological constraints.

    Disabled users

    Disabled users in the UK have a spending power of £50 billion annually according to the Disability Rights Commission. What is more this figure does not include the elderly who have poor vision or motor skills. Catering to this audience provides a unique way to separate you from your competition. That is not to say that you ignore your abled-bodied users. Rather, we recommend that you make some modifications to your site to make it more disabled-user friendly. There is not time in this report to catalogue every problem disabled users might encounter with this site, but we can say that the site fails to meet even the most basic level of international standards on
    accessibility (WAI Level A or Priority 1).

    Click here for more on accessibility and business

    Technological barriers

    As well as creating barriers to the disabled a site can also create technological barriers which force users to turn to the competition. One example of this is in the use of JavaScript. JavaScript has been used in order to carry out the validation of the checkout form. These scripts check that each field has been correctly completed and informs the user of any potential errors. The problem is that 5% of users do not have JavaScript available so these users simply cannot purchase from the site. This is the equivalent of turning away one in twenty customers who try to enter a shop.

    Another technological barrier is download time. Although broadband has exploded over the last year still over 50% of users still access using dial up. http://www.trapawasp.co.uk/ takes approximately 17 seconds to download on a 56k modem compared with say http://www.waspbane.com/ which takes only 7 seconds to download over the same connection. With a 10-second difference per page and a 6-page purchase process that is a minute of unnecessary waiting. It may not sound like a lot but website users are incredibly fickle.

    Driving traffic

    You can have the best website in the world but if nobody is aware of its existence then it means nothing. Unfortunately TrapAWasp does not have the online profile it should have and this will be having a direct impact on the number of sales being made. The problem is the most pronounced on Google where TrapAWasp does not feature within the top 100 results on valuable keywords such as "wasp traps" (results on google.co.uk were slightly more positive but not by much).

    Not that things are entirely doom and gloom. TrapAWasp does appear to be supported by a very effective Google Adwords campaign that goes a long way to redressing the balance of poor organic listings. It also has better ratings on sites such as MSN search (listed 7 th) and Yahoo (listed 8 th). However with Google owning 69% of the British search market it is vital that TrapAWasp receives a good listing there. Pay per click campaigns can prove very effective but they also dramatically reduce profit margins and so should only be seen as a stopgap or compliment to organic listings.

    After comparing TrapAWasp against other sites listed under rated keywords it became obvious that the problem laid in the sites link popularity.

    Google uses a complex algorithm to calculate your position in the ranking. However, two factors dominate that placement. One is keyword density and the other is link popularity.

    Keyword density refers to the number of times a particular keyword/key phrase appears in the content of the site. For example the phrase wasp traps appears 17 times in your homepage giving it a keyword density of about 11%. After comparing this to other web sites we discovered that TrapAWasp is on a par with the competition. It is therefore fair to say that this is not the factor that is limiting your rating. That leaves the factor of link popularity.

    Link popularity refers to the number of sites who link to TrapAWasp and the perceived popularity of those sites. The more sites that link to you and that you in turn link back to, the higher your ranking. However, it is not just about numbers. It is also about the perceived quality of the site that links to you as well. For example a link from the BBC website would be worth a lot more than a link from an unknown name. Another important factor is the words used in the link to you. The words "wasp trap specialist" will rank you better on the words "wasp trap" than a link using the words "The Jones family business". Currently not a single site listed on Google link to you and this explains your poor ranking.

    There is, however, good news. Even the sites ranked in the top positions on Google have very little in the way of sites linking to them. It would not take many good quality links to move TrapAWasp to the top of Google’s organic listing.

    Click here for more on link popularity

    Below I outline a few techniques that would significantly help your placement on Google:

    Look for link partners

    Firstly look for as many sites that will link to you as possible and get them to add your site. One way of doing this is to search on Google for the words "add url" and a related keyword phrase such as "wasp traps". Doing so led me to this site: http://www.backyardgardener.com/ph/gardenproblem/gardenproblem.htm which actually has listed a wasp trap that is no long available! There is an add url link at the bottom of the left hand navigation that will allow you to add your site.

    Copy the competition

    Go to Google and search on a key phrase that is related to your site. Copy the url of the site listed number one in the list and then search again using the following search phrase "links: <url of competition>". This will show you all of the sites that link to that url. Contact each of those sites in turn and ask them if they will also link to you. Once you have done this return to Google and repeat the process all over again but this time with the next site down on the list.

    Message Board seeding

    Another very effective approach is to take part in message boards on related subjects such as gardening. When posting on these boards you can add a link back to your site and so improve your link popularity. However, a word of warning on this approach. If you just post adverts on peoples forums they will remove them and probably ban you for good. A more successful approach is to contribute to the forum providing useful advice and insights. Almost all forums allow you to add a signature to your post and it is in this signature that you include a link to your site.

    Increasing keywords

    Although this approach is not related to link popularity it is a vital component of increasing the traffic levels to your site.

    One of the problems with securing high ranking is that short keyword phrases such as "wasp traps" are highly competitive. However, users often use much long search terms and it is sometimes easier to target these. The best way of targeting them is to include a lot of copy on your site that is related to the subject matter. This is normally achieved by adding an articles section on your site. This can prove very effective
    . Take for example the Headscape site. Web design is a highly competitive sector and competition for the keyword "web design" is immense. However because we have an extensive archive of articles we gain a lot of traffic through longer phrases. Search on "how do I become number one on search engines" and you will see what we mean.

    We would recommend that an article section relating to wasps is added to the site. This could build on the existing content which talks about how to find a wasps nest and general information about wasps.

    Conclusions

    This review has outlined a number of areas in which TrapAWasp could be improved. However, our recommendation is that increasing the levels of traffic should be the number one priority. Poor ranking on Google is significantly damaging the levels of traffic and with a minimum amount of work we are confident that the site’s ranking could be dramatically improved.

    Are we in danger of over engineering?

    Web standards, CSS, XHTML, Microformats, WAI, semantic code, code validation, XML, eGIF, DOM, AJAX… is it just me or is web design getting a lot more complicated these days? Admittedly all of the above are very exciting developments and crucial for the future evolution of the web but I have to ask myself, are we in danger of over engineering things?

    Web design is like car design

    Cars can come with lots of cool stuff these days. From anti lock breaks, GPS, and power steering, to iPod player, on board computer and air bags. However, you don’t find all of these features in every car. Why not? The answer is obvious, they all cost money. Sure, if you are building a luxury top of the range Audi then you might include all these features. On the other hand, many people just want a car to get them from A to B and do not care about these kinds of bells and whistles. I believe the same is true for web design.

    The Wild West of web design

    There is a lot of talk about web design coming of age. We are moving past those Wild West days of web design where men were men and web sites were built by a bunch of cowboys. Now we are all grown up and behaving like responsible software engineers. However, like a spotty teenage boy growing his first sad excuse of a moustache, we are trying too hard. We seem to be under the impression that we have to cram all of these new features into every web site we build irrespective of whether it is appropriate or not.

    Understand your audience. Understand your constraints

    My wife is an engineer and it was her that first pointed out this danger of over engineering when I was telling her about all the latest web developments (admittedly I had to poke her a few times to keep her awake). She said that the golden rules of design are to understand your audience and understand your constraints.

    Understanding your audience

    I know this is heresy, but if less than 1% of your users are viewing your site on a Mac, is it necessary to test the site on that platform. Equally, if you are designing a site for a paintball company is it necessary to make that site accessible for blind people. Admittedly, a blind person could be booking paintballing for a friend who does not have a disability that would exclude them from the activity, but how likely is that really and is it worth the extra expense of testing for it?

    Understand your constraints

    In many cases, this comes down to money. Testing on multiple browsers and complying with various standards takes time and time in most cases costs money. Often clients come to us with a set budget and they want the most they can get for that money. It is up to me to make sure they get the biggest return on investment. If its a choice between making sure the site works with JavaScript disabled or giving them a user tested ecommerce system I will probably choose the latter.

    My concerns

    Many designers in the past have been more concerned with making nice pieces of "art" for their portfolio rather than producing a design that works well for the client and his users. In these more enlightened days of user centric design, we do not take that approach. However, it is probably true to say that we do in our code. Are we more concerned with adding those little links in the footers of our sites telling our peers that this site validates or that it uses web standards and is accessible than we are making sure our clients get the best return.

    Accessibility and the public sector

    If you work for any kind of public sector organisation and are responsible for their web presence you will be all too aware of the term “accessibility”.

    I have spent a considerable amount of time over the last couple of years working with heritage and conservation groups much of whose funding comes from central government bodies. Groups like the National Trust, areas of outstanding natural beauty and national parks are all being encouraged by government to make their sites ‘accessible’.

    So how exactly do you go about building a website with a very limited budget, that looks great, is available in welsh and accessible by the visually impaired! Sounds like a tall order doesn’t it. Well it is, but there are some imaginative solutions out there.

    Like so many things in life web design is all about compromise. It involves compromises over bandwidth, browser type, usability, budget, timescales… the list could go on. The first question you have to ask when it comes to accessibility is how important is this really. To answer that you need to consider your user base. What percentage is going to be visually impaired? What percentage is going to speak welsh? How does that stack up against other features you believe would benefit the site but which wont fall within your budget if you spend the money on accessibility functions?

    So far this is all sounding kind of depressing but there is hope. The trick with accessibility is to separate content from design. Once the content is held separately it is relatively easy to display it using different templates. That way you can have one template designed for the masses, which has all the latest bells and whistles, and one for the visually impaired which complies with the guidelines laid down by a group such as the RNIB. To see this process in action go to the Association of National Parks . This site displays the content in two templates, one for the visually impaired and one for the general public.

    Of course a content management system that is able to separate content from design isn’t always applicable. It may prove too expensive for your organisation or simply isn’t compatible with your hosting environment. In that case a more imaginative approach is needed.

    The National Trust faced just this kind of problem. To implement a full content management system across their entire site wasn’t feasible but they still wanted to make their website accessible. Their solution was to use something called cascading style sheets (CSS). These allowed the user to press a button and dynamically update the page. This would change the colour of background, enlarge text, increase contrast etc. This way the page could be made more readable by the visually impaired. To see this working visit the National Trust website and click on the visually impaired icon found on the footer of every page.

    Whether you adopt a full content management system or decide to go for something more modest, the important thing is that you have carefully considered your approach to accessibility. Accessibility is a key component in good web design and should be something that is planned in from the beginning and not just tagged on after the site has gone live.