104. Give us your money

Posted in Classic shows on December 12, 2007 by Paul Boag

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

Podcast: Download (25.5MB)

Download this show.

Launch our podcast player

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

Housekeeping

All change

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

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

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

Christmas giving

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

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

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

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

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

Give to the Boagworld Christmas Appeal

News and events

24 ways is back

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

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

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

Tips for development and design

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

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

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

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

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

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

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

What tips do you have for getting designs signed off?

Show 100: Live!

Posted in Classic shows on October 30, 2007 by Paul Boag

So here it is. The long awaited 100th episode of Boagworld.com

Download this show.

Launch our podcast player

The audio quality isn’t as great as it could have been, there is a lot of background noise and we are even more rambling than normal. However, this is our 100th episode and we are both proud and excited to have got this far.

Sorry, but there is no transcript of this show. There was just too many people talking and too much background noise to make that viable. I hope you will forgive us.

Thanks to all who turned up or emailed us. If your question doesn’t appear we apologise. We had 2 hours worth of material to reduce down to an hour. However, for a more complete record of the evening (including video) check out Ryan Taylor’s post on the evening.

More thoughts on the 100th show.

Thanks to all of you who support the show. We really appreciate it!

Ecommerce quick order

Posted in Reviews on October 23, 2007 by Paul Boag

A get a steady trickle of emails asking about the application of ‘web 2.0.’ How do the cool things we see on the trendy new generation of sites apply to the everyday web projects we are involved with?

I believe that almost any site can benefit from technologies such as AJAX and Javascript. These technologies and websites offer an improved user experience that can help even the most inexperienced of web user. In this video I show how the lessons learnt from the new generation of website can be applied even to the over 60s market where Internet experience is minimal.

The video is best viewed full screen. Click on the menu option and then on the icon in the top right of the video. Alternatively pop over to the Wiltshire Farm Foods website and try the quick order facility yourself.

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.

Social Participation as a business tool (Video)

Posted in Web strategy on September 28, 2007 by Paul Boag

Community based applications are applicable to all audiences and can be a powerful tool for businesses.

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.

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.

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!

An international web

Posted in Site content on August 17, 2007 by Paul Boag

I hope you will excuse the slightly self-absorbed nature of this post. It is mainly an apology but also hopefully an opportunity to learn some lessons and look at how communicating on the web is a unique experience.

When I first started the podcast I had a very specific tone I wanted to strike. I wanted it to feel like it was a bunch of mates sitting in the pub talking about web design. A simple enough goal you might imagine but in reality it may well be almost impossible to achieve. Let me explain what I mean…

The apology

Yesterday I received an email from a first time listener to the show complaining about me teasing Americans. At first I thought nothing of it. I have learnt to be fairly thick skinned. Whenever you put content out on the web you are bound to attract criticism from time to time. However, I did post on twitter about it and this kicked off an interesting conversation.

It quickly became apparent that my “jokes” could be seen as offensive by some of my American listeners. So, before I go any further let me say that I am sorry if this is the case. It was certainly never my intention to offend anybody and I will certainly try and tone things done in the future.

Analyzing the mistake

That said, lets go on to look at what went wrong and what broader lessons can be learnt. Lessons which can apply to us all rather than to just an insensitive podcaster.

When you screw up as much as I do you quickly learn to analysis your mistake to avoid repeating history. As a result the email obsessed me for much of yesterday afternoon. Thanks to contributions from Thomas Vander Wal and Anton Peck it quickly became clear that the problem lay in my failure to accept the nature of the medium in which I work. Unlike my original desire for the tone of the show, producing a podcast cannot be like chatting with your mates in the pub. I think there are three specific problems with that premise:

My audience are not my mates – However much I would like to convey that feeling, ultimately my audience do not know me. They do not understand my sense of humor or know that I mean no offense when I overstep the line.

They are not sitting with me – The listeners to Boagworld cannot see me. They cannot pick up on my body language or see the grin on my face. They have only the tone of my voice to judge the intent behind my words. As we all know body language is a huge part of how we understand what is being said.

“The pub” and “mates” are very British centric – Even in my thinking about the tone of the show I was exhibiting a very British outlook on the world. Any web based content is very international in its reach. It isn’t confined to a people group even if that is your intention. Even though the British and Americans speak the same language we have very different cultures. I am not going to embarrass myself by trying to guess the differences. However, I know that when programmes such as the Simpsons or Family guy portray the english as buck toothed, weedy, posh blokes this doesn’t offend me. To me they are poking fun at a stereotype, not me personally. Perhaps this has something to do with the perception of national identity. I don’t know. All I know is there is a difference, a difference that until now I have largely ignored.

Lessons learnt

So enough peering at my navel. What lessons can we learn from this. We all run websites. Most of us blog. We are constantly speaking to a world wide audience. How can we ensure that our communications do not cause offense or indeed drive users away. Here are some suggestions.

Be careful with humor

I think my personal mistake makes it very clear that humor can be a particularly dangerous area. For example British humor is very sarcastic, subtle and self deprecating. There is a good reason why most UK sitcoms don’t do well abroad or have to be remade.

Don’t be fooled by a common language

Just because people are reading your website in your language doesn’t mean they have the same cultural background. I am constantly amazed at how different the english speaking world is. I think the fact that we speak the same language lulls us into a false sense of security. Of course there is also a mass of people who will still read your website, but english is their second language. These need even more care because it is easy for them to misunderstand what you have written if their english is not perfect.

Consider getting a copywriter

If people struggle to understand humor in a podcast, where you can hear somebody speaking, how much more of a problem is it in written word? I often talk about the fact that the copy on your site should be engaging and draw users in. It is hard to do this with the written word alone. How do you communicate enthusiasm, empathy or indeed any other emotion without body language or tone of voice. This is a highly skilled area and I think as website owners we need to seriously consider using professional writers to help us get it right.

Review before posting

Think twice before posting anything. We all know that don’t we? You read through the copy of your website over and over again, right? Same with your blog posts? What about your posts on twitter? Hmm… maybe not :)

Look beyond the written word

Finally, I just wanted to mention that I don’t think this problem of cultural differences and misunderstandings due to medium is limited solely to the written word. We have already seen it applies to audio, but what about the video or the imagery on your site. A lot of websites contain imagery that convey huge cultural meaning. I am not even talking about the obvious stuff like showing bare flesh in an Islamic country. I am talking about the more subtle things too. For example recently I went to a website that offered a service which allows users to record audio messages for the podcast by calling a normal telephone number. I have looked at loads of these sites before and they always only provide a US phone number. Well I arrived at this new site hoping it would be different but took one look at the design and use of imagery and immediately left. The look of the site was so US centric and the stock imagery was full of people who were obviously American that I left before even checking the details.

So there you have it. My screw up, my apology and hopefully some stuff we can all learn from it. Am I going to dramatically change the show? Absolutely not. Am I going to give more consideration to some aspects of how I present stuff? Absolutely.

Show 90: Digg

Posted in Classic shows on August 14, 2007 by Paul Boag

On this week’s show: Marcus abandons Paul to go on holiday. Paul talks about competitive analysis and does an in-depth interview with Daniel Burka, the creative director at digg.com.

Podcast: Download (22.1MB)

Download this show.

Launch our podcast player

News and events | Daniel Burka talks about Digg | Competitive analysis

Hello? Is anybody there? I am so lonely, nobody to talk to, nobody to rant at, nobody to take the piss of! Your listening to boagworld.com, the podcast for all those involved in designing, developing and running websites on a daily basis. My name is Paul Boag and this week, I am sad and alone as Marcus is away on Holiday (or should I say vacation?).

I have to say it is not the same without him. Of course on the upside in many ways its a lot better. Less waffle, no interruptions, no skype problems and you get to hear my undiluted genius. So thats okay then :)

Because we don’t have Marcus around this week, todays show will be a little different. For a start Marcus wont be saying much, which should make the show shorter. However, in his place we have an extended interview with Daniel Burka the creative director at the social news website Digg. We cover loads of stuff from the difference in designing for social networking sites to working with AJAX and designing for the iPhone.

I will also be doing my segment as normal. This week I will be providing a quick and dirty introduction to competitive analysis. We will be looking at what you can learn from your competitions websites and how you go about extracting the maximum amount of information.

But before we can get into all that good stuff we first need to look at what has been happening in the world of web design over the last week.

News and events

Eric Meyer tries to prevent history repeating itself

First up in the news segment of the show today is a passionate call to action by Eric Meyer. Like myself, Eric has been working in the web for a very long time and is all too familiar with the problems of the past. He is a veteran of the browser wars (how dramatic does that sound!) and remembers the many problems that period caused.

During that time many web designers simply gave up trying to support multiple browsers and instead displayed the now famous message…

“Your browser is not compatible and must be upgraded”

It is therefore particularly disturbing when we thought those days are over to see the return of a similar message. As Eric points out in his post, those types of messages are returning in the form of…

“This site is for iPhone users only.”

As Eric says: Stop it! Stop it right now. He is absolutely right. There is no reason whatsoever for shutting out users from viewing iPhone optimized pages. Sure they might not look as good on a non iphone browser but other than that they should work fine on a compliant browser. To be honest, even if they don’t, that is still no reason to block non iphone users. If I choose to look at an iphone site on my Windows mobile device or even on my desktop browser, I am not going to expect it to look perfect. However, I could have all kinds of reasons for wanting to do it from wanting to check out the functionality to using an alternative mobile browser that is just as capable of displaying the content.

In Short, Eric argues (and I whole heartedly agree) that the “best viewed in…” approach to web design is a fools errand. Whether it is the iphone or something else, make sure you avoid that road at all costs.

6 Keys to Understanding Modern CSS-based Layouts

Talking about best practice, Jonathan Snook has posted a helpful article for those of you still struggling to move across to modern CSS-based layout.

As Jonathan says in his post…

Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There’s font styles, margin, padding, color and what not. But there’s a wall that people will run into… that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.

Jonathan addresses this challenge by talking about 6 key principles that will help you get over this hump. He talks about; the box model, floating columns, sizing with ems, image replacement, floated navigation and sprites.

Its an interesting list although I am not entirely sure I would include the same items. For example there is no mention of HasLayout or IE conditional comments. However, Jonathan does say it is just his take on things and encourages people to add suggestions in the comments so they are definitely worth reading too.

How to mix fonts

So you might be listening to this feeling smug about your CSS skills but how are you with typography? Working with type is a challenging area and one that is very easy to get wrong. That is especially true when trying to combine multiple fonts together in an effective way.

Fortunately, David who listens to the show, has sent me a link to a cheat sheet on mixing typefaces. Not only does it provide specific examples of typefaces that work well together, it also gives you some basic information on typography.

I am a great fan of cheat sheets and have a number pinned to my wall including my much loved microformats cheat sheet. So, if you are looking for some advice on typography add this to your collection.

Making money through forums

My final news story for this week’s show comes off of the back of a story knocking around here in the UK. A number of large companies have pulled their advertising off of Facebook following the discovery that those ads were appearing on the profile of the BNP (a pseudo- fascist political party in the UK). These companies were unhappy that their brands being associated with the organisation.

This Facebook story is indicative of a wider problem that advertisers seem to be having with social networking sites and forums in particular. So the question then arises, can you make money from a social networking site?

For most of us this is not a question we have to deal with. Most of us don’t run social networking websites. However, many of us do run forums and we are looking to make a bit of extra cash from them.

If that is you then you might want to check out “Can forums still make money?” on sitepoint. This post suggests a load of ways you can improve your return on your forum and make some cash to cover hosting costs. The post is very realistic suggesting that the vast majority of us are not going to get rich from our forums. However, it might help pay for your cleaner (which is what I spend my Adsense revenue on!) and so it is worthy of your attention.

As a slight aside before I wrap up the news segment of today’s show, the article also links to some useful tips from Google about maximizing your return from Google Adsense, so you might want to check that out too.

Talking of social networking websites, that brings me on nicely to my interview with Daniel Burka from Digg…

Daniel Burka talks about Digg

Paul: Okay. So joining me today is Daniel Burka the lead designer/creative director/God of all things user interface at Digg.com. Is that a fair way to describe you Daniel?

Daniel: That was a very polite introduction. Thank you very much.

Paul: Well, it is always good to butter up the guests at the beginning…

Daniel: [laughs]

