160. Education, Education, Education

On this week’s show: We speak to Aarron Walter about teaching web standards. Ryan Carson starts a series on web applications and Paul talks about remote user testing.

Play

Download this show.

Launch our podcast player

Housekeeping

A couple of quick pieces of housekeeping to kick off with…

  • Huge thanks to Ryan Taylor, Paul Stanton and Sarah Parmenter who did a stellar job standing in for myself and Marcus on last week’s show. They were actually far too good and I have already started receiving requests that they become the permanent hosts! Anyway, if you didn’t hear last week’s show then make a point of downloading it.
  • My second piece of housekeeping is a quick plug for Bamboo Juice, a grass roots conference taking place in Cornwall on the 24th April. Myself and Jeremy Keith are just two of the speakers in what will be a packed day. It’s so good to see smaller conferences like this springing up outside of London and so I would encourage as many of you as possible to attend. Best of all its only £99 (£79 for Boagworld listeners!)

News

To be honest, what with SXSW and my week’s holiday I am feeling completely out of touch with the web design world. Fortunately, Mr Stanton is continually updating our twitter feed with juicy stories. I have therefore picked 4 that caught my eye.

How to create a great web design CV

Poor old Smashing Magazine. People do like to tease them (myself included), but they write some damn useful articles. A recent example that caught my eye was ‘How To Create A Great Web Design CV and Resume?‘.

This post is essentially two articles in one. It starts by asking 10 designers to design a hypothetical CV for a fictional individual. Each designer writes a short paragraph about their chosen approach and you get to look at some nice examples.

The second part of the post provides 10 useful tips for creating a great CV. Suggestions include…

  • Make it printable
  • Have a summary
  • Link to online projects
  • Show your personality
  • Keep it simple and understandable

For the complete list of tips read the whole post.

Its a good post, but I am not sure whether producing a ‘designed CV’ is entirely necessary for web designers. If I was hiring a print designer then I would expect a CV to look impressive. However, if I am recruiting a web designer I think I would be just as happy receiving a cleanly designed CV that links to a stunning portfolio website.

There are a lot of differences between designing for the web and print. It is possible to be good at one and not the other. Therefore, a printed CV doesn’t tell me much about a persons capability as a web designer. That said, a well designed CV isn’t going to hurt your cause!

Design: Make it Memorable

One tip that could have gone in the Smashing Magazine article, is to make your CV ‘memorable’ and not just ‘flashy’. This picks up on the theme of a post over at 37 Signals entitled Designers: Make it Memorable.

The post talks about the difference between making something visually appealing and actually memorable. Too many sites are impressive but fail to leave a lasting impression. At one point in the post the author writes…

I started to recall those amazing Flash Sites of the Day. You know those sites that get passed around via IM in your office on a slow day? Simply amazing design and programming. Problem is: I can’t for the life of me remember what those URLs were much less the company/product that was being featured! Isn’t that the point with those sites? That the impact should be profound so that you remember Product or Company X?

This is a lesson that all those involved in the web design process need to learn. Whether we are designers or website owners, we have a tendency towards thing that provide the wow factor. However, often it is the thing that makes us go wow we remember rather than the message being communicated.

Statistics and website owners

Our next article of the week is an ‘all too brief’ post on web stats entitled How to Sell Statistics to Clients.

The post focuses on a common problem – most website owners know they should be tracking website statistics, but don’t really know what they are looking for. In fact the author writes…

In my experience, the loudness or frequency of a person’s request for web statistics is inversely proportional to their understanding of them.

That has often been my experience too.

He goes on to identify three ways that we as web designers can help rectify this problem. These are:

  • Providing cheat sheets that help the client understand terms like ‘hits’ ‘page views’ and ‘unique users’.
  • Add web metrics training into the budget of your projects.
  • Provide summaries and reports for the client on key metrics such as conversion rates or sales.

To be honest this is a much bigger problem than can be covered in a short blog post. Too many website owners think that having Google Analytics will solve their statistics needs. However, having the data is not the same as understanding it. If this information is misread it can lead to bad decisions about the future development of a site.

Specialist vs. Generalist: Who Wins?

The final post this week is of interest to pretty much everybody who listens to this show. It asks which is better – the Specialist or the Generalist.

This is an important questions for both web designers and website owners. As web designers we need to know whether we should be specialising in a specific area of web design. It is important for our careers and our businesses.

As website owners we want to know whether the pain of dealing with multiple specialist suppliers is worth the increased expertise you would receive over a generalist.

It has to be said the article is written mainly from the web designers perspective. However, I think there are lessons to be learnt for all sides.

The post outlines the pros and cons of both approaches, but ultimately comes down on the fence when it says…

There are advantages to being in both groups, but I think the only way to be truly successful is by being a little of both. You can be a specialist, but in order to be able to develop a profitable business, you may need to be able to supplement your specialty services with some add-on services that may not be exactly in line with your focus.

Personally, I think it depends on how you define specialist. The type and level of specialisation can vary massively and the way you position yourself will define your success. For example, you may specialise in a certain discipline (e.g. Ruby on Rails development) or in a specific market (Higher Education).

Ultimately, whether you are a website owner seeking an agency or a web designer forging a career, it is all about balance.

As a web designer, if you specialise too much you will not find work. If you generalise you cannot differentiate yourself.

As a website owner you want a web designer who is enough of an expert to deliver an outstanding solution, but you do not want so many specialists that your project turns into a nightmare.

Back to top

Interview: Aarron Walter on Interact

Paul: Hello, and so joining me today is Aarron Walter. Good to have you on the show, Aarron.

Aarron: Thanks for having me.

Paul: And the reason we have Aarron on the show is because he is going to talk about a new initiative.. is ‘initiative’ the right word, Aarron?

Aarron: Yeah, yeah.

Paul: Let’s go with that. A new initiative from the web standards project, called Interact. Now, let’s kick off, Aarron, by maybe you telling our listeners a little bit about what Interact is.

Aarron: So, whilst Interact is an open curriculum framework, basically we’ve been recognising that the Web Standards Project has been around for a long time and we’ve done a lot of things to try to get standards into industry. And to a certain degree we’ve made some big triumphs in that respect, but there are still a lot of websites out there that aren’t following standards and people that are sort of behind. And we saw the Achilles heal as to why that’s not happening, as really, education. So, you know, our medium’s really young and it hasn’t really found it’s bearings with how we’re going to marry industry and education, so whilst Interact is a curriculum that has a series of courses that teach not only web standards, but best practices.

So there’s of course the stuff that you would expect from WaSP which is the front-end development courses that teach progressive enhancement and semantic markup and that sort of thing. But we have six learning tracks that include foundations; there’s a course in there that’s like an intro to internet concepts and how people can use the internet to teach themselves and use RSS, that sort of thing.

So there’s front end development, there’s a design track, there’s server side development, there’s user science and then there’s also professional practice. So what we’re trying to do is create a collection of courses that are very modular, to try to get these into schools. And we recognise that not every school is just going to take the entire curriculum and integrate that into their program. You know, if you’re a Computer Science program maybe you’ll take a course or two, if you’re a design program you’ll take a course or two, or even just grab the assignments or look at our competencies.

Each course is based on competencies, which are the things a student has to master before they can pass a course. And then the evaluation methods: So each course has assignments, it has exam questions, it has readings that come from Operas own web standards curriculum – we’ve been collaborating with them. It has textbooks, it has pretty much everything that an educator could need to teach a particular topic.

Paul: Okay, so is this something that is then aimed entirely at educators, or if somebody wanted to get into web design and they were trying to learn it in their spare time, could they just go to this and use it in isolation by themselves?

Aarron: To some degree, I guess they could, but Operas web standards curriculum is really learner-centric, so if you’re trying to teach yourself, that’s probably the place to go. But ours is very much focused on educators, because we feel like there’s a lot of great resources out there on the web if someone wants to teach themselves, but there’s not a lot of great stuff for educators to get stuff into their courses.

Paul: So, when you say ‘educators’, I mean what kind of level are we looking at here? Earlier you mentioned schools. Are we talking about school age, or are we talking about higher education? What are we covering here?

Aarron: I’d say our primary target is higher education, colleges, universities, even training programs to some degree. But we are also seeing some of our content in high schools as well and we’d like to see that more. Especially foundations courses like the web design one course or the internet fundamentals course. If students could go into college with a solid foundation, then they can start to focus more on "What can I do with these techniques?" than theory and concept.

Paul: So is this design to be fairly international or is it quite U.S centric in the way that it’s written.

Aarron: We want it to be very international and the people that have worked together on this are from lots of different places. We’ve got some folks in Europe, Canada and of course some folks in the U.S, so it is in an international group that’s coming together and we’re actually working with WaSPs ILG group – that’s the International Liaison Group. And we’re working on, this year one of our big goals is to try to get a lot of our content translated to different languages.

Paul: Okay, so there will be multiple language versions of all of this as well at some point?

Aarron: That’s the direction we’re heading, yes.

Paul: So, I mean, how did this come about in the sense of, you know, well, how did you get involved in it for a start and what was the motivation behind it?

Aarron: So, I’ve been teaching for the past ten years in different schools in the U.S and colleges and universities, but I’ve also been working in the industry as well. And I got on WaSPs mailing list, I just joined the mailing list and started to talk to some folks and then they invited me to join – it was a year ago, I guess it was at the very beginning of 2008 – and so I joined the education task force who created the Interact project. And basically there were ideas about the curriculum and I’d heard lots of people say "Yeah, what we really need is, you know, education’s way behind" and they’re happy to point fingers and "We need a curriculum", but it just never was really transpiring from anyone coming from the industry and so we kind of just decided we need to do this. And I’ve helped create curricula before as a faculty member at the Art Institute of Atlanta and so I had some ideas and we had a really great group of folks that are in the education task force – people that are educators and people that are experts from the industries. So, yeah.. actually South by South West was where this all started, which is pretty amazing, of course there are lots of great people there. So Glenda Sims, who’s one of the heads of WaSP these days introduced me to Chris Mills from Opera who was working on his project and we kind of had some drinks at the Geeks Club bowling event and we just kind of went crazy talking about these ideas. And Steph Troeth then Leslie Jensen-Inman and we all had these ideas, and then we just set a goal for ourselves in 2008 at South by South West and we said "In a years time, we’re gonna be back and we’re gonna have a curriculum." and that’s what we did. This year we launched our curriculum at South By.

Paul: That’s quite an impressive turnaround for the amount of information that’s in there. How did you draw everything together? Where did it all come from?

Aarron: Well, we met every week online and we talked and we established a course template, which really helped us. The stuff that we really needed to put in these foundation courses, we all know what needs to go in there. It’s just a matter of getting around the pedagogy or the educational part of it. So we developed a template for assignments, a template for a course and a template for learning modules which are basically like, you know, a teacher could teach a concept like let’s say, HTML forms in a weeks time. So we developed those templates and then from there we just assigned courses to different people and we used a wiki and we just met regularly and.. I gotta say, you don’t have to have a huge group to develop a curriculum.You just have to have a few people who really have their heart in it and.. we have some amazing folks, so..

Paul: So, what kind of response are you getting so far from H.E institutions? Are they interested in adopting it? If they are, how are they going to go about that, because, I mean, my impression is that it always takes forever to get a curriculum approved at a university or whatever. So I’m just interested in how that process is going.

Aarron: Yeah, education is.. one of it’s benefits is that it’s slow to move, so once it gets a solid foundation it keeps that solid, but you know, one of it’s drawbacks is that it’s slow to move. And so we’ve got some schools that are really excited about it and generally the folks that.. you know, it’s only been a couple of weeks that this has been live, we’ve got some folks that are really excited about it and those are folks that were kind of headed in the same direction themselves. So we’ve gotten some responses from schools in Europe and some schools in the United States that are interested in pulling some stuff in. And we have a school that’s looking at using a lot of our content right now. So we’re in the early stages of trying to get this out there. I think the easiest part is building the curriculum, because we know what needs to go in there. The hardest part is getting it into schools. So one of our strategies is to get the endorsements of folks in the industry, so we’ve gotten endorsements from Google, from Yahoo, from Adobe, from W3C, from Opera, from Mozilla – they’re all just super excited about what we’re doing and that sort of brand recognition can help us get our foot in the door with schools. And of course going out to conferences, we’ve got folks at the European Accessibility conference right now, talking about it, so we’re just trying to get out there and let people know.

Paul: Excellent. That sounds brilliant. I mean, I know that a lot of people that listen to the Boagworld podcast – there’s a large number of students that we’ve got listening and I often get complaints about this, that what they’re being taught at university bears no resemblance to what they’re hearing on this podcast. And I’m hoping that that’s because the podcast is right and the university is wrong and not the other way around. So if they’re listening to this and they’re getting really excited about it and, you know, they’ve gone to your website and they’re seeing the curriculum – I’ve got it on front of me now and it does look really exciting – how do they make this happen in their institution? What would you encourage them to do?

