119. Fluid Elastic

On this week’s show Ed Merritt joins us to discuss fluid, elastic layouts and we take a look at PHP Designer, a feature rich code editor.

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Harness the power of "frilly bits"

I love watching design trends come and go on the web which maybe why I love Patrick McNeil’s Design Meltdown so much. One trend that has caught my eye is the move away from the Web 2.0. look to something more ornate.

This style makes use of what can only be called "frilly bits". You know the kind of things, those swirls and ornaments buried in typeface sets but rarely used. They have been around for years, used by blacksmiths and typesetters alike. They turn up on everything from wedding invitations to architecture, and now it would appear, the web.

One of the first sites I saw them was Cameron Molls blog. He is an amazing designer with a very ornate and delicate style (about as far away from my own as possible).

Recently one of Cameron’s readers asked him where he sourced such beautiful ornaments and he has been kind enough to share 25 different sources of similar frippery.

Unfortunately, simply knowing Cameron’s sources will not grant us the ability to design as well as him. However, it is an extremely useful list and definitely worth perusing at your leisure.

The cure for content-delay syndrome

Returning from the world of creativity to the realities of project management, our next post tackles the frustrating subject of clients failing to deliver content on time.

Entitled the cure for content-delay syndrome this article addresses once again the subject of copy-writing.

We have talked about the need for a copywriter many times before. I have encouraged you of the need to engage a professional to craft your sites copy, while at the same time struggling to convince my own clients of the need.

The problem is that ultimately many clients believe they can write their own copy. After all they are experts in their field and know their own audience. Some argue that it takes as long to brief somebody as to do it themselves. When budgets are tight, these sound like convincing arguments and are hard to dispute.

This post suggests that the answer in not to promote the use of a copywriter but an editor. An editor refines the clients text rather than writes it from scratch. This is considerably cheaper but still brings improvements in continuity, accessibility, usability and SEO. What is more, the client no longer needs to worry about the quality of his writing. Instead he can concentrate on "bashing it out" and let the editor improve its readability later.

Its a persuasive argument and gives me hope that I might soon be able to encourage my clients to engage a professional to work on their copy.

The roles of a web entrepreneur

From the role of an editor to the many roles of a buddying web entrepreneur.

We haven’t spoken much about developing web applications on the show (this is definitely something we should try to do soon). Traditionally web design has been a service industry and for the vast majority that is still the case. However, a growing number are looking to add a product line to their offering or make the switch entirely. Certainly this is something we are doing with getsignoff.com

But what does it take to be a web entrepreneur and build web applications? Well, unless you have a lot of venture capital it requires you to wear a lot of hats as explained in this post on Think Vitamin.

From marketeer to customer service representative, you are required to fulfil many more roles than you are used to. Its a challenging undertaking but the benefits are substantial. Get it right and you have a regular income without the overheads associated with a service based business.

Intranets revisited

Another subject that we have neglected on the show is intranets. They continue to grow in importance and yet have fundamental unresolved problems.

In two great posts Gerry McGovern exposes these flaws including the tendency for intranets to become dumping grounds for information and their lack of decent search.

Both posts in their own way focus on the fact that intranets should be about "getting things done". They should provide tangible productivity benefits but often fail to do so. Each post identifies a reason for this being the case.

The first points to the way intranets are perceived. Many see them as an information repository. This appears to be a fancy way of saying "where information goes to die". Viewing an intranet in this way, McGovern argues, is to miss the point. We should only be distributing information if it aids productivity or encourages collaboration.

The second post argues that intranets fail to aid productivity because information is just downright hard to find. In particular Gerry targets search but he also argues there is a wider problem of find-ability. Why is it he asks, that even in the largest of organisations nobody is dedicated to ensuring employees can quickly access the information they need to do their jobs?

If you have an intranet or are involved in developing them, then these are an excellent read.

Back to top

Feature: Fluid Elastic Design

When it comes to planning the layout of your new website there are just three commonly used website layout structures to choose from: Fixed; Fluid & Elastic width layouts. None of these are perfect; each comes with its own advantages and disadvantages and in this weeks feature we have Ed Merritt with us to disuss them.

Back to top

Review: PHP Designer 2008

This week’s review is on PHP Designer 2008 has actually been submitted by Simon Jones of Zako Media. He writes…

As a web business, I needed stable coding platform or IDE which would allow me to be as productive as possible. Money was no object so I researched everything available from open-source packages to expensive commericial software. I discovered phpDesigner from www.mpsoftware.dk and was blown away. It’s much quicker than Zend and has most of the same features. phpDesigner has all the usual code highlighting and auto-completion for PHP, CSS, HTML, Perl, XML, Javascript, along with easy buttons to tidy this code on the fly. We all know how hard it is to keep code tidy… now we don’t have to. phpDesigner also allows you to arrange files by project without disrupting the standard windows folder system. If you ever want to transfer away from this software, you don’t need to worry about compatibility.

The smaller features I find most useful are: bracket matching, code explorer (to jump to functions, variables and arrays), code snippet library to store your most commonly used functions from project to project. Tooltip syntax reminders for PHP and rightclick to view PHP.net help page for that function. Finally it validates your syntax on the fly, without affecting performance… all other editors stalled, slowed and chugged away as they scanned the whole file every time a character was added. phpDesigner offers the same ability with very little processor time, as soon as you’ve finished a line, it hilights unobtrusively to show missing semi-colons, brackets etc. A more detailed error message can be accessed. This saves valuable Alt-Tab, Control-F5 time. (or for apple users, switch task and refresh browser) as you know the code is error free before you start.

The software offers links to internal ‘browsers’ for phpmyadmin and php help, has an inbuilt ftp client or allows you to call an external one like filezilla. It helps integrate nicely with Smarty templates and works with phpDocumentor for instant php documentation.

On the longer term projects, it has built in bug tracking information, project and global todo lists.

One of the most important and major strengths with this software is it’s stability. It has a few issues sometimes closing down if it’s travelled through a laptop’s standby mode, but otherwise it has never crashed or lost data in the years I’ve been using it. mpsoftware is obviously passionate about this product as updates are available very regularly offering additional functionality and fixing minor bugs.

This is by no means the full feature list, but more information can be found at www.mpsoftware.dk where they have a free cut down non-commercial version and sell the full version. Compare to other available software and it sounds expensive, but mpsoftware.dk is charging a ridiculously low €39 for a single license with further discounts for groups of 10.

Thanks to Simon for that review.

Back to top

Listeners feedback:

Can you set up a web design company in the evenings

John Bullock asks: Hello boagworld team, my name’s John and I’ve got a question for you. Basically I’m starting up my own web design company and I’m in what I think is an unusual situation of trying to do it along side my 9 to 5 job which has absolutely nothing to do with computers, it’s actually an engineering job so I actually have no chance at all to work with computers in my normal job. Now I know trying to set up a company alongside your 9 to 5, while obviously tiring, is a very sensible and safe way to do it, is it actually possible? Do you think it’s a realistic way of setting up a company or do you think I would have been better going with the freelance option? It’s great to have the show back after what seemed like a decade and keep up the good work.

Yes it is definitely possible. In fact it is the way the vast majority of freelancers begin. That is not to say it is easy. However, it is the most sensible approach. If you don’t your options are fairly limited…

  1. Wait to be made redundant and hope you get a payoff
  2. Live off the kindness of friends and family (a guaranteed way of losing friends)
  3. Borrow money from the bank

Personally, I am very much against borrowing money. It substantially increases the risk. If you setup loan free then you can get another job if things go wrong. With a loan you are left in debt and struggling to pay the rent.

Build up a freelance business on the side and save the money to pay for the first few months. Also if you are able, land some regular customers. This will give you an existing client base to bring in much needed cash. At the very least you will have a portfolio of client work to show off.

We were fortunate. The web design company we worked for folded. Although we didn’t get any redundancy payment we were able to take several of the clients with us. These not only provided valuable income in the first few months but also allowed us to attract other clients.

Domain names

Robert Prior asks: Hello Paul and Marcus, my name is Robert Prior and I am from Waco Texas, i’m currently a beginner web designer but in the future I would like to set up a small web design agency here where I live and my question is, when you’re trying to get the URL for your company name, how important is it to get different extensions like .net, .info, .tv are those important at all? Or do you just need to get the one main one like the .com name? Really enjoy the show, appreciate all the hard work you guys put into it and looking forward to future episodes. Thank you.

In my opinion your domain name is incredibly important. You should definitely try to get the domain extension for your country and .com as well. We have never managed to get headscape.com but as the vast majority of our business is in the United Kingdom headscape.co.uk has been adequate.

However a good domain is about a lot more than the extension. Personally I am not a fan of these new web 2.0. urls (flickr, del.icio.us, digg). They are hard to spell and hard to remember. In my opinion a good url should be a well known word (or words) even if not directly associated with your product. Headscape for example sounds more like a hair dressers than a web design agency, but at least it is memorable and easy to spell.

Another common mistake is to go for a domain name with hyphens. This never works well as it is hard to tell somebody. For example "headscape dot co dot uk" is much easier then "head hyphen scape dot co dot uk". Also users often later forget that it contained a hyphen.

The ideal domain is also descriptive of the site. For example we were blown away to discover getsignoff.com was available. It describes exactly what we do and is memorable too. That said more recent studies suggest that a brand name (Amazon.com) is more valuable than a generic name (books.com), so if you are forced to choose pick the former.

Finally, be careful to avoid words with multiple spellings especially if working internationally. For example don’t choice a domain like colorTheory.com because it could equally be spelt colourTheory.com.

Many claim that there are no good domain names left. Although it is harder these days getsignoff proves they are still out there. With a bit of lateral thinking (or using one of the domain suggestion tools) they can be found. There is no reason to start randomly start dropping vowels.

Question: Headscape tabs

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

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

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

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

Choosing AJAX

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

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

Screenshot of Headscape website with Javascript disabled

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

The Javascript

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

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

The function carried out the following actions:

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

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

The problem with AJAX

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

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

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

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

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

117. Friendly

On this week’s show, we review woopra, a google analytics alternative and we explore why friendly urls are so important and what tools are out there to help you set them up.

Play

Download this show.

Launch our podcast player

Information

Fuel Conference

Fuel is a one-day conference for entrepreneurs and marketers who want to make their companies, services and products truly remarkable. The conference is on the 13th June 2008 and tickets cost £195 inc VAT however for lucky boagworld listeners if you enter the promo code boagworld at the checkout you will get a £25 discount!

Back to top

News and events

The devil is in the detail

We kick off the news with three stories that focus on the detail of web design. So much is said about design, usability, accessibility and other broad subjects. However, less is written about the small things. It is here that a good site becomes an excellent site.

The first is a post on the list apart website entitled Zebra Striping: Does it really help?(1). Zebra striping refers to alternating colours on a table of data. It is a small thing, but a lot of us do it thinking it helps the readability of the data. But does it really? This post takes that theory and puts it to the test. The results are inconclusive but it is an interesting read anyway.

The second story is about a new book released on the topic of web forms. It’s called Web Form Design(2) and as the title suggests looks at the much under-represented subject of creating a great looking, usable form.

As I have said before forms make or break some of the most crucial elements of a website: checkout, registration, data input, and any task requiring information entry. This looks like an excellent read and I highly recommend you check it out. I will be.

The final post that focuses on the detail of design is looks at pagination(3). It is a tutorial that explains how to code pagination semantically. It then demonstrates how you can use CSS to recreate the appearance of pagination on sites like digg or flickr. It is an easy read and ideal for beginners.

Review crazy

The next theme of the week is reviews. In particular Smashing Magazine have gone review crazy in two excellent (if somewhat excessive) posts.

The first reviews 35 useful code editors(4). Of course, we can write our code with a text editor but that wouldn’t make for a very interesting post! Also we like those advanced features like auto complete, formatting and debugging tools.

If like me you have been using the same coding tool for years, this article is worth a read. Things have certainly moved on and there is no shortage of choice out there. It might be time to change.

The second review from Smashing Magazine only manages 25 applications. This time it is WYSIWYG editors(5). I guess this compliments the previous post very well. However, generally speaking I would warn against producing sites using WYSIWYG editors. That said they do have their place. They are useful to give to clients who want to maintain their own sites. They are also good for posting to blogs or other sites where the styling is already set.

It has to be said that I personally code in Dreamweaver, which has a WYSIWYG component. I have been known to use it to find a particular part of the code I want to edit.

A balanced look at flash

Our final news item of the day is a post by Veerle on her blog entitled Does Flash irks me?(6). It is an excellent opinion piece that clearly lays out her feelings about flash. She explains how she decides whether to use it and dispels some of the misconceptions about the technology.

Her post is very timely coming as it does a week after flash goes open source. It is balanced and her attitude very much mirrors my own (therefore it must be right!). If you view flash as the ultimate evil or alternatively refuse to code in anything else, read this post. It will provide a healthy dose of realism.

Back to top

Feature: Friendly web addresses

When redesigning boagworld considerable time was spent formatting the sites’ web addresses. Find out why so much time was taken and an introduction to the tools I used in this weeks feature

Back to top

Review: woopra

When it comes to website statistics Google Analytics dominates most of our thinking. However, there are some impressive alternatives. One I would like to introduce to you is woopra. I give my thoughts to woopra in this weeks review

Back to top

Listeners feedback:

Creating consistant colors

Anna Joe Writes: I know that the colour of a website will look a little different on every monitor, but is there a profile setting that you use as an ‘average’ setting?

Since I work on Mac with a Mac monitor, I’m afraid most people will see something radically different than me. I have read that Mac defaults are brighter than Windows. I’m using a lot of dark colours, so I am concerned about the site appearing too dark on the majority of computers.

I have a list of colour settings provided on my computer… only one seems to have a Windows-related profile. It’s called ‘Nikon WinMonitor 4.0.0.3000′

Do you have any suggestions regarding this issue?"

I have to confess Anna, this was a subject I knew nothing about before your question. The way that I got around the problem was to look at any design I produced on as many different monitors as possible. To be honest, even after my research I would advise this as the best approach.

View your site on a TFT and an old CRT monitor. Also check on laptops and under different operating systems.

However, based on a bit of reading it would appear that the problem is to do with Gamma settings. Macs by default have gamma correction built in while PCs do not. This causes images (especially photographic images) which look good on a Macintosh monitor to appear too dark on a PC.

Fortunately there is a tool that allows us Mac users to experience the horror of the PC world. It’s called gamma toogle(7) and can be downloaded for free.

If you don’t have access to multiple machines for testing this would be the next best thing.

Setting up an ecommerce site

Paul East Writes: My girlfriend has come up with an sales idea that would require a simple store front application with the ability to take credit and debit card payments online.

Have you any advice on where to start or any recommendations on store front applications?

We’d like to try and keep start up costs low (we’d like to avoid paying a web designer, sorry!) and avoid eBay type stores if possible for that more professional look.

We’ve done a little investigation on merchant accounts but could do with a good steer on the rest!

Again this is not a subject I k
now a huge amount about. Most of the ecommerce sites I work on are considerably larger. However, hopefully I will be able to point you in the right direction.

First, for the best advice when it comes to setting up ecommerce sites big or small I would highly recommend the ebiz video podcast(8). These guys really know their stuff and in fact we had them on show 55 to talk about ecommerce basics.

Second, in the past I have come across two simple shopping cart systems that impressed me. The first is FatFreeCart(9). This simple system can be integrated easily into an existing site. If you are only selling one or two items this is perfect. The alternative is shopify10. This is a little more sophisticated but incredibly simple to setup and run.

Neither of the questions today are subjects I know much about and I am guessing there are people groaning at my advice. If that is the case, get in touch and we will put you on the show.

Back to top

Friendly web addresses

When redesigning boagworld considerable time was spent formatting the sites’ web addresses. In this post I explain why so much time was taken and introduce you to the tools I used.

Website owners are beginning to realise that the address of each web page is a crucial part of its design. These friendlier website addresses provide three benefits:

  • Memorability
  • Better navigation
  • and improved search engine placement

Understanding these benefits provide a small but significant advantage over the competition.

Memorability

For Boagworld, the major consideration was ensuring my web addresses were memorable. If you have ever listened to the podcast you will know that each week I refer users to the shows notes by saying something like…

Go to boagworld.com/podcast and select show 114.

I did this because the address was too long to read and remember. A typical show would have an address of…

http://www.boagworld.com/archives/2008/03/114_forum.html

The problem was almost always the same when referring to third party sites. The URLs were just too hard to remember or guess.

Being able to guess a web address isimportant, and leads nicely on to our second benefit.

Better navigation

A well designed web address should enable a user to guess other related addresses. Take for example Flickr.

To see my photos you go to…

http://www.flickr.com/people/boagworld/

Once you have seen that website address, it is easy to guess the address for another users photographs. The same applies to tags. Once you have seen that photos tagged with my name have the address…

http://www.flickr.com/photos/tags/paulboag

…it is easy to guess the format for other tags.

However, the addresses on flickr do more than provide navigation. They also give context as to your location within the site. By looking at the addresses above you know not only where you are in the site but what type of information you are viewing.

In effect the web address contains valuable information about the page. This helps explain why friendly urls are good for search engine rankings.

Search engine ranking

Search engines do not always like web addresses produced by dynamically driven sites. Long query strings such as…

http://www.boagworld.com/index.php?sourceid=navclient&q=4

…would have once been rejected entirely by search engines. Today things have moved on, and most search engines will crawl them. However, they still place limits on how they crawl them and so generally they should be avoided.

Worst still, the web address above provides no keywords to help a search engine understand the meaning of the page.

However, a semantically written web address like the one for this article…

http://boagworld.com/technology/friendly_urls/