Paul: I find it goes down better that way. [laughs] So Daniel, I thought that it would be great to get you on the show, simply because you seemed to have worked so extensively with web projects centered very much on social participation and web applications, you know, and various other Web 2.0 buzzwords. Obviously Digg.com is a good example of that. And a lot of listeners of this show are still working on content heavy brochure-ware type sites. But, they seem to be really interested in more interactive elements to their site. And so we thought, let’s get an expert on the show that seems to specialize in this area. So, here is my first question Daniel. What do you see as being the main differences between designing and social networking sites, compared to more traditional content heavy sites that I am sure you have worked on in previous lives, so to speak?

Daniel: Oh yeah, I mean absolutely. I worked on those kinds of sites in the past. The big difference with something like Digg is that all of the content on the site, pretty much, is provided by users and so we're building conduits as frequently as we can where people can provide their input, provide content you know foster discussion, these kinds of things so I guess wherever possible we're not only designing the technically areas that they can do it but focusing the design on encouraging them to participate.

Paul: So how to you do that? How do you encourage someone to participate in using kind of design tools and design approaches?

Daniel: Right. I guess the big thing is to make it obvious that other users have provided content to the site. So, making it clear that the Digg count went up because other people you know dug the story. You know, showing which users submitted certain things or which user made a comment. You know that indicates, Oh okay. Other people, like me, have participated and that might be something I might be able to do too.

Paul: So how did you deal with the kind of early days before Digg had really taken off? Where perhaps you had less content than you do now and you kind of want to give the impression that there is loads going on, when perhaps here isn't?

Daniel: Right. I guess by the time I got involved in Digg which is about 4-5 months after it had started. So Kevin and Owen originally developed the site.

Paul: Oh okay

Daniel: And then they hired the company that I work with in Canada. They hired us to come in and basically do a design review and redesign of the site and that was the primary focus of the redesign was to look and say, Okay, what is this site about? And what the site is about providing input and so the original design which was more definitely designed from an engineer's perspective. It had all of that content, it had all of the facts and the bits and the place to Digg something, but it wasn't very clear at all what you should do or why you should do it.

Paul: Hmmm.

Daniel: And so, you-know probably the most interesting thing I have ever done on Digg was to take the Digg count, to make it really big and stick it on the left and stick a really explicit Digg It button under it. So, I mean that's clearing indicating X number of people already participated.

Paul: Yeah.

Daniel: And if you want to participate hit the big button.

Paul: Yeah. The kind of putting right in front of peoples face where they can't possibly miss it, so to speak.

Daniel: Right. I mean that is the entire purpose of the website is to, you know, say you like something.

Paul: So what other kind of things did you implement in those early days when you came in and started redesigning the site?

Daniel: The original focus, I actually thought this was a kind of interesting approach to take. Steven and I were looking at the site and trying to determine that. It already, in some ways, had a fairly large scope to the website. So we were trying to determine where do we get started. Often that is redesign the look of the site or redesign the home page. We looked at it and what is the most important thing here and the story format, I think, was probably the most important thing about Digg. And so we looked at each individual story in the list. There is a whole row of them on the homepage. We got about 15 on there now. And kind of a singled one of those and dissected it and said, What is important about a story? Why did the user submit it? Why is another person going to be interested in it? How do I encourage them to participate into that story? And so, that story format counts for a few different iterations since we started.

Paul: Hmmm.

Daniel: I think that being the primary focus of ours.

Paul: I mean what about the kind of more rich elements that you started to introduce? Where there is a lot less page refreshes that perhaps there once was and you kind of changed the way the people interacted with the site by introducing AJAX and things like that. I mean was that a big shift? What kind of thinking went into that process?

Daniel: Absolutely. I mean that is critical to Digg's success. Owen and Kevin had already started playing around with AJAX and this was before anybody like Jesse James Garrett that coined the phrase, AJAX. So, we were still calling it Asynchronous Javascript and XML request. Thank God someone has shortened that. And the fact that you are requiring mass participation to make something interesting would be entirely stymied if we had forced a page reload every single time a person wanted to participate.

Paul: Ummm.

Daniel: So we are using that all over the place. The Digg It button is the one real obvious place. And then you know especially in the comment system. There are various other areas where we're basically allowing you to have a really low-threshold of participation. No long page loads. Immediate reaction that what I did I got a reaction back from that, so I get that positive feeling.

Paul: So how does that kind of process work within Digg? I mean are you actually involved in coding the AJAX elements or do you just do the user interface? How do those kinds of accountabilities split up?

Daniel: Right. I guess we've got a really good balance I think between the development and the UI design. We are really tightly integrated with the different teams. And we are getting big enough now that we can actually speak about them as teams. So generally the flow at Digg starts with it's great we have a really design focused process here that Kevin will come up with an idea and then he and I will bounce the idea back and forth usually and figure out what the pros and cons are and then kind of rough out the design aspect. And then, basically take it from the conceptual stage code it statically and then work with the developers in terms of coding the functionality into it. So I don't do a lot of PHP or very much Javascript, but I provide with them XHTML and CSS and obviously the images and work with them implementing the basic flows.

Paul: I think a lot of the impression I get is a lot of organizations is still struggling to work out whose responsibility is the AJAX elements. It's kind of client side stuff that is very user-interface oriented. So should it be a designer job or is it kind of so intrinsic in the kind of connecting to the database and pulling out the content and that kind of thing which is actually a developer's job? It's quite interesting to hear how different people do it.

Daniel: Right. We probably fall into the developer's side of things. You know, it is submitting content to the database which is not horribly different than a normal form submitting to the database.

Paul: Yeah.

Daniel: So that is probably how we line it up.

Paul: Yeah. You guys seem to be doing some interesting things at the moment. One of the things that I imagine is particularly challenging is that you got a tech-savvy audience which is where Digg started. But you're constantly at the moment in this process of broadening that audience out to be more of a mainstream audience. And I'm just interested from a kind of design point of view, and user-interface point of view, what challenges that has presented you as far as shifting that audience. You know kind of in-mid process if you want. Most websites have a fairly good idea of who their target audience is upfront. But you are having to adapt that as the site evolves and I imagine that must be tricky at times.

Daniel: Oh, absolutely. I mean we started off as you said as very a tech-heavy site at about this time last year. I guess just over a year ago we broadened out very explicitly by introducing other content areas to the website. As we grow, and as a less tech-savvy audience comes in, there definitely is a real dichotomy between the perceived power-user who understands the very complex form type systems versus people who barely used a comment system on a weblog. On different areas of the site that level of experience I guess really comes to the fore. Although, I think I really take inspiration from the FireFox Project in that regard – particularly in Van Gudgers response. He is one of lead engineers on the FireFox Project. One of his best qualities being saying No! during the FireFox development and a lot of power-users perceive that they want all of these options at their finger tips. They want a hundred different options, if there are a hundred possibilities. Where as, in reality, having a simple system actually works better for both the power-user and the relative novice. I think the correlation between what happened with the Mozilla Suite, which was the previous iteration before FireFox which had a lot of different features and a lot of different buttons and customizability, versus FireFox which is really the torn-down simple browser. Which really ended up serving both audiences better.

Paul: So have you had the kind of guts to take functionality away or are you more kind of hiding it away so that it is still accessible to the power-user wants to go and get it?

Daniel: Well that is definitely the balance that we try and make. I think hiding the functionality is actually I was just reading a book a friend lent me. John Maeda’s book The Laws of Simplicity and he covers this subject. I think that it is really interesting that you can hide functionality as long as it doesn't feel intimidating and as long as you are not obscuring the functionality. I think you can actually, quite successfully, create a simple site by tucking functionally under the right areas, I guess.

Paul: That struck me. This whole idea of dealing with different types of audiences is a very challenging area. You have been at Digg for a while now, what has been the most challenging aspect from your point of view?

Daniel: Well, I think managing user feedback is definitely one of the big points of working at Digg. It is very intimidating working on a site where, every time you want something new, you have about 2 million people seeing it the next day and giving you their feedback on it. It is fantastic! It is really inspiring and exciting – and at the same time horribly intimidating. It is hard not to get frozen-up when you are about to launch something in two days and you kind of have to brace for the criticism because you know that people are going to be critical. And I mean that in the positive sense. They are going to critique what you have done. And so, being able to basically listen to a wide range of opinions and make sure that you are listening to everyone. But, you don't necessarily do what everyone says because there are obviously people with conflicting opinions and there are people who have very specific interests that may or may not be reflected by other people. I think managing those expectations that people want to know that you are listening to them and they want to see their suggestions reflected in what you are doing. Balancing those types of expectations is a really challenging part of the job.

Paul: So how do you go about that? How do go about deciding which suggestions you are going to implement and which you are not? Do you have some kind of process for that?

Daniel: I'm not sure if it is horribly formalized. I think the first and really important thing that we've learned at Digg, and I have learned on other projects being worked on, is taking a really deep breath. People will immediately ask for feedback on something, the minute you launch it

Paul: Yeah.

Daniel: They will ask for change. So don't make a change for the first week, unless they point out obviously drastic problems that you didn't anticipate. Take a deep breath. Let people give their feedback. Let them get some experience with the change because people are adverse to change generally. Their first reaction is going to be, Well I was familiar with it the other way, now it is different and I don't feel comfortable with that. And so, you will get a lot of feedback in that regard. And then carefully go through and filter and look for themes of feedback from different people. Try to determine why they were giving that feedback. And then iterate from there. I think that iterative process is so important.

Paul: One of the things that I think everyone has noticed recently about Digg, is that you released this iPhone interface. Everybody is going on about the iPhone endlessly and I am hugely jealous that we don't have it over here in the UK. And so, I am obviously bitter and twisted about it.

Daniel: [laughs]

Paul: But, putting that aside there is this plethora of iPhone applications coming out and Digg is one of the people who have done it. Were you involved in that putting it together?

Daniel: Yeah, absolutely. Joe, who is one of our developers, kind of came over and he was talking about it and was thinking it would be a great idea. And we both kind of got excited and pumped the whole thing out over our weekends.

Paul: Ahhh.

Daniel: Big props to Joe Hewett, who is not the Joe who works here, but Joe Hewett has made this great framework basically to start developing for iPhone applications in Safari.

Paul: Ahhh.

Daniel: He actually released a prototype of it on Friday afternoon. I think? And we started off from there and started developing. That is what does the sliding effects in our interface.

Paul: Okay.

Daniel: And we kind of took what he had done and I think we launched on a Tuesday the next week and on Wednesday Joe had already refined it and made into a kind of framework more people could use. So it was very useful to us.

Paul: So how do you feel about that, because that is a very different interface to be developing? It is much more controlled. You know the browser you are aimed at. You know the screen size. Was it a pleasant experience?

Daniel: Oh, absolutely. It was really really fun. I mean, there were a few things that were really fun about it. One, you are absolutely in that controlled environment. I mean people aren't resizing there fonts. You have a controlled number of fonts. You know the resolution. You can accommodate for when you flip the screen and it goes to wide-mode. And plus you are working with a rendering engine that doesn't suck.

Paul: [laughs]

Daniel: So it is really fun. [laughs] I mean you can even use advanced Webkit only type rounded corners and all kinds of fun stuff like that so, that part of it is really liberating. I can just imagine if all web design was like that. You know if all browsers were actually as standards compliant as they think they are. So that was fun. But, I think the most interesting thing is that you're working with an input device that is this big-fat-honking finger. And so, everything you do you have to be thinking about that. I think it will be interesting to see who succeeds at developing applications like that. But, you really have to think about pairing things down.

Paul: Yeah.

Daniel: When you are clicking with a finger there is no way you can have four or five buttons in a row and expect the person to be able to pick one out when they are sitting on a bouncing bus, with this phone in their hand. And so, buttons have to be really big. The Digg button on the source pages for instance is about two and a half times bigger than one on the normal site. And the links, we considered two different links. One to go to the source and one to go to what we call the Permalink page, the story page, of that particular item. But you know, even having just two buttons per story was much too difficult on the iPhone so we just have one you just can't miss which is a big finger button and it slides over and you get the story.

Paul: Yeah. Do you think you will be doing kind of more with Digg where you are kind of delivering the content, through other various mechanisms; such as the iPhone? I mean, could you imagine doing stuff with desktop applications like using AIR or anything else? Is that an area that you think you would get into?

Daniel: I think the really exciting thing is that we are finally getting a proper API out there. And so, I guess we launched the API maybe two or three months ago. Maybe longer than that, I forget, but I think it will be really interesting to see you know if a desktop experience of dig is really valuable somebody is going to pick up that project and go with it.