Aarron: So, this is the interesting thing – that so many of us have complained about a problem, but there aren’t a lot of people that will take that complaint and turn it into action. So if you’re a student or if you’re an educator what we need you to do is, there’s a page that’s called Advocate Standards (http://interact.webstandards.org/advocate/) – you can get to it from the homepage of http://interact.webstandards.org. It kind of just describes what standards are, why they’re relevant to you and we need people to share that information with their teachers, we need people to share just this website with their colleagues and show them the testimonials of the people who believe in this and want students to come out of schools with these skills. So we need people to act in a bottom-up sort of way, you know, grass roots. Take this to your classroom, take this to your teacher, take this department chair and just let him know. That’s the most powerful thing that people can do right now.

Paul: I mean, what I’m quite excited about from looking at this curriculum is that it contains a lot more than "Here’s how you code in X language" or whatever and even has got more in it than just design and user experience stuff. All this stuff about professional practices is very exciting too. Could you perhaps tell us a little bit about that?

Aarron: Yeah, so professional practice, we want people to not only get the concrete skills of "I can code a standard compliant page" or "I can construct a usable website", but we want people to be able to present their about their work and you know, be able to survive in a real career in the web. And so professional practices is going to have a series of courses to do that. We’ve got some pretty exciting ones that are coming up. There’s ‘writing for the web’ – it’s going to be a really cool one, that Alan Hussain from a List Apart is going to be creating. And we have a presentation course that’s coming down the line. So, we’ve got a number of those coming up.

Paul: That’s quite interesting, you just said something that I hadn’t grasped which is that there’s more to come here. That this isn’t the end of the line. It sounds like you’ve got lots more that you’re still developing. Is that right?

Aarron: Yeah. We call it a living curriculum, because you never write a curriculum and then you’re done. Especially in our industry, things change so fast. is what of course we’re going to be working on this year. Our design track is light right now and we want to try and address that ASAP, so we’ve got Dan Rubin and Ethan Marcott, are working together to create a foundation design course, that is specific to what web designers need to understand. And we also have Dan Mall is going to be helping us with a Flash course and Aral Balkan is also going to help us with some flash stuff too. We have a lot of stuff going on this year for new courses, so we hope next year at South By when we see everybody that we’ll have a brand new stack to add to Interact.

Paul: Excellent, so do you kind of envisage, from an institutional point of view that, like we were saying, it takes a long time for a curriculum to get approved and that part of the problem has always been that, by the time it’s approved it’s out of date, when it comes to the web. So is the idea that you’re going to get institutions to buy into the Interact curriculum in its evolving nature so that they always get the most up to date version of it. Is that the kind of plan? They’re not grasping one moment in time from it, if that makes sense?

Aarron: Yeah, exactly and we want to take some of the hard work out of being a teacher. I speak from experience, there’s so many things you have to keep track of and trying to keep pace with a lot of changing technologies and concepts, that’s hard on top of the umpteen other plates you’re spinning. So that’s exactly what’s going to happen, is that our courses, they’re not chiseled in stone, they’re published on the web, they’re in an expression engine and we’ll change those as they need to be changed. But that said, we need to strike a balance, because we can’t be chasing every new technology all the time, we have to evaluate and there has to be foundational concepts that remain steady. Separation of presentation and content, that’s steady foundation concept. But new technologies or techniques, they might change.

Paul: Okay, I mean, the whole area of education and web design is massively exciting and there’s so much going on at the moment in so many different fields. I mean, from your perspective, what else out there is really exciting you at the moment that you’re seeing.

Aarron: There’s so much, I just feel like last year that I just saw so many companies, organisations, individuals that, it seems that everyone just was pissed and they just walked out their house and they were headed in one direction until it was like everyone sort of meets up in one big mob. And so, what Opera’s doing, what Chris Mills has done with the 55 articles that he’s brought together and edited for Opera Web Standards Curriculum, that’s huge. Those are all rolled into WaSP Interact as our recommended reading, so that was fantastic. Yahoos Juku project, if you’ve heard of this it’s quite amazing. Nick Fogler, who’s the running Juku – Yahoo actually has a training program, where they bring students that are not employees, they’re not hiring them. They bring them in and they train them to be front end engineers over the course of a few months. And they’re doing it because they’re trying to solve this problem on their own. So, we’re talking with them about how they’re solving problems and looking to collaborate and discuss what we can learn from them. John Allsopp who runs Web Directions (the conference series), he brought myself and Chris Mills and Steph Troeth together with a number of other experts and we did Ed Directions, which was a day long workshop that taught teachers how to teach these concepts in their classroom. So there’s just so much stuff that’s happening right now and that’s just the tip of the iceberg.

Paul: Exciting stuff. It sounds like it’s a really good time and it’s great to have you on the show. How you manage to fit all of this in alongside earning a living too is quite beyond me, but it’s really good that so many people are volunteering and pitching in. That’s great. Okay, let’s get you back on the show, I guess in a years time and sees what’s changed. But thank you very much for coming in now and I will talk to you again soon. Thanks.

Aarron: Thanks for having me.

Thanks goes to Andrew Marquis for transcribing this interview.

Back to top

Listeners feedback:

We have two emails this week dealing with two totally unrelated subjects.

Remote user testing

Our first email is from Steve. He writes…

Catching up on past podcasts, I listened to the episode on User Testing (#150). A method I’ve used that I haven’t heard tossed around much is remote user testing using a screen sharing program like GoToMeeting.

I used this for usability testing of our Intranet and it has several advantages:

  • No need for people to come to central testing facility, or you to go to them.
  • The user is at their own computer, so more comfortable.
  • Ability to record the entire session (screen and audio) so others can look at it later.
  • Tester can conduct testing while in his underwear only (I didn’t do this, but you could.)

What do you think of this method?

Sounds interesting although it would not be my preferred approach.

It’s easy to become a snob when it comes to usability testing and so let me make it entirely clear – any usability testing is better than none.

If you have no budget for user testing, test on friends and family. If time is tight, test on a colleague sitting nearby.

In the same way, if you are having trouble arranging sessions then use Steve’s approach. Something is always better than nothing.

That said, I do have some concerns with remote testing. These include…

  • It sets a minimum bar of technical competency. A user has to be able to connect to the system in order to participate. I know this would have been beyond the capabilities of some test subjects I have worked with.
  • It is less personal. Face to face usability testing puts users much more at their ease and allows you to build a relationship that facilitates honest feedback.
  • It does not allow you to read non-visual signals. Users will often pull a face or shift their positions when they are frustrated. As a facilitator you need to be able to see these signals and ask what they mean.
  • You are not seeing exactly what the user is seeing. You can only see their screen. You cannot see other distractions such as TV in the background. You cannot see the position of their keyboard and mouse. You have a limited field of view.

My preferred approach is to test in people’s homes. Not only are the users more relaxed, you also get a unique glimpse into their world. You see where they access the web, you learn about their home environment and even gain a better understanding of their character.

However, we do not always live in a perfect world and so would definitely use remote testing if better options were not available.

Finding a job

Our second email is a rather despondent one from Andrew…

I have one question, In the past you’ve talked about hiring new for staff, but as far as I can tell you’ve never discussed how to look for a job. I’m currently looking for a career in the industry, but I can’t get a resume to any company or even talk to someone of said company. Almost all the businesses I’ve approached (or at least tried to) either work from home, are no longer at that address, or no longer in business, and actually are just freelancers. And when I find a job posting online its for someone far more experienced then I am. I’m completely demoralized.

You have my sympathy Andrew and I have to say its a tough time to to break into any new sector including web design.

I am also probably not the best person to answer this question. I have been completely unemployable for some time now due to my ill defined skillset and opinionated character :)

So, I am going to try something different with this question. If you have some advice for Andrew, post a comment below. That way we can get the Boagworld community helping each other.

In the meantime here are a few random ideas from me…

  • Give up on the cold calling technique. Randomly contacting agencies is largely a waste of time. You have to get amazingly lucky to contact an agency who happens to be currently recruiting.
  • Try for an internship. Admittedly you will not get paid, but it is a foot in the door. You get a chance to improve your skills and also get to know the people in the industry within your area.
  • Be willing to move. There are jobs out there but they are often further a field.
  • Put yourself in a neat little box. Potential employers need to know what you do. Are you a designer, a coder or a server side developer? Companies don’t know what to do with people who know a bit about everything.
  • Start networking. The best place to find job opportunities is by attending conferences and meetups. Even if you cannot afford the conference itself, turn up at the parties and stand in the halls. Just get yourself out there.
  • Register with recruitment agencies. As an employer I hate recruitment agencies because they cost me money. However, we do still sometimes use them and it doesn’t cost you anything to be listed with them.
  • Ensure your website is perfect. The first thing I do when I look at a potential employee is check out their website. Their site has to be outstanding. It needs to look amazing, be well coded and rich with great content that demonstrates a passion for the web.

Hopefully that helps Andrew and keep an eye on the comments for more advice.

Back to top

Series: Building A Better Web Application by Ryan Carson

Ryan Carson: Hi I am founder of Carsonified a small web company in Bath, England. I am an American as you can probably tell, as for living in England I have been here about nine years. So a little bit of history about us real quick so you know who I am. I have a computer science degree and I have been involved in building four web apps and we are building a fifth truvay.com which will be released later in 2009, and we have sold two of our webapps dropsend.com and heyamigo.net. So the stuff that I am going to share with you today are lessons I have learnt the hard way basically as we have built web apps.

So the first thing I want to talk about is the Admin area that you will build for your web app. What a lot of people don’t know is that the Admin area is really the key to good customer service. If you haven’t enabled really easy customer service then it makes it hard to actually please your customers when they have problems so the first one to make sure you build into your admin for your web app are one click refunds so if someone calls and complains and says hey I am having trouble this month I am really frustrated please help you want to be able to just go into the admin do a search for their email address, their name or their company or anything and bam one click and refund their last invoice and what this does is it gives you, it gives you the ability to just make them happy right away. With a lot of web apps these days on recurring billing you will probably be charging people 5,10,15, $20 a month so losing that amount of revenue in return for really making a customer happy is super important. So make that easy for yourself to refund that money.

The second thing I would make it easy to do is have one click password reset that automatically sends out email with the new password, so with Dropsend it was really hard to reset people’s passwords and that was the number one request people had problems with, they couldn’t remember their password. So if I was to do it again what I would do is I would actually build the admin so I could forward an email from somebody presuming they had sent it from the email address of the account, forward it into Dropsend or the admin and it would automatically know that what it needed to do is reset the password for that email and then it sends out a new one so literally you do not even have to visit the admin area to reset someone’s password you just forward an email that would be amazing, so that’s the way I would do it next time.

The next thing I would do is also doing a one-click resend invoice. So a lot of people they don’t understand they can go into their "My Account" area of a web app to see their past invoices and what they will do is they will just email you and say hey you know I need last month’s invoice. If it is hard for you to find that or send that it is going to make you less likely to help that person so I would do a search on the email address show a list of invoices bam one click and it emails them a pdf version of the invoice. That’s another, that leads me onto another area that I would like to talk about that is invoicing. If you are doing recurring billing sort of every month billing your customers make sure that you are not re-inventing the wheel I would recommend a web app called Spreedly.com and what it is basically it is a web service for recurring billing they have done all the hard work, written all the code, the code for the Dropsend recurring billing was at least I think 1200 lines of PHP and it was good solid code but it was really hard and painful to write. So I would recommend don’t re-invent the wheel use a service like Spreedly because it is making calls to an API if later you decide you don’t want to use a service like Spreedly any more that layer has been abstracted out so you could replace it with your own billing system or another one and it won’t kill you, but I would say hands down don’t rebuild reoccurring billing it is a real pain in the ass.

The last tip I would say about your admin area is make sure that it is easy to give your customers credits. you want to be able to login search for an email address and just give them, hey I want to give them five bucks towards next month, ten bucks just to make them happy and you will have lots of happy customers. So that is my five minutes of tips, thanks Paul for letting me be a part of this. Take care Bye.

Back to top

158. Home

On this week’s show: We share the highlights of SXSW, discuss home working, and interview Rob Borley about project management.

Play

Download this show.

Launch our podcast player

Housekeeping

Headscape still recruiting!

Headscape is still recruiting. We are looking for an enthusiastic, talented developer to join our team, working from of our offices in Hampshire. For more information see the job advertisement on Boagworld.

Back to top

News and events

The best of SXSW

Well, SXSW is over and I am back in the UK. But what happened at the conference? What was the big news this year?

That is actually a hard question to answer. There is so much at SXSW that it is almost impossible to get a sense of everything that is going on. Even if you could attend every panel that isn’t always where the real action takes place.

The real conference often happens at the parties and in the corridors. In fact, more than one spontaneous panel was started via Twitter, thanks to official panels being full.

Panels this year ranged from the downright dull to all out flame wars! One that I unfortunately missed was "Is Spec Work Evil!". However, Marcus attended and tells me it was particularly fiery. Personally, I am very much against speculative work as I have said before. However, not everybody would agree and the panel seemed to reflect this diverse opinion.

One panel I did make was Paul Annett’s amazingly inspirational talk on Easter Eggs and design twists. The talk focused on the little things you can add to your site to make users go ‘oooo that’s clever’.

Too often I neglect such ‘bells and whistles’ in favour of usability and accessibility. Paul demonstrated how these different priorities can sit side by side without compromising each other. He showed some great examples including the hidden arrow in the FedEx logo and the vines on the Silverback website.

fedex logo

The final panel I want to mention is ‘Being a UX Team of One‘ by Leah Burley of Adaptive Path. To be honest the title of this one was a little misleading (at least from my perspective).

What I took away from this session was that design should not be a solitary activity, solely reliant on the creative inspiration of one individual. Leah seemed to be arguing for a more collaborative approach especially at the wireframe stage. She proposed that all of those involved in the project should sit down together and hammer out the wireframe designs.

This addressed two separate problems we have been having at Headscape

  • The developers concerns at not being involved early enough in the process.
  • The question of who should do wireframing – the designer or the IA person.

Best of all Leah’s presentation was very pragmatic. She provided lots of practical approaches that encourage idea generation and collaboration. I highly recommend listening to the podcast of this when it is released.

Browser testing and IE6

In other news, there seems to have been a lot written about browsers this past week. Three stories in particular caught my eye…

  • .net Magazine seems to have hopped on the ‘dump IE6′ bandwagon – My opinion is the same as that of Jeremy Keith as expressed in last weeks show. It is not a matter of dropping IE6. We should instead being deciding whether we wish to offer it the same level of support as modern browsers. I am entirely in favour of providing IE6 with a basic stylesheet that avoids its shortcomings. However, I dislike the idea of dropping it entirely.
  • Microsoft has released SuperPreview this week that allows Windows users to test different versions of IE simultaneously. I have to say this looks like an impressive tool. It allows you to view IE6 and IE7 side by side. It also has many other tools that may also be useful. Support for IE8 and other browsers will follow and although it is currently in beta, I think it will quickly become an indispensable tool for Windows based web designers. Just a shame there is no mac support!
  • Finally, Sitepoint have written a brief outline of how to create the perfect browser testing suite. Ideally for those starting out it lists various online browser simulators, virtual machines and desktop browser emulators.

Browser testing continues to be a pain in the neck and I for one would be willing to pay for a decent way of streamlining this whole process. This is especially true now that IE8 has been officially released and we have another browser to add into the mix.

Screenshot of Superpreview

A simplicity case study

A few weeks ago I wrote about the importance of simplifying your website. Well, this week Gerry McGovern has written the perfect case study to support the argument I was putting forward.

Removing poor quality content increases customer satisfaction‘ talks about how the Microsoft website consists of a staggering 10 millions pages. Of those pages 3 million have never been viewed!

The post goes on to explain how the Microsoft Office team took a different approach with their site by removing irrelevant pages. According to McGovern…

By weeding the garden, the top task pages became easier to find. But just as importantly it became harder to find a minor task page when you were looking for a top task page.

In short, removing pages reduced noise. Disturbing though it sounds, I think we could all learn something from Microsoft’s example.

An introduction to Microformats

My final post today comes from Richard Rutter’s blog. It is basically an introduction to Microformats aimed at the non-geek. He wrote the post because he recently found himself trying to explain microformats to a client and could not think of a good post that covered the subject from their perspective.

Personally, I am not sure it is necessary to tell a client you are implementing Microformats. The cost of adding them is so small and the benefits so hard to explain, that you maybe better off just doing it.

That said, this is an excellent post and if you are struggling to understand the point of Microformats, this is certainly worth reading.

Back to top

Interview: Rob Borley on Project Management

Paul: So, joining me today is Mr. Rob Borley. Hello Rob.

Rob: Hi Paul, how are you doing?

Paul: Very well indeed. Good to have you on the show. It’s been a little while.

Rob: It has, It has. It’s weird hearing the show above you, um rather than being below.

Paul: Oh yes, because you sit upstairs, don’t you?

Rob: Indeed.

Paul: Do you actually hear it?

Rob: I do. It’s like have a little base bin ?

Paul: Awh. So, um, we have kind of been thinking for a little while that we need to get someone on the show to talk about project management. And the idea was we’d get some high profile web design project manager to come in and talk about web design project management. Then I realised, um, that I can’t actually think of any. You know, I really don’t know of any kind of web design project managers out there, other than obviously the people that work at Headscape.

Rob: Well, maybe there’s a gap in the market.

Paul: I think there is a gap in the market.

Rob: (unintelligible) celebrity project manager.

Paul: Well I think that’s somewhat of an oxymoron, but setting that aside, lets shift around a bit, yeah, so, um, so we thought, lets get you on the show. Um, now, you’re quite and interesting case because you started of as a techie.

Rob: Yes.

Paul: And you became a project manager.

Rob: Yes.

Paul: And, so, um, let’s start by talking about the role of project manager. How would you describe your core role? What is it that you do? I should know this I guess.

Rob: Well, you mean other than manage projects.

Paul: Ok, you just have to make a joke out of it. But you know what I’m getting at.

Rob: Yeah yeah. I mean, I guess, um, the main thing that we do is shovel shit, really. We deal with crap. You know, the main thing project manager would do is a filter between clients and the production team for the project. I mean, there are a couple of stages I guess. So you’ve got the planning part of the job, which is essentially working out what it is you need to do, um, making sure you got the results to do it, plotting a nice time line so they can all fit as far as having deadline. And then you’ve got the people said, because really project management is a people job. You need to know how to get the most out of all the people that are in your project team, um including the client. You need to include the client in your thinking, always. Yah, that’s essentially what we do.

Paul: Yah. It’s a people person thing. I always thought you were so charasmatic. Ok, so, I mean, I guess the question is, if you look at the kind of, if you look at Headscape, and the way that we’re organised, we’ve got four developers, four designers, and three project managers. I mean, that’s a lot of project managers. And, you know the question is, why, why have project mangers at all? Why couldn’t the designers and the developers do the job? Why couldn’t it be spread across multiple people? Justify you exsistance, Rob.

Rob: Yeah, this question kind of makes me nervous here. I feel like I’m re-interviewing for my own job. Not that I interviewed in the first place, but, I guess in one sense, if you were in a small project environment, you could almost get away with one person. If, you know, its a one person job, you could get away with them managing themselves for a limited amount of time. Um, but, as soon as you get beyond jobs which are more than one person, um, and go on for an extended period of time, you start needing to provide some glue to stick things together. You need someone whose got an overview of everything that’s going on. You know, the developers have got a very developer mindset about the way things happen. Designers are the same way, they know about the design stuff. Um, but actually translating what the client wants and feeding that into both areas and bring them together is what’s missing, if you don’t have a project manager.

Paul: So, to some degree, project management becomes necessary with scale. The bigger the projects, and the more complex the projects, then the more a need for a dedicated project manager.

Rob: Yeah, definitely. I mean, I guess the real role of a project manager in these situations is the facilitator. You’ve got all of these tools which are basically your resources, your developers, your designers, um, and you need to be able to enable them to work effectively together to produce what the end product is going to be.

Paul: So here’s a question that I didn’t pre-give you, in advance, which is always the best type. Why, why, why become a project manager? What made you – because you were heading up our technical development team, you were, you know, you were doing very well. Why did you feel the need to get involved in what you call shit shoveling?

Rob: Well, I think my main motivation was, Headscape was growing, and we started employing all of these younger, more dynamic, much more talented, better looking developers, that were basically going to show me up. So I figured that before I got shown in true light that I was going to need to move somewhere else. Um, no, well that’s partly true. Really, I think, its the people’s aspect that I’m really interested in. A good project manager is someone who is able to understand how his resources or how her resources work and how your clients work, and joining the two together. Um, while I quite like writing code really, I’m not passionate about it. So that side of it, you know, I reached as far as I wanted to go, and I really enjoy the people thing.

Paul: Ok. So what other, I mean, what other kind of characteristics do you think make a good project manager, obviously the people skills you talked about, what other, I mean if there are other people out there going well actually I’m not that passionate about coding, or I’m not that passionate about design, but I am passionate about the web, I do like the web design process, perhaps project management is the way I ought to be going. You know, what skills, what characteristics do they need, what personality traits do they need?

Rob: I think well, you need to be able to plan. Um, you know, planning is very very important. If you plan well, then your project will usually go well.

Paul: I like the cornification in that.

Rob: You have to be able to predict the future is helpful.

Paul: Yes.

Rob: A major part of what we de in the planning stages is assessing risk. You know, so, we’ve got what we’re starting with, we’ve got what we want to achieve, and we’ve got a time scale, now we need to work out what things might appear that are unforeseen, which are going to affect us reaching the time scale. So being able to foresee the future is helpful. Um, and so planning, being quite analytical and thorough. The logical background I have from being a programmer, a developer, is really helpful because you have to approach project management in a very analytical way, to make sure you don’t miss things. So there’s that side of it. And then there’s communication skills. You not only need to be able to communicate with a client affectively so they show that you understand what they want, um, and they understand where you are with the project, and they’re happy because a happy client makes everyone happy. But you also then need to communicate that with the various personalities in your team. You know, whether thats the developers locked up in a dark room with no social skills, or the crazy charismatic designers who…

Paul: You’ve just gone with stereotypes that so don’t apply. If I look at our team, no offense to our designers, they’re the ones that sit in the darkened room with their nose right pressed against the screen. And the developers are the ones that are crazy and never do any work.

Rob: (unintelligible) something about reading personalities. No, but you see my point. You’ve got these almost extremes, especially in the web, I guess, in the web world, you’ve got these extremes of personailities which somehow you need to be able to communicate with and put it all together and so, yeah, that’s an important skill. I think the third area, is to be quite relaxed about life. Because things will go wrong and do go wrong, it doesn’t matter how well you plan and how good you are at predicting the future. Stuff will appear that is completely unforeseen and will completely throw (unintelligible). And everyone gets really upset and people will shout at you and it goes a bit nuts. Um, and if you go nuts as well, you project team falls apart, because they look at you as the calm rudder in the storms of life. I can feel my other project manager buddies laughing at me, um, but if you’re calm and you can not get stressed at that but actually see, try and find a clear path through a very stressful situation, then really helps.

Paul: I would so be the worst project manager in the world. I’ve got the attention span of a newt, I’ve got no organisational abilities and I get stressed at everything. So overall, I think I’d fail.

Rob: Yeah, stick to web celeb.

Paul: Yes, I’ll come up with some other title that sounds good. Um, ok, so you talked about this really is, I can honestly say, a foreign area to me. Right? You talk about planning a project upfront. I’m not a planning person. Right? And there seems to be so many variables involved in a project and so much as you say, that can potentially go wrong. How do you plan it? I mean, you know, the kind of thing that you always talk about, when you talk about project management is endless gantt charts that seem to be outdated in about 5 minutes, sort of kicking a project off. How to you effectively plan a project?

Rob: Um, well, we do use a gantt. We always start a project with a gantt. And, um because it seems like thats what project managers are supposed to do, so we justify the time with a gantt. Um, but you do need, um, I think assessing risk is something that is vital in successful project management. Its something that we’ve been doing at Headscape, um, increasingly more over the last year or so otherwise this need to actually spend time highlighting what could actually go wrong here. So, you look at, I’m not going to be able to think of any examples now, but a particular, let’s say you building a shop or something. So potential things which could delay that project would be: the client not getting around to telling you what the products are on the shelf and content population is a big risk on meeting a project deadline, because it is out of your control. So, its like, I need the content by this date, and he needs to put the content in by X date. If the client doesn’t do it, there’s nothing you can do about it.

Paul: I’m guessing integration must always be a big risk. Integrating with third party applications.

Rob: Exactly, so if you’ve got some sort of third party database or a web service you’ve got to pull in, something that you’ve done a bit before, but you don’t know anything about, that’s a risk. Because you can guesstimate what’s going to happen, but its unforeseen. And so, the trick is basically, to find all the tasks that have these risks and then multiply (unintelligible) an hour by some random number. And then make the rest up as you go along.

Paul: So what about once the project gets going, how, what techniques and tools maybe do you use for monitoring and controlling the process and trying to keep on top of everything.

Rob: Yeah, I mean, there are lots of tools out there, obviously, lots of funky web-based ones, um, there is no substitute for talking to you team. Um, trying to (unintelligible) email or basecamp or something is impossibly without talking to you team. So, communicate. It’s a big part of what we do. You have to talk to the people doing the work, you have to talk to the clients, um you have to keep the lines of communication open. Um, but as far as actually keeping track of what’s going on, we do use basecamp, um which is great for managing lists, basically, you manage lists. So from our gantt shell, we’ll break it up into a series of tasks if you like, wide areas, um, and then, (unintelligible) ask people to add comments to them and take them off and then we’ve got kind of an overview of where our project is. Um, and hopefully from there, and when we’ve got the gant shell, we’ve got some dates, some milestones and reminders like you should have done this by then, um and so, you use that to kind of keep track of where you are.

Paul: Cool. What about, so that’s kind of dealing with the internal side of things. What about when it comes to the client, I mean, you talked about, you said earlier, a happy client makes everybody happy kind of thing. So what makes a client happy? What are the things that really, or perhaps turn it around the other way, what are the things that really piss of a client and where can it really go wrong?

Rob: This is really where the people side of it really comes in because every client is different. Some clients want you to talk to them for five hours a day, hold their hand, you know, spoon feed them, and some clients just want to know when it’s finished. So initially, when you’re kind of trying to assess your project team, if you like, your resources and what you’ve got, assessing the personality of your client early on, will really put you in a good place. Um, but, I guess, general principles, if you’re honest, it helps. Um, so, be realistic about what you’re telling your client is going to happen. Don’t promise the Earth by yesterday. Because then you won’t deliver and then they’ll get upset. If there’s going to be a problem, if things have slipped for some unknown reason, then tell them as soon as you know. Tell them as quickly as you possibly can. Um, manage their expectations is kind of the phrase that we use a lot. You gotta manage you clients expectations so that they’re not expecting something that you can’t deliver. And um, and then that limits the amount of upsetness that they get.

Paul: Slippage is a big one, isn’t it? This kinda whole area of things like, you know problems you kinda face, things, like slippage, scope creep, non-delivery, I mean, how do you have any kind of broad techniques for dealing with these kinds of things, or is it just kinda communications thing again.

Rob: It’s mainly I think a communication thing again. Um, part of the planning stage is trying to asses these risks and so you try and build in contingency to cope with those, and if you’re building enough contingency, you deliver the project early and that makes everyone really happy, even if its a long project, you deliver it early, you’ve exceeded their expectation also. Um, so I think, if somethings going to slip, I think you should say you’ve got to be honest. Sometimes things are just out of your control, so you’re two weeks before the end of a project, you in the middle of snagging, your lead developer goes down with appendicitis. There’s nothing you can do about that, and so you just need to communicate with the client and hope they take it well.

Paul: So wishing everything works out, I’m loving that approach. Ok, so, um, let’s finish of with a piece of generic advice. Either people starting out in project management or those that have had project management foisted upon them. You know, whats the kind of one piece of advice that you would leave for people?

Rob: Get to know your team. I think that’s the main thing I would say. Um, its kind of like, when you drive you car, you’re environment is a very organic, dynamic thing, you know what it really what’s going to happen and the only thing you’ve got to get you through it is that you understand you car. You know almost instinctively how it works, how to drive it it, if you get to that situation with your team, then whatever the project throws at you, you kind of, you can deal with it. If you understand how you client is going to react to a certain situtation, you can intincfully deal with it. And it keeps the stress levels low. You need to find ways of managing your stress levels.

Paul: There you go, that’s great advice. Thank you vert much for that, it was wonderful. I really appreciate you coming on the show.

Rob: My pleasure.

Thanks goes to Meredith Marsh for transcibing this interview.

Back to top

Feature: Home Working

I was recently contacted by a friend of mine Marieke Guy about writing a guest post for her blog on remote working.

I have been working at home for over 7 years now and am a great believer in the benefits. However when I actually sat down to write the post, I realised just how long it has taken me to find the right way of working.

As a large number of people who listen to this podcast work from home, I thought I would share my experiences to date and my hopes of where remote working will take me in the future.

The reality of home working

Back to top

157. SXSW09

On this week’s show: Andy Budd, Daniel Burka, Jeremy Keith and Joe Stump answer listener questions in a live Boagworld special from the floor of SXSW.

Play

Download this show.

Launch our podcast player

Each year the brightest minds in the web design industry assemble in Austin Texas at SXSW. Never ones to miss a chance to hang out with the cool kids, both myself and Marcus have also attended for the last coupe of years.

The panel at Boagworld Live

This year we thought we would record a live podcast while at the event. We begged a room from the lovely people at SXSW and bullied some web celebs into coming onto the show to answer questions.

For an hour our 4 guests answered all kinds of questions sent in by email, submitted via chat and from the audience that attended.

The guests included…

Questions ranged from ‘if you were a web app which web app would you be’ to ‘when can we drop support for IE6′. The debate was lively with lots of good humour and differences of opinion. With over 60 people there the atmosphere was great. Thanks so much to everybody who attended.

With 4 guests as well as myself and Marcus, we felt it was too much to ask of our transcribers to do the whole show. I therefore hope you understand the lack of transcript. If we can we will add one at a later date.

Thanks to Zeke Franco for the photograph

Boagworld at SXSW

Once again myself and Marcus will be attending SXSW. However, this year we are organised and have some great stuff lined up for you!

SXSW is probably the biggest event in the web design calendar and so we are going to be there covering everything that is happening. If you are going to be there then we have a couple of chances to meet up. If not, we still have you covered!

Boagworld live show

The thing I am most excited about is the live boagworld show we will be recording from the floor of SXSW.

We are not exactly Diggnation, so do not expect massive crowds. However, it should be a nice opportunity for those Boagworld listeners at the conference to get together and harass Marcus and myself as we try to record the show.

My biggest fear is that nobody will turn up, so I am tempting you with a stunning line up of guests! As well as myself and Marcus there will be…

  • Andy Budd (Author of CSS Mastery)
  • Daniel Burka (Creative Lead at Digg.com)
  • Jeremy Keitth (Author of DOM Scripting and Bulletproof AJAX)
  • Joe Stump (Lead Architect at Digg.com)

The show will be mainly listener driven so come along with loads of questions. We will get through as many as we can.

Finally, if you are unable to make the live show, we will try our best to stream it live via uStream.

To reassure me that we will not be recording alone, please signup on upcoming!

Great British Boozeup

Great British Boozeup

Those who have been at SXSW the last couple of years will be pleased to hear that the ‘Great British Boozeup’ is returning.

This is the third year ClearLeft and ourselves have thrown the Great British Boozeup and this time we are joined by Naklab. Together we will be treating our American cousins to a good old fashioned knees-up to a soundtrack of great British tunes.

For information on where and when the boozeup will occur, check out upcoming.

Boagworld SXSW coverage

Last but by no means least we have something for those of you not attending.

I know how annoying it can be when you are not attending a conference. You want to know the highlights but you do not want your RSS reader full of endless posts or your twitter feed overwhelmed by chatter.

That is why we have created a SXSW coverage page where we will live blog the entire conference (or as much as we attend). Hopefully this will keep you up-to-date without it becoming annoying!

View our SXSW live coverage page

149. White Hat

On this week’s show: How to become number one on Google *cough*, are customer testimonials worth it and how do you create a reassuring website.

Download this show.

Launch our podcast player

Housekeeping

Some housekeeping to kick off today’s show I am afraid:

Web Design Introductory Training

Drew and Rachel over at EdgeOfMySeat.com are running two training courses next month that look ideal for those starting out in web design. What is more they are offering boagworld listeners 10% off if they enter the promo code ‘boagworld’ at checkout.

The two courses are…

HTML and Web Standards for Beginners – 19th February

a one day course ideally suited to those wanting to get into web design, or perhaps for clients who have to format content with HTML for their websites. Covers the basic web standards principals of semantic markup and separation of content, structure and presentation.

Beginners CSS – 20th February

a one day course for learning CSS from the ground up. We go from zero knowledge right through to building floated, positioned and fixed width layouts.

For more information visit edgeofmyseat.com/training/

Bamboo Juice

Next up is a conference I am really excited to be speaking at. It called Bamboo Juice and is a one day conference taking place at the Eden Project in Cornwall. There is a growing line up of speakers that currently includes people like Jeremy Keith and myself.

It is great to see conferences happening further afield in the UK and I really want to see this one succeed. Please support it if you can. Cornwall is a stunning place and the Eden Project is a must visit. You ticket includes entry to the Eden Project so you will have a chance to look around.

Best of all the entire conference only costs £99! Please, please join us. Its going to be great fun and it should have a nice intimate feel with lots of time for chatting.

You can book your ticket now at bamboojuice.co.uk.

Consultancy Competition

Just a reminder of our free consultancy competition. Headscape are giving away a free days consultancy to a lucky winner. Email us with your name, URL and why you want us to help you out. We will pick a winner at the end of the month.

If you can’t wait that long Paul has started running mini-consultancy clinics via Skype. You can buy 30 minutes or more of Paul’s time and he will chat with you about your site, career or anything else (within reason). Its a bit of an experiment at the moment so if you are interested in trying it out visit the Boagworld forum where he talks more about the idea.

Back to top

News and events

More on jQuery

If you listen to this show regularly then no doubt you will be aware of what a huge jQuery fan I am. I was therefore super excited this week to see the release of a new version of jQuery that builds on what is already an excellent Javascript library.

Most of the improvements are in performance. This is remarkable as jQuery was already one of the most lightweight and speedy libraries available. However, they seem to have made some significant improvements.

The main new piece of functionality is something called Live Events. Live Events allows you to bind events (such as a onclick event) to all elements even if they have yet to be created. Let me give you an example. Let’s say you wanted all links with a class=’external’ to open in a new window. Previously you would create a function that added an event to all links with that class so that when the link was clicked it opened a new window. The problem was that if you added more links dynamically to the page you would have to rerun the function if you wanted them to behave in the same way. With live events this is no longer necessary. This is a huge improvement and one that will streamline a lot of code.

I really cannot say enough good things about jQuery. It really is enormously powerful and a real time saver. What you can do with it is quite amazing as is demonstrated by a post from Smashing Magazine this week entitled "45+ New jQuery Techniques For Good User Experience". Whether you use jQuery already or not, check this post out. It will definitely give you loads of ideas for enhancing your sites.

Getting started with HTML 5

Talking of new releases, there is a significant amount of buzz surrounding HTML 5 at the moment. This is somewhat surprising considering it is a long way from being finished and some even argue we do not need it in its current form.

Cameron Moll does a nice job of providing a round up of what is currently being written about HTML 5 including a nice little summary at the beginning…

The world isn’t ready for HTML 5 at large just yet, but we can begin preparing for it by using common, semantic selector names (header, nav, section, etc.)

To be honest it is still early days for HTML 5 with some estimating it will be released in 2022 some estimating that it will not be fully implemented by browsers until 2022. With those kind of timescales we can afford not to care. Jeff Croft puts it up nicely in his post "Two Thousand and Twenty Two" where he says…

It ultimately doesn’t matter if HTML 5 is available next month, next year, or fifty years from now. Those of us who do real work in this industry know that the only thing that really matters is what specs and technologies are supported by the browsers real people use.

Jeff came under a lot of attack for his post but I have to say I agree with him. What matters to real web designers and real website owners is what browsers will support now. So my advice is to ignore HTML 5 now and brush up on your WCAG 2 instead!

Web design trends for 2009

We turn now to the more immediate future and a post by the people over at Smashing Magazine. "Web Design Trends of 2009" endeavours to look at emerging trends that could become mainstream over the coming year.

To be honest I am not sure these are some much web design trends of 2009, as a look back at the end of the last year. However, it makes interesting reading none the less.

The trends listed include…

  • Use of letterpress typography, where text is ‘punched out’ of the background
  • An increase in the richness of user interfaces through the use of Javascript
  • The general acceptance of PNG transparency
  • Big bold typography
  • An increased use of font replacement using tools like sFIR
  • More sites than ever using overlay boxes to display images and video
  • A proliferation of video and screencasts
  • Blogs adopting a more magazine orientated design aesthetic
  • Lots of Javascript slideshows wherever you look

Nothing particularly surprising, but the article does provide some inspiring examples of these different trends and analysis about wh
y they are becoming fashionable.

Your website can thrive in a recession

We conclude today with another post about the recession. To be honest I am getting sick of talking about it. In fact I suspect it is turning into a self fulfilling prophesy. However, Gerry McGovern has written an interesting post about how your website could thrive in a recession.

The article mainly focuses on the cost savings that can be made by bringing customer interactions online. He quotes research which states:

the average cost of a web interaction is 27 pence, the average cost of a phone interaction is 3.76 Sterling and the average cost of a face-to-face interaction is 9.34 Sterling.

He goes on to say:

So, it is 14 times cheaper to allow a customer to complete a task on a website than to have the customer complete the same task over the phone. The Web is 35 times cheaper for completing such a task than a face-to-face interaction. Isn’t that a compelling business case for a website during a recession?

It is an interesting argument and one that may sway some of the people holding the purse strings. However it fails to take into account the upfront development cost of moving customer interactions online. For better or worse companies are focusing on short term cost savings at the moment rather than long term expenses. As a result some web design projects are being put on hold.

Nevertheless if you work for an organisation that deals with a large number of customers then this article is a powerful arguement. It is certainly something that you need to show your boss.

Back to top

Feature: Becoming Number One On Google

‘Become number one on Google’ – The dream of every website owner and titles like that grab people’s attention. What can you do to help achieve that dream without resorting to black hat techniques? Read More

Back to top

Listeners feedback:

Customer testimonials – Are they worth it?

Question from Dave Rupert –

“Client Testimonials” – whenever some marketing aficionado comes up with these they want them on the site. When was the last time you thought “OOOOH CLIENT TESTIMONIALS!! OMFGWTFBMXBBQ!!1!” and clicked to go see a whole page of them? Are these out of date? Does anyone care about them? Are there examples of good implementation? Do you use Client Testimonials on your site? If so, why?

This is a good question because it has made me question something that I have always considered to be a really good thing on websites.

I think someone in Dave’s position – who I assume is a web developer/owner – won’t ever get excited about a list of client testimonials. Let’s face it, they’re not for Dave. They’re meant for visitors to the site to try and persuade them that buying a product or hiring a service is a good idea. The idea is that customers are far more likely to trust a testimonial from an existing client than the marketing speak on a website.

But this is where I have started to question my thinking. For example: “I am Mr X from company Y and I have to tell you that after using these people’s services I am now a better, more rounded person and I have decided to name my first-born after the MD”… this rather points to the fact that Mr X is the MD’s brother/drinking buddy/receiver of folding in a reverse handed way (delete as appropriate)… or even the MD himself!

So, do potential customers place any value in testimonials or do they instantly think they are fiction. In my opinion, I do still think they have value, particularly if you back up an online testimonial with that particular client’s contact details in a proposal. I also think that video testimonials have more value than written ones because (unless they are a complete setup) you will be getting the client’s real feelings and you can watch their body language.

Slightly going of point, regarding providing client contact details for inclusion in a proposal, I have started to ask potential new clients which of our existing clients they would like to talk to rather than simply providing a list chosen by me. I think this adds a further degree of trust.

Fundamentally, I do still think testimonials are a good thing and we will continue to use them on our site. But I don’t think I will be placing so much importance on them as I used to.

How do you make your site feel safe

Kevin Dees asks an interesting question on the forum:

I don’t know if this question has been asked before but I’m interested in what other designers have done to help make a site "feel safe".

Many times I find myself leaving e-commerce sites… because they do not feel safe. I find that this is due to poor design. Big flashing buttons and the like make me wonder if I’m going to get scammed.

So, I guess what my question is "how, as a designer, do you make your site feel safe, welcoming, and secure with the design itself? What are good practices? How do you make users go were you want them to, yet make them feel like they are still in control? What do you suggest adding or even keeping way from when it comes to design"

The answers he got in the forum didn’t really address his question. They focused on the realities of making a site safe (security and technology) rather than on the perception of security.

A site maybe the safest in the world but if the design isn’t right you are left with doubts. Take for example the new US government site that allows people to apply for visa waivers every time they travel to the US. One would hope that a site collecting that amount of personal data would be extremely secure but the design leaves you wondering if it is legitimate. It just doesn’t ‘feel’ professional.

I have spent a long time trying to come up with an answer for Kevin. However, I have found it hard to define what provides that sense of security. Part of the problem is that I think as a web designer I am more sensitive to the ‘vibe’ a site gives off than the average user. I am not sure I am best placed to judge.

Also, a lot of the things that occurred to me where content issues more than design. Delivery policy, site security, returns policy etc. are all content issues and so do not answer Kevin’s question.

However a few things have come to mind…

  • An attention to detail – Sites that lack an attention to detail always make me nervous. Poor browser support, bad grammar, inconsistencies and ill considered design reek of unprofessionalism. If I am going to spend my money on a site, I want to know that money and time has been invested in its creation. If an organisation is shoddy in the production of their own site, then I can probably expect the same attitude in the way they interact with me!
  • Structure – I think a strong grid structure is very reassuring. It conveys a sense of order that is disconcerting when not there. I think that is the problem I have with the US immigration site. The form you have to fill in is all over the place. Fields don’t line up and the site lacks any sense of order.
  • Colour – Misjudging colour can have a serious physiological effect on how we perceive a site. Some colours ar
    e naturally more trustworthy than others. Blue for example has a very safe reliable quality. However using a conservative blue on a site aimed at young girls will project entirely the wrong image and make the audience suspicious of your site.
  • Trying too hard – Some sites just try too hard, shouting for attention. Flashy graphics, heavy sales copy and advertising orientated imagery all scream desperation and manipulation. People do not like to be manipulated or pushed into responding. They like to move at their own pace. Push them too hard and they will run away.

I am not sure I have done particularly well at answering the question either, but hopefully there is something in there you might find useful.

 

141. Feedback

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

Download this show.

Launch our podcast player

News and events

Working from home

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

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

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

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

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

Everything you know about CSS is wrong

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

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

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

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

Reduce your business costs with free stuff

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

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

Ideas include:

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

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

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

HTML Email: What mail clients are people using?

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

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

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

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

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

Alex goes on to summarise the key findings which include:

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

Interesting stuff.

Back to top

Interview: Paul Annett on Pushing the Boundaries of CSS

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

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

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

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

Paul Boag: Yeah that counts. I guess..

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

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

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

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

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

Paul Boag: Obviously not.

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

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

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

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

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

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

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

Paul Boag: All hell broke loose.

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul Boag: It’s that graceful degradation.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks goes to Troy Oltmanns for transcribing this interview.

Back to top

Feature: Improving your site with user feedback

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

Back to top

139. Brand

On this week’s show we’re joined by Ryan Carson to discuss building an online brand. We look at promoting your site with minimal budget and Marcus shares his views on working in an office.

Play

Download this show.

Launch our podcast player

News and events

Understanding progressive enhancement

Its funny how we spend our whole lives telling clients to avoid jargon and yet web design has more jargon than most. Every few months we seem to make up some new term that is thrown around like everybody knows it.

In reality some we have never heard certain terms, while others seems so similar to one another that the difference escapes us. Take for example ‘graceful degradation’ and ‘progressive enhancement’. Have you heard of them? Could you tell me the difference?

I have to be honest, I couldn’t. In fact in a few weeks you will hear an interview I recorded with Paul Annett from clear:left where I make a comment about graceful degradation and he said ‘no its more like progressive enhancement’. I had no clue why one was right and the other was wrong and I am supposedly a web design expert. Does that make me thick? Possibly. However, more likely I just missed the memo on that one.

The trouble is we are all too busy looking intelligent to clearly communicate with one another.

I have to some extent criticised A List Apart (among others) in the past for perpetuating this kind of ‘in the know mentality’. However, I am now being forced to eat my words (gratefully so) as they published an excellent article on Progressive Enhancement and why you should care about it.

Now if only somebody could explain what Web 2.0. really is.

A free conference (kind of)

I realise that some of the advice I give on this show is unrealistic for some. For example, I talk about the importance of attending conferences. However, when a conference can cost hundreds of pounds it is not always possible.

One alternative is to listen to the podcasts that most conferences published. Unfortunately, they are slow to appear and are hard to follow without being able to see the slides.

Fortunately, the FOWA in London has significantly raised the bar and other conferences will be forced to follow suit.

FOWA has released video of most talks. These appeared within hours of the speaker taking the stage, and are beautifully done including both speaker and screen.

There are also ‘highlights reels’ for most talks. These are a cut down version of the presentation, ideal if you are too busy to watch the whole thing.

With some of the most influential people in web design taking the stage, this is an invaluable resource and Carsonified should be congratulated for making it freely available.

Design Float

Talking of useful resources check out Design Float. Design Float is basically a Digg clone. However it is a clone aimed at designers.

I have to say I don’t like sites that rip off Digg. I have huge respect for what people like Daniel Burka and Joe Stump are doing at Digg. I hate to see people directly ripping off their work (normally badly).

However, Digg does have one flaw. It doesn’t serve the niche very well. Even Kevin Rose recently said: "We don’t really do a good job of servicing the long tail of content." And he is right.

As a web designer, categories such as technology or design are just too broad for me to bother following Digg regularly. Until this problem is resolved, Design Float is an alternative.

Design Float allows me to only see stories relating to web design and although the smaller community means that stories are posted less regularly, what is posted is pretty good.

I recommend checking it out. However, if you are a designer don’t just limit yourself to web design posts. Also look at the other design posts. There is some pretty inspiring stuff there.

Can we stop supporting text scaling?

Finally today, a post by Dave Shea in which he discusses page zooming.

Most modern browsers now support page zooming. The only exception is Safari and that will soon change. This allows users to zoom an entire page, not just the text. Obviously this is beneficial to those with visual impairments. However, is also exciting for web site owners and designers.

Traditionally websites have been forced to support text resizing. This significantly increased development time as well as making design integrity challenging. As text scales, designs often breakdown especially when fixed sized images are involved.

With page zooming these problems go away. It provides the designer with more control and reduces the costs of development. A cost normally passed on to the website owner.

Dave asks whether it is time to support page zoom rather than text resizing. As can be seem from the comments, there is no wrong or right answer. Nevertheless it is an interesting question and one you might want to start considering for your own site.

Back to top

Interview: Ryan Carson on Building an Online Brand

Paul: So I’m really excited to have joining me today Ryan Carson from Carsonified. Good to speak to you Ryan.

Ryan: Thanks for having me Paul. Good to be here.

Paul: It seems that we are crossing paths more and more often with me doing various things with Future Of conferences and you guys kindly giving discounts to my listeners, so it’s good to finally actually have you on the show.

Ryan: Thanks. It’s great to be here.

Paul: So the reason I have asked Ryan on to the show today is to talk a little bit about building an online brand. Carsonified have got lots of different brand identities going on with obviously Carsonified itself and then Future Of and ThinkVitamin and various other things. Ryan’s a bit of an expert really, or he comes across like that anyway, at building an online brand and I wanted to talk to him about how he’s gone about doing that. But before we get into that, Ryan, tell us a little bit about the background of Carsonified. How did it come into being, so to speak? How did it end up being what it is today?

Ryan: Well, it was kind of born four years ago. It started off basically as just me in our top bedroom. I used to be a developer in a web design studio and when Jill and I, my wife and I, got married four years ago we just decided to start our own company. At that point it was just me and I was trying to build web apps and attempting to make money and didn’t really do a great job of it. Then I kind of slowly moved into doing sort of more workshops and things and then we built our first proper web app, which was DropSend, and then we just kept growing and growing and doing more web apps and more websites, for ourself not for clients, and then we launched a couple big conferences, Future Of Web Apps and Future Of Web Design, and all of a sudden now we’re about eleven people. Located in Bath and just love what we do and are really excited to be part of the web industry. So that’s us kind of in a nutshell.

Paul: It’s quite interesting, the approach that you’ve taken. You’ve come from the same background as the vast majority of us yet your business has gone in a completely different direction. You haven’t gone down the road of delivering solutions to clients but you’ve done this quite eclectic thing of a bit of web apps here, conferences here. Was that an intentional thing or has it just kind of naturally evolved that way?

Ryan: It kind of naturally evolved but my mother, and your mom always knows you best, she always said there’s a vein that’s been running through my life for a long time, which is just connecting people. I don’t know, for whatever reason I just get a lot of joy out of connecting people and physical events are just a great way to do that. I’m passionate about the web and therefore it’s kind of like, well, connecting people in the web industry, in the technology sector is just kind of made sense. It did start off with this thing called BD4D which you probably don’t remember, By Designers For Designers. A friend and I did that and it was bd4d.com which is now gone but the idea was we got together designers for free just at a bar and people showed their work. It was in London originally and it kind of took off and I think then it was always just a for fun thing. We called it the Creative Fight Club. I think that was kind of the genesis of our events career. We don’t really see ourself as an events company we see ourselves very much as lovers of the web and technology and we just kind of happen to connect people at events so, it just kind of worked that way. I’m also not a big fan of working for clients because it’s just so hard. I really respect what you guys at Headscape and any web designer web developer because constantly doing work for clients is really hard work and it’s fun but it’s hard and because we run our own conferences and build our own web apps thankfully we’re our own client which gives us a bit more freedom. So that’s kind of how we ended up there.

Paul: It depends on how you look at it Ryan because from my point of view you’ve got thousands of clients while I only have one at a time because you have all those users of your apps and the people who come to your conferences. You’ve got far more trouble in my opinion.

Ryan: I guess you could look at it like that but they tend to be less demanding. They’re not paying us thousands of pounds each so it kind of. But you could look at it like that. We try to treat all of you who come to our show with the same respect as clients, it’s just a shorter term, lower economic value relationship.

Paul: OK, so let’s talk about brand a little bit and profile and stuff like that. Carsonified has kind of built quite a significant online profile and I’m just quite interested in some of the techniques that you’ve used to achieve that. You know, how have you made that happen?

Ryan: OK, well I think underlying everything we do is genuineness. I think that we care very much about honesty and being genuine and being kind and friendly and that sounds a bit fuzzy and happy but that’s just kind of, I don’t know, the way we are. And I think that’s been the key to our success, that when we do things people know that we’re not trying to pull the wool over their eyes or secretly sell them something. We have a genuine interest in the web and the tech industry and so when we do things people kind of know there’s real people that are behind this, we’re not some company. And I think we’ve always been very personal and very human and very transparent and I think that at least set the stage for being successful, but obviously we just follow through with pumping out tons of hopefully valuable content. We see building a brand as basically building friends and I think that on our blogs and through our tweets and at our events and through our communications we try to treat everybody as friends and that’s kind of, I think, a little bit of the key to our success.

Paul: I like that idea of talking about treating people as friends. I think that’s a good way. Too many people treat people as potential customers in preference to actually having any real interest in them as human beings I guess. So it’s good.

Ryan: Well yeah. I just kind of think about who do you like being around? I mean, It’s your friends and there’s a reason for that. I think why does business have to be different? Of course there’s an element of professionality but when you go to the pub and you relax it’s because you feel comfortable with people and I think that whole idea should permeate business. You know with your friends you just buy them a beer, but with your customers there’s significant money being exchanged I think that should involve even more trust than friendship. Hopefully our customers, our attendees and our sponsors really believe that we’re doing the right thing for them. You guys probably do something very similar when you work with your clients. You want them to know that you care about them. That this isn’t just about money that you actually are trying to build something beautiful and worthwhile for them.

Paul: Yeah. I mean it’s interesting. You talking about friends reminds me a little bit of the Innocent smoothie guys that I heard talking at Fuel, which is obviously one of your conferences, where they were talking about how they refer to their customers as family, don’t they? And I always thought was quite a. It sounds naff when you say out loud, referring to your customers as family but if you kind of treat them with that kind of respect, I don’t know, it’s good but it depends on how you get on with your family I guess.

Ryan: Yeah. It could be good or bad but the problem is that would never work if you didn’t actually think Innocent cared about you. If you looked on their bottle and there was E numbers and preservatives and stuff you’d think, “Well, they talk this stuff, but they don’t really seem that committed to doing this.” So I think it really needs to be backed up with a sincere and real effort to support. I mean, we’ve been talking about accessibility, this is a good example, at Carsonified for years. You know, “Yeah we care about accessibility and it’s a great thing,” but we don’t actually know what we’re doing and so we just met with AbilityNet yesterday with Robin and we said we want to get serious about this. I know that you guys are really good at accessibility and sort of putting our money where our mouth is. We want people with disabilities to be able to attend our shows and to use our websites. Let’s actually spend some money on that and get serious about it so at the bottom of each page we’re going to put a little thumbs up symbol that will go to a site that explains why accessibility is important to us and what we’ve done to move towards that with also sort of some tips and hints for people who are disabled like how can you use this site better and get more out of it so trying to put our money where our mouth is really.

Paul: Yeah. I tell you one of my favorite moments I ever had at one of your conferences was, I can’t even remember who the speaker was but the question that came out for the panel was about promoting your business and can you do that outside of San Francisco and California and this guy said you had to be in California you had to be at San Francisco if you wanted to launch a web app and you stood up afterwards and you completely laid into this guy and you said, “No no no, that’s not the case, blah blah blah.” But it does strike me, you know, you’re a Bath-based company and Bath isn’t exactly the beating heart of the web design world and I’m quite interested as to whether you feel that that’s been a barrier to you in any way, being based where you are.

Ryan: That’s a great question. It makes it harder, for sure. You know, we have to go to London to have meetings to go to drink, parties, to network, blah blah blah, but the way we make up for that, and I think a lot of your listeners won’t be in London necessarily or New York or Silicon Valley so this is applicable to all of you out there. It’s all about being visible on the web. And you guys do a good job of this as well. You just have to get yourself out there. So we blog as much as we can, we tweet as much as we can. We try to gather a community around us and that’s the way we make up for the fact that we’re not in London or Silicon Valley. I was going to say another important thing about building a brand, and this fits into that, you need to have an opinion in order to be heard, and that means that you have to be comfortable with the fact that people will completely disagree with you sometimes. You know I think in a way I’ve been successful at building a brand because I’m willing to say something that pisses people off really. You know and I think it’s only interesting to hear from someone who has an opinion. When Paul Graham said that “You know you need to be in the startup hub,” it just really made me angry, because he was basically saying to every one of us, well, you know you’re just kind of screwed, and I just thought, “You know what? That’s just not true, and it makes mad and I’m gonna sort of put my reputation on the line by going on stage and disagreeing with you, a well known entrepreneur.” And if I kind of was afraid to do that you know, not so many people know about et cetera. So yeah, get out there, blog, be as controversial as you can, you know as long as you’re being genuine and be ready for people to say mean things about you really.

Paul: Talking about mean things and people say mean things about you. You’ve come under some criticism for being somewhat pushy in your self-promotion. Do you think that’s kind of justified in any way? Do you think maybe there’s a cultural difference there, the fact that you’re American and are us English more uncomfortable with marketing and promoting ourselves?

Ryan: Yes, I think there is a cultural difference. But I’m also kind of, I like to think I’m friendly but I am sort of a brash person. I’m not afraid to tell you my opinion and do what I think I need to do. While being kind, I don’t want to sort of hurt anybody, but I think there is a cultural difference and I do think that, I mean my wife is English so I’m obviously very familiar with English culture now and British culture and I think there is kind of a slight uncomfortableness with getting on stage and blowing your own horn. I think that in the UK we need to get over that. Not change our culture here but be willing to admit that in the UK if we don’t start to step up to the plate and start talking about ourselves, the rest of the world’s just gonna carry on in the tech space. Mike Harrington, he’s not going to shut up. You know and unless we really start to kind of compete with that and start talk about all of the great things that are going on in the UK and really kind of get out there I think unfortunately it means that the startups and the web designers and web developers that are British are going to start to fall behind in the world stage. For instance, I was trying to think, who are the rock star developers in the UK? Who can you name? I mean I can name a couple but who do you think?

Paul: It’s hard. It’s hard to say. I think there are more rock star designers than there are developers. You know you can think of people like Rachel Andrew, and Drew. Two that spring to mind. Jeremy Keith is kind of a developer but maybe not really.

Ryan: Matt Biddle. You know, there’s a few but it’s just. It’s not the plethora that are sort of being spoken about, in the US particularly, but I have no doubt there’s just as many talented people here. It’s just that, that hesitancy to say, “I’m going to do my own startup. I’ve got a good idea. I’ve got what it takes. I’m gonna start talking about it.” It’s just less common over here. I’m not saying that’s a bad thing and that everyone here should change but I think if you want to build a brand in the web space you just need to admit that I’ve got to get out there. You know I had an interesting conversation with Alex Hunter who is sort of really big in Virgin, The Virgin Group, he’s high up and he’s met Richard Branson a bunch of times. And you know what was crazy? He said that Richard was really shy. And I was like, “Really?” That’s a great example I think of a guy, he’s obviously driven and I don’t think everyone should be like Richard Branson but he’s obviously driven and he understands that in order to get Virgin talked about, to build a brand he’s got to be kind of crazy and get out there. He’s always hanging from helicopters or you know flying spaceships and you know, that’s why people talk about him.

Paul: I think there’s also a little bit within the web design community here in the UK of kind of almost false modesty and a little bit of trying to persuade the world that we’re being very altruistic in what we’re doing and not being up front. I receive criticism for the fact that I’m very open about the fact that Boagworld is a marketing tool and that we make money out of it.

Ryan: But it’s the truth.

Paul: Yeah, exactly. So I think I prefer to be up front about those things, than kind of hide them behind a façade of false modesty to be honest.

Ryan: Well yeah and that kind of goes back to my thing I said earlier about being genuine. I think you’ll always be better off if you’re genuine. And of course we’re sort of painting with broad brushstrokes here, but there’s some very talented people here and I just think, let’s get on our soap boxes and sort of shouting back at the Americans really. And people are doing it, I just think there should be more of it.

Paul: Talking about effective marketing tools, ThinkVitamin, let’s talk about that for a little bit. ThinkVitamin is a website that you run which is basically web design related and web app related kind of articles and stuff like that. I’m guessing that was set up as a marketing tool. Tell me a little bit about why it exists and how you came about setting it up and what its aim is for you.

Ryan: Yes. So thinkvitamin.com has two purposes. It’s to build good will and to give back to the community but it’s also a marketing tool and those things are actually very related. If we pump out great content we give away for free it will be valuable, but those of you who read thinkvitamin.com will also probably come to our shows. It’s a symbiotic relationship. We’re very happy to do that. There is a little bit of altruism there, we do actually want to provide good content and give it away for free but we also realize we needed a platform to talk about our shows. We kind of kept calling in favors like, “Do you mind blogging about Future Of Web Apps?” and “Can you mention it?” We just thought we need to build a big site that people go to so we can tell them about that and we’re fortunate to have great connections. We know people like you and Molly Holzschlag and Kevin Rose and just big Internet people and they all agreed to be on the advisory board and really that’s just a group of people that we trust that occasionally write for us but we’re actually taking ThinkVitamin in a new direction where we want it to pretty much become it’s own little business. So we’ve hired a full time Editor named Simon Mackie and he was really high up at SitePoint actually. And he’s come over and he’s taken the reigns and we’re gonna, yeah we’re gonna basically grow that team and expand that out into its own little business.

Paul: That’s interesting.

Ryan: It’ll be better for the readers. It kind of was dying. The publishing schedule was going down and I think we realized, “Man this is so valuable we have over 50,000 RSS subscribers, closer to 70 if you count the news feed,” and we thought, “This is great, we should grow it.”

Paul: Yeah. I mean it’s interesting in some ways you’ve kind of taken the same approach that we have at Headscape using ThinkVitamin that you could have created a blog on the Futures Of website and you could have put this content there. There’s actually a value in separating it out and making it a standalone thing. It feels less salesy I guess. The same way as I could have posted my Boagworld stuff on the Headscape site. You know it could be the Headscape podcast instead of the Boagworld one. All the rest of it. It just comes on a bit too strong if you do that I guess.

Ryan: I totally agree. And it’s interesting because I had a good conversation with Mike at FreshBooks, and freshbooks.com for those of you who don’t know is an app that helps you send out invoices. He had this blog and he was really slogging his guts out on it and at freshbooks.com/blog or something and he said, “I don’t get it. No one’s really reading it,” and to me it was obvious for that reason you just said. Well it’s clear that this is just a marketing tool. Why would you put a blog on your company’s site, on your product’s site? It’s just kind of obvious and that’s exactly why we haven’t done it for our events, you know we put occasional updates there but it’s hard. As much as I like Web 2.0 Expo or something I would never read a blog from Web 2.0 Expo. It’s just too blech, you know what I mean?

Paul: Yeah totally. It’s interesting that the other thing that you’ve done, which again is something that I do, which is that you haven’t just relied on people coming into your sites, whether it be ThinkVitamin or the Futures Of sites or even the Carsonified site. You’ve made a big deal of kind of going out there and using tools like Twitter and Qik and YouTube. I’m just interested as how effective you’ve found those things.

Ryan: I find Qik to be really effective, or Qik, however the heck you say it qik.com and I was really shocked as soon as I started broadcasting was that just tons of people were interacting and I almost couldn’t wait to do the next one. Annoyingly 3G is kind of spotty in Bath so it makes the quality a little bit bad but I’d highly recommend Qik or any other comparable service. It’s so fun you just take your phone with you, I had to get a kind of crappy Nokia phone or something, because I use my iPhone for normal business but just grabbed it from the 3 store, got a plan I think it’s 20 pounds a month that gives you unlimited data which you’ll need if you’re streaming live video from a phone, and whenever I’d walk to Starbucks or something I’d just turn it on and start talking and people would show up because the way Qik works for people who don’t know is you actually see comments live on the phone screen.

Paul: That’s very cool.

Ryan: Yeah, it’s great for interaction and any tool you can use to interact with your fans will increase your connection and that friendship. It will show you want to be real and you want to connect with people and I think hopefully we’ve achieved that where people think, “Gosh you know Carsonified we know who’s there we know it’s not a company it’s really these people that are there and they’re interested in hearing from me and talking to me,” so that’s been good. YouTube has been amazing, I mean I hate YouTube, it’s ugly, it’s a bit crude you know but man there’s just a lot of people on it. I used this cruddy little video camera, filmed myself giving some tips about business, threw it in iMovie, put some music to it and popped it on YouTube and I think I can’t remember the figures it’s up to, it’s up to like 10 or 15,000 views in literally like two hours work.

Paul: Yeah, I keep meaning to get around to that myself and I’ve never quite managed it.

Ryan: Now you can use a Flip camera. Flip is just a type of camera, you just record and then it’s got a USB dongle built right into it. You pop it in and it actually automatically uploads it to YouTube.

Paul: That’s nice.

Ryan: There’s a couple tools you can use to make it easier. And then Facebook, I’ve been using Facebook a lot just to connect with people and remember people’s birthdays and say hello and just be a friend to them. The more connections you can have to people the better, which builds your brand and I feel that, like a mercenary when I say that, and I don’t like it, like I do believe it’s just a better way to live to connect with people and it happens to build your brand which is great and I like that as well, but I think it’s important that you need to be genuine and actually care about people for this to connect.

Paul: What about Twitter? How have you got on with that? Have you found that a useful tool?

Ryan: I love Twitter. And it’s been probably the best way I think for me to communicate I’ve got I think around 4,200 followers now and I don’t know why people follow me. I don’t think I’m particularly interesting but I do whenever I tweet I try to imagine if I was somebody else and I was reading it if I would find it interesting. I think with Twitter don’t tweet too much, maybe a couple times a day max. If you tweet too much people unsubscribe.

Paul: That will explain my problem then, I tweet too much.

Ryan: I still follow you so it’s not too bad. But you know Evan Williams had a good tip he said you should tweet things every so often that you’re not quite sure if you should tweet because they’re a bit too personal or a bit too blech, because that’s the type of stuff that’s actually fun and interesting to read. Initially we had a twitter account for Carsonified and we deleted it. I think we decided that that was kind of exactly what not to do. People don’t really want to hear from a company, they want to hear from you.

Paul: That’s almost the same as having a blog on your own corporate website isn’t it? Having a kind of corporate Twitter account. After saying that we have set one up for GetSignoff but more as a for announcements. If something goes down with the service or if we’ve done some bug fixes or stuff like that. By far the majority I do via the Boagworld Twitter account which is just me talking about my life. I agree with what you’re saying about putting personal stuff there as well that people seem to like to know what’s going on with each other’s lives. I like to know how Jackson’s doing. People like to know, I don’t know. Making it personal, it’s about that personal connection again isn’t it really?

Ryan: Definitely. And I think that that’s the future, you know just in general. Humankind you know it’s just kind of being personal and not hiding anymore behind companies or brands or policies or terms and conditions. It’s about, “Hey, how can I help you and how can I take care of you?” and that’s just a better way to live and it will massively benefit your company which is great. What’s interesting though is that everybody, including us, continues to look at the Signal vs. Noise blog from 37signals and kind of scratch our heads it’s like, it’s the one blog where it is a company blog, I mean yes it’s called Signal vs. Noise, but it’s on their domain, and yet they have over 90,000 subscribers. It’s funny because I think everyone is kind of, “How do you do that? I want to replicate that.” In the end I think you know, they were kind of first. You can’t have that many of those type of blogs and I think most of us are gonna have to be happy with just doing a good blog that is real and personal whether, and I mean ours is carsonified.com and it seems to work and we have about 4,000 subscribers and for us that’s a pretty good number. We should post more but that’s something I haven’t quite figured out yet and I’d be interested to hear from your listeners what they think about that. Is it possible to have a company blog that people care about or is it just not possible? I don’t know.

Paul: I think what you said there about being first is quite significant. I think originality goes a long way. I mean even with the Boagworld podcast. Simply the fact that I was the first web design podcast it seems to give it a momentum that keeps things going, you know because you keep delivering the goods so to speak which obviously the guys at 37signals really have done. I think there is a momentum in being first in something.

Ryan: Yes and that’s probably the secret sauce.

Paul: OK, So let’s wrap this up with kind of a last question which is: What advice would you give to budding entrepreneurs seeking to increase their profile? Let’s have some kind of top tips if you’ve got some.

Ryan: OK. The first tip I give is to start connecting with people that you feel are influential. You know, spend some time and try to get out and physically meet these people, get to know them and to not be creepy about it, but to get out there, to get in front of them and to get to know them. See if you can do something to help them out, to get on their radar, and I think building sort of a group of friends that trusts you but is also influential is just instantly valuable. So I’d do that and you can use all the tools we talked about for that: Facebook, Twitter, etc. etc. but physical meeting is always the best. I mean you want to have a beer with people.

Paul: And you say you do that by trying to help them out in some way? Because that’s always the difficult thing. It’s all well and good to say, “Get to know influential people,” but how you do that’s the tricky part isn’t it?

Ryan: Well my dad always did something that worked. If it was someone he really respected or cared about and wanted to get on their radar he would find an article about them in a magazine and he’d actually go to a framer and have it framed and then write them a personal note and just kind of say and send it to them and say, “You know, I bet you haven’t had time to actually frame a picture of your article so I thought you might want this for your wall.”

Paul: What a genius idea. I love it.

Ryan: And it’s genuine. I’m not trying to get anything out of you but I respect you and here you go. It’s very subtle. You have to be very careful to not try to sort of bribe people. If you come across that way it’s exactly what you don’t want to do. If you feel, and kind of think deep down, “Do I actually want to be friends with this person or am I trying to use them?” I think you should steer very clear of a person if you just think actually I don’t really like this person I’m just trying to get something out of them. But if you think there’s some synergy there, that’s a great way to do it. Remember people’s birthdays, it’s just a nice thing to do. Stuff like that is a great way. Most people’s friends don’t even do that for them. I’ve had people send me stuff and you know it just makes me smile and I’ll always take their call or answer their email now. So I think that’s a good idea.

Paul: Any others?

Ryan: Um, other tips. Um, probably put a real emphasis on customer service and build a real base of caring in your company. Not just for your customers but for your own team. I think that your team will never be able to treat your customers well if they don’t think that they’re treated well. So I think as entrepreneurs grow and they start to hire people I think it’s important to remember to take care of your staff first and then your customers second. And a really great resource for that is what zappos.com does. Zappos.com has an amazing company culture. They have this book called the Culture Book and every year it comes out and you can buy it and it’s basically a bunch of testimonials, thousands of them from the Zappos employees about why they love their job. And it’s just packed full of ideas of how to take care of your team and it’s a great inspirational resource. I think you can either get it on eBay or Amazon or you can buy it straight from Zappos. A couple hopefully useful tips?

Paul: Yeah that’s excellent. Ryan thank you so much for coming on the show, it’s been really good to get you on and I think there’s some really good useful advice there for anybody looking to kind of build an online brand so thank you very much and no doubt we will have you back again soon.

Ryan: Thank you, it’s an honor.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Listeners feedback:

Site promotion with minimal budget

Our first question is from Adam in the boagworld forum:

I have got a site that needs an awful lot of promotion to work, and have got very little budget to do it with. I could probably spend a little bit on Google AdWords but on nothing else. So, how can I promote my site for little money?

Adam went on to tell me it was a charity website. This makes it challenging. As Adam said…

There are thousands of Charity sites, and many better funded, and just altogether bigger.

In this situation search engine optimisation or Adwords is going to be tough. The competition is fierce and so it will be expensive to be highly ranked.

The other problem with a charity site is that unless it is niche (e.g. bird protection) the potential audience is open ended. However, with limited resources there is little point in targeting ‘the general public’. You will have no impact on such a broad audience.

Target a specific group as it will be easier to gain momentum within a smaller audience. For example, there are Christian charities who do general humanitarian aid. Even though anybody could be a potential supporter, they instead target other christians. Therefore they are well known in that circle. Better to have a lot of support from a niche audience than a small amount of support across the general populous.

Once you have picked the audience use three techniques to reach them:

  • Offline promotion – Engage with your audience offline as well as on. Attend conferences, produce offline promotional material and target magazines your audience reads. As web designers we often forget to power of offline marketing.
  • Social marketing – Identify the social sites your audience You should be wherever your audience is interacting. Finally, seek out key figures who your audience admire and respect. See if you can get them on board and encourage them to promote your site.
  • Editorial promotion - Find out if your audience reads online blogs or magazines. Offer to write articles for these sites. Do not overtly promote your charity but instead write content which will be of interest to the audience. Failing that make use of comments to join in the discussions and increase your sites profile among that audience.

However, be careful. In your haste to promote your site do not spam. The key is to offer something of value. You must earn the right to promote your site.

Sitepoint has an excellent article entitled ‘10 rules for driving traffic using forums‘. Although it is focused on forums, its advice is applicable to most forms of online promotion.

Office Or Not

This from Brad:

A question from Canada! I’m a long-time listener of the show, and I thank you both for your entertainment and inspiration.

A little bit of background first… Two years ago I co-founded a small web development company, and to date we have not yet invested in office space. As we slowly move on to ‘higher profile’ clients, we find it increasingly important to have someone in-house, to answered the phones, do the books, etc, etc, so we can focus on growing the business.

That said, I’m obviously touching on a huge spectrum of possible questions, so I’ll try to narrow it down. I don’t think this is something you have covered specifically on the show before…

Is office space really important for a creative business? If so, what steps would you recommend. And if not, are there better areas to spend $2000 / month?

If I had been asked this question only two years or so ago I would have said that office working for a web team is not important at all. If anything, I would have said that home working was better. The following extract from Paul’s blog, written in 2005, underlines this:

The benefits of a virtual company

By virtual company, I mean we do not have a central office. Each member of staff works from home and we communicate and file share with tools such as Skype, CVS and Groove.

People are often curious about an entire company home working and ask how well it works in reality. My answer is usually that it is brilliant. From the employee perspective, you do not have to commute and you can see a lot more of your family. For example, if I were still working for IBM when I used to commute an hour and a half everyday, I would only see my 2-year-old son at weekends. As an employer, I love it because my staff tend to work the hours they would commute and generally home working is seen as a big bonus that keeps people at the company longer. Not to mention the savings made on premises.

Communication really is not a big problem. There are so many tools out there these days that help, and broadband means that even telephone conversations are now free.

Paul goes on to say that the only drawback of home working is that it lacks the social aspects of working in an office.

Not true I’m afraid. Though of course home working does give you an environment to ‘get your head down’ without interruption, what it really lacks, that phone/email/IM cannot replace, is creative collaboration. People simply do not bounce ideas around like they do if they work together.

Our current office is open plan and there’s nowhere to hide yourself away. This has meant that I haven’t really frequented it that often – I need ‘calm’ to write. However, watching particularly our development team grow and work really effectively together underlined to all of us the value of working together.

So much so that we are about to move into our ‘dream’ offices where there will be a mixture of open plan spaces and areas where we can work quietly.

So (finally!), in answer to Brad’s question, I think that office working is better for the business in the long run and I would say warrants the additional associated cost (though beware the costs, they can mount up – another podcast topic I think). That said, we have managed for nearly seven years before doing it properly (i.e. pretty much all of us will be in together most of the time) so it won’t necessarily damage you if you leave it awhile.

Back to top

134. Chrome

In this weeks show we give you advice on choosing the right hosting company, Teifion and John send us a review of dConstruct and of course we discuss the release of Google Chrome, can it topple IE?

Download this show.

Launch our podcast player

News and events

Managing and choosing fonts

With the new generation of browsers supporting embedded fonts in a consistent way, it is time for us as web designers to start taking typography serious.

One small part of this is how we manage and choose fonts. I confess, I have put little thought into font management. The result is that my choice of font is often not as thought through as it should be. A massive drop-down list in Photoshop does not inspire considered typography.

However, a couple of discovers this week have inspired me to put more thought into the subject.

The first is a review of 25 font management tools. This include both free and paid for software. It also has options for both the Mac, PC and even Linux.

You might ask why we need a font management tool at all. Trust me, if you start installing a lot of fonts on your system you will soon discover why. Large number of fonts become unmanageable and can cause serious performance problems. As a minimum you need an easy way to enable or disable fonts.

The second discovery was an online/AIR font application that displays text of your choice in every font available on your system. This in itself makes font selection much easier. However, this application also enables you to narrow the field by removing unsuitable fonts. It is a great visual way of getting the right typographic look.

jQuery supercharges menu rollovers

Although I am a standards based designer through and through, I have always felt like the nerd in the class. After all it is the Flash kids that get all the girls and attract all the attention with their cool (if somewhat inaccessible) animations and effects.

4 years ago Dave Shea attempted to smarten up our image a little with CSS Sprites. This was a technique for doing CSS based rollovers on menu items. It wasn’t as eye catching as Flash but it was a start and at least I didn’t feel dirty after I used it.

Jump forward to the present and we find a world where the ‘cool divide’ has been reduced thanks to Javascript. Dave therefore felt the need to bring his CSS sprite technique up-to-date on A List Apart, using a sprinkling of Javascript.

Using jQuery Dave takes the plain old CSS sprite menu and gives it an attractive new look. However, at the same time he maintains its accessibility thanks to progressive enhancement.

It is a slightly long winded article (like I can talk!) in places nevertheless it is a nice illustration of what jQuery and CSS are capable of. It is also a technique we can all make use of right now, something A List Apart has been missing sometimes of late.

Can Google Chrome Topple IE?

Without a doubt the biggest story of the week is that Google has launched its own browser called Chrome. At the moment the browser is only available for windows although a mac and linux will follow shortly.

More on my thoughts can be found here

Back to top

Feature: Choosing a Hosting Company

Hosting companies are a dime a dozen. They all offer very similar packages and all seem competitive on price. How then do you choose between them. We discuss this in this weeks feature.

Back to top

Review: dConstruct

Teifion: And the next part of the podcast is sponsored by Ticklefish Design and Searchlight Digital.

John: Hi I’m Marcus Lillington.

Teifion: No I want to be Marcus Lillington. Marcus is the cool one he doesn’t get my name too wrong.

John: No no. You agreed that we would both be Marcus.

Teifion: That’s a fair compromise. No one want’s to be Paul. Anyway right. On with the show. So Marcus what did you generally think of the conference?

John: I thought it was really good actually. Yeah I enjoyed it all. I enjoyed the free coffee.

Teifion: Which you didn’t tell me about till right at the end so I only got one cup.

John: No that’s right.

Teifion: I thought I was a bit unfair.

John: I thought it was sort of obvious there was free coffee. But with regards to the speakers, yeah I enjoyed all of them. Some of the speakers were speaking about things I don’t really you know, I’m not involved with directly but they all put their points across really well. I enjoyed all of them. I think I can take something away from each speaker. What did you think?

Teifion: I quite liked the fact that none of them talked for too long or too little. They were all quite engrossing and though again not directly related to what I do they were all very interesting and I did end up taking something away from it.

John: Yeah and there was humour in there as well.

Teifion: Oh there was Matt and Matt are hilarious.

John: Yeah Matt and Matt get the award for comic.

Teifion: With that subject what was your favorite talk during it?

John: My favorite talk was Tantek on microformats.

Teifion: Okay summarize roughly what he talked about. Except microformats that just kinda basic.

John: Yeah it is really. You know the concept of how microformats are I don’t really know what I’m saying again.

Teifion: Just keep going Paul does.

John: Yeah just how you shouldn’t have to keep reinputting data into all these different sites, all these different social networks that we go on. They should all, you know there should be one sort of central hub which is your sort of central place where you put all your details in and all these other sites that you choose to join up to and put information on. They should all just link up. Microformats again is a new subject to me. I’ve only done a basic vCard and that’s about it. It’s definitely something I’m going to read into.

Teifion: I’ll definitely agree with that summary.

John: Although a little long winded.

Teifion: No not long winded at all. Remember the people who listen to this are used to listening to Paul.

John: Yeah that’s true.

Teifion: Well I’d say that my favorite talk was Jeremy Keith on the system of the world it’s titled. I would have titled it something more like "Why the cloud can be smart and why it can be stupid. Why you think you can predict it and why you really can’t." It was a great intellectual talk and I’m pretty sure that most of it went over my head. Possibly into the head of who ever was sitting behind me. He basically said that you can’t predict what will be the next big thing like Facebook or Twitter but you can create good foundations or nurture something so that it’s more likely to be the next big thing.

John: Yeah that’s a good summary there as well. I mean basically I thought it was just about a black swan.

Teifion: That is true actually. It’s just all about the black swan. You can’t predict it. It’s got a big effect and after it you’ll all go back and say "Hey we knew this was coming.

John: We knew this black swan was going to be born.

Teifion: Yeah that’s how it works isn’t it. Tell you what, what do you think the best moment of the conference was to you?

John: Ah. I mean there’s a lot of moments but the best moment has got to be Teifion, as Marcus calls you, when you went up to Ryan Carson to thank him for the free complimentary tickets to dConstruct.

Teifion: I’d like to point out that yesterday as in the day before the conference I had a 5 hour train journey from South Wales to Brighton. I then went to bed really late and got up really early. I was really tired and confused.

John: Still no excuse. You call yourself a student.

Teifion: No I’m a graduate.

John: Oh okay. There’s a slight difference. But luckily for Teifion I pulled him back at the last moment to save his ???? it wasn’t Carsonified that supplied the tickets it was Clearleft.

Teifion: I knew it was Clearleft that supplied the tickets. I just got confused. Tall guys in hats are very confusing.

John: What about you? What was your favorite moment?

Teifion: I think it was when we actually went up to thank Jeremy for putting the whole event on and for possibly the free tickets. It wasn’t actually Jeremy that we needed to thank aparently. I like the way that you sort of thought how to do it. You went for the wussy catch his eye approach. I just walked up and said "hi thanks for the tickets. Have a business card." I didn’t actually give him a business card.

John: No but that is a funny point. Tef did hand out quite a few business cards. Which is good I mean networking is really good. Apart from the lady who you tried to impose your business card on.

Teifion: I don’t think she heard me.

John: No she just blanked you.

Teifion: It’s possible. It’s happened before. You remember why we went to see Jeremy don’t you. It’s because sadly Marcus your jokes are sadly not up to the calibre that we would like. Granted their not dire, I mean if Paul was in charge of it they would be dire or worse. But I think Marcus’ jokes could do with some improvements. So we went up to Jeremy to ask him for a joke. Do you want to tell the joke.

John: Yeah I would love to tell a joke. Apart from the fact that I actually can’t remember it. But seeing as you already knew it and knew the punch line you can tell it.

Teifion: Okay why did the chicken cross the mobile strip?

John: I don’t know. Why did the chicken cross the mobile strip?

Teifion: To get to the same side. If you don’t know what a mobile strip is Google it.

John: Unfortunately I don’t.

Teifion: That’s a shame. Well I suppose we’re hitting the 6 minute mark which if we were Paul we’d go "Well lets start on the news." or maybe waffle on a bit more. We’re actually going to have to conclude this partly because it’s not our own podcast. So I figured what we could do is we can end it with a question. What do you think of that idea?

John: Good idea.

Teifion: Well what I’m going to do now is I’m going to put you on the spot and I’m going to pause it for 30 seconds and you are going to come up with a question and then you’re going to ask it.

John: Brilliant. Was that the pause?

Teifion: Yes a good long 30 seconds.

John: I thought you were just going to do a pretend pause and then we’d just go right into it.

Teifion: No that would be something that Paul would do. Paul’s not cool.

John: My question to both of you Paul and Marcus is, "Would you advise up and coming web designers or developers to email and get in contact with local agencies with regards to getting some kind of work experience with them? Even if it’s only for like a day or two." So that’s my question.

Teifion: Fair enough. I suppose I could add a sort of additional question. It is "If you put so much effort into your work Paul you presume you put a lot of effort in to your family like. I know you put a lot of effort into youth work. Why is it so hard for you to put just a little tiny bit of effort into learning how to pronounce a name that so many people I know can so easily pronounce? It’s (he didn’t spell it so I don’t know). It’s really not that hard.

John: Teifion

Teifion: See if you knew me for longer you’d be able to pronounce it. Maybe Paul’s just not cool enough.

John: Maybe you should all just call him Ty from now on.

Teifion: That could work. Anyway that’s it.

John: O I’ve got one more point. Stanton.

Teifion: Where is Stanton?

John: Stanton we agree well we met him. He said he wanted to help and come in and say a few words at the end of the podcast but we don’t know where he is. He was last seen

Teifion: chatting up randoms.

John: Yeah that sums it up.

Teifion: I could guess at what he would say I could be completely wrong though.

John: I think we should end it on that note.

Teifion: Bye.

John: Bye.

Thanks goes to Curtis McHale for transcribing this review.

Back to top

130. Air

On this week’s show; Paul talks about better understanding disabled users. We have a tip from Jeremy about problem solving and Jonathan Snook introduces us to Adobe Air.

Download this show.

Launch our podcast player

Housekeeping

A few pieces of housekeeping I wanted to quickly mention at the start of this week’s show.

  • FOWA – The guys over at Carsonified have been kind enough to offer boagworld listeners a 15% discount off of the upcoming Future of Web Apps conference in London. The conference takes place between the 8-10 October and is an absolutely superb event. To claim your discount use the code FOWA-bw at checkout. There are only 50 discounted places, so be quick.
  • SXSW – Talking of conferences can I ask a favour of you all. Marcus is desperate to go to next years SXSW conference in Texas. However he is only allowed to go if he is speaking. As you may know speakers for SXSW are chosen using a voting system. So, in order for Marcus to attend SXSW he needs your votes. Give an old popstar a second chance. Go vote for him now!
  • Think Vitamin - Finally I just thought I would quickly mention an article I have recently written for the Think Vitamin website. It is entitled "the 5 hidden costs of running a CMS" and I thought you might be interested in check it out. It is an extract from chapter 8 of my book the Website Owners Manual, which as I have said many times before, you can download right now ;)

