Back to top

XHTML 2 is dead, long live HTML 5

The big news this week is the W3C’s decision to stop development of XHTML 2 so that more resources can be put into HTML 5. In a statement the W3C said…

Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML.

Although I am no expert, this strikes me as a good decision for two reasons. First, the two ‘flavours’ of HTML was causing confusion. The overlap between the two was significant and they lacked distinctive roles. Second, HTML 5 has gained significant momentum in terms of browser support and community engagement. XHTML 2 on the other hand seemed to be floundering with little movement from the working group. According to Bruce Lawson the decision to drop XHTML will make little difference to most developers. However, one can at least expect to see an acceleration is the adoption of HTML 5 and hopefully greater support by browser manufacturers.

Designers tools

I spotted a twitter by Paul Annett this week that is worth mentioning. It was a link to a collection of Photoshop files containing UI elements for each major browser. The files contain browser windows, dropbox boxes, radio buttons and other user interface elements. This is extremely useful to any web designer mocking up a web page, and saves having to screengrab and isolate each element manually. However this resource is just one of many available on the “Designers Toolbox“. Other resources include…

• Information on different browsers ‘web safe areas’
• HTML character encoding
• Standard web banners sizes
• iPhone GUI Elements
• A list of web safe fonts
• Lorem Ipsum Generator

It also has a load of additional resources for print based designers. It is an impressive site and definitely worth checking out.

Inspirational about us pages

Smashing Magazine have released Best Practices for Effective Design of About Me Pages. The post first caught my attention because “About Us” pages are so often neglected. As the article says…

The “about me”-page is one of the most overlooked pages in development and one of the highest ranked pages on many websites.

I get the feeling most website owners don’t really know what to do with this page. They feel obliged to have it because everybody else does, but fail to really understand its role. Unfortunately I am not sure that this article provides any answers. It focuses on the “About” pages of web designers rather than more general websites, and also shows a lot of examples while providing little in terms of ‘best practice’. That said, it has some stunningly designed “About” pages and so is definitely worth a read. They really are inspiring and will make you long to redesign your own “About” page.

Password Masking

Why is it that as human beings we have a tendency to accept the status quo? Even if we think something is a bad idea we often fail to speak up because it has always been that way and ’surely there must be a good reason’. One example of this for me is password masking. This is the practice whereby content entered into a password field is blanked out for security reasons. Although I can understand the logic of this it has always struck me as a significant usability and accessibility issue. However, despite that I have never actually challenged the practice. Fortunately Jakob Nielsen has in his post ‘Stop password masking‘. He writes…

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures. Password masking has become common for no reasons other than (a) it’s easy to do, and (b) it was the default in the Web’s early days.

I couldn’t agree more. I believe the security concerns are massively over rated and the usability issues largely ignored. Unsurprisingly Jakob has come under some criticism for his cavalier attitude towards security. Christian Heilmann writes…

As a frequent traveller I am constantly seeing people logging into web sites in hotel lobbies (when they check in for their flight for example and enter their bonus miles account details), in Internet Cafes or when they use their laptop in a public space.

However Jakob addresses this when he writes… Yes, users are sometimes truly at risk of having bystanders spy on their passwords, such as when they’re using an Internet cafe. It’s therefore worth offering them a checkbox to have their passwords masked; for high-risk applications, such as bank accounts, you might even check this box by default. In cases where there’s a tension between security and usability, sometimes security should win. Again I agree with Jakob. Too often password masking is used without thinking. When a user registers for a site that contains little personal information and no financial details, why should they have to enter the password twice simply because they cannot see if they typed it right the first time! Its absurd.

Back to top

Paul: OK So I have Leah Buley today from Adaptive Path. Great to have you on the show Leah, thanks for agreeing to come on.

Leah: Thanks Paul I am excited to be here.

Paul: So I heard you this year at South by South West(SXSW) talking about UX teams of one, which I have to say, was the highlight of my SXSW. I am not just sucking up it really was the most enjoyable one

Leah: (laughs) You might just be sucking up but I will take it. I will take it all in.

Paul:Yeah just take it , just go with the flow. So the reason it was so erm inspiring I think from my point of view was that the company we run Headscape was for a long time a distributed company and we then came together and started having an office, but I don’t think we have really got our heads around the advantages of all being in a office together. So all of your talking about brainstorming and stuff like that was hugely, kind of blindly obvious but revolutionary at the same time. It was a light bulb moment for me. So thank you very much for that.

Leah: My pleasure. Paul. So I thought lets share some of the stuff that you covered at SXSW with the listeners of Boagworld because I know there is a lot of people out there that em maybe are open to a new approach to the way they are handling design and User interface, usability and all that kind of thing. So lets kick off by talking about and perhaps defining design as you see it, because you obviously don’t see design purely as the aesthetics of a site, and as you were talking you obviously had a much bigger role in mind for what you would consider a designer so tell us a little about that.

Leah: yeah, well actually the first caveat I should make is that I am not a trained designer,

Paul: OK

Leah: I have an information science background and have done years of work as a developer so you should take everything I say with a grain of salt. But I think what is interesting from my perspective is that a lot of people in our field are not actually trained designers but they are doing design work.

Paul: yes

Leah: So recognising that and understanding essentially there is a process to design and how anybody can do it is an important thing and for me the way that I would define design is basically anybody who is taking a known problem and consciously reframing it, often with the use of constraints. So in my mind design is much more a process as whereby something new emerges as opposed to outcome that somebody produces. The designer or the role of the designer, anyone who does the design is to shepherd that process basically.

Paul: hmmm Yes This is kind of a complete tangent really but it was something that came up in your talk and I was fascinated by it and wanted to know a little more about it. You talking in your presentation about Forrester CX model ? Which I had not come across that description of it. I had heard of kind of a similar approach used in sales as the sales approach, but could you explain what that model is and why you brought it up in your presentation.

Leah: Sure yes , it’s a report that Forrestor’s put out called the customer experience journey it is written by a guy named Bruce Temkin who actually has a excellent blog called experience matters where he writes a lot about user experience, from the kind of business person’s perspective so check it out if you haven’t already. The interesting thing is that Bruce has written a lot about experience based differentiation for companies, which is basically just the idea that you have a better user experience you therefore have a better product and evidently his writing about his experience based definition has been one of there most popular reports, which sort of suggests that executives recognise customer experience as really critical to their success and that many of them are many of them are offering a sub-par experience right now. So then in this customer experience journey Bruce essentially explains how an organisation can build a strong customer experience practise and the report has a lot of recommendations about a corporate culture and employee training and how to deal with trade offs, but in particular there’s a sort of a model that describes five steps for the evolution of customer experience in an organisation it’s great, it’s like it’s beautifully simple but it is also deceptively simple at the same time.

Paul: yeah

Leah: The five steps are, er the first step is interested basically so at that point the customers organisation is aware that user experience or customer experience is something they should be thinking about, but they have not really done anything about it yet. The second step they get invested, which basically means they hire somebody to do some work, this tends to be someone that is at a pretty low level. At the third step they become committed, which means they have someone who is an executive who has responsibility for the outcome of that user experience work. At the fourth step they become engaged at a very high level sort of a organisation’s initiative level user experience is a priority and then the fifth step the nirvana of customer experience is that they become, it becomes so embedded into the fabric of the organisation that it is kind of like the first principles to everything we do it does not have to be explicitly called out like a project team to make the website more user friendly or a project to make our products less funky to hold or whatever.

Paul: hmmm

Leah: So emm that’s the model so it fascinates me and kinda frustrates me a little about it is that it makes it seem so linear like you can just put one foot in front of the other and eventually over time you will reach step 5. I think there are different stages that are tricky for different reasons, the leap from having lower level user experience people to executive user experience people can be awkward for organisations for a lot of reasons and what I have seen just on my personal experience is that companies have, it is not like they start out with one user experience person and then it grows and grows and grows and then ends up they have a team what happens is they have kinda epics in the approach to user experience so sometimes it’s big and they will hire big staff and in lean times or some executive goes away the staff will shrink and then some other champion will come along and he will want to bring it back. I have been in situations where I am a user experience team of one or even when I am on a team of professionals and you learn that there was a user experience practise several years ago and then it went away and it is like discovering cave paintings or hill dwellings or something and you realise there have been other people that have come before you and you are like why did they go away what happened? So that leads to like a really core belief I have about user experience practise which is that it is not built by delivering killer projects and sort of building on top of killer projects one by one but it is built through relationships and patience and mutual respect over time and that it is about really erm sort of investing the time to actually get to know the people who need to work with you as a user experience professional investing the time to understand their concerns and their objectives and to take those things seriously and to work with them as a designer to facilitate them achieving their goals as well as you achieving your goals. I know that is touchy feely but I think it is in my personal experience that that works well, has worked well for me.

Paul: I think it is very true as well I mean I think there will be a lot of people listening to this interview that maybe er you know feel like they are stuck on one of those stages and can’t progress things and can’t move forward. Whether they are responsible for their website within the organisation, whether they are a internal web designer or something else. And it is very easy to become kind of bitter and angry and become the no person within the organisation that is constantly you know fighting against the system but actually building the relationships is the best way to move things forward and you know I do a lot of work in large higher education and public sector organisations that have huge amounts of bureaucracy and it is ultimately the relationship and carrying people along with you that enables you to do things and move things forward.

Leah: Yeah. I absolutely agree and I think it is particularly interesting talking to you as someone who has worked in big bureaucracies because they are the hardest places to do it I think, it is just the bureaucracy itself can add an extra layer of frustration that is on top of the initial frustration that I think we often feel as user experience people just trying to communicate why this new area is important. So it is very easy to get embittered, yeah if I think of my own personal experience I have seen that too and the trick is to make yourself feel a little less alone and the challenge for that is if you are user experience team of one, and you do not have a big group you don’t have colleagues who have the same experience as you, you kind of have to find a way to find a way to make friends with the non user experience people that you work with and turn them into colleagues and turn them into allies and that you do through soft skills much more than design skills on some level. I think the dirty secret of design is that it is fifty percent soft skills and then the rest is design and if you can learn to listen well to people and ask more questions than you answer and I don’t know be a fun lunch date I think those are the sort of things that will serve you very well in this line of business.

Paul: Yeah, totally agree it is really interesting to hear you say that because yes, really good really good. Let’s move on before I start ranting about that particular subject. Ermhmm lets talk about Adaptive Path and the process to design that you guys take. Obviously you guys produce some superb work and I am really interested in the little glimpse you gave us in your presentation at South by of that process and how you go about doing things so maybe you could try and summarise that for the listener.

Leah: Yes of course. Well in a nutshell it is a mess it is just a total mess and I am serious about that it is a messy process and that’s part of the magic er but actually, when a little secret of Adaptive Path is and it’s design process is we do not have a set design process unlike some other companies in this field who you know often have like the discovery and then the research and whatever phases. We don’t really have a set process we what we kind of do is custom design each project to match the problem that the customers have but even so I think must projects tend to involve at least three things in some kind of configuration to one another and those three things would be 1. Trying to understand the business environment in which the project has to succeed 2. Trying to understand the user’s context in which the product is actually going to be used in the end and the third part and the thing I talked a lot about at SXSW the design exploration and when I say exploration I use that word very deliberately because we try to treat it er as a process that has to widen before it can get narrow, we try to sort of approach design as actually as a erm exploring a new field essentially but in terms of those three prongs understanding the business problem tends to be really just a lot of honestly trying to ask the hard questions of our customers in a way that will help them to be open to the answers. One of the kind of philosophies of us t Adaptive Path is that we encourage our clients to reframe or rethink everything and so that is a really great foundation then coming back to them and saying in terms of the design approach we are going to take we are going to really explore wide, really broadly and present to you some ideas that maybe push further than you would be thinking of pushing right now but we do that so we can potentially adjust those ideas for the things that are the right size for the constraints and the objectives you have right now. So the design exploration, that particular process we tend to . It is pretty basic we tend to start out and force ourselves to actually spend some dedicated time coming up with lots of different ideas and obviously that is informed by user research which is the second item that I mentioned. We try and start by going into the field to observe users and in context and get as much information as we possibly can about not just what they want to with the product but also the circumstances of their lives at the point at which they are going to use the products because one of the things we find that people are always more distracted and busy and multitasking when asking them than they think they are. Understanding the nature of that helps us to say OK now we are going to sit down and explore the designs for this product what are the constraints that we know our user has and our business has and then the constraints become just a useful device in sort of the process of design exploration hmm in that you can say well if we know that the person who is going to be using this product will also have four other applications open on their desk at the same time or fourteen other applications or forty how do we design something that is optimised as for minimal attention or for is optimised for quick hit interaction so then that little nugget becomes a thing to design with. So lets design a screen that is the ideal starting point for somebody that has ten seconds to do anything but the trick is that you can’t just let yourself stop with those known constraints, you can’t just say we have designed the screen for ten second interaction so we are done with it. If we are truly delivering on our promise that we are helping our clients rethink everything we need to explore beyond that we need to explore more widely beyond that so then we use a lot of other devices that kind of help us to brainstorm in really different ways. This is kind of a funny example but I will bring it up because it illustrates nicely how different kinds of tools help you brainstorm in different ways. We did a project not long ago where we wanted to rethink mobile devices and how we work with them in the world and so in order to force ourselves to rethink that we actually did an exercise where we went out into the world with different kinds of physical objects that were not shaped like mobile phones. They were shaped like pencils and magnifying glasses and wire whisks.

Paul: OK Leah and pretended like those things were mobile phones and imagined what we would possibly want to do with something like that and it is just great because these simple devices would help you to re.. to just forget your assumptions, we have some many assumptions about what a thing has to be and the trick is as a good designer is to force yourself to erm break those assumptions at least for a little bit of times so you can allow your creative process to suggest new ideas to you. Paul. It is really interesting it is fascinating to hear that you are doing that kind of stuff but I am sitting here thinking there are going to be people listening to this show that their design process may consist of you know understanding the business objectives, understanding the users needs and putting a bit of time into that and then they launch Photoshop or fireworks and they are sitting there and they do the design.

Leah: Yes

Paul: and your coming along and talking about going out with whisks and you are talking about coming up with loads of ideas and they are just thinking that is so divorced from the way they are currently working that is this kind of quite hard to imagine that transition.

Leah: Well I don’t think it has to be and that’s what’s interesting and that’s what I tried to talk about a little at SXSW which is that you may not be on an adventure to re-envision the mobile experience but that there are some pretty basic techniques that we can employ even when we are sitting at our desks, even when we are in front of our computers to help us think more broadly. So some of things I have talked about they are really basic they are almost like hacks you can think of them as design hacks if you wanted to 1. Is essentially stealing ideas stealing inspiration from the visuals, sort of visual sources that you encounter everyday so one idea that I really believe very strongly in is keeping an inspiration library

Paul: Yes Leah So if you are using the web and you see something that is an interesting design to you take a screenshot of it and put in some place where you stores those things and then when it is time to start designing flip through that thing flip through your inspiration library and see if there is anything that kind of inspires you in a way that you wouldn’t expect. If that is not on the level of taking a wire whisk out into the world to redefine a phone but if your designing a kind of news portal and you happen to see a guided wizard that, you know screenshot, that has some real interesting kind of treatment of help information and then you realise oh call out boxes could really work in a real interesting way in my news portal that’s sort of the level of forcing yourself to think in a different way or more broad way I also think that just playing with word association is actually so kind of beneficial and talking about what do we want this thing to feel like, or what if it felt like this plus that and then actually just doing a quick sketch of what that would actually mean or look like. The interesting thing is that I have worked with classically trained designers who would probably most certainly call me a design hack but who would say there is one kind of optimal way to design a webpage or design a sort of software that essentially takes the top priority into consideration then the second kind of priority and then the third priority and then lay out the page accordingly so people notice the top thing first and then the second and third thing. But I think the way that metaphor kind of works on us as human beings is actually much more interesting and it can create it can make the experience of using a product or a website feel like something really pungent that is not just actually about information processing it is about a user experience. Ermhmm at the IA summit Cindy Chastain a Information Architect based out of New York city did a presentation on using themes in design and the way she described these themes was basically that you sort of create a little story or create several little stories for what we design could be about and that depending on the story you take the way that you actually design that thing will be really really different. The example she gave is that she did a website for a woman who wrote all of these soap operas in the United States that a soap opera that has been popular for decades and decades she was the primary writer on it and the website is for fans of this soap opera to go and see all of these you see all of these pre-recorded old recordings of the soap opera but in figuring out ermm what experience they wanted to provide for this product they created three different themes and one theme was like the story of a writer and which was basically about the woman who worked the soap opera and the other theme was a love affair with a soap opera which is basically about the fan experience and the third was like forty decades of television or four decades of television which was basically about the TV creation process. Depending on which theme or story you were to go with would create a very different design. In fact they did pick one design that ended up being very specific and tangible and allowed them to design for a really meaningful metaphorical experience for the people who used it but you have to imagine as a end user going into a website that tells you about the story of a writer is going to be very different from a website that tells you, that immerses you in the feeling of being a soap opera fan and I think when I and so I love that example because it shows really nicely how just choosing metaphors and choosing inspiration and choosing examples can encourage a whole world of brainstorming in various possible directions.

