Tag Archives: Design

10 Reasons why I prefer Fireworks CS4 to Photoshop for Web Design

Posted in Design on by Leigh Howells

Leigh Howells (a designer at Headscape) shares why he has decided to make the transition from Photoshop to Fireworks.

I have been a Photoshop user for over sixteen years, ten of which have been in a production web design environment. I’ve got used to the way it works. I’m used to its feature set and how it does what it does. I’ve worked happily within that framework and mostly not digressed unless my requirements have been to design a logo – where a vector illustration package like Illustrator has come into its own. More recently, however, I’ve begun to feel like I’m actually using the wrong tool for the job, in some ways like using a word-processor to replicate the work of a spreadsheet.

Just after Adobe’s CS4 suite was released, I decided to have another look at Fireworks – a package I had looked at a few times in earlier versions, but repeatedly given up on – each time falling back to Photoshop. I played with it, and I was impressed by a lot of what I was seeing. I persevered with it and started producing much of my my day-to-day work in preference to Photoshop.

1. Multiple Pages (with Master Page)

A Photoshop file consists of a single image with multiple layers. A Fireworks file on the other hand allows multiple pages with multiple layers per page. When working on a multi-page mock-up for a site design, the advantages of having all your assets contained within a single file are enormous. Although having 5 different PSD files may be workable initially, once edits and changes are required, for example changing text in a consistent header or footer, things can soon get messy and time-consuming as changes have to be made across all files. It’s also very nice that each page can be a different size, perfect for the different sizing which is often required between home pages and content pages.

As well as having multiple pages within the Fireworks .png file (the native file format) the powerful Master Page allows you to define consistent template elements which appear across all other pages. This is very powerful for defining a consistent header/footer which appears on each page and only needs to be edited on the Master Page to be updated across the design. A single page can also be detached from the Master Page if there is a unique page requirement.

2. Symbols

Symbols allow you to define an element or group of elements into a single object which can then be used all over your design across all your pages. This symbol can then be edited in a single place and all changes are reflected throughout your document. Imagine a graphic for a bullet icon which is used in many places across the design. To change the colour or shape of the icon within Photoshop may require lengthy manual editing and copying and pasting across multiple files. But with a multi-page Fireworks document using symbols, the change is only required in a single place for all the icons to be changed instantly across the design. This is a very powerful feature enabling design tweaks which may have otherwise been abandoned due to the time and effort involved.

3. Styles

Styles are to Fireworks as a CSS style sheet is to a web page. An items fill, stroke, font and effects can be defined into a style. These styles appear on the styles list and can be applied to other elements in the document. The real power lies in the fact that these styles can be amended and the changed cascading across the multi-page document automatically. Imagine a style of image with a particular border and drop shadow used in many places which you decide would look better with a different border colour and no drop shadow at all. If you have defined this image with your own style a single update will change all instances without all the pain. Like with symbols this can be a huge time saver whilst encouraging design experimentation and consistency.

4. Vector Objects

Fireworks offers the same basic tools as Photoshop for Bitmap editing but also has many extra vector tools. Lots of vector shapes are welcome with many control points for creating stars, polygons and regular shapes. In addition the Autoshapes panel provides a more diverse collection ranging from stick men with moveable bones, to clocks, calendars and title blocks.

My personal favorite or at least the one I have used the most so far, however, is the humble rounded rectangle which has control points for individual corners making a single rounded corner on a rectangle a simple task compared to Photoshop.

I also like the precise pixel control over each of fireworks elements in the Properties toolbar which makes sizing of images and vector objects a breeze to set to required sizes.

5. Libraries

Both symbols, styles and vector shapes can be saved for re-use and collected into useful library resources. In addition Fireworks ships with a common library of useful objects including buttons, browser and application elements for both Mac and Windows look and feel. A number of pre-defined styles are also provided ranging from Chrome and wood styles to more useful line shading and tool-tip styles.

6. Grouping

In more recent versions of Photoshop layer groups have allowed you to virtually group objects together. Though this works well, it requires a certain level of organisation moving individual layers into folders manually. Unfortunately, I have never liked working this way. I like to work quickly as inspiration guides me without having to laboriously put everything into layers and name them. Though the layer group model is still present in Fireworks it allows you to quickly select individual elements and group them together. The necessity to name layers is lessened by the fact they can be directly clicked on as in most vector packages, unlike Photoshop’s right click and ‘guess the layer’ (which didn’t get named!) method.

7. Interactive Gradients

Fireworks’s Interactive gradients are a simple enhancement to what is already available in Photoshop, but the gradient being used has control handles allowing it to be moved and sized within the object. A very simple enhancement but it works well and allows fine control and becomes particularly useful with using rectangular shading styles.

8. Web Layers

The web layer allow you to quickly add hotspot areas and links between the pages in your Fireworks document, or external URLs. Whilst being useful for linking together simple wireframes, it can also be applied to fully designed mockup pages illustrating how a finished site may navigate.

Fireworks’ initial conception was to help designers produce quick web sites with its ability to output html, rollovers and interactivity. All those features are still there and whilst you may not want to use the code it produces for final sites, for outputting your designs as an interactive mockup site, for example, Fireworks does a great job of exporting your images and html.

9. 9-Slice Scaling

This scaling technique can be applied to bitmaps aswell as to vector objects. This allows intelligent scaling as can be seen in the bitmap below; the four lines define vertical and horizonal sections on the image which will scaling areas when the image is resized, leaving the remaining areas untouched. This can be applied to dialogues boxes, headers, scroll bars, anything which you would want to scale, but to scale non-uniformally.

10. Small learning curve

Lots of things are just the same as in Photoshop – lots of keyboard shortcuts, tools palette – windows, toolbars, panel layouts etc. It all mostly feels the same and I have got to grips with it intuitively moving from Photoshop.

In addition to these ten points, Fireworks is also cheaper than Photoshop!

Some things I don’t like so much

Though I love Fireworks so far, I have some niggles. These may be due to my lack of experience, but then if that’s the case maybe my main niggle is the fact they aren’t obviously overcome!

1. Masks

These aren’t quite as intuitive as Photoshop yet. I have always been a big fan of quick masks in Photoshop; i.e.; pressing ALT between 2 layers making the lower layer mask the layer above. Though layer masks are the same, and there is the ability to paste bitmaps within objects using ‘Paste Inside’, these don’t work quite as freely at the moment.

2. Text Anti-aliasing.

I can’t quite put my finger on it, but the anti-aliasing of text isn’t quite as good as Photoshop’s yet. Even thought there is actually more control with the ‘Custom Anti-Alias’ panel – which allows you to edit parameters, sometimes text can look decidedly ropey at smaller sizes without lots of twiddling.

3. Performance

I can’t quite put my finger on this one either, but Fireworks doesn’t feel as solid as Photoshop. Maybe this is familiarity, but I feel like I’m working from within a piece of carved granite whilst inside Photoshop’s windows. I don’t have that feeling with Fireworks yet, but maybe it will come. (I also don’t know how many of the occasional memory problems and crashes have been due to running a pre-release version on Windows 7).

4. Snobbery

This is a terrible reason for not using one piece of software over another. However, I feel it’s very valid and I’m yet to tell a client I will provide them with Fireworks .png files rather than Photoshop PSD files (although multi-layered PSDs can be output directly from Fireworks). Maybe there is a fear your reputation as a designer is at stake if you aren’t using ‘the big and mighty Photoshop’. Maybe you fear you will not be taken as seriously, like in the old days of DTP using Pagemaker instead of Quark, or sequencing music in Cakewalk rather than Cubase or Logic.

Conclusion

To be honest, I’m not 100% happy with either product for web design work. I still prefer and am more comfortable with some of Photoshop’s familiarity, but I’m enticed by all the other features that Fireworks offers to make life easier and production more streamlined.

I guess the conclusion if you own both is obvious; use them in tandem. Use Photoshop for image editing, and more advanced image correction and manipulation, and use Fireworks for layout mockup of complex web sites which may end up with hundreds of layers. Note that with Photoshop installed, Photoshop’s layer filters are directly accessible within Fireworks in addition to Fireworks own filter options (which have all the basics; drop shadows, glows etc. etc.).

I eagerly look forward to future updates to Fireworks and wonder how the two products may diverge further now that they are both under Adobe’s wings. Although I wish they would change the name from Fireworks, to something like ‘Webshop’ as I keep mixing up Fireworks and Firefox both in conversation and launching the wrong application all the time! But maybe that’s just me.

185. Innovate

Posted in Classic shows on by Paul Boag

On this week’s show: We talk about Google Chrome Frame, how to be an innovator, and measuring the success of your website.

Play

Podcast: Download (18.9MB)

Download this show.

Launch our podcast player

Housekeeping

Win Pitches, Charm Clients and Get Signoff

Being a great designer or developer is only half the battle. You also need to be able to promote and sell your services. Unfortunately many web designers and freelancers struggle to engage with clients.

The problem appears to be so big and I get so many questions on the subject that I have teamed up with the guys at Carsonified to run a full days workshop on the subject.

It takes place on the 23rd of October in London. If you book soon the price is £375 although if you quote the code CWPB_09 you can get an additional 15% off.

Book Your Place Now!

Shopify Design Competition

Shopify (who sponsor the show) are running a design competition to find the best designed Shopify store.

They want your help picking a winner and so are giving away either a 15″ Macbook Pro or one of 20 iPod Nanos to encourage you to participate.

All it will cost you is a quick tweet and an opportunity to look through some stunning ecommerce websites. It is an excellent source of inspiration if you are considering adding a store to your website.

To vote go to win.shopify.com.

Back to top

News

Google Chrome Frame

Google have just released Google Chrome Frame for IE in an attempt to improve Internet Explorer. But will it have a real world impact?

Read my thoughts on whether it will make a difference.

A List Apart on Search

The latest issue of A List Apart is a bumper edition with three well considered posts on various aspects of search.

What makes these articles particularly interesting is that they are not about search engine placement. In fact they are not about external search engines at all. All three posts are about making better use of your internal search engine.

My personal favourite is “Internal Search Analysis.” This post focuses on the wealth of information that can be gathered by monitoring your internal search engine. By looking at what people search on, when they search and what they do once they have searched, you can learn a huge amount about your users and the effectiveness of your site.

However, the benefits do not stop there as “Beyond Goals: Site Search Analytics from the Bottom Up” demonstrates. The emphasis of this post is on how analysing internal search can dramatically alter your approach to content.

The final post is “Testing Search for Relevancy and Precision.” This focuses on the fact that site search is often not developed with the consideration and care it deserves. It provides methods for establishing the most important site queries and then checking that those queries lead to relevant content.

Together these three posts provide an excellent introduction to site search and should be required reading for anybody running a website.

How social marketing is changing business

There is a lot of BS written about the subject of Social Media. To be honest I am not a great fan of the term. However, it is changing the way we interact online and in particular it is changing the way organisations are interacting with their users and customers.

Mashable posted an article this week entitled “4 Ways Social Media is Changing Business” that really drives home this point. What is more, if this post is to be believe social media is changing business for the better.

The author identifies 4 positive changes that social media has had on business. These are:

  • A move from trying to sell to making connections
  • A shift away from large campaigns to small acts
  • An emphasis on being ourselves rather than controlling our image
  • An effort to be constantly available to users

The one that interested me the most was the “small acts”. Facebook, Twitter and other social media websites allow us all to reach massive audiences, and so the need for million dollar campaigns are increasingly a thing of the past.

At the same time users have the ability to make their experiences of interacting with you heard by a large audience quickly and easily.

This means it is the small acts of excellent customer service that matter. Get those right and you create a passionate enthusiastic following who will do your marketing for you.

Anyway, it is an inspiring read and if you are struggling to “get” social media, you might want to take a look.

Prototyping and the design process

With websites becoming increasingly complex and expensive to build, the need to prototype is paramount.

Unfortunately there are so many ways to prototype a design, from simple hand drawn sketches to entire working prototype. It is often hard to know which is the best approach.

“Integrating Prototyping Into Your Design Process” is a post on Boxes and Arrows that seeks to bring clarity to the different way of prototyping a site.

The post talks in terms of fidelity. Visual Fidelity, which refers to how close the prototype looks to the final design. And functional fidelity, which is how closely the prototype reflects the way the site will work.

The post goes on to identify different types of prototyping and where they fall within this spectrum. For example design comps have a high visual fidelity but a low functional fidelity, while an interactive wireframe will have a lower visual fidelity but will be functionally better.

However, the majority of the post is taken up comparing and contrasting the benefits of different prototyping approaches and asking when these are best used.

It is a useful post because it helps you pick the right tool for the job. Even the smallest web project can have some form of prototyping and so it is applicable to everyone.

Back to top

Feature: How to become an innovator

Whether you are a website owner, web designer or web developer you need to innovate. But how do you make it happen?

Read ‘How To Become An Innovator’

Back to top

Listeners feedback:

Measuring success

This week I twittered the following little fact I found through macworld:

43 per cent of UK companies admit that they have no quantifiable method of measuring whether their website is effective.

Shortly thereafter Stelian responded with the following tweet:

How can you measure if your company’s website is effective for the business? if you don’t own an online shop.

It is a good question. Its easy to establish measurable goals when you building an ecommerce site. However it is much harder if it is an informational or service based site. Nevertheless it is not impossible.

Every website should have an objective that the owner wishes to achieve. It might be to communicate an idea, rally support or generate leads. Whatever the case these objectives need to be converted into calls to action. What is it you want users to do?

These calls to action will vary depending on the type of site. However, typically they include things like:

  • Picking up the phone
  • Completing a contact us form
  • Signing a petition
  • Subscribing to a newsletter
  • Watching a product demo

The list could go on. What is interesting is that almost all calls to action are measurable. If a user completes a contact form, that is trackable. If a user watches a product demo, that is trackable.

The hardest calls to actions to track are those that leave the website. Typically these are phone enquiries or going to a physical location. However, even these are trackable with some careful planning. Discount codes or free gifts are a great way of getting users to identify they came from the website. For example:

Print this voucher and take it to one of our stores for a free t-shirt.

The phone is even easier. In this case you can have a unique number that is only found on the website. If the user calls that number, you can be sure they came from the website.

The point is every website should have measurements by which its success can be judged. Without these success criteria it will be largely directionless and will certainly struggle to justify further investment.

Back to top

184. HTML5

Posted in Classic shows on by Paul Boag

On this week’s show: We interview Jeremy Keith about the truth of HTML5 and Ryan Carson shares some more advice about building your own web application.

Play

Podcast: Download (27.9MB)

Download this show.

Launch our podcast player

News

Apple and UI design

Whether you are a fan of the Mac OS or Windows, there is no denying that Apple know what they are doing when it comes to user experience design. There is a lot that can be learnt from them whether you are developing a piece of software or even a website.

This week I have come across two sites which perfectly demonstrates just how deep Apple’s knowledge of UI design goes. The first is Finer Things in Mac, which is a site dedicated to highlighting the small details in the mac OS UI which makes it shine. Examples include:

  • The naming of buttons so they are more descriptive than “Okay” or “Cancel”
  • The way Time machine changes the clock in the menu bar as you go back in time
  • The accuracy of progress bars when compared to windows

The second area that demonstrates Apple’s expertise is in how they have chosen to tackle accessibility on the iPhone 3.1 interface. It is hard to imagine that a touchscreen device with only one physical button could ever be accessible to blind users. However, it would appear they have made it happen.

Marco, a totally blind user who works with Mozilla wrote in his post My first experience using an accessible touch screen device:

I must say this was an amazing experience! My fingers definitely need to get used to gestures such as flicking or tapping, or using a rotor. But having an iPod Nano 4th generation helped with that, since moving the finger over the screen like on a dialer felt most like tracking around the iPod’s click wheel. Even the sound the rotor makes is the same.

This amazing result is made possible by Apple’s VoiceOver technology which is extremely hard to describe. However Apple do provide a video that demonstrates the technology in action and I highly recommend you watch it.

Do you need cake if the icing is amazing?

On last week’s show I talked about 3 Ways to Stand Out From the Crowd. One of the things I mentioned as part of that post was Paul Annett’s talk at SXSW called Oh… that’s clever. In this talk he looked at ways to add design delights that excite and amuse users.

Although I am a massive fan of this approach, it can be taken too far. A Sitepoint article entitled: Do You Need Cake if the Icing is Amazing? looks at one example of where this happened.

The article is about the HEMA website where as the author describes it:

The site renders as what appears to be a garden-variety, IKEA-like online store: navigation tabs along the top and popular products displayed in a grid. Yawn. yawn.

That’s when reality seems to break, and strange and wonderful stuff start to happen.

It all begins when a plastic cup tumbles over, bumps the sticky tape, and a domino effect is set in motion. The tape then crashes onto the stapler before squishing the cake, noisily sliding down the xylophone, and knocking over the fluorescent pens like skittles.

This chain of slapstick events continues, drawing ironing boards, blenders, yo-yos, coat hangers, and kettles into the growing maelstrom before eventually breaking out into parts of the site navigation and text.

By the time this sequence of events has all played out, the tabs are torn and frayed, the navigation text has collapsed into a puddle, and confetti flutters about from above. Very, very cute.

The post is an interesting analysis of the pros and cons of this kind of approach. It concludes by saying:

But as sublimely clever as the animation is, I have to wonder if this project, and the buzz it created, has translated into anything particularly useful for the HEMA business.

What’s more, I wonder how many users have ended up feeling disappointed, frustrated, or confused by being unable to find some of the “bread and butter” basics like locating a store, giving feedback, or asking a question.

I have to say I agree. Although adding design delights and easter eggs is nice, it is easy to overstep the line and end up damaging usability and accessibility.

GIT: Your new best friend

If you develop websites as part of a team you probably use a version control system. We do at Headscape and it seems to be common practice. At the most basic level a version control system allows you to manage files, prevent overwriting by multiple contributors and allow rollback to previous versions of an entire site or a particular file.

The dominant player in this market is Subversion but there is a new kid on the block which seems to be getting a lot of press.

Git is a free & open source, distributed version control system designed to handle everything from small to very large projects. Every Git clone is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server.

This distributed approach has a number of obvious benefits, but it would appear this is just the tip of the iceberg. Think Vitamin has published a post entitled “Why You Should Switch from Subversion to Git” which explains the advantages of Git in full.

There is also a detailed introduction to Git on Sitepoint entitled “Git: Your New Best Friend“.

I freely confess that I know nothing about version control systems (that is Dave and Craig’s areas of expertise). However, I have seen a lot of love for Git online and if you are a developer this is almost certainly worth checking out.

Project management and simplicity

Building and running a successful website is about a lot more than having a great design team. It is also about having a visionary website owner who can think creatively and manage projects successfully.

However, being able to manage projects and have time to think creatively about your site can be a challenging combination. Life is simply too hectic.

Fortunately there are two posts this week that might go someway to inspiring and organising you better.

The first is “How Simplicity Can Help Creativity“. It looks at how simple changes to your routine can help grow your creativity. It contains good solid advice, although admittedly some of the suggestions are primarily aimed at writers.

The second is a Smashing Magazine article entitled “How to Find Time For Everything!” This is essentially a productivity post. However, it is particularly aimed at web workers. It covers everything from your working environment to prioritising and planning.

Both posts are worth a read if you find yourself constantly caught up in the day to day running of your website and never get the opportunity to think more strategically.

Back to top

Interview: Jeremy Keith talks about HTML5

Paul: So we are doing our first interview of the day at dConstruct, and joining us, of course, is Jeremy Keith – hello Jeremy.

Jeremy: Hello.

Marcus: Such a happy hello.

Paul: It is, he’s a happy, jolly person; well known for his jolliness.

Jeremy: It’s true.

Paul: So, HTML 5.

Jeremy: Yes.

Paul: There has been so much talk about HTML 5 recently, we thought, as we’re going to be seeing you, as we’re going to be at dConstruct, we ought to grab you and talk about the subject of HTML 5. Now, I haven’t thought through in a huge amount of depth want I want to cover…

Marcus: Surely Jeremy in cartoon form is want you want to cover?

Paul: Yes, that’s a really good point.

Jeremy: I was really shocked you haven’t prepared.

Paul: Yeah, but actually I managed to watch the cartoon, or read the cartoon.

Jeremy: So that was about you’re level.

Paul: That was about my level, yeah, I felt happy there. So maybe just run through this fundamental issue that XHTML 2 has gone away; HTML 5 seems to be the new thing that all the cool kids like, so what’s going on there?

Jeremy: Okay, well first of all HTML 5 has been around for quite a while; they’ve been working on this, so nothing has particularly changed. Well, Google had their IO Summit thing a few months back, and they came out and said, “We totally support HTML 5, and we think it’s the future”, and suddenly a lot of people got very interested in HTML 5 who hadn’t been paying attention, which is a bit weird. It’s like it’s been going on for ages, but as soon as Google says it’s interesting then people are interested. So that was one thing that kind of sparked a bit of interest in HTML 5 which is kind of good to see. But then the whole XHTML 2 thing was just really bizarre because I hadn’t realised the misconceptions that a lot of plain old working web developers were under about the format. Basically, XHTML 2 has been dead for years, and I thought everyone understood this.

Paul: No.

Jeremy: Okay, so HTML 4.01 was finalised around 2001, and after that W3C said okay, HTML is done, and we think the future is XML based… all these various XML based technologies, and amongst that is XHTML. Now, we all rated XHTML 1, but all that was, was just HTML 4, really. I mean all it is, is just an XML version of HTML. Nothing new was added, it’s all the same elements; everything works pretty much the same. So, really, XHTML 1 is just HTML, and most people used it that way, they would serve it as HTML. This upset a lot of people who thought, “Oh no, you’re serving XML as HTML and that’s bad,” but most of us didn’t care, you know. Browsers rendered it, we were able to validate against it, and that was good. I mean that’s why I use XHTML 1. I serve it as text/html, I don’t care that browsers then treat it as HTML, I get the validator telling me if I forget to close a paragraph, or if I forget to quote an attribute; that’s useful to me as a web developer. But it’s not a completely different format to HTML, it’s just HTML redefined as XML.

XHTML 2 is what the W3C started working on after HTML 4 was finished. XHTML 2 was going to be a complete break; an utterly new format. I mean things like you wouldn’t have an image element, you would have ‘object’ to cover any kind of thing you would put on a page. All sorts of things that really, theoretically, were wonderfully pure and abstract, but practically, just no way anybody’s ever going to use this, because it wasn’t backwards compatible with all the content on the web today.

So there was this kind of split in this W3C around 2004. There was this one particular meeting where the W3C really put their foot down and said, “The future is XML and particularly, XHTML 2. We know it’s not backwards compatible, we don’t care, we’re going to plough forward with this.” And some people in the W3C said “That’s it, we can’t deal with this”, and split off into this separate splinter group (this was Opera and Mozilla at this point), and they called themselves the ‘WHAT Working Group’. Web Hypertext Application something… I don’t know. It’s clearly a ‘back-ronym’ right? They came up with the word ‘what’ and figured out words to go around it.

So, they start work on this thing which they call HTML 5. That’s kind of this buzzword umbrella term to cover one, the next version of the mark-up language we know as HTML, two, XForms which is a good thing that the W3C have been working on to make life better for web developers, but mostly this idea of what they were calling web applications one, which was the idea that we’re moving from documents to web apps, and that’s what real people working on the web really need; fill in the gaps in HTML… We’re working with HTML now to kind of force things to act like applications, we don’t have native things to build applications like, let’s be able to make applications natively so that we don’t have to rely on a plug-in like Flash, or Silverlight, or any of these other non-open technologies.

So that started in 2004. Meanwhile XHTML 2 is being developed at the W3C in the ivory tower where no-one is actually going to use it, and in 2006 Tim Berners Lee wrote a blog post and said, “Yeah we were wrong, we were wrong.”

Paul: Good for him.

Jeremy: Yeah he said, “Actually HTML is still good and is actually the future on the web,” and restarted a charter for the HTML working group. So in 2007, the W3C start work on HTML 5, as in the sequel to HTML 4.

Paul: Corr, this is complicated!

Jeremy: Working with the W… what, working with the WHAT working group?

Marcus: I need a coffee.

Jeremy: I know, I know.

So basically now you’ve got two groups working on this one spec. You’ve got the WHATWG which has a very open process, you’ve got the W3C which is generally more closed, although the HTML working group is more open than most W3C things. A lot of things with W3C happen behind closed doors. Actually with the HTML working group now, anybody can join; it’s a little bit convoluted how you join, but anybody can join.

Meanwhile XHTML 2 was still being developed, you know, down in the cellar they’re working on XHTML 2. But everyone knew, or I assume everyone knew, that it was like this kind of joke really – it wasn’t really intended for working web authors to use on the public web. So earlier this year, finally, 2009, W3C announced, “Oh buy the way, we’re not renewing the charter for XHTML 2″, and most of them went, yeah, no surprise there – really it’s been dead for years.

But a lot of people got really confused, “Oh no I have to change from XHTML to HTML now; I have to change all my mark-up back.” No, if you’re writing XHTML 1, that is basically HTML anyway, and HTML 4 and XHTML 1, those doctypes aren’t going anywhere, your documents are still perfectly good, you don’t have to change anything; everything’s absolutely fine. And what also happened was that some of these people, who were sort of traditionally, as I said, hated it when people like me would serve XHTML 1 as HTML, “Oh no the browser’s treated it as HTML”… They started gloating and saying, “Ah, this is great, this proves that the problem is XML and XHTML in particular, and everyone who ever used XHTML was a fool”, more or less… which really bugged, because like I said, Gareth Rushgrove write a great blog post about this. The reason I use XHTML is to make the validator more powerful, it catches those little things. Basically, it’s like a best practices coding style. So in the same way you’ve got things like JSLint that catches JavaScript coding practices, even if your JavaScript is perfectly valid and will execute, this thing will catch little things which aren’t best practices. That’s what I use the validator for when I write XHTML – it catches little things that wouldn’t be caught if I was writing HTML. So even though I think that’s the reason most developers use XHTML, these people who really looked down on XHTML from the start were like, “Hah-hah, we won!” and were gloating now, and that kicked off a whole shit storm. I’m sorry I shouldn’t say that!

Paul: That’s okay.

Marcus: You can say what you like!

Jeremy: Yeah, so that needed clearing up and a bunch of us were like, “Okay, this is the story and this is what it’s like with XHMTL 2. I know it sounds like XHTML 1, but actually they’re different as chalk and cheese.” I wrote a blog post, and that was okay, and this guy Brad turned it into a comic, and then everyone read it. Then they were, “Oh now I get it – cartoon Jeremy says it’s like cheese, so now I understand it.” No seriously, it did make a big difference, it was more accessible…

Marcus: You must have been happy with ham and hamster…

Jeremy: That I did like; that got quoted on Twitter a lot.

Marcus: Fantastic.

Paul: So this leaves you writing what now? Are you still writing XHTML?

Jeremy: Let’s take sites I’ve built already, so my own personal site, adactio.com, that’s XHTML 1, it has been since 2001, I’m not going to change that. Actually I’ve made a vow not to change my mark-up anyway. Because I kind of assume when people redesign their sites, they change their CSS and they change their mark-up, and I think…

Paul: That kind of destroys the whole point of it, yeah.

Jeremy: So whenever I do a redesign, what I actually do is I add sort of a skin on top. So I’ve got a bunch of skins to my site, I kind of made a vow to myself that even if I’m doing a redesign and think it’ll be really useful to change the mark-up here, but that’s just me personally. Actually at work, and on other projects, I do now use HTML 5.

Paul: Right. Now how does that work, because everybody says, “Well, HTML 5 isn’t supported.”

Jeremy: It’s not ready yet.

Paul: No, exactly.

Jeremy: 2022…

Paul: Yeah, yeah – all of that kind of stuff.

Jeremy: Here’s the thing. If you want to write HTML 5, you take whatever doctype you’re using today, XHTML 1, HTML 4, HTML 3.2, and you change that doctype to ‘doctype HTML’, and there you go you’re writing HTML 5.

Paul: Okay!

Jeremy: So most of HTML 5 is HTML 4. The vast, vast majority of it is exactly the same language, and yet even that is really, really ambitious because one of the things they’re doing is they’re going to define error handling for HTML. Every version of HTML before this, 3.2, 4… All of these previous version, they just defined here’s what authors can do, you’ve got this element, you’ve got that element, boom – the end.

They never defined what happens when you do something wrong, or what a browser should do when it encounters mis-nested tags, things like that. So the browsers have had to kind of invent it, and what happens is that most browsers… Talk to a browser maker and they spend fifty percent of their time figuring out how does Internet Explorer handle this error, and recreating that. A huge amount of time is wasted on this. Or, whatever the leading browser maker is today, how does that browser handle errors? We need to copy that and reverse engineer it. The spec doesn’t tell them how to handle errors. So HTML 5, one of the ambitions is to take HTML 4 and define error handling for everything in it. That alone is massive; massively ambitious. And that alone would take a long time.

In addition, there’s new stuff. So you’ve got this web form stuff, you’ve got new types of inputs, user agents will be able to give us, you know, calendars and sliders and all this stuff, really cool. You’ve got some new structural elements, you’ve got some new rich media stuff like audio and video, you’ve got canvas… So that’s on top of the error handling. So, yes HTML 5 has a lot of new stuff that, frankly, you can’t use today, although a lot of it’s quite well supported, obviously not Internet Explorer, but in a lot browsers, you can use stuff like audio and video, and canvas and stuff like that.

You can’t use all of HTML 5 today, that’s true. But we probably don’t use all of HTML 4 today. For example, if you say, “I’m not going to use a mark-up spec if all of it isn’t implemented in the major browser vendor,” which would be like Internet Explorer, you say, “I’m not going to use a mark-up spec unless Internet Explorer fully implements it.” And yet you would have been using HTML 4 for years. Now, Internet Explorer didn’t fully implement HTML 4 until Internet Explorer 8 when they added support for the abbreviation element.

Paul: Right, okay.

Jeremy: Internet Explorer 7, Internet Explorer 6, Internet Explorer 5, didn’t support HTML 4, if you define support as every single thing in the spec. And you’ve been using CSS 2.1 for years. There isn’t a browser out there… Actually Internet Explorer is the first browser to fully support CSS 2.1, although you could quibble on some stuff, and yet we’ve been using it for years. Because if, ideally, you have to wait until something is fully support until you use it, it’s kind of silly, you just support features. You decide this feature is supported enough that I can use it. Enough browsers support video or canvas that I can use it today. So when people say, “I can’t use it because it’s not ready or it’s not support,” that’s too binary; it’s too simplistic a way of looking at it, because all the technologies we use today, CSS, HTML, are partially support in different browsers – that’s just the way it is.

Paul: Let’s talk about the new structural elements that have been added in to HTML 5. So you’ve got header and footer, and these various other things. I mean obviously you can’t use those as is at the moment because the support isn’t wide enough, is that correct or incorrect?

Jeremy: Well, support’s actually pretty wide in a lot of browsers. What a lot of browsers will do… It’s not so much that they’re supporting these elements, it’s just that they allow you to use arbitrary elements. So in Firefox and Safari, I could write a tag called ‘foo’, and in my style sheets I could say ‘foo, display block, colour red’ and it would work. So if you define working, or support as that, then actually yeah in Firefox and Safari and Opera you can use these new elements today.

Internet Explorer doesn’t have that, Internet Explorer doesn’t let you use arbitrary elements, but there’s a little JavaScript hack you can use to make Internet Explorer behave. In fact we’ve been using this for years with the abbreviation element. If I wanted to use abbreviation and style it in Internet Explorer, in JavaScript I would say ‘document.createElement(‘abbr’)', and suddenly I could style it. It doesn’t make any sense, but then again whatever does with Internet Explorer. So we use the same hack to say create all these new elements.

Paul: Okay, so are you using them at the moment?

Jeremy: No. What I’m doing is, I’m trying to get my head around how these structural concepts work, but I’m not ready to make the move to new elements, and I’m not ready to do client side work that relies on JavaScript, which is what I’d be doing if I used this JavaScript hack. So what I do is, I take the concept, I take the names – header, footer, section – and I use them as my class names. So I’ll have div class equals section, div class equals header, div class equals footer, and it’s partly so I can get my head round how these things work together, and also, it allows me to basically have self documenting code in that when I’m handing it off to developers that are back end developers who are building a system, I often give templates – HTML templates. And I would usually have to write out this is how this class works, and I’d have to comment everything and say the class of ‘foobar’ is used for this kind of content. And now I can kind of say, just link to the HTML 5 spec; header is for this, footer is for that, section is for this, and okay I’m using classes not elements, but the definitions…