News and events

Designing for emotion and flow

Not long ago I wrote an article for boagworld on the importance of context. In that article I highlighted elements such as time, mood and environment as key factors that contribute to a users context when accessing your site. This context directly impacts how the user interacts with your site. What I didn’t tackle in my article is exactly how context should affect the way you design.

An article called "Design for Emotion and Flow" on the boxes and arrows website, takes my post a step further by going into a lot more detail about what affects users behaviour and how we should design in a way that accommodates their state of mind.

Its quite an in-depth article but worth the read. It touches on user physiology as well as issues of environment and although it can be slightly theoretical at times, it focuses in on what you can practically do towards the end.

Articles like this always leave me with mixed feelings. They can easily feel overly analytical to the point where you wonder if they are applicable in the real world. However, in my experience if you take the time to read and digest them, they start to influence the way you design on an almost subconscious level.

7 essential guidelines to functional design

By contrast our next article is much more down to earth. The "7 Essential guidelines to functional design" is another post by smashing magazine and focuses on some fundamentals of good design.

However, don’t get the impression that this is just an article for designers. The principles it talks about also apply to developers and website owners. Basics such as the goal and audience for your site are things everybody should be considering.

According to Smashing Magazine the 7 essential guidelines to functional design are:

  • Consider our product’s goal
  • Consider who will be using it
  • Consider what your audience intends to do with it
  • Is it clear how to use it?
  • How does your user know it’s working?
  • Is it engaging to your users?
  • How does it handle mistakes?