Paul: I recently warmed very much to this principle of generating a large number of ideas and the idea of stepping away from the computer, and you have talked about having sheets which forced you to do like six wireframes, like different mock-ups on a single page and you talked about overcoming that thing of running out of steam, like you know I have done two or three designs now what do I do, type of thing. So all of that was really interesting and the idea of including other people in that process so you are not working in isolation and I went back and we did this. We sat down and got er a developer in the room and I got a project manager, I got lots of different people in and we did this and we had a really productive day and got loads done and then it occurred to me that I got five people sitting in a room for a day and that is five man days worth of work.

Leah: Ahhhh

Paul: And you suddenly go crap that is out of our budget that’s a lot. You know it suddenly meant I started going into the practical mentality is a cost effective way of doing things and should we be working like this. I am interested in you thoughts on that.

Leah: Yeah Well it is interesting I hear this concern a lot from people and I am fascinated to hear that you did it and that you did it for a day which I want to hear more details about that later on but I think that the thing is it does not have to take a day and I think that the concern that it will be a vast investment of time for everybody isn’t isn’t .. it is a real concern but I think it is something that can be managed. I have actually had some pretty productive workshops that are an hour long or two hours long and that’s if you round five people for you know an hour or two it is obviously still five or ten hours it is not a week of man hours necessarily. So I think you actually need to be very careful about scheduling sessions that are fixed in time and have clear goals and end points, and just to constrain it a little bit. I actually personally believe that constraining time is another benefit in the brainstorming process. Particularly when you get people that are not necessarily used to being usually involved in designing it can be very scary to jump right in developing ideas and hard actually so I think what happens in a group like that, is people like to think about the ideas for a while and then maybe one thing and get warmed up have a cookie or muffin or something and they feel like they are more casual and they will start sketching, you do not need that time that is just road clearing what you can do is you can give them structured activities that will get them to put there ideas on paper immediately and that will have the same sort of net effect. When we do workshops with folks we do these sort of template based workshops and we give them literally five minutes or seven minutes to sort of sketch out all of their ideas and maybe we will do a couple of rounds of that but the beautiful part is when you have five minutes you don’t even have enough time to think what it is you want to do you just start drawing..

Paul: Yeah

Leah: and it sort of it circumvents the throat clearing that happens in the sort of longer meetings erm and templates I think are really helpful actually in those workshops particularly because people are funny you know we really like to accomplish tasks, if you put something in front of us kinda well defined and has a clear end point I think our impulse is to just do it and kind of get it over with. So if you give someone a template it helps them to sort of say like draw an idea for say what you think should happen in the system explain what the important aspects of that idea are and tell me another product in the world that it is kind of like erm and then you tell them they have five minutes to do it you will be amazed how quickly people can crank out a lot of ideas and then you do a couple of rounds of that and it’s erm in a structure like that that you can really get a lot out in a hour or two hours.

Paul: I mean yeah you have hit the nail on the head there we made, you know the first time we did this we made a lot of mistakes and there was a lot of kind of oh I don’t know whether I am kind of comfortable with this, there was a lot of preamble kind of thing and also we just got tired out. You know there is only so long that you can do something like that. Now admittedly along side that we were doing things like, it was kind of a kick off meeting as well and we were kind of introducing the project to some of the people in the room and that kind of thing but to be honest putting it all together in one big meeting was too much we would have been better of splitting that over a period of time, there were reasons why we had to do it that way because one of the guys isn’t local and he was down but it did kind of get me thinking about this you know the amount of time but like you say if you have structured activities and you set time limits on it then actually that is beneficial yeah

Leah: But also I think actually it is probably important to acknowledge the point that you make that there is time commitment in working this way and it is not like, it is not like you can squeeze it in and still do everything in the way that have already been doing it, it’s there is an actual time commitment to doing it this way. We often at Adaptive Path can do week long design sprints where we essentially we do a lot of the brainstorming activities that we have been talking about in this conversation in the first part of the week and will actually produce wireframes by the end of the week and it is really aggressive and it’s incredibly productive and brings us a lot of work but you cannot do anything else during that week there is just no way. So you sometimes you have to make time move quickly.

Paul: Another thing is ultimately you get the time you are investing back in things like having a developer sit in the room is going to avoid problems later down the line where you know …

Leah: yeah

Paul: where he suddenly turns round and says hang on a minute you have come up with this is the design and we can’t implement that or there is something suggested at these early stages but because the project manager is not there it gets lost in the system and all the rest of it. So I think you know it just feels like a lot up front is the best way of describing it.

Leah: Yeah and I think it is important, you know if you are a team of one in an organisation or where you do not have a lot of support as the user experience and where they may not have a lot of erm comfort, your colleagues may not have a lot of experience or comfort or familiarity with design it is important to go just sort of take baby steps with them with this stuff. I think that you rather than coming in and you are there for a little while and you realise this isn’t quiet working lets change everything and have a two day off site and get the executives to support all this. That might be a little ambitious but erm what might be a little more feasible is to talk to the team and say I feel like there are some ideas we all have that er that maybe it would just be good to get out so that we can actually consider them directly and talk about what’s appropriate or not for the product, could be schedule a hour and half workshop I will structure it don’t worry you do not need to do anything just come with yourself and a pencil in your hand and I will give you cookies and it will be fun and that’s kind of like a starting point to get people ending up engaged in the activity and what I find is when you give people a little bit of a taste of it and they see it can be so productive they become much more enthusiastic about participating and making time for it later on. So particularly if anyone who is listening to this conversation is a team of one or is even like a freelancer with a organisation that they do not have an established relationship with I would say start out with baby steps and structure a workshop in a way that will actually help the participants to see the effects of it pretty quickly

Paul: So we have talked a lot about kind of generating a lot of ideas and you know certainly when we gave this a go we ended up with loads of ideas, erm So I think we need to end this interview by kind of going well now what? You have got this big pile of ideas how do you kind of refine them down into what you are going to actually use.

Leah: Yes, that is always the hardest part of the process actually and not at the same time I think what will happen is there will be a couple of ideas that will be really exciting and everyone will sort of know it. I do not know if that correlates with your experience but the trick is even though some ideas seem like wooh that is pretty cool or wow that would be kind of awesome if we built that it is a question of is that appropriate for the business needs that are driving the product, appropriate for the users needs and for that it ends up a lot of kind of compromise but in order to know where you make sense to compromise or where it doesn’t make sense to compromise it can be really critical to have a well articulated statement of what experience you are trying to produce.

Paul: yes

Leah: We use design principles at Adaptive Path which I know a lot of folks in the field use but for us we try to potentially create five to seven short succinct statements of what the experience of the product should be and doing that helps us to look at all those ideas and say, like this is the coolest most web 2.0 interface I ever saw but it does not support our design principle so it is probably out of the door. The key to the design principles are that they are not, it is not a statement of what the functionality of there system is, it is not like sort of brand attributes it really needs to be something that implicitly invokes what the experience is going to be like so like TiVo has some great design principles early on in the development of their product they created some statements of what they wanted their product to be and you can even when you use TiVo now you can really see a reflection of that. Their design principles were “it’s entertainment stupid”, “it’s TV stupid”, “it’s video dammit”, everything is smooth and gentle, no modality or deep hierarchy, respect the viewers privacy. These are all things they are not quite features and functionality although some of them allude to it, they are not quite brand statements although there is certainly a lot of brand personality expressed in them. They sort of describe what the experience of using TiVo should feel like and it kind so works well in that respect.

Paul: hmmm, excellent that’s been so useful I could carry in talking for hours about this particular subject, but that is certainly a brilliant introduction and I would encourage people to check out the slides that you produced for that presentation which are up on slide share if you search for UX team of one you will find them no doubt. Thank you very much for coming on the show Leah and hopefully we will get you on again in the future to talk about other related issues and we can start this whole conversation all over again.

Leah: That sounds great, thank you very much Paul, I really enjoyed it.

Paul: Good to talk to you, Bye

Leah: Take care, Bye now.

Got this question through from Andy Wickes:

I’m really interested in how you draw up a warranty regarding a website, and what you cover and for how long.

We are constantly plagued with clients expecting us to continue to support their site months after completion even though they refuse to pay a support fee.

There seems to be an expectation that a site should never develop a problem, never break when new browsers are released, and never cause issues even though we all know that sometimes issues arise from hosts that we end up attending to on their behalf.

I agree with your that the most vital thing is a firm agreement between agency and client at the outset as to exactly what each party expects from the other, but I am keen to learn what you expect to find in a ’standard’ warrarnty agreement, what is covered, what length of time is suitable as part of the build fee.

Slightly ‘how long is a piece of string’ I grant you, but something I know my team and friend find a constantly challenging topic!

We include the following warranty as part of all our contracts:

The Contractor warrants that all the Deliverables shall collectively provide the functionality specified in the Statement of Work. For a period of twelve (12) months from the date of acceptance by the Client of the final Deliverable the Contractor shall promptly remedy at the Contractor’s own cost any non-compliance of the Deliverables with the specification set out in the Statement of Work or such non performance of the Site.

So, in English, that means that we will fix any genuine bugs for free on a site that we have developed within twelve months of the go-live date. There are two key issues that can crop up relating to warranties.

Interpretation

Taking my last sentence as an example – what does ‘genuine bugs’ mean? If it’s a CMS job, then some kind of functionality defect such as a form not submitting properly would definitely fit that description. But, as Andy mentions, what about rendering bugs in new browsers? The legalese states that we will fix bugs “within the specification of the Statement of Work”. New browsers aren’t included in that.

That old adage ‘common sense’ tends to come to the forefront in situations like this. If the ‘fix’ will take a tiny amount of time and, at that point, you are negotiating another much larger project with the same client then giving a little slack probably wouldn’t hurt your relationship. However, you always have to make sure that the client knows that you are offering something that is outside of the warranty otherwise you could end up creating an expectation that it will happen every time.

Another recent example where we decided it was in our interest to fix a number of sites free of charge – that were all outside their warranty – was when early versions of our CMS became vulnerable to a security risk.

Though we could have insisted that the work we carried out was chargeable, we decided that having a bunch of broken sites was potentially more damaging to our reputation than worrying about chasing clients for the small cost of fixing the sites.

Expectation

The second issue relates to what a client expects of a warranty with an agency. There is a view, I believe, that a lot of clients see a warranty as a support agreement.

We have often had calls or emails that relate to CMS usage, for example, “I can’t remember how to input a news story on to the site, can you remind me”.  Again, in this type of situation, common sense should rule but if a client is continually asking support related queries or is outside of the warranty period then explain that you can either provide an estimate for the work they are requesting or that they may wish to consider setting up a support agreement where they can call-off your time more easily.

This can be occasionally met with a frosty reception especially if you are no longer working with that particular client but, you are not being unreasonable in any way. You are simply charging for your time like everyone else in business. To use an analogy, no-one likes paying to have their car serviced but equally, we don’t expect the garage to do it for free.

Summary

As with most things contract related, make sure that you discuss what your warranty means with your new client before you start work. Concentrate on the fact that it is not a support agreement and discuss the potential need for a support agreement.

Also mention that websites, like most things, do break sometimes and often this is long after a warranty period has run out.

Back to top

10 Tools to Improve Your Site’s Usability on a Low Budget

As we have said many times before on this show testing the usability of your site is one of the smartest things you can do. Usability involves making a website’s interface easier to use and simpler to understand, so that the user’s experience is as intuitive as possible.

However, many website owners do not carry out user testing because they perceive it as expensive and time consuming. When they think of user testing they imagine usability labs with two way mirrors, video cameras and expert facilitators.

Of course if you have listened to this show for any length of time, you will know it does not need to be that way. In a post entitled 10 Tools to Improve Your Site’s Usability on a Low Budget the Web Designers Depot outlines some of the ways you can keep costs and effort to a minimum.

The list of tools includes Silverback, Clicktales and Google Website Optimizer, all of which we have mentioned on the show before. However, it also includes several I have never heard of including: Chalkmark, Userfly and Feedback Army.

For the complete list and a review of each tool see the article.

Outlook 2010 and HTML email

The big story of the week is the campaign to fix Outlook 2010. This has come about because Microsoft plan to continue using the Word rendering engine to display HTML emails in the next version of Outlook.

It’s outrageous that the CSS standard created in 1996 is not properly supported in Outlook 2010.

It’s difficult to believe that in 2009, after diligently improving standards support in IE7 and now IE8, Microsoft would force email designers to use nonsemantic table layout techniques that fractured the web, squandered bandwidth, and made a joke of accessibility back in the 1990s.

Unfortunately it is looking unlikely that Microsoft are going to change their minds. In response to the outcry Microsoft released a statement saying…

We’ve made the decision to continue to use Word for creating e-mail messages because we believe it’s the best e-mail authoring experience around, with rich tools that our Word customers have enjoyed for over 25 years.

However, the most amusing line in their statement reads…

Word has always done a great job of displaying the HTML which is commonly found in e-mails around the world.

I try and to objective when I share the news on this show but honestly, what a joke! For me Ben Ward sums up my response to this statement from Microsoft when he writes…

I’ve tried to write different responses to this sentence. Different witty re-workings run through my head, and some of them are quite good. Yet, every time I touch the keys, all I can write is “F*** you”.

Visual decision making

I have a strange job. It is a mixture of sales, marketing and user experience design. I often find it hard to reconcile what appears to be on the surface very different roles. However, I have come to understand that there is a common thread that runs through all three… psychology.

Whether I am designing a user interface or pitching to a potential client, I am essentially doing the same thing. I am trying to anticipate the persons needs and nudge them in a certain direction.

Understanding the way the human mind works is invaluable when running or designing a successful website. Whether it is understanding how users make judgments about your site or how to influence their decision making, psychology is an important component.

In this issue of A List Apart, a post entitled ‘Visual Decision Making’ delves into the mind of users. In particular it focuses on a users ability to draw conclusions about a site in less than 1/2oth of a second. It is also a rebuttal of Jakob Nielsen’s assertion that graphics have little influence on users.

The author presents a well constructed argument that draws upon a number of excellent sources including Malcolm Gladwell’s book Blink. I would therefore strongly recommend reading this article if you are involved in user experience design or just wish to better understand your users.

An introduction to RDFa

Back in show 166 I mentioned that Google was starting to include Microformats and RDFa in their search results. This provides users with richer results that include reviews, contact details, and more. For website owners it provides the ability to stand out in the search results and the opportunity to give users additional information that may encourage them to click through.

Although Google is only displaying this extra information for a small number of sites, this will change and so we need to be ready. Now is the time to start integrating Microformats and RDFa into your site.

We have talked a lot about Microformats before, but have yet to touch on RDFa. I have to confess this is mainly because of my own ignorance on the subject.

