Tag Archives: readability

Do aesthetics need to be compromised for the sake of usability?

Posted in Design on by Paul Boag

Gerry McGovern seems to believe designers are more concerned with aesthetics than usability. Do you agree? Is either more important?

As you will know if you have followed me for any length of time, I have great respect for usability expert Gerry McGovern. We work on similar projects and share a similar view of the web.

However, this week I parted company with Mr McGovern over his most recent post “Why web links are calls to action.”

In it he wrote:

It’s hard to read what Dustin writes on this black background; gave me a bit of a headache actually. But that’s okay. I had a great overall experience of the page because its black background communicated an important emotional, aesthetic thing to me.

Seriously, it’s a bit of a pity Dustin makes it so hard to read his stuff because what he has to say is quite interesting.

Later he went on to attack designers for their dislike of underlines.

Isn’t it amazing how many designers hate underline? They think it’s ugly, that it takes away from the look of the page.

Finally he reached the crux of his argument:

Have you read any grey books recently? I mean, have you read any books that use grey text or that have black backgrounds? Or, for that matter, have you read any print newspapers or magazines that use grey text? It’s well documented that it’s harder to read on a screen than in print. So why do designers deliberately create webpages that make reading even harder? Simple, really. Many web designers are more concerned with how the page looks than how it reads and functions.

In essence Gerry seems to be arguing that aesthetics should always take second place to usability. I disagree with this. It depends on the type of site. On some sites it is important to communicate more than information. Some websites are about conveying emotion and feeling too.

As for particularly targeting black backgrounds and underlined links, this is entirely unjustified.

Black backgrounds can (if done right) actually aid usability. Contrast is the issue here, not the colour of the background. As long as there is sufficient contrast a black background can actually reduce eye strain caused by white light, aiding on screen reading.

An example of a black background website with high contrast text

As for underlined links, I again disagree. Although I think it is important to underline links I tend to use border-bottom rather than text-decoration:underline. The problem with the latter is that the line intersects descenders making words hard to read, especially for those with cognitive disabilities. Not using underlines in their traditional sense actually aids readability.

An example of descenders intersecting underlines

The idea that most designers do not care about usability is incorrect. We care passionately. However, we do not always solve these problems in the way that usability consultants would prefer. Instead we try to balance aesthetic considerations with usability. We care both for how the page looks and how it functions.

So what do you think? Do you believe that designers care more about aesthetics than usability? Post your thoughts in the comments.

131. Version Control

Posted in Classic shows on by Paul Boag

In this weeks show Ryan and Stanton return to talk about the importance of version control and answer your questions on project  management and invoicing applications, download sizes and page weight.

Play

Podcast: Download (17.8MB)

Download this show.

Launch our podcast player

News and events

Twitter Cuts UK SMS

This week the team over at Twitter announced that they would no longer be delivering outbound SMS over there UK number. They go on to explain that the bill which up until now they’ve been footing is simply too great and that even with a limit of 250 messages per week they estimate a yearly cost of $1000 per user.

Thanks to established relationships with SMS services in Canada, India and the United States the outbound SMS service will be continuing uninterrupted in those countries.

Twitter has suggested a number of alternatives to the service, links to which can be found on their blog. It would also appear that a number of start-ups are rushing to fill the void as TechCrunch have also reported.

A large portion of Twitters popularity is due to their SMS facilities and it is feared that “freezing” out the UK and other countries from this service will be detrimental to their future.

It reminds me of when Pandora, the online radio station, closed its doors entirely to its UK audience due to licensing constraints and it begs to question do we poor souls in the UK miss out on all the good toys?

facelift (FLIR) Image Replacement for Fonts

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that aren’t otherwise supported in web browsers. The generated image is automatically placed on your site and works in a similar way to sIFR, the big difference being the lack of Flash.

This script uses PHP and javaScript and utilises actual .ttf font files to generate its replacement images, so you can simply specify which elements you want to replace, h1, h2 tags etc, download a font you want to use, point the script to it and your done.