Whether this is the definitive list, I am not so sure. However, it is a worthwhile read especially if you are just starting out.

15 companies that really get corporate blogging

While we are on the subject of lists our next post is "15 companies that really get corporate blogging". What can I say, I am a sucker for a list!

This one is really for those of you who run a website and in particular run a corporate blog. As the name suggests it lists companies that do a good job at blogging. However, it is not the list that attracted me to this article, it is the reason why the companies got on the list.

There is a lot of good advice to be gleaned from this post. Just a few snippets I picked up include:

  • Don’t just pimp your products, talk about other stuff too
  • Post regularly
  • Encourage conversation
  • Be candid and open
  • Offer advice and lessons you have learnt

The list could go on. Corporate blogging is by and large a disaster with many companies just failing to ‘get it’. According to a recent report, 56% of corporate blogs just republish press releases and two thirds hardly ever receive comments. However, as is highlighted in this post there are a growing number of organisations that are doing things right and we should follow their example.

Learning from signage

If you have listened to this show for any length of time you will know I am a great fan of looking beyond the web for inspiration. I also believe there a lot to be learnt from other forms of design including signage.

It would appear that Mark Boulton would agree with this sentiment judging by his recent post on airport signage. Mark, compares the signage in two airports and looks at how the lessons learnt apply to web design.

