128. Details

Posted in Classic shows on July 30, 2008 by Paul Boag

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

Podcast: Download (23.0MB)

Download this show.

Launch our podcast player

News and events

Silverback Launches

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

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

PatternTap

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

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

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

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

Google App Engine Update

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

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

S3

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

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

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

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

Interview: Dan Rubin The Details Of Design

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

Dan Rubin:Good to speak to you Paul.

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

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

Paul:Oh was it?

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

Paul: laughs

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

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

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

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

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

Paul:A subconscious expression?

Dan Rubin:Yes.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks to Sarah Galley for transcribing this interview.

Linkage

You can find Dan Rubins site, Superfluous Banter here.

Typography

Layout

Colour

Listeners feedback:

Managing a Bigger Team

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

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

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

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

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

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

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

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

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

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

Terms and Conditions

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

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

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

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

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

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

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

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

123. Plight

Posted in Classic shows on June 25, 2008 by Paul Boag

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

Podcast: Download (30.4MB)

Download this show.

Launch our podcast player

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

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

News and events

SPAM meltdown

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

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

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

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

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

Form Analytics

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

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

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

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

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

Art direction hits the blog

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

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

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

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

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

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

Prototyping

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

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

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

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

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

Feature: The plight of the in-house designer

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

Reviews: Textmate and Top 5 Tips for Web Designers

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

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

Textmate by Teifion Jordan

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

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

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

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

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

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

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

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

Top 5 Tips for Web Designers by John McFarlane

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

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

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

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

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

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

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

Listeners feedback:

Newspaper columns on the web

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

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

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

The usability concern

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

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

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

The technical concern

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

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

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

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

Estimating dev/creative work

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

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

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

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

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

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

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

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

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

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

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

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

122. Screencasting

Posted in Classic shows on June 18, 2008 by Paul Boag

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

Podcast: Download (28.7MB)

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Typography everywhere

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

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

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

The list could go on.

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

Accessibility cheat sheet

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

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

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

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

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

Advice on wireframes

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

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

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

Top five tips for new web designers

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

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

The tips include…

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

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

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

Feature: Creating Screencasts

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

Interview: Ian Lloyd on Sitepoint HTML Reference

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

Ian: Hello Paul!

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

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

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

Ian: I’ve heard my dulcet tones before.

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

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

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

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

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

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

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

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

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

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

Paul: *Laughs knowingly*

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

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

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

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

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

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

Ian: Sorry Paul.

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

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

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

Ian: Ah yes.

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

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

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

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

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

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

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

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

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

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

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

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

Paul: Nobody is beyond hope.

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

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

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

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

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

Paul: There you go then.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ian: What luck “HTML SUCKS!”?

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

Ian: Yeah something like that.

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

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

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

Ian: OK. Thank you very much Paul.

Thanks to Lee Theobald for transcribing this interview.

Listeners feedback:

Can you trust developers?

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

Inaccurate estimates both in cost and time

A lack of commitment to carry out all agreed items within a scope when it takes longer to accomplish than originally planned.

The need to ask for more money when the scope doesn’t change.

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

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

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

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

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

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

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

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

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

The life cycle of a website

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

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

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

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

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

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

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

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

120. WCAG 2

Posted in Classic shows on June 4, 2008 by Paul Boag

In this weeks show we talk with Patrick Lauke about WCAG 2 and we discuss the perils of blindly following conventions.

Download this show.

Launch our podcast player

News and events

IE testing made easy

Testing in Internet Explorer is horrible for many reasons. Not least the fact that you cannot run multiple versions of IE on a single operating system.

In the past there have been a number of solutions to this problem. There were standalone versions of IE. However, it quickly became apparent that they did not behave as IE does natively. There are online services which provided screenshots of your site in different versions of IE. However that does not give a sense of whether interactive elements were working correctly.

The only really feasible solution was to run multiple operating systems as virtual PCs but this was slow and inconvenient.

However, it looks like things might be about to change. DebugBar have just released IETester. A free web browser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7, IE 6 and IE5.5 on Vista and XP all at once.

They are currently describing it as Alpha software (whatever that means), so it sounds like it is still a work in progress. As with any such software it is hard to know if it is accurate. If you do choose to use IETester, I would still recommend giving your site a final once over in native copies of IE before making it live.

That said, this does look very promising and I will be trying it out myself very soon.

Hosting your Javascript libraries

Our next story is an announcement from Google. They have started to host the main Javascript libraries including…

jQuery
prototype
script.aculo.us
MooTools
dojo

This means that if you are using a Javascript library it does not need to run from your own server, but can pull it directly from Google.

“Why would I want to do that?” I hear you cry. Mainly to improve performance. First, according to people much cleverer than myself the Google servers are faster and can deliver libraries much quicker. I know little about server performance so I will have to take their word on this.

However the main reason is that if enough web developers use this approach we will see a significant caching benefit. Lets say a user visits headscape.co.uk and this site pulls its jquery library from Google. Boagworld.com does the same thing so when the user visits that site it uses the cached version (from the visit to Headscape) rather than re-downloading it again. As more and more sites pull their Javascript libraries from Google the likelihood that a user already has a cached copy of that particular library increases.

Of course allowing Google to host your Javascript does require a level of trust. What if Google goes down? What if Google turns evil and starts using Javascript to manipulate your site? What about the data this approach gives Google about your site?

However, if these concerns do not worry you, then there are definitely tangible benefits.

Prototyping website interaction in flash

Next up we have a tutorial demonstrating a quick and easy way to prototype complex website interactions.

In some ways the static Photoshop comp is becoming less useful. Modern websites have numerous interactive elements that are hard to convey through static images. There is a need for something that can demonstrate this functionality.

We have spoken before about wireframing interactive websites, but not how to demonstrate changes in visual look and feel. This article on boxes and arrows suggests that Flash maybe the answer.

The advantage that flash has over something like a clickable PDF is that it allows for easier updating when the client wants to make changes. However, it does require basic Actionscript skills. Fortunately, the tutorial talks you through these step by step and none of it is too challenging.

If you are looking for a way to better demonstrate interaction in your design comps then this might be the answer.

The rule of thirds

The final news story today is another post from those lovely people at Smashing Magazine (we love them since they said nice things about our podcast!) The article entitled “Applying Diving Proportion To Your Web Design“, introduces the reader to the fascinating subject of the golden ratio (also known as the divine proportion or rule of thirds.)

If you haven’t come across this principle before then I highly recommend reading more. The rule of thirds emerged in the Renaissance but has always excited in nature. There seems to be something inherently pleasing about these proportions and they occur again and again. There is something about human perception that is naturally drawn to this composition. We can use this to our advantage when designing websites.

The article goes on to demonstrate how the golden ratio can be used in all aspects of design from photography to web design. In particular it focuses on the benefits this can provide to the grid structure of your sites.

Admittedly if you have not come across the rule of thirds before this can all sound like hocus pocus. However it really does work. Following principles like this can dramatically improve your designs. What is more they can be followed by anyone even if you would not consider yourself a designer.

Feature: Defying Conventions

As the web matures an increasing number of conventions are emerging. But should we always follow the crowd? In this weeks feature we discuss just that.

Interview: Patrick Lauke on WCAG2

Paul: So joining me today is Patrick Lauke from splintered.co.uk, is that best way to refer to you?

Patrick: Yeah, it’s one of my many monikers, yes.

Paul: Just so many presence on the web, you’re just so well known. Good to have you on the show, Patrick, it’s been a while.

Patrick: Thanks for having me.

Paul: I don’t think you’ve actually been on Boagworld before have you done Dot Net with me, but I don’t think you’ve done Boagworld.

Patrick: Exactly, yeah, I’ve only had the pleasure of sitting on the Dot Net one.

Paul: Well this is the proper grown up, you know, professional version compared to Dot Net.

Patrick: Super!

Paul: So the reason I wanted you on the show, Patrick, I have to be honest is as much for me as it is for my listeners this time round, because you are our resident accessibility expert, and we had a conversation a long time ago on the show about WCAG2 and we talked a little bit, not with yourself but we’ve talked on the show before about WCAG2 and it was coming along and all the rest of it, but it suddenly occurred to me we haven’t done anything on it for ages, and I’m wholly ignorant on the subject and the current state of affairs, so I thought, I know, I’ll get Patrick on the show, I’m sure he’s bothered to read it and knows what’s going on. Hence you’re here.

Patrick: Excellent.

Paul: So you’re not going to let me down, you have actually read WCAG2 have you?

Patrick: I have, I’ve been fairly involved with it, yeah.

Paul: Good! That’s encouraging. OK so perhaps the best place to start is, where’s it currently at, what’s the stage of development at the moment?

Patrick: Right, well literally a few weeks ago it entered what’s called the Candidate Recommendation Stage, all part of that W3C terminology they use. It wasn’t…it has been in last call for about 2 years now, but yes, Candidate Recommendation really means that now the WCAG working group and the general public has been kind of sending in comments etc on the status of the document. They’ve all reached kind of a broad consensus about, yeah, it’s fairly…it’s pretty much there, you know, it’s fairly accurate, technically there’s no big howlers in the actual wording of the things. I mean there might still be a few minor, minor details that change from now until the end, but pretty much the actually core of it is as good as it’s going to get.

Paul: OK.

Patrick: And really the…kind of the purpose of this Candidate Recommendation Stage, you know, why aren’t they going straight out and releasing this now as a standard, is really to give people an opportunity to start test driving, you know, what WCAG2 says in its current state, so working group thinks it’s pretty much there, let’s test it out actually in the real world, so give people the opportunity to run it…run their websites through their paces according to WCAG2, see if, you know, things are feasible, if it’s realistic to kind of say, yeah, this will be the standard from now on, and they’ve actually…they want to make it quite official, so if you have an intention of kind of doing that, you have a website and you want to actually officially say, OK, I’m going to use that website to test WCAG2, they’re now asking for people to basically register their interest and to actually, you need to then implement that, you need to say, right, I’m going to run WCAG2 on my site and by the 30th of June you want to be able to basically say right, I’ve finished it, and then give feedback and basically say yeah, no problem, or you know, we tried and tried, but this is actually not realistic, it might need to be modified, but unless there are major, major issues that come out in the wash as people are now trying to implement it and test drive it, it should be fine really. One of the main things with WCAG2 is, as with any kind of Candidate Recommendation documents, is really that there are a few items where even though we’ve got consensus, the working group isn’t 100% sure that they’re going to make it in their current stage, so they’ve kind of gone very ambitious with some of them, but they realise that yeah, it might not actually make it through, and they’re called….quite fittingly, items at risk, which in the latest CR document, Candidate Recommendation document, they’re clearly marked, and they’re basically…the testing phase is really about, let’s have a look, specifically these kind of items at risk, can they actually be implemented in the kind of more stringent way that we’ve worded them? If not, we might have to scale them back. I mean there’s one for instance where it says, it talks about, you know, colour contrast, and they’ve worded it currently that the contrast needs to be on a ratio of 5:1, so if you’ve say got, you know, text and background colours, you need to have…want to do your calculations for the various algorithms, there needs to be a contrast of 5:1. Now they’ve put that at risk, because some people still felt that it might be a little bit….setting the mark a little bit too high, and they were already saying, OK, well if it turns out that it is too ambitious to say, right, you need to have that ratio, that they’re happy to kind of jump back to 4.5:1 or even 4:1, so it’s kind of things like that, we’re really now at the nitty-gritty stage with these kinds of things, of saying, you know, can it actually be implemented.

Paul: So this is getting very close to the point where, you know, your average website owner and your average web designer needs to be…we need to be looking at this now, don’t we really? I mean we’re getting that close?

Patrick: Yeah

Paul: OK, I mean it sounds like things have gone a long way since the kind of early stages where WCAG2 was quite heavily criticised. I mean what kind of shape do you personally think it’s in at the moment?

Patrick: Yes, I mean looking back, I think it was May 2006 where Joe Clarke wrote his kind of vitriolic post, to Hell with WCAG2 on A List Apart, we have definitely come a long way since then. I think it was a good wake-up call back then for somebody like Joe, somebody of Joe’s stature, to really come along and, where web designers maybe at that stage weren’t really that interested in WCAG2 to actually say, look guys, you need to start looking at this because in the current shape it’s in, it’s really not feasible, and what Joe said at the time, there are many things that he criticised, but you know, overall he was spot-on with a lot of the things. The main thing was that the whole document at that time was extremely bulky, it was one big monolithic document which tried to do everything. There was loads of Orwellian-style language, everything was made up of Newtons, and they pretty much invented…because the problem with WCAG2 it’s a kind of full shadow of it, is that because it tries to be technology agnostic, it tries to avoid in the main document and talk about anything relating to actual technology, so it doesn’t mention specific HTML elements or things like that, so to make it very tech-agnostic, that document at the time really re-defined almost anything, so it didn’t talk about web pages, but it started ta
lking about web units, and basically the glossary was almost bigger than the actual document, so you know, that was very problematic because even people who’d been doing web development for years, if you just gave them the document as it was, they would have had to completely re-learn whatever all the terms were, it was of no practical use.

Paul: So has all that gone now?

Patrick: Yes. The language has been simplified. I mean it’s gone now from 2006 onwards it’s gone through, I think it was 2 or 3 last call stages. Well it went back from…in 2006 it was at last call stage, literally the stage before we’re saying, OK, we’re up to Candidate Recommendation. They actually scaled that back. W3C don’t admit that was because of Joe Clarke, and OK, it was probably not exclusively because of his article, but I think the general kind of feelings that it stirred up, or that it tapped into, kind of made the W3C reconsider. They’ve scaled it back to a public working draft, which is kind of one step previous to that. Everybody had a pretty good look at it. There’s been rounds and rounds of comments, I mean I’ve submitted in the 2 year period that it’s now been since that article, I’ve submitted loads of comments. I mean ranging from really small things like, oh you missed a comma there, or that’s not very clear, to kind of very substantial things about the actual core concepts that are being discussed, and in that process, a lot of really hard copywriting and editing has happened since then. They’ve also split out the document into far more manageable sub-documents themselves. One of the main things, for instance, is that the whole structure of, you know, WCAG2, it’s actually a suite of documents. The main guidelines document itself is only a handful of pages, I think it’s…yes, 19 pages I’ve printed out today. That is purely the core guidelines document, and that’s the only part if you will, that is actually normative, that’s the only one that is the actual guidelines. Then there was a lot of extra documents that really are just what’s called informative, so you can read through them, but you can’t actually refer to them in terms of, you know, just if somebody sort of says, your site isn’t accessible, you can’t point to an informative document and say, yeah, but I’m following that particular thing.

Paul: OK

Patrick: One of the documents will be the techniques document. You can’t actually point to that and say, well I’m following these, because the only thing that’s important are the actual guidelines, so they’ve really slimmed it down, broken it up into separate documents, you know, 19 pages printed out, it’s nothing, you can pick that up, you can read it through. It’s roughly the same size now of WCAG1 if you will. So they’ve simplified the language. There were loads more contentious kind of fundamental problems with WCAG2 as it was back in May 2006. I mean one of the main ones that really caught, you know, the eye of a lot of developers, was the concept of base lines where basically at the time they were saying, even though the concept itself is good, but it’s pretty much read like, as a website owner I can basically say, right, to work with my site, you need to have Flash and you need to have this and you need to have that, which was completely opposite to, you know the very austere WCAG1 which basically said, you can’t have anything. This seemed to open it up completely and allow for website owners to basically say, right, you know, we are going to do a whole Flash website if you will, and our baseline will be, you need to have Flash to use this site. But the concept was good at the time, but the wording pretty much came out like that, so these kinds of things, base lines, at its core, is actually still in the current document. They’ve basically re-worded it and turned it on its head, where before it was talking about website owners can say what technology they’re using, now it’s far more, if as a website owner or designer, I’m using a technology, I need to make sure that I know for a fact that it’s supported by accessibility…assistive technologies, for instance screen readers, so they kind of turned it on their head. The onus isn’t any more on the user to say…to have the latest technology, but on the developer to make sure that the technology they use needs to be accessibility supported. So loads of kind of fundamental changes like that have happened really, and no, definitely to go back to the original question, it has improved quite dramatically since May 2006. I mean I’ve now familiarised myself extensively with it. It’s good bedtime reading material!

Paul: You’re not convincing me of that one. Not unless I want to go to sleep I guess!

Patrick: I know. OK, I’ll be blunt, it’s better toilet reading. You kind of print it out and you put it there, instead of a novel you’ve got that there. But it is very good. I mean it’s now down to the level of…it almost reads like common sense. You kind of…you go through it and you just find yourself nodding and thinking, like, that’s not contentious. OK, there are still a few here and there where I might slightly disagree in a heated argument, but overall there’s nothing really there that makes me think, ooh no, that’s never going to be realised, so absolutely, it’s in very, very good shape I would say, and this Candidate Recommendation Stage looks like it’s going to be very successful really, and fingers crossed, I think; I’m not 100% sure now of the timeline that W3C are working by, but I wouldn’t be surprised if, say by the end of calendar year, we might see actually WCAG2 being released and getting out and becoming a proper recommendation.

Paul: Cool. So then what’s the big differences from WCAG1. I mean with WCAG1, you know, every kind of standards-based designer became very familiar with that. I was a great fan of that, you know, single sheet which listed everything by priorities and I would go through and I’d check myself off, and I kind of knew where I stood with WCAG1. With WCAG2, it’s much more of an unknown entity at the moment, so kind of give me the potted version. Where are the big changes?

Patrick: Right. No you’re quite right, it’s actually a lot more vague WCAG2, but it’s that way for a reason. Right, so WCAG1 really was very much, I mean it’s a product of its time, I mean it was 1999, the web was still quite in its infancy, and it is very much HTML focused, WCAG1, there’s no denying that. There’s a few mentions of things like CSS, but pretty much it’s all about how to use HTML to create content that at the time would be deemed accessible. I mean JavaScript was pretty much bad; I mean you could use it but you need to make sure there’s a fall-back. Non-W3C technologies were completely out basically, unless you provided a W3C alternative, so things like Flash and PDF etc, when they first started becoming more and more used, that directly clashed with WCAG1 at the time. Now WCAG2, as I mentioned before, it’s far more tech-agnostic. It tries to basically not t
alk about specific technologies. It doesn’t directly reference HTML or CSS or Flash or Flex or various other things in the actual core guidelines. Now the reason for that is WCAG1 as soon as it was released, the thought behind it was that it would be updated on a very regular basis, but from 1999 onwards, nothing has really happened, and because it was so heavily influenced by the technology of its day, it aged very, very badly. I mean nowadays, if I hear people saying, we’re building against WCAG1, I almost have to chuckle a bit, because it is pretty much just going back to, you know, we’re doing the web like it’s 1999, you’re not really allowed to do anything, and it’s completely opposite to what’s actually happening with the web. I’m not going…well I am going to say Web 2.0 to sound all trendy, but you know, all those things, Ajax, Flash, PDF etc, particularly say PDF, there is now…there are now easy ways, or relatively easy ways, to create reasonably accessible PDFs, I mean the technology itself has moved on, the format has moved on, screen readers are quite capable of dealing with well-structured PDFs that are created in a certain way. We’re not really talking about, you know, you need to test your pages with links because, you know, people might just use a text only browser. Things have moved on, but WCAG1 is pretty much kind of frozen in time of 1999. There have been a few kind of…people who’ve been working towards WCAG1 have started kind of re-interpreting it a bit for the modern days. I mean in my own practice in my…one of my other identities, in my day job as web editor for the University of Salford, I’ve never actually said, we’re going to make our pages WCAG1 compliant, but always said, you know, we’re going to take inspiration from WCAG1, filter it through our own knowledge of what the technology landscape actually is today, and try to do the best we can to actually serve the users and you know, how they currently use the web.

Paul: So….so are you, you know, you said that you’d never claimed in your day job, you know, to be WCAG1. Are you intending, you know, are you more confident in WCAG2 to be able to say that, that we’re going to be WCAG2 compliant, or is it not that kind of thing?

Patrick: I think …I think yes, WCAG2, it would be a lot easier to say we’re working towards WCAG2, because to kind of go back a bit and explain WCAG2’s kind of…the thinking behind WCAG2 and how it’s structured. WCAG2 as I said, doesn’t talk about HTML, CSS, it really just sets out very general principles, when then break down into guidelines, which then in turn break down into success criteria. Now again it probably sounds like there’s a whole new language to learn, but it is fairly straightforward, so if you think, web pages themselves need to be the four principles. They need to be perceivable, operable, understandable and robust. So those are the four kind of guiding principles, which you know, make sense. It was already implicit in WCAG1, but this kind of just spells it out. These are the kind of four things that we want to make sure. Now under each of those principles, say perceivable or whatever, there are guidelines which still provide…they don’t go into detail, but they provide some very, very basic overall goals, so what we want to achieve is X. They’re not testable, because they’re still very, very generic, they’re saying, we just want to make sure that people can, say, use a keyboard to do things. They don’t go into detail about what that means particularly. And then under that you’ve got the testable, what are called success criteria. Now these are very small kind of little atomic sentences if you will, that say, right, very specifically, if you’re providing this, then make sure that that happens. Now I’ll pull out an example, I’ve made some notes here, let me just go through…yeah, I’ll give you an example here. So in the big WCAG2 document, you’ve got principle number 2, operable. User interface components must be operable. So, you know, you can’t argue with that, fair enough. Underneath that, there’s loads of guidelines, I’ve pulled out one here, guideline 2.4, navigable, which states that you should provide ways to help users navigate, find content and determine where they are. Again, that’s a very, very broad goal that doesn’t say anything about you need to use a link, you need to put title in here, or you need to make sure you use access keys. None of that. It basically just very generically tells you that. Now under Guideline 2.4, there’s loads of smaller success criteria. Now I’m just going to pull out one of them. The first one, 2.4.1, which basically is called bypass blocks, and I’m just going to read it straight from the thing, ‘a mechanism is available to bypass blocks of content that are repeated on multiple web pages’

Paul: Yes

Patrick: Now again, this doesn’t say anything about HTML or whatever, but it is quite testable. You can actually pull up your web pages and say, right, are we following this? Is there a mechanism available to bypass blocks of text, blocks of content, sorry, that are repeated? So I don’t know if that gives a flavour of…

Paul: Yeah it does.

Patrick: …against WCAG1. Now you couldn’t write a validator to actually just run through this and check for that, that is one of the core differences I think with WCAG2 compared to WCAG2. I mean even WCAG1 we all agreed that you can’t just run it through Bobby and then, you know, if Bobby gives you the thumbs up, that’s good. You still have to do some manual checking. But there were a lot of things that because it was so HTML-centric, you could pretty much run it through something and it gave you a fairly good indication of whether you were achieving that particular check-point in WCAG1 or not. Now the way the success criteria are worded, yes you could say, OK, if we accept that, we want a skip link, and the skip link will fulfil that particular success criterion, we could write an automated tester that just looks for skip-links, the presence of skip-links, however you want to code that, but it’s not to say that that is the only way in which you can pass that success criterion. The actual guidelines don’t say exactly what you’re supposed to do. They pretty much focus on the end result and particularly what I’m interested in, they focus on the end result for the user for the most part, so it really puts the onus on the developer to understand, these are the user needs, and this is the kind of very generic thing that needs to happen. You can then, from that success criteria, jump over to the techniques document for instance, which actually goes into detail, if you’re using HTML, here’s some of the ways in which you could achieve this success criterion, and then you can test against those, but the techniques document is only informative, it’s not the be-all and end-all. You could follow whatever’s said in there, or you could actually come up with something that’s completely separate, is not mentioned anywhere in the techniques, but if the end result of an actual real user is still, OK, they can still bypass blocks of text that way, then that’s fine.

Paul: Which is great, because it kind of gives people the freedom to innovate and come up with original ways of solving accessibility problems.

Patrick: Absolutely, and it puts…it puts the focus straight back on doing something that is good for the user, rather than right, we’re just going to go and make sure that we tick that particular box because the guideline says we need to do X in HTML and, well, we’ve done it, so we’re cool. This kind of forces you to actually think about solutions. I mean you can… you can go into the techniques document, and what’s mentioned in the techniques document, is pretty much they’re tried and tested ways in which that situation has been solved, so you know, you can be I’ll say lazy, but you know, you can get guidance from that techniques document, but that’s the important thing to know, is it doesn’t mean that you have to necessarily use one of those techniques, and absolutely you’re right, this will stimulate a lot more creative kind of ways in which these success criteria can actually be met. And as I said, it then applies to any technology. You could say, right I’m going to provide that functionality in Flash if I’m doing Flash, or maybe I need to do that in PDF, or whatever, so it is a lot more open. Which obviously is a problem if you’re very set in the ways of I’m going to run it through a validator, and I’m going to get a clear yes or no answer, because you pretty much need either a lot of user testing to say, OK are the users actually able to do this particular thing that the success criterion says, or you get experts that kind of help you with that, and there it’s a lot more likely that you’re going to get 2 or 3 experts and they might not necessarily agree on what’s the best way to implement something, so that is kind of…not the problem I would say, but the slight shift in mentality that website designers and website owners will have to make, that it’s less easy to make a very kind of cut and dried, yes it’s accessible, not it’s not accessible. I mean it was problematic before, now it could be even more woolly, which you know, is a bad thing in a way, but also a good thing because it does force you really to focus on the actual core of the problem rather than trying an easy way out and just implementing some mark-up that a guideline suggests.

