Defying conventions

As the web matures an increasing number of conventions are emerging. But should we always follow the crowd?

Let me start by making it clear I believe in conforming to web conventions. I have come across too many sites that are overly confusing because the designer wanted to "do something different".

People have developed certain expectations of a website. From placing search at the top right to ensuring links have underlines, it is wise to observe the emerging trends.

However a bigger crime than ignoring web conventions is to follow them blindly. Take time to consider each convention before you apply it and ask if your circumstances or audience should make you reconsider.

Take for example the commenting system on GetSignOff. A very definite convention exists when it comes to commenting, but should we follow that convention at all cost?

convention1

The norm for commenting is to place the post/content at the head of the page, followed by the comments (oldest first) and end with a box where people can add new comments. The new comment appears directly above the comment box at the bottom of the comments list. This is so common that we don’t question it. After all, it is found on…

  • Every blog
  • All forums
  • Photo sharing sites like flickr
  • Sites like basecamp.

With so many examples of it working, it would be easy to just accept it as best practice. However, lets take a step back and ask why it is done that way.

The common approach to commenting

The traditional layout for commenting makes a lot of sense. For a start it is chronological. The post/content is the original item and therefore the oldest. As comments are added they are placed below the post in chronological order until you reach the most recent item at the bottom.

It is also an approach that encourages users to view previous comments before placing a comment themselves. This is particularly important in a forum where you can easily find repetition.

But does that mean commenting should always be done this way? Not necessarily and in the case of GetSignOff we have decided not.

An alternative approach

conventions2

The traditional approach to commenting works on the assumption that the commenter has not read each comment as it was posted and hasn’t been following the conversation in detail. However, that is not true in every situation. For example, in the case of GetSignOff the comments are a conversation happening between two or more parties. It is not a series of individual comments but a dialogue in which all the participants are fully invested. That is why we felt it was unnecessary to force the user to scroll past every comment before being able to post a comment themselves.

In the approach we have taken the comment box has been moved to directly below the concept and then comment appear below that in reverse chronological order (newest at the top). This makes it easier to add new comments and to view the most recent additions. It also places the concept and comment box on the same screen, allowing users to see the concept they are commenting on.

The moral of the story

Why then do I raise this subject (other than to shamelessly plug GetSignOff yet again)? It is simply to stress that although conventions are good we need to be careful that we do not blindly follow them without considering our exact circumstances. We need to avoid designing on auto-pilot.

119. Fluid Elastic

On this week’s show Ed Merritt joins us to discuss fluid, elastic layouts and we take a look at PHP Designer, a feature rich code editor.

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Harness the power of "frilly bits"

I love watching design trends come and go on the web which maybe why I love Patrick McNeil’s Design Meltdown so much. One trend that has caught my eye is the move away from the Web 2.0. look to something more ornate.

This style makes use of what can only be called "frilly bits". You know the kind of things, those swirls and ornaments buried in typeface sets but rarely used. They have been around for years, used by blacksmiths and typesetters alike. They turn up on everything from wedding invitations to architecture, and now it would appear, the web.

One of the first sites I saw them was Cameron Molls blog. He is an amazing designer with a very ornate and delicate style (about as far away from my own as possible).

Recently one of Cameron’s readers asked him where he sourced such beautiful ornaments and he has been kind enough to share 25 different sources of similar frippery.

Unfortunately, simply knowing Cameron’s sources will not grant us the ability to design as well as him. However, it is an extremely useful list and definitely worth perusing at your leisure.

The cure for content-delay syndrome

Returning from the world of creativity to the realities of project management, our next post tackles the frustrating subject of clients failing to deliver content on time.

Entitled the cure for content-delay syndrome this article addresses once again the subject of copy-writing.

We have talked about the need for a copywriter many times before. I have encouraged you of the need to engage a professional to craft your sites copy, while at the same time struggling to convince my own clients of the need.

The problem is that ultimately many clients believe they can write their own copy. After all they are experts in their field and know their own audience. Some argue that it takes as long to brief somebody as to do it themselves. When budgets are tight, these sound like convincing arguments and are hard to dispute.

This post suggests that the answer in not to promote the use of a copywriter but an editor. An editor refines the clients text rather than writes it from scratch. This is considerably cheaper but still brings improvements in continuity, accessibility, usability and SEO. What is more, the client no longer needs to worry about the quality of his writing. Instead he can concentrate on "bashing it out" and let the editor improve its readability later.

Its a persuasive argument and gives me hope that I might soon be able to encourage my clients to engage a professional to work on their copy.

The roles of a web entrepreneur

From the role of an editor to the many roles of a buddying web entrepreneur.

We haven’t spoken much about developing web applications on the show (this is definitely something we should try to do soon). Traditionally web design has been a service industry and for the vast majority that is still the case. However, a growing number are looking to add a product line to their offering or make the switch entirely. Certainly this is something we are doing with getsignoff.com

But what does it take to be a web entrepreneur and build web applications? Well, unless you have a lot of venture capital it requires you to wear a lot of hats as explained in this post on Think Vitamin.

From marketeer to customer service representative, you are required to fulfil many more roles than you are used to. Its a challenging undertaking but the benefits are substantial. Get it right and you have a regular income without the overheads associated with a service based business.

Intranets revisited

Another subject that we have neglected on the show is intranets. They continue to grow in importance and yet have fundamental unresolved problems.

In two great posts Gerry McGovern exposes these flaws including the tendency for intranets to become dumping grounds for information and their lack of decent search.

Both posts in their own way focus on the fact that intranets should be about "getting things done". They should provide tangible productivity benefits but often fail to do so. Each post identifies a reason for this being the case.

The first points to the way intranets are perceived. Many see them as an information repository. This appears to be a fancy way of saying "where information goes to die". Viewing an intranet in this way, McGovern argues, is to miss the point. We should only be distributing information if it aids productivity or encourages collaboration.

The second post argues that intranets fail to aid productivity because information is just downright hard to find. In particular Gerry targets search but he also argues there is a wider problem of find-ability. Why is it he asks, that even in the largest of organisations nobody is dedicated to ensuring employees can quickly access the information they need to do their jobs?

If you have an intranet or are involved in developing them, then these are an excellent read.

Back to top

Feature: Fluid Elastic Design

When it comes to planning the layout of your new website there are just three commonly used website layout structures to choose from: Fixed; Fluid & Elastic width layouts. None of these are perfect; each comes with its own advantages and disadvantages and in this weeks feature we have Ed Merritt with us to disuss them.

Back to top

Review: PHP Designer 2008

This week’s review is on PHP Designer 2008 has actually been submitted by Simon Jones of Zako Media. He writes…

As a web business, I needed stable coding platform or IDE which would allow me to be as productive as possible. Money was no object so I researched everything available from open-source packages to expensive commericial software. I discovered phpDesigner from www.mpsoftware.dk and was blown away. It’s much quicker than Zend and has most of the same features. phpDesigner has all the usual code highlighting and auto-completion for PHP, CSS, HTML, Perl, XML, Javascript, along with easy buttons to tidy this code on the fly. We all know how hard it is to keep code tidy… now we don’t have to. phpDesigner also allows you to arrange files by project without disrupting the standard windows folder system. If you ever want to transfer away from this software, you don’t need to worry about compatibility.

The smaller features I find most useful are: bracket matching, code explorer (to jump to functions, variables and arrays), code snippet library to store your most commonly used functions from project to project. Tooltip syntax reminders for PHP and rightclick to view PHP.net help page for that function. Finally it validates your syntax on the fly, without affecting performance… all other editors stalled, slowed and chugged away as they scanned the whole file every time a character was added. phpDesigner offers the same ability with very little processor time, as soon as you’ve finished a line, it hilights unobtrusively to show missing semi-colons, brackets etc. A more detailed error message can be accessed. This saves valuable Alt-Tab, Control-F5 time. (or for apple users, switch task and refresh browser) as you know the code is error free before you start.

The software offers links to internal ‘browsers’ for phpmyadmin and php help, has an inbuilt ftp client or allows you to call an external one like filezilla. It helps integrate nicely with Smarty templates and works with phpDocumentor for instant php documentation.

On the longer term projects, it has built in bug tracking information, project and global todo lists.

One of the most important and major strengths with this software is it’s stability. It has a few issues sometimes closing down if it’s travelled through a laptop’s standby mode, but otherwise it has never crashed or lost data in the years I’ve been using it. mpsoftware is obviously passionate about this product as updates are available very regularly offering additional functionality and fixing minor bugs.

This is by no means the full feature list, but more information can be found at www.mpsoftware.dk where they have a free cut down non-commercial version and sell the full version. Compare to other available software and it sounds expensive, but mpsoftware.dk is charging a ridiculously low €39 for a single license with further discounts for groups of 10.

Thanks to Simon for that review.

Back to top

Listeners feedback:

Can you set up a web design company in the evenings

John Bullock asks: Hello boagworld team, my name’s John and I’ve got a question for you. Basically I’m starting up my own web design company and I’m in what I think is an unusual situation of trying to do it along side my 9 to 5 job which has absolutely nothing to do with computers, it’s actually an engineering job so I actually have no chance at all to work with computers in my normal job. Now I know trying to set up a company alongside your 9 to 5, while obviously tiring, is a very sensible and safe way to do it, is it actually possible? Do you think it’s a realistic way of setting up a company or do you think I would have been better going with the freelance option? It’s great to have the show back after what seemed like a decade and keep up the good work.

Yes it is definitely possible. In fact it is the way the vast majority of freelancers begin. That is not to say it is easy. However, it is the most sensible approach. If you don’t your options are fairly limited…

  1. Wait to be made redundant and hope you get a payoff
  2. Live off the kindness of friends and family (a guaranteed way of losing friends)
  3. Borrow money from the bank

Personally, I am very much against borrowing money. It substantially increases the risk. If you setup loan free then you can get another job if things go wrong. With a loan you are left in debt and struggling to pay the rent.

Build up a freelance business on the side and save the money to pay for the first few months. Also if you are able, land some regular customers. This will give you an existing client base to bring in much needed cash. At the very least you will have a portfolio of client work to show off.

We were fortunate. The web design company we worked for folded. Although we didn’t get any redundancy payment we were able to take several of the clients with us. These not only provided valuable income in the first few months but also allowed us to attract other clients.

Domain names

Robert Prior asks: Hello Paul and Marcus, my name is Robert Prior and I am from Waco Texas, i’m currently a beginner web designer but in the future I would like to set up a small web design agency here where I live and my question is, when you’re trying to get the URL for your company name, how important is it to get different extensions like .net, .info, .tv are those important at all? Or do you just need to get the one main one like the .com name? Really enjoy the show, appreciate all the hard work you guys put into it and looking forward to future episodes. Thank you.

In my opinion your domain name is incredibly important. You should definitely try to get the domain extension for your country and .com as well. We have never managed to get headscape.com but as the vast majority of our business is in the United Kingdom headscape.co.uk has been adequate.

However a good domain is about a lot more than the extension. Personally I am not a fan of these new web 2.0. urls (flickr, del.icio.us, digg). They are hard to spell and hard to remember. In my opinion a good url should be a well known word (or words) even if not directly associated with your product. Headscape for example sounds more like a hair dressers than a web design agency, but at least it is memorable and easy to spell.

Another common mistake is to go for a domain name with hyphens. This never works well as it is hard to tell somebody. For example "headscape dot co dot uk" is much easier then "head hyphen scape dot co dot uk". Also users often later forget that it contained a hyphen.

The ideal domain is also descriptive of the site. For example we were blown away to discover getsignoff.com was available. It describes exactly what we do and is memorable too. That said more recent studies suggest that a brand name (Amazon.com) is more valuable than a generic name (books.com), so if you are forced to choose pick the former.

Finally, be careful to avoid words with multiple spellings especially if working internationally. For example don’t choice a domain like colorTheory.com because it could equally be spelt colourTheory.com.

Many claim that there are no good domain names left. Although it is harder these days getsignoff proves they are still out there. With a bit of lateral thinking (or using one of the domain suggestion tools) they can be found. There is no reason to start randomly start dropping vowels.

Review: Woopra

When it comes to website statistics Google Analytics dominates most of our thinking. However, there are some impressive alternatives. One I would like to introduce to you is Woopra.

Screenshot of the Woopra interface

The first thing that sets Woopra apart from Google Analytics is that it is a desktop application. This is both a blessing and a curse.

Live results

One blessing provided by the desktop is the ability to stream live results to the application. You can see users moving around the site, watch as they click between pages and get detailed feedback on their location, history and computer configuration.

Being able to watch users interact with your website in real time is hugely enlightening and tells you much more than Analytics can.

Of course it would be possible to stream live to a website using Flash or AJAX but I am not aware of a stats package that does this.

A rich user interface

Another benefit of being a desktop application is the smoothness and richness of the user experience. From the constantly updating animated map to the interactive graphs and charts, there is something very immediate about the way Woopra works.

User interaction

Woopra popup chat message

Not only can you watch users move around your site it is also possible to interact with them in much the same way as Live Person works.

At any point you can select a user who is browsing your site and choose to "start a conversation". The user sees your message in the form of an instant messaging alert.

I can see real potential in this, especially on ecommerce sites where users so easily abandon baskets. Being able to provide on-site customer support could be hugely beneficial. In fact it is a subject Iwrote about back in 2004 and I still believe it is an under utilised technology.

Of course it could be horribly abused and terribly intrusive. However, it is an invaluable tool for some audiences such as the elderly or those with less online experience who require interactive help.

The curse of the desktop

Woopra is not without its problems. The desktop application is built in Java, which should ensure cross platform compatibility. However installation on a mac was incredibly painful, involving the use of a beta version of Java and fiddling with preference panes. I would hope things were not so bad for windows users.

Another problem with Woopra is that it is currently in closed beta. Fortunately getting hold of an invite is not too difficult. I received mine in a couple of weeks just by using their online application form.

Woopra is now available to anybody who wishes to signup and is entirely free.

So is Woopra the perfect analytics tool? Probably not. However, I have abandoned Google Analytics for the time being in favour of the more interactive, rich environment of Woopra.

116. Back

Returning with a new site. Jeff Croft talks about his view on web standards and we discover why the personal website is dead.

Play

Download this show.

Launch our podcast player

News and events

Creating grid layouts

Last month I attended the Future of Web Design conference. The speakers were exceptional, however my favorite was a presentation by Jon Hicks on his web development process. The guys at Carsonified are slowly releasing the videos so it wonʼt be long before you get to watch it yourself.

I find it interesting to see how people work and it is amazing how many new techniques you learn. One thing Jon shared was a Javascript library called GridLayouts that overlays a grid systems on top of your pages. This is useful when creating layouts directly in CSS because you can align elements to the grid.

I have since discovered there is a firefox extension called GridFox that does the same thing.

Flash goes open source

Of course, you might be wasting your time designing with CSS. According to Aral Balkan flash is soon going to be everywhere and is the platform we should now be developing on.

The reason for Aralʼs excitement is an announcement by Adobe that Flash is going open source. Not only will the swf format be open source, they are also relaxing the licensing on the flash player.

All of this is good for the flash platform. Although it is never going to replace HTML, it does undermine one of the main arguments used by its detractors.

Accessibility and AJAX

While Flash gets a shot in the arm its main competitor AJAX is under attack. Brothercake has written a passionate article for Operaʼs development site pleading with us to stop using AJAX.

His argument is that AJAX is immature and unnecessary in the majority of cases. He believes that the accessibility cost of using AJAX outweighs it benefits (many of which are oversold).

I cannot say I agree with everything he has written, but the article does make you pause and consider whether your implementation of AJAX has been entirely necessary. Coming within days of the WCAG 2.0 candidate release, I think this article puts accessibility firmly back on the agenda. It will be interesting to see what affect WCAG 2.0. has on the growth of AJAX and web 2.0.

Developing effective forum leadership

Our final news story is anything but web 2.0. because it focuses on the oldest of community tools, the forum. It is an article by Patrick O’Keefe entitled Develop Effective Forum Leadership.

The article is aimed at those website owners who run larger communities and need to provide guidance to their community leaders. I have worked with so many large organisations who have tried and failed to effectively run communities. Their failure is often down to bad decisions concerning moderation and management.

This article helps to address those issues providing solid advice. If you are a community manager or have clients who run (or want to run) a forum then this is a must read.

Back to top

Feature: The personal website is dead

This week Zeldman mourned the decline of the personal site. Several responded rebutting the claim. In this weeks feature I explain why I agree with Zeldman but just don’t care.

Back to top

Interview: Jeff Croft Talks About His View On Web Standards

Paul: OK. Joining me today is Jeff Croft, who no doubt you have heard of. Good to have you on the show Jeff

Jeff: Great to be here Paul, thanks for having me.

Paul: So you work for Blue Flavour, and I have to confess the reason why I wanted you on the show is because you do tend to court a little bit of controversy, shall we say, is that a fair comment?

Jeff: I suppose that’s a fair comment. I don’t necessarily do it on purpose, but it does seem to keep happening!

Paul: Well you say you don’t do it on purpose, but I’ve looked through your blog, and you have some excellent articles on there that are really good and really quite excited me. Not necessarily because I agreed with every word

Jeff: Sure

Paul: But what I like about what you do, Jeff, is that you challenge kind of the standards, you know, you challenge the standard thinking and you kind of come at things from a different angle. So…

Jeff: Right

Paul: As a result of this, you seem to have antagonised a few people, especially in the standards community. Why is that? What have you done and why…why do people find you so annoying, Jeff?

Jeff: Well I was going to ask you that same thing Paul!

Paul: Ha ha ha

Jeff: No, seriously, it’s a good question. Like I said, I won’t ever set out to antagonise anyone. I think sometimes, you know, people take opposing viewpoints on these industry matters, a little personally, that’s, you know, my opinion. I know I write in kind of a pointed way that sometimes is blunt and I tend to be the type of person who doesn’t always have a filter when maybe I should. But, you know, I love everyone in this community, everyone I’ve ever met in this community’s been awesome so I’m not…it certainly isn’t ever personal, but I think, dealing specifically with web standards, it sort of feels a lot like religion to me. Like I sort of see myself as a Protestant of sorts, like I…you know I came up as a firm believer in the dogma of web standards, but more recently I’ve sort of split off from the Church on a few key points, but in the end, I mean Catholics and Protestants are both Christians, right? And we read the same Bible which is, I suppose, designing with web standards, and so you know, just there’s….I usually sort people there’s probably 5% of stuff that I differ on than kind of the purist viewpoints. So I’d see it as a purist versus pragmatist sort of thing
and I like to write about it and I like to write in a kind of a blunt way that I guess sometimes rubs people the wrong way.

Paul: So you’d like to call yourself a pragmatist. Tell us a little bit about where you, you know, what areas you think that other people are being too purist over when it comes to web standards. What are the areas that get under your skin?

Jeff: Well the main thing is just that I don’t really consider…I never think of web standards as the end goal. I think of web standards as a means to the end, and so, you know, when I’m building a website my priorities are, you know, to serve the needs of the client and to create a great user experience, more than my priorities are to validate or to, you know, use all the right ….most semantic elements all the time. I mean I do try to do that, but it’s…those are just in support of the greater goals that I have and I think…sometimes I feel like peoples’ priorities get a little out of whack there, and that’s kind of the purist mentality that I’m talking about.

Paul: I mean the trouble is with writing posts like this, and this is something I get accused of as well, that when you say something like, well web standards, you know, are not the goal, they’re merely a means to an end and all the rest of it

Jeff: Right

Paul: Aren’t you actually encouraging lazy coding?

Jeff: Well I don’t think so. I can see how it seems that way. I mean I definitely do believe that everyone should be writing valid markup and CSS and I just encourage people to remember that web standards are simply tools to advocate, you know, to help achieve the end goal, and you know, if you’re…I don’t know, I guess it’s kind of hard to explain, but if, like…let me use an example. If you’re building a house, I don’t think anybody would have their goal be…I need to use a hammer, and nails and bolts when I’m building this house. I don’t think that would be anybody’s end goal. Their goal would probably be like, I’m going to build a house that is structurally sound and has spaces that serve the needs of the residents and it’s comfortable and it’s aesthetically pleasing. They’d probably have goals like that. And you know, they probably would use a hammer, nails and bolts, but I don’t think they’d probably get so bent out of shape about, well in this house I used, you know, 3½ inch long nails instead of 3 inch nails, but those are the kind of like sort of semantic and pedantic debates that we get into in the industry a lot that irritate me a little bit because I feel like sometimes people just don’t pay attention to, you know, somebody can redesign a site that can be beautiful and amazing, and they make a blog post about it, and they say, you know, this is a new project I’ve done and it’s got all this new innovative stuff and the comments on it are, well you didn’t encode your ampersands and you know, you used too many divs and just to me I’m just like, man you totally missed the point, you totally missed all the great stuff that is there about my site.

Paul: But I mean using your house example that you just gave

Jeff: Right

Paul: I mean, within, you know, construction there are standards. There are, you know, rules that have to be followed and it may be the case that the person that’s getting their house built for them doesn’t…don’t particularly care about those things, you know, they care about the aesthetics, they care about the living space, they care about that kind of stuff, but somebody has to care about, you know, the fact that it’s built to Fire Regulations and things like that. Is that not our job as a Designer to worry about things like that?

Jeff: I think it’s completely our job, I just think that it is our job to …to do those things and to create great user experiences and have beautiful designs and…and it’s mostly just a priorities thing, like it’s just…I think all those things are important. Validating and creating, you know, writing semantic mark-up, all these things are important to me, they’re just… they’re just tools that I use to reach greater goals is all….and I think some people in our industry have turned that around to where they are more interested in writing valid code than they are in creating great experiences.

Paul: Mmm. So do you actually think that there are situations where the, you know, these different objectives come into conflict, because you know, I can’t say that in my experience there have been many situations where you know, I’ve gone, you know, oh I can’t do that because it’ll make the code invalid or whatever, you know, where…or where, you know, I’ve had to over-rule a client because I feel that it would compromise, the, you know, the semantics of the website. They don’t often seem to come into conflict, but I mean do you disagree?

Jeff: No,….no I agree, they’re very rarely in conflict if ever. It’s…you know, it’s more what irritates me and what I have talked about is more it has to do with the discussion and the kind of….community, you know, within the web standards community it’s not something that really affects client work too much or anything like that, it’s just I want to talk about some other stuff; I want to talk about design and I want to talk about users and I want to talk about community and networking and bringing people together and sometimes I feel like those conversations can’t be had because they’re…because as soon as somebody starts to talk about something a little bit more abstract and conceptual, people derail the conversation by saying, again, like your ampersands are unencoded, or you know, why did you use all these divs when you could’ve, you know, been more semantic, or you know, whatever. So….it’s more about the conversation…yes

Paul: I’ve got to say, I can associate with your point of view, I mean at the moment I’m re-building the Headscape website, our corporate website, and you know, although obviously I should primarily be thinking about the client all the time and potential customers that are coming along to the site, after all, that’s the target audience, but you can’t help but almost be a little bit afraid, you know, that …oh is this code of good enough standard, are people going to criticise this, that and the other, and really you shouldn’t have to live your life in fear of what your peers will say.

Jeff: Exactly, that’s exactly wha
t I think.

Paul: But I mean from the point of view of…we were talking about lazy coding weren’t we, and about, you know, does this encourage lazy coding. You guys have taken an interesting position at Blue Flavour, and I have to say this…this is something I think I probably disagree with, which is that you guys use Blueprint, which is the CSS library, actually in a production environment. That’s interesting that you take that point of view. Explain a little bit about how you came to that…that point, you know that position.

Jeff: Well…well first of all I was sort of involved in the creation of Blueprint. It was…I was accidentally involved; I didn’t mean to be, but at my previous job I had…I had created a sort of CSS framework for us to use internally, it was a media company, a newspaper company and we had several different newspaper sites. They were all similar and we had a team of designers and we wanted to just sort of standardise on some….some class names and just some ways of coding things across our sites and across our team, so that you know, we would all kind of be on the same page, and I wrote an article on a A List Apart about that process and somebody found…somebody went and found that code and wrote me an e-mail asking if they could use it, and I said sure, I can’t support it, but if you want to use it, go ahead, and thinking that they were probably going to use it on their personal site or whatever, and it turns out what they’re actually going to do is build Blueprint. So that’s kind of how the whole thing happened and…so that’s how I got involved in it and I gotta say before I go any further that since then, Blueprint is very different from what I wrote and there’s been a lot of changes, and a lot of them are good but a lot of them I don’t like too, so I don’t….at this point in time I’m not as sold on Blueprint as I was three or four months ago just because of some of the changes they’ve made. But I think the reason, I mean the justification to me for using Blueprint or any CSS framework like that is the same justification that you would have for any Open Source project. It’s really good CSS written by smart people that has been tested by the masses, it’s constantly being updated, having bug fixes applied, and you know I believe that most of the time the Open Source community is going to be able to write better code than you or me or any one individual person, so to me that’s the justification, it’s the same reason I would use Apache or Django or Rails or Linux or anything Open Source because it’s just been proven time and time again that….that Open Source methodology works for having good code.

Paul: I mean, I have to say, I had a look at it and played with it for a bit, and I’ve got to say that for some stuff it was very impressive, you know, if you’re putting together wireframes or, you know, doing initial production work then I can see a value in it, but I think what concerned me was some of the limitations surrounded the fact that, you know, it’s designed primarily for a fixed based site, but also…sorry, is that…am I wrong?

Jeff: No, no, you’re absolutely right, although I think adding liquid is on their ‘to do’ list, but yes,

Paul: OK. And then…I mean the other thing was that, you know, I’m trying to avoid using the word ‘semantic’ in order not to get in trouble with you, but I mean the thing that did strike me with it is that there were a lot of class names that you were having to put in, you know, which is fine, you know, I can accept that, you know, it’s not the end of the world if you do that, but you know, if it’s a site that’s going to be around over the long term, I just felt it was a little bit of a second-rate solution for probably the type of clients I do. Now I can understand that if you’re doing, you know, a lower…you know, lower end work, smaller websites, with less of a budget and you need to turn things around quickly then this is better than not using standards at all, but it just felt a little bit of a lightweight solution. Am I being unfair to it?

Jeff: Nope, I don’t think you’re being unfair at all. I think you’re absolutely right and I think, you know, I mean at Blue Flavour, we have used Blueprint before, we don’t use it all the time, and it is…we do tend to use it in those situations where we have a very tight timeframe or a very tight budget, and just need to get things done and get them out the door as quickly as possible. Because like you said, I mean we think it’s a good solution that is better than not using web standards at all, but it’s…it’s never going to be as good as hand-crafting every line of code for, you know, for the particular project. We recognise that, but it’s, you know, sometimes in the real world, when we have deadlines and clients and budgets, sometimes just getting things done on, you know, an efficient way trumps being absolutely perfect every time which is again that pragmatist versus purist sort of view.