Fortunately another post on A List Apart has come to my aid. ‘An introduction to RDFa‘ explains what RDFa is and gives examples of how it can be used on your site. At the most basic level (and I mean basic) RDFa is a framework of meta data created by the W3C. Much like Microformats, the aim is to allow computers to better understand c0ntent that has been written with humans and not machines in mind.

Like Microformats, the implementation of RDFa seems very straightforward. There is nothing stoping you from getting started. What is more, this looks like the first of a series of posts on A List Apart that will take you step by step through the process.

Back to top

This week we explore how quick, hand drawn wireframes can provide substantial benefits that save time and money.

Read the 7 wonders of wireframes

Back to top

Hi, I’m Anna, and I’m going to tell you a bit about a new micro CMS I’ve been trying out called Perch by edgeofmyseat.com

If you’re looking for a powerful CMS with lots of features that writes your blog posts, walks your dog and does the dishes for you, this probably isn’t for you.  But if you ever build static sites where it’s hardly worth plugging a CMS into at all, but you still want to give the client the option to edit the content themselves, or maybe you’re a designer who just wants to design sites and not get dragged into CMS code hell, this could be the perfect solution.

Perch is very adaptable, and it’s easy to plug it into an existing site.  I did just this, and it took me about an hour altogether, and that was the first time I ever used the system.

Ideally, you shouldn’t have to build a site around a particular CMS. You should be able to build a site, then plug in the CMS, and only let the client edit the copy, not the layout.  You don’t want it to mess with your code, and you want the back-end to be compatible with even the most technologically challenged of your clients.  Perch does all of the above.

It installs onto the web server you host the site on, rather than storing it on Perch’s website, so if the Perch website goes down, your user can still update their site.  Before Perch came out I was using CushyCMS which works in a similar way. Their site went down, and I suddenly got an influx of emails from clients who couldn’t edit their sites. Perch’s approach is also more secure than trusting another company with your FTP details.

Installing Perch is really straightforward.  You download the setup file from the website, unzip it and drop it into your home directory. Then you navigate to the setup page,  complete a form with your MySQL database settings, copy the code it generates, and paste it into a configuration file.  Then you integrate the CMS into your site by adding a PHP include tag to the top of each page and php tags in the page where the editable content will be.  When you log into Perch, it will have recognised these tags and set up the editable interface for the content.

Within a page, you can have more than one editable region.  You set a template for each region that you can define yourself.  You may just have a block of text that you want the client to be able to change.  Just use the “text” template.  You can even allow multiple items in a region, so if for example you had a news page, you could let the user add news items rather than edit a whole body of text.

The back end is very clean, simple and also brandable, so you can add your logo, and change the colours to personalise the interface.

There’s some handy documentation that’s been updated a lot since I first tried it out, and you can also contact the developers with any questions.

The price is a £35 one off payment per domain, which I think is a really sensible payment option, especially for freelancers who don’t maintain long term relationships with their clients.

There’s also a server compatibility test you can download to check the CMS is compatible, and I’d recommend you try out their live demo first at grabaperch.com to see if it’s right for you.

Back to top

Page zooming vs. text scaling

In show 169 we featured Cameron Moll’s article “Coding like its 1999“. In this post Cameron explained his decision to move from ems based sizing to pixels. He justifies this decision by citing the fact that all modern browsers have moved from text resizing to page zooming, as their primary resize tool.

Cameron’s position has caused some controversy in the web design community, with passionate responses from leading figures like Drew McLellan and Roger Johansson. Cameron’s original post also attracted some heated debate in the comments.

So why do so many object to this move away from text scaling and fluid design? Most of the arguments are the same as those that have been around for years. Fluid design…

• Adapts to varying amounts of content and different languages.
• Makes better use of screen real estate.
• Puts the user in control
• Prevents horizontal scrolling
• Adapts to alternative devices (such as mobile)

However, Molls critics also point out that page zooming is not support by IE6.

Cameron has responded to the criticisms in “The debate over page zooming vs. text scaling.” He argues against the principle of “one site fits all,” which underpins fluid design.

In my opinion this is a question lacking a black and white answer. Although generally I share Cameron’s view, we still occasionally build fluid or ems based sites depending on the project requirements and target audience. There are good arguments on both sides and neither approach should be dismissed.

10 web design rules you can break

What the discussion over page zooming shows us is that nothing is absolute. As human beings we like black and white rules, but actually those rarely exist. The web is full of articles about web design that layout rules for design, usability, accessibility and every other aspect of running and building websites. However, in truth no such hard and fast rules can exist.

Sure, there is best practice. There are principles of design, development and management we should use whenever appropriate. However, these should not be followed blindly. Sometimes meeting business objectives or users needs involves breaking these rules and doing something different.

This week the Web Designers Depot has released “10 Web Design Rules That You Can Break“. This post looks at some of these supposed rules and shows examples of sites that have successfully ignored them. The rules they have challenged include…

• Do Not Display the Horizontal Scroll Bar
• Use a Minimal Number of Font Faces
• Do Not Use Too Many Colors
• Make Your Site’s Goal Obvious
• Navigation Should Be Easy To Figure Out
• Stick to Web-Safe Fonts
• Don’t Have a Splash/Landing Page

In fact all of these ‘rules’ are actually very good advice. However, they should not be followed blindly. That is why I love this post so much. It highlights best practice, while at the same time inspiring people to challenge ‘the rules’ occasionally.

Grass roots viral marketing for ordinary people

While we are on the subject of challenging preconceptions I would like to draw your attention to a post on Sitepoint entitled “Create a Buzz: Grassroots Viral Marketing For Regular People.”

I am constantly amazed at how many website owners (and even web professionals) believe that viral marketing and social media are the easy answer to their marketing needs. As the article points out viral marketing is far from easy and if you don’t have a massive twitter/facebook following it is even harder.

Although the article is essentially a guide on how to be successful in viral marketing, it does not sugar coat the realities. It points out a number of harsh truths…

• You need a product or service that people actually care about.
• You need to reach a major influencer to have any hope.
• Don’t just rely on a single outlet (such as YouTube) to get your message out. You need lots of avenues of attack.
• A lot of it is just down to luck!

If your message doesn’t offer people something they need, something they want, or an opportunity to support something they believe in, you may need to rethink a viral campaign.

The truth about viral marketing is that many times it comes down to being in the right place at the right time.

Information as a task

In order to prove I am not the only skeptical, cynical and despondent person on the web this week, I would like to refer you to a post by Gerry McGovern entitled “Information as a task“.

This barely disguised rant about working on large pubic sector and corporate websites, resonates with my own experiences. The heart of the article is a call to website owners to stop putting up content  unless it helps users fulfill a specific goal. Its a simple message but one often ignored.

Website owners too often start the process of deciding on content by asking “what do we want to say?” rather than “what do users want to know?” Gerry writes…

Many organizations have a strange attitude towards information. Its creation is nearly always disassociated from its use. Information is rarely seen as useful or purposeful. It’s just there because people need it. It doesn’t help you do things. It’s simply there for you to read just in case you need some information.

He goes on to write…

Organizations have a fabulous capacity to produce massive quantities of low grade, aimless, pointless information. Much of the information that should have a point is useless because it is not useable. People don’t understand it. They can’t act on it. It doesn’t result in someone completing a task.

I couldn’t agree more. Before any content is added to a website the author should always ask “what task does this help users complete?” and “is this task actually one real users will be trying to do?”

Back to top

Ryan: Now here with Robin Christopherson from AbilityNet. Good Afternoon! How are you?

Robin: Yes, really good thanks, yeah!

Ryan: Fantastic! So for anyone who doesn’t know you or know what you do, could you explain that to us please?

Robin: Thank you very much. I am head of accessibility at AbilityNet and my team basically deliver consultancy and free advice and information on Web and software accessibility. And AbilityNet for people that don’t know are a charity and we do accessibility services but also assessments of disabled people in the home or in the workplace or in education and making sure they’ve got the right kit to access a computer and the Internet, etc. most effectively. And we’ve got now 800 advice information number, etc. so all things technology and all areas of disability. That’s who AbilityNet are.

Ryan: Fantastic. And you’ve just given a talk on “Designing for All in a Web 2.0 World” which was quite an eye-opening presentation I think for a lot of people who may not have seen or used a screen reader before. What was quite amusing was when you first started using it the rate at which your screen reader started speaking the content of the BBC home page, I don’t think any of us could understand it.

Stanton: I had no idea what it was saying at all.

Robin: You actually would tune in relatively quickly because when I’m working on the computer at home sometimes I don’t have it on earphones so it’s just kind of coming out through the speakers in the office and my wife just having walked past a few times now can get it so I think you probably kind of tune in. Maybe it’s a bit like the black faces and the white candlestick, you know you suddenly kind of see the other one and you kind of click. Yeah, when you’re reliant on speech output you don’t want to be sitting there twiddling your thumbs after having left the synthesizer at the default speed that you get when you install it out of the box. So you want to crank it up and not have to be waiting for it to finish what it’s saying.

Ryan: So you kind of highlight some of the issues from quite a site impairment point of view but there’s also a lot of other considerations that people designing websites should be looking into. You mentioned dyslexia or cognitive impairment. How do those type of conditions affect the way people use websites?

Robin: I think that vision impairment is probably the category of impairment that is the most difficult to cater for and someone like myself who’s got no useful vision, screen reader users are probably the hardest customers of all. A lot of the standards like ARIA for example, Accessible Rich Internet Applications, most of the guidance is around helping people who are screen reader users for example. But that’s not to say that there aren’t all the other impairment categories. Motor impairment people that have difficulties using a pointing device, a mouse or they’re keyboard only users or they’re voice-recognition users. People with a cognitive difficulty or dyslexia or with a literacy difficulty or for whom English isn’t their first language, all of these categories of impairment and obviously hearing impairment as well, have issues to do with accessing the Internet and software applications as well and the most notable ones tend to be those related to people like myself who can’t see: alternative text on images, not being able to access inaccessible Flash content and that kind of thing or Web 2.0 applications because of the inaccessibility of the JavaScript. But there is a significant impact on all those other groups. The speaker before me, Mark, was talking about typography and the choice of type, the font style is so important for people with a vision impairment, people with dyslexia, people with cognitive difficulty, etc. so Times New Roman may look absolutely gorgeous on the screen and on the page, but from an accessibility point of view, it isn’t necessarily the right choice to make for the body font. Maybe it’s fine for headings to give a certain style and because it’s a bigger font it’s going to be more legible than if you had to read a whole website, ten or eight point using Times New Roman. I wish I’d had three hours instead of half an hour to kind of go through the headline issues, right across all the different impairment categories. I had half an hour so I concentrated largely on the high profile issues to do with screen reader users and in particular Web 2.0 application type scenarios where the new guidelines like ARIA for example can make a significant impact.

Ryan: OK. What should we as, I suppose now that you mentioned typography being extremely important, what should we as designers and developers be doing to improve accessibility and day to day. I know it’s a very loaded question and there’s lots and lots of things we should be doing but as kind of a minimum we should just do all the time, every time we build a website, minimum we should be doing and then before we take the next step to really drive it home. What’s the minimum things we should be incorporating?

Robin: Um, there are some low hanging fruit. You know, there are some things that you could look at any site, any existing site and clean up: alt tags on images, and a decent heading structure, and make sure that the text resizes, that sort of thing that shouldn’t be too difficult to implement. On anything new that you’re building you really do need to get scripts with the WCAG, the Web Content Accessibility Guidelines, and the new version has come out last December to update those significantly, WCAG 2.0, and those are applicable to all the new technologies that are coming out, etc. and there’s really no shortcut to really kind of internalizing, digesting those and just letting them inform your every day practices in what you do, you know. They impact on everything from the wireframe right through to UAT and go live and also post go live maintenance and that sort of thing so you really just need to make sure you’re one of the web designers that have got with the program and you’re not doing the old bad habits of fixing everything to make it pixel perfect and doing lots of hacks to make it look OK in different browsers and that sort of thing. Luckily we’re in a much more standards compliant world now than we ever have been so you can really adhere to standards and only have to do minimal tweaks to make sure that things look relatively OK right across all the range of browsers and we’re asking that you go further still and you consider handheld devices and you consider Web TV as well as people with different impairments and that’s really going to significantly increase the customer base that you are going to be enabling to access your content and if it’s any kind of website with a business model with a revenue stream, right through to a site that’s an e-commerce site, you absolutely can’t afford to ignore accessibility in such a tough and competitive online environment.

Ryan: Yeah, especially with there was that Legal & General case which you mentioned earlier. They redesigned their website to be more accessible and had some quite good results with that, didn’t they?

Robin: Yeah, I mean this is an ancient example now. We helped the Legal & General in 2005. We did disabled user testing on the accessible relaunch and yeah, I mentioned that one in the Q&A at the end because most people will have heard of that one if any and they had staggering ROI. They had a saving of 200K per annum on site maintenance. They had an increase in online sales almost instantaneously after the relaunch of 90% and that kind of indicates that there was an audience out there that was knocking on the door before but couldn’t get through because of lack of platform compliance or lack of accessibility with the range of assistive technologies that people were using. Other people couldn’t tweak the browser to make the text size larger or impose their own color preferences. So there was an audience out there waiting and as soon as the site was relaunched and had opened the door to all those people, there was a step change in revenue. So, but there have been lots of cases since as well as cases that have shown the danger of ignoring legislation. You know, the Target case in The States where they thought it would be cheaper to be fined than to retrofit their site but when it came to it in the end they lost obviously, because they were in the wrong, and they were fined and they were also told to retrofit so they made the bad decision there and had loads of really bad PR as well. That sort of thing is going on over here but it doesn’t actually reach the court, they are settling out of court and part of that settlement is anonymity, a requirement for anonymity so we don’t have headlines over here, but there is litigation going on. So, there are the carrots and the sticks and all of those things have got to be an overwhelming case for getting with the program and becoming one of those Web developers who are able to build accessible websites which are being stipulated so often in tenders these days. You can’t work with the public sector without being able to create accessible sites and accessible functionality.

Ryan: Yeah, I work in the public sector myself as a full time developer so our baseline is it’s got to be AA compliant with WCAG2, have got to comply to the SENDA, the Special Educational Needs and Disability Act. Not so much the PAS 78 guidelines but I believe those are becoming the British standard, or are rumored to be.

Robin: Yeah, I mean it’s dragging on a bit, but it is going be sometime this year. I think probably Q3 this year and it’s going be a BSI full standard, BS 8878 and Julian and the panel including John Gooday from AbilityNet are on that again authoring panel. I think that one thing that is essential, is really important in assuring real life accessibility is testing. So, any web designer, any organization that have internal guidelines, style guides, etc. should have accessibility built in from a checkpoint or a good practices level but you also need to have a range of testing tools, whether it be the accessibility toolbar or some sort of accessibility checker. We can’t all afford an enterprise accessibility checking tool, but if you can they can be extremely useful from a monitoring point of view and ideally you’d have end users involved. So within your organization, if you’re a large organization or otherwise go externally to an organization like AbilityNet to get some end users looking at your content and making sure that it’s not only accessible to the guidelines but it’s also accessible in reality. We did some lab testing for a site that was strict AA about four months ago and 90% of the tasks weren’t completed by the testers because the AI was all over the place, the usability. None of the guidelines had been contravened but it was an extremely inaccessible site for people for a number of reasons. It’s an acknowledged fact that there are a lot of issues outside WCAG that you can’t really document that are specific to a site and the general layout and presentation of that site and the architecture, etc.

Ryan: Sure. So you mentioned testing there. Is there anything say that any of our freelance listeners that may not be able to afford a specific software, any quick and cheap kind of guerilla usability testing, that kind of stuff they can test for accessibility as well?