Paul: Yeah, I mean yeah, I can see how it potentially might create some legal problems further down the line, but it certainly gets people beyond that kind of arse-covering check-box mentality, which has good to be good. So it sounds like a lot of the time we’re kind of going to be working as web designers on the success criteria level where we’re going through and making sure we conform with these various success criteria. What about priorities? WCAG1 had Priority A, AA, AAA or whatever you want to call it; Priority 1, Priority 2, Priority 3. I mean, did, you know, is there anything like that any more or has that gone away completely?

Patrick: No, that’s actually still there. At one point there was a bit of a change in terms of how it’s going to be worded, whether you could achieve full compliance or not by following…having to do all the success criteria for a particular level or not, but no, they’re pretty much there in their old form if you will, so it’s still called Level A, AA and AAA. One of the things that WCAG2 has tried to do in its wording of these Levels is to say that it wants to remove the kind of idea of hierarchy that AA aren’t less important than A, and AAA aren’t less important than AA. They’ve written a lot of nice words around it to explain why it’s actually still worth doing AAAs when you’re not fulfilling all of AA etc, but I think they’ve actually muddied up the waters a bit because in effect, you can’t claim, say, AAA, if you haven’t claimed AA, so the hierarchy is actually still there, so probably this explanation was quite confused, but it actually reflects exactly how confused the WCAG2 document is about that. They’ve tried to kind of have their cake and eat it at the same time, I think, because they have to…necessarily have some hierarchy, but they’re really trying to stress that they’re all equally important, you know, but some are just more important than others. So…interesting.

Paul: Yes. So I mean what, you know, we’ve got potentially, you know, if you’re right, until about Christmas to sort out our act and to kind of really get thinking about WCAG2. What kind of steps would you recommend for people that are owning and running websites in order to kind of prepare for this?

Patrick: I would say that because WCAG2, as I say, is a whole suite of documents, you’ve got the actual guidelines which I mean now I can read them and they’re quite understandable to me, but I’m obviously very close to the subject at hand. I can kind of understand where they’re coming from. But as part of the suite of documents, there are kind of better documents possibly to start with, depending on what your current level is. There are ….there are simple things like Understanding WCAG2, which kind of takes a helicopter view of WCAG2 and gives a lot more context that explains why, you know, certain guidelines are important, how, you know, people will use them, how they will benefit from them etc. It goes more of a context. It’s obviously a lot weightier than the actual core guidelines, but that is…if you’re a bit rusty with, you know, I haven’t looked at WCAG2 at all, you’re a bit rusty with what WCAG1 even was about, beyond just being a document that you checked some boxes against, that’s certainly worth reading, just to really get a feel of understanding why….why are we changing things, why wasn’t WCAG1 good enough, so that really gives you a good kind of introduction to the subject. And I think that’s an important step towards actually implementing WCAG2 would be for people to buy in, as with anything, if you’re trying to push it through at an organisational level. People need to understand the rationale behind it. You can’t just dump this document on say your developer’s desk and say, right, these are the new rules, you know, white is black, black is white, this is what you need to do now. They need to buy in from actually understanding what the rationale behind it is, so the understanding document will really give them all the information they need. Some, you know, technically minded people might be tempted to jump straight to the techniques document, which is fine, but again with the caveat that I mentioned before that the techniques document is actually only informative, so whatever’s written in there is not the law. Some techniques that are currently in there might even be proven later on to be maybe not optimal in certain situations etc, so it’s not the law; it can help you initially get, if you’re really technically minded, you might read the success criteria and say, yeah, OK, that’s all nice language, but what does it actually mean, you know, if I’m doing HTML, what….what are you expecting me to do? The techniques document can help, it will give you actual examples. If you’re using HTML do this, if you’re using Flash do that, etc, so it brings it back down to something that as a techie, you might be more comfortable with, but again, understand
ing that that is not the law; those are not the guidelines, and that there might be even better or more creative ways around the problems, but it’ll get you into the right frame of mind I would say.

Paul: Cool

Patrick: There’s also documentation that just pretty much compares WCAG2 to WCAG1,

Paul: Ah, that’s good

Patrick: Yeah, if you’ve got a lot of experience with WCAG1, that will kind of help you roughly map, you know, what used to be WCAG1’s check-point about this, is now this far broader guideline that covers a lot more aspects, so it’ll help you kind of move towards the thinking behind WCAG2. And I think that is the main thing as a website owner or as a designer; it’s more of a shift in perception if you will, more of a shift of understanding of what accessibility is, more than, you know, the change of how is my mark-up now going to be affected by it. It’s really moving beyond that kind of very HTML specific, you must do exactly this, to a more, you need to understand how users actually use your website and how to creatively kindly of help them in that pursuit really.

Paul: Cool. I mean that sounds good; there’s lots of different ways you can kind of start the process of learning it

Patrick: Absolutely

Paul: …which is good. I mean I guess my last question, you’ve almost kind of answered, which is, you know, if you’re somebody from a WCAG1 background that is comfortable with WCAG1, the one thing that you’re thinking is, hang on a minute, I kind of knew this, I had my head around this, you know, I’ve suddenly got to change to this new system, you know, is it going to involve more work, is it going to be painful? The fact that you’ve talked about this document that does transition, you know, between WCAG1 and WCAG2 sounds helpful. Overall, do you think it’s going to put more pressure on designers or is…more going to be expected of them as they develop stuff?

Patrick: I think it’s going to be interesting for a variety of reasons. I wouldn’t say necessarily there’s going to be more work involved. If you’ve been working similar to the way I’ve been working, that you take WCAG1, you take what you want from it, and you filter it through your knowledge of, yeah, that screen-readers can actually work well with PDFs, so I’m ignoring the non-W3C technologies I’ve banned that used to be in WCAG1, so if you’ve actually been doing accessibility based on WCAG1 in the real world rather than simply just following it as a set of check-points that you just tick the boxes, I wouldn’t say it’s going to be more work. Certainly if on the other hand, if you have been somebody who hasn’t been too understanding or involved with WCAG, you pretty much had it as a function in your, say, Dream…copy of Dreamweaver or whatever, I’ll just quickly run it through this validator, I’ll run it through Bobby, although Bobby’s now gone, thank God, various things like that, you know, if you really just saw it as a check-box exercise, yes there will be…it will be more of….I don’t want to say paradigm shift…well there you go, I just said it….absolutely, no cliché will be left unturned in this particular episode…you really need to start understanding it more. But if you’ve actually been doing what I would term in a quite elitist way, real web accessibility over the last few years, there’s no major, major big surprises there, and there’s…I wouldn’t say there’s a lot more work involved. Now it would be interesting, I think, one of the aspects will be if you’ve been working in an organisation and you’ve been trying to appease management say, and one of the things that management might have erroneously picked up is, we need to make sure our pages are Bobby-compliant, for instance, is that will be a difficult, I would say, or challenging, should we say, situation because you will have, already at the time you might have been crying, saying, well, the validator can’t check everything, you still need to do manual checks, but at the end of the day, some managers, all they wanted was to see the thumbs up and the smiling policeman with the helmet on their website. This time around it will be a lot more difficult, and yes, as I mentioned before, there will be automated tools that will help you in determining whether you’re doing certain things right according to WCAG2, but because, as I said, the techniques…there is no definitive list of techniques that are OK, and there are no definitive lists of techniques that aren’t OK, it’s practically impossible to write an automated checker that will be able to check against everything, so tools…automated tools will really just be relegated to certain interpretations of WCAG2. I know that there’s a few organisations in the States that are currently working on, you know, validators. I think the….name escapes me now, but the Fraunhofer Institute in Germany, they’re currently working on their own version of a WCAG2 accessibility tester for instance, and I had an interesting discussion with representatives from Fraunhofer the other week when I was in Germany at a conference, and they’d pretty much agreed that their tool will only check against, basically, their favourite techniques if you will, from the techniques document. Now who’s to say, as we said before, that those are the best techniques? They’re ours. You might come up with a really creative way that no tool has been primed to kind of sniff out in your mark-up or in your Flash or PDF or whatever, so you’ll always get a very, very subjective, based on what the developer’s written into their tool, very subjective assessment of your website, so bring it back to the point, it will be extremely difficult I think for a manager to be able to say, right, I just want to make sure that we pass that particular test, unless you then go and dig out exactly what that tool is looking for, and you end up back in the situation that we used to be in, where you’re trying to write it to get a good grade from a tool, rather than actually thinking about what is best for, you know, users with disabilities or users in general, so that, I think that will be the more challenging part, as I said, the paradigm shift, getting managers who might not have understood it up to now, to really kind of confront the fact that automated tools aren’t the be-all and end-all, and that yes, everything is a lot more subjective now, so really I would say the only solution to that is really start thinking more exclusively about proper user testing, getting actual end-users in there. You could give them the success criteria from WCAG2 and basically say, can you confirm that this is something that you can do on our website, so it becomes a lot less about automation and a lot more about actual end users.

Paul: Cool. I mean it all sounds really exciting, you know, a bit apprehensive, you know, a whole new thing to learn and all the rest of it, but I think the whole freedom of approach side of things, that you can approach problems in different ways and sold things in different
ways, is very refreshing and it all sounds really exciting. Patrick, thank you so much for coming on the show, that’s been really enlightening, and I look forward…

Patrick: a delight

Paul: Yes, and I look forward to getting you on again, maybe to get into some specifics once WCAG2 is up and running. Good to talk to you.

Patrick: Yes, super duper. Okey-doke.

Thanks to Alison “Anna’s Mum” Debenham for transcribing this interview.

Listeners feedback:

What are the key features of a CMS

Hi Paul. Hi Marcus. What in your opinion are the important and fundamental features of a CMS, not such as the ability to create pages, but the add-on features that make a CMS better than other CMS’s around it. Thank you very much for answering my question.

Interestingly Drew Mclellan was talking about content management systems at this years @Media. He had an excellent list of things to look for in a CMS. Some of his recommendations were…

Friendly URLs
Data Feeds(RSS)
Customisable and accessible administration interface
Well implemented search
Multi-site support
Multi-language support
Caching
Support for user generated content

Interestingly some of the features he looks for (such as friendly urls) are not always required. He wants to see them there because it indicates best practice from the developers who built the system, not because he actually needs them.

He also spoke in his presentation about the importance of not buying a CMS based on a wish list of functionality you might need one day. This will lead to unnecessary expense. It is also the problem with ‘off the shelf content management systems’. You end up buying functionality you don’t require and introducing additional complexity into the user interface. Perhaps that is the reason why both edgeofmyseat.com (Drew’s company) and Headscape have chosen to build their own CMS codebase, which can be customised to clients needs.

If you are looking for more information on the selection of a content management system be sure to check out episode 24 where we dedicate the entire show to the topic.

Is certification worth it?

Chris asks: I’ve been working in web design for the last 5 years and am really looking to get into the more user experience side of things. I was wondering if you or our listeners knew of any qualifications or certifications that might be a good idea. Are they even worth the good idea in the first place or are they not worth the paper they were written on?

As somebody who regularly recruits user experience designers I have to say that qualifications and certifications mean little. Sure, I like an employee to have a degree simply because it demonstrates a certain level of academic achievement. However, I don’t think that web specific qualifications count for a huge amount.

What I consider important is example work, that shows your skills in user interface design. I want to see sites you have produced and for you to explain to me the underlying thought process that went into them.

Given a choice between work experience with a high profile web agency or becoming a student again, I would recommend the former every time.

116. Back

Posted in Classic shows on May 7, 2008 by Paul Boag

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

Podcast: Download (28.3MB)

Download this show.

Launch our podcast player

News and events

Creating grid layouts

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

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

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

Flash goes open source

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

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

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

Accessibility and AJAX

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

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

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

Developing effective forum leadership

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

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

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

Feature: The personal website is dead

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

Interview: Jeff Croft Talks About His View On Web Standards

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

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

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

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

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

Jeff: Sure

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

Jeff: Right

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

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

Paul: Ha ha ha

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

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

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

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

Jeff: Right

Paul: Aren’t you actually encouraging lazy coding?

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

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

Jeff: Right

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Jeff: Sort of!

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

Jeff: OK

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

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

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

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

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

Jeff: In many of them, yeah.

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

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

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

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

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

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

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

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

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

Jeff: Right.

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

Jeff: Great. Thanks so much for having me.

Thanks to Anna Debenham for transcribing this interview.

Listeners feedback:

Getting a site
off the ground

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

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

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

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

Testing

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

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

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

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

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

113. Hiring

Posted in Classic shows on February 27, 2008 by Paul Boag

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

Podcast: Download (29.9MB)

Download this show.

Launch our podcast player

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

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

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

News and events

Highly extensible CSS

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

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

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

Video tools

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

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

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

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

Microformat boost

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

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

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

Feature: Hiring new staff

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

Expert interview: Christian Heilmann on common Javascript mistakes

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

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

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

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

Paul: Um hum…

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

Paul: Yeah…

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

Paul: Um hum…

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

Paul: Yeah.

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

Paul: Umm…

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

Paul: Yeah.

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

Paul: Mmm…

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

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

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

Paul: Um hum…

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

Paul: Yeah.

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

Paul: Mmm hmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

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

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

Paul: (Laughs)

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

Paul: Mmm.

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

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

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

Paul: Mmm…

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

Paul: (Laughs)

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

Paul: Mmm.

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

Paul: Okay.

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

Paul: Oh okay.

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

Paul: Mmm.

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

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

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

Paul: Mmm…

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

Paul: Mmm.

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Um huh.

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: Mmm.

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

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

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

Paul: Mmm.

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

Paul: Mmm.

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

Paul: Right.

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

Paul: Mmm.

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

Paul: Yeah.

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

Paul: Mmm hum.

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

Paul: Yeah.

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

Paul: Umm hmm.

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

Paul: Mmm.

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

Paul: (Laughs) …or drinking…

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

Paul: Mmm.

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

Paul: Mmm.

Christian: Otherwise you start preaching to the choir.

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

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

Paul: Okay.

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

Paul: What do you mean by that?

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

Paul: Okay yeah.

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

Paul: Yeah.

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

Paul: Mmm hum.

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

Paul: (Laughs)

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: Yeah.

Christian: And that’s never the case.

Paul: Hmmm.

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

Paul: Mmm hmm.

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

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

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

Paul: Mmm.

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

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

Christian: Yeah.

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

Christian: See you soon. Bye.

Listeners email:

Rolling out new features

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

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

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

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

Here’s the solution I had planned:

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

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

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

Content management and CSS

Our second listener contribution is a question from Adrian…

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

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

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

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

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

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

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

112. Jina

Posted in Classic shows on February 20, 2008 by Paul Boag

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

Podcast: Download (30.4MB)

Download this show.

Launch our podcast player

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

News and events

Some customers are not worth caring about

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

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

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

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

Version targeting rumbles on

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

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

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

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

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

Let users tagging your posts with delicious

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

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

Feature: Using HTML snippets

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

Expert interview: Jina Bolton on women in web design

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

Jina: I am doing well. How are you?

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

Jina: [laughs]

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

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

Paul: Ummm!

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

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

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

Paul: Ahhh, I see.

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

Paul: Right.

Jina: Anyway, different subject. [laughs]

Paul: Okay!

Marcus: [laughs]

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

Jina: Yeah.

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

Jina: [laughs]

Marcus: [laughs] I can live with it.

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

Jina: Yeah, I think it will be great.

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

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

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

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

Jina: [laughs] You found my tactic.

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

Jina: Sure.

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

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

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

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

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

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

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

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

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

Paul: Hmmm.

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

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

Jina: Right.

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

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

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

Jina: [laughs]

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

Jina: Ewe I have no idea. [laughs]

Paul: [laughs]

Marcus: [laughs]

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

Paul: Hmmm.

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

Paul: [laughs] Good for you.

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

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

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

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

Jina: No, no.

Paul: [laughs]

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

Paul: Yeah.

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

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

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

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

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

Paul: Yeah.

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

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

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

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

Jina: [laughs]

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

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

Paul: [laughs]

Jina: [laughs]

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

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

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

Paul: Ummm!

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

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

Marcus: [laughs]

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

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

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

Paul: [laughs]

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

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

Jina: Okay.

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

Jina: That sounds good.

Paul: Okay.

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

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

Jina: [laughs]

Marcus: Ha ha ha.

Jina: Thatís awful.

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

Jina: Okay. Alright.

Paul: Bye.

Listeners email:

SXSW

This week we have a couple of questions about SXSW:

Rich asks…

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

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

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

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

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

Talking of parties and socialising Matthew asks…

Have you considered doing a live show at SXSW?

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

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

Moving to the mac

Brenda asks…

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

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

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

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

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

browsers, business, conferences, CSS, html, javascript, macs, Podcast, strategy, strategy, sxsw

111. Utopia

Posted in Classic shows on February 14, 2008 by Paul Boag

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

Podcast: Download (31.2MB)

Download this show.

Launch our podcast player

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

News and events

Fixing your product pages

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

Amy starts by giving some basic tips. These include…

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

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

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

Being inspired by newspaper design

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

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

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

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

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

Using browser history to improve the user experience

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

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

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

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

Feature: Designer and developer in perfect harmony

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

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

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

These are the issues we covered…

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

Expert interview: Aral Balkan on Singularity

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

Aral: Hi, Paul. How are you?

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

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

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

Aral (laughing): Was he curious?

Paul: He was.

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

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

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

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

Marcus: Okay.

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

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

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

Paul: Oh, ok, so it…

Aral: I mean, watch the conference and interact.

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

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

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

Paul: Nice!

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

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

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

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

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

Paul: Wow!

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

Paul: Yeah.

Aral: And the that its online.

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

Aral: It’s three days.

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

Aral: And it’s multiple track.

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

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

Paul: Oh, Okay.

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

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

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

(All Laugh)

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

Paul: Right…

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

Paul: Sure.

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

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

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

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

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

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

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

Paul: WOW!

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

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

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

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

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

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

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

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

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

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

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

Aral: Have I just put you on the spot?

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

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

Paul: Cool.

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

Paul: Mmmm. Yeah.

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

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

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

Paul: Alright then.

Listeners email:

An alternative wireframing tool

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

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

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

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

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

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

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

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

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

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

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

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

A vertical rhythm calculator

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

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

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

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

109. Rissington?

Posted in Classic shows on January 28, 2008 by Paul Boag

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

Download this show.

Launch our podcast player

News and events | Anton Peck on imagery | Listener emails

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

News and events

Microsoft to automatically roll out IE7

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

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

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

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

IE8 divides the standards community

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

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

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

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

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

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

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

HTML 5 is coming

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

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

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

Career advice for web designers

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

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

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

Advice includes…

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

The list goes on and is definitely worth reading.

Expert interview: Anton Peck on imagery

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

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

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

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

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

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

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

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

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

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

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

Anton Peck: A little bit.

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

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

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

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

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

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

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

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

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

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

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

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

Paul: Yes, exactly.

Anton Peck: That’s a whole other discussion.

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

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

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

Anton Peck: Definitely.

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

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

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

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

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

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

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

Anton Peck: It’s Crestock.com.

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

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

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

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

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

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

Paul: Yeah, couldn’t agree more.

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

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

Anton Peck: Certainly.

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

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

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

Anton Peck: Exactly what I was thinking, yes.

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

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

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

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

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

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

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

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

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

Anton Peck: .co.uk

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Anton Peck: Absolutely.

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

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

Paul: Yeah, go for it.

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

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

Listeners email:

Textmate reviewed

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

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

Javascript or JQuery

The second listener contribution comes from Will who writes…

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

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

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

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

107. Running to keep up

Posted in Classic shows on January 15, 2008 by Paul Boag

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

Download this show.

Launch our podcast player

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

News and events

Setting expectations

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

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

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

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

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

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

Great websites do, not say

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

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

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

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

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

CSS: The All-Expandable Box

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

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

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

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

Feature: Where to focus in 08

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

Expert interview: Jason Beaird on design basics

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

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

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

Jason Beaird: That’s correct.

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

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

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

Jason Beaird: So everybody laughs along.

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

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

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

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

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

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

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

Jason Beaird: Yep.

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

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

Paul Boag: Yeah.

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

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

Jason Beaird: That’s true.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul Boag: Right.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul Boag: Obviously.

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

Paul Boag: Oh cool.

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

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

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

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

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

Paul Boag: Thanks very much.

Listeners email:

A excellent wire-framing tool

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

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

Keep up the good work.

Building an online portfolio

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

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

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

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

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

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

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

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

106. Back to work blues

Posted in Classic shows on January 9, 2008 by Paul Boag

On this week’s show: Paul and Marcus discuss common mistakes when creating your sites structure and Rachel Andrews shares her experiences of getting into web design.

Podcast: Download (29.5MB)

Download this show.

Launch our podcast player

News and events | Common mistakes of site structure | Rachel Andrews on building your web design career | Listener emails

Just a quick little request before we kick off today’s show. I need to get some more moo cards for the boagworld podcast (I am too tight to get proper business cards). Anyway I am having trouble with what to put on the cards. I was going to put a nice image on the cards but when I thought about it I couldn’t think of anything appropriate. In the end I decided to include tiny snippets from the reviews people have written about the show. However, being typically British with our self deprecating sense of humour. I decided to use the negative reviews rather than the positive ones. I have some great stuff such as “Paul has an ego that doesn’t need boosting” and “truly crappy jokes”. However, I need more. So, if you have 5 minutes this week drop me an email with a short, witty and hopefully not too rude review of the show. Let the venom flow :)

News and events

Internet Explorer 8

So the last time we did the news before Christmas Microsoft were under attack from Opera for its lack of standards support. Well, things have moved on since then and it is looking like Internet Explorer 8 is shaping up to be a very nice browser indeed. For start IE8 has passed the Acid 2 test published by the Web Standards Project. This is a definite commitment from Microsoft to provide comprehensive standards support and should be applauded. Jonathan Snook explains the ramifications of this as well as making some predications of his own as to what IE8 will look like. According to him we can expect straightforward column layouts, grid positioning and improved javascript support. Best of all if Jonathan is right we might see IE8 out in beta by the summer and in final release by next Christmas. Maybe then we can look at dropping support for IE6.

Using CSS to diagnose problems

Although there is still a lot of CSS not supported by browsers such as IE it is incredible what is possible with just what we have at the moment. Eric Meyer recently posted an article suggesting that you might want to consider using CSS to diagnose issues in your HTML that need resolving. In his article he uses CSS to find out where markup might be choking on missing accessibility features, targetless links, and just plain missing content. For example he uses CSS to visually highlight all images that have an empty or missing ALT attribute.

This isn’t an entirely new ideas. In fact Marco Battilana proposed a similar approach to highlight accessibility issues back in July 2006. However, Eric has taken it that much further and offered an excellent way of not only highlighting problems to yourself but also to your clients who maybe editing HTML.

Common accessibility mistakes

Talking about highlighting accessibility mistakes I came across a great article that does exactly that. Basically the article focuses on the fact that website owners can often be over enthusiastic when it comes to accessibility and start overusing HTML attributes designed to help accessibility. The result is that we can often do more harm than good. The article looks at the alt and title attributes which are often verbose or repetitious. It also looks at tabindex and accesskeys that can cause confusion and conflicts with normal browser behaviour. If you are applying any of these attributes to your code then I highly recommend you cast your eye over this article.

Basic design principles

The final story this week is an amazing series of posts by Patrick McNeil over at Design Meltdown. The reason I say they are amazing is because they are immense and I confess I am yet to read all of them. As you probably already know Design Meltdown tracks trends in web design and shows examples of sites that highlight these trends. Using the same example based approach Patrick looks at the fundamental principles of design and deconstructs them expertly. He covers Emphasis, Contrast, Balance, Alignment, Repetition and Flow in a screenshot packed series of posts that are a must read for anybody starting out in design. In the past I have always recommended Jason Beaird’s book “The Principles of Beautiful Web Design” for those starting out in design. In fact we have Jason on the show soon. However, if you don’t like reading books or want to save a bit of money then Patrick’s analysis is a credible alternative. Check it out.

Feature: Common mistakes of site structure

Just before Christmas I wrote my final blog post for the year on creating the structure for your site. It is a topic that I have been thinking a lot about recently because of various projects I am working on and so it was fresh in my mind. In particular it occurred to me how much harder producing a good site hierarchy is than it first appears. In fact I see the same common mistakes occurring again and again. It is these mistakes I want to look at in today’s show. Read Common mistakes of site structure.

Expert interview: Rachel Andrews on building a web design career

Paul: OK, so joining me today is Rachel Andrew from EdgeofMySeat.com. Hello Rachel. It’s good to have you on the show at last.

Rachel: Hello, Paul. It’s good to be here.

Paul: I feel like I’ve been trying to bully you to come on the show forever and ever and ever, but it hasn’t worked out for one reason or another, but we finally got you here, so that’s good news. So uhm, Rachel, when I came to kind of putting together what I was going to do, talking to you. I suddenly realized I didn’t know you very well. I’ve heard a lot about you and I’ve heard a lot of other people say good things about you, which has gotta be a good thing, but I didn’t know anything about your background or kind of how you came to be involved in web developement. So, I thought it might be quite interesting, if It’s ok with you, just to spend a few minutes talking about how you came to be a web developer. How did you get into this illustrious career?