Paul: Are the same.

Jeremy: Are the same. So there’s benefit for me getting my head round this new stuff and sort of getting a jump up on what we’re going to be using in the future, and it’s a benefit for documentation because it’s a great big spec documenting all this stuff. So I’m using them but not really in day to day work.

Paul: Because there’s some debate, is there not, about these pre-defined elements, you know, things like footer I mean. I was reading Zeldman about, well footer isn’t what you expect it to be. So potentially, as this is still in draft, you might be using footer in what will ultimately end up being the wrong way because they might change the way footer works and then you’re going to be out of sync with things.

Jeremy: Yeah, but it’s by using these things that you get to know these problems, and flag them up and bring them to the working group. In Zeldman’s thing, he said… So Zeldman asked a bunch of us to get together with him in New York about two weeks ago, because basically we’re all working web developers, we’re all interested in HTML 5, but we’re kind of sceptical of it, so like we’d be hearing conflicting things people say, there’s a lot of rumours going round, we don’t know what to believe, let’s all get together in one room and go through the spec.

We spent two days literally just going through the spec, and figured out how it affects us. And we’re not interested in the browser features, and the DOM stuff and the APIs, we’re interested in the structural stuff; we spent most of the time talking about this and the semantic meanings of these new elements, and that’s where we came against these issues. Like, wait a minute, the content model for what they call footer is totally different from what any working web developer would call a footer. So in our element, footer, you can’t put a nav element, and you can’t use headings, you can’t use H1s or H2s. But you ask a working web developer what footer is, and they point you to Flickr, or their blog they have, you know, “Oh a footer’s where I pull in my pictures from Flickr, and I have other navigation, and stuff like that.” So instead you have a flat footer which has kind of got a bit more popular in the last few years. So there’s a clash there in the semantic meaning of footer in English for most working web developers, and the semantic meaning of footer the element, and that’s something that came out of that meeting, we realised okay, this is an issue. That’s one of the things that we flagged up.

And there’s a few things like that, that when you really sit down and look you realise hang on, these two elements sound really, really similar, why are there two of them? So there’s a section and an article… For historical reasons I can see why they’re different, but they’ve actually evolved over time now to converge and get really similar. So we found a bunch of these things as authors we realised there were issues with, and we’re bringing them to the working group, we’re flagging them up, we’re publishing them, we’re blogging about it. And I think the reason this hasn’t really come to light before, is that most of the people on the list, and in IRC and the WHAT Working Group, they’re kind of hard core developers making web apps. These are the people building Google Wave, and building these big, big apps, and they’re not really thinking so much about the semantic meaning of documents. And also, there’s the browser makers, which is good – you want browser makers involved in the spec so that you know this stuff’s going to be implemented…

Paul: Yeah, of course.

Jeremy: As Hicksy keeps saying, you know, if one browser maker says I won’t implement this feature, that feature comes out of the spec, because otherwise the spec is just fiction, and it wants to be practical. And of course, that means the spec won’t be the best possible spec it could be, but it will be the best possible spec it can be and be implemented…

Paul: …Realistically.

Jeremy: Exactly, realistically. So, there hasn’t been enough working web developers involved in the process, in my opinion. There’s a lot of programmers, a lot of browser makers, not enough just, you know, working web developers. So, recently, Zeldman made this effort, let’s all get together. I’d been researching it a lot, and so I was explaining stuff to them, they were telling me about how they felt about this stuff, there was Eric Meyer there who’s got a lot of history with working with specs, and Tantek was there and he knows about how to read these kind of specs. So together we had a really good group of people, and we were able to come to the consensus that we can all… I mean, we disagreed on some stuff, I’d like to have this feature, and I don’t care about that feature, but there was a core set of stuff we all agreed on that was in the spec: this was confusing, that needs to either change, be dropped, stuff like that, and that would be our concerns. And what I what I’ve been encouraging people to do on my blog, which has kind of turned into an HTML 5 blog…

Paul: Yeah it has, I’ve noticed this!

Jeremy: …Is to get you, the kind of people who would read my blog, to get involved in the process, to get involved in the WHAT WG, and I’ve seen it happening, it’s great. I’ve seen web developers going on the IRC channel asking really basic questions like, “I’m confused by this element, how am I supposed to use it?” And then these people who are writing the spec, having to explain in normal words how it’s supposed to work, and then realising hang on this might be a problem, if I can’t explain it well then maybe this element is going to be an issue, and things like footer are obviously a problem; it’s got to change.

Paul: I read some article which seemed very left field, which was basically saying why is the W3C actually defining things like nav, and footer, and article, and section and all the rest of it? Why can’t we make up our own tags? Which kind of almost brings you back to XML I guess.

Jeremy: Yeah, the idea of extensibility. I think it’s probably John Allsopp’s List-A-Part article you talking about.

Paul: It wasn’t actually, but yeah I was aware of that one as well.

Jeremy: So there’s basically two schools of thought. What you need to provide is a mechanism for extensibility that allows anybody to extend it, and this kind of is the W3C idea of RDF and RDFA, that potentially you could encode any data in the universe, it’s infinitely extendable, and any author can define a vocabulary. And then there’s the other school of thought which is you keep the extensibility deliberately limited, and deliberately centralised to a community, and that people have to cooperate to decide what extensibility is to be used. Now that basically comes from the micro-format school of thought, where you don’t try and encode everything in the universe. You look for what’s the most common use cases, what’s the minimum you need to allow people to encode those cases, and you quantify that. You say we’ll create an element for that because eighty percent of people are publishing it, but we’re not going to create an element for something that’s really fringe, and sort of left field.

And that’s the way the HTML 5 group have gone, it’s like we’re going to keep things scarce and controlled, and if we create a new element it’s for a really good reason; we’ve thought about it, and it’s actually going to help web developers. And if anything, I think they might have created too many, not too few, and it’s only a handful, there’s maybe like ten new elements, you know structural elements, and if anything I think so of them could go.

So there’s these two very different schools of thought, and I was reading a blog post from 2006, nothing to do with HTML 5, it was to do with this idea of namespaces in HTML, which is what you get in XML – allows namespaces to allow you to create your vocabulary, you can put anything in there. It said if namespaces had been allowed in HTML then during the browser wars in the late nineties when this browser was inventing this tag, and that browser was inventing that tag, and it was just this mess of stuff, if there was a way to infinitely extend HTML, it would have legitimised that. They would have been okay with that, and we couldn’t have complained. As it was, they had to sit down in the end and sit around the table and hash this stuff out, because we complained and said, “It’s a messed up landscape and you’ve got some browsers supporting some stuff and some browsers support another thing.”

So, because HTML is limited, you have a certain amount of interoperability, and so I’ve come around to that point of view. That actually I can see the case for extending HTML and we have some mechanisms, we have the class attribute, a fairly limited extensibility thing, and I can see why for your own personal needs you might want to extend HTML, but I do actually think there’s a benefit to having a community deciding what’s the best elements, as long as that community is listening to all concerns, and that includes authors. My concern is that the community isn’t getting enough input from working web developers, but I see that changing. So I’m actually pretty reassured.

Paul: Okay, that makes a lot more sense. There’s one other question that I want to ask before we wrap things up, which is this canvas element. There seems to be a lot of excitement about canvas, but very little descriptions about what it does and why it’s exciting that is accessible to a lot of people, and understandable by a lot of people. Can you kind of summarise the canvas?

Jeremy: The canvas is a dynamic image.

Paul: Right.

Jeremy: The image element is static, and the canvas element is dynamic over time, and it can be interactive. So basically I believe you can have interactive graphs, you can have moving things like animation, you can draw on it and define movements… So it can do a lot of stuff that say, you know, Flash 1 could do, all this basic sort of stuff, and it is very exciting that where you would have needed a plug-in, you can now write an element and write some script, and you don’t need a powerful piece of software to write this stuff, you just need a text editor and everything’s cool.

So that’s good, and it’s already implemented in a lot of browsers; Safari, Firefox – they’ve got canvas, and people have already done really exciting things. John Resic has ported the processing language into JavaScript, processing.js, that uses canvas; it’s amazing. You’ve got this ball bouncing, and lines going, and generative art; all this amazing stuff – no plug-in required, it’s all native to the browser. That’s great. So the spec that defines canvas is for interactive or dynamic images. It is not for text. The spec doesn’t ever say… in fact it will forbid you from using text. But because it can, people have started putting text in there and then dynamically…

Paul: Because doesn’t Google Wave use it?

Jeremy: Err, I’m not sure about Google Wave, I haven’t really checked that out…

Paul: Perhaps I’m getting confused…

Jeremy: But Google is certainly experimenting with canvas with some things. But there’re things like… Have you seen Bespin? It’s this Mozilla project which is basically a text editor in your browser, or a code editor in your browser, and it’s all built using canvas. It’s incredibly powerful, it’s really impressive. But, those bits of text that are in canvas are just shapes to the DOM, there is no DOM saying this is a string, this is an element, it’s just there are some vector shapes, because canvas is just vector. So any piece of assistive technology just sees a bunch of… like there’s an image here of some kind. And you can find some fallback to describe the image, this is a chart showing blah blah blah, but if you’re putting a text editor in there, there’s no way they can interact with it, it’s just impossible.

Now, you could say, “But that’s not the point,” and the spec should maybe say you don’t use it for this, but people are going to use it for that because you can. So you say, okay, then the challenge is, if people are going to use it for that, even if they should be using a different technology like SVG or Flash, if people are going to do that how do we make it accessible, and that’s where there’s a lot of work going on. There’s people at Apple working on this, James Craig, who’s a really smart guy, he’s working on this idea of a shadow DOM that’s in canvas, so there is work on that. I personally think it’s such a big issue, it’s such a big thing, it’s such a powerful thing, I think it might benefit from being split off into its own spec.

Paul: Oh, okay.

Jeremy: Which has already happened with some HTML 5 stuff. Things like storage and client-side database, there’s all this powerful stuff. A lot of that ends up being spun off into a separate spec because it’s like it’s getting too unwieldy for the mark-ups.

Paul: Yeah, yeah.

Jeremy: And I kind of have this suspicion that this might be the case with canvas, because otherwise it may hold up the rest of the spec, and we’ve seen this happen with CSS 3. There were certain parts of the modules that were really important to solve for internationalisation reasons like text modules, but because that one part of CSS 3 was hard to solve it held up all this other stuff like multiple background images and border radius, and it held the hold thing back, and I would rather see things split off and worked on separately than be part of a spec and holding it back. So we’ll see; canvas is a big, big issue.

Paul: So you wouldn’t be doing a huge amount yourself in Clear Left, doing huge amount with canvas at the moment?

Jeremy: No, but that’s not the kind of work we do, it doesn’t really require…

Paul: But then the kind of work you do is the kind of work that a lot of the people listening to this will be doing. Rather than big fancy web apps.

Jeremy: Yeah, what we tend to do is documents that have interactive elements to them rather than applications that sometimes have document-like parts, and I think most people working on the web are like that, you know documents… Some things you want to be more interactive. So there’s other things in HTML 5 I would use, but that wouldn’t be one of them.

I’ll use some of the new input types already, because the default behaviour, if you say input type equals foo, the browser doesn’t know what foo is, it will just display a text input. That’s the default fallback behaviour for every browser. So if you try one of these new things like input type equals search, well in Safari will get this nice search field the same way you get in the Google search part of Safari; you get this nice styled thing with a little ‘x’ in the corner. Every other browser just gets a text input, which is what you would have got anyway. And there’s a few things like that I use today, because there’s no harm and because there is that kind of degradation that works well. But it’s the little things I use.

Paul: So, let’s finish things by saying okay, there’s some people that have listened to this and thought, “Yeah, really cool. I want to be doing some of that kind of stuff that you’ve just mentioned.” Where do they go to learn that stuff? And don’t say the spec!

Marcus: Where do normal people go?

Jeremy: The full spec has got loads of stuff for browser makers; we don’t care about that – we’re not browser makers. Michael Smith at W3C has actually spun off… Parse the spec, take out all the stuff for browser makers, and that just leaves the stuff for authors.

Paul: See, now didn’t that… That was like today that came out wasn’t it?

Jeremy: No, no, it’s been out for a while, but I pointed Zeldman to it and he blogged about it.

Paul: Ah, that’s where I read about it. There we go.

Jeremy: Yeah, because we’ve got this basecamp going for our HTML 5 super-friends group, and err…

Paul: You’re a super-friend!

Jeremy: Yeah, with unicorns.

Paul: Okay, that’s good!

Jeremy: And Eric was saying, “We should create a version for the spec that’s just the author’s stuff without the browser stuff,” and I was like actually that exists and it’s over here and then Zeldman linked to it. If you look at Zeldman, he’s linked to it; I’ve linked to it in my blog a few times as well. So there’s that, that’s really useful for just getting the semantics. Going to the IRC channel and the chat there, there’s also sites like html5doctor.com, that’s people like Bruce Lawson, and Remi Sharp, and these people. You have a question, you write to them, they answer the question.

Paul: Brilliant.

Jeremy: They also get questions from people with genuine medical problems, because they give out good Google juice for the word ‘doctor’.

So that’s very useful for web developers who say, “How do I do this? I don’t understand this element.” Yeah, start using it. I would say you’ve basically got three options today. You can just swap out your doctype to ‘doctype html’ and stop there, and just carry on doing what you’re doing – that’s one way. You can swap out your doctype and start using the class names that are taken from these structural elements, that’s what I’m doing, that’s another way. Or you can be hardcore. Swap out your doctype and start actually using these new elements, and use this JavaScript hack for IE.

So you’ve got these three levels of how far you want to go. I mean, on your personal site you could use that third option, push the boat out and go for it. I wouldn’t really do it on a client’s site yet. So you’ve got those things, there’s a validator, html5.validator.nu, and actually the W3C validator uses that, so you can validate HTML 5 today, and that means you can use Aria roles in HTML 5, which you can’t do in HTML 4 or XHTML and validate at the same time. So that’s really, really useful having Aria and HTML together. So you can do it today, keep up with HTML 5 Doctor, hang out in the RSD channel, and if you’re up to it, join the mailing list, although there’s a lot of talk from browsers makers. It goes way over my head.

Paul: Okay, thank you so much Jeremy, that was really useful. I think that has certainly clarified a lot for me, and I’m sure for a lot of people listening too.

Jeremy: I sew clarity.

Paul: Yes, thank you for passing your wisdom on to us.

Jeremy: Any time Paul.

Paul: Okay thanks.

Thanks goes to Gareth James for transcribing this interview.

Back to top

Ryan Carson: advice on building web apps part 3

Hey everyone, I’m Ryan Carson, founder of Carsonified.com, the makers of Think Vitamin, DropSend and the events Future of Web Apps and Future of Web Design.

We’ve both failed and succeeded in building web apps so I’m going to share a few tips that we learned the hard way. Hope you find them useful!

  1. Measure marketing success. As developers and designers, we often shy away from marketing as it’s perceived as dirty. This will absolutely kill your web app. So make sure every time you place an ad, send out an email newsletter or ask someone to link to you, use the Google URL Builder and track the results as a campaign in Google Analytics.
  2. Write out the signup steps for your app. Before you even begin wireframing, spend a day jotting down the rough steps that the user will go through to sign up for an account. This helps you spot potential areas for improving the user experience. Make sure to pay special attention to which form fields should be required and what kind of help text you’ll write to accompany the page.
  3. Give away free-upgrade coupons. When we were running DropSend.com, we placed a simple status message at the top of every page of the app. We changed it weekly to make sure people noticed it and we also made it really noticeable with colour. We regularly offered a coupon code which allowed users to upgrade for free for the month and it worked surprisingly well. I think this is because it removes the risk of trying out the more expensive plan. I’d definitely recommend it.
  4. Create content for your potential users. One of the most powerful ways to do marketing for your product is to offer valuable content to your potential customers. This is expensive and time consuming but it’s highly effective. For example, if you’re building a todo list web app, write a blog that offers a free daily productivity tip or GTD hack. Make sure to offer a weekly newsletter – they’re very effective if they’re based on good content (and not cheesy sales offers).
  5. Get your hosting and deployment nailed down. The thing that will haunt you forever is poor hosting and deployment methods. I’d highly recommend that you make a 1-button deployment system that quickly deploys from a development environment to a staging environment and then to a production server. Make sure the database on the staging environment is identical to production, as this will help you spot bugs. I can’t tell you how many times we’ve had trouble because no one except the developer new how to deploy the site. It needs to be easy, bullet-proof, and reversible if things go wrong.

That’s it – hope everyone found those simple tips useful.

By the way, we’ll be discussing other important web app topics at The Future of Web Apps on Sep 30 – Oct 2nd in London. Speakers include Twitter, Facebook, Mozilla, Gary Vaynerchuk, Kevin Rose of digg, Mike Arrington of TechCrunch and more. Feel free to stop by the site at http://bit.ly/fowa-london-09

Back to top

3 ways to make your site stand out from the crowd

Posted in Design on by Paul Boag

Too many websites look the same as their competition. If you want users to remember your site it needs to stand out from the crowd.

I recently gave a presentation entitled the “10 Harsh Truths About Institutional Websites“. One of the point I made was that all Higher Education websites look the same. Nobody is innovating when it comes to design.

Screen captures of 9 higher education websites

However, the problem is not just limited to HE. Almost every sector has a design style. Why is that?

I believe there are 3 reasons:

  • Laziness – It is easy to follow the crowd blindly. To stand out you must innovate and challenge established practice. That takes effort and a lot of thought.
  • Fear – A fear of getting it wrong. What if you upset your users? What if you misjudge what they will like? Its safer to do what others have done because that has been proven to work.
  • Shortsightedness – Too many organisations only look at their own sector for inspiration. They look at what the competition is doing and copy it.

The problem is that if you follow the competition, you will always be one step behind. At best you will be invisible, at worse you will be a poor shadow of your competitors. To create a site design that stands out from the crowd and resonates with users you must take some risks.

Unfortunately this can be hard to do. We can become blinkered in our thinking, convinced a site should look a certain way and have a particular kind of layout. However, there are plenty of examples of sites that break this mould successfully.

Screenshot of Biola Undergraduate website

How then do we join the ranks of designers and website owners who think differently? I suggest there are three ways:

Constantly seek inspiration

The first step in thinking differently is to expose yourself to different types of design. It is easy to only look at your own site and that of your competition. Broaden your horizons.

A lot of people start with CSS galleries and they certainly have their place. However, in my experience you have to work through a lot of crap to find the truly stunning sites. Instead I subscribe to sites like Smashing Magazine, Webdesigners Depot, and Sitepoint who tend to do a lot of “Top 10 inspirational sites” posts. In these posts the author has done all the hard work for you by weeding out the dross and leaving only the best examples.

If you are looking for a specific design style I would also highly recommend Design Meltdown that organises inspirational web sites by categories such as colour, structure, elements and style.

But why stop there? Why limit your sources of inspiration to other websites? What about photography, architecture or print design. ffffound.com is an excellent source of inspiration. It is a massive collection of imagery from every source imaginable, bookmarked by members who consider it interesting. Another similar site is Emberapp which contains illustrations, logos, icons, typography and much more.

Finally, I would also encourage you to carry a camera and look for inspiration in the world around you. Once you get into the habit it is amazing how much inspiration can be found in everyday things. Even sitting here at my desk there are the colours of my houseplant’s leaves, the book cover next to me and the typography on my energy drink. Inspiration is everywhere if we get in the habit of looking for it.

A photo of the houseplant on my desk

But the problem is not just inspiration. It is also the fact we self censor.

Stop designing websites

Part of the reason we struggle to create original design is because we self censor. Recently I shared my personal inspiration library with the designers at Headscape. The response I got back from one of our designers was fascinating:

A quite beautiful collection of elements none of our clients will have the courage to ever use!

It is certainly true that Headscape work for some very conservative clients. However, there is a danger we give up without trying. It is easy to slip into the same old routine because we have convinced ourselves that nothing more is possible. We have a navigation bar, header, footer and content area in the same old places because we know that will get approved.

Even if we believe a client might approve something more adventurous, it can be hard to change our mindsets. After all, websites are meant to look a certain way… aren’t they?

When I was recently discussing this problem with Mike Kus from Carsonified he came up with a brilliant suggestion:

Next time you brief your designers tell them they are designing a poster rather than a website.

Although I am not sure my designers would appreciate being lied to (and I don’t think Mike was suggesting it seriously), it is a superb idea.

Too often we are constrained by the web. The need to add the same old elements and be confined by the same screen resolution. Letting go of that and designing for a different medium (such as a poster) is a superb way of encouraging creative thinking.

In Mike’s article “Web Design is a Journey” it surprised me how long it took his designs to look like an actual website. Where most of us start with a grid or wireframe, Mike starts with an image or other graphic element. He then shapes those elements into a website. It is almost as if he squeezes his design down into the constraints of a website. He certainly does not self censor.

The Stackoverflow website designed by Mike Kus

Of course, sometimes you will loose the battle and a client will insist on a super conservative design. What then?

Surprise and delight your users

Sometimes its just not appropriate to deviate too much from the norm. Does that mean your website is doomed to blend into the crowd? Not neccessarily.

Even when working on the most conservative of designs there is an opportunity to surprise and delight users in such a way that your site is memorable.

Paul Annett from Clearleft gave a stunning talk at SXSW 09 entitled “Ooo… that’s clever!”. He describes it as follows:

My talk was about design delighters and Easter eggs, about hiding clever little gems in websites which people will find, enjoy, and share with their friends. The benefit of this is an intangible viral marketing effect which will help engage your audience and build hype around your product or service.

Adding these little touches makes your site memorable and can be applied to almost any site, no matter how conservative th

e design. One example Paul gave was of innocent smoothies. Although the packaging of these drinks is certainly nice, they do not necessarily strike you as extraordinary. However, look at the bottom of a carton and you will be greeted with one of a number of amusing messages.

View of the bottom of innocent smoothy carton where you can read the words 'Stop looking at my bottom'

Image Credit: Duncan

Once you have read one of these little messages you are unlikely to forget innocent smoothies.

Paul’s talk is packed with examples like this and I highly recommend watching it.

Just by adding some of these little extras you separate your site from the competition in the minds of your users. You become memorable.

Conclusions

At the recent FOWD Tour, Elliot Jay Stocks commented on how boring most websites are, and how we need to innovate. I totally agree. We need to start exposing ourselves to more inspirational design, approaching the design of websites from a different angle and adding features that delight our users. We should not simply settle for what we know works.

182. North and South

Posted in Classic shows on by Paul Boag

On this week’s show: Molly talks about the future of web standards. Paul explains the differences between print and the web, and Ryan asks if job titles matter.

Play

Podcast: Download (32.0MB)

Download this show.

Launch our podcast player

News

Being a better blogger

These days blogging has become an important tool for most organisations. Although I have written about the Harsh Truths of Corporate Blogging, I have said little about how to actively improve your corporate blog. I therefore want to draw your attention to two excellent articles that were published this week:

  • A Simple Way To Funnel New Traffic & Sales From Buried Blog Archives – One of the problem with blogging is that old posts get buried over time. Because of the way blogs are structured older posts normally receive very little traffic. This article suggests a couple of good solutions. First it recommends editing older posts so they are suitable for republishing via sites like Ezine Articles. Second, it recommends turning your better posts into PDF reports. Strangely this seems to significantly increase their creditability.
  • Do Long Blog Posts Scare Away Readers? – One thing I struggle with is the length of my blog posts. After all copy for the web should be short, right? Well not according to this article. Using movie lengths as an analogy, this post argues that it is not length that matters but ‘tightness’. A good blog post should be exactly the length it needs to be in order to effectively communicate its point. Not a word more.

If you are a blogger, both of these posts are definitely worthy of your attention.

Demystifying the “duplicate content penalty”

So Google have posted an article in the attempt to put peoples mind at easy about duplicate content on their websites, and whether or not Google penalises you for doing so.

The article goes through how Google filters duplicate documents by grouping them together reduce redundancy when searching.

They summarize with:

Having duplicate content can affect your site in a variety of ways; but unless you’ve been duplicating deliberately, it’s unlikely that one of those ways will be a penalty. This means that:

  • You typically don’t need to submit a reconsideration request when you’re cleaning up innocently duplicated content.
  • If you’re a webmaster of beginner-to-intermediate savviness, you probably don’t need to put too much energy into worrying about duplicate content, since most search engines have ways of handling it.
  • You can help your fellow webmasters by not perpetuating the myth of duplicate content penalties! The remedies for duplicate content are entirely within your control.

The general gist of the article is, if you deliberately post duplicate content in an attempt to rank higher on Google they will penalise you, but otherwise you don’t have anything to worry about.

7 common design mistakes that clients love

Although our next post is aimed at web designers I think it is just as important that website owners read it too. Entitled “7 Common Design Mistakes That Clients Love” it puts together a series of carefully constructed arguments tackling the more common design mistakes requested by clients. The list includes:

  • Scrimping on photography
  • Wanting a Flash intro
  • Too much information
  • Using white text on a black background
  • Wanting the logo bigger
  • Ripping off someone else’s logo
  • Wanting a terrible font

The arguments against each of these atrocities are a nice mixture of referencing research, quoting stats and simple effective communication. If you are a designer this article will help you better articulate why these things are wrong. If you are a website owner it may go someway to explaining why your designer gets so grumpy when you suggest any of them!

How To Give A More Exciting Presentation: A Note To Speakers

Our final story is courtesy of Inayaili de León over at the Web Designers Notebook and it’s stemmed from her recent attendance at dConstruct.

Yaili shares her advice to conference speakers on the do’s and don’t of a good presentation.

She goes into these points in detail so read them in detail there, but to summarise her do’s are:

  • Make us Laugh
  • Ask questions that we had never asked ourselves
  • Make controversial remarks
  • Be practical
  • Sprinkle your presentation with interesting facts
  • and use multimedia

She then goes on to explain her don’t and offers a selection of emergency tips to recover a dieing talk such as bashing Micrsoft and loading up a LOLCat (which always get a laugh).

It’s a thorough article offering good advice and she also links to some examples of well presented talks to learn from, so if you’re planning on presenting in the future it’s well worth a read.

Back to top

Interview: Molly Holzschlag on the future of web standards

Being transcribed…Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Listeners feedback:

Moving from print to web

Jake Knight writes: What are 5 things you would want any print graphic designer to know first and foremost about designing for the web?

I think the differences between the web and print causes a lot of confusion, not just among designers but also clients. The problem is that in the early days of the web a lot of work went into making the web behave like print and this led to the table based designs that have proved so problematic since.

In reality, although there are some similarities between print and the web, there are also a lot of differences. Narrowing down the list to just five things is hard. However, here are the issues I believe cause the most confusion especially among clients:

  • Lack of control – When developing a design for print you can guarantee that everybody will have the same approximate experience. Each copy of a design will be identical. However, that is not true of the web. Differences in browser, resolution and countless other factors means that everybody will have a slightly different experience. Accepting that is key to producing a successful website.
  • The scrollbar – Print designs do not come with a scrollbar. Typically a reader of printed design can view the entire design in one glance. Even if they cannot the designer knows exactly the point at which readers will need to turn a page or unfold the design. On the web, designers do not have this luxury. There is no way of knowing what the user can see in a single glance and this has a fundamental influence on the way we design.
  • Lower resolutions – Print designers are mostly used to working at 300-600dpi. On the web we are limited to 72dpi (generally speaking). This seemingly minor difference has profound consequences on the selection of imagery, use of typography and application of logos. An image, font or logo that works beautifully in print can become unreadable on the web because the lower resolution pixelates graphical elements at smaller sizes.
  • Colour – While colour in print is produced by the application of ink on paper, on the web it is produced through projected light. This means that colour will be reproduced differently on screen. Typically this means that dark colours become darker and light colours become lighter. This can often mean that corporate colours need to be adapted to work online. For more information on this read Jason Santa Maria’s excellent article Cheating Color.
  • Interaction – Finally it is important to remember that the web is an interactive medium with more in common with software design than print. Users are required to click links, enter data and interact with applications. It is not the passive experience of reading. Although print and web design share a lot in common, a print designer will have to considerably expand his skill set to accommodate these interactive elements. Learning about user experience design is key to the role of web designer.

Obviously this is only the tip of the iceberg but hopefully it demonstrates just how different the experience of designing for the web is. Something that clients in particular need to be aware of.

The importance of job titles?

Hi Paul and Marcus, I work for a 8+ people studio that develops websites. My job title is “developer” and I do tasks from chopping up a design and turning it into HTML, then adding it into our CMS, and then adding content. I will then help clients by supporting them on their website and helping them add future content.

I am quite happy in my job, but I know that if I ever want to apply for a new job, the job title I have is very important. I am worried that my job title is not specific enough to my skills, do you think I should change it to something that sounds more representative, as “developer” could lead someone to believe I only do small tasks.

I think the question of how important job titles are is one for much debate, however there is an obvious requirement for people in any industry to have an appropriate title that describes what they do, the problem is peoples definitions of what a particular title means can be extremely varied.

To add to the confusion there are often multiple variations of the same title. For example my definition of a Front-End Developer is someone who codes HTML, CSS and javaScript, however this same role is often labeled as:

  • Front-End Engineer
  • Client-Side Developer
  • Client-Side Engineer
  • or simply Developer

The same goes for Back-End Developers i.e. people who code in a server side language such as PHP or Ruby. Again the list of variants can be endless:

  • Back-End Engineer
  • Server-Side Developer
  • Server-Side Engineer
  • or again simply Developer

So if your job title is Developer, which discipline are you or do you do both?

I don’t have a definitive answer to this question, however things certainly become much clearer when you specialise in a certain area, for example:

  • javaScript Developer
  • PHP Developer
  • Front-End Developer

To answer your question though, your job title isn’t as important to potential employers as you may think. When you apply for a new job they will look firstly at your portfolio and whether you can demonstrate the skills that they require. Instead of picking a job title that you think potential employers would like to see, pick one that is actually relevant to what you do and have a good portfolio to back it up.

Back to top

How to Manage Your Inspiration

Posted in Design on by Paul Boag

How do you find your design inspiration? More importantly how do you manage those sources of inspiration?

At Headscape we believe in including our clients throughout the design process. We also don’t like to jump straight into design comps. Instead we prefer to look for elements that can potentially inspire the development of our client’s sites.

The question is, how to manage all of these design elements?

Guide to CSS support in email clients

Posted in News on by Paul Boag

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

We’ve put together this guide to save you the time and frustration of figuring it out for yourself. With 23 different email clients tested, we cover all the popular applications across desktop, web and mobile email.

via Guide to CSS support in email clients – Articles & Tips – Campaign Monitor.

Looks like Campaign Monitor have updated their CSS support guide. Very useful it is too.

181. Interview or death

Posted in Classic shows on by Paul Boag

On this week’s show: how to avoid design by committee, why you shouldn’t bother submitting to Digg and how to specialise in being a generalist.

Play

Podcast: Download (21.3MB)

Download this show.

Launch our podcast player

Housekeeping: .net awards

Boagworld has once again been nominated for the ‘Best Podcast of the Year’ in the .net Awards. In case you did not know the .net Awards celebrate the best in web design and development, and are brought to you by the world’s best-selling magazine for web builders – .net.

The winner of the .net awards is chosen by a panel of judges and a public vote. I would therefore very much appreciate it if you would take the time for vote for our podcast.

Back to top

News

The 7 deadly sins of blogging

I few weeks back I wrote a post entitled “10 Harsh Truths About Corporate Blogging“. The idea was to highlight bad practice in the way many organisations approach blogging. This week sees the release of a similar article entitled “The 7 Deadly Sins of Blogging“. Interestingly even though both articles tackle very similar subjects in a similar way, both of posts raise very different issues.

According to the article on Copy Blogger the 7 deadly sins of blogging are:

  • Selfishness – Focusing on what you want from your readers rather than what you can give them.
  • Sloth – Not being willing to put in the work that is required to run a successful blog.
  • Impatience – Expecting to see instant returns on the time invested in blogging.
  • Lameness – Producing poor quality uninteresting content.
  • Identicality – Copying the blogging styles of others rather than finding your own voice.
  • Irrelevance – Writing about something nobody is interested in.
  • Boorishness – Being that guy who just won’t shut up about his pet subject.