I’m looking forward to having a play with this script as it seems to be simple to use and the fact that you don’t have to mess around with Flash like you do with sIFR is a big bonus in my book.

Take a look at the number of examples they have on their website and see for yourself.

Gmail went down!

So Gmail went down for a few hours this week and as Josh Catone said in his sitepoint article article:

Judging by the reactions on Twitter and in the blogosphere, you’d have thought that the world ended.

There’s nothing really more we can say about this that Josh hasn’t already mentioned, but suffice it to say, no web sites/app is going to have 100% up time and this echoes what Stanton and I were talking about the other week in regards to S3 going down. It’s important to always have a backup and not to put all your eggs in one basket because when the service you’re using goes down, and invariably it will, you need a plan B.

Back to top

And Now For Something Completely Random

During the recording of this weeks podcast we were thrown completely when we spotted Paul Annett from Clear:Left dressed up as a Gorilla on Yahoo Live! and then proceeded to start dancing… always aiming to share the hysterics here’s proof. Random indeed.

Paul Annett Dresses as a Gorilla

Feature: To Version Control or Not?

Version control can seem like a very daunting thing to incorporate into your work flow, but once it’s there you can be left wondering how you ever lived without it. In this week’s feature Stanton shares his experiences with you in a bid to convince you why you need it.

Back to top

Listeners feedback:

Project Management and Invoicing Applications

James writes: I would like some boagworld advice. I’m a web designer and SharePoint specialist at a large company in Cambridge, UK. Over the last 3 to 4 years i have been messing around with web design etc. I now am very busy outside of work and it is getting busier every month.

I started of with a server under the bed at home with UPS hosting these sites. They ranged from personal sites, to company profile pages to shops. This server has now been replaced with a VPS hosted externally.

My plan is to keep working full time and manage my time very carefully outside of work and keep these sites coming in and out etc and then one day take the big leap into the self-employed world.

What could you recommend for me to manage my tasks, projects, time-management and invoicing etc?

I love the podcast and would be quite happy to chat further with you. Look forward to hearing your experience comments.

Well there is a multitude of online and desktop applications designed specifically for managing your business.

Probably the most popular project management app I know of is 37 Signals’ BaseCamp and that’s certainly the first one that springs to mind when I’m asked this question. Depending on what package you have, BaseCamp allows you to create projects, set milestones, to-do lists, manage time spent on tasks among other things, however BaseCamp is tailored more towards collaborative projects for when you’re working with a team of people. It doesn’t provide facilities for invoicing clients and managing your accounts and so it might not be the perfect choice if you working alone.

Another app I know of and which comes highly recommended is FreeAgent. FreeAgent like BaseCamp allows you to create and manage projects, clients and timescales, however in addition it provides you with the facility to generate invoices, manage your bank accounts as well as your expenses and incomes. It’s designed for sole traders, partnerships and limited companies and is wrapped up in a nice, user friendly interface.

A final mention goes to a Microsoft app that I came across a couple of years ago now, and has only this year been release in the UK. It’s called Office Accouting Express 2008 and it’s actually free to download and use. As you would expect it integrates with other Office applications and provides you with all the facilities you would expect from an accounting package, invoicing, client management etc. So if you’re working on a PC it’s worth having a look.

Luckily you can have a play with all these apps before you buy. BaseCamp has a free account which allows you to create 1 project so you can get in and see how it all works, FreeAgent has a series of demos you can use to see if the interface and facilities are to your liking and as I’ve said Office Accounting Express is free. So my advice would be check out them al
l and see what works for you and no doubt there will be several suggestions in the show comments on other apps that I haven’t mentioned here.

Download Sizes

Bob writes: After reading a recent post from Smashing Magazine on textures I started to wonder… what is a good rule of thumb regarding document size per page on the web? Most of the example pages in the article ranked in at close to 900kb per page… am I behind the times?