Rachel: Uhm, completely by accident, really. It wasn’t something I intended to do. My training is as a dancer. I was going to dance. That’s all I ever wanted to do.

Paul: All right.

Rachel (laughing): So, the part where I ended up doing this surprised everyone, (Paul laughing) especially my programmer father. (Rachel laughs)

Paul: Ahhhhh

Rachel: We didn’t even have computers in school when I was in school. I’m showing my age.

Paul: Yeah, I know the feeling.

Rachel: Yeah, so, and I remember when I was, I don’t know, either 13 or 14 there were two guys that came in and said, “All of you will need to know about computers in your future careers.” And I was like, “No I won’t. I’m going to be a dancer.” and they couldnt tell me why I would need computers and so I felt quite pleased with myself. So, yes, it wasn’t on the radar after all.

Paul: So, how did you go from dance to web developement? It seems a bit of a leap there.

Rachel: Well, I know this is a fairly technical career, and I was working back stage for a quite a while and when I decided to quit dance for various reasons, I was working in the west end and I managed to my way into a back-stage techie job.

Paul: OK.

Rachel: I did work as a choreographer and I knew a reasonable amount about sound and lighting and could my way in. So, I worked back-stage in the west end and for a year and a half on Charlston and on The Mouse Trap.

Paul: Right, I see.

Rachel: So, so that was it. So, it wound up to be a technical kind of job and then I found myself pregnant with my daughter. And you cant go heaving around stage equipment while pregnant.

Paul: No.

Rachel: So (laughing), I found myself with some time on my hands. It was really that I even started using the internet.

Paul: Oh, ok.

Rachel: I was fairly young and didnt know anybody else with a child and pregnant.

Paul: What kind of… how long ago are we talking about here?

Rachel: Well, the said child is now nearly 11.

Paul: Right.

Rachel: So, quiet a while ago. ( laughing)

Paul: OK.(laughing)

Paul: So, in the relatively early days of the Web then to some degree…

Rachel: Yes. Yeah and I mean thats really so very important in that at the time there wasn’t actually that much to learn and I was chatting to people on for the parents on the forums because as I said, I didn’t know anyone with a baby and I didn’t know anything about babies. So, (Paul: Ahhh) I was using the web just to talk to other people in the same situation. And then if you wanted to put anything online there wasn’t Flickr or all of these hings. You really had to build a web site.

Paul: Right. Yeah.

Rachel: So, you know, once my daughter was born, I started putting together various HTML. So I could put together a web site telling people about her and things like that. And that’s what everyone did.

Paul: OK.

Rachel: You chat in the discussion forums and you build web sites. Uhm I don’t know… I quite liked that. That was always good fun. So, it didnt take that long before people would start asking me if I would build them a web site.

Paul: Mmhmm

Rachel: And… and at the time there was so little to know. You know, it was a bit of HTML and you had to do some basic things with images. As time went on, I realized I was actually quite interested in, what at the time fewer people were doing which was writing things with Perl which was about the only thing that anyone used to do things like guestbooks and (Paul: Yeah) posting forums to email. It was very, very limited at the time in terms of what people were doing on the server side. I sat down with the Orilley Camel book and taught myself Perl.

Paul: Oh Right, OK. (Rachel laughing) As you do.

Rachel: As you do. Obviously

Marcus: Or not, in my case.

Rachel: Yeah, well… I was bored. (all laughing) I had a baby. You know? Nothing else to do. So, that’s really how I got into doing the back-end stuff via such a strange route and I didn’t really realize what I was learning or if there was real reason to do so. It was interesting to me.

Paul: Do you think there was any advantages or drawbacks to taking that kind of route. I mean I know that most of us that entered the web in the early days did it through some convoluted route in preference to having some kind of formal training. Do you think the people that are coming along these days are going through a proper… you know, going through some kind of computer training course or whatever? Do you think their at a disadvantage for not learning it themselves and discovering it themselves.

Rachel: Well, yeah, but I think things are so different now. I mean back then, it really was a case of: You learned HTML. You learned a little bit about how to make graphics work online. And maybe, if you’re very pushy, you learned some Perl. (Paul: Yeah) And that was it. There wasn’t a huge amount of decisions. I mean, even just to start learning to do this now, you start having to think, “Well, which language do I want to learn? What is the best thing to be learning? Where should I put my time?” (Paul: Yeah, totally). You know, I was just kind of sitting with a little 486 computer and thinking, “You know… this is quite interesting. Look, I can do this!” But we were all just discovering what we could do at the time. Whereas now, if you’re looking at this as a career and what’s going to be best right from the start, before you’ve even gotten started, you know? (Paul: Yeah) So, It’s very different. And It’s very difficult when people always say, “Well, how did you get started? Have you got any suggestions on how I can get started?” And It’s so different now.

Paul: That’s probably one of the most common emails I get. It’s, how do you get started and what languages do you start with? So, I guess you really didn’t have a lot of choice. (Rachel (laughing): No…) It was Perl or nothing, wasn’t it?

Rachel: Really, I mean, yeah, there were other things around but generally people were writing in C, Javascript, and Perl. And the web host I happened to have, had this server which you were allowed to run your scripts on. (Paul: Oh, ok) (Rachel laughing) They were still slightly nervous of it. You know, it was just one server you could run things on. It was a quite good community around that. People would help each other out on how to do things.

Paul: So what advice do you give people who do write with those kinds of questions as to what languages to start with? What do you say?

Rachel: I think the important thing is to learn something well. At the end of the day, once you’ve learned one launguage, you can usually swap to something else. It’s the concept that’s the hard thing. (Paul: Yeah.) Understanding based design or understanding just the basic constructs of any language. Once you’ve done that, you can usually swap to something else. I usually say that PHP is a pretty good choice. Just because It’s out there, everywhere. (Paul: Yeah) You’re going to be able to easily find somewhere to run it. You can set up your own development environment without having to spend any money, really. You can get that all set up. And there is lots and lots of help and there is a great community around that. And to be honest, PHP is what we tend to develop in now and most of the time.

Paul: I mean, It’s quite interesting that you talk about those early days and how you basically got into it because you became a mother. But the early days in the web, and to be honest, to some extent now, there arent exactly a huge number of female developers around. I mean, it seems to be a very male dominated thing. Did that put you off? Did that create barriers to you?

Rachel: It didnt really at the time when I was learning because I came out of a very male dominated profession anyway, (Paul: Oh, OK.) having been working back stage. So, it didnt, worry me. And also at the time, I was just interested in learning it. I think out there in the work place once I became employed doing this, I encountered all sorts of strange situations where people really couldn’t quite get their head around the fact that I was technical and not like a designer or not something else that cliquey females are doing. I was the head of a technical team and went to help someone with a computer and I was the most senior person on the team. And they said, “Oh, can you not send one of the boys down?” (Paul gasps) I then said, “I can send one of the boys down. They’re not going to fix your computer for you, but I can send them down if that’s what you want.” (all laughing) I mean, so people were a bit taken aback, I think and don’t immediately assume that I do the job that I do (Paul: Yeah.) and are much more comfortable of putting me in a designer area.

Paul: Well, that was the mistake I made, isn’t it? (Rachel laughing) The first time, I suppose. I was the typical male chauvinist pig and presumed you are a designer, which I don’t know why. I think it was the hair color, more than anything.

Rachel (laughing): To be honest, I am not particularly hung up about it. It’s not something I get terribly upset about. I find it sort of intriguing that people just assume that. I’m not… you know… I’ve work in… sort of male dominated jobs for a long, long time now and I think if I got terribly upset about these things I wouldn’t be doing it. It is interesting. But in other ways, it works for me. When I was going for job interviews, for instance, if I’m the only woman who walks in and there are lots and lots of men, they’re going to remember me. (Paul: Yeah) And in the same, you know, if I’m pitching for work it’s a talking point. You know, people are always interested as to why I’m doing what I’m doing.

Paul: Damn, and here I was thinking I was asking original questions!

(Rachel and Paul laugh)

Rachel: I think sometimes, it does work for me because do remember. They would think can’t a woman do something a bit unusual?

Paul: Do you think it’s a problem within the industry or would you just think It’s one of those things and what will be will be kind of attitude?

Rachel: It’s really hard to see where it’s a problem. I think It’s a problem if girls or young women who are looking at career choices are being put off because they don’t see female role models out there. And, there’s lots of reasons why. There are women around doing this and tend not to be so high profile. (Paul: Yeah) I mean the reason that I’m not touring around all the different events and things is because I’m a mom. (Paul: Yeah!) You know, and I think that’s the same for an awful lot of women. I talked about this on my blog once and got loads and loads of women contacting me going, “Yes, exactly!” We’re the one’s doing the majority of childcare. I know there are men in that position too, and I’m not saying there aren’t men who are having to be… going to pick up kids at 3:00 or whatever it is. But it does tend to be women and It’s often the women who make that choice or wants to spend time close to the kids when they’re very little. My daughter is getting older but even so, I still wouldn’t be happy about, say going to a different country and leaving her here to go to an event.

Paul: Yeah. I mean to be honest, even for this interview we kind of have to fit it in around you taking your child somewhere, Marcus has got to do a school run in a minute. You know, so, it’s all part of the kind of… yeah… It’s nice we’re in a position where we can kind of fit our work around our families. It’s a good thing, not a bad thing.

Rachel: Yes, it is. And I think that’s possibly one of the reasons why there aren’t so many high profile women, because it takes time to raise your profile. And without me quite looking, I’ve been able to do that through writing, which I can do at midnight or whatever. If you’re going to get out there and get around to all the conferences and things, you know, and look at what other people who are considered to be my peer group and what they’re doing. I just couldn’t physically do that. (Paul: Yeah, totally) Because, I don’t want to. I don’t want to spend a lot of time away from my daughter right now. Maybe in 6 years time, she will be very disinterested in spending any time with me.

(Rachel and Paul Laughing)

Paul: Once she’s a teen-ager, you won’t want to be with her either.

(Both continue laughing)

Rachel: Exactly, you know, so things change but there are quite a lot of people with quite young children and actually more and more so. It’s quite funny, I feel like I’ve got quite an old child for the group of people that I speak to. There are lots of new developer babies out there.

Paul: Yeah, well Marcus is old and decrepit.

Marcus: Well, just to depress you, Rachel, what happens when they get older and become teenagers, they just rely on you as a taxi service.

Rachel: Well, I get that as well. That was the case today. I was ferrying mine and two others back from the

Marcus: The only thing I would say though is, we went through a period about 6 months the beginning of this year, trying to recruit new developers. And we only interviewed one woman out of probably a dozen candidates

Paul: I think that it’s worth saying that’s because we only have 1 woman apply, rather than we segregated all the women who refused to interview.

Marcus: That’s what I meant. Yes, well put Paul. We literally had only 1 woman apply, so yeah… I don’t really know why. Maybe it just seemed like kind of a boy’s area at the moment. I suppose, from what you were saying about the fact that you’re not inclined to go out there and sort of go out on the circuit like Paul does. I suppose until that happens, and maybe younger women who aren’t thinking about motherhood yet, are the ones who are going to be out there raising the profile of women and hopefully, this sort of “boys’ club” type mentality will sort of just fizzle away.

Paul: I mean, It’s quite interesting that you say, how you talked about how you managed to raise your profiles through writing. Tell us a little about that. How did you get into writing books? Because, you seem quite prolific. I did a quick search on Amazon to see exactly how much you’ve written and it seemed to go on for quite a long while.

Rachel: Yeah, there’s quite a few. That was, again, like most things, I tend to say, “Oh yes, I’ll have a go at that!” and then worry about it later. It was a long time ago, I had written some stuff for the Macromedia Web Site about Dreamweaver.

Paul: OK

Rachel: And it was Glasshouse who contacted me and said, “Oh, would you write a couple of chapters for a book?” A couple of chapters, that would be alright, you know (laughing). (Paul: Yeah, no big deal). So yeah, I wrote a couple of chapter for a book and it kind of went from there, really. I like writing. I enjoy… I’m much more from an arts background really than technical. So, I do enjoy writing and putting things across that way. So, yeah, it just went from there. And then when someone said, “Oh, will you write a few more chapters?” Yeah, ok, that was alright. (laughs) And before I know it, I’ve got this great list of books.

Paul: Yeah. It’s a very time consuming thing to do. I mean, beyond the fact that you obviously sound like you enjoy doing it. Do you find it beneficial from a publicity angle for bringing in work?

Rachel: Yeah, absolutely. I think people tend to see you as an expert if you’ve got things in print; if you’ve written things. It does sort of depend that you do know what you’re talking about. And especially with what I do, which is much more… It’s not like I have to show a nice portfolio of pretty things. This is what I can do. What people are doing when they hire me or hire my company is they are hiring us for our expertise. And they have to constant that we actually are experts; that we know what we’re talking about. So the writing does help in that because people assume that if someone let you write a book, you must actually know what you are talking about.

Paul: I mean, I get emails from people asking how do you go about raising your profile. I’m quite interested as to whether you stumbled into this. You know, you talked about you were writing for the Macromedia web site. Did you go out purposefully, intending to write for them or did it just kind of happen? How’s that come about?

Rachel: Again, that really just happened. But because I was writing on my own blog, and I was writing… you know, I was helping people out in forums. (Paul: Right) You know, if you’re out there doing things, people do notice. I mean certainly with things like magazines and books and you know, varies sites that want articles. There are people out there that are looking for people to write all the time, because there’s actually an awful lot of people who know what they’re doing but there are fewer who can express it and express it in a way that someone new to the concept is going to understand. If you are able to do that, if that’s something you can do and you are doing that on your own site or are helping people out in forums and things then it will get noticed. And there are quite a bit of places you can be submitting I suppose, to, you know, Site Point and Vitamin… There’s quite a bit of other sites that accept good content. (Paul: Yeah.) It means that you have to write a few things that you’re not paid for to get going. You can find then, that you can start putting together a body of work and say, “Well, this is the stuff I’ve done.” It’s not in It’self something that you earn a huge amount of money from. I think people who write for a living must have to work incredibly hard.

Paul: (laughing) Or be incredibly good. One or the other.

(Rachel and Paul laughing)

Rachel: Both I think, both. As something that helps raise your profile for the other things you do. If I found it an absolute chore, I don’t think I would do it because you don’t want to be sogging away at things you can’t stand in the hope that it will get you some profile. But it is one way to do it and It’s certainly a way to do it if you are in a position where you can’t get out to lots of events or you’re not someone who wants to do public speaking. I’m not keen at all on public speaking. I much rather hide behind the computer (laughing).

Paul: A proper developer. That’s what I like to hear.

Rachel: So, you know, It’s another way of doing it, because I do sort of think of the public speaking if you’re going to be thinking of conferences as being something that would really get that profile up there. No one has really met me until fairly recently at any events because I didn’t get to anything really. And yet a lot people would have known of me and the stuff I’ve done because of the lighting.

Paul: I mean, you talk about that you use this as a mechanism to you know, to increase your profile for the other work that you do. So, perhaps we ought to talk about the other work that you do. I mean, you run a company, “Edge of My Seat” which is edgeofmyseat.com. How did that start? You obviously from going… from being an enthusiastic amateur, you must have gotten a job in web design, I’m guessing. How did you go about getting that job and from there, how did you end up running your own company?

Rachel: Well, I… When I decided I actually wanted to go back to work… I’ve been doing bIt’s and pieces while my daughter was quite little and I decided I wanted to go back to work and it was really tail-end of this whole dot com era. (Paul: Oh, OK.) And so, I ended up heading up a technical team at Property Finder. (Paul: Oh, OK. Yeah, I know.) Which was very much on the technical side and we managed the servers and things like that rather than even doing any development or very much development. There were other people who were more on the development team, although we still did bIt’s and pieces. I did that for a while and the whole sort of dot com thing was starting to fall apart really, at that point. And I moved to another dot com company who built portal sites for accountants. So I know quite a bit about stage integration (Paul: Wow. What an exciting life you have). Yeah, but that’s the time where things really weren’t looking that stable and I felt, well I can actually do this myself. And at least then I would know where I was in terms of whether I was going to get paid by people. The problem is being employed in an unstable situation is that really, you can work a whole month and get to the end of the month and find out that nobody’s paying you. (Paul: Yeah.) And so I figured that actually, I may be better off setting off on my own. And so people had asked if I would take on bIt’s of freelance work and things. And so, I actually purchased a printer’s trust because at the time I was a young single mom. I’m not so young anymore but I purchased a printer’s trust and this in 2001. And they basically gave me a small grant and loan to get the company started. So, I had about a month’s money when I started. (laughing) I didn’t have the dot coms, so I kind of had to work. (Paul: Wow!) It’s a good way to start a business, you know (Paul: Yeah.) … make or break really. If it doesn’t work, we don’t eat.

(Rachel, Paul and Marcus laughing)

Marcus: I remember that feeling very well.

Rachel: Yeah.

Paul: Yes

Rachel: But it makes you really dive into it. The nice thing was, because I was paying for a child, mind you, at the time, I actually only had to earn half of what I had earned because I could keep her home with me.

Paul: Ahh, ok.

Rachel: So, I must have cut my expenses by being able sort of work around my daughter’s schedule and things. So, that kind of worked out alright and really, it went from there.

Paul: So how did you begin to win the business in that first month of, “Oh crap! What have I done?” (Rachel and Marcus laugh) You know, where did the work come from?

Rachel: Well, at the time, what I realized was that because of how the dot com was collapsing, everyone was getting rid of their developers. But they still had all these applications. And something I’ve always been good at is picking up on other people’s stuff and working on it. So, probably, uhm, September ’01, which was like a terrible time to start a company (Rachel and Paul laugh) and really for the first two or three years was taking stuff that was already built and was falling apart, or the developers had gone or had all sorts of problems with it and just fixing it or adding bits to it. And I did lots and lots of that which, during this time of recession, really, was actually, really good work because there was plenty of it. Everything had to have been built while they had lots of developers and they had money and things. And so I sort helped things limp along a lot. And what this sort of lead to really was this idea of doing development for design agencies. (Paul: OK.) And focusing on doing really good development to support really nice design. That really is what we’ve moved on to do now. Most of our clients are designers or design agencies. And they do a really good design, and then they hand it over to us and we look after it and we make sure it will work. (laughing) That’s actually a really nice way to work because it means we get to work with some really nice stuff, anyway, well designed stuff and we have people who care about what they do. (Paul: Yeah.) And we get to do the development side of things that we enjoy. Sort of working with people rather just sort of chucking things over the fence and throwing it back.

Marcus: The point your picking about picking up what other people have done and fixing it and that kind of thing… did that not kind of cause you problems with development platforms and having to deal with lots of different types of languages and that kind of thing?

Rachel: Yeah. I had learned ASP by that point and a bit of Java. And I tend to not have too much problems swapping from one thing to the other. Certainly, I mean then, it was a lot of Perl and my class PSP. Because that was, at this sort of time, they were really the two things that you were seeing things built in. So, I used to do either and then I started doing PHP as well around the same time. So, I’ve always been quite happy swapping between languages, swapping between databases. (Marcus begins to speak: I think the reason why…) It gets a bit much if you do too many in one day, you know, because you start putting semi-colons in the wrong place and stuff. It doesn’t really bother me too much. I mean, its nice to be able to concentrate one thing. As I said, we tend to build new stuff in PHP. But, I’m generally quite happy switching around.

Marcus: I suppose, the reason why I was asking is we’ve come across a few briefs that we’ve been sent in the past where it seemed like the perfect job for us but the development platform in particular has been something that we just don’t work on. Do we want to invest on that kind of platform just so we can go after this job and quite often, we’ve thought to ourselves, “No, we don’t.” So, I guess that’s where the question is coming from.

Rachel: Yeah, I think in terms of new stuff, you kind of do have to focus unless you’ve got an awful lot of people able to create your own libraries and things in different languages. So for new stuff, we do tend to choose PHP but at the time, what I was doing was just picking up on stuff. It was less of a problem really because I was just fixing stuff that already existed.

Paul: You seem to have done very well over the last few years and Drew has come and joined you now and you seem to be branching out a bit into the area of training. That seems to be something that’s come up.

Rachel: Yup.

Paul: I’m quite interested, you know… it’s great you’re there and you’re able to offer training courses. You do have a basic CSS training course, I think (R: Mmmhmm) and you’re talking about doing an advanced one, is that right?

Rachel: Possibly going to do that. We’ve had a few people ask. (Paul: OK) So, that’s what we’re thinking of doing.

Paul: So, I mean, the question now is who trains the trainer? How do you guys stay on top of the latest things that are emerging and how do you keep up with what’s going on?

Rachel: Well, basically, because we are doing it all the time, I think. The difference between us and a training company that just does training is that actually what we’re doing is, we’re using this stuff all the time. It’s the same as when I buy a book. I’m writing a book from the point of view of someone who has to do this. You know, who practically is doing it. And it’s the same with the training. Obviously, we’re constantly reading up on new things and trying things out in browsers and trying to get around problems and just by the day to day work that we do. So, that’s really what we’re bringing to a training course. For two or three years, people have asked me if I would do training. But until Drew joined, we just didn’t have the capacity. It comes down to one of those things that have to be arranged. So, it wasn’t saying that I really felt that I couldn’t do, but Drew was making to do it as well. Its great fun. Its an enjoyable… its actually enjoyable to be face-to-face with people. Especially writing a book and then the feedback you get as the occasional email that people say, “Oh, I really enjoyed that!” or, “Why did you say this? Its rubbish!” (Rachel and Paul laughing) Actually being face-to-face with people and seeing how they work through the course is really, really interesting and great fun.

Paul: Cool!

Rachel: So, yes. It’s been good.

Paul: Excellent! Well, thank you so much, Rachel, for coming on the show. It was really good to hear how you got into things and how your career has progressed. Even if it’s somewhat chaotic along the way. Although I can associate with that (Rachel laughing) kind of bouncing from one thing… We’d set up Headscape in January, 2002. So we were only 3 months behind you, so we understand your pain there.

Rachel: Yes, well it wasn’t the best time, really.

Marcus: We were both made redundant from a dot com in December, 2001, so it was necessity that got Headscape, I think.

Paul: Yeah. Always the best way. OK, thank you very much, Rachel, uhm and I’m sure that we will get you back on the show again if you’re willing at some point (Rachel laughing) in the future. Alright, thank you.

Rachel: OK.

Listeners email:

So just before we wrap up the show I wanted to share with you an idea sent in recently by a listener (sorry I can’t find your name)! A number of you have written in since we said we were going to change the format of the show with ideas about how things could be improved. One idea that particularly appealed to me was a new short section at the end of the show where we read out some listeners emails. These emails could be a question, comment, recommendation or indeed anything else you think others maybe interested in. So whether you have a tip for improving your sites search engine rankings or just want to tell me how ignorant we are then drop us an email. Write in soon as we need content for next weeks show!

Top Geek Gifts

Posted in Reviews on December 14, 2007 by Paul Boag

So this holiday season (previously known as Christmas), what gifts would you recommend others buy for the geek in their life? Here are my top 10…

These are products I own myself and would happily recommend to others. They are not in order and I have tried to pick things that suit varying budgets.

1. A mac

2007 was the year I moved from a PC to a mac and I have never looked back. Best of all if you have the budget they make great gifts. They look cool, are a pleasure to setup (no swearing on christmas day when something doesn’t work) and if you give him a week he will be insisting that you have one too so he no longer has to provide technical support for windows. Buying a computer can be scary if your not technical yourself so I suggest going along to an apple store. Those guys will be able to help you with selecting the model that best suits the geek in your life.

Prices start at £700 and are available through the Apple Store.

2. An ipod touch

I actually don’t own an ipod touch but I do have an iphone. However, I thought it was unfair to suggest something that has a £35 per month contract associated with it! I love my iphone and can’t imagine anybody not being pleased with an ipod touch. They are sexy, fun to use and definitely a cool toy for christmas day if they haven’t played with one before.

The 16GB version of the ipod touch (which is the one you should buy) costs £269 and is available through the Apple Store.

3. The Jawbone

The Jawbone is a bluetooth headset unlike any other. I have awful hearing and have trouble with mobile phone conversations. The Jawbone however has amazing noise cancelling technology that makes calls crystal clear no matter how noisy the surroundings. Best of all it looks cool and you almost don’t feel ashamed to wear it in public (unlike most headsets). In my opinion the Jawbone is the best headset on the market.

You can buy the Jawbone in pretty much any mobile phone shop and I have seen prices as low at £64.

4. Getting Things Done

Most geeks I know live a life in chaos. Getting Things Done is a superb book that has transformed my life and made me a more organised person. If the geek in your life does not read then buy it as an audio book and pre-install it on his new ipod touch!

You can buy the book for £7.14 on Amazon or for $12.60 as an audio book from Audible.com

5. Moo Cards

Moo Cards are cool little cards similar to mini business cards. You can print 100 cards for £9.99 and each card can have its own unique photo. You can either upload photos or just grab some random photos from his flickr account.

6. A flickr pro account