Robin: Ideally you’d get hold of a screen reader and become familiar with the basic level of functionality of that screen reader and just check with that. There are a number of browsing tools that can render the page similar to how a screen reader would read it out to you etc. but they’re not that useful when it comes to checking for compatibility, you know, if you’ve got a lot of JavaScript, how’s the screen reader going to handle those, etc.? There’s no easy answer to that apart from becoming familiar with the guidelines, using JavaScript from accessible JavaScript libraries where somebody has already done the work for you, and become familiar with a number of access technologies that you can use to double check some of the functionality and the content perhaps on a kind of sampling basis and you’ll begin to realize then which things are going to be problematic and that will inform your design from that point on. In Vista, voice recognition comes as standard and Windows 7 has got a full screen magnifier when that comes out so you won’t need to be purchasing a lot of different assistive technologies to be able to test with a number of them to inform your design process.

Ryan: In your presentation you talked about CAPTCHA still being a huge problem for accessibility and some visually impaired users can’t even register on a site. I also noticed that there was a kind of hidden extra link if you’re using a screen reader that nobody else really sees but you pick up on that once you go through with a screen reader. Are there any other kinds of sign posts that we should be putting into our sites like “Skip to Content” and things like that, that make it beneficial to visually impaired people or visually impaired users or people using screen readers?

Robin: I mean there will be a lot of other people as well, keyboard only users, when they gain the keyboard focus a lot of skip links become visible. People using Web TV, set top boxes often don’t fully support styles and a lot of those things become visible and they are in effect keyboard users. You can go over the top on skip links for example I’ve seen ones where there were like eight skip links and basically that’s a nav in itself, so you really need one at the top that says “Skip these skip links” or something so that is, you can kind of go overboard but yeah there are lots of little tweaks that you can do that make getting around a page, getting around sections of the page that are going to be hugely beneficial, but just doing something as simple as putting headings in, using the landmarks that ARIA offers to identify key, the top of key sections of the page are going to be hugely useful, not just for blind users for example but they are meant for a range of other user categories as well that would benefit from them.

Ryan: Could you talk a little bit about ARIA and how that’s beneficial for accessibility?

Robin: It’s relatively early days really and the support for it is pretty minimal at the moment. You have to have the very latest version of only a number of screen readers and the very latest version of Firefox, IE8 isn’t quite so good at having fully implemented ARIA support. ARIA stands for Accessible Rich Internet Applications and it’s basically the answer to the fact that WCAG, even WCAG2 hasn’t got a huge amount in there from a developing point of view. It’s more of a “Now let’s check the thing you’ve already done” point of view. But also didn’t define a standard for browser developers and AT developers, Assistive Technology developers, to interface and like an API almost and so ARIA has a number of things. Being able to define controls and their role and their status that you could never have done before in a browser. Slider controls in a media player for example a bit like in media player, Windows Media Player, but online in a, just as an embedded control in a page, that has never been possible to be made accessible before. Popup menus and that sort of thing before would have been done in styles or DHTML and that would be very problematic but with the new ARIA way of implementing them as long as you’ve got the right browser and the right AT then that is just like doing it in a desktop environment.

Ryan: One of the tips that you demonstrated on stage was for mobile devices. For the primary navigation one of the internal wars that’s always waged with me is “Should you put the navigation at the top or the bottom of the mobile page?” so that the mobile phone reads it from top to bottom every time the page loads and you showed that this site had the primary navigation in a dropdown menu.

Robin: Yeah, that’s how they chose to implement that as a dropdown and that is very cute implementation. That’s a good choice I think because you’ve got the nav there but it’s literally just one item or two items with the select button. Obviously it would be problematic if it was just a dropdown that was auto-fired for people that just arrowed down it without doing alt down arrow because that’s very a inaccessible implementation of a dropdown box but you’ve just got two items which you have to get over. If you had the nav at the bottom and you wanted to use the nav, then you’d have to get to the bottom and in some browsers there isn’t a quick way of doing that. On my mobile phone, the browser that comes with the Symbian operating system, WebKit I think, the screen reading software talks that I’ve got on my phone. I can literally just arrow left and right or up and down through items on a page, just like tab and shift-tab, that’s all I’ve got. So there’s no way of getting down to the bottom of a page to get to the nav so I would probably on balance having it at the top that in it is two items to get past. If you don’t want to interact with the nav it’s quite an elegant solution really.

Ryan: Are there any major issues with the predominance of touch user interfaces coming through now? I would think that using a mobile phone, the tactile feedback of the buttons is quite important or am I wrong?

Robin: Yeah, I mean we’re concentrating a lot of people who are completely blind but you’ve also got people with vision impairment and people with motor difficulty for whom iPhones are a non starter really so any kind of touch screen interface where it’s the entire interface, it’s not as if it’s an optional extra way of doing it. In Windows for example there’s going to be a lot more touch and multi-touch stuff going on in Windows 7. When apps use that as the only way of doing something, that’s when accessibility is going to become a big issue. There needs to be always an alternative way. Alternative to drag and drop for example of doing things for people with a vision impairment or can’t using a pointing device, etc. So as long as there’s a redundancy there that’s fine, which there isn’t in the iPhone.

Ryan: OK, that’s great. Just to finish up, is there a, do you have a list of things that you see regularly that are counterproductive to accessibility that you can recommend for our designers and developers to just try and stop doing or try and do better, these are kind of like my top five tips, yeah common mistakes type thing?

Robin: Yeah, if you go to AbilityNet.org.uk/webresources then one of the things we’ve got in there is top five tips and top five sins, that’s one of them. And another one is a top ten checklist of things to do. Which implies that if you do them, then um, well if you hadn’t done them like label images properly, then that would be a sin. So follow the check points, those ten and those are ten things you can avoid sinning on. So yeah, there’s a number of resources on there. Other sites that I would definitely recommend to people for getting to grips with accessibility would be WebAIM.org and they go from the very basics right through to really quite advances. Accessify.com is brilliant because they’ve got of information but also a lot of forums as well so you can kind of talk with other guys getting to grips with it. I would point you at the source of the WCAG guidelines but actually they’re kind of not the best place to start but I mean everyone who knows about accessibility knows where that is anyway which is at w3.org/WAI. But yeah, WebAIM, Accessify and our site are good places to go.

Ryan: Fantastic! Well thank you very much for your time!

Robin: Great!

Ryan: It’s been a pleasure talking to you.

Robin: Thanks ever so.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

It’s something we’d been considering for a while, we’d weighed up the pros and cons and finally took the plunge. The key benefits of Google Apps are huge amounts of storage, a quality web interface and considerable cost savings. There’s also the reassurance that Google is actively developing the product with regular updates and improvements that don’t require installing fresh software or waiting for a hosted service to upgrade. If you’re currently using POP to receive emails or are archiving locally, you’re running the risk of losing your history of emails, should a disaster befall your computer. Keeping emails in a centralised service and syncing with IMAP gives you the security of safe storage and the convenience of access from anywhere. This is where large storage allowances come in handy.

Preparing

Setting up an account is easy. Google offers a team version with fewer features than the premium, allowing an admin to create users, email lists and try out the service. This is also great for demoing the service. Google provide a test domain for sending and receiving emails using your regular style company email address (firstname.surname@). Depending on how big your organisation / company is, it’s worth testing out a few accounts across as many email clients as people run. It’ll help knowing off the top of your head where various settings are to save on support time later.

Migrating

One of the key features of the premium account is IMAP email import. This allowed us to pull emails from our current Exchange server straight to Google, server to server. You basically just provide Google with your current email login details and it takes care of everything. You can specify a bunch of email accounts to import at once, and if you have a super-admin login to your email you can grab everyones with one set of credentials. This didn’t work perfectly for us, a few accounts seemed to hang and never complete. If that happens, it’s worth removing emails from the server with large attachments and trying again. If all fails, the alternative method is to setup your Google account in your email client and just drag all your emails from one to the other. Might have to leave it going overnight if you have a big inbox! Once you’re ready all you have to do is point your domain MX record at Google and you’re done.
On top of the usual email setup there are a bunch of settings Google recommends for desktop clients to aid consistency with the web version. These help prevent duplicate folders for drafts, sent and trash cluttering up your interface.

Migrating Calendars and contacts is dead easy, Google provide tools to sync local calendars and contacts can be exported / imported.

Support

The biggest hurdle in a switch like this is gonna be support. Unsurprisingly, some people don’t like change, especially when it concerns services as critical to productivity as email. They’ll need reassurances that emails won’t go missing and everything will be as easy as it was before. There will be a short period where emails could end up going to either your old inbox or your new one, but as long as you check both for a couple of weeks post switch, you’ll be fine. We did see an email or two arriving at our old accounts a week after the switch, this is due to caching of MX records, not to worry though, they’ll propagate eventually.

A different way of working

My favourite features of working with Google Mail are archiving and labels. Labels work in the same way as folders, except an email can have several labels at once. This can cause some confusion when using a desktop client, as emails will appear in multiple folders. When an email is deleted from the inbox or any folder in a desktop client, it isn’t deleted on the server. It may still have other labels and will still exist in All Mail. To delete an email from a desktop client it has to be dragged to the Trash/Bin folder. This is great for keeping a clean inbox with current / unhandled with emails.
Another advantage to having all your emails on Google’s servers is search. However fast your computer is, you can’t match the speed at which Google can search your inbox for that elusive message from last year containing critical info. Instead of using a regular desktop client, you can take advantage of Chrome with Gears for a hybrid web client / desktop app. This allows you to keep the benefits of the desktop such as offline email access combined with the familiar web interface.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Please start from the beginning

Not long ago I read Malcolm Gladwell’s book Outliers, which includes many stories about how well known individuals got their big break. There is something fascinating about people’s backgrounds – the opportunities and experiences that help shape a career. I am often surprised that people’s success has more to do with circumstances than talent.

Our very own Ryan Taylor shares this fascination and so has started a new video series where he asks industry figures about their background. He started the series by interviewing me. Apparently he wanted to practice before interviewing important people :-) He has since moved on to talk to Drew McLellan and has Mel Kirk and Sarah Parmenter waiting to be released.

I think there is a lot of potential in this series. The web is still such a young medium and few trained to be a ‘web designer’. It is therefore fascinating to see how people came to the industry. There is also a lot to be learnt for those starting out in their careers. Be sure to pop along to Ryan’s site and subscribe to his RSS feed. I look forward to future interviews.

Running a card sorting exercise

Establishing your site’s information architecture can be one of the most challenging jobs for a website owner. You face two major obstacles. The first is your organizational bias. You can become so institutionalized by the way your organization works, that it can prove  hard to view things from an outside perspective. What seems logical to you can make no sense to an end user. Second is internal politics. Information architecture can often become an area of contention with different parts of the organization vying for top level billing. This can lead to IA by committee, which never leads to a user centric approach.

Card sorting is one way to overcome these challenges. It is an objective way of organizing the information on your site, around user’s needs rather than company structure. It works by putting users in control of creating that structure by asking them to sort cards containing content in a meaningful way.

At first glance, running a card sorting exercise can appear intimating. However, as a post on Sitepoint demonstrates, it is actually straightforward. “Run Your First Card Sort” is a step by step walk through of everything involved in running a card sorting session. Although the method laid out is not the only approach, it does tackle the key steps including…

1. Preparation
2. Recruitment
3. Running the session
4. Interpretation and reporting

If you haven’t run a card sorting session before and would like to make your IA more user centric, then I would highly recommend this post.

The complete Google Analytics power guide

I have watched with fascination as Google Analytics slowly decimated the website statistics sector. When Google Analytics was launched it was a relatively simple product, more aimed at smaller websites and blogs. However, over time it has become increasingly more powerful and useful to even the most stats hungry power user. Enterprise products have struggled to compete with a product that offers so much functionality for free.

However, with this increased power came more complexity. What was once a simple product has become increasingly harder to master. Although Jeff Veen did some amazing work at simplifying the interface, it is still hard to harness its full power. The result is that many fail to use it to its full potential while others are too intimidated to try.

This is unfortunate as Google Analytics offers so much information to an experienced user. It paints a picture of how users are truly interacting with your site, while informing your sites structure and content.

Fortunately “The Complete Google Analytics Power User Guide” equips website owners with all they need to know to squeeze the full potential from this incredible powerful tool. This series of posts include detailed information on every aspect of the program from setup to tracking goals and funnels. Best of all the various posts have also be brought together in a single 45 page PDF, making it a lot more accessible for offline reading.

If you ever use Google Analytics or are interested in what it can do for your site, this is definitely worth downloading.

Estimating time for design projects

One of the toughest parts of being a web designer is estimating the price of projects. There are so many variables. So many ways you could approach a project, and so many things that could go wrong. Nobody likes estimating a job and rarely do any of us get it spot on. It is a minefield of pain. On one hand you need to add contingency  for the unseen, but on the other, if you add too much you become uncompetitive.

Effective Strategy To Estimate Time For Your Design Projects is a new Smashing Magazine post that endeavors to address these issues. It begins by looking at what causes a project to be misquoted. Reasons include…

• Unknown technologies
• Grey areas in the specification provided
• Bespoke development in unfamiliar areas
• The cost of sale being too high
• Lack of time to quote properly
• Too high a desire to win the work
• No previous time tracking to refer back to
• Estimating time for a project is not fun

It then goes on to address each of these issues with a particular emphasis on granular planning and the need to track time.

I have mixed feelings about this post. It provides an excellent structure for creating quotes and even has a list of common tasks to quote against. However, it feels a little labor intensive at points, going into more detail than most can justify. I guess to some extent it depends on the size of projects you undertake.

That said, it certainly makes you think about your quotation process and encourages you to be more efficient in the way you price projects. This can never be a bad thing.

Before I move on from news – if you live in UK mark the 22nd June down in your calendar. That is the date tickets for dconstruct go on sale, and judging by previous years they will sell out shortly thereafter. Myself and Marcus will be there recording interviews for the show. However, we are also going to arrange a meetup over lunch so hopefully that will be an extra incentive to come.

Back to top

Establishing the look and feel of a site can be a point of contention. Web designers can become frustrated because their expertise is not respected. Client are annoyed because their designer does not listen to them. How then do we ensure the design process runs smoothly?

Read The Battlefield of Design – Clients vs. Designers

Back to top

Teifion Jordan sent us a very insightful review of a BBC article that I wanted to share with you…

The article is titled “Is the web’s amateur hour over?“, a provocative title for those that blog, contribute to open source, have a flickr account with photos licensed under CC and so on and so forth. The article opens describing somebody that revels in the name “Antichrist of silicon valley”, anybody that revels in a name such as that is either crazy or doing it for the attention and page views it brings them. It sums up the rest of the description pretty accurately.

The article then explains how he dislikes things such as Wikipedia because they’re maintained by people working for free, how seasoned professionals are being put out of work by amateurs on youtube. At this point the article moves onto showing that all the big tech bloggers, these so called “amateurs”, are actually seasoned journalists.

The crux of the article is of course Amateur vs Professional, does the fact that anybody can start a blog mean that anybody is a journalist? Does having a flickr account make you a photographer? Yes and no, technically yes but in reality most people will never gain enough of an audience to become influential or make money from it. Professionals are paid and generally for a good reason, a professional blogger probably has experience and good writing ability, an amateur probably won’t.

But we’ve still not come to the actual issue, I’ll say it again. Amateur vs Professional, yes that’s it, it’s the 2nd word in, verses. The sensationalist man described at the start of the article seems to feel that there is a competition on between those that work for free and those that work for money. More importantly, he feels that those that work for free are making it harder for those that work for money to find work!

But that’s really not true is it? If it were true then wouldn’t we all be using Linux because it’s free? Wouldn’t Open office be the de-facto standard of office software? Why would Apple even bother making the iPhone if Google is just going to make Android? Why does Paul bother to make websites when anybody could just do it for themselves?

There are I think three main reasons. Quality, Trust and Support. Open Office is a nice piece of software but it’s not got the features of MS Office, it’s not as high a quality product. Linux is really really well supported if you know where to look, for most people however they’d much rather get a normal computer which they already know how to use and can phone tech support for. And trust, if you pay Paul huge sums of money to make a website for you then you trust he will do a good job, that he knows what he is doing.

So no, I don’t think it is Amateurs vs Professionals, I think it is Amateurs and Professionals. One does not exclude the other, instead one will spur on the other and generate often healthy competition. Think about how much IE6 stagnated because nobody was competing with it any more. Now that people are competing with them on browsers MS are starting to get their act together somewhat.