Paul: I mean it felt like a bigger compromise, and maybe…I’m using some other, you know, frameworks and libraries, you know, I just jQuery for example in JavaScript, and this felt more of a compromise, more of interfering with the kind of underlying content of the site, and that’s what I was probably slightly uncomfortable with, was the idea that, you know, the content would be in some ways compromised if the site was going to be around a long time, you know, if it was a shorter term project that maybe wasn’t around as long, then the fact that the content is somewhat compromised maybe is not as big a deal.

Jeff: Yeah, well I think, you know, when you were saying that I was thinking, you know, like you use jQuery, so do I. I think there’s a certain…like…those of us who are not great JavaScript people will lean on these frameworks, whereas I bet JavaScript gurus sometimes have the same feelings like about…it being a compromise when using one of those libraries, you know, and there’s probably people in the Ruby community that say, ‘oh, I’m not going to use Rails, it’s a compromise’, because they really know the ins and outs of Ruby or they really know the ins and outs of JavaScript and we really know the ins and outs of HTML CSS so yeah, I wonder if it’s always …these kind of libraries are always going to be a little more popular with people who are…who are like have to use CSS but it’s not really their primary area of expertise.

Paul: So what you’re implying is that I’m a snob?

Jeff: Sort of!

Paul: Ha ha ha…..that’s fair enough, that’s OK. I don’t mind being a snob! So I’ve….so moving on from that then a little bit

Jeff: OK

Paul: Now I’ve read some stuff that you’ve written before critical of validators and you know, some of these automated validators that are out there. Maybe tell us a little bit about why you’re critical of them, why you feel so anti towards them?

Jeff: Well it’s not so much that I’m opposed to the validators, I mean on the contrary actually I use validators almost every single day. What I’m critical of is the way people use them sometimes. I think that, you know, validators are there for…as a tool to help you de-bug during the development process, you know, you have some problem on your page and why isn’t it working? When you validate you find the error and then that helps you move along to solving it. But what irritates me is the use of validators as sort of in unprovoked attacks on other peoples’ code, you know, where again, it’s kind of that same…that same mentality of somebody launches their new site and the first thing somebody does is view source and validate it, so that they can then make a comment that says, you know, this is crap, and that is…that is really irritating. I feel like there’s almost never any reason to validate someone else’s code, I mean unless they’ve asked you to, I can’t understand why….it’s just that mentality of the first thing you do when you get to a site is view source is a little baffling to me, because I’m…I’m more interested in the design and the functionality and what are they doing here that’s new and interesting.

Paul: I guess…but that depends…surely that depends on your priorities, I mean…you know, I find it quite interesting to look at other people’s code and how they’ve built the site. It doesn’t necessarily mean I’m going to validate it.

Jeff: Right, and….no and I mean that’s fine, I do that at times as well and that’s certainly how I learned a lot of what I know, but I don’t do it with the intention of then picking apart every single error they made publicly, which is really the thing that bothers me.

Paul: I have to say the other thing that concerns me a little bit about this is I’m starting to see more clients going and viewing source and validating websites and you know, it’s quite difficult, because I mean obviously like yourselves, we kind of sell ourselves on, you know, being standard based designers and produce good quality code and all the rest of it; it’s part of our sales package. And you know, when a client goes along and validates one of our client sites and it’s invalid, you know, you feel like you have to defend yourself in some way, but, you know, there are good reasons why a site won’t validate sometimes, and…and certainly once a client starts using a content management system you can pretty much kiss goodbye to it can’t you really?

Jeff: In many of them, yeah.

Paul: OK. That’s…it’s interesting to hear a little bit about the way that you operate and the kind of priorities that you have at Blue Flavour. In some of the posts that you’ve put up, I mean you were kind enough to send through a big bunch of your more controversial posts to me which was good. And I was reading through some of them, really enjoying them by the way, but there seemed to be this kind of under-lying current that maybe standards and even the W3C to some extent, a kind of stifling innovation. Where does this kind of feeling come from, you know, is that something you really, really believe and what makes you believe it?

Jeff: I would say again it’s not so much that I think that the W3C themselves or the standards themselves are stifling innovation; it’s the culture of compliance that is around those standards and around the web standards community to where people are so obsessed with being valid and being compliant all the time that they…you know, they tend to…I think it even extends past actually writing mark-up or writing CSS to where people just keep doing things the same way that everybody else is doing them or the way that Jeffrey Zeldman told them is the way to do things, or whatever, and it just kind of….they just keep doing things the same way and not innovating as much as I would like to see. Now I say that, and I…but I know I probably do the same thing myself, like I don’t…I’m not always incredibly innovative either, so…so it’s kind of, you know, it’s a balance there. But I think….I think also, I mean…and this might be a little bit of difference in my viewpoint too, is when I really thing of web standards, the web standards movement, I think about the browsers. I think the…gold web standards movement was to get the browsers all rendering standards correctly and supporting standards, which for the most part has been done, I mean granted there are still little problems here and there, and IE isn’t totally there, but at least we know that they’re on board now. I don’t think of web standards movement so much as being a thing where we’re getting the developers all on board. I mean I guess that’s part of it too, but when I think about the web standards movement when I was, you know, when I was first involved in it four or five years ago or however long it was, to me it was all about the browsers, and so, you know, today I think there’s a sort of chicken and egg problem where…browser makers could be innovating and doing cool new things and the one that consistently has done cool new things is Webkit in Safari, I mean they’re adding the CSS3 properties and they’re adding, you know, they’re coming up with properties of their own and adding them and they’re…and they’re doing it, I mean today we have this name spacing, right, where they can say, you know, it’s going to be hyphen webkit hyphen border radius or whatever, so they can keep it out of the, you know, it’s got its own name spaces, kept out of the global area so it doesn’t conflict with anything else, and I would just like to see a lot more of that kind of innovation from browser makers where they’re trying these new things, they’re throwing them in, they’re letting developers play with them, and like I said, it’s kind of a chicken and egg thing I think where the browser makers would like to do this maybe, but they’re afraid of the backlash from the standards community. If they’re adding new properties that aren’t part of a spec, you know, the standards community is…has proven that it’s going to backlash against them and it’s going to say, ‘why did you add this, this isn’t in the spec’, and so then they don’t do things, but the developers and designers also would like to try new things but…so it’s kind of a chicken and egg thing there a little bit I think. So that’s the…that’s the main …the main plan I have on that, and the, you know, like there are examples, like X….sorry, XML HTTP request or Ajax, you know, was a pr
oprietary IE property that they just put in, and eventually got standardised, and that’s kind of the way that I would like to see it go more is where the browser makers are doing new things and then we’re trying to standardise them, which is the opposite I know if, you know, some really respectable people and friends of mine like Jina Bolton and Andy Clarke which see that it should go the other way, which is that specs are written and then browser makers standardise on them, so…

Paul: Yeah…I must admit, listening to you talk kind of fills me with a certain level of dread, to be honest, when you talk about browser manufacturers. You know, I studied…I studied designing websites back in ’95, and you know, and so I lived through this whole period of time where you have browser manufacturers, you know, introducing all kinds of bizarre tags and it was absolute chaos, you know, and you didn’t know what was happening on what browsers. What’s to stop that happening again, beyond the standards community growling in the corner aggressively?

Jeff: Yeah, well I mean that…I mean I was there for that too. I studied also in ’95 and yeah, it was pure chaos. But I think, you know, I mean first of all I think the standards community has made a lot of inroads to where these, you know, I don’t think it would be complete chaos simply because we understand the value of standards now. And there are some…there are some mechanisms in place like the name spacing I’m talking about, where they can do these things and keep them from conflicting with other…so when …when WebKit decides they’re going to add border radius property, they can do it under dash webkit dash border radius, so that if anybody is actually using the real border radius without a, you know, prefix, you know, there’s no conflict, so I think, you know I just feel like there’s some mechanisms in place that would keep it from being so chaotic and the value of standards we’ve learned through the web standards movement, you know, and the browser makers are now on board with the idea of inter-operability, I think would keep it from being so chaotic, but I guess I don’t know for sure. It is…it’s definitely…there’s definitely a balance there because I definitely feel like the browsers have not been doing as many new things as they did back in those days, but those new things did cause problems too, so it’s, you know, but as a Designer I sometimes get bored, I’m like, I’ve played with all that stuff; I’ve played with all the tools we have and I want to try something different, you know, I want something that will…I want advanced grid positioning and, you know, I want to be able to draw shapes and, you know, it’s not out there.

Paul: I mean that is the only trouble I guess with…you know, you were talking about innovation and we need to be innovating more as Designers as well as browser manufacturers. The trouble with innovation to some degree is that you’re always in danger of undermining users’ expectations. I mean this is something you hear someone like Nielsen go on about loads. How…where do you feel the balance is between kind of doing cool new stuff and…you know, not undermining users’ needs or expectations?

Jeff: Well you’ll probably remember from back in the late ‘90s and that sort of thing that there was….and another sort of interest of mine is the sort of demise of the personal website, but back in those days, there was just so many experimental kind of crazy out there personal projects that were happening, and I think that that is a great place to try those things, because they’re not…they’re not real users accessing them; people that are using them are, you know, expecting that, I mean that sort of thing’s a great place to try new things, is on personal projects. Now again, with the culture of compliance that we have, I don’t know how that would fly today. Like if somebody made some crazy experimental site, I think there’s a certain fear of doing that because of backlash again from the web standards community, like you know, it’s a thing where people aren’t seeing the…the meaning, you know, it’s…I’m putting this out there because I’m trying to do something new and difference and …and it’s almost not allowed by the web standards community. Well, you can’t do that, because it doesn’t validate, or you know, whatever. And again, like I said, that’s not always specifically about validation and mark-up. It goes onto the…to that …into usability and into layout and design where people say, don’t change that because it’s messing with users’ expectations, but I think there are places where you can try those things and personal projects to me are the big place where you can try that.

Paul: You’ve got a good point about personal website. It’s like everybody now …have…you know, it’s all about blogs isn’t it, it’s all about….there’s almost this kind of citizen journalism thing where, you know, we’re all actually trying to create a little audience for ourselves and so therefore we don’t want to do anything too dangerous with our…with our personal sites. I remember my….my first personal site was absolutely chaotic, you know, it had no proper navigation whatsoever, but it was fun, it was a place I could experiment, so yeah…

Jeff: Yeah, that’s a real kind of…pet annoyance of mine is that …the loss of that, and I do think, you know, it’s because everything’s a blog, and I love blogs, and you know I have a blog, but I still wish that there was just a little bit more of that crazy experimentation that we had going on back then.

Paul: Mmm. I mean it’s a good point as well. A question I often get asked by people is, you know, how do I promote myself online. They say, I don’t want to…I don’t want to run a blog because I don’t want to write. Well you know, a personal project in a way you’re trying out different things like a sandbox you can play in. It’s a good way of promoting yourself and showing what you’re capable of, and that you do innovate without having to write reams of stuff, because let’s face it, not all of us are big writers, so….yeah

Jeff: Right.

Paul: Good to have your perspective on things. It’s really nice to have a kind of new perspective and you know, a different point of view, so great to have you on the show, and no doubt we will get you back in again in the future. Good to talk to you.

Jeff: Great. Thanks so much for having me.

Thanks to Anna Debenham for transcribing this interview.

Back to top

Listeners feedback:

Getting a site
off the ground

Shaun writes: Following the headscape redesign and promised boagworld redesign what tips can you give to getting a personal/own site off the drawing board/local machine and actually published.

The problem with internal projects is they lack motivation. They are never as important as client work because they donʼt directly generate income. The answer is to increase their perceived importance. I use a number of techniques:

  • Document the benefits to your business or personal profile.
  • Produce a statement of work just as you would an external client.
  • Price the project so that you can set it against your targets as a marketing cost.
  • Set a deadline and preferably announce that publicly so you are forced to meet it.
  • Block out time for the project rather than attempting to “fit it around” client work.

Ultimately it comes down to determination. However, knowing the value of the project and treating it as any other project really helps.

Testing

Erich writes: Thanks so much for the show, all the work you guys put in really shows. It is great learning about aspects of the business that I donʼt get to deal with much.

I was just wondering if you guys had any kind of a testing station at Headscape. We are looking at putting something like that together at my work. Somewhere you can just go sit at and run through all the browsers, maybe even some with different versions of flash and such. Do you guys run anything like that?

Because our designers are based remotely it is not easy to have a central testing suite. We did try that at one stage but it did not work. Connecting remotely wasnʼt as smooth as it should have been and we found multiple designers often wanted access at the same time.

Currently, each designer runs a number of virtual PCs on their individual machines. Most have two versions of XP one running IE7 and one with IE6. We also run multiple version of Firefox and Opera. Most of our designers also own macs allowing them to test Safari. Those that donʼt connect to a mac in the office.

To be honest our testing environment is not the most sophisticated. Most clients do not want to pay for testing against minority browsers and when they do we setup something specific for their needs usefully using a virtual machine. If you are interested in setting up your own Virtual Machines then I recommend VMWare Fusion(7) for the mac and Virtual PC(8) under windows.

 

Headscape is recruiting (again!)

Headscape are currently after two new members of staff. If you are an experienced Information Architect or a newly qualified developer, we would love to speak to you.

Yes I know, I am not supposed to be blogging at the moment. However, the reason I am not blogging is because we are so insanely busy. In order to get around this problem we are recruiting (yet again!). If you fancy the idea of working with the gang at Headscape then drop me an email.

Here are the jobs…

Information Architect

We are currently looking for a smart, articulate Information
Architect to work with our clients on initial stakeholder interviews,
user testing and the production of wireframes.

We are looking for candidates with some or all of the following skills:

  • An ability to organize complex information into simple, easy to
    understand structures.
  • Experience in running stakeholder interviews and other requirement
    gathering exercises.
  • Outstanding organizational and communication skills.
  • Proven experience in preparing, running and reporting on usability
    test sessions.
  • The ability to produce easy to digest documentation on IA and
    usability issues.
  • Extensive experience creating sitemaps, wireframes, use-case
    scenarios
    and flow diagrams.
  • Experience of working with large, complex, information heavy
    websites.
  • Ability to plan and execute competitive analysis.
  • Proven experience of working with and producing personas.
  • The ability to meet aggressive deadlines.
  • A good understanding of the design process.
  • A good understanding of technical constraints.
  • Experience of copyrighting.
  • Experience of working with B2C ecommerce sites.

The ideal candidate would be one who is able to work from our Southampton office for at least part of the week.

Experience:

  • Bachelors degree or the equivalent
  • 3 years experience designing websites preferably within a web design
    agency.

Graduate web developer

Starting salary: £22k+
Location: Southampton

Headscape is looking for a graduate web developer, with a 1st or 2:1 degree in a relevant discipline, who is passionate about their profession, keen to learn and can demonstrate good problem solving abilities.

Headscape’s core development technologies are ASP.NET v2.0, VB.NET, Microsoft SQL Server 2005 and XML/XSLT. We have our own, highly flexible content management system software that is the basis for most of our website implementation projects for clients. We are also in the process of developing an online service aimed at web designers.

If you don’t have skills in our core development technologies, don’t worry. We can help you to acquire the skills you’ll need. What we need is demonstrable ability and enthusiasm.

You will need to be a fast learner. You need to be a confident, productive developer. You need to understand relational databases. You must be motivated by developing real-world, web-based applications that really matter to their users. You’ll want to grab with both hands this once-in-a-lifetime opportunity to join a web agency with a national (becoming international) reputation.

If you have had some web development experience outside your degree course we’d love to hear about it too.

Your role will involve working in client project teams with project managers, designers, information architects and user interface developers to create superb bespoke web solutions on-time and within budget.

About Headscape

Headscape is an established web design agency based in the Southampton,
England. We produce top quality websites that are accessible to the
widest possible audience, easy to use and designed around our
clients business objectives. Clients include large government bodies,
educational institutions, charities and the commercial sector.

115. sxsw

On show 115: Lessons learnt at SXSW, Garett Dimon on form design and how to find usability test subjects.

Download this show.

Launch our podcast player

News and events | Lessons learnt at SXSW | Garrett Dimon on form design | Listener feedback

News and events

Microsoft launches beta of Internet Explorer 8

The big story over the last couple of weeks has been Microsoft’s release of Internet Explorer 8 as a beta. This has sparked a flurry of posts from various bloggers on the pros and cons of the new release. However the two that caught my attention were Kevin Yank at Sitepoint and Roger Johansson.

In short, IE8 looks like an impressive update with significant improvements in standards support. It would appear we can finally say good by to HasLayout, while at the same time welcoming decent CSS table support. This will open up a lot of possibilities for layout.

There are too many updates to go through here so I would encourage you to check out "what’s new in internet explorer 8" over at the MSDN blog. You might also want to look at the Internet Explorer 8 readiness toolkit that tells you all you need to know about the new browser.

Designers agnst

There seems to be a lot of designer angst flying around the tubes this week including two posts on A List Apart and one at ideas on ideas.

As designers we seem to spend too much time fretting over the creative process, always looking for inspiration and techniques to improve the quality of our work. Andy Rutledge piles on the pressure in a fascinating article about creativity where he redefines the word. A second post on A List Apart twists the knife further by arguing that as designers we need to be superhuman obsessives, willing to work late into the night to produce the truely exceptional.

It maybe the case that to be a truely outstanding designer we need to live in a world of unrealistic personal expectations. However, personally I like the down to earth reality of "Six suggestions that can make you a better designer." In this post Eric writes…

Your project doesn’t have to do everything. It doesn’t have to win awards, make you look good, or have a wry subtext. Getting something simple to work is hard enough. Concentrate on the basics, and see if your idea holds up when shown to the audience.

In my opinion there is too much written about being outstanding and not enough on just being better.

Usability challenges associated with web applications

The final story of the week is a post by Jared Spool. Jared is a truely exceptional usability expert and I can highly recommend his Podcast. He is also an excellent speaker that I had the pleasure to hear again this year at SXSW.

The reason I mention him is because of a post entitled "3 important usability challenges for designing web applications." What I find so refreshing about this post is that it focuses on the web applications we all have on our sites rather than the trendy web 2.0. apps we hear so much about.

Sites like delicious, gmail, of even the up and coming getsignoff (shamless plug!) are somewhat unusal in terms of web apps because the whole site is the app. Most web applications are a part of a greater whole. They are contact databases on corporate intranets or ticket reservation systems on airline sites.

The challenges associated with these types of web apps are different from their trendier cousins and Jared addresses these problems in his post.

It is definately worth reading if you have web applications on your site.

Back to top

Feature: Lessons learnt SXSW

Marcus shares his impressions of SXSW and the lessons we can all learn.

Back to top

Interview: Garrett Dimon on form design

Paul: So joining me today is Garrett Dimon. Good to have you on the show. How are you?

Garrett: Pretty good.

Paul: Now I have to say I’m really excited about having you on the show because I have to say I’ve become a bit of a fan. I’m sorry to admit this and I know it’s horribly embarrassing when people say things like this to you. But ever since you’ve released your website which so impressed me I’ve been kinda following your work since then, some of the stuff you’ve been doing. You’re everything I’m not. You’re minimalistic, you’re clean and considered and well thought through while I’m chaotic, over the top and brash. That’s why I’m attracted to your work I think because you’re the
opposite of me.

Garrett: Everything I do from my apartment and everything is just the less I have, the simpler things are, the better things seem to turn out for me.

Paul: If only I could live that way. I’m just not… my brain just doesn’t function in that way. But that’s really cool. So I wanted to get you on the show to talk about forms of all things. It’s something that we’ve touched upon a couple of times in the show but mainly as passing comments in news stories and things like that. In actual fact a couple of the times we have mentioned it, it’s your name that’s come up. It seems to be something that you write a lot about from time to time. You see different articles popping up in different places. Why forms? What is it about forms that seems to attract your attention?

Garret You know it’s hard to give an answer. I really don’t know. But in thinking about it probably my first bet is that I really don’t consider myself to be a designer per say in terms of the more traditional, more artistic design orientated type of visual designer. But with forms it’s more about the interaction design and the more logical aspects of design which are things that definitely work better in my head. So how do you write error messages; how do you label fields; what order do they go in; how should they be grouped; do they go on one page or two pages. Some of the more logical, more interaction issues. Then using what little design knowledge I have to supplement that and make it visually easier to digest the form and see and understand the pieces of it. Basically to me it’s basically the one thing that I feel like I can comfortably design and layout because there’s a lot more to it than just the aesthetics.

Paul: Yeah that kinda makes sense. Why do you think forms are so important in a way? It’s obviously something you consider important but there doesn’t seem to be huge amounts written on the subject. What is it that makes them worth of that kind of attention as far as you’re concerned.

Garrett: I think part of the reason is precisely because they don’t get enough attention. Any real attention you see to forms, I haven’t seen it recently but it’s how do you skin your forms to completely control how they look. Which to me is one of my huge pet peeves. It seems like such a waste of time. To worry about what the forms look like in the browser as opposed to how they actually work, I’m thinking if you’re going to invest the time worrying about how your forms looks it’s probably better to spend that time worrying about how they are going to work. Are you using the right form field for that job and some of the more critical things about forms. Really forms, especially now with web apps being what they are, forms are such a huge part of your everyday interacts. Things like efficiency, learnability, accuracy, all the vasts of usability that matter. It’s not just a matter of “Is this form efficient?”. Well it’s easy to make an efficient form but it’s not necessiarly going to be something that somebody else could learn and use or you might be able to learn it but will you remember how to use it next time you come back. Balancing all the different kind of vasts of usability that Nielsen identifies and really working them out so that you don’t dumb the form down so that it’s so simple that anyone can use it that it’s just a cumbersome process to fill out. Really kind of massaging it with all those things in mind.

Paul: You’re right when you say that in the world of web applications certainly forms are amazingly important but they pretty much appear on every site. It’s hard to thing of a site where they don’t appear.

Garrett: Well you think about a magazine site or anything like that where it’s more content orientated, it’s definitely a lower priority.

Paul: Yeah but you’ve still got contact us forms and things like that.

Garrett: Yeah, comment forms and…

Paul: Ok. So you touch there on the fact that one of your pet peeves was the fact that people worry about the design of their forms rather than how usable they are. What over common mistakes are you seeing from people about how they design and implement forms?

Garrett: I think there’s a whole slew of them and I think a lot of it is just worrying about the wrong things or not giving thought to things that matter. My main reason with the designing the form fields is that people are used to seeing form fields and what they look like in their browser, in their native rendering. Sure as a designer having pixel perfect control would be nice but I would hope that most of us who are now designing on the web would have forgone that state of mind where we have to have complete control over everything, it has to look exactly the way we want. A lot of time not only is it a waste of time but it actually hinders usability when those form fields don’t look like what someone expects a form field to look like or button for that matter. When the design becomes design for design’s sake it actually hinders usability in addition to just wasting time. When I initially started developing things it was all about consistency because consistency is easier to implement. If every form field looks the same, behaved the same, is the same size etc. it’s easier to implement because you use the same CSS and you don’t have to put as much thought into it. So while consistency is valuable there’s definitely an aspect of context that a lot of people don’t necessarily pay attention to. In some situations, I think 37 Signals have done a good job on this, they’ll make some fields larger than others relative to the size. In particular in Backpack, their headings aren’t just a form field they are actually bolder and look a little more like a header. They are a little larger font than the body of the note. It adds a little bit of context so that it’s more intuitive as to what the purpose of that field is. There’s a lot of different ways to do it. That’s just one of the more tangible ones. Basically the mistake being focusing too blindly on making everything consistent when there are appropriate situations to break the rules and use context to make some changes. Another one is just dumping a whole form onto the page without breaking it up into logical sections or groups. A lot of times people are afraid of making a form any longer visually because of scrolling. While you don’t want somebody to scroll 80 screenfuls, scrolling one versus eight screens is neligable.

Paul: So you wouldn’t suggest splitting forms across multiple pages then?

Garrett: Well there’s definitely context for that if it’s appropriate. Amazon is a great example there because you’ve got your payment screen and your address screen. It actually can be a fairly complex process but the time you’ve selected several addresses or updated an address, updated a payment method, changed the items in your cart. As you’re jumping around the different screen’s you definitely wouldn’t want all that interaction to try and be contained on one screen. It depends on the size of the form and the context of the form and how interactive it can be, how many potential branches off of that path are there to take. Another would be poor labelling. A lot of the time people label things. This goes back to just naming conventions in general. Just basic information architecture stuff. Whether it follows a corporate naming convention that may not be the right word for somebody that’s not inside the company wall or just simply flat out the wrong word for international [???]. Really anything. Just not putting enough thought into the label. The first thing that pops into your head isn’t always the right thing. Using the wrong kind of inputs so a lot of times whilst… and I have no idea in the world why people would do this… People who for instance who use checkboxes when they won’t use radio buttons and instead they write Javascript to control the radio button. Checkboxes as if they were radio buttons. Thinks like that where I just have no idea what these people were thinking in some of these situations. Just a lot of things like using a radio button or having a yes/no radio button where a checkbox could work. Multiple select lists which are an absolutely terrible interface element to use because a lot of people don’t know you can control+click. If there are small lines and you accidentally slip off that control key and click on a new one, it’ll select that new one and erase all your other selections in that list. There’s different things that kinda get abused and misused in situations where they really aren’t necessiary. A much simpler solution usually exists.

Paul: Yeah. I’ve seen the radio button, checkbox problem and it’s always very amusing.

Garrett: And vice-versa. Where it’s radio buttons and they try and make them checkboxes just because they think it looks prettier sometimes.

Paul: How bizarre.

Garrett: Which I guess is another great example – over using Javascript in forms. It’s one of those things. I don’t know where I heard it but the best description I ever heard of Javascript, Ajax or any of that stuff is that it’s really a spice. If you’re cooking you wouldn’t just dump a whole bottle into your pot. Or you wouldn’t start with a bottle of curry and dump it into a pot and say “OK, now what are we going to make?” You would decide what you are going to make and then think “You know this could really use a bit of curry here”. A lot of people just don’t use Javascript as a spice. It really starts to define the experience and in a lot of situations actually makes it worse or more confusing.

Paul: I presume you would encourage some use of Javascript for example. Things like doing some client side validation as long as it falls back on a server side validation. That kind of thing.

Garrett: Yeah absolutely.

Paul: OK so let’s turn that question around. We’ve been talking very much about the mistakes that people make, but what advice would you provide people about approaching forms? What are the things that they should be doing rather than shouldn’t be doing? I know that in some ways this is going to overlap but is there a particular approach that you take?