Very good question, and one I think we all worry about at points. There’s more than just the filesize to really worry about, there’s the general ‘page weight’ which is affected by many factors, such as:

  • The number of HTTP requests made – if you’re pulling in a lot of external javaScript or CSS files, each one has to be requested seperately. You can combine these into single files to reduce load times, but at the expense of readability, maintainability and organisation
  • The size of any javaScript files you’re pulling in – you can get minified versions of most libraries, for example, which strip out all the extra spaces and line breaks in the code, which aren’t needed in order for the code to execute
  • CSS expressions can be a useful tool, but are bloody slow, especially when used a lot
  • Image filesize can have a massive effect on load times, which is one of your main concerns as you mentioned textures. I’m assuming you’re already familiar with image optimisation, but also test to see if you can squeeze images into a GIF, or a PNG8 if possible, these formats will give you a nice small filesize if you only need a limited colour pallete.

In this day and age it’s nice to think that we’re all cruising on nice fast broadband connections, but in reality we know that’s not the case and you really have to consider your audience, and the context in which they may visit your site (Paul’s talked about this quite recently). If you expect an older demographic to your site, or people in remote areas, then they might still be hitting you on a dial up connection. Some visitors may be using poor public wifi (I get suicidal on the train to and from London as the wifi is usually worse than dial-up), or mobile devices where the data charges can be ridiculously high.

There are a couple of tools I use to get an idea of how my pages weigh in:

There is a Firebug addon called YSlow which provides some nifty statistics on what’s happening under the hood of the pages you visit, and also grades the page performance and suggests methods to improve the loading time of your page.

I tested 2 sites quickly with this extension to give an idea of what you can expect to see, Amazon and Boagworld.

  • Amazon.com weighs in at 501k with 85 HTTP requests and a performance rating of D
  • Boagworld.com is a bit lighter on it’s feet at 57.6k and 79 HTTP requests, but has a performance rating of F, due to (among other things) including 37 external javascript files compared to Amazon’s 8, and 33 CSS background images compared to 9 with Amazon.

I also use a Firefox plugin called Firefox Throttle which lets you simulate a specific network speed (such as 56k) and get an idea of how long your site will take on certain connections.

Unfortunately I don’t think there’s a good rule of thumb here. Personally, I don’t let the page weight issue affect or limit my design, but try and make savings where I can nearer the end of the project, by optimising images, switching to minified JS libraries and reducing the amount of HTTP requests where possible.

Back to top

 

119. Fluid Elastic

Posted in Classic shows on by Paul Boag

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.

117. Friendly

Posted in Classic shows on by Paul Boag

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

Podcast: Download (22.4MB)

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

103. Bargain basement

Posted in Classic shows on by Paul Boag

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

Podcast: Download (29.2MB)

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?

Paying the price of tables

Posted in Development on by Paul Boag

Barely a week goes by that I fail to rant about why we should banish table based design and yet here I sit struggling because I failed to heed my own advice.

I am working on an old website that I built a couple of years ago and I am having a hell of a time with it, all because of my own laziness.

I would like to tell you that I built this site before I knew about web standards and the concept of separating design from layout. I would like to blame the presence of a table to set the basic layout as a mistake born out of ignorance. I would like to tell you that… but I can’t.

When I built this site I knew exactly what I was doing. We had been working with standards for well over a year and I had a fairly good handle on what I was doing. However for one reason or another I cut a corner. I introduced one tiny little table. So small you could argue it hardly counted. All this table did was set the basic two column layout. I argued that the time saved from taking this approach out weighed any "purist" arguments I might have against it. And indeed it did make life a lot easier and we turned the project around remarkably quickly considering its size.

Of course, like all good shortcuts it eventually came back to bite me. Recently the client requested a low vision version of the site like the one we offer on our company website. The problem is that one of the basic principles of low vision design is that content is sorted into a single column to aid readability by those with poor eyesight. Suddenly that little insignificant table has become a real pain.

The morale of the story is two fold, dump those table based designs and don’t cut corners for a quick win.

Making content accessible

Posted in Accessibility on by Paul Boag