Next, the work of an amateur can be used to help a professional. PHP is a free product but countless people make money writing websites in PHP. Throughout this “review” I have maintained the position that on average a paid for product or service will be of a higher quality. This is true, on average it will be better but not always. There’s a reason that if I had a 2nd computer it’d be booting Linux and not Vista, there’s a reason I develop websites in PHP rather than C#. It’s because the free option is better or the paid option not good enough to warrant the cost in my opinion.

Lastly I want to come to why. We’ve all seen them, the blogs that must have about 3 readers one of whom is the Mum of the author, I know they exist because I write one such blog. Why do people post up bad photos to Flickr? Why do I spend a lot of time running an online game from which I make no money? It’s because everybody has a hobby or two and this is the way that they peruse it. There is nothing wrong with this and should in fact be encouraged. What may now be a bad set of photos on a flickr account could in a few months with encouragement and tips a very good set of high quality photos. What may for now be just a programming hobby could in a few years turn into a very very good language.

Paul started up this podcast because he thought it’d be fun and may or may not have been high from using the computer for too long. It’s come a long way since then with thousands of listeners and an entire community built around it. Thus I end with the idea that while something may be amateur now, it can become professional in time and that this is good.

Back to top

Whether you are looking for a freelancer to build your latest web project or a permanent addition to your web team, the Boagworld forum is now the place to go.

We have added a new jobs category which lists web design projects and jobs free of charge. So, whether you are looking to post a job or pick up some work you should take a few minutes to check it out. Right now there are jobs for…

• A web project manager
• A joomla expert
• ASP.net developers
• PHP developers
• And much more.

Back to top

Coding like its 1999

This week Cameron Moll has posted “Coding like it’s 1999“. The reason for this witty title is his decision to return to using HTML 4 and pixel font sizes, both of which were best practice in 1999.

The post is essentially a justification for these two decisions and he puts forward a very convincing argument for both. He credits his decision to move back to HTML 4 to Dave Shea who recently wrote a compelling argument to drop XHTML. Dave writes…

Six years ago, many of us thought XHTML would be the future of the web and we’d be living in an XML world by now. But in the intervening time it’s become fairly apparent to myself and others that XHTML2 really isn’t going anywhere, at least not in the realm that we care about…. I’m not ready to start working through the contortions needed to make my sites work with an HTML5 DOCTYPE yet, which leaves me with the most recent implemented version of the language…. [U]ntil I get a better sense that HTML5 has arrived, 4.01 will do me just fine for the next four or five years.

As for the decision to move back to pixel based typography, Cameron writes…

However, recent versions of every major browser — Safari, Firefox, Google Chrome, Opera, and yes, Internet Explorer — now default to page zooming instead of text scaling… What does all this mean? It means px can again be considered a viable value for font-size. It means the difference between setting text with absolute units or setting text with relative units is negligible for users. For you and me, however, the the difference is substantial. The burden of calculating relative units throughout a CSS document is replaced by the convenience of absolute units — 14px is 14px anywhere in the document, independent of parent elements whose font-size may differ.

Although at Headscape we still work with XHTML, we have moved back to pixel base typography and I suspect will do the same with HTML. I do not think it will be long before most web designers follow suit.

The power of words

Problogger has published a post that demonstrates the importance of our words. It shows how the words we pick can have a real effect on how users act. Word your copy carefully and you could substantially increase conversion.

Interestingly the post does not demonstrate this through example of good website copy. Instead it looks at the language used by successful waiters. The article takes three phrases often used by waiters and explains why they are so powerful. The phrases are…

• “Our chef recommends”
• “Everyone else has ordered… and they love it”
• “So gentlemen, is everything delicious?”

10 tips for creating a more usable web

The Web Designers Depot has published “10 Tips to Create a More Usable Web“. Its not exactly the most original post and we have seen similar posts from Smashing Magazine in the past. That said, it is still a worth while read.

The problem is that it is so easy to forget best practice when it comes to web design. There is just so much to take into account as we design a website that we can easily overlook things. Articles like this may not necessarily teach us anything new, but they do bring to the fore best practice that may have been pushed out by more recent issues such as WCAG 2 or web typography. We can never be reminded enough of the principles of usability.

This particular list includes…

• Creating active navigation
• Clickable labels & buttons
• Linking your logo
• Increasing the hit area on a link
• Adding focus to form fields
• Providing a useful 404 page
• Using language to create a casual environment
• Applying line height for readability
• Utilizing white space to group elements
• Being accessible

As with all good list posts, each point is accompanied by a brief explanation and some nice examples. Check it out.

Four quick tools

I conclude today with a quick round up of various tools that have been released this week. Its a bit of an eclectic mix but they are all worthy of note…

• Google Page Speed – Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
• EntityCode – HTML entities are HTML code that is used to display special characters such as the £ sign. However, remembering them all can be tricky. EntityCode is a useful reference that lists some of the most commonly used HTML entities in a very swish AJAX driven format.
• Google Web Elements – Google Web Elements allow you to easily add your favorite Google products onto your own website. Widgets include calendar, conversations, custom search, maps, news, presentations, spreadsheets and Youtube news. All of these widgets existed previously but have now been brought together on a single site.
• Adobe BrowserLab – Adobe BrowserLab is a browser compatibility service that provides designers screenshots of their pages on leading browsers. There has been a lot of excitement around this one, but I was not overly impressed. Sure the interface is nice and Adobe are a big name. However, the service only offers screengrabs (not interactive sites) and only for a limited number of browsers. In my opinion there are better services out there such as Litmus’ Alkaline.

Back to top

Paul: So, the next in our series of interviews from the Future of Web Design is with Mark Boulton. Hello, Mark.

Mark: Hello there.

Paul: So… we interviewed you on boagworld, didn’t we, about… quite a while ago.

Mark: It was a while now, January?

Paul: Yeah

Mark: Something like that.

Paul: Something like that, yeah.

Marcus: What, that long ago?

Paul: Well, in internet terms, that’s forever.

Mark: That’s forty years ago.

Paul: So, at the time, you were just embarking on this odyssey of doing a redesign with Drupal, or you were part-way through it. And we were talking about this very unusual approach of ‘Hey’, you know, we normally discourage people, don’t we, from doing any kind of, don’t show your design to a group and you were showing it to thousands of people.

Mark: Yes, yes.

Paul: And you talked about how great it was going to be and there was this slight fear and trepidation in your voice at various times. How’s it gone?

Mark: It’s gone really well.

Paul: Has it?

Mark: It has. It’s gone really well. It’s been terrifying on a daily basis. Posting comments for… you know, registered users on drupal.org are about 400-500 thousand.

Paul: Right.

Mark: A fairly active, passionate community; a lost of these people have invested time, money and have businesses riding on Drupal. So, however, the vast majority are really in favour of what we’re doing.

Paul: So what, how did it work in practice? You know, were you uploading designs to a blog and just saying: ‘Hey, have your say’ or was it more structured than that?

Mark: It was more structured than that; it wasn’t initially, I mean we’ve learned some painful lessons along the way. But it was a very distributed approach, so we’d have a Twitter group, we have, sorry a Twitter account, we’d have a flickr group, YouTube groups, our own blogs – mine and Leisa Reichelt’s.

Paul: Right.

Mark: We’d have drupal.org, which is the main kind of Drupal page, but we’d also have groups.drupal.org where you can create your own little groups and we’d have a group there.

Paul: OK.

Mark: The view is that, so if we just posted things to Drupal, if we just spoke to the Drupal audience, we’d get a very slanted feedback on what we were doing.

Paul: Of course.

Mark: So, the idea was that we would touch on all sectors of the, kind of all bits of the audience. And then we’d, we were working weekly iterations on a 12-week schedule.

Paul: Right.

Mark: Which was killer.

Paul: Yeah.

Mark: We would not do that again and we would release material, whatever that would be; mostly it was HTML prototypes, fairly lo-fi, and we’d release them on a Thursday and then we’d sit on our hands

Paul: And watch.

Mark: And watch, yeah, with trepidation.

Marcus: Dealing with hundreds of thousands of comments.

Paul: How did you deal with that?

Mark: Yeah, we, we…

Marcus: Ignore them!

Mark: At first, I mean, there’d be the odd occasion where you’d get flamed and things could get personal and nasty and the&helllip; of course, the natural, human reaction would be to get in there and defend yourself and, but we, after a couple of times of trying that, which didn’t work, we didn’t, we really had to walk away from the computer and…

Paul: Yeah, I think that…s a good lesson for anybody running a community or interacting with people.

Mark: Absolutely, I mean the first lot, you know, if you post something up to a community, your first day’s worth of comments are setting the scene and then the following days from that trends will start to emerge &endash; repeated themes &endash; and that’s what we were watching for. So, we’d spend maybe four days, through till the Monday, just watching, you know, over the weekend, which was quite nice because we could do other&emdash;have a life…

Paul: Which is always good.

Mark: Yeah. And then we’d go back over the comments on the Monday and try and establish some themes that we agreed with and we put forward into the next iteration.

Paul: Right.

Mark: But it’s probably worth saying at this point that it was not a design by demo… it was not a, kind of, a democratic process.

Paul: No.

Mark: Because you just end up with mediocrity, I mean, kind of a little bit of a dissing Wordpress here, but what Wordpress are doing with the voting.

Paul: Right.

Mark: That’s not really our approach. Our approach was… we had a clear design vision.

Paul: Right.

Mark: And we pretty much stuck to that, but it was the way that you presented the material and gathered the feedback, that’s kind of steering that vision.

Paul: Yeah, so did you learn lessons about presenting the material and how to do that?

Mark: Yeah, we’re still doing that, we’re still on a kind of weekly basis.

Paul: Because that’s always the big thing isn’t it? You know, you can’t just take a design, show it to people and say: “What do you think?”

Mark: No, just go: “Here you go” No, which we did early on and it was a disaster.

Paul: Yeah, I can imagine.

Mark: Yeah, it was. It was like: “What do you think of this? I’ve got some ideas for the logotype.” “It’s rubbish!” You know, hundreds of comments.

Marcus: And they all start arguing with each other, no doubt?

Mark: Yeah, and it was… so, you have to put something in place to ask for specific feedback; that’s where we got to. So, it was, if you’re posting up an iteration which involved heave change to the masthead design, we’d steer it like: “What are your thoughts on the navigation? You know, do you think this works, do you think that works?” And wherever possible, we’d validate our design direction with testing and research anyway.

Paul: OK.

Mark: But, recently we’ve been starting doing videos.

Paul: Right. Which is quicker, I’m guessing.

Mark: Kind of, a little, er… yeah, it is. It’s been good.

Paul: I guess, I mean, the videos, did you, so you’re talking over the top of the videos and…

Mark: No, no. I mean, it’s literally we’d… so, I’d come up to London and I’d work with Leisa in the British Museum, or whatever, and after a morning, we’d have a Flip and I’d just video the two of us talking about stuff.

Paul: See, I think that’s really good, because it makes people think twice before criticising, because there are real people behind them.

Mark: They see you as a real person. Absolutely.

Paul: So, there’s probably a benefit to that.

Mark: I think there is, I think… a lot of people hated it. And a lot of people hate the…

Paul: Yeah, but a lot of people hate everything.

Mark: Yeah [All laugh] A lot of people hated the distributed approach because they couldn’t keep track of everything, but i’s not…

Paul: Which I can kind of understand.

Mark: It’s not really their job to keep track of it, they can if they want, they know where everything is and, sorry if it’s difficult, but that’s the way it is. So, this time around we set up a bunch of Yahoo pipes, and things like that to aggregate everything from all over the place and just pop it in a Wordpress blog.

Paul: Right.

Mark: That’s the approach that we’re doing for redesigning the back-end, and that’s working pretty well, because people have a framework in which to feedback, they’re not going hunting for everything all over the place.

Paul: I’m guessing that people are even more opinionated about the back-end than the front-end?

Mark: Oh, massively! A lot of people don’t really care about the drupal.org website, I mean it’s looked terrible for years and it’s not done them any harm, so a lot of people are saying like: “Well, why bother?” But Drupal’s almost, kind of, on a tipping point, I think; there’s a lot of big commercial companies using it and it’s important, but the back-end is been developed by developers for developers.

Paul: Ooh, painful.

Mark: Yeah, so to go in there and say that the user experience is broken, which is what we have said, has been interesting.

Paul: Right.

Marcus: Because they know it backwards, I guess.

Mark: Well, they know it backwards and they’re comfortable with it. THe thing with the Drupal, as a system is that you download it and you install it and then you hit this brick wall really hard and then you have to spend six months of a pretty steep learning curve to even get a rudimentary site online. And that’s, we’re trying to flatten the curve. But a lot of developers don’t really understand the need for it.

Paul: That’s developers for you!

Mark: That’s fine. [All laugh] I’m fine with that.

Paul: So, I mean, this is quite an unusual approach that you’ve taken here and it makes a lot of sense because, you know, Open Source software, it has to be an open and collaborative process and all the rest of it. Do you, would you ever do this again and if so, would you only do it with Open Source stuff, or do you think there’s a value in doing it with non-Open Source stuff?

Mark: I think there’s a value doing this with communities, where communities have a vested interest, either financially or with time spent in the community to take that community on board and redesign it for them; I think it’s pretty disrespectful. So, I think it would work for communities, you know, the social side of the web is ever increasing and I think this approach would work for the majority of that, but it takes a certain type of thick-skinned designer to take it on the chin, because it goes completely contrary to the way that designers are schooled and the way that we practice our craft every day, is that we’re the problem solvers with the years of experience and we’re the experts and here’s our solution, it doesn’t work in this sense.

Marcus: Can I ask a sales-y question?

Mark: Yeah.

Marcus: Because I don’t know how you won this work. Was that the differentiation that gave you the… this is what we’re proposing to do?

Mark: Er, yeah, I believe so, yeah. It was the kind of the loose, almost by the seat of our pants agile approach and the fact that we were not ingrained in a process and we were quite happy and willing to break it apart and completely.

Marcus: Because it’s going to take a long time, isn’t, and most clients want it, you know, can you do it in a week?

Mark: Oh yeah, the drupal.org redesign isn’t due to go live for another few months and our involvement was four months.

Marcus: Sure.

Paul: Right.

Mark: So, yeah, it takes a long time, it’s a lot of effort but, from a sales point of view, we’ve now taken on more of a, so we use to work pretty strict waterfall, like a lot of agencies did, and now we don’t, we work, I wouldn’t say we were agile because agile can be as restrictive as waterfall, just a different name. But we work a very iterative design process now and are finding that our clients are loving it because they’re getting involved right away, there’s no time wasting on functional specifications and weeks and weeks and weeks of scoping; it’s getting in and solving the problem, and from a financial and a business point of view, it’s a very scalable model, so you have x number of days at a certain price on a sprint and you can expand and contract that process according to scope and budget. It does require quite a leap of faith by the client, to say: “what, you mean you’re not giving me a fixed price?”

Paul: Yeah, that’s the hard sell.

Mark: I’m like: “No” And that is hard but I’ve found that a lot of clients you sit down and you talk them through it; they can see the advantages.

Paul: Because we’re not at that point, are we?

Marcus: Er, not with new clients. Old, you know, existing clients will accept it because they trust you, but it’s always this… I mean, I don’t know, would I… say, if I owned a business and I was going to hire someone I didn’t know, even if I could see that they’d done a lot of good work etc. etc. it would be like: “Ooh, I don’t know if I could do that” You know.

Paul: Difficult.

Mark: So, a lot, so, in those instances and there have been a few, then phasing comes into it, you know and let’s see how a few sprints go and if you like how it’s going at this price, let’s expand it out and…

Paul: Yeah.

Marcus: Interesting stuff.

Mark: So, yeah, it’s interesting.

Paul: So, you like to do things different, don’t you [all laugh] you know.

Mark: Wherever possible.