Paul: Sure.

Daniel: And they'll develop it on the API. So, I'm not sure if explicitly if a desktop application will be great, but I could see it having certain benefits and maybe toying around with the idea ñ for sure.

Paul: Is there something personally you are interested in as a web designer doing, you know, it's a different medium again isn't it? You're going from a browser based environment to a desktop environment. Is that something that interests you personally?

Daniel: Oh, absolutely. I think it is interesting that those lines are really blurring. I mean, AIRs is that first salvo, in that regard, you really are to a large degree developing a web application. You can develop it in HTML and CSS with basically the same skills it takes to make an iPhone application, or a basic website, you can build an AIR app. That is pretty exciting. I think that once that platform matures, it could open up a whole range of things.

Paul: From a personal perspective, what is the area of your job that you most enjoy?

Daniel: I really enjoy trying to make things easy for people. Sometimes is really irks me if Kevin describes my job as making things pretty.

Paul: [laughs]

Daniel: I think it is such a minor part of design. You know it is an interesting one. But I think sitting down trying to determine, when you are looking at a fairly complex system you are trying to build, and trying to figure out how to not be complex. What to takeaway, how to design something so that it feels simple by putting the really important things upfront. And throwing it by some users and watching them how they do it. I think it is really exciting to see somebody participate in something that is under the hood really complex, but which they have fun and they feel that they are participating. And they do not put a lot of thought into what they are doing, they are trying to achieve what they came to do.

Paul: What about the fact that you kind of have been working on Digg for a prolonged period of time and it is that one site you have been working on continually? I guess because I work for a web design agency where I have a series of clients back-to-back and I am doing different things the whole time. Sometimes it strikes me that we're working on a project for a prolonged time is both a blessing and a curse. I just kind of wondered, what you think? Do you really enjoy being able to spend time digging into that one area?

Daniel: That is a very interesting point, because I also come from the web design company background where I basically would do a different project every month. And until December I was still fairly heavily involved in the day-to-day affairs of my previous company, so it has been a reasonably new experience for me

Paul: Oh I didn't know that.

Daniel: To be working solely on one site, with Pounce on the side. [laughs]

Paul: Yeah. [laughs]

Daniel: Another site I have been working on. So this is really very interesting. Absolutely, there are so many things fantastic about it. It is really fun to be able to go into great detail and have the time to go back into something you designed previously, and to alter it. It is not necessarily that you made a mistake, but a month later you suddenly realize that a big improvement to that would be if I did X. And so you actually have the opportunity to go back and do those kinds of things. Where as I am sure, if you were working with a client, it has happened before that you know six months later you see something you say it is obvious to me now but it is kind of out of your control. The contract is over. You know

Paul: Yeah

Daniel: They're working with a different firm. There are all kinds of things like that. And so, working on something as big as Digg it is really fun too. Within Digg there are lots of different projects. There are different pages. There are new things we are working on. And so you kind of I guess segment them into kind of different projects you can go around in a circle and come back to later on.

Paul: Do you ever envision a day where you throw out the existing user interface and apply a new one? Or do you think it will always be a kind of evolving iterative process?

Daniel: Oh, I think an iterative process for sure.

Paul: Yeah.

Daniel: I don't want to second guess what is possible in the future. We may have some brilliant idea or new technology that blows our minds. But, I think there is no reason to throw out something that is working pretty well. I think there is a kind a rush sometimes to you know, to start from scratch that real desire to start from scratch sometimes. But something like Digg, I mean it has changed fairly significantly over the last two years, but I don't know if too many people notice

Paul: Yeah.

Daniel: Other than a few big pushes we made, that things had changed much. I think that is really healthy that people become familiar with systems. They learn how to interact with them. And to really shake them up, you really better have a damn good reason to do it.

Paul: Yeah. Okay so last question then before we finish up. Is there any stuff that you are working on with Digg that you are allowed to talk about [laughs] because obviously there are things you are not allowed to talk about.

Daniel: Right.

Paul: But the stuff that you are allowed to talk about, what is really exciting you and what are you really enjoying getting into at the moment?

Daniel: Oh, there is a bunch of things. I think I am allowed to talk about that Kevin mentioned the other day that we are working on the images section.

Paul: Cool.

Daniel: So we are going to do right now you can do news and videos. And we are pretty confident we are going to get into images as well. And so we are working on a couple of projects to kind of lay the framework for doing that. So, some people think it is as easy as adding a section

Paul: Yeah.

Daniel: And putting a title on it. But if we want to do that, we want to do it the right way. And lay the ground work first. I am working a couple of things I cannot go into great detail unfortunately there so much secrecy here that we can't

Paul: [laughs]

Daniel: Layout too much of what we are up to. But, I am really excited that we are headed in this direction.

Paul: Yeah. The trouble is that you guys get ripped off so quickly, don't you, that you need to keep things quite.

Daniel: Well. I think it is a combination of problems. One is that we are obviously concerned with people duplicating our features and the other one is that we want to be careful setting expectations. Because if we say we are going to do something, we really want to do it.

Paul: Yeah.

Daniel: And I think people will get disappointed if we say, In two months we are going to launch such-and-such. and you know lot's of stuff happens in two months. And unfortunately if that had to get pushed back, and that two months was a totally random date that I pulled out of my head

Paul: [laughs]

Daniel: [laughs]

Paul: See know, we all believe that it is all going to happen in two months.

Daniel: Shoot! [laughs]

Paul: [laughs]

Daniel: [laughs] People will be disappointed or they will feel like we haven't lived up to their expectations I suppose.

Paul: Yeah. Okay. Well that was really great. Thank you very much for coming on the show Daniel. No doubt we will try and crowbar you again in the future to come and talk to us about Pounce as well. Because that is an exciting project.

Daniel: That would be fun.

Paul: Okay thank you very much for your time and talk to you again soon.

Daniel: Thanks so much for having me.

Paul’s corner: Quick and dirty competitive analysis

Great stuff from Daniel! It was really fun to speak to him even though I managed to offend him after we stopped recording by calling him an American (he is Canadian). Hopefully he will forgive me for the ultimate crime!

Okay, so before I wrap up today’s show lets take a quick look at the subject of competitive analysis. Its actually a segment I have just written for the book I am working on and so I thought I would share what I have covered. The idea is not to make you an expert in the field but simply to allow you to extract as much information as possible from your competitions websites in a quick and easy manner.

As always I have written this up as a blog post entitled “Quick and dirty competitive analysis” so check that out in the show notes if you want to see exactly what I covered.

No show next week

So that is about it for this week’s show. Remember that there will be no show next week as I am going away on holiday too! Yippee! However, if you need your boagworld fix don’t forget you can check out the forum and chat with other people about the poor quality of Marcus’ jokes.

Show 89: 404

Posted in Classic shows on August 7, 2007 by Paul Boag

On this week’s show: Paul talks about creating the perfect 404 page, Marcus covers some of the basics of rich media and Aral Balkan makes working with databases and APIs a whole lot easier in flash.

Download this show.

Launch our podcast player

Before we dive into today’s show I have a small request from you our loyal fans *cough*. As you may have noticed the show notes we produce for this podcast are a lot more comprehensive than once they were. They are almost a complete transcript, which is important to us because we want the show to be as accessible as possible. I have been contacted by a number of deaf users who are frustrated because they cannot access the show and to be honest I sympathize. We have done our best to produce a complete script but we are getting hung up on the expert section. I just do not have the time to go through and reproduce everything say. An alternative would be to use a service like Casting Words but to be frank I am not confident on the quality we would get back. I was therefore wondering if any of you would like to volunteer? I know a number of people have offered to transcribe in the past but quickly became overwhelmed with the amount of work involved. However, transcribing just this section of the show (typically about 10 minutes) shouldn’t be too bad. Hopefully if we can put a rota together it should be too big a job and best of all you would get to listen to the expert sections in advance :)

So, if you can spare the time drop me a line.

News and events

Writing for the web

First up this week is the fact that the latest issue of A List Apart is entirely dedicated to the subject of writing for the web. There are two great articles both of which are definitely worth reading. The first post takes the idea of personas and suggests that your website too should have a persona. What tone of voice should your website have? What character should it project? The second article (and my personal favorite of the two) is a passionate defense of good writing on the web. It fights hard against the attitude that web copy should be kept to a minimum arguing instead that if the content is web written it draws the user in and engages with them in the same way good design can.

Both articles are excellent and has made me reconsider the importance of good copy. It is an area I am constantly frustrated by and just wish I could get my clients to pay for a copywriter to really bring their sites alive.

Microformats in Google Maps

Next up is a really exciting announcement by Google. It would appear that Google Maps now supports Microformats. I can hear your cries of disappointment… thats not that exciting! Well, I think it is. This is a huge boost for the Microformats community and puts literally millions more hcards out there. Not only will this raise the awareness of Microformats but I also think it will lead to some interesting mashups using the massive database of businesses that are displayed on Google Maps.

If you are yet to play with Microformats or haven’t gotten around to adding them to your website then now is the time. They are quick and easy to implement and oh so very cool ;)

There has been a lot written about Microformats but it is nice to see big players picking it up and running with it. Good stuff.

Corporate Web Standards

What you don’t see a lot written about anymore is web standards. Its almost as if all of the arguments have been made. However, I did come across an article this week that convinced me there was more to cover. It was a discussion about implementing web standards in a large corporate environment where you are weighed down under legacy pages and internal politics.

It was a refreshing article because it was so pragmatic. Much of what you read about standards is bordering on fanatical. This article was much more down to earth accepting that you cannot implement the perfect solution especially within a large corporate environment. It talked about little steps and something being better than nothing.

If you work in a large organisation then this is definitely worth reading. You will find it very encouraging.

Web Design advice

Last up is a couple of websites I have stumbled across this last week. Both of them are provide general web design advice and I have to say both look very impressive. The first was sent to me by Charles Russell who recommended it as an alternative to “The Principles of Beautiful Web Design“. I am not sure it is an alternative personally but it is certainly an interesting website. It is called Web Design from Scratch and does exactly what it says on the tin. It literally covers every aspect of web design providing basic advice and then referring you on elsewhere. Ideal for the beginners.

The other site I wanted to mention is the Web Designers Wall which I believe has only just launched. It seems to be filled with all kinds of nice goodies including tutorials, code snippets, commentary, inspiration and more. What is more the site design is beautiful. I have a feeling that this site is only going to improve with age.

Marcus’ bit: Rich media

Multimedia doesn’t really mean that much anymore I think. It used to refer to CD-Rom type content but now I think it refers to any web content that isn’t just plain old text and images.

I have been pricing up some new/interesting/dynamic content for one of our clients and it struck me that I haven’t discussed this sort of thing here before. I guess there isn’t a great deal of point to this other than ‘have you thought of doing…’, so here goes…

Animated shortcut banners

These seem to be all the rage at the moment. Usually quite a large portion of the homepage is dedicated to a rolling carousel of messages or adverts for content deeper in a site. There will usually be 3 or 4 different ads that flow from one to another. Manual controls are also available to go straight to a particular shortcut or pause on an ad.

There’s a good example at Wildfowl and Wetlands Trust.

Video

I don’t really mean just plain video; I’m referring to a piece we did for the Surrey Hills AONB that incorporated:

Still shots
Video footage
Voiceover

All of which were pulled together to create a tourism video that can be downloaded at Surrey Hills.

The voiceover, incidentally, was done by Surrey Hills patron and famous british actress, Penelope Keith. Going to her rather grand house to record the session was a great experience.

Voiceover

Which brings me nicely on the subject of voiceover. I have two rules relating to voiceover recording:

ALWAYS use a professional actor. The girl in the office with the ‘nice’ voice will sound rubbish, so will the ‘posh’ guy in accounts (we know, we’ve done it!). Voiceover actors aren’t that expensive and, because they’re professional they’re quick. I have used Voicebookers in the past and they have been superb.

Less important but… use a proper voiceover recording studio. I have used studios in London that are really very reasonable and the quality is superb. Though of course this isn’t always possible as with Penelope Keith (recorded my laptop).

Panoramic imagery

We have done a few external 360 degree images, again for Surrey Hills and some for National Trails. We haven’t used dedicated equipment that take full spherical shots basically because you end up with an unnecessary amount of sky. I have simply used a decent camera and tripod and done two full sweeps of portrait images (roughly one just below the horizon, the other just above), moving the camera about 10 degrees each time.