Talking of flickr why not upgrade him to a pro account this christmas. Flickr is the most awesome photo sharing site around and although it has a free account it is definitely worth upgrading. For just $25 the geek in your life can upload a limitless number of photos.

7. A Tom Tom

My sense of direction sucks and I couldn’t live without my Tom Tom GPS. Chances are the geek in your life doesn’t get out much, but when he does he wanders around looking lost and confused. A cool GPS in your car might encourage him to venture out of the house more. You never know.

They seem to sell Tom Toms pretty much everywhere these days from Halford to Currys. Prices seem to start at the £149 mark. To be honest the lower end models seem perfectly good from what I can tell.

8. A DVR

A DVR is a Digital Video Recorder such as the TiVo in the states or Sky Plus in the UK. These clever little boxes let you record programs to a hard drive, pause live TV and series link an entire season of a show ensuring you never miss it again. Having one of these babies will change the way he watches TV forever.

If you buy Sky Plus online at the moment you can get the box for £49. Of course it does require a sky subscription which starts at £16 per month.

9. A Duct Tape Wallet

Okay admittedly a wallet isn’t the most hi tech gift but Duct Tape Wallets are cool. Basically they are… well… wallets made out of duct tape. I know that sounds strange but they make a great stocking stuffer. Mine has lasted forever, it always generates discussion and its easy to repair (stick more duct tape on it).

I bought mine from Ducti and it cost about £15.

10. A Wii

I know there is world wide shortage of these babies but try to get one. The geek in your life may sneer at it but they are strangely addictive. The novelty will wear off after a while but not before you have had many hours of fun watching your geek actually taking exercise and socialising with others!

Good luck finding one of these. Prices seem to range from about £270 to Millions on Ebay at the moment.

Actually looking back through this list I think I would recommend most of those gifts for pretty much anybody. However, the real question is what would you recommend? Add your suggestions to the comments.

A better information architecture tool

Posted in Reviews on November 30, 2007 by Paul Boag

I have never managed to find a tool I like for creating site hierarchies and getting them signed off. However, recently I found something that is definitely getting there.

You wouldn’t think it is much to ask for all. All I want is a simple tool for creating site maps that I can show to the client and get him to sign off on the site hierarchy. Okay so I am actually a bit more demanding than that. I guess my actual list of requirements would be as follows…

It has to be easy to use and not have too many unnecessary options that just get in the way
It needs to look nice so I can show it to the client and it looks professional
I need to be able to print it
I need to be to save it in a format that I can easily send to the client
In an ideal world I would like to be able to work on it collaboratively but I accept that might be asking for too much.

Sure there are a lot of site tools around but they all seem to fall down on one of above criteria. For example something like Visio or Omnigraffle are great but are overly complicated. There are simpler products out there but to be honest most of the ones I have used just produce damn ugly site maps. There are a few online tools which are pretty simple and produce nice site maps but they always seem to mess up when it comes to printing.

A while back I received an email from a guy who had developed a site map tool called writemaps which he wanted me to mention on the show. I took a look hopeful it would meet my criteria but unfortunately it did not. I wrote a polite email back explaining that I felt there was more work to be done on it before I was willing to endorse it and that was the last I heard from him until recently.

The site has now had a complete overhaul and I have to say I think it is superb. If you share similar requirements to me when it comes to creating a site hierarchy then this tool is for you.

Easy to use

It has a clean simple interface that requires minimum effort to create a site map.

Screen capture of writemap showing the clean user interface

Visually attractive

It has an attractive design which I would be more than happy to show to any of my clients. The only downside is that currently you cannot differentiate between different page types (all pages look the same). However other than that it looks great.

Screen capture of writemap showing the version of the interface without the edit controls

Great printing

Although the printing isn’t perfect yet it is still extremely good. I did encounter some small rendering issues (which I also encountered when zooming) however overall the result is very satisfactory.

Screen capture of writemap print view

Lots of saving options

It allows you to save online, create a backup or even save as XML. Unfortunately it doesn’t save as an image but I guess you can always do a screen capture.

Sharing

Best of all you can share a site map with somebody else. You can even choose if that the person can edit it or not. Great for showing the client.

Screen capture of writemap's sharing preference window

This is a huge step forward from the version I originally saw and so I suspect things will continue to improve over the coming weeks and months. Also I have only touched on a few of my personal highlights. You can also do many other things like..

Add notes to individual pages
Associate a page with a live webpage
Show or hide branches on complex site maps
View the site map as a hierarchical list instead of a tree

If you find yourself having to produce site hierarchies and if you need to get clients feedback on them then this is definitely the tool for you. Best of all it’s free so sign up for an account at writemaps.com

Show 101: Delusional

Posted in Classic shows on November 6, 2007 by Paul Boag

On this week’s show: Paul finally looks at the subject of intranets. Marcus delves deeper into the subject of rates and Andy Budd discusses getting design sign off.

Podcast: Download (28.8MB)

Download this show.

Launch our podcast player

News and events | Marcus: Rates (Part 2) | Paul: Intranet delusions | Andy Budd on design sign off | Question of the week

News and events

OpenSocial from Google

The big news this week is the launch of OpenSocial, which is a new way for developers to build widgets/applications for a number of high profile social networks. At the moment the line up includes Google, MySpace, LinkedIn and many more. It really is an impressive list of partners.

This is exciting news for those who wish to deliver content to existing social networks as before OpenSocial it was necessary to re-code your application for each site it was delivered to. In many cases this just wasn’t worth the effort and a lot of developers just focused on the big name that is Facebook.

Now developers can build once and deliver to any number of social networking sites. However what is even more interesting is that you can build these applications using nothing more than HTML and Javascript. Unlike building an application for Facebook, coding for OpenSocial looks like it is going to be extremely easy.

The development community is still trying to get their head around what exactly all of this means but it would appear that OpenSocial does not go as far as some would like. For example (as Jeremy Keith points out) it does not solve the problem of having to re-enter your personal details and friends on every site you sign up for.

Content and presentation

I came across an excellent post by Mark Boulton this week that looks at how designers engage with content. He comes at it from the angle of typography, arguing that it is about a lot more than just typefaces. However, his underlying point is much broader.

How often do we really engage with the content on the websites we design? Does the content inform our designs? Are we just building templates that get populated or are we really working with the content in the same way art directors do?

If you look at traditional ad campaigns the design and content work hand in hand. The design reinforces the message and the message informs the design. Although we see this all the time on TV commercials, billboard ads and marketing campaigns we rarely see it on the web.

In many ways we have cracked a lot of the technical challenges of the web. We have best practice for coding, accessibility and usability. We know how to make our sites available and usable for all. But do we know how to really engage with users? How to interact with them on an emotional level? That is the next big challenge.

Online calendars and date pickers

The final news story for today is another great list from Smashing Magazine. This time they list the top online calendars and date pickers. I don’t know about you but I seem to spend a lot of time working with dates for various reasons. Much of the information we put on the web is date specific, from events to blog posts. It is common to want users to be able to search by date or access a calendar of events.

This post from Smashing Magazine offers a plethora of date related tools from online calendars you can embed into your own website to date pickers that avoid those difference in date formatting.

If you ever need to work with date related information this list is worth a look.

Marcus’ bit: Rates Part 2

This can be a tricky subject and, because of that, I’m not going to go into what Headscape charges. I’m going to look at some survey figures and talk about charging for different services and when and how you should go about raising your rates.

This topic is of interest to both clients looking for an agency as well agencies and freelancers – we all want to know if we’re competitive. To save myself writing about this from both angles, and probably confusing everyone, I’m just going to concentrate on this from an agency standpoint. However, each point is easy to switch round to the client angle.

Enough rambling…

You get what you pay for

So using my favourite car analogy, are you offering a Bentley, a BMW, a Ford or a Lada! I guess the point I’m making is don’t over or under sell yourself. Recognise what you can offer and go hard for that market.

Have you got thousands of happy clients being serviced by a hundred staff in marble clad offices in central London? Or are you and your mate from Uni just kicking off your business in your dad’s garage?

You might not like it but talent, in this case, doesn’t really matter one jot. No big spending client is going to go for our second option above. This is fact of life. Accept it, move on.

If you want to charge top dollar then you need to show the following:

Relevant, high quality portfolio
Reliability and flexibility
Wide range of services
Innovation or at least ‘keeping up’

So, what do people charge

Right here, right now – I don’t know. However, I have got details of a UK survey carried out a couple of years back that, with a bit of an uplift, are I believe still relevant.

These are daily charge out averages across all agencies that submitted to the survey:

Director – £750
Consultant – £650
Creative lead – £670
Designer – £570
Project manager – £600
IA/usability consultant – £610
Developer – £610

Of course, the actual figures varied greatly even within certain disciplines. For example, creative lead rates were as low as £370 and as high as £800.

Pricing roles

At Headscape we used to have one flat rate for all services provided. At the time, this felt fair and was certainly easy to manage.

As we have grown, we have found that the pressures on some staff, particularly the directors, have grown markedly and therefore we have had to charge more for those roles.

Regionality

The survey suggests that regional price differences are, pretty much, London and ‘everywhere else’. Notably with the South West coming a strong second! (We are based, more or less, in the South West).

Large city based agencies will always be able to charge a premium but I expect this is less so now due to ease of communication. We have had a number of clients over the years that we have never met.

Raising prices

This is a balance. We should all raise our prices to keep up with inflation but, we should only do so if we think the market will take it. Also, it’s possible that a particular service that was seen as ‘cutting edge’ and therefore got a high price tag, may later become ‘run of the mill’ so it’s possible that you may need to cut the price for that service.

Paul’s corner: Intranet delusions

I have been asked a number of times to talk about Intranet development and I have always avoided doing so. This is partly because I am not an expert in the field (although that doesn’t normally stop me talking about something!) However, it is also because intranets are a massive area and one in which so many mistakes are made. There seems to be a huge amount of naivety about developing and running Intranets. Against such a backdrop I am somewhat unsure where to begin.

In the end I have decided to take 5 of the most common misconceptions about Intranets and see if we can shed some light on why they are wrong.

Ask the expert: Andy Budd on design sign off

Paul: Joining me today is Andy Budd, hello again Andy.

Andy Budd: Hi Paul, how are you doing?

Paul: Not bad, it’s been a little while since I’ve had you on boagworld, I think?

Andy Budd: It has, I think it’s been a couple of years now, I think it was d.construct 2006 was the last time I remember chatting to you.

Paul: Unbelievable, I’ve spoken to you since then on the .net podcast mind, so, we’re keeping in touch.

Andy Budd: Yeah, and also just hanging out together, and doing, ya know, things.

Paul: I try and obviously avoid you, because whenever I meet you, you seem to be horribly rude to me but I will forgive you.

Andy Budd: What?!?

Paul: (Laughs)

Andy Budd: Oh Paul, you know that’s not true, that’s not true.

Paul: Ye, but I want to paint you in a bad light and get a bit of sympathy for myself.

Andy Budd: Oh okay, that’s your tactic actually isn’t it?

Paul: Yeah.

Andy Budd: I also heard that you try and play dumb, so ya know, everybody else comes across as being smart and you get the sympathy vote.

Paul: You’ve been listening to the Rissington Podcast haven’t you?

Andy Budd: (Laughs) I have indeed.

Paul: (Laughs)

Andy Budd: I’m not sure I’d buy that but, ya know, it sounds good.

Paul: You think I’m just naturally dumb?

Andy Budd: … So what was the first question?

Paul: Okay.

Andy Budd: (Laughs)

Paul: First question, no, what we’re going to talk about today with Andy is just looking at maybe processes, ya know, when you run a website company how do you go about dealing with getting things like design sign off and this was something that came up quite a lot in the 100^th episode that we recorded a little while back and is also some we talked, we vaguely talked about running a web company on the .net podcast recently but I kind of wanted to home in more on design, because design is a hugely subjective area and getting design sign off is quite a challenging process. So Andy lets kick by just, if you could give us a rough sketch about how clear:left go through the design process, what are the steps that you go through?

Andy Budd: Yeah absolutely, it’s kind of interesting because it has changed, ya know, a small amount anyway from when when we started to what we’re doing now. I guess one of the main differences from what we do to what a lot of other agencies do is we generally only present a single design concept. It’s very common, particularly for companies that come more out of a print background to do this whole idea of like, we’ll show three design concepts to a client, I think that partly comes from a desire of print design companies too sort of make a bit more money rather than just showing one design, they do three designs a let the client pick. I’ve always found that this is kind of an odd way of doing things because, well first of all I don’t think you really giving your client good value because what your ending up doing is your doing three times the amount of work and the client only get a third of the value, they get to pick one of those three designs.

Paul: (Agrees)

Andy Budd: The other thing I’ve found is whenever I worked at agencies that have taken that process and I’ve been the designer developing the designs invariably what happens is you, say you’ve got a week to produce the designs, you spend maybe three of four days on one design and it’s working really well and your happy with it and it’s moving in the right direction, you only spend one or two days on another design which you kind of fine with, if the client picks it then your happy because it looks nice and then you’ll do something quickly for the last half a day just to kind of fill up the space.

Paul: Yeah.

Andy Budd: And then you have this horrible situation were by, even if the client picks the design that your least convinced with or what more than likely happens is they’ll pick elements from each design and create a bit of a Frankenstein’s monster, and I kind of do think that clients come to professional design consultancies for their design knowledge and their design experience and I think that from my perspective and from my experience the design that the designer feels most happy about is probably the design that fits closest to the clients goals, because that the one they’ve been spending the most time and effort on, thinking about, so really the first thing we tend to do at clear:left is only ever show our client an initial design or one design. That doesn’t necessarily mean that we’ll only create one design, quite often, for instance, Paul one of our designers, our lead designer might create a couple of different versions initially and we’ll have a design review and I’ll look at what’s going on and we’ll chat about various pros and cons of the different designs and he might spin off in another direction but we tend to show the client what we think is the best bet rather than something that is half finished or just something that we don’t think is quite right.

Paul: Yeah, I would agree with that, that the whole principle of if you show a client a multiple designs they inevitably pick a little bit from each of them and that never quite works as well as it sounds. I mean, have you ever tried with multiple designs, having more than one designer work on those designs so you do like one each with three of you or something like that?

Andy Budd: Well again, I think this goes back to giving value to the client and I don’t think it makes sense for the client to pay for two or three designers time and expertise to give them the opportunity to only pick one.

Paul: (Agrees)

Andy Budd: I think what tends to happen in that sense is design stops being about solving problems and starts to become much more subjective and almost a beauty competition.

Paul: Yeah.

Andy Budd: So what happens is rather than the client picking a design or understanding the design from a technical point of view, ya know, why you’ve, ya know, what mood your trying to create or what feeling or sensation or how the hierarchy works and how the hierarchy that you’ve created matches the hierarchy of use that you need a user to flow through. Rather than it being more scientific it becomes much more subjective and it becomes much more about, ya know, whether the client liked particular colour, they had a particular colour on their bedroom wall and they hated it or they loved it or it’s their favourite colour, so I think, again, just having that kind of three design approach makes it much for subjective and much less scientific.

Paul: Yeah.

Andy Budd: I do agree that if a clients got lots of money, ya know, your talking with a big client and they’ve got months and months of design budget available then it does make sense, the kind of clients that myself and most of my colleagues sort of deal with, they got reasonable budgets but they haven’t got budgets to burn so they want to see as much value as possible and the idea of pitching two designs just kind of, ya know, seems… it just doesn’t in an environmentally sort of, ya know, challenging world that we live in at the moment, where people want to recycle and people want to see usage. Throwing two designs away always seems a bit, kind of wasteful.

Paul: I mean, talking about the thing of making the process more scientific and less subjective, how to do you go about encouraging the client to set aside personal preference and focus on how they should really be judging the design? And, sorry, there’s a spin off question now which is how should they really be judging the design?

Andy Budd: Well, it’s a really difficult question …. I think everybody feels that they have a good understanding of what design is. Everyone’s got their own personal opinion, everyone’s got their own personal tastes, so everyone feels that they’ve got an understanding of design. We’ve all watched changing rooms, we all know that a fancy designer comes along and he’s got big cuffs and ya know paints, crazy colours on the wall, sticks vases all over the place and that’s design, but I think what people actually see is not design but the manifestation of design. The actual design process is much less creative than people like to think, it’s much less throwing bits of colour on the wall and using your creative juices to see what colours and shapes match. It is much more the processes, much more the starting off with a central problem or a central set of problems that you’re trying to solve and using design techniques: hierarchy, colour, weight, positioning, to create a design that solves a solution, and again, and you have to look at design works within constraints. If you are asked to sit down in front of a blank canvas and just create something, that’s much more than an artistic endeavour than a design endeavour. Funny enough, we were having this conversation in the office today, a couple of minutes before we had this conversation and it’s much easier for good designers to have constraints, to have content to design around to have an idea who’s going to be using the site so I think design is much more the scientific process than a number of clients give it credit for. In answer to your first question “how do you get clients to feed back in the right way”, it’s very, very difficult. Ideally, what I’d like to say is, we sit down with every single client and explain the design process in detail, explain how it all works and stuff but unfortunately, design is very subjective and also feed back is very, very difficult to interpret. If a client comes to you and says “I want it more wizzier, more zingy” their using the vocabulary they have at hand to describe something they have an idea of in their mind and our job as designers is to try and understand what it is they are actually trying to say. They are trying to communicate a visual thing or a motional thing with words and quite often it’s not possible, quite often, you will have to try two or three different approaches before you actually figure out what “zingy” means. Does “zingy” mean bright and colourful, does “zingy” mean they want motion and so it’s difficult having design discussions with people who aren’t trained in using ya know, having design discussions and frankly, I find it difficult enough sort of having internal design reviews with our designers and trying to describe what’s right and what’s wrong with the design. So I do, ya know, I do really understand from a clients perspective, how difficult it is to try and deal with their designers and get their designs or get their sense across. I think we always try and take it back to first principals. We try and encourage our clients, no to sort of worry or obsess too much over the details but to kind of think more of the broad picture so not more whether you like this particular colour or whether you like this particular shape but ya know, what kind of sense of feeling you’re trying to have this design communicate ya know, we’re doing some work with an environmental website at the moment and they really wanted to create a sense of a feeling of nature and openness and warmness but really avoid the kind of clich233s ya know, let’s have pictures of trees and ya know, it will all be green and kind of earthy. So they communicated the sense and the emotion they wanted to get across and then we obviously translated that and put it into graphical format and I think in reality, that’s what the designers’ job is. It’s translation, except instead of translating one written language into another, we’re translating a written language or an oral language into a visual language and so it’s interesting but yeah, it’s setting the boundaries and saying to people, this is not, ya know, we’re not asking you at this stage to comment on the details or on the general sense, the layout or the feeling and as you move along, get more and more specific.

Paul: You talk about how sometimes a client uses a different language to describe what they’re seeking from a design so do you ever use things like mood boards or what other sites do you like as a way of kind of getting an idea of their personal tastes? And should you be catering for their personal tastes anyway?

Andy Budd: It’s a fine balance, I mean, yes and no. Ultimately, it’s not the client that will be using the website, it’s the clients’ client, so the clients’ customers so really the ultimate goal is to create something that, ya know, the customers or the visitors are going to use, the visitors are going to love and their going to feel as though it’s their own but obviously, you are also dealing with human emotion and if a clients paying you money to create a design, you want them to be happy with it as well. Again, it’s an interesting challenge. We used to in the past, really encourage our clients to go out and have a look at different websites that are out their and we’ve actually got a, sort of a flicker group of inspiring websites that we can point clients to and say, look, here’s some of our favourite websites. Why don’t you go and have a look at some of these, ya know, use those as a basis because it’s really useful instead of asking people to off cold to describe what they want and to actually show you stuff and say, I like the typography of this site or I like the colour scheme of that site. A lot of designers will actually say, you shouldn’t ever show sites, ya know because then it kind of gets a bit derivative but I think, ya know, as we’re working on the web it is helpful to show clients similar designs in that same medium so I think it is useful for us anyway to show clients sites. And that’s always a good starting point, ya know, we like this site because and we like that site because. Unfortunately is sometimes backfires and sometime, particularly if the client isn’t as, sort of embedded in the design community as we are, they will pick some sites that they use on a daily basis that don’t necessarily show good design as designer might preserve it and then we have to kind of work round the edges and show kind of show them what we think they might be kind of thinking about, but the mood boards is a really good point it’s something that we’ve started using more recently and it’s a really good kind of first step, rather that jumping straight to the design process and possibly missing a translation, we have started showing clients mood boards, and if some of your listeners don’t know what mood boards are, they’re essentially a very quick way of explaining a mood or a sense or a feeling or a colour scheme on a design without actually having to do visual design, so what you do is take elements of design that you might have seen elsewhere, you might take some interesting photos you’ve seen on flickr, and maybe those photos have an interesting colour scheme or they might have a particular theme or sense that your trying to get across, ya know, maybe take some navigation elements from one site or a t-shirt you particular like the colour scheme from, a whole bunch of different things, put them down on a piece of paper, I mean in the old days it was a piece of paper in advertising, they would cut out bits from magazines. These days we tend to do digital mood boards which are more graphic art and photos and present them to the client, and that gives the client a kind of basis in which they can spin off their opinions, so they can look now at this mood board and say well, we said we wanted it clean, we didn’t mean we wanted it sort of white, we meant we wanted it sort of, ya know, some other adjective that works with clean, and it kind of gives them a discussion point, rather than just sitting around words you can now look at something physical and tangible and the good thing is mood boards only need to take an hour or two. And again we’re working with a client at the moment and we initially created some mood boards for them and it sparked a discussion and they weren’t sure about some of the things on the mood board but some of the things on the mood board they really liked so we worked out a second iteration which was even closer to what they wanted and when we finally sort of got to a level that we felt both of us understood what we expected from a design point of view then you can move onto the next stage.

Paul: Yeah, I mean it’s quite interesting, I think design from my personal experience is as much about what you do before you site down in front of photoshop or whatever than it is actually in the actually putting pixels on the page. I’d be interesting in what other things you do before you get to the design stage, you’ve said you use mood boards, what about things like personas what business background information do you tray and get before you start? Do you get people to personify there company and describe what kind of person it would be, ya know all the kind of techniques that people use, what do you guys use?

Andy Budd: Well again, that’s really interesting, I mean your right, a majority of people kind of think design is a visual thing, ya know, so, ya know the first thing they think about or expect when they’re getting designs is to see some kind of photoshop comps or some pretty pictures, clear:left we are a user experience design consultancy and what that essentially means is we kind of do meta design, we don’t just do the visual stuff but we design the systems and so what we do from the outset of dealing with our clients is we have workshops with them we ya know, a big discovery period to find out exactly what it is that they want, ya know, requirements gathering, we’ll do research into their users so quite often we’ll go out and we’ll interview potential users, their potential kind of market, we’ve done work in the education sector we’re we’ve spent a few days in schools and we’ve talked to teachers and pupils and school secretaries to find out how they do their day to day work, what kind of features and functions they would require off a site, using this information research we might create personas, and personas are a great way of capturing a rough demographic I guess of users and it allows you to start thinking in terms of how people will use the site because what tends to happen is people will sit down and think of the stereotypical user but each users got different needs and the nice thing about personas, is if you’ve got your personas fairly accurate it can then help you work out what features and functionality you need by following on the scenarios, a scenario is say your buying shoes or you doing a shoe store, so it might be that I want to buy a pair of dress shoes because I’m going to a formal function so I want to get a pair of smart shoes to match my suit so then what you can do is you can sit down and plan out on this system, how would I get from the homepage through to the purchasing process, how to get from a to b to c and that kind of helps design the system. The problem with personas is quite often you will do personas and they’re sitting in a draw, so personas aren’t right for every single project, and we’ve had a couple of experiences recently were we have done personas and we probably shouldn’t have done because the client already had a fairly good understanding of what they wanted to do but it’s kind of trial and error.

Paul: Yeah.

Andy Budd: Most of the time we find personas work really, really well, but they do work best when the client doesn’t really have a set idea of how their website is going to function and ye we do wire frames and wire frames are a big part of what we do, a big part of information architecture and big part of the user experience and design and again if your listening are you aren’t aware of what a wire frame is, it’s kind of somewhat like a story board in movies, so in a movie rather than just going and filming everything because celluloid’s really expensive, they’ll get some artist in to draw out scene by scene, frame by frame almost, how the story is going to progress and that’s a way of planning the shots, planning the locations and you can sit down in front of the story board and get a real sense of how the movie is going to flow and to work before you ever need to set up on set, and so we do something very similar with our websites, we create wire frames, which they can be on paper, they can be in HTML and it’s literally kind of a wire frame a kind of rough representation of how the site is going to fit together, and so when it comes to visual design and it come to the interface design the designer isn’t working from a blank sheet, they’re working from a fairly details blueprint, no so much on layout terms but on content, ya know, we need to have this block of content here, this is what inside this block of content, this is the hierarchy, this is more important, this is less important and so basically once the client has seen the wire frames and understood how the process is supposed to flow, they’re already signed off and they’ve already agreed to lay off the design decisions were as more traditional visual designers would try and do that on a photoshop document and I don’t really think you can capture, ya know, if you doing a fairly flat design or a fairly simple brochure website, you can probably capture that sense in a photoshop document but if you doing a more advanced, if you doing a more complicated site that has more interaction, maybe a, like a sort of social software, web applications site, you can’t show all this stuff in a flat document so you need to have this click through process.