Paul: Yeah, and talking of which, you’ve just given an interesting talk about web typography that’s got a bit of a different slant on the whole subject of web typography. Talk us through a little bit, you know, give us a potted version of your talk.

Mark: A potted version is 20-25 minutes. So, this week there’s been a lot of discussion online, based on Comic Sans.

Paul: Right.

Marcus: Right.

Mark: Comic Sans is evil, apparently.

Paul: Yes.

Mark: I don’t think it is evil.

Paul: OK.

Mark: I think it’s the victim of being used in the wrong context for years and years. And I think that, so there’s also been a lot of talk about font embedding, you know people are crying out for it, it’s why sIFR exists, and all of that. The technicalities of how it’s going to work with browsers and manufacturers and the font foundries aside, is it actually a good idea?

Paul: OK. [all laugh]

Mark: And I mean that from the point that the majority, the vast majority of typefaces have been designed for a particular reason and they are primarily designed for print usage first and screen usage doesn’t get a look in beyond the preview of the screen font. Now, Georgia and Verdana and a bunch of the Microsoft ‘c’ fonts have been designed the other way around. They’ve been designed for screen first and print second. Now, we’re constrained by those typefaces and that’s actually a good thing.

Paul: Because it makes sure you’re using typefaces designed for the purpose.

Mark: It makes sure you’re using the right tool for the job. Font embeddign could be opening the floodgates to a whole world of pain, I think, in terms of type, and it’s not the designers that will be at fault, it will be, you know, the people who are going to suffer are the users of the sites.

Paul: So, is there a… I mean, surely that shouldn’t preclude font embedding, but perhaps there is an opportunity here, I don’t know, to limit font embedding to fonts that are enabled for the web, and open up a whole new business.

Mark: Could be, exactly, could be. I haven’t really thought beyond my twitchiness of this being a good idea. I haven’t really, I would like to think: “I don’t think this is good” but, I think the crux of my point is moving beyond font embedding, is to actually, the reason why fonts in other tools, which has led to the usage of Comic Sans is because the tools that people can use don’t allow them to make good design decisions.

Paul: Right. While some constraints do.

Mark: So, with some constraints and some steering, can help, so why not as designers, why don’t we get our heads together and think about how we can, kind of, scaffold that experience for people. How can we make, because every one’s a designer now.

Paul: Yes, for better or worse.

Marcus: Even me.

Paul: Yes, Anna wants to talk to you about your design for your band website, we won’t dwell on that now, in the middle of an interview.

Mark: Everybody’s a designer and everybody’s, you know, someone who uses Comic Sans because they think it’s fun and quirky is right in doing so, but what they’re not considering is their audience, and the context that it’s used and all of that. So, that’s pretty much the, my talk in 3 minutes.

Paul: The crux of the argument. I mean you did in your talk go on and discuss the role of typography more generally, which I thought was quite interesting as well, share a few of your thoughts about that.

Mark: About how I see typography as a craft and that kind of thing?

Paul: Yeah, and how it fits into the whole process and the relationship between design and content and that kind of thing.

Mark: So, it was split down into 4 really. This talk was quite good, it was quite therapeutic, in a way, because it made me really answer a lot of tough, ask a lot of tough questions of myself as to what do I think typography is, on the web, to me, what is it personally. With that is type as kind of structure, which, you know, is a lot of information architecture, really, that to me that is typography; it is type as language, how typography is married with content and how the, we’re in a world on the web where designers are designing systems for content to go into.

Paul: Yeah, template-based design.

Mark: Exactly, and they’re divorced from the content, you know, divorced from the language, in that sense, typography’s quite hard to do, good typography anyway; then there was, what else was there? Type as process, so the Jesse James Garrett’s levels of user experience, with the idea that typography in that instance is relegated to the surface plane, which is the visual plane, you know, it’s: “make this look nice” typography; to me that isn’t typography.

Paul: So, what is typography?

Mark: Typography goes deeper, typography goes deeper than how something looks, it is how information is structured, it is how information in understood, it is how words and language is conveyed.

Paul: Can you give some examples of that, because that’s quite, you know, it sounds very good, but it’s quite hard to get your head around maybe.

Mark: Yeah, OK, so it’s, what’s that quote: “You cannot not communicate”

Paul: Right.

Mark: No matter what you do, you’re saying something to somebody, so your choice of typeface says something about the words that you’re writing.

Paul: Yes, it does.

Mark: If, as a designer, you don’t know what those words are, how can you communicate the message?

Paul: Yeah, I mean it goes back to Comic Sans.

Mark: To Comic Sans, exactly, and that’s one of the difficulties, there’s been a lot of talk about art direction on the web, and I see that as the biggest barrier to art direction is that designers are divorced from the content.

Paul: I mean, this is almost quite depressing.

Mark: Yes, really I…

Paul: It’s not really happening.

Mark: Sleepless nights!

Paul: It’s not happy idea, because, I mean, fundamentally, that isn’t going to change, we’re not going to get into a situation, you know, because rightly want to be able to change and update and alter content on their own website and that makes a lot of sense, which means even if you have the content up-front, it may change further down the line. I guess maybe the tone doesn’t.

Marcus: I was going to say you’re looking at tone here.

Mark: The tone, you’re looking at branding and you’re looking at designers being involved right at the offset.

Marcus: And I think that is better now than it was even two years ago.

Mark: Oh, it is, yeah, it is, yeah, absolutely.

Marcus: I mean, we are looking now at involving copywriters, we are pulling copywriters, we’re talking to our clients about employing copywriters through us, that’s new.

Paul: And from the start of the process as well.

Mark: Yes, right. So, we’re doing the same, we’re looking at employing content strategists rather than actually writers, more from a branding perspective, because that kind of stuff, you know, doesn’t really change, depending on the words that you, the values of the client are still communicated and it’s aligning, it’s the designer’s job to align the typography, not just the font, but the way the information is structured and working with a copywriter to make sure the typeface matches the tone of voice. and all of that is a package. So, that’s what I mean about the surface plane; typography shouldn’t be relegated to: “choose a typeface and away you go”

Marcus: Yeah, I mean, that’s the big thing isn’t it, that’s for me, what I’ve taken from this is your, is the font, the typeface has to match the message, basically.

Mark: Yeah, absolutely.

Marcus: It has to fit with the branding.

Paul: OK, good stuff. I mean, that’s yeah, you’re doing some really interesting stuff. I love the way you’re pushing, kind of, what is the conceived wisdom in lots of areas, which I don’t suppose you think you’re doing, you just stumble into these things, obviously.

Mark: Yeah, I did. Getting together this talk was one thing, this talk did not pan out the way I thought it would and to question the very notion of font embedding is quite a…

Paul: Because our whole culture really is built around the idea of choice, more choice is better, but actually that’s not always the case.

Mark: Yep, so I mentioned that in my talk.

Paul: Oh, did you?

Mark: About the jam stall, have you seen this?

Paul: Yeah, yeah. That classic, tell that story, that’s a good one.

Mark: So, there’s a couple of psychologists, a few years ago did a study where they had a jam stall and they had 26 varieties of jam and nobody bought any and then they reduced the jam varieties down to six and sales increased by 10 and it’s just the choice.

Paul: You could almost be overwhelmed.

Mark: Well, yeah.

Paul: Even as a designer you can, you can open up Photoshop, look down that font list and go “crap!”

Mark: So, this is where I showed a screengrab of TinyMCE and that, out of the bag, has 82 choices for a user, so WYSIWYG isn’t great in those terms, but there’s something within there which is, as designers and the design community could build on, which is this notion of styles and how you can use the styles to create a cascade, through your typography, through your design, so we’d limit the end-user’s choices, but not in a bad way, constraints are good.

Paul: No, I mean, the way we now work, because we use our own content management system with our own adapted WYSIWYG editor it, we’ve taken a third party’s and messed it around, that basically we only allow, by default, obviosuly sometimes clients disagree, but we only allow them to mark up the content semantically, so they’re not at any stage picking fonts, because that’s the designer’s job, they’re just describing what the content is, whether it’s a heading or a sub-heading or whatever else, which, you know, obviously, you know, ensures that design style goes through, but also makes it much easier to use for the user as well, they’re not having, you know, a plethora of options and buttons to deal with, so…

Mark: But it goes beyond the web, I think, and this is what I was thinking as I was going through this, the reason why Comic Sans is all over the place is because Word makes it easy for you to make those bad design decisions, so it goes beyond that and content management systems in 10-20 year’s time could look nothing like what we’ve got now and if we don’t think very carefully about this notion of choice, then we could be in a real mess.

Paul: Yeah. Well, certainly we’ll be in a real mess anyway.

Mark: But, you know, a lot of people would push back on that and say: “What’s your problem? That’s fine. Mess is fine.” I don’t agree.

Paul: A little bit of mess is alright. No, I see where you’re coming from and, you know, I think there is a lot of value in that. I think I would personally still like to see font embedding, but I wouldn’t object to that being limited. I mean, one of the big problems to font embedding, as I understand it, and I’m not as knowledgeable on it as you, but is a licensing problem. So, if we have a new generation, I just look at the font industry, you know, the people that produce fonts and go: “Look, you’re missing a trick here, you know, you could create a whole new range of fonts, designed for screen, licensed for the web, and there we go.” So, if that’s what we end up with, I mean, that’s great.

Mark: That would be great, you know, if we got the calibre of typefaces like the new Microsoft ‘c’ fonts, and we got, you know, a library of 40 of those to use, 50, that would be awesome. If we ended up with a way of embedding up to, you know, Bitstream’s library’s what 28000 fonts, you can choose what you like, I don’t see that as…

Paul: Not so good.

Mark: Not a good thing.

Paul: I mean, even as somebody, I mean, I went to art college and, you know, obviously I had to study typography as part of that, I still feel overwhelmed. When I, I know some people absolutely love, you know, going to some of these foundries with all these different fonts and they spend hours picking through and it’s like buying shoes for, no I won’t say women because that will be sexist but, you know it’s almost like an addiction. For me, it just overwhelms me.

Mark: Yeah, no, I’m the same, I’m never, and this is one of the great things about the web is the restrictions in the typeface you can use because it makes you think more about typography beyond the font choice.

Paul: Yeah, which is only a tiny part of typography.

Mark: Exactly, and it makes you really push typography, and people are still pushing Georgia and Verdana and there’re still pushing it and they’re still making great looking sites. Font embedding can only confuse all that, unless it’s done in a pretty structured way, but like you say, the licensing is one big hurdle to get over.

Paul: Well, that was probably the most eclectic interview we’ve ever done, covering lot’s of random subjects,but very good, thank you for coming on the show, Mark.

Mark: No, thank you very much for having me.

Thanks goes to Simon Douglas for transcribing this interview.

Back to top

Story telling

Mark from Taunton writes:

I run a rather dull corporate website for a company who builds and sells pre-fabricated timber houses. It is a competitive market and although a lot of users visit hardly anybody contacts us for a quote. To be honest, I have lost any enthusiasm for the site. Can you help!?

I could answer this question by focusing on the importance of repeat traffic on conversion rates. We could look at generating repeat traffic through the use of articles, newsletters and offers. However, we have covered nurturing repeat traffic before. Instead I want to look at the power of story telling as a way to engage with users.

Users considering purchasing high value products and services have a number of generic questions…

• Can I work with these people?
• Are they experts at what they produce?
• Can I trust them?
• Is the product or service of sufficient quality?

Getting into the zone

Paul wrote a question aimed at Elliott Jay Stocks in our forum that I would like to respond to as well. Paul wrote…

As a designer, I feel times when I am very creative, others when I know an hour infront of Photoshop will be useless. So, fellow designers how do you make yourself get into the zone. I imagine this is even harder for freelancers, or maybe easier actually, as you can pick and choose hours to work.

Like most people I find it very hard to artificially force myself to be ‘in the zone’. However, I have learn’t over the years that there are some things you can do that increase the chance of it happening. These are…

• Change your environment – If inspiration is hard to come by I often find that a change of scenery can be a massive stimulus. Go and work in a different room, a local coffee shop or even in the middle of a field. Anything to kick start your creative juices. In my younger days I was even known to work under my desk or on top of a wardrobe.
• Use a different approach – Another similar approach to changing your environment is to change the way you are tackling the task. If you are trying to design a site in Photoshop move to pen and paper. Try designing just in black and white or reduce your design to simple boxes. Often approaching a problem from a different angle sparks inspiration.
• Create distractions - Everybody always advices that you remove distractions to ‘get into the zone’. However, personally I find this leaves me staring at a blank page until my eyes bleed. An opposite approach that has worked for me is to actually add distraction. For example I will set an alarm for 10 minutes. After that 10 minutes I force myself to take a 2 minute break. These short spurts of creativity seem to work for me and the breaks are a frustration that make me hungry to get back to work.
• Take a break – Proper breaks are important too. Sometimes you need to walk away from a problem before the solution comes to you. It has taken me a long time to accept that some of my best work on a problem is done when I am not consciously thinking about it. If I get stuck I find that watching some TV or going for a walk is a very effective way of putting me ‘in the zone’ when I return.
• Go with the flow – Finally, it is important that when inspiration strikes  you run with it until it has been drained dried. Even if you find yourself in the zone at the end of the business day, do not stop working. Cancel meetings if you need to but make sure you keep going. This is the time when you need to remove distractions and just go with the flow.

Back to top

Typekit – the messiah of web typography?

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

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

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

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

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

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

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

Apple vs Microsoft – A website usability case study

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

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

The article focuses on the following areas…

• Homepage design
• Flow
• Navigation
• Readability
• Search
• Aesthetics
• Consistency

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

Reinvigorating old blog posts

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

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

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

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

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

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

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

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

Creating WCAG 2.0. accessible forms

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

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

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

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

There is also advice on…

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

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

Back to top

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

Read How Site Personas Can Enhance Your Website

Back to top

Steve from Aberdeen writes:

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

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

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

Minimise

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

Validate

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

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

Storage

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

Responses

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

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

Back to top

Good vs Great Design

Cameron Moll is one of the most intelligent and inspirational designers I know. Where some design on an instinctive level finding it hard to describe what makes their designs work, Cameron has carefully deconstructed his work and seems to have a firm grasp of what makes it tick. He understands design. He understands the processes behind design and the rules that make it as much a science as an art.

This deep understanding of design shines through in a free PDF download (Good vs. Great Design) available from his website. The PDF has been produced to accompany his talk at the HOW design conference in Austin Texas and is packed with little insights into good design practice.

The document is only 10 pages long and yet touches on subjects as diverse and grandiose as…

• The nature of great design
• The differences between influence and inspiration
• The need to understand a problem before searching for a solution
• The power of typography
• Definitions of visual hierarchy
• The need for a ‘creative pause’

Eye tracking findings

I have mixed feelings about eye tracking exercises. This is probably partly because I am not particularly knowledgeable on the subject. Although, I am happy to acknowledge that they offer a valuable insight into users behavior and are a useful tool in our usability arsenal, I do have two concerns…

• Running an eye tracking session is expensive. If this leads to a reduction in the number of rounds of traditional user testing or the number of users tested, then I would have serious concerns.
• Although eye tracking provides an insight into where a user is looking, it does not reveal anything about intent or comprehension. For example, if a user only briefly glances at a key screen element this doesn’t necessarily mean they are ignoring it. It could mean that it is well designed and the user quickly processed the information it was attempting to convey.

Ultimately, I would be concerned to see too much weight put on their results. That said, it is interesting to see the results of eye tracking and Eyetrack have released some results from one such exercise that focused on the homepages of news site. Useful nuggets included…

• Dominant headlines most often draw the eye first upon entering the page.
• Smaller type encourages focused viewing behavior.
• Navigation placed at the top of a homepage performed best.
• Shorter paragraphs performed better.
• We also learned that the bigger the image, the more time people took to look at it.
• Our research also shows that clean, clear faces in images attract more eye fixations on homepages.

It’s a good read and although most of the points are common sense, it is nice to have evidence to backup those opinions.

Online reputation management

“Online reputation management” – Sounds ghastly doesn’t it? Sounds like the horrible love child of social media and marketing BS. That said, for better or worse, it is becoming increasingly important to manage how we are perceived online.