Garrett: One of the biggest things I guess is when ever; doing consulting for custom applications or things like that a lot of times we don’t realize that a lot of the complexity from forms comes from the complexity of the business. Whether it’s somebody doing markup or somebody designing a form, a lot of times you know if a business analyst or whoever creates these form requirements and says “here you go design this form.” It has 100 fields and this is out contact form and 80 of the fields are required. A lot of times people just say “okay, it’s my job to implement this. In my experience a lot of business analysts aren’t really familiar with principles of the web and what makes sense. A lot of times the real effort to creating a good form is in educating everybody else about what would be involved. Pushing back in situations like that. Not in a bad way but in a very professional productive way. “You realize that this is going to be a really bad contact form. Nobody’s acutually going to use it. I’ve even heard response like “That’s the point. If people contact us we have to take time a respond to them.” The problem isn’t with the form there, its with underlying things. Obviously that’s a little bit of an exaggeration. The idea is that the best place to start with forms and any kind of interaction like that is with the principles that are underneath there kind of guiding it. With the issue tracker that I am developing, I started out parring back the process of what’s the lifecycle of an issue. Trimming out parts that I didn’t think would really be necessary. I was just looking at it in the context of the lifecycle. I hadn’t even thought about what are the forms going to look like? How am I going to communicate this lifecycle within the context of the application? When it came down to the point when I had to explain how that actually worked, because I had trimmed the proccess and the lifecycle down so much, and it was only 3 steps really, I was able to translate that concept directly into the interface. If I had never actually gone and trimmed the lifecycle down and it had 6 different states that were very cross dependant and this state only is an option when you are in this state… It gets so complicated that even if I could express it in an interface, the code to build it would have been so absolutely unweildly that I could have never created a natural and intuitive inteface. So, I guess really challenging the underlying things rather than just thinking about the things on the surface. And then really just look at every form on it’s own. In it’s own light. What is the goal of this form? Should it be laid out like a traditional form? With one set of “label” “field” all the way down the page and a submit button. Should there be other buttons? Another thing when, I have a fairly consistent model that I am using when I am designing forms in my new application. The main form is for submitting issues and that one form is probably going to get 80% of the useage in this whole system. That and commenting. In the context of submitting issue alot of times you will be in a meeting capturing things as people are talking, capturing issues cause it’s an issue tracker. You want to be able to capture and issue, save it, and move on and capture another one really in kind of rapid succession. So I added an extra button at the bottom that I wouldn’t put on any other page, cause it doesn’t make sense, to save and add another. So it immediately saves that one and takes you back to the data entry screen. You can just continue in a circle and just keep on adding and adding. So really looking at forms and thinking about how are people going to be interacting with this? What are they doing in the real world while they’re using this form? Are they copying data from another application into here? Are they in the middle of a meeting just capturing items in rapid succession. What are they doing? Are they just quickly jotting it down from their iPhone? Understanding that context helps illustrate ideas and different sublte variations that you can do to forms and make them very very practical without adding a whole bunch of extra overhead on the implementation.

Paul: I remember you wrote an article at one stage redesigning eBay registration form. When you wrote about that you talked about the fact that this is a registration form. It is a one off form, and all of the ways that that then informed the way that you built the form. How it affected the positioning of things, and the layout and things, simply because it wasn’t going to be a form that people were using again and again. That’s the same kind of context that you are talking about.

Garrett: Yeah exactly. There’s always a different context to a form and it matters. It is easy to overlook it but that context, and really any design for that matter, context is so important but it is something that…I think that main reason that people don’t pay as much attention to context is because it requires a lot of extra work. A lot of times it’s easier, and it makes sense for kind of a first pass, to make every form look the same. It takes a lot more work to go through and re-invent the wheel every time you look at a form even though, re-inventing the wheel is probably a little bit extreme, to really give it some custom attention. Some tender loving care, just takes a lot more effort that lot of projects don’t have time for.

Paul: You mentioned earlier 37signals that you liked some of the stuff that they were doing. Are there any other good examples out there of forms that you really think are getting it right and are worth us having a look at?

Garrett: Probably the one thing that always jumps to my mind any time anybody asks me about forms is all of the work that Luke W is doing. I hate trying to butcher his name. The stuff that he is doing and hopefully his upcoming book is just really incredible. In depth. He’s done a lot of eye tracking research about label placement and button placement and he’s talked extensively about primary and secondary action buttons. All of his stuff is really incredible.

Paul: So where can people find out about him?

Garrett: I always just google for Luke W to get to his site. Functioning form is his blog. He’s the first hit for Luke W.

Paul: I’ll add it to the show notes. People can get to it via that. That’s interesting. I must admit I hadn’t hear of him so I’ll definitely check that out.

Garrett: He’s one of the, I don’t know his exact title, but he works at Yahoo and he’s got a plethora of presentations about form design and all of the kind of stuff. Really sharp guy.

Paul: And he’s writing a book you say as well?

Garrett: Yes he is for Rosenfeld Media. It’s due out early 2008.

Paul: Excellent. So just to finish us off. A little bit of bile at the end of the interview. Is there any forms that you want to name and shame? Any site that do things really badly that we can all go and laugh at and sneer at?

Garrett: You know that’s a very tough thing to do.

Paul: (lauging) So many out there.

Garrett: Well there are so many out there. But at the same time too there are a lot that seem like they could use improvement but they’re companies that are investing a lot of money and research to improving their forms. So I’m hesitant as an outsider, somebody who isn’t exposed to some of that data, to try and call them out, when they’re probably acutually right on the money. The top two that come to mind that I know are successful are eBay and Amazon. I think Amazon succeeds on the interaction design of their buttons and the flow of their checkout is natural and intuitive but I feel like a lot of their page designs, and it could be a very intentional thing in order to, although I hate thinking that Amazon would acutually do that, to kind of trap people and confuse them almost. If you look at each page in and of itself I think there is a lot of design things that they could make adjustments to that would make the pages easier to understand and comprehend at a glance. I feel like right now their design of their checkout process, or most of their site in general, is very busy and intense. It’s difficult to focus on one element because there’s so many elements. There is very little very intuitive page hierarchy within each page. And they’ve made leaps and bounds, watching the site evolve over the years. But, it still feels like there’s a lot more room for some design consistency for them to introduce. They’re slowly getting there. eBay is another one who, I know they acutually, I forget their CEO’s name, but she declared 2008 the year of user experience at eBay. They’ve acutually invested a lot in trying to improve their forms and really their user experience period. eBay is one that I’ve only successfully purchased something on there once and everytime I try to swim through there I get lost and just give up. Too me any situation like that is just begging for help. I think any form, even the best of the best, even 37signals, everybody is still learning. This is all so new that even the best forms have so much room for improvement. Even my stuff, I come a month later and say “what was I thinking there?” There’s so much work that needs to be done. I think that Luke’s work that he’s doing is probably some of the best and most important work that we’ll see in forms in the near future. He’s starting to really put down facts about what really is good and bad and why it is good and bad. Up until now most of us have just been pontificating based on “well this form is hard to fill out because of errors.” Or you know, the form breaks, or the error message isn’t helpful. Very obvious things. He’s tracking the much more subconcious things that until now nobody’s really dug into and made claims about. It’s kind of a cop out on your question.

Paul: No No. You gave two example there and you gave constructive reasons why they should be improved or could be improved. No I don’t thinks it’s a cop out. You’re just so much nicer than I am. You didn’t go for the jugular that was the only thing. Garrett it’s been great to have you on the show. I think that you’ve given us some real good hints to get going I guess and make some imrovements. It was good to talk to you.

Garrett: Yeah likewise.

Paul: No doubt we’ll get to talk again soon before too long. Especially when you’re issue tracker comes out. We’ll have to get you on hear all about that.

Garrett: Yeah. I’m hoping it will be sooner rather than later but it’s definitely tough to balance the feelancing and paying the bills and making progress on it.

Paul: I know exactly how you feel, we’re doing the same thing at Headscape at the moment. It’s always difficult. Client work is so tempting because it pays the bills here and now.

Garrett: Yup, exactly.

Paul: Okay good to talk to you and we’ll talk again sooon.

Garrett: Sounds good.

Thanks to Lee Theobald for doing the transcription

Back to top

Listeners feedback:

Finding usability test subjects

Our audio question comes from Clare who asks…

"Where do you find your test subjects for more formal user testing"

It can be hard to find good test subjects and I am not aware of any agencies out there that source people for you (although I am sure somebody will correct me).

I think it is worth stressing that finding users who match the demographic of your target audience is not a huge concern. As Steve Krug points out in his book "Don’t make me think" most problems are encountered by any user. That said, where possible it is good to find people that roughly match the specification.

To be honest our approach it is very adhoc. It normally consists of both Headscape and the client scrambling around to see who you can find. The client often has "tame" customers they can ask and we fallback on family, friends and other clients for recommendations.

I should also say my local church has been very handy! A church seems to have a good cross section of ages and backgrounds and an advert in the church newsletter often does the trick. Equally advertising in your local newspaper can attract people, but you have to be willing to pay for their time.

Accessible tables

This week’s email is from Daniel and takes the form of a recommendation rather than a question…

"Could you cover the tips discussed in this article [about accessible tables]? I have seen a lot of tables on the web. Almost none of them uses any of these tips."

The article Daniel is refering to can be found on the Opera developers site, which is a great resource covering all aspects of web development (not just stuff relating specifically to Opera). The specific post looks at how to markup data tables in an accessible format. Since designers have stopped using tables for layout they have become largely ignored. However, if not marked up correctly they can prove a real problem for speech readers. A simple table such as this…

Day AM PM
Monday Meeting Travelling
Tuesday Free time Meeting

…can become impossible to understand when read back because it is read in a linear fashion…

Day, AM, PM, Monday, Meeting, Travelling, Tuesday, Free time, Meeting

However, if marked up correctly it suddenly makes sense…

  • Day Monday AM Meeting
  • Day Monday PM Travelling
  • Day Tuesday AM Free time
  • Day Tuesday PM Meeting

Great find Daniel. These are tips we should all be implementing.

Lessons learnt at SXSW 08

Marcus shares his impressions of SXSW and the lessons we can all learn.

Looking back at my
notes, I didn’t realise how much I actually took! So, I have decided to focus
things a bit and look at talks given by people from three big interactive
agencies. These presentations were fascinating to me as they gave me an insight
into how these companies run their businesses, their projects and make
decisions about their futures.

Respect!

This was a great start
to the conference, really got me in the mood. What I expected was a Zeldman criticism of the corporate world’s misunderstanding /undervaluing/general
disdain of all things ‘web’. I think this was what he was trying to do but what
we got was a run down of how Happy Cog works or more particularly how it runs
it projects – great for me!

It was quite
reassuring in that they do pretty much exactly what Headscape does:

  • Stakeholder interviews – though there was
    a wonderful description of when you really know that you’re about to get to the
    bottom of an issue with a client – that ‘close the door’ moment
  • User testing/requirements
  • IA
  • Design – they still do multiple concepts (which
    we very rarely do now) though try to avoid ‘Frankensteining’ the design
  • Build

The big thing, for
them, missing from this list is content and copywriting. They employ a
specialist copywriter who has a wide-ranging remit from kicking off the content
process to completely writing a site’s content. However, usually they
concentrate on editing ‘raw’ content into one styled voice.

Zeldman says that the
content is the most important aspect of any site. He has a point – we
don’t go to websites to enjoy the design or appreciate the usability of the
navigation.

This is, I expect, the
next big thing for Headscape.

Ten things we’ve learned at 37
Signals

Jason Fried telling
everyone 10 things they’ve learned at 37 Signals. I found his delivery a little
grating, which is why I probably don’t have too detailed notes on this talk.
But, again, this was interesting stuff from my point of view, learning about how
a small company operates particularly because we are about to go down the
product road.

The general theme of
his biggest messages were:

  • Keep it simple – otherwise you won’t ever
    release your product.
  • Don’t plan – plans tend to have a habit
    of becoming ‘sacred’. That is, people tend to stick to a particular goal
    religiously, rather than adapting to what is the best way.
  • Don’t expect your next thing to be way better
    than the last. If you’ve had a hit it doesn’t necessarily mean that you’re next
    offering is going to be as well.
  • Don’t talk to each other! I really wasn’t sure
    about this, but JF basically felt interrupting people through talking was the
    key productivity killer. Methods of communication that can be ignored -
    IM, email, Basecamp etc – are fine.

10 Tips to Managing a Creative
Environment

This was the best talk
of the lot for me. With most of the ‘famous’ agencies, I feel that what we do
is not too far away from what they offer. However, these guys felt like they
were in a higher league.

The talk was given by
Bryan Mason (CEO) and Sarah B. Nelson (Design Strategist) of Adaptive Path.

They had looked at
(and interviewed) a number of other organisations that they felt there was some
similarity with a design agency. These included:

  • Theatres
  • Restaurants
  • Orchestras

They are all highly
creative places (probably more so than the design agency), they have absolute
deadlines (again, probably more so than the design agency) that mean highly
regimented processes are required while keeping creative staff focused.

These are the tips
that they have learned:

  • Cross-train the entire team – not easy, but it does build
    understanding and therefore empathy towards other people’s jobs and the effort
    required to deliver them.
  • Rotate creative leadership - makes people value others’ decisions
    because they know that they will get their turn.
  • Actively turn the corner – meaning make a specific decision to go
    from ‘thinking’ to ‘doing’ and make sure that everyone knows which phase
    they’re in. The thinking phase being the point where there are no bad ideas or
    questions with people moving into their specific roles (see point 4) for the
    doing phase. They described this process as divergence to convergence.
  • Know your roles - once the corner is turned everyone
    needs to know what is expected of them and when.
  • Practice, practice, practice - they mean ‘practice as a group’ i.e. keep
    familiarising (and improving) processes. This ensures quality under pressure.
    Look to bring new people in at quiet times or on internal work.
  • Make you mission explicit - to the entire team so everyone knows
    where the team is supposed to be going and what they stand for (i.e. what it
    means to be a ‘Headscaper’ instead of just a ‘designer’ or ‘developer’). Cut
    out stuff that isn’t part of the mission – be ruthless.
  • Kill your darlings - but do it respectfully e.g. for the
    young chef – "we won’t use that recipe, it’s not for us. You put it on
    your menu when you get your first restaurant!" AP hiring decisions are made
    without discussion – thumbs up, they’re in, thumbs down, they’re out.
    They only discuss if it’s neither.
  • Leadership is a service - leaders should talk to everyone about
    their involvement. For example, a creative director should provide space not
    enforce their vision.
  • Generate projects around the groups’ interest - in other words, only take on work that
    you want! Easy said. However, maybe a watered down version would be to dish
    work out based on personal preferences rather than just who’s available. BM
    said "any time that AP has taken on work for the money or the kudos of a
    particular client, it has bombed. If there’s no interest internally in a pitch
    - drop it".
  • Remember your audience - what you’re doing isn’t for you, don’t forget that and don’t
    forget who your specific audience is. They used the kitchen analogy where the
    restaurant manager’s audience is their existing customers. He needs to make
    sure that the guy who loves liver and onions gets the same every time. The chef
    doesn’t care about this. His audience is the new customer.
  • Celebrate failure – creativity
    doesn’t always work. Carry out project post mortems but call them ‘after
    parties’! Discuss what worked, what didn’t and what was learned. Don’t
    apportion blame. You want your creative team to take risks and to feel that
    they can take risks. If you have a blame culture then safe and boring (and
    eventually stagnation) is where you’ll end up.

What goes into a user testing script

I have talked before about the benefits of user testing. I have discussed how to user test on a budget. Now, I want to look at some basics that go into every usability test script.

What should go in a usability test script? That largely depends on what you are testing. If you are testing design concepts then your testing will be limited to questions about the navigation and communication of core messages. You could carry out some flash testing but your options are fairly limited.

However, if you are testing a wireframe or version of your site then more options are available. In such cases, the testing is about completion of tasks. For example, could the user find the price of a particular product, or the contact details for a key member of staff.

The choice of tasks to test should be based on key activities that your personas wish to complete. Let me give you an example. Let us say we have a persona called Jane who was considering attending a health spa. The first two pieces of information Jane wants about the spa is price and availability. It is therefore logical that any testing for the spa should include tasks to find this information.

Although what is tested will vary, there is some information that should always be included. Below are highlights from a fictional transcript demonstrating what should always be covered.

Hi Jane. My name is Marcus and I am going to be running the session. Joining me is Paul. I have asked him along to take some notes as we talk. I hope that is okay.

By introducing yourself and others in the room you help to put the user at their ease. Offering coffee can help too! Be sure to explain any recording equipment in the room as this can be intimidating.

The idea of this meeting is to see if we can improve a website that is currently under development. You are going to help us test the site. Its important to understand that we are testing the site and not you. So you can relax!

By explaining to the user that you are testing the site and not them, they will behave more naturally.

I should also explain that there are no right or wrong answers so don’t worry about messing up.

We need you to be honest. If you are struggling with something or don’t like the way it works, say so. You aren’t going to offend anybody.

If the user perceives the session as a test (with right and wrong answers) they will tell you what they think is right, rather than what they feel.

Also, many users are worried about offending the facilitator with negative comments. This is why it is important to stress that you want honest answers and no offense will be taken.

The most important thing to remember is that we need you to explain what you are thinking. Try to think out loud and talk about the various options you are considering. Before you click on any link explain what other options you considered and why you picked the one you did.

Getting the user to articulate their thoughts is fundamental to the success of the session. It cannot be stressed enough. Even though you have explained this up front, you will still need to prompt them throughout the session.

Finally, if you have any questions please feel free to ask. I might not be able to answer them straight away because this could prejudice the testing. However, I will answer them at the end.

It is important to explain why you may not answer their questions during the session. If they do ask questions be sure to address them at the end.

Let’s start off with something easy. Can you tell me a bit about yourself? Tell me about your job?

It is always good to begin a session with some simple personal questions such as family status, age and job title. This helps build the users confidence and provides useful background information.

Tell me a bit about your computer experience. How confident do you feel using a PC? Do you use them for work? What about at home?

How much do you use the internet? What kind of sites do you use regularly and find most useful?

Building up an understanding of the users computer and web experience provides context for the session. It also indicates how representative they are of the target audience.

Okay, lets talk about the site. Its a site for a health spa. Before I show you the site I want to ask about your expectations. What do you think a health spa website should look like and what information would it contain?

It is helpful before revealing the site to ask users about their expectations. If the expectations do not meet the reality it can cause confusion. Asking about expectations also provides opportunity to find out more about what users want from the site.

The session would then continue to address issues specific to the stage of development the website was currently at, This part of the test is primarily either “do they understand what they are seeing” questions or task completion.

113. Hiring

On show 113: Christian Heilmann on common Javascript mistakes. Marcus talks about hiring new staff and Paul shares his journey into screencasting.

Play

Download this show.

Launch our podcast player

News and events | Hiring new staff | Christian Heilmann on common Javascript mistakes | Listener emails

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

If you feel you could help once in a while please drop me an email and I will add you to the list.

News and events

Highly extensible CSS

A while back Cameron Moll released a tantalising screencast of a seminar he was running on Highly extensible CSS. Website today need to be ultra-flexible, dealing with changing content, multiple devices, and user customisation. Cameron’s presentation aimed to teach designers and developers how to build interfaces capable of adapting to the unforeseen.

Unfortunately, I didn’t get the opportunity to attend. I was therefore excited to discover that Cameron is about to cover the same subject in a series of four posts on his website, all for free!

So far he has only posted the introduction. However I am really looking forward to the whole series. For now just check out the screencast and see if it excites you as much as it did me…

Video tools

Talking of screen casts I have actually been working on several myself at the moment. We are in the process of redeveloping the Headscape website and have decided to include a couple of demonstrations and presentations.

This means I have been in research mode and I thought I would share what I have found. Firstly, I have discovered a great screencasting tool called Screen Flow. This Leopard only software stands head and shoulders above anything else I have tried on either Windows or the Mac. It is amazingly easy to record and edit your screencast and has some great built in effects. My favourite feature is that it will capture from both a web cam and the screen at the same time. This allows you to cut between video and the screen or even overlay a video feed on top of the cast.

Once I had recorded my video I started to look for somewhere to host it. Although I would be foolish not to put it on Youtube where it will get the most exposure, I didn’t want to use Youtube when embedding on my site. The quality on YouTube is poor and you are limited over length and size. With this in mind I looked at a number of competitors. The winner for me turned out to be Vimeo. The quality is superb, they are much more flexible over length and time, but most of all they provide links to the original file and allow you to customise the interface.

So, if you are looking to create a screencast I highly recommend Screen Flow and Vimeo. Also, if you are looking for tips on how to make an engaging video then check out Ryan Caron’s tips over at Carsonified.

Microformat boost

The last thing I want to mention in this week’s news segment is the growing interest we are seeing in Microformats recently.

For a start Firefox 3 is going to have built in support for Microformats, which will be hugely significant in itself. However the guys over at Yahoo! are doing some interesting stuff in the area too. Yahoo! Micro Search is a new way of viewing search results that include all kinds of metadata including microformats. According to David Peterson at Sitepoint this could allow Yahoo to really challenge Google.

I am not sure whether that is true or not, but I do know it is a great time to start using Microformats. If you want to get started then check out Microformats.org or for you more advanced users have a look at this interesting demo of compound Microformats.

Back to top

Feature: Hiring new staff

Marcus shares his thoughts about taking on web design staff for the first time.

Back to top

Expert interview: Christian Heilmann on common Javascript mistakes

Paul: As I said at the beginning of the show, joining me today is Christian Heilmann. Hello Christian, how are you?

Christian: Hello Paul. Why it’s quite fun cause it’s Valentines day & I’m stuck with you as a date.

Paul: Well I’m sorry that you had to ah to endure me on Valentines Day but I’m sure you’ll survive. And um yeah… so basically, the reason that we’ve got you on the show today is we want to talk a little bit, a little bit about javascript. Now we’ve talked a lot of times about javascript before and it’s not a new subject, but I kind-of um… felt it would be worth touching on the kind-of common mistakes that we’re seeing a lot in the world of javascript at the moment. I think um… you know obviously javascript is very in and there’s load of cool stuff being done with it but not always in the wisest ways. Um… and then on top of that, so there’s this kind-of group of people that are doing quite advanced stuff with javascript with maybe not considering all the ramifications of what they’re doing. And there’s another kind-of group of people which are people like myself that go ‘Ewww… look at that, that’s cool I want to start doing things like that.’ And so you know a little, a little knowledge is dangerous as they say, and you know we’ve picked up books like Jeremy Keith’s scripting book and read that and now we think that we can, we can build javascript applications and are kind-of hacking things together. So I thought lets spend a few minutes looking at those, those kinds of issues. So um um… maybe probably a good place to start off if you don’t mind Christian is what advice you’d give to somebody starting to learn javascript so that, so that they kind of avoid some of these mistakes you know from the get go. What good principals, good foundations should they be working on?

Christian: Um… the main foundation is that javascript is a language in its own rights. It’s uh uh… you can not take any other knowledge and try to apply it on to javascript and this is where the two angles actually come where people that come from a higher programming language background trying to find the same principals that apply there inside javascript

Paul: Um hum…

Christian: Or people that come from CSS design background, basically think that it’s as easy as applying a CSS selector to an element that everything will be matched magically…

Paul: Yeah…

Christian: … and not realizing that there is an impact on speed and an impact on how the browser actually finds these things and what kind of mistakes the browser does. The main thing to remember about javascript is ah… there are many different ways of javascript, there are many different environments where it’s applied. So there is lots of really clever things being done right now with javascript, even on the service side and inside frameworks and inside API’s. But there’s also, in the end you would run it in a browser sooner or later. And if that’s where you are going to work the best advice is actually to not trust javascript ever and to actually um… enhance with it but not really rely on it.

Paul: Um hum…

Christian: So if there is a window print link, then this link should be generated with javascript and not just be an ‘href’ javascript window print because if somebody doesn’t have javascript or for some reason javascript’s broke, or the engine doesn’t work in your environment then you click the button and nothing happens. And there’s nothing worse than uh promising an end user something that you don’t deliver in the end.

Paul: Yeah.

Christian: The other thing is that uh… when you start from javascript, one of the first things to remember is that you should always learn the if statements and learn that they’re your best friend. Like never do: ‘apply something’ BUT IF ‘something’ THEN ‘apply something’. So if you…

Paul: Umm…

Christian: Try to access a heading with an ID for example, and then you don’t just do: HEADING ID ‘something’ = ‘something’… cause it might not be there.

Paul: Yeah.

Christian: So basically test for it, before you apply it. When you follow this principle through with all of your programming, this kind of defensive programming, then you will (we will) definitely write good javascript in any programming language really. Over the years when you get more and more experience you just learn more and more ways how the technology that you use fails…

Paul: Mmm…

Christian: …rather than actually succeeds. So you learn how to avoid the biggest pitfalls.

Paul: I mean, you always hear this thing don’t you about um… that not all browsers support javascript or that not all users have javascript turned on. I mean how real a problem is that? Is that being overly cautious to worry too much about that kind of thing or is it a real problem? Are there actually a lot of users out there that… that don’t have javascript for one reason or another?

Christian: It’s impossible to say. Its statistics and it’s a bit like flash. When you when you look at flash statistics and you hear like a 99% have it enabled on the Adobe side, then you’re like ‘Oh yeah really.’ because these are the only stats that you find…

Paul: Um hum…

Christian: …the company that delivers that is a bit like… yeah, I think that the Microsoft help pages with have a lot of hits from people with Windows.

Paul: Yeah.

Christian: So um… it’s not really a problem I don’t see the problem at all. I see the problem of people… uh, architecting and designing applications around the premise that javascript will be there, and everything will be happy and work.

Paul: Mmm hmm…

Christian: If you write your applications like javascript does not need to be there, but is nice when it’s there and actually makes it a lot smoother, then you don’t have a problem…

Paul: Mmm…

Christian: I don’t buy this whole argument of like… oh AJAX is so cool because we don’t’ have much traffic on our servers any longer. It’s like yeah, but you never know the environment that javascript is run in. It could…

Paul: Mmm…

Christian: …my mobile phone, it could be it could be an iPhone, it could be it could be an old browser. I just bought myself this eeePC that doesn’t have much memory. It’s uh… you can never expect the end user to actually cater their hardware to your needs…

Paul: Mmm…

Christian: So it’s pretty… it’s pretty unsafe to actually rely on it. So even if the statistics are ridiculously low, it doesn’t really matter because you don’t want to deliver a bad practice and deliver a bad experience to users.

Paul: Mmm…