Some of the gems he discovered include:

  • Signage should work without colour coding
  • Only designers care about fonts
  • Don’t rely too heavily on pictograms
  • Always put your ideas to the test

This is a great article which should (if nothing else) encourage you to look at the world around you for inspiration.

Back to top

Interview: Johnathan Snook on Adobe Air

Paul: Joining me today is Johnathan Snook who I recently saw at the @Media conference. It was great to see you there again Johnathon.

Johnathan: A pleasure to see you there as well.

Paul: You really got me with your presentation. It was an excellent presentation. Very, very enjoyable, and you touched on the subject of Adobe Air. It wasn’t the main thrust of the presentation, but it was the bit that really grabbed my attention so I thought "let’s get you on the show and have a bit of a chat about it" if that’s O.K. with you.

Johnathan: Absolutely.

Paul: Good. So, let’s start from the absolute basics so that we’re all on the same page. Could you just explain very briefly what Adobe Air is so that people that haven’t come across it before kind of know what it does.

Johnathan: Certainly. Adobe Air is a development platform for making desktop applications to make desktop applications cross-platform. So, something that you build once and that would work on Windows, Mac OSX as well as Linux.

Paul: O.K. And this is built using web technologies…

Johnathan: Yeah, It’s really great that they’ve managed to leverage what they know things like Flash, Flex, and really the kicker is being able to develop desktop applications using HTML, CSS and JavaScript that, obviously, a lot of us web developers are going to be familiar with.