As I recently said in an interview at FOWD, our websites are no longer the only place where our brand is discussed. As a result we need to engage with users wherever they are talking about us. The question is, how do we do that successfully?

Whether we are responsible for our organizations brand or just want to know what is being said about us personally, there are various techniques and tools that can help.

This week Sitepoint have brought those tools and techniques together in 3 useful and informative posts…

• Online Reputation Management: The Basics – This post focuses on defining what Online reputation management is and why it is important.

• Online Reputation Management: 16 Free Tools – The post brings together tools for tracking what is being said about you in blogs, on twitter and who is linking to you.

• Online Reputation Management: How to Handle Negative Publicity – This post encourages you to think before responding to negative publicity and shows you how to turn negative comments to your advantage.

Past disasters like Dell Hell are perfect examples of just how important this area is. It is time we all started to think carefully about how we are perceived.

7 Quick CSS Enhancements for Better User Experience

I haven’t seen much written about CSS over the last year or so. It has been as if everything that can be said about CSS, has been said. However, just recently we are beginning to see a few CSS focused blog posts appearing. One example is 7 Quick CSS Enhancements for Better User Experience by David Walsh.

What I love about this post is the ideas suggested can be applied on top of an existing site design. They are just little ‘touches’ that make the site visually more appealing and easier to use. The 7 suggestions are…

• Change the text colour of selected links
• Prevent Firefox scroll bars from jumping
• Give form fields rounded corner
• Control where page break occurs when printing
• Show icons that identify the file type of link destinations
• Change the cursor when it hovers over a submit button or label so it actually looks clickable
• Increase the clickable area of a link  using display:block

Each suggestion comes with an explanation of its benefits and the code required to implement.

Admittedly not all browsers will understand these enhancements. However, because they are not crucial to the functionality that really does not matter. Its a nice example of graded browser support.

Back to top

Paul: Okay, so joining me today is Mike Kus from Carsonified – good to have you on the show.

Mike: Good to be here.

Paul: It’s really nice. So, as the listeners will have gathered by now, we’re doing a whole series of little interviews off the back of ‘The Future of Web Design’ conference, where we can do all our interviews in one go, rather than spreading them out over time.

Marcus: Yay, we like this.

Paul: So Mike has just finished his presentation and there’s some excellent stuff in there, but you were quite kind of, what’s the word… You were quite harsh to the poor web design community and their obsession with details of technological stuff.

Mike: Yeah, maybe yeah.

Paul: You know, all of this “does it really matter whether your code validates”, not that you used that as an example, but I can’t remember what examples you did use, you did have a few didn’t you.

Mike: No, well I mean things like [a lot of debate to un-debate] which I come across and you see lots of times. You know, it’s a question that’s probably never going to get answered. I just come across it all the time still, and it’s like make up your own mind and move on.

Paul: I got the impression that you feel that perhaps as a community we’re a little bit petit, and overly concerned with minutia.

Mike: No, I mean, I love the web community *laughter*, no I do I love it and I love being part of it; it’s great. The funny thing is I started off two years ago doing web stuff, and I really do feel now two years on, that web design… I don’t see many differences to me between web and print now. It’s all the same thing to me, you’re just designing, you know. And I guess because I feel design is so important, I sort of maybe feel a bit left out *laughter* in conversations, because people don’t seem to talk about the design as much. And the reason that talk was called “Forgotten Web Standards”, I mean I know some guy heckled at the end saying about it not really…

Paul: “It’s not really a web standard.”

Mike: No, and I know that. It’s just a cool title I thought – it gets people thinking, and really the part that related to web standards was just because I feel like for a site, good layout and thinking about things from a graphic design point of view contributes to accessibility on a web site.

Paul: Yeah. And also to be honest, I mean what is web standards other than a set of guidelines and criteria. Equally there’s sets of guidelines and criteria about good design; use of colour, you know.

Mike: Well that’s it, yeah. To be honest it was really more just a good title, and I didn’t expect people to start analysing.

Paul: But they will!

Mike: Yeah I know, yeah; I should have known.

Paul: But I think you raised an interesting point, or a good point which is that we can get so hung up in the logistics of how web sites are built that we’re not always giving the attention to the design aspects of it. And even more specific than that, it’s the whole discussion about, you know, we spend a lot of time talking about usability and accessibility, but aesthetics do matter. We almost have this attitude in some ways that aesthetics are just skinning it afterwards.

Mike: Yeah, yeah I know, I agree. I think aesthetics do, well to me they matter. You know my opinion is just my opinion and other people have different opinions, and on a day like today you’re going to get people talking about the code side of things, and I just feel that I know what I know best, and it’s what I can bring to it, it’s what I can bring to the table, and people can take away from it what they like. Someone’s got to do it haven’t they.

Paul: It’s quite interesting, in your mind you don’t make a differentiation between the print stuff you do and the online stuff you do. Surely there are differences Mike.

Mike: Of course there are differences, yeah. But the processes I go through as a designer are the same.

Paul: Right.

Mike: I’ve noticed that much more; I guess of course there are differences. I mean for a start you’ve got to think about things differently in web design because you’ve got to make sure that people understand where you’ve got to go to click things; how you’re going to navigate your way through the site. But once you sort of know that, it’s sort of… Once you’ve built a load of sites and you know that, that’s just something that comes naturally to think about.That’s a different part, that part where you just get used to doing it, then ,he essence of the process is the same. Designing something for a web site, I find there are the same pitfalls and hurdles designing for print as for web. And the funny thing is, and I really feel now as well, that the coding side… I’m not the best coder in the world, and probably not the worst, but I’ve learnt loads in this past year, and I’m writing much cleaner code now than I was a year ago. I enjoy that too, and I know it’s important.

Paul: Yeah. But like you say there are lots of people discussing that, and not as many discussing the design side of things.

Mike: Yeah, and I totally read up on stuff about code; I know it’s important. I guess for me, sometimes I’d want to go in line and get involved in discussions about design, and I know you get Photoshop tips and tutorials don’t you, but that’s not really design.

Paul: Yeah. But a lot of that’s about using the tools of design rather than the principles of design.

Mike: Exactly, it’s all tools yeah. I’m interested in the principles and the ideas and imagination part, you know.

Paul: You talked in your presentation about design aiding the experience, you know; experience based design. I was just interested to hear you talk a little more around that, about how you feel that design can… In what ways can design affect the experience that a user has and what do you mean by the ‘the experience of a user’?

Mike: Well I guess I mean when I go to a web site, and for a start, at least if we’re just talking from an aesthetic point of view, if I return to, and again this is something that appeals to me, if I go to a web site and it gob smacks because it looks so beautiful, that in one foul swoop is my experience of it, you know? But I think there are other things more technical, and when I say technical I don’t mean in a code way, but in a technical graphic design way, you can enhance people’s experience just by… I like the idea of merging more, like you said, things I learnt at college about graphic design and where to make people look in a page, and how to highlight. Combining the technical bits of graphic design, what to highlight and what to push back, how to take people’s eyes in to the bits you want them to read, and then the slightly less important stuff, pushed back a bit, and combining that with an aesthetic. So if you’ve got a great aesthetic and you’ve really thought about where people are looking on your page, and how they’re going to follow through you’re site, to me those things combined is what I mean by designing for experience; a good experience. Because you could obviously design for a bad experience!

Paul: Well obviously, yeah, that’s easier! Another thing that interests me about your work in particular, and really people need to go and look at examples of stuff that you’ve done to grasp this, but you have a very distinct and obvious style; I think you do anyway. So I can look at the stuff you’ve done for Carsonified, and then even the stuff you’ve done here for Microsoft and there’s obviously a consistent theme to that. Do you think that having a very strong style creates problems sometimes when you’re trying to reach different audiences, and you’ve got to battle with your own style, do you find that a problem?

Mike: Well, this is something I find really interesting because growing up as a graphic designer and stuff, I was always someone who basically… For a start if you’re working for clients and you’re an agency, and you’re getting different jobs, you’ve obviously got to be able to create something completely different one day to the next, potentially. And the funny thing is I actually carried that through into my personal work, and I was like “I can’t do something like this because I’ve done something that looks a bit like that before.” But then you know how you can get famous illustrators who basically churn out the same stuff all the time and they get seriously famous, and one company gets them to do something, and another company…

Paul: They come to that person because of that style.

Mike: Exactly, and I think the only reason my stuff you’re seeing… if you looked at the Orchestrate site, that’s me turning my hand to something through a brief.

Paul: Yeah that’s true actually, yeah, because that has got a very different style.

Mike: I’m just answering the brief there, you know, so it is something I can do.

Paul: Sorry, I didn’t mean to imply you couldn’t, it’s a constant discussion isn’t it.

Mike: I don’t think you implied that *laughter* But it’s interesting, and the only reason I do bring my style into the projects you see that overlap each other is because I’ve had the freedom to do so.

Paul: Yeah, and I guess to some degree, the style that I’m exposed to is the style that’s aimed at people like me.

Mike: Yeah.

Paul: So the fact that you did the Microsoft stand here at ‘The Future of Web Design’, well actually it’s good that it’s got the same style as the other stuff that’s going on because it’s a style aimed at web designers and people like me.

Mike: Yeah, and another thing about doing stuff that’s similar, is you do get to get known for a certain thing, which in some ways I think “is that good or bad?” I don’t know, but I think I’m keen to make sure people know I can do different stuff. But at the same time I’m happy to be known for a certain style, because I think it’s sort of like an identity you get. And so I’d like to keep a balance there, but I definitely don’t mind being known for something that’s got a feel about it.

Paul: Yeah. I mean equally after saying that, which kind of brings me on to the next topic I want to talk about, is that the style that I typically associate you with is quite illustrative, you know, you’ve got this certain way of doing things. And then your set of slides for this week weren’t at all like that, they were very typographic, and you did talk a little bit about typography. We interviewed Mark Bolton on the subject of typography as well. I’m interested in your take on typography because you seem to use letter forms almost as design tools rather than necessarily as standard typography if that makes sense.

Mike: Yeah, well that’s interesting because when I did those slides, the reason they look like that is because I basically took a theme and I got interested with that, what’s his name… I can’t remember, a Swiss graphic designer, very famous I can’t remember his name now, it’s escaped from me, but it’s sort of Swiss modern graphic design, and I was looking at Swiss modern graphic design and some Russian constructivism stuff on Flickr, you know. And because when I was at college, that sort of graphic design, I was brought up on that; it was the first thing I was interested in, and because it was a graphic design themed talk, I used that as the style. And it just so happened that throughout it, the experiment with type and shapes and stuff was something that just happened in making those slides, and I suddenly realised I was getting something out of using type in a graphical way, it’s not just about the words, I mean a slide I like – my own stuff I love! *laughter* – that one that says (and I loved doing that slide and I think it looked great) was the one that said “buck trends and break conventions”, and conventions was all mashed up in different ways. There’s something beautiful about type though isn’t there, like huge letters, and I wish I could have seen those slides, because that screen was so big.

Paul: It looked spectacular, yeah.

Mike: There was a huge, massive letter N, you know. I guess now it excites me, type; I think it can be the basis for great design, not just in a traditional typography way, but actually great graphic design. I guess I think the whole type debate as in “where are we going to get all the fonts from”, or “what’s going to be the standard way of using them” – for some reason I don’t feel restricted by the web font thing.

Paul: No, it’s interesting. Mark was saying exactly the same thing as well.

Mike: It’s not something that bothers me, and I’m quite happy.

Paul: I mean a lot of the ways, certainly the ways you used them in the slides, we’re talking about using type as a graphic element in those cases, rather than necessarily to convey large amounts of copy; it’s a subtlety different thing going on there.

Mike: Yeah, yeah.

Paul: I was also quite interested when you talked in your presentation about a logo design that you did, and about how you were being stopped at every turn by the client effectively because they were saying “no, no, we don’t want to be associated with that etc.” So you then added in a strap line into that which you then built the logo around the strap line rather than the brand itself. Now, that was quite interesting because that gets into the realms of relationship between copy and design, and how the two things work together. And in that case, you came up with the strap line did you?

Mike: Yeah, I’m quite into… I mean, I don’t want to say it myself, but Ryan for example seems to think I’m quite good at copy – which is nice of him to say. It’s a way I work quite a lot, I’ve done loads and loads of logo / branding stuff in the past, and I did something, for example, for the Body Shop once. Basically I could do anything, and it was about raising money for a school in Kosovo to get it built, and they just wanted a poster. I just thought of a strap line anyway, because I could do anything I wanted. It was “building a future”, and that was all it was, and it had all these huge letters. Well it had “building a future” and the letters were all piled up and leaning against each other. I guess often the first thing I think of is copy whenever I’m designing something, especially if I’ve got a new site to design, I’m like well what are the words, what’s going on, what’s it about, is there a strap line, do you need one – you know – what’s written in the first paragraphs in the home page, is there something in there I can use to spark the idea for the design. I think copy in that respect has got a massive relationship to design. It’s rubbish trying to work with Latin text.

Paul: Yeah I know, lipsum, yeah.

Mike: It’s alright for that filling in a paragraph or something, but it’s nice to have that proper copy to hook your design on to it; it can be really helpful.

Paul: The thing that you intrigued me with is that you were going through things like layout, colour, typography, then you hit imagery, and you said there’s a whole presentation there. I want to know what the presentation is, I want to know what is it that you know, obviously there’s a lot of depth there that you couldn’t cover, and I’m just interested in that.

Mike: I think what it was, you’ve talked about my illustrative stuff already, so say you use that for the sake of argument right now because you could apply this to photography as well, I guess to me a site doesn’t have to be like you put it together; I don’t know, I’m going to put a picture here or an illustration there… It can evolve round an illustration from the very beginning. I know it’s a pretty one off site, but the Twiggy site for example, which is just a bit of fun, really quick, but that was just literally me, do what the hell I want, just have fun, and it wasn’t the most practical site design maybe, but you know that just literally was an image that built up and changed, and it was the basis for that site design. It wasn’t just in the site it was the site, and it had the huge letters in the background. I only had a short slot, and if I had more time I would have gone into why I felt it can be the basis for your site, not just something you add to it. Your site can grow from your photographs and illustrations rather than putting them into your site.

Paul: That’s a nice way of thinking about it, yeah. Because I do tend to start with the grid structure and the layout, and all that kind of thing, and then slot imagery in which I can see what you’re saying, you can miss a trick there if you’re not careful.

Mike: Yeah it’s funny I’m changing the way I work lately, and I was talking to Keir about this. I’m starting to think about stuff like you remember when Andy Clarke said he works from the inside out, and I’m starting to do that design wise.

Paul: Right, okay. You mean start with the detail or something?

Mike: Well start with something on the middle of the page. I just open a Photoshop document to start, and I know at one point in the page I’ll have like this… For example, I’m working on something at the moment, it’s got the planet Earth, and all I’ve got on the page is the Earth, I’ve got some bits coming off of it, and then I’m going to add this descriptive paragraph, and I haven’t got anything else on the page at this point, I’m just building it out.

Paul: Wow, that’s quite interesting.

Mike: Rather than thinking “ohhh”, and worrying about things like navigation afterwards, because it’s so easy to just go “no, nav-i-gat-ion”, and then I think no wait a minute what have I done, it’s literally just this autopilot.

Paul: Yeah, and to be honest that’s almost why, in the end, I moved on from design in my career, because I felt I was beginning to do exactly that, go on autopilot. So there is this need to find ways to refresh the way you’re working and stuff like that.

Mike: The funny thing is, it’s natural progression as well. It’s not a choice I’ve made, I just found myself doing this.

Paul: That’s good, that’s really good. You talk a lot about “I had a lot of freedom on this project; I could do what I wanted.” You said that several times in this interview. Do you like that, or do you like having constraints? Because a lot of people that are listening to this are going, “well it’s all well and good for him because he’s working on internal projects and he doesn’t have clients”, and that kind of thing, although you are doing client work now. So there we go, there’s a nice comparison between the client work you’re doing and the internal stuff. Where does your heart lie?