Christian: And then there’s, of course, the SEO problems as well. If you have a navigation that’s dependent on javascript and doesn’t show anything – or you make elements clickable that shouldn’t be clickable, then you won’t have search engine spiders following these links and your sites won’t be indexed.

Paul: Mmm…

Christian: Same with accessibility. When you make something clickable that is not clickable by default, like a ‘span’ or a ‘div’ or whatever, then you can not expect a user agent actually to allow people with assistive technology or people that use a keyboard to use the same application because browsers are just not clever enough for that.

Paul: Mmm. So what about people, um… starting out as absolute beginners – what are the most common mistakes you’re seeing them make when they start out doing javascript?

Christian: A lot is copy and pasting and hoping that nothing breaks…

Paul: (Laughs)

Christian: …and ah… also um… a lot of it is skimming tutorials. A good tutorial writer will tell you a lot in the paragraphs between the code examples.

Paul: Mmm.

Christian: And um… just going through the code examples and trying to figure out what’s going there yourself and copy and pasting it does not really make you a good developer. This information was put there for a reason and actually explains you the smaller bits that you need to know about the language. ‘Cause most of the javascript errors that actually happen in the real world is not because you did a coding mistake, but because you made an application mistake that you expected a browser to do something. Or you expected an application to give you the right information back, where as you didn’t test for it. So um… I think trusting tutorials and uh… just copy and pasting code without actually knowing what it does is a very dangerous thing.

Paul: Mmm… Would you apply that same principal to frameworks? You know and not under… if you don’t understand what a framework is doing then it is probably best to avoid it.

Christian: Well it’s a matter of what it does. I mean uh… the last few years in web development have become a lot more transparent than before and that’s… Firebug is actually to blame for that.

Paul: Mmm…

Christian: It’s great because you can look at code that is generated by javascript or a backend application and you always know, you can always analyze the whole document ñ what’s doing on there if you know your Firebug. That’s another thing that I would actually tell any developer that would start with javascript to get his head around it’s like java… uh… Firebug is a great great way to learn from other people’s mistakes and also to monitor what’s going on in your scripts all the time. When it comes to library’s, that’s a bit of a different story because um… I had a bit of foot in mouth moment there when I proclaimed in the past that most library’s are bloated and unnecessary and um… now I am part of a library…

Paul: (Laughs)

Christian: …and uh I’m also I also talked to media AJAX to a lot of library developers and I realized that all the libraries do the same thing. All of them actually make the pain and the uncertainty that is browsers out there bearable for you.

Paul: Mmm.

Christian: So um… if you don’t understand what the source code of jQuery is, or the source code of the YUI is that does not mean that you shouldn’t use it.

Paul: Okay.

Christian: Other people have had that problem before you and loads and loads of people find bugs and submit bugs and help these libraries get better. So now a days if you are a new javascript developer I would basically say that you have learn the syntax, you have to learn the standards like what does DOM scripting mean, how does event handling work – but by all means if you go into a production please please use a library.

Paul: Oh okay.

Christian: Because that one take the cruft of all the fixing and uh… hacking that you have to do to make something work away from you.

Paul: Mmm.

Christian: It’s a matter of what you do. I mean if you’re doing a high traffic Twitter clone, or whatever, that runs an error application then you might have to these fixes – but you’re not necessarily going to do that as a new beginner.

Paul: Okay yeah… that that’s a very different opinion than I’ve heard in the past and it’s quite interesting to hear the other side of the argument. It’s good. So what about… what about dangerous people like me? So you know… where I knew nothing about javascript but I decided: ‘Yeah, I really need to learn this’. So I got a couple of books, I’ve read a couple of books and I’m kind of up and running but I’m not… you know I’m not a developer. I’m not somebody that’s an expert. You know… what other kind of common screwups you’ve seen people like me make?

Christian: Um… It’s tricky to say. It’s like most of the time, what these kind of people do is also try to solve problems that other technologies have with javascript.

Paul: Mmm…

Christian: Which is sometimes cool, but sometimes it’s also thinking about there’s a reason why that doesn’t work. So um… I mean the classic is… the classic is like rounded corners and things like that. There are loads of javascript rounded corner solutions which on the outskirt look like they are really clean solutions. This is also might be to put a class on a ‘div’ and to put a bit of javascript in and then everything has rounded corners and there’s no harm done.

Paul: Mmm.

Christian: That the javascript needs to inject a lot of HTML and probably is slow doing so. It’s the other side of the story it’s uh… I think people like you, that are just enthusiastic about it and basically want do it are not necessarily savvy of the implications that it has.

Paul: Yeah.

Christian: So the uh… the information that we need there is that we need a lot more tutorials on um… how javascript impacts performance. And we are starting with that already in the development network and other people are doing that as well, but there are lots of mistakes being done as well there. The other problem that I see with people that have just started with javascript, is they apply… they find one solution, they find one library then they become the biggest fan of that library then everything else is rubbish.

Paul: (Laughs)

Christian: And uh… that is a very dangerous attitude as well because you will not be, you will in your career work for different clients that will use different libraries as well. So you shouldn’t make yourself dependent on only one but understand what the benefits of each of them are and where you should apply them.

Paul: Um huh.

Christian: And how they actually make your life easier, or how they make your life less easy, than another competing product. So the implications there is that a lot of people use these newer libraries, or newer ways of using javascript, to actually make javascript behave like their favorite language or their favorite technology. That’s why people went nuts with every javascript library came up with the CSS selectors.

Paul: Yeah.

Christian: And that’s great because now I can go fifty levels deep in my CSS selector and the javascript finds what’s in there. While this is already an indicator that your HTML is not necessarily good structure

Paul: (Laughs)

Christian: …and it also means that if you change your HTML in the future you also have to change that path, or if you don’t change that path then your javascript will break.

Paul: Yeah.

Christian: And a lot of libraries break silently as well. So instead of just getting the error in your face that you’ve basically screwed up, you will not know what’s going on and will wonder what’s going on.

Paul: Mmm.

Christian: And when that happens that’s normally when people, like you, fire up emails to the library developers and tell them that their product is rubbish.

Paul: (Laughs) Yeah… I can’t disagree with that. That’s the kind of thing that I’d do probably. Um… what about, I’ll tell you the one thing that I’ve come across is that… I’m kind of competent enough to write functions to do a lot of the things that I need to do. Nothing really complicated, I couldn’t build anything too sophisticated, but you know enough to get me by. But then as I’m kind of looking at other people and what they’re doing um… a lot of them are using object orientated type techniques in the code that they are writing. There’s me hacking away with little functions and there seems to be some transition across object orientated approach when you kinda hit a certain level… you know why, what’s the benefits of that? Why do people take that kind of approach?

Christian: (Laughs) Um… It’s been very beneficial in other languages, and other environments, especially when the environment is rather sophisticated.

Paul: Mmm.

Christian: Then ah… you seen for example action script. Action script has been as much as a hacky javascript. Yeah, look what I can do if I do it this way language and now with the Flex frameworks, and Adobe opening up more and more to the java world, um… it’s getting more and more into structured ways. And the structured ways are hard to understand for somebody who is not from that background.

Paul: Mmm.

Christian: And I can safely say that, I’m not myself. So I um… I have a lot of problems with like properly, or massive structures, and frameworks. But when you see people do proper action script, for example, or do Rhino applications for the server in javascript, or some of the things that are happening with javascript 2… that there is a reason for that and the reason for that is the scalability is just so much bigger.

Paul: Right.

Christian: It’s uh… basically you can extend an object and I can reuse a class and I don’t have to worry about that. It’s like I start building these little small components, all of them in themselves tested and unit tested, and I know they work. And then I can build a bigger application from them.

Paul: Mmm.

Christian: Basically without really needing to know to test these things ever again.

Paul: Yeah.

Christian: That’s how things like PEAR and PHP and Perl libraries work as well. It’s people extending these kind of already existing bits, and bobs, rather than starting from scratch every time.

Paul: Mmm hum.

Christian: Most of the time for the little web development things that we do like the AJAX form or the Constentina navigation that’s not necessarily needed, but when you write a library for example, and it grows, like YUI is growing or like jQuery is growing as well… then you need to adhere to these standards ’cause otherwise everyone will just submit their own code in forms that are just terrible.

Paul: Yeah.

Christian: And there’s not much magic to it. I mean I get annoyed when I see javascript guys going on stage and saying like: ‘Well guys, this is a function and when it’s an object it’s a method and…’ and why should I know this? Well you should know this because you need to communicate with other developers as well sooner or later.

Paul: Umm hmm.

Christian: And these people speak that lingo and rather than you having to explain yourself for 15 minutes you could communicate in 3 minutes.

Paul: Mmm.

Christian: And that gives you more time for lunch break.

Paul: (Laughs) …or drinking…

Christian: So the worlds of hard core programming and javascript are actually getting closer and closer and seeing some of the things that browser vendors come out with and some of the other software that builds on web technologies that is being built at the moment, I don’t think that we can actually rely on our being the cool cookie web developer anymore.

Paul: Mmm.

Christian: It’s a bit like we have to have broaden our horizons the same way that backend people have to broaden their horizons when it comes to using javascript, but you can only make someone understand your problems when you understand how they tick.

Paul: Mmm.

Christian: Otherwise you start preaching to the choir.

Paul: Yeah. Okay here’s the last question to wrap up with. I’m going to open it up and let you rant uncontrollably. What are the worst mistakes that you’re seeing at the moment made with javascript, just generally.

Christian: Uh. The worst mistakes that I see are that people write little scripts for tasks over and over again.

Paul: Okay.

Christian: The same task and I see them actually tying the interface a lot to the javascript. So…

Paul: What do you mean by that?

Christian: Instead of making a javascript that actually creates the things it needs, there will be HTML that is just not necessary where the is not javascript available.

Paul: Okay yeah.

Christian: So instead of starting with the proper HTML and CSS structure, you basically have this whole gumph of HTML because there’s the javascript to clean it up anyways.

Paul: Yeah.

Christian: So um… basically the main tip is you will never ever be able to replace a proper HTML structure. It doesn’t matter where technology is going because technology will go away from that sooner or later, but at least a human could actually go there and see that there is a structure.

Paul: Mmm hum.

Christian: And that there’s a way to convert this to something better in a second step. If you’ve created a lot of spaghetti code with like HTML and javascript mixed in and lots of little scripts in there, then you will never be able to convert that to something better in the future and this is what we’ve been running in circles for years and years. We’ve never been improving things, we’ve just been fixing things and adding little bits, and bobs, to it.

Paul: (Laughs)

Christian: The other thing that I keeps seeing is well the fan boy thing, about javascript libraries and of the academic way of some people measuring javascript. You have all these like, I mean there’s people that spend like weeks finding different javascript includes and script libraries and measuring how fast they are on their computer…

Paul: (Laughs)

Christian: …generating twelve thousand objects and trying to put them on dominoes. Show me the application that needs that done, then your comparison actually makes sense.

Paul: Yeah.

Christian: It’s the same as CSS. You have like ’10 Most CSS Tricks That You Never Knew’ or ’10 Most Beautiful Naviagations’. It’s like list blog posts digging their way through the internet.

Paul: (Laughs)

Christian: And it’s the same way there right now, like I can appear immensely cleaver if I just put loads and loads of effort comparing things to each other. Instead of saying ‘this’ means use ‘that one for this one’ and ‘use that one for this one’ cause the benefits of that one library is ‘this’ and the benefits of the other library are ‘that’.

Paul: Yeah.

Christian: It normally is like, ‘Oh yeah… that library won.’ or ‘All of the others are bad’.

Paul: Yeah.

Christian: And that’s never the case.

Paul: Hmmm.

Christian: We have to get away from this putting things together randomly and making up an application, to a proper web application design and I’m going to be in New York at the end of the month, no actually beginning of next month at AJAX Worlds and my talk there will be about how to do javascript design and javascript architecture of big applications.

Paul: Mmm hmm.

Christian: That’s going to be quite interesting feedback from the audience I’m quite sure about this, but it’s a matter that we grow up, we actually have to grow up as web developers and take our stuff serious and actually make sure that we don’t build for ourselves – but we build for the guy that comes after us cause that will always happen as well.

Paul: Yeah… and that’s really good advice.

Christian: If you think like that, then you will never write bad code and sometimes people just have to suffer that themselves before they start doing it.

Paul: Mmm.

Christian: It’s always clever to think of yourself as the javascript god that can do things better anyways, but some times it’s good to leave your superhero skills in the corner and just do something that works and that’s understandable and spend some time documenting for the next guy that has to take it over from you.

Paul: And I think that applies to everybody you know people, even people doing HTML or CSS or server side stuff thinking about the next person is, yeah, hugely important.

Christian: Yeah.

Paul: Thank you so much Christian. That was very useful and I really appreciate you taking the time to come on the show on Valentine’s of all days. Good to talk to you Christian and we’ll speak soon.

Christian: See you soon. Bye.

Back to top

Listeners email:

Rolling out new features

Our first listener comment is from Alex who has come up with a clever little approach for educating existing users about new features…

I just listened to show 112, where you mentioned Christian Heilmann’s javascript walkthroughs. These walkthroughs reminded me that I wanted to do something similar for our website, except I wasn’t able to squeeze it in before the deadline.

My workplace decided on a total revamp of their website, and the final design had some substantial visual and navigational changes. Among other changes, disparate logins had been consolidated into one login button. Of course, now we had the problem of habitual users; because the website hadn’t changed for several years, how do we now try to avoid several hundred support calls asking where the logins have gone?

Well, the obvious solution is to not make such drastic changes. Going for evolution, not revolution and whatnot. Failing that, is something like Christian’s walkthrough popups. However, these would still show up for new users, for whom this information would prove totally useless.

Here’s the solution I had planned:

A couple weeks before the new site or feature launch, we use javascript to set a cookie. This accomplishes two things: 1) we target people who have javascript, so we know the popups will work for them, and 2) we’ll know they were at this page *before* we changed the design or added a feature. Now, once we launch, we check for that cookie using PHP (or other server-side scripting). Why do this on the server side? Well, it lets us avoid even inserting the popup code for people who don’t have the cookie. If the cookie exists, we can then delete the cookie (so they don’t see the walkthrough again), and then insert the walkthrough divs and javascript.

Even though I didn’t get a chance to implement it, maybe this will help other people prepare for site overhauls.

What a great idea Alex. Existing users rarely like sudden changes to the sites they use regularly and often need a lot of help making the transition. This is an excellent way of doing that without confusing new users with unnecessary information.

Content management and CSS

Our second listener contribution is a question from Adrian…

Thank you very much for the show – it has been so helpful!

I have been given the job of creating an Intranet site for a small business. After listening to your shows I would love to create this website using webstandards and have been learning CSS. As well as this it is important that the users of the site can modify the content via a CMS.

So my questions are; can both of these things be satisfied? Also is it possible to design the website using webstandards and then “plug” a CMS into the already created website?

It is definitely possible for content providers to update content built using CSS. In fact it is easier, and allows the designer to maintain more control over the design. Traditionally content providers had to make all kinds of design decisions when adding content. If they needed to add a heading they had to decide what that heading looked like. If they wanted to make a piece of content stand out, they would pick a colour and font size to make that happen.

However, when a site has been built with standards the content provider doesn’t need to worry about what content will look like. They simply say this is a heading by defining it as an H1 and the CSS will decide how to style this. Equally to make something stand out they mark it as strong and the style sheet does the rest. Simple.

The only problem is that some content management systems do not have WYSIWYG editors capable of supporting this approach. They are still focused on giving the content provider design control. Fortunately there are editors out there that do think in this way. A good example is xstandard although there are others. These can just be dropped into your CMS.

Finally, it is certainly possible to plug standards based code into a CMS. Infact, it is actually easier because the style and content have been separated. A content management system is (as it name suggests) primarily concerned with content. It doesn’t care about how that content is styled. Nothing makes integration easier than nice clean meaningful markup, unencumbered by formatting.

112. Jina

On show 112: How to be more efficient using HTML snippets, Jina Bolton on women in web design and moving to a mac.

Play

Download this show.

Launch our podcast player

News and events | Using HTML snippets | Jina Bolton on women in web design | Listener emails

News and events

Some customers are not worth caring about

My first piece of news is a post by Gerry McGovern. In his latest post he argues that some customer are not worth caring about.

The thrust of the article is that by appealing to everybody, you ultimately appeal to nobody. This is something I see repeatedly from clients who define their target audience as “the general public” or “men under 50.”

You also see it among developers who become overly concerned that people using IE4 with Javascript disabled might be unable to access the site. Even content providers suffer from this problem, dumping content on their websites “just in case somebody finds it useful.”

Ultimately building a website has to generate a return on investment and some customers don’t generate that return.

Version targeting rumbles on

Next up is two new articles on A List Apart, which once again tackle version targeting. Jeremy Keith argues against it, while Jeffrey Zeldman defends the position.

I have tried to stay fairly objective in my coverage of this issue. However, although I understand the position of people like Jeremy, I believe that Microsoft have done a good thing.

The arguments against strike me as somewhat naive and arrogant. We live in a world of compromise and yet as compromises go this isn’t a bad one. By adding a single line of code we have the ability to control how the market leader renders our sites. As Zeldman says…

Designers and developers should be popping corks, hugging each other, and weeping with joy. IE no longer sucks. No version of IE will ever again surprise us with unexpected displays or behavior.

Perhaps I am overly pragmatic, caring more about real world scenarios than purity of solution, but I am hopeful about the future.

Let users tagging your posts with delicious

The last news story is two posts from Christian Heilmann. The first is a Javascript technique that returns any delicious tags associated with the current page. This is a great way of introducing tagging to your site, without having to tag all of your own articles. The downside is that when users click on a tag, they are not taken to other articles you have written. Instead they see all delicious links associated with that tag. Good for the user, maybe not so good for retaining users.

The second post by Christian is another Javascript solution. This time he provides a mechanism for walking a user through the key features on your site. It generates an animated series of popup caption boxes beside different screen elements. It is definitely useful for showing off key features to new users. However, I have to wonder if a good screencast wouldn’t do the job better. Nevertheless, it is an interesting proof of concept. Check it out.

Back to top

Feature: Using HTML snippets

If you are part of a web design team or skip constantly between projects, then you might want to consider an alternative approach to writing your HTML. Discover how we became more efficient at Headscape by using HTML snippets.

Back to top

Expert interview: Jina Bolton on women in web design

Paul: Okay. So joining myself and Marcus today is Jina Bolton. How are you, Jina? Good to have you on the show.

Jina: I am doing well. How are you?

Paul: Yeah. Well, other than the weather that we just keep complaining about, things arenít too bad here. We are bearing up under the strain. So, for those of you that havenít come across Jina before, she is now an internationally renowned speaker

Jina: [laughs]

Paul: and author and incredible web designer. And is the kind of quality of person that is selected to appear at South by Southwest (SXSW) Marcus just for your interest that she is the kind of person they are looking for not you.

Marcus: You know, I know that because I got a magazine thing through by South by Southwest and there she was on the cover of it.

Paul: Ummm!

Jina: [laughs] Yeah. I got into a little for that too.

Paul: Why did you get into trouble for that? Who with?

Jina: The company I work or. Iím not really a speaker on behalf of that company, so

Paul: Ahhh, I see.

Jina: and they printed that company name by my name.

Paul: Right.

Jina: Anyway, different subject. [laughs]

Paul: Okay!

Marcus: [laughs]

Paul: And the company you work for will remain nameless and notorious for their strictness over things like that, so

Jina: Yeah.

Paul: There we go. But, basically yes Marcus. They want young attractive, intelligent and clever designer rather than an aging pop-star. Sorry about that.

Jina: [laughs]

Marcus: [laughs] I can live with it.

Paul: Yeah. Jina has been kind enough to let me come on her panel, so that should be fun shouldnít it? Iím looking forward to that.

Jina: Yeah, I think it will be great.

Paul: If we actually get our act together and organize it.

Marcus: But, Jina is obviously that much richer after you have paid her Paul.

Paul: Well yes. You know I did have to bribe my way on. But, it seemed to work, so that is good.

Paul: So, there are so many things we could have gotten Jina on the show to discuss. She seems to be talking a lot about CSS lately. Mainly just by putting the word sex in the title of everything she does, which seems to improve your ratings to no end.

Jina: [laughs] You found my tactic.

Paul: Yeah. It seems to work for you Jina, so thatís good. But we wanted to go for a little bit of an unusual subject. I wanted to really look at the role of women within web design because well letís face it, your kind of a rare breed in some senses Jina. There arenít as many women in web design as perhaps there should be. And I just thought that it might be an interesting subject. And Iím sure that you have some opinions on it and so maybe we can encourage I know that there are a lot of women that listen to our show that maybe havenít moved full-time into the world of web design and maybe youíve got some advice to offer. So thatís the kind of plans. Does that sound okay with you?

Jina: Sure.

Paul: Good. Okay, well letís kick off then just by asking a really kind of obvious question, but kick us off with this Do you believe that women provide something unique to the world of web design, and if so what is that? Is there actually a difference? Is there something that makes womenís role unique?

Jina: Ummm. Well I think that there is something unique being brought to the table, that personís own personal style because I think that men and women have the same skill set. Now of course there are a lot of women that have a feminine style, so they do bring that into play, but I think it is more style than it is the natural skill of designing itself.

Paul: Okay. So, do you believe that there are kind of genetic differences really? ëTheyí make all kinds of things for example that woman have better color perception than men, but men have probably got better 3D acuity and things like that. Do you think that that actually makes a difference? Or is that all so marginal, that itís not that big deal?

Jina: Well I havenít really thought about that to be honest. As for color, I donít know. I guess, you know, a woman sense of color perception is supposed to be more acute. Maybe they could bring better colors to the table, but I think the skill sets are pretty much the same. I guess, you know, a lot of men can design for men and men can design for women. I think the skill sets are the same.

Paul: Oh, okay. So you wouldnít believe say, for example, if there was a website that was primarily aimed at a female market that it should be a female designer that works on a site like that?

Jina: Ah, well. So I do think that a female designer would have an easier time knowing how to cater to a female audience because they are that audience. But I donít think that it would make the website design better. I think a man would be just as capable in creating for that female audience.

Paul: Ah, that is interesting. Marcus, what do you think about that? I kind of always naturally presumed that somebody is more capable of designing for their own gender.

Marcus: Iím surprised by Jinaís answer to be honest. But, thinking about it, it is something that you think ëYeah, it makes more sense for women to design for women.í but really itíd to do more with the content. I think it would be hard for a man to produce content for a site aimed at women. But maybe the design is something, like Jina says, is more the designers have a set bunch of skills and whether you are a man or a woman it really doesnít make any difference. So it is more of a content issue.

Jina: I do agree that it would be easier for a woman to do it, because like I said she is that audience so sheís gonna know what kind of things a woman would like. But, I donít think that would make the website design any better because a man would be able to do just the same.

Paul: Hmmm.

Jina: You know it is kind-of sort-of like to ëbring issues into ití. Like, I had a firm that was from India who was asked to design for the National Civil Rights Museum and his isnít African-American, nor was he even American, but he did a fantastic job. So, I think for gender it would kind of the same. Like, if he was African-American he probably would have had an easier time but he would still have been creative with the artistic part.

Paul: So basically, he had to work harder to achieve the good design, but he could still do it.

Jina: Right.

Paul: Hmmm. Yeah. I do see where you are coming from on that. You mentioned earlier about a kind of feminine style to design. Do you think there are differences in style? What would you class as being a particularly feminine style of design?

Jina: I think it is really color choices and font choices, as well as certain patterns like some designers I think of at the top-of my head *Vera-Ley* and *Legha Alfanterra* they both you know if you look at there websites they are very very feminine. You know my website is really feminine looking, but I think it is because of the colors theyíve chosen and the font choice weíve picked and as well as the patterns. I notice a lot of guys tend to go for the grungier things and the girls kind-of go for more of a clean look. But I think those are stylistic differences.

Paul: So when do you think that kind of where do you think that comes from? You know is that something that is trained into us? You know, blokes tend to go for grungiest stuff? Even from being a kid I guess ëboys are blueí and ëgirls are pinkí, you know, all that kind of thing.

Jina: [laughs]

Paul: But, how much of it is nature and how much of it is nurture do you think?

Jina: Ewe I have no idea. [laughs]

Paul: [laughs]

Marcus: [laughs]

Jina: But, I do think it comes from the way people are brought up like you said ëgirls are pinkí and ëboys are blueí. I think it is really what that person has come to like as they have grown up.

Paul: Hmmm.

Jina: To be honest, Iím not a real fan of pink at all

Paul: [laughs] Good for you.

Jina: but I use it in my website for some reason. [laughs]

Paul: [laughs] I mean yes. You see the trouble that you are making Jina, is that we are trying to make informed comments on this show and nothing that we ever say on this show is informed.

Jina: I think, this topic is kind of just subjective I guess.

Paul: Yeah. Basically you are saying that I picked a dumb subject. That is what you are saying isnít it?

Jina: No, no.

Paul: [laughs]

Jina: A good topic to talk about it, but it is kind of confusing.

Paul: Yeah.

Jina: You know and when I started out doing websites, I used to do websites for rock bands. And all of those sites I did were grungy so I am kind-of contradicting myself.

Paul: Ahhh. So I mean, I guess the big question is that whether you know obviously the industry that you have chosen is a male dominated industry. There are far more men out there. Certainly there are far more high profile men out there on the speaking circuits and writing articles and all of the rest of it. I mean do you perceive that as a problem?

Jina: I am not really sure if ëproblemí is the word. I do think it is getting better. I see a lot more women speaking now and even attending conferences. I see more and more women in attendance. And of course, more women writing articles in books, but I think it may have to do with that it is a fairly new field, in comparison to other design related fields. And so now that it is getting taught in schools, more and more women will start getting into it.

Paul: Hmmm. I mean that raises quite an interesting question. You know, how did you get into it then? From you know, what is your background and how did you end up being a web designer?

Jina: Well actually, my Dad was playing around with making his own personal website and I was intrigued by the idea of publishing to the Internet. So he kind of showed me really-really basic-basic HTML using font tags and tables.

Paul: Yeah.

Jina: I grew up as an artist so I went to art school and I was actually going to be a print designer, but as I was learning HTML it became my hobby and it just kind of merged and became my job.

Paul: Hugh. Okay, fair enough. It is just interesting to know. Okay, so do you think we should be you know you talked about that there are female designers learning at school these days on how to become web designers. Do you think we should be doing active as a community to encourage women to come into the profession? I mean, I know for an example, that there was a lot of talk at one stage about proactively discriminating in conferences to encourage there to be more women speakers. Publications need to make a point of using female authors in order to you know setup role models almost artificially. Is that something you would encourage or do you think that is a slippery slope?