…says a lot about its content.

Hopefully now the benefits of meaningful web addresses are obvious. Let me now show you two tools I have used to improve the web addresses on the boagworld website.

Useful tools

The method for making your web addresses more friendly is largely dependant on the technology that generates your site. However if like me you are using a blogging platform, the chances are it already has the tools built in. Both movable type and wordpress allow you to set the format of your addresses and both have pretty poor defaults.

For example, movable type will default to archiving blog posts using the following format…

http://www.boagworld.com/year/month/name.html

Generally people are not interested in seeing posts from a specific period. Instead they want posts on a similar subject. I have therefore changed the format to…

http://www.boagworld.com/category/name.html

Of course, you maybe working with a technology that does not support this feature. If that is the case, check out How to succeed with URLs(A) on A List Apart. This article provides so very practical approaches which may help.

The other tool I have adopted provides a useful fallback if all else fails. It is called Shorty(B) and works likeTinyURL. You install it on your server and it takes long URLs and shortens them to something memorable.

Screenshot of Shorty

For example I could take the web address of an article on sitepoint about Friendly URLs and reduce it from…

http://www.sitepoint.com/blogs/2007/11/05/friendly-urls/

to…

http://boagworld.com/links/sitepoint

This is invaluable on the podcast as it allows me to read every address. However it could also be used to shorten the URLs of key content on your site.

Hopefully I have convinced you of the value of friendly URLs and provided a couple of suggestions about how to start. However, I would love to hear your tips on creating the perfect web address. Post them in the comments below.

113. Hiring

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

Play

Download this show.

Launch our podcast player

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

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

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

News and events

Highly extensible CSS

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

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

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

Video tools

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

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

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

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

Microformat boost

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

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

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

Back to top

Feature: Hiring new staff

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

Back to top

Expert interview: Christian Heilmann on common Javascript mistakes

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

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

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

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

Paul: Um hum…

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

Paul: Yeah…

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

Paul: Um hum…

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

Paul: Yeah.

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

Paul: Umm…

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

Paul: Yeah.

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

Paul: Mmm…

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

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

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

Paul: Um hum…

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

Paul: Yeah.

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

Paul: Mmm hmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

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

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

Paul: (Laughs)

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

Paul: Mmm.

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

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

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

Paul: Mmm…

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

Paul: (Laughs)

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

Paul: Mmm.

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

Paul: Okay.

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

Paul: Oh okay.

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

Paul: Mmm.

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

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

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

Paul: Mmm…

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

Paul: Mmm.

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Um huh.

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: Mmm.

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

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

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

Paul: Mmm.

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

Paul: Mmm.

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

Paul: Right.

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

Paul: Mmm.

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

Paul: Yeah.

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

Paul: Mmm hum.

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

Paul: Yeah.

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

Paul: Umm hmm.

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

Paul: Mmm.

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

Paul: (Laughs) …or drinking…

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

Paul: Mmm.

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

Paul: Mmm.

Christian: Otherwise you start preaching to the choir.

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

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

Paul: Okay.

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

Paul: What do you mean by that?

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

Paul: Okay yeah.

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

Paul: Yeah.

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

Paul: Mmm hum.

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

Paul: (Laughs)

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: Yeah.

Christian: And that’s never the case.

Paul: Hmmm.

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

Paul: Mmm hmm.

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

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

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

Paul: Mmm.

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

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

Christian: Yeah.

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

Christian: See you soon. Bye.

Back to top

Listeners email:

Rolling out new features

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

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

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

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

Here’s the solution I had planned:

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

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

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

Content management and CSS

Our second listener contribution is a question from Adrian…

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

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

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

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

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

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

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

112. Jina

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

Play

Download this show.

Launch our podcast player

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

News and events

Some customers are not worth caring about

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

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

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

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

Version targeting rumbles on

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

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

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

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

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

Let users tagging your posts with delicious

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

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

Back to top

Feature: Using HTML snippets

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

Back to top

Expert interview: Jina Bolton on women in web design

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

Jina: I am doing well. How are you?

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

Jina: [laughs]

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

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

Paul: Ummm!

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

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

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

Paul: Ahhh, I see.

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

Paul: Right.

Jina: Anyway, different subject. [laughs]

Paul: Okay!

Marcus: [laughs]

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

Jina: Yeah.

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

Jina: [laughs]

Marcus: [laughs] I can live with it.

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

Jina: Yeah, I think it will be great.

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

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

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

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

Jina: [laughs] You found my tactic.

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

Jina: Sure.

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

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

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

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

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

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

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

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

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

Paul: Hmmm.

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

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

Jina: Right.

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

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

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

Jina: [laughs]

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

Jina: Ewe I have no idea. [laughs]

Paul: [laughs]

Marcus: [laughs]

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

Paul: Hmmm.

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

Paul: [laughs] Good for you.

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

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

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

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

Jina: No, no.

Paul: [laughs]

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

Paul: Yeah.

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

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

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

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

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

Paul: Yeah.

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

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

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

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

Jina: [laughs]

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

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

Paul: [laughs]

Jina: [laughs]

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

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

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

Paul: Ummm!

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

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

Marcus: [laughs]

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

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

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

Paul: [laughs]

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

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

Jina: Okay.

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

Jina: That sounds good.

Paul: Okay.

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

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

Jina: [laughs]

Marcus: Ha ha ha.

Jina: Thatís awful.

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

Jina: Okay. Alright.

Paul: Bye.

Back to top

Listeners email:

SXSW

This week we have a couple of questions about SXSW:

Rich asks…

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

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

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

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

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

Talking of parties and socialising Matthew asks…

Have you considered doing a live show at SXSW?

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

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

Moving to the mac

Brenda asks…

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

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

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

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

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

107. Running to keep up

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

Download this show.

Launch our podcast player

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

News and events

Setting expectations

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

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

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

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

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

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

Great websites do, not say

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

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

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

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

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

CSS: The All-Expandable Box

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

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

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

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

Back to top

Feature: Where to focus in 08

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

Back to top

Expert interview: Jason Beaird on design basics

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

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

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

Jason Beaird: That’s correct.

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

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

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

Jason Beaird: So everybody laughs along.

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

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

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

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

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

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

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

Jason Beaird: Yep.

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

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

Paul Boag: Yeah.

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

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

Jason Beaird: That’s true.

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

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

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

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

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

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

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

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

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

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

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

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

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

Jason Beaird: One of the other big things from going through a collage art programs is that if you go to school for graphic design you’re not just going to school for graphic design you actually have to take all the traditional art classes, painting, drawing, pottery sometimes, a lot of history and really the reason for that is to create a foundation to a visual exposure to art. So you have this vocabulary and this experience pool to draw from when you are creating other designs.

Paul Boag: You mentioned earlier, negative space when you were talking about texture as another kind of approach to things. Negative space is something I think designers always throw around; it’s a term that we like to use quite a lot. But it’s not something we ever kind of explain. Just spend a couple of minutes explaining how negative space works and why it’s so important, if you would.

Jason Beaird: Negative space is important because it allows you eye to move around things if you had a page completely crammed with text you wouldn’t have any focal point to start with apart from the top of the page. Our eyes usually gravitate towards the center of the composition, so if you think about that you can have an element something around the center of the composition that can lead you to another element. Negative space is really a tool for moving the eye around.

Paul Boag: Right.

Jason Beaird: If you have, like I said before diagonal lines create movement. If you have diagonal lines that move you up towards something else. I gave a few examples in the book; it’s hard to talk about it with having any visuals.

Paul Boag: Yeah I know. It’s frustrating isn’t it? I really sometimes, I really regret doing an audio podcast, it’s a bad choice. [laughs] Ok, let’s look at the subject of typography. I’m guessing it must have been a hard chapter to write because A) typography is a massive subject and B) typography on the web is quite a tricky area. It’s kind of easy to almost easy, as a non-designer, to dismiss typography by going; well there are only about 4 fonts I’m allowed to use anyway so therefore typography on the web doesn’t exist. Why is that wrong, why is that not the truth and how did you squeeze a chapter out of this.

Jason Beaird: Well just like a lot of the chapters there are a lot of books on the subject of typography that go way beyond our experience with web or even print graphic design that go way back to the roots of communication and that’s really what typography is about. Its communication and all websites you’re trying to communicate something so if you can’t do that with pictures and ideas you have to do that with words so the way those words appear to people should become part of your design. It’s on hard with the state that it’s in with the web, having a limited palette of fonts to choose from. But at the same time it’s a good thing, I think for the novice because even though we are limited to this certain number of fonts that everybody has in their computers. Most of those fonts aside from comic sans are decent [laughs] for body text and things like that. The most important thing to remember is that there are other fonts out there and to have sensitivity towards things like spacing between lines and the vertical rhythm. Vertical rhythm isn’t something I talked about in my book because I thought it was an advanced subject but right after the book was published it sort of exploded into a big topic in web design and there’s a lot great articles out there written by other great web designers about vertical rhythm and how that affects your typography.

Paul Boag: So what is vertical rhythm for those that don’t know?

Jason Beaird: Vertical rhythm is just creating a space between your lines that kind of matches up throughout the website so that the spacing in the lines in your navigation area and the spacing in your lines in the content area kind of line up and their not just randomly spaced apart so you get weird alignments between things. It’s creating vertical rhythm, it itself is a good description; you’re creating a rhythm or pattern for your eye to follow down the page.

Paul Boag: So it’s all about basically making sure multiple typographic elements across columns have some kind of relationship to one another and that they are not just higaty pigaty all over the place.

Jason Beaird: That s the way I understand it, that’s the way I think of it is it’s really about creating a pattern and paying attention to the way the text lines up.

Paul Boag: So whatever, bearing in mind that we are limited to such a small set of fonts. What sort of basic advice would you give to someone starting on in web typography. You mentioned line spacing, what are you getting at there?

Jason Beaird: The default line spacing for HTML is very tight. And with tight text like that it’s kind of hard to read And also thinking about the width of the text you are reading . When you are reading a newspaper article or a magazine article the reason the columns are so narrow is because it’s easy, or a book even, it’s easy for your eye to scan a certain width of text and it’s easy for your eye to move to the next line if there is a little bit of space between it. And if you kind of know those basic concepts you can make it a little more pleasing to read that the default set up for typography on the web.

Paul Boag: Yeah, because especially if you’ve got a fluid site you can end up with ridiculously long line lengths if you don’t.

Jason Beaird: Right and I think that’s a lot of the beef people have with fluid layouts is that not only are you taking power from the graphic designer but you’ll also making line widths that are incredibly hard to read. But in my opinion if the user is comfortable expanding the site out to that width, and it’s readable having the line width that long, then obviously they don’t have a problem with it. But you should sort of leave that up to the user if you can. But it’s been proven that it’s easier to read text that’s been set to a certain width.

Paul Boag: Are there certain type faces that are better suited to kind of headings in preference to body’s and vice versa?

Jason Beaird: Well with body text, traditionally it use to be that body text for books and that were set to times or serif fonts because the serifs sort of lead your eye to the next character, but because of the resolution we have with the monitors and the way the text is being presented it’s actually been proven that sans serif fonts are better, fonts like Arial and Helvetica, are easier to read in smaller sizes because you don’t get the kind of resolution, the kind of detail that you get with printed type. And now that’s changing, we’re getting higher and higher resolutions in displays so maybe that will change in the future. But it’s just important to know those kinds of idea when choosing the body type for your website. But when you are choosing a heading, when you’ve got something that is very large it really just matters how the text displays and because you can use images and because you can use things like (scalable Inman Flash Replacement) sIFR to display another font besides the standard 6 or 7 fonts that are available – I call it the ok 5 9 [laughs] that are available across the Mac and web computers, Mac and PC computers sorry. You can choose other fonts that are outside those fonts to use for headers or areas where you want to give a little more design appeal. So there is a world of fonts out there, some good, some corny, that are available, some free and some very expensive that you can use for the headline on your website and it’s just important to be aware of those other fonts. I gave a few resources for free fonts I like www.1001 fonts.com is a good place to go for licensed fonts is a great font boundary, there is just a lot of fonts makers that make excellent fonts, not just for printed material like books but for web designers and people working on the web should be aware as well.

Paul Boag: Cool. So the last chapter in your book talks about imagery and I’m fascinated, and I have to confess that I haven’t read that chapter yet, so I’m kind of fascinated to know what you cover in that chapter as far as using imagery on the web. What kind of advice do you give?

Jason Beaird: Well the imagery. The graphic design doesn’t stop creating the frame around the website. It’s also about formatting the inside which is kind of difficult when you give the power to the user, give them content management. But choosing supporting content imagery is one thing that can really enhance the user experience of the web site. And finding and creating supporting imagery for awebsite content can be very difficult if you don’t know where to look or if you’re not a good illustrator or if you are not good at Photoshop. So I just try to give a basic primer on finding this type of supporting imagery and if you find an image that might work, how to tweak it to work for your needs. I just wanted to give a basic intro to using stock photo sites like iPhoto or stock photo exchange which is sxc.hu is a free stock photography site that is really great it has a lot of images. Finding images and then using them in your site is one way to really enhance the experience for your user, beyond that also I try to warn people from stealing images from Google and stop using the stock images and stock photography that we are all use to seeing in most free publication. I mean really here are a lot of stock images that have been created; the guy with the light bulb over his head, the hands holding the tree that’s growing in the soil in the persons hands. These are clique in the stock photography world you have to be aware when choosing images, to enhance the user experience.

Paul Boag: Yeah, yeah, defiantly , did you cover any of the technical aspects of compressing images or whether to go gif or jpeg and that kind of thing.

Jason Beaird: Yeah I did give a quick primer on jpegs, gifs and pings. And just a quick for everybody, if you are using a photo you obviously want to use a jpeg because usually with photos you usually have a lot of different tones and images. And gifs and pings the file space is based on the number of colours in the image. If you are using an icon type thing or a colour field where you have a limited number of colours then gif or pings are the way to go. And choosing between gifs and pings is really all about choosing between the types of transparency you want to have. Internet explorer 6 and below doesn’t support alpha transparency where you have a sort of gradient from opaque to transparent it just supports on an off. So with pings if you have transparency then you get a pink halo around them. Areas where there is transparency you can’t see it, now there are fixes for that but it’s kind of hacky still and for that reason people still hang onto the good old gif format which has transparency and unfortunately also has animation. [Both laugh]

Paul Boag: So is that one of your rules? Never ever use animated gifs?

Jason Beaird: Actually no it’s not, because I’ve used animated gifs even on my own site if you go to my site jasongraphics.com and hover over the logo it was sort of an experiment toy to play with I was designing my current layout, it was a sliding door type image where I’ve got the still part of the Jason graphics logo and then when you move over it jumps up, the position of the image jumps up so you see the animated moving, like sunrays over the logo. So that’s an animated gif and I’m not ashamed of that. But I think that animated gifs in a lot of ways degrade the professionalism of a lot of websites.

Paul Boag: It sounds a superb book, for anyone that’s not from a design background. Where can they get a hold of a copy, where can they find out more about it, how can they buy it I guess is the next question?

Jason Beaird: Well I’d love you to buy it.

Paul Boag: Obviously.

Jason Beaird: I set a little promo site for the book at www.principlesofbeautifulwebdesign.com were you can kind of hover over, I did a fun little thing where if you hover over each of the chapter names it sort of point s out in the website design itself how the things play a part of the design I made for the promo site.

Paul Boag: Oh cool.

Jason Beaird: Beyond that amazon.com has a good price for the book usually and you can go of course to site point.com to buy directly from them, and most people prefer to do is buy directly from Sitepoint. They sent you lots of emails about books that are coming out and specials. A lot of people are big fans of Sitepoint. I really like them a lot too.

Paul Boag: Yeah if you haven’t checked out Sitepoint before, then it’s worth saying that they are a lot more than a book publisher they have got a huge site with tons of great articles of all aspects of web design and a really active forum as well.

Jason Beaird: The forums are a great place to get involved and a great place to learn new things.

Paul Boag: Thank you so much for coming on the show I can’t say I normally get people on the show to pimp their book and to be honest that wasn’t what I originally ask you to do either. But the more I think about it the more I’ll looked at it, the more I think it’s a perfect book for a lot people that listen to this show if you are starting out in any form of design and don’t come from a design background then I can highly recommend this is a book to check out. Jason, we’ll get you back again in the future no doubt and make you cover some of these things in more depth. But for now thanks you very much for being on the show.

Jason Beaird: I appreciate it, it’s like being on the Dave Letterman show or the Conon O’Brien [Paul laughs] it’s like a status symbol. But I’m glad to be here and thanks for having me on the show.

Paul Boag: Thanks very much.

Back to top

Listeners email:

A excellent wire-framing tool

Robin:I’m a part-time web developer, committed to web standards, one day I’d like to make it my job. I’m a regular listener of boagworld in my car (traffic jam) going to work.

Remembering your discussion with Marcus about wire-framing (Powerpoint or Visio) i just came across this product: http://www.axure.com/demo.aspx. Looks spectacular although much to expensive for me (still).

Keep up the good work.

Building an online portfolio

Sultan:On the Headscape website I notice you have “related links” and “related pages”. What is the logic of that?

Also in your portfolio section when I click on a thumbnail why don’t you guys link to the actual sites rather than to a screen shot?

First of all let me say there is a lot about the Headscape website which I don’t like. It was built a while ago and our thinking has moved on.

One example of this is related pages and links. The logic was that related pages referred to other pages on the same website. Related links where external links to third parties. However in hindsight I don’t think that is a very clear distinction and should probably be changed.