Isn’t it funny how so many people who claim to be committed to website accessibility (myself included) tend to ignore the more subjective criteria of the WAI guidelines?

Take for example this humble guideline included in the most basic level of accessibility:

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

I don’t know about you but I always gloss over this one! I guess that most of the time I am not responsible for content so it’s not my problem. Of course, accessibility is my problem yet I very rarely challenge my clients over whether their content could be clearer or simpler.

So what makes content more accessible?

Well actually, the W3C who wrote the accessibility guidelines also make suggestions about how to comply with checkpoint above. These include:

  • Ensure your headings and link text are as clear as possible even when read out of context
  • “Front load” both the whole page and individual paragraphs so that the most important content and summaries appear first. This will aid skim reading of pages.
  • Limit each paragraph to one main concept or idea.
  • Avoid slang, jargon, and specialized meanings of familiar words, unless defined within your document.
  • Favor words that are commonly used. For example, use “begin” rather than “commence” or use “try” rather than “endeavor.”
  • Use active rather than passive verbs.
  • Avoid complex sentence structures.

I work a lot with Higher Education institutions and other government bodies who are largely passionately committed to ensuring accessibility sites. However, they often fail horribly on this very basic checkpoint in the accessibility guidelines.

The phrase “content is king” is truer than ever before and we need to focus on ensuring that content is accessible as possible.

Further reading

If you would like more advance on writing for the web then take a look at my article on “effective web site copy”

Visit the W3C site for much more detail on improving comprehension.

Check out this excellent article on website readability and its associated automated readability checker that rates the reading age of your site.

Make your site easy to print

Posted in Design on by Paul Boag

If like me you get frustrated by the fact that most web sites never print properly then you will be pleased to hear that you can format your web site totally differently when you send it to print!

A printable web site is vital

Lets face it, computers suck when it comes to reading large amounts of text. Although many improvements such as Cleartype have been made I doubt that the screen will ever replace good old paper for readability. The reality is that when most users are faced with a lot of content they want to read on a web site they tend to print it out and read it that way.

The problem is that few web sites print very well. It is common to see the right hand sides of web sites completely cut off when printed there by making the content unreadable.

Fortunately web standards based design can solve this problem by allowing you to completely change the appearance of your site when printed simply by using a separate cascading style sheet. This is because web standards separates design from the content of your site.

What to print and what to leave off

So what exactly should your site look like when you print it? Well there are two factors to consider:

  • The limitations of printers
  • The requirements of your users

The limitations of printers

Browsers tend to be fairly restrictive by default in what they print. This is largely in order to save their users ink on printing large areas of background colour which aren’t really necessary. As a result background images and colours are not printed by default and so should be avoided in print versions.

Secondly printers tend to have a narrower printable area than the average web site which is why sites are often cut off. Unfortunately each make of printer has a slightly different printable areas so I would recommend that any print version of a site is scalable to fit the available area.

The requirements of your users

At the end of the day the user is looking to be able to easily read the content he has printed. He is not interested in navigational elements which are redundant when printed. Take for example this page you are viewing now. If you were to print this you wouldn’t need any of the navigation or fancy graphics. All you would need is:

  • The branding – which site the print out came from
  • The title of the article
  • The content of the article

Everything else is redundant.

In order to aid readability (which is what a print out is all about) you should increase font size and use black text on a white background. This is not the place for lots of fancy graphics. Rather a print out should be entirely about ease of legibility.

Conclusions

In the past separate, easy to print version has been the domain of sites with expensive content management systems that could produce a separate printable version of a page. However web standards provides us with the opportunity to offer this type of functionality without multiple templates or maintaining separate versions of the same page.

Why not print this article to see these principles in action.

Design 101: Colour

Posted in Design on by Paul Boag

In the first of my series on the basics of good web design I tackled how to handle branding. In this article I want to deal with the more subjective issue of colour. How do you choose the right colour palette?

A subjective decision

The biggest problem with choosing the right colour palette is that it is all down to individual taste. Colour is a matter of opinion and there is no right or wrong answer. As a result you will get as many opinions on your colour palette as people you ask.

Differences in colour

Part of the problem is that we all perceive colour in slightly different ways. Also roughly 1 in 20 people have some form of colour vision deficiency.

However that is just the beginning. In addition to the differences that exist between people in the way we perceive colour, there is also differences in the way our computers show colour.

There are a whole range of factors which affect the way our computers display colour. These include:

  • Monitor type
  • Monitor brightness and contrast settings
  • Graphics card used
  • Operating system being used
  • Colour depth
  • Gamma settings

Colour theory

Because the choice of colour is so subjective and because you cannot guarantee exactly how a colour is going to be finally displayed to the end user it is important to remove the choice of palette from the realms of personal opinion. One way to do this is to use colour theory.

A lot of research has been done in how users respond to colour and what emotional connections they make. We all know the basics like red means danger or blue is cold. However this area of research has gone much further.

An excellent book on the subject is Shigenobu Kobayashi’s book Color Image Scale. This book provides over 1000 colour palettes organised by mood, taste and lifestyle. What this book allows you to do is look up a concept such as "Urban" and find an appropriate colour palette.

I know that many people are skeptical of books like this but I believe they have real value. Kobayashi’s book was based on research done over 3 years involving analysing responses to colour from a large sample audience. Surely this is preferable to a few individuals debating the subject based on personal preference.

Corporate colours

Of course in many situations you don’t have the luxury of starting with a blank palette. Often you will be required to work with an existing corporate colour such as IBM blue. In these cases it is a matter of finding complimentary colours that work well with your corporate colour.

Again, in order to avoid descending into the world of personal opinion, I prefer to use colour theory as a base on which to build.

Fortunately there are some excellent tools out there that will help you build a palette based on a single corporate colour.

Some sites worth experimenting with are:

Color Match 5KColor scheme generator 2

However by far my favourite is a piece of software called Color Schemer Studio. This brilliant tool allows you to create a variety of colour palettes based on long standing colour theory principles. It also exports them in a variety of formats and provides RGB and HEX values. It even helps you ensure high contrast for the best web site readability.

Conclusions

This article just scratches the surface of an enormous subject but hopefully it provides a few useful tips to get you started on creating effective colour palettes while avoiding the squabbles of personal preference. In my next article in the Design 101 series we will look at structure and layout.

Art direction on the web

Posted in Design on by Paul Boag

Your site might be the easiest to use, most accessible site in the world but without a good concept it may well fail to sell.

What is art direction?

The first thing to say is that art direction is not a new concept. In fact, it is one that is found in almost every other creative medium. You find art directors in film making as well as in print design and the world of advertising. Their job descriptions differ slightly from sector to sector but fundamentally they work alongside graphic designers and copywriters to come up with concepts that sell products or communicate ideas. They often communicate with us on an emotional level through the use of metaphor and symbolism. Art direction finds the switch that makes us buy into the product or concept they are trying to sell.

We are constantly exposed to the end product of art directors. Just try looking at billboards as you walk down the street or watching TV commercials and you will immediately see art direction at work.

How does this relate to the internet?

The sad truth is that although art direction has proved itself in every other advertising and marketing medium it has been largely ignored on the web. When it comes to web site design, developers focus almost exclusively on the interface, its usability, accessibility and functionality. Some attention is given to copy but only in an attempt to keep it easy to scan and digest. All too often little thought is given to the concept behind a site.

Let me give you an example of what I mean. Suppose a company who produced stair-lifts for the elderly were looking to launch a new website. Most web design agencies would focus on making sure it was easy for the elderly to use. They would ensure that the buttons were easy to click, that text was large and had sufficient contrast to improve readability. The graphic designer would probably include lots of stock photography of people using stair-lifts and warm reassuring colours. He will focus on whether to have a two or three column layout and how to incorporate the logo.

Although all of these things are important they fail to address the overall concept that will sell the product to the user. The approach lacks art direction. An art director focuses on a concept that will promote the benefits of the product. Stair-lifts provide freedom to an elderly person and open up areas of their house which have not been available to them for sometime. The art director may then focus on concepts of unlocking closed doors, breaking free of chains and flying free like a bird. This would be reflected in the choice of imagery and the copy used. This subliminal messaging reinforces the more traditional approach to web design and helps to move the user further along the sales process. It connects with the user on a deeper emotional level than traditional web design.

The way forward

So how do you begin to apply these techniques to your site?

Establish your concept

Have it clear in your mind what it is that you wish to communicate – be that the unique selling points of your product or the key message of your site. Also ensure that this message ties in with your objectives for your site. Always ask yourself, is this going to help me achieve my goals?

Brainstorm

Do whatever it takes to come up with as many ideas as possible. The more ideas you generate the higher probability one of them will be a gem. Don’t censor yourself. Write down everything that comes into your mind however bizarre it may seem. Also don’t worry about the details. That can come later. Focus on keeping up the flow of ideas and getting them down on paper. And remember, focus on symbolism and metaphor. The idea is to communicate your concept on an emotional level not necessarily a literal one.

Narrow the field

Now that your ideas are down on paper start to work through them and remove the weaker ones. Once you have narrowed the field to a few of the best start to flesh them out and add detail. Compare them to your objectives again to make sure they clearly communicate the right message. This process should make it clear which is the best concept to proceed with.

Managing the team

Now is the time to work with your designer, programmer, copywriter or external design agency to apply this concept to your site. Remain flexible, since a good idea can always be better, but don’t allow your concept to get lost in the practicalities. It is your job to bring all of these people together to turn your concept into a reality.

Conclusions

So is that all there is to art direction? Of course not. To a large extent art direction is a creative process that is hard to quantify. If you are not confident thinking in this way then maybe you are better finding a web design agency that offers these services. However, don’t be afraid to experiment. A good concept can have a dramatic effect on the response levels your site generates and shouldn’t be lightly ignored. Also with so few websites making use of art direction techniques there is a real opportunity to put yourself ahead of your competition.

Colour on the web

Posted in Design on by Paul Boag

How to choose the right colours for your website

Choosing the right colors for your Web site is a complex and often daunting task; many companies hire independent, special consultants just to devise color schemes that support and enhance an overall brand. However, if you have a sense of color harmony and understand the responses that certain colors can evoke, you can be your own color consultant and develop highly effective color combinations.

Before you begin mixing and matching colors, you must first have a firm understandingof your site’s message and goals. Once you understand what message you want tocommunicate, remember that perfecting a color palette is an iterative process,and above all, a creative one. Don’t be afraid to experiment with surprisingcolor combinations, but be sure to adequately test the results before unveilingyour product to the public.

Colour tips and guidelines

Understand your site’s message and brand

Choose colors that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colors such as blue, gray, and green. In this case, using warm, vibrant hues would undermine the site’s brand.

Understand your audience

Cultural differences can lead to unexpected responses to color. Additionally, demographic segments and age groups respond to colors differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.

Use a small number of colors in your palette

Four or five colors, in addition to white and black, should be sufficient. Too many colors create discord and distract the user.

Use contrast for readability

Colors similar in value do not provide enough contrast and hinder legibility. Black text on white backgrounds provides the highest degree of contrast.

Use grayscale to test contrast

When dealing with hues other than black, white, and gray, it’s sometimes difficult to determine the relative value of each color. To ensure that your color palette provides enough contrast, create a wireframe mockup and convert it to grayscale.

Be aware of timeliness when choosing colors

Color trends can quickly saturate the marketplace, and consumers rapidly become numb to fashionable hues. On the other hand, you can use popular color palettes from decades past to evoke feelings of nostalgia.

Consider functional colors when choosing a palette

Don’t forget to establish functional colors for elements that communicate contextual information, such as headings and links.

Prepare for color differences on the Web

Every Web developer knows that even Web-safe colors appear differently across platforms. Be sure to correct for gamma differences and test your color palette on multiple platforms .