174. Twitterverse

On this week’s show: The entire boagworld community shares its thoughts on web design and Megan Fisher gives us practical advice on building a mobile website.

Play

Download this show

Launch our podcast player

Housekeeping

We have two pieces of housekeeping this week…

Charm Clients, Win Pitches

I am running a workshop on the 23rd of October that you maybe interested in attending if you are a freelancer or involved in selling web design services. The workshop will teach you how to sell yourself to prospective clients, how to generate sales opportunities and how to work effectively with your clients in long term partnership.

If you are interested in attending or want to find out more visit the ‘Charm Clients, Win Pitches’ web page.

As an added bonus, enter the code CWPB_09 at checkout you receive 15% off.

dContruct Competition

Good news if you are in the UK. Very unusually there are actually a few tickets left for this years dcontruct conference on the 4th September in Brighton.

Normally this conference sells out in minutes due to its amazing line up of speakers and subjects that will leave you feeling like a beginner!

However, we actually have even better news because we have two tickets to give away each worth £115+VAT. To win a ticket you have to complete the following sentence on Twitter…

My perfect web conference would include…

Tweet your answer by the 1st August for a chance of winning. The guys at Clearleft will then pick the two most inspirational/funny/entertaining answers and contact you by email.

Back to top

News

The importance of microcopy

I have learnt a new word this week – Microcopy. Microcopy is a small piece of text that reassure users and nudges them in the right direction. It is different to the instructional text criticised by Steve Krug in “Don’t Make Me Think“. This copy does not just state the obvious. Instead it clarifies and reassures.

In his post “Writing Microcopy” Joshua Porter provides a number of examples of Microcopy in action.

  • When signing up for a newsletter, say “this low-volume newsletter”
  • When people add their emails, say “we hate spam as much as you do”
  • When subscribing for something free, say “you can always unsubscribe at any time”
  • When selling an paid-for web application, be sure to let people know if you have a free trial.
  • When storing customer’s information, say “You can export your information at any time”
  • If offering optional account creation, say “If you create an account, you’ll be able to track your package”
He also cites a case where he cut credit card processing errors to near zero by adding a single sentence – “Be sure to enter the billing address associated with your credit card.”
Almost all of the examples given in the post have one thing in common – they help alleviate the concerns of users by answering the questions they already have in their heads.
As Joshua concludes: “Don’t be deceived by the size of microcopy. It can make or break an interface.”

Content templates to the rescue

In someways it seems almost pointless to discuss Microcopy when most website owners are having problems generating any quality content at all. Its not that they are doing a bad job. It is simply that they are under resourced. They are relying on ‘experts’ within their organisation to provide copy and either these people are too busy or are terrible writers.

That said, the copy is what users really care about, and one way or another we need to ensure it is as consistent and of a high quality.

One thing that might help is a List Apart article on ‘content templates’. These are not the kind of templates found within a content management system. Rather they are templates that can be given to content providers to help them write better content.

In essence a content template is a form content providers can fill in. It will suggest what kind of content they need to provide and even advice on how to write and present that content.

In the article the author gives an example of a content template for product pages. The template asks for information such as…

  • Product name
  • What is it?
  • Who is it for?
  • What does it do?
  • Why does the reader need it?
It also gives examples of how the copy might be written and advice on how to lay it out (using bullets, data tables etc.).
Its a good concept and one that is easy to adopt. Although it won’t solve your content woes it will increase the quality of copy you receive from content providers.

Being original

In 2003 Cameron Moll wrote “Good Designers Copy, Great Designers Steal” in which he explored where designers draw their inspiration. It was not the first article to tackle the subject and neither was it the last. In fact only this week the Web Designers Depot released a similar post entitled “Great Designers Steal?

What is interesting about this new post is that he defines three levels of designers…

  • The designer that copies – This is normally a designer who is starting out and who learns from visiting website galleries and lifting designs in their entirety, making only minor alternations.
  • The designer who steals – Generally more experienced, these designers find inspiration in website galleries but will not copy directly. They will be inspired by a theme or specific detail. However, these elements will be heavily customised and altered.
  • The designer who seeks originality – This designer actively avoids looking to other sites for inspiration. They turn instead to sources such as print, art, architecture and nature. Their desire is to create something entirely orginal on the web.

The idea of looking beyond the web is far from new but there is something inspiring about the post. His conclusions are particularly ponient…

The pursuit of originality on the web is not a lost cause. The web industry is still young, and some things have yet to be attempted.

Once you understand the basics of design, try to think outside the box, and try new and different things. Be atypical and unique. Experiment. Don’t be afraid to design from the heart. But keep this in mind:

“Things which are different in order to be different are seldom better, but that which is made to be better is almost always different.” —Dieter Rams

Theories and conventions are always being questioned, challenged and broken, and they should. If you believe a better way is possible, you will often find your way to it.

Tools for testing mobile websites

On this week’s show we have Megan Fisher talking about practical ways you can start building a mobile version of your site. It therefore seemed appropriate that we featured a post from Sitepoint entitled “Six Tools For Testing Designs On Mobile Devices” in our news section.

The six tools featured are…

  • Device Anywhere is a commercial operation, allowing customers to sign up and test “Any Device. Any Network. Anywhere.” There are a range of subscription plans but you can sign up for a free trial.
  • MobiReady is tests mobile-readiness using industry best practices & standards. After testing you receive a free report outlining how well your site performs.
  • Opera Mini is a live demo of the Opera Mini browser that functions like it would when installed on a handset.
  • W3C Mobile OK Checker performs a range of tests on a Web Page to determine its level of mobile-friendliness. The short report produced will tell you where you’re going wrong.
  • dotMobi Emulator emulates a real mobile phone Web browser. It’s a bit limited as you can only choose from two different phones you like as a skin.
  • iPhoney, as you could imagine, is specific to iPhone testing. It’s a downloadable application that is precise to the pixel, so useful for the designer working on iPhone apps.

With the number of internet enabled smartphones rocketing, this is an area of increasing importance and these tools will become incredibly useful. Check out the post for more details.

Back to top

Interview: Megan Fisher on starting building a mobile website

Stanton:Alright so we’re here with Megan Fisher, Hello Megan.

Megan:Hi Guys!

Stanton:Hiya, how are you?

Megan:I’m well thanks.

Stanton:Good, we’ve just seen you onstage talking about designing for mobile.

Megan:That’s right.

Stanton:Designing effective mobile interfaces.

Ryan:Paul checks his badge as we speak, just to double check, you are Megan Fisher aren’t you?

Megan:Yes I am.

Stanton:So I really enjoyed your talk.

Megan:Thank you.

Stanton:So we’re just really asking you about it for all the Boagworld listeners

Ryan:I suppose first of all do you want to tell use who you are, where you’re from so the people who don’t know who you are have a bit of an understanding.

Megan:Sure, I’m Megan Fisher I work for SimpleBits with Dan Cederholm and we’re based in Boston, Massachusetts, small little web design shop.

Stanton:Do you want to give us the overview of what you talked about today.

Megan:Sure, so basically where I’m coming from is I’m a designer for desktop browsers first, and that’s what I’ve being doing for the passed several years, and kind of ignoring mobile web because it seems intermediating and there are so many devices out there with all different resolutions and different CSS support so, it seemed rather scary, but recently Dan’s been working on this new application he’s launching and I decided to take on the challenge of doing a mobile web site for it, so my talk was kind of covering how you get started when you’re first approaching mobile web design.

Stanton:Ok and you gave us three distinct levels of mobile support you can role in, the easy with little work and the benefits with that, and then progressively the more work you put in then the better experience.

Megan:Right, and I think that’s the key with starting with mobile web design, is that you can do it in small steps, it can be iterative, the first step can be showing your markup and that’s obviously the easier step, and then slowly adding a little style so it kind of enhances the site for mobile users and eventually it would be great if we could all design our own mobile specific sites.

Stanton:So in your kind of day to day client work, is this something that you try and roll in to the client saying we can build you this mobile interface, I can tell it’s probably one of the things that’s often gets cut from the budget if you say we can built this fantastic mobile interface for you, or we can give you just the basic level of support.

Megan:Yes, that’s funny. I haven’t had a lot of clients actually requesting mobile sites, and normally I’ll just kind of, you want to make sure your markup is well written and I’ll do a quick little mobile style sheet, sort of when you do your print style sheet that’s like a standard step, and I actually haven’t really offered to do a full on mobile interface yet, that’s kind of a big task and working on dribble is the first step, when you work on your own project you can do these things and not worry about budget and just have fun with it.

Ryan:You talked about three steps in your talk, do you want to take us though those and give us an overview of each.