The ‘fun’ part with these images is that they are usually taken from high vantage points so expect to have to do a lot of climbing to out of the way places!

There is a compromise to be made with panoramics. The best time to take a good landscape photo is early in the morning or just before sunset. However, for a panoramic that doesn’t work because you will have the sun in view for a large chunk of the image. This is one of the reasons why panoramic images can often look a little ‘flat’.

Dynamic screensaver

This is quite a cool idea where the standard screensaver idea (pretty pictures rolling from one to the next) is enhanced to allow the client to update information to it. Basically, when the screensaver fires up (as long as it connected to the internet) it checks with the client’s site to see if any changes have been made and automatically updates if there has. This is really handy for news stories but could be used for anything.

Mapping

I think I have discussed mapping previously because it is something Headscape has done a lot of in the past. Up until recently we tended to develop maps using Flash where points of interest are dynamically generated using grid references. We also added features such as layering of different categories.

However, recently we have developed a site for River Thames that utilises Google Maps. The site’s main purpose is to promote the River and encourage people to visit. Again, we have used Google Maps to show points of interest such as places to eat, places to stay etc that are controllable in layers. Using GM is very cool though because the points shown alter when the maps are dragged and/or zoomed (apparently lots of brain power went into making this work!).

Finally, we also created a trip planner or itinerary builder that gives site users the opportunity to list all the places they want to visit (inc. contact details, address, directions etc) and print this off in a print friendly design or email to a friend.

Paul’s corner: Handling missing pages

I noticed this last week that I have been getting a lot of traffic from the Smashing Magazine and so I went to check out where it was coming from. Turns out it was an article on 404 error pages and they had used my error page as an example. The article also referenced another site called the 404 Research Lab that provides lots of good information on setting up custom error pages. All of this reminded me I wrote a blog post ages ago about handling missing pages and yet for some reason i have never spoken about it on the show before. Seems strange because it is a subject we all need to deal with. So, I thought it was time I covered the subject properly using my old blog post as the basis.

Review: Aral Balkan on SWX

Paul Boag: OK, so joining me today is Aral Balkan. Hello! How are you?

Aral Balkan: I’m fine, Paul. How are you doing?

Paul: Not too bad. I feel like I’m speaking to you quite a lot recently, one way or the other.

Aral: [laughs] I know, but it’s fun, huh?

Paul: So I was explaining to everybody earlier in the show how we got you into Headscape to give us a little bit of training and kind of bring us up to speed with what was going on with Flash.

Aral: Yeah, that was a lot of fun, too.

Paul: You had a good day, did you? It wasn’t too painful then.

Aral: Yeah. Me and my bunny had a good day. [laughs]

Paul: Yeah, that was deeply disturbing, on so many levels.

Aral: [laughs]

Paul: But I think we’ll just leave it at that. We won’t tell people any more details on that. We’ll just leave them worrying about it. [laughs]

Aral: OK, let’s do that. [laughs]

Paul: So, as part of that day, you mentioned SWX, which is something that you’ve been involved in developing. And it sounded so cool and kind of dragged my attention back when there were points where I was thinking that this is beginning to get a bit out of depth to me.

Aral: [laughs]

Paul: There were techie people in the room that understood what was going on.

Aral: Yeah.

Paul: But then you started talking about SWX, and I started to think, “Ooh, that sounds cool” so I thought I’d get you on the show and ask you a little bit about it.

Aral: That’s great. That’s great, because SWX is what I’m most excited about these days.

Paul: Good stuff. So, do you want to kick us off by telling us a little bit about what SWX is?

Aral: Well, SWX is a couple of things. SWX itself is a new data format for Flash. It’s actually the native data format for Flash, which is kind of weird, because Flash has been around for a while, so why hasn’t it had a native data format until this point? I don’t know. Nobody else did it, so at the end; I was like, “OK. Well, I guess I have to bite the bullet here.”

And when I say native data format, if you’re not very fluent with Flash, think about JSON, or what JSON is for JavaScript. But it’s actually a step beyond that, because, with JSON, you still either have to parse it, or in JavaScript you have to evaluate it, before you can use it. So there’s another step before you can use it, after the data’s loaded.

In SWX, there isn’t. It uses SWF files, which are native Flash files, to store data, so it makes it very easy to work with.

Paul: What’s the kind of target audience for this? Who do you see as using it?

Aral: There are a couple. So, anyone right now who’s working with Flash basically can use this to build mash-ups, to build data-driven Flash applications. And also, mobile developers who are developing with Flash Lite can use SWX to develop mobile Flash applications.

And in fact, that’s where it’s currently, I think, most useful, because with SWX RPC–which is the remote procedure call, the gateway for it–you can make remote procedure calls, so call back-end services and methods, through SWX. And it’s the only RPC solution, really, because Flash Remoting doesn’t work on Flash mobile, on Flash Lite, so it’s the only RPC solution for mobile right now.

Paul: I think what kind of struck me about it was the fact that there are a lot of people out there that maybe have been doing some superficial stuff with Flash…

Aral: Yeah.

Paul: And have been doing some ActionScript and things like that.

Aral: Right.

Paul: But when it gets to things like making data calls, it all seems to get horribly complicated, all of a sudden.

Aral: It does. It gets very hairy, and I don’t know why. I think part of it is because the back-end, the server side, of applications has traditionally been the realm of traditional programmers: the brainiacs, the people who are very comfortable talking in code, thinking in code.

And they’re not always the best people, I find, to simplify concepts, because they’re so intelligent, they can understand all of this, or they have such a focus on this that they don’t mind spending hours trying to set something up. Sometimes, they’re not always the best people to create simpler systems for mere mortals like the rest of us.

Paul: [laughs]

Aral: So that was my main motivation behind it, because I think Flash is great for building mash-ups and data-driven applications. But we don’t get as much experimentation in Flash with that, and I think it’s because it’s too hard. The barrier of entry is too high. You have to jump through so many hoops to get even something basic working, whereas it should just be, off the bat, you should be able to get started with things. And that’s been my focus with SWX.

So, for example, on the Mac, there’s a bundle that you can download that gives you everything you need to start using SWX, with a one-click installer, a disk image.

Paul: Cool.

Aral: My focus, really, with SWX is on simplicity. And when I say simplicity, I mean for the whole process, from the moment you go on the website and download SWX, to the moment you can get up and running. I’m trying to make that whole process as easy as possible, basically.

Paul: From what you showed me when you came into Headscape…

Aral: Yeah.

Paul: Basically, within a few minutes, you can kind of download this bundle onto my Mac. I can run an install file, which sets everything up for me.

Aral: Yeah.

Paul: And you’ve even set up…

Aral: Well, you basically get a development server for free.

Paul: Yeah.

Aral: It uses the MAMP Bundle, which is a great bundle that has Apache, PHP, MySQL. So if you’ve ever been afraid to work with these things, that’s also a way to get started, because there they are on your machine, running, without any configuration or anything on your part.

Paul: And you have also included some kind of interfaces to common APIs, things like Flickr and Twitter and stuff.

Aral: Yes, and in fact, if you remember the installation process and everything that you were talking about, you don’t even have to download and install SWX to start working with the pre-existing APIs that come with it, because I host an instance of the SWX gateway on swxformat.org. It’s the public SWX gateway that you can just hit directly from your Flash applications.

Paul: Ah!

Aral: So if you don’t want to mess with the back-end, but say you want to build a mash-up that uses Flickr or Twitter, currently two of the main APIs that I have on there, you don’t even have to download SWX. You can just open up Flash, write four or five lines of code, and get, for example, the list of your latest photos from Flickr.

Paul: Cool.

Aral: Or your friends’ photos. With nothing else. So you don’t even have to download anything to start working with SWX, because it is native. What you’re getting from the back-end, from that SWX gateway, is a SWF, and Flash knows how to deal with that, and the data in there is a native Flash object and ready for you to use the moment it loads.

Paul: So, how does somebody get started on this? Where do they go? What do they have to do? Especially, you made it sound very simple for the Mac. Is it horribly complicated if you’re a Windows user?

Aral: Oh, not at all, not at all. Like I said, regardless or what platform you’re on, unless you want to build your own server-side services, if you want to use the APIs that it comes with, you don’t even have to download it, actually.

Paul: Oh, OK.

Aral: In fact, just last week, I got moo cards printed. And these little moo cards have all the code you need on the back of them, because there’s only about four lines of text you can put on the back.

Paul: [laughs]

Aral: But they have all the code you need to get the latest public timeline updates from Twitter. So it’s actually, seriously, four lines of code, and it fits on a moo card.

Paul: Wow!

Aral: So, to get started, you don’t have to do anything, really, apart from open up Flash, write four lines of code, and see it run and get the feeling that, “Wow, maybe I can build data-driven applications in Flash, too, because this is simple.”

The next step would be to download SWX onto your own machine. If you have a development server already, if you have a web server with PHP, then you just download the ZIP file, unzip it into your web root, and hit that location in the browser, and the start page comes up and guides you through the rest of it.

Paul: Cool.

Aral: If you’re on a Mac, get the MAMP Bundle, and that’ll get you started even faster. But, like I said, you don’t even need to download anything to start playing with it.

Paul: So these four lines of code to get you going…

Aral: Yeah.

Paul: If they don’t have one of your precious mood cards, where can they go to learn those kind of basics?

Aral: Well, on swxformat.org, there is a screencast right now. It runs you through the MAMP Bundle, but the concepts are exactly the same for all of the rest.

Paul: OK.

Aral: Although, I am going to record a few more screencasts. I’ve started putting them up on Viddler, which is actually really cool. I don’t know if you’re used it.

Paul: Yeah, I have.

Aral: But it’s really great for screencasts, because it keeps the original resolution of your movie. So I’m going to record quite a few more and put them up there, including one that will just get you started, like the moo card does.

Paul: Cool.

Aral: So, look on swxformat.org. And also, look on my blog, because I blog about SWX quite often there: it is aralbalkan.com.

Paul: So as I understand it, at the moment, this is all built on PHP and MySQL. Is that going to change? Are we going to see other platforms supporting this, too?

Aral: Well, basically, the SWX format itself is a data format, so it’s platform-agnostic, in terms of the back-end, etcetera. So if you have a SWX SWF, you’ll be able to load that. Even if it’s offline, if you have if on your hard drive, you’ll be able to load it into Flash and get the data off of it.

Paul: Excellent.

Aral: And then there’s SWX RPC, which is an implementation of a gateway, basically, or an endpoint, that serves SWX SWFs. And the current implementation of that is only in PHP.

Paul: Right.

Aral: So, it will be ported later on. It’s currently in beta. And once we get closer to the release date and certain things are standardized, I’m going to be concentrating on orchestrating the ports. There’s a lot of interest from quite a few people to port it to Ruby, to J2EE, to.NET.

Paul: Excellent.

Aral: And my focus right now is on getting SWX to a level where it’s somewhat of a standard–not like an Internet standard, but at least, within itself, we know what we’re talking about when we say a SWX SWF so that, if it’s being generated from Ruby, it’s the same thing…

Paul: Yeah.

Aral: So there’s no fragmentation. That’s my focus right now. In fact, I’m writing my first RFC…

Paul: [laughs]

Aral: For the SWX formats, just so things are a bit more standardized, before we go porting it to every possible technology.

Paul: Excellent! That just sounds really exciting…

Aral: I’m really excited about it!

Paul: Yeah, I bet you are.

Aral: This has gotten me excited and working with technology again, at a level that I hadn’t been in the past. It’s fun. Because this stuff, the data exchange between tiers, it’s really not rocket science, and it shouldn’t be rocket science. We’re just moving stuff from one place to another. And my philosophy is: make that as simple as possible for people so they can concentrate on the really fun bits…

Paul: Yeah.

Aral: Building the user interface, building a great user experience. Because those are the hardest bits, really, conceptually, and they’re also the most fun.

Paul: Yeah. That’s great stuff, and I wish you all the best with it in the future. And thanks for coming on the show and telling us a little bit about it.

Aral: Thanks so much, Paul, for having me. It was a lot of fun.

Paul: Yeah. OK. Good to talk to you, and we’ll speak to you again soon.

Aral: OK, take care of yourself.

Show 86: Boagworld Book

Posted in Classic shows on July 10, 2007 by Paul Boag