I am however more happy with what we have done in our portfolio section. We have several reasons for the decision to link to screen shots rather than live sites. These include…

  • Some of the sites are intranets and not available to the public
  • Some sites had limited shelf life and are no longer available
  • We wanted the user to be able to click through multiples sites in quick succession

However, the primary reason is that clients often make significant alternations to the sites we deliver. After the end of the project we simply cannot guarantee that the quality of design and code will be maintained and so prefer not to directly link to the sites.

I am not suggesting that this is the right decision however it is the course of action we have chosen for Headscape.

106. Back to work blues

On this week’s show: Paul and Marcus discuss common mistakes when creating your sites structure and Rachel Andrews shares her experiences of getting into web design.

Play

Download this show.

Launch our podcast player

News and events | Common mistakes of site structure | Rachel Andrews on building your web design career | Listener emails

Just a quick little request before we kick off today’s show. I need to get some more moo cards for the boagworld podcast (I am too tight to get proper business cards). Anyway I am having trouble with what to put on the cards. I was going to put a nice image on the cards but when I thought about it I couldn’t think of anything appropriate. In the end I decided to include tiny snippets from the reviews people have written about the show. However, being typically British with our self deprecating sense of humour. I decided to use the negative reviews rather than the positive ones. I have some great stuff such as “Paul has an ego that doesn’t need boosting” and “truly crappy jokes”. However, I need more. So, if you have 5 minutes this week drop me an email with a short, witty and hopefully not too rude review of the show. Let the venom flow :)

News and events

Internet Explorer 8

So the last time we did the news before Christmas Microsoft were under attack from Opera for its lack of standards support. Well, things have moved on since then and it is looking like Internet Explorer 8 is shaping up to be a very nice browser indeed. For start IE8 has passed the Acid 2 test published by the Web Standards Project. This is a definite commitment from Microsoft to provide comprehensive standards support and should be applauded. Jonathan Snook explains the ramifications of this as well as making some predications of his own as to what IE8 will look like. According to him we can expect straightforward column layouts, grid positioning and improved javascript support. Best of all if Jonathan is right we might see IE8 out in beta by the summer and in final release by next Christmas. Maybe then we can look at dropping support for IE6.

Using CSS to diagnose problems

Although there is still a lot of CSS not supported by browsers such as IE it is incredible what is possible with just what we have at the moment. Eric Meyer recently posted an article suggesting that you might want to consider using CSS to diagnose issues in your HTML that need resolving. In his article he uses CSS to find out where markup might be choking on missing accessibility features, targetless links, and just plain missing content. For example he uses CSS to visually highlight all images that have an empty or missing ALT attribute.

This isn’t an entirely new ideas. In fact Marco Battilana proposed a similar approach to highlight accessibility issues back in July 2006. However, Eric has taken it that much further and offered an excellent way of not only highlighting problems to yourself but also to your clients who maybe editing HTML.

Common accessibility mistakes

Talking about highlighting accessibility mistakes I came across a great article that does exactly that. Basically the article focuses on the fact that website owners can often be over enthusiastic when it comes to accessibility and start overusing HTML attributes designed to help accessibility. The result is that we can often do more harm than good. The article looks at the alt and title attributes which are often verbose or repetitious. It also looks at tabindex and accesskeys that can cause confusion and conflicts with normal browser behaviour. If you are applying any of these attributes to your code then I highly recommend you cast your eye over this article.

Basic design principles

The final story this week is an amazing series of posts by Patrick McNeil over at Design Meltdown. The reason I say they are amazing is because they are immense and I confess I am yet to read all of them. As you probably already know Design Meltdown tracks trends in web design and shows examples of sites that highlight these trends. Using the same example based approach Patrick looks at the fundamental principles of design and deconstructs them expertly. He covers Emphasis, Contrast, Balance, Alignment, Repetition and Flow in a screenshot packed series of posts that are a must read for anybody starting out in design. In the past I have always recommended Jason Beaird’s book “The Principles of Beautiful Web Design” for those starting out in design. In fact we have Jason on the show soon. However, if you don’t like reading books or want to save a bit of money then Patrick’s analysis is a credible alternative. Check it out.

Back to top

Feature: Common mistakes of site structure

Just before Christmas I wrote my final blog post for the year on creating the structure for your site. It is a topic that I have been thinking a lot about recently because of various projects I am working on and so it was fresh in my mind. In particular it occurred to me how much harder producing a good site hierarchy is than it first appears. In fact I see the same common mistakes occurring again and again. It is these mistakes I want to look at in today’s show. Read Common mistakes of site structure.

Back to top

Expert interview: Rachel Andrews on building a web design career

Paul: OK, so joining me today is Rachel Andrew from EdgeofMySeat.com. Hello Rachel. It’s good to have you on the show at last.

Rachel: Hello, Paul. It’s good to be here.

Paul: I feel like I’ve been trying to bully you to come on the show forever and ever and ever, but it hasn’t worked out for one reason or another, but we finally got you here, so that’s good news. So uhm, Rachel, when I came to kind of putting together what I was going to do, talking to you. I suddenly realized I didn’t know you very well. I’ve heard a lot about you and I’ve heard a lot of other people say good things about you, which has gotta be a good thing, but I didn’t know anything about your background or kind of how you came to be involved in web developement. So, I thought it might be quite interesting, if It’s ok with you, just to spend a few minutes talking about how you came to be a web developer. How did you get into this illustrious career?

Rachel: Uhm, completely by accident, really. It wasn’t something I intended to do. My training is as a dancer. I was going to dance. That’s all I ever wanted to do.

Paul: All right.

Rachel (laughing): So, the part where I ended up doing this surprised everyone, (Paul laughing) especially my programmer father. (Rachel laughs)

Paul: Ahhhhh

Rachel: We didn’t even have computers in school when I was in school. I’m showing my age.

Paul: Yeah, I know the feeling.

Rachel: Yeah, so, and I remember when I was, I don’t know, either 13 or 14 there were two guys that came in and said, “All of you will need to know about computers in your future careers.” And I was like, “No I won’t. I’m going to be a dancer.” and they couldnt tell me why I would need computers and so I felt quite pleased with myself. So, yes, it wasn’t on the radar after all.

Paul: So, how did you go from dance to web developement? It seems a bit of a leap there.

Rachel: Well, I know this is a fairly technical career, and I was working back stage for a quite a while and when I decided to quit dance for various reasons, I was working in the west end and I managed to my way into a back-stage techie job.

Paul: OK.

Rachel: I did work as a choreographer and I knew a reasonable amount about sound and lighting and could my way in. So, I worked back-stage in the west end and for a year and a half on Charlston and on The Mouse Trap.

Paul: Right, I see.

Rachel: So, so that was it. So, it wound up to be a technical kind of job and then I found myself pregnant with my daughter. And you cant go heaving around stage equipment while pregnant.

Paul: No.

Rachel: So (laughing), I found myself with some time on my hands. It was really that I even started using the internet.

Paul: Oh, ok.

Rachel: I was fairly young and didnt know anybody else with a child and pregnant.

Paul: What kind of… how long ago are we talking about here?

Rachel: Well, the said child is now nearly 11.

Paul: Right.

Rachel: So, quiet a while ago. ( laughing)

Paul: OK.(laughing)

Paul: So, in the relatively early days of the Web then to some degree…

Rachel: Yes. Yeah and I mean thats really so very important in that at the time there wasn’t actually that much to learn and I was chatting to people on for the parents on the forums because as I said, I didn’t know anyone with a baby and I didn’t know anything about babies. So, (Paul: Ahhh) I was using the web just to talk to other people in the same situation. And then if you wanted to put anything online there wasn’t Flickr or all of these hings. You really had to build a web site.

Paul: Right. Yeah.

Rachel: So, you know, once my daughter was born, I started putting together various HTML. So I could put together a web site telling people about her and things like that. And that’s what everyone did.

Paul: OK.

Rachel: You chat in the discussion forums and you build web sites. Uhm I don’t know… I quite liked that. That was always good fun. So, it didnt take that long before people would start asking me if I would build them a web site.

Paul: Mmhmm

Rachel: And… and at the time there was so little to know. You know, it was a bit of HTML and you had to do some basic things with images. As time went on, I realized I was actually quite interested in, what at the time fewer people were doing which was writing things with Perl which was about the only thing that anyone used to do things like guestbooks and (Paul: Yeah) posting forums to email. It was very, very limited at the time in terms of what people were doing on the server side. I sat down with the Orilley Camel book and taught myself Perl.

Paul: Oh Right, OK. (Rachel laughing) As you do.

Rachel: As you do. Obviously

Marcus: Or not, in my case.

Rachel: Yeah, well… I was bored. (all laughing) I had a baby. You know? Nothing else to do. So, that’s really how I got into doing the back-end stuff via such a strange route and I didn’t really realize what I was learning or if there was real reason to do so. It was interesting to me.

Paul: Do you think there was any advantages or drawbacks to taking that kind of route. I mean I know that most of us that entered the web in the early days did it through some convoluted route in preference to having some kind of formal training. Do you think the people that are coming along these days are going through a proper… you know, going through some kind of computer training course or whatever? Do you think their at a disadvantage for not learning it themselves and discovering it themselves.

Rachel: Well, yeah, but I think things are so different now. I mean back then, it really was a case of: You learned HTML. You learned a little bit about how to make graphics work online. And maybe, if you’re very pushy, you learned some Perl. (Paul: Yeah) And that was it. There wasn’t a huge amount of decisions. I mean, even just to start learning to do this now, you start having to think, “Well, which language do I want to learn? What is the best thing to be learning? Where should I put my time?” (Paul: Yeah, totally). You know, I was just kind of sitting with a little 486 computer and thinking, “You know… this is quite interesting. Look, I can do this!” But we were all just discovering what we could do at the time. Whereas now, if you’re looking at this as a career and what’s going to be best right from the start, before you’ve even gotten started, you know? (Paul: Yeah) So, It’s very different. And It’s very difficult when people always say, “Well, how did you get started? Have you got any suggestions on how I can get started?” And It’s so different now.

Paul: That’s probably one of the most common emails I get. It’s, how do you get started and what languages do you start with? So, I guess you really didn’t have a lot of choice. (Rachel (laughing): No…) It was Perl or nothing, wasn’t it?

Rachel: Really, I mean, yeah, there were other things around but generally people were writing in C, Javascript, and Perl. And the web host I happened to have, had this server which you were allowed to run your scripts on. (Paul: Oh, ok) (Rachel laughing) They were still slightly nervous of it. You know, it was just one server you could run things on. It was a quite good community around that. People would help each other out on how to do things.

Paul: So what advice do you give people who do write with those kinds of questions as to what languages to start with? What do you say?

Rachel: I think the important thing is to learn something well. At the end of the day, once you’ve learned one launguage, you can usually swap to something else. It’s the concept that’s the hard thing. (Paul: Yeah.) Understanding based design or understanding just the basic constructs of any language. Once you’ve done that, you can usually swap to something else. I usually say that PHP is a pretty good choice. Just because It’s out there, everywhere. (Paul: Yeah) You’re going to be able to easily find somewhere to run it. You can set up your own development environment without having to spend any money, really. You can get that all set up. And there is lots and lots of help and there is a great community around that. And to be honest, PHP is what we tend to develop in now and most of the time.

Paul: I mean, It’s quite interesting that you talk about those early days and how you basically got into it because you became a mother. But the early days in the web, and to be honest, to some extent now, there arent exactly a huge number of female developers around. I mean, it seems to be a very male dominated thing. Did that put you off? Did that create barriers to you?

Rachel: It didnt really at the time when I was learning because I came out of a very male dominated profession anyway, (Paul: Oh, OK.) having been working back stage. So, it didnt, worry me. And also at the time, I was just interested in learning it. I think out there in the work place once I became employed doing this, I encountered all sorts of strange situations where people really couldn’t quite get their head around the fact that I was technical and not like a designer or not something else that cliquey females are doing. I was the head of a technical team and went to help someone with a computer and I was the most senior person on the team. And they said, “Oh, can you not send one of the boys down?” (Paul gasps) I then said, “I can send one of the boys down. They’re not going to fix your computer for you, but I can send them down if that’s what you want.” (all laughing) I mean, so people were a bit taken aback, I think and don’t immediately assume that I do the job that I do (Paul: Yeah.) and are much more comfortable of putting me in a designer area.

Paul: Well, that was the mistake I made, isn’t it? (Rachel laughing) The first time, I suppose. I was the typical male chauvinist pig and presumed you are a designer, which I don’t know why. I think it was the hair color, more than anything.

Rachel (laughing): To be honest, I am not particularly hung up about it. It’s not something I get terribly upset about. I find it sort of intriguing that people just assume that. I’m not… you know… I’ve work in… sort of male dominated jobs for a long, long time now and I think if I got terribly upset about these things I wouldn’t be doing it. It is interesting. But in other ways, it works for me. When I was going for job interviews, for instance, if I’m the only woman who walks in and there are lots and lots of men, they’re going to remember me. (Paul: Yeah) And in the same, you know, if I’m pitching for work it’s a talking point. You know, people are always interested as to why I’m doing what I’m doing.

Paul: Damn, and here I was thinking I was asking original questions!

(Rachel and Paul laugh)

Rachel: I think sometimes, it does work for me because do remember. They would think can’t a woman do something a bit unusual?

Paul: Do you think it’s a problem within the industry or would you just think It’s one of those things and what will be will be kind of attitude?

Rachel: It’s really hard to see where it’s a problem. I think It’s a problem if girls or young women who are looking at career choices are being put off because they don’t see female role models out there. And, there’s lots of reasons why. There are women around doing this and tend not to be so high profile. (Paul: Yeah) I mean the reason that I’m not touring around all the different events and things is because I’m a mom. (Paul: Yeah!) You know, and I think that’s the same for an awful lot of women. I talked about this on my blog once and got loads and loads of women contacting me going, “Yes, exactly!” We’re the one’s doing the majority of childcare. I know there are men in that position too, and I’m not saying there aren’t men who are having to be… going to pick up kids at 3:00 or whatever it is. But it does tend to be women and It’s often the women who make that choice or wants to spend time close to the kids when they’re very little. My daughter is getting older but even so, I still wouldn’t be happy about, say going to a different country and leaving her here to go to an event.

Paul: Yeah. I mean to be honest, even for this interview we kind of have to fit it in around you taking your child somewhere, Marcus has got to do a school run in a minute. You know, so, it’s all part of the kind of… yeah… It’s nice we’re in a position where we can kind of fit our work around our families. It’s a good thing, not a bad thing.

Rachel: Yes, it is. And I think that’s possibly one of the reasons why there aren’t so many high profile women, because it takes time to raise your profile. And without me quite looking, I’ve been able to do that through writing, which I can do at midnight or whatever. If you’re going to get out there and get around to all the conferences and things, you know, and look at what other people who are considered to be my peer group and what they’re doing. I just couldn’t physically do that. (Paul: Yeah, totally) Because, I don’t want to. I don’t want to spend a lot of time away from my daughter right now. Maybe in 6 years time, she will be very disinterested in spending any time with me.

(Rachel and Paul Laughing)

Paul: Once she’s a teen-ager, you won’t want to be with her either.

(Both continue laughing)

Rachel: Exactly, you know, so things change but there are quite a lot of people with quite young children and actually more and more so. It’s quite funny, I feel like I’ve got quite an old child for the group of people that I speak to. There are lots of new developer babies out there.

Paul: Yeah, well Marcus is old and decrepit.

Marcus: Well, just to depress you, Rachel, what happens when they get older and become teenagers, they just rely on you as a taxi service.

Rachel: Well, I get that as well. That was the case today. I was ferrying mine and two others back from the

Marcus: The only thing I would say though is, we went through a period about 6 months the beginning of this year, trying to recruit new developers. And we only interviewed one woman out of probably a dozen candidates

Paul: I think that it’s worth saying that’s because we only have 1 woman apply, rather than we segregated all the women who refused to interview.

Marcus: That’s what I meant. Yes, well put Paul. We literally had only 1 woman apply, so yeah… I don’t really know why. Maybe it just seemed like kind of a boy’s area at the moment. I suppose, from what you were saying about the fact that you’re not inclined to go out there and sort of go out on the circuit like Paul does. I suppose until that happens, and maybe younger women who aren’t thinking about motherhood yet, are the ones who are going to be out there raising the profile of women and hopefully, this sort of “boys’ club” type mentality will sort of just fizzle away.

Paul: I mean, It’s quite interesting that you say, how you talked about how you managed to raise your profiles through writing. Tell us a little about that. How did you get into writing books? Because, you seem quite prolific. I did a quick search on Amazon to see exactly how much you’ve written and it seemed to go on for quite a long while.

Rachel: Yeah, there’s quite a few. That was, again, like most things, I tend to say, “Oh yes, I’ll have a go at that!” and then worry about it later. It was a long time ago, I had written some stuff for the Macromedia Web Site about Dreamweaver.

Paul: OK

Rachel: And it was Glasshouse who contacted me and said, “Oh, would you write a couple of chapters for a book?” A couple of chapters, that would be alright, you know (laughing). (Paul: Yeah, no big deal). So yeah, I wrote a couple of chapter for a book and it kind of went from there, really. I like writing. I enjoy… I’m much more from an arts background really than technical. So, I do enjoy writing and putting things across that way. So, yeah, it just went from there. And then when someone said, “Oh, will you write a few more chapters?” Yeah, ok, that was alright. (laughs) And before I know it, I’ve got this great list of books.

Paul: Yeah. It’s a very time consuming thing to do. I mean, beyond the fact that you obviously sound like you enjoy doing it. Do you find it beneficial from a publicity angle for bringing in work?