Paul: No that’s cool. Okay to rap up I just wanted to ask about the subject of iterations because it’s something that we’re asked quite a lot and basically what people do or are concerned about is how many iterations do you go through when the client comes back to you and says I want this changing and then you make that change and then they want something else changing and it kind of can go on through this endless cycle, were do you draw the line do you have a contractual arrangement, we’ll do three versions of this or how do you deal with it?

Andy Budd: Again a very interesting question, the way we tend to work a clear:left is we tend to sell our services based on time spent rather than some kind of end point, because design is very subjective and as you say, you can’t sort of keep going on and on and on and keep making changes because not only will the project spiral out of control in terms of time but also in terms of budget and stuff, so what we tend to do with our clients and with our project is we specify a certain amount of time, we’ll spend 20 days on visual design and ye 20 days on a template build or whatever and we are a little bit flexible and this kind of almost goes back to something I was talking about on my blog recently about deadlines and stuff, ya know, if design takes a couple of days more and templates take a couple of days less in the end it all kind of balances it’s self out, but we do tract time to make sure we’re on track, we tend to say to clients that we’ll offer two iteration, again sometimes it requires more sometimes it requires less, but all along we track the time so to make sure we’re not going vastly off. What we try and do is kind of make the iterations increase in size so going back to what we where say before about the mood boards, you can do a mood board really, really quickly and you can get to a point a lot faster, understanding what the clients needs are by giving them a mood board or a couple of mood boards, a couple of quickly little iterations and, ya know you get significantly further down the line. Something we’ve been doing recently which I think is a really interesting idea and seems to be working really well is this concept of a one day design concept.

Paul: Okay.

Andy Budd: And so what we do is, in the olden days we’d spend like maybe a week coming up with an initial design concept and it was really good and it was really high level and it was really detailed and we’d give it to the client and if the client wasn’t sure about various elements, we’d be a little bit, because we’d spend so much time and effort into the design we’d be a little bit more resistant to making changes, were as we realised that if we did just a quick design iteration, that was just one day or one and a half days we’re much less kind of stuck on the design because it will be rough, because it will a bit rough and ready, which means that we’re much more flexible and happy to make changes and go in different directions also it means that if you are only given a day or a day and a half to do a design, you don’t obsess on the details, you work on the more broad brush strokes, you get the feeling and the sense and the layout right, you don’t worry about how the text is aligning or how the icons are place and that give clients first of all some instant feedback and rather than the old days, you’d go away and do a design, magic would happen and two weeks later a completely finished product, it gives clients a bit more of an insight and a bit more input into the process.

Paul: Yeah.

Andy Budd: They’ll see after a design they’re getting something that’s already start like a real project and they’re getting really excited, they sort of start inputting and feeding back. The difficulty is managing the right kind of feedback and getting the right kind of feedback at the right time because obviously in the early phase is what we really want is our clients to feedback on is just the overall look and feel. Is the layout right, is it giving the right sense, and not obsess about the details because we haven’t spent any time on the details.

Paul: Yeah.

Andy Budd: And then we iterate and once we’ve got an idea we’ll do another iteration which is more finessed and then maybe a third iteration which is more finessed. And then normally by that point because we’ve gone through a bunch of different steps and we’ve kind of had client buy in on the way by the time it gets to the second, third round of iterations, it usually is just dealing with the details.

Paul: Yeah.

Andy Budd: The problem is that almost all clients obsess about the details more than they really need too. And it easy too, I understand, if someone puts a design in front of you and they say, give me feedback clients obviously want to be really helpful, and they’ll jump into the design and say well that buttons miss aligned or I don’t like that orange I think it should be a different colour or whatever and really obsess about the details and I think at that point, ya know, that’s our job to obsess about the details I think. As designers we are more obsessive and we’ll sit there and we’ll move things a couple of pixels or ya know, play around in the colour palette and make sure things are exactly right and so what we’ve been tending to do is once we’ve got the initial direction of the project, once we know that the client likes the overall scheme, we kind of go ahead and build it and don’t necessarily go ahead and design it and while we’re not necessarily, not asking for feedback, so we’ll present our designs and if clients look at them and say oh well this is wrong and that’s wrong, that’s fine we’ll go and make the changes, as the client looks at them, I think basically what I’m trying to say is if you ask for detailed feedback you’ll get detailed feedback, if you present something to a client then if there is an issue they’ll feed back and if there isn’t they won’t. I think this has come about from a lot of usability testing, we sit down with test subjects and if we ask them for an opinion they’ll always give us an opinion, trying to be helpful whether that opinion is something they really think or something they’ve thought, well I’ve been asked to say something so I better say something.

Paul: Yeah.

Andy Budd: And so we’ve been trying to be a lot more subtle with feedback and rather asking for a definite cut off time, a definite sign off, we now expect a long list of stuff, it’s like here are the design, if you have anything to say that’s fine but if you don’t that’s great we’ll just get on and implement them.

Paul: Yeah, I like that. That’s a really good approach. Thank you very much Andy that was a really interesting conversation. I think every agency does things in a slightly different way and it’s good to hear the clear:left methodology.

Andy Budd: Excellent, well actually, sorry can I just jump in there and say something.

Paul: Yeah.

Andy Budd: Because I think this is an interesting point and it is a problematic thing, I don’t think a lot of companies have a process and a lot of companies will, ya know, every single project they will do the same thing time and time again and that’s good because you know at the start of a project exactly what your going to do step 1, step 2, step 3, the problem is not all projects and not all clients want all those step or all of those steps are necessarily valid for the thing they are trying to do.

Paul: Yeah.

Andy Budd: So I think what we’ve learned over time really at clear:left and it’s something we’re still learning and I think everybody’s still learning is rather than having a process have a methodology have a bunch of tools that you can use on a particular project, so if a certain project requires wire framing we do wire framing, if it doesn’t, drop it. Ya know, if a certain project needs a mood board, we do a mood board if a certain project doesn’t, we don’t do it. And so I think a methodology is the right point here rather than a process because a methodology keeps you flexible and a methodology means you don’t get stuck doing the same stuff over and over again.

Paul: Excellent, Okay, thank you very much Andy and I’m sure we will have you back in at least before the next two years are up. (Laughs)

Andy Budd: Yay, well thanks very much Paul delightful.

Question of the week

What tips or techniques do you use to smooth the process of design sign off? Answers in the comments.

Show 96: Moll on Mobile

Posted in Classic shows on October 2, 2007 by Paul Boag

On this week’s show: Paul suggests some ways a client can pick which agencies to ask to tender. Marcus asks when is speculative design okay and Cameron Moll explaining how to get started on the mobile web.

Podcast: Download (31.0MB)

Download this show.

Launch our podcast player

News and events | When is speculative design okay? | Who to ask to tender? | Cameron Moll on the mobile web

News and events

Social Participation as a business tool

Back in 2006 I spoke at refresh06. One of the presentations I gave there has since proved a popular subject and I have been asked to speak on it again a number of times in various forms. It is on the subject of social participation and how to use it as a marketing and business tool. Social networks and communities are often seen as the domain of the teenage crowd with sites like YouTube and MySpace dominated by this demographic. However, community based applications are applicable to all audiences and can be a powerful tool for businesses.

After preparing the latest incarnation for a presentation I am giving at IBM, I thought I would do a run through (as I have only limited time). Discovering the new record feature in keynote I decided to record the whole thing and upload it for all to see. Hope it is useful.

Test your website for mobile compatibility

So this week we have Cameron Moll on the show talking about some of things covered in his new book “Mobile Web Design”. In his book he mentions an interesting site that I would like to pass on to you. It is a web application that allows you to test how well your website would appear on a mobile device. You simply enter your website address, wait while it calculates your results (it even gives a random mobile web development tip while you wait) and then view a complete breakdown of any issues with your site.

The report is distilled down into a single score but you can also see performance in each of the individual areas including:

Speed
Cost in terms of data access
Quality of code

and a whole host of miscellaneous tests. However, best of all is the fact that it also provides an emulation of what your site would look like on a whole host of mobile devices.

Laying out inline images

My next story tackles one of the mixed blessing of content management systems. Although it is great that content management systems allow clients to add content themselves they almost always fine a way of screw up the look of a site in the process. One way that they manage this is adding inline images. They are often required to add specific classes to images for them to be displayed correctly. Unsurprisingly the client sometimes fails to do this and the design becomes broken.

This week the List Apart website proposes one way to slightly reduce this risk. They use javascript to detect content images on a page and then apply different classes based on the width of the image in relation to its containing tag. In other words the Javascript detects whether the image is a full column, half column, or quarter column image and lays it out appropriately.

Its not the perfect solution and there are still ample other ways clients can screw up a design but it is a nice use of javascript that enhances a design without being mission critical. I think seeing this kind of use of Javascript and we should all be looking to use it for this type of thing.

10 Usability nightmares you should be aware of

My last story this week is another top ten list from the guys at smashing magazine (they do like their lists!). This one is a list of the top 10 usability mistakes and I have to say it is an entertaining list focusing on some big name sites. The list includes:

Hidden log-in links
Pop-ups for content presentation
Dragging instead of vertical navigation
Invisible links
Visual noise
Dead end
Content blocks layering upon each other
Dynamic navigation
Drop-Down Menus
Blinking images

Each mistake is explained in detail including some offending screenshots. A worthwhile read for us all.

Marcus’ bit: When is speculative design okay?

I have decided to talk about speculative design work this week because we have recently produced a couple of designs and, although we recommend that it should be avoided, sometimes you simply can’t.

Unpaid prospective work is the bane of all of graphic based agencies and freelancers. It’s also something we have looked at before, but it’s such a significant subject I think it’s a good idea to look at it again.

The worst case

Some ‘clients’, and I use the word loosely, are simply looking for free work. It seems that they think ‘art’ or ‘drawing’ is not real work and is something that only fools pay for. They usually ask for a number of different page designs and concepts and will often ask for revisions on delivered designs.

The project often ends up being dropped by ‘the board’ and then mysteriously, a few months later, something very similar to your design appears for all to see.
These people are effectively stealing from you. Don’t do it.

When is it ok?

If you take the line that we should never do unpaid work then the answer is ‘never’.

However, life simply isn’t like that so you need to make some choices. You could argue that as long as the client is genuine i.e. it’s a real project that someone will win and subsequently get paid for, then it’s ok. It’s a fair fight and the best design will win.

But, this isn’t just about getting paid.

Educate (how many times do I use that as a heading!)

Speculative design is a beauty contest. The whole point of the exercise is to impress the client. This can possibly be seen as taking a somewhat derogatory view of a client’s ability to make the distinction between a design for them versus a design for their users. But even for those that understand the distinction, I don’t think it is possible to separate ‘what I like’ from ‘what is right for our users’. If there is a choice, then people can’t help picking the one they like best.

Added to this, there’s the big issue of designing in the dark. Even if a client has supplied a detailed brief and they’re happy to chat on the phone, the guy pitching still doesn’t really know what the requirements are. The early part of any design project involves detailed discussions about an organisations USPs, target audience, brand values, site statistics, site goals, etc etc.
User interface design is a collaborative process between the agency and the client that goes through an iterative cycle based on user feedback. This simply doesn’t happen with speculative design work.
So, in summary, always have this conversation with prospective clients. I know for a fact that on one job, we won the work by doing so. The client saw it as the most professional and well thought through approach taken by the agencies pitching for the job.

However, sometimes you have to do it or you will jeopardise your chance of winning the work – but still have the conversation and ask whether or not producing an initial concept will adversely affect your bid.

Paul’s corner: Who to ask to tender?

With literally millions of web design companies worldwide where do you begin when trying to draw up a list of potential agencies? Who do you invite to tender?

Ask the expert: Cameron Moll on the mobile web

Paul: Okay so joining me today is Cameron Moll. Good to have you on the show Cameron.

Cameron Moll: Hey, thanks Paul.

Paul: I think this is your first time on Boagworld, is it not?

Cameron Moll: Yeah it is.

Paul: Ah that’s good stuff we alway like to get new people on instead of having the same old boring people on every time. Nice to get someone from the States as well. Which is good.

Cameron Moll: Yeah absolutely and I’m kinda bummed you didn’t pick me for your hundredth episode.

Paul: Well if your in London you can come to our hundredth episode and join in the show. Do you happen to be over then by any chance?

Cameron Moll: Uh, when’s that gonna be.

Paul: Uh, October 20.

Cameron Moll: Um, unfortunately not.

Paul: Argg.Shame, what a shame. Yeah, so we’re looking forward to our hundredth that should be fun. So I mean the reason we’ve got you on the show today is because you’ve just produced a book called Mobile Web Design. This you already know I’m sure. So we thought it would be good to get you on the show just to talk about some of the things that you kind of cover in the book, and give a bit of an introduction, um, to the world of developing mobile websites. And um the question I wanted to kick off with is in your book you dicsuss kind of four different responses to kind of mobile web. In other words four different approaches people could take when they start thinking about the subject of mobile web design. And I just wondered whether you could talk us through those four different approaches that people could use.

Cameron Moll: Yeah that’s probably a good place to start. Um, most of these are straight forward right. It’s I think a pretty simple thinking to understand how one would approach the mobile web. And uh, you know I produced these about two years ago as I was trying to understand how someone like myself, you, how we would make that leap over to mobile. The more I was researching it the more it became apparent that you know there is really these four methods, and what they boil down to is, uh, is this. So one, you essentially do nothing. Two, you reduce the number of images and styling therby reducing the file size, uh, the page weight and so on. Three, handheld style sheets and then four, mobile optimized or what some refer to as content adaptation. And uh, the breakdown is essentially this, if you’re going with that first approach your saying “You know what, I’m going to do nothing.” I’m either lazy. I assume that my users have devices that can support the content I already developed and uh, you know when you think about the mobile web obviously the question that comes to mind is what technology am I going to use? How am I developing content for mobile devices? And fourthly, most devices out on the market today will support well structured mark up out of the box. And so most of the devices being sold, most of the devices that people have in hand today are going to support your html markup. So a lot of user will take that approach, I guess developers that is, take the approach to say you know what, what I have developed it good enough. I’m going to push it out there. And with things like the iPhone and some of the higher end Nokia devices that are out on the market, most of those devices can support a full desktop experience. Right, so it’s this idea that I refered to as content zooming. And so with the iPhone I can see the full website. I can pinch or zoom in. With some of the Nokia devices and Oprea mini 4, I can have that same experience. And so the thinking with that first approach is, lets just leave the content as is and allow those higher end devices to access them.

Paul: Sure (thoughtfully like he is paying attention)

Cameron Moll: Uh, the second approach. This essentially takes the existing markup and content and says lets pull out the images. Lets pull out the styling and allow users to access that raw content. And the thinking there is we’ll reduce the file size. We’ll take out all those big images, that unnecessary styling. Most of the devices out on the market today, well I shouldn’t say most, but alot of them don’t support the styling that you and I are used to using on the desktop. So, the thinking here is just to pull all that out and allow the device to see the raw content. And after all people are after the content not necessarly the background images and colours and things like that. Now the third approach is perhaps right now the most controversial, and that being handheld style sheets. I mean these have been promoted as kind of this poster child of all things web. So any device whethe it be a mobile device, a car a watch or what have you should potentiall be able to take the same markup and with a style sheet specific for that device, again it might be a printer it might be a mobile device. Being able to attach specific style sheets that render the presentation differently for that given device. So the idea being, you know if I just attach a handheld style sheet to my markup. I don’t touch the markup. I don’t touch anything else. I just add that handheld style sheet then great it’s going to display it differently and so on. Of course there are drawbacks to this approach and I guess what I’m skipping here is there is drawbacks that I cover in detail in the book to.

Paul: Yeah (thoughtfully like he is paying attention)

Cameron Moll: To each of these approaches. They all have pros and cons. The biggest one here with handheld style sheets, cutting to the chase, is the fact that not all devices support it. I would guesstimate, I don’t have any exact figures, I don’t know that they exist. But is guesstimate only about half the devices out on the market will support handheld style sheets. And even of those that do the support is somewhat shotty. In that some of those devices will correctly obey a property such as “display none” but they’ll still in the background download the associated content with that. So if you’ve got a large image for example, and you attach to that “display none” it won’t show it but it’s still gonna download in the background that image or that content. So right now, at least, using handheld style sheets is a bit of a pipe dream. It’s just we’d love to be able to have the power to access those, that capability. But right now it’s just not all that feasible.

Paul: Hmm. (thoughtfully like he is paying attention)

Cameron Moll: Finally, on the fourth point, mobile optimized content. This is where you say “You know what. I understand that the environment of being mobile, this idea of context is different that it is when I am sitting at my desktop.” It’s different because I might be using one hand for data entry. I’ve got a much smaller screen and naturally I’m out on the street. I’m out driving or something along those lines. So we say what’s different about that experience, then sitting at one’s desktop. Proponents of this fourth approach essentially say, “You know what the other approaches, especially the do nothing approach completely ignore context.” And that is what is the user doing when they’re out walking. When they’re on the tube or the subway and so on. So this last approach says, okay the context of being mobile is different than anything else. People want to do things differently when they’re out and about. So we’re gonna reformat our content to cater to that experience. We’re gonna present and entirely different experience, and altered experience perhaps to that of the desktop that addresses the specific needs of being mobile. The arguement I make in the book, I guess coming full circle with these approaches is, I often get asked the question “Well what’s the best approach then Camerson?” I don’t know. And you ask 20 different people in this industry and you’ll get 20 different answers. Right now I think the most feasible approaches moving forward are the first approach, do nothing, and the last approach, to create mobile optimized content. The arguement being is one, you need to understand first of all the context of mobile users and therefore adapt that experience to that context. But at the same time you have alot of capable devices out on the market that may be able to render a full experience that users are used to elsewhere.

Paul: I mean you talked there about context and in particular the fact that peole might be using it one handed or whatever else. What are kind of the major differences that you are seeing between kind of a user experience designed for the desktop compared to user experience designed for the mobile device? How do they alter? What should we be doing differently?

Cameron Moll: Well I think that the key phrase here is mobile right. So Barbra Ballard, I quote her in the book, I love her quote that essentially says that when we’re talking about mobile it’s referencing the user not the device. And I think if we start there saying okay mobile is about the user not necessarily the device that they are using but the user. We then start to understand. Okay what is this user trying to do? Where are they? What are the limitations that they confront? And what are the oportunities that are provided through mobile that might not be provided elsewhere? So, it’s not about how do we make this experience similar to the desktop, but how is it different? How do we make it different and how do we welcome that different experience? So this idea of context, it’s this idea, you know, you have this great content, and we hear this phrase “content is king.” Well I argue that context is king. Cause when a user is mobile that content is of little value if you ignore the context in which it is being used. That inevitably leads to the question. What are the needs? What are the problems? What are the tasks that users may encounter in an environment of mobility. Then that leads to what are the opportunities that mobile provides for that given context. For our content, for our company that the PC doesn’t.

Paul: Yeah. I mean it’s a very interesting area because it’s almost somethign you need to address on almost an individual project basis. Looking at what content you’re working with, and working out what of that content is actually relvant to a mobile device and which isn’t. I mean you use an example about that somebody’s probably not going to want to look at your portfolio page on your personal website on a mobile device. It’s just not the right context. I guess that’s what your getting at there.

Cameron Moll: Right. You bring out a very interesting point and that is, let’s say a given company. Let’s say you and I as developers are working within an organization right. And we’ve got 20 projects that we manage. Something you said earlier keys to the point of looking at those 20 applications or websites and saying okay first of all which of these 20 apps might be relevant to someone being mobile. We cut that down to say 5 or 6 or whatever the number becomes. Within those applications or sites if we’re talking about existing content here within those applications or websites it’s those 5 or 6 as being perhaps suitable to mobility. We then look within those entire applications, so within a given application for example that might have 20 different tasks that a user does with that application. We then say okay which of those tasks are relevant to someone being mobile. So it’s this process, at least with existing content, looking at what are the applications we provide and within those applications what are the features that are going to be relevant. Now what that also ignores though is the fact that we’re not saying what are new opportunities? What applications have we not developed that might cater to mobile? Or within an application that we have developed, what opportunities such as location awareness might be provided to a user that we just haven’t even thought about it.

Paul: Yeah. I mean that whole about the fact that you get into this mentality that a mobile device is a cut down version of what you provide on the desktop. Actually, there are opportunities to do stuff on a mobile device that isn’t actually possible on a desktop and the location aware stuff is a good example of that I guess.

Cameron Moll: Right exactly.

Paul: Okay. So lets say as a web designer I’m beginning to get a bit excited about the mobile web. It’s obviously the way that things are going. You provide some excellent statistics in your book about take up levels of mobile devices and I’ve cribbed those and used them on the show before. So I think that there is a lot of people that are listenin to the show and going yeah this is something that I am really quite excited about. But where do I start? What kind of technical skills to I need to develop mobile websites? Is it enough to just know standards based design? Or is there other thins I need to know as well?

Cameron Moll: You know that’s a perfect question. If you look at where we are at now today it’s totally different then say 4 or 5 ago. I remember the same hype 4 or 5 years ago where people were saying mobiles coming. Developing websites for mobile devices is the next big thing. It just kind of died out. I think largely it was due to the fact that back then you still had to develop in WML, which is not a cryptic language. It actually provided a lot of clarity and unity to the mobile web environment 4 or 5 years ago. But at the same time it required that a lot of us had to learn a new language in addition to HTML or CSS. That’s no longer the case. So this second time around when we hear this hype about the mobile web, to me at least it feels much more real. Because now we have again, as I mentioned earlier, most devices out on the market, in fact nearly all of them support HTML, XHTML, and some level of CSS. So that means that you and I, we already know HTML. We already know CSS. We can take that knowledge and start developing content for mobile devices. Whereas 4 or 5 years ago we had to learn a new language just to get over that barrier of providing content. So the good news is, for the most part, really if you know standards based design and development techniques, you are 90% there. I think the other 10% is left to understanding context. So trying to understand what those limitations are with mobile devices and mobile users. And also looking at the opportunities. so again we’re talking about smaller screens, data entry. Those being limitations but at the same time location awarenes. Users just want to do things different. They’re out on the go, which can be a great advantage depending on what kind of content you’re providing. So I think the good news here, long story short, yes. You and I can just build on the knowledge we already have if we just start to understand just a little bit about what the users are doing.

Paul: I mean you say. It’s interesting some of the words you use. You say ‘for the most part.’ Or ‘some browers understand CSS.” And I think that’s the other big fear that people have when they start investigating the mobile web, is the huge plethora of different browsers and devices and all of this kind of stuff. And it seems like how the hell am I supposed to test on that. It’s impossible to test on every conceiveable device and every conceiveable browser. Where do you start? Where do you put your initial efforts?

Cameron Moll: You know when I first started talking about mobile I think I was a bit to pessimistic in that I would stand up, say in a conference or in an article, and say okay if you’re going to test for mobile devices be prepared to test on dozens of browsers and if you think 4 or 5 desktop browsers. And getting consistency right for those is difficult. Wait till you see the mobile web. I’m a bit more optimistic now. I hope the book at least comes across that way and when I talk about it at conferences it comes across that way. And the reason being is this. There are some pretty easy ways to deal with that challenge of consistency. Of testing for mobile devices. Of just developing content period for mobile devices right. So you and I, you use probably the web developer extension for Firefox. We both probably at some point used Opera. Both of those browsers with those extensions and plugins can, at least at the very start, render and initial small screen preview. They both have options to be able to do that. So starting at the very least we can develop, again because we’re developing in XHTML rather than WML, we can within the browser at least do a very quick test to see roughly how it’s going to show up for the user. After that, once you’ve got at least the markup structurally sound you can then jump over to emulators. Now there are plenty of online emulators. .moby provides one. Opera mini provides another and there’s several others out there. But also there’s desktop software that you can download to be able to emulate mobile devices. So then taking 5 or 10 mobile devices I can now test how my content’s going to render, and it’s very close to how it will actually render on the device. But you can’t stop there. The last step has to be actual devices. And I think this was what was insurmountable for me starting out as a mobile developer. At least a beginner saying oh gosh do I have to go out an purchase 100 devices to be able to test my content. Well fortunately you can get away with 5 or 10 devices. If you can get 5 or 10 devices that vary widely. By that I mean one being a very basic phone, another one being a PDA,another one being a popular device such as the Razor. If you can get 5 devices that vary widely, 5 to 10, the chances are that that content is going to render well for most devices out there on the market. That will get you close enough. A lot of that is based not just on my personal preference but on the case study that I offer in the book. That is the Yahoo! website for the FIFA world cup last year. They took that approach. They said you know it would be difficult to test on 100 devices but we think if we can get 5 to 10 widely varying devices that chances are our content is going to display well for a global audience. Which indeed it was for that particular website. So that’s the arguement that I’ve made. I’ve hear others make that arguement as well. And it’s not difficult to get that number of devices right. So you can probably get 3 to 5 from yourself, from friends, collegues and so on, on loan for a couple hours. If you’ve got a blog you can ask for volunteers to do testing. I’ve done that before and it works pretty well. And then finally anyone can hop on eBay and do a search for unlocked mobile phones and purchase phones for an affordable price and get you know 5 to 10 devices. That’s how I did it. You know I hopped on eBay. I bought about 5 phones that were unlocked and then I just take my SIM card and swap that around the phones when I am doing testing. So it’s really not that difficult once you’re done developing your content to make sure that it renders well for mobile devices.