Jina: I have mixed feelings on that. As a woman, I have definitely benefited from people that were looking for more female speakers or more female authors so it has definitely helped me. But, I think discrimination is sort of a fine line and if a guy is more capable and more skilled he really should have more of that opportunity than a woman who is not as skilled. I wouldnít want her to get in, just because she is a woman. But, the fact that there are more opportunities is helpful so I am kind-of on the fence on that one. It is sort of like the same way I feel, and I know this might be considered controversial, but the whole you know like when you get a job. Are you getting hired in my case, if I get hired because I am a woman and I am half Asian versus somebody who maybe is a White male, but who are a lot more skilled than me. I donít know how I feel about that. You know, I am all for more opportunity, I think that is a really good thing. But I think that any discrimination is discrimination.

Paul: I mean it is an interesting one, as somebodyís employer, and I donít know Marcus will feel about this but there are occasions when I really think we miss out as a company. I am sorry to say, we are an all male company, all thirteen of us. And not because we have gone out to be that, in fact precisely the opposite. Weíve often offered woman jobs and they have turned us down actually.

Jina: [laughs]

Paul: And it is a very sad reflection on us. But, I mean Marcus how would you feel about actively going out and saying ëRight, okay, we want to hire a female designer because we want that female perspective.í?

Marcus: I am not too sure how I feel about that, from an employment point of view. As an employer, I think you have to look at who is the best candidate. But what I was thinking about when we were talking about earlier, and this goes back to what I am not talking at South by Southwest (SXSW) this year

Paul: [laughs]

Jina: [laughs]

Marcus: and one of the reasons of why I am not doing that.

Paul: Itís because youíre White, middle-aged and middle-class.

Marcus: No, but one of the things the people who are organizing the panel have to look at different they have to think about ëOkay we are going to have a bunch of panels talking about business, a bunch of panels talking about designí you canít have everything. All the panels cannot just talk about business, for example. So you have to think, okay we will have to split it equally between the different types of genre, if you like. Now, doing that we also want to have an equal split between men and women, I donít think there is anything wrong with that. As an employer it is a different thing. I am not sure, where the law stands on that.

Paul: Ummm!

Marcus: Iím not sure we actually would be able to say we have to have a female employee, or whatever. I think you would be discriminating against other people by doing that.

Paul: Yeah, I guess you are. But, I think we are actually (I have to be honest) I think we suffer as a business to some degree. A classic example of that was not long ago we worked on a website for a higher education institution where over 75% of the people that went there were women. And we were having to do a design. We did the first design and we put it in front of bearing in mind all of our designers are men and we put in front of some test users and the overwhelming response back was ëYouíre trying too hard. You know it is kind of overly feminine.í And it would have been so much easier in that situation if we had a female designer there just to say ëGuys. You really donít need to make it pink and you donít need the little fairies in the corner.í

Marcus: [laughs]

Jina: [laughs] Exactly, you donít want to go with crochets with pink and flowers unless that is the brand you are going for.

Paul: Yeah, I mean that is a good question actually. Do you think there is any bear in mind there is a lot of male designers out there that are listening to this show what are the absolute no-noís? How can they design for a feminine audience without kind of really going over the top? You know, is there any kind of advice you can give, or is it just kind of feel as you go along?

Jina: I think you definitely want to get critiques from women, like if you have peers letís say you are working at a design agency and there are female designers around you, get their opinions. If you donít really have that, I donít know, I guess go to Starbuckís or something

Paul: [laughs]

Jina: and get some critiques because I am just up more for just keeping it simple and clean.

Paul: Yep. That sounds like good advice. I think we are going to have to wrap it up there Jina. Not because I am bored with talking to you, but because the sound quality on Skype sucks so much today. I think weíre gonna have to get you back on the show another time to share maybe some more stuff.

Jina: Okay.

Paul: I donít know, maybe when you are over in the UK that might be possible. Iím sure that it will happen before too long.

Jina: That sounds good.

Paul: Okay.

Jina: And it might even be our Internet connection. I am sorry about that.

Paul: Thatís alright, these things happen. I blame Marcus personally. I never have problems except for when he is on.

Jina: [laughs]

Marcus: Ha ha ha.

Jina: Thatís awful.

Paul: [laughs] Okay. Thanks very much for your time and we will talk to you again soon.

Jina: Okay. Alright.

Paul: Bye.

Back to top

Listeners email:

SXSW

This week we have a couple of questions about SXSW:

Rich asks…

I am attending sxsw for the first time this year. What should I expect and how can I get the most out of it?

Last year was my first year at SXSW and to be honest it is overwhelming. Before I went I planned out all of the panels I was going to attend but to be honest I wasted my time. I don’t think it is really possible to prepare for a 10 track conference. Ultimately what you go and see will be dictated by how much energy you have left after the various parties you were attending the night before!

Talking of parties, in my in my opinion it is the social aspects of SXSW that is really the most interesting. At the end of the day, you can find out about most of the topics covered online. However, it is meeting and chatting with other web designers that is the really inspiring bit. To this end I would suggest two ideas.

First, take time to just sit in the corridors and get chatting with people. If you are in a good conversation, don’t worry too much that you are missing the panels. Its amazing who you meet just sitting around. Oh yes, and don’t be afraid to introduce yourself to anybody. Most people are friendly and if they are not… screw them!

Second, if there are people you know already attending or if there are people you want to meet add them on Twitter. That way you can see where they are and what they are up to. As a newbie last year, twitter was how I found out where all the best parties were. Definitely add me as I intend to keep twitter up to date with my comings and goings.

Talking of parties and socialising Matthew asks…

Have you considered doing a live show at SXSW?

We have considered it but have decided against it. To be honest, sxsw is manic enough without adding a live show. What is more, I don’t think live shows are that interesting to those that are not attending. This means we will not be releasing a show on the 12th March. However, we will be recording as many interviews as we can cram in, which we will be using over the coming weeks and months.

Although we are not doing a live show, that doesn’t mean we wont have opportunity to meet up. Boagworld is once again sponsoring the Great British Booze up, which is happening on Monday 10th March from 7:30pm at Shakespeare’s Pub (314 E. 6th Street). Full details at http://upcoming.yahoo.com/event/403331/

Moving to the mac

Brenda asks…

You mentioned on the Christmas list that you recently converted from Windows to Mac. How did it go? Did you have to buy all new software, or were you able to convert licenses for some of it? What was the learning curve like? What do you miss most from Windows? What would you say the overall budget for this was (emptying out that duct tape wallet)?

A very timely question Brenda. With Marcus intending to buy a mac, we have been discussing the switch. I have to say that for me it went very well. Within a week I was entirely happy working on my new macbook and could do everything I did under windows and more. I have certainly never looked back and can honestly say I miss nothing.

However, I confess I was in a luxurious position. Unlike most people I had Headscape to pay for the raft of software I had to purchase. Admittedly companies such as Adobe allowed me to transfer my license from windows to the mac (after jumping through some hoops). However, that was not always the case. Fortunately most of the software I purchased was only $30-40 each. However, that can quickly mount up. The biggest waste was on Microsoft Office. To begin with I couldn’t imagine life without Outlook and Word. In hindsight, I really didn’t need it. iWorks which costs a fraction of Office does everything I need and Apple Mail is a much more pleasurable experience than Outlook. I didn’t keep track of how much I spent on software, however I would guess it was $200-300.

Overall it was a great move and I love not only the mac OS but the great software being developed by some very cool mac developers.

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

111. Utopia

On show 111: Designer and developer work together in utopian harmony. Two great listener reviews and Aral Balkan announces the biggest online web design conference ever.

Play

Download this show.

Launch our podcast player

News and events | Designers and developers in perfect harmony | Aral on Singularity | Listener emails

News and events

Fixing your product pages

I want to kick off this week’s news with an article on Think Vitamin which I missed when it originally come out back in November. It is a post by Amy Hoy providing some basic advice on user experience design, focusing in particular on product pages.

Amy starts by giving some basic tips. These include…

  • Be nice to your users and customers (and potential customers).
  • Design as if your main goal is to inform and educate.
  • Be honest and forthcoming.
  • Help your users and customers to do what they want, not what you want them to do.
  • Be consistent with your message and quality of service (and I’m including software design here, folks).
  • Scientific, measurable “usability” doesn’t necessarily make for a good experience.
  • Good design makes people feel good.

She then moves on to look at specific examples. She compares the product download pages of Opera and Firefox. This is a fascinating insight into what can go wrong with user experience design.

What I particularly like about this article is Amy’s engaging writing style. She is incredibly personable and her writing really drew me in. It is a long time since I have read a post word for word.

Being inspired by newspaper design

I often talk on boagworld about looking beyond the web for inspiration. Too often as designers we look at other websites, when we should be looking to art, architecture and the world around us for inspiration.

Admittedly this can be somewhat of a stretch at times. It’s not always easy to see how a piece of art or kids toy can inspire a website. Many of us don’t even try as a result.

How about starting with an easier comparison? This week I came across a superb post that looks at award winning newspaper design and it really excited me about the possibilities when I finally get around to redesigning boagworld.

I think we have a lot of learn from newspaper designers and in many ways there are a lot of similarities. Both web design and newspaper design rely heavily on white space and grid layout. Both have to deal with large amounts of written content. Both have to copy with constantly changing content. The list goes on.

Take a few moments to read this post, even if you just look at the designs. It will definitely inspire you.

Using browser history to improve the user experience

My final news story of the day is an interesting idea centred around a users browser history. Niall Kennedy has proposed a technique where you could use CSS and Javascript to display content based on what sites a person has previously visited.

Although I am not sure I like the idea of websites snooping through my browser history, it does provide some ways of improving the user experience. If nothing else it can remove some of the clutter from our websites.

Let me give you an example of how it could be used. A website could check your browser history to see if you regularly used digg.com. If you did then it could post a “digg it” button. If not it could be hidden away. The same principle could be used to show only a RSS subscribe button for the specific news reader you use, rather than showing them all. The possibilities are endless.

Whether you can see an application for this or not, it is still a very impressive and clever idea. Definitely worth investigating further.

Back to top

Feature: Designer and developer in perfect harmony

In this week’s feature Marcus is looking at the working relationships between web design teams. He brings together a few Headscape employees to discuss how to ensure a good working relationship between all parties.

These are the roles that we look at and who represents them in Headscape:

  • Requirements analysis, information architecture development (consultancy) – Marcus
  • Design, templates – Leigh Howells and Paul
  • Technical development – Rob Borley
  • Project management – Charlie Allen

These are the issues we covered…

  • What are the things that really make a project work well for you?
  • From the other perspective, what are your pet hates?
  • Designer and developers – should clients be able to talk to you directly?
  • Most projects have a habit of their scope creeping. How can that best be avoided?
  • At Headscape we use a number of different tools to manage projects. How do these tools work?
  • Particularly with designers and developers, we have set up ‘buddy’ systems. How does this work? Is it effective?
  • Some projects stall or go on hold for a while. Are you able to just pick up where you left off?

Back to top

Expert interview: Aral Balkan on Singularity

Paul: So, joining me today is Aral Balkan. Hello Aral.

Aral: Hi, Paul. How are you?

Paul: Not too bad. It’s been a while since we’ve had you on the show.

Aral: It has been a while. I’ve missed it.

Paul: Uhm, so yeah, basically, I’ve been keeping a secret from Marcus. Which is I stoically refused to tell him what Singularity is all about.

Aral (laughing): Was he curious?

Paul: He was.

Marcus: It’s something to do with Star Trek, isn’t it?

Aral: Well I am a big fan, but no.

Paul: So why don’t you tell him what Singularity is all about.

Aral: Well, Singularity is going to be the world’s first large scale online web converence.

Marcus: Okay.

Aral: In a nutshell, that’s what it is.

Paul: So, I mean how does this work from a technology point of view, from an organizational point of view. Tell us a little bit about how it’s going to be organized.

Aral: Uh, sure! Well, basically it’s a web conference, so in terms of topics, it’s very eclectic. We’ve got a really cool group of speakers who have confirmed already, about 24 of them, from all parts of the web really. We have web standards people. We have JavaScript developers. We have artists who work on the web and they’re going to be presenting their sessions online. It’s going to be streamed through a custom interface built in Flash, based on the Flash platform, using technologies like Adobe Connect which used to be called “Breeze”. It allows the real time streaming of audio, video, and also sharing of interactions or objects through the web. Beyond that, we’re also going to have a very local character to it with local hubs where people will be able to gather and watch the audience and interact.

Paul: Oh, ok, so it…

Aral: I mean, watch the conference and interact.

Paul: Right, so people will actually get together as well, because that was one of my questions. One of the best thing about conferences is meeting up with people.

Aral: Definitely! The bit that I don’t like is the travelling. It’s being stuck in coach next to someone who’s, you know, not feeling too well or is kind slumping onto your seat or having the hotel from Hell experience that I’m currently having over here. (Paul laughs)

Aral: Don’t even get me started on that. There was techno music until 2 AM from the bar downstairs.

Paul: Nice!

Aral: Well, it was refreshing in the morning, though, because the shower went from boiling from freezing back to boiling and kept doing that. So, yeah, I think this is going to hopefully take the best parts of what attending a conference means, and maybe leave some of the bits that aren’t as great.

Paul: Are you going to leave it for local groups to set up local meetings or is that something that you can organize centrally?

Aral: I want to see it as decentralized as possible. I am talking to a few venue sponsors, potential venue sponsors. We’re talking with Yahoo at the moment. The BBC, I’m talking with Ian there. There are very interested and very excited about it. But, beyond that, I want it to have a grass-roots character. So, we’re already getting people volunteering for regional areas. I’ve called them Ambassadors. We have an ambassador from Bristol and there are people from Singapore, Mexico, all over, that are very interested in volunteering. So, we’re probably going to have regional volunteers and ambassadors who organize local groups, user groups, to have meetings around Singularity, where attendees can go and join and hopefully take it further, you know, add a local character to it.

Paul: OK, let’s cover some of the basics. How many speakers are you looking at, first of all. Let’s start with that.

Aral: Okay. We’re going to have a little over 100 hundred speakers.

Paul: Wow!

Aral: So, yeah, it is actually a large web conference.

Paul: Yeah.

Aral: And the that its online.

Paul: So when… how long is this going to be over? You know, if you’re going to have 100 speakers…

Aral: It’s three days.

Paul: It’s going to be over three days…

Aral: And it’s multiple track.

Paul: Multiple track, okay. That’s what I was going to ask.

Aral: And I think one of the things, just cut you off there, with uh… it is multiple track, but everything is recorded.

Paul: Oh, Okay.

Aral: So, its presented live and we’ve got some really great ideas for making those presentations a little bit more interactive than you can get in the real world. But, it will also be recorded. So, if you do miss something on the day, you’ll be able to watch it later.

Paul: Cool! How are you going to deal with things like time differences? Are you going to have it going 24 hours? Or, how are you dealing with that?

Aral: Well, initially, I was thinking about having it 24 hours. Just because it sounded really cool.

(All Laugh)

Aral: You know? “Three days! Twenty four hours!! One hundred plus speakers!!!” But then I thought about it. Especially the local meet ups. I want those meet ups to have a BarCamp-like character to them, you know? Where people can stay over. And I didn’t want the conference, the somewhat one-way part of it taking up part of the day.

Paul: Right…

Aral: So, I think it would be nice to have the presentations during the day and then after that, leave time for people at local gatherings to create their own sessions to talk about what they’ve been listening to, to add to it, to localize it for themselves in a matter of speaking.

Paul: Sure.

Aral: You know, to have, to do things to tell you the truth, I have no idea what they’ll come up with, which is great.

Paul: So, when is this scheduled for? What are the dates that people should book for it?

Aral: Well, we finally have dates. We’ve been going back and forth internally before we announced, but it’s the end of October. October 24th through the 26th.

Paul: Okay, that sounds good. And do you know a price yet, or are you still working on that?

Aral: Well, the pricing we’re still working on, but I think we’re going to be very positively surprised by the pricing. We’re actually working to get it even lower than we initially thought we wanted it. And we’re working closely with certain sponsors and we’ll definitely be announcing more about the sponsorship that we have as they become official, but some of our sponsors are interested in keeping the ticket price low as well and supporting us.

Paul: So, how many people are you expecting to attend this conference? Have you got any idea of what you’re aiming for?

Aral: Well, my conservative estimate right now is 10,000.

Paul: WOW!

Aral: And that’s based partly on past experience. We did 2 one-day open source flash conferences using similar technologies, for which we got about a thousand attendees at each one. Those were much smaller. One day, three or four speakers. My conservative estimate is that this will be about ten times the size of that.

Paul: That’s amazing. I mean that will be really cool to, you know, if that comes off. Are you trying to get a range of different speakers? Are you covering any particular areas of web design or are you going as eclectic as you can?

Aral: Well, the tagline that I was going with initially was that Singularity would define web 08. And I’m kind of trying to get people away from using version numbers when talking about the web. We’re getting away from using version numbers when talking about software because you know the moment you slap one on its outdated. So, I think maybe using the year would be easier because you’d at least know that you’re talking about a definite stat of time. So, my initial idea is that it would define Web ’08, and as such, I’m trying to get as eclectic a mix of speakers as possible. And also, I see that there is a lot of overlap with which to send applications for example. There’s a lot of overlap over what people using AJAX are doing and then traditionally web standards people are getting interested in applications as well. So, I want to have a real mix. I also don’t want people on the Flash platform to be excluded, as they sometimes are. But, this is definitely not… that’s not the focus of the conference.

Paul: So, where can people find out more about this? I mean obviously, some people are going to want to be signing up. Obviously, you can’t do that yet, until the price has been set. So, is there any kind of way (

Aral: Of course.) they can express their interested or find out more information or whatever?

Aral: They definitely can. The site is “singlularity08.com”. You can also get to it from “singularityconference.com”. And, basically, we have a blog there and you can express your interest. You can email me directly as well. My email address is “[email protected]”. Or just email my private address at “[email protected]”. Yes, so definitely, if you want to be kept in touch when we do release information, but there is also an RSS feed that you can subscribe to on the site.

Paul: Cool! Well thank you very much for coming on the show.

Aral: Thank you for having me, Paul. And of course you’re speaking.

Paul: Well, yes, of course. That goes without saying (Paul laughs).

Aral: Are you excited? Have you decided what you are speaking about?

Paul: I have not a clue yet, no. (Aral laughs)

Aral: Have I just put you on the spot?

Paul: Yes, totally. Thank you very much. (Aral laughs) And its going to be a weird one. It’s going to be a different way of speaking and so you kind of need to tailor what you’re doing to approach. It will be interesting.

Aral: Exactly. And we’re going have dry runs and we’re going to try out the interface as well.

Paul: Cool.

Aral: And maybe tweak it for different types of presentations. We just have so much potential with what we can do.

Paul: Mmmm. Yeah.

Aral: Because, we can actually control the medium. So, it’s really exciting.

Paul: Excellent! Excellent stuff! Really looking forward to it and we’ll get you back on the show closer to the time to see if we can drum up a bit more support for it. Excellent stuff. Thank you for your time.

Aral: Sounds great, Paul. Thank you so much.

Paul: Alright then.

Back to top

Listeners email:

An alternative wireframing tool

A few weeks back I talked on the show about wireframing tools. Not long afterwards I received an enthusiastic email from Wen talking about a product called OverSite. He was so passionate about the product that I thought we should get him on the show to talk about it. This is what he had to say…

I’ve been catching up on my episodes of BoagWorld, and I just recently listened to your discussion about wireframing. As a UI designer, I completely understand the importance of mocking up a UI, and testing the mockup, before ever launching Photoshop.or Dreamweaver. So I thought I’d provide a review of a wireframing tool that I use, called OverSite. I haven’t seen many other tools out there like it, so I figured you and your listeners might find it useful.

OverSite is a shareware application that runs on Windows as well as Mac OS X; I use the Mac version myself, but am able to exchange OverSite files back and forth with my PC-using colleagues. OverSite lets you create a full or partial representation of your site structure: all of the sections and pages that make up your site. You can do this in one of two ways. The first way is fairly predictable; you add one section or page at a time by clicking a button, entering a name in a popup dialog, and clicking OK. The second way is fairly clever. You open a window that OverSite calls the Rapid Structure Creator. There, you type out your entire site structure in one text area, putting line breaks between sections and pages, and using indentation to indicate nested levels. Then you just click OK and viola! OverSite generates a tree depicting your entire site structure.

At this point, you can dive into your wireframing. Each page contains its own wireframe canvas. You can place the usual widgets on the canvas: buttons, textfields, checkboxes, images, etc. You can also place basic geometric shapes like circles, rectangles, lines and stars on the canvas. Each component can be individually styled; you can also create global styles that apply to all components, or to components of a specific type. OverSite also lets you create what it calls composites, which are complex elements that are made up of individual widgets.

Let’s say that you have a search form that will appear on a few different pages. You can create a composite representing this form. The composite might contain a few labels and text fields, maybe a checkbox or two, and a couple of buttons. If you want, you can tell OverSite to automatically draw a border around the form elements. Once you’ve created that form composite, you can drop it into your wireframes where ever you want it.

OverSite does lack built-in, complex widget types, such as tables. You can create them out of the widgets that OverSite does provide, but it would be nice for OverSite to create them for you.

While each page has its own wireframe canvas, so does each section. The purpose of a section’s wireframe is to create elements that will appear on all of the pages within that section. For those who have used server-side-includes, it’s kind of like that. As an example, say you had a navigation bar that should go on the top of every page in your Products And Services section. You would create that navigation bar once, in the Products And Services wireframe canvas. Then the nav bar will appear in every page within that section. In addition, OverSite provides tools to modify that nav bar in specific pages, for example, to change the color of a specific link in the nav bar when you’re actually on the page that that link refers to.

Static wireframes are fine, but I prefer being able to test the interaction between screens before I actually build the site out. OverSite lets you link any widget or composite to another page. If you don’t want to do the work yourself, you can also tell OverSite to auto-generate a simple navigation bar. Then, you can use OverSite’s built-in web browser to test out your site’s navigation.

Another useful thing I’ve found is OverSite’s notes. The notes functionality lets you provide details about specific widgets. That way, when you print or export your wireframes, you can include more information to whomever you’re handing them off to.

As an added bonus, OverSite will also create a graphical sitemap based on your website structure. You can tweak the appearance of the sitemap… the operative word being “tweak”. Fonts, colors, spacing, and icon sizes are under your control, but not much more. Here’s where I think the application could do better to allow you to fully customize the sitemap. Still, it’s created automatically for you without your having to lift a finger, so that’s something. Plus, the sitemap can be exported into a number of formats: GIF, JPEG, PNG, PDF, Scalable Vector Graphics, and others.

Once you’ve finished your wireframes and want someone else to be able to play around with them, you can export them as web pages for non-OverSite-using people to click-through. You have two options here: export your stuff as pure HTML, or export them as imagemaps. The trade-off between the two is fairly obvious: pure HTML will provide you web pages that looks more “real world”, but won’t look exactly like your wireframes do, and they’ll look different in different browsers. Imagemaps ensure that you know exactly what your pages will look like, but it’s typically not going to look like a real web site.

As a UI designer, OverSite’s become a pretty indispensable tool in my software arsenol. You can get it at the developer’s website.

A vertical rhythm calculator

In the same show we also had Jason Beaird talking about vertical rhythm (among other things) and this promoted an email from James. He wrote…

Hi I’ve been listening to your podcast for about six months now and really enjoy the mixed style of content and witty banter.

With all the talk of CSS vertical rhythm and em based layouts I thought I would point you in the direction of a vertical rhythm calculator that I built in Flex to help people work out all of those nice em values. My own site has been developed using the same principles with all typography and measurements set in em’s for an elastic layout. I am developing an AIR version that has an integrated browser so that you get visual feedback of your calculations, I remember one of the John’s comment on how useful such a tool would be on the fabulous Rissington podcast.

I have checked it out myself and have to say it is very impressive. What is more he has now created that desktop version. Check it out.

110. The mighty Meyer

On Show 110: Eric Meyer on version targeting, the business benefits of usability testing and do I have to have a blog?

Play

Download this show.

Launch our podcast player

News and events | The profit and loss of usability | Eric Meyer on version targeting | Listener emails

News and events

Before we kick off the news section today I should point out that I actually link to many more articles, tutorials and news stories than I ever include on the show. If you go to boagworld and click the links in the header you can receive all of these posts by either email or RSS.

CSS reference library

Raise your hands if you have ever used the W3 School. Okay put your hand down now because you are looking kind of stupid. For those of you who didn’t raise your hands the W3 School is a comprehensive reference sources for almost every web language around. It really is very impressive.

The problem is that it doesn’t provide the nicest user experience. If you are looking for CSS reference information then a possible alternative is the new Sitepoint reference section. At the moment it only includes information on CSS however they are obviously looking to expand.

Its design is a lot more attractive than W3 School and although it is not as comprehensive it will provide you with all the latest information on CSS properties including CSS 3. It also provides you with an indication of which browsers support that property.

Stay on :target

Talking of CSS 3 there is an interesting article by Brian Suda over at Think Vitamin entitled Stay on :target. Target is a new CSS pseudo-class being introduced in CSS 3. Although it has yet to be implemented by Internet Explorer it is supported by many other browsers.

Essentially what target does is allow you to style a target element in much the same way you can style on hover. So when you click on a link that goes to a fragment identifier (what used to be called anchor links) then it styles that fragment.

So for example a good use of this attribute would be to highlight the content that you have just been jumped to (like the fade to yellow technique) or to hide and show content when the user clicks on a tab.

Of course many of you might be asking why I bring this up when it isn’t supported in IE. Well, not only is it an interesting glimpse into what is to come, it can also be used right now when the functionality provided isn’t crucial. For example you wouldn’t want it to hide and show content but it might be okay to highlight linked content with it.

Read the article and you can see the potential yourself.

Search behaviour patterns

Another article worth reading is Search behaviour principles over at Boxes and Arrows. This article looks at how people search and the different types of searchers there are. It also looks at what things affect the way people search and techniques that can be used to accommodate their approaches.

As I have said before on this show, not enough attention is given to search and this article will really get you thinking about how to better accommodate it. Best of all there are still a lot of hints that can be applied here even if you are lumbered with an inflexible search mechanism that cannot be customised or tweaked.

10 principles of effective web design

Talking of search usability brings us nicely on to our final story of the day which is a post from Smashing magazine. We haven’t mentioned them in a while but this week they are back with another top ten list. This time it is the 10 principles of effective web design.

Personally I think it is a misleading title as actually the post is about basic usability techniques. That said, it is a very good list and contains some really solid advice. It also contains lots of examples which really helps you get your head around the issues.