Rachel: Yeah, absolutely. I think people tend to see you as an expert if you’ve got things in print; if you’ve written things. It does sort of depend that you do know what you’re talking about. And especially with what I do, which is much more… It’s not like I have to show a nice portfolio of pretty things. This is what I can do. What people are doing when they hire me or hire my company is they are hiring us for our expertise. And they have to constant that we actually are experts; that we know what we’re talking about. So the writing does help in that because people assume that if someone let you write a book, you must actually know what you are talking about.

Paul: I mean, I get emails from people asking how do you go about raising your profile. I’m quite interested as to whether you stumbled into this. You know, you talked about you were writing for the Macromedia web site. Did you go out purposefully, intending to write for them or did it just kind of happen? How’s that come about?

Rachel: Again, that really just happened. But because I was writing on my own blog, and I was writing… you know, I was helping people out in forums. (Paul: Right) You know, if you’re out there doing things, people do notice. I mean certainly with things like magazines and books and you know, varies sites that want articles. There are people out there that are looking for people to write all the time, because there’s actually an awful lot of people who know what they’re doing but there are fewer who can express it and express it in a way that someone new to the concept is going to understand. If you are able to do that, if that’s something you can do and you are doing that on your own site or are helping people out in forums and things then it will get noticed. And there are quite a bit of places you can be submitting I suppose, to, you know, Site Point and Vitamin… There’s quite a bit of other sites that accept good content. (Paul: Yeah.) It means that you have to write a few things that you’re not paid for to get going. You can find then, that you can start putting together a body of work and say, “Well, this is the stuff I’ve done.” It’s not in It’self something that you earn a huge amount of money from. I think people who write for a living must have to work incredibly hard.

Paul: (laughing) Or be incredibly good. One or the other.

(Rachel and Paul laughing)

Rachel: Both I think, both. As something that helps raise your profile for the other things you do. If I found it an absolute chore, I don’t think I would do it because you don’t want to be sogging away at things you can’t stand in the hope that it will get you some profile. But it is one way to do it and It’s certainly a way to do it if you are in a position where you can’t get out to lots of events or you’re not someone who wants to do public speaking. I’m not keen at all on public speaking. I much rather hide behind the computer (laughing).

Paul: A proper developer. That’s what I like to hear.

Rachel: So, you know, It’s another way of doing it, because I do sort of think of the public speaking if you’re going to be thinking of conferences as being something that would really get that profile up there. No one has really met me until fairly recently at any events because I didn’t get to anything really. And yet a lot people would have known of me and the stuff I’ve done because of the lighting.

Paul: I mean, you talk about that you use this as a mechanism to you know, to increase your profile for the other work that you do. So, perhaps we ought to talk about the other work that you do. I mean, you run a company, “Edge of My Seat” which is edgeofmyseat.com. How did that start? You obviously from going… from being an enthusiastic amateur, you must have gotten a job in web design, I’m guessing. How did you go about getting that job and from there, how did you end up running your own company?

Rachel: Well, I… When I decided I actually wanted to go back to work… I’ve been doing bIt’s and pieces while my daughter was quite little and I decided I wanted to go back to work and it was really tail-end of this whole dot com era. (Paul: Oh, OK.) And so, I ended up heading up a technical team at Property Finder. (Paul: Oh, OK. Yeah, I know.) Which was very much on the technical side and we managed the servers and things like that rather than even doing any development or very much development. There were other people who were more on the development team, although we still did bIt’s and pieces. I did that for a while and the whole sort of dot com thing was starting to fall apart really, at that point. And I moved to another dot com company who built portal sites for accountants. So I know quite a bit about stage integration (Paul: Wow. What an exciting life you have). Yeah, but that’s the time where things really weren’t looking that stable and I felt, well I can actually do this myself. And at least then I would know where I was in terms of whether I was going to get paid by people. The problem is being employed in an unstable situation is that really, you can work a whole month and get to the end of the month and find out that nobody’s paying you. (Paul: Yeah.) And so I figured that actually, I may be better off setting off on my own. And so people had asked if I would take on bIt’s of freelance work and things. And so, I actually purchased a printer’s trust because at the time I was a young single mom. I’m not so young anymore but I purchased a printer’s trust and this in 2001. And they basically gave me a small grant and loan to get the company started. So, I had about a month’s money when I started. (laughing) I didn’t have the dot coms, so I kind of had to work. (Paul: Wow!) It’s a good way to start a business, you know (Paul: Yeah.) … make or break really. If it doesn’t work, we don’t eat.

(Rachel, Paul and Marcus laughing)

Marcus: I remember that feeling very well.

Rachel: Yeah.

Paul: Yes

Rachel: But it makes you really dive into it. The nice thing was, because I was paying for a child, mind you, at the time, I actually only had to earn half of what I had earned because I could keep her home with me.

Paul: Ahh, ok.

Rachel: So, I must have cut my expenses by being able sort of work around my daughter’s schedule and things. So, that kind of worked out alright and really, it went from there.

Paul: So how did you begin to win the business in that first month of, “Oh crap! What have I done?” (Rachel and Marcus laugh) You know, where did the work come from?

Rachel: Well, at the time, what I realized was that because of how the dot com was collapsing, everyone was getting rid of their developers. But they still had all these applications. And something I’ve always been good at is picking up on other people’s stuff and working on it. So, probably, uhm, September ’01, which was like a terrible time to start a company (Rachel and Paul laugh) and really for the first two or three years was taking stuff that was already built and was falling apart, or the developers had gone or had all sorts of problems with it and just fixing it or adding bits to it. And I did lots and lots of that which, during this time of recession, really, was actually, really good work because there was plenty of it. Everything had to have been built while they had lots of developers and they had money and things. And so I sort helped things limp along a lot. And what this sort of lead to really was this idea of doing development for design agencies. (Paul: OK.) And focusing on doing really good development to support really nice design. That really is what we’ve moved on to do now. Most of our clients are designers or design agencies. And they do a really good design, and then they hand it over to us and we look after it and we make sure it will work. (laughing) That’s actually a really nice way to work because it means we get to work with some really nice stuff, anyway, well designed stuff and we have people who care about what they do. (Paul: Yeah.) And we get to do the development side of things that we enjoy. Sort of working with people rather just sort of chucking things over the fence and throwing it back.

Marcus: The point your picking about picking up what other people have done and fixing it and that kind of thing… did that not kind of cause you problems with development platforms and having to deal with lots of different types of languages and that kind of thing?

Rachel: Yeah. I had learned ASP by that point and a bit of Java. And I tend to not have too much problems swapping from one thing to the other. Certainly, I mean then, it was a lot of Perl and my class PSP. Because that was, at this sort of time, they were really the two things that you were seeing things built in. So, I used to do either and then I started doing PHP as well around the same time. So, I’ve always been quite happy swapping between languages, swapping between databases. (Marcus begins to speak: I think the reason why…) It gets a bit much if you do too many in one day, you know, because you start putting semi-colons in the wrong place and stuff. It doesn’t really bother me too much. I mean, its nice to be able to concentrate one thing. As I said, we tend to build new stuff in PHP. But, I’m generally quite happy switching around.

Marcus: I suppose, the reason why I was asking is we’ve come across a few briefs that we’ve been sent in the past where it seemed like the perfect job for us but the development platform in particular has been something that we just don’t work on. Do we want to invest on that kind of platform just so we can go after this job and quite often, we’ve thought to ourselves, “No, we don’t.” So, I guess that’s where the question is coming from.

Rachel: Yeah, I think in terms of new stuff, you kind of do have to focus unless you’ve got an awful lot of people able to create your own libraries and things in different languages. So for new stuff, we do tend to choose PHP but at the time, what I was doing was just picking up on stuff. It was less of a problem really because I was just fixing stuff that already existed.

Paul: You seem to have done very well over the last few years and Drew has come and joined you now and you seem to be branching out a bit into the area of training. That seems to be something that’s come up.

Rachel: Yup.

Paul: I’m quite interested, you know… it’s great you’re there and you’re able to offer training courses. You do have a basic CSS training course, I think (R: Mmmhmm) and you’re talking about doing an advanced one, is that right?

Rachel: Possibly going to do that. We’ve had a few people ask. (Paul: OK) So, that’s what we’re thinking of doing.

Paul: So, I mean, the question now is who trains the trainer? How do you guys stay on top of the latest things that are emerging and how do you keep up with what’s going on?

Rachel: Well, basically, because we are doing it all the time, I think. The difference between us and a training company that just does training is that actually what we’re doing is, we’re using this stuff all the time. It’s the same as when I buy a book. I’m writing a book from the point of view of someone who has to do this. You know, who practically is doing it. And it’s the same with the training. Obviously, we’re constantly reading up on new things and trying things out in browsers and trying to get around problems and just by the day to day work that we do. So, that’s really what we’re bringing to a training course. For two or three years, people have asked me if I would do training. But until Drew joined, we just didn’t have the capacity. It comes down to one of those things that have to be arranged. So, it wasn’t saying that I really felt that I couldn’t do, but Drew was making to do it as well. Its great fun. Its an enjoyable… its actually enjoyable to be face-to-face with people. Especially writing a book and then the feedback you get as the occasional email that people say, “Oh, I really enjoyed that!” or, “Why did you say this? Its rubbish!” (Rachel and Paul laughing) Actually being face-to-face with people and seeing how they work through the course is really, really interesting and great fun.

Paul: Cool!

Rachel: So, yes. It’s been good.

Paul: Excellent! Well, thank you so much, Rachel, for coming on the show. It was really good to hear how you got into things and how your career has progressed. Even if it’s somewhat chaotic along the way. Although I can associate with that (Rachel laughing) kind of bouncing from one thing… We’d set up Headscape in January, 2002. So we were only 3 months behind you, so we understand your pain there.

Rachel: Yes, well it wasn’t the best time, really.

Marcus: We were both made redundant from a dot com in December, 2001, so it was necessity that got Headscape, I think.

Paul: Yeah. Always the best way. OK, thank you very much, Rachel, uhm and I’m sure that we will get you back on the show again if you’re willing at some point (Rachel laughing) in the future. Alright, thank you.

Rachel: OK.

Back to top

Listeners email:

So just before we wrap up the show I wanted to share with you an idea sent in recently by a listener (sorry I can’t find your name)! A number of you have written in since we said we were going to change the format of the show with ideas about how things could be improved. One idea that particularly appealed to me was a new short section at the end of the show where we read out some listeners emails. These emails could be a question, comment, recommendation or indeed anything else you think others maybe interested in. So whether you have a tip for improving your sites search engine rankings or just want to tell me how ignorant we are then drop us an email. Write in soon as we need content for next weeks show!

Common mistakes of site structure

Getting a sites’ structure right is hugely important and avoiding common mistakes is a good starting point to achieving that.

Although information architecture work is highly skilled and best left to the genius of people like Garrett Dimon the reality is that everybody from designers to website owners find themselves working on it. So what are the most common mistakes and how do we avoid them?

In my opinion there are two pitfalls that many people fall into when structuring the content for their site; confusing naming conventions and overwhelming options.

Confusing naming conventions

The biggest mistake I observe when it comes to information architecture is in the naming of pages and sections. The problem manifests itself in three ways:

  • Use of jargon: Every industry and company has its jargon. Web design is certainly no exception with more acronyms than you can shake a stick at. The problem is that you can never assume your users will know all the acronyms. They maybe new to the sector or use a slightly different variation of your companies terminology. The names of your sections and pages should be free of jargon and where possible, product names that the users will not have previously encountered. Page and section titles should be descriptive of their content in the plainest language possible.
  • Long names: Although naming should be descriptive they should also be short. Ideally all menu items should be one or two words long. The idea is that users should be able to quickly scan down the list of pages available and identify the one most likely to have content they need.
  • Inconsistent naming: Be careful that the way you refer to pages does not change depending on which section you are in. Every link to a page should be referred to in the same way. Where a page title needs to be longer than the wording used in menu items make sure it mirrors it closely. Inconsistent naming can cause confusion and doubt in users making them unsure if they have previously viewed a particular page.

Overwhelming options

The second common pitfall is that of presenting the user with too many options. I commonly come across site structures with more than twelve links in a menu bar at any one time. This goes against conventional wisdom that the optimal number of options to present a user with is between six and eight. Anything more than this and they quickly become overwhelmed and struggle to process the options available.

The desire to present the user many options is an understandable one. As with the homepage there is pressure placed on website managers by different stakeholders to ensure particular content is not &#”;buried&#”; deep within the site. There is also a misconception that the number of clicks in a site should be minimized.

Like many of the misconceptions relating to the web, the belief that users do not like to click is based on out of date thinking. The major problem with clicks was that they meant the loading of a new page and in the pre-broadband days this meant a delay. Of course today that is becoming less of a concern as broadband becomes more pervasive. What is more I think it is safe to say that users do not mind additional clicks if it keeps the process of navigating a site simple and intuitive.

With the myth surrounding clicks dispelled that leaves only the fear of content becoming buried deep within the site structure. How will anybody ever discover a crucial product if it is buried four levels down? Also what do you do with a page that could sit under multiple sections? What if the user looks in the wrong place?

The answer to these concerns are simple. There is more to site navigation than the sites hierarchy. A good website will provide lots of navigational tools to help the user find content and to ensure key content is made clearly visible. These include:

  • Search: Search results can contain side links to key content or even weight that content more heavily so it appears nearer the top of the results.
  • Related links: By adding in a related links box into each page you can highlight related content that the user maybe interested in.
  • Shortcuts: Shortcuts are commonly used on home pages to highlight important content buried deeper in the site structure. However, these links could potentially be used on any page of the site.
  • Body links: Its easy to forget the humble body link. However they are a powerful way of highlighting a page on the site no matter how deep in the site it is buried. One technique is to automatically transform any occurrence of a defined keyword into a link to content you wish to promote using either Javascript or some server side processing.
  • Tagging: More and more sites are introducing tagging as a navigational method. By clicking on a tag associated with an individual page you are then taken to a list of other pages including that tag. However, there is no reason why key pages associated with a particular tag could not be highlighted in some way to draw further attention to them in the listing.

With so many options available for highlighting content it quickly becomes apparent that positioning in the site hierarchy should not be an issue of contention.

Getting a sites structure right is hugely important and avoiding these common mistakes is a good starting point to achieving that. But what other tips do you have for creating the perfect information architecture? Post them in the comments.

Top Geek Gifts

So this holiday season (previously known as Christmas), what gifts would you recommend others buy for the geek in their life? Here are my top 10…

These are products I own myself and would happily recommend to others. They are not in order and I have tried to pick things that suit varying budgets.

1. A mac

2007 was the year I moved from a PC to a mac and I have never looked back. Best of all if you have the budget they make great gifts. They look cool, are a pleasure to setup (no swearing on christmas day when something doesn’t work) and if you give him a week he will be insisting that you have one too so he no longer has to provide technical support for windows. Buying a computer can be scary if your not technical yourself so I suggest going along to an apple store. Those guys will be able to help you with selecting the model that best suits the geek in your life.

Prices start at £700 and are available through the Apple Store.

2. An ipod touch

I actually don’t own an ipod touch but I do have an iphone. However, I thought it was unfair to suggest something that has a £35 per month contract associated with it! I love my iphone and can’t imagine anybody not being pleased with an ipod touch. They are sexy, fun to use and definitely a cool toy for christmas day if they haven’t played with one before.

The 16GB version of the ipod touch (which is the one you should buy) costs £269 and is available through the Apple Store.

3. The Jawbone

The Jawbone is a bluetooth headset unlike any other. I have awful hearing and have trouble with mobile phone conversations. The Jawbone however has amazing noise cancelling technology that makes calls crystal clear no matter how noisy the surroundings. Best of all it looks cool and you almost don’t feel ashamed to wear it in public (unlike most headsets). In my opinion the Jawbone is the best headset on the market.

You can buy the Jawbone in pretty much any mobile phone shop and I have seen prices as low at £64.

4. Getting Things Done

Most geeks I know live a life in chaos. Getting Things Done is a superb book that has transformed my life and made me a more organised person. If the geek in your life does not read then buy it as an audio book and pre-install it on his new ipod touch!

You can buy the book for £7.14 on Amazon or for $12.60 as an audio book from Audible.com

5. Moo Cards

Moo Cards are cool little cards similar to mini business cards. You can print 100 cards for £9.99 and each card can have its own unique photo. You can either upload photos or just grab some random photos from his flickr account.

6. A flickr pro account

Talking of flickr why not upgrade him to a pro account this christmas. Flickr is the most awesome photo sharing site around and although it has a free account it is definitely worth upgrading. For just $25 the geek in your life can upload a limitless number of photos.

7. A Tom Tom

My sense of direction sucks and I couldn’t live without my Tom Tom GPS. Chances are the geek in your life doesn’t get out much, but when he does he wanders around looking lost and confused. A cool GPS in your car might encourage him to venture out of the house more. You never know.

They seem to sell Tom Toms pretty much everywhere these days from Halford to Currys. Prices seem to start at the £149 mark. To be honest the lower end models seem perfectly good from what I can tell.

8. A DVR

A DVR is a Digital Video Recorder such as the TiVo in the states or Sky Plus in the UK. These clever little boxes let you record programs to a hard drive, pause live TV and series link an entire season of a show ensuring you never miss it again. Having one of these babies will change the way he watches TV forever.

If you buy Sky Plus online at the moment you can get the box for £49. Of course it does require a sky subscription which starts at £16 per month.

9. A Duct Tape Wallet

Okay admittedly a wallet isn’t the most hi tech gift but Duct Tape Wallets are cool. Basically they are… well… wallets made out of duct tape. I know that sounds strange but they make a great stocking stuffer. Mine has lasted forever, it always generates discussion and its easy to repair (stick more duct tape on it).