On this week’s show: Paul talks about taking a brand online, Marcus gives some advice about reviewing your information architecture and Ian Lloyd introduces us to the challenges of designing for screen readers.

Podcast: Download (44.6MB)

Download this show.

Launch our podcast player

Paul’s personal news

Just a bit of personal news before I get into the industry related stories. I want to let everybody know I have signed a contract to write a book. The book is going to be primarily for website owners rather than web designers, however to be honest I think it could appeal equally to both. I intend to look at what “client’s need to know about building and running a website” so hopefully it should show by example how best to communicate and work with clients.

The most exciting thing about this book from my point of view, is the fact that I want to write it as a collaborative process with you the boagworld community. I am going to release chapters for you to see in advance of publication and also blog on various aspects of what I am writing. I really want to encourage you to share your thoughts and make suggestions as we go along through comments and the forum. I have already set up a forum thread dedicated to book ideas as well as an initial blog post on the book.

Obviously writing a book is a really slow process, but hopefully it is something that we can all get excited about.

News and events

Building for the iphone

Unsurprisingly there is a lot of information appearing relating to building web applications for the iphone. There is an iphone gallery consisting of hundreds of screenshots of the iphone. This is great if you want to mirror the look and feel of the iphone as closely as possible. There is also the iphone developers guide from Apple which provides loads of great advice. Finally there is iphoney, a piece of software that replicates some of the iphone’s web browsing functionality and lets you see what your application will finally look like.

Of course whether it is worth developing for the iphone at this stage is another matter. I guess if you are trying to reach the tech-savy audience who are iphone owners then maybe. Otherwise it might be better to wait until the iphone becomes more mainstream or other phones start offering the same level of web experience.

@media podcast

I was gutted to miss @media this year. Well, I say gutted, I was actually on a really pleasant family holiday, so I cant complain. However, I did miss a great line up of speakers talking about some amazing subjects. I was particularly depressed to have missed Jesse James Garrett’s keynote on “Beyond AJAX” and “Diabolical Design: The Devil is in the Details” by Jason Santa Maria.

Fortunately the recordings of the @media sessions are beginning to filter out for me to download and listen to. However, note that I don’t call them a podcast. There is no feed that I can find which is extremely frustrating.

Setting that little moan aside, it is great to be able to listen to these speakers even though I did not attend the conference and I would strongly encourage you to download and listen to a few yourselves.

Common mistakes in web copy

Although we would prefer to avoid it, the reality is that as web designers we write far more copy than we would like to admit. As for those of us who are website owners, a substantial part of our responsibility is writing good web copy.

We have talked on the show before about writing good copy but our focus has mainly been on style rather than technical detail. This week, I came across a post about common grammatical mistakes. However what I liked about this post is that it wasn’t focusing on the silly details of grammar that don’t really apply particularly well to the conversational tone of the web. Instead it looked at errors such as when to use “me, myself or I” and the difference between “i.e. and e.g”.

If you ever have to write copy then spend a few minutes to check it out. It only covers the worse offenders so doesn’t take long to read.

A department dedicated to the web

Jeffrey Zeldman has written a post entitled “let there be web divisions“. If you are responsible for deciding who should manage your corporate website then you simply must read this. If you are a mere foot solider then it might not be as relevant but it is still a good read.

Basically Jeffrey proposes that a company website should not sit under IT or marketing (as is traditional) but should be a division in its own right. I am not going to repeat all of Zeldman’s logic, but I have to say I wholeheartedly agree with it.

Websites are simply too multi disciplined to sit comfortably under either department and too important to be caught in an endless tug-of-war.

Paul’s corner: Taking a brand online

About a week ago, I had to give a presentation to a board of directors ,explaining the process we went through to develop a new design for their website. A large proportion of that presentation focused on the issue of brand identity. This organisation had a very well developed style guide and we spent a lot of time and effort getting that guide to work online. My presentation talked about the various steps involved and it occurred to me this might make an interesting podcast section.

I have also put together a blog post on the subject of “taking a brand online” and it is this that I cover on the show.

Marcus’ bit: Information architecture review

I am currently in the process of carrying out an information architecture review for a new Headscape client. I have done a fair amount of IA work over the years but I have found myself particularly enjoying this one so I thought I’d waffle on about what I’ve been doing.

We have covered the various aspects of IA work in previous podcasts – Expert Review, Stakeholder Interviews, Card Sorting and Wire Frame testing. This section is looking at the first of these, expert review, in a bit more detail.

I think it’s worth explaining what I mean by Expert Review. When we carry out an Expert Review we are effectively analysing a client’s existing site content, site structure and naming conventions with a view to creating a new IA based on our experience of using and developing websites. This is a collaborative process with the client – it has to be; we can make logical, usability based decisions but cannot claim to be experts in the client’s particular field.

First things first

I make sure that I have a good grasp of a number of things prior to carrying out an IA review. At the kick off meeting make sure the following are covered:

Target audience – this is crucial for the development of the IA. It may be that the existing site caters for one group well but another poorly.
Site aims – is there a stepped process that the client wants their users to go through.
Design – things like horizontal over vertical navigation can affect the IA.
Homepage requirements – find out what the killer apps and content are as these will need to be linked to from the homepage.
Finally, have a general discussion about content and site structure. See what the client thinks is important and what’s not.

Map out the existing site

The first thing I do is map out the existing site’s IA. This is a fairly slow and laborious task but it is the best way to not only learn about a site’s content and structure but also to understand what they do and what they offer.

Be logical, captain

Usually, the goal of this type of exercise is to streamline content into groups and name those groups so that users will understand what’s inside them.

Site’s that have grown organically over a period of time tend to spread content all over the place. It is usually fairly easy, though time consuming, to group content together. There are various methods for doing this; I tend to print out the existing site IA (that I usually create in Excel unless it’s a particularly small site, then I might use Visio) and scribble all over the printout until I’m getting somewhere. Some people like to use cloud/cluster diagrams (either on paper or using software) or there is always the age old method of creating ‘cards’ where each page name is written onto a scrap of paper. This is a bit like doing card sorting on your own where you group the cards into piles and give names to each pile.

Naming

We come from the ‘it does exactly what it says on the tin’ school of page/section naming. Marketing departments often don’t! A good example of this is the trend to verbs as section names over nouns. I remember one client wanting to call a site section ‘Enjoy’ when the section covered ‘Leisure Activities’. No prizes for guessing what we recommended!

Labels should be as descriptive as possible. Sometimes this can be difficult when:

there isn’t much space, for example, ‘How to register for our newsletter’ won’t fit on the average button, even ‘Newsletter Registration’ would probably be too much for a top level, so I would go for just ‘Newsletter’. It’s fairly obvious that the content underneath will relate to the organisation’s newsletter and should logically include registration, whereas ‘Register’ leaves the user asking ‘register for what?’
Sometimes sites are so big that main sections can include too much differing content to be labelled descriptively. In this case, I would recommend either shortcuts on the homepage replicating the main sections that include descriptive words or create drop down navigation that displays the lower level links.

Section ordering

This should follow some sort of desired path through the site. For example, the client may want users to get a bit of background, followed by an understanding of what the organisation offers, followed by some examples of previous work with a view to finally making contact. This would translate to:

About Us | Services | Case Studies | Contact Us

Conventions

Users don’t want to have to think (that sounds familiar!); they want to look and understand straight away. Following conventions helps with this process. For example, many sites include an About Us section as the first main section. This usually includes some history, annual reports, job vacancies and contact details. Users looking for this type of information don’t want to have guess that this information might be under, for example, ‘Company Background’ which is located at the far right of a horizontal navigation.

Collaborate – to a point

When you have created your first draft it then needs to be reviewed by the client, discussed and iterated until everyone is happy. Take on board any changes that are based on your lack of understanding of what the client does but be prepared to stand your ground on issues relating to web conventions and usability – after all, they’re paying for your expertise.

Ask an expert: Ian Lloyd on screen readers

On this week’s show we have Ian Lloyd giving us an introduction to the world of screen readers. I vividly remember the first time I heard a screen reader being used. I was gob-smacked by how painful an experience it was and I am still amazed that anybody manages to use them effectively.

It struck me that many of you listening to this show might not have heard a screen reader before. Hearing what blind people have to work with really makes you take their needs seriously and so I thought I would get Ian on the show to give you a taster.

In his segment, Ian takes us through some classic problems that screen reader users experience. Unfortunately to best understand what is going on in some of the examples you need to see what he is doing. In order to get around this problem Ian has made a screencast to accompany the audio. There was too much detail to make it available online or via your video pod but you can download the screen reader .mov file here.

What follows is a transcript of Ian’s section of the show…

Hello Paul, Hello Marcus and hello to listeners of Boagworld. This is the ‘Ask the Expert’ section and today I’m going to be talking about screen readers.

Now, I don’t actually qualify [meant to say classify!] myself as an expert screen reader user simply because I don;t use one on a day-to-day basis, because I’m not forced to; I do have good vision. As such, the way that I would use a screen reader would be different from someone who has to use it on a day-to-day basis. That said, I still think it’s useful to demonstrate to people what a screen reader sounds like. And the reason for this is that as far as I am aware on your podcast although you’ve talked about accessibility a lot and mentioned screen readers I don’t believe we’ve ever had a demonstration of what they actually are like for people when pages are built incorrectly.

So, today I’m going to be showing a few problems using a screen reader. I’m also going to be doing this as a video, so this is a screencast. I understand that at the end of this you will be providing a URL for listeners so that they can access this and view what’s happening on screen. Because of course it’s all well and good to listen to this stuff but to get the full context it would be good to actually see the video as well. I will try my best to describe what’s happening on screen throughout this podcast though.

Now the first example we’re going to look at is Amazon dot com. And somewhat cheekily I’ve brought up the page for my own book on Amazon. And, er, just having a look around at what I can find on the screen and there are some issues there. So, let’s have a look at this.

[Screen reader reads out page graphic correctly 'Build your own website the right way using HTML and CSS, Link graphic']

Oh, so that’s not too bad. I’ve just found an image there and it’s announced it correctly because it’s found a suitable alt attribute but underneath there are a couple of thumbnail images which, if I want to access those, it gives me a whole different … well, hear for yourself:

[Screen reader announces: 'See larger image, Link' then moves to next link, the thumbnail image and reads an unintelligible string of characters - numbers letters and underscores - out to the listener].

Mmm, doesn’t make an awful lot of sense does it? Let’s try the next image:

[Screen reader reads out more unintelligible characters and takes almost 8 seconds to read it out]

So, what’s happening there? Well, it’s quite simple: there’s no alt attribute defined for that image and so JAWS tries to fill in the gap and, er … oh I didn’t mention earlier that JAWS is the name of the screen reader that I’m using. So it tries to fill in the gaps because it doesn’t have an alt attribute it uses the file name instead and the filename, as is often the case on Amazon, is a right load of old gobbledegook! So it doesn’t give it any useful information about that image.

Here’s another example of the same thing.

[Screen reader reads out an image gallery as 'thumbs slash zero, thumbs slash one, thumbs slash two' etc]

So this is actually a photo gallery, erm, with a bunch of thumbnail images hence it’s reading ‘thumbs’ because that’s the folder where the thumbnail [image] is actually in and it’s reading them sequentially as well. It doesn’t sound quite as painful as the Amazon example but it still doesn’t tell you any useful information about the images on the page.

[Screen reader announces more examples from the same page]

So let’s listen to a slightly improved version of that:

[Screen reader announces the same images but with appropriate alt attributes, e.g. 'The Mystery Machine, driven by Scooby' for a photo of a camper van that is painted like the Mystery Machine from the cartoon Scooby Doo]

If we were to look at that on the video I’m showing that page with the style sheet disabled and the alt attributes displaying inline next to the image. As you could hear in the second example it was far more usable – you could actually understand what the image was about (as long as you understood some of the VW terminology used in there), whereas in the first example none of the images actually had alt attributes so it was just trying to read out the location of the file.

So let’s look at another example.

[Screen reader announces content of new page 'Page has no links' and then starts reading subsequent page content before I stop it]

What I’m looking at on screen is a page that seems to have a page full of links. But if you were listening carefully to the beginning of that, the screen reader thought otherwise. I’ll just try to find that again for you.

[I scrub back in the video clip to find the part where the screen reader says no links]