Mike: Yeah, I don’t know actually. Sometimes I hate having no restrictions. Sometimes, no restrictions is the worst thing in the whole world, I hate it. Sometimes it can be terrible, sometimes it’s great. Because if you’ve got no restrictions at all sometimes it’s so hard; that Microsoft thing, I was like “what the hell am I going to do, I haven’t got a clue”. For a start, I’ve never designed a stand before, let alone just an idea. I spent three days getting to that, just getting to the beginning of that idea. I literally produced nothing for three days. The fourth day I was like, “I think I’ve got something”, and that was hard because it had no restrictions because the whole point they came to us was because they wanted to do something different. So the pressure was on to think of something really different, and it’s hard when you can start anywhere. Sometimes it’s really nice to have restrictions, like that Orchestrate site was nice; I got back after Christmas, and John Hicks has put together roughly what had to look like.

Paul: Right. You had to carry on with his style.

Mike: Yeah sort of. I mean it did progress from that, but it had a logo and a colour scheme and a nice, tidy, neat… you know I just had to follow it through and it was nice, I enjoyed doing it. It was a nice break from “you can do anything”, which is actually harder I think.

Paul: Right, that’s interesting.

Mike: Much harder actually. I used to do music quite a lot, and in a way what was always helpful was restricting our instruments completely, and not having much to work with. Because it sort of sets you on a path at least, where as when you’re starting out and you can go any which way you want…

Paul: Yeah, it’s too open.

Marcus: It’s the starting part that’s the hard bit; it’s that initial creative spark. If somebody said “this is my idea, I want you to build me something,” then it’s like great I can do that. But, what’s better about when you’ve got, because I do a quite a lot of music as well (or did), it’s when you get something going and it’s good, that’s more satisfying than working on someone else’s work, but if it’s one of those days when it’s just not coming then, you know…

Paul: Which brings us on to what I wanted to wrap up with, which was you mentioned this slide about bucking trends and breaking trends and that kind of thing, and you advised against CSS galleries, you advised against Smashing Magazine’s trends for the last year, which people turn to for inspiration because they struggle to know where to begin. So if you’re advising against those things, which by the way I think is an excellent piece of advice, we asked Jim Coodle this as well, where does your inspiration come from? Where do you turn to if you don’t turn to that kind of thing?

Mike: I guess I do advise that, but I don’t like to sound like I’m telling people what to do *laughter*

Paul: Well if you stand on a stage…

Mike: I guess, yeah. But the funny thing is, I’ll be in a book shop… A year ago, for example, I was in a book shop and I picked up Jamie Oliver’s book, it was made of a nice sacky cover, don’t know if you’ve seen it, it’s got white and blue in it, it was beautiful. The graphic design and the layout was lovely, and I was like “oh I’ll buy that”, not for cooking, just because it looked nice, and I was like “I’m going to design a web site like that”. And someone on Twitter just said something about how they’d just discussed Mike Kus’s talk over lunch and how much of an idiot I am, and something about imagine your web site in print, which is what I said at the end.

Paul: Which I thought was brilliant, but he had problems with that did he?

Mike: Yeah, well he said it’s absolutely useless, different mediums, why would you do that.

Paul: It’s to take it out of context, and give yourself a chance to look at it from a completely different angle. It would be the same as projecting it huge on a wall or sketching it out in chalk, or whatever.

Mike: Well that’s it, exactly. It’s like what you said a minute ago about it’s so easy to go into autopilot with these things, and I think sometimes you need something to jolt your brain into looking at it a little bit differently. Because to me there are a lot of things on the web… Just imagine if you get a web site like your average one – it’s got the gradients all over it and everything, you put it on a magazine page; it would look weird. You have to ask yourself, why are you doing that. I know it’s a different medium, and I think we can all be clever enough to realise that, and there’s obviously bits I’m not going to say it’s got to be like a magazine, but I think it’s worth asking yourself those questions.

Paul: In the same way as in the talk, which I thought was really nice, was you had these amazing set of slides that had a very distinct look, and that was being projected massive on a wall, and yet you transposed that into a poster you gave away to people. So you were crossing those mediums and using inspiration from both which I thought was excellent; it was good. It went well didn’t it?

Mike: It was good, yeah I was pleased.

Paul: Excellent. Well thank you so much for your time Mike, that was really useful, and I think it will be very helpful for people. Especially freelancers that are stuck by themselves, and stuck in their own routine of working. It’s nice to hear how other people work, so thanks.

Mike: Cool. Cheers, thanks a lot.

Thanks goes to Gareth James for transcribing this interview.

Back to top

APIs, source control and Ryan Carson

On show 164 Ryan Carson shared some more advice on running and building web applications as part of his ongoing series for Boagworld. Although Ryan’s advice is excellent, Boagworld listener Glen Bennett wanted to offer an alternative perspective over a couple of Ryan’s suggestions.

Hi Paul and Marcus, this is Glen Bennett from small business hosting. I was excited when you had Ryan Carson on the show talking about web application building, finally someone on the show who knew what they were talking about, however he cave out some information that was a bit misleading and I wanted to clear it up for your listeners, first of all he talked about spreedly.com and indicated that their fee is an alternative to the standard processing fees, in actuality it’s a fee that’s in addition to all the standard processing fees, there service sits in front of the processing gateway and therefore it’s an additional fee and there fee is not insignificant, in addition to that you would have to build an interface to their product. So there is some building cost at your end. I agree that building a processing engine is pretty substantial and something that you want to get help with if you possibly can there are packages out there anywhere from a few hundred dollars to a few thousand dollars that are actually pre-written source code that you put into you payment package, you have to do that pretty early in the process so that you can make sure that your user registration matches up with the processing system.

The second thing he talked about which is a source code repository, which is GIT hub, fantastic product and I recommend it highly, I think all developers should go and look at it, however the free service is primarily for a public repository so I don’t think he would have wanted to put DropSend source code into a public repository so their free service is not something that you’d probably want to use for your web application unless it’s an open source web application and there is a small fee for GIT hub but a lot of hosting packages come with SVN included for free so you might want to look into that, you can use GIT locally on your local system and then SVN them up to your free repository on the internet so you have a remote repository that’s free during development time. So there’s a couple of tips, a couple of corrections for web developers, I hope that helps and I want to thank Ryan Carson for the additional information that he had in his tips, I found it all very useful. Thank you very much.

Blog writing inspiration

Recently we received an email from Jon. He wrote:

I was wondering how do you find inspiration for your articles? How do you expand upon your initial idea and is there a process you go through when writing an article? How long do you spend writing an article? And lastly what do you think is the hallmark of a good article?

These are all good questions. The majority of blogs  have long since been abandoned by their authors. The owner either struggle to think of new content or finds running a blog more time consuming than anticipated.

I don’t claim to have all the answer when it comes to successful blogging. However I can share with you a few principles I work by…

• Limit your time – I work best when I have a deadline. If I have too much time I over think things and pick at the details. This makes blogging  high maintenance and hard to keep up. Unless the content of a blog post is going to be used elsewhere (see Recycle below) I will never spend more than a couple of hours writing something. To me a blog is about sharing ideas, not writing a perfect piece of copy. I know I am not the best writer in the world and so make up for this by sharing ideas on a regular basis. In order to do that, I limit the time available for each post.
• Keep an ideas list - Ideas for blog posts occur to me all the time and I have trained myself to constantly ask ‘would what I am doing make a good blog post?’ However, you can guarantee my mind will go blank the moment I sit down to write one. That is why it is important for me to keep a list of ideas. Whether you add them to a notebook or keep a list in Wordpress, you need to make it as quick and easy to add ideas as possible. Also, when I add an idea, I try to flesh it out a little. Instead of just adding a title I also include a rough synopsis of what I want to cover.
• Create an outline – Before I begin writing, I always create an outline of what I want to cover. I usually do this using Omni Outliner where I jot down random thoughts on the subject. I then sort those ideas into a logical structure. Once the structure is in place, writing the final post is much easier. This is because I know where I am going. It also ensures I lead the reader through a story, rather than throwing random thoughts at them.
• Write first, edit later – Its easy to get caught up in spelling, grammar and structure to the detriment of flow. I tend to write posts in one go. I don’t re-read what I have written until the whole thing is finished. Stopping to check what I have written breaks my focus and leads to disjointed articles that take longer to write. Better to write the whole thing and then re-read the post afterward editing it then.
• Write for your audience – Before I begin a blog post I always ask myself whether this will be of interest to my audience. Sometimes I indulge myself with personal posts, but most of the time I work hard to stay on topic and only write content that is focused on meeting my readers needs. This applies not just to the subjects chosen. It also to the style of writing and terminology used. For example, I try to avoid too much technical jargon because it may not be accessible to website owners. However, I don’t always succeed!
• Write for scanability – There is a vocal minority in the blogging community who frown upon image heavy, list based, blog posts. However, I think there is a lot to be learnt from them. People who subscribe to my blog read a lot of other blogs too. With so much information to keep abreast of they rarely have time to read everything I write. I therefore write in a way that lets them get the ‘gist’ of a post without reading every word. Lists are one way to do this, as is the use of imagery. However, I also use headings and front loading too. Wherever possible make content easy to skim read. If you do not, users are likely to skip it entirely.
• Ask for suggestions - I have found the best way to come up with ideas for my blog is to ask my readers. I actively encourage people to email me with questions, reviews or comments and these inspire ideas for posts. In fact the very question I am answering here would make a great blog post. Hmmm… perhaps I should stop before I waste the opportunity :-)
• Ask your readers opinion – As well as asking for suggestions also ask for feedback. A good blog post does not have to be you sharing your words of wisdom with the world. It can also be asking a question and encouraging feedback. Some of the best content on blogs  can be found in the comments, rather than the actual posts. Try to write posts that encourage a dialogue rather than a monologue. Also if you do manage to spark a passionate discussion, followup with a second post that summarizes the views expressed.
• Recycle – Finally, I am a great believer in recycling ideas. For example the answer to this question will appear on my blog, on the podcast and also will make a great Audioboo tip. Many of my best blog posts have either come out of a presentation I gave or a chapter from my book.

This is not a definitive set of guidelines and every blogger will work differently. However, this approach has helped me to continue blogging for over 4 years. I will leave it to you to judge whether the quality has remained high ;-)

Back to top

Good news everybody! Boagworld now has a Facebook page. I know, its exciting isn’t it. Contain your enthusiasm, you are making a scene.

Seriously though, I wanted to let you all know because I am aware I spend most of my life refusing friends requests on Facebook. I made a decision early on to keep Facebook for personal friends rather than a promotional tool for Boagworld. I always hate refusing people and should have setup a page or group ages ago. Somehow I never got around to it.

Anyway, the Boagworld Facebook page now exists so make sure you take a minute to join it.

Back to top

What is more important – driving traffic to your site or encouraging as many people as possible to see your content? Believe it or not, they are not one in the same thing. In this week’s feature Paul looks at 10 ways you can make sure your content is seen by as many people as possible.

Read ‘10 ways to put content in front of more people’

Back to top

This week I would like to recommend The Long Tail by Chris Anderson on Audible.com. The Long Tail is a superb book that I would recommend to anybody running a website especially if it is an ecommerce site. The book examines how the web has changed the value of information and commodities. It looks at the huge opportunities available to reach ever more niche markets and make money from the long tail.

Best of all if you sign up with Audible you can get this book totally free. Simply go to www.audiblepodcast.com/boagworld and claim your free credit.

If you want to listen to it, Audible has it! With over 60,000 titles and virtually every genre, you’ll find what you’re looking for. Get a free audiobook and 14-day trial today by signing up at www.audiblepodcast.com/boagworld.

Back to top

Bubble Timer Review

Hi Paul, hi Marcus and hello to the Boagworld listeners, my name is Emily and I am here to submit a review of a time-tracking application called Bubbletimer.

First of all I have to make a little apology for the sound in the background. I work from home and it turns out I live on quite a noisy street which I have to say I don’t really notice until I try and make a recording and then all sorts of weird sounds in the background, so please excuse the background noise.

So I’m submitting a review of Bubbletimer in response to show number 158 where Paul talks about the reality of home working which is also a blog post on the Boagworld website and it was actually the blog post which really inspired me to want to make a response, in particular a comment by XX who asked about how Paul tracks his time. I immediately wanted to make a response, which I did in the comments but I thought I’d share it here to share this fantastic time-tracking web application that I use. It’s called Bubbletimer and basically what it does is it tracks time in 15 minute increments by activity and then by day and it produces reports for your chosen time period, say a week.

There is a 15 minute time chime reminder which reminds you to track your time and forces you to consider what you’re doing and whether that is what you’re meant to be doing or whether that’s the most productive thing you could be doing.

There is also a mobile web interface which can be quite nice if you’ve got an iPhone, you can be online all the time. There are also multi-user capabilities in that you can share reports with others so if you’re working in a team you can see how much progress everyone else is making.

What it doesn’t do is; it doesn’t convert time to time slips, it doesn’t integrate with an invoicing application and it doesn’t recognise when you’re inactive or when you’ve changed tasks, as I know some time tracking applications can do.

So really it’s for self-employed people, freelancers or those working on fixed-price projects who want to track their progress on that project, or anyone who needs help motivating themselves in getting things done. It’s not for employees because of it not having time-sheets or integrating into a invoicing scheme, I’d say it’s not good if you’re self-employed or a freelancer working on an hourly basis.

What’s great about this application is that you can track your non-billable time and for me that’s been a real lifesaver. I am one half of a small web design partnership and I do lots of accounting, quoting, emailing and lots of tasks that are not specifically billable, or billable tasks that I’ve already quoted a set fee for, so with this I can measure the actual time spent against what I’ve quoted.

Of course you can also use it to track how much time you actually spend on ‘Social Networking’ every day, you know, see how long you actually spend on Twitter or commenting on blog posts. Another example of one of the tasks I’ve been tracking with it is my bookkeeping and it’s really been useful for me to see how much time I’ve spent on that and whether I ought to think about hiring a bookkeeper part-time because I can look at my reports from a week or over a month and see how much time I’ve actually spent doing that.

It’s a really simple, easy-to-use interface, there’s some really nice details in there like the ’scribbles’ when you complete a 15 minute bubble of time are different, so there’s kind of a texture to it there. It’s also growing to accommodate popular feature requests as requested on the Get Satisfaction forum, which is really responsive if you have any problems, or if you have feature requests, I’ve seen new feature be introduced since I’ve been using it.

Now I shouldn’t end without telling you that it isn’t free, there is a cost, but it’s just $20 a year and I think it is well worth it for someone who wants to get things done. As I said my name is Emily and my Twitter name is @gradualist you can find out more about me there, thanks for listening!

Do you have a tool that you swear by? Maybe a web design tool, or just a tool that keeps you organized? If so send us an audio review we can put on the show.

The role of gender in web design

We have received an interesting audio question from Dennis. He asks whether any of our clients have expressed a concern over the gender of our designers. He cites his own experience where a female client said his designs were too ‘practical’ and not ‘fun enough’ because he was a man.

First off, I have to say that your client sounds rather sexist to me! The implication that men cannot design a ‘fun’ site is absurd.

That said, gender does play a part in a designers style. For example, women are much better able to perceive colour than men and so tend to make better use of colour. However, gender is just one of many factors that shapes a designers style. Other factors include:

• Cultural background
• Design schooling
• Personality
• Design leaning (e.g. illustration, typography, photography)

The list could go on. The point is that what we perceive as masculine or feminine design, is not solely produced by the associated gender. There is overlap and a blurring of  lines.

Where I think things get more tricky is when a male designer is asked to design for a female audience (or vice versa). This is more challenging because good design involves empathy with the user. Unsurprisingly it is harder for a man to put himself in the position of a woman. However, it is probably no more difficult than for a young person to visualize the needs of an older user. It is the ability to do this that separates a good designer from an exceptional one. The key is thorough research into the target audience and an ability to steer clear of preconceptions and stereotypes.

Back to top