I bought mine from Ducti and it cost about £15.

10. A Wii

I know there is world wide shortage of these babies but try to get one. The geek in your life may sneer at it but they are strangely addictive. The novelty will wear off after a while but not before you have had many hours of fun watching your geek actually taking exercise and socialising with others!

Good luck finding one of these. Prices seem to range from about £270 to Millions on Ebay at the moment.

Actually looking back through this list I think I would recommend most of those gifts for pretty much anybody. However, the real question is what would you recommend? Add your suggestions to the comments.

104. Give us your money

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

Play

Download this show.

Launch our podcast player

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

Housekeeping

All change

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

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

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

Christmas giving

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

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

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

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

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

Give to the Boagworld Christmas Appeal

News and events

24 ways is back

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

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

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

Tips for development and design

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

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

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

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

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

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

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

What tips do you have for getting designs signed off?

 

103. Bargain basement

On this week’s show: Paul looks at doing usability testing on a budget. Marcus explores the perfect working environment and we review writemaps an excellent online tool for creating site hierarchies.

Play

Download this show.

Launch our podcast player

News and events | Marcus: The perfect working environment | Paul Bargain basement usability testing | Review: Writemaps | Question of the week

News and events

Improve your javascript

There seems to be a lot being written about Javascript at the moment, much of which should really help those of you like myself that have a basic grasp but really need to move on to the next level. First, there is a post by Christian Heilmann entitled Javascript Shortcuts that is aimed at teaching dummies like me how to code better. Its actually a very good post and helped me to grasp some shorter ways of working with Arrays and if statements.

There is also a post by Roger Johansson that lays out the basic rules of unobtrusive Javascript. Great for those of you who are old school Javascript coders and need to come a bit more up to date. Most of the points are obvious if you have worked with unobtrusive javascript before but there are also some nice extras like…

Work for the next developer: Make maintenance easier by writing logical code with clear variable and function names and commenting where necessary.

Finally, PPK has updated his DOM compatibility table that catalogues browser support for various DOM modules. I have to confess that some of this went over my head but it is still useful for understanding why a piece of Javascript is not working in a certain browser.

The guys over at Blue Flavor are having a go at answering the million dollar question this week; what makes great design? To be honest I am not sure if this is a question that can really be answered, but I have to say they have a hell of a good go!

Nevertheless it is a good article to point clients at if you need to explain why they should pay more to make their design stand out from the crowd.

Better web forms

On the subject of great design being in the detail I thought it was worth mentioning a great article by Garrett Dimon on Digital Web. Garrett is an information architect and has the most amazing eye for detail. By making small changes he has a significant effect on the sites he works with.

In his article he takes the registration form from ebay and makes a series of small alternations that improve its usability and readability. By tweaking things like the position of labels, the division of fields and the weight of headings he turns a very average form into something that is so much more accessible.

Forms are tricky things to work with and most designers hate doing so. However, reading this article should inspire you when next to tackle a form.

Building an inspiration base

Talking of inspiration, my final news story for today is another one from Blue Flavor. This time they are talking about how to build a reserve of inspiration that you can draw upon. Inspiration is a subject I seem to come back to often and with good reason. It is very easy for designs to become formulaic and it is important to be constantly looking for new sources of inspiration.

This article is in itself very inspiring suggesting a number of ways to find inspiration that I had not previously considered. Although it covers the obvious such as keeping a sketch book or photographing things that give you pause, it also suggests looking through cookbooks and even standing on your head (and other changes in perspective).

I am not convinced all of these ideas will work for everyone but if your going through a dry patch it is definitely worth a read to see if you cannot spark some inspiration.

Back to top

Marcus’ bit: The perfect working environment

Recently we received a question asking about our working environments and specifically what your working environment should be like when you code.

I’m going to swing this a little wider and look at working environments in general rather just concentrating on one’s own desk. This is something that both Paul and I have a great deal of experience of so I expect he will have as much to say on the subject as I do.

Mess vs tidy

Marcus' desk (hell hole)

Ok, I have been brave and posted a picture of my office, in its current disgusting state, onto the site. It is appalling – no question. I hate it like this. I keep talking about tidying it up but I reckon it will take at least a week to do it!

Does it make me any less productive to be honest, I’m not sure. The instant answer is to say “no, of course not”, but I am sure I would rather be in here if it was tidy, so it’s certainly possible that I would get more done.

I don’t believe that there is any real benefit to working in this type of squalor. It’s really easy when you first set up an office not to bother spending the tiny amount of time required to organise yourself. This is a mistake. File stuff away regularly (in a sensible way). If you don’t well, just look at the picture.

Music vs silence

For me (the musician), it has to be silence. I am not absolutely sure why, but I think this is because I mostly write as opposed to design or code stuff. I also think it’s because I listen to the music rather than it just being background. This is either shows a weak mind or an outstanding empathy for the musical arts you choose ;-)

Other people

One thing that the questioner didn’t get into was whether or not it is good to work with other people around you. I think that the healthiest option here is to mix it up. Working on your own all the time as we have done for years, is great with regard to getting things done. You can really hone in on a task and give it your all. Headscape’s office is open plan with anywhere between 4 and 10 people in it at any one time. I struggle to write in this environment as I’m too tempted to talk to other people.

But, working on your own all the time can be counterproductive. You are far less likely to bounce ideas around and learn new stuff. Teams tend to be more focused and productive if they work together regularly.

Working on your own for years can lead to stagnation and a lot of staring out of the window if you don’t really fancy a particular task. I tend to measure my desire for a job based on the amount of tea I make during it!

How to organise your day

I tend to check email as it comes in and I respond to IM and phone calls immediately. I can’t help it. I often think that it would be a good idea to check email, say, every 2 or 3 hours and not let it interrupt what I’m working on. I guess this is the salesman in me thinking that every contact is a good lead.

Paul tends to block out chunks of time for tasks and won’t let himself get interrupted during this time. This has got to be more productive than the flitting around method that I adopt.

We’re all different

The main thing to recognise with working environments is that we’re all different and react differently to various situations. Some people like to lock themselves away, others feel lonely working on their own. I think employers need to recognise this and, within reason, try to provide the best environments for their staff on an individual basis.

Back to top

Paul’s corner: Bargain basement usability testing

Okay so lets pretend that your boss refuses to pay for usability testing, you have no budget of your own and yet you are determined that the site will be as easy to use as possible. What do you do?

Today I want to look at how you can carry out usability testing without spending a penny. Of course if you can afford $19 per test subject then you can afford this an interesting little service discovered by Tom a boagworld listener.

Back to top

Review: Writemaps

I have never managed to find a tool I like for creating site hierarchies and getting them signed off. However, recently I found something that is definitely getting there and I wanted to share it with you.

Back to top

Question of the week

What is the best online application you cannot live without?

Bargain basement usability testing

There is a lot written about usability testing both online and off. However, except for “Don’t Make Me Think” by Steve Krug they all seem to make it sound very complicated and expensive. So here is the boagworld guide to bargain basement usability testing.

The boss refuses to pay for usability testing, you have no budget of your own and yet you are determined that the site will be as easy to use as possible. What do you do?

There is a perception that usability testing has to be time consuming and expensive but it really doesn’t need to be that way. The key is to do a little and often therefore catching problems before they become too complex to change.

Start off by doing some testing on initial design concepts or even rough sketches. Test again when you have a more detailed information architecture or a basic wireframe. Test yet again once the majority of content is in place and finally do one round before you go live.

That sounds like a lot of testing doesn’t it? Well it would be if the testing involved large numbers of participants who exactly matched the target audience and if they all were tested in expensive usability suites with cameras and observation areas.

However with bargain basement usability testing you make up for quality with quantity. By doing a lot of rounds you will probably pick up on more problems than just a single round done with all the expensive techniques.

For bargain basement usability testing all you need is 5 or 6 friends (or random strangers), a desk, a chair, a computer and a notepad.

Picking your users

Lets start by looking at the users who you will test with. First of all they don’t need to meet the exact demographics of your user group. It can be very time consuming to find people that match your audience. Instead just grab anybody. It doesn’t matter who. Friends, family, random strangers. The reality is that the majority of usability problems are going to be generic across all audiences. Sure if you have a friend that meets the criteria all the better but don’t get hung up on it. Better to test somebody than nobody at all!

Also don’t bother getting anymore than 5 or 6 people. More than that and you really don’t catch that many more problems. It just isn’t worth the additional time testing. You are better off just testing with a few, fixing the problems and testing again. That will reveal new problems which users never reached in the first round.

Your testing environment

Next lets look at the environment. There is no need to test in a usability lab. In fact I would argue the best place to test is in the location people normally surf the net. If possible go to their home or office and test on their own PC. That way they feel relaxed and are more likely to behave normally. If you cant do that then just sit them down in front of your PC and test them there.

Finally you don’t need a camera or observation area. Simply sit with them and jot things down as you go along. If you can get a colleague to join you and take the notes all the better but that is optional.

How to test

So what do you do in a test session? Well that doesn’t need to be rocket science either.

What you can do is largely dictated by what you have to show. When all you have is a couple of design concepts the best you can do is ask the user what they would click on to complete a specific task. You can also ask them if they can quickly spot certain screen elements using the same flash testing we have spoken about before.

As you have more to show you can ask users to complete more complex tasks. You can ask them to find a specific page within your wireframe or ask them what they would expect to find within a section on the information architecture.

Your job is to watch how they interact with your site and note where they struggle. The key to this process is to encourage them to articulate their thinking as they go along. Users will often sit staring blankly at the screen if they are stuck. You need to ask them what options they are considering and why they are struggling.

Before they click on anything ask them why they made the choice they did and what other options they rejected. The idea is to get them to talk as much as possible about what they are doing.

Fundamentally that is it. Obviously I could write a lot more on the subject but that should be enough to get you started. Get 5 or 6 random people to sit in front of a computer, look at your site and ask them to complete a series of tasks while talking about them. Not difficult is it. Why then are usability experts paid so much? ;)

Show 102: Worktime blues

On this week’s show: Paul looks at why you should have a training budget and how to spend it. Marcus looks at capturing requirements and Roo Reynolds introduces us to the possibilities of virtual worlds and their impact on web design.

Download this show.

Launch our podcast player

News and events | Marcus Requirements capture | Paul: Spending the training budget | Roo Reynolds on virtual worlds | Question of the week

News and events

10 Absolute “Nos!” for Freelancers

I know that many of the people that listen to the boagworld podcast are freelancers so I keep an eye out for stories that appeal to this group. I was therefore drawn to an article in my news reader entitled 10 Absolute “Nos!” for freelancers. It’s a great article that lists 10 questions asked by clients to which the answer should always be no.

The questions include classics such as “Can you show me a mock-up to help us choose a designer/developer?”, “Can I pay for my e-commerce site from my website sales?” and “Can I just pay the whole amount when it’s done?”. Almost without exception I agreed with every item on this list. The only exception is “Will you register and host my site?” because I think a lot of clients expect this even if it is a pain in the arse. Of course, the fact that I work for an agency rather than as a freelancer could be colouring my view on this one. However, whether you are a freelancer, an agency employee or just an enthusiastic amateur this is all good advice.

Making the most of working with designers

Adaptive Path are an agency I really admire. Not only do they produce some cutting edge work they are also some of the foremost thinkers in the world of web design. I was therefore understandably interested when one of their clients recently asked them how to make the most of working with a design agency.

The resulting blog post called “Making the Most of a Design Engagement” is a fascinating collection of tips that is definitely worth a read.

The subject of how an agency and client engage is something that I have posted on a number of times [1], [2], [3]. However, reading the perspective of another agency (especially one so well respected) is very enlightening. What I found most encouraging of all is that they obviously struggle with the same kind of client issues we all do.

Whether you are somebody who commissions web designers or whether you are a designer yourself take the time to read this short post.

How Open ID will change your site

Just before I went away on holiday (did I mention I had been away?) there was a new post on the Think Vitamin website about OpenID. I am a big fan of OpenID and have spoken about it before on the show. However, its a tricky concept to explain. At its heart it allows you to login to all the many services you use on the web from one single site so having to deal with only a single username and password.

I sincerely believe that if you are building a new website that has any form of login then you should consider including an OpenID login. The problem at the moment is that you will have to do this in addition to the normal login process. You might wonder if it is worth the effort.

The article on the Think Vitamin site does an excellent job at explaining just how significant OpenID is going to be (even though it exaggerates it in places). It explains the background, the problem and the possibilities. If you haven’t looked at OpenID yet or are sceptical about its worth then the Think Vitamin is a great place to start.

Good practice when working with Tag Clouds

Tagging is everywhere these days. From Flickr to Delicious every site seems to have tags. Even blogs like this one has tags. Tags are a useful alternative form of navigation that allows users to quickly find related content no matter where it is in the sites hierarchy. There is no doubt they are powerful and incredibly useful especially on larger sites with a lot of content.

The problem is that they are relatively new. We are still working out how to successfully integrate them into our websites and what role they play. Fortunately a recent article entitled “Tag Clouds Gallery: Examples And Good Practices” attempts to establish some best practice for tagging and makes some suggestions about their design and integration.

If you are doing some design work with tags or if you are looking to add tags to your own site then you may want to take a look at this post. My only word of caution is that it only tells half the story. It addresses tag clouds but says little about how tags on individual pages should be displayed.

Back to top

Marcus’ bit: Requirements capture

While Paul has been buddying up with Mickey, Donald and Pluto, I have been working with a UK higher education institution at the very early stages of their website redesign project.

One of the things that we have been discussing in detail is the process we will go through to capture requirements and set objectives for the site. I thought I should share them here.

Existing site review

I have looked in the past at carrying out an expert review relating solely on a site’s information architecture. A site review takes on board some aspects of the existing site’s IA but is more general than that.

I tend to look at the following site features very much from a usability point of view:

  • Navigability – can I find things?
  • Consistency of navigation
  • Visual hierarchy – consistency of the design
  • Writing style
  • Processes – search, making a comment, ordering etc
  • Terminology
  • Content – grouping, repetition, wide/narrow mix, internal/external mix etc

The main purposes of the review are:

  • To highlight to all stakeholders what the site issues are
  • To highlight to all stakeholders positive aspects of the existing site
  • To suggest possible solutions to issues
  • To explain the processes involved in achieving goals

Stakeholder interviews

We have found that interviewing key internal staff (i.e. content owners) and sometimes key users, is the most valuable exercise in creating a requirements and objectives document.

Each interview is done on a one-to-one basis to ensure that people say what they really mean! The interviews are semi-structured which means that we will create a script of questions but will happily allow people move off-track.

The interviews aim to gather opinion on the site’s user base, weighting of content, issues and opportunities.

Work together

Though we are usually brought in as experts to consult on this type of process it is imperative that the client is involved at every step of the way. This is because one of the purposes of the exercise is information gathering. For example, creating user personas based just on stakeholders interview input may miss something that discussing/reviewing with the web team would not.

Create the document

What we are trying to do is record all findings in a manner that can be used as a basis for all the work to follow – IA, design, copywriting, build etc. In other words – create a list of requirements for the new site and give them an order of priority.

It needs to get into detail to be useful. A recent review we carried out contained over twenty specific opportunities for the site, which target audience groups each issue related to and how the site could deliver each opportunity.

This was coupled with a detailed list of requirements per audience group – 25 audience groups with over a hundred requirements. The requirements we also graded for importance into ‘must haves’, ‘should haves’ and ‘nice to haves’.

Back to top

Paul’s corner: Spending your training budget

I recently received a question from Harry asking “what approach do you take to training?”. He has some budget set aside and is wondering how he should spend it. As I am always keen to spend other people’s money this seemed the perfect subject for me to talk about… read keeping your skills sharp.

Training course give away

While I am on the subject of training, the guys over at Clearleft have two training courses coming up on January the 24th and 25th in Brighton. The first is CSS mastery by Andy Budd and the second is Bulletproof AJAX by Jeremy Keith. If you would like to attend but cannot get your company to produce the £345 + VAT for the early bird fee then I might be able to help. I have one free place to give away to either course (your choice) for a lucky random winner. We will announce the winner on our Christmas special so entries need to be in by Friday 14th of December. Just send me an email with your name and contact details with “clearleft competition” in the subject line.

Back to top

Ask the expert: Roo Reynolds on virtual worlds

Paul: Okay, so joining me today is Roo Reynolds who is a meta verse evangelist for IBM, Its nice to have you on the show Roo

Roo: Hi Paul,

Paul: What on earth is a meta verse evangelist?

Roo: That’s a good question, I guess a meta verse evangelist is someone who helps people understand the very exciting and confusing area of virtual worlds.

Paul: Ah, virtual worlds. Now the people listening to this show might be thinking what has that got to do with web design, why have we got someone one on here talking about virtual worlds and I am quite happy to admit that that’s not our normal fair. Its not what we normally cover on the show but I wanted to get Roo on partly because um, well to be frank we grew up together didn’t we pretty much

Roo: we did we were family friends for many, many years

Paul: yeah, which was very bizarre to then discover the he is a kind of world authority on virtual worlds. so that sounds very dramatic doesn’t it

Roo: A thought leader?

Paul: A thought Leader

Roo: I remember inheriting your old star wars toys Paul

Paul: There we go, So I set you of on a good direction in your career by getting you into Sci-fi early. I am now taking all of the credit for all that you have achieved since then.

Roo: Its all thanks to you (giggle)