According to the screen reader the page doesn’t have any links. And the reason it thinks that is, well, there *aren’t* any links. What’s actually happening … is … we have a whole bunch of text on the page that is styled using CSS and the behaviour for the link is added using JavaScript. So, we have a <span> element that has an onclick event, location.href=’somewhere.html’ and that’s [the span] wrapped around the text that says ‘This is a link – click me’. Um, but of course it’s not a link. The screen reader can’t find it because it’s not an <a href="">, it’s something else that’s been styled to look like a link and behave like a link. But it’s not. Thankfull that’s not too common but you have to just be aware that what may look great on screen for you may not be any use to someone using a screen reader. You have to use the right markup for the job.

So, you could have a page that’s full of links that say ‘click here’ but of course that’s another problem all in itself. Let’s have a listen to that:

[Screen reader reads 'Click here to view' repeatedly as I tab through the links on the page]

Yes, so … the problem there is that it doesn’t give you any information at all. And this is actually still quite common. In fact just yesterday I was looking at Facebook dot com (for my sins) and, er, I was quite shocked to find that they were using a lot of this where the link phrase was ‘click here’ as opposed to the phrase that you would really want to have, so for example instead of saying ‘click here for more information’ and having ‘click here’ as the link phrase you would have ‘for more information about our products’. That would be the link phrase. Erm, but if you just use ‘click here’ and you’ve got a whole page of links that reads ‘click here’ this is what you get:

[Screen reader once again reads 'Click here to view' repeatedly as I tab through the links on the page]

Basically, completely unusable.

Now the next example I have is of a form, and in this example, er, the form has been laid out using a table. Thankfully, these days, tables are being used less for layout and people are using CSS for page layouts. However, for forms it’s still not uncommon to see someone put a table in there. And, er …

[screen reader interrupts as page loads]

OK, so in this example what I’m looking at on screen is what appears to be, um, well … four text inputs, and then there is a radio button and it’s basically asking for some personal information, first name, surname, your age, place of birth and then a question ‘Do you have a nut alergy’, the answers being ‘no’, ‘yes’ or ‘don’t know’. So let’s see what the screen reader makes of this.

[screen reader says 'table with two columns and four rows'. I tab to the first input and it reads 'surname/family name - edit']

Already we’re hitting a problem. Because the first field that I tab to I can see on screen is *actually* [the one for the] the first name . But the screen reader believed that to be the surname.

So I’ve now tabbed to the second field which is the surname and it didn’t announce anything. So let’s tab to the next field:

[screen reader announces field as 'town/city - edit']

Again it’s getting it wrong. I’ve actually tabbed to the field that says ‘Age next birthday’

[tab to the next field, screen reader announces 'tab - edit']

And *now* I’m in the ‘town/city of birth’ field and it hasn’t told me anything.