Paul: Sure. So, I mean that’s I guess why we’ve included it on the show even though it’s a web design podcast, that kind of line between the web and desktop applications seems to be blurring and Air is a big part of that. What drove you to kind of investigate it and kind of look into Air as a product?

Johnathan: For me, it was just a curiosity. The platform, what it could do, knowing that I could create a cross-platform desktop application was kind of enticing. When we build for the web we’re trying to do things as cross-platform as possible make sure that we target as many browsers as we can, and really be able to reach out to the people and do really cool things. So, for me it was like, O.K., well what can I do with this what are the possibilities. One of the first things that went off in my brain was building a Twitter application. At the time, when Twitter was up for more than 24 hours straight, it was kind of cool to be able to build a desktop application to kind of separate out from the web, because the web site was frustrating me to know end, and to be able to put in stuff that made the site more usable for me and in the end was a tool that I got to use every day and that I enjoyed to use.

Paul: Cool. I’ve kind of got a basic understanding of it. I understand what it does and I understand the kind of technologies that exist under it, but can you kind of give me an idea of, you know, how it works as such. I know how to create an HTML page, CSS and Javascript and stuff like that. How do I get from there into turning it into a Air application?

Johnathan: It’s surprisingly quite easy. What happens is, if you look at the Air runtime, is it essentially runs your Air application, so you don’t create a .exe file or a .dwg file you don’t create an executable in the traditional sense. What you end up doing is creating a .air file that you use to distribute. The Air runtime actually handles that. Building that .air file, there is an SDK available from Adobe that allows you to compile this Air file. So, those Air files are pretty straight forward, they’re really just like a ZIP file with some extra information in it. So, to create an actual Air application, you can do it just using a normal text editor, you can do with specific IDEs like Eclipse. If you’re into Flex development, they have Flex builder. If you’re into just doing HTML and CSS kind of thing, you might want to look into Aptana they have Air support built right in. If you’re a fan of Dreamweaver, there’s a Dreamweaver extension for automatically compiling your application, and being able to set properties on your application. So, things like how big should the window be when it opens up, can I resize it, what kind of stuff can I do with it. That obviously, in this GUI sense, to a certain degree can make things a lot easier. So, I think there are a lot of benefits to using an IDE with built in support, but you don’t have to. There is the capability of just using a normal text editor and then running the SDK command line sequences to actually generate the Air file. It is really straight forward.