Paul: yeah (hahahaha) Well um, but I though it was quite interesting. I was doing a presentation where one of the things I wanted to talk about in this discussion was upcoming and emerging technologies and how they would affect things and I wanted to talk about virtual worlds and realised that I knew absolutely nothing about them so I gave Roo a call and we had a chat on the phone. Then I got educated so I figured I ought to pass on that education to everybody that listens to this show so that’s um, a bit of the background. So lets kick of the with the first questions. So what exactly are virtual worlds and why do you think there is so much hype surrounding them at the moment there has been lots of talk about, you know, things like second life and that kind of thing. Perhaps if you could explain them a bit, and explain why there is so much enthusiasm about it at the moment

Roo: yeah I can try. So I guess I can ask you to think about it. as it a good an example anyway, probably the most popular example of a virtual world. At the moment. So these are things which are kind of digital online environments or as some people would describe the as multi-user virtual environments its that kind of online social space. So to the untrained eye they might look a lot like game but there are no game elements inside virtual worlds or rather there are but they exist within the broader world. So something like second life doesn’t really have any point there is no final point no enemies to kill there is no “x” level to achieve its just a world and if you want to inhabit that world and build a shop or you want to habit that and be an explorer and wonder around finding interesting things and talking to people then that cool as well.

Paul: Hmm, I mean the immediate thing which comes out of that is well, you know, what is the point. Why do people take part in virtual worlds and what kind of ways are people using them

Roo: Yeah, there are a lot of different answers to that, almost as many answers as there are different people really so as in the real world there is not point. people make up their own point they decide that the are going to make a lot of money or they are going to be an artist and be well known or open a sex shop or whatever it might be and people will have different personal goals which they set themselves. So really any goal is a tangible thing that people will almost determine for themselves

Paul: So I guess in many ways its like the web itself it’s a tool and how chose to use that tool is largely up to you

Roo: Yeah exactly. And within that you will get lots of different things, I mentioned some, you will also get games within that so people play chess inside virtual worlds and people do all kinds of crazy things. Yeah I guess the answer to your question is really why is there so much hype about them, its because over the last 12 months or 16 months or so the press has been covering this is quite a bit way. That turned it into a kind of hype feeding frenzy. Garner had a very famous prediction about how 80% of active internet users by 2011 I think it was will be using virtual worlds and will have an avatar. Not necessarily in second life but in a virtual world. And all of this make people realise that this might just be the next “big thing” its gone from being the kind of space where people will, I don’t mean this in any derogatory way, everyday people will would hang out in to becoming a space that a lot of big companies and small companies and advertising and marketing firms are really getting interested in. You know we have all seen “the web” in that ,very early in my career, was the web being picked up by corporation and some people almost missed the boat and had to catch up later on

Paul: So Why do you think this is going to be the next big thing? Why do you think a virtual worlds are going to be you know, you talked about how some companies had to play catch up on the internet you almost imply that this I going to be as big as the internet is. Did I miss interpret that or do you really think its going to be incredibly significant and if so why?

Roo: Well, I think it is always going to be a subset of the internet, you know, this is just another communications media and its probably will remain a subset of the web. There will always be a place for flat 2D content, But once you start getting into 3D social stuff and giving people a real time opportunity to relate to each other and see each other and this sense of presence where you can see what the other is paying attention to. For me joining a circle for the first time, a circle of people talking and I walked up to it, and you know people took a step back to invite me into that circle. That was a really compelling moment to me. It was also a real eye opener that the “real world etiquette” that we see in society all the time actually was playing out for real in this virtual space as well. In terms of why it might be the next big thing a lot of different elements are coming together at the same time here, we finally have, almost complete availability of broadband, certainly in this country and in the west. We have got fairly powerful machines now that have 3D graphics accelerators and sound cards, this is something which is now also happening in corporate environments as well as at home. There is kind of a point in time where the… someone might describe it as a tipping point where there is this lot of interest and we have seen this massive press interest, but also big companies getting involved, you know when you see Sony with their playstation home project which is going to be like a lobbying environment for the playstation 3 its been delayed a little bit, but that is really the kind of mass Market application for virtual worlds and it is things like that which really opened my eyes to where this might take is. This is not going to be a niche thing with a few geeks hanging around and some would argue that it has never been that. Really virtual worlds have been attractive to creative people and to the people who feel like they want to kind of express themselves and share things, Its not full of 16 year old boy with glasses sitting in their bedrooms and really there is a difference between games, traditional online games and Massively multiplayer online role-playing games And a space like virtual worlds that allows them to be attractive to the mass market . So yeah I wouldn’t say it is going to replace the web or even be the largest portion of the internet. But there is certainly a growing space for these virtual worlds

Paul: so what, I mean, I can understand how some people are maybe making money out of being involved in virtual worlds where, I don’t know, where they are creating things which they are selling inside that virtual world, but what about other companies, how are larger organisations using it. For example, how do IBM use it?

Roo: well, we are maybe quite weird in because we do an awful lot in virtual worlds. We do everything from recruitment too employee discussions and meetings. although of course we cannot use a virtual world for confidential discussion, we certainly have the types of meetings we would have in public spaces, like conferences, we also have virtual facets to real world conferences like forties a really big conference we run, and we had that for the first time happening in second life running in parallel to the real world event so people who could not make it to the real world event could at least attend. They could see and hear some of the presentations and they could mingle and network. So like I said we are a bit weird in that in that we do so much, that’s partly because we are such a big company. Now a lot of other people would look at it and say they have a very particular need or desire, something they want to get out of it and for some people historically it has been marketing, or advertising, it has been to reach a wider audience or to reach them in a different way. Which is more playful and allows them to be really participants rather than just eye balls

Paul: yeah, I mean one thing you said was earlier was that you referred to virtual worlds as a subset of the internet and the web. Its another that that going on online. One of the things which strikes me is that if you do something, in something like second life, say if you run a conference that conference is kind of just fenced into the second life world so its not going to get picked up by search engines, its not going to be very accessible and things like that do you think that there are going to be changes in that, do you think there will be more crossover between virtual and maybe the more traditional web

Roo: yeah absolutely this is one of the areas that really excites me at the moment, this whole area of interoperability and that needs to be not just between different virtual worlds but also between the web and virtual worlds so this idea of the virtual universe sort of thing as a virtual world or virtual worlds is something that IBM even throws this term 3D internet around quite a lot. In a kind of evolutionary next step when you look at virtual worlds today they tend to be proprietary walled gardens and actually a lot of people would compare them to AOL in the mid nineties but actully when you start thinking about how they may interconnect, and that inset just moving your avatar from world of war craft to second or habbo or whatever its actually much more interesting than that. Its things like bringing you wallet with you your friends list with you being able to blur the lines between virtual worlds and bring content in from the web and share content back out to the web, these things are beginning to be possible and in some ways one of the reason I think second life is so successful because it does have the ability to make request to web content and bring that in so you have dynamic stuff going on. But that is still very early days and I think that we will probably see a massive focus and in fact the big conference in san hosa very recently where this came out in a very big way but a lot of companies will be wanting to get together and its very, you know the will is definitely there to have a real focus in the next few month on interactivity

Paul: I mean so, I am kind of very aware this for many of the people listening to this show that are kind of a mixture of designers, developers, you know, people that are running websites that a lot of this is very theoretical and it is not something they would be directly involved in at the moment. I mean do you think there is anything that they should be doing, that they should be aware of when it comes to virtual worlds. Is this an area you think they should be keeping an eye on or doing anything actively.

Roo: Yeah, I guess most people I talk to even if they are not going to rush out tomorrow and buy some space in some virtual world and um, you know its not for everyone. But most people who I talk to at least want to stay informed once they have got that hook in their head that this is, you know, I obviously find it very interesting but people tend to come away with the a sensation that this might go somewhere and there is enough evidence already today that its fairly compelling, if you look at it on the “garnet height curve” this idea that things go though a life cycle of interest it haven’t yet peaked the top of that and it is now falling back down into this trough of disillusionment in the long run what might happen it might reach the stable plateau where it will actually become a really useful space that interesting work will happen and kind of follow the same progression as so many technologies before it. Most people come away with the feeling that they want to keep an eye on it. Now I guess if I am going to step back a little bit and look more broadly at what is going on, on the web then for web designers and for almost all of them, this is very big on their radar the whole area of social online collaboration and this whole “web 2.0″ umbrella which you started talking about a year ago if not longer and has been you know really quite large for me, that fits very neatly into this same space. What you are talking about are people sharing content and whether that is a a chat or something they have built themselves you know, you look at a world like second life and most of it is not built but the company that runs it. As with youtube and del.icio.us and as with flickr and so many other popular services and site these days, it is built by its users. So maybe it is something people need to be aware of maybe its something which will gradually fit into a growing mentally of this is how the web works. Yes it happens to be 3D at the moment on the popular ones and yes they are not all currently delivered through websites, mind there are plenty that are, and there probably will be an increasing number that are delivered though the browser. So yeah, if people find this stuff interesting then they should keep an eye on it, maybe read a bit more about it.

Paul: Where is a good place for them to go then to wrap up, as far as if they want to find out more information or want to read up about the potential of it, where would you recommend they start by looking?

Roo: well there are a lot o very good blogs out there, if they have a very academic mind then they and want to read some really good writing on the subject then the best one I can think of is http://terranova.blogs.com/ , its one that I have guest authored for, but not the one I regularly write for, the one I regularly write for is http://eightbar.co.uk/about/roo, which has got a growing profile in the space of virtual worlds, That is written by a bunch of IBMers writing about what they find interesting. I have a personal blog a personal blog at http://rooreynolds.com if anyone wants to follow that although, please don’t all come at once

Paul: (Laughs) its really not that popular out podcast that it would…

Roo: no you are paul, you wouldn’t know how popular you are, but you are.

Paul: That’s okay, Thank you very much for you time , I think it is interesting we spend so much time on it with the immediate here and now problems, but every now and again it is nice to poke out heads above the parapet and see what is going on a bit further afield; so thank you very much for time coming and being on the show

Back to top

Question of the week

Do you think virtual worlds are going to be a mainstream method of online communication or are they a novelty doomed to failure? Answers in the comments.

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 99: Don’t panic

This week on Boagworld: Paul looks at the growing importance of the favicon. Marcus talks about what to do when the work dries up and Rob Borley looks an alternative approach to storing data in your CMS.

Play

Download this show.

Launch our podcast player

News and events | Marcus: What to do when the work dries up | Paul: Favicons – small but significant | Rob Borley on an alternative approach to your CMS | Question of the week

100th Show

Just wanted to say a big thank you for everybody who came along to the 100th boagworld. For more information on the evening check out my 100th Boagworld blog post. A special congratulations to the 4 winners of a years subscription to .net magazine and to Anna who won a CSS beginners course run by Drew and Rachel at edgeofmyseat.com.

Also live on the show we announce the winner of the FOWD competition.

News and events

Shift in the web wind

Molly Holzschlag likes to generate discussion on her blog and has raised an interesting subject in her recent post “shift in the web wind“. In it she says:

The latest Dot.Com boom is declining as far as I can tell. Are we on the edge of another Dot.Bomb?

Its an interesting question and one that seems to be appearing on an increasing number of sites.

Personally I have to say that I have become concerned about the state of the web at the moment. Not because I believe we have necessarily reached the point of a collapse, but because the boom we have been experiencing is unhealthy. I am in no doubt that we are now experiencing a bubble very similar to that of the dot com era. There are far too many copycat companies out there and the share price of companies such as Google are disproportionate to their revenue. What is more, once again we are seeing the majority of these companies leaning on advertising as a revenue stream. Advertising is very fickle business model because any dip in the overall economy and advertising is the first area to be cut.

So is everything doom and gloom? Are we about to all be out of work? Certainly if you work for a web 2.0. company or the majority of your clients are web 2.0 companies, then I would be twitchy. However, for the majority of us I don’t think there is much to be concerned about. Even if the bubble bursts there is going to be no shortage of web work around. The majority of web designers don’t work on web 2.0. sites. We work with offline businesses that have an online presence. These sites are not going to stop trading just because some high profile web businesses fall. The web is too well established this time around.

If it wasn’t for the fact that it will mess up people’s careers, I would welcome the crash. I think the current state of the sector is unrealistic and the larger the bubble grows the bigger the ‘pop’ when it bursts.

Best practice in email

Most organisations rely on email to communicate with their customers on mass. Whether it is order confirmation, special offers or regular newsletters, email is an essential tool in our web strategy. The problem is that our emails have to fight there way past junk mail filters and increasingly they fail to do so. This isn’t necessarily because we are sending out spam. In most cases it is because we are just ignorant of best practice when it comes to email delivery.

Fortunately this week I came across a great article that suggests some best practice when it comes to using email. This isn’t a list of ways to trick spam filters, rather it provides all kinds of great advice about running any kind of email campaign. From technical advice about CSS and HTML to common curtsy like don’t attach large files, this article really does contain some excellent advice. Finally, it also contains an invaluable list of tools for checking how likely your email is to be classed as spam. If you send out email to your customers then check out this article.

Flash based galleries for your images

So everybody thinks I hate flash. I don’t! I just think we need to think twice before using it. Like any technology we need to use the right tool for the job. However, sometimes flash works well and can really enhance the user experience. One such occasion is when we are building image galleries. Sure, you can build nice static galleries or even produce something impressing using Javascript. However, flash can do some stunning stuff with images.

Even better is the fact that there many flash based gallery systems out there that you can just drop into your site with minimal effort. Whether you are showing off your portfolio or building an image gallery for a client you might want to consider one of flash based galleries reviewed in Smashing Magazine.

20+ tools for working with AJAX

If Flash is not your thing then you are probably into your AJAX and Javascript. If that is the case then check out mashable which has a list of over 20 great tools for work with AJAX. The list consists of a mixture of AJAX loading images, frameworks, reusable scripts but probably most usefully sources of advice. They include some great stuff for those starting out building with AJAX including a noobs guide and also a wiki of common AJAX mistakes.

If you know Javascript already but haven’t done anything with AJAX then take a look. It really isn’t as intimidating as some people like to make it out to be!

Back to top

Marcus’ bit: Don’t panic

Marcus looks at those times when the phone’s not ringing, your inbox is empty and you just lost out on three pitches in a row. No matter how much you tell yourself not to worry, it starts to creep up on you.

Back to top

Paul’s corner: Favicons – small but significant

In my section of the show I want to look at favicons. Favicons are those 16 by 16 pixel graphics that appear in your address bar, bookmarks and various other places. They maybe tiny, but they are becoming increasingly important. I look at why Favicons are worth your attention.

Back to top

Ask the expert: Rob Borley on an alternative approach to your CMS

Paul: So joining us on the show this week is Rob Borley who is, what is your job title Rob actually, I should know this but I don’t?

Rob Borley: (Laughs) Ye you should I think you gave it to me.

Paul: Oh did I?

Rob Borley: Technical Manager officially.

Paul: Uhhh… But basically Technical Manager/Lead Developer/anything vaguely techie goes in his direction.

Rob Borley: Basically it’s my fault when it breaks.

Paul: Yes, so if you want to get pissed at somebody about the boagworld forum there’s your man.

Rob Borley: (Laughs) I knew this was going to come up.

Paul: Well obviously it was going to come up.

Rob Borley: (More Laughs)

Paul: So if you haven’t gathered, Rob works for Headscape, the web design company that myself, Marcus and Chris Scott run and no he shouldn’t be blamed for the boagworld forum, he is actually trying to fix it, but his skills just aren’t up to the job.

Rob Borley: Oh, I see, I see, I see… (Laughs)

Paul: (Laughs) But why I’ve got him on the show today isn’t actually to be rude to him about the boagworld forum, but it’s actually to talk about our content management system because I get a lot of questions asking why content management system Headscape use and what one we would recommend and stuff like that so we’ve just got through a kind of major rebuild of our content management system and so I thought OK lets get Rob on the show and have a little bit of a chat about it and how it works and what it does. So I guess Rob the question to kick off with is why did Headscape decide to develop its own CMS rather than go with an off the shelf one, because there are so many off the shelf solutions around it kind of seem absurd in some ways?

Rob Borley: Umm, ye I guess when you first look at the problem, as you say, there are lots of CMS solutions around but the reason we kind of work from our own is because it gives us complete control over what we’ve got so if there’s a problem with it, we know were the problem is and can go in and fix it but more likely if there’s some new functionality we need specific to our clients we’re able to just go and build it and develop it very quickly because we know exactly how the thing works. Often these off the shelf CMS’s are trying to do everything because they’re in competition with all the other products out there and so they’re vastly complicated, they do lots of things we don’t need them to do and they’re not generally as useful for the client as what we’ve got as a result, because they’re designed by techies, techies know how they work and they’re generally far too complicated for average Joe user out there. What we’ve build is tailored specifically for our clients needs and hopefully is intuitive and easy for them to pick up because it’s designed for them.

Paul: Would you kind of, you know, are you being more brash in that your saying all web design agencies should be developing their own CMS’s or is that something specific to our requirements and the type of clients we have?

Rob Borley: I think when you look at our client base and the sort of projects that we get, a vast majority of our projects are based on our CMS technology now and so, I mean, if we were doing just one or two projects here and there then it would probably make sense for us to get to know our favourite brand of CMS and use that, but as a vast majority of our clients are using this technology it’s actually more productive for us to develop with our own, because we can just keep reusing stuff and add any new development or any area that we can add to it, we can then use it for future clients as well.

Paul: Hmm… So we had a content management system, it seemed to work, why then did you, actually no it wasn’t just you, you and Chris persuade me and Marcus to spend huge quantities of money on re-doing it from scratch?