I don’t think the post has a lot to offer seasoned usability testers but if you have always avoided the subject in the past then this is a nice simple starting point.

Back to top

Feature: The profit and loss of usability

We have looked at the subject of usability testing relatively recently on the show and have mentioned it countless times before. However, never have we taken a step back and asked the fundamental question: why is usability testing important? This week we look at how usability testing can be presented to clients and dispel some of the misconceptions about it.

For more detail on what we cover read my post The profit and loss of usability.

Back to top

Expert interview: Eric Meyer on version targeting

Paul: So on last weeks show we discussed Internet Explorer 8 and some of the plans Microsoft have for it and joining me this week is Eric Meyer. Hello Eric, good to have you on the show.

Eric: Cheers, hello.

Paul: Cheers, very British of you.

Eric: I try to localise my content.

Paul: Yes, very good. Most impressed! We’ve got Eric on the show really because this whole news surrounding Microsoft and what they were planning to do was broken on the A List Apart website, in 2 articles, one of which Eric wrote. The reason I think I wanted to get you on the show to talk about it is because I was kind of struck by the honesty of your article that a lot of what you were saying was very much ‘I really don’t want to like this idea but…’ kind of attitude. Which is the kind of attitude that I think goes down well with the people that listen to this show. So I was wondering Eric, could you kick off by giving a brief explanation of what it is that Microsoft are proposing doing, just so that we’ve got a bit of an understanding of it?

Eric: Um, well pretty much what they’re proposing is that Internet Explorer, Internet Explorer 8, and in the future will recognise a single element, a meta tag which can be used to say ‘This is the version of Internet Explorer that I want you to act like’ so that Internet Explorer 11 can act like Internet Explorer 8 did, or Internet Explorer 7.

Paul: Right.

Eric: So the idea basically is well they call it Version Targeting so that you can have your page actually targeted to a certain version of Internet Explorer even if newer versions have come out.

Paul: Ok. So, I mean at face value that sounds very much like browser sniffing, which is obviously something that has kind of become considered bad practice. How does it differ?

Eric: Well my perspective is that it differs because it actually reverses the direction of sniffing. Browser sniffing To date it has been a case of authors trying to figure out what browsers they want to sniff for and what should happen as a result. This was sort of the reverse side of. It would be the browser sniffing the page to say, ‘What do you want me to do?’, at least in the case of Internet Explorer. It should be clear that Microsoft has so far as I am aware anyway not proposed that anyone else has to do this, or that this has become any part of any sort of standard. They’re saying if it is what we want. This is what we’re planning to do on the browser. So they have the same echoes. I really feel like they are not the same thing. There are a lot of people who disagree with me but they are really very different because one of the reasons that browser sniffing by authors has become viewed as a bad practice is because it becomes fragile over time. First of all there’s a case of people saying ‘If this is Internet Explorer do such and so’, and they don’t consider that there might be a version this version of Internet Explorer that might change what I’m trying to work around. Another reason is that people make guesses about what will be in user agent strings which is usually what people browser sniff on and sometimes those guesses turn out to be wrong as when Safari first came out its user agent strings had the phrase White Gecko in parenthesis.

Paul: Yeah.

Eric: A lot of people had done browser sniffing scripts that looked for the word Gecko so all of the scripts thought that Safari was Mozilla, Firefox or whatever and so some of them broke. In a way it is hard to fault the authors because how are they supposed to know a browser from Apple, not based on Gecko, would have the word Gecko on it’s user agent string and yet that happened so this would be much more controlled it seems to me were it would be browser saying ‘What do you want me to act like?’ and that’s the other reason this has varied from browser sniffing usually tries to predict the future, whereas this version targeting that looks like it will happen in Internet Explorer it actually has to predict the past which is inherently easier to do.

Paul: Why has Microsoft decided to take this position? It seems to me like in some ways they’ve created a rod for their own back in the sense that they are producing I don’t know, Internet Explorer 11 and in that has got to be the rendering engine for 10, 9, 8, 7 and all the way back. Is that not just a lot of work on their part? What’s driving them in this direction?

Eric: I think it will be a lot of work on their part. I do not believe that the idea is to have completely separate rendering engines for each of those browsers, but to have effectively if then else statements in the rendering engine or cases or switch statements for a little more program language savvy. The reason that they’re doing this is that they really have a problem, well they have a dilemma, and they need to get out of the dilemma. The dilemma that they face is basically this: There are a lot of pages out there both on the public web and in private intranets that were developed to IE6 or IE7 let’s say and weren’t developed in an open standards way they weren’t developed the way a lot of people in the standards movement develop sites which is to code to the standards and then figure out how to work around the problems that they encounter. If you have an intranet, a massive intranet site, and your company standard is IE7 the default tendency is to develop it to IE7, you use behaviours that are not correct according to the standard, but are the way that IE7 acts. You have all these past mistakes which every browser makes past mistakes. IE7 it can be argued has made more mistakes than others, not an argument I want to get into. They have that situation where there’s this large legacy of pages. So they can’t have those break for a number of reasons, many of them business reasons, actual monetary reasons but at the ground level you could look at it as if the browser changes enough that those pages start to break it becomes a bad browsing experience for users of that browser. At the same time, the Internet Explorer team would like very much to improve their standards support. They did this for IE7; they fixed a lot of things. They went more towards the updating the browser and didn’t worry quite as much about breaking sites, and they got into quite a lot of trouble over it both internally and externally. There were people who took on the task for breaking the web. We’ve been here before as an industry back in 2000. This is how DOCTYPE switching became to be because the first few iterations of IE and Netscape did very badly at CSS support. They tried and more power too them but Internet Explorer got the box model wrong. Netscape got so many things wrong that they had to junk it and start off with a new browser. So DOCTYPE switching was basically invented as a way of being able to say ‘Given these criteria render pages the way they used to be rendered and give them these other criteria go the more standard route’. From the Microsoft prospective this is like a super DOCTYPE switch except in this case instead of hinging it on a DOCTYPE they’re hinging it on information about what the browser version is.

Paul: Yeah. It is interesting when I first heard about this and I first read your article and the other one on A List Apart, my initial reaction was oh no all this feels wrong and indeed which is what in the sense you said that you went through when you were writing the article and then we actually were discussing it on last weeks show with John Oxton and John Hicks, the same kind of thing came out that we felt very uncomfortable with this and we were reflecting on a lot of things that were said including Jeremy Keith who made this point of you’re actually in a position where you’re actively having to tell Internet Explorer 8 how to behave like Internet Explorer 8 and not IE7, which seems a bizarre set of circumstances but since then I’ve been thinking about it a little and I’m struggling to come up with a reason that I really object to this beyond a principle of the thing that I feel like I shouldn’t agree with it but I’m having trouble articulating why I guess. What kind of things are you seeing? You must have seen a lot of objections come up when you are brave enough to step up and say what you did on A List Apart, I’m sure there was quite a backlash. What kind of things are people saying and throwing against this?

Eric: Well I can see quite a few objections.

Paul: *laughs*

Eric: Well one of them is an objection that Jeremy brought forth which I think I am glad that were talking about that which is that the default behaviour is to default to IE7 as I understand. So when IE8 comes out, if it doesn’t see this version target meta tag in a page it will assume that page is to be treated as IE7 would have treated it, which again completely reverses what were used to. What were used to is when a new browser comes out the page will be interpreted according to the latest and greatest unless you’re using a quirks mode DOCTYPE switch but anyway, it’s bizarre, and yet I did go through the same thing when I first saw it I was like &#”;What!&#”; *laughs*

Paul: Yeah.

Eric: Good old WTF basically.

Paul: *laughs*

Eric: And when I first saw this it was at the beginning of January when Aaron Gustafson submitted the first draft of his article, I hadn’t actually heard about this before then, and I started arguing with him about it in the A List Apart editing forum and very quickly came to realise, &#”;Why am I objecting to this?&#”; and I took the time to step back and say &#”;What’s the deal here?&#”; and that’s were my article came from with the two of us going back and for and it was like, could you write an article about that because that’s what a lot of people are going to go through. So there’s the default behaviour, you have to have the meta to have the latest and greatest, yeah, I would like to see that changed, I would like to have Internet Explorer act the way browsers always have because that’s what I’m used too, but at the same time I have to be realistic about the problems that they face, that I was explaining before.

Paul: Yeah, because that wouldn’t solve their fundamental problem which is that people that aren’t aware of working to the latest standards aren’t going to be aware that they have to put meta data in there pages either.

Eric: Right, so people have said that Microsoft, of anyone, are in a position to educate people who are not aware of the need to do that one thing and that’s the point I made when I was talking to a member of the IE team about this. There are other objects that I think mostly have been related to that for example Bruce Lawson posted just in the last few days, the default behaviour means that from an accessibility point of view any page that doesn’t have this meta tag is stuck with IE7′s accessibility support which apparently is not were it should be, so he’s made the point that freezing pages to IE7 in the absence of any other information freezes them in this inaccessible state, I’m not an accessibility expert so I don’t know how best to categories that but, will have accessibility problems and keep them for years and years as opposed to, ya know, as accessibility problems improve in Internet Explorer, getting those benefits and that a very real objection and a very real concern, and I think one that needs to be made to the Microsoft people because accessibility is very important. There are other objections from the javaScript community, it’s actually been interesting in the javaScript community, there’s been a real dichotomy, there have been some javaScript library authors who’s been like &#”;Yes! Finally, thank god somebody is talking about versioning!&#”; right, and there’ve been others who have been like &#”;Oh my god, are you kidding, libraries will have to support all these backwards engines&#”;.

Paul: Yeah.

Eric: Again, I’m not an expert to know what side of that certain dichotomy I would come down on, in my own blog posts I’m saying, wouldn’t you just use object detection and not worry about what the version number is?, but I guess that doesn’t fully address the problem, or at least that’s what I’ve been told. Again it’s something that needs to be figured out, because there have been some fantastic javaScript libraries and fantastic things that can be done with those and if this is a move that will hamper the growth of that field then that’s something else that would also bother me. There’s also the security objects, the idea that every backwards versions that you have your complicating your ability to keep your security holes closed, that’s the kind of thing we’re I have to say &#”;Look that’s down to the browser maker to figure out&#”;.

Paul: I guess that the problem with the whole default behaviour thing is how badly it’s going to break things, how many sites are going to be broken if the default behaviour was the latest browser and how badly are these sites going to be broken, are they going to be unusable? Are we talking about some small changes? I guess there are a lot of websites out there as well that just aren’t supported at all, content has been put online, nobody is checking them, nobody is checking when a new browser comes along, and if when IE8 was released and those websites became completely inaccessible and unusable then obviously there’s a big issue there because your loosing vast amounts of content on the web. I guess a lot of it is unknown entities at the moment isn’t it? It’s guess work.

Eric: Yeah. There’s a lot of guess work and that’s part of the problem, I think if we knew, if there were some kind of statistics, like if the IE team were to come out and said we built a version were the default behaviour was latest and we tested it against these 1000 QA sites and 20% of them broke, 5% were completely unusable, that would be one thing, or if they said we tested and 2 sites were broken, you could still read them but they look a little weird, that would be different and nobody does really know and at least nobody outside of Microsoft and maybe not even them, I don’t know if they’ve done that kind of testing yet. And, I’m sorry, there is one other objection that come from a couple of other browser manufacturers that this is in affect, anti-competitive, whether it’s meant to be or not, but it has that effect because Internet Explorer has such a large market share they have to worry about what it does and so to them it becomes a lot harder to do that, so if they are going to keep up this effort it’s going to become a lot harder to do in this version targeting world after a few releases, of course the question is whether they would need to do that or not and there’s a lot of debate about that, there are people who are like, &#”;Just stop, stop making reference to Internet Explorer and just let it strangle itself to death&#”;. I don’t want to get into all the back and forth that’s happened but that is another objection.

Paul: I guess, is there some danger here as well that once you’ve got this version targeting in place Microsoft could go off on some complete tangent and start introducing all kinds of proprietary functionality into their browser that isn’t supported in the other and we end up in a situation were we’re having browser wars again with different browsers implementing different proprietary tags and stuff like that, or are we truly beyond that do you think?

Eric: Umm, It is certainly a risk and how much of a risk influences were people stand on this. I don’t see that personally as being much of a risk, because yes, the Internet Explorer team could introduce a load of proprietary properties that let an author change the colour of the browser kernel right or replace the backwards and forwards buttons in the browser, whatever, and if nobody else supports that, I think those efforts will largely support them strangling themselves, I mean, colours scroll bars we don’t really hear about anymore, people will still do them, but nobody else really cares.

Paul: Yeah.

Eric: So, I would not claim to be smart enough to see everything that could possibly be done but I think in a lot of ways that might not be a bad thing, because it would let Microsoft experiment with less constraints, they can do initial implementation of things that are in CSS3 and if the behaviour of those things changes, in a later version they can fix what they did, they can change to match the spec, and then still have backwards compatibility for pages that took assumption of that, there are people that would say &#”;Well they should never implement anything that hasn’t been completely nailed down&#”;, but that doesn’t really work, because one of the ways that you get yourself out of the candidate recommendation stages at the W3C is to have implementations and the only way to have implementations is for someone to implement them and if they find out during that phase, and this is what the candidate phase is about, if they find out in that phase that such and such property that has been specified, doesn’t work in the real world for whatever reason, they’re then able to go back and change it, but in the mean time if your Internet Explorer and 11′ty billion pages have been implemented to your particular version of the property.

Paul: So, you wrote this A List Apart article that went out of the 21st of January, and we should probably say that we’re recording this interview on the 29th of January and it’s not going to go out for another week, so things might move on in-between but there’s obviously been a lot of discussion since you released that article, have your views really changed in any way, are you still in favour of this approach or have there been more concerns raised that have made you doubt it?

Eric: Hmm, I’m still in favour of the general idea, the implementation I’m a little less, I guess I would say I’m more agnostic about, but the general idea of backwards compatibility so as not to break sites, whilst still being able to change and improve and fix the browser I’m all in favour off. The default behaviour still bothers me, and I’m still having trouble working out if there is a case of honest to goodness technical reasons or it just feels wrong, there has to be something, how’s it’s gone about is a different question, if the IE team and the people that they have to answer to effectively can be convinced that having the default behaviour switched and then educating people whole want to freeze their sites, on how to freeze there sites using the meta, they can be convinced to do that and that that will fix the problems that they face then I’m all for it. Accessibility concerns do bother me and I think that that’s another argument in favour of switching the default behaviour but at the same time I also have to recognise that switching the default behaviour, as you said earlier, from a certain prospective, completely negates the entire reason to do this, given a certain set of circumstances if they’re going to switch the default behaviour it might almost as well not even do it. Again though that also depends on how much breakage on how many sites and what kind.

Paul: Yeah.

Eric: The other unknown that we’re facing here is we don’t yet know just how different the IE8 behaviours are compared to IE7, we have a clue in that we already know that there’s an internal build of IE8 that can support the ACID2 test, which they weren’t even really very close too, well I guess that depends on who you talk to, but they didn’t support it before so in or to support ACID2 they have to have things like generated content with CSS which we completely don’t have in IE7 they have to have fixed some of there parsing bugs and so on and so forth that hints at a very large change, an even bigger change than that between IE6 and IE7, but we don’t know at this stage, it could be, and this has been one of my objects to ACID2 or one of my discomforts with ACID2 over the years, it could be that they’ve just implemented exactly the things that were needed to ACID2 work and not more, which is the wrong way to go about supporting ACID2 and I don’t know that they’ve done that, but it’s possible. So I may be that it’s not such a huge change, but those things came about as sort of a broader push towards implementing more advanced selectors and fixing bugs and implementing area content and really pushing into the areas of CSS2 that they don’t support and the areas of advanced CSS modules that they don’t support yet, then that could be an enormous change and in that case there’s more chance of them breaking a ton of sites if they don’t have a mechanism like this in place to deal with them.

Paul: So I mean in some senses, after discussing this for however long we’ve been discussing it, there’s very little at this stage that we can really do about this, for the average web designer, Internet Explorer 8 isn’t going to be out in the immediate, one presumes and even when it does we’re talking about relatively minor changes that they’re going to have to make to their site, I guess the biggest immediate concern is maybe how you think about building sites at the moment, do you worry so much about things like progressive enhancement if maybe the way that Internet Explorer works in the future, I guess they’re still good principles.

Eric: Yes, absolutely they’re still good principles and that is how I have developed sites and will continue to develop sites and really I think what it comes down to here is who’s going to have to add the meta tag.

Paul: Yeah.

Eric: Is it going to be people who do forward development, ya know forward compatible development, is it going to be standards aware developers or is it going to be people who aren’t in that sort of craft. It’s not fair in a way, that the people who have been doing things in the right way will have to take that on, but on the other hand it could well if you look at the numbers, there are a lot less of us.

Paul: And in some ways we’re much more equipped to do it.

Eric: Right, to understand why it’s needed and how to do it the right way and when not to do it for that matter.

Paul: Yeah.

Eric: Because when you develop a site for someone and it seems like a one off and they really not going to be keeping it up, you might want to keep the meta tag off because you know that that will default to IE7 and that’s what you want or you might explicitly include it because you want it to default to IE7 and IE8 or ya know on my site if this happens I’ll probably use the edge keyword of IE equals 1024.

Paul: Yeah.

Eric: So I’ll always get the latest and greatest and so that’s for me personally, but for a client I would have a much harder time justifying that because clients don’t care if it’s forward compatible development or not they just care about whether their site works and will continue to work right and so the point has been made, as you did, that in a lot of ways people who are sort of more clued in are better equipped to take this on as opposed to somebody’s grandmother who uses Dreamweaver or whatever to put together a site for her poetry circle and this happens all the time, they don’t even look at the mark-up let alone would understand why this would need to be done why there would need to be some kind of meta tag, first you would need to explain the concept of tags etc, etc, etc.

Paul: I mean a lot of these people don’t even realise that there are multiple versions of a browser, or indeed that there are multiple browsers.

Eric: *laughs* And those are also issues that will need to be faced, somebody is going to have to do this. A lot of these advances that IE8 seems to have ready to go as indicated by passing the ACID2 test may well have to come back out.

Paul: Yeah.

Eric: You can always back changes out of a code base and that really seems to me to be the dilemma and I’ll want to say again, there are people who reject that as being the choice, there are people who feel very strongly that that isn’t in fact a choice, even if you except that’s a choice that they should keep the changes in but be willing to break sites because sites always have to be updated anyway and that’s how browsers have always done it, so there’s a large amount of history that says that can happen but browsers can still advance.

Paul: We will see won’t we, that’s what it boils down to. We will have to wait and see. Okay, Eric, thank you so much for coming on the show and talking that through, it’s an interesting area and I think it’s an area that will have significant impact on how things develop in the future, so it’s good to have your perspective on it. Thanks very much.

Eric: Paul, thanks for having me on, I really appreciate it.

Back to top

Listeners email:

Basic CMS options

As in last week’s show I so badly bastardised the name of our textmate reviewer, I decided it is only fair to allow him another go this week. He asks:

I have a friend who wants me to build a website that they can update. They don’t know how to write HTML or CSS. What is the best way to solve this problem?

The obvious solution is to use a content management system of some type. Indeed this is something we have covered before on the show back in show 24. If you were building a relatively big site that needs constant updating, then I would definitely encourage you to check out that episode. However if your needs are simpler a full blown CMS might be overkill. In such situations you should consider a simple blogging system like WordPress.

One final option maybe to use a tool like Contribute. That way you could build a nice simple static site but your friend would have a WYSIWYG tool to edit it.

The importance of blogs

Our second question is from Lauren:

My question is about starting a blog. Right now, my nights are filled with homework, but once I complete my program, I can truly dedicate my time to building my portfolio. Are blogs really that important now? I don’t know if I can come up with meaningful content to make my blog stand out. Does this mean that I won’t be able to find a good job in the industry without one?

You talk about a portfolio and blog as if they are separate things, but I would suggest they should be combined. As somebody who regularly hires web designers, I have to say I find portfolio websites frustrating. At worst they show me some pretty pictures, at best examples of fully functional websites. However, what they don’t tell me is the thought process behind the designs. Why did you choose the colors you did? Who is the target audience and how did this affect the design?

A blog can also be used as a portfolio but allows more depth into the designs you are presenting. Also, a blog allows you to link to other content on the web and express your views on that content. This shows me as a potential employer that you are well read and interested in what is out there.

As a student looking for your first job I wouldn’t expect your blog to include new CSS techniques or innovative approaches to user testing. However, I would like to see examples of work fully explained and evidence that you are reading other web design sites and have opinions on what you are reading.

107. Running to keep up

On show 107: What should you be learning about in 2008, Jason Beaird on web design basics and how to deal with portfolio pages.

Download this show.

Launch our podcast player

News and events | Where to focus in 08 | Jason Beaird on design basics | Listener emails

News and events

Setting expectations

Our first news story today is an article on working with your clients. Specifically it focuses on the subject of setting your clients expectations and clearly communicating with them.

We all work for somebody. We all have clients in some form. Whether our clients are other companies or simply our boss we all know the feeling when they seem to expect something which we believed we never promised.

This article looks at two ways of managing this kind of scenario. First be diligent up front. As the article says…

Setting expectations isn’t difficult, or mysterious, but it does take time and you have to be diligent about it.

Second it suggests being consistent. That doesn’t mean you are inflexible. It means that you need to be consistent in your communications throughout a project. If goal posts move, it is important that you explain the ramifications.

The principles of this article are universally applicable. So whoever you are take a few minutes to check it out.

Great websites do, not say

The next post I found falls into the category of “it’s funny because it’s true”. It’s a post by one of my favourite bloggers Gerry McGovern who seems to rant against websites that spend more time talking about user experience rather than offering it. He begins his rant by focusing on welcome copy…

I don’t want to pass meaningless pleasantries with your website. I don’t want to shake its hand. Or talk about the weather. I’m at your website for a reason. I’m in a hurry. I’m impatient. So kill the welcome, please.

He goes on to criticise sites that waste valuable copy explaining how easy their sites are…

If it’s really easy, why are you telling me it’s really easy and quick? For starters, you’ve wasted my time by making me read your meaningless sentence.

If you ever write copy for websites then you should read this post. If you don’t then check it out anyway if only for the pure entertainment value.

CSS: The All-Expandable Box

My final suggestion for your reading pleasure is a post on the Web Designers Wall entitled The All-Expandable Box. This solves a problem which I encounter all the time.

As you will know if you listen to this show regularly I am a great fan of using ems for typography. I like the idea users can resize their text to suit their own requirements.

The downside of this approach is that it can quickly break designs especially when text is contained within a box. The box will naturally expand vertically but not horizontally. The result is that you loose control of line length. Enabling the whole interface to expand including the box itself is very useful. This article shows you how.

Its a nice clean technique that should act as a building block for much more complex things. So if you are considering doing more ems based design then this should be a nice starting point.

Back to top

Feature: Where to focus in 08

As web designers we are all busy people. We are in such a fast moving sector that it can be hard to know what is worthy of our attention. Should we be focusing on Silverlight or brushing up on Javascript? Learning Rails or grappling with mobile devices? This week I want to share my thoughts of where you should be focusing your energies in 2008.

Back to top

Expert interview: Jason Beaird on design basics

Paul Boag: Joining me today is Jason beard author of an incredibly useful and wonderful book that I’ve really come to love. That’s – How would you describe it? Is it a basic introduction to designing?

Jason Beaird: It’s a basic introduction to graphic design principles. The book was really first intended for web developers in fact the initial working title was web design for developers and it kind of expanded into just a introduction to graphic design principles for anybody not just for developers, not people already creating websites. But anybody interested in design really.

Paul Boag: Mmm what’s so great about it is that you’ve kind of really taken time to go over the basic principle of creating a beautiful website. Which I guess is the title of the book, “The Principles of beautiful of web design” that’s the title isn’t it?

Jason Beaird: That’s correct.

Paul Boag: I really should have it in front of me shouldn’t I [Jason laughs] Oh but you’ve got to be fairly impressed that I knew that of the top of my head.

Jason Beaird: I’m just impressed that you have a copy yourself.

Paul Boag: Well yes I do. And it’s good because a lot of people that listen to this show are not necessarily professional designers we have a lot of people who listen to the show who are website owners but have to do a bit of design in order to maintain their site. We’ve got Developers that developing applications and having to do some design as part of that and we’ve also got people who probably are designers but not full time so are interested in how the professionals go about doing these things. So it’s a really good book for the boagworld listeners and why I’ve been so desperate to get you on the show for so long Jason, so it’s good to have you Jason.

Jason Beaird: So everybody laughs along.

Paul Boag: Well you’re a busy man; you’ve got a lot to do. So I thought what we would basically do is take the chapters from the book and maybe pick out some of the basic principles from each of those chapter and get you to talk about them little bit. So the chapters in your book are layout and composition, colour, texture, typography and imagery and that for a start made me very enthusiastic. Because it’s like really obvious, basic stuff that here are the main issues you are going to come across from a design prospective and you know we’re going to do a chapter on each which I just thought very refreshing and very logical and that’s good. So let’s kick off with layout and composition so tell us a bit about some of the stuff you cover in that chapter maybe and some of the basic principles that non-designers need to know about.

Jason Beaird: Well the entire book is really just basics, in my opinion. It’s just stuff that a lot of people think designers have as intuition and really it’s just stuff you can learn and learning these principle is like learning how to hand code. Really you can a website using a WYSIWYG but understanding the tags and selectors allows you to see inside and know what’s going on. And these are just basic. But really this is going to be the fire hose version of the book.

< p>Paul Boag: Yeah, I’m asking you to compress the entire book into about 20-30 minutes. [Both laugh]

Jason Beaird: I’ll give it a shot. We’ll start out with layout, some of the main principles of graphic design theory is balance, unity and emphasis and learning how to take all three of those and use them effectively in a layout is a pretty good place to start, from a layout prospective. By balance I mean symmetry. Is it divided right down the middle, or does it still feel balanced even though it’s divided into columns? By unity I mean do the elements of the website feel like they are one cohesive thing. You know does it feel like it’s a singular unit rather than a bunch of different bits. Then emphasis obviously is about creating a focal point on the page. And keeping that focal point and understanding where people are going to look and why they are going to look there and so there there’s different ways to create all three of those things. One thing I talked about in the first chapter about balance and creating balance is design proportion which some people call the golden mean or the golden ratio. Really it’s just a rule that if you divide a width by 1.62 just a number called Phi** you get a pleasing proportionate division. And so to make that simpler it can also be known as the rule of thirds. If you divide something by thirds it’s pretty close to the 1/ 1.62 ratio and you can come up with a pleasing kind of division for a navigation column and content area by using that kind of division. But really that’s sort of an overview.