Megan:Let’s see if I can remember them without the slides

Ryan:I can remind you, I’ve made notes.

Megan:No no no, so the first step is you just want to make sure your markup is always standards based and semantically correct, hopefully most of your viewers, or listeners are already doing this, the benefits of using web standards are well known, they’re faster to load and accessible for a lot of people. So the first step is writing clean and accessible markup, there’s a lot of benefits to doing this as we well know, but for mobile devices specifically they’re going to load a lot faster and if you’re not using tables for layout and you’re using correct semantics in terms of headline tags, and unordered lists and strong tags for emphasis then you’re going to have a much better shot at getting your site to render correctly on a mobile browser.

Stanton:You also talked about mobilising the layout and reordering the content based on the device, and the context in which the site will be used.

Megan: Right, so the first step you can do is making sure your sites one column, and disabling floats is an easy way to do that, and then you want to, display: none is your friend, you want to hide content that’s not going to be useful for mobile users, especially things like flash and all that sort of added stuff, and making sure the most important content comes first and it’s easy to navigate and you can get a clear picture of what the site does, disabling images is another good step because that improves load times of course.

Stanton:And finally it was staying with your brand.

Megan:Right, so a lot of people thing maybe, or maybe people assume because you’re designing for such a small screen space and you want to keep your load times fast that this means you can’t have all your cool branding stuff that would have on your regular web site for your desktop browser, but that’s necessary true you can still incorporate background images and if you use small compressed graphics that are relevant to your branding that would still work, keeping the colour scheme consistent with what you have on your normal web site and the typography you can kind of play with that, and there’s fairly good support for that.

Stanton:You got this asked in the Q&A at the end but I’m going to hijack it and ask you again for the benefit of our listeners, with the adoption of devices like the iPhone and the BlackBerry and consistent UI’s with WebKit and Safari coming into the mobile browser and being able to use jQuery and all that jazz, can you see it getting easier to develop these things and how would you go about testing for different devices.

Megan:Sure, so it’s kind of a two parter, when you’re considering things like the iPhone there’s still a lot of advantages to creating a separate mobile site for these devices, and really the biggest thing you want to think about is the resolution, in the old days of web design we had to design sites that were for 800 by 600 resolution, obviously that was something you considered in the design process, so just because the iPhone renders using WebKit and it looks like it would in Safari, it doesn’t mean you don’t want to design for that screen size, as far as testing for different devices, most of the major devices out there have a rendering engine that you can look at, there’s lots of great tools, one that I used mobify.me and they have support for something like 4,000 devices and they’ll let you test on those and also they have a script you can use that will automatically direct those browsers to your mobile site.

Ryan:How consistent are they between devices, are some devices majorly inconsistent in the way they render sites or are they quite, are we nearly there?

Megan:It’s definitely gotten better especially with things such as zooming, there’s a lot more support for different styles, it’s difficult to say because it really varies in places like Africa they’re using older devices maybe with smaller screens and obviously the iPhone is hugely popular in the States so, that’s what I use to test, it’s difficult with consistency and there’s been a lot written about it, I mentioned in the talk the article on A List Apart about the return of the mobile style sheet is what the article is called, and he kind of goes over that and the consistency and support for handheld CSS.

Stanton:Are there any books or articles that you would recommend people that are wanting to know more about this to check out?

Megan:Yea absolutely, so like I said if you go on A List Apart and just search mobile, obviously A List Apart is a great resource for designers and they have excellent articles on the mobile web as well, Cameron Moll has written a fantastic book called mobile web design and it’s available as a PDF download it’s fairly inexpensive, and that’s what I used when I first started doing my research, also if you go on Delicious and search the tag FOWD09 research you can see all the resources I used for putting my talk together.

StantonOk, well thank you very much.

Megan:No problem guys.

Thanks to Ben Everard for taking the time to transcribe this show.

Back to top

Listeners section: Web design advice from Twitter

This weeks listener section is going to be a little different to normal. Instead of answering a listeners question, I decided to ask my Twitter followers to help me write a blog post. I posted the following Tweet…

I am writing a post on web design words of wisdom - think 'confusus says'. Post yours to Twitter in 140 characters or less. #webwisdom

The answers I received formed the basis of my latest blog post ‘Web Design Wisdom from Twitter‘.

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

A Year on the Conference Circuit

don’t feel like you’re going to be out of your depth when attending one, there isn’t a test at the end or anything..

This week’s feature has stemmed from a listener who asked “which conference would I suggest for a first timer”? And “how difficult is it if you don’t actually know anyone there”? Having attended a couple of the big conferences this year I thought it would be useful to share my experiences

Ah conferences, how we love thee. Conferences are a fantastic mechanism for networking and learning, wrapped up in a nice little bundle along with a steady supply of tea and Danish pastries.

Conferences I can personally vouch for are Future of Web Design (organised by Carsonified) and @media (organised by Vivabit), which both have quite different “feels” to them in my opinion.

Future of Web Design

FOWD is a one day conference, with no food (food is very important at these things), but is very affordable at around £150 (not including the workshops).

This year’s conference was chaired by non other than Paul Boag himself and featured guest speakers like Patrick McNeil, Andy Budd and Daniel Burka. The Carsonified guys seem big on networking, they organised a before and after party for the conference with substantial tabs behind the bars. It was a great opportunity to mingle with the attendees and speakers pre and post conference.

@media

@media is a two day conference with excellent food; however it’s more expensive at around £500, although @media runs two tracks (primary and secondary) of presentations which obviously means twice as many speakers and is in general a much larger event than FOWD. This years @media saw the appearance of speakers like Jeffery Veen, Jonathan Snook, Dan Rubin and Andy Clarke. In contrast the Vivabit guys focused on the learning, a longer conference, with more speakers and a modest after party in the lobby on the final day.

Cost

I compare prices of these conferences only because expense is always a consideration, and when you’ve taken into account accommodation, train tickets etc, the old credit card is often left quivering in your pocket but expect to pay on average, around £150 per day for the big conferences.

Speakers

Arguably the most important part of any conference is the quality of the speakers. And both FOWD and @media didn’t disappoint in this regard, Andy Clarke even spoke at both. Speakers’ reputations often precede them and it’s a simple matter to research the event before hand to see if the people talking are the people you’d like to hear from.

Everyone’s in the Same Boat

One thing that is universal about web design conferences is the friendly crowds they attract, it’s good to remember that everyone is there for the same reasons and it’s easy to drum up conversation and find mutual ground on a topic you have in common with someone else. The general advice is to just go and say hello! And that goes for introducing yourself to speakers as well. They’re not the kind of rock stars that disappear behind a curtain at the end of a show! Most of them can be found mingling with the crowd at the end of day looking for people to talk to just like you. In fact I can’t remember if it was Jonathan Snook or Dan Rubin who said to me “It would be nice if more people came up to talk to them.”

Still to Come This Year

The year is not over yet, there are plenty of conferences still to come:

And likely many more.

Conclusion

In conclusion there isn’t a conference for beginners as such but it’s safe to say that these types of conferences are deliberately aimed at a broad audience to make them accessible to as many people as possible. So don’t feel like you’re going to be out of your depth when attending one, there isn’t a test at the end or anything.

As for not knowing anyone, it up to you to be sociable, introduce yourself and don’t be shy, if you’re struggling, go stand near a crowd and invariably someone will turn around and start talking to you.

By Ryan Taylor (Thanks to Paul Stanton for the title)

123. Plight

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

Play

Download this show.

Launch our podcast player

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

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

News and events

SPAM meltdown

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

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

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

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

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

Form Analytics

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

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

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

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

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

Art direction hits the blog

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

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

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

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

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

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

Prototyping

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

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

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

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

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

Back to top

Feature: The plight of the in-house designer

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

Back to top

Reviews: Textmate and Top 5 Tips for Web Designers

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

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

Textmate by Teifion Jordan

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

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

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

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

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

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

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

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

Top 5 Tips for Web Designers by John McFarlane

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

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

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

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

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

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

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

Back to top

Listeners feedback:

Newspaper columns on the web

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

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

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

The usability concern

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

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

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

The technical concern

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

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

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

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

Estimating dev/creative work

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

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

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

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

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

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

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

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

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

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

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

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

Back to top

Location aware

The web is full of exciting innovations at the moment. However, it is geocoding that personally excites me the most. In this post I explain what it is and why I believe it offers so much potential.

I am definitely not an expert on geocoding but I have been aware of the idea for a long time. I first encountered the concept back in the late 90s. At the time it entirely passed me by and I couldn’t see why the person explaining it was so excited.

“Just imagine the possibilities if every file had a location stamp like it has a date stamp”