Paul: What do you think about the kind of growing thing that we’re seeing at the moment about designing mobile sites for specific devices? Like the iPhone. Do you think that is a bad route to go?

Cameron Moll: You know I’m not going to say it’s a bad route to go. But I do question it’s integrity. Three years ago or so, when I bought, well this was a little bit after I bought my Treo, for example which is a feature rich PDA. There were all kinds of Treo specific sites that had been developed. So you had something like, lets just say you had something like ESPN.com/mobile/pda/treo would be the web address for that content. And it was formatted just for that device. When you think about all the devices that are out on the market you then realize that that becomes a big chore to try to develope content for X number of devices. Now I think with the iPhone at least you have that same experience being repeated. For me it feels in part like you know years ago when we hit up a website and it said best viewd with Internet Explorer 4.0 or something like that. You know that is what we’re seeing now with the iPhone. Granted the iPhone provides a much different experience and a much richer experience, which is great, but at the same time I worry that we are spending a lot of effort on a device that 1. Is not a market majority and 2. The device itself, the iPhone itself might change at some point in the future. I might have a larger screen. It may render content differently. Which then will require that we go back and rewrite that content yet again. So the arguement I’ve made is if it makes business sense to develop and iPhone optimized site well more power to you. Go for it. But I advocate as a default creating content that can render on as many devices as possible. Not necessarily just one device.

Paul: Cool. Thank you so much Cameron. That is incredibly useful. Where can people find out more about your book then?

Cameron Moll: The web address is mobilewebbook.com or they can find a link from my website cameronmoll.com.

Paul: Excellent. It’s a .PDF book that you can download instantly. Now waiting around for delivery at $19. The best thing of all is it’s nice a short. Just over 100 pages. Isn’t that right? Something like that?

Cameron Moll: That’s correct. And I’ll give your listeners a heads up that we’ve got a print version coming out in October to be announced soon.

Paul: Oh that’s excellent. So you’ve got the choice either way. Alright thank you very much for coming on the show Cameron. We’ll get you on again in the future no doubt.

Cameron Moll: Hey thanks Paul.

Show 94: Flickr Features

Posted in Classic shows on September 18, 2007 by Paul Boag

On this week’s show: Paul uses flickr as an example of best practice, Marcus discusses the use of client references and Patrick McNeil from Design Meltdown examines emerging design trends.

Podcast: Download (25.3MB)

Download this show.

Launch our podcast player

News and events | Using client references | What we can learn from flickr | Patrick McNeil talks about design trends

News and events

Developing your designs with the client

As I said on last week’s show I have started to reconsider the way we manage projects and I am considering a more Agile approach than we have used in the past. What I like about the principles of Agile development is the idea of getting the entire development team working together. Designer, developer, project manager, everybody.

From my limited understanding of Agile development it is also considered a good idea to engage with the client in this way too, by actively involving them in the development process. However I have to confess I find this concept hard to get my head around.

My problem is that Agile development is a very fluid process and I am not sure I am keen to expose the client to that level of internal workings. However, although I am still learning and have yet to draw my final conclusions I have to say I was impressed by an article on this subject that appeared this week on A List Apart.

The article talks about how you could include the client in a series of workshops so getting them more involved (and therefore more committed) to the project. What I found most reassuring about this article was that it proposed a semi-structured approach to the workshop thus addressing some of my concerns.

I am still not convinced that an Agile approach to development is always possible but I must admit I am warming to the idea and believe it is something we should all be considering.

Become a better illustrator

Its funny how you can be told something is great countless times and yet somehow you never get around to checking it out. Well up until this week that was true for me when it came to the video podcasts produced by Anton Peck.

I met Anton last year at SXSW and everybody told me what a great illustrator he was. We have been in contact on and off ever since thanks to twitter and IM but I have never really had much time to dig around his site. However, this week he launched a new version and it motivated me enough to have a look. While poking around I came across a series of video podcasts I had heard mention of before. They provide some excellent tips on how to be a better illustrator including working with colour, skin tones and custom photoshop brushes.

After talking to Anton I can say with some degree of certainty that there will be many more of this tutorials to come, so be sure to subscribe to the feed if you are a budding illustrator.

A new approach to stopping spam

There seems to be a never-ending torrent of spam these days not just in our inboxes but on any online form we create. There have been loads of solutions put forward but either they have accessibility problems or put the emphasis on the user to prove they are not a bot. Although there are also a few filtering services, they aren’t 100% effective and many have to be paid for.

Fortunately some clever spark has come up with a new approach to the problem. It relies on the fact that bots go crazy when they encounter a form and start randomly filling in every field. The technique involves creating an additional field with a particularly tempting name like “body”. The bots cannot resist completing the field while you can hide it entirely from users by moving it off screen with CSS or removing it with Javascript. The technique can be made accessible with a descriptive label for those using screen readers. This label asks them to leave the field blank. When the form is validated you can then simply delete any submissions that have content in the honeytrap field.

Photoshop secret shortcuts

We don’t seem to do many news stories for you hard core designers these days, so I thought I would end todays news segment with one for you. The Web Designers Wall has published a great list of photoshop secret shortcuts that are ludicrously useful.

I have been using Photoshop since its initial version and i wasn’t aware of half of these. For example did you know you could…

Navigate the document left or right using a key combination and a scroll wheel
That you could scale font size using arrow keys
That you can zoom with the scroll wheel
That you can drag to change numerical values
That you can use a keyboard shortcut to expand or collapse all layer groups
That you can easily hide or show multiple layers

Great stuff. Definitely worth checking out.

Marcus’ bit: Using client references

This is quite a tricky subject to discuss because I know that some of the clients that Headscape often uses as referees listen to this show!
So, first up, how to judge if a client will be a good reference. Ask yourself the following:

Did I deliver on time and on budget?
Did I deliver a quality/cool/innovative/rockin’ site or product? In other words, did you exceed expectations?
Did you get on with the client?
Is the client web savvy? I.e. would you be happy for them to talk to another potential client about your capabilities?
Would the client’s company name/brand/reputation help yours?

If the answers to all of the above are generally ‘yes’, then you really should try to get them to act as a referee for you or, failing that, get a testimonial from them.

Of course, if the answers are generally ‘no’ but the client was Coca Cola then, chances are, you should try and use them anyway!

Don’t just assume

Always ask people if they mind doing it. It quite often involves some work on their part, for example filling in a form.
I have asked clients in the past if I can just include their details in an ongoing fashion and most agree to this. However, I have made a point of checking back again with them, usually after 6 months or so, to see if it’s still ok. The last thing you want is someone getting tired of you asking for a reference because they’ll end up sounding weary of the process with the prospective client.

Also, try and read between the lines when you’re asking someone. If they agree, but you really think that they would rather not, then save them up for a particularly big tender you’re after.

Sometimes, tenders ask for a very large amount of references. In these cases, I include all the contact details but I ask that I am contacted, to ask permission, prior to any communication.

Vary the list

Not all tenders ask for references and, if that is the case, don’t include any. I simply add in a line saying that references can be supplied on request.

For those that do ask, don’t roll out the same old names for every proposal. They will end up getting hacked off with you continually including them. But, the main reason for not doing this is that you should try to include appropriate references for that particular prospective client. Obviously, similar organisations should be used but you may also want to consider whether the two people would get on well.

Paul’s corner: What we can learn from flickr

This years dconstruct really inspired me especially the talk by Tom Coates. It challenged my perception that web design is all about the website. Instead, as website owners, we need to start thinking about what content we hold rather than the method by which it is delivered.

These days the web is becoming less about websites and more about content delivery in all of its various forms. Once we wrap our heads around the fact that we should be focusing on our content rather than our website it offers some interesting new opportunities. However, instead of talking in theoretical terms lets look at a real world example; the photo sharing site flickr.

Ask the expert: Patrick McNeil from Design Meltdown talks about design trends

Paul:
So joining me today is Patrick McNeil who is probably best known for Design Meltdown although you seem to be running a whole plethora of sites at the moment Patrick.

Patrick:
Yeah, I keep busy for sure.

Paul:
That’s good. I wanted you on the show because from Design Meltdown it’s very apparent that you follow what’s going on as far design trends online. I though it would be good to get you in to discuss current design trends and that kind of thing. But before we get into that, tell us a bit about how Design Meltdown came about.

Patrick:
Well it started in school actually. I had a teacher on my design classes and we were using this book called Genius Moves by Steven Heller. In the book he catalogs design over the last hundred years by these totally random things like “big text” and “big hands”. Strange little things that you would never thing to classify design on. So it got me thinking about web stuff. I started snapshotting sites and starting building a folder structure of stuff. Then I realised “Hey, I can make a little website out of this” and that’s pretty much how it got started.

Paul:
It’s probably worth saying that’s it a lot more than the normal kind of screenshot sites that you see. It’s more of a blog organised in categories. Is that a fair way to describe it?

Patrick:
Yeah, I can of view it as a catalog of web sites. It’s almost like a library of stuff. As opposed to a showcase of beautiful sites it’s more of a showcase of sites in particular classifications where they make sense to go together.

Paul:
Yeah. You seem to give a bit of a commentary about what you are seeing in these different things which it looks like it has lead onto a regular column in .Net Magazine I noticed.

Patrick:
Yeah. I’ve been writing for .Net for about a year and a half now. Basically it’s the same thing there too. I pick some kind strange category and comment on it. It seemed to me that when I started it not only did I want to catalog the sites and show them in a new way from the other catalogs but I thought the commentary felt kinda weird writing about stuff at first. It felt so egotistical or something. Just the commentary seemed to be something that was new to that area. It was normally just “Here’s a bunch of cool sites to look at” instead of allowing me to write my thoughts on the topic.

Paul:
Definitely. You’ve been doing this for a while now. The site’s been up and running for a while. Tell us a little but about what you feel you’ve learnt through the process in regards to design and web design in particular.

Patrick:
Well certainly by moderating the sites that are coming in and then cataloguing them I’m forced to look at hundreds of sites. Inevitably you’re a little more exposed to what’s going on. A lot of times I feel I kind of have a feel of what’s popular at any given time. It’s really weird to feel that in touch. I know we all surf a lot but it seems kind of excessive because I have all these people submitting their latest and greatest sites. It puts you in touch with what’s going on. I think the biggest design lesson I’ve learned is, and we should know this because we go to school for it, that everything has meaning. Even the most trivial, insignificant-seemly things have abundant meaning to them. One of the perfect examples is when I commented on the badge at BoagWorld and that is how you first found me I think. With the badge, I would have used it flippantly and I think my comment on it initially was poking fun at it almost. Then you realise there’s actual power in that tool. Everything is a tool and potentially everything can have meaning right down to the smallest thing. There’s a pattern to fold over a corner to make it look like the page has been turned over like you would do in a real book. Things like that I might have initially thought were meaningless and after doing this for a while and you see enough sites that did the same thing, you’re like “Well there is actually some thought process that can go into that”. You can put some meaning into just about anything. It’s kind of fascinating. Makes me think more about the design elements that I would choose to use seeing that they have more meaning.

Paul:
So how has it influenced the designs that you’re producing these days?

Patrick:
I don’t a lot of design ironically. I tend to be more of a developer but I definitely do get to do a mix of things. I think it just makes me more aware of what I am doing and a little bit more aware of exactly what I’m doing and a little more conscientious when I go to implement something that I don’t just say “Well I think these shiny sites look cool lately so I’ll make a shiny site” or “I want a badge on my site”. It just makes me think things through a little better and not do things so flippantly. I try to consider what the real purpose of the site is, what the message is and that sort of thing before trying to come up with design elements that follow that need.

Paul:
You said a minute ago that you’ve been forced by doing this to become very aware of what design trends are around. What do you think is going on at the moment? What are the emerging trends you see going around at the minute?

Patrick:
Certainly there’s one that seems pretty obvious, everybody has made a shiny website by now. One where everything is all glossy. I think that that’s gone through some interesting patterns. It seems that lately, and this is probably true of almost any trend, at first it’s used just randomly and not very well and then over time it becomes more integrated into how designers work. So the results now are sites that are just absolutely beautiful. They completely use the style as opposed to just saying “I’m going to make a shiny logo”. It really is used throughout the entire design and creates a unified feel to it if that makes sense. It seems like patterns like that you see it more effectively used. The other one which I think has been going on for a little while now but it’s certainly a big trend, is the idea of more rapid communications. I’m sure you’re aware of how short attention spans are on the web. You go to a lot of sites now where they’ll have, and it’s sometimes bigger than the logo, a bold statement in ten words or less about what this company actually does. It used to be you’d go to some sites, even now if you find an older site, you’d be confused what the product is. You can’t even tell by the home page what the heck this company sells. So nowadays it seems like the utmost importance where there’s so many applications doing this, that and the other to clearly say this is some online accounting software, this is a to-do list manager, this software will help you track you Windows network, that sort of thing. It becomes the whole banner across the top quickly communicating what the heck the product is and then quite often it’s associated with an action item to sign up for an evaluation, getting a free account, something like that. That’s not so much a design pattern as it is a marketing pattern I guess. That certainly seems to be one of the more popular formulas to follow.

Paul:
There seems to be a bit of a skizzum in some ways in design where you’ve got that kind of design where it’s very functional based, very much orientated around meeting users needs and then on the other side of it you’re seeing some really beautiful, very ornate websites. There seems to be a lot of art deco stuff around. Very flowery or that kind of thing.

Patrick:
Yeah, definitely. Ornate has always been popular. That’s followed the same pattern I think as the whole shiny style in that it’s become a whole lot more refined and that you see people implementing it in a whole lot of different ways. It’s not “I’m going to throw a flourish on here and there” and that’ll be it. But now it’s become more that they have worked it into the entire design and almost makes designs that revolve around it. It makes a much more cleaner approach I guess.

Paul:
There’s some really stunningly beautiful stuff about. What about you personally? What kind of design styles appeal most to you and why?

Patrick:
On Design Meltdown I have a category called Super Clean. You’ll see sites like one I’m looking at now http://www.id-confirm.com. They have these network identification deals. If you just look at it, it’s just so clean and easy to consume. It’s simple and yet it has enough design and pizzazz to it where it feels like a really refined and high quality site. I love those and then ironically on the complete flip end, I love sites more like http://green.yahoo.com/18seconds. Sites like this are more inline with what you are referring to. I really love these visually intense sites where it becomes more about the experience of what you’re about to consume as opposed to just the content. Sites like this have to sell you on the whole idea of what they are doing before they let you get the content so to speak. I think I really like this approach even better probably because I’m not up to making designs like this to be completely honest. It feels a little beyond me and you always feel attracted to the things that you find most difficult. It’s kinda fascinating.

Paul:
Yeah, it is. Obviously sites like yours and there are other similar types out there, a lot of people go to these sites for inspiration when they are doing they own design work. I was just interested what your opinion was on that, whether you felt that was healthy or whether you’d encourage people to look further a field? And what other places you look for inspiration? There’s a couple of questions in there. [laughs]

Patrick:
[Laughing] Yeah, there’s three of four I think. I find that at my work my co-workers come to me all the time and ask “What do you have on this?”. I’ll point them to some articles and stuff to get inspired by and I think it’s incredibly healthy. I think if you’re going to design a site and you know the client… I think the key is to not to come to Design Meltdown to find out what you’re going to design but to decide the elements ahead of time and then come here to find resources that match that. Say you have a client and you know the site’s going to be blue. You have no choice, that’s the client’s colours or whatever. So it’s going to be a blue site. You could come here and start going through blue sites and see how other people have implemented the same style.

Paul:
I think that’s what is quite nice about your site. Because it’s organised in that way where you can go in and look at just blue sites or can look at sites that use a particularly clean style. You can do it that way round in preference to looking at hundreds of screenshots and thinking “I’m going to rip that one off”.

Patrick:
[Laughing] Yeah, exactly.

Paul:
A much more healthy way of thinking at it. Do you look for inspiration beyond the web? Are you one of those people that looks at architecture and print magazines, stuff like that? Or are you more interested in just the web?

Patrick:
I would say I’m mostly interested in on the web I guess. Primarily because just to keep up on Design Meltdown I have to go through 100 sites to find 10 good ones it kinda forces that. But I certainly get inspired by anything offline. I love going to an old library and looking through old books because the typography is amazing. They’re not limited by the whole computer and everything’s got to line up so easily and whatever. Getting into older things, going to museums and looking at old paintings, it’s amazing the design skills that you can see in work in those things. I think there’s certainly more than enough inspiration offline. Another thing I think people and I get tempted to do is to make a fake paint splatter on the computer instead of getting a can of paint spray, spraying some paper and scanning it. I think there’s this real tendency to think that you’ve got to do it on the computer whereas you can certainly unplug and do a lot of stuff to get a much more realistic feel.

Paul:
Yeah, I know. I think that’s great. So one last question before I let you get on with looking at several more hundred sites. I have to ask you about this thing of sites like yours where people just go along to them and basically rip off the content they are seeing. That’s always a hard line for people. I don’t think anybody necessarily goes along to this site going “I’m going to rip this off in it’s entirety” but you end up doing that. Where’s the line do you think between being inspired but somebody’s site and actually overstepping that kind of line and ripping them off so to speak.

Patrick:
Oh well, that’s kinda tough isn’t it. Most normal designs, most normal down to earth design, can have some similarities to almost any other kind of site that you’ve never seen before. I think it’s really on the designer. If they are unethical and choose to steal designs… I think it’s a mindset. I think as a young designer people might be more tempted to base more heavily on somebody’s design and as long you are honest about it or you do it in cases where it’s a student project, something where you’re learning from this experience, I don’t think there’s anything wrong with that. But as a professional designer you certainly just have to know you can’t do that. I think the big key is to before you even go looking for inspiration to think about how to solve a certain clients problem. You listen to the client and find out what their needs are, what they are trying to sell, all these things. You form ideas on what that might mean in terms of the design. Then you can just use these are tools to make you think along these lines.

Paul:
Yeah I would agree with that. I think the real danger comes when you start having Photoshop open in one window and the web browser open in another. If you’re looking at one site in one window and then you’re design it in Photoshop, then you’ve gone to far. I tell you something that I did hear once that I think works very well is that if you see a website that you really like instead of doing a screen grab and keeping that just pick out individual sections of it, little bits of it, and screen capture just the buttons or the links or the navigation. That works quite well.

Patrick:
Certainly.

Paul:
Interesting. Thank you very much for coming on the show Patrick. It was good to hear from you.

Patrick:
No problem. Thanks for having me.

Paul:
Hopefully we’ll have you back in the future.

What we can learn from Flickr

Posted in Site content on September 13, 2007 by Paul Boag

Once we wrap our heads around the fact that we should be focusing on our content rather than our website it offers some interesting new opportunities.

Alternative delivery mechanisms

Flickr realized very early on that they were about photos, not running a website. Central to the Flickr philosophy is empowering users to share their photos. It doesn’t matter to Flickr how their users share their photos. What matters is that they are exposed to the biggest audience possible. By opening up their content via an API Flickr photos can be accessed through a huge variety of methods including (but not limited to)…

The Flickr website
Mobile devices
Desktop widgets
Digital WiFi photo frames
Third party desktop applications
Third party websites
Even printed material (such as moo cards)

In short, Flickr has let go of the concept of driving traffic to their website and focused on putting their content in front of as many people as possible.

You maybe asking yourself how this applies to your website. After all you are not flickr and don’t share photos. However, the principles can apply to most content types. Take for example the humble blog. A blog is made up of individual blog posts. Each of these are content items that could be delivered through almost all the mechanisms mentioned above (with the possible exception of digital photo frames). Equally you might be a university who holds a database of all of your courses. Again, why limit that data to your own website? It could just as easily be delivered to a much wider audience.

Amazon get this idea. They have had an API since the dawn of time and are more than happy to push their product lines out beyond the confines of their website. Of course by doing so they loose some level of control over their content but that is offset by the many more potential customers who are exposed to their products and their brand.

However it isn’t just Flickr’s API that should impress you. Its also how they navigate and organize their content.

Navigate via meta data

Take a look at your average Flickr photo. It contains a lot more than the photo itself. Each photo has associated with a mass of additional information (known as meta data). Just some of the data held on a photo includes…

A title of the photo
A description of the photo
Comments on the photo
The photoset the photo belongs to
The user who uploaded the photo
Tags for the photo
Notes on the photo
The copyright restrictions
The longitude and latitude of the location where the photo was taken
The type of camera used to take the photo
Settings used when taking the photo

However, what is interesting is not the amount of data available about the photo, but the fact that it is possible to navigate by almost all of those criteria. You can search on title, description, tags and pretty much anything else. You can click to see the photos of a user who has commented or even see all of the photos that have a certain copyright restriction. You can view photos geographically via a map and even look at photos taken with a specific F stop!

This richness of navigation really helps when navigating a huge amount of data (such as the 1 billion photos in Flickr). It enables users to quickly and easily find what they are looking for as well as exposing them to content that perhaps they would have never previously found.

Again there is a lot that we can learn from this. In particular there are real benefits here for ecommerce sites. Building up rich meta data around products and allowing users to navigate via that, will expose them to many more products and allow them to narrow their search much quicker. For example on an ecommerce site users could choose to navigate via customer ratings or brand name as well as more traditional categories. With our blog example from earlier users could navigate posts by tag, author, or even number of comments. The possibilities are endless.

Of course, this approach is not without its risks. Without the kind of clean simple design implemented by Flickr users could quickly be overwhelmed by all of these options. However, it does not need to be that way and with some careful visual hierarchy a site can be both meta rich and easy to use.

Conclusions

The key to this approach is to start thinking beyond the page metaphor and to start looking at your content in terms of data types. Obviously this approach does not apply to all content types (for example I don’t envision pushing the about us page to third party applications) however most sites contains some form of key content to which these principles apply. The trick is identifying what they are.

Show 93: dconstructed

Posted in Classic shows on September 10, 2007 by Paul Boag

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

Podcast: Download (27.3MB)

Download this show.

Launch our podcast player

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

News and events

iPod Touch

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

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

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

Free photo manipulation tools

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

dconstruct feedback

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

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

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

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

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

170+ Expert Ideas From World’s Leading Developers

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

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

Marcus’ bit: Why cold calling never works

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

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

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

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

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

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

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

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

You may not be talking to the right person

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

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

Making yourself known

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

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

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

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

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

Paul’s corner: Making the most of the footer

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

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

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

Gary Marshall on writing better content

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

Gary Marshall:
Hi Paul, how are you doing?

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

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

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

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

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

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

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

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

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

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

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

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

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

Gary Marshall:
Yes

Paul Boag:
What kind of differences? What should people be doing differently?

Gary Marshall:
The biggest one is brevity, simply because your reading on a screen – you’ve no control over what sort of screen people are going to be reading on for starters, so I might be looking at it on my BlackBerry, you might be using a 22 inch monitor, but web content doesn’t lend itself to huge blocks of text and long, long sentences so you need to think much more visually than you do with the printed page I think, break it up a lot more and have a lot more white space. The way to present it can be important also, even having a bigger gap between lines can make a big difference to whether your text looks appealing or not. Again, work back from the basis of ‘what is it that your visitors are going to want here?’ You need to really start with that. I find that bullet pointing is usually a very good way to approach it. So, you sit down and think ‘what are people coming to my website for? And what is it they’re going to be looking for?’ and answer that first. If you’ve got a bit of spare time go into you full corporate history and everything you’ve done in your life, but concentrate on the purpose of your site first.

Paul Boag:
It strikes me that websites, unlike other mediums aren’t linear, so you have the option to start with the top level brief information and highlights, and people can kind of dig down to the in depth stuff if they want to.

Gary Marshall:
Indeed, one of the things you see in print a lot is the use of ‘pull quotes’ to draw your attention to a particular bit of the body copy, and its basically a sales technique and exactly the same thing works on websites and can be very effective and can encourage people to read more. The other thing I would say is try not to link too much in your actual body copy because every little blue line there is a potential reason for someone to disappear.

Paul Boag:
Ok that’s interesting.

Gary Marshall:
I think it can get in the way – if you’re trying to engage people you don’t want people to go off on tangents because you’ve got this short attention span thing going on.

Paul Boag:
Yeah I can accept that – the other thing as well is that if the page is full hundreds of links it makes it visually quite difficult to read as well.

Gary Marshall:
Yeah and avoid these kind of hover over adverts that infest websites. If it looks like a link I expect it to be a link and if I move my mouse over it and just get ‘find out about hotels in Guatemala’ or something its instantly away from the website. There’s something as well, I don’t know if its true or not but in journalism school they teach you when writing for tabloids you should write on the assumption that your reader is going to be a small child, and I think that can work with websites as well because it really does focus you on getting the information there quickly with the minimum amount of waffle and without going off on huge tangents. And like the old press thing as well where you have all the information in the first paragraph and you expand on it as you go along, so you should be able to chop from the bottom. If you’ve written 500 words, you should be able to chop the bottom 250 off that without losing sense of what you’re doing.