< p>Paul Boag: Yeah, I wonder why the rule of thirds works, did you find out anything in your research about why that is pleasing?

Jason Beaird: I didn’t really find out a whole lot of solid information about it. But there is some out there, pythagorans noticed that it was a very common division in nature things like with leaves and shells had the same division and ratio and then started to develop the concept that anything designed around that is designing around nature so is therefore designing around gods design so you know. So the Romans and the Greeks built there some of their architecture on the golden ratio, the golden mean it’s a stable of graphic design since those times.

Paul Boag: Yeah and it really does work. I remember even back in Art College when I was being taught photography the same principles apply to photography composition you know or really anything you do, whether its print design or web design. So yeah the rule of thirds I think is a good one to take away.

Jason Beaird: Yep.

Paul Boag: Ok, what about colour tells us a little bit about colour because that’s a huge subject that people have written entire books on and you had one chapter so what did you chose to pick out on the subject of colour?

Jason Beaird: That’s the important thing to remember about these chapters is that there are entire books dedicated to each. I feel like was already trying to squeeze it already into the book. But with colour I think the most important thing to remember is that people’s perception of colour depend on their own personal experiences and cultural like right now, red and green means Christmas, for most Americans and most people around the globe whether they believe in that or not it’s just something that we’ve been exposed to so much that that’s the way we see it.

Paul Boag: Yeah.

Jason Beaird: But beyond those personal perceptions and traditional perceptions it’s good to know that there are ways to align colours where you really can’t make too big a mistake. [Laughs] and that are using a colour wheel and to rely on colour schemes that exist. With any rule it can be broken for whatever purpose you want but it’s good to know what the good colour choices look like before you start making your own and relying on color schemes or a colour wheel is a good way to get started.

Paul Boag: I think when you talk about these rules exist to be broken, ok that’s true but the kind of audience you are trying to reach, maybe a non-designer audience kind of playing safe is kind of always a good way to go.

Jason Beaird: That’s true.

Paul Boag: And you know using a colour wheels and stuff. Don’t you also mention in the book about finding a photograph that you like and or is that somewhere else, that might be somewhere else but it’s a nice idea anyway, taking a photograph and extracting the colours from that. I think is quite a nice way of doing it as well. Have you ever tried that?

Jason Beaird:I have tried that, I use that quite often. I don’t know if I mentioned that in the book or not. I mention a few other software based colour chooses and one that come out around the time I was writing the book that I didn’t get a chance to include was adobe kuler, at

Paul Boag: Yeah I think using a tool like that is very handy indeed. Because let’s face it we perceive colour in slightly different ways and what is it one in ten or is it one in 20 men are colour blind anyway.

Jason Beaird: I believe it’s 1 in 10 have slight colour blindness where they can’t tell, usually a red green; where they can’t tell the difference between red and green. Yeah so I mean yes, using a tool is a good idea if you are not a designer who’s really confident in colour.

Paul Boag: Now what about the subject of texture that was an interesting one I was quite interested that that was included in the chapter listings. And I, I intuitively do stuff with texture but I’ve never really thought about it that much so tell us a little bit about why you decided to include that and what advice would you give?

Jason Beaird: That for me was probably one of the hardest chapters to write because it was a lot of intuition and I like to use texture a lot in my own designs and I think that where truly the design begins. But there is not much principle wise to it. You can talk about points and lines and shape and that’s where all visual effects begin. But texture is really about creating a tactile quality and a theme for you website. Whether that is a smooth shape like apple computer with rounded corners and glossy buttons or whether that is a wicked worn look with a brick texture or something that makes it look nostalgia or old or whatever feel you want to create you can do that with texture. And I was trying to just convey that in that chapter.

Paul Boag: Yeah I mean texture kind a gives character to the site in many ways doesn’t it from the kind of grunge look you get through to the highly reflective look, or like what you say, sites like Apple. So what kind of, you talked about points and lines and perhaps you could explain some of those concepts to us.

Jason Beaird: Right you can create any kind of visual effect with just points. I showed an example; a picture of my cat, abbie, created with a dot matrix printer kind of effect on it. It’s just points. And then you can move in and use lines and shapes. It’s just important to remember that lines can create movement, horizontal line doesn’t have as much movement as say a diagonal line or vertical lines lead you up and down the page. It’s important to remember eye movement when you are creating textures. But really it’s just like what I said about creating a tactile quality and theme for the website.

Paul Boag: So as far as people may be, say a developer who has just developed an application and he needs it to look kind of half decent but doesn’t want to do anything too risky incase he screws it up and he’s not a designer. I mean what kind of advice do you give a person like that? Do you encourage them, probably best to stay away from doing too much textual stuff or is that something you should get into?

Jason Beaird: I think it’s something you should think about. Texture can easily be overdone and it can become goofy and silly rather than being professional. And I think it’s just in moderation. The thing to remember is to not leave your website backgrounds on div’s, backgrounds colors on div’s. Create some kind of texture, feel to it, whether that’s rounded corners or whether to go for the minimal stick where you don’t really use background images but rely on negative space. It’s just the fact of going beyond the standard HTML look. I mean obviously with style sheets you can’t just leave it un-styled because it’s styled content has no structure to it any more because, we’ve taken out the tables we’ve taken out the design in HTML and now we are relying on style sheets, so now you really have to build something up. That’s good I think, it makes people think about texture and all these typography, colour all these elements of design. But to think about it and just go beyond the basics. Just try to recreate something that you already like, picture wise, that doesn’t mean stealing the design but looking at another website you think captures the professional look and feel that you are going for and try to recreate that in your website.

Paul Boag: Yeah, it’s interesting that you talk about looking for inspiration. What kind of advice do you give people for a good place to look, should they just be looking at other websites or should they be looking beyond the web a bit?

Jason Beaird: I really believe that people need to look beyond the web. One of the tags for this book is that you don’t need to go to art school to design great looking websites and well I was kind scared of that headline, that professors from collage would hate me for it. [Paul laugh] It’s really true because if you have a passion for it, it will draw an inspiration from all sorts of sources whether it is architecture, or goofy things like traffic patterns or a door that you see, anything really can really inspire a look and feel to a website. Jonathan Stickler wrote an article about how he was inspired by an art deco building and that’s what gave him the design idea for his current website design.

Paul Boag:Yeah, and I thinks that particularly true when it comes to texture and colour as well as you can see textures and colors around you in everything from a plant pot through to a magazine so yeah.

Jason Beaird: One of the other big things from going through a collage art programs is that if you go to school for graphic design you’re not just going to school for graphic design you actually have to take all the traditional art classes, painting, drawing, pottery sometimes, a lot of history and really the reason for that is to create a foundation to a visual exposure to art. So you have this vocabulary and this experience pool to draw from when you are creating other designs.

Paul Boag: You mentioned earlier, negative space when you were talking about texture as another kind of approach to things. Negative space is something I think designers always throw around; it’s a term that we like to use quite a lot. But it’s not something we ever kind of explain. Just spend a couple of minutes explaining how negative space works and why it’s so important, if you would.

Jason Beaird: Negative space is important because it allows you eye to move around things if you had a page completely crammed with text you wouldn’t have any focal point to start with apart from the top of the page. Our eyes usually gravitate towards the center of the composition, so if you think about that you can have an element something around the center of the composition that can lead you to another element. Negative space is really a tool for moving the eye around.

Paul Boag: Right.

Jason Beaird: If you have, like I said before diagonal lines create movement. If you have diagonal lines that move you up towards something else. I gave a few examples in the book; it’s hard to talk about it with having any visuals.

Paul Boag: Yeah I know. It’s frustrating isn’t it? I really sometimes, I really regret doing an audio podcast, it’s a bad choice. [laughs] Ok, let’s look at the subject of typography. I’m guessing it must have been a hard chapter to write because A) typography is a massive subject and B) typography on the web is quite a tricky area. It’s kind of easy to almost easy, as a non-designer, to dismiss typography by going; well there are only about 4 fonts I’m allowed to use anyway so therefore typography on the web doesn’t exist. Why is that wrong, why is that not the truth and how did you squeeze a chapter out of this.

Jason Beaird: Well just like a lot of the chapters there are a lot of books on the subject of typography that go way beyond our experience with web or even print graphic design that go way back to the roots of communication and that’s really what typography is about. Its communication and all websites you’re trying to communicate something so if you can’t do that with pictures and ideas you have to do that with words so the way those words appear to people should become part of your design. It’s on hard with the state that it’s in with the web, having a limited palette of fonts to choose from. But at the same time it’s a good thing, I think for the novice because even though we are limited to this certain number of fonts that everybody has in their computers. Most of those fonts aside from comic sans are decent [laughs] for body text and things like that. The most important thing to remember is that there are other fonts out there and to have sensitivity towards things like spacing between lines and the vertical rhythm. Vertical rhythm isn’t something I talked about in my book because I thought it was an advanced subject but right after the book was published it sort of exploded into a big topic in web design and there’s a lot great articles out there written by other great web designers about vertical rhythm and how that affects your typography.

Paul Boag: So what is vertical rhythm for those that don’t know?

Jason Beaird: Vertical rhythm is just creating a space between your lines that kind of matches up throughout the website so that the spacing in the lines in your navigation area and the spacing in your lines in the content area kind of line up and their not just randomly spaced apart so you get weird alignments between things. It’s creating vertical rhythm, it itself is a good description; you’re creating a rhythm or pattern for your eye to follow down the page.

Paul Boag: So it’s all about basically making sure multiple typographic elements across columns have some kind of relationship to one another and that they are not just higaty pigaty all over the place.

Jason Beaird: That s the way I understand it, that’s the way I think of it is it’s really about creating a pattern and paying attention to the way the text lines up.

Paul Boag: So whatever, bearing in mind that we are limited to such a small set of fonts. What sort of basic advice would you give to someone starting on in web typography. You mentioned line spacing, what are you getting at there?

Jason Beaird: The default line spacing for HTML is very tight. And with tight text like that it’s kind of hard to read And also thinking about the width of the text you are reading . When you are reading a newspaper article or a magazine article the reason the columns are so narrow is because it’s easy, or a book even, it’s easy for your eye to scan a certain width of text and it’s easy for your eye to move to the next line if there is a little bit of space between it. And if you kind of know those basic concepts you can make it a little more pleasing to read that the default set up for typography on the web.

Paul Boag: Yeah, because especially if you’ve got a fluid site you can end up with ridiculously long line lengths if you don’t.

Jason Beaird: Right and I think that’s a lot of the beef people have with fluid layouts is that not only are you taking power from the graphic designer but you’ll also making line widths that are incredibly hard to read. But in my opinion if the user is comfortable expanding the site out to that width, and it’s readable having the line width that long, then obviously they don’t have a problem with it. But you should sort of leave that up to the user if you can. But it’s been proven that it’s easier to read text that’s been set to a certain width.

Paul Boag: Are there certain type faces that are better suited to kind of headings in preference to body’s and vice versa?

Jason Beaird: Well with body text, traditionally it use to be that body text for books and that were set to times or serif fonts because the serifs sort of lead your eye to the next character, but because of the resolution we have with the monitors and the way the text is being presented it’s actually been proven that sans serif fonts are better, fonts like Arial and Helvetica, are easier to read in smaller sizes because you don’t get the kind of resolution, the kind of detail that you get with printed type. And now that’s changing, we’re getting higher and higher resolutions in displays so maybe that will change in the future. But it’s just important to know those kinds of idea when choosing the body type for your website. But when you are choosing a heading, when you’ve got something that is very large it really just matters how the text displays and because you can use images and because you can use things like (scalable Inman Flash Replacement) sIFR to display another font besides the standard 6 or 7 fonts that are available – I call it the ok 5 9 [laughs] that are available across the Mac and web computers, Mac and PC computers sorry. You can choose other fonts that are outside those fonts to use for headers or areas where you want to give a little more design appeal. So there is a world of fonts out there, some good, some corny, that are available, some free and some very expensive that you can use for the headline on your website and it’s just important to be aware of those other fonts. I gave a few resources for free fonts I like www.1001 fonts.com is a good place to go for licensed fonts is a great font boundary, there is just a lot of fonts makers that make excellent fonts, not just for printed material like books but for web designers and people working on the web should be aware as well.

Paul Boag: Cool. So the last chapter in your book talks about imagery and I’m fascinated, and I have to confess that I haven’t read that chapter yet, so I’m kind of fascinated to know what you cover in that chapter as far as using imagery on the web. What kind of advice do you give?

Jason Beaird: Well the imagery. The graphic design doesn’t stop creating the frame around the website. It’s also about formatting the inside which is kind of difficult when you give the power to the user, give them content management. But choosing supporting content imagery is one thing that can really enhance the user experience of the web site. And finding and creating supporting imagery for awebsite content can be very difficult if you don’t know where to look or if you’re not a good illustrator or if you are not good at Photoshop. So I just try to give a basic primer on finding this type of supporting imagery and if you find an image that might work, how to tweak it to work for your needs. I just wanted to give a basic intro to using stock photo sites like iPhoto or stock photo exchange which is sxc.hu is a free stock photography site that is really great it has a lot of images. Finding images and then using them in your site is one way to really enhance the experience for your user, beyond that also I try to warn people from stealing images from Google and stop using the stock images and stock photography that we are all use to seeing in most free publication. I mean really here are a lot of stock images that have been created; the guy with the light bulb over his head, the hands holding the tree that’s growing in the soil in the persons hands. These are clique in the stock photography world you have to be aware when choosing images, to enhance the user experience.

Paul Boag: Yeah, yeah, defiantly , did you cover any of the technical aspects of compressing images or whether to go gif or jpeg and that kind of thing.

Jason Beaird: Yeah I did give a quick primer on jpegs, gifs and pings. And just a quick for everybody, if you are using a photo you obviously want to use a jpeg because usually with photos you usually have a lot of different tones and images. And gifs and pings the file space is based on the number of colours in the image. If you are using an icon type thing or a colour field where you have a limited number of colours then gif or pings are the way to go. And choosing between gifs and pings is really all about choosing between the types of transparency you want to have. Internet explorer 6 and below doesn’t support alpha transparency where you have a sort of gradient from opaque to transparent it just supports on an off. So with pings if you have transparency then you get a pink halo around them. Areas where there is transparency you can’t see it, now there are fixes for that but it’s kind of hacky still and for that reason people still hang onto the good old gif format which has transparency and unfortunately also has animation. [Both laugh]

Paul Boag: So is that one of your rules? Never ever use animated gifs?

Jason Beaird: Actually no it’s not, because I’ve used animated gifs even on my own site if you go to my site jasongraphics.com and hover over the logo it was sort of an experiment toy to play with I was designing my current layout, it was a sliding door type image where I’ve got the still part of the Jason graphics logo and then when you move over it jumps up, the position of the image jumps up so you see the animated moving, like sunrays over the logo. So that’s an animated gif and I’m not ashamed of that. But I think that animated gifs in a lot of ways degrade the professionalism of a lot of websites.

Paul Boag: It sounds a superb book, for anyone that’s not from a design background. Where can they get a hold of a copy, where can they find out more about it, how can they buy it I guess is the next question?

Jason Beaird: Well I’d love you to buy it.

Paul Boag: Obviously.

Jason Beaird: I set a little promo site for the book at www.principlesofbeautifulwebdesign.com were you can kind of hover over, I did a fun little thing where if you hover over each of the chapter names it sort of point s out in the website design itself how the things play a part of the design I made for the promo site.

Paul Boag: Oh cool.

Jason Beaird: Beyond that amazon.com has a good price for the book usually and you can go of course to site point.com to buy directly from them, and most people prefer to do is buy directly from Sitepoint. They sent you lots of emails about books that are coming out and specials. A lot of people are big fans of Sitepoint. I really like them a lot too.

Paul Boag: Yeah if you haven’t checked out Sitepoint before, then it’s worth saying that they are a lot more than a book publisher they have got a huge site with tons of great articles of all aspects of web design and a really active forum as well.

Jason Beaird: The forums are a great place to get involved and a great place to learn new things.

Paul Boag: Thank you so much for coming on the show I can’t say I normally get people on the show to pimp their book and to be honest that wasn’t what I originally ask you to do either. But the more I think about it the more I’ll looked at it, the more I think it’s a perfect book for a lot people that listen to this show if you are starting out in any form of design and don’t come from a design background then I can highly recommend this is a book to check out. Jason, we’ll get you back again in the future no doubt and make you cover some of these things in more depth. But for now thanks you very much for being on the show.

Jason Beaird: I appreciate it, it’s like being on the Dave Letterman show or the Conon O’Brien [Paul laughs] it’s like a status symbol. But I’m glad to be here and thanks for having me on the show.

Paul Boag: Thanks very much.

Back to top

Listeners email:

A excellent wire-framing tool

Robin:I’m a part-time web developer, committed to web standards, one day I’d like to make it my job. I’m a regular listener of boagworld in my car (traffic jam) going to work.

Remembering your discussion with Marcus about wire-framing (Powerpoint or Visio) i just came across this product: http://www.axure.com/demo.aspx. Looks spectacular although much to expensive for me (still).

Keep up the good work.

Building an online portfolio

Sultan:On the Headscape website I notice you have “related links” and “related pages”. What is the logic of that?

Also in your portfolio section when I click on a thumbnail why don’t you guys link to the actual sites rather than to a screen shot?

First of all let me say there is a lot about the Headscape website which I don’t like. It was built a while ago and our thinking has moved on.

One example of this is related pages and links. The logic was that related pages referred to other pages on the same website. Related links where external links to third parties. However in hindsight I don’t think that is a very clear distinction and should probably be changed.

I am however more happy with what we have done in our portfolio section. We have several reasons for the decision to link to screen shots rather than live sites. These include…

  • Some of the sites are intranets and not available to the public
  • Some sites had limited shelf life and are no longer available
  • We wanted the user to be able to click through multiples sites in quick succession

However, the primary reason is that clients often make significant alternations to the sites we deliver. After the end of the project we simply cannot guarantee that the quality of design and code will be maintained and so prefer not to directly link to the sites.

I am not suggesting that this is the right decision however it is the course of action we have chosen for Headscape.

105. Christmas Cheer

On this week’s show: Paul suggests some gifts to buy the geek in your life. Marcus talks about wireframes and Matthew Paterson talks about the Email Standards Project.

Download this show.

Clear:left winner

Congratulations to Ryan Downie who is the lucky winner of the Clear:Left training competition. Ryan will have his pick of either a place on the CSS Mastery.

If you didn’t win do not despair. There are places still available on both courses for a mere £345 + VAT. I have attended Jeremy Keith’s course on AJAX and have to say it was superb. I am sure the CSS course is just as good. Go to the clear:left website for more details.

News and events

Opera goes on the offensive against Microsoft

Without a doubt the biggest story of the week and in many ways the year is the fact that Opera is filing an antitrust suit against Microsoft. This story is huge, not because one browser manufacturer is litigating against another (something that is a common occurrence) but because of the strange ripple effect this seems to be causing in the web design community.

However, before we get into the ripples lets look at the antitrust suit itself. Operas beef seems to focus on two areas. First, they object to Internet Explorer being bundled with Windows (surprise, surprise). Second, they are complaining about Microsoft’s lack of commitments to web standards.

Call me an old cynic but this whole thing stinks of a massive PR exercise. This is especially true when it comes to the complaints about standards. As Eric Meyer points out, the timing of this claim seems odd to say the last. If the suit had been filed before the release of IE7 it would make some kind of sense. It was certainly true that standards support in IE was very poor. However, IE7 is a huge step forward and Microsoft seem to be active in its development of IE8.

To me this just looks like an exercise in pandering to the gripes of the web design community. It was as if Opera knew it wouldn’t get a lot of support for the whole “unbundle IE” argument and so threw in the standards issue to drum up some support.

However, as I have already said, the Opera antitrust suit is not the most interesting part of this story. The real clincher is the spin off discussion that has emerged sparked primarily by a very provocative post by Andy Clarke. He argues that this suit makes the position of the W3C CSS working group untenable. Andy asks how Microsoft and Opera can work together to create the next generation of CSS when they are in legal action over exactly that issue. This has led to a much wider discussion about how the W3C works and highlighted a divide between how browser manufacturers and designers see the world. Without a doubt there is huge frustration at the glacier speed at which the W3C moves. This is largely due to the challenges faced by browser manufacturers in implementing the specifications.

But the story does not end there. This frustration with slow progress seems to extend beyond even the W3C to also encompass the Web Standards Project which was setup precisely to push for better standards support. Some very prominent figures are even questioning its role.

If we as web designers want to pressure browser makers to provide better standards support then we need to invest in organisations like WaSP. They need to have the kind of funding that political lobby groups have. This will enable them to employ full time staff to constantly lobby and educate browser providers on what web designers need. In my opinion we as web designers need to put our money where our mouth is and start giving financing to organisations like WaSP so they can be more effective.

Boagworld christmas appeal

Talking about putting your money where your mouth is, I would like to thank everybody who has been kind enough to give to our Christmas Appeal. We have been raising money to support an orphanage and school in an extremely poor part of India. The idea is that you pay for anything of value you have received from Boagworld. Ask yourself how much have we taught you on the show? How much have we entertained you? Then decide how much you would pay for that and give that money.

So far we have received £465 and we are still collecting. Even if you hear this show after Christmas we are still collecting! To donate something or for more information go to christmas.boagworld.com.

The best CSS designs of 2007

Not only is Christmas almost upon us, the year is about to draw to a close. This makes it the time of year when bloggers look back at the year just gone and compile “the best of 2007″ lists. Normally I am lukewarm about such things however there is a great list over at web designer wall. They have compiled the best of CSS design in 2007. If you are in need of inspiration this is definitely worth a look. There is some truly stunning stuff here.

Talking of rating design you might also want to check out commandshift3.com which is basically hot or not for web design. When you visit the homepage you are shown two designs and you click on the design you prefer. Not only does it allow you to vote for designs it also lets you look at the best and worst based on votes received. This makes it a great site for inspiration and for learning what not to do!

Marcus’ bit: Quick and Dirty Wireframes

So a couple of week’s ago I wrote a post on the use of wireframes in web design. Marcus couldn’t come up with a decent topic to talk about himself this week so has decided to reuse my post and pass it off as his own! ;)

Back to top

Paul’s corner: Geek Gifts for Christmas

For my segment of the show this week I decided it might be fun to look at Christmas presents. Specifically what you should buy for the geek in your life. In order to avoid it sounding like a wish list for myself the items I have picked are items that I own myself and can personally recommend.

Back to top

Ask the expert: Introduction to the Email Standards Project

Hello world of Boag, I’m here today just to give you a really quick introduction to the Email Standards Project, a new community effort that has launched recently.

If you’re a web designer, and you’ve ever created HTML emails, you will know that getting them to look reasonably consistent across the major email clients is hair-pullingly frustrating.

At least with websites, there are only a few major browsers you have to worry about, and thanks to the Web Standards Project they are much improved from the days of the browser wars. With email you have at least 12 email clients with big shares of the audience.

Unfortunately, HTML email is still stuck back in 1998 with that Celine Dion song from ‘Titanic’ – nobody wants to be there. Over the last 10 years, web designers, and particularly web standardsy type designer, have generally taken a ‘Just Say No’ approach to HTML email. ‘Don’t send it, don’t read it, pretend it never happened’.

That approach has not been a spectacular success – millions of people still sent HTML emails, but because the designers wouldn’t touch them they were hideously ugly and just made designers hate them even more.

HTML email is here to stay. It is the default format in many clients, and sometimes it really does give a better experience for the reader than plain text. The Threadless newsletter is a great example – the send every week an email with pictures of the latest shirts. Trying to describe the shirts in text is nowhere near as useful. A picture is worth at least 1,000 words!

So here we are in 2007, and in order to get reasonable rendering, designers are having to dust off their table coding skills to get things working in Outlook, Lotus Notes, Gmail, Yahoo, Thunderbird…it goes on.

At Freshview we deal with designers every day through Campaign Monitor and MailBuild who are struggling with this problem, and we finally decided to do something about it. That is where the Email Standards Project came from.

Together with a few other people we’ve put a site up at http://www.email-standards.org (email hyphen standards dot org), and you will find a link for that in the show notes. The central idea of the Email Standards Project is that we want to work with designers and with email client developers to improve support for web standards in email clients.

It’s not one of those sites that is all talk and no practicality though – jump onto the site and you will see a bunch of tests we have done to work out exactly what does, and what does not work in all the major email clients as far as a core of normal HTML and CSS like padding, margins, floats, lists and so on.

If you’ve seen the Acid test for browsers, over at the Web Standards Project, then this is basically the same idea except for email. We’ve already had some contact with some of the big email client representatives about our results, which is really exciting. Check out the blog for updates in that area.

If you know the pain of designing HTML emails, and you want to support the project, then there is a section on the site that covers that too, and we’ve had a huge number of people offer to help, and some great feedback from people like Jeffrey Zeldman and Cameron Moll.

If you are a website owner, and you want to know why this matters to you, then check out the site for an article on why web standards are important for email, or talk to your web design firm. As is often the case, it comes down to money – better standards support means less time spent getting things to work, and more time on the actual design.

So thanks for giving me the chance to say a few words about the Email Standards Project, and I hope you all do get a chance to checkout the website, email-standards.org.

Happy Christmas!

That about wraps it up for this week’s show. We will be back with a slightly amended format as from Wednesday the 9th January. See you then.

104. Give us your money

On this week’s show: Paul shares 10 tips for getting designs signed off. Marcus looks at how to present to a prospective client and Michael Slater introduces us to Ruby on Rails.

Play

Download this show.

Launch our podcast player

News and events | Marcus: How to present to a prospective client | Paul: 10 tips for design sign off | Michael Slater talks about Ruby on Rails | Question of the week

Housekeeping

All change

I have a bit of housekeeping news before we go any further with the show. I am changing things around a bit with my podcasting line up. After a chat with Dan Oliver from .net magazine we have decided that I will no longer be doing their show. They have some great plans for it in the future but it just didn’t make sense for me to keep doing two very similar shows. Before people start emailing, no we haven’t had a falling out and I still love Dan very much… if only I wasn’t already married.

The good news is that this allows me to introduce some more guests onto this show and bring in a bit more discussion. In order to accommodate this we will be having just one feature section each week instead of my bit and Marcus bit. Some weeks I will do it and other weeks it will be Marcus.

The final aspect of all of this is that we are going to start recording the show together rather than over skype. This should deal with the audio problems we have been having as well as making for a much better dynamic.

Christmas giving

I thought it might be nice to use the mighty power of the Boagworld listeners to raise a bit of money this Christmas and wondered if you might all be so kind as to help.