[screen reader announces 'yes - radio button', then 'don't know', reading the radio button choices]

This is all a bit confusing here. OK, so it’s asking me the question ‘Do I have a nut allergy?’.

[I tab to the next field, screen reader announces 'Yes - radio button - unchecked']

OK, so … that thinks I’m at the yes radio button but I’m looking at it on screen and it says ‘no’. So, what’s going on here? Now this is going to be a difficult one to explain on the podcast; this is one of the sections where you really need to see the video. But what’s actually happening here is we’ve got a table to lay out the page and the text sits above the text input, so for example where we’re asking for first name, the text that says first name is in the first column and the input that relates to that is in a column underneath, sorry, I mean a table cell underneath it in the next table row. Now the reason this is causing a problem is because if you were to actually linearize that table, in other words look at it in the order of the source code you get a very different view of it. And this is what happens with the screen reader. So if I were to look at this form and read it out in a linear fashion, it goes like this:

First Name [text]
Surname [text]
Form input for First name
Form input for Surname
Age [text]
Town/City of birth [text]
Form input for Age
Form input for Town/City of birth

And so on. The problem is that the screen reader expects the text for that input to appear before that input, and because of the way this has been laid out it really really gets things confused. As I said, this is quite a difficult one to explain on the podcast but if you look at the video clip you’ll see why this is causing a problem.

[screen reader blurts a few things out as I try to manipulate it ... poorly]

Sorry about that, that didn’t add anything useful at all. Hopefully Paul can edit that out!

OK, so …. the big problem here is that you may be asking a question as we have here that says ‘Do you have a nut allergy?’ and the answers are ‘no’, ‘yes’ and ‘don’t know’. But if you do put the form elements in the wrong order you’re gonna have a problem. And the reason is obviously that with a nut allergy that could be a life or death situation. You could be filling out a form as a blind user and you select what you think is the ‘yes’ radio button but because the form has been poorly laid out and doesn’t have <label> elements that are actually helping to enforce the accessibility you may actually have been selecting the no checkbox [meant to say radio] and it really could be a life or death situation. It may *not* be as bad as that – it could end up with you booking the wrong hotel location or date. So you have to be very careful with the form layout.

OK, one final example. Now everyone’s talking about AJAX, it;s the buzzword of the moment. Unfortunately it’s also not very good for screen reader users. And the reason for this is that, er, anything that is updated on the page after page load is very very problematic to pass on to the screen readers. now the example I’m going to give here is a fairly simple one, and it’s the Google Suggest page. What Google Suggest does is let you type in your search phrase and as you type it’s calling back to the server, finding suggestions for you which it then populates in a list underneath the search input. So let’s have a listen to that.

[screen reader announces: 'google search - edit, type and text' then reads each letter of search term 'this is a test' as I type]

So I’ve just typed ‘this is a test’ and on screen underneath that is a whole bunch of suggestions that it has found. But if I try and actually access any of those using the keyboard:

[screen reader announces 'Google search - edit, Google search - edit, Google search - edit, Google search - edit' with each keypress on the down arrow]

It’s actually doing nothing. On screen I can actually see that it’s going up and down the options but the screen reader, it’s getting nothing back at all, nothing useful at all.

[more screen reader confusion]

Well thankfully with Google Suggest this is something tat you can opt out of – you don’t have to use Google Suggest, it’s not enforced on you. But it’s a very simple example and it just goes to show that a very simple technique like this can be, basically, completely unusable for someone using a screen reader.

So, that was just a few examples. Hopefully you’ve had an indication of how a poorly built website or web page can affect a user. the bottom line is, keep listening to the podcast, keep doing things right, keep using good markup and, if you can, test your own web pages or web sites using a demo version of JAWS. It really does pay dividends to find out how this works – or doesn’t work. So, thank you very much, I hope this has been useful, and I look forward to the next podcast, Paul. Thanks guys.

No show next week

Unfortunately there will be no show next week as I am away speaking at the Institutional Web Management Workshop. However we will be back the week of the 23rd July.

A new way to visualize your desktop

Posted in User experience on June 29, 2007 by Paul Boag

Bumptop is a new way to work with files that mirrors much more closing the experience of interacting with your desk in the physical universe. You can stack files, throw them around and even crumple them up in a 3D environment.

When I first watched this demo it felt like a novelty, but the more I thought about it the more potential I saw to organize content in a more dynamic and flexible way.

What I like most about this interface is that it is not trying to teach us a new method of interaction. Instead it is trying to replicate something we are already familiar with. The idea of using metaphors we already understand is a staple of interface design and is what makes things like tabs, desktops and folders so successful.

PhotoSynth

Posted in Development on June 15, 2007 by Paul Boag

Acquired by Microsoft Photosynth is truly amazing. Imagine being able to take every image of Notre Dame off of flickr and join them into a complete 3D model. Or what about being able to zoom in and out of gigabytes of photo data on the fly. Well they are already doing it…

Advice for CMS users

Posted in Accessibility, Site content on May 23, 2007 by Paul Boag

I have been putting together a document for work that provides some basic advice for people who work with content management systems. It covers things like accessibility and writing for the web.

Introduction

Although content management systems enable anybody to publish content to the web, they do not guarantee the quality of what is published. Many content managed websites are hard to use, inaccessible and poorly structured not because of any failure in the design or technology but simply because the quality of content is poor.

This document aims to introduce the reader to good practice for generating web content. In particular it focuses on advice about writing for the web and ensuring that what is produced is accessible to the widest audience possible.

Writing for the web

Writing great web content is a particular skill. Although it shares some characteristics with writing for other medium, there are many unique elements too.

Two traits make writing for the web, particularly challenging. Firstly is the perception that most people have that computers are being cold and impersonal. Many see technology as the enemy and so a good copywriter has to work hard to ensure their copy has a friendly and approachable tone.

Second is the fact that users rarely read pages in their entirety, but rather scan read. The emphasis is on looking for the next link that will take them one step closer to their goal.

Below we investigate these two challenges in more depth and suggest some possible solutions.

Writing style

Well-written copy should be both engaging and accessible. In other words it should overcome people’s inherent suspicion of technology and ensure that, as wide an audience as possible understand what is written.

Engaging with the user

Computers are immensely unfriendly. This is mainly due to their total inability to interpret or communicate the more subtle forms of human communication such as body language and tone of voice.

The result is that most people find interacting with a computer a cold and frustrating experience. However, there are techniques you can use to avoid the problem. These include:

Using a personal tone

By ensuring that your copy is friendly, informal and approachable, you help to counteract the inherent lack of personality associated with computers and the web. Even on a relatively formal site add more informality than you normally would in order to offset the users default perception.

Writing how you speak

If you are experienced in writing more formal offline documentation, writing in a more informal manner can be difficult. Although there is no one catchall solution to this, writing as you speak will certainly aid comprehension and generate a more informal feel.

Avoid being patronizing

The danger of writing in a more informal tone is that you overcompensate and your writing style becomes ‘chummy’ and patronizing. The writing as you speak rule comes in useful here. Picture your audience and ask yourself whether you would speak to them like that in a face-to-face meeting.

Making your copy clear

The W3C accessibility guidelines clearly state:

Use the clearest and simplest language appropriate for a site’s content.

In other words ensure that your reader can understand what you have written.

Many people make huge assumptions about what their audience understands and careful consideration needs to be put into this subject. Particular assumptions are made in regards to:

Jargon

A common pitfall is the use of abbreviations and acronyms within web copy. The assumption is that your target audience will already be aware of the jargon used. However, this is an entirely false assumption.

You cannot always assume that your audience will be aware of every acronym around. For example there are so many acronyms within web design that it would be impossible for one individual to know them all.

Secondly, the reader maybe relative new to your target audience and so still learning much of the ‘lingo’.

When writing copy ensure that whenever possible jargon is avoided and where that is not possible that it is accompanied by an explanation. We discuss acronyms and abbreviations further in the accessibility section.

Reading level

There are reasons why tabloid newspapers like the Sun sell so well. One of those reasons is because they require such a low reading level. As many as 40% of the population have a low literacy level and yet little consideration is given to their accessibility needs.

Even when writing for a well-educated audience you cannot make assumptions about their reading level. Many people suffer from attention deficit disorder, dyslexia or other conditions that could affect their ability to process what you have written.

Below is some advice on how you might go about improving comprehension of your copy:

Simplify punctuation – People suffering from a low literacy levels struggle with long sentences that include a lot of complex punctuation. Keep your sentences short and your punctuation simple.
Be consistent – There is often a desire when writing copy to vary your language to prevent a document appearing repetitive. Although this has its place it does make copy harder to comprehend. Where possible, use terms in a consistent manner across the whole site.
Use numbers not words – By simply referring to 1223 instead of ‘one thousand two hundred and twenty three’ you increase comprehension dramatically as well as shorten sentences and aid scanability.
Specify clear actions – If you wish a user to complete an action (for example to click on a button) clearly specify this. Do not assume the user will instinctively understand what is required of them.
Use imagery – The saying ‘an image speaks a thousand words’ is very true for low literacy users. If an image will help to convey the meaning of a page be sure to use it to support existing copy.

Although the techniques above are of particular benefit to low literacy users, they do actually offer benefits to all users. Ease to comprehend copy aids the speed at which information can be digested and helps users scan copy as we are going to look at next.

Making web pages easy to scan

It can be a depressing realization that users will probably not read your carefully crafted text. However, the sooner you accept this reality the sooner you can start to adapt copy to aid users in their hunt for information.

There are a number of techniques that can be used to help a user quickly scan through a page and identify the information they require:

Front loading

Front loading applies in two different contexts. Firstly, front-load the page by including a summary of the entire page right at the beginning of the document. This helps the user ascertain quickly whether the page is relevant to them or not. Secondly, front-load each individual paragraph so that the main point is first. Ideally a paragraph should only make a single point (see 2.2.2) but if it is longer then the user can get the gist by reading the first sentence.

Keep it short

Usability expert, Steve Krug recommends in his book “Don’t Make Me Think!: A Common Sense Approach to Web Usability” that a copywriter should take his copy, edit it down to half its original length and then half it again. This sounds like an impossible task but it is often easier than it appears. By removing repetition, marketing speak, and ‘happy talk’ (content with no real substance like ‘welcome to this site’) you will quickly find your content substantially reduced.

Keep paragraphs short

As well as keeping the page as a whole sort, you should ensure individual paragraphs are short too. Each paragraph should make a single point as this aids both user scanning and comprehension.

Keep sentences short

At a micro level you should also endeavor to keep each individual sentence as short as possible. Again this aids scanability and comprehension but also helps to remove any unnecessary ‘waffle’.

Break your copy up

As well as breaking up copy into short sentences and paragraphs you can also aid scanability by using other techniques as well. Look at each paragraph and ask yourself the following:

Can I associate a heading or sub heading with this block of text?
Could this paragraph be reduced to an easy to scan bullet point list?
Is there a key message in this paragraph that users need to instantly see?

If the answer to the last question is yes, then you might wish to use a breakout box (also known as a pull out). This is a technique originally introduced in magazines to ‘hook the user’. They would take a key line from an article and highlight it in someway (usually in a separate box) to draw the reader into reading the rest of the article. The same technique can be used on a web page to draw a users attention to a key point that they maybe searching for.

Many good content management systems (including Headscape’s own CMS) provide this functionality.

Accessibility

We have already touched on the importance of accessibility when talking about writing clear copy, however accessibility extends beyond simply the copy you write.

As a content management system user, you are required to go beyond just writing the copy. You are also required to enter the copy into the system so that it can be displayed on the site. This requires you to ‘markup’ your copy correctly.

The importance of markup

So what exactly is markup? Markup is the method by which you tell the browser what the content you are entering is, so that the browser knows how to display it to the user. This markup is usually written as HTML.

So, if for example you want to tell the browser that something is a heading you would mark it up like this:

<h1>This is a heading</h1>

or a paragraph would be marked up like this:

<p>This is a paragraph of text</p>

Of course, one of the main attractions of most content management systems is that you don’t have to know how to write HTML. Instead the content management system will add the code for you.

Historically content management systems didn’t even try to understand what any individual piece of content was. Instead they let you as the content management user, style the content to look however you wanted. So instead of telling the system that this is a heading you simply made it look big and bold so users of the site would know.

Although this sounds like a good approach in principle, it actually opens up a whole load of problems that are too extensive to cover here.

More modern content management systems, such as the ones deployed by Headscape, ask the user to explain what each piece of content is so that the system can add the proper HTML code.

The way the content management user does this is normally through a drop down menu of styles much like you find in Microsoft word. You simply select a block of text and choose the style which best describes that text.

Marking up content in this way brings a whole host of advantages including (but not limited to):

The ability to redesign how an individual style looks universally across the entire site without editing each page.
The ability to change the appearance of styles based on what device is accessing the content (for example a mobile device style).
The ability for screen readers and other assistive technologies to understand the site.

In short, a well marked up piece of content will be available to a much larger audience and is easier to change and adapt.

Text alternatives

Well marked up content is not the only way to improve the accessibility of your site. Another is to provide text alternatives for elements that some users will not be able to access.

The most common example of this is with the inclusion of images into your pages.

There are a number of reasons why a user may not be able to see the images on a page. These could range from viewing the page via a mobile device to the user suffering from some form of visual impairment. However, whatever the reason the solution is the same; add alternative text that describes the image.

Alternative text is only visible to users who cannot see the image and so does not impact the design in anyway. The method of adding alternative text will vary between content management systems but in most cases (including on the Headscape system) you will be asked to add some text when you try and insert an image. A good system will go as far as requiring alternative text before approving an image for insertion.

A common mistake that is made with alternative text is to use it as a caption for the image rather than a description of the image. The difference is subtle but important. An image of Marcus Lillington our sales director might read ‘Marcus Lillington is more than happy to speak to you about your requirements’. This would be a caption rather than alternative text. Alternative text should describe the image and nothing more. So in the case of our example it should read simply; ‘Photograph of Marcus Lillington – sales director’.

Finally it is worth saying that the principle of alternative text does not apply just to images. It should apply to any screen element that can only be understood visually. That includes Flash, video, audio or other plugin.

Meaningful links

Another common accessibility mistake is with link text. When a content management user creates a link between pages it is not uncommon to see links with phrases like ‘click here’ or ‘read more’. This presents a problem for two reasons:

Firstly, users who access the web using screen readers often have all links on a page read back as a list in order to save listening to every piece of text when all they want to do is find the next link. A link like ‘click here’ means nothing when read out of context.

Secondly, many users will scan a page looking specifically at the links. They don’t read the text before or after the link so again they see it out of context. The result is that, like screen reader users, terms like ‘read more’ mean nothing.

This problem is easily avoided by ensuring that all links make sense out of context. So instead of linking the words ‘click here’ in the sentence ‘click here for more news’ you simply link to the phase ‘more news’ or ‘news archive’.

Acronyms and abbreviations

Earlier we talked about how where possible jargon, acronyms and abbreviations should be avoided. However there are occasions where that is not possible.

In such situations your choices are very much dictated by the functionality provided by the CMS you are using. Unfortunately, many content management systems are not particularly helpful in this regard and you maybe limited to typing out a description in brackets each time.

However, more modern content management systems such as that provided by Headscape, allow you to select an abbreviation style. You can then enter the full description and this becomes available to the user without destroying the flow of your text.

This is achieved in a variety of ways but the most common is using a dotted underline. If a piece of text has been marked up as an acronym or abbreviation it will appear to the end user as text with a dotted underline. When the user moves her cursor over the text the cursor changes to a help symbol and displays the full description as a tooltip.

This provides a full description to users encountering a piece of jargon for the first time, without getting in the way of those who already know what it means.

Using tables correctly

Web design has changed a lot over the last few years and so have content management systems. One of the most significant changes has been a move away from table-based layout.

Table-based layout is a technique that uses tables to position content on a page. However this is an abuse of the table feature in HTML and can cause significant accessibility problems especially for users running on older PCs or using mobile devices.

We therefore strongly recommend that using tables for layout is avoided at all costs. Instead clearly markup the content using the descriptive styles provided. The system will do the formatting and positioning.

That said there is still a place for tables. Tables were originally intended for tabular data (data made up of columns and rows, like that found in a spreadsheet). If you have information like this you wish to include on a page, then this is when you should use a table.

Working with imagery

Although we have already spoken about imagery in the context of alternative text it is worth noting that there are other accessibility issues relating to imagery you should be aware of:

Animation

Animation can be a problem area if not handled correctly, so generally speaking it is better to avoid the use of animated imagery unless it helps explain the content in someway.

The main reason that animation can be problematic is because certain forms of cognitive disability can be made worse by flashing animation. It can prove distracting and make it harder to process the content being read.

If animation is to be used we recommend:

That the user is given the ability to disable the animation
That the animation is not too rapid so that it proves less distracting

Colour

Finally, it is worth noting that a considerable proportion of your users will suffer from some form of colour blindness. For example almost 1 in 10 men are colour blind. In addition it is possible that other users will be accessing your site through black and white monitors on mobile devices. It is therefore important to ensure that any imagery you use is not reliant on colour to communicate information and that there is sufficient contrast between foreground and background colours.

These two issues are addressed in the W3C guidelines on accessibility:

2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.

2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Further information

Hopefully this document has been useful in outlining some of the basics of writing content for a website. However, we have obviously only been able to scratch the surface.

If you would like further information, please do not hesitate to contact Paul Boag (the author of this document) using [email protected].

The life of a web designer

Posted in Working in web design on May 10, 2007 by Paul Boag

Well we have just had our first show and tell day at Headscape.

The problem with Headscape is that we are a distributed company. That means we don’t have a lot of opportunity to just hang out and mess around.

To get around this problem we have started meeting up once a month. We chat, eat out and show off bizarre side projects we have been working on. It gives us a chance to play with stuff and get to know each other a bit better.

The first such day has taken place today and was actually really cool. Some of the projects people showed off were very impressive including some new project management approaches and a very in-depth (if slightly nerdy) football game.

Personally I went for the immature approach and put together a silly video using my new shinny mac to give people a glimpse of my working life. In good web 2.0 tradition I have added it to YouTube.

Believe it or not this is not the most immature of the entries. This prize surely has to go to Leigh and his incredible Blow Selector.

Show 78: POSH?

Posted in Classic shows on May 8, 2007 by Paul Boag

This week on Boagworld: Paul redesigns the way clients and designers interact, Marcus asks if you really need a content management system, and Garrett Dimon sharings his experiences of information architecture.

Download this show.

Launch our podcast player

News and events

Breadcrumbs are good, its official

When Jakob Nielsen speaks the world listens. This week he has come out with the shocking revelation that Breadcrumbs are good. Okay, so this doesn’t come as a surprise to most of us, but its still an interesting read. Apparently more and more people have come to rely on this secondary navigation tool and notice if it isn’t there. Jakob believes that breadcrumbs never cause problems in user testing (although sometimes they are not seen) and provide a wealth of benefits to visitors that do use them. Finally, he goes on to talk about the fact that breadcrumbs should always show a sites hierarchy rather than the path a user has taken through a site.

Techcrunch drool over Silverlight

So the guys over at Techcrunch have spent the last week at MIX07 and seem to have been brainwashed by the nice fellows at Microsoft. They are positively drooling over Silverlight, Microsoft’s challenge to Flash. In one post they say:

“It makes Flash/Flex look like an absolute toy… without exaggeration, Ajax looks like a bicycle next to a Ferrari when compared to Silverlight”

Personally, I haven’t had a chance to look at Silverlight yet so cannot express much of an opinion. However, I find it hard to believe that Silverlight will topple Flashes dominance before Adobe responds with something equally impressive.

Although competition can never be a bad thing, it strikes me that this is yet another plugin for people to download and another platform we have to worry about developing for.

RSS in plain english

RSS can be a difficult concept to get your head around the first time you encounter it. Its still a good idea to explain what RSS is on your site for those that don’t know. Obviously you can create a page yourself explaining or sometimes I link to the BBC website which provides an excellent description. Of course if you want something a little more exciting you might want to link to this superb video that explains exactly what RSS is and how it works. Its just a shame they don’t offer the option to embed it directly into your own site.

How POSH are you?

I have to say I was very cynical about this news story when I first encountered it but after hearing Jeremy Keith’s argument on the last .net podcast I have to say I am coming around. POSH is yet another another “catchy” web acronym. It stands for “plain old semantic HTML”. So why do we need yet another acronym? Well the argument goes that nobody is getting excited about semantic HTML these days. Its just not cool. Instead we are obsessed with Microformats or AJAX, things that are perceived as being “in” and “trendy”. The POSH acronym is designed to get us talking about semantic HTML again. The idea is that we start blogging about how we mark stuff up and sharing ideas with one another. The example Jeremy gave on the show was; what is the best way to mark up a conservation in HTML? He suggested that it was simply an ordered list of blockquotes. Do you put that much thought into your code? I can’t say I always do.

So with that in mind I have opened a new section on the Boagworld forum where you can post your examples of good code. You can ask questions like; what is the best way to markup… or simply post how you choose to markup different elements. Whatever the case lets start sharing our good practice in HTML.

Client corner: Do you really need a CMS

Apart from a few ‘design only’ projects we get involved in, every tender that comes through the door includes the words “control over content is a must have”… or words to that effect.

But thinking about all the ‘full’ CMS based projects we have delivered, is that really what the client wanted/needed?

So what types of CMS solutions are there? Here’s a quick summary:

Limited CMS (non-structural) e.g.

News
Events
Popular a few years ago when ‘full’ CMS was a much more expensive.
Pros – simple to understand (and build)
Cons – clients tend to request more and more areas of the site become CMS controlled and you can end up with a bit of a mess and the cost of replacing can be prohibitive.

Blogging tools

Article based
With commenting

Full CMS

Control over structure: move pages, edit pages, create news pages (and sections) and the front end navigation updates automatically
Usually modular: news, events, downloads, forms (dynamic), lists, newsletter, etc
User management: Roles, permissions, preview, workflow
Licensed or bespoke?

You need to ask yourself a couple of fundamental questions:

Even if I have these tools, will I have time to use them? All websites need to have an owner or editor. Someone who’s job it is to manage all content sources and keep the site up to date. We have been asked many times to carry out work content population work on a CMS that we built…

How much of my content needs updating more than monthly and how often do I need to add new pages to my site? It seems that having the ability to extend a site is often seen as a ‘must have’ when in reality new pages are only added, say, quarterly at most. Added to that, the only content that changes regularly is, for example, news, events and case studies. Employing an agency to add new pages and manage site structure/navigation is not a big job (though some seem to charge extortionate rates). Added to that, clients who do not use a CMS very often tend to forget how to use it and then go back to the agency simply because of that.

To summarise, think very carefully about your requirements in this area and talk to prospective agencies about what they recommend. You could end up making a costly mistake.

Ask the expert: Garrett Dimon on Information Architecture

I am a huge fan of Garrett Dimon’s work and so I am really excited to have him on the show this week. Garrett’s job title is “information architect” and so unsuprisingly he joins us to share some of his experiences on working with information architecture. His advice includes:

Embrace constraints
Know when to challenge the constraints
Explore lots of ideas
Work in conjunction with clients
Don’t use your computer
Throw away more than you keep
Don’t worry about the details until later on
Simplify and cut back on details
Communicating is more important than documentation
Make your IA deliverables visual as they are easier to understand

Agony uncle: The wish list brief

This week I am back on Agony Uncle duty with an email from Dan in Swansea:

I am increasingly frustrated by the briefs I am getting through from potential clients. They read more like wishlists than real briefs. They lack focus and often ask for functionality they just don’t need. How do you respond to briefs like that?

Its a great question and set me thinking a lot about the web design process. In fact it was the primary motivation for a recent blog post on the subject which we talk about on the show. I think the key to this question is to not be afraid to go back to the client and challenge them. Perhaps propose a rough costing based on some of the items in their list but suggest that the first step (if you are taken on) would be to define and price a more accurate brief. I think most clients will respect you for suggesting an alternative and more effective strategy. In many ways its like the speculative design argument, it may feel scary to challenge the client before anything is signed but in my experience clients respond positively to a carefully thought through argument.

Review: Spoken Text

A while back I asked people to submit their own reviews. I didn’t specify that people couldn’t review their own product and so I recently received a review from Mark promoting Spoken Text. Now, I don’t want to open the flood gates to shameless self promotion but I like spoken text so much that I want to include it on the show. It is basically a free, text to speech system that allows you to convert multiple file types into audio files.

Mark shares four great reasons why he thinks we might be interested in it as web designers:

Use spoken text to provide alternative audio versions of the content on your website
Allow users to record and save any content from your website they want
Create a podcast of your websites content
Create your own podcast of other people’s content that you want to listen to while on the go

There are two things that excite me most about this service (beyond the fact that it is free). First is the accessibility benefits it could bring for visually impaired users and secondly the ability to make instant podcasts of new stories from your site without the complication of finding somebody to present it.

This isn’t a service that is useful to everyone but I think in certain circumstances this could be a killer app.

Show 76: Clients and Agency

Posted in Classic shows on April 24, 2007 by Paul Boag

Marcus talks about setting up a web design company while Paul talks about the role of the client and Derek Featherstone talks about making your web application accessible.

Podcast: Download (27.5MB)

Download this show.

Launch our podcast player

News and events

Eric Meyer’s reset style

I have talked before about the idea of having a CSS file that removes all of the browsers styling in order to allow you to work from a clean slate across multiple browsers. Well, over this last week Eric Meyer has picked up on the idea and has been collaboratively developing a reset CSS file via his blog. If you do a lot of CSS work, this is definitely worth getting your hands on.

Microsoft Silverlight

Microsoft are gunning after Adobe on all fronts at the moment including a flash competitor called Silverlight. Like flash, Silverlight offers animation, interactivity and cross browser compatibility (although I don’t seem to be able to get it working on a mac). However, their real focus is on video where they trump Flash by offering high definition quality. It also appears to offer more “standards friendly” methods of inserting and manipulating movies, however as I said I have been unable to test this so far.

The biggest hurdle Microsoft faces will be take up. At the moment Flash dominates partly because in many cases it is installed almost invisibly in the background. In contrast, at the moment, Silverlight is a separate installation that takes place outside of the browser. No doubt this will change in the future.

35 Designers, 5 questions

Smashing magazine are certainly on a role at the moment, publishing a range of superb web design articles. One of the most recent is a post where they asked 35 designers (of which I was one) 5 questions about their approach to web design. The resulting article is a fascinating read and gives you a real insight into how other web designers work. The questions included:

1 aspect of design you give the highest priority to.
1 most useful CSS-technique you use very often.
1 font you use in your projects very often.
1 design-related book you highly recommend to read.
1 design magazine you read on a daily/weekly basis (online or offline).

CSS tools

Another Smashing magazine post. This one lists some very useful CSS tools including form builders, list makers, CSS layout templates and much more. If you are starting out in standards based coding some of the tools here will produce you some brilliant examples of clean code.

Client corner: The role of the client

Myself and Marcus swap roles this week and I take a look at our client corner issue; the role of the client. There is a lot written about the role of web designers but very little written about what part website owners play in the evolution of their sites. It is an area I have been thinking a lot about recently and I wanted to share a few thoughts with you. It is a subject that I have recently blogged on so if you want more information on what I consider the role of the client to be then I suggest you check that out.

Ask the expert: Derek Featherstone on ARIA

We are lucky enough to have accessibility expert Derek Featherstone on this week’s show talking about making web applications accessible. He talks about how HTML is not designed to support web applications and that the methods used to make it work are often little more than hacks. He then introduces a new standard from the W3C called ARIA and explains how this will assist in making web applications more accessible. If you want to know more about what ARIA is and how it can make your applications more accessible then Derek recommends a recent article on the List Apart website.

Agony Uncle: Setting up a web design company

Marcus takes on the lofty role of Agony Uncle this week responding to a question on the forum about setting up a web design company. The question, from Stanton, starts with him setting the scene of someone wanting to break out on their own but worrying about how they will cope without that guaranteed income.

Marcus gets all nostalgic about the early days of Headscape and then provides advice about starting up. He covers all the boring bits about incorporation, insurance, funding and documentation. He then talks about getting business in and not forgetting that someone has to be the salesman!

Show 66: Beyond HTML

Posted in Classic shows on February 6, 2007 by Paul Boag

We have a bit of an audio and video theme to this week’s show with Ian Forrester talking about online video and Paul sharing some advice on creating a podcast. Marcus also continues his series on client contracts by looking at “the statement of work”.

Podcast: Download (26.9MB)

Download this show

To subscribe directly within itunes click here

News and events

Mobile internet usage increasing

This week the BBC has reported that 15.9 million handsets in the UK accessed the web in December. This is an increase on over a million on the previous month. This further underlines the fact that the mobile web is going to be the big growth area in 2007.

Headscape recruiting

Headscape is expanding yet again. We are currently looking to recruit a .net developer and an experienced css/xhtml coder. If you are interested in either position send an email to [email protected].

Great British Booze Up

If you are attending SXSW this year then come along to the Great British Booze Up. ClearLeft, Boagworld and @Media 2007 are taking over a “British themed pub” (yeah right!) to bring you an evening of traditional British entertainment.

Enhance your page performance

There are two new articles on the Think Vitamin website this week. Unfortunately Chris Heilmann’s Article is far more interesting than my own. He looks at the issue of page performance, outlining some of the common problems and how to address them. He also has an interesting discussion on page performance verses best practice.

Some handy flash tips

Robert Nyman has obviously been struggling with Flash recently as he has posted two very useful tips on dealing with that pesky plugin ;) He shows you how to embed flash without invalidating your code as well as how to place an HTML element on top of a flash movie.