Paul: So, the one selling feature or one thing about Air that’s been promoted quite heavily is the fact that you can take online applications offline in a sense. The application is still usable even if you’re not connected to the Internet at a particular point in time. I think they showed off, right from the beginning, an eBay example of that where you could do all kinds of things offline, and then when you connected it was all uploaded. How does that kind of process work? There must be some kind of local database that’s running, one presumes.

Johnathan: That’s correct. I think some people may be familiar with Google Gears in having the local storage using the SQLite database. Adobe Air actually does something very similar. They do have a local SQLite database that you’ve seen create local databases and store any information there. There’s actually different ways. You have access to the local file system, so you can certainly write new files. Say, if you wanted to create new text files, xml files, new binary formats. So, if you wanted to create an image editing software that stores files in a binary format, you could do that. So, there’s a lot of flexibility there because you do have some access to the local system. You have network connectivity, so you can do either regular AJAX calls or you can do socket connections. You can connect to web servers. You can connect to remote database servers. You’ve got a lot of flexibility and a lot of control because of that.

Paul: You seem quite enthusiastic about the development environment. What has been your impression of it. Was it something that was a steep learning curve, but when you get there it’s really cool, or is it easy straight out of the box? What were your impressions?

Johnathan: I think it’s going to depend on what it is you’re trying to do. I think that there are going to be some frustrations. There are going to be some things that you have to understand about the environment. To give you an example; the HTML/CSS stuff is pretty cool it basically runs on a WebKit engine, which is the same engine that powers Safari. That gives you a lot of control and stuff, but ultimately that WebKit engine is still running within a Flash runtime. So, there are some limitations to that because of the fact that Adobe just simply hasn’t built in certain support. Things like support for double byte character encoding, so Chinese and Japanese character sets can be more difficult. However, they are working on that. Version 1.1 is supposed to be coming out soon it will have support for that, but right now you’re limited because of that.

Paul: What kind of people should be delving into this. Is this the kind of thing that only a hardcore developer like yourself should be touching or is it something that somebody like myself that would be a front-end interface designer should I even bother picking it up or am I better keeping away?

Johnathan: It’s really easy to develop in. I think you can make really quick solutions really straight forward. To give you a comparison; there is a Mac software called Fluid for creating site applications, but that is separated from the browser. You can kind of plot the same kind of things with Adobe Air because you do have that WebKit engine. You can basically use it as a browser. So, to give you a quick example; Muxtape, which is an online mix-taping thing you upload MP3s, and then people can go to your page and listen to your mix tape… The problem is that if you accidentally close the browser, you lose that information. I think there are a lot of websites that have this stickiness factor where you want to decouple the application from the browser. So, I put together a really basic example in which you type in a URL and it loads up a mix tape. That’s a very straight forward interface, but to be able to do that in a desktop application that I can minimize to the dock or the system tray is something that is, I think, a lot more appealing than running this kind of stuff through the web browser. And, it was really easy to put together. I spent about an hour one evening to put that kind of thing … I mean it is a very basic prototype, but the fact is that it is very straight forward to put that together. So, I think if web developers have ideas, they can really take advantage of that and build pretty cool stuff.

Paul: So, it’s not something we need to be intimidated of, then.

Johnathan: No, absolutely not.

Paul: The other thing that maybe is a bit of a concern to us very standards-based designers in comparison to the Flash community is that Adobe says we support CSS and HTML, as well as Flash, but obviously Flash is their product. You kind of get this feeling that they’re going to always support Flash more and that CSS and HTMl are a bit of an afterthought. Is that the case, or is that unfounded?

Johnathan: To a certain degree, it is the case. It’s, I think, unfortunate. I think they are more familiar with Flash. They’re more familiar with that environment. So, as you try to build the equivalent of a browser within this Flash runtime it’s going to be extremely difficult and I think things are going to get missed. And, I saw that sort of along the Beta process. Things like no support for "undo." I mean, that’s a pretty basic thing, but the fact that that’s not built in there does hamper people trying to build HTML-based applications. It works great in Flash-based applications and then what you end up running into is, to give you another example with Snitter, my little desktop Twitter application because it’s built using HTML and CSS, it had certain limitations, but there’s other Twitter clients built with Adobe Air that were built using Flash that actually have different limitations. So, people would say, "Well this application can do it just fine. Why can’t yours?" You have to kind of explain to them that it’s because of the limitations of how the environment was developed. Despite the fact that they are both still Adobe Air applications, technically they’re done differently and there are maybe more limitations as a result of that.

Paul: Is there an opportunity to mix Flash and XHTML and CSS and whatever else together, or do you have to make this decision up front?

Johnathan: No, absolutely not. Certainly, within the Adobe Air environment, you have that flexibility to create these little hybrid applications. I think Snitter, for example, is a good example of it. There’s a lot of Flash components out there that can do certain things. For example, a bunch of folks made an iMap component, so you can actually connect to an iMap server. However, that component is Flash-based. Another component out there that I saw was a Jabber client. So, let’s say you wanted to do a GMail chat client or some other Jabber-connected application, you can import those Flash runtimes into your application and use them from Javascript. So, you do have that flexibility to use both technologies and take advantage of that. I’ve certainly done that with Snitter, and I’ve done that with other applications as well because we have that flexibility of the environment. I think there is that sort of understanding that you can do that, and actually look out for the solutions that not only are HTML and Javascript, but that are Flash-based as well and come up with new ways of thinking because I think, traditionally, as web developers, we tend to separate those two as much as we can.

Paul: That’s quite interesting. You talked about this kind of hybrid approach of combining Flash and HTML at @Media combining them together and about how we had some fears as standards-based designers of even touching Flash in any kind of context. Is that a kind of approach that you would apply beyond Air to the web generally?

Johnathan: Absolutely. I think MuxTape is a great example of that. To be able to play MP3s isn’t something that’s easily done using Javascript. However, you can take advantage of Flash and use its capabilities to play MP3s to create new interfaces that aren’t specifically 100% Flash-based; that we have something that’s still HTML and Javascript that interacts in ways that I think a lot of us are comfortable with, but still have access to a lot of features that Flash offers to us you know, the fact that we can create the bridge between the two; we can do that on the web just as well as we can do that within Adobe Air.

Paul: O.K. That all sounds very interesting and it certainly has made me want to kind of pick up Air and have a play with it and kind of get my hands dirty. I guess, perhaps as the last question then, is what tips would you give to people like me that haven’t yet touched Air and are considering having a play. What are the big traps to avoid? What are the good things to start with. Where should I begin the journey, so to speak?

Johnathan: I think probably one of the first things you should do is head over to the Adobe web site. They have a number of really good resources to start off with. Obviously, you’re going to need the SDK so you can actually build your applications, but they also have the dev center where they have a number of introductory articles to learn how to build applications and it doesn’t mean those applications have to be built using Adobe applications like Dreamweaver, you can certainly do them without. So, there’s a lot of really good tutorials on there. From there, they lead off to a number of resources outside of Adobe that would certainly help you get started.

Paul: What about mistakes? What were the big mistakes you made up front that, with hindsight, you would avoid? Or, did you get it right the first time?

Johnathan: I don’t make mistakes! Well, I think one of the cool things about the environment is certainly the flexibility to take advantage of a lot of advanced CSS. Because you are using the WebKit engine which, when it comes to CSS 3 support, is one of the most advanced, you know that you have support for things like rounded corners, border radius, that you have support for multiple backgrounds, image-based borders you can do some really cool stuff with that that is really fun to play around with. You can create transparent applications, so if you wanted something that was completely and uniquely shaped, you can do these really cool things. The downfall for that is that you can quickly start running into performance issues. If you start creating all of these alpha PNGs that are layered over the top of each other, they give you a lot of flexibility, but unfortunately are a performance drain on how much your system can actually handle. I think that was one of my initial mistakes going in and saying "Wow, I’ve got all of this stuff that I can use let me throw everything at it" and then realizing that, you know, maybe that wasn’t the best solution. I think we still have to be wise in considering how we structure our CSS, how do we structure the design in such a way that, while it’s still flexible, it still does things from a performance-minded aspect so we’re not doing things that are going to unnecessarily slow down or application. Those are things that we’ve got to think about.

Paul: That’s some really good advice Johnathan. Thank you so much for coming on the show. That was a great introduction to Air. Hopefully it’s encouraged a lot of people listening to the show to go out there and give it a go. Thanks for coming on and talk to you again soon.

Johnathan: Awesome. Thank you very much.

Thanks to Aaron Cooper for transcribing this interview.

Back to top

Listeners feedback:

Getting a feel for accessibility

Our first contribution is from Kenneth and is about accessibility:

I listen to your podcast all the time and am working hard to become a very good web designer. My question for you is about accessibility, I hear a lot of people talking about it but not a lot of web designers are working hard on it to create sites that disabled people can use. I want to be a person who builds accessible sites that really work. How would someone know if their site is really accessible? How can you feel what disabled people are feeling when they visit your site? Could you talk about the different tools that disabled people use to go online so that we can use those tools and try to understand how they feel.

Okay. Let’s start by clearing up a minor point. Validation is not directly related to accessibility. Having a site that validates does not make it accessible. Equally, a site that does not validate is not necessarily inaccessible. Admittedly a site that validates is more likely to be accessible, but that is all. It is great you validate your code and you should continue to do so. However, it is okay if your site does not always validate. There are good reasons why Boagworld does not and I am sure the same is true for Clear:Left.

Let’s turn our attention to the heart of the question; how can you better understand the experiences of disabled users? It is an admirable aim but one that ultimately is impossible to achieve. There are so many different types of disability that you cannot associate with them all. That said, I can make a few suggestions which might help.

A good place to start is by trying out a screen reader. Increasingly screen readers are bundled with operating systems. Recent versions of Microsoft Windows come with a basic Narrator, while the Mac OS includes a more feature-rich screen reader called VoiceOver. However, the most widely used screen readers are the separate commercial products like JAWS for windows. This is probably a good place to start as JAWS offers a free trial version for you to experiment with.

However, be warned. When you first use a screen reader it is an intimidating experience. They take a lot of getting used to and can leave you with the impression that a blind person will never be able to use the internet. An alternative would be to watch a demonstration of a screen reader in action. Ian Lloyd did an excellent demonstration for Boagworld a while ago.

Of course not all visually impaired users are blind. Some use screen magnifiers which enlarge screen content. Again, most operating systems have this functionality built in so you can easily try this for yourself. However, there are also a number of commercial products you can try out too.

The other form of visual impairment worth investigating is colour blindness. Although not as serious, it is far more common and affects a large number of users. There are a couple of tools which will give you an idea of what a colour blind person is seeing. The first is Colorblind Web Page Filter which allows you to enter a url and see what that page would look like to a colour blind user. The second is Sim Daltonism, a colour blindness simulator for the Mac OS. Both will help you better understand what the web is like for colour blind users.

The final little tip I want to share with you is kind of stupid but does sort of work. I do a lot of design for the elderly and they often suffer from a mixture of visual problems and motor issues (like arthritis). In order to better understand their experience I have bought a pair to ski gloves and some reading glasses (I don’t need reading glasses). Every now and again, I surf the site I am designing wearing both the glasses and gloves. The glasses make the screen hard to read while the gloves hamper my use of the mouse and the keyboard. There is nothing more frustrating than trying to select something from a drop down menu wearing ski gloves!

Turning problems upside down

Our second listener contribution for today is not a question but a tip. It comes from Jeremy and he writes:

I can’t remember the name of the book off the top of my head (Getting Things Done?) that you’ve been recommending, but you mentioning it reminded me of a problem solving method that I learned a few years back that I thought you might enjoy. It’s called turning the problem upside down. It sounds stupid, but honestly it works pretty well.

The principle behind it is if you can’t figure out a solution to a problem or are having trouble coming up with different ideas, you turn the problem upside down, or invert it, and then come up with solutions for the backwards problem. For some reason it’s much easier to think of the backwards solutions. Then you flip them back to normal and there are your solutions. Sounds confusing, so here’s an example:

Problem: You want to increase traffic to your website

Turn the problem upside down: You want to decrease traffic to your website

Some ‘off the top of my head’ Solutions:

  • Make the site unfriendly
  • Randomly shut it off
  • Never update anything
  • Be rude
  • Keep key content hidden or difficult to find

Now let’s flip the solutions back again and see if they solve the original problem:

  • Make the site more warm/friendly
  • Make sure it stays up reliably
  • Be good about frequently updating content
  • Be aware how of my copy and if I’m talking down to my visitors
  • Make sure the good content is easy to find and prominent

What a great little tip! Excellent when you are suffering from creative block. I love it when you guys send in suggestions rather than questions. I know from the forum that the boagworld audience is hugely experienced and its great when you share that experience. Keep them coming!

Question: Headscape tabs

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

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

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

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

Choosing AJAX

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

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

Screenshot of Headscape website with Javascript disabled

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

The Javascript

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

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

The function carried out the following actions:

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

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

The problem with AJAX

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

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

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

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

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

113. Hiring

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

Play

Download this show.

Launch our podcast player

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

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

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

News and events

Highly extensible CSS

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

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

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

Video tools

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

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

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

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

Microformat boost

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

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

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

Back to top

Feature: Hiring new staff

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

Back to top

Expert interview: Christian Heilmann on common Javascript mistakes

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

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

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

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

Paul: Um hum…

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

Paul: Yeah…

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

Paul: Um hum…

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

Paul: Yeah.

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

Paul: Umm…

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

Paul: Yeah.

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

Paul: Mmm…

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

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

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

Paul: Um hum…

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

Paul: Yeah.

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

Paul: Mmm hmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

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

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

Paul: (Laughs)

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

Paul: Mmm.

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

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

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

Paul: Mmm…

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

Paul: (Laughs)

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

Paul: Mmm.

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

Paul: Okay.

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

Paul: Oh okay.

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

Paul: Mmm.

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

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

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

Paul: Mmm…

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

Paul: Mmm.

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Um huh.

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: Mmm.

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

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

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

Paul: Mmm.

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

Paul: Mmm.

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

Paul: Right.

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

Paul: Mmm.

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

Paul: Yeah.

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

Paul: Mmm hum.

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

Paul: Yeah.

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

Paul: Umm hmm.

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

Paul: Mmm.

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

Paul: (Laughs) …or drinking…

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

Paul: Mmm.

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

Paul: Mmm.

Christian: Otherwise you start preaching to the choir.

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

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

Paul: Okay.

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

Paul: What do you mean by that?

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

Paul: Okay yeah.

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

Paul: Yeah.

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

Paul: Mmm hum.

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

Paul: (Laughs)

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: Yeah.

Christian: And that’s never the case.

Paul: Hmmm.

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

Paul: Mmm hmm.

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

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

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

Paul: Mmm.

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

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

Christian: Yeah.

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

Christian: See you soon. Bye.

Back to top

Listeners email:

Rolling out new features

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

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

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

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

Here’s the solution I had planned:

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

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

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

Content management and CSS

Our second listener contribution is a question from Adrian…

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

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

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

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

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

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

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

112. Jina

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

Play

Download this show.

Launch our podcast player

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

News and events

Some customers are not worth caring about

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

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

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

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

Version targeting rumbles on

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

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

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

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

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

Let users tagging your posts with delicious

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

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

Back to top

Feature: Using HTML snippets

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

Back to top

Expert interview: Jina Bolton on women in web design

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

Jina: I am doing well. How are you?

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

Jina: [laughs]

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

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

Paul: Ummm!

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

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

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

Paul: Ahhh, I see.

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

Paul: Right.

Jina: Anyway, different subject. [laughs]

Paul: Okay!

Marcus: [laughs]

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

Jina: Yeah.

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

Jina: [laughs]

Marcus: [laughs] I can live with it.

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

Jina: Yeah, I think it will be great.

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

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

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

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

Jina: [laughs] You found my tactic.

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

Jina: Sure.

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

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

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

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

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

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

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

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

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

Paul: Hmmm.

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

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

Jina: Right.

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

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

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

Jina: [laughs]

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

Jina: Ewe I have no idea. [laughs]

Paul: [laughs]

Marcus: [laughs]

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

Paul: Hmmm.

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

Paul: [laughs] Good for you.

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

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

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

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

Jina: No, no.

Paul: [laughs]

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

Paul: Yeah.

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

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

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

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

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

Paul: Yeah.

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

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

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

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

Jina: [laughs]

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

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

Paul: [laughs]

Jina: [laughs]

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

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

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

Paul: Ummm!

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

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

Marcus: [laughs]

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

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

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

Paul: [laughs]

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

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

Jina: Okay.

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

Jina: That sounds good.

Paul: Okay.

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

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

Jina: [laughs]

Marcus: Ha ha ha.

Jina: Thatís awful.

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

Jina: Okay. Alright.

Paul: Bye.

Back to top

Listeners email:

SXSW

This week we have a couple of questions about SXSW:

Rich asks…

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

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

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

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

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

Talking of parties and socialising Matthew asks…

Have you considered doing a live show at SXSW?

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

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

Moving to the mac

Brenda asks…

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

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

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

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

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

110. The mighty Meyer

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

Play

Download this show.

Launch our podcast player

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

News and events

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

CSS reference library

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

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

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

Stay on :target

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

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

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

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

Read the article and you can see the potential yourself.

Search behaviour patterns

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

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

10 principles of effective web design

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

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

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

Back to top

Feature: The profit and loss of usability

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

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

Back to top

Expert interview: Eric Meyer on version targeting

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

Eric: Cheers, hello.

Paul: Cheers, very British of you.

Eric: I try to localise my content.

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

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

Paul: Right.

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

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

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

Paul: Yeah.

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

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

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

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

Eric: Well I can see quite a few objections.

Paul: *laughs*

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

Paul: Yeah.

Eric: Good old WTF basically.

Paul: *laughs*

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

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

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

Paul: Yeah.

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

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

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

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

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

Paul: Yeah.

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

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

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

Paul: Yeah.

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

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

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

Paul: Yeah.

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

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

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

Paul: Yeah.

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

Paul: Yeah.

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

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

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

Paul: Yeah.

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

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

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

Back to top

Listeners email:

Basic CMS options

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

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

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

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

The importance of blogs

Our second question is from Lauren:

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

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

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

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

109. Rissington?

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

Download this show.

Launch our podcast player

News and events | Anton Peck on imagery | Listener emails

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

News and events

Microsoft to automatically roll out IE7

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

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

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

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

IE8 divides the standards community

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

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

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

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

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

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

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

HTML 5 is coming

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

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

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

Career advice for web designers

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

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

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

Advice includes…

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

The list goes on and is definitely worth reading.

Back to top

Expert interview: Anton Peck on imagery

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

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

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

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

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

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

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

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

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

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

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

Anton Peck: A little bit.

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

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

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

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

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

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

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

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

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

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

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

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

Paul: Yes, exactly.

Anton Peck: That’s a whole other discussion.

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

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

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

Anton Peck: Definitely.

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

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

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

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

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

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

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

Anton Peck: It’s Crestock.com.

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

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

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

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

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

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

Paul: Yeah, couldn’t agree more.

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

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

Anton Peck: Certainly.

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

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

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

Anton Peck: Exactly what I was thinking, yes.

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

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

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

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

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

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

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

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

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

Anton Peck: .co.uk

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Anton Peck: Absolutely.

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

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

Paul: Yeah, go for it.

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

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

Back to top

Listeners email:

Textmate reviewed

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

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

Javascript or JQuery

The second listener contribution comes from Will who writes…

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

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

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

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

105. Christmas Cheer

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

Download this show.

Clear:left winner

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

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

News and events

Opera goes on the offensive against Microsoft

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

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

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

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

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

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

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

Boagworld christmas appeal

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

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

The best CSS designs of 2007

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

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

Marcus’ bit: Quick and Dirty Wireframes

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

Back to top

Paul’s corner: Geek Gifts for Christmas

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

Back to top

Ask the expert: Introduction to the Email Standards Project

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Happy Christmas!

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

Show 102: Worktime blues

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

Download this show.

Launch our podcast player

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

News and events

10 Absolute “Nos!” for Freelancers

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

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

Making the most of working with designers

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

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

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

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

How Open ID will change your site

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

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

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

Good practice when working with Tag Clouds

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

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

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

Back to top

Marcus’ bit: Requirements capture

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

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

Existing site review

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

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

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

The main purposes of the review are:

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

Stakeholder interviews

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

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

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

Work together

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

Create the document

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

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

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

Back to top

Paul’s corner: Spending your training budget

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

Training course give away

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

Back to top

Ask the expert: Roo Reynolds on virtual worlds

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

Roo: Hi Paul,

Paul: What on earth is a meta verse evangelist?

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

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

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

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

Roo: A thought leader?

Paul: A thought Leader

Roo: I remember inheriting your old star wars toys Paul

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

Roo: Its all thanks to you (giggle)

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

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

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

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

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

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

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

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

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

Roo: well, we are maybe quite weird in because we do an awful lot in virtual worlds. We do everything from recruitment too employee discussions and meetings. although of course we cannot use a virtual world for confidential discussion, we certainly have the types of meetings we would have in public spaces, like conferences, we also have virtual facets to real world conferences like forties a really big conference we run, and we had that for the first time happening in second life running in parallel to the real world event so people who could not make it to the real world event could at least attend. They could see and hear some of the presentations and they could mingle and network. So like I said we are a bit weird in that in that we do so much, that’s partly because we are such a big company. Now a lot of other people would look at it and say they have a very particular need or desire, something they want to get out of it and for some people historically it has been marketing, or advertising, it has been to reach a wider audience or to reach them in a different way. Which is more playful and allows them to be really participants rather than just eye balls

Paul: yeah, I mean one thing you said was earlier was that you referred to virtual worlds as a subset of the internet and the web. Its another that that going on online. One of the things which strikes me is that if you do something, in something like second life, say if you run a conference that conference is kind of just fenced into the second life world so its not going to get picked up by search engines, its not going to be very accessible and things like that do you think that there are going to be changes in that, do you think there will be more crossover between virtual and maybe the more traditional web

Roo: yeah absolutely this is one of the areas that really excites me at the moment, this whole area of interoperability and that needs to be not just between different virtual worlds but also between the web and virtual worlds so this idea of the virtual universe sort of thing as a virtual world or virtual worlds is something that IBM even throws this term 3D internet around quite a lot. In a kind of evolutionary next step when you look at virtual worlds today they tend to be proprietary walled gardens and actually a lot of people would compare them to AOL in the mid nineties but actully when you start thinking about how they may interconnect, and that inset just moving your avatar from world of war craft to second or habbo or whatever its actually much more interesting than that. Its things like bringing you wallet with you your friends list with you being able to blur the lines between virtual worlds and bring content in from the web and share content back out to the web, these things are beginning to be possible and in some ways one of the reason I think second life is so successful because it does have the ability to make request to web content and bring that in so you have dynamic stuff going on. But that is still very early days and I think that we will probably see a massive focus and in fact the big conference in san hosa very recently where this came out in a very big way but a lot of companies will be wanting to get together and its very, you know the will is definitely there to have a real focus in the next few month on interactivity

Paul: I mean so, I am kind of very aware this for many of the people listening to this show that are kind of a mixture of designers, developers, you know, people that are running websites that a lot of this is very theoretical and it is not something they would be directly involved in at the moment. I mean do you think there is anything that they should be doing, that they should be aware of when it comes to virtual worlds. Is this an area you think they should be keeping an eye on or doing anything actively.

Roo: Yeah, I guess most people I talk to even if they are not going to rush out tomorrow and buy some space in some virtual world and um, you know its not for everyone. But most people who I talk to at least want to stay informed once they have got that hook in their head that this is, you know, I obviously find it very interesting but people tend to come away with the a sensation that this might go somewhere and there is enough evidence already today that its fairly compelling, if you look at it on the “garnet height curve” this idea that things go though a life cycle of interest it haven’t yet peaked the top of that and it is now falling back down into this trough of disillusionment in the long run what might happen it might reach the stable plateau where it will actually become a really useful space that interesting work will happen and kind of follow the same progression as so many technologies before it. Most people come away with the feeling that they want to keep an eye on it. Now I guess if I am going to step back a little bit and look more broadly at what is going on, on the web then for web designers and for almost all of them, this is very big on their radar the whole area of social online collaboration and this whole “web 2.0″ umbrella which you started talking about a year ago if not longer and has been you know really quite large for me, that fits very neatly into this same space. What you are talking about are people sharing content and whether that is a a chat or something they have built themselves you know, you look at a world like second life and most of it is not built but the company that runs it. As with youtube and del.icio.us and as with flickr and so many other popular services and site these days, it is built by its users. So maybe it is something people need to be aware of maybe its something which will gradually fit into a growing mentally of this is how the web works. Yes it happens to be 3D at the moment on the popular ones and yes they are not all currently delivered through websites, mind there are plenty that are, and there probably will be an increasing number that are delivered though the browser. So yeah, if people find this stuff interesting then they should keep an eye on it, maybe read a bit more about it.

Paul: Where is a good place for them to go then to wrap up, as far as if they want to find out more information or want to read up about the potential of it, where would you recommend they start by looking?

Roo: well there are a lot o very good blogs out there, if they have a very academic mind then they and want to read some really good writing on the subject then the best one I can think of is http://terranova.blogs.com/ , its one that I have guest authored for, but not the one I regularly write for, the one I regularly write for is http://eightbar.co.uk/about/roo, which has got a growing profile in the space of virtual worlds, That is written by a bunch of IBMers writing about what they find interesting. I have a personal blog a personal blog at http://rooreynolds.com if anyone wants to follow that although, please don’t all come at once

Paul: (Laughs) its really not that popular out podcast that it would…

Roo: no you are paul, you wouldn’t know how popular you are, but you are.

Paul: That’s okay, Thank you very much for you time , I think it is interesting we spend so much time on it with the immediate here and now problems, but every now and again it is nice to poke out heads above the parapet and see what is going on a bit further afield; so thank you very much for time coming and being on the show

Back to top

Question of the week

Do you think virtual worlds are going to be a mainstream method of online communication or are they a novelty doomed to failure? Answers in the comments.