We have been doing this show for well over 2 years and have never charged or done much in the way of advertising. We are therefore wondering if just this once you would dip your hands into your pockets and give a bit of cash.

I want to raise some money for a charity I have been personally supporting for a while. A friend I grew up with now runs a school and orphanage in a very rural part of India. The kids they work with have far from the best background and the school is the only hope they have of breaking out of their circumstances.

I wont emotionally blackmail you with sob stories (because I know you are hardened cynical geeks) but simply ask that you give me some cash in return for the two years of free shows I have given you.

Because I am unorganised and only thought of this a couple of days ago we are going to simply use my paypal account to collect donations. I will then pass the money on to the charity. So to give a donation just use the bottom below (be warned its not the most intuitive system ever but you are all clever chaps. I am sure you will work it out).

Give to the Boagworld Christmas Appeal

News and events

24 ways is back

My first story of the day is actually 12 days late because it is the re-launch of 24 ways. In case you haven’t come across 24 ways before I should explain that it is an advent calendar for web designers.

Each day in December leading up to Christmas they publish an article written by some of the leading lights in web design (oh yes, and me). The articles are somewhat random but also incredibly practical and hands on. Articles range from creating a never-ending background to working with online maps.

But don’t panic that you have missed the first half of advent. You can access all of the previous days. In fact you can even access the last 2 years of articles. Ample to keep you amused while we are away over Christmas.

Tips for development and design

If 24 ways isn’t enough to quench your thirst for knowledge then let’s throw two more articles into the mix both of which provide some top tips.

The first is for all you developers out there. The guys at Blue Flavor have shared their top 10 tips for a successful development project. The article includes great advice like, always create a functional spec and talk to your clients. Interestingly one of the suggestions is to use a version control system. This is also a tip in our second article which is aimed instead at designers.

Jina Bolton has written an interesting article for Think Vitamin entitled “creating sexy stylesheets“. Like the blue flavor article this one lists 10 tips. However this time they are for producing better stylesheets. Now, although I would argue that nothing makes CSS sexy this is still a very useful list. The tips for organising your CSS file and building your own framework are particularly good.

So if you are into top 10 lists then you should be happy this week whether you are a designer or a developer.

24 wayswhich post articles on web design over the Christmas period. Well, I was asked to contribute to the site so I wrote an article entitled 10 tips for design sign off. Although some of the tips have been covered on the show I thought generally it would make a good segment for the show.

The problem is that getting design sign off can be one of the most challenging parts of the web design process. It can prove time consuming, demoralizing and if you are not careful can lead to a dissatisfied client. What is more you can end up with a design that you are ashamed to include in your portfolio.

How then can you ensure that the design you produce is the one that gets built? How can you get the client to sign off on your design? (Question of the week

What tips do you have for getting designs signed off?

 

Bargain basement usability testing

There is a lot written about usability testing both online and off. However, except for “Don’t Make Me Think” by Steve Krug they all seem to make it sound very complicated and expensive. So here is the boagworld guide to bargain basement usability testing.

The boss refuses to pay for usability testing, you have no budget of your own and yet you are determined that the site will be as easy to use as possible. What do you do?

There is a perception that usability testing has to be time consuming and expensive but it really doesn’t need to be that way. The key is to do a little and often therefore catching problems before they become too complex to change.

Start off by doing some testing on initial design concepts or even rough sketches. Test again when you have a more detailed information architecture or a basic wireframe. Test yet again once the majority of content is in place and finally do one round before you go live.

That sounds like a lot of testing doesn’t it? Well it would be if the testing involved large numbers of participants who exactly matched the target audience and if they all were tested in expensive usability suites with cameras and observation areas.

However with bargain basement usability testing you make up for quality with quantity. By doing a lot of rounds you will probably pick up on more problems than just a single round done with all the expensive techniques.

For bargain basement usability testing all you need is 5 or 6 friends (or random strangers), a desk, a chair, a computer and a notepad.

Picking your users

Lets start by looking at the users who you will test with. First of all they don’t need to meet the exact demographics of your user group. It can be very time consuming to find people that match your audience. Instead just grab anybody. It doesn’t matter who. Friends, family, random strangers. The reality is that the majority of usability problems are going to be generic across all audiences. Sure if you have a friend that meets the criteria all the better but don’t get hung up on it. Better to test somebody than nobody at all!

Also don’t bother getting anymore than 5 or 6 people. More than that and you really don’t catch that many more problems. It just isn’t worth the additional time testing. You are better off just testing with a few, fixing the problems and testing again. That will reveal new problems which users never reached in the first round.

Your testing environment

Next lets look at the environment. There is no need to test in a usability lab. In fact I would argue the best place to test is in the location people normally surf the net. If possible go to their home or office and test on their own PC. That way they feel relaxed and are more likely to behave normally. If you cant do that then just sit them down in front of your PC and test them there.

Finally you don’t need a camera or observation area. Simply sit with them and jot things down as you go along. If you can get a colleague to join you and take the notes all the better but that is optional.

How to test

So what do you do in a test session? Well that doesn’t need to be rocket science either.

What you can do is largely dictated by what you have to show. When all you have is a couple of design concepts the best you can do is ask the user what they would click on to complete a specific task. You can also ask them if they can quickly spot certain screen elements using the same flash testing we have spoken about before.

As you have more to show you can ask users to complete more complex tasks. You can ask them to find a specific page within your wireframe or ask them what they would expect to find within a section on the information architecture.

Your job is to watch how they interact with your site and note where they struggle. The key to this process is to encourage them to articulate their thinking as they go along. Users will often sit staring blankly at the screen if they are stuck. You need to ask them what options they are considering and why they are struggling.

Before they click on anything ask them why they made the choice they did and what other options they rejected. The idea is to get them to talk as much as possible about what they are doing.

Fundamentally that is it. Obviously I could write a lot more on the subject but that should be enough to get you started. Get 5 or 6 random people to sit in front of a computer, look at your site and ask them to complete a series of tasks while talking about them. Not difficult is it. Why then are usability experts paid so much? ;)

Show 102: Worktime blues

On this week’s show: Paul looks at why you should have a training budget and how to spend it. Marcus looks at capturing requirements and Roo Reynolds introduces us to the possibilities of virtual worlds and their impact on web design.

Download this show.

Launch our podcast player

News and events | Marcus Requirements capture | Paul: Spending the training budget | Roo Reynolds on virtual worlds | Question of the week

News and events

10 Absolute “Nos!” for Freelancers

I know that many of the people that listen to the boagworld podcast are freelancers so I keep an eye out for stories that appeal to this group. I was therefore drawn to an article in my news reader entitled 10 Absolute “Nos!” for freelancers. It’s a great article that lists 10 questions asked by clients to which the answer should always be no.

The questions include classics such as “Can you show me a mock-up to help us choose a designer/developer?”, “Can I pay for my e-commerce site from my website sales?” and “Can I just pay the whole amount when it’s done?”. Almost without exception I agreed with every item on this list. The only exception is “Will you register and host my site?” because I think a lot of clients expect this even if it is a pain in the arse. Of course, the fact that I work for an agency rather than as a freelancer could be colouring my view on this one. However, whether you are a freelancer, an agency employee or just an enthusiastic amateur this is all good advice.

Making the most of working with designers

Adaptive Path are an agency I really admire. Not only do they produce some cutting edge work they are also some of the foremost thinkers in the world of web design. I was therefore understandably interested when one of their clients recently asked them how to make the most of working with a design agency.

The resulting blog post called “Making the Most of a Design Engagement” is a fascinating collection of tips that is definitely worth a read.

The subject of how an agency and client engage is something that I have posted on a number of times [1], [2], [3]. However, reading the perspective of another agency (especially one so well respected) is very enlightening. What I found most encouraging of all is that they obviously struggle with the same kind of client issues we all do.

Whether you are somebody who commissions web designers or whether you are a designer yourself take the time to read this short post.

How Open ID will change your site

Just before I went away on holiday (did I mention I had been away?) there was a new post on the Think Vitamin website about OpenID. I am a big fan of OpenID and have spoken about it before on the show. However, its a tricky concept to explain. At its heart it allows you to login to all the many services you use on the web from one single site so having to deal with only a single username and password.

I sincerely believe that if you are building a new website that has any form of login then you should consider including an OpenID login. The problem at the moment is that you will have to do this in addition to the normal login process. You might wonder if it is worth the effort.

The article on the Think Vitamin site does an excellent job at explaining just how significant OpenID is going to be (even though it exaggerates it in places). It explains the background, the problem and the possibilities. If you haven’t looked at OpenID yet or are sceptical about its worth then the Think Vitamin is a great place to start.

Good practice when working with Tag Clouds

Tagging is everywhere these days. From Flickr to Delicious every site seems to have tags. Even blogs like this one has tags. Tags are a useful alternative form of navigation that allows users to quickly find related content no matter where it is in the sites hierarchy. There is no doubt they are powerful and incredibly useful especially on larger sites with a lot of content.

The problem is that they are relatively new. We are still working out how to successfully integrate them into our websites and what role they play. Fortunately a recent article entitled “Tag Clouds Gallery: Examples And Good Practices” attempts to establish some best practice for tagging and makes some suggestions about their design and integration.

If you are doing some design work with tags or if you are looking to add tags to your own site then you may want to take a look at this post. My only word of caution is that it only tells half the story. It addresses tag clouds but says little about how tags on individual pages should be displayed.

Back to top

Marcus’ bit: Requirements capture

While Paul has been buddying up with Mickey, Donald and Pluto, I have been working with a UK higher education institution at the very early stages of their website redesign project.

One of the things that we have been discussing in detail is the process we will go through to capture requirements and set objectives for the site. I thought I should share them here.

Existing site review

I have looked in the past at carrying out an expert review relating solely on a site’s information architecture. A site review takes on board some aspects of the existing site’s IA but is more general than that.

I tend to look at the following site features very much from a usability point of view:

  • Navigability – can I find things?
  • Consistency of navigation
  • Visual hierarchy – consistency of the design
  • Writing style
  • Processes – search, making a comment, ordering etc
  • Terminology
  • Content – grouping, repetition, wide/narrow mix, internal/external mix etc

The main purposes of the review are:

  • To highlight to all stakeholders what the site issues are
  • To highlight to all stakeholders positive aspects of the existing site
  • To suggest possible solutions to issues
  • To explain the processes involved in achieving goals

Stakeholder interviews

We have found that interviewing key internal staff (i.e. content owners) and sometimes key users, is the most valuable exercise in creating a requirements and objectives document.

Each interview is done on a one-to-one basis to ensure that people say what they really mean! The interviews are semi-structured which means that we will create a script of questions but will happily allow people move off-track.

The interviews aim to gather opinion on the site’s user base, weighting of content, issues and opportunities.

Work together

Though we are usually brought in as experts to consult on this type of process it is imperative that the client is involved at every step of the way. This is because one of the purposes of the exercise is information gathering. For example, creating user personas based just on stakeholders interview input may miss something that discussing/reviewing with the web team would not.

Create the document

What we are trying to do is record all findings in a manner that can be used as a basis for all the work to follow – IA, design, copywriting, build etc. In other words – create a list of requirements for the new site and give them an order of priority.

It needs to get into detail to be useful. A recent review we carried out contained over twenty specific opportunities for the site, which target audience groups each issue related to and how the site could deliver each opportunity.

This was coupled with a detailed list of requirements per audience group – 25 audience groups with over a hundred requirements. The requirements we also graded for importance into ‘must haves’, ‘should haves’ and ‘nice to haves’.

Back to top

Paul’s corner: Spending your training budget

I recently received a question from Harry asking “what approach do you take to training?”. He has some budget set aside and is wondering how he should spend it. As I am always keen to spend other people’s money this seemed the perfect subject for me to talk about… read keeping your skills sharp.

Training course give away

While I am on the subject of training, the guys over at Clearleft have two training courses coming up on January the 24th and 25th in Brighton. The first is CSS mastery by Andy Budd and the second is Bulletproof AJAX by Jeremy Keith. If you would like to attend but cannot get your company to produce the £345 + VAT for the early bird fee then I might be able to help. I have one free place to give away to either course (your choice) for a lucky random winner. We will announce the winner on our Christmas special so entries need to be in by Friday 14th of December. Just send me an email with your name and contact details with “clearleft competition” in the subject line.

Back to top

Ask the expert: Roo Reynolds on virtual worlds

Paul: Okay, so joining me today is Roo Reynolds who is a meta verse evangelist for IBM, Its nice to have you on the show Roo

Roo: Hi Paul,

Paul: What on earth is a meta verse evangelist?

Roo: That’s a good question, I guess a meta verse evangelist is someone who helps people understand the very exciting and confusing area of virtual worlds.

Paul: Ah, virtual worlds. Now the people listening to this show might be thinking what has that got to do with web design, why have we got someone one on here talking about virtual worlds and I am quite happy to admit that that’s not our normal fair. Its not what we normally cover on the show but I wanted to get Roo on partly because um, well to be frank we grew up together didn’t we pretty much

Roo: we did we were family friends for many, many years

Paul: yeah, which was very bizarre to then discover the he is a kind of world authority on virtual worlds. so that sounds very dramatic doesn’t it

Roo: A thought leader?

Paul: A thought Leader

Roo: I remember inheriting your old star wars toys Paul

Paul: There we go, So I set you of on a good direction in your career by getting you into Sci-fi early. I am now taking all of the credit for all that you have achieved since then.

Roo: Its all thanks to you (giggle)

Paul: yeah (hahahaha) Well um, but I though it was quite interesting. I was doing a presentation where one of the things I wanted to talk about in this discussion was upcoming and emerging technologies and how they would affect things and I wanted to talk about virtual worlds and realised that I knew absolutely nothing about them so I gave Roo a call and we had a chat on the phone. Then I got educated so I figured I ought to pass on that education to everybody that listens to this show so that’s um, a bit of the background. So lets kick of the with the first questions. So what exactly are virtual worlds and why do you think there is so much hype surrounding them at the moment there has been lots of talk about, you know, things like second life and that kind of thing. Perhaps if you could explain them a bit, and explain why there is so much enthusiasm about it at the moment

Roo: yeah I can try. So I guess I can ask you to think about it. as it a good an example anyway, probably the most popular example of a virtual world. At the moment. So these are things which are kind of digital online environments or as some people would describe the as multi-user virtual environments its that kind of online social space. So to the untrained eye they might look a lot like game but there are no game elements inside virtual worlds or rather there are but they exist within the broader world. So something like second life doesn’t really have any point there is no final point no enemies to kill there is no “x” level to achieve its just a world and if you want to inhabit that world and build a shop or you want to habit that and be an explorer and wonder around finding interesting things and talking to people then that cool as well.

Paul: Hmm, I mean the immediate thing which comes out of that is well, you know, what is the point. Why do people take part in virtual worlds and what kind of ways are people using them

Roo: Yeah, there are a lot of different answers to that, almost as many answers as there are different people really so as in the real world there is not point. people make up their own point they decide that the are going to make a lot of money or they are going to be an artist and be well known or open a sex shop or whatever it might be and people will have different personal goals which they set themselves. So really any goal is a tangible thing that people will almost determine for themselves

Paul: So I guess in many ways its like the web itself it’s a tool and how chose to use that tool is largely up to you

Roo: Yeah exactly. And within that you will get lots of different things, I mentioned some, you will also get games within that so people play chess inside virtual worlds and people do all kinds of crazy things. Yeah I guess the answer to your question is really why is there so much hype about them, its because over the last 12 months or 16 months or so the press has been covering this is quite a bit way. That turned it into a kind of hype feeding frenzy. Garner had a very famous prediction about how 80% of active internet users by 2011 I think it was will be using virtual worlds and will have an avatar. Not necessarily in second life but in a virtual world. And all of this make people realise that this might just be the next “big thing” its gone from being the kind of space where people will, I don’t mean this in any derogatory way, everyday people will would hang out in to becoming a space that a lot of big companies and small companies and advertising and marketing firms are really getting interested in. You know we have all seen “the web” in that ,very early in my career, was the web being picked up by corporation and some people almost missed the boat and had to catch up later on

Paul: So Why do you think this is going to be the next big thing? Why do you think a virtual worlds are going to be you know, you talked about how some companies had to play catch up on the internet you almost imply that this I going to be as big as the internet is. Did I miss interpret that or do you really think its going to be incredibly significant and if so why?

Roo: Well, I think it is always going to be a subset of the internet, you know, this is just another communications media and its probably will remain a subset of the web. There will always be a place for flat 2D content, But once you start getting into 3D social stuff and giving people a real time opportunity to relate to each other and see each other and this sense of presence where you can see what the other is paying attention to. For me joining a circle for the first time, a circle of people talking and I walked up to it, and you know people took a step back to invite me into that circle. That was a really compelling moment to me. It was also a real eye opener that the “real world etiquette” that we see in society all the time actually was playing out for real in this virtual space as well. In terms of why it might be the next big thing a lot of different elements are coming together at the same time here, we finally have, almost complete availability of broadband, certainly in this country and in the west. We have got fairly powerful machines now that have 3D graphics accelerators and sound cards, this is something which is now also happening in corporate environments as well as at home. There is kind of a point in time where the… someone might describe it as a tipping point where there is this lot of interest and we have seen this massive press interest, but also big companies getting involved, you know when you see Sony with their playstation home project which is going to be like a lobbying environment for the playstation 3 its been delayed a little bit, but that is really the kind of mass Market application for virtual worlds and it is things like that which really opened my eyes to where this might take is. This is not going to be a niche thing with a few geeks hanging around and some would argue that it has never been that. Really virtual worlds have been attractive to creative people and to the people who feel like they want to kind of express themselves and share things, Its not full of 16 year old boy with glasses sitting in their bedrooms and really there is a difference between games, traditional online games and Massively multiplayer online role-playing games And a space like virtual worlds that allows them to be attractive to the mass market . So yeah I wouldn’t say it is going to replace the web or even be the largest portion of the internet. But there is certainly a growing space for these virtual worlds

Paul: so what, I mean, I can understand how some people are maybe making money out of being involved in virtual worlds where, I don’t know, where they are creating things which they are selling inside that virtual world, but what about other companies, how are larger organisations using it. For example, how do IBM use it?

Roo: well, we are maybe quite weird in because we do an awful lot in virtual worlds. We do everything from recruitment too employee discussions and meetings. although of course we cannot use a virtual world for confidential discussion, we certainly have the types of meetings we would have in public spaces, like conferences, we also have virtual facets to real world conferences like forties a really big conference we run, and we had that for the first time happening in second life running in parallel to the real world event so people who could not make it to the real world event could at least attend. They could see and hear some of the presentations and they could mingle and network. So like I said we are a bit weird in that in that we do so much, that’s partly because we are such a big company. Now a lot of other people would look at it and say they have a very particular need or desire, something they want to get out of it and for some people historically it has been marketing, or advertising, it has been to reach a wider audience or to reach them in a different way. Which is more playful and allows them to be really participants rather than just eye balls

Paul: yeah, I mean one thing you said was earlier was that you referred to virtual worlds as a subset of the internet and the web. Its another that that going on online. One of the things which strikes me is that if you do something, in something like second life, say if you run a conference that conference is kind of just fenced into the second life world so its not going to get picked up by search engines, its not going to be very accessible and things like that do you think that there are going to be changes in that, do you think there will be more crossover between virtual and maybe the more traditional web

Roo: yeah absolutely this is one of the areas that really excites me at the moment, this whole area of interoperability and that needs to be not just between different virtual worlds but also between the web and virtual worlds so this idea of the virtual universe sort of thing as a virtual world or virtual worlds is something that IBM even throws this term 3D internet around quite a lot. In a kind of evolutionary next step when you look at virtual worlds today they tend to be proprietary walled gardens and actually a lot of people would compare them to AOL in the mid nineties but actully when you start thinking about how they may interconnect, and that inset just moving your avatar from world of war craft to second or habbo or whatever its actually much more interesting than that. Its things like bringing you wallet with you your friends list with you being able to blur the lines between virtual worlds and bring content in from the web and share content back out to the web, these things are beginning to be possible and in some ways one of the reason I think second life is so successful because it does have the ability to make request to web content and bring that in so you have dynamic stuff going on. But that is still very early days and I think that we will probably see a massive focus and in fact the big conference in san hosa very recently where this came out in a very big way but a lot of companies will be wanting to get together and its very, you know the will is definitely there to have a real focus in the next few month on interactivity

Paul: I mean so, I am kind of very aware this for many of the people listening to this show that are kind of a mixture of designers, developers, you know, people that are running websites that a lot of this is very theoretical and it is not something they would be directly involved in at the moment. I mean do you think there is anything that they should be doing, that they should be aware of when it comes to virtual worlds. Is this an area you think they should be keeping an eye on or doing anything actively.

Roo: Yeah, I guess most people I talk to even if they are not going to rush out tomorrow and buy some space in some virtual world and um, you know its not for everyone. But most people who I talk to at least want to stay informed once they have got that hook in their head that this is, you know, I obviously find it very interesting but people tend to come away with the a sensation that this might go somewhere and there is enough evidence already today that its fairly compelling, if you look at it on the “garnet height curve” this idea that things go though a life cycle of interest it haven’t yet peaked the top of that and it is now falling back down into this trough of disillusionment in the long run what might happen it might reach the stable plateau where it will actually become a really useful space that interesting work will happen and kind of follow the same progression as so many technologies before it. Most people come away with the feeling that they want to keep an eye on it. Now I guess if I am going to step back a little bit and look more broadly at what is going on, on the web then for web designers and for almost all of them, this is very big on their radar the whole area of social online collaboration and this whole “web 2.0″ umbrella which you started talking about a year ago if not longer and has been you know really quite large for me, that fits very neatly into this same space. What you are talking about are people sharing content and whether that is a a chat or something they have built themselves you know, you look at a world like second life and most of it is not built but the company that runs it. As with youtube and del.icio.us and as with flickr and so many other popular services and site these days, it is built by its users. So maybe it is something people need to be aware of maybe its something which will gradually fit into a growing mentally of this is how the web works. Yes it happens to be 3D at the moment on the popular ones and yes they are not all currently delivered through websites, mind there are plenty that are, and there probably will be an increasing number that are delivered though the browser. So yeah, if people find this stuff interesting then they should keep an eye on it, maybe read a bit more about it.

Paul: Where is a good place for them to go then to wrap up, as far as if they want to find out more information or want to read up about the potential of it, where would you recommend they start by looking?

Roo: well there are a lot o very good blogs out there, if they have a very academic mind then they and want to read some really good writing on the subject then the best one I can think of is http://terranova.blogs.com/ , its one that I have guest authored for, but not the one I regularly write for, the one I regularly write for is http://eightbar.co.uk/about/roo, which has got a growing profile in the space of virtual worlds, That is written by a bunch of IBMers writing about what they find interesting. I have a personal blog a personal blog at http://rooreynolds.com if anyone wants to follow that although, please don’t all come at once

Paul: (Laughs) its really not that popular out podcast that it would…

Roo: no you are paul, you wouldn’t know how popular you are, but you are.

Paul: That’s okay, Thank you very much for you time , I think it is interesting we spend so much time on it with the immediate here and now problems, but every now and again it is nice to poke out heads above the parapet and see what is going on a bit further afield; so thank you very much for time coming and being on the show

Back to top

Question of the week

Do you think virtual worlds are going to be a mainstream method of online communication or are they a novelty doomed to failure? Answers in the comments.

Ongoing role of a website manager

Although there is a general acceptance that a website manager is required to “make the site happen” (as in go live) there is little or no conception in many cases that there is an ongoing role there.

Many organizations and individuals simply underestimate the enormity of the job faced by website managers/owners, failing to grasp that it is an ongoing commitment. It is our job as web designers to make clients aware that running a website requires somebody to be responsible for it over the long term. Every website requires a website manager.

This lack of understand about the role of website manager probably explains why it is often a fairly unrecognized position despite the fact that the website itself is considered an important asset. Although there is a general acceptance that a website manager is required to “make the site happen” (as in go live) there is little or no conception in many cases that there is an ongoing role there.

It is almost as if there is a “build it and it will run” mentality, where the organization fails to grasp that a website manager is needed throughout the entire lifecycle of a website to ensure that it evolves and remains successful.

A good website manager need to be constantly fulfilling three roles…

  • Evaluating site objectives
  • Refining the site
  • Promoting the site

Evaluating site objectives

A website manager should be constantly evaluating the objectives of his website and asking if changes need to be made to its overall vision and direction. This kind of assessment does not need to occur on a daily basis but should be done at least every six months (more often if things in your organization move quickly).

These reviews should consider questions such as:

  • Have the underlying objectives of the website changed?
  • How is the site performing against its success criteria and do those criteria need to change?
  • What is the competition doing and how are we performing against them?
  • How has the target audience changed and what response are we getting from them in regards to the site?

Refining the site

On a more practical level the website manager should also be refining the site in response to changes in these objectives. If the success criteria for the site are not being met, then steps need to be taken to address the problem. Equally, if the competition is luring away your visitors then the site needs to be altered to encourage them back.

This continual “tweaking” of the site can manifest itself in three different ways:

  • Changes to the front end interface of the website
  • The addition, deletion and editing of written content
  • The introduction of new functionality

For example a luxury holiday booking service might respond to increased competition in the sector by adding a flight price comparison tool to the site (new functionality). A tool like that is very appealing to some users and will draw them away from the competition. Equally, they might look at adding regular reviews of existing destinations (new content) to encourage users to keep coming back. Finally, they might refine the design based on user feedback to make it easier to navigate and improve legibility (changes to design).

Responding to user feedback is often the best way of refining the website, which is why ongoing usability testing, polling and analysis of site stats is so important.

Site promotion

Although it is possible to get online marketing specialists to help with the promotion of a website I have seen some organizations fail to allocate budget to this task. As a result it often falls to the website manager to pick up the promotion of a site.

Site promotion needs a definite ongoing commitment. The number of visitors coming to your website will slowly decline if you do not actively promote it.

You can promote a website in a number of different ways.

  • Offline promotion – Offline promotion includes letterheads, business cards, signage, phone systems and other marketing collateral.
  • Email marketing – Email can be a powerful marketing tool to drive new traffic but also a good way of encouraging existing users to return to your website.
  • Search mechanisms – Search mechanisms are more than good placement on Google. It also includes pay per click campaigns and social networking tools.
  • Guerilla marketing – Guerilla marketing is a catchall term for lost cost marketing methods. It includes techniques like forum speeding, viral marketing, blogging and even podcasting.

Site promotion requires more than mere lip service. It needs dedicated resources (either internally or externally) on an ongoing basis. It is important to decide early in the process who is going to be responsible for this work.