Client corner: The statement of work

This week Marcus takes a look at the statement of work, which is the cornerstone of the contract between client and developer. In particular he focuses on the various stages of the development cycle and what information needs to be covered in the contract. Elements covered include:

Kick off meetings – Who will attend, what documentation will be produced?
Information Architecture – Will there be expert reviews, stakeholder interviews or card sorting? What documentation will be provided, who will do the recruiting? What about wireframe testing?
Design concepts – How many concepts will be produced? How many different pages will be demonstrated? What happens if the client doesn’t like the design?
Template development – What types of pages will need designing and building? What additional style sheets are going to be produced (print, mobile, low vision)? Will the client sign off each template?

Ask the Expert: Ian Forrester on video formats

Ian Forrester from BBC backstage and the Geek Dinners joins us to talk about online video. He talks through the different formats available (quicktime, real player, windows media and flash) as well as the different delivery mechanisms (steaming, download and progressive download).

Producing a podcast

Probably the most common question I get asked is how I go about producing Boagworld. That is why in this week’s show we combine the review and agony uncle sections to talk about the whole area of podcasting.

I share some thoughts on creating the right format as well as reviewing a range of podcasting tools including:

Podcast 60: Return on investment

Posted in Classic shows on December 4, 2006 by Paul Boag

This week on the boagworld podcast we look at why return on investment should be at the heart of our approach to website development.

Podcast: Download (24.3MB)

I know what you’re thinking; “not the most riveting subject”. However, don’t let that put you off. Although return on investment might not float your boat, it is still extremely important and you should take the time to listen to this show.

Download this show.

To subscribe directly within itunes click here

This week’s show is largely based around elements of my keynote at this year’s Refresh conference. We discuss how the web design community fails to engage with its clients on a business level spending too much time talking about code and design. I challenge us as a community to start talking the language of business and focus our intention on return on investment.

In particular we cover:

What is return on investment?
Defining how ROI will be measured.
The short term and long term aspects of ROI.
How to maximise your returns.
The need to look for the simplest solution with the highest return.

In the news…

We have loads of news in this week’s show including:

Also in the show…

Marcus gets out the guitar (if only briefly), and we talk about how you can contribute to next week’s Christmas special. We look at what unobtrusive Javascript is and give some practical examples. Finally we investigate some of the latest postings on the forum including a debate about presenting designs to clients and a discussion about how developers try and blind clients with technobabble.

Return on Investment

Posted in Web strategy on October 18, 2006 by Paul Boag

Recently a listener of my podcast wrote to me complaining that a recent screencast I did on the business benefits of web standards, didn’t work under Linux because it used Flash 8. This raised an interesting question. Do I care?

You see my problem is that I am obsessed with return on investment at the moment. It’s my pet subject and I find myself examining everything within this context. If a web design decision cannot demonstrate a business benefit then it probably isn’t worth doing. So, when I received the email mentioning the problem in Linux I couldn’t help wondering whether it was a problem worth fixing.

My logic went something like this:

I used an automated tool called Camtasia to produce the screencast and that generated the flash file for me. Other than the time involved in preparing and recording the screencast very little investment was spent.

The resulting screencast has proved extremely popular hitting the front page of digg.com and increasing my own exposure and that of my web design agency. In short it was a useful marketing tool, as well as a good way to promote the benefits of web standards. Win, win.

Because accessibility is important to me and because I wanted the presentation to be available to as many people as possible I produced it in four formats:

Flash Video
Audio Only
PowerPoint
PDF

Now admittedly it could do with an HTML version and I am working on that. However, generally speaking I thought I had made the effort.

So when I received the request for a Flash 7 version compatible with Linux, I had to consider if the additional work was justified. Unfortunately I had a problem.

I couldn’t find a quick automated method of producing the screencasts in Flash 7 format. Sure it could be done, but was the additional work justified from a business perspective.

If the presentation was a marketing tool then I had to ask myself whether building a Linux version would expose my presentation to anymore of my target audience. Well, obviously the people that buy my services aren’t other web designers but rather website owners. Do that many website owners really access websites from the Linux platform? My feeling was that the additional work wouldn’t generate sufficient additional leads to make it worth the while.

Of course, I had to consider secondary factors too. Would the absence of a Linux version adversely affect how people perceived my work? Possibly. Would it affect how I was perceived by potential clients? Probably not.

In the end I decided not to rework the screencast to support Flash 7.

You have probably guessed by now that I am exaggerating to make a point. Before we add new functionality to our sites we need to ask ourselves; will it pay for itself?

Obviously, the stuff I produce on this site is more than a marketing tool to me (although it does fulfil that role too). However, the point remains.

So what do you think? Did I make the wrong decision in not supporting Linux users? Does a moral obligation outweigh business considerations?