Paul Boag:
Yeah that’s good. So, websites are one thing – your kind of corporate websites and things like that, but more and more organisations are starting to use blogs as a method of communicating. Do you think there’s a difference there? What advice would you give to people writing posts for blogs?

Gary Marshall:
Be sure that you want to do it in the first place. Jacob Neilson quite famously said the other week that businesses shouldn’t blog, and he’s getting a bit of a headline generator there – he doesn’t mean no business should blog, but it can backfire because the nature of blogging is very much off the cuff, very quick reactions to things and that’s fine if it suits your particular kind if business, but if people are coming to your site for in depth information then I don’t think blogging does suit because by it very nature blogging is your most recent thought at the top so if you don’t have regular readers its quite easy to fall into the trap of assuming everybody knows the context of what your talking about, and they might not because you wrote about it 3 weeks ago or 3 months ago. That’s quite a common pitfall I think. The other thing about blogging is because it’s quick and easy it does encourage you maybe not to craft things as well and not think things through. You have got to remember that this stuff potentially hangs about for eternity. So it might be tempting to, I don’t know, slag off the competition or something but it could well come back and bite you later on. I think with blogging, it comes back to any sort of writing – you need to know what your trying to achieve with it because if you don’t have a clear idea of what your blog is going to bring to your website, and what benefit its going to bring to your visitors and customers it’s a potential massive waste of time and effort that you could be spending on something more interesting.

Paul Boag:
Yeah.

Gary Marshall:
I sound really negative; I don’t mean to be really grumpy today! But I think it’s a bit like in the early days in the web there was always these wonderful ‘do-hickeys’ and logos you could slap all over your website and lots of people did without actually asking ‘does this bring me any kind of benefit whatsoever?’. Done well, blogging can be a fantastic thing on a website. I’ve seen a few examples of it in all kinds of things – I was looking for drum loops for ‘Garage Band’ and I was looking at the various drum loop companies and I found one that the owners blog, and they talk about how they do the stuff, what they’ve got coming down the line, why they think that they’re great and nobody else is and all this kind of stuff and I really quite warmed to them and that encouraged me to have a look on their website and I ended up spending money on it. Other sites that are just plain old e-commerce things and really don’t care. Unless your doing a kind of niche market where I don’t know, ‘golfing grandmothers’ or something then the very fact that you’ve got a niche people are more likely to pay attention to what you’ve got to say. I don’t care if the marketing director of Comet has a blog; I have no interest in what he’s got to say – so adding it to something like that would be a waste of time. I don’t want to read a blog on ‘great big faceless ISP dot com’ whereas ‘Merchant city music’, which is a music shop in Glasgow, I’d be quite interested in what these guys have got to say, so ‘We’ve got some amazing stuff coming in!’ or ‘we were away seeing a band last night and they were fantastic!’. That feeling that your part of a bigger picture can be really effective, particularly with smaller businesses.

Paul Boag:
Yeah, good stuff I couldn’t agree with you more. I think there are a lot of blogs out there that shouldn’t be out there and there are also some places that should be blogging that aren’t.

Gary Marshall:
Yeah I would agree with that.

Paul Boag:
OK thank you very much for your time Gary, it was really good to talk to you again and no doubt we’ll have you back on the show in the future

Gary Marshall:
No doubt!

Show 92: Royal Air Force

Posted in Classic shows on September 4, 2007 by Paul Boag

On this week’s show: Paul asks how much you should blog, Marcus takes a look at the state of music online and John Oxton joins Jon Hicks in discussing the benefits and drawbacks of home working.

Podcast: Download (25.9MB)

Download this show.

Launch our podcast player

News and events | Music on the web | How much to blog? | Hicks and Oxton on home working | Housekeeping

One quick thing before we dive into the news. I am lazy. Yes, I know it is a shock. I am always looking for the easiest way to do things. But as well as being lazy I like pretty shiny things. One thing I particularly like is pretty desktop pictures. However, looking for cool ones takes too long. You can therefore imagine my delight to discover a mac app called Desktoptopia that basically pumps gorgeous background to my desktop on a continual basis. What is more you can even add your own RSS feeds if you don’t like their images.

So I wrote to them saying I liked their software and they offered me a $5 discount for all you boagworld listeners until the 18th September. That means you can buy the software for only $15! All you have to do is go to desktoptopia.com/store and enter the code “boagworld”. I know this sounds like an ad but it isn’t. They aren’t giving me anything. I just liked their product.

Anyway if you know of any other cool apps that you want me to go after a discount on that drop me a line.

News and events

The Mobile Web

This last week has seen the release of Cameron Moll’s book on the Mobile Web. I have been waiting a long time to read this book and although I have yet to finish it, what I have seen justifies the wait.

You maybe tempted to think that the mobile web isn’t really something you need to concern yourself with, but I would strongly encourage you to reconsider. In Cameron’s book he explains that 59% of the entire world population will have a mobile phone by 2010. In 35 years – roughly the same amount of time as the PC and nearly one-forth the time of the landline phone – mobile phone penetration has surpassed the PC and landline phone combined. It is a massive growth area. Admittedly not all of those phones are internet enabled and even if they are that doesn’t mean people use them. However, in the UK and US mobile access to the internet is already one-fifth the size of those accessing from a PC.

The book is only $19 and can be downloaded in PDF format from mobilewebbook.com.

If that has wetted your appetite for the mobile web you should also check out an iphone article that has appeared on the List Apart website. It provides loads of great advice on developing sites that work well with the iphone and although it is iphone specific a lot of the information applies to other mobile devices too.

Incredible image scaling

Next up is a video demonstration that is causing considerable excitement online. The video shows an amazing technology that can dynamically scale an image up or down to fit the available space. We are not talking pixel scaling here, we are talking about adding or removing pixels in a seamless way by following the contours of the objects in the picture.

Its an incredibly hard thing to describe on an audio podcast and so I would encourage you to look for yourself.

What I can say however is that this is an incredibly exciting technology which the big players are taking seriously. Adobe has already hired one of the creators of this technique.

Finding a domain name generator

My next news item for today is a great little post I came across on the sitepoint.com website which lists three domain name generators. These “generators” help solve a growing problem you encounter when launching a new site or product; finding an available domain name.

You can tell just how hard it has become to find a good domain name by the way that web 2.0. companies have started dropping vowels in order to get the word that they want.

The sites listed in this blog post allow you to enter keywords and it will suggest domain names based on word combination, plurals and even thesaurus lookups. Best of all one of the sites mentioned also works nicely for those of you who are looking for language specific URLs.

Very useful indeed.

The ultimate design brief

Last up in today’s news segment of the show is an article about writing a design brief. It is not directly written with web design in mind but ever word is applicable. The article applies equally to designers as to clients and talks about the important role that a design brief fulfills. It suggests that designers need to encourage clients to put together a formal design brief outlining exactly what their requirements are. It then lists a series of suggestions of things which should be included. The list it includes is far from being comprehensive (at least not for web designers) but it is an excellent starting point.

I really cannot emphasis enough how important a formal brief is no matter how small the project. It is a strange coincidence that this post comes out in the week that I am drafting a chapter on brief writing for my book. While working on this it has reminded me of just how bad things can become if all parties are not entirely aware of each others expectations.

If you tend to be a bit slack when it comes to writing down requirements then make a point of reading this article.

Marcus’ bit: Music on the web

I remembered writing an article for the Headscape website a long time ago on this subject so I thought I’d go back, have a look, and compare it to how things have actually changed in the past five years.

At the time, before the general take up of broadband, the use of music on websites was limited to annoying, over-compressed loops that bore little relevance to the rest of the site. I hoped that the advent of broadband for all would lead to music being created for sites a lot more often and the role of web music developer/designer becoming a reality.

So, has anything changed?

Well, to be honest, not really. The sites that used to include music; ‘cool’ sites like trendy design agencies, band sites etc still do and they do it a lot better. The quality has improved along with the choice of what you can listen to. But that wasn’t what I was hoping for.
At the time, there was a bit of a buzz about audio branding – promoted by Intel’s audio ‘logo’. This lead me to think that a lot more companies would start to introduce audio branding and add it to their sites. This hasn’t happened at all apart from a few big names

like Philips and Ford.

Why not?

The main reason for the lack of take up of music on sites is, I think, that music needs to either sit on it’s own i.e. you don’t associate imagery with it at all or, it needs to synchronised with imagery. Music works great with films/ads/etc because they’re fixed – you can stop and start them but that’s about it. They can’t be viewed in a random way like the way people navigate websites. This means that music on websites will always feel like a bit of an add-on and, at worst, as a distraction.

Additionally, websites are generally seen as information portals and not as places of entertainment per se. They provide entertaining things to download, watch, etc but in themselves they are simply shells for content, most of which is written text. While I’m on ‘text’, one thing I thought we would see more of was voiceovers – but again, this hasn’t caught on.

Any positives for the composer?

Yes. What has exploded since the take up of broadband is video. We are seeing more and more video online. Video, which is a fixed entity, usually benefits to a lesser or greater from the addition of music.

Though the creation of quality video is a specialist field, I can see web design agencies being asked to produce more and more video (for example: client testimonials, staff interviews, product demos etc). Quite a lot of the time I expect that library music will be used but I expect that little by little, more new compositions will be required for video on websites.

I’ll check again in five years!

Paul’s corner: How much to blog?

I recently received a question from Dan:

For as long as I can remember the prevalent thought has been that the key to success for blogging and podcasting is to post frequently and on a regular schedule. Now, this made a lot of sense because websites had to get visitors to comeback manually to find new content. But now in the age of RSS feed is this advice still as important as it used to be if at all? Also in terms of how web managers spend their resources is it more important to do a few updates with stella quality or to manage your time so that frequent updates are the priority?

With over 66% of blogs not updated in over 2 months and anywhere between 60% and 80% abandoned within their first month this seemed a good subject to examine in more depth…

Hicks and Oxton on home working

Paul:
Okay. So joining me today are two towers if British web design genius, in the form of Jon Hicks and John Oxton. Hello guys.

Jon:
Hello.

John:
Hello. I think he is trying to tell us that weíre fat.

Jon:
[laughs]

John:
[laughs]

Paul:
[laughs]

John:
I was just agreeing with him. [laughs]

Paul:
Itís always good practice, if you are doing a podcast, to butter-up your guests in advance.

Jon:
[laughs]

John:
[laughs]

Paul:
[laughs]

John:
Oh, I always wanted to be greased up. Thank you.

Paul:
Enjoy. Okay so the reason we dragged these two guys onto the show today is really to talk about a change that they both made in their carriers recently. So you guys have been freelancers for a while, is that right?

John:
Yes. Iíve been 5 years. How long have you been John?

Jon:
On and off for about 5 years as well.

Paul:
Okay.

Jon:
With three years committed.

Paul:
So that is quite a while to work as freelancers. And I guess that you both used to work out of home offices. Is that right?

John:
Yes. Iíve worked for the first three years from a home office. And the last two years I have renting a little desk in a local print design company.

Paul:
Okay.

Jon:
So it kind of like the next step-up.

Paul:
What about you Mr. Oxton?

John:
I worked out of a bedroom, like every proper developer should.

Jon:
[laughs]

John:
For as long as I have been doing web design I never had my own office.

Paul:
Okay. And then, relatively recently the two of you decided to get together and move into an RAF base, is that right?

Jon:
[laughs]

John:
[laughs]

Jon:
Thatís right… over. [sound of CB radio clicking off] Yeah, I mean… do you want to tell the story John? Or should I tell the story?

John:
You tell the story.

Jon:
Iíve been renting a desk for two years. It was a nice place to rent and nice people. But it really was though… ìWe have a spare desk in the corner and you can come and use it.î John mentioned that we wanted to find an office, so we were looking for anywhere sort of halfway between where we lived. And this place came up and I think I have to admit, there was kind of a boy-appeal to the whole RAF based thing. I mean it is not big, an RAF base, about 8 or 9 years ago. But, there is still an airfield here and it is still being used. And, itís great.

Paul:
So, beyond this being some nice reminiscing about how youíve got a lovely office together and shouldnít we all be envious of you? I mean, the reason I kind of got you on is to talk a little bit about home working and working in an office, and working as a freelancer really. And setting yourself up and stuff like that. What made the decision for you to move out of a home office and into an office working together? What triggered that decision?

John:
I think for me, the key was having young children. Working at home with young children is an nearly impossible I think.

Paul:
Hmmm.

John:
But it is also the fact that we kind of worked together for the year before hadnít we, on a project, and we found out that we get on quite well.

Jon:
[laughs]

John:
[laughs]

John:
So those were the two elements for me really. Find someone you can get along with and just wanting to get out of the house because of the kids.

Paul:
So was it a desire to be in an environment where you could bounce off of somebody else and have other people you could speak to as well? Or was it just getting away from the kids?

Jon:
That that is one aspect of it. Certainly, going back to the place that I was renting the desk from, they are lovely people and they were good print designers, but I couldnít talk to them about anything web related.

Paul:
Yeah.

Jon:
Ummm. I mean, they did websites using Freeway.

Paul:
Right.

Jon:
So you know you couldnít talk code to them, you could talk about IE bugs – and that kind of thing. Ummm, although I could do my thing of asking people what color something is, if I needed to check… but that was about it. So yeah, that is an element to it. Having someone there you can actually talk to about these things, or you know passing around things like… discussing things like the blueprint of CSS framework or what was that one called Moonfall, or something. It was the Perl script for doingÖ

John:
Oh yeah.

Jon:
CSS variables. These sorts of things, beforehand I wouldnít know anyone to talk to about that. You know, that makes the difference.

John:
And Iíve got somebody that can identify fonts for me now…

Jon:
[laughs]

John:
[laughs]

Paul:
[laughs]

John:
…which is a huge bonus! And what about merging two big iTunes libraries.

Paul:
Ah, I didnít think about the iTunes libraries.

John:
It is all about the music really.

John:
I mean it is difficult. There are definite advantages to home working. Ummm. Not having to travel is a huge one. Especially when you think about the environmental costs. As well as the financial cost of traveling somewhere to work.

Jon:
If anyone mentions carbon footprint, I hang up.

Jon:
[laughs]

John:
[laughs]

Paul:
[laughs]

John:
Yeah. We donít think it matters a bit. And everything is there. If you want to go and make a bacon sandwich at lunchtime you can. If donít have to go out and shop necessarily. And it is a nice familiar environment. And it is definitely cheaper. Thatís the thing. You are paying less over head.

Paul:
Hmmm.

John:
But, for me that would only work if I could afford a big house.

Jon:
Yeah.

John:
And we had the space to do that. And the space enough to be far enough away from that other activity as John says like children.

Paul:
Hmmm.

John:
And even if you lock yourself away in a room they still come in and talk to you.

Paul:
Do you think there are actual business benefits to being in an office rather than working out of your home?

Jon:
Well definitely. One of the things here, when they took over the RAF base, they took over what was the officers mess. They turned the rooms into separate suites. So there, what do you say John, about 20 other companies here?

John:
Yeah.

Jon:
Quite a lot.

John:
As well as some other virtual companies. Yeah, and a load of them Jon is working with other companies in the building.

Jon:
I think there is definitely an element where, ìYou can afford an office you must be doing something right.î I think he makes it look a bit more professional, for a start.

Paul:
Umm hmmm.

Jon:
You have a real live office, and you are not working out of your bedroom. It is a nonsense perception, but never the less it is true and it is a factor.

Jon:
And it is somewhere you can bring a client to. When I worked home, we would always have to meet clients at their place or at a pub… which wasnít a bad thing.

Jon:
[laughs]

John:
[laughs]

Paul:
[laughs]

Jon:
But sometimes a pub isnít the best place to meet. If you actually have got the nitty-gritty to discuss. So like here for example, there is a huge meeting room and a smaller meeting room. You hire it by the hour and they bring you in tea and coffee. And clients like coming here, donít they John?

John:
Yeah. Itís a nice journey.

Jon:
Again, as we all said about the other thing, clients here are greeted properly. Not like knocking on your house door and being jumped on by children.

John:
Yes. [laugh]

Paul:
Yeah.

Jon:
The phones get answered properly. There are lots, from a perception point of view ñ making you look more professional ñ I think.

John:
Absolutely.

Paul:
I mean we have a quite a few people listening to this show that would be enthusiastic amateurs at the moment. People that donít do web design full time, but maybe thinking about going freelance. Or, they are working for an existing company as a web designer and they are thinking about coming out of that and setting up freelance. What would you advise to people like that? Would you say start off in a home office or would you say go professional and go into one of these units straight off at the bat?

John:
Iíd be inclined to say, ummm, to start off at home if you can, but it depends what you are going out to do really. If you are going out with share holders and big plans for a product then probably go straight into offices. But if you are going out to be a freelancer who builds backends or frontends then you probably want to keep your overheads a small as possible to begin with.

Paul:
Hmmm.

John:
And then you can cut your position a little bit. And I think that was my attitude for a long time.

Paul:
So I mean would you have any particular advice for people who are working out of their home? As to… what things to avoid and what things to do in order to make yourself as productive as possible?

John:
I liked the Mark Bolton thing that he wrote, where he said to actually leave the house and walk around the block in the morning – to put his shoes on and actually leave the house. Because you know there have been days I have sat and worked with just my socks on. [laughs]

Jon:
[laughs]

John:
And it is all too easy to sit down and read a book. You know trying to make some mental separation between home and work is one of the key things.

Jon:
Yeah, definitely. That is something actually as well that I have to do here too. Ummm. Perhaps less than I did at home, but…

Jon:
And the longer you stay in front of a computer the less productive you can be. And a lot less stimulated your brain is. And just a simple thing of like, it doesnít have to be a long walk, just a couple of minutes. Get out and get some fresh air. Go around the block and come in again. And it has reinvigorated you. You if do it like a curve graph you see a sort of dip and over time it would get lower and lower the longer you stay in front of a computer.

John:
Yeah. That is for sure. I tend to go for short bursts, I pace a lot.

Jon:
Yeah. Yeah. We recorded ourselves recently doing that. And it proves how much I stay just rooted to a computer, while John paces and jumps up, and dances quite a lot.

John:
[laughs]

Paul:
[laughs]

John:
I like dancing.

Jon:
[laughs]

John:
[laughs]

Paul:
[laughs]

Jon:
But…

Paul:
That would be worth seeing. You recorded that…

John:
Ah huh.

Paul:
…on YouTube?

Jon:
Video I think.

Paul:
The actual work environment that you create, either at home or in the office. You know is there a certain setup that you like? That kind of makes working easier for you?

John:
I think it is a little bit like, old men and their sheds.

Jon:
[laughs]

John:
[laughs]

Paul:
[laughs]

John:
You know how when youíre an old man youíve said, ìWhen they get old they wouldnít even need their space.î When they need things around them they would say, ìI am going to my shed.î And when I was working from home it was like, ìI am going to my office.î

Paul:
Yeah.

John:
The thing about the office it that, it is the place where you control how it looks. It is your posters, your books. Your not necessarily mingling with everyone elseís. I think what we have done here, weíve created an environment that… well we havenít got an interior designer or anything… but we just kind of say we are an RAF base so letís go with an RAF theme. Some really nice 1940ís posters up on the walls. Even the famous ones you see everywhere, ìCome and Carry Onî, and Government advise posters.

Paul:
Yeah.

Jon:
It isnít too corporate in here is it?

John:
No.

Jon:
Itís clean and white. But the important thing is that it has all of our books and itís got our music.

John:
And we are quite lucky that we have some space in the back where we can hide all of our horrible stuff like filing cabinets.

Jon:
Yeah.

Paul:
Oh. Thatís good.

John:
We can keep it quite clean, canít we?

Jon:
It is a bit like the extension of the house really.

John:
Yeah. You know I have a window sill with all of my Doctor Who toys on it. It is creating an environment that makes you feel glad to be here.

Paul:
Ummm.

John:
That is one thing that I felt I when I went on holiday for two weeks, and coming in on Tuesday I felt it was great and feeling really excited to be going back into my office.

Paul:
Hmmm.

John:
We have quite a lot of things there and we have looking like we want it to look.

Paul:
Yeah.

Jon:
I find that quite a thing in the morning for me. Especially having this be the first office, with the actual leaving the house and coming to work, my brain actually starts thinking, ìI am going to work. I am going to work.î

John:
Yeah

Jon:
And at home, it was always a bit of a hard thing to do. Sometimes I would have to go out and come back, you know go and get something from the shop and come back to get the mental thing kicking in. So…

John:
Yeah. Well that is a huge thing. A lot of people talk about that, the separation of your home life and work life.

Jon:
But the actual office itself isnít geared up for relaxation really. It is geared up for calm working moments.

Paul:
When you guys worked at home, did you make sure you had a completely separate room dedicated to work? Because that always strikes me as being very important…

Jon:
Yeah. I did.

Paul:
…not to mix the two.

John:
There was occasions when I would go downstairs if I was doing something that I wasnít really motivated. I would sometimes go downstairs and just be amongst the family.

Paul:
Yeah.

John:
To have other people around me so I wasnít so excluded. So occasionally that could work for me to get me going, but generally… yeah, shut the door, put the music on and design away.

Paul:
I mean you talked about several things here about the need to get out and walk around a bit to clear your head. The need to sometimes to go and sit with other people, just to get that external stimulation. You talked about needing a quiet environment sometimes. What other kind of techniques do you use to help you be productive and get stuff done?

Jon:
Yeah. Setting deadlines is a big one for me.

Paul:
Okay.

Jon:
You know. Setting myself with burst deadlines when I had to get something done by setting that with the clients with an expectation otherwise I tend to get all, ìWell Iíll research that for a bit longer.î

Paul:
Yeah right.

Jon:
Deadlines are a important and acknowledging that sometimes Iíll do my best work at 3 oíclock in the morning – and going with that for a certain extent.

Paul:
Okay.

Jon:
Yeah, but I try and not do that too much anymore. But sometimes if I am struggling on something, 3 oíclock in the morning seems to be a good time.

John:
[laughs]

Jon:
I donít know why.

John:
Well I think for me, the simple fact of moving into an office was a big motivation booster. For a start, the change in environment was great kind of it reinvigorated me. But also, just the simple fact of, ìIíve got to do work to make money to pay for this place.î

Paul:
Yeah.

John:
…is a big booster in itself. But, yeah I use various things to sort of productivity in the sense I set a to-do list in yoJimbo a Mac application. I use Billings and BaseCamp a lot. Which I find that Billings can be very motivating the way I do these timesheets for everything I am doing.

Paul:
Okay.

John:
I never used to be very disciplined about recording time spent on things. But for some reason now, I am starting to do this. It is a very easy way to do it in Billings. And I find that quite motivating actually.

Paul:
Yeah.

John:
Actually recording how long things take.

Paul:
So, I mean kind of the final question that I wanted to ask is… The two of you have moved into an office together. But you still work very independently in your businesses or do you find that you are doing more stuff together? Is this the first step in becoming Jon and John Design, or…

Jon:
[laughs]

John:
[laughs]

John:
If you ask us that, we will put to you a different answer from the both of us.

Paul:
Oh dear. I have touched a nerve.

Jon:
[laughs]

John:
[laughs]

Jon:
You b****rd! [laughs]

John:
I mean at the moment we are very much independent. Ummm. But that is not to say that in the future…

Jon:
…I think that we touched on the subject and we are not willing to commit to any kind of answer yet are we?

John:
We are kind of looking at the projects in the future that we can collaborate on.

Paul:
Hmmm.

Jon:
I think there is more of a chance of us hooking up, because we are in the same office to collaborate on something ñ than we are about to becoming suddenly a big limited liability company with loads of employees.

John:
Yeah.

Jon:
That is nothing that I can see in the future… yet.

Paul:
Okay, well thank you very much guys for coming on the show and you never know, one day in the future we might get you to actually come in and talk about web design or something.

Jon:
[laughs]

John:
[laughs]

John:
I donít know anything about that. [laughs]

Jon:
How many episodes of Boag World have you done so far?

Paul:
You canít ask me that question because I do not know when this interview is going to go out.

Jon:
[laughs]

John:
[laughs]

John:
I see.

Paul:
I am going to take a stab and say 92.

Jon:
Well, there you go. After 92 podcasts what could we add to your web design conversation? [laughs]

Paul:
Obviously I know absolutely everything about web design. And there is nothing more to say other than what I have already said.

Jon:
Or catch me on a day when I am in a bad mood, and then I will tell you what I think about web design.

Jon:
[laughs]

John:
[laughs]

Paul:
[laughs]

Paul:
Excellent. Well, it was really good to talk to you and no doubt we will get you back in soon.

Housekeeping

And so that pretty much wraps it up for this week’s show. However, I do want to quickly mention one or two things before we go. If you are a web designer and live in the South West of England I just wanted to mention a new mailing list I have setup. It is exclusively for those in the South West and is designed to help build a community among web designers there. There is so much going on in places like Brighton and London and I thought it might be nice to build up a community in the more “rural” parts of Britain! You can find out more about the group at groups.google.com/group/swwd.

Also a quick reminder about the live recording of our 100th episode up in London on Saturday 20th October. If you are intending to come please sign up at upcoming.yahoo.com/event/224744.