Rob Borley: (Laughs) Well the first iteration, well I say the first iteration, I think we’re up too officially CMS 3 before we started this new one, it naturally evolved, it came from the need of one client wanting a CMS and then we thought “hey this is a good idea” and things got tagged on and other things got tagged onto that and it just became this, evolved almost organic mess of Darwinian thing which worked and held together and did it’s thing but had never been properly designed, it had never been build for a specific purpose, it was all just kind of mashed together and so as we came to the conclusion that most of our clients are going to be using this we took the opportunity to build a new one from scratch to do it properly. That’s the general theory.

Paul: So what’s different with the new one to the old one?

Rob Borley: Umm… Well there where a few extra features like there’s a more complicated, well I say complicated, more in depth permissions system for pages and parts of the site, there’s also some work flow stuff we’ve added but the main difference is actually what goes on underneath and so this time around we build the whole thing on XML data structures.

Paul: OK.

Rob Borley: Which probably doesn’t mean a great deal to a lot of people out there, but what it means to Headscape, it’s actually changed the way that we develop projects and the way that we work, and it means a lot more less techie people can get down to the nitty-gritty of designing the data and the way things work.

Paul: So, give me an example of how that kind of works in practice?

Rob Borley: OK, so an everyday clients might come to us and say “We need a CMS to create” I don’t know, “hotel vacancies” and so what we’d have to do with previous versions of our CMS is go off, create the data structure in the database, write the logic in the server side pages and the database logic and techies would have to do that because your talking about writing ASP or .NET or PHP or using SQL Server and it’s a very techie orientated job. What we’ve done now by using XML is all the actual logic for the data structure is done in what’s called an XML Scheme which is basically a text document which describes the data. So it means that an average person in the company, who not particularly techie, so a designer or a project manager, a tester or someone can actually sit down and write a document that describes the data, feed it into the system and we’ve got our new area of data, our new “hotel vacancies” structure straight away. So it can be done much, much quicker.

Paul: So if I’m understanding this right, which I probably should do (Laughs)…

Rob Borley: (Laughs)

Paul: lah lah lah, so what we’re talking about here is basically that traditionally with a database you have a serious of hmm… well lets say for example in the “hotel booking” example you gave lets say the hotel had a name, a description and a price range, in the database that would have appeared as three fields basically, it would have been a name field, a description field and a price field.

Rob Borley: Exactly.

Paul: And then your code would have had to, on the back end, would have had to create form fields for each of those that would input into the database and on the front end you’d have to pull, ya know, your code would have to pull out those three pieces of information and display them on the front end, is that correct so far?

Rob Borley: Exactly right yes.

Paul: Right, so what your describing now if I’m getting this right is that basically you wouldn’t have three separate fields in the database, you would just have XML code for those three elements.

Rob Borley: That’s right.

Paul: And then the code both front end and back end looks at the code in the database and just pulls them all out and just displays them as form fields for inputting or text for out putting?

Rob Borley: Exactly, all the logic for that is already done so as soon as the XML is fed in, the back end displays the form fields to fill out the information, the front end pops out the raw XML which we can then style and apply your fancy CSS to.

Paul: I mean that’s quite incredible because like you say then, someone like Charlie who’s one of our Project Managers, can just go in and define, ya know, say we wanted to add, I don’t know, ratings to that list and then suddenly it will just miraculously appear on the front end and back end without any additional coding from you. Is that right?

Rob Borley: Exactly.

Paul: Wow.

Rob Borley: And often, so we’ll be half way through a project and a client will come along and say, “oh, well actually I don’t want that text field there, I want this text field” or “I want this drop down” or “I want this particular text field to be on the front end” and they’ve never mention it before, ya know, it’s typical client changing things as they go along and the Project Manager can just go in there and change the scheme and it does it, it’s done.

Paul: So there are lots of people using this XML/database technique?

Rob Borley: We like to think it’s quite new.

Paul: Oh really?

Rob Borley: Yes. I’ve personally not come across it being used before, but I’m sure there are people out there who are going to correct me on that. (Laughs) But it is quite new.

Paul: It would be quite interesting to know actually, if you are listening to this and you know of somebody doing a similar thing, drop me a line on [email protected]. It’s just kind of interesting to know. So what about, umm… have you kind of made any changes that have kind of made expanding the functionality more kind of modular or anything like that? I mean beyond this XML?

Rob Borley: Ye.

Paul: Is the architecture designed in a different way?

Rob Borley: Ye, so previously it was built on ASP Classic, which is not best for modular design, it’s quite difficult then to move functionality around and re-implant it else were. This time we’ve built it in .NET, in an object orientated way, so the theory being that when somebody else comes along and say “I want this addition to the form builder” or “I want to add a rating system” or “I want to add a product management system/stock management system”, we can literally just, that goes in as a block of code, we call it in an object orientated way, we can turn it off for some clients and so hopefully you build it once and it works for everyone that wants it.

Paul: So does that mean we’re going to have a consistent version of the CMS basically applied to, no we won’t because if a client asks for a new module that’s not going to be on the previous clients ones.

Rob Borley: No, so we won’t roll it back to previous clients, but there’s the potential, as we build stuff up, the potentials great for using in future projects because core of code to use as a base for all the projects.

Paul: So there’s like a core, what do they call it? Kernel of code that will stay the same and all the other modules are built around it?

Rob Borley: Ye, and the idea is that the kernel is kept as small as possible, so that the actual “guts” of the CMS are as tiny as possible and then it’s used to call all these extra modules when it needs it.

Paul: I’ll tell you another completely random question.

Rob Borley: (Laughs)

Paul: That I got asked recently, that you may be able to answer, you mentioned that we’ve built this CMS in .NET and that we do do a lot of .NET work, umm… the question that I got asked was somebody was going on about how it’s hard to produce standards based code out of .NET or Visual Studios, do you know what they’re talking about?

Rob Borley: No.

Paul: No?

Rob Borley: (Laughs)

Paul: Well it didn’t make a lot of sense to me because we produce standards based code don’t we?

Rob Borley: Ye, all of our code is output to your specification actually Paul.

Paul: Ye.

Rob Borley: (Laughs)

Paul: Anyway it just confused the hell out of me that one so I thought I’d ask you about it.

Rob Borley: (Laughs)

Paul: So, what next then is guess is the thing you would kind of ask? Is this a model you think is going to service for a long time going forward or are we going to have to go through this process again in a couple of years?

Rob Borley: I certainly don’t see us having to redesign it again for a long, long time. I mean this seems like it’s going to work and it’s easy to add and extend, I think that’s the key, it’s also very portable, because all the data structures are all XML based, if we for whatever reason decided to ditch Microsoft and move over to PHP and mySQL, all we’d have to do it re-write the logic that calls the XML in and out.

Paul: Oh OK.

Rob Borley: The data structure stays the same to the potential for importing it to other technologies as well as extending the functionality is there, it’s going to be a lot simpler than it would have been in previous versions of things we’ve done.

Paul: That’s very interesting isn’t it? I like that a lot. OK so just to wrap up then, if people wanted to learn any more about this kind of approach, I know your saying there isn’t much around about this kind of stuff but is there any way you would recommend people start having a look?

Rob Borley: Umm… Well the key behind it is storing XML so that’s were you’ve got to start, you’ve got to start with actually storing XML in a database and using the XML data types that the various database engines use now and then pulling the data out , so if you’ve got a good grasp of XML and XSLT then you can actually use whatever server side language you like so if you into PHP, or ASP or .NET or Ruby or whatever you want to do umm… getting to grips with the way the XML works is going to be the place to start, there are lots of places to check that out, W3 Schools is probably the easiest place to start, so the base technologies are standards it’s just what we’re doing with them that slightly different.

Paul: Ah… I think you need to write a blog post on this Rob so that people can access it.

Rob Borley: Your going to let me loose on boagworld Paul that very brave.

Paul: I’ll let you loose, if you write something I’ll put it onto boagworld for you.

Rob Borley: (Laughs)

Paul: Once I’ve read it, edited it and removed all the rude comments. (Laughs)

Rob Borley: Good idea.

Paul: Because you really need something else to do. You seem to be sitting around doing nothing so lets get you doing something constructive. (Laughs)

Rob Borley: I think so, hence I’m on this show.

Paul: Exactly, alright Rob thanks very much for coming in, that’s really interesting, a lot of that I’ve kind of grasped at some level because you’ve told me I need to understand it but ye, that’s really helped.

Rob Borley: (Laughs)

Paul: Thank you very much.

Rob Borley: No problem at all.

Back to top

Question of the week

Are we facing another dot com bust and if so what affect will it have on you? Answers in the comments.

Show 98: Flybe Farce

On this week’s show: Paul looks at the ongoing role of the website manager. Marcus looks at when to allow a loss leading project and instead of an expert section we are looking at the ultimate web design reading list.

Play

Download this show.

Launch our podcast player

News and events | Loss leading projects | Ongoing role of the web designer | Web designers reading list | Question of the week

Housekeeping: Prizes and problems

A free ticket for FOWD (New York)

With the 100th boagworld show coming up on the 20th October I am beginning to feel guilty. After all its going to be such a great time and all you poor Americans are going to miss out. I know how hard done by you all are and I couldn’t live with myself if I didn’t offer something as compensation.

Fortunately the guys at Carsonified are insuring that at least one of you poor hard done by Americans have something to cheer you up! They are offering you the chance to win a free ticket to the Future of Web Design conference in New York City between the 6-8 November. The ticket normally cost $195 and you get to see great speakers such as Jeffrey Zeldman, Andy Clarke, and Ryan Singer.

Now obviously this is not as good as going to the recording of the 100th boagworld but you will have to just struggle through. For your chance to win a ticket simply email me your name by the 22nd October and we will pick a random winner. For more information on the conference itself visit futureofwebdesign.com.

Download problems

From time to time I get emails from you complaining that episodes of Boagworld are getting cut short in itunes. Its rare but does happen. Unfortunately this is one of itunes less publicized ‘features’. I just wanted to say that the files are complete, the problem is that the connection gets dropped part way through and itunes thinks it has finished. If this happens to you simply delete the file and re-download it from scratch. It almost always comes down fine second time.

Back to top

News and events

Em Calculator

Personally, I love using ems. Although I don’t use them extensively on every site I build but I do use them a lot. They strike me as the perfect compromise between the pixel perfect control of fixed design and the accessibility and flexibility of fluid. Ems based sites scale as the user increases text size providing a rudimentary zoom functionality.

However I am not claiming that ems are perfect. They are not always the most appropriate solution and have their own technical difficulties. One personal problem I always had with ems was working out the sizing. The problem is that ems inherit from one another. 1 em may equal 10 pixels in one part of the HTML but equal something entirely different deeper down because of inheritance.

I always hated maths and so it is unsurprising that this inheritance issue made my brain want to dribble out of my ears. You can therefore imagine my relief to discover this week that somebody has built a great little em calculator that works out this nesting for you. Simply set the base size and then add the nested tags and em setting for each. The calculator does the rest.

Check it out. I guarantee if you work with ems regularly you will think it is a real time saver.

How to disarm 10 difficult client observations/requests

Next up, a great article about dealing with clients. We all know what it feels like, client after client churn out the same old comments…

I’ll know what I like when I see it.

or…

I love beige; can we get more beige in this?

… the list goes on. These kinds of questions are horribly frustrating and despite the fact that we hear them time and again we are often left floundering as to how to respond. This article lists 10 such comments from clients and proposes some ways to respond to them.

Obviously everybody has to respond to these questions in a way that suits them. However, it is still interesting to see how others suggest you answer these questions. Check it out and then post how you would respond to those questions in our comments.

The resurrection of downloadable fonts

Next up, the return of the downloadable font. Some call it the Holy Grail of web typography. Others just believe it would be used and abused. However, whatever you think you cannot deny that being able to define whatever font you like on a website is something that there is demand for.

The idea has been around since 1998 but different implementations of it by browser manufacturers meant it never gained traction. However according to a number of courses including Robert Nyman it looks like it is back on the cards again.

Both Safari and Opera have now implemented a standards based solution to the problem called @font-face, which is certainly good news. However, until IE and Firefox follow suit this is still not going to get a lot of traction. We will have to wait and see.

Creating better user personas

I feel like I have been talking about user personas a lot recently. They are certainly a tool I have been using for a long time and with good reason. I find them incredibly useful in focusing the designer and client on who they are developing for. They help to define functionality, content, tone and design.

However although I have done an introduction to personas on the show I have avoided going into too much depth. Developing a really good persona is a skill and I am far from an expert. However, if you do want to learn more about personas then you should consider reading Ten Steps to Personas a relatively short article outlining some more advanced techniques.

Now I should warn you up front this is not the easiest of reads. It is certainly more heavy duty than most of the things we cover here. However, I wanted to mention it because I know many of you are already using personas and this will take you to the next level. Also if all else fails it has a very useful chart outlining the steps accompanied by lots of pretty pictures ;)

Back to top

Marcus’ bit: When to allow a loss leading project

Even after going on at length in this podcast about making sure that contracts are in place, tasks are recorded in detail, requirements consultations are paid for and project management effort is not underestimated – all to avoid under-charging – sometimes there are occasions when you should take a hit and do a project as a loss leader. In this week’s show Marcus explains why loss leaders are sometimes a good idea.

Back to top

Paul’s corner: Ongoing role of the website manager

While writing my book I have been thinking a lot about the role of the website manager. In particular it has struck me how underestimated the role is. One aspect of the job that is particularly overlooked is the long term commitment involved. In the book I talk about what that ongoing role is and what companies need to consider if they are going to properly support a website over it life. Fortunately my publisher is keen for me to share my thoughts on various aspects of the book so I have put together a blog on the ongoing role of the website manager.

Back to top

Web Designers reading list

Instead of doing an ask the expert section this week I thought I would answer the single most common question I get from people who listen to this show…

What books would you recommend.

This is something I have blogged and spoken on before but I am going to give you my latest list of top picks based on my ever growing reading list.

Back to top

Question of the week

What books would you recommend about web design? Answer in the comments.

Show 96: Moll on Mobile

On this week’s show: Paul suggests some ways a client can pick which agencies to ask to tender. Marcus asks when is speculative design okay and Cameron Moll explaining how to get started on the mobile web.

Play

Download this show.

Launch our podcast player

News and events | When is speculative design okay? | Who to ask to tender? | Cameron Moll on the mobile web

News and events

Social Participation as a business tool

Back in 2006 I spoke at refresh06. One of the presentations I gave there has since proved a popular subject and I have been asked to speak on it again a number of times in various forms. It is on the subject of social participation and how to use it as a marketing and business tool. Social networks and communities are often seen as the domain of the teenage crowd with sites like YouTube and MySpace dominated by this demographic. However, community based applications are applicable to all audiences and can be a powerful tool for businesses.

After preparing the latest incarnation for a presentation I am giving at IBM, I thought I would do a run through (as I have only limited time). Discovering the new record feature in keynote I decided to record the whole thing and upload it for all to see. Hope it is useful.

Test your website for mobile compatibility

So this week we have Cameron Moll on the show talking about some of things covered in his new book “Mobile Web Design”. In his book he mentions an interesting site that I would like to pass on to you. It is a web application that allows you to test how well your website would appear on a mobile device. You simply enter your website address, wait while it calculates your results (it even gives a random mobile web development tip while you wait) and then view a complete breakdown of any issues with your site.

The report is distilled down into a single score but you can also see performance in each of the individual areas including:

  • Speed
  • Cost in terms of data access
  • Quality of code

and a whole host of miscellaneous tests. However, best of all is the fact that it also provides an emulation of what your site would look like on a whole host of mobile devices.

Laying out inline images

My next story tackles one of the mixed blessing of content management systems. Although it is great that content management systems allow clients to add content themselves they almost always fine a way of screw up the look of a site in the process. One way that they manage this is adding inline images. They are often required to add specific classes to images for them to be displayed correctly. Unsurprisingly the client sometimes fails to do this and the design becomes broken.

This week the List Apart website proposes one way to slightly reduce this risk. They use javascript to detect content images on a page and then apply different classes based on the width of the image in relation to its containing tag. In other words the Javascript detects whether the image is a full column, half column, or quarter column image and lays it out appropriately.

Its not the perfect solution and there are still ample other ways clients can screw up a design but it is a nice use of javascript that enhances a design without being mission critical. I think seeing this kind of use of Javascript and we should all be looking to use it for this type of thing.

10 Usability nightmares you should be aware of

My last story this week is another top ten list from the guys at smashing magazine (they do like their lists!). This one is a list of the top 10 usability mistakes and I have to say it is an entertaining list focusing on some big name sites. The list includes:

  • Hidden log-in links
  • Pop-ups for content presentation
  • Dragging instead of vertical navigation
  • Invisible links
  • Visual noise
  • Dead end
  • Content blocks layering upon each other
  • Dynamic navigation
  • Drop-Down Menus
  • Blinking images

Each mistake is explained in detail including some offending screenshots. A worthwhile read for us all.

Back to top

Marcus’ bit: When is speculative design okay?

I have decided to talk about speculative design work this week because we have recently produced a couple of designs and, although we recommend that it should be avoided, sometimes you simply can’t.

Unpaid prospective work is the bane of all of graphic based agencies and freelancers. It’s also something we have looked at before, but it’s such a significant subject I think it’s a good idea to look at it again.

The worst case

Some ‘clients’, and I use the word loosely, are simply looking for free work. It seems that they think ‘art’ or ‘drawing’ is not real work and is something that only fools pay for. They usually ask for a number of different page designs and concepts and will often ask for revisions on delivered designs.

The project often ends up being dropped by ‘the board’ and then mysteriously, a few months later, something very similar to your design appears for all to see.
These people are effectively stealing from you. Don’t do it.

When is it ok?

If you take the line that we should never do unpaid work then the answer is ‘never’.

However, life simply isn’t like that so you need to make some choices. You could argue that as long as the client is genuine i.e. it’s a real project that someone will win and subsequently get paid for, then it’s ok. It’s a fair fight and the best design will win.

But, this isn’t just about getting paid.

Educate (how many times do I use that as a heading!)

Speculative design is a beauty contest. The whole point of the exercise is to impress the client. This can possibly be seen as taking a somewhat derogatory view of a client’s ability to make the distinction between a design for them versus a design for their users. But even for those that understand the distinction, I don’t think it is possible to separate ‘what I like’ from ‘what is right for our users’. If there is a choice, then people can’t help picking the one they like best.

Added to this, there’s the big issue of designing in the dark. Even if a client has supplied a detailed brief and they’re happy to chat on the phone, the guy pitching still doesn’t really know what the requirements are. The early part of any design project involves detailed discussions about an organisations USPs, target audience, brand values, site statistics, site goals, etc etc.
User interface design is a collaborative process between the agency and the client that goes through an iterative cycle based on user feedback. This simply doesn’t happen with speculative design work.
So, in summary, always have this conversation with prospective clients. I know for a fact that on one job, we won the work by doing so. The client saw it as the most professional and well thought through approach taken by the agencies pitching for the job.

However, sometimes you have to do it or you will jeopardise your chance of winning the work – but still have the conversation and ask whether or not producing an initial concept will adversely affect your bid.

Back to top

Paul’s corner: Who to ask to tender?

With literally millions of web design companies worldwide where do you begin when trying to draw up a list of potential agencies? Who do you invite to tender?

Back to top

Ask the expert: Cameron Moll on the mobile web

Paul: Okay so joining me today is Cameron Moll. Good to have you on the show Cameron.

Cameron Moll: Hey, thanks Paul.

Paul: I think this is your first time on Boagworld, is it not?

Cameron Moll: Yeah it is.

Paul: Ah that’s good stuff we alway like to get new people on instead of having the same old boring people on every time. Nice to get someone from the States as well. Which is good.

Cameron Moll: Yeah absolutely and I’m kinda bummed you didn’t pick me for your hundredth episode.

Paul: Well if your in London you can come to our hundredth episode and join in the show. Do you happen to be over then by any chance?

Cameron Moll: Uh, when’s that gonna be.

Paul: Uh, October 20.

Cameron Moll: Um, unfortunately not.

Paul: Argg.Shame, what a shame. Yeah, so we’re looking forward to our hundredth that should be fun. So I mean the reason we’ve got you on the show today is because you’ve just produced a book called Mobile Web Design. This you already know I’m sure. So we thought it would be good to get you on the show just to talk about some of the things that you kind of cover in the book, and give a bit of an introduction, um, to the world of developing mobile websites. And um the question I wanted to kick off with is in your book you dicsuss kind of four different responses to kind of mobile web. In other words four different approaches people could take when they start thinking about the subject of mobile web design. And I just wondered whether you could talk us through those four different approaches that people could use.

Cameron Moll: Yeah that’s probably a good place to start. Um, most of these are straight forward right. It’s I think a pretty simple thinking to understand how one would approach the mobile web. And uh, you know I produced these about two years ago as I was trying to understand how someone like myself, you, how we would make that leap over to mobile. The more I was researching it the more it became apparent that you know there is really these four methods, and what they boil down to is, uh, is this. So one, you essentially do nothing. Two, you reduce the number of images and styling therby reducing the file size, uh, the page weight and so on. Three, handheld style sheets and then four, mobile optimized or what some refer to as content adaptation. And uh, the breakdown is essentially this, if you’re going with that first approach your saying “You know what, I’m going to do nothing.” I’m either lazy. I assume that my users have devices that can support the content I already developed and uh, you know when you think about the mobile web obviously the question that comes to mind is what technology am I going to use? How am I developing content for mobile devices? And fourthly, most devices out on the market today will support well structured mark up out of the box. And so most of the devices being sold, most of the devices that people have in hand today are going to support your html markup. So a lot of user will take that approach, I guess developers that is, take the approach to say you know what, what I have developed it good enough. I’m going to push it out there. And with things like the iPhone and some of the higher end Nokia devices that are out on the market, most of those devices can support a full desktop experience. Right, so it’s this idea that I refered to as content zooming. And so with the iPhone I can see the full website. I can pinch or zoom in. With some of the Nokia devices and Oprea mini 4, I can have that same experience. And so the thinking with that first approach is, lets just leave the content as is and allow those higher end devices to access them.

Paul: Sure (thoughtfully like he is paying attention)

Cameron Moll: Uh, the second approach. This essentially takes the existing markup and content and says lets pull out the images. Lets pull out the styling and allow users to access that raw content. And the thinking there is we’ll reduce the file size. We’ll take out all those big images, that unnecessary styling. Most of the devices out on the market today, well I shouldn’t say most, but alot of them don’t support the styling that you and I are used to using on the desktop. So, the thinking here is just to pull all that out and allow the device to see the raw content. And after all people are after the content not necessarly the background images and colours and things like that. Now the third approach is perhaps right now the most controversial, and that being handheld style sheets. I mean these have been promoted as kind of this poster child of all things web. So any device whethe it be a mobile device, a car a watch or what have you should potentiall be able to take the same markup and with a style sheet specific for that device, again it might be a printer it might be a mobile device. Being able to attach specific style sheets that render the presentation differently for that given device. So the idea being, you know if I just attach a handheld style sheet to my markup. I don’t touch the markup. I don’t touch anything else. I just add that handheld style sheet then great it’s going to display it differently and so on. Of course there are drawbacks to this approach and I guess what I’m skipping here is there is drawbacks that I cover in detail in the book to.

Paul: Yeah (thoughtfully like he is paying attention)

Cameron Moll: To each of these approaches. They all have pros and cons. The biggest one here with handheld style sheets, cutting to the chase, is the fact that not all devices support it. I would guesstimate, I don’t have any exact figures, I don’t know that they exist. But is guesstimate only about half the devices out on the market will support handheld style sheets. And even of those that do the support is somewhat shotty. In that some of those devices will correctly obey a property such as “display none” but they’ll still in the background download the associated content with that. So if you’ve got a large image for example, and you attach to that “display none” it won’t show it but it’s still gonna download in the background that image or that content. So right now, at least, using handheld style sheets is a bit of a pipe dream. It’s just we’d love to be able to have the power to access those, that capability. But right now it’s just not all that feasible.

Paul: Hmm. (thoughtfully like he is paying attention)

Cameron Moll: Finally, on the fourth point, mobile optimized content. This is where you say “You know what. I understand that the environment of being mobile, this idea of context is different that it is when I am sitting at my desktop.” It’s different because I might be using one hand for data entry. I’ve got a much smaller screen and naturally I’m out on the street. I’m out driving or something along those lines. So we say what’s different about that experience, then sitting at one’s desktop. Proponents of this fourth approach essentially say, “You know what the other approaches, especially the do nothing approach completely ignore context.” And that is what is the user doing when they’re out walking. When they’re on the tube or the subway and so on. So this last approach says, okay the context of being mobile is different than anything else. People want to do things differently when they’re out and about. So we’re gonna reformat our content to cater to that experience. We’re gonna present and entirely different experience, and altered experience perhaps to that of the desktop that addresses the specific needs of being mobile. The arguement I make in the book, I guess coming full circle with these approaches is, I often get asked the question “Well what’s the best approach then Camerson?” I don’t know. And you ask 20 different people in this industry and you’ll get 20 different answers. Right now I think the most feasible approaches moving forward are the first approach, do nothing, and the last approach, to create mobile optimized content. The arguement being is one, you need to understand first of all the context of mobile users and therefore adapt that experience to that context. But at the same time you have alot of capable devices out on the market that may be able to render a full experience that users are used to elsewhere.

Paul: I mean you talked there about context and in particular the fact that peole might be using it one handed or whatever else. What are kind of the major differences that you are seeing between kind of a user experience designed for the desktop compared to user experience designed for the mobile device? How do they alter? What should we be doing differently?

Cameron Moll: Well I think that the key phrase here is mobile right. So Barbra Ballard, I quote her in the book, I love her quote that essentially says that when we’re talking about mobile it’s referencing the user not the device. And I think if we start there saying okay mobile is about the user not necessarily the device that they are using but the user. We then start to understand. Okay what is this user trying to do? Where are they? What are the limitations that they confront? And what are the oportunities that are provided through mobile that might not be provided elsewhere? So, it’s not about how do we make this experience similar to the desktop, but how is it different? How do we make it different and how do we welcome that different experience? So this idea of context, it’s this idea, you know, you have this great content, and we hear this phrase “content is king.” Well I argue that context is king. Cause when a user is mobile that content is of little value if you ignore the context in which it is being used. That inevitably leads to the question. What are the needs? What are the problems? What are the tasks that users may encounter in an environment of mobility. Then that leads to what are the opportunities that mobile provides for that given context. For our content, for our company that the PC doesn’t.

Paul: Yeah. I mean it’s a very interesting area because it’s almost somethign you need to address on almost an individual project basis. Looking at what content you’re working with, and working out what of that content is actually relvant to a mobile device and which isn’t. I mean you use an example about that somebody’s probably not going to want to look at your portfolio page on your personal website on a mobile device. It’s just not the right context. I guess that’s what your getting at there.

Cameron Moll: Right. You bring out a very interesting point and that is, let’s say a given company. Let’s say you and I as developers are working within an organization right. And we’ve got 20 projects that we manage. Something you said earlier keys to the point of looking at those 20 applications or websites and saying okay first of all which of these 20 apps might be relevant to someone being mobile. We cut that down to say 5 or 6 or whatever the number becomes. Within those applications or sites if we’re talking about existing content here within those applications or websites it’s those 5 or 6 as being perhaps suitable to mobility. We then look within those entire applications, so within a given application for example that might have 20 different tasks that a user does with that application. We then say okay which of those tasks are relevant to someone being mobile. So it’s this process, at least with existing content, looking at what are the applications we provide and within those applications what are the features that are going to be relevant. Now what that also ignores though is the fact that we’re not saying what are new opportunities? What applications have we not developed that might cater to mobile? Or within an application that we have developed, what opportunities such as location awareness might be provided to a user that we just haven’t even thought about it.

Paul: Yeah. I mean that whole about the fact that you get into this mentality that a mobile device is a cut down version of what you provide on the desktop. Actually, there are opportunities to do stuff on a mobile device that isn’t actually possible on a desktop and the location aware stuff is a good example of that I guess.

Cameron Moll: Right exactly.

Paul: Okay. So lets say as a web designer I’m beginning to get a bit excited about the mobile web. It’s obviously the way that things are going. You provide some excellent statistics in your book about take up levels of mobile devices and I’ve cribbed those and used them on the show before. So I think that there is a lot of people that are listenin to the show and going yeah this is something that I am really quite excited about. But where do I start? What kind of technical skills to I need to develop mobile websites? Is it enough to just know standards based design? Or is there other thins I need to know as well?

Cameron Moll: You know that’s a perfect question. If you look at where we are at now today it’s totally different then say 4 or 5 ago. I remember the same hype 4 or 5 years ago where people were saying mobiles coming. Developing websites for mobile devices is the next big thing. It just kind of died out. I think largely it was due to the fact that back then you still had to develop in WML, which is not a cryptic language. It actually provided a lot of clarity and unity to the mobile web environment 4 or 5 years ago. But at the same time it required that a lot of us had to learn a new language in addition to HTML or CSS. That’s no longer the case. So this second time around when we hear this hype about the mobile web, to me at least it feels much more real. Because now we have again, as I mentioned earlier, most devices out on the market, in fact nearly all of them support HTML, XHTML, and some level of CSS. So that means that you and I, we already know HTML. We already know CSS. We can take that knowledge and start developing content for mobile devices. Whereas 4 or 5 years ago we had to learn a new language just to get over that barrier of providing content. So the good news is, for the most part, really if you know standards based design and development techniques, you are 90% there. I think the other 10% is left to understanding context. So trying to understand what those limitations are with mobile devices and mobile users. And also looking at the opportunities. so again we’re talking about smaller screens, data entry. Those being limitations but at the same time location awarenes. Users just want to do things different. They’re out on the go, which can be a great advantage depending on what kind of content you’re providing. So I think the good news here, long story short, yes. You and I can just build on the knowledge we already have if we just start to understand just a little bit about what the users are doing.

Paul: I mean you say. It’s interesting some of the words you use. You say ‘for the most part.’ Or ‘some browers understand CSS.” And I think that’s the other big fear that people have when they start investigating the mobile web, is the huge plethora of different browsers and devices and all of this kind of stuff. And it seems like how the hell am I supposed to test on that. It’s impossible to test on every conceiveable device and every conceiveable browser. Where do you start? Where do you put your initial efforts?

Cameron Moll: You know when I first started talking about mobile I think I was a bit to pessimistic in that I would stand up, say in a conference or in an article, and say okay if you’re going to test for mobile devices be prepared to test on dozens of browsers and if you think 4 or 5 desktop browsers. And getting consistency right for those is difficult. Wait till you see the mobile web. I’m a bit more optimistic now. I hope the book at least comes across that way and when I talk about it at conferences it comes across that way. And the reason being is this. There are some pretty easy ways to deal with that challenge of consistency. Of testing for mobile devices. Of just developing content period for mobile devices right. So you and I, you use probably the web developer extension for Firefox. We both probably at some point used Opera. Both of those browsers with those extensions and plugins can, at least at the very start, render and initial small screen preview. They both have options to be able to do that. So starting at the very least we can develop, again because we’re developing in XHTML rather than WML, we can within the browser at least do a very quick test to see roughly how it’s going to show up for the user. After that, once you’ve got at least the markup structurally sound you can then jump over to emulators. Now there are plenty of online emulators. .moby provides one. Opera mini provides another and there’s several others out there. But also there’s desktop software that you can download to be able to emulate mobile devices. So then taking 5 or 10 mobile devices I can now test how my content’s going to render, and it’s very close to how it will actually render on the device. But you can’t stop there. The last step has to be actual devices. And I think this was what was insurmountable for me starting out as a mobile developer. At least a beginner saying oh gosh do I have to go out an purchase 100 devices to be able to test my content. Well fortunately you can get away with 5 or 10 devices. If you can get 5 or 10 devices that vary widely. By that I mean one being a very basic phone, another one being a PDA,another one being a popular device such as the Razor. If you can get 5 devices that vary widely, 5 to 10, the chances are that that content is going to render well for most devices out there on the market. That will get you close enough. A lot of that is based not just on my personal preference but on the case study that I offer in the book. That is the Yahoo! website for the FIFA world cup last year. They took that approach. They said you know it would be difficult to test on 100 devices but we think if we can get 5 to 10 widely varying devices that chances are our content is going to display well for a global audience. Which indeed it was for that particular website. So that’s the arguement that I’ve made. I’ve hear others make that arguement as well. And it’s not difficult to get that number of devices right. So you can probably get 3 to 5 from yourself, from friends, collegues and so on, on loan for a couple hours. If you’ve got a blog you can ask for volunteers to do testing. I’ve done that before and it works pretty well. And then finally anyone can hop on eBay and do a search for unlocked mobile phones and purchase phones for an affordable price and get you know 5 to 10 devices. That’s how I did it. You know I hopped on eBay. I bought about 5 phones that were unlocked and then I just take my SIM card and swap that around the phones when I am doing testing. So it’s really not that difficult once you’re done developing your content to make sure that it renders well for mobile devices.

Paul: What do you think about the kind of growing thing that we’re seeing at the moment about designing mobile sites for specific devices? Like the iPhone. Do you think that is a bad route to go?

Cameron Moll: You know I’m not going to say it’s a bad route to go. But I do question it’s integrity. Three years ago or so, when I bought, well this was a little bit after I bought my Treo, for example which is a feature rich PDA. There were all kinds of Treo specific sites that had been developed. So you had something like, lets just say you had something like ESPN.com/mobile/pda/treo would be the web address for that content. And it was formatted just for that device. When you think about all the devices that are out on the market you then realize that that becomes a big chore to try to develope content for X number of devices. Now I think with the iPhone at least you have that same experience being repeated. For me it feels in part like you know years ago when we hit up a website and it said best viewd with Internet Explorer 4.0 or something like that. You know that is what we’re seeing now with the iPhone. Granted the iPhone provides a much different experience and a much richer experience, which is great, but at the same time I worry that we are spending a lot of effort on a device that 1. Is not a market majority and 2. The device itself, the iPhone itself might change at some point in the future. I might have a larger screen. It may render content differently. Which then will require that we go back and rewrite that content yet again. So the arguement I’ve made is if it makes business sense to develop and iPhone optimized site well more power to you. Go for it. But I advocate as a default creating content that can render on as many devices as possible. Not necessarily just one device.

Paul: Cool. Thank you so much Cameron. That is incredibly useful. Where can people find out more about your book then?

Cameron Moll: The web address is mobilewebbook.com or they can find a link from my website cameronmoll.com.

Paul: Excellent. It’s a .PDF book that you can download instantly. Now waiting around for delivery at $19. The best thing of all is it’s nice a short. Just over 100 pages. Isn’t that right? Something like that?

Cameron Moll: That’s correct. And I’ll give your listeners a heads up that we’ve got a print version coming out in October to be announced soon.

Paul: Oh that’s excellent. So you’ve got the choice either way. Alright thank you very much for coming on the show Cameron. We’ll get you on again in the future no doubt.

Cameron Moll: Hey thanks Paul.

Back to top