I obviously lacked imagination. It all felt too theoretical. Too far off.

Later the concept was reintroduced to me, but this time all I saw was a world of adverts being pushed to my mobile phone as I walk by the local starbuck. Who wanted that?

The lightbulb finally switched on when I heard Tom Coates speaking at d.construct last year (Download Tom’s talk: MP3). He talked about a project he was working on called Fire Eagle that allowed applications to pass your geo location back and forth.

Geocoding is a reality now

Nine months on and I have finally got to play with Fire Eagle. I no longer need imagination to see the potential, it is no longer far off. Geocoding is here and boy am I excited.

For me the real power of geocoding comes because of mobile devices. Once your mobile knows where you are the possibilities are endless. My iphone for example lacks GPS but it can work out my position based on cell towers and wifi networks. This enables me to do lots of things…

All of that I setup for myself in a couple of hours. I haven’t even scratched the surface of what is to come.

The website owners perspective

This is not just something consumers should be getting excited about. It offers huge potential to website owners as well, because it provides users with new ways to access their information.

Consider for a moment what information you hold that is location specific. Do you have physical outlets (or other points of interest) that could be geocoded so users can easily find them? Maybe the content on your site relates to a geographical location (for example a university website). Or would users find it useful to know where you wrote a particular page of content (maybe a travel blog)?

I am the first to admit that geotagging is still in its infancy. However, there is no doubt it is on the cusp of going mainstream. Consumers have adopted car navigation systems very quickly and are familiar with adding points of interest (at least where speed cameras are concerned)! It will not be long before that experience makes the leap to mobiles.

It maybe premature to add location information to your data. but it is certainly the time to start thinking about what information you have that could be geotagged.

For more on geotagging and fire eagle listen to our upcoming interview with Tom Coates on show 118.

Keeping your skills sharp

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.

I love working on the web because there is always some new exciting innovation. Of course the downside of this is that we are always running to keep up and there is always something new to learn.

I was extremely impressed with Harry because he has had the foresight to save some money for training. I think more web designers could do with following his lead. We need to recognise that learning new stuff is crucial to our role and if we don’t then we will quickly find ourselves unemployable.

So presuming you have had the foresight to set aside some cash to improve your skills what are your options? Well I believe you have two; spend the cash or convert it to time.

Spending money on training

There are certainly no shortage of ways to spend your hard earned cash on improving your skills.

One option is to go on a training course as Harry has been considering. I know the guys over at Clear:Left runs some excellent training sessions on front end scripting subjects like the DOM and AJAX. Also Drew McLellan and Rachel Andrews at edgeofmyseat.com have started a very popular CSS course.

Training courses are excellent for learning hands on skills in a short amount of time. However they can get pricey. A cheaper solution would be to simply buy a book. Books maybe cheaper but they do take time to read and digest. Nevertheless they are a good alternative if money is tight. I have recommended loads of books in the past so am not going to repeat myself here. However be careful, there is a lot of crap out there teaching bad practice.

If you want to be a bit more forward thinking and strategic with your training budget, then you might want to think about spending the money on attending conferences and meetups. Although these don’t normally teach you practical skills in the same way as a training course, they do advance your thinking about web design and maybe suggest new approaches.

There are some great conferences around. My personal favourites are SXSW, d.construct and the Future of Web Design. SXSW is pricey and somewhat overwhelming but is an experience if nothing else. d.construct and the Future of Web Design are smaller affairs but include a great line up of speakers.

If a conference is beyond your means then consider attending a meetup. Spend your budget on accommodation and go to a hack day or other meetup. You don’t get the great line up of speakers but you do get to interact with other designers who are facing the same challenges as you.

Time equals money

We all know time equals money. This is especially true if you are a freelancer. If you are not working on client work then you are burning cash. Another alternative then to spending your training allowance on courses or conferences is to spend it in the form of time. Use that money to buy yourself time free from project work. Time to experiment and learn online. Personally this is how I learn the most.

I try and set aside time each week to read sites like A List Apart, Think Vitamin or Digital Web. I then take the techniques I have learnt and experiment with them. If I discover a tutorial on AJAX I don’t just skim it but rather sit down and follow it through. If Smashing Magazine lists a load of flash galleries I actually check them out and look for projects I can integrate them with.

By actually physically buying your time back from yourself using your training budget you avoid feeling guilty for ‘messing around’ or ‘sitting about reading blogs’. Spending time experimenting is probably the most important type of training you will do. Take Google’s lead and make sure you set aside some time every week for personal projects.

Show 93: dconstructed

On this week’s show: Paul talks about how to make the most of the footer, Marcus explains why cold calling never works and Gary Marshall shares some great advice on writing content.

Play

Download this show.

Launch our podcast player

News and events | Why cold calling never works | Making the most of the footer | Gary Marshall on writing better content

News and events

iPod Touch

Unless you have been living in a cave for the last week you will already know that Apple has just released a new range of iPods including the massively exciting iPod Touch. What is so exciting about the iPod Touch is that it is basically an iphone without the phone. This means it has WiFi and a fully functional web browser. This is a major development in the web design world as it will mean millions of internet enabled iPods and a whole new audience in a whole new context.

What is more Apple has also done a deal with Starbucks where by songs played in Starbucks can be purchased directly on the iPod. I am convinced this is just the tip of the iceberg in terms of context / location aware mobile web. It won’t be long before you arrive at a University Campus and access a campus map or go to a shopping mall and access all of the menus of the various restaurants.

With the iPod being such a universal device now is the time to think about how you are going to utilize the power of the mobile web.

Free photo manipulation tools

This week I came across a site stuffed with loads of free photo manipulation tools. These guys have certainly been busy as there are loads of really fun tools including a Mosaic maker, CD cover creator and even a Hockneyizer. However, probably the most useful tool to us web designers is the palette generator. Upload an image and it will automatically create a colour palette based on it. Nice!

dconstruct feedback

This last week also saw the dconstruct conference in Brighton. I was fortunate enough to attend it and got to hear some truly remarkable speakers. I am not even going to try and recount all that was said, however I do want to particularly mention three superb talks.

Tom Coates, gave a mind blowing presentation on shifting our thinking from a website model to a data model and the consequences of this in terms of how we develop applications and how users navigate data. Tom’s presentation really felt like a glimpse of things to come.

Leisa Reichelt gave an inspiring presentation about how we develop projects. Amongst other things she talked about Agile development and I have to say this was the first time it has been explained in language I understood. This talk definitely made me reconsider how we run projects.

Finally, I couldn’t mention dconstruct without talking about Jared Spool’s presentation on experience design. Jared (who is a superb speaker) took us through how to create great experience design, explaining why it is important and how to draw together the necessary skills to make your design stand out from the crowd. Compelling stuff.

The reason I mention all of this is that all of these talks will soon be released as podcasts and I wanted to strongly encourage you to check them out!

170+ Expert Ideas From World’s Leading Developers

The final story today is the release of an article on the smashing magazine website. The guys at the magazine interviewed 50 designers and asked them 6 questions. This has led to an article with 175 professional suggestions, tips and ideas.

Its always fascinating to see how other designers work so this article is definitely worth a once over.

Back to top

Marcus’ bit: Why cold calling never works

Ok, to say that cold never works is a bit strong because very occasionally it does. I should also qualify that I am talking about winning quality web design work here.

So, a more appropriate, but considerably more boring, title would be: why cold calling almost never works when selling quality web design services.

But, in my opinion, you don’t really even need to qualify the ‘what’ you are selling. I guess there are certain products or services that can, effectively, be sold over the phone to a person/organisation that you don’t know but I expect they are few and far between.

The word ‘effectively’, in the last sentence, is pivotal to this. I would love to see the ratio of telesales staff costs against actual sales won via the telesales force for, say, a double glazing company over the last year. The fact that I seem never to be called these days by double glazing companies suggests that my suspicions are correct and it simply isn’t worth it.

I don’t know anyone who likes being called out-of-the-blue and certainly, no-one who has actually bought anything through this process. I think most people are instantly ‘on guard’ and mistrusting of a cold call. This has worsened, I believe, over time and has now reached the point where it has almost become a joke.

Anyway, I’m rambling off the point – back to web design.

You can’t create a project that doesn’t exist

This is the main issue. Even if you are lucky enough to find a receptive listener, the chances of calling them right at the point where they are thinking about starting a web project is remote. The best you can hope for is that contact will be made later when a real project does happen.

You may not be talking to the right person

It is very possible that the one successful call that you made after a day’s banging the phone was actually to a chatty junior who cannot make or even influence decisions. Asking to speak to the ‘marketing director’ or ‘person in charge of the web budget’ etc is a recipe for an instant hang up.

Even if you are speaking to the ‘right’ person, chances are they will have to go to other partners or directors and that group will want to know track record, where did the recommendation come from etc.

Making yourself known

Ok, so you can’t actually win work cold calling but you can occasionally start the process of winning work through a cold call. However, I would say from experience, that this cannot be a completely cold call. You need at least one thing connecting you to the person at the other end – and the direct mail piece you sent them two days ago does not count because they will have instantly thrown it in the bin!

The kind of things that can make this type of call potentially worth it are:

  • Work done for one of their competitors (vertical selling)
  • Locality (“we’re in the same town”)
  • Professional connection e.g. a print designer you are close to works for them
  • Social connection e.g. my neighbour Dave Smith works for your accounts department and thought I should call you….

But remember you are simply selling your professionalism, skills and competence; basically, just the chance to pitch for work when it comes around.

However, I would recommend that the majority of your efforts are spent on a) ‘hot’ calls to people who contact you with real projects and b) your existing clients as they are usually your best prospects.

Back to top

Paul’s corner: Making the most of the footer

This week I thought I would try and tackle a question from Peter in Italy…

Disclaimer, copyright, accessibility statement and privacy policy; these are the links that can often be found in the footer of a page. Why is it important to add this information on a website and what should this information include?

The footer is the graveyard of many websites. The place where links are sent to die. However it doesn’t have to be that way.

Back to top

Gary Marshall on writing better content

Paul Boag:
So, joining me today is Gary Marshal, a technology journalist and author and many other good things as well. Hello Gary.

Gary Marshall:
Hi Paul, how are you doing?

Paul Boag:
Not too bad, good to have you on the show, we had you on once before as I remember.

Gary Marshall:
Yeah it was a couple of months ago now wasn’t it?

Paul Boag:
Yeah it was a little while back. What I thought would be good today is to get you on to talk in broader terms about writing for the web, and writing in general, as obviously that’s what you do for a living. That’s your job, and so I thought I’d kick off with really a question about copy writing and copy writers; do you thing website owners should be looking to get a professional copy writer in to work on their website rather than doing so themselves?

Gary Marshall:
I think it depends a lot on the website that you have, if your doing something where your unique selling point is a fantastic price for a product, then it probably doesn’t matter too much what the copy’s like, but the more important the text of your site is, the more important it is to have good text. So take for example if your site is a brochure then obviously the quality of copy then is really, really important. There’s also the technical side of writing as well, which is not so much a copy writer but more of a technical writer for that so you know, product information, frequently asked questions, support, that kind of thing.

Paul Boag:
What benefit do you get from getting in somebody who does this professionally in preference to trying to do it yourself, where’s the real kind of money earner in it? If that makes sense, the return on investment.

Gary Marshall:
Yeah. Well it really depends on what your sites all about. One of the things about getting a professional to do it is it saves you time, the same way you would get somebody in to do stuff around the house because your time is better spent doing what your good at. But particularly with copy writing, if you get somebody who is pretty experienced in this, what they’re doing isn’t so much writing, but its writing that works. So you know a good copy writer can say more in a sentence than your average guy can say in 700 paragraphs, which is one of the reasons that guys in advertising get paid so much, because they come up with these fantastic strap lines that lodge in peoples minds.

Paul Boag:
Yep ok that’s fair enough. Obviously the main thing that puts off people from getting a copy writer is the cost associated with it and sometimes its just prohibitive, although I have to say that I get somewhat confused that people recognise they cant do design and they get a designer in to do that but somehow people think they can do copy which is somewhat confusing sometimes.

Gary Marshall:
Yeah, it’s not that expensive. If your going to have a multi page, 1000 page website then yeah it is going to cost you a fair whack of cash, but he majority of writers tend to be paid by the word, so you’ll set a rate, and what it is you want to get and the end result isn’t going to be an awful lot of money. Your looking at a couple of hundred quid for a couple of thousand words, its not a lot.

Paul Boag:
No I suppose in the grand scheme of things that isn’t much at all is it? If you think of the amount that people pay for content management systems and design work and usability testing and all that other stuff.

Gary Marshall:
Provided they’re good at what they do. Of somebody is going to polish the text in your website, and make what you do sound absolutely fantastic, if that makes the difference between somebody hiring you or not or somebody buying your product or not then it’s paid for itself.

Paul Boag:
So, making the presumption that there are some people out there that just aren’t in a position to hire a professional copy writer and its just not an option – what advice would you give someone who is starting out writing copy for their own website? Where would you start? What are the most common mistakes?

Gary Marshall:
I think the most common mistakes are thinking from your own point of view rather than from your visitors point of view, I’d say that’s probably the worst offence that you can do, and it’s the old moaner when if you have a frequently asked questions section it’s the questions you hope people would ask rather than the one people actually do ask, you get an awful lot of people where on a website the fist page is the entire corporate history and as a visitor I don’t care, I don’t want to know this stuff I want to know what are you going to do for me why should I hang about here. So it needs to be very much ‘put yourself in the customers shoes’. Have a look at other websites and see what you like about them and what works on those sites. The other thing you need to think about big style is search engine optimisation. I was talking to someone the other day who was saying ‘when we do searches on particular products and particular areas we just don’t come up in the results at all’ and I said ‘do any of these phrases or words feature on your site?’ the answer was no. That was probably why they weren’t featuring in the search results! It might be obvious to you that your search should come up if you look for, I don’t know, web design companies in Brighton, but if you don’t have the words ‘web design’ and ‘Brighton’ in your website its not going to be indexed by any of the search engines. That can be a really difficult one to pull off, you see a lot of  bad copy writing that’s done purely on the basis of SEO, where they’re just trying to get as many different phrases in as they possibly can to try and get it up in the Google rankings and I think that’s counter productive because ultimately your trying to get humans to read this and if somebody comes to your website and the whole thing is stacked with all these meaningless phrases that don’t actually give you any useful information at all, then your just going to go ‘what a waste of time, I’m out of here’

Paul Boag:
Do you think there’s a difference between writing for the web and writing for other mediums?

Gary Marshall:
Yes

Paul Boag:
What kind of differences? What should people be doing differently?

Gary Marshall:
The biggest one is brevity, simply because your reading on a screen – you’ve no control over what sort of screen people are going to be reading on for starters, so I might be looking at it on my BlackBerry, you might be using a 22 inch monitor, but web content doesn’t lend itself to huge blocks of text and long, long sentences so you need to think much more visually than you do with the printed page I think, break it up a lot more and have a lot more white space. The way to present it can be important also, even having a bigger gap between lines can make a big difference to whether your text looks appealing or not. Again, work back from the basis of ‘what is it that your visitors are going to want here?’ You need to really start with that. I find that bullet pointing is usually a very good way to approach it. So, you sit down and think ‘what are people coming to my website for? And what is it they’re going to be looking for?’ and answer that first. If you’ve got a bit of spare time go into you full corporate history and everything you’ve done in your life, but concentrate on the purpose of your site first.

Paul Boag:
It strikes me that websites, unlike other mediums aren’t linear, so you have the option to start with the top level brief information and highlights, and people can kind of dig down to the in depth stuff if they want to.

Gary Marshall:
Indeed, one of the things you see in print a lot is the use of ‘pull quotes’ to draw your attention to a particular bit of the body copy, and its basically a sales technique and exactly the same thing works on websites and can be very effective and can encourage people to read more. The other thing I would say is try not to link too much in your actual body copy because every little blue line there is a potential reason for someone to disappear.

Paul Boag:
Ok that’s interesting.

Gary Marshall:
I think it can get in the way – if you’re trying to engage people you don’t want people to go off on tangents because you’ve got this short attention span thing going on.

Paul Boag:
Yeah I can accept that – the other thing as well is that if the page is full hundreds of links it makes it visually quite difficult to read as well.

Gary Marshall:
Yeah and avoid these kind of hover over adverts that infest websites. If it looks like a link I expect it to be a link and if I move my mouse over it and just get ‘find out about hotels in Guatemala’ or something its instantly away from the website. There’s something as well, I don’t know if its true or not but in journalism school they teach you when writing for tabloids you should write on the assumption that your reader is going to be a small child, and I think that can work with websites as well because it really does focus you on getting the information there quickly with the minimum amount of waffle and without going off on huge tangents. And like the old press thing as well where you have all the information in the first paragraph and you expand on it as you go along, so you should be able to chop from the bottom. If you’ve written 500 words, you should be able to chop the bottom 250 off that without losing sense of what you’re doing.

Paul Boag:
Yeah that’s good. So, websites are one thing – your kind of corporate websites and things like that, but more and more organisations are starting to use blogs as a method of communicating. Do you think there’s a difference there? What advice would you give to people writing posts for blogs?

Gary Marshall:
Be sure that you want to do it in the first place. Jacob Neilson quite famously said the other week that businesses shouldn’t blog, and he’s getting a bit of a headline generator there – he doesn’t mean no business should blog, but it can backfire because the nature of blogging is very much off the cuff, very quick reactions to things and that’s fine if it suits your particular kind if business, but if people are coming to your site for in depth information then I don’t think blogging does suit because by it very nature blogging is your most recent thought at the top so if you don’t have regular readers its quite easy to fall into the trap of assuming everybody knows the context of what your talking about, and they might not because you wrote about it 3 weeks ago or 3 months ago. That’s quite a common pitfall I think. The other thing about blogging is because it’s quick and easy it does encourage you maybe not to craft things as well and not think things through. You have got to remember that this stuff potentially hangs about for eternity. So it might be tempting to, I don’t know, slag off the competition or something but it could well come back and bite you later on. I think with blogging, it comes back to any sort of writing – you need to know what your trying to achieve with it because if you don’t have a clear idea of what your blog is going to bring to your website, and what benefit its going to bring to your visitors and customers it’s a potential massive waste of time and effort that you could be spending on something more interesting.

Paul Boag:
Yeah.

Gary Marshall:
I sound really negative; I don’t mean to be really grumpy today! But I think it’s a bit like in the early days in the web there was always these wonderful ‘do-hickeys’ and logos you could slap all over your website and lots of people did without actually asking ‘does this bring me any kind of benefit whatsoever?’. Done well, blogging can be a fantastic thing on a website. I’ve seen a few examples of it in all kinds of things – I was looking for drum loops for ‘Garage Band’ and I was looking at the various drum loop companies and I found one that the owners blog, and they talk about how they do the stuff, what they’ve got coming down the line, why they think that they’re great and nobody else is and all this kind of stuff and I really quite warmed to them and that encouraged me to have a look on their website and I ended up spending money on it. Other sites that are just plain old e-commerce things and really don’t care. Unless your doing a kind of niche market where I don’t know, ‘golfing grandmothers’ or something then the very fact that you’ve got a niche people are more likely to pay attention to what you’ve got to say. I don’t care if the marketing director of Comet has a blog; I have no interest in what he’s got to say – so adding it to something like that would be a waste of time. I don’t want to read a blog on ‘great big faceless ISP dot com’ whereas ‘Merchant city music’, which is a music shop in Glasgow, I’d be quite interested in what these guys have got to say, so ‘We’ve got some amazing stuff coming in!’ or ‘we were away seeing a band last night and they were fantastic!’. That feeling that your part of a bigger picture can be really effective, particularly with smaller businesses.

Paul Boag:
Yeah, good stuff I couldn’t agree with you more. I think there are a lot of blogs out there that shouldn’t be out there and there are also some places that should be blogging that aren’t.

Gary Marshall:
Yeah I would agree with that.

Paul Boag:
OK thank you very much for your time Gary, it was really good to talk to you again and no doubt we’ll have you back on the show in the future

Gary Marshall:
No doubt!

Back to top

Show 85: Bulletproof

On this week’s show: Paul provides some design advice for developers, Marcus provides so post launch pointers and we review Jeremy Keith’s Bulletproof AJAX book.

Play

Download this show.

Launch our podcast player

News and events

Unfolding the fold

The first news story today is actually not news at all. Well, its news to me (because I wasn’t previously aware of it) but the actual post was made back in December of last year.

The post relates to that most irritating of subjects; “the fold”. I have spoken about the fold many times before. The mythical point at which people have to start to scroll. I say mythical because this point changes depending on your screen resolution, browser type and toolbars.

The reason it is so annoying is because clients are obsessed with it. They are convinced that users don’t scroll (a perception rooted in the early 90s) and no amount of persuasion seems to change their minds.

However, hopefully the post I found this week will help. “Unfolding the Fold” is a post on the ClickTale blog that provides some hard stats about the fold and scrolling in general. It demonstrates that the vast majority of people scroll, with almost all of them scrolling right to the bottom of the page. Their conclusion is that there really is no reason to squeeze all of your content above the fold.

d.construct tickets on sale 10th July

If you are in the UK on the 7th September you should be sure to come to d.construct. d.construct is in my opinion one of the best web design conferences around. The reason I like it so much is that it works hard to maintain a grass root feel that is accessible to anybody.

For a start the price ticket is very accessible at £85 + VAT. Secondly, the whole thing happens on a single day so there is no need for expensive hotel bills if that is a problem. Finally, they have a great mix of speakers with many of the big names you would expect but also a lot of less well known people in order to “shake up the scene”.

The reason I mention it now is because the tickets are going on sale next tuesday (the 10th). Historically they sell out incredibly fast. Although this year they do have a larger venue and so that should help somewhat.

I really want to encourage you to attend this event if at all possible. I will definitely be there and it would be great for us all to meet up.

Fonts licensed for web apps

Talking of d.construct, Richard Rutter (one of the organizers of the event) has posted an interesting blog entry on “font licensing“. Admittedly font licensing, doesn’t sound very exciting but potentially it could be. Richard has spotted a press release from a prominent font provider. This press release talks about a new type of license…

Ascender Corporation announced a new licensing program for font software implementations with server-based applications.

Richard goes on to suggest this might be another move towards browsers supporting downloadable fonts. This would allow us to use whatever font we wished on a website rather than being limited to what the user has on his or her desktop.

Richard does warn that this might just be in reference to Silverlight, because Ascender does work very closely with Microsoft. However, personally within the context of Opera’s move towards downloadable fonts, I am hopefully this might be something more.

A new way to visualize your desktop

Finally today, I wanted to mention a technology called Bumptop. I recently watched a demonstration of the system and was blown away. Basically, Bumptop is a new way to work with files that mirrors much more closing the experience of interacting with your desk in the physical universe. You can stack files, throw them around and even crumple them up in a 3D environment.

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

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

I think as web designers we could learn from technologies like this. We should be looking to build on established conventions people understand rather than always seeking to do the next big thing or be innovative in someway. Bumptop is innovative but it does so in a way that is instantly accessible to everybody.

Paul’s corner: Design advice for developers

I received this great question from Simon that I thought worth addressing on the show…

I hear lots of questions about the technical and business side of Web design, but what I don’t hear is how do the already technical amongst us become better designers – maybe being a visual thing this just won’t work on an audio podcast, but at least you could give us your top 5 ways to grow artistically.

As has become tradition, I decided to blog on the subject a few days ago but unsurprisingly failed to stick to “5 ways to grow artistically”. Instead I managed to produce a long and rambling essay on “when designers design” which I bore you all with on the show.

Marcus’ bit: Post launch Protocol

Everyone, client and agency, seems to understand the principle of not letting a site stagnate. Content should be regularly updated and, ….and what?

We see a lot of client demands for content management systems that are then often not used for lengthy periods of time. Therefore I thought it could be useful to look at what options there are to a site manager after that big day when the site goes live.

Of course, not everything here will apply to everyone but hopefully some of it will.

News and events

Stories, articles, seminars, fun days, whatever. These are your opportunity to create new content very regularly.

Clients are invariably perfectly happy with their site when it goes live. This is understandable, they have more often than not spent months working on it, tinkering with this, fretting with that and a) they need to spend some time on other aspects of their job (that have been neglected) and b) the site really has never been more up to date!

But what often happens is that a couple of months down the line they realise that new content needs creating but they can’t remember any of the CMS training. The 50 page accompanying manual is too scary so things get left. This happens until we are asked to add the new content because we’re too busy and it’s urgent and often, later on, further CMS training is booked.

News and events provide a steady stream of new content that helps keep the site fresh but also the CMS skills of those looking after the site.

Shortcuts

Updating shortcuts to key content is again a simple way of refreshing a site’s content without putting that much effort in.

Homepage shortcuts tend to link to:

  • Latest news
  • Latest events
  • Repeated main navigation
  • Products
  • Special offers
  • Facilities e.g. login, subscribe etc
  • Important ‘deep’ content
  • Popular topics

I guess the point I’m making here is a lot of these shortcuts can simply be rotated giving a feeling of change on the site. For example, changing a link to a main section on a weekly basis is a simple task and one that does not require the writing of any new content.

Utilising usage stats may be a good way of seeing which areas of the site need further promotion. In fact, use everything at your disposal, stats packages, CMS, content suppliers, agency support contract, internal marketing team etc so that you are as informed as possible.

Imagery

Don’t just update copy. Adding new banner imagery can really rejuvenate a tired looking design. Always look to include appropriate imagery with news articles, events etc.

Communicate

Keep your eyes open to what’s happening within your company/organisation. There may be a new project/department/member of staff etc that might be outside your sphere, that would really add value to the website.

Make yourself (and your role) known to everyone. Send out questionnaires or surveys asking people what they want to see on the site or if they have any pertinent content.

Think big

Finally, don’t lose sight of the main purpose of the site while dealing with the smaller things. It may be that the main purpose of your site is to promote your brand so updating the look and feel of the site regularly may be a lot more important than updated content. In fact, continually evolving the design of a site over time is probably far more cost effective (not to mention the effect it has on keeping the site fresh) than ‘big bang’ redesigns every 3 years or so.

Alternatively, sales leads may be the site’s primary function. In which case, keep in touch with sales and experiment with ways to boost leads.

The other really big area that site owners need to look at is site promotion. This warrants a post of its own so I’ll look at that another time.

Review: Jeremy Keith’s Bulletproof AJAX

I have decided not to do “ask the expert” this week, so we can have a review instead. Unfortunately we don’t have the time to do both segments every week so I have to mix and match from time to time.

The book I want to review is “Bulletproof Ajax” by Jeremy Keith. I read it almost 6 months ago, but haven’t had an opportunity to talk about it on the show until now.

The book is designed to be the sequel to Jeremy’s previous book “DOM Scripting: Web Design with JavaScript and the Document Object Model” which was written as an introduction to Javascript for designers. Bulletproof AJAX is therefore written in a similar tone with the focus on making AJAX accessible to designers rather than providing the technical detail you would expect from a developers book.

I have to confess I found the book a little frustrating at first. As somebody that had bought and learnt Javascript through Jeremy’s first book, I felt a little annoyed that the first 2 chapters seemed to be dedicated to laying the foundations we had already covered in the first book. I am guessing the idea was that people could buy this book in isolation without first owning DOM Scripting, but in my opinion the amount of detail provided in Chapter 1 and 2 wouldn’t make that possible. For me those first 2 chapters felt like padding to make a short book feel slightly more substantial.

However, that criticism aside the rest of the book was definitely worth the very reasonable price tag. Jeremy has an excellent writing style that is clear and engaging. He seems to explain complex topics in such a manner that you wonder what all the fuss is about. You come away from the book thinking this “AJAX stuff” is easy and wondering what all of the fuss is about. Admittedly he only covers the basics, but it is enough to get you producing the kind of AJAX applications most designers would like to build.

But, Jeremy doesn’t shy away from the more complex underlying issues surrounding AJAX. In particular he talks about accessibility and ensuring your applications work with Javascript disabled. He does this through a technique called HIJAX. I will not endeavor to explain to you the details of it here, except to say it relies on the server doing most of the heavy lifting.

From applying the principles taught in this book I have to say the HIJAX approach works very well. All of the complex stuff is handled by the developers on the server side and I get to focus on how the information is returned to the user. AJAX is a funny area that sits between client side and server side and leaves designers and developers wondering who is responsible for what. Using the HIJAX approach taught in this book, the division is much clearer.

So would I recommend this book? As with DOM Scripting it depends on who you are. If you are a designer who has read Jeremy’s first book and would like to start producing AJAX applications then absolutely. However, if you haven’t read his first book then I suggest you do that first, unless you are already confident in producing unobtrusive javascript.

If you are a developer on the other hand then my recommendation is to steer clear. This book is not meant for you and you will find it frustratingly lightweight.

Podcast 52: Javascript Libraries

This week on boagworld.com we talk to Dustin Diaz about Javascript libraries, discuss other web design podcasts, launch our web design forum and help you get started with Microformats.

Play

Download this show.

To subscribe directly within itunes click here

In the news

Microformats

If you are interested in getting started with then check out the excellent ebook on Microformats by
Brian Suda
. He has also been kind enough to share a Microformats cheat sheet for free.

Microsoft and the BBC

This week saw an announcement by Microsoft and the BBC that they are exploring ways of developing [the BBCs] digital services. As you can see the announcement is somewhat lacking in details. However, this is potentially a huge development and could lead to some interesting online services.

Searching rich media

This year’s demo conference saw pluggd announce an amazing new feature that allows you to search inside of podcasts. This is symptomatic of a growing movement to ensure that rich media content is searchable. Other players in this space include Veotag and Podzinger.

Questions and comments

This week’s show included two excellent audio questions from listeners.

The first was about the open source forum software I mentioned a few weeks back called Vanilla. This led to a discussion about running online communities, the integration of Vanilla and my hopes for the new boagworld forum.

The second question was about what other podcasts I would recommend. Below are the list of the one’s I mentioned on the show. However, you can find a more comprehensive list of web design podcasts by going here.

Main feature

The main feature today is an interview with
Dustin Diaz
about Javascript libraries. Javascript is becoming increasingly important as web designers produce ever more powerful web applications. But, how do Javascript libraries fit in? Do they enable rapid development or are they simply a crutch for those that can’t be bothered to learn the language?

Review

There are so many great website applications around these days, many of which allow you to add their functionality to your own site through web services and APIs. The problem is that it is hard to discover what exactly is available. This week on boagworld we review three sites that help you do exactly that:

Podcast 49: d.construct & web services

This week Paul reports from the d.construct 06 web conference and interviews the likes of Jeffrey Veen, Andy Budd, Ian Forrester and Jeremy Keith then endeavours to wade through the jargon to discover the real benefits to your business.

Download this show.

To subscribe directly within itunes click here

The d.construct web conference was awesome. Anytime you get to meet up with other web developers and discuss the future of the web, it is sure to be an inspiring experience. Add to that a great line up of speakers and it is guaranteed to be a memorable day.

I went to the conference knowing very little about web services and with some real concerns about their viability in a real business environment. However, a day spent chatting with other developers and listening to the speakers, not only educated me but also made me very excited about the potential.

I spent most of the day interviewing, however only a fraction are used on the show. Audio quality was a constant battle and background noise a real issue. However, there is loads of great stuff and I have tried to piece it together in such a way that it introduces you to the potential of web services as well as providing you with a sense of the day.

Also in the show…

Also in this week’s show, we review the upcoming book releases from Friends Of ED with Chris Mills (their senior editor). We look at the target.com accessibility case, review a great article by Chris Heilmann and tell you everything you ever wanted to know about designers.

50th episode next week!

Next week’s show going to be entirely based on user submitted questions and comments. To take part simply send your question or comment to [email protected] or submit an audio comment via the odeo website. Remember, your question can be on anything you want, from web design to Marcus’ pop career! We look forward to hearing from you.

d.construct: Full of questions

This will probably be my last chance to post before I am off to d.construct. I have a manic day tomorrow trying to get everything sorted before I go, however I wanted to share with you a couple of thoughts about the upcoming conference.

It’s funny how things work out sometimes. I had not really taken the time to look at what d.construct was covering this year. I enjoyed it tremendously last year and was confident that the guys at Clear:Left would pull together a great line up again.

It therefore came as a pleasant surprise to discover that the primarily focus was on web services and APIs. This was especially good, as I had just decided to address the issue on the boagworld.com podcast.

I have felt for a while that web services and APIs were something that I should address on the podcast but to be frank I don’t know much about them, so felt inadequate to speak on the subject. I had decided to ask Dustin Diaz on the show to give me his take on them but we were having trouble arranging a time (although I still hope to get him on soon!). You can therefore imagine my relief when I discovered d.construct would be covering the same area.

Questions and concerns

must confess, I have loads of questions that I am hoping will be answered. What little I know on the subject leaves me with some doubts about their usefulness to the average website owners. I can see the use for an enthusiastic bloggers who wants to sell amazon books or show their flickr photos. However, what do APIs offer large corporations or public institutions?

Even if a web service does appear useful, this in turn throws up a load of additional questions. For example, what if Google decides to discontinue its mapping service and your site is dependent on it? What if your site pulls in RSS feeds from Feedburner and their server goes down? In my experience, clients do not like being reliant on third parties for their site to operate successfully.

As you can see, I have all kinds of questions. As with so many of these emerging technologies I am left wondering how it will benefit my clients. I am happy to admit that I am blissfully ignorant in this area and my hope is that d.construct will show me the light.

I’ll tell you what I learn in next weeks show.

Say hello

If you are going to d.construct then please come over and say hello. I am always keen to chat with people that read this blog or listen to the podcast. That way I am not standing in the corner looking like billy no mates!

Podcast 47: The mobile web

In this week’s show, we look at why you should take the mobile web seriously. What potential pitfalls you will face and what options are available to you for utilising mobile technology.

There are three times as many mobile phones than personal computers. By 2009, it is predicted that there will be 3 billion mobile phones worldwide. This week on boagworld, we discuss an evolution of the web almost as profound at the arrival of the internet itself… the mobile web.

Download this show.

To subscribe directly within itunes click here

The mobile web

Without a doubt, it will not be long before more people access the web via mobile devices than desktop PCs. However this huge (and potentially lucrative market) is not without its pitfalls. With over 40 mobile browsers and 160 devices, the mobile web makes the browser wars look like a walk in the park.

In this week’s show, we look at why you should take the mobile web seriously? What potential pitfalls you will face and what options are available to you for utilising mobile technology.

Most of the discussion is based around presentations given by Tom Humes at last years d.construct and Cameron Moll at this year’s @media. They know much more about the subject than either of us and so we highly recommend you take the time to download their talks and hear what they have to say for yourself:

Also on this week’s show

Once again, I antagonise up every mac user on the planet by quoting from Jakob Nielsen’s new book on prioritising web usability. We talk about the recent list of IE6 fixes that will appear in IE7 and discuss both Refresh 06 and d.construct. I also recommend John Allsopp’s latest article on Microformats, which is ideal for those who want to track their growing popularity.

We review two books on this week’s show:

Beginning JavaScript with DOM Scripting and Ajax

Web Accessibility: Web Standards and Regulatory Compliance

Finally, if you haven’t seen it yet check out the superb demo by our sponsor RightCart and see just how fast it is to integrate a shopping cart into your site.

Podcast 42: Choosing the right design

It’s not unusual to be in a position where you have to choose between more than one design for a site. This podcast may help with the question “which design do I pick?”.

Play

In this week’s podcast Paul and Marcus discuss the decision making process involved in settling on a design for your site. Whether you are a designer or web site owner this podcast provides some interesting techniques for choosing the right design.

Download this show.

To subscribe directly within itunes click here

Help us out. Complete our podcast survey

How to approach choosing a design

Your approach to assessing a design is as important as the quality of design itself. Approaching your assessment in the wrong way can quickly lead to the wrong conclusions. Below are a few quick tips on assessing a design:

Avoid personal opinions

Design is very subjective. We all know what we like and yet we very rarely agree on what that is. It is easy to simply assess a design based on your personal preference. However, the chances are you will not be the end user of your site and so the design should cater for a wider audience than just you.

Be careful who you show

Although you don’t want your decision to be based on your personal preference you still need to think twice before you start showing it around. The temptation is to show it to work colleagues to get their feedback however they aren’t your target audience either (unless you are building an intranet). Try and avoid design by committee, have one decision maker that collates feedback from end users rather than co-workers.

View the design in context

It’s important that you assess a design within its context. Never print a design out to make your decision. Access each design on screen and within a web browser. After all, that is how other people will view it.

Check on multiple monitors

A design can look radically different on various monitors due to colour balance and gamma settings. Make sure you look at the designs on as many different screens as possible. A good design needs to be flexible enough to accommodate the different screens your site visitors will be using.

View at different resolutions

A design not only needs to work on different monitors but also at different resolutions. The resolution your PC is running at affects what can be seen on a design before you need to scroll. It is therefore vitally important to ensure key content doesn’t slip below the fold.

Accessing the design

Once you have worked out how you are going to go about assessing the design the next step is to establish the criteria by which you are going to make that assessment. Below are some initial ideas you might wish to use. Each of these areas could go into a lot more depth but I have tried to keep to the main points within each area.

Colour

Colour is a very subjective area, so rather than asking people what they think of a colour, ask them what words they associate with a colour palette. That way if they say a colour conjures up images of "progressiveness" you can compare this with the messages you want the site to convey.

Layout

There are two things to look out for when assessing the layout. Does the design have enough white space and does it have an underlying grid structure. White space allows a design to breath, making content more readable. A grid structure provides some organisation to the design and its absence can leave a design feeling chaotic.

Weighting and flow

Does the design draw the eye to key content and show the user what to look at next? Ensure that the design you choose puts the emphasis on the right elements in the same way a newspaper always makes it clear what the lead story is.

Typography

As with layout there are two key things to look out for when it comes to the text on your site. Firstly, make sure that the text has a decent space between lines. Tightly packed text can be really hard to read and will dramatically reduce dwell time. Secondly make sure that the designer has broken up larger blocks of text with headings, sub headings, bullets etc, as this dramatically improves scanability.

Accessibility

Obviously accessibility is a huge area but within the context of choosing a design there is only one main thing you need to know: Can you read the copy? Is there sufficient contrast between foreground text and the background? Avoid designs that you have to strain to read because ultimately they will drive users away.

Usability

Is it obvious what the user should do next? Do links look like links? Is the main navigation clearly positioned and labelled? Is the user overwhelmed with too many options? In many ways usability is the key criteria I use for judging design. Ultimately users just want to get at information as quickly and easily as possible and the design should not get in the way of that objective.

Branding

To a website owner this is probably the most obvious of the assessment criteria. How well does the design conform to your style guide and tie in with existing print material. A continuity across marketing collateral is vital for establishing a strong brand identity and the web is very much a part of that.

Imagery

The final area of assessment is the choice of imagery. Imagery can make or break a website. Some warning signs to look out for include:

  • Small busy images that are hard to see
  • A lack of consistency across the site with different styles of imagery, all mixed up together
  • Images that grab your attention away from content rather than directing you to it.

The golden rule

If there is a golden rule to choosing the right design it would be communication between client and designer. A client should listen carefully to what a design has to say about their design approach and the designer should be able to clearly communicate their ideas and why they have made the decision to produce a certain design. Too many designers fail to justify their approach and too my clients make up their minds about a design without listening to the logic behind it.

Also in this show

In this week’s show we take a look at a number of web conferences including the @media podcast feed, Refresh Orlando (which Paul will be speaking at) and d.contruct. We also discuss the ethical issues surrounding being "inspired" by another website, as well as a review of the Wiltshire Farm Foods website.

atMedia: Real world application

Yesterday I posted my thoughts on each session as I went along. Today I have decided not to post on each individual session but rather sum up the overall lessons to be learnt from this year’s show.

I have really enjoyed this year’s conference and have unsurprisingly learnt loads and met some great people. The trick is to now take what I have learnt and apply it to the real world.

This blog and podcast has always been aimed at two specific audiences:

  • Those that run and manage websites but aren’t web developers
  • Those that are web developers, but don’t have time to keep up with all the latest trends in this constantly evolving industry

A lot of what is written about web design is full of techno-babble and therefore incomprehensible to anybody who isn’t an ubergeek. The same is often true for web design conferences and atMedia was no exception. Discussions about WCAG 2.0, microformats and the DOM can often seem to have little relevance in the real world simply because they are not clearly explained in real world scenarios.

Bearing all of that in mind I have attempted to summarise the key issues raised from atMedia in such a way that they are relevant to the daily experience of the boagworld audience.

atMedia for website owners…

Pragmatic Accessibility

Probably the most depressing session at the conference was the one that discussed accessibility. I won’t bore you with the details, but sufficed to say the new accessibility guidelines that are currently being developed have some serious issues.

Many website owners have traditionally simply asked their web design agency to "make their site compliant with the accessibility guidelines". All they cared about was ticking the accessibility box so they didn’t get sued.

The lesson from atMedia is that you need to change that thinking. Accessibility needs to be more about finding the right solution for your users, rather than conforming to a generic checklist.

Are you more likely to be sued if you take this approach? No, not if you respond in a timely manner to any accessibility problems that your users identify.

Sites that work together

In the two atMedia conferences I have attended there has been more and more discussion about sharing information across multiple sites and in a variety of different ways. Whether it is turning contacts into downloadable business cards that can be taken into outlook or allowing events you show on your site to be published on other sites. Whatever the situation there are more ways than ever to share information. Not only is this an excellent way of getting your message in front of a larger audience it is also a great way of creating closer integration between websites.

Although this is still an evolving area I would encourage you to start thinking about what information on your site might be worth sharing and possibility some of the ways you would like to share it.

Also it is worth noting that there are a lot of other sites out there that allow you to integrate their content into your site. For example it is now easy to take Google maps and plug them right into your pages. In the closing panel of the conference the idea of sharing content between sites came out as the big area of growth over the next year, so it is definitely worth your attention.

Internet Explorer 7

Probably the most pressing issue for web site owners is the release of IE 7 within the next two or three months. It is vitally important that your site is checked in this new browser as changes to the way it works could mean that your site appears broken. Fortunately this is relatively easy to check by downloading the beta version of IE 7 and simply visiting your site. If you do spot problems, now is the time to contact your web design agency. But don’t worry, the fixes shouldn’t be that difficult or expensive.

More than just web pages

Without a doubt, the biggest shift in thinking between last year’s conference and this one, is in the area of web applications. What that means is that your website can now be more than just a collection of pages, but rather has the potential to behave more like a piece of software on your desktop. How does that apply to your site? Well, that depends. Let’s say that you have an events section. Instead of allowing users to click through a series of pages showing lists of events and then detailed information on an individual event, you can now show it as a calendar very similar to the one found in outlook. The key is that it is no longer necessary to wait while a new page loads but rather that information can appear instantly in the same way it would in a piece of software on your desktop.

Now it is worth saying that it is early days for this kind of technology and you might want to wait for the cost of development to come down. However, it is worth having a long hard look at your site and thinking about where it might be appropriate to add richer interactivity.

This isn’t the most straightforward of concepts to grasp so if you are left wondering what I am talking about then don’t panic. We will cover this subject in more depth later. However to get you started check out Google maps and then compare it with a site like Mapquest. Notice how on Mapquest everytime you zoom in or out the page reloads, while in Google maps it all happens without the refresh.

Don’t underestimate branding

Although this isn’t a new concept, it was really driven home in one of the sessions: you get what you pay for. It came up in a discussion about design and that great web design takes time. Often web design companies will cut corners on design in order to stay within a clients budget. This is unfortunate as research highlighted at the conference demonstrated that users make their mind up about a site based largely on how it looks. Once those first impressions have been formed it is very hard to overcome them no matter how good your content is.

The lesson to be learned here is that when you are looking at a web design companies proposal take particular note of how much time is dedicated to establishing the look and feel of your site.

Your site on a mobile phone

Without a doubt delivering the web through mobile devices like mobile phones is going to be a big growth area over the coming year. Already there are three times more mobile phones than personal computers, the vast majority of which can access the web. The question is; do you need to worry about this yet as a website owner? Well to some extent that depends. The key thing that came out of this conference is that mobile users want very different content from a user sitting at a PC. The chances are a user isn’t going to want to know about your company history while shopping in the high street. However they might be interested in comparing prices if you run an ecommerce site.

Even if you have content which might be useful to mobile users the current barrier to entry is very high. With so many mobile phones out there and so many different browsing experiences, creating a good mobile website is very difficult.

My advice is simple… wait. Wait for the industry to mature and standards to emerge. Although the mobile web is an exciting area it is early days and now is not the time for the majority of organisations to enter the market.

atMedia for busy web developers…

New accessibility guidelines: Don’t worry YET

So you have just begun to get your head around the WCAG 1.0 guidelines when you hear that the second version is about to be released. Don’t panic, you don’t have to worry about them just yet.

To be honest, it became quickly apparent from the session on these guidelines, that they are in a mess and not yet in a fit state to release. Even the accessibilit
y experts are havin
g trouble understanding them so I really wouldn’t waste your time at this stage.

The emphasis should be on creating the most accessible site you can irrespective of any particular set of "rules". That isn’t an excuse to slack off, but it should be seen as an opportunity to be pragmatic about the approach you take to accessibility.

Time to learn Javascript

If I had one message from last year’s conference it was "now is the time to learn standards". This year the message is "get your hands dirty with Javascript". Javascript is, without a doubt, having a real renaissance and it is a skill you should definitely develop whether you consider yourself a developer or a designer. More and more of your clients are going to be asking for some of the cool functionality that is found on the so called "web 2.0" sites and as these are mainly driven with Javascript you will need to brush up your skills. But beware, make sure the techniques you learn are up to date and that you get your head around concepts like unobtrusive Javascript, graceful degradation and progressive enhancement.

Preparing for Internet Explorer 7

As I am sure you are already aware IE 7 is going to be launched in the next couple of months. What you might not know is the new browser is going to be pushed out through windows update so you can expect this to become the dominant browser very quickly. Obviously this is an excellent opportunity to get some extra work from your clients (unless of course you are an in house designer in which case it is just extra hassle – sorry!).

In order to make the process of testing and fixing sites as painless as possible Microsoft have produce a set of tools for preparing for IE 7. Among them is an expression finder, useful for finding all of those annoying IE specific CSS hacks which may no longer work in IE 7.

Open data

From Google Maps to Microformats, there are more and more ways to share data across multiple sites. This kind of data sharing was seen as the biggest growth area for the coming year, so it is something that is worth learning more about. I couldn’t possibly begin to cover the many opportunities in this post but it is definitely an area to start researching.

One of the simplest places to start is with the subject of Microformats. Microformats are simply a consistent way tagging content across multiple sites. Because data is marked up in a consistent manner it can be identified by other systems and used.

The simplest example is the hCard which allows you to markup your contact information on your website in such a way as to make it readable by other sites and applications.

I know it may all sound very confusing but it’s actually very simple and very powerful. Definitely worth checking out.

Pricing design

One of the sessions at the event focused on what makes design great. It was presented by some of the best designers around and yet their answer was incredibly simple. Great design takes time. You need time to consider and tweak a design. The creative process just can’t be rushed. If you are anything like me, the look and feel of sites that you work on don’t get the priority they deserve. With so many time consuming tasks within an average project, design is often the first to suffer when the budgets are tight or the deadline is looming.

Although it is not easy, the moral of the story is that if we want to make our designs truly exceptional, we need to build more time for design into our projects. If you work out how to do that without sending the budget through the roof then let me know!

Designing for mobiles

Although designing for mobile devices is a huge growth area and you may well find clients interested in mobile sites, proceed with extreme caution. The session here at atMedia confirmed my worst fears about developing for mobile devices. There are approximately 40 different mobile browsers and over 160 different devices. Support for XHTML and CSS is minimal and designing for the mobile web is a very different beast to designing for the PC.

And so it ends

So that’s about it. A great conference. Thanks to all that were involved in presenting and putting on the event. It was incredibly enjoyable and had a great friendly atmosphere. If you missed out on atMedia then don’t panic. The podcasts will be out soon and you can still come to d.construct in September (for a fraction of the price!).

Podcast 35: An interview with Andy Budd

This week on boagworld.com Paul chats with Andy Budd, author of CSS mastery, founder of clear:left and “international” speaker. Paul and Andy discuss the state of web design, working with clients and a bit about Andy’s background and expertise.

Play

Download this show.

Despite what I may like to think, myself and Marcus don’t know everything which is why we felt it was about time we started to get some other web professionals on the show.

In the first of what will hopefully be a regular series of interviews with different web designers, I speak to Andy Budd. Andy is a prominent figure in the web design community and is well known for his book on advanced css as well as his personal blog. However, Andy is also a founding member of clear:left the web development agency which arranged last years grass roots web 2.0 conference; d.construct.

Myself and Andy discuss:

  • How Andy got involved in web design
  • Why he is passionate about it
  • The general state of industry today
  • clear:left and how it came about
  • Andy’s book on Advanced CSS
  • How web designers should keep up with our constantly evolving industry
  • What web managers should be focusing on over this year.

Coming soon

Our next interview will hopefully be with Aral Balkan who is an expert in flash applications. With any luck he will be able to put me in my place regarding this overly criticized technology!

In the meantime be sure to download next week’s show where we look at the basics of creating a solid information architecture.

Web Design Podcast (14) – Real World Web 2.0

In this episode of the boagworld podcast, Marcus Lillington and I try to take the characteristics of Web 2.0 and apply them to real world websites.

Play

Download this show.

Over the past few weeks, I have written a lot about Web 2.0 on boagworld.com. However, most of what I have written consists of questions rather than answers. In this episode of the boagworld podcast, Marcus Lillington and I try to take the characteristics of Web 2.0 and apply them to real world websites.

One of my greatest concerns with Web 2.0 is that it seems to have been adopted by only a handful of largely technical consumer websites. Few of these sites seem to have a traditional business plan and so bare little resemblance to the average organisation’s website. In this podcast, we look at what Web 2.0 actually is and how those underlying characteristics apply to the mainstream websites we all work with on a daily basis.

A lot of this podcast is based on Andy Budd’s presentation at the d.construct Web 2.0 conference here in the UK. Andy did an excellent job at defining Web 2.0 and explaining why perhaps the buzzword does have its place. What we do in this podcast is look at what can be learnt from this new generation of websites and moved across into the mainstream.

More on Web 2.0

Listen to the Podcast of Andy Budd’s presentation

Where’s the money?

d.construct and Web 2.0

Web applications

Boagworld.com news

Boagworld.com is proud to be included on the 9Rules Network

Check out the Boagworld.com “web design” search mentioned in the podcast

Check out Google’s new website statistics service – Google Analytics