Finally, because of d.construct and a trip to Cork I have at the beginning of next week, I am not 100% sure when we can get the show out next week so it might possibly be a few days late. However, don’t worry it will appear.

Thanks very much for listening and don’t forget to vote for our panels at this years SXSW at panelpicker.sxsw.com. We need all the votes we can get!

Show 91: God Bless America

Posted in Classic shows on August 28, 2007 by Paul Boag

On this week’s show: Paul gets to grips with the fact that the whole world isn’t British, Marcus explains how to deal with the client from hell and Julie Howell shares her expertise on accessibility

Podcast: Download (32.3MB)

Download this show.

Launch our podcast player

News and events | Dealing with the client from hell | The international web | Julie Howell on Accessibility

News and events

There are tons of news stories which have sprung up since I last recorded a show. In fact I have spent all morning wading through my RSS feeds. Unfortunately as always I can only squeeze a few into the show so you will have to check out my delicious feed for the rest.

Gerry McGovern on Intranets

The first story I wanted to mention is a couple of posts by Gerry McGovern concerning intranets. I am constantly getting emails asking for me to talk about intranets on the show but somehow have never gotten around to it. Fortunately Gerry has and if you are somebody who works on intranet sites then you should take the time to check them out.

The first, tackles the basic problem of how to get senior management engaged with the intranet. Gerry observes that generally speaking management don’t consider the intranet an important asset to the business and so the site never gets the backing it deserves and requires. In the post he suggests the solution is in how the intranet is portrayed to management and goes on to propose a better approach.

The second article Gerry has posted on intranets is a breakdown of a report on what staff really want from their intranet. Basically, staff overwhelmingly want a better organized intranet where they can quickly find people, policies and procedures, and forms.

Gerry goes on to look at the numbers behind this conclusion and links to a summary of the results in PDF form.

SXSW Panel Picker

Probably the biggest web design news since I have been away is that SXSW have launched their annual panel picker. For those of you who do not know, SXSW is the biggest web design conference of the year and takes place in Austin Texas. The massive event has democratized their selection of panels by opening it up for you to vote on.

By going to the SXSW panel picker you can browse over 680 suggested panels and vote for the ones you like the look of most. Although this sounds great in principle, as Andy Budd points out, it can turn into a popularity contest for the speakers and not necessarily an assessment of the quality of the subjects.

That said, I need you to all vote for the three panels I am associated with whether you think they are any good or not! I don’t even care if you are attending SXSW or not, just get on the site and vote. Hell, I have crafted this podcast lovingly for you every week for over two years the least you can do is vote for me :)

Seriously though, I am hoping to be on three panels (yes I know this overkill) and am really excited as it is my first year speaking at the conference.

My panels are:

Selling your web design services (which will hopefully be me and marcus doing something very much in the style of boagworld)
Running a Successful Web Design Business (which will be a panel made up of myself, Andy Clarke, Jon Hicks and Alun Rowe)
Social networking as a brand (made up of a massive panel including Jina Bolton, Steve Smith, Mark Norman Francis, Bryan Veloso, and Steve Ganz)

Hopefully at least one of these will come off.

HTML characters lookup

My next news item that I wanted to mention is a useful little tool which has recently been launched. I love this tool because it solves a really simple problem in a very easy to use way. Basically all it does is allow you to look up the HTML code you need to include ampersands, spaces or other characters which need to be escaped.

Let me explain the problem in case you don’t know what I am talking about. In HTML certain characters are reserved for use in the code. For example if you type an & it will interpret that as code and not text. It is therefore necessary to code up these characters in a special way. This online tool will tell you exactly how to do that.

You simply type in the character you wish to use and it returns the code you have to use. The site uses AJAX so results return incredibly quickly and if you are a mac user you can even download a dashboard widget.

Very useful indeed.

Moving from Print to the web

My final new story for today is some help for you print designers out there who are struggling to make the transition to the web. It is not always an easy process not just because of learning the technical side but also the mental shift involved.

Well, if that is you I would like to make two suggestions. First up, I would like to recommend an article I came across that takes you through the process of moving from print to the web. Its extremely good and makes some excellent recommendations about where to start.

Secondly, you might want to think about getting some training on CSS and XHTML. There are a number of courses out there but if you are UK based I would like to particularly recommend a beginners CSS course being run by Rachel Andrews and Drew McLellan. These guys are both experts in their field and they have a session coming up in October. Of course this course is ideal for anybody starting out with CSS, not just print designers!

Marcus’ bit: Dealing with the client from hell

Found this rather frustrated boagworlder (Cadore) in the forum – read on&#…;

Hello everyone, I was wondering if I could get some feedback on how to proceed with a problematic client.

I have a small business client who contacted me about a website. After talking with her she decided she wanted a basic two column layout with some navigation, she would provide language, etc. All was good, but here is the main problem: I design the header or banner, whichever you call it, and she says it looks great, she loves it. Then we move onto the navigation, she likes the navigation, but now the header seems “too busy” – take a step back. One thing that cracks me up is she said in emails she wants to have a large amount of leaves throughout the design. So, I incorporate leaves and she says she is thinking of not having any leaves at all now. It’s like she wants to do the design for me? Me designer – you client. Do you understand what I am saying, every step forward she wants to go a step back. Now she has a problem with the navigation, and the background image, that she has loved and hated 4 times already. Does anyone have any advice how to deal with a client like this. I was thinking of having her sign off on every little things, but this doesn’t make for a happy working relationship. Any advice on you have proceeded with a client like this would be appreciated.

I have talked loads about getting contracts in place, making sure everything’s agreed up front etc etc. But, agreeing on the look and feel of a site is not so easy to nail down before you start working on a project.

Certainly do all of the following before you start:

Find out who will be signing off the design.
Encourage the client to make this as small a group as possible.
Talk to these people. Obviously, talk to them about project specifics (see below) but try to get to know them a bit. Get an idea whether they’re conservative in their outlook, arty, whacky&#…; whatever. I remember seeing a panel at SXSW where a Swedish creative director said that he insisted on getting drunk with his clients before starting the job&#…; there is some wisdom in that!
As them for examples of favourite sites, particularly in their sector. Ask them why they like them.
Ask them for any other marketing material that they have, particularly items they like.
Discuss their brand (even if it’s just their logo) and the importance of continuity. Make sure that you are aware of any limitations.
Discuss colours.
Discuss imagery. Ask for imagery that you can use.
Discuss layout.
Finally, when you’re discussing these items, make sure that you provide examples, choices, potential solutions etc. Your client is almost certainly not an expert web designer therefore they need ideas from you; alternatives if you like.
However, you must explain why you’re recommending a particular idea. You need to communicate that you are an expert. This is actually the crux of the problem I think. Successful designers communicate their ideas before they ‘put pen to paper’ and provide solid reasoning for their choices afterwards.

Summarise all of your discussions in an email. Insist that they agree (or not) upon all of the points in the email before you start.
Ok, so that’s all done, now you have a choice:

Limited iterations

This is when you say to the client:

‘Ok, we will put together a design concept for you. You can come back to us with any modifications/comments once that will be incorporated into the design concept, anything after that is chargeable’.

I think this works well for small client, low budget work because everyone knows where they stand and possibly expectations are lower. Also, constantly going back over a design can affect the bottom line of a small project a lot more than a big technical project.

Averaging things out

The problem with this approach is that it can piss off your clients. You can end up looking petty or, even worse, you can end up making changes for free after the agreed cut off point (“it was only a 10 minute job”)&#…;

The approach that we have ended up with at Headscape takes the view that clients won’t pay time and materials for design concept work (they need a fixed price), so we have estimated what we think the average time spent on this work and charge that to all clients. This price is per concept but effectively allows unlimited mods to that concept. If a client wants multiple concepts then they pay accordingly.

Paul’s corner: The international web

Just before I went on holiday last week I posted an entry on boagworld. On my return I was gob-smacked to see it had generated the most comments of any post I have ever added to my site.

The whole thing started with an email I received from a first time listener to the show. He was complaining about a joke I made at the expense of my american listeners. Those who listen to the show regularly will know that this is not uncommon and this listener felt the comments were inappropriate. I posted a throw away line on twitter about this and accidently started a debate on political correctness and international differences. Overnight I found myself thinking a lot about the subject and this lead to a blog post on the international web.

I started by apologizing if my humor caused any offense but the main thrust of the article was looking at the broader issues of engaging with an international audience. I found the challenges of working across multiple cultures fascinating and felt it applied to all aspects of web design (not just podcasts).

However, unfortunately the majority of comments I received focused on the apology rather than the points I was trying to raise. I really appreciated the encouragement found in the comments but would like to come back to this issue of culture and cultural differences when designing for the web. This is a challenge that we all face and I want to cover the 5 points I mentioned in my blog post again for the sake of those of you who do not read my blog.

Ask the expert: Julie Howell on Accessibility

Paul:
Today I’ve been fortunate enough to grab a few minutes of Julie Howell’s time. Julie is the director of accessibility at a digital design agency called Fortune Cookie and is also the former digital policy development manager at the Royal National Institute for the Blind. She has also been involved, I believe if this is right Julie, that you were involved as the technical author for the PAS-78 or do you call it P.A.S 78?

Julie:
It’s pronounced PAS. Also RNIB is for Royal National Institute of Blind People if you want to…

Paul:
Oh, I missed out the People didn’t I. Oh well, there you go.

Julie:
Well it’s a recent change anyway.

Paul:
Ah, it’s to keep me guessing. Anyway good to have you on the show.

Julie:
Thank you.

Paul:
And obviously, unsurprisingly we have Julie in here to talk about accessibility [laughs]. You know, it’s kinda a no-brainer really. So I thought the best place to start is, well Julie, it strikes me, and I know a lot of the people that listen to our show, that the world of web accessibility seems to be a bit of a mess at the moment. We’ve kinda got WCAG2 that seems to be taking forever to come out. We’ve got now this thing called the WCAG Samurai, what’s all that about? They seem to be in competition with WCAG2. Then whenever you go into or if you are brave enough to venture onto an accessibility forum, they all seem to be fighting over tiny details and you are terrified to say anything incase you get jumped over. Do you think that accessibility is in trouble and if so, what can it do to dig itself out of the hole? What can the accessibility community do?

Julie:
You know, I don’t think there’s as big a problem as is being suggested. I think that what you have to keep in mind is perspective and context. There is heated debate on some areas of the web about accessibility, how accessibility will change or how the guidance might change moving forward in the great big wide world of web design. But in the much bigger world of commercial companies posting content on the web, there isn’t that concern. Everything seems quite stable. It doesn’t worry me at all that the techies or the geeks, and I mean that in the nicest possible way, are having heated debate because it’s really important. That’s how things change and improve and move forward. What is important is that we as people who are part of what I call the accessibility movement, who care about accessibility and who care about the lot of disabled people, keep presenting consistent guidance to the people who really can make the difference to disabled people. That’s businesses who are putting their services onto the web. The fact that there is heated debate about the technicalities I think is positive not negative.

Paul:
It strikes me that there is a little bit of confusion among the business community about what is actually expected of them. Things like the Disability Discrimination Act. They’re not sure how it should be interpreted in reality. Do you think there’s a case or there’s a need for more legal cases to be taken up so that the boundaries of accessibility are better defined?

Julie:
I think there’s a few things in there. I think that the greatest problem that we have, rather than it being arguments about the technicality, is actually a PR issue. We have guidance. We have the Web Content Accessibility Guidance and the other two separate guidance published by the Web Accessibility Initiative. We also have the document published by the British Standards Institution, PAS-78, and I guess we’ll talk about that a little bit more. What we lack is any consistent and well resourced drive to raise awareness of those documents among the community that needs to now about them and that is businesses. That for me is the missing part of the puzzle. Of course the guidelines will keep changing because the technology is changing at such a fast rate. So that I think is healthy. But what we really do need is more effort put into helping businesses understand the guidance that we have. Businesses should not be engaged in the technical discussions because that’s not where they fit into all of this. Businesses want clear, succinct, and that’s a huge problem I have with WCAG2, succinct guidance so that they just know what to… Businesses are saying to us, and I’m saying “us” as in the voluntary sector, the government, the Disability Rights Commission (DRC), that they care about the disabled peoples access and they want to do something about it. They just don’t know what to do. They are confused about which guidance to follow and to my mind, that is due to poor PR and not having any single government department or agency in the UK responsible for pushing the guidance. We’ve got individual organisations and voluntary organisations such as RNIB and RNID doing great work on their own but there’s no government force or business force behind it. Championing the guidance that we have and saying “Actually, there’s no confusion here. The guidance has been published, it is stable and this is all you have to do to follow it. Go forth and get on with it”.

Paul:
Let’s talk about PAS-78 a little bit in context of the business community and what they need to know. Correct me if I am wrong but my understanding of that document is that it was meant to be advice for people that run websites, website owners, to really get them up and running. Is that a fair assessment of what it was about?

Julie:
Erm… I’ve never heard it described that way.

Paul:
[Laughs]

Julie:
[Laughing] I would say that it’s there to provide clarity. We were concerned by the feedback that we were receiving that people in the business community were confused about the range of accessibility guidance that was available on the web. If you go to a search engine and type in “web accessibility”, you get all sorts of stuff back and some of it seems to be conflicting. So what we wanted to do with PAS-78 was pull all of the web accessibility guidance that’s produced by WAI, and also that’s produced by the software developers such as Adobe and others like Microsoft, all together into a single document that can be read within a couple of hours if you want to sit down and read it end to end or could easily be dipped in and out of, which was the definitive guide to the process of making a website accessible. The existing technical guidelines are not for business managers so we have written a document that is in a language that business managers can engage with, can digest, and puts everything together as a process. So it talks about guidelines and it doesn’t seek to create any new guidance. It points to guidance that’s already been published by WAI and others. But it also explains this is a process. This is what you do at this stage and it’s very important to involve disabled people at this stage; at this stage you should write an accessibility policy, later an accessibility statement. These are some of the questions you might want to ask when you are appointing a web design agency. So it puts all of that together in one document. That’s what we were seeking to do really. There’s a few words I used when I was launching it. Two of those words were harmonise and consolidate. It was nothing new. It was bringing together all of the guidance so there was absolutely no doubt. If anyone in the business says “I don’t understand what to do to make my site accessible”, PAS-78 is the only answer they need.

Paul:
OK. So where would they find and get hold of that?

Julie:
Well PAS-78 is free. Now it’s freely available because of the Disability Rights Commission. If you go to the DRC, the DRC have a licensing agreement with the British Standards Institution. So if you go to the Disability Rights Commission website you can download a PAS-78. It’s available in a variety of formats including accessible PDF. After all the medium is the message. The website address for that is http://www.drc-gb.org/pas.

Paul:
Well that brings us nicely onto WCAG then doesn’t it. What are your impressions are of WCAG2, how the WCAG Samurai stuff fits into that and what your current thinking is on all of this?

Julie:
Yeah, we live in interesting times as they say. I’ve been involved with WAI to a lesser and greater degree since 1995. A long time. I’m very conversant in the processes that are there. Now I’m a policy person and a disability rights campaigner. I’m not a coder. I’m not a geek, meant in the nicest possible way, and I’ve got no interest in become one either. I used to design websites but that was back in the day and it’s all very different now. What I care about is disabled people getting access to the web. I care that businesses are enable to make that happen. So as your listeners know WCAG2 has been in development for a really long time. That in itself troubles me because that makes it seem like disabled people are a huge nuisance and very, very difficult to cater for because an organisation catering in specialising to disabled peoples needs on the web takes many, many years to come up with guidance. I don’t like the message that puts out and I think that fuels some of that kind of confusion and misunderstanding and hence that’s why we did the PAS. It was so much quicker and it puts out, I feel, the right messages. People joke about it now don’t they. How long it’s taken WCAG2 to appear and that is because it’s subject to a very rigorous process of course but taking a long time. Now it’s in its latest drafting stages and I have to say… I’m sure you’ve read it or at least looked at it. I haven’t read it because I don’t have the time to read a document of that size. However, it’s not for me. It really is a technical manual now and as a technical manual, what is important is that those of you who are developing code and need to read the technical stuff are engaged by it, will read it and use it effectively. So that’s where the checking needs to be done. I think in the past where we’re getting some of these struggles at the moment, is because WCAG1 was a document for all. So you could read it if you were a developer and you could also have a good read of it if you weren’t and get something out of it. Looking at it now, it looks like a technical manual. Then, for me, it comes back down to PR. If it’s a technical manual then they to call it such and make it clear. If you put that on the desk of any business director general / CEO and well you can imagine the reception that you’ll get, who wants to read that? That said WAI always produce very comprehensive guides to their guidelines and curricular to help the various groups to apply the guidance correctly. They will do so in this case and again for me it’s down to PR. It needs to be made very clear to each individual group, developers, business owners, advocates as well, which guidance is for which group so that we don’t get people belly aching “Oh this is too long”, “I don’t have time to read a document of 100+ pages”.

Paul:
What hadn’t occurred to me there until you just said it, the fact that this applies not just to people like Adobe and Microsoft but also applies to me potentially. If I’m developing a web application that enables users to contribute and upload content then in effect I’m being an equivalent of a Facebook or a Myspace and I need to be aware of those kinds of accessibility issues there are well. It’s quite interesting.

Julie:
It is and then it gets more interesting when you look at it in the context of the law in this country. We have the Disability Discrimination Act and that puts, and I choose these words very carefully, a legal duty on “service providers”. Now software developers are not covered by the DDA. However, the line is blurring. If a website is inaccessible, say a blind person goes to a site to do some shopping and it’s inaccessible, who’s responsibility is it? Whose legal duty is it that the site is accessible? Well it’s the owner of the business because it’s their service. But there’s an argument that the developer who coded the site has aided and abetted the discrimination. But we don’t have any case laws so this is all theoretical until we do get some case laws to back up what were saying. However software developers are not subject to the DDA. There’s a blurry of the lines, in my opinion, between a service provider and a software developer. But if I was to take an educated guess, if a disabled person experienced an instance of discrimination as defined under the Disability Discrimination Act and that happened because they tried to utilise a server via somebody’s page on a social networking site, who would be responsible? That would be very interesting. We also have the DDA, the Disability Discrimination Act. I have Multiple sclerosis. Everybody knows this. I’m very open about it and it really informs my work. Being somebody who stands to benefit, stands to live my life as I choose to and prosper because of the DDA, I can tell you from this side of the fence that the DDA is a very weak piece of legislation as it is. We don’t to date have any case law regarding websites but even if there was a case, it would take quite a number of cases to have any useful body of guidance other than what we already have and know as is published in PAS-78. Really that is your best guide. So yeah, interesting times that we live in. What I would say is that would hope that anybody who is responsible for social networking has a social conscience and cares very much about the ability of every member of society to be able to use the content, to both access it and create it. Unfortunately, disabled people don’t always figure in the planning process when people are putting together solutions and this is again where the web accessibility needs to keep on ramping up that awareness effort to get everybody to understand and to be thinking about disabled people at the earliest part of the conceptual process for new technology. It’s an issue we’ve always had that with web accessibility we’re always running to catch up because new ideas that come to market on the web really, really quickly and the trick to it, in my opinion, is getting close to the innovators, throwing in their face and keep on reminding them. Today we’re talking about accessibility of social networks, tomorrow it will be something else but I’ve got no idea what it’ll be.

Paul:
OK. So just before we wrap up let’s bring it back down to the more mundane day to day level. There will be a lot of people that are listening to this podcast and listening to our conversation thinking “Wow! This seems really overwhelming. It all seems very complicated. There seems to be talking about us having to get disabled people in to do testing, that sounds very expensive. There are legal obligations here and that sounds very scary. There are these various technical guidelines and they all seem very confusing.” Just to those people that are web sites owners that have perhaps buried their head in the sand so far about accessibility. What little step would you suggest to them? Just to get them going. Just to make the first tentative steps into the world of making their site more accessible.

Julie:
The first document to read is PAS-78 which is free of charge. It’s only about 60 pages and that’s in large print. It really is quite an easy read. We made sure of that when we wrote it. PAS-78 sets it all out in plain language. It’s very much written with the business audience in mind. I’d also offer some encouragement. Have a look at some of the case studies, you can easily find them on the web, of big companies that have applied accessibility and are profiting from it. An example being Legal & General, the one that I talk about a lot at the moment. Legal & General had a 300% increase in the take-up of one of their financial products via their website after they made the site more accessible.

Paul:
Wow!

Julie:
300% in a matter of months. You wouldn’t dare set that as a business target. It astonished me and I’ve long believed in this stuff. 300% is amazing. There’s also been a lot written about Tesco. Tesco take millions more in extra business away from their competitors because they’ve made their site more accessible. Accessibility is a good news story. There is money to be had through accessibility. If you make your website content available to the biggest possible audience that you’re tapping into a much bigger pot of money. Disabled people as a group in the UK alone are estimated to have an annual spending power in the region of £85 billion! An incredible amount of money that someone needs to exploit, to capitalise one. Disable people are very happy to be marketed to. Perhaps more so than other groups because disabled people, in particular blind people, are not exposed to advertising and therefore not exposed to a lot of choice that those of us that can see take for granted. Accessible sites are also interoperable sites. They work well on different platforms. If you make your site accessible for a PC you’re making it accessible for many other technologies including a mobile phone which people are using increasingly more now in the UK. Yes, there is a legal imperative as well. I wouldn’t be afraid of that though. There’s a long process involved in that. The DDA to safeguard disabled people’s rights to participate in society. Now indeed when a disabled people feels and finds that they have been discriminated against because of the way a web service is presented to them, of course they are going to feel angry and upset. I have long said I have never understood why I should be able to use a product or service to buy some tickets online because I can see but my blind friend can’t. To me that’s completely unacceptable and unnecessary discrimination. However it’s not a case of “Oh I’m not happy” and we’re all in court. There’s a process there of conciliation. The DRC is involved in that process or it can be, as well as a number of disability organisations because what we want is not to take anybody to the cleaners. It’s to make the web more accessible. The key to that is my mind is dialog. When I used to work at RNIB, if a blind person contacted me having found a website they couldn’t use and it was one of the bigger ones. This is what happened with Tesco. 40 blind people got onto us saying they couldn’t use Tesco and they wanted a legal case to be taken. This was tremendous because it’s alerted Tesco to this issue and it meant that we were able to start a dialogue, the result of which is hundreds if not thousands of blind people are now able to do online shopping for their groceries and delivered to their home which is wonderful. Tesco is not unhappy because it’s bringing in a lot more money through that channel where it wasn’t bringing in any previously from disabled people because it was inaccessible. What we are trying to achieve here is sustained change that will see disabled people included in society to the degree that it would seem outrageous and ridiculous not to do so. Big changes happen. I never thought I’d see smoking banned in public places. I can’t believe it. My goodness if we can do that as a society we can change the way we behave towards disabled people, stop belly aching about the issues and talk to each other about working towards solutions. I’m optimistic that in 20 years we’ll see disabled people much more included in everything that we are all doing now to keep the debate about disabled people and accessibility alive, contributing to a brighter future for disabled people. We should just keep on doing what we are all doing.

Paul:
Excellent. Thank you so much Julie for taking time to come in and talk about that. It was really interesting. I hope to get you back in again in the future before too long.

News and events

Silverback Launches

PatternTap

Google App Engine Update

S3

Interview: Dan Rubin The Details Of Design

Linkage

Typography

Layout

Colour

Listeners feedback:

Managing a Bigger Team

Terms and Conditions

News and events

SPAM meltdown

Form Analytics

Art direction hits the blog

Prototyping

Feature: The plight of the in-house designer

Reviews: Textmate and Top 5 Tips for Web Designers

Textmate by Teifion Jordan

Top 5 Tips for Web Designers by John McFarlane

Listeners feedback:

Newspaper columns on the web

The usability concern

The technical concern

Estimating dev/creative work

News and events

Typography everywhere

Accessibility cheat sheet

Advice on wireframes

Top five tips for new web designers

Feature: Creating Screencasts

Interview: Ian Lloyd on Sitepoint HTML Reference

Listeners feedback:

Can you trust developers?

The life cycle of a website

News and events

IE testing made easy

Hosting your Javascript libraries

Prototyping website interaction in flash

The rule of thirds

Feature: Defying Conventions

Interview: Patrick Lauke on WCAG2

Listeners feedback:

What are the key features of a CMS

Is certification worth it?

News and events

Creating grid layouts

Flash goes open source

Accessibility and AJAX

Developing effective forum leadership

Feature: The personal website is dead

Interview: Jeff Croft Talks About His View On Web Standards

Listeners feedback:

Getting a site off the ground

Testing

News and events

Highly extensible CSS

Video tools

Microformat boost

Feature: Hiring new staff

Expert interview: Christian Heilmann on common Javascript mistakes

Listeners email:

Rolling out new features

Content management and CSS

News and events

Some customers are not worth caring about

Version targeting rumbles on

Let users tagging your posts with delicious

Feature: Using HTML snippets

Expert interview: Jina Bolton on women in web design

Listeners email:

SXSW

Moving to the mac

News and events

Fixing your product pages

Being inspired by newspaper design

Using browser history to improve the user experience

Feature: Designer and developer in perfect harmony

Getting a site
off the ground