Its a good list and one that really makes you think about the way you approach blogging. However, ultimately I think it all comes down to the authors first point, selfishness. As she puts it – if you want to run a successful blog you need to:
Give. And then tomorrow, you give some more. And the next day, you give more.

UX Design – Myths and consistency

There are two user experience posts that I particularly want to mention this week.

The first deals with the lack of consistency users experience online. The post asks “Should There Be a United Set of Styles For Web Interfaces?” The author argues that operating systems encourage a degree of consistency by providing standard interface elements that can be easily utilised by third party developers. Generally speaking most mac apps use the OS interface elements and the same is true for windows.

The author goes on to propose that CSS 3 provides an opportunity to standardise the rendering of form elements across browsers so that whether you are viewing that element in Firefox or Safari it will look the same.

Although I like the concept it falls down on a number of levels…

  • CSS3 is not supported by IE6 at all.
  • Even in other browsers CSS3 support varies, meaning that the elements wouldn’t be consistent anyway.
  • In my mind using different browsers is like using different operating systems. You tend to only use one at a time and so consistency is not a high priority.
That said consistency is important. However, I think getting consistency across a single site is a more pressing aim, and one that many website fail miserably at.
The second post on user experience is far more practical and frankly useful. Entitled “Top 10 UX Myths” it blasts apart many of the common misconceptions about UX design. My personal favourites are:
  • People don’t change – Just because users didn’t scroll in 1994 doesn’t mean they don’t now!
  • Design to avoid clicks – Sometimes it is better to ask a user to click more than overwhelm them with too many options.
  • People know what they like - You cannot blindly give people what they ask for. Often there is a difference between what they think they want and what they actually like.

If you are a website owner I highly recommend you read this. If you are a UX designer than check it out. It will make you smile!

Typography – Stats, facts and sizing

There continues to be a lot of buzz around web typography this week with 3 posts/sites I would like to quickly mention.

Typographic Design Patterns and Best Practices

This is a Smashing Magazine post that researches 13 web typography questions. It addresses issues such as most frequently used fonts, the average size of body copy and how often links are underlined.

Although it is always interesting to see what others are doing, it is important to remember that just because a lot of people are doing something that doesn’t necessarily mean it is a good idea.

CSS Font-Sizing: a Definitive Guide

This Sitepoint post tries to bring clarity to the confusing world of CSS font sizing. As anybody who has worked with CSS knows, setting font sizes is not as straightforward as it should be. This post lays out the various options and then recommends an approach.

Obviously there are no absolute answer when it comes to this subject. However, this post does recommend some good practice and helps you understand the problems surrounding font sizing.

Typedia

This newly launched site  is essentially Wikipedia for type. This shared encyclopedia for type attempts to classify, categorise and connect fonts.

The site has a powerful search facility that allows you to search for fonts by foundry, typeface, designer and more. It also helps you better understand typography and has growing little community where you can discuss type (among other things).

If you are a typography geek, this is definitely worth checking out.

Volume does not equal success

Are you desperate to get on the homepage of Digg? Do you crave to be number one on Google? Do you monitor your visitor stats and page views continuously? If so, then I recommend you read Gerry McGovern’s latest post “Volume is the wrong way to measure web success .”

Gerry says you are looking in the wrong place if you want to measure the success of your website. He argues that it is not the number of visitors that matter, but whether you are providing users with what they need. In fact he even argues that an obsession with volume can be damaging to a site:

Measuring success based on volume encourages bad practice. The search engine optimization industry is often a prime culprit of such bad practice. A search expert I met once refused to remove out of date and clearly wrong and misleading pages from the site he was involved with because it would reduce search traffic volume.

For too long we have belonged to the Cult of Volume when it comes to measuring whether a website is successful or not. For an increasing number of websites, high volume traffic reflects the website’s failure to help customers quickly complete the tasks they came to complete.

Perhaps it is time to stop looking at volume as a measure of success and look instead to the completion of calls to action. Did users complete your contact form, signup for your newsletter or buy your product. In other words, did your website meet your business objectives and the needs of your users?

Back to top

Feature: Hold stakeholder interviews now or pay later

Committees are the kiss of death to any web project. Give the kiss of life to your dying project with some one-to-one interviews.

Read ‘Hold stakeholder interviews now or pay later’

Back to top

Listeners feedback:

Specialise in being a generalist

Colin writes: I’m a former web design company owner – I worked initially as a freelancer, the business grew quite quickly, I took on staff, and then gave it all up. The reason was because I couldn’t decide what role to focus on and ended up doing the vast majority of the work.

Web design and development seems to be a seemingly endless list of skills – but how do you decide which direction to go down, and how do you stay up on technology?

What if like me, i’m a jack of all trades, but master of none? What can I do to help me decide where to focus my efforts?

There is certainly a big push towards specialising. This is especially true if you are a freelancer looking to stand out from the crowd. However, I do not agree it is always true. It certainly hasn’t been for me.

I was once in a very similar position to Colin. When we started Headscape I was responsible for all the design and development we did. We began to grow by simply taking on more generalists like myself. However, the point came when we started to employ specialists. As the roles started to fragment I felt the need to make a decision. Just like Colin I asked what role I should adopt.

In the end I made the decision to specialise in being a generalist. With so many of the top level designers and developers specialising I saw an opportunity to maintain a broad overview. We had specialists within the company and so there was little need for me to personally specialise. By remaining a generalist I had the opportunity to improve internal communication, identify new areas worth exploring and have enough knowledge to speak intelligently to our clients on most issues.

My level of knowledge in any particular area varies depending on my personal interest. For example, I know only a little about flash development or server side coding. However, I know enough to get by and identify any potential problems.

I understand the need to specialise if you are a freelancer. However, if you are running a small agency who are employed to provide the complete solution to clients, then I think there is a need for you to be a generalist.

Sites like Digg are not worth your time

Mike asks: Should blogmasters submit their posts to digg and stumbleupon, or should we let our users submit them for us?

I don’t think there is a right or wrong answer to this question. However, personally I leave it to users to submit for me. The reason why? – I don’t think social sites like digg or stumbleupon provide much in the way of valuable traffic to my blog. They are simply not worth my time and attention.

It is actually not that easy to drive a lot of traffic to your blog through these sites. Sure, we have all heard about the Digg effect. However, getting highly ranked is hard. It is the submissions of a few prominent Diggers that dominate the homepage. The chances of your post getting picked up are relatively slim unless you happen to post silly videos or breaking news.

Even if your post is fortunate enough to gain a high profile on these site, the quality of traffic is low. The users visiting your site are interested in only one thing – the particular post. They are not interested in who posted it or the site it is hosted on. The chances of them turning into regular readers is almost zero. The chances of them completing a call to action even lower.

In my opinion it is better to take the time you would have spent submitting your post and invest it in making that post really stand out from the crowd. If your content is outstanding it will naturally attract an audience.

Back to top

180. Backend

Posted in Classic shows on by Paul Boag

On this week’s show: The Northeners are joined by the Headscape duo Craig and Dave. We talk about why you should care about .NET MVC and answer your questions about managing your code and friendly URLs.

Play

Podcast: Download (39.7MB)

Download this show

Launch our podcast player

Our most complicated setup to date! Ryan in the studio, Craig and Dave in the barn and Stanton on the phone.

Housekeeping

Vote for our SXSW Panels!

It’s that time of year again and we’re asking our beloved listeners to vote for one or both of our SXSW panels.

Pain Free Design: Getting Client Sign Off

Boagworld Live – Open Mic

Any votes would be greatly appriciated!

News

Expanding your development skills with Creative Tech Projects

This post by Smashing Magazine tries to pursued you into doing something different every once in a while and points out that even if you’re a web developer, your next project doesn’t have to be a website! You can learn a lot by doing something outside your normal comfort zone, and there’s some great examples of different things you could play with, such as:

  • Write your own desktop application, using Air for example
  • Extend Firefox
  • Create interfaces for your favourite gadget, such as your iPhone or Wii
  • Play with Hardware, such as the WiiMote, Arduino kits or Lego Mindstorms

One of the things I love about working in this industry is the sheer amount of cool stuff available for us to play with. Admittedly, it can often be hard to find the time, or even justify spending time playing with cool stuff when client work is stacking up, but who knows, you might find that people out there would pay you good money to build things using the skills you acquire!

5 Advanced Photoshop techniques for web designers

Yes, this is a ‘top 5’ type post, but it’s quite a good one so I thought I’d tell you about it. This article on the Think Vitamin blog gives you a decent rundown of 5 popular visual effects in modern web design, and tells you how to replicate them.

There’s tons of screenshots and explanations of how to make awesome buttons, navigation menus, inset typography, faded shadows and depth. It’s a post to bookmark for those times when you have a spare few minutes to mess about in Photoshop and try new things.

Digg’s move to GIT

This is the first of a two part article detailing how the developers at Digg are making the move from Subversion to Git. I realise that source control doesn’t get discussed much on this show, but it’s something that every designer and developer should be using if they’re not already.

I’m not wanting to start a SVN vs GIT argument here, but I’m very interested in seeing how big established teams work in regards to source control and this is quite a candid account from the Digg team about the scaling issues they experienced as the development team expanded and SVN struggled under the load, and how they’re starting to use GIT to solve some of these problems, highlighting both the good and bad points of the new system.

Everyone will have their own source control preference, but if you’re part of a large team and have source control issues (don’t we all) then give this a read.

Back to top

Feature: Why .NET MVC? (and why should we care?)

Having previously written about the highs and, perhaps more importantly, lows of working as a .NET developer. This article will continue the trip into Microsoft World, only this time it’s to the land of MVC.

Read the Why .NET MVC? (and why should we care?)

Back to top

Listeners Questions

Managing your code

Question from Jamie…

I have recently started developing my own system for building web applications with. I have found that as projects have ticked by i have ended up with a large assortment of code of different versions and functionality. How do the backend development guys at headscape manage this code mountain beyond the project by project SVN style management?

Headscape has a strong design and consultancy background, however the development side of things has also been done internally since
the beginning.  In fact the design and Tech teams are of equivalent size and we have a large number of legacy and currently running projects
at any one time.  Source control and code management is therefore vitally important.

As a development team we rely heavily on three main methods of knowledge transfer over time, projects and team members.  This includes
the standard approach of code commenting, a source control system and an internal wiki for snippets, interesting decisions, rationales,
product roadmaps etc. The wiki, in the context of code, provides a space for longer descriptions and reasoning behind technical design and
implementation approach.

As many of you may be aware a large number of Headscape projects utilise our in-house CMS.  This acts as the base for our common code and
contains multiple projects – A common code repository (the equivalent of our ‘System’ namespace), a CMS class library project and
a base CMS Web project. When a new CMS project comes in we create a new project in source control, with the most recent labelled stable
version of the CMS code as the initial check in.  Changes on this development are then logged only within the context of the project.

Throughout key stages of development and during project washup changes and enhancements that can be generalised from this project will fed
back in to the main project after review with at least one other member of the tech team.  As some projects can be very bespoke we do not
currently utilise branching within our Source Control repository for the purpose of each project.

Friendly URLs

Daniel Farrell writes:

My university has a ridiculous URL naming scheme!

I can see what they are trying to achieve: human readable and logical ordering of pages. But by nesting on such a microscopic scale, they produce the opposite result. The pages are no longer memorable, and not even easy to read because you need a huge screen wide screen to see the whole URL.

Furthermore, because ‘software’ is a service provided by the ICT department is must be nested underneath it. This reflects the management structure of the department not necessarily the way a user thinks! For example, why couldn’t the URL be, /softwareshop/adobe?

What are your thoughts on human readable URLs and how would you tackle the problem of making such a huge site easy to use? Should I have more sympathy for the web team or do they need a good kick up the arse!

There are a number of reasons that large organisations use long and often convoluted URL schemes. One possibility is that different parts of the site could be hosted on different servers and managed by different people. There may be different systems running different sub sections such as a shop which generates its own URL structure under an already long base path.

Firstly, it doesn’t always matter. Unless it’s a URL you want people to remember, the majority of web users don’t really care what ends up in their URL bar once they start navigating a site. It makes no difference to a bookmark and can be shortened easily enough by any number of URL shortening services such as tinyurl or bit.ly.

So when does it matter? It matters when you want users to easily find something that could be tedious to find by navigating a site. A good example is TV or poster adverts where people need to remember the URL for a period of time or a subsite that isn’t linked to from the main site. (administration logins for example)

A good example of a website that manages this well is the BBC site. This is a huge site with many smaller subsites. It’s important for them to advertise concice and memorable URLs so many of their subsites are directly below the site root. One solution could be for the university to setup a series of shortcuts that redirect to the full URL.

Some tips for constructing easy to remember URLs
  • Keep sections concise. “personalcomputersupportandmobileservices” is bad, “ict” is good.
  • Try and use words that are easy to spell.
  • Avoid numbers and hyphens
  • If possible and necessary, create a couple of versions that are equivilent and redirect to the correct version (ie. Wikipedia’s redirection)

Back to top

The iPhone is not easy to use: a new direction for UX Design

Posted in Mobile, User experience on by Paul Boag

If the iPhone is so difficult to use, why is it still regarded as a game changer by both the design and business worlds? Because it does several important things right, but most of all because it’s fun.

Fun is the New Usable

As a user experience designer, I thought my job was to make things not suck. Until recently. As technology has evolved, human behavior has evolved along with it. Since behavior is the basis of user experience design, my job has evolved as well. Now, my job is to make things people love.

via johnnyholland.org
Not sure I agree that the iPhone is difficult to use but there are certainly inconsistancies in the UI. That said, I do entirely agree with the idea that it is our job to make an experience that delights rather than simply ‘not sucking’.

Posted via web from Paul Boag’s Stuff!

179. Affordance

Posted in Classic shows on by Paul Boag

On this week’s show: Ryan and Stanton are back and we are joined by Mr Marcus Lillington! We talk to Dan Rubin about making your interface invisible and answer your questions about working on multiple projects at the same time.

Play

Podcast: Download (30.8MB)

Download this show

Launch our podcast player

News

RTFM

The first post this week is an article on webdesignernotebook.com from Yaili, in which she has a little rant on the fact that we, web designers, like to complain about how little recognition our profession has, how everyone likes to think they can make a website, and how clients don’t respect our work. But when it comes to actually doing something that could make us a bit closer to any other “official” profession, we’re bored and dismiss it. It’s so much funnier to complain about IE6!

Yaili has made a point of reading through the W3C specifications for CSSS2.1 and 3, HTML 4.01 and HTML 5. While most of us claim to be familiar with the specifications, how many of us – hand on heart – can honestly say they’ve fully read all of them?

The W3C specs are the closest thing we have to a manual and anyone who works in this field should have read them at least once, we don’t have to know them by heart or be able to quote from them, but we should be familiar with what they contain and be able to use them as a reference like any other professional book, as Yaili says, “After all, those specs lay the foundation of what we work on every day, so we should at least have an overall knowledge of them and of what they address.”

I know personally, this post has acted as an encouragement to print off the specs and read them again on the commute.

Structural Tags in HTML5

If you’ve been inspired by Yaili’s encouragement to read the HTML5 spec’s, then the next post might be of interest to you also. The HTML5 specification has added quite a few interesting and useful tags for structuring your markup and will replace many of our typical DIV entries from our code.

Of course this is an audio podcast, so I’m not going to start reading code out for you, but this is a nicely detailed article which explains the new tags such as header, footer, nav, article and aside which you can start using today, and includes a couple of tricks to make current browsers treat them as they should by using the CSS display:block attribute as well as a javascript fix for Internet Explorer.

It’s a nice primer for anyone starting to play with HTML5, so give it a read!

Redesigning your own site

And finally we have an article on A List Apart which touches on those times when you have to deal with your most difficult client. Yourself.

Lea Alcantara discusses her experience and thought process of redesigning her personal site. Your personal site has to demonstrate proficiency in the very latest development and trends in the industry while remaining true to the brand which you may have taken years to establish. Cameron Moll’s mantra of “Good designers redesign, great designers realign” features heavily in this thought process.

The article details Lea’s process from start to finish, explaining certain dead ends – like thinking she could jump right into Photoshop and play – to starting with her branding and letting the design evolve from that. She explains how she consulted with some trusted design friends and urged them to provide objective design analysis instead of personal taste.

While the article is focused on a particular site design I think there’s some good tips in here that we can all take away, or at least keep in mind when we decide to work with our most difficult client.

Back to top

 

Interview: Dan Rubin making your interface invisible

Ryan: You did a really good talk this afternoon on “making your interface invisible”.

Dan: Thank You

Ryan: What does that mean then? *Laughter*

Dan: Select all…. delete

Ryan: Hiding the interface from your users

Dan: making you interface invisible, doesn’t mean what it sounds like. Thankfully. It’s about the idea of designing for the experience rather than for the visuals or particular features or anything like that. Making those blend so far into the background that users don’t even notice them. That’s what I mean by making the interfaces invisible.
It’s not a new concept if you do a couple of searches on The Google, you will actually find even A-list apart article back in 2000 covering the same kind of stuff. It just hasn’t seemed to sink in and one of the reasons that I’ve kind of thinking lately is that there just aren’t enough designers and developers talking about it. Usually you here about the concept of it an interface disappearing being talked about user experience (UX folk) designers or usability experts and consultants. A lot of the time designers and developer just don’t listen to people who are the same us, those who don’t do exactly what we do. We do listen to them but we just don’t listen in the same way. So if we only hear the same kind of advice from people who aren’t doing what we are doing it’s easier for us to dismiss it. I think it’s more important for people who do the actual design and do the actual development to be talking about it not just thinking about it, but doing it.

Ryan: You mentioned in your talk your talk was targets at not just people who design interfaces but (I can’t remember how you put it), not just designers who push pixels around who do the actual visual design. I’ve always associated interface design with that.

Dan: The thing that I’ve learned from clients (first of all) and then then I realised it applies to all of us. Is that when people hear the word “design” they think that it’s something visual and it’s not. The concept of design is much more basic, its creative problem solving. I mean it can be called a lot of things, but design isn’t just a purely visual task and you can design thing without any visual element. People who design applications aren’t designing the interface to the application; they are designing the interaction, that’s why we have so many. The answer to that the industry has come up with is to come up with a lot of different terms that your experience designer, that your interaction designer. The reason we have to come up with these terms is that people hear design on its own and they think visual. But that’s a visual designer, a graphic designer an interface designer. If were just talking about the process of design, it’s something that everybody is a part of. Whether you’re a developer, an information architect, an interface designer or you’re an amateur, it really doesn’t matter. Your part of the design process. It’s a much bigger concept, that’s why when talking about the idea of designing for the experience, trying to design the experience itself rather than specific parts of it and making sure those parts blend into the background. People just come away having a wonderful experience. That’s why everybody in the team on a given project has to be a member of the design process, otherwise that won’t happen.

Ryan: In your talk you mentioned mimicking physical interfaces and you were kind of talking about trying translate what we do in the real world into your interfaces and those kind of experiences, it’s that right?

Dan: yeh, well there is this concept that we all know, we all talk about look and feel. That’s a common phrase that’s used a lot. But a more specific concept and term that I recently discovered called “affordance” and it’s been around for ages. It’s not new to people who are cognitive psychologists or who are in product design and it really we do the same thing with interface design. Any that’s designed for the screen, especially if it’s designed to be used like applications are. What we are really doing is designing products and software designers again know about this, but for some reason in the web world we’ve got a lot of people who haven’t come up through the traditional lines of education, which includes a lot of that psychology background. Which is fine as long as we are open to learning this stuff and realising we should know it. It all exists and has been around for ages. It’s basically the principal that allows us to interact with objects and interfaces in the real world, outside of the screen, and understanding that we use the size the shape the texture and constancy of things that we interact with in the real world to know how to interact with them before we touch them. And that’s the concept of affordance. That’s what it’s about those aspects of an elements design and construction or what not, that us to know exactly what to do with it and how we can interact with it. There are a lot of great examples of this in Donald Normans book the design of everyday things, which is a product design book essentials but so many of the principals apply to what we do. Not just interface design but again the design of applications and design of interaction. People are using what we build and that’s no different to people using a product that you’ve designed and engineered. We are designing and engineering what ends up being a total experience, it’s not something we can hold in our hands like a physical product but it’s a virtual product.

Ryan: You mentioned that you shouldn’t have to describe your interfaces; they should be intuitive to use.

Dan: I’m very against instructions in interface design.

Ryan: this leads me catching you taking pictures in the men’s toilets earlier.

Dan: Yes, this could be seen as compromising. But …erm… (Ryan has a little giggle fit) I do that all the time.
What I’ve found once is that now that I’ve started looking outward because I didn’t start as a designer in interface design. I started as a graphic designer and doing print. And so I’m always looking at things in the real world for inspiration. For whatever reason in the past year or so I’ve started actually realising how many direct parallels, 1 to 1 parallels there are in the real world with these interfaces that are all around us, they are just 3 dimensional. We just interact with them physically instead of through the intermediary of the mouse or the track-pad and the keyboard. And really they are not that different and so the examples in the restrooms, they are full of them for some reason whether its public restrooms or private stall in a hotel where something clearly hasn’t been designed to be intuitive and thus it needs printed instruction. It doesn’t mean instructions are bad, there are something’s that are so complex that they can’t be simplified beyond a certain point, so they need some sort of instructional text. But far too often we use instructions as an easy out, where we design something that really should be more intuitive, but instead of going back and redesigning it we put a little help icon next to it (or a little bit of help text when someone hovers over it). Or we will just put up a help page, before someone begins a task, and we expect people to read this stuff. The fact is people notice it’s there, they don’t always necessarily read it but they know it’s there and so it’s adding visual clutter that is probably not necessary. If you redesigned that interaction you could get rid of the need for instruction, you make intuitive there is no need for explanation. I think it’s a good marker in the design process that if you find an element of your interfaces requires instructions then you need to redesign it and keep refining and redesigning it. It may not be a refinement it maybe redesigning it from scratch but if you’re always on the lookout for that, like “Is this intuitive? Does this work without someone explaining how it works?” if you keep on doing that you won’t dig yourself into a hole.

Ryan: sorry I’m just chuckling to myself about your toilet reference. Realising that the last person I interview was Elliot J Stocks and I began that interview with “Hi Elliot the last time I saw you were outside a men’s toilet” (fits of laughter) I’m going to be getting myself a reputation.

Dan: it used to be the water cooler and now apparently it’s the restroom.

Ryan: we have to clear up the reason the men’s toilet reference was because you were taking a picture of a diagram of the showing taps and a description.

Dan: the taps that we are all familiar with now that are motion sensitive that don’t have taps anymore to turn them on and off, you just put your hand under it. And that design is not new it’s been around, I’ve never seen one with instructions because it is intuitive. They haven’t broken this one the one in the restroom here just works but even though I knew how to use it, the fact that I saw that descriptive image and text next to it. And its next to every single sink, it was a distraction. So where I would have been able to just go and put my hands under it, for a split second I was distracted by oh what’s this instruction. It made me think that it was something that I didn’t know how to use and that’s where instructions can be bad as well. Maybe you’ve added it in because you mean well, not because you need the instructions but you think that it will help the user by having them there. That that extra bit of information never hurts and that’s actually the wrong thing to do. It has the opposite effect, it adds clutter. If something is intuitive then you’ve spent the time designing it well that people don’t need instructions, by adding them you are actually making it harder to interact with.

Ryan: its weird (repeated… 3 times?) weird occurrence isn’t it. You also mentioned looking at desktop application design and translating that to the web, I found that really interesting. Can you talk about that a little bit?

Dan: yeh, there is a lot we can learn about interface design from the desktop. We can’t do everything on the web and even with things like adobe air and flex we can’t do everything we can do we can when building desktop applications. The thing is that basic interface conventions have been around a lot longer than any of our interface conventions, that we tend to think of being created on the web. The fact is that they haven’t there are very few things that are web specific. One of the things being the silly little Mickey mouse hand icon that we mouse over a link, that’s one of the main examples that I gave. In the desktop we have a much more precise pointer mouse or the default mouse pointer rather (the arrow) whether you’re on a Mac windows or Linux it doesn’t matter. It’s consistent, it has a very specific point, you know at the very tip of that there is one pixel that we use to interact with whatever we are clicking on. It’s much easier to use and target something accurately. Whereas the Mickey Mouse hand is more vague, there isn’t a single point that is clearly defined in the icon and on top of that it only appear once you’ve already began your interaction with something. Developers and designers we tend to work with the web and applications very differently than most users. We’ll mouse over things because we want to see whatever hover effects there are, we appreciate maybe the idea of discoverability in an interface more than the average user. Whereas a regular user (if I can make such a general statement) will look at an interface and without moving their mouse around, they will decide what they want to interact with before they then go and interact with it. So if the only way of knowing something can be clicked on is mousing over it and seeing that hand icon appear it’s not intuitive. Something can easily be missed and so what I suggest is to take a cue from the desktop and only use that hand icon for what it was originally designed and that’s hypertext links. So if you’ve got a link that you’ve underline in your text on a webpage or in a web app, as long it’s an underlined text link in the body of text use it, leave it as the default. Everywhere else if you use that default mouse pointer it’s much more like using a desktop app and it’s much more precise and it forces you to design something that looks like you can interact with it before the mouse ever gets near it.

Ryan: do you think people are just possibly used to the mouse cursor changing to the pointer, and if you took that away, that could possibly have a detrimental effect rather than a positive effect?

Dan: I don’t think so, I think we are as the creators of the web. But based on the fact that I still see some users trying to double click things on the web for instance, that is a connection that none of us on the web “we don’t do that”, and that in some instances that we should. There are some instances through JavaScript where we can do that, basically if a convention exists we should try and use it because it makes for more intuitive experience. So if we have an interface in a web app that require folders for instance, and that are folders that are more like on the desktop rather than a list in a sidebar, it makes sense that we if it was a desktop app that we double click it. We wouldn’t just do a single click, so let’s make that web app respond with a double click because that’s what people tend to expect. The mouse point, that Mickey Mouse hand isn’t something people expect, because it doesn’t happen until they have already made a decision. Maybe they are used to it appearing but it doesn’t affect their decision making process and because of that if you eliminate it what you will find is people won’t notice it’s gone. You will be designing thing people know they can click on and all they are interested in is mousing toward it and clicking on it. If it looks clickable they won’t expect that cursor to change as much, otherwise people would not be able to switch from using a web browser to using a regular desktop app because that hand never appears. If they were reliant on that they wouldn’t be able to use the web for an hour and then use a regular menu-ed app, they would be confused about how the cursor wasn’t changing but that’s not how people work.

Ryan: I think as well how many times have you seen people where they look at a file structure and expect to be able to right click on a folder and have all the options that you normally have. And just because that’s they are familiar with.

Dan: exactly and that’s what I talk about learning from the desktop, that’s the kind of thing that I’m talking about. The desktop has been around and creating these conventions for a lot longer than the web has. Users have been using desktop apps longer than they have the web, maybe you can find younger users who are coming to the web first and barely using desktop apps, it doesn’t mean they don’t use their operating system, they do. They use their web browser too. Those are the first thing they interact with when they start up the computer. Until we get to the point where (and I hope this point doesn’t come) if we had a device that was only a web device and had no other interface than the web then maybe you could make an n argument for it. But I think that would be a bad thing, I would rather see the web and the desktop come together as far as interface conventions and how we work with them in applications. Rather than being web applications, I would rather see them just being applications and when you use them you don’t think about if you’re using something that’s running in a web browser or that’s communicating with a remote server rather than your hard drive. You’re just using an application to do a task, there shouldn’t be a distinction and I don’t think that users have as much of that distinction that we do as developers. We like to think that there is a huge difference between a web app and a desktop app, but the for users it’s likely they don’t think of it in those terms. This is where I complete this task they don’t think that Gmail a web app it’s not a necessarily a web email app it’s their email. It’s their inbox, that’s how they think of it and we have to understand that’s how users perceive what we do. It’s a very very different way to look it.

Ryan: Especially as the barriers are disappearing, things like adobe air for tweet deck and emailing to outlook and mail. And the walls are just fading away.

Dan: Which is a good thing, as those walls fade away we need to as practitioners on the web we need to take as many cues as possible from the desktop and help make that transition more seamless.

Ryan: you mentioned a few resources in your talk, and I bet you can’t remember them…

Dan: Actually I can. I remember…
Jared (I would remember him anyway) – he has uie.com has excellent resources about all sorts of things about usability and that’s ultimately …that’s what this is all about usability. The article I refer to at the end of the talk of Jared’s was one he published the exact same day that I came up with the description for the idea of this talk that I gave today. So it was an odd moment and it’s about the exact same thing that this talk was. Keeping your interface invisible.

Ryan: and your talk previously

Dan: well yes we have been doing work with Jared, we have been very lucky to do a couple of workshops with him. It’s always fun to share the stage with him; it’s even fun to chat with him over dinner because you always learn something. You always come away with a smile on your face even if all you learned was how to laugh and enjoy his magic tricks with the card deck. It’s always enjoyable, so hes a great resource, his site is great resource. And UIE as a company is great resource if you’re looking for information about user testing, usability it’s the place to go. And the article is very recent so look on his site and you will see it on the list of articles a specific lot about invisible interface design and the experience.
I also reference Steve crouges book don’t make me think, which is awesome, excellent, funny, good, and thin. All the things a book should be. Educational, easy to read and short.

Ryan: plane flights worth it isn’t it

Dan: exactly yes, if you don’t have it you will get it and read it and find yourself going back to it again and again and dog ear it and mark it up like crazy and you share it around and sometimes don’t get it back.
And the other book by Donald Norman, the design of everyday things. It’s really a product design book but it’s useful for anyone who deals with designs that are meant to be used by someone else.

Ryan: have you seen thedieline.com product design website.

Dan: no I haven’t

Ryan: it may have been Elliot J Stocks last time he was on I believe it’s just the thedieline.com And it’s looking at product design. They release a series of particular products like an aerosol can or packaging for a toy and look at all different packaging. It’s really interesting.

Dan: I will have to look it up.

Ryan: it’s a really good site

Dan: I eat that stuff up because the more I look outside of the web the more I find that everything that we are doing, that we feel like we are discovering for the first time has already been done. A lot of it has already been done, especially the basic concepts of product design or we talk about information architecture all the time, but we didn’t invent the term. It’s been around for decades and possibly even decades before the web was around. And it comes from architecture and way finding enviromatnetor graphic design, these are concepts that people have been thinking about for a lot longer than we’ve been thinking about them. Possibly for a lot longer than some of us have been alive. I think it puts what we do into perspective; first of all there is a wealth of information and knowledge out there that’s been proven which can help convince us and our clients. If we are going to someone and we are explaining the idea of information architecture to them and we’re not just explaining it as something new in particular for the web. This thing has been around since before the web was even thought of that making it a whole lot easier to gain credibility with clients. It’s not just information architecture it’s so many of these basic principles of interaction, they are all basic psychological principles of human interaction really.

Ryan: what was that word you’ve been using all day again?

Dan: affordance – look it up its good stuff.

Ryan: ok Dan, well thank you very much for taking the time to interview you.

Dan: thanks for letting me ramble on

Ryan: it’s been a pleasure to see you again

Dan: always. Thank you

Much thanks goes to Andy Kinsey for transcribing this interview.

Back to top

 

Listeners Questions

Stories of our failures

Dinu writes:

Looking from afar, established agencies like yours seem to be almost perfect. However, I’m sure you’ve had to deal with missed deadlines, over-booking, etc. I would like to hear about some of these #fail stories (just to get a “you are not alone” feeling for the rest of us), and also to know how you managed to overcome these common pitfalls.
Hope this question gets a chance of being aired.

Thanks and stay awesome….

Transcript coming soon…

Working on multiple projects

Emil Sundberg writes:

Hi,
I’m running a small web agency and I just found your podcast. Great show!

We’re a small team, 4 people, doing web development for clients and use Basecamp/Backpack/Highrise/Campfire (yes we’re 37signals addicts) and I think it would be interesting to hear you talk about how you work with your team in the big picture, not an individual project. How do you plan multiple projects with a limited staff? Who’s deciding what’s most important and what should be done next. Do you use and planning tools or an Excel/Whiteboard?

Transcript coming soon…

Back to top

 

178. Bad Blogging

Posted in Classic shows on by Paul Boag

On this week’s show: We look at the harsh truths of corporate blogging, ask how luxury products can be sold online and discuss whether it is the role of a web designer to challenge a client’s business model.

Play

Podcast: Download (21.9MB)

Download this show.

Launch our podcast player

News

The Do’s and Don’ts of Dark Design

“Users will spend considerably less time viewing a website with a dark background than one with a light background” – When you hear statements like that you may dismiss the idea of using a dark design. However in reality, I believe there are a place for dark designs. Dark designs can look elegant and extremely striking. And although not always appropriate, there are times when they are the right solution for a site.

Screen shot from Trozo Gallery

The question therefore arises – how do you get a dark design right? How do you avoid dwell time plummeting? The answer lies in a post from Web Designer Depot entitled “The Do’s and Don’ts of Dark Design.”

The post identifies several techniques for ensuring that a dark site is both readable and appealing. These include:

  • Including more white space (or should I say dark space)
  • Ensuring text has ample kerning and leading
  • Getting the text contrast right
  • Choosing the right fonts
  • Using minimal colour schemes

The post also asks when a dark design is appropriate. The conclusion – if you require your site to appear elegant or creative. The author then goes on to show some stunning examples of both.

If you are considering using a dark design or do so already, this article is definitely worth a read.

The Content Conundrum

Sometimes I feel like a stuck record. On last week’s show I talked about Art Direction (again!) and I have also written about the importance of copy-writing many times before. This week I want to highlight a post from Boxes and Arrows entitled “The Content Conundrum.”

In some ways this article feels like a rehash of many previous posts and repeats the same old mantra:

  • Include copy editors from the beginning of a projects life cycle.
  • Do not use dummy Latin text.
  • Work closely with content providers.
  • Start treating content as important.
However, there are a couple of ways this post really stands out from the crowd.
The first is that it shows a brilliant example of where things can go wrong. It compares a signed off design comp with what was actually built. The difference is striking and one that will resonate with any designer. The amount of copy has doubled and the usability breaks down as a result.
A comparison between an approved page design and the final page live on the website
However, the most striking thing about this post is that instead of simply moaning about the state of art direction, it actually proposes some solutions that can be practically implimented by any designer. These include:
  • Look for ways to remove unnecessary content.
  • Endeavour to use information graphics and visualisations instead of copy.
  • Write some content yourself even if it isn’t perfect.
  • Seek ways to collaborate with content providers.
  • Use real content (even if it is not the final content) in visual mock-ups.

This article recognises that we are facing big challenges but instead of offering big solutions that cannot be practically implemented it suggests little changes that all designers can make to improve things.

So You’re Thinking About Becoming a Designer

I know a lot of those listening to this show aspire to be designers. If that is you check out “So you’re thinking about becoming a designer” that catalogues the responses of a number of designers, when asked to complete the following statement:

So you’re thinking about becoming a designer? If I could tell you only one thing about going into the field, my advice would be…

The answers really resonated with me and I would wholeheartedly agree with everything said in this post. They basically fall into three categories…

  • Focus on empathy and understanding problems
  • Embrace the unfamiliar to innovate
  • Be passionate

Each category is accompanied by some choice quotes and a short video from the person being quoted. My favourite quote is by Jennifer Bove who says:

Being empathetic helps designers create things that move people.

I think empathising with users is by far the most important skill any designer should have. Without it they may create something very pretty but it will serve no meaningful purpose.

Adobe AIR Apps for Designers

Our final news item in this very designer centric section is “18 Adobe AIR Apps for Designers.” As the name suggests this Sitepoint post lists 18 AIR applications that maybe useful when designing a site.

Unsurprisingly the list is dominated by tools to help with colour selection. From Kuler to ColourLovers it would appear every colour site has to have an AIR app.

Screen capture of Adobe Kuler

However, that is not the end of the list. There are also lots of other tools including:

  • Measuring tools that allow you to measure on screen elements
  • Flex tools
  • Vector editing programs
  • Image resizers
  • Image editors
  • Font tools
  • Icon generators
  • Screen capture tools

Its a great list and it is amazing to see what can be done with Adobe AIR.

Back to top

Feature: 10 Harsh Truths of Corporate Blogging

Every company in western civilization seems to have a blog these days. But are they worth it, and why are so many terrible?

Read the 10 Harsh Truths of Corporate Blogging

Back to top

Listeners feedback:

Business model advice

Ashley Hart writes:

As a web designer you come across a lot of start up companies, sometimes you can see that by altering their concept slightly they might be more successful. Is it your place to do so? would it help? or just annoy them?

Yes! Absolutely! We should be offering advice about business strategy. Clients are paying us for our knowledge of the web, not just our skills in Photoshop. That means we need to tell them if we think their business plan needs tweaking to work online.

It is also a great way of differentiating yourself during the pitch process. Clients tend to warm towards suppliers who are full of ideas and willing to work with them rather than just providing exactly what they ask for. In fact at Headscape we like to refer to ourselves as partners rather than suppliers. This gives extra value to our clients.

However, it is important to draw a line. Definitely offer advice, but ultimately it is down to the client to decide whether to accept that advice or not. Always remember that as the web designer you might not know all the fact. There can often be good reasons why a client chooses to ignore your advice and do things differently. And even if there isn’t its their business at the end of the day.

Does ecommerce work for luxury goods

Bruno writes:

Luxury brands reluctantly build online shops and are quite shy about investing in eCommerce since there don’t see any ROI. What more should they do to make real income from the internet?

The answer to this question very much depends on the product. For example, I maybe reluctant to buy a new bed online because I wouldn’t have been able to try it. However, I would happily buy a new macbook.

But it isn’t just about the product. Its also about the purchaser. Although I would happily buy a macbook online I know that my dad (who is about to buy his first) would not.

I think ultimately it is about risk. There is a higher risk buying a luxury product online because it comes with a higher price tag. There is more to lose if things go wrong. Equally, if you are missing key information about the product (like the comfort of a bed or the differences between a mac and a PC) then the risk is also higher.

Therefore selling luxury goods online is about two things – removing real risk and reassuring users who perceive false risk.

Removing real risk is relatively easy. Money back guarentees and detailed information will often do the trick. Making returns easy also makes a huge difference.

Reassuring users who perceive a false risk is trickier. Ultimately that is where the human touch comes in. Often with luxury goods it is neccessary to backup the online transaction process with human customer service. A 24 hour telephone help line is important as is email support and even live chat. Basically people need to be able to speak to a real human being to reassure themselves and get answers to their questions.

So, selling luxury goods online is not impossible. You just need to work that little bit harder.

Back to top

University course finders suck

Posted in User experience on by Paul Boag

I see a lot of University websites and the one area that consistently fails to deliver is the course finder.

Higher education is one of the biggest sectors Headscape works in. I have been involved in producing user interfaces for many of HE websites and have reviewed many more. It is a complex sector with significant challenges. However if I could address just one, it would be the inadequate course finders on most Higher Education websites.

Why the course finder matters

Let me start by defining what the course finder is. A course finder on a University website is the mechanism by which prospective students selects a course.

Think about that for a minute. A course is the primary ‘product’ that a University ‘sells’. Without courses there would be no students. Without students there would be no money and therefore no University.

Yet judging by the investment made in most University course finders, it would appear that many institutions fail to grasp this fact.

Sure, the course finder isn’t everything. Traditionally many prospective students will order the printed prospectus. However, this is changing. Increasingly prospective students are turning to the web as their primary source of information. Also there is a significant cost saving to be made by moving away from the printed prospectus.

You could also argue that prospective students use a lot of other criteria when selecting an institution. This is true, but these days students are largely funding their own education. As a result they behave more like traditional consumers where the product matters more than additional ‘benefits’.

However you look at it, the course finder is the single most important feature on most University websites.

With the course finder so obviously a key component it is hard to believe that it could be failing. However, it is.

Where the course finder fails

I am aware that a title like “University course finders suck” is a strong accusation, even if written somewhat tongue in cheek. However, I do believe there are some significant problems that need addressing. These fall into three areas:

  • The page mentality
  • The broadcast mentality
  • The copy and paste mentality

Let me explain those rather cryptic descriptions.

The page mentality

Users are increasingly expecting web applications to behave like desktop software, rather than traditional web pages. Unfortunately most course finders I encounter feel like they were built in 1999. While other web applications make use of technologies like Flash and AJAX to provide a faster and more interactive user experience, course finders are typically slow and page based.

Example Course Finder Page

The user is forced to navigate a series of link intensive and text heavy pages, before finding information on a single course. There is no ability to compare courses, filter results or receive course suggestions. Instead the course finder is treated like any other page of textual content on the site.

The broadcast mentality

The current crop of prospective under graduates are a generation that has grown up with social networks and value peer to peer recommendation over top down advertising. They do not trust information supplied by institutions and companies, preferring instead the recommendations of their peers. They are used to websites that facilitate this community recommendation model such as Amazon, Facebook or iTunes.

Screen capture of the rating functionality in iTunes

Unfortunately most institutions actively discourage peer to peer recommendation. Marketing departments fear what would happen if they lost control of the message and academics shiver at the prospect of having their courses rated by students. Instead they continue using a broadcast model where the content is controlled centrally and prospective students have no sense of how reliable the information is.

The copy and paste mentality

The problem is not just confined to the reliability of the course information provided. It is also to do with the quality.

In my experience much of the information about an individual course is lifted directly from the printed prospectus. In turn, that copy has been provided by individual faculties, schools or course leaders.

In some cases the original copy received has been checked for spelling, grammar and inaccuracy. Rarely is it edited to add personality and ensure consistent tone. However, even if the prospectus copy is beautifully crafted and expertly written, that does not mean it can be copied to the web.

It is not enough to lift copy from the prospectus and paste it online. The web is a very different medium and needs to be treated appropriately. Copy that maybe entirely appropriate offline can come across as cold and impersonal online. In addition, users read web copy differently to print. There is a need to aid scannability and condense text, to make it easier to digest.

Flickr community guidelines

In short most course finders feel uninspiring and out of date. While other sites are creating copy full of personality, empowering users to provide feedback and creating a desktop like experience, course finders feel stuck in the past. Why then is such an essential tool being neglected?

Why the problem exists

As with any large organisation the blame does not lay with one individual. In fact if you are reading this post, you are probably already aware of the problems I am outlining. The problem lies not with individuals but with the culture of the institution itself.

A large part of the problem is one of inertia. Although most institutions have tweaked their course finders to work with a new technology or to accommodate a new design, nobody has ever been given the job of addressing it properly. That is largely because nobody sees it as their responsibility. Addressing something as important as the course finder needs cooperation across departments and somebody with the authority to push changes through.

Of course Inertia is not the only problem. Higher Education institutions also have a responsibility to make their websites accessible. Highly interactive applications that make use of Javascript, AJAX and Flash are often perceived as inaccessible and with good reason. If you look at the majority of high profile web applications they are incredibly inaccessible.

However, the biggest boundary to modernising the University course finder is without a doubt time and money. Internal web teams are almost always overstretched with their time spent updating content and dealing with support queries. Rarely do they have the opportunity to think strategically, let alone undertake a rebuild of this scale. Their focus is on triage, not long term health.

Now as somebody who runs a web design company that specialises in Higher Education, you might expect me to suggest outsourcing. However, that is easier said than done. Demonstrating a need to finance a rebuild of an application that appears to be working adequately can be hard. Most senior managers will not grasp the benefits of upgrading the course finder.

Is this article therefore pointless? Am I simply pointing out a problem that cannot be fixed? I certainly hope not. I believe that with the right approach it is possible to push through change.

How to fix the problem

Lets begin by dispelling the accessibility misconception. Just because a lot of web applications are inaccessible, does not mean they have to be. The key is to build the application to work as a traditional page based site first. Once that has been done, Javascript can be added to intercept links and cause the application to behave differently. This article is not the place to explain the technical details of such a technique (known has HIJAX). Sufficed to say it makes Javascript driven web applications considerably more accessible, even with Javascript disabled. There are still some problems for Screen Reader users, however it is even possible to overcome these.

The real challenge to overcome are not accessibility but inertia and investment. How do you convince management to invest in upgrading the course finder?

There are two keys to success – Show and Tell.

One problem you face is managements inability to picture what an improved course finder would look like. Unlike us they do not necessarily use the web on a regular basis. It is therefore important that they can visualise the possibilities.

One option is to build a prototype. This would be the preferred approach because it best represents the final product. However, as we have already said internal web teams are overstretched. It maybe that the work can be completed out of hours. However I recognise this is not always possible or fair! Another possibility is to mockup some designs and wireframes that demonstrate how a revised course finder might work. Although not as good as a prototype, if accompanied with examples of working web applications, they can often be adequate.

Although a demonstration will prove impressive, it may still not convince. Management may not grasp the ramifications of what they are being shown. It is therefore necessary to explain the benefits so that investment can be justified.

Fortunately, when it comes to upgrading the course finder this argument is extremely compelling.

An effective, dynamic course finder is a powerful tool in differentiating yourself from the competition. It gives users the perception that your institution is progressive, relevant and dynamic. However more importantly, if it includes peer to peer recommendation, it also creates the perception that you are open and honest. Even negative comments have a positive effect because they adds credibility to the positive comments and to you as an organisation. Users can trust what is being said by an organisation that does not censor negative criticism even on its own site.

Social tools also create a greater sense of engagement with prospective students. Establishing a relationship with prospective students is a key component in encouraging them to attend your institution.

However, most importantly an improved course finder will be easier to use. This will enable more students to find the right course for them. Many students suffer from choice paralysis, overwhelmed with the number of different courses and the options open to them. A well built course finder will be able to guide them through that process and connect more ‘customers’ with the right ‘product’ for them.

Of course in reality management may not be so easily convinced. Fortunately that is where statistics come to the rescue. Monitor dropout rates from your course finder. Add a poll to it. You may even want to test improvements to the system using A/B testing. All these approaches are more weapons in your arsenal.

Conclusion

It is important to stress that I am not proposing changes to the course finder simply to ‘stay current’. This is about creating a more effective business tool. A tool that can facilitate helping potential students find the right course for them. Making this connection is almost certainly the most important role of a university website and yet in most institutions it is a wasted opportunity.

177. Back in business

Posted in Classic shows on by Paul Boag

On this week’s show: Paul and Marcus talk to Brett Welch about the business of web design, and Paul chats with Ryan Taylor about creating a buzz.

Play

Podcast: Download (33.0MB)

Download this show.

Launch our podcast player

Twitter post: Decided I like the boagworld podcast much more when @stanton and @ryanhavoc host it. Odd.

Oh right, I see! I’ll get my coat!

Back to top

News

The web font showdown

There has been a lot of exciting developments in the world of embeddable web fonts. It doesn’t look like it will be long before having custom fonts on our websites will be a reality.

We already have the likes of Cufon, which appears to be a huge improvement over the flash based sIFR technique. We also have Jeff Veen’s Typekit coming soon. This promises to give us access to a large number of fonts using nothing more than CSS font-face and some Javascript.

However, this week has also seen clearleft’s announcement of Font Deck, a direct competitor to Typekit. The rumour is that it will differ from Typekit because it will not rely on Javascript. Exactly how this will work is currently unclear. There is also a possibility it will use the same kind of caching approach Google Code offer for Javascript libraries. If it does this will significantly improve the perceived download speeds of fonts.

Although Font Deck is arriving a little late to the party, ultimately it will come down to who has the best selection of fonts. Until we know that there will be no clear winner.

That said, judging by an article on Think Vitamin, Typekit looks pretty impressive. The article demonstrates how Typekit will work and I have to say it looks very straightforward. Unsurprisingly for an application developed by Jeff Veen, it is incredibly well designed. However, it is not perfect. The demo page associated with the post shows a significant delay as custom fonts are loaded. Until that is complete the user sees a web safe font. Unless they seriously ramp up their server capability this delay could get even bigger as the popularity of their service increases. This might possibly be the opportunity that Font Deck needs to leapfrog their competition.

Moving design forward

Web design has come a long way from the grey backgrounds and blue and purple links of just a few short years ago. But where do we go from here? That is the topic tackled by Jennifer Farley in “Art Direction: Taking Web Design To The Next Level.”

As you will guess from the title, Jennifer’s answer is Art Direction. Art Direction is (among other things) the process of bringing together design and content. This is something sadly lacking in modern web design. Most websites are designed with little understanding of what content they will finally contain. Design is built around a series of templates integrated into a content management system. There is little customisation of the design to work with the content of each page.

Jennifer shares some examples of sites that endeavour to move beyond the template mentality and introduce real art direction. They are definitely worth looking at as they will inspire you to move beyond template design.

Jennifer’s article is not the only post that encourages a change in our approach to design. The other is a post from 37 Signals entitled “Stop following directions and start designing.” This post encourages designers to view feedback from the client as suggestions rather than solutions. The author writes…

When you’re getting direction from a client, manager, art director, etc., it is easy to fall into the mode of just following instructions. You get so caught up in getting it right that you forget to keep thinking about the problem.

Of course it is totally understandable to take the ideas of those that pay our bills as gospel. But we should also be reminded that those same people hired us for our expertise.

That is easy to say when you work for a company that does not have clients! That said, it is good advice and worth taking on board.

Being persuasive

My favourite post of the week is “50 Scientifically Proven Ways to Be Persuasive.” Although not strictly to do with web design it provides a lot of advice that can be applied when trying to nudge users in a certain direction.

For example one of the techniques suggests personalising the herd effect. The herd effect is used regularly on websites as a way of nudging users to complete a particular call to action. For example it is not uncommon to see ‘popular products’ on ecommerce sites or ‘average donation values’ on charity sites. This is because we tend to be led by the crowd. If somebody else did something then we will too.

However, the post suggests taking this step one step further  by personalising the message. It cites an example from a hotel change…

The hotel sign in the bathroom informed the guests that many prior guests chose to be environmentally friendly by recycling their towels. However, when the message mentioned that majority of the guests who stayed in this specific room chose to be more environmentally conscious and reused their towels, towel recycling jumped 33%, even though the message was largely the same.

So instead of refering to popular products you would say “other users who bought this product also bought this”. This is a approach also used regularly by ecommerce sites like Amazon.

This is just one example from a massive list included in this post. It really has a wealth of knowledge that is applicable to almost all aspects of web design from information architecture to copywriting.

Continued confusion over HTML 5 and XHTML 2

The last few weeks have been full of discussion about HTML 5 and the demise of XHML 2. There seems to be a lot of division and confusion over what designers and developers should be doing. Should we be abandoning XHTML 1.0. and moving to HTML 4? Should we try and adopt HTML 5 even though it is in draft? Its all very confusing and I have to admit I’ve felt unsure myself.

Fortunately there are some very clever chappies giving out excellent advice. Jeremy Keith has written an excellent post on the subject, as has Bruce Lawson. Drew McLellan has also contributed some interesting points to the discussion.

The problem is that it is all pretty turgid stuff and a bit of pain to wade through. The good news is that you don’t have to. Brad Colbow has saved us from this pain by turning the whole discussion into a very easy to follow (and bueatifully designed) comic strip.

Extract from the comic strip

SO, if you want to know whether you should be closing your tags and whether you can start supporting HTML 5 now, then pop over to smashing magazine and take a look.

I won’t ruin the end, but I will say you won’t need to change the way you code.

Back to top

Interview: Brett Welch on the business of web desgin

Paul Boag: So joining me on the show is Brett Welch. Good to have you on the show.

Brett Welch: It`s good to be here.

Paul: Thank you for agreeing to do this on very short notice. Because I didn`t notice your talk. We`re still at Future of Web Design. I`m still interviewing people here. You’re going to get bored of me saying that cause I’m doing loads of them. I didn’t notice your talk on the line up so I almost missed you entirely and I didn’t hear you either. So I haven’t heard what you said. But I’ve had lots of people come up to me saying you are interviewing Brett right? He’s really good. So you obviously went down very well. Which is a good thing.

Brett: That’s a good thing yeah.

Paul: Because I missed it what did you talk about?

Brett: Okay. I talked about how designers can go beyond pushing pixels and start to create more effective website for their clients. So I talked about the business end of web design. Which you know a lot of the time gets ignored at conferences like this.

Paul: Sure does.

Brett: And I think it’s really important. Cause that’s where the money flows into their pockets. So when it comes to actually getting the client on board and that process. That’s a really important part that I thought needed talking about. I talked about how designers can do that and I used and acronym called BUSTA and I put a bit picture of Busta Rhymes up there because if you’re into rap and hip hop you’ll know the guy. Not that he’s had any hits recently. As far as I know. BUSTA stands for talk Business. Understand why they want to go online. Talk stragety. Talk business targets and set an Action plan.

Paul: Okay.

Brett: So there’s the B-U-S-T-A. Or in one sentence you can say. Businesses Understand Strategy Tactics and Action. So all together it sorta works as sort of a nice little coat hanger for your thinking. And the idea really is to start off by talking about a clients business. What do you do? How long have you been doing it? How do you sell what you sell? Sort of getting into the business owner’s mind a bit. I think that’s something that you need to do to set the tone of what you are going to talk about. It’s not about a pretty website. It’s about having something that actually is effective for the business owner. The next thing is really understanding what they are trying to achieve. That’s important because you may need to dial up their expectations or dial down their expectations.

Paul: Okay.

Brett: Sometimes people if they’ve read a few blogs. They’re thinking that they’re an expert. They’re thinking that they can take it to the next level really easily. Sometimes you need to slow that down a bit and say hold on. You’re not going to be Amazon overnight. You need to take it slow. Other guys are going to be a bit timid. I don’t really know much about bespoke stuff. That’s where you need to hold their hand a bit. Guide them to understanding how exicted they should be. So the next part is strategy. I made a big point about the fact that strategy is not dirty word. It’s really just about connecting the dots between their website and their business. It’s about understanding how you can achieve the goals you want to achieve. Through their website. The main thing about stragety is really helping them understand what they can achieve. and showing them how they can achieve it with concrete targets. That’s what where T comes in. T is your targets. There I think you need to set 3 to 5 concrete targets business targets that actually relate to things like revenues and customer leads. Things like, not traffic. I actually made a point of saying not traffic. Traffice doesn’t mean anything until you understand what your conversions are like. It’s great to say 1000 people came to my website. If you’re not actually getting leads out of that. That are captured in some sort of database or if you’re not making money out of the sales. It’s an empty number. Then finally was action. So you need to set some short, medium and long term goals. A plan. The tools. The what and the how really. How are you going to get there? I think that was a rough overview of what sort of B-U-S-T-A is all about.

Paul: Okay. So what are the benefits of using this kind of approach. As a freelancer say. Why do I need to worry about this kind of stuff?

Brett: I think that even the process, if you look at it from the other point of view, from the business owner’s point of view, it’s still an important one to go through. A lot of people don’t realize that you probably need a marketing plan for your website. Because how else are you going to get people to view it? It’s just like opening a bit store. You need to put in the same amount of effort and ongoing effort to get a result. So I think the why is really more effective websites. If you think about what you’re doing in a business oriented way what’s going to come out the other end is going to be a much more refined and polished representation of what you want to achieve. It’s going to work better for you. I think you get from a freelance point of view you get less arguements from clients. They say I don’t like that blue and you can say well that blue will get you better conversions.

Paul: Right so you’re going back to the stuff you established.

Brett: Exactly. You established already so you can link it back. Obviously you need to have a valid point. You can’t just make things up.

Paul: Well you can try.

Brett: You can try. The real key thing is you can close arguements off by, the silly ones anyway, saying ‘hey look this is better for these reasons.’ Trust me.

Paul: The way we often talk about it is it moves aways from personal opinion of like I don’t like this colour to well this colour comes out of this set of things that we agreed up front.

Brett: Exactly. It’s drawn from this business goal. Then the other ones are you get repeat business because you’ve set that action plan. You’ve got long term and medium term goals that they’re going to link back to you. So once your first sections done and they sort of say ‘This is working well.’ Then they go who’s the next person to talk to? Obviously the same person cause you’ve had them actually plan.

Paul: It’s interesting we went up to a pitch on Tuesday and it was for a small little job, a design job, and we went through this pitch and we outlined what we do. We got to a point in the pitch where we said ‘But if this is as far as you’re going to go don’t hire us.’ If you’re only looking in short term views of this immediate project then we’re not the right people for you. But here’s where we think you should be going over the long term. And I think ultimately that’s really beneficial. It means that your going to get that long term business that you’re talking about.

Brett: Absolutely. People want to know what’s next. I think being able to answer that question ‘What’s next?’ is really a key to making them come back to you when it’s time to implement what’s next.

Paul: How far do you think you can go on that line? We do a lot of work with public sector clients I remembe sitting in one meeting when they wanted to establish a 5 year plan for the website. Which to me seemed unrealistically far ahead. How far do you go with things like that?

Brett: If you can imagine 5 years ahead I think congratulations. I think that’s great. The main thing is not so much how far you can think ahead. I think it’s really the exercise of thinking ahead that is most valuable. Whether it’s a 6 month or 12 month or a 2 year or a 5 year plan. However far you can get that’s great cause you probably have a fantastic imagination. Right now Twitter is big in 5 years who knows what it’s going to be?

Paul: Exactly.

Brett: You can work those into your plan. It’s great to sort of skecth something rough out for as far as you can think ahead. I think it’s the exercise that makes the, it’s the process that makes it more effective and more polished. The outcome just becomes more effective in the wash.

Paul: What you don’t cover in that B-U-S-T-A analogy is, you don’t talk about user testing and user feedback as a tool to convince clients to do a particular thing. I’m guessing that’s part of your process as well.

Brett: Well I think that’s really important. It’s not specifically part of B-U-S-T-A cause usability…

Paul: Yeah it would ruin the whole…

Brett: I think that when you talk about two things Targets well three things Strategy Targets and Action. Those last two, if you’re going to achieve the targets you want to achieve then that’s where you need to, and the action plan, doing that testing and doing that side of things is a really important part of making sure you can achieve those goals. I’m a big fan of usability testing and I read your article on ThinkVitamin. What was it?

Paul: I don’t remember. I write so many of them I get confused.

Brett: It was like cheap usability…

Paul: Oh yes I remember that.

Brett: That was like fantastic and I like tweeted it. It’s the sort of thing that I’ve definitely fit in and the actions and the targets. Because targets are about conversions and actions are about how are you going to get those conversions. I think usability is really a big part in working out those conversions. It’s like supermarkets. They have the aisles and they put the products in the right places because they want the kid to scream about the cholocate at the last minute. It’s all well thought out and on a different level it is usability. It’s arranging things in a way so the client behaves in a way, or the customer behaves the way you want them to behave. So I think it’s an essential part of the process. I didn’t fit in talking about it.

Paul: You can only fit so much in.

Brett: That’s for sure.

Paul: It was very impressive that you did it in only 10 minutes. Obviously there are real benefits to using this approach in regards to convincing clients of stuff as we’ve already said. You know you can say well we’ve gone with this colour because of these reasons etcetra. Do you think there is also a value from a sales point of view in terms of up selling yourself and giving yourself more credibility and value?

Brett: Absolutely. That was final point that I didn’t manage to get to about why you’d follow a process like this. It’s simply higher profits. What I’m saying is nothing particularly new or ground breaking. It’s really just a simple process that helps you get your head around these things. So that you’re able to more effectively how valuable what you do is and basically end up with a more effective result which sort of is a feedback. If you do something, if you sound like you do something well you do something well. Then it sort of feeds back and they’ll tell their friends and it’s sort of a marketing for yourself. So I think that having that process really is just about being able to up sell and justify. The problem that we’ve got right now and I talked about this briefly in the talk as well, is that design is becoming a comodity. People view design as a comodity. That’s a real shame. It is about up selling. It’s about selling yourself, the value you have and effectively communicating what you do. In a way that puts you in the right light so that people are willing to pay the money for it.

Marcus: It also makes you seem like more of the expert.

Brett: That’s exactly it.

Marcus: We actually tell people who say we’re not doing this obviously we feel this is the right thing for your business to take this kind of consultative approach but it benefits us as well. We tell people upfront it’s a benefit to us as well. And they’re like oh okay I see this is helping everybody.

Brett: Yeah that’s right. I think there is two things, one of the key questions we have right now that every freelancer has to ask themselves is are you worth it? Are you worth your cost? I think the two things that are worth it are strategy. Being strategic and being an expert because experts know things that you don’t. If you can get both of those things into your pitch then whatever you do you’ve already put yourself on a different platter. I think that’s where you really, and we tell this to our designers, we have a large community of resellers for GoodBarry and we tell them all the time, we have training sessions, we always talk about making sure you really lay out what they want to do, how they want to do it, and link it back to their business so that they can really put themselves at that expert level and justify the price.

Paul: I think there is also an issue here of the fact that clients like to be reassured. That when you’re buying from somebody you want to be reassured that this person knows what they are doing.

Brett: It’s about trust.

Paul: Having a methodology and an approach that you work through and has all of the different things that you just outlined. I think gives you, it gives clients that reassuring feeling that these guys know what they are doing. They’ve got an approach and they always use this approach and are comfortable with that.

Brett: I think that it’s not just about the followig the process by wrote necissarily. It’s about, or each design or freelance person or agency has their own specialties. I think at a broad level you can follow it. But there are some parts where you may dig deeaper because that’s your real expertise area. These processes are meant to be used and bent. Adapted to whatever your situation is.

Paul: So where do you think the time is to start talking about these processes? Is it once the client as signed on the dotted line? You take them through or do you encourage people to be talking about this even at the pitch stage.

Brett: I think at the pitch stage. When you’re pitching you need to demonstrate, not necissarily tell them the name of your process what your following, the methodology. But start to go through the process and say look I want to talk about your business so lets do that. Then I want to understand why your going online. Then I want to talk with you about strategies we can use, and targets that work for you. Then we’re going to talk about how we’re going to achieve this. Just by setting out that roadmap I think you’re already putting yourself miles ahead of everybody else who’s gone right to what sort of colours do you like? I think right in the pitch stage. You don’t want to go into too much detail. I think you have to strike a balance between showing them that you know this stuff really well and that you can really help them achieve these things but also leaving enough behind the fence so that there is something they’re actually going to pay for. That’s the trick is that balance. I would always fall more on the side of making friends with the client and sort of making them understand the process and how great they can be. How effective they can be. Rather than holding too much back.

Paul: I think the other benefit talking about this, I don’t know what your attitude is towards this but, it’s actually quite a good arguement agains speculative design work as well. If you’re in a position where your talking to a client and they’re asking for speculative design you can almost say well in a way this isn’t the time to do it because I haven’t understood your business. We haven’t set targets. We haven’t got a strategy here. So you can take them through the logic of why it’s too early for me to start putting designs in front of you. Is that something you’d agree with?

Brett: Totally. I’m not sure what our official company stance would be. I don’t think we’ve really talked about it. On principle I definitely agree. In our reseller training we teach stuff like that. I would have to say that I, yeah I use 99designs as an example.

Paul: Oh that’s where Ryan’s comment. I heard Ryan’s comment right at the end.

Brett: I said designers if you want to see we broke it down we had millions of designs and millions of dollars put in there and you crunch the numbers and it works out that every design that is gone and done is worth $2.80. That’s lower than minimum wage. You can go work at McDonald’s and do better than that. I think that, yeah I’m not a fan personally of speculative design. I would generally say and what we teach our resellers as part of our training is saying don’t go with that. We want to go in and understand the business. Make sure that you get your head around what they want to do because your work needs to reflect that.

Paul: I realize I haven’t asked you about GoodBarry at all. What do you guys do? I haven’t come across you before.

Brett: We have a platform for running online businesses. When you’re going online these days business owners want to be able to run their website. Email marketing is more and more important. Selling products and hooking into Paypal and things like that is harder than it needs to be. Behind all that, having a CRM database that you can track your customers and save them in a central place when they sumbit a webform or interact with your site however they interact. We’ve got a platform that does all of that.

Paul: Wow!

Brett: Our system does everything that’s in sort of that realm. It’s great for web designers because they’re able to actually create any design and put it on the system. Use all of that functionality without doing any programming. So that’s sort of what we sell. We have a reseller program. That’s why we’re here. We get designers on board to become resellers of our product. Basically they use the product they get comissions. They get a whole bunch of training from us about how to make more money and how to, pratical training. How to be a reseller. We not only take you one as a resller we want you to be able to add value to your clients. And give you some ideas about how you can do that.

Paul: Interesting business model. Well thank you so much for coming on the show. That was really useful.

Brett: That was really fun.

Paul: It’s nice to hear some other people saying the things we rant on about week in and week out.

Marcus: That’s what we rant on about all the time.

Brett: Yeah I saw your talk at FOWD in New York.

Paul: Educating Clients to Say Yes.

Brett: It really struck a chord. It’s like this is what I am talking about. I think we’re definitly on the same page.

Paul: Excellent.

Thanks goes to Curtis McHale for transcribing this interview.

Back to top

Listeners feedback: Creating a buzz

Paul: So we’re going to do something a little bit different for the listener feedback section today and it’s come about because I was chatting with Ryan Taylor via IM and he asked a particular question and I nearly turned round to him and said “Ah, you can pay for one of my consultancy clinics for an answer to that question” but then I thought that might be a bit tight of me of me, so instead I thought, lets talk about that on the show because it’s a really good issue to discuss and its a different way of doing the listener feedback and I think we’ll probably do it with some other people in the future as well. So I have Ryan on the show, hello Ryan.

Ryan: Hello Paul.

Paul: Oh I’m so honoured to meet you, your the guy that does that podcast aren’t you?

Ryan: I am, I’m the one who makes sure it doesn’t sink like a lead weight.

Paul: It’s so exciting, I feel quite in owe of this amazing super start that I have on the show.

Ryan: *laughs*

Paul: Can I have your autograph?

Ryan: Of course, you’ll have to come up here though, I’m not coming down there.

Paul: That’s a bloody long way to go isn’t it? Can’t be bothered with that.

Ryan: Aye, you have us come down there often enough.

Paul: Yes this is true.

Ryan: *laughs*

Paul: But you live up north, it’s dangerous there.

Ryan: It’s not.

Paul: There’s wild animals and thugs and things.

Ryan: It’s all rumour and hearsay.

Paul: I see it on the news all the time.

Ryan: If you weren’t such southern softies you’d be alright.

Paul: And also isn’t there loads of pollution from the factories chucking out toxic gases and stuff.

Ryan: Yeah well you see though, if the ice caps melt and we flood, your going to go first because we’re higher up than you.

Paul: That is true. Yeah but whenever I think about the north I always have this image of a post apocalyptic barren waste land anyway so it’s all swings and roundabouts.

Ryan: That’s Scotland, you’re going too far north.

Paul: *laughs*

Ryan: *laughs*

Paul: Anyway, it’s really good to have you on the show. I actually listened to last weeks show which was sold waffle but very entertaining none the less.

Ryan: Well we try our best.

Paul: *laughs* It was good, I really enjoyed it. I particularly enjoyed the horrendous swearing after the outro music.

Ryan: Oh, Anna’s just so good at all the editing she does, it was constant throughout, I really feel sorry for her.

Paul: She worked hard on that one.

Ryan: I had to ring her up an apologies personally for that one.

Paul: *laughs*

Ryan: *laughs*

Paul: Yen, we were chatting on IM and you asked a question do you want to share what you asked? Or what the issue was?

Ryan: well, erm, as you know I’ve been recording my own series of video interviews called please start from the beginning and you were the first person I interviews.

Paul: ah, it was very boring. Have you started editing them down yet? Or have other people been more concise?

Ryan: they are getting long

Paul: oh shit really.

Ryan: I think Dan Rubin holds the record at 50 minutes

Paul: flip me!

Ryan: well has also been the most interesting interview, has also received the most hits and the most traffic.

Paul: really?

Ryan: yep, everybody likes to hear Mr. Rubin waffle

Paul: I Marcus should be pretty good when you get to do him because of his whole pop-star career.

Ryan: he keeps putting me off you know…everybody I can get hold of his the hardest one to nail down. I’ve been asking him since the weekend in June and I’ve done 10 interviews now and I just can’t nail him down.

Paul: So the basic principal of the show is that you ask people about their past and ask them how they got where they got.

Ryan: Yeh, its nothing technical it’s something a little different in that I want to know what people do now, what their job title is is the first question I ask, Because I think it’s interesting to hear about what peoples different job titles are because there are so many different bearings of the same thing in the industry. So I ask that first and discuss what they do now, and then ask them to go back to the beginning as per the title of the series and take me through their career path. All the experiences they had all the lucky breaks they had, achievements and so far it’s working out really well.

Paul: Cool

Ryan: Yeh, people seem to like talking about themselves.

Paul: yeh, it’s funny that. So as we were chatting, do you want to say what your question was, what was it you were getting at, what was it you wanted from me?

Ryan: the question was how can I kind of advertise the series a bit better, how can I get more people watching it. The uptake so far has been really good, I’ve had some really good feedback and people are kind of linking to it and spreading the word a little on twitter. But for a lonely guy like me with less than 400 followers it’s hard when I tweet and you’ve only got potentially 400 people that will see it. You know the number of people coming to the site is good it’s better than I’ve ever had, but I’d like more people seeing the videos and commenting and just spreading the word. Someone like yourself with 9000 followers it’s very easy for you to spread the word about thing and I was wondering how you built your way up with Boagworld? If I do something similar, starting from the beginning.

Paul: yeh, I think this is a problem most people have they’ve got some particular website or application or service that they are offering and wanting to build up a bit of a buzz. I’m not that high up the food chain if you compare me with Mr Carson or some of the guys over in America who seem to find it very easy to create buzz and excitement about products. But I guess I’ve picked up a few things that have worked for me. I think the first one is struck me is patience, you know you haven’t been doing it that long have you?

Ryan: Well no, not too long. So far we’ve released the 8th video and it’s been steady. The kind of traffic interest has been steady level, it’s not like a huge, it not going up every week. You know we release Monday and obviously get a surge of traffic on a Monday as everyone comes to visit. That tails of towards the end of the week and then the next Monday we get another surge of traffic and I suppose there is going to be more traffic with more interest of people who are more in the public eye. Like Ryan Carson for example. There will be a spike in traffic I would have thought. But everybody just seems to like everybody which is quite interesting. So it seems to be the same every Monday, there seems to be the same amount of traffic coming to watch that video. Despite whom the person is.

Paul: well that to some degree might be down to be how much the person interview is actually pimping what you have done. You’ve got a good model in the sense you’ve got a situation where your interview well known individuals which works really well as a technique because if they do mention it and push it themselves then it’s going to drive traffic to your site and hopefully get people hooked on the other ones. Erm, but ye hi mean that’s only kind of part of the equation actually. To be honest it was a long time before I actually saw much traffic on Boagworld at all. I mean I reckon it was over a year before I got much over the 400 / 600 subscriber numbers. So it was a long long time before anything really happened, you just really need to keep plugging away and releasing regularly and often. You’re on ITunes now aren’t you?

Ryan: yes, I finally got the series on ITunes and the uptake of that has been pretty good as well, you know people jumped on that straight away and that’s slowly increasing which is nice. Yeh searchable on iTunes and please start from the beginning.

Paul: this is sounding like a massive big plug for free start from the beginning; on the other hand it is also useful stuff for other people because other people are on the same kind of position. We’ve given one tip which is produce content which has got expert whom has a big following, because they are going to talk about it which is a good thing. I mean the other thing that I think a big part of it is, is your own reputation aswel. That (erm) it’s easier for me, if I launch something new … I don’t know let me say I started a new podcast or website it will be relatively easy for me to create some buzz around that because I’ve already got 9000 followers on twitter, because I already know other people and friendly with names that will actually promote it themselves, If I ask them too. So your own reputation matters quite a lot as well and your building up quite a good network of people you know, and don’t be afraid to ask those people to pimp it a little bit. This is where your really going to see the pay off from all the conferences and meeting and chatting with people. Because you’ve become a name that people are aware of, so there’s another tip. Take the time to build up your own personal brand and reputation and attend conferences, because people will take more of an interest in you. Take this week clear left have realised font-deck, now because it’s clea

Ryan: left that’s done it they’ve had far more publicity than some other web app that has just been launched, does that kind of make sense?

Ryan: yeh, yeh, absolutely. Erm I suppose it’s a bit like anything, your reputation again takes time doesn’t it. (

Paul: yeh) I have this slight fear of ramming it down some people throats, I want people to come visit the videos and participate without really feeling harassed into doing so. (

Paul: mmmm) So I don’t want to be tweeting all the time about it and things like that. I’ve been looking at some people who retweet and nearly everybody i’ve interviewed tweeted to say there is an interview there. So if and when people see that tweet they tend to click through, it’s for people who maybe miss that tweet. It seems to be that twitter is the main thing that is driving traffic to my site for my series, and I was wondering if there was anything else I could be doing to advertise it and get people to find it naturally?

Paul: That’s the trouble isn’t it with twitter, something will get missed because you’ve just got this stream of stuff. I think there are a few things to say on that before we move on to other things you could do. Erm, I will actually tweet about something multiple times but I will subtly different ways ok. So for example I will initially (say in your case this video) then later in the day I will I maybe quote some of the comments have been made on the video. I will refer back to it a couple of days later, you know i’ve been pleased with the level of traffic or whatever. Just in order to bring it up a few times so that’s one thing that I do. The other thing is pick your times for actually tweeting about it, and that’s where something like using bit.ly like where you can track traffic is really worthwhile. Erm, because that enables you to kind of monitor the different links that your tweeting out, and notice which time of day gets the best level of traffic for you. So for example in my case I know that if I tweet around about between 5 and 8 in the evening UK I will get the most click through on whatever I do. And the reason for that is the people in UK have just finished work and are at home having their T and are checking twitter whilst they are there. They’ve got time to look at stuff, but yet in America that are following me are just waking up and are around now and their traffic is added to it in addition. So thinking about when you twitter is quite important as well.

Ryan: well that’s interesting because i’ve been releasing the episodes around about 11.30 just before lunch so people could watch over lunch if they wanted to.

Paul: yeh but that doesn’t particularly support the American audience and that is a big audience. I mean you’ve been interviewing people in America as well so I think it’s more important for you (

Ryan: mmm). The other thing you might want to do is, the people that speak that you’ve got coming on the show I presume you write to them and email them when their show goes live…or at least you should do (

Ryan: yes I do). Right include in that the embed code, in case they want to put the video on their site, because that then enable them to have some content, it’s easy and quick to put up on their site and will give you more exposure. And it’s on their blog so it’s permanent, rather than twitter which disappear in time, so that maybe a good way of doing it. (How else can I do build buzz) I mean the other part of it is building the community as well. That is at the moment you’ve just got the early days, and you’ve got visitors (

Ryan: yeh) rather than actually a community. For example I now have people that come back to my site whatever I post. So I mean you want to look at building up that community in the comments and the stuff like that. You want to give people the opportunity and making people feel involved in it. So you do that by saying “hey who should I interview?”, or “what questions should I ask them?” erm, encourage people to put comments on the video maybe ask them questions in order to encourage that commenting. That’s always a good thing you can do. And then of course in addition that as well maybe run a competition where you get people to write in and suggest themselves, why you should interview them not just interview web celebs. Interview some ordinary designers as well, people that have been in the industry from the beginning but aren’t necessarily well-known names. So anything to kind of draw the community together, because once people feel like they are involved in you know Boagworld or from the beginning, once they feel like they’ve got an ownership in then they will start to promote it themselves and that’s where word-of-mouth recommendation really comes in because people are really enthusiastic about it.

Ryan: ok that’s a good idea; I have been trying to contact and target people not necessarily big. I know the majority of people i’ve been interviewing are web celebs i’ve been trying to get all different kinds of people and different kinds of profession in the industry. So I’m trying to get a copywriter and a journalist for industry, and all the different people and their takes on the industry and how they ended up getting involved in it. To try and get as much of a diverse catalogue of people as possible. So ye hi like that idea of getting people, because as you say people don’t have to be a web celeb or a big speaker or a speaker or an a-list person to have an interesting story of what they have been doing. So yeh I like that.

Paul: The other aspect to this is looking for influencer’s o those are individuals that have a big network and a lot of influence. Going back to say twitter for example a lot of people go on about you’ve got 9000 follower or 12000 followers or whatever. But actually the number of followers is less important than erm who is following you. And if you can kind of get at and influence (no wrong word) if you can get certain key influencers to mention your product or service or website then they will reach a much bigger audiences o for example you take someone like Jeremy Keith as a good example of this. His number of followers is actually less than mine yet the people that do follow him are in turn big influencers themselves, so he’s as much of a big influencer if that makes sense?

Ryan: yeh, it’s kind of quality over quantity

Paul: yeh, exactly, totally. Erm, what else? (Mumbling) could you do? … I mean the main thing is just a time thing it has to be said, you just have to keep plugging away being regular posting, not giving up on the project because a lot of people do that you know, especially with blogs. They do it for a while and they give up because they aren’t getting the returns they want out of it. And you know maybe try writing for things like smashing magazine or sitepoint or the webdesigners depot and write about career paths that are relevant to that what it is your doing. The guys at smashing magazine are always looking for new articles because they have this beast that needs feeding on a daily basis. I know you’ve tried to write some stuff for .net mag but I have to .net mag isn’t the best place to start because they are monthly publication which means they can be a lot more picky about what they have in. Also they are very reliant on big names, while you don’t care about the name it’s about this particular product. And actually have got less of a reach (fewer subscribers) than something like smashing magazine or webdesigners depot so I would try and go to write for some of them.

Ryan: mmm that’s another interesting idea, the whole idea from this series stemmed from the fog around job titles and you know how people just kind of pick a name for themselves, like yourself web strategist (

Paul: chuckles, yeh) you know it’s so ambiguous all the time and that’s where people starting out in the industry. That’s what it started off as; people don’t know what they want to be because there is no kind of defined roles.

Paul: that’s what we spoke about on last week’s show.

Ryan: absolutely that’s really where this started and that why I started putting this series together so the series is great that it’s self promotion of myself. But it started off from an interest and it still is, and I’m enjoying doing it because it interests me knowing about other people’s career paths and that’s why I like it. I want to interview interesting people that don’t necessarily have to be hugely popular people. So ye hi like that idea about writing about them, I think that will be the natural progression when i’ve got a few more interviews and bit more raw data to work with. An article about career paths will be something in the pipeline.

Paul: I mean the back log of material really important as well (

Ryan: yeah) , because I mean i’ve got people that start from show one that are still working their way through, and obviously that increased the number of hits and visitors, because people are going back episode after episode. The other thing you’ve got to think about which is the big problem that I had which is the one of getting it transcribed so that its good from a search engine point of view as well as an accessibility point of view. But you know that’s a big old challenge doing that until you’ve got a community like I’m fortunate enough to have that are helping out and supporting it, it’s really difficult to do that.

Ryan: absolutely.

Paul: but anyway I think at that point we ought to wrap it up else this will be the longest show ever recorded, but hopefully there was some useful stuff in there for you and other people. Giving you a little hint at how the consultancy clinics work.
I think I may like to do this again so if you have a web project or you want some advice on something whatever it is then write in to [email protected] and once in a while we’ll pick one and do an interview like this. What do you think good idea Ryan?

Ryan: yeh really good idea I think people will find it useful.

Thanks goes to Andy Kinsey for transcript this listeners question.

Back to top

175. Collaboration

Posted in Classic shows on by Paul Boag

On this weeks show: Ryan and Stanton take the helm, we interview Simon Collison on client collaboration and answer your questions about improving your design skills

Play

Podcast: Download (27.0MB)

Download this show

Launch our podcast player

News

How to design a portfolio site

First up is a two part video series on Carsonified.com called “How to design a portfolio site” in which Elliot Jay Stocks shares his advice and experience. If you’re a freelancer, you know how important your portfolio is to your business and these 2 30 minute screencasts are filled with useful information such as:

  • The three key concepts that make a portfolio site
  • How to build great case studies to reinforce your expertise
  • The ultimate portfolio checklist
  • How to use narrative theory to strengthen your portfolio
  • How to take your design from Photoshop to HTML and CSS
  • How to integrate your design into a CMS like WordPress
  • Lots, lots more.

I’m also going to give a slight plug here to my co-host Ryan, as he’s just published a video interview with Elliot on his site havocinspired.co.uk where he asks Elliot about his career and how he got where he is today. Both definitely recommended viewing!

I’m also going to give a slight plug here to my co-host Ryan, as he’s just published a video interview with Elliot on his site havocinspired.co.uk where he asks Elliot about his career and how he got where he is today. Both definitely recommended viewing!

A/B testing and microcopy

Paul talked about microcopy last week and another article passed my way which further highlights just how powerful microcopy can be and how A/B testing can help to improve your calls to action. Dustin Curtis performed an experiment over the past few months where he tested a specific call to action on his website which prompted people to follow him on twitter and measured the number of clickthroughs various versions generated.

He started with the statement “I’m on Twitter.” Which led to a 4.7% clickthrough rate, then switched to a command “Follow me on twitter.” which resulted in an increase of 55%. He then went on to try a stronger personal command “You should follow me on twitter.” which increased even more and finally added a literal callout “You should follow me on twitter here”.
Overall, the clickthroughs increased by 173% showing just how much of an impact microcopy and A/B testing can have on your site and it might be something you want to look into.

Did Digg and YouTube just spell the end of the Internet Explorer 6?

Sometimes I sit back and wonder what life would be like without IE6 and the whole world is sunny, I sit in a lush meadow with my laptop, coding away without a care in the world… If only.
Every so often someone sets their sights on IE6 and declares war, most of the time we scoff, knowing IE6 has too many troops to be defeated, but two new armies have stepped into the ring, and they’re big armies at that. Digg.com and YouTube have both recently announced that they will be taking sides against IE6 sometime soon. This was highlighted in a blog by Chris Heillman.

A post on the Digg Blog shows that they’ve been researching the situation for quite some time, monitoring the reduction in IE6 use and weighing the number of visitors using the browser to the costs associated with developing specifically for it.

Admittedly, the audience of Digg might be slightly biased towards a more tech-savvy crowd, so these results might need to be taken with a potential overdose of salt, but it’s encouraging to see a fairly large outfit taking the time to research the situation and I’m sure that they’re not going to shut off support completely, but concentrate their bells & whistles on the newer, more capable browsers leaving just the content accessible for IE6.

YouTube have already started showing a message to IE6 users saying that they will be ‘phasing out support for their browser soon’ and recommending the user to upgrade. Chris points out this might not be as impressive as it first seems as 70% of YouTube’s traffic is from embedded media.

He also points out that both Digg and YouTube are social web sites, which are normally blocked by the kind of organisation which forces their users to use IE6, so the true impact of this news remains to be seen.

Back to top

Interview: Simon Collison on client collaboration

Ryan: OK, joining me today is Simon Collison. Hello, Simon.

Simon: Hello, nice to be here.

Ryan: And we’re here at the Future of Web Apps tour in Leeds, and you’ve just done a talk this afternoon, it was a very good talk, I really enjoyed it.

Simon: Smashing, thanks for that.

Ryan: And we thought it would be really good for our listeners to just cover a few of the things you talked about in that talk. Now your company, remind me your company name.

Simon: Er yep, Erskine Design. Or Erskine if you’re looking to impress, I think. Not quite sure where to stand on that.

Ryan: Where did that name come from?

Simon: It is, I think the origin of it means ‘upon the knife’, which is quite interesting. So, obviously, it’s a place in Scotland, it’s also an old saying and if you tweak it or someway, in this day and age, it means upon the knife, which we quite like for a design and development agency. We often feel as if we’re on the knife. So, it works quite well.

Ryan: Cool. And you started off your talk by telling about your biggest disaster, which I thought was quite interesting, but you were quite open about it and that was the Vanilla Pages.

Simon: That’s right.

Ryan: Just for the benefit of us listeners, would you like to tell us what the Vanilla Pages was, is…

Simon: Sure, definitely past tense, um yes. The Vanilla Pages was an idea that was brought to us and we worked on that for a client team, so it’s very important to stress that; it’s not our disaster, as such; we may have facilitated it. Basically, the Vanilla Pages was an idea for a web app that fitted a perceived niche in the fine food and drink arena. THe idea for the Vanilla Pages was that is was a 24 hours a day, 365 days a year tradeshow. Suppliers, wholesalers, buyers kind of creating links and making connections and finding new sales opportunities. On the face of it, we thought this was a good idea. Also, Erskine had only just begun, so we were looking for new and interesting clients and we met with the client we thought they had some good ideas and we spent some time discussing what the process would be. Now, obviously this was 2 or 3 years ago and our process is very different now – very well honed – but at the same time we had enough experience as a team then, we were kind of discussing the need to understand the audience, really get to the bottom of this niche and find out: “What do people really want, will they use ‘X’, will they want to do ‘Y’ abd so on”. And initially, it was like “Yeah, this sounds great” and we signed everything and we began work and instantly we found that our suggestions were being thrown out. There was very little room for us to use our experience to make suggestions and say: “have you thought about this?”, “why don’t wet a focus group together, why don’l;t we ask some retailers some questions” and so on. And as I showed in the presentation today, we then started to receive incredibly detailed and colourful Excel documents, pretty much telling us everything we needed to do, every nuance of the user experience was being dictated. Now, we’re not fools, we stood up for ourselves and we illustrated many warnings but it didn’t really happen and we continued the project and we launched it. It received quite a lot of advertising and it failed. And so, yeah, today I introduced the presentation with a video that was created for it and then proceeded to rip that video apart.

Ryan: Which was quite amusing.

Simon: And used that as a basis for everything else.

Ryan: I know that Ryan Carson’s been recording the talks, I’m sure that will appear on there.

Simon: Excellent. I’m sure this will come back to haunt me. I’m expecting an email from that client in the next few weeks.

Ryan: But you telling us about that site set up the entire theme for your talk, which was collaboration and the process of collaboration with your users and you came up with some, a list of points, a process that you kind of went through which; the first one was collaborate and then research and then… Can you just take us through that process?

Simon: Yeah, sure. I mean, to address the point of collaboration, I think, a point I made today was that it’s a collaboration across all kind of boundaries, so on one hand it’s the design and development team itself. So, to quickly summarise that, and this will be old news to many listeners, but essentially, the designer can talk to the developer; the project manager or, heaven forbid, account manager knows as much as the designers, the developers and so on; everybody is aware of every aspect of the project, or as much as possible. This gets away from that production line approach and allows the developer (to use labels here) to dictate, or suggest ideas, to the designer, and so on, because he or she is armed with enough information and understanding, through the process, to feel that they can contribute, that they’re not going: “I don’t know if this is relevant, but…” why not make the suggestion? So, a lot of collaboration within the office, if you like, if it’s an app for a client, then obviously look to collaborate with them as much as possible, so it’s not just a one-way process, so as many opportunities for focus groups, workshops, talking to stakeholders, investors, whatever that might be, and key to that, the intended audience, which was the main point today, as well, to collaborate with them from the earliest stage as best possible. In terms of the process, yes, collaborate at the top, it’s more of a reminder, through the process. So, we looked at things like research, prototyping, testing, rinsing and repeating that process really. If there’s an agile approach to what’s happening, then you know, there may well be a product launch, then loop back and go through the thing again. Yeah, and to summarise there again, it’s, we were talking about whether it’s waterfall, agile or a fast sprint. We wouldn’ make that decision until we’d spoken to the audience and we’ beginning to get an idea of what they might need, or how best to pitch this website or application.

Ryan: Which, I find quite interesting, because I seem to get the impression that, as a company, you don’t have a set process, so you basically, you know, a new client comes in and you’ll look at the audience and then you pick whether you’re going to through an agile process, or a waterfall process, whereas, you know, we hear a lot about, you know: “you must use agile, agile, agile, agile” or, you know: “waterfall’s best, waterfall’s best” and you seem to, you referred to it actually as: ‘Organic Collaborative Process’

Simon: Yeah, absolutely. I mean, it is very difficult to, in most situations where there’s a client involved, you need to respond to an RFP, or some kind of brief, you need to reach an agreement over what’s going to be done before they’ll say yes, we’ll give you ‘X’ amount of pounds and we’ll build this together hopefully. It’s very difficult to say “take a leap of faith with us, we will put some of the pieces together, shortly into the process, we need to find out more first, and get under the skin of what you want, what you’re intended audience might want.” So, that’s quite tricky, some of the greatest things we’ve worked on have been based in that leap of faith and we’re taking one as well, working with a client sometimes, you know. We’ve learned that it doesn’t always work out as it might look and they take a leap of faith with us. I guess a lot of it is, kind of, proving through previous work and illustrating how that process worked. So, it sounds a little trite and I never want anything to sound arrogant but a level of education, I think, commissioning for the web is difficult for a lot of people. If we can help them understand what they need to do and how we meet in the middle and how we collaborate then, you know, we’ll do everything we can, because that’s a great foundation for the project.

Ryan: Maybe slightly off the topic of collaboration, but do you price differently for different processes, so whereas agile’s much more extensive than just a waterfall method. Would you look at the project, pick which process you want to use, and would you price accordingly, depending on how thorough the process is, or do you look at a project and, you know, just price it the same across the board.

Simon: Yeah, that’s a killer question. It’s the… First of all, we try and be as flexible as possible and again that comes back to that leap of faith situation. There may be a ballpark figure involved early on. The ideal situation is that, if it’s a pitch, for example, we would kind of get the go ahead, if we’ve been fortunate, without having to be too specific. Hopefully, the illustration of our process and what we’ve done previously, and what we’re aiming to do can be enough. That is difficult. If the approach is going to be typically agile, it’s obviously a very different beast to a waterfall process, where you can pretty clearly define, you know, we’ll do A, B, C, D, we’ll end at Z – job done. With agile, who knows, because exactly how many kind of releases might there be? What’s going to be involved after the initial launch? So, very difficult. As a team, we democratically discuss everything, everybody is involved, and again collaborates on how we approach a potential job. Like a lot of people, and I’m sure there’ll be plenty of people listening who’ll empathise with this, we’ve burned many times, so we are extremely careful about it now. So, no set answer. We work with whatever flexibility we’re given.

Ryan: OK. Moving slightly on. You talked about logovisual thinking and these weird disk things

Simon: Yeah

Ryan: Which you looked to have lots of fun with, you put pictures up and everything and you want to just tell us s little bit about that?

Simon: Yeah, sure. The product itself is, yeah, LogoVisual Thinking, I couldn’t even begin to tell you why it’s called that.

Ryan: It’s the ‘logo’ bit, I can get ‘visual thinking’, it’ the logo bit.

Simon: Yeah, I’ve no idea. Maybe Mr Logo invented it, I’m not sure. That would be a great name. The URL, I’m pretty sure is logivisual.com, in fact, it is and they produce loads of products. I’m not affiliated with them in any way, I should make that clear, but I do wax lyrical about this stuff. Essentially, they are magnetic hexagons, but they also do all kinds of shapes and different tools and I think they’re really, they’re used a lot in business. You can just imagine the dry management meeting: “come on everyone, we’re going to imagineer for the next half an hour” and they’ll break these things out. It’s possibly easiest for people to think along the lines of Post-It notes, or using something like that. A classic example where we would use them is we would get a stakeholder or workshop team together and a few of us and we find that there are people in the room who are contributing a little less, you’ll have, you know, Johnny Smartpants who knows everything about Web 2.0 and he’s throwing all these ideas in, and there are some other people and you think “I wonder what they’ve got to contribute”, so give them a pen and a pile of magnetic hexagons and then give them a, let’s say, for simplicity sake, “list all the kinds of user you can foresee using this product or website” Go into detail, rather than say ‘government’, talk about specific roles, you know, what kind of people within a government department might use this thing and why. They all go away and, because there’s no pressure, the write whatever they want. We bring that together and then we’ll look at grouping these items in a particular way. The example I used today was audience grouping. We prefer to work with a broader brushstroke than the typical user persona, so you’ve got Johnny or Mary who, you know, Johnny does this, Mary does that, she knows about this but not that etc. Sometime we, and⁄or the client, forget exactly what Johnny’s supposed to be, we have to go check so with these tools, we’ll take everything that people have contributed and we’ll group them into 4 or 5, maybe, audience groups. We’ll then label those groups and then they will be in our minds throughout the process. So, for example, we’ll have a hierarchy, it might be that it’s a government site, it might be there’s a certain kind of user is ‘Hierarchy1’, a certain kind of group is ‘Hierarchy2’ and so on. And the outcome will be, we will do some lo-fi diagrams and look at where typically would somebody from this audience group arrive; what might might they do while they’re there; and, vitally, what action might they take, what might be there outcome, what do we want them to do. So we use these LogoVisual tools for things like that. Essentially we just have them around as whiteboards and they’ll be around for a project, we’ll move them around on the boards, because they’re hexagons you can group them beautifully and, yeah, I mean, have a look at logovisual.com, there’s some good ideas on there of how people are using it.

Ryan: And you talked about having a project space in your office, didn’t you, which you brought this picture of a, really impressive actually, all these things stuck to your walls and everything.

Simon: Yeah, it was. Well, that particular example was from the Erskine.com redesign, so we really did go hell-for-leather on that one. Yeah, we’re fortunate to have quite a large office space I’m not bragging there because it’s got no heating, single-glazing windows, it’s freezing, it hasn’t got enough plug sockets, it’s kind of rubbish, but we love it, and it’s a creative space.

Ryan: It’yours.

Simon: It is ours, which is wonderful, although we share with an idiosyncratic, little illustrator called John Burgerman, who’s gradually spreading himself through the office, but we love him. So, yeah, we set aside an area of the office, if there’s a spare computer, we’ll stick a computer in the middle, so we can access online information, but really it’s offline scrapbooking, so you know, we print out typefaces, we rip this out of magazines, classic stuff, as we produce wireframes, or any kind of, you know, back of a cigarette packet sketches, whatever they might be, or source material from a client, maybe, we just throw it all in this space. It acts as a constant reminder, so if you’re scrapbooking in a flickr pool, or, what is it, LittleSnapper, or something like that, that’s fine, but it can e difficult to share and it’s a bit out of sight, out of mind. With the project space it’s just there, and you can keep adding to it, and if you’re stuck for inspiration, 2 or 3 of us might, rather than just discuss this idea over Skype or, as you do when you’re in the same room, sad as that is, or sort of face to face at our desks, we’ll wander over to the project space, where we’re kind of surrounded by the project, and delve in and add to it, tear things up, I don’t know. It works for us; if you’re a remote team, and you’ve got people in different locations, it’s maybe not so good, but it’s a nice idea, and I think people like Clearleft and Mark Boulton, people like that, I’ve spoken to them and I know they do a similar thing. It’s just a, it’s a tip, but it doesn’t work for everybody.

Ryan: You talked about community and you had to rush through that a little bit, because your talk was overrunning, could you talk to us a little bit about that. Again you had bullet points of trust, and brevity and things like that. Could you just take us through what you were covering there.

Simon: Yeah, sure. Yeah, half an hour’s never enough really.

Ryan: It flies by, doesn’t it.

Simon: Especially when you waffle, like I do. Terrible – you should see me after a few pints, actually no, that’s a bad idea. Yeah, basically we have, they’re our kind of, what would you call them, they’re like little waymarkers or points to observe throughout the process, so through that early collaboration with the audience or the client, we’ll define some key aims and objectives, but they’re usually project specific, but I certainly believe that there are a number of conventions, if you like, or almost courtesy items to be aware of, when you’re looking to create a community around a website, so you mentioned trust, that’s something I really think is important, especially where you’re asking people to submit their own information, share information and kind of confide in the site, in a way, so it’s very important that the user feels safe, secure, this isn’t just a fly-by-night website. I don’t know why there aren’t more Web 2 applications that essentially fish, you know, imagine if flickr ended up being, you know, all that stuff and that was all going to be used in a way we didn’t understand. You need to build that trust. So we’ll look for certain devices, we might fall out with a client over their choice of a URL, because if they’re a business to business organisation, you don’t want something jokey. Also, who’s behind the site, are there humans behind it and how can we bring them into it, can we get them to write dome kind of introduction, can we make them visible, can we make them contactable? So, little things like that. And then other items on the list were classics such as, you know, brevity with content, making things easy to find, I’m sure that’s relevant, regardless of the subject matter, and so on.

Ryan: OK. You also mentioned having a features roadmap during the process of developing your site, do you want to explain why that’s benefit?

Simon: Yeah, I rushed through that as well, didn’t I? Basically, we often find that, if the first meeting with a client or, you know, if we’re building something for ourselves, grandiose ideas, you want to kind of do everything and I think it’s very important to bring simplicity into whatever you do it’s a bit of an obvious thing to say when it comes to responsible design, but at the same time, you know, 37 Signals and other companies have talked about this stuff for years and I think many of us have learned from it. Essentially it’s what are we going to do; when are we going to do it, sometimes it falls in very smartly with the agile process; what do we know about the audience, in terms of what we can throw at them and when. So, we obviously favour starting small. I was talking to somebody after the presentation about low expectations, take that the wrong way and it sounds quite negative, but I think, you know, it’s just putting the bar somewhere where you can reach it. I think it’s a very negative thing if you launch a site with all the bells and whistles in the world and then end up retracting too much after launch. I think it’s natural that some things will change and some things may be removed, but if you kind of visibly change your whole plan, because you haven’t thought it through, I don’t think that’s very healthy. So yeah, it’s defining a roadmap, as we call it, and probably others do as well, where we essentially outline what we’ll do, when and try to stick to that, but ensure it’s malleable, so as we learn more, we can rethink it, think let’s wait on that and the way we reflect that with the client, as well, in a more tangible way, is we try to get rid of all the sort of, the Basecamp noise and whatever other channels are in operation, reduce a project down to it’s deliverables, so we will have, I guess establishing a, if it’s not too pretentious to say a narrative to the project, so there’s point A, and there’s lots of things to click, on be they kind of sitemaps or research findings, through to batches of wireframes or comps or prototypes and whatever. We find that, in tandem with that roadmap thinking, kind of illustrates what we’re trying to achieve and when, and I think it can be reasonably easy for a client to buy into that, so it’s a case of OK, so, I guess it’s what you say and then backing it up, so proof as you go along. So that leap of faith is, kind of like, yeah, you were right. So, that seems to work quite well for us.

Ryan: Great, and you got everybody excited right at the end of your talk by showing them your ‘Ultimate Package’ [Laughs]

Simon: Yes, ladies

Ryan: That must sound very odd coming over a podcast

Simon: I’m sure it does, yes my ultimate package. OK. It would be really unfair of me to take credit for this, I do like the idea of conventions in web design and development, whether it’s navigation and using the word ‘About’, ‘Contact’. I think there’s plenty of other areas to create and do exciting things. Personally as a web user, I like certain constants. So, those kind of conventions I love. In terms of actually building websites, we use a lot of them in our development process. So, for example, when we start a project, we actually start building it, whether it’s a prototype or even if we’re just experimenting, we have a folder that we iterate, we’re on version 1.9 of our Ultimate Package at the moment, and we just drag it onto, we just FTP it.

Ryan: Like a template?

Simon: Yeah, basically. Responsibility for this goes to whole Erskine team, but specifically Greg Wood, our lead designer who is, kind of, the custodian of this thing so he’s very passionate about it. It’ll be up to Greg whether I’m able to share some or all of it with you all eventually, I don’t know, and I’m sure other people have their own versions. So, for example, you will have, in the Ultimate Package, some JavaScript files, the latest jQuery, some stuff to control certain functions and some JavaScript to help with IE6, PNG transparency, whatever it might be, and then a cascade of CSS files, so our main screen.css, with some basics in there, reset.css, our own version of Eric Meyers Reset CSS, and things like a scratch file, so if one of the, one of my colleagues wants to do some work in the CSS, they do it in their own file which cascades in, so, you know, Greg or somebody can approve it or ditch it, withough it really having any great affect…

Ryan: I like that. That’s a good idea.

Simon: on the main stylesheet, if you like, again that’s something that Greg’s introduced and we all find that really useful.

Ryan: Yes, that’s a good idea, I really like that.

Simon: And there’s a few other bits and pieces in there as well. The beauty of it is, if you start working, you want to start working fast, the external JavaScript, CSS and so on, is already linked up, so you can throw a function in very quickly, without thinking: “oh, I must, why is it not working? Oh, I’ve not called it in the <head> of the document” No, it’s all kind of there. You remove stuff as you go along, but it’s there. And there are things that help us with ExpressionEngine builds and a few rules in there as well, so that we’re all on the same page, if you like. If I’ve not worked on a project at all, the person who might have led it is on holiday, the client calls and they’re in a panic, I go into the code and I start looking for certain conventions: I know there will be a ‘Contents’ at the top of the main stylesheet, I can “Ah, 10.1, scroll down, find the flag for that” So, it works really well.

Ryan: And if we’re very, very lucky, we might get a chance to get a sneak peak at it?

Simon: I’ll have to speak to Greg. I’m really, I love the spirit of sharing.

Ryan: [Laughs] Greg’s baby.

Simon: Yeah, I don’t know if I owe him any more beer, but I’m sure that will be involved.

Ryan: It’s a good idea for people to think about and if they’re going to build their own anyway, I like the idea of a scratch file.

Simon: Yeah, just use your own, you know, your own conventions, if you like. I love the spirit of sharing in this community, especially we saw it through web standards, and everything else. I’ve really benefited from people sharing this kind of stuff, so, you know, hopefully we will. I’ll keep you posted.

Ryan: If not, there’s some ideas.

Simon: Yeah, I’ve already been asked today to write about how we go about producing it, so even if we don’t share the actual ‘Ultimate Package’.

Ryan: So, keep an eye on your blog or Twitter feed and that should be it?

Simon: Yeah, either myself or Greg will probably put something together at some point about that.

Ryan: Fantastic. OK, Simon, well thank you very much for taking the time.

Simon: It’s been a pleasure to be on boagworld.

Ryan: Thank you very much.

Thanks goes to Simon Douglas for transcribing this interview.

Back to top

Listeners section: Improving your design skills

David Smith

I’ve a question for you regarding how to improve my design skills in order to further my career.

I’ve been working professionally in the web industry for just over a year now. My current role involves web page design, web page development (XHTML & CSS) and some work with server side code.

Of these three aspects of my job I much prefer designing. Having listened to the feature of “Surviving the Recession” and hearing you telling us to specialise I feel that I would like to become primarily a web designer. However, I have no formal graphic design qualifications (my degree was in Music and History!), and although I have produced numerous successful websites for clients I don’t feel my skills are developed enough to compete with true pros like yourself!

Could you or any of your team/contacts offer me and others like me some advice on what I could do to improve my web design skills? I have considered courses but can’t seem to find any that fit my requirements.

I’d really appreciate it if you could take time to answer this question as I’m a big fan of the show and it would really help me to further my career.

Good question and I have to admit it’s something I often think about myself. I think a lot of it boils down to how you personally approach learning and seen as everyone is different this is probably going to turn out as quite an ambiguous answer, so I’ll go through some of the steps I use and have used in the past.

Learn how to use your graphics program, properly!

Personally I’m a big Photoshop fan, some people prefer Fireworks or various other graphics programs, it doesn’t really matter the principle is still the same, learn how to use them properly!

I’ve found that it can often be easy to think of a design in your head but converting that idea into Photoshop can be difficult if you don’t have a solid understanding of how to use the software. Equally so you can often find that your ideas are limited to your understanding of the software you’re using and as a result your work suffers.

Read books

And when I say read books I don’t mean for you to burn your brain out reading the Photoshop Bible from cover to cover (worst book I’ve seen for photoshop by-the-way, black and white images in the a graphics software book???), I’m talking about a good reference book. Pick a tool to learn an read that section.

I can personally recommend Ben Willmore’s Photoshop CS3 Studio Techniques (there is a CS4 version of the book but I’ve not read that one), which is about half the size of the Photoshop Bible, packed with tons of example images (in colour) and the explanations are concise but informative.

Watch examples

Video tutorials are cropping up everywhere these days and I love them, what better way to learn how to use graphics software than to be shown.

Lynda.com is a great place to have a look at as well. Short bite-size videos 3-5 mins on average that show you how to use the software through examples. It is a subscription service but you aren’t tied in for any length of time so you could simply pay for a month and watch as much as you like.

Challenge yourself

Its difficult to improve your skills without have a goal or objective, sitting down and saying “Right I’m going to improve my design skills” rarely works, you need to challenge yourself however you also need to be realistic. I’m not saying you should take on a huge blue-chip client and attempt to turn around a top class design as a challenge. Start small, push yourself and build upon your skills gradually.

Experiment

If you’re inspired by a piece of design work then try and figure out how it’s done, dissect it, try and learn how to achieve a similar effect, but obviously don’t rip it off!

You’ll find that the more you practice achieving various effects the more comfortable you’ll feel about taking on more adventurous projects which in turn will contribute to improving your skills.

Courses

Course are a tricky one because you have no idea how beneficial they’re going to be until you’ve paid your money and sat through a few lessons.

I went on a 10 weeks, intermediate to advanced Photoshop course a good while back and in all honestly I didn’t learn anything that I hadn’t already picked up from elsewhere.

Perhaps there are better courses out there? If you’ve had a good experience leave a comment in the show notes.

On the other hand you typically get a certificate or something to show for you effort which can go on your CV.

Conclusion

As I say everybody learns in different ways but the most important think to remember when developing new skills to just do it, learn and apply, take on projects that allow you to push yourself push yourself, do something different and try something new. You may be surprised with the results.

Back to top

174. Twitterverse

Posted in Classic shows on by Paul Boag

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

Play

Podcast: Download (32.5MB)

Download this show

Launch our podcast player

Housekeeping

We have two pieces of housekeeping this week…

Charm Clients, Win Pitches

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

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

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

dContruct Competition

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

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

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

My perfect web conference would include…

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

Back to top

News

The importance of microcopy

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

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

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

Content templates to the rescue

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

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

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

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

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

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

Being original

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

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

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

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

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

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

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

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

Tools for testing mobile websites

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

The six tools featured are…

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

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

Back to top

Interview: Megan Fisher on starting building a mobile website

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

Megan:Hi Guys!

Stanton:Hiya, how are you?

Megan:I’m well thanks.

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

Megan:That’s right.

Stanton:Designing effective mobile interfaces.

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

Megan:Yes I am.

Stanton:So I really enjoyed your talk.

Megan:Thank you.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Stanton:And finally it was staying with your brand.

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

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

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

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

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

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

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

StantonOk, well thank you very much.

Megan:No problem guys.

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

Back to top

Listeners section: Web design advice from Twitter

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

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

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

Web Design Wisdom from Twitter

Posted in Web strategy on by Paul Boag

I asked my twitter followers for their web design words of wisdom. I had over 200 responses. Here are some of the lessons learnt.

I am a lazy guy and Twitter is the perfect tool for people like me. Rather than go to all the effort of searching for an answer on Google, I often find myself turning to the Twitterverse. After all, some of the brightest minds on the web use Twitter and I can get an answer faster from them than looking it up myself.

However, with this article I am taking laziness to a whole new level. Instead of carefully considering my own words of wisdom regarding web design, I have turned to Twitter…

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

Setting aside the people who wanted to point out that I cannot spell confucius, the responses was amazing. Answers ranged from the silly to the surreal. However, there were also some real gems and a number of recurring themes. What follows is a summary of the main recommendations.

Focus on the user

There was a general consensus that maintaining focus on the needs of users, was a crucial component in a successful website.

Dan Goodwin put it best when he wrote…

If you can’t work with your users, talk to them. If you can’t talk to them, at least think about them.

A number of users recommended Steve Krug’s book “Don’t Make Me Think”. However, the irony of one particular tweet made me smile…

Confucius says “Don’t Make Me Think”.

There was also a lot of advice about the importance of providing adequate signposting for users as they navigate your site. Colin McCormick wrote…

When leading a user make sure they always know where they are, how to leave and how to continue.

The issue of users becoming lost and confused also led to a call for simplicity.

Keep it simple

A number of contributors spoke about the importance of keeping our sites simple and intuitive. Niki Brown encapsulated this attitude when he wrote…

Keep it simple… the average user tends to get confused with massively complicated interfaces.

It is certainly true that many damage their sites by continually adding features and content, when they should be simplifying. However, according to some of our twitterers that is easier said than done. One wrote…

Simplicity is the most complex achievement.

While another indicated that the ability to create simple sites only comes with experience…

As you become a better designer, your designs become simpler.

There is no doubt that simplifying a website can be challenging. However as I explain in “The Three Secrets of Simplicity“, if you challenge the need for new features it is possible. Too many web projects experience scope creep that undermines simplicity. That is where having a clearly defined brief comes in.

Clearly defining the scope

Too many web projects lack clear boundaries. Often they are wishlists of functionality that have not been fully considered. As Rich Wells points out, the first step is to define the problem…

When planning a site it’s always worth asking “what problem am I trying to solve?” before looking at functionality/solutions.

The trouble is that many of us are seduced by some new piece of web functionality and forget that our websites should primarily be about fufilling business objectives. As Marc Hindley points out…

Think business first, technology second.

Of course defining the scope of a project should not just be the role of the client. The web designer has a responsibility too. As Wendy Phillips explains…

Clients think they know what they want until you ask the right questions.

It is down to the web designer to ask the right questions. In order to do that they need to understand the business. One twitterer encourages them to…

Get as much info from the client upfront as possible, even things you think aren’t that relevant – get to know their needs.

Web designers and clients should work together to define the scope of a project. The client brings their business expertise while the web designer brings their knowledge of the web. Unfortunately the role of web designer is often reduced to that of a pixel pusher.

Recognise the value of web designers

Interestingly it is not just clients who undervalue web designers. Many web designers undervalue themselves. Andy Clarke endevours to encourage fellow web designers when he writes…

You don’t get paid for the hours you work, but for the years learning your skills and craft.

However, it is not just an issue of payment. The Twitter community also encourages web designers to be willing to walk away if clients become unreasonable. Alun Rowe writes…

Don’t be afraid to say no, or to walk away if a client becomes unreasonable. It’ll only cause you pain/distress later on.

David Roessli echos Alun’s point before also going on to say…

Be clear, direct, and honest. Don’t make promises you can’t keep.

Too often web designers will say anything to win or keep a piece of work. Ultimately this is damaging to both the web designers business, and the website of their client.

Of course, this advice doesn’t apply just to designers. It is valid for developers too. That said, there was also some developer specific tweets as well.

Developers pay heed

Whether you are a front end developer or a server side coder, there was some excellent advice coming from Twitter. Our very own Craig Rowe shared one particularly pragmatic piece of advice that made me smile…

Web development is a balance between well made and made just to work.

His second tweet contained a touch of bitterness that can only come from a .net developer fed up with receiving abuse from the fanatical PHP crowd…

The backend language really doesn’t matter.

That said, there is no denying he is right.

Talking of fanatical, Mark Mcaulay put another overly enthusiastic group in their place when he wrote…

WordPress is not the solution to everything.

Of course you could just as easily replace the word WordPress with any other CMS or development platform. Nothing is a silver bullet.

There was certainly no shortage of tweets touting the benefits of various frameworks, CMS and platforms. However, there was a general principle that 29Visual summed up well…

Learn a framework or develop your own. About 90% of the Website structure can be reused. The other 10% falls on design.

You can save yourself a lot of time with the right tool. However it is not just tools that can save time. Good code can too, as Joel Drapper explains…

Code with the next developer in mind.

I think we can all remember times when we have inherited code that is impossible to read let alone understand!

Our last piece of advice for developers comes from Vicky who shares one of the nicest tweets of the lot…

Code with humility and grace – acknowledge those who are on IE6 or screen readers.

That brings us on to the subject of accessibility.

Always keep accessibility in mind

The Twitter responses I received were particularly passionate about the importance of accessibility. However as Ricky Onsman pointed out, they wanted more than just access for the disabled…

Forget disability access – go for universal access.

In particular universal access included access to those using older browsers. That said, there was realism in their expectations. Nobody expected websites to look identical in all browsers. David Randall commented…

Web sites should not look the same in every browser – it’s okay to be different.

This passion for graded browser support was encouraging. However, it was not the end of their ambitions. As Joel explained, accessibility also brings with it improved search engine placement…

If your site is accessible, it’s also search engine friendly.

Website owners are often willing to invest considerable money in things like SEO or design, but rarely in accessibility. Hopefully Joel’s words will encourage them to reconsider.

Talking of investing in design…

Lessons about design

I conclude these words of wisdom from Twitter with three pearls surrounding the development of a design. The first comes from Colin who says…

Prototype and consider other designs. Do not be narrow minded. Be prepared to throw away every design at the design stage.

This is excellent advice. Often designers become locked into a single approach too early in the development cycle and fail to experiment and seek out inspiration. Of course there is a fine line between inspiration and theft. Tom Kenny writes…

Remember, inspiration is not about copying but rather kick-starting an idea of your own.

And that takes time and lots of different ideas and approaches.

But do not fret! If you are struggling to find your inspiration remember Bruce Lawson’s words of wisdom about design…

Readers care much much much much less about your design than you do. They care about content.

Conclusions

To be honest the idea of a twitter driven post was somewhat of a whim, but the replies I received were extremely impressive. This post does not do justice to the depth and quality of responses. There were superb tweets on launching a site, reinventing the wheel, and the importance of copy. I highly encourage you to look through the entire list.

However for now I leave you with some final words of wisdom from Jonathan Snook.

Anything is possible. Its just a matter of time and money

173. UX

Posted in Classic shows on by Paul Boag

On this week’s show: Paul talks to Leah Buley from Adaptive Path about user experience design and Marcus provides some advice on warranties and other legal stuff.

Play

Podcast: Download (28.9MB)

Download this show.

Launch our podcast player

Housekeeping

I just wanted to mention the Summer Camp that Carsonified are running on the 20th and 21st of July in Bath. Its a free ‘get together’ for students or web entrepreneurs looking to discuss web start-ups. Sounds like it will be an interesting gathering and with numbers limited to only 8 places there will be lots of time for addressing individual problems. Check it out.

Back to top

News

XHTML 2 is dead, long live HTML 5

The big news this week is the W3C’s decision to stop development of XHTML 2 so that more resources can be put into HTML 5. In a statement the W3C said…

Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML.

Although I am no expert, this strikes me as a good decision for two reasons. First, the two ‘flavours’ of HTML was causing confusion. The overlap between the two was significant and they lacked distinctive roles. Second, HTML 5 has gained significant momentum in terms of browser support and community engagement. XHTML 2 on the other hand seemed to be floundering with little movement from the working group. According to Bruce Lawson the decision to drop XHTML will make little difference to most developers. However, one can at least expect to see an acceleration is the adoption of HTML 5 and hopefully greater support by browser manufacturers.

Designers tools

I spotted a twitter by Paul Annett this week that is worth mentioning. It was a link to a collection of Photoshop files containing UI elements for each major browser. The files contain browser windows, dropbox boxes, radio buttons and other user interface elements. This is extremely useful to any web designer mocking up a web page, and saves having to screengrab and isolate each element manually. However this resource is just one of many available on the “Designers Toolbox“. Other resources include…

It also has a load of additional resources for print based designers. It is an impressive site and definitely worth checking out.

Inspirational about us pages

Smashing Magazine have released Best Practices for Effective Design of About Me Pages. The post first caught my attention because “About Us” pages are so often neglected. As the article says…

The “about me”-page is one of the most overlooked pages in development and one of the highest ranked pages on many websites.

I get the feeling most website owners don’t really know what to do with this page. They feel obliged to have it because everybody else does, but fail to really understand its role. Unfortunately I am not sure that this article provides any answers. It focuses on the “About” pages of web designers rather than more general websites, and also shows a lot of examples while providing little in terms of ‘best practice’. That said, it has some stunningly designed “About” pages and so is definitely worth a read. They really are inspiring and will make you long to redesign your own “About” page. Toby Powell's About Me Page

Password Masking

Why is it that as human beings we have a tendency to accept the status quo? Even if we think something is a bad idea we often fail to speak up because it has always been that way and ‘surely there must be a good reason’. One example of this for me is password masking. This is the practice whereby content entered into a password field is blanked out for security reasons. Although I can understand the logic of this it has always struck me as a significant usability and accessibility issue. However, despite that I have never actually challenged the practice. Fortunately Jakob Nielsen has in his post ‘Stop password masking‘. He writes…

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures. Password masking has become common for no reasons other than (a) it’s easy to do, and (b) it was the default in the Web’s early days.

I couldn’t agree more. I believe the security concerns are massively over rated and the usability issues largely ignored. Unsurprisingly Jakob has come under some criticism for his cavalier attitude towards security. Christian Heilmann writes…

As a frequent traveller I am constantly seeing people logging into web sites in hotel lobbies (when they check in for their flight for example and enter their bonus miles account details), in Internet Cafes or when they use their laptop in a public space.

However Jakob addresses this when he writes… Yes, users are sometimes truly at risk of having bystanders spy on their passwords, such as when they’re using an Internet cafe. It’s therefore worth offering them a checkbox to have their passwords masked; for high-risk applications, such as bank accounts, you might even check this box by default. In cases where there’s a tension between security and usability, sometimes security should win. Again I agree with Jakob. Too often password masking is used without thinking. When a user registers for a site that contains little personal information and no financial details, why should they have to enter the password twice simply because they cannot see if they typed it right the first time! Its absurd.

Interview: Leah Buley on UX design

Paul: OK So I have Leah Buley today from Adaptive Path. Great to have you on the show Leah, thanks for agreeing to come on.

Leah: Thanks Paul I am excited to be here.

Paul: So I heard you this year at South by South West(SXSW) talking about UX teams of one, which I have to say, was the highlight of my SXSW. I am not just sucking up it really was the most enjoyable one

Leah: (laughs) You might just be sucking up but I will take it. I will take it all in.

Paul:Yeah just take it , just go with the flow. So the reason it was so erm inspiring I think from my point of view was that the company we run Headscape was for a long time a distributed company and we then came together and started having an office, but I don’t think we have really got our heads around the advantages of all being in a office together. So all of your talking about brainstorming and stuff like that was hugely, kind of blindly obvious but revolutionary at the same time. It was a light bulb moment for me. So thank you very much for that.

Leah: My pleasure. Paul. So I thought lets share some of the stuff that you covered at SXSW with the listeners of Boagworld because I know there is a lot of people out there that em maybe are open to a new approach to the way they are handling design and User interface, usability and all that kind of thing. So lets kick off by talking about and perhaps defining design as you see it, because you obviously don’t see design purely as the aesthetics of a site, and as you were talking you obviously had a much bigger role in mind for what you would consider a designer so tell us a little about that.

Leah: yeah, well actually the first caveat I should make is that I am not a trained designer,

Paul: OK

Leah: I have an information science background and have done years of work as a developer so you should take everything I say with a grain of salt. But I think what is interesting from my perspective is that a lot of people in our field are not actually trained designers but they are doing design work.

Paul: yes

Leah: So recognising that and understanding essentially there is a process to design and how anybody can do it is an important thing and for me the way that I would define design is basically anybody who is taking a known problem and consciously reframing it, often with the use of constraints. So in my mind design is much more a process as whereby something new emerges as opposed to outcome that somebody produces. The designer or the role of the designer, anyone who does the design is to shepherd that process basically.

Paul: hmmm Yes This is kind of a complete tangent really but it was something that came up in your talk and I was fascinated by it and wanted to know a little more about it. You talking in your presentation about Forrester CX model ? Which I had not come across that description of it. I had heard of kind of a similar approach used in sales as the sales approach, but could you explain what that model is and why you brought it up in your presentation.

Leah: Sure yes , it’s a report that Forrestor’s put out called the customer experience journey it is written by a guy named Bruce Temkin who actually has a excellent blog called experience matters where he writes a lot about user experience, from the kind of business person’s perspective so check it out if you haven’t already. The interesting thing is that Bruce has written a lot about experience based differentiation for companies, which is basically just the idea that you have a better user experience you therefore have a better product and evidently his writing about his experience based definition has been one of there most popular reports, which sort of suggests that executives recognise customer experience as really critical to their success and that many of them are many of them are offering a sub-par experience right now. So then in this customer experience journey Bruce essentially explains how an organisation can build a strong customer experience practise and the report has a lot of recommendations about a corporate culture and employee training and how to deal with trade offs, but in particular there’s a sort of a model that describes five steps for the evolution of customer experience in an organisation it’s great, it’s like it’s beautifully simple but it is also deceptively simple at the same time.

Paul: yeah

Leah: The five steps are, er the first step is interested basically so at that point the customers organisation is aware that user experience or customer experience is something they should be thinking about, but they have not really done anything about it yet. The second step they get invested, which basically means they hire somebody to do some work, this tends to be someone that is at a pretty low level. At the third step they become committed, which means they have someone who is an executive who has responsibility for the outcome of that user experience work. At the fourth step they become engaged at a very high level sort of a organisation’s initiative level user experience is a priority and then the fifth step the nirvana of customer experience is that they become, it becomes so embedded into the fabric of the organisation that it is kind of like the first principles to everything we do it does not have to be explicitly called out like a project team to make the website more user friendly or a project to make our products less funky to hold or whatever.

Paul: hmmm

Leah: So emm that’s the model so it fascinates me and kinda frustrates me a little about it is that it makes it seem so linear like you can just put one foot in front of the other and eventually over time you will reach step 5. I think there are different stages that are tricky for different reasons, the leap from having lower level user experience people to executive user experience people can be awkward for organisations for a lot of reasons and what I have seen just on my personal experience is that companies have, it is not like they start out with one user experience person and then it grows and grows and grows and then ends up they have a team what happens is they have kinda epics in the approach to user experience so sometimes it’s big and they will hire big staff and in lean times or some executive goes away the staff will shrink and then some other champion will come along and he will want to bring it back. I have been in situations where I am a user experience team of one or even when I am on a team of professionals and you learn that there was a user experience practise several years ago and then it went away and it is like discovering cave paintings or hill dwellings or something and you realise there have been other people that have come before you and you are like why did they go away what happened? So that leads to like a really core belief I have about user experience practise which is that it is not built by delivering killer projects and sort of building on top of killer projects one by one but it is built through relationships and patience and mutual respect over time and that it is about really erm sort of investing the time to actually get to know the people who need to work with you as a user experience professional investing the time to understand their concerns and their objectives and to take those things seriously and to work with them as a designer to facilitate them achieving their goals as well as you achieving your goals. I know that is touchy feely but I think it is in my personal experience that that works well, has worked well for me.

Paul: I think it is very true as well I mean I think there will be a lot of people listening to this interview that maybe er you know feel like they are stuck on one of those stages and can’t progress things and can’t move forward. Whether they are responsible for their website within the organisation, whether they are a internal web designer or something else. And it is very easy to become kind of bitter and angry and become the no person within the organisation that is constantly you know fighting against the system but actually building the relationships is the best way to move things forward and you know I do a lot of work in large higher education and public sector organisations that have huge amounts of bureaucracy and it is ultimately the relationship and carrying people along with you that enables you to do things and move things forward.

Leah: Yeah. I absolutely agree and I think it is particularly interesting talking to you as someone who has worked in big bureaucracies because they are the hardest places to do it I think, it is just the bureaucracy itself can add an extra layer of frustration that is on top of the initial frustration that I think we often feel as user experience people just trying to communicate why this new area is important. So it is very easy to get embittered, yeah if I think of my own personal experience I have seen that too and the trick is to make yourself feel a little less alone and the challenge for that is if you are user experience team of one, and you do not have a big group you don’t have colleagues who have the same experience as you, you kind of have to find a way to find a way to make friends with the non user experience people that you work with and turn them into colleagues and turn them into allies and that you do through soft skills much more than design skills on some level. I think the dirty secret of design is that it is fifty percent soft skills and then the rest is design and if you can learn to listen well to people and ask more questions than you answer and I don’t know be a fun lunch date I think those are the sort of things that will serve you very well in this line of business.

Paul: Yeah, totally agree it is really interesting to hear you say that because yes, really good really good. Let’s move on before I start ranting about that particular subject. Ermhmm lets talk about Adaptive Path and the process to design that you guys take. Obviously you guys produce some superb work and I am really interested in the little glimpse you gave us in your presentation at South by of that process and how you go about doing things so maybe you could try and summarise that for the listener.

Leah: Yes of course. Well in a nutshell it is a mess it is just a total mess and I am serious about that it is a messy process and that’s part of the magic er but actually, when a little secret of Adaptive Path is and it’s design process is we do not have a set design process unlike some other companies in this field who you know often have like the discovery and then the research and whatever phases. We don’t really have a set process we what we kind of do is custom design each project to match the problem that the customers have but even so I think must projects tend to involve at least three things in some kind of configuration to one another and those three things would be 1. Trying to understand the business environment in which the project has to succeed 2. Trying to understand the user’s context in which the product is actually going to be used in the end and the third part and the thing I talked a lot about at SXSW the design exploration and when I say exploration I use that word very deliberately because we try to treat it er as a process that has to widen before it can get narrow, we try to sort of approach design as actually as a erm exploring a new field essentially but in terms of those three prongs understanding the business problem tends to be really just a lot of honestly trying to ask the hard questions of our customers in a way that will help them to be open to the answers. One of the kind of philosophies of us t Adaptive Path is that we encourage our clients to reframe or rethink everything and so that is a really great foundation then coming back to them and saying in terms of the design approach we are going to take we are going to really explore wide, really broadly and present to you some ideas that maybe push further than you would be thinking of pushing right now but we do that so we can potentially adjust those ideas for the things that are the right size for the constraints and the objectives you have right now. So the design exploration, that particular process we tend to . It is pretty basic we tend to start out and force ourselves to actually spend some dedicated time coming up with lots of different ideas and obviously that is informed by user research which is the second item that I mentioned. We try and start by going into the field to observe users and in context and get as much information as we possibly can about not just what they want to with the product but also the circumstances of their lives at the point at which they are going to use the products because one of the things we find that people are always more distracted and busy and multitasking when asking them than they think they are. Understanding the nature of that helps us to say OK now we are going to sit down and explore the designs for this product what are the constraints that we know our user has and our business has and then the constraints become just a useful device in sort of the process of design exploration hmm in that you can say well if we know that the person who is going to be using this product will also have four other applications open on their desk at the same time or fourteen other applications or forty how do we design something that is optimised as for minimal attention or for is optimised for quick hit interaction so then that little nugget becomes a thing to design with. So lets design a screen that is the ideal starting point for somebody that has ten seconds to do anything but the trick is that you can’t just let yourself stop with those known constraints, you can’t just say we have designed the screen for ten second interaction so we are done with it. If we are truly delivering on our promise that we are helping our clients rethink everything we need to explore beyond that we need to explore more widely beyond that so then we use a lot of other devices that kind of help us to brainstorm in really different ways. This is kind of a funny example but I will bring it up because it illustrates nicely how different kinds of tools help you brainstorm in different ways. We did a project not long ago where we wanted to rethink mobile devices and how we work with them in the world and so in order to force ourselves to rethink that we actually did an exercise where we went out into the world with different kinds of physical objects that were not shaped like mobile phones. They were shaped like pencils and magnifying glasses and wire whisks.

Paul: OK Leah and pretended like those things were mobile phones and imagined what we would possibly want to do with something like that and it is just great because these simple devices would help you to re.. to just forget your assumptions, we have some many assumptions about what a thing has to be and the trick is as a good designer is to force yourself to erm break those assumptions at least for a little bit of times so you can allow your creative process to suggest new ideas to you. Paul. It is really interesting it is fascinating to hear that you are doing that kind of stuff but I am sitting here thinking there are going to be people listening to this show that their design process may consist of you know understanding the business objectives, understanding the users needs and putting a bit of time into that and then they launch Photoshop or fireworks and they are sitting there and they do the design.

Leah: Yes

Paul: and your coming along and talking about going out with whisks and you are talking about coming up with loads of ideas and they are just thinking that is so divorced from the way they are currently working that is this kind of quite hard to imagine that transition.

Leah: Well I don’t think it has to be and that’s what’s interesting and that’s what I tried to talk about a little at SXSW which is that you may not be on an adventure to re-envision the mobile experience but that there are some pretty basic techniques that we can employ even when we are sitting at our desks, even when we are in front of our computers to help us think more broadly. So some of things I have talked about they are really basic they are almost like hacks you can think of them as design hacks if you wanted to 1. Is essentially stealing ideas stealing inspiration from the visuals, sort of visual sources that you encounter everyday so one idea that I really believe very strongly in is keeping an inspiration library

Paul: Yes Leah So if you are using the web and you see something that is an interesting design to you take a screenshot of it and put in some place where you stores those things and then when it is time to start designing flip through that thing flip through your inspiration library and see if there is anything that kind of inspires you in a way that you wouldn’t expect. If that is not on the level of taking a wire whisk out into the world to redefine a phone but if your designing a kind of news portal and you happen to see a guided wizard that, you know screenshot, that has some real interesting kind of treatment of help information and then you realise oh call out boxes could really work in a real interesting way in my news portal that’s sort of the level of forcing yourself to think in a different way or more broad way I also think that just playing with word association is actually so kind of beneficial and talking about what do we want this thing to feel like, or what if it felt like this plus that and then actually just doing a quick sketch of what that would actually mean or look like. The interesting thing is that I have worked with classically trained designers who would probably most certainly call me a design hack but who would say there is one kind of optimal way to design a webpage or design a sort of software that essentially takes the top priority into consideration then the second kind of priority and then the third priority and then lay out the page accordingly so people notice the top thing first and then the second and third thing. But I think the way that metaphor kind of works on us as human beings is actually much more interesting and it can create it can make the experience of using a product or a website feel like something really pungent that is not just actually about information processing it is about a user experience. Ermhmm at the IA summit Cindy Chastain a Information Architect based out of New York city did a presentation on using themes in design and the way she described these themes was basically that you sort of create a little story or create several little stories for what we design could be about and that depending on the story you take the way that you actually design that thing will be really really different. The example she gave is that she did a website for a woman who wrote all of these soap operas in the United States that a soap opera that has been popular for decades and decades she was the primary writer on it and the website is for fans of this soap opera to go and see all of these you see all of these pre-recorded old recordings of the soap opera but in figuring out ermm what experience they wanted to provide for this product they created three different themes and one theme was like the story of a writer and which was basically about the woman who worked the soap opera and the other theme was a love affair with a soap opera which is basically about the fan experience and the third was like forty decades of television or four decades of television which was basically about the TV creation process. Depending on which theme or story you were to go with would create a very different design. In fact they did pick one design that ended up being very specific and tangible and allowed them to design for a really meaningful metaphorical experience for the people who used it but you have to imagine as a end user going into a website that tells you about the story of a writer is going to be very different from a website that tells you, that immerses you in the feeling of being a soap opera fan and I think when I and so I love that example because it shows really nicely how just choosing metaphors and choosing inspiration and choosing examples can encourage a whole world of brainstorming in various possible directions.

Paul: I recently warmed very much to this principle of generating a large number of ideas and the idea of stepping away from the computer, and you have talked about having sheets which forced you to do like six wireframes, like different mock-ups on a single page and you talked about overcoming that thing of running out of steam, like you know I have done two or three designs now what do I do, type of thing. So all of that was really interesting and the idea of including other people in that process so you are not working in isolation and I went back and we did this. We sat down and got er a developer in the room and I got a project manager, I got lots of different people in and we did this and we had a really productive day and got loads done and then it occurred to me that I got five people sitting in a room for a day and that is five man days worth of work.

Leah: Ahhhh

Paul: And you suddenly go crap that is out of our budget that’s a lot. You know it suddenly meant I started going into the practical mentality is a cost effective way of doing things and should we be working like this. I am interested in you thoughts on that.

Leah: Yeah Well it is interesting I hear this concern a lot from people and I am fascinated to hear that you did it and that you did it for a day which I want to hear more details about that later on but I think that the thing is it does not have to take a day and I think that the concern that it will be a vast investment of time for everybody isn’t isn’t .. it is a real concern but I think it is something that can be managed. I have actually had some pretty productive workshops that are an hour long or two hours long and that’s if you round five people for you know an hour or two it is obviously still five or ten hours it is not a week of man hours necessarily. So I think you actually need to be very careful about scheduling sessions that are fixed in time and have clear goals and end points, and just to constrain it a little bit. I actually personally believe that constraining time is another benefit in the brainstorming process. Particularly when you get people that are not necessarily used to being usually involved in designing it can be very scary to jump right in developing ideas and hard actually so I think what happens in a group like that, is people like to think about the ideas for a while and then maybe one thing and get warmed up have a cookie or muffin or something and they feel like they are more casual and they will start sketching, you do not need that time that is just road clearing what you can do is you can give them structured activities that will get them to put there ideas on paper immediately and that will have the same sort of net effect. When we do workshops with folks we do these sort of template based workshops and we give them literally five minutes or seven minutes to sort of sketch out all of their ideas and maybe we will do a couple of rounds of that but the beautiful part is when you have five minutes you don’t even have enough time to think what it is you want to do you just start drawing..

Paul: Yeah

Leah: and it sort of it circumvents the throat clearing that happens in the sort of longer meetings erm and templates I think are really helpful actually in those workshops particularly because people are funny you know we really like to accomplish tasks, if you put something in front of us kinda well defined and has a clear end point I think our impulse is to just do it and kind of get it over with. So if you give someone a template it helps them to sort of say like draw an idea for say what you think should happen in the system explain what the important aspects of that idea are and tell me another product in the world that it is kind of like erm and then you tell them they have five minutes to do it you will be amazed how quickly people can crank out a lot of ideas and then you do a couple of rounds of that and it’s erm in a structure like that that you can really get a lot out in a hour or two hours.

Paul: I mean yeah you have hit the nail on the head there we made, you know the first time we did this we made a lot of mistakes and there was a lot of kind of oh I don’t know whether I am kind of comfortable with this, there was a lot of preamble kind of thing and also we just got tired out. You know there is only so long that you can do something like that. Now admittedly along side that we were doing things like, it was kind of a kick off meeting as well and we were kind of introducing the project to some of the people in the room and that kind of thing but to be honest putting it all together in one big meeting was too much we would have been better of splitting that over a period of time, there were reasons why we had to do it that way because one of the guys isn’t local and he was down but it did kind of get me thinking about this you know the amount of time but like you say if you have structured activities and you set time limits on it then actually that is beneficial yeah

Leah: But also I think actually it is probably important to acknowledge the point that you make that there is time commitment in working this way and it is not like, it is not like you can squeeze it in and still do everything in the way that have already been doing it, it’s there is an actual time commitment to doing it this way. We often at Adaptive Path can do week long design sprints where we essentially we do a lot of the brainstorming activities that we have been talking about in this conversation in the first part of the week and will actually produce wireframes by the end of the week and it is really aggressive and it’s incredibly productive and brings us a lot of work but you cannot do anything else during that week there is just no way. So you sometimes you have to make time move quickly.

Paul: Another thing is ultimately you get the time you are investing back in things like having a developer sit in the room is going to avoid problems later down the line where you know …

Leah: yeah

Paul: where he suddenly turns round and says hang on a minute you have come up with this is the design and we can’t implement that or there is something suggested at these early stages but because the project manager is not there it gets lost in the system and all the rest of it. So I think you know it just feels like a lot up front is the best way of describing it.

Leah: Yeah and I think it is important, you know if you are a team of one in an organisation or where you do not have a lot of support as the user experience and where they may not have a lot of erm comfort, your colleagues may not have a lot of experience or comfort or familiarity with design it is important to go just sort of take baby steps with them with this stuff. I think that you rather than coming in and you are there for a little while and you realise this isn’t quiet working lets change everything and have a two day off site and get the executives to support all this. That might be a little ambitious but erm what might be a little more feasible is to talk to the team and say I feel like there are some ideas we all have that er that maybe it would just be good to get out so that we can actually consider them directly and talk about what’s appropriate or not for the product, could be schedule a hour and half workshop I will structure it don’t worry you do not need to do anything just come with yourself and a pencil in your hand and I will give you cookies and it will be fun and that’s kind of like a starting point to get people ending up engaged in the activity and what I find is when you give people a little bit of a taste of it and they see it can be so productive they become much more enthusiastic about participating and making time for it later on. So particularly if anyone who is listening to this conversation is a team of one or is even like a freelancer with a organisation that they do not have an established relationship with I would say start out with baby steps and structure a workshop in a way that will actually help the participants to see the effects of it pretty quickly

Paul: So we have talked a lot about kind of generating a lot of ideas and you know certainly when we gave this a go we ended up with loads of ideas, erm So I think we need to end this interview by kind of going well now what? You have got this big pile of ideas how do you kind of refine them down into what you are going to actually use.

Leah: Yes, that is always the hardest part of the process actually and not at the same time I think what will happen is there will be a couple of ideas that will be really exciting and everyone will sort of know it. I do not know if that correlates with your experience but the trick is even though some ideas seem like wooh that is pretty cool or wow that would be kind of awesome if we built that it is a question of is that appropriate for the business needs that are driving the product, appropriate for the users needs and for that it ends up a lot of kind of compromise but in order to know where you make sense to compromise or where it doesn’t make sense to compromise it can be really critical to have a well articulated statement of what experience you are trying to produce.

Paul: yes

Leah: We use design principles at Adaptive Path which I know a lot of folks in the field use but for us we try to potentially create five to seven short succinct statements of what the experience of the product should be and doing that helps us to look at all those ideas and say, like this is the coolest most web 2.0 interface I ever saw but it does not support our design principle so it is probably out of the door. The key to the design principles are that they are not, it is not a statement of what the functionality of there system is, it is not like sort of brand attributes it really needs to be something that implicitly invokes what the experience is going to be like so like TiVo has some great design principles early on in the development of their product they created some statements of what they wanted their product to be and you can even when you use TiVo now you can really see a reflection of that. Their design principles were “it’s entertainment stupid”, “it’s TV stupid”, “it’s video dammit”, everything is smooth and gentle, no modality or deep hierarchy, respect the viewers privacy. These are all things they are not quite features and functionality although some of them allude to it, they are not quite brand statements although there is certainly a lot of brand personality expressed in them. They sort of describe what the experience of using TiVo should feel like and it kind so works well in that respect.

Paul: hmmm, excellent that’s been so useful I could carry in talking for hours about this particular subject, but that is certainly a brilliant introduction and I would encourage people to check out the slides that you produced for that presentation which are up on slide share if you search for UX team of one you will find them no doubt. Thank you very much for coming on the show Leah and hopefully we will get you on again in the future to talk about other related issues and we can start this whole conversation all over again.

Leah: That sounds great, thank you very much Paul, I really enjoyed it.

Paul: Good to talk to you, Bye

Leah: Take care, Bye now.

Listeners feedback: Warranties

Got this question through from Andy Wickes:

I’m really interested in how you draw up a warranty regarding a website, and what you cover and for how long.

We are constantly plagued with clients expecting us to continue to support their site months after completion even though they refuse to pay a support fee.

There seems to be an expectation that a site should never develop a problem, never break when new browsers are released, and never cause issues even though we all know that sometimes issues arise from hosts that we end up attending to on their behalf.

I agree with your that the most vital thing is a firm agreement between agency and client at the outset as to exactly what each party expects from the other, but I am keen to learn what you expect to find in a ‘standard’ warrarnty agreement, what is covered, what length of time is suitable as part of the build fee.

Slightly ‘how long is a piece of string’ I grant you, but something I know my team and friend find a constantly challenging topic!

We include the following warranty as part of all our contracts:

The Contractor warrants that all the Deliverables shall collectively provide the functionality specified in the Statement of Work. For a period of twelve (12) months from the date of acceptance by the Client of the final Deliverable the Contractor shall promptly remedy at the Contractor’s own cost any non-compliance of the Deliverables with the specification set out in the Statement of Work or such non performance of the Site.

So, in English, that means that we will fix any genuine bugs for free on a site that we have developed within twelve months of the go-live date. There are two key issues that can crop up relating to warranties.

Interpretation

Taking my last sentence as an example – what does ‘genuine bugs’ mean? If it’s a CMS job, then some kind of functionality defect such as a form not submitting properly would definitely fit that description. But, as Andy mentions, what about rendering bugs in new browsers? The legalese states that we will fix bugs “within the specification of the Statement of Work”. New browsers aren’t included in that.

That old adage ‘common sense’ tends to come to the forefront in situations like this. If the ‘fix’ will take a tiny amount of time and, at that point, you are negotiating another much larger project with the same client then giving a little slack probably wouldn’t hurt your relationship. However, you always have to make sure that the client knows that you are offering something that is outside of the warranty otherwise you could end up creating an expectation that it will happen every time.

Another recent example where we decided it was in our interest to fix a number of sites free of charge – that were all outside their warranty – was when early versions of our CMS became vulnerable to a security risk.

Though we could have insisted that the work we carried out was chargeable, we decided that having a bunch of broken sites was potentially more damaging to our reputation than worrying about chasing clients for the small cost of fixing the sites.

Expectation

The second issue relates to what a client expects of a warranty with an agency. There is a view, I believe, that a lot of clients see a warranty as a support agreement.

We have often had calls or emails that relate to CMS usage, for example, “I can’t remember how to input a news story on to the site, can you remind me”.  Again, in this type of situation, common sense should rule but if a client is continually asking support related queries or is outside of the warranty period then explain that you can either provide an estimate for the work they are requesting or that they may wish to consider setting up a support agreement where they can call-off your time more easily.

This can be occasionally met with a frosty reception especially if you are no longer working with that particular client but, you are not being unreasonable in any way. You are simply charging for your time like everyone else in business. To use an analogy, no-one likes paying to have their car serviced but equally, we don’t expect the garage to do it for free.

Summary

As with most things contract related, make sure that you discuss what your warranty means with your new client before you start work. Concentrate on the fact that it is not a support agreement and discuss the potential need for a support agreement.

Also mention that websites, like most things, do break sometimes and often this is long after a warranty period has run out.

Back to top

171. Access

Posted in Classic shows on by Paul Boag

On this week’s show: Ryan and Paul talk to Robin Christopherson from Abilitynet about web accessibility and Dave shares Headscape’s experiences of moving to Google Apps.

Play

Podcast: Download (30.2MB)

Download this show.

Launch our podcast player

News

Page zooming vs. text scaling

In show 169 we featured Cameron Moll’s article “Coding like its 1999“. In this post Cameron explained his decision to move from ems based sizing to pixels. He justifies this decision by citing the fact that all modern browsers have moved from text resizing to page zooming, as their primary resize tool.

Cameron’s position has caused some controversy in the web design community, with passionate responses from leading figures like Drew McLellan and Roger Johansson. Cameron’s original post also attracted some heated debate in the comments.

So why do so many object to this move away from text scaling and fluid design? Most of the arguments are the same as those that have been around for years. Fluid design…

  • Adapts to varying amounts of content and different languages.
  • Makes better use of screen real estate.
  • Puts the user in control
  • Prevents horizontal scrolling
  • Adapts to alternative devices (such as mobile)

However, Molls critics also point out that page zooming is not support by IE6.

Cameron has responded to the criticisms in “The debate over page zooming vs. text scaling.” He argues against the principle of “one site fits all,” which underpins fluid design.

In my opinion this is a question lacking a black and white answer. Although generally I share Cameron’s view, we still occasionally build fluid or ems based sites depending on the project requirements and target audience. There are good arguments on both sides and neither approach should be dismissed.

10 web design rules you can break

What the discussion over page zooming shows us is that nothing is absolute. As human beings we like black and white rules, but actually those rarely exist. The web is full of articles about web design that layout rules for design, usability, accessibility and every other aspect of running and building websites. However, in truth no such hard and fast rules can exist.

Sure, there is best practice. There are principles of design, development and management we should use whenever appropriate. However, these should not be followed blindly. Sometimes meeting business objectives or users needs involves breaking these rules and doing something different.

This week the Web Designers Depot has released “10 Web Design Rules That You Can Break“. This post looks at some of these supposed rules and shows examples of sites that have successfully ignored them. The rules they have challenged include…

  • Do Not Display the Horizontal Scroll Bar
  • Use a Minimal Number of Font Faces
  • Do Not Use Too Many Colors
  • Make Your Site’s Goal Obvious
  • Navigation Should Be Easy To Figure Out
  • Stick to Web-Safe Fonts
  • Don’t Have a Splash/Landing Page

In fact all of these ‘rules’ are actually very good advice. However, they should not be followed blindly. That is why I love this post so much. It highlights best practice, while at the same time inspiring people to challenge ‘the rules’ occasionally.

Grass roots viral marketing for ordinary people

While we are on the subject of challenging preconceptions I would like to draw your attention to a post on Sitepoint entitled “Create a Buzz: Grassroots Viral Marketing For Regular People.”

I am constantly amazed at how many website owners (and even web professionals) believe that viral marketing and social media are the easy answer to their marketing needs. As the article points out viral marketing is far from easy and if you don’t have a massive twitter/facebook following it is even harder.

Although the article is essentially a guide on how to be successful in viral marketing, it does not sugar coat the realities. It points out a number of harsh truths…

  • You need a product or service that people actually care about.
  • You need to reach a major influencer to have any hope.
  • Don’t just rely on a single outlet (such as YouTube) to get your message out. You need lots of avenues of attack.
  • A lot of it is just down to luck!
I found two quotes particularly telling…
If your message doesn’t offer people something they need, something they want, or an opportunity to support something they believe in, you may need to rethink a viral campaign.
The truth about viral marketing is that many times it comes down to being in the right place at the right time.
I am extremely skeptical about the benefits of viral marketing and believe that unless you are willing to put in a lot of hard work it rarely proves successful. The perception that viral marketing is some kind of magic bullet simply isn’t true.

Information as a task

In order to prove I am not the only skeptical, cynical and despondent person on the web this week, I would like to refer you to a post by Gerry McGovern entitled “Information as a task“.

This barely disguised rant about working on large pubic sector and corporate websites, resonates with my own experiences. The heart of the article is a call to website owners to stop putting up content  unless it helps users fulfill a specific goal. Its a simple message but one often ignored.

Website owners too often start the process of deciding on content by asking “what do we want to say?” rather than “what do users want to know?” Gerry writes…

Many organizations have a strange attitude towards information. Its creation is nearly always disassociated from its use. Information is rarely seen as useful or purposeful. It’s just there because people need it. It doesn’t help you do things. It’s simply there for you to read just in case you need some information.

He goes on to write…

Organizations have a fabulous capacity to produce massive quantities of low grade, aimless, pointless information. Much of the information that should have a point is useless because it is not useable. People don’t understand it. They can’t act on it. It doesn’t result in someone completing a task.

I couldn’t agree more. Before any content is added to a website the author should always ask “what task does this help users complete?” and “is this task actually one real users will be trying to do?”

Back to top

Interview: Robin Christopherson on Accessibility

Ryan: Now here with Robin Christopherson from AbilityNet. Good Afternoon! How are you?

Robin: Yes, really good thanks, yeah!

Ryan: Fantastic! So for anyone who doesn’t know you or know what you do, could you explain that to us please?

Robin: Thank you very much. I am head of accessibility at AbilityNet and my team basically deliver consultancy and free advice and information on Web and software accessibility. And AbilityNet for people that don’t know are a charity and we do accessibility services but also assessments of disabled people in the home or in the workplace or in education and making sure they’ve got the right kit to access a computer and the Internet, etc. most effectively. And we’ve got now 800 advice information number, etc. so all things technology and all areas of disability. That’s who AbilityNet are.

Ryan: Fantastic. And you’ve just given a talk on “Designing for All in a Web 2.0 World” which was quite an eye-opening presentation I think for a lot of people who may not have seen or used a screen reader before. What was quite amusing was when you first started using it the rate at which your screen reader started speaking the content of the BBC home page, I don’t think any of us could understand it.

Stanton: I had no idea what it was saying at all.

Robin: You actually would tune in relatively quickly because when I’m working on the computer at home sometimes I don’t have it on earphones so it’s just kind of coming out through the speakers in the office and my wife just having walked past a few times now can get it so I think you probably kind of tune in. Maybe it’s a bit like the black faces and the white candlestick, you know you suddenly kind of see the other one and you kind of click. Yeah, when you’re reliant on speech output you don’t want to be sitting there twiddling your thumbs after having left the synthesizer at the default speed that you get when you install it out of the box. So you want to crank it up and not have to be waiting for it to finish what it’s saying.

Ryan: So you kind of highlight some of the issues from quite a site impairment point of view but there’s also a lot of other considerations that people designing websites should be looking into. You mentioned dyslexia or cognitive impairment. How do those type of conditions affect the way people use websites?

Robin: I think that vision impairment is probably the category of impairment that is the most difficult to cater for and someone like myself who’s got no useful vision, screen reader users are probably the hardest customers of all. A lot of the standards like ARIA for example, Accessible Rich Internet Applications, most of the guidance is around helping people who are screen reader users for example. But that’s not to say that there aren’t all the other impairment categories. Motor impairment people that have difficulties using a pointing device, a mouse or they’re keyboard only users or they’re voice-recognition users. People with a cognitive difficulty or dyslexia or with a literacy difficulty or for whom English isn’t their first language, all of these categories of impairment and obviously hearing impairment as well, have issues to do with accessing the Internet and software applications as well and the most notable ones tend to be those related to people like myself who can’t see: alternative text on images, not being able to access inaccessible Flash content and that kind of thing or Web 2.0 applications because of the inaccessibility of the JavaScript. But there is a significant impact on all those other groups. The speaker before me, Mark, was talking about typography and the choice of type, the font style is so important for people with a vision impairment, people with dyslexia, people with cognitive difficulty, etc. so Times New Roman may look absolutely gorgeous on the screen and on the page, but from an accessibility point of view, it isn’t necessarily the right choice to make for the body font. Maybe it’s fine for headings to give a certain style and because it’s a bigger font it’s going to be more legible than if you had to read a whole website, ten or eight point using Times New Roman. I wish I’d had three hours instead of half an hour to kind of go through the headline issues, right across all the different impairment categories. I had half an hour so I concentrated largely on the high profile issues to do with screen reader users and in particular Web 2.0 application type scenarios where the new guidelines like ARIA for example can make a significant impact.

Ryan: OK. What should we as, I suppose now that you mentioned typography being extremely important, what should we as designers and developers be doing to improve accessibility and day to day. I know it’s a very loaded question and there’s lots and lots of things we should be doing but as kind of a minimum we should just do all the time, every time we build a website, minimum we should be doing and then before we take the next step to really drive it home. What’s the minimum things we should be incorporating?

Robin: Um, there are some low hanging fruit. You know, there are some things that you could look at any site, any existing site and clean up: alt tags on images, and a decent heading structure, and make sure that the text resizes, that sort of thing that shouldn’t be too difficult to implement. On anything new that you’re building you really do need to get scripts with the WCAG, the Web Content Accessibility Guidelines, and the new version has come out last December to update those significantly, WCAG 2.0, and those are applicable to all the new technologies that are coming out, etc. and there’s really no shortcut to really kind of internalizing, digesting those and just letting them inform your every day practices in what you do, you know. They impact on everything from the wireframe right through to UAT and go live and also post go live maintenance and that sort of thing so you really just need to make sure you’re one of the web designers that have got with the program and you’re not doing the old bad habits of fixing everything to make it pixel perfect and doing lots of hacks to make it look OK in different browsers and that sort of thing. Luckily we’re in a much more standards compliant world now than we ever have been so you can really adhere to standards and only have to do minimal tweaks to make sure that things look relatively OK right across all the range of browsers and we’re asking that you go further still and you consider handheld devices and you consider Web TV as well as people with different impairments and that’s really going to significantly increase the customer base that you are going to be enabling to access your content and if it’s any kind of website with a business model with a revenue stream, right through to a site that’s an e-commerce site, you absolutely can’t afford to ignore accessibility in such a tough and competitive online environment.

Ryan: Yeah, especially with there was that Legal & General case which you mentioned earlier. They redesigned their website to be more accessible and had some quite good results with that, didn’t they?

Robin: Yeah, I mean this is an ancient example now. We helped the Legal & General in 2005. We did disabled user testing on the accessible relaunch and yeah, I mentioned that one in the Q&A at the end because most people will have heard of that one if any and they had staggering ROI. They had a saving of 200K per annum on site maintenance. They had an increase in online sales almost instantaneously after the relaunch of 90% and that kind of indicates that there was an audience out there that was knocking on the door before but couldn’t get through because of lack of platform compliance or lack of accessibility with the range of assistive technologies that people were using. Other people couldn’t tweak the browser to make the text size larger or impose their own color preferences. So there was an audience out there waiting and as soon as the site was relaunched and had opened the door to all those people, there was a step change in revenue. So, but there have been lots of cases since as well as cases that have shown the danger of ignoring legislation. You know, the Target case in The States where they thought it would be cheaper to be fined than to retrofit their site but when it came to it in the end they lost obviously, because they were in the wrong, and they were fined and they were also told to retrofit so they made the bad decision there and had loads of really bad PR as well. That sort of thing is going on over here but it doesn’t actually reach the court, they are settling out of court and part of that settlement is anonymity, a requirement for anonymity so we don’t have headlines over here, but there is litigation going on. So, there are the carrots and the sticks and all of those things have got to be an overwhelming case for getting with the program and becoming one of those Web developers who are able to build accessible websites which are being stipulated so often in tenders these days. You can’t work with the public sector without being able to create accessible sites and accessible functionality.

Ryan: Yeah, I work in the public sector myself as a full time developer so our baseline is it’s got to be AA compliant with WCAG2, have got to comply to the SENDA, the Special Educational Needs and Disability Act. Not so much the PAS 78 guidelines but I believe those are becoming the British standard, or are rumored to be.

Robin: Yeah, I mean it’s dragging on a bit, but it is going be sometime this year. I think probably Q3 this year and it’s going be a BSI full standard, BS 8878 and Julian and the panel including John Gooday from AbilityNet are on that again authoring panel. I think that one thing that is essential, is really important in assuring real life accessibility is testing. So, any web designer, any organization that have internal guidelines, style guides, etc. should have accessibility built in from a checkpoint or a good practices level but you also need to have a range of testing tools, whether it be the accessibility toolbar or some sort of accessibility checker. We can’t all afford an enterprise accessibility checking tool, but if you can they can be extremely useful from a monitoring point of view and ideally you’d have end users involved. So within your organization, if you’re a large organization or otherwise go externally to an organization like AbilityNet to get some end users looking at your content and making sure that it’s not only accessible to the guidelines but it’s also accessible in reality. We did some lab testing for a site that was strict AA about four months ago and 90% of the tasks weren’t completed by the testers because the AI was all over the place, the usability. None of the guidelines had been contravened but it was an extremely inaccessible site for people for a number of reasons. It’s an acknowledged fact that there are a lot of issues outside WCAG that you can’t really document that are specific to a site and the general layout and presentation of that site and the architecture, etc.

Ryan: Sure. So you mentioned testing there. Is there anything say that any of our freelance listeners that may not be able to afford a specific software, any quick and cheap kind of guerilla usability testing, that kind of stuff they can test for accessibility as well?

Robin: Ideally you’d get hold of a screen reader and become familiar with the basic level of functionality of that screen reader and just check with that. There are a number of browsing tools that can render the page similar to how a screen reader would read it out to you etc. but they’re not that useful when it comes to checking for compatibility, you know, if you’ve got a lot of JavaScript, how’s the screen reader going to handle those, etc.? There’s no easy answer to that apart from becoming familiar with the guidelines, using JavaScript from accessible JavaScript libraries where somebody has already done the work for you, and become familiar with a number of access technologies that you can use to double check some of the functionality and the content perhaps on a kind of sampling basis and you’ll begin to realize then which things are going to be problematic and that will inform your design from that point on. In Vista, voice recognition comes as standard and Windows 7 has got a full screen magnifier when that comes out so you won’t need to be purchasing a lot of different assistive technologies to be able to test with a number of them to inform your design process.

Ryan: In your presentation you talked about CAPTCHA still being a huge problem for accessibility and some visually impaired users can’t even register on a site. I also noticed that there was a kind of hidden extra link if you’re using a screen reader that nobody else really sees but you pick up on that once you go through with a screen reader. Are there any other kinds of sign posts that we should be putting into our sites like “Skip to Content” and things like that, that make it beneficial to visually impaired people or visually impaired users or people using screen readers?

Robin: I mean there will be a lot of other people as well, keyboard only users, when they gain the keyboard focus a lot of skip links become visible. People using Web TV, set top boxes often don’t fully support styles and a lot of those things become visible and they are in effect keyboard users. You can go over the top on skip links for example I’ve seen ones where there were like eight skip links and basically that’s a nav in itself, so you really need one at the top that says “Skip these skip links” or something so that is, you can kind of go overboard but yeah there are lots of little tweaks that you can do that make getting around a page, getting around sections of the page that are going to be hugely beneficial, but just doing something as simple as putting headings in, using the landmarks that ARIA offers to identify key, the top of key sections of the page are going to be hugely useful, not just for blind users for example but they are meant for a range of other user categories as well that would benefit from them.

Ryan: Could you talk a little bit about ARIA and how that’s beneficial for accessibility?

Robin: It’s relatively early days really and the support for it is pretty minimal at the moment. You have to have the very latest version of only a number of screen readers and the very latest version of Firefox, IE8 isn’t quite so good at having fully implemented ARIA support. ARIA stands for Accessible Rich Internet Applications and it’s basically the answer to the fact that WCAG, even WCAG2 hasn’t got a huge amount in there from a developing point of view. It’s more of a “Now let’s check the thing you’ve already done” point of view. But also didn’t define a standard for browser developers and AT developers, Assistive Technology developers, to interface and like an API almost and so ARIA has a number of things. Being able to define controls and their role and their status that you could never have done before in a browser. Slider controls in a media player for example a bit like in media player, Windows Media Player, but online in a, just as an embedded control in a page, that has never been possible to be made accessible before. Popup menus and that sort of thing before would have been done in styles or DHTML and that would be very problematic but with the new ARIA way of implementing them as long as you’ve got the right browser and the right AT then that is just like doing it in a desktop environment.

Ryan: One of the tips that you demonstrated on stage was for mobile devices. For the primary navigation one of the internal wars that’s always waged with me is “Should you put the navigation at the top or the bottom of the mobile page?” so that the mobile phone reads it from top to bottom every time the page loads and you showed that this site had the primary navigation in a dropdown menu.

Robin: Yeah, that’s how they chose to implement that as a dropdown and that is very cute implementation. That’s a good choice I think because you’ve got the nav there but it’s literally just one item or two items with the select button. Obviously it would be problematic if it was just a dropdown that was auto-fired for people that just arrowed down it without doing alt down arrow because that’s very a inaccessible implementation of a dropdown box but you’ve just got two items which you have to get over. If you had the nav at the bottom and you wanted to use the nav, then you’d have to get to the bottom and in some browsers there isn’t a quick way of doing that. On my mobile phone, the browser that comes with the Symbian operating system, WebKit I think, the screen reading software talks that I’ve got on my phone. I can literally just arrow left and right or up and down through items on a page, just like tab and shift-tab, that’s all I’ve got. So there’s no way of getting down to the bottom of a page to get to the nav so I would probably on balance having it at the top that in it is two items to get past. If you don’t want to interact with the nav it’s quite an elegant solution really.

Ryan: Are there any major issues with the predominance of touch user interfaces coming through now? I would think that using a mobile phone, the tactile feedback of the buttons is quite important or am I wrong?

Robin: Yeah, I mean we’re concentrating a lot of people who are completely blind but you’ve also got people with vision impairment and people with motor difficulty for whom iPhones are a non starter really so any kind of touch screen interface where it’s the entire interface, it’s not as if it’s an optional extra way of doing it. In Windows for example there’s going to be a lot more touch and multi-touch stuff going on in Windows 7. When apps use that as the only way of doing something, that’s when accessibility is going to become a big issue. There needs to be always an alternative way. Alternative to drag and drop for example of doing things for people with a vision impairment or can’t using a pointing device, etc. So as long as there’s a redundancy there that’s fine, which there isn’t in the iPhone.

Ryan: OK, that’s great. Just to finish up, is there a, do you have a list of things that you see regularly that are counterproductive to accessibility that you can recommend for our designers and developers to just try and stop doing or try and do better, these are kind of like my top five tips, yeah common mistakes type thing?

Robin: Yeah, if you go to AbilityNet.org.uk/webresources then one of the things we’ve got in there is top five tips and top five sins, that’s one of them. And another one is a top ten checklist of things to do. Which implies that if you do them, then um, well if you hadn’t done them like label images properly, then that would be a sin. So follow the check points, those ten and those are ten things you can avoid sinning on. So yeah, there’s a number of resources on there. Other sites that I would definitely recommend to people for getting to grips with accessibility would be WebAIM.org and they go from the very basics right through to really quite advances. Accessify.com is brilliant because they’ve got of information but also a lot of forums as well so you can kind of talk with other guys getting to grips with it. I would point you at the source of the WCAG guidelines but actually they’re kind of not the best place to start but I mean everyone who knows about accessibility knows where that is anyway which is at w3.org/WAI. But yeah, WebAIM, Accessify and our site are good places to go.

Ryan: Fantastic! Well thank you very much for your time!

Robin: Great!

Ryan: It’s been a pleasure talking to you.

Robin: Thanks ever so.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Review: Migrating to Google Apps

It’s something we’d been considering for a while, we’d weighed up the pros and cons and finally took the plunge. The key benefits of Google Apps are huge amounts of storage, a quality web interface and considerable cost savings. There’s also the reassurance that Google is actively developing the product with regular updates and improvements that don’t require installing fresh software or waiting for a hosted service to upgrade. If you’re currently using POP to receive emails or are archiving locally, you’re running the risk of losing your history of emails, should a disaster befall your computer. Keeping emails in a centralised service and syncing with IMAP gives you the security of safe storage and the convenience of access from anywhere. This is where large storage allowances come in handy.

Preparing

Setting up an account is easy. Google offers a team version with fewer features than the premium, allowing an admin to create users, email lists and try out the service. This is also great for demoing the service. Google provide a test domain for sending and receiving emails using your regular style company email address (firstname.surname@). Depending on how big your organisation / company is, it’s worth testing out a few accounts across as many email clients as people run. It’ll help knowing off the top of your head where various settings are to save on support time later.

Migrating

One of the key features of the premium account is IMAP email import. This allowed us to pull emails from our current Exchange server straight to Google, server to server. You basically just provide Google with your current email login details and it takes care of everything. You can specify a bunch of email accounts to import at once, and if you have a super-admin login to your email you can grab everyones with one set of credentials. This didn’t work perfectly for us, a few accounts seemed to hang and never complete. If that happens, it’s worth removing emails from the server with large attachments and trying again. If all fails, the alternative method is to setup your Google account in your email client and just drag all your emails from one to the other. Might have to leave it going overnight if you have a big inbox! Once you’re ready all you have to do is point your domain MX record at Google and you’re done.
On top of the usual email setup there are a bunch of settings Google recommends for desktop clients to aid consistency with the web version. These help prevent duplicate folders for drafts, sent and trash cluttering up your interface.

Migrating Calendars and contacts is dead easy, Google provide tools to sync local calendars and contacts can be exported / imported.

Support

The biggest hurdle in a switch like this is gonna be support. Unsurprisingly, some people don’t like change, especially when it concerns services as critical to productivity as email. They’ll need reassurances that emails won’t go missing and everything will be as easy as it was before. There will be a short period where emails could end up going to either your old inbox or your new one, but as long as you check both for a couple of weeks post switch, you’ll be fine. We did see an email or two arriving at our old accounts a week after the switch, this is due to caching of MX records, not to worry though, they’ll propagate eventually.

A different way of working

My favourite features of working with Google Mail are archiving and labels. Labels work in the same way as folders, except an email can have several labels at once. This can cause some confusion when using a desktop client, as emails will appear in multiple folders. When an email is deleted from the inbox or any folder in a desktop client, it isn’t deleted on the server. It may still have other labels and will still exist in All Mail. To delete an email from a desktop client it has to be dragged to the Trash/Bin folder. This is great for keeping a clean inbox with current / unhandled with emails.
Another advantage to having all your emails on Google’s servers is search. However fast your computer is, you can’t match the speed at which Google can search your inbox for that elusive message from last year containing critical info. Instead of using a regular desktop client, you can take advantage of Chrome with Gears for a hybrid web client / desktop app. This allows you to keep the benefits of the desktop such as offline email access combined with the familiar web interface.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

167. Beyond Technology

Posted in Classic shows on by Paul Boag

On this week’s show: Paul shares his inspiration on blog writing and we talk to Mike Kus about our obsession with technology.

Play

Podcast: Download (31.0MB)

Download this show.

Launch our podcast player

News

Good vs Great Design

Cameron Moll is one of the most intelligent and inspirational designers I know. Where some design on an instinctive level finding it hard to describe what makes their designs work, Cameron has carefully deconstructed his work and seems to have a firm grasp of what makes it tick. He understands design. He understands the processes behind design and the rules that make it as much a science as an art.

This deep understanding of design shines through in a free PDF download (Good vs. Great Design) available from his website. The PDF has been produced to accompany his talk at the HOW design conference in Austin Texas and is packed with little insights into good design practice.

The document is only 10 pages long and yet touches on subjects as diverse and grandiose as…

  • The nature of great design
  • The differences between influence and inspiration
  • The need to understand a problem before searching for a solution
  • The power of typography
  • Definitions of visual hierarchy
  • The need for a ‘creative pause’
Obviously, there is only so much Cameron can cover in 10 pages. However, the document is a great starting point for further reading on the subject. Cameron recommends 4 books in particular…
  • How Designers Think (Bryan Lawson) – A book devoted to the idea that design thinking is a skill, and as such it is something that can be improved.
  • The Elements of Typographic Style (Robert Bringhurst) – A complete study in typography, from the broadest concepts to the smallest details.
  • Universal Principles of Design (William Lidwell, Kritina Holden, Jill Butler) – A reference of vocabulary and examples from the disciplines of graphic design and user interface design.
  • The Design of Everyday Things (Donald A. Norman) – An extensive investigation of the interplay between design and living.

If you are looking to deepen your understanding of design, then this is a great place to start.

Eye tracking findings

I have mixed feelings about eye tracking exercises. This is probably partly because I am not particularly knowledgeable on the subject. Although, I am happy to acknowledge that they offer a valuable insight into users behavior and are a useful tool in our usability arsenal, I do have two concerns…

  • Running an eye tracking session is expensive. If this leads to a reduction in the number of rounds of traditional user testing or the number of users tested, then I would have serious concerns.
  • Although eye tracking provides an insight into where a user is looking, it does not reveal anything about intent or comprehension. For example, if a user only briefly glances at a key screen element this doesn’t necessarily mean they are ignoring it. It could mean that it is well designed and the user quickly processed the information it was attempting to convey.

Ultimately, I would be concerned to see too much weight put on their results. That said, it is interesting to see the results of eye tracking and Eyetrack have released some results from one such exercise that focused on the homepages of news site. Useful nuggets included…

  • Dominant headlines most often draw the eye first upon entering the page.
  • Smaller type encourages focused viewing behavior.
  • Navigation placed at the top of a homepage performed best.
  • Shorter paragraphs performed better.
  • We also learned that the bigger the image, the more time people took to look at it.
  • Our research also shows that clean, clear faces in images attract more eye fixations on homepages.

It’s a good read and although most of the points are common sense, it is nice to have evidence to backup those opinions.

Online reputation management

“Online reputation management” – Sounds ghastly doesn’t it? Sounds like the horrible love child of social media and marketing BS. That said, for better or worse, it is becoming increasingly important to manage how we are perceived online.

As I recently said in an interview at FOWD, our websites are no longer the only place where our brand is discussed. As a result we need to engage with users wherever they are talking about us. The question is, how do we do that successfully?

Whether we are responsible for our organizations brand or just want to know what is being said about us personally, there are various techniques and tools that can help.

This week Sitepoint have brought those tools and techniques together in 3 useful and informative posts…

Past disasters like Dell Hell are perfect examples of just how important this area is. It is time we all started to think carefully about how we are perceived.

7 Quick CSS Enhancements for Better User Experience

I haven’t seen much written about CSS over the last year or so. It has been as if everything that can be said about CSS, has been said. However, just recently we are beginning to see a few CSS focused blog posts appearing. One example is 7 Quick CSS Enhancements for Better User Experience by David Walsh.

What I love about this post is the ideas suggested can be applied on top of an existing site design. They are just little ‘touches’ that make the site visually more appealing and easier to use. The 7 suggestions are…

  • Change the text colour of selected links
  • Prevent Firefox scroll bars from jumping
  • Give form fields rounded corner
  • Control where page break occurs when printing
  • Show icons that identify the file type of link destinations
  • Change the cursor when it hovers over a submit button or label so it actually looks clickable
  • Increase the clickable area of a link  using display:block

Each suggestion comes with an explanation of its benefits and the code required to implement.

Admittedly not all browsers will understand these enhancements. However, because they are not crucial to the functionality that really does not matter. Its a nice example of graded browser support.

Back to top

Interview: Mike Kus on our obsession with technology

Paul: Okay, so joining me today is Mike Kus from Carsonified – good to have you on the show.

Mike: Good to be here.

Paul: It’s really nice. So, as the listeners will have gathered by now, we’re doing a whole series of little interviews off the back of ‘The Future of Web Design’ conference, where we can do all our interviews in one go, rather than spreading them out over time.

Marcus: Yay, we like this.

Paul: So Mike has just finished his presentation and there’s some excellent stuff in there, but you were quite kind of, what’s the word… You were quite harsh to the poor web design community and their obsession with details of technological stuff.

Mike: Yeah, maybe yeah.

Paul: You know, all of this “does it really matter whether your code validates”, not that you used that as an example, but I can’t remember what examples you did use, you did have a few didn’t you.

Mike: No, well I mean things like [a lot of debate to un-debate] which I come across and you see lots of times. You know, it’s a question that’s probably never going to get answered. I just come across it all the time still, and it’s like make up your own mind and move on.

Paul: I got the impression that you feel that perhaps as a community we’re a little bit petit, and overly concerned with minutia.

Mike: No, I mean, I love the web community *laughter*, no I do I love it and I love being part of it; it’s great. The funny thing is I started off two years ago doing web stuff, and I really do feel now two years on, that web design… I don’t see many differences to me between web and print now. It’s all the same thing to me, you’re just designing, you know. And I guess because I feel design is so important, I sort of maybe feel a bit left out *laughter* in conversations, because people don’t seem to talk about the design as much. And the reason that talk was called “Forgotten Web Standards”, I mean I know some guy heckled at the end saying about it not really…

Paul: “It’s not really a web standard.”

Mike: No, and I know that. It’s just a cool title I thought – it gets people thinking, and really the part that related to web standards was just because I feel like for a site, good layout and thinking about things from a graphic design point of view contributes to accessibility on a web site.

Paul: Yeah. And also to be honest, I mean what is web standards other than a set of guidelines and criteria. Equally there’s sets of guidelines and criteria about good design; use of colour, you know.

Mike: Well that’s it, yeah. To be honest it was really more just a good title, and I didn’t expect people to start analysing.

Paul: But they will!

Mike: Yeah I know, yeah; I should have known.

Paul: But I think you raised an interesting point, or a good point which is that we can get so hung up in the logistics of how web sites are built that we’re not always giving the attention to the design aspects of it. And even more specific than that, it’s the whole discussion about, you know, we spend a lot of time talking about usability and accessibility, but aesthetics do matter. We almost have this attitude in some ways that aesthetics are just skinning it afterwards.

Mike: Yeah, yeah I know, I agree. I think aesthetics do, well to me they matter. You know my opinion is just my opinion and other people have different opinions, and on a day like today you’re going to get people talking about the code side of things, and I just feel that I know what I know best, and it’s what I can bring to it, it’s what I can bring to the table, and people can take away from it what they like. Someone’s got to do it haven’t they.

Paul: It’s quite interesting, in your mind you don’t make a differentiation between the print stuff you do and the online stuff you do. Surely there are differences Mike.

Mike: Of course there are differences, yeah. But the processes I go through as a designer are the same.

Paul: Right.

Mike: I’ve noticed that much more; I guess of course there are differences. I mean for a start you’ve got to think about things differently in web design because you’ve got to make sure that people understand where you’ve got to go to click things; how you’re going to navigate your way through the site. But once you sort of know that, it’s sort of… Once you’ve built a load of sites and you know that, that’s just something that comes naturally to think about.That’s a different part, that part where you just get used to doing it, then ,he essence of the process is the same. Designing something for a web site, I find there are the same pitfalls and hurdles designing for print as for web. And the funny thing is, and I really feel now as well, that the coding side… I’m not the best coder in the world, and probably not the worst, but I’ve learnt loads in this past year, and I’m writing much cleaner code now than I was a year ago. I enjoy that too, and I know it’s important.

Paul: Yeah. But like you say there are lots of people discussing that, and not as many discussing the design side of things.

Mike: Yeah, and I totally read up on stuff about code; I know it’s important. I guess for me, sometimes I’d want to go in line and get involved in discussions about design, and I know you get Photoshop tips and tutorials don’t you, but that’s not really design.

Paul: Yeah. But a lot of that’s about using the tools of design rather than the principles of design.

Mike: Exactly, it’s all tools yeah. I’m interested in the principles and the ideas and imagination part, you know.

Paul: You talked in your presentation about design aiding the experience, you know; experience based design. I was just interested to hear you talk a little more around that, about how you feel that design can… In what ways can design affect the experience that a user has and what do you mean by the ‘the experience of a user’?

Mike: Well I guess I mean when I go to a web site, and for a start, at least if we’re just talking from an aesthetic point of view, if I return to, and again this is something that appeals to me, if I go to a web site and it gob smacks because it looks so beautiful, that in one foul swoop is my experience of it, you know? But I think there are other things more technical, and when I say technical I don’t mean in a code way, but in a technical graphic design way, you can enhance people’s experience just by… I like the idea of merging more, like you said, things I learnt at college about graphic design and where to make people look in a page, and how to highlight. Combining the technical bits of graphic design, what to highlight and what to push back, how to take people’s eyes in to the bits you want them to read, and then the slightly less important stuff, pushed back a bit, and combining that with an aesthetic. So if you’ve got a great aesthetic and you’ve really thought about where people are looking on your page, and how they’re going to follow through you’re site, to me those things combined is what I mean by designing for experience; a good experience. Because you could obviously design for a bad experience!

Paul: Well obviously, yeah, that’s easier! Another thing that interests me about your work in particular, and really people need to go and look at examples of stuff that you’ve done to grasp this, but you have a very distinct and obvious style; I think you do anyway. So I can look at the stuff you’ve done for Carsonified, and then even the stuff you’ve done here for Microsoft and there’s obviously a consistent theme to that. Do you think that having a very strong style creates problems sometimes when you’re trying to reach different audiences, and you’ve got to battle with your own style, do you find that a problem?

Mike: Well, this is something I find really interesting because growing up as a graphic designer and stuff, I was always someone who basically… For a start if you’re working for clients and you’re an agency, and you’re getting different jobs, you’ve obviously got to be able to create something completely different one day to the next, potentially. And the funny thing is I actually carried that through into my personal work, and I was like “I can’t do something like this because I’ve done something that looks a bit like that before.” But then you know how you can get famous illustrators who basically churn out the same stuff all the time and they get seriously famous, and one company gets them to do something, and another company…

Paul: They come to that person because of that style.

Mike: Exactly, and I think the only reason my stuff you’re seeing… if you looked at the Orchestrate site, that’s me turning my hand to something through a brief.

Paul: Yeah that’s true actually, yeah, because that has got a very different style.

Mike: I’m just answering the brief there, you know, so it is something I can do.

Paul: Sorry, I didn’t mean to imply you couldn’t, it’s a constant discussion isn’t it.

Mike: I don’t think you implied that *laughter* But it’s interesting, and the only reason I do bring my style into the projects you see that overlap each other is because I’ve had the freedom to do so.

Paul: Yeah, and I guess to some degree, the style that I’m exposed to is the style that’s aimed at people like me.

Mike: Yeah.

Paul: So the fact that you did the Microsoft stand here at ‘The Future of Web Design’, well actually it’s good that it’s got the same style as the other stuff that’s going on because it’s a style aimed at web designers and people like me.

Mike: Yeah, and another thing about doing stuff that’s similar, is you do get to get known for a certain thing, which in some ways I think “is that good or bad?” I don’t know, but I think I’m keen to make sure people know I can do different stuff. But at the same time I’m happy to be known for a certain style, because I think it’s sort of like an identity you get. And so I’d like to keep a balance there, but I definitely don’t mind being known for something that’s got a feel about it.

Paul: Yeah. I mean equally after saying that, which kind of brings me on to the next topic I want to talk about, is that the style that I typically associate you with is quite illustrative, you know, you’ve got this certain way of doing things. And then your set of slides for this week weren’t at all like that, they were very typographic, and you did talk a little bit about typography. We interviewed Mark Bolton on the subject of typography as well. I’m interested in your take on typography because you seem to use letter forms almost as design tools rather than necessarily as standard typography if that makes sense.

Mike: Yeah, well that’s interesting because when I did those slides, the reason they look like that is because I basically took a theme and I got interested with that, what’s his name… I can’t remember, a Swiss graphic designer, very famous I can’t remember his name now, it’s escaped from me, but it’s sort of Swiss modern graphic design, and I was looking at Swiss modern graphic design and some Russian constructivism stuff on Flickr, you know. And because when I was at college, that sort of graphic design, I was brought up on that; it was the first thing I was interested in, and because it was a graphic design themed talk, I used that as the style. And it just so happened that throughout it, the experiment with type and shapes and stuff was something that just happened in making those slides, and I suddenly realised I was getting something out of using type in a graphical way, it’s not just about the words, I mean a slide I like – my own stuff I love! *laughter* – that one that says (and I loved doing that slide and I think it looked great) was the one that said “buck trends and break conventions”, and conventions was all mashed up in different ways. There’s something beautiful about type though isn’t there, like huge letters, and I wish I could have seen those slides, because that screen was so big.

Paul: It looked spectacular, yeah.

Mike: There was a huge, massive letter N, you know. I guess now it excites me, type; I think it can be the basis for great design, not just in a traditional typography way, but actually great graphic design. I guess I think the whole type debate as in “where are we going to get all the fonts from”, or “what’s going to be the standard way of using them” – for some reason I don’t feel restricted by the web font thing.

Paul: No, it’s interesting. Mark was saying exactly the same thing as well.

Mike: It’s not something that bothers me, and I’m quite happy.

Paul: I mean a lot of the ways, certainly the ways you used them in the slides, we’re talking about using type as a graphic element in those cases, rather than necessarily to convey large amounts of copy; it’s a subtlety different thing going on there.

Mike: Yeah, yeah.

Paul: I was also quite interested when you talked in your presentation about a logo design that you did, and about how you were being stopped at every turn by the client effectively because they were saying “no, no, we don’t want to be associated with that etc.” So you then added in a strap line into that which you then built the logo around the strap line rather than the brand itself. Now, that was quite interesting because that gets into the realms of relationship between copy and design, and how the two things work together. And in that case, you came up with the strap line did you?

Mike: Yeah, I’m quite into… I mean, I don’t want to say it myself, but Ryan for example seems to think I’m quite good at copy – which is nice of him to say. It’s a way I work quite a lot, I’ve done loads and loads of logo / branding stuff in the past, and I did something, for example, for the Body Shop once. Basically I could do anything, and it was about raising money for a school in Kosovo to get it built, and they just wanted a poster. I just thought of a strap line anyway, because I could do anything I wanted. It was “building a future”, and that was all it was, and it had all these huge letters. Well it had “building a future” and the letters were all piled up and leaning against each other. I guess often the first thing I think of is copy whenever I’m designing something, especially if I’ve got a new site to design, I’m like well what are the words, what’s going on, what’s it about, is there a strap line, do you need one – you know – what’s written in the first paragraphs in the home page, is there something in there I can use to spark the idea for the design. I think copy in that respect has got a massive relationship to design. It’s rubbish trying to work with Latin text.

Paul: Yeah I know, lipsum, yeah.

Mike: It’s alright for that filling in a paragraph or something, but it’s nice to have that proper copy to hook your design on to it; it can be really helpful.

Paul: The thing that you intrigued me with is that you were going through things like layout, colour, typography, then you hit imagery, and you said there’s a whole presentation there. I want to know what the presentation is, I want to know what is it that you know, obviously there’s a lot of depth there that you couldn’t cover, and I’m just interested in that.

Mike: I think what it was, you’ve talked about my illustrative stuff already, so say you use that for the sake of argument right now because you could apply this to photography as well, I guess to me a site doesn’t have to be like you put it together; I don’t know, I’m going to put a picture here or an illustration there… It can evolve round an illustration from the very beginning. I know it’s a pretty one off site, but the Twiggy site for example, which is just a bit of fun, really quick, but that was just literally me, do what the hell I want, just have fun, and it wasn’t the most practical site design maybe, but you know that just literally was an image that built up and changed, and it was the basis for that site design. It wasn’t just in the site it was the site, and it had the huge letters in the background. I only had a short slot, and if I had more time I would have gone into why I felt it can be the basis for your site, not just something you add to it. Your site can grow from your photographs and illustrations rather than putting them into your site.

Paul: That’s a nice way of thinking about it, yeah. Because I do tend to start with the grid structure and the layout, and all that kind of thing, and then slot imagery in which I can see what you’re saying, you can miss a trick there if you’re not careful.

Mike: Yeah it’s funny I’m changing the way I work lately, and I was talking to Keir about this. I’m starting to think about stuff like you remember when Andy Clarke said he works from the inside out, and I’m starting to do that design wise.

Paul: Right, okay. You mean start with the detail or something?

Mike: Well start with something on the middle of the page. I just open a Photoshop document to start, and I know at one point in the page I’ll have like this… For example, I’m working on something at the moment, it’s got the planet Earth, and all I’ve got on the page is the Earth, I’ve got some bits coming off of it, and then I’m going to add this descriptive paragraph, and I haven’t got anything else on the page at this point, I’m just building it out.

Paul: Wow, that’s quite interesting.

Mike: Rather than thinking “ohhh”, and worrying about things like navigation afterwards, because it’s so easy to just go “no, nav-i-gat-ion”, and then I think no wait a minute what have I done, it’s literally just this autopilot.

Paul: Yeah, and to be honest that’s almost why, in the end, I moved on from design in my career, because I felt I was beginning to do exactly that, go on autopilot. So there is this need to find ways to refresh the way you’re working and stuff like that.

Mike: The funny thing is, it’s natural progression as well. It’s not a choice I’ve made, I just found myself doing this.

Paul: That’s good, that’s really good. You talk a lot about “I had a lot of freedom on this project; I could do what I wanted.” You said that several times in this interview. Do you like that, or do you like having constraints? Because a lot of people that are listening to this are going, “well it’s all well and good for him because he’s working on internal projects and he doesn’t have clients”, and that kind of thing, although you are doing client work now. So there we go, there’s a nice comparison between the client work you’re doing and the internal stuff. Where does your heart lie?

Mike: Yeah, I don’t know actually. Sometimes I hate having no restrictions. Sometimes, no restrictions is the worst thing in the whole world, I hate it. Sometimes it can be terrible, sometimes it’s great. Because if you’ve got no restrictions at all sometimes it’s so hard; that Microsoft thing, I was like “what the hell am I going to do, I haven’t got a clue”. For a start, I’ve never designed a stand before, let alone just an idea. I spent three days getting to that, just getting to the beginning of that idea. I literally produced nothing for three days. The fourth day I was like, “I think I’ve got something”, and that was hard because it had no restrictions because the whole point they came to us was because they wanted to do something different. So the pressure was on to think of something really different, and it’s hard when you can start anywhere. Sometimes it’s really nice to have restrictions, like that Orchestrate site was nice; I got back after Christmas, and John Hicks has put together roughly what had to look like.

Paul: Right. You had to carry on with his style.

Mike: Yeah sort of. I mean it did progress from that, but it had a logo and a colour scheme and a nice, tidy, neat… you know I just had to follow it through and it was nice, I enjoyed doing it. It was a nice break from “you can do anything”, which is actually harder I think.

Paul: Right, that’s interesting.

Mike: Much harder actually. I used to do music quite a lot, and in a way what was always helpful was restricting our instruments completely, and not having much to work with. Because it sort of sets you on a path at least, where as when you’re starting out and you can go any which way you want…

Paul: Yeah, it’s too open.

Marcus: It’s the starting part that’s the hard bit; it’s that initial creative spark. If somebody said “this is my idea, I want you to build me something,” then it’s like great I can do that. But, what’s better about when you’ve got, because I do a quite a lot of music as well (or did), it’s when you get something going and it’s good, that’s more satisfying than working on someone else’s work, but if it’s one of those days when it’s just not coming then, you know…

Paul: Which brings us on to what I wanted to wrap up with, which was you mentioned this slide about bucking trends and breaking trends and that kind of thing, and you advised against CSS galleries, you advised against Smashing Magazine’s trends for the last year, which people turn to for inspiration because they struggle to know where to begin. So if you’re advising against those things, which by the way I think is an excellent piece of advice, we asked Jim Coodle this as well, where does your inspiration come from? Where do you turn to if you don’t turn to that kind of thing?

Mike: I guess I do advise that, but I don’t like to sound like I’m telling people what to do *laughter*

Paul: Well if you stand on a stage…

Mike: I guess, yeah. But the funny thing is, I’ll be in a book shop… A year ago, for example, I was in a book shop and I picked up Jamie Oliver’s book, it was made of a nice sacky cover, don’t know if you’ve seen it, it’s got white and blue in it, it was beautiful. The graphic design and the layout was lovely, and I was like “oh I’ll buy that”, not for cooking, just because it looked nice, and I was like “I’m going to design a web site like that”. And someone on Twitter just said something about how they’d just discussed Mike Kus’s talk over lunch and how much of an idiot I am, and something about imagine your web site in print, which is what I said at the end.

Paul: Which I thought was brilliant, but he had problems with that did he?

Mike: Yeah, well he said it’s absolutely useless, different mediums, why would you do that.

Paul: It’s to take it out of context, and give yourself a chance to look at it from a completely different angle. It would be the same as projecting it huge on a wall or sketching it out in chalk, or whatever.

Mike: Well that’s it, exactly. It’s like what you said a minute ago about it’s so easy to go into autopilot with these things, and I think sometimes you need something to jolt your brain into looking at it a little bit differently. Because to me there are a lot of things on the web… Just imagine if you get a web site like your average one – it’s got the gradients all over it and everything, you put it on a magazine page; it would look weird. You have to ask yourself, why are you doing that. I know it’s a different medium, and I think we can all be clever enough to realise that, and there’s obviously bits I’m not going to say it’s got to be like a magazine, but I think it’s worth asking yourself those questions.

Paul: In the same way as in the talk, which I thought was really nice, was you had these amazing set of slides that had a very distinct look, and that was being projected massive on a wall, and yet you transposed that into a poster you gave away to people. So you were crossing those mediums and using inspiration from both which I thought was excellent; it was good. It went well didn’t it?

Mike: It was good, yeah I was pleased.

Paul: Excellent. Well thank you so much for your time Mike, that was really useful, and I think it will be very helpful for people. Especially freelancers that are stuck by themselves, and stuck in their own routine of working. It’s nice to hear how other people work, so thanks.

Mike: Cool. Cheers, thanks a lot.

Thanks goes to Gareth James for transcribing this interview.

Back to top

Listeners feedback:

APIs, source control and Ryan Carson

On show 164 Ryan Carson shared some more advice on running and building web applications as part of his ongoing series for Boagworld. Although Ryan’s advice is excellent, Boagworld listener Glen Bennett wanted to offer an alternative perspective over a couple of Ryan’s suggestions.

Hi Paul and Marcus, this is Glen Bennett from small business hosting. I was excited when you had Ryan Carson on the show talking about web application building, finally someone on the show who knew what they were talking about, however he cave out some information that was a bit misleading and I wanted to clear it up for your listeners, first of all he talked about spreedly.com and indicated that their fee is an alternative to the standard processing fees, in actuality it’s a fee that’s in addition to all the standard processing fees, there service sits in front of the processing gateway and therefore it’s an additional fee and there fee is not insignificant, in addition to that you would have to build an interface to their product. So there is some building cost at your end. I agree that building a processing engine is pretty substantial and something that you want to get help with if you possibly can there are packages out there anywhere from a few hundred dollars to a few thousand dollars that are actually pre-written source code that you put into you payment package, you have to do that pretty early in the process so that you can make sure that your user registration matches up with the processing system.

The second thing he talked about which is a source code repository, which is GIT hub, fantastic product and I recommend it highly, I think all developers should go and look at it, however the free service is primarily for a public repository so I don’t think he would have wanted to put DropSend source code into a public repository so their free service is not something that you’d probably want to use for your web application unless it’s an open source web application and there is a small fee for GIT hub but a lot of hosting packages come with SVN included for free so you might want to look into that, you can use GIT locally on your local system and then SVN them up to your free repository on the internet so you have a remote repository that’s free during development time. So there’s a couple of tips, a couple of corrections for web developers, I hope that helps and I want to thank Ryan Carson for the additional information that he had in his tips, I found it all very useful. Thank you very much.

Blog writing inspiration

Recently we received an email from Jon. He wrote:

I was wondering how do you find inspiration for your articles? How do you expand upon your initial idea and is there a process you go through when writing an article? How long do you spend writing an article? And lastly what do you think is the hallmark of a good article?

These are all good questions. The majority of blogs  have long since been abandoned by their authors. The owner either struggle to think of new content or finds running a blog more time consuming than anticipated.

I don’t claim to have all the answer when it comes to successful blogging. However I can share with you a few principles I work by…

  • Limit your time – I work best when I have a deadline. If I have too much time I over think things and pick at the details. This makes blogging  high maintenance and hard to keep up. Unless the content of a blog post is going to be used elsewhere (see Recycle below) I will never spend more than a couple of hours writing something. To me a blog is about sharing ideas, not writing a perfect piece of copy. I know I am not the best writer in the world and so make up for this by sharing ideas on a regular basis. In order to do that, I limit the time available for each post.
  • Keep an ideas list - Ideas for blog posts occur to me all the time and I have trained myself to constantly ask ‘would what I am doing make a good blog post?’ However, you can guarantee my mind will go blank the moment I sit down to write one. That is why it is important for me to keep a list of ideas. Whether you add them to a notebook or keep a list in WordPress, you need to make it as quick and easy to add ideas as possible. Also, when I add an idea, I try to flesh it out a little. Instead of just adding a title I also include a rough synopsis of what I want to cover.
  • Create an outline – Before I begin writing, I always create an outline of what I want to cover. I usually do this using Omni Outliner where I jot down random thoughts on the subject. I then sort those ideas into a logical structure. Once the structure is in place, writing the final post is much easier. This is because I know where I am going. It also ensures I lead the reader through a story, rather than throwing random thoughts at them.
  • Write first, edit later – Its easy to get caught up in spelling, grammar and structure to the detriment of flow. I tend to write posts in one go. I don’t re-read what I have written until the whole thing is finished. Stopping to check what I have written breaks my focus and leads to disjointed articles that take longer to write. Better to write the whole thing and then re-read the post afterward editing it then.
  • Write for your audience – Before I begin a blog post I always ask myself whether this will be of interest to my audience. Sometimes I indulge myself with personal posts, but most of the time I work hard to stay on topic and only write content that is focused on meeting my readers needs. This applies not just to the subjects chosen. It also to the style of writing and terminology used. For example, I try to avoid too much technical jargon because it may not be accessible to website owners. However, I don’t always succeed!
  • Write for scanability – There is a vocal minority in the blogging community who frown upon image heavy, list based, blog posts. However, I think there is a lot to be learnt from them. People who subscribe to my blog read a lot of other blogs too. With so much information to keep abreast of they rarely have time to read everything I write. I therefore write in a way that lets them get the ‘gist’ of a post without reading every word. Lists are one way to do this, as is the use of imagery. However, I also use headings and front loading too. Wherever possible make content easy to skim read. If you do not, users are likely to skip it entirely.
  • Ask for suggestions - I have found the best way to come up with ideas for my blog is to ask my readers. I actively encourage people to email me with questions, reviews or comments and these inspire ideas for posts. In fact the very question I am answering here would make a great blog post. Hmmm… perhaps I should stop before I waste the opportunity :-)
  • Ask your readers opinion – As well as asking for suggestions also ask for feedback. A good blog post does not have to be you sharing your words of wisdom with the world. It can also be asking a question and encouraging feedback. Some of the best content on blogs  can be found in the comments, rather than the actual posts. Try to write posts that encourage a dialogue rather than a monologue. Also if you do manage to spark a passionate discussion, followup with a second post that summarizes the views expressed.
  • Recycle – Finally, I am a great believer in recycling ideas. For example the answer to this question will appear on my blog, on the podcast and also will make a great Audioboo tip. Many of my best blog posts have either come out of a presentation I gave or a chapter from my book.

This is not a definitive set of guidelines and every blogger will work differently. However, this approach has helped me to continue blogging for over 4 years. I will leave it to you to judge whether the quality has remained high ;-)

Finally, if you are a regular blogger I would love to hear your thoughts on keeping your blog fresh. How do you come up with ideas and ensure the quality of your posts? Let us know by adding a comment below.

Back to top