Tag Archives: API

130. Air

Posted in Classic shows on by Paul Boag

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

Download this show.

Launch our podcast player

Housekeeping

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

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

News and events

Designing for emotion and flow

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

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

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

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

7 essential guidelines to functional design

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

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

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

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

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

15 companies that really get corporate blogging

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

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

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

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

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

Learning from signage

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

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

Some of the gems he discovered include:

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

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

Back to top

Interview: Johnathan Snook on Adobe Air

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

Johnathan: A pleasure to see you there as well.

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

Johnathan: Absolutely.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Johnathan: No, absolutely not.

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

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

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

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

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

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

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

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

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

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

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

Johnathan: Awesome. Thank you very much.

Thanks to Aaron Cooper for transcribing this interview.

Back to top

Listeners feedback:

Getting a feel for accessibility

Our first contribution is from Kenneth and is about accessibility:

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

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

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

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

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

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

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

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

Turning problems upside down

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

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

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

Problem: You want to increase traffic to your website

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

Some ‘off the top of my head’ Solutions:

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

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

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

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

129. Conferences

Posted in Classic shows on by Paul Boag

This week’s show sees the return of Ryan and Stanton, holding the fort while Paul and Marcus sun themselves on holiday. .

We’ll be talking about taking your first steps into the world of conferences and answering your questions about font smoothing and browser emulators

Download this show.

Launch our podcast player

News and events

Release of Firefox 3.1 Alpha

Last Wednesday saw a new developer release from the Firefox team. Firefox 3.1 Alpha, or “Shiretoko” is now available for download. Shiretoko is built on a pre-release version of the Gecko 1.9.1 platform and introduces several new features for you to play with.

  • Web standards improvements in the Gecko layout engine
    • They don’t actually say what improvements, so I guess we’ll have to trust them with this one but from what i can gather, they’ve added a lot more CSS3 selectors like :nth-child, the CSS3 “word-wrap” property, CSS3 columns, text-shadow, box-shadow, border-image and more.
  • Text APIfor the <canvas> element.
    • This is a quite detailed API for drawing vector text within the canvas element, and is sure to set the hearts ot typophiles beating just a little bit faster.
  • Support for using border images.
    • The design community has been screaming for this for as long as I can remember, the ability to specify images as borders. The whole rounded-corner craze might be slightly out-of-style now, but I’m sure we’ll see some innovation with this feature very soon.
  • Support for JavaScript query selectors.
    • Now I’m not completely down with the javaScript kids, so I apologise if i don’t get this quite right. But the query selectors seem to be a way to target specific selectors instead of having to filter a result set provided by the getElementsByTagName() call, you can now do the filtering before you execute the query.
  • Several improvements to the Smart Location Bar.
    • When you start typing a URL, Firefox starts giving you options to choose from, you can now filter those results while you’re typing.
  • A new tab switching behaviour.
    • Pressing Ctrl+Tab now gives you a filmstrip style overlay which lets you quickly navigate to your open tabs, and mimics the similar feature in most operating systems nowadays.

The alpha is available from the Mozilla Developer Center.

A List Aparts’ 2008 Survey

It’s that time of year again, the A List Apart team have unleashed their 2008 survey “for the people who make websites”. The survey gathers a massive amount of information, with around 33,000 people taking part last year and covers a wide range of questions covering all aspects of our beloved industry.

The survey covers everything from Age, Gender and Geography to Education, Employment, Vacation (holidays to the rest of us) and those oh-so-important salary details, how many hours worked and your methods of staying upto date with what’s happening in the industry. The data gathered is compiled into a comprehensive, yet easy to read report, and they also provide the raw (anonymous) data so you can do your own number crunching if you so wish.

You can also have a look at the 2007 survey results if you wish, and Paul and Marcus will no doubt be covering the results of this years survey when they’re published. So this is a call to arms really, help improve this survey by taking part at Alistapart.com. We took part, so should you!

The Future of Web Font Embedding

The last news item is a blog post by Richard Rutter on the future of web font embedding. With both Safari and Firefox supporting web fonts in their 3.1 releases, and development releases of Opera, it could be time to start playing with web fonts.

Richard starts by defining web fonts as using the @font-face rule to point to regular TrueType or OpenType font files on a web server, this is to clear up any confusion with Internet Explorer’s proprietary web font support with uses EOT font file, which is also a way to wrap the fonts in DRM, which i think might severely hamper any efforts to bring web fonts into the mainstream.

The font foundries and type designers seem to view web fonts as the death of their industry, insisting that their revenue streams will be destroyed by piracy and free font embedding, rather than seeing this as an opportunity to really boost their industry.

There’s nothing to say that the @font-face rule has to point to a locally hosted font file, The opportunity exists for the font providers to host the fonts themselves, and charge for their useage. This saves us, as designers, from having to install fonts on the machines we design on, and will undoubtedly allow us to choose from a much larger selection of fonts which can be switched quickly and easily.

Back to top

Feature: A Year on the Conference Circuit

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

Back to top

Listeners feedback:

Font Smoothing

Steve Writes: I have been listening to your podcast. I really like it.

I jusr want to ask a question. On mac, the fonts seem to be all thicker than windows. What setting are u using? I’ve been using best for lcd. Today I changed to automatic, and the fonts were much thinner. It looks more alike with windows fonts.

Do you think this is a big problem for mac users? Since the fonts will look different. Which setting do you think is the best for web designer on macs?

The difference of Mac fonts compared to their Windows counterparts originates from Apple’s legacy in desktop publishing and graphic design, the fonts are rendered in a way which would give a closer approximation to how they would look when printed.

Mac’s use a specific font wrapper called dfont, this contains extra information to preserve certain features like font outlines and hinting which can then be rendered more accurately on-screen meaning that in general, fonts look better on a Mac, whichever smoothing method you choose.

If you’re a designer, I’d heavily recommend testing your design in as many different browsers as possible, but also on different operating systems as well. I work primarily on Windows Vista (don’t shoot me) and have a dualscreen setup, my second screen can be flipped over to my Mac where I can test in Safari, Firefox and Opera on Mac, I also run a Ubuntu system to test in. Rather than running a standalone IE6 build on vista, I run a full XP virtual machine with IE6 running natively as I just don’t trust the standalone builds.

One of the main things you’ll have to accept is that your design might not look identical on any combination of browser or operating system, and because you’re probably designing websites to be viewed by other people, I’d recommend keeping your font smoothing to the default setting of “automatic” which is most likely going to be the case for your target audience.

Browser Emulators

Andy Asks: Hey guys. Been listening (on and off) for a while now and love the show.

I was wondering if there is such a thing as a browser emulator, software that allows you to see your site as it would appear on IE, Firefox, Safari, Opera, etc. If there is one, is it total crap and not really work.

The answer to your question is yes, there are several websites that can provide you with this type of service.

One of the more popular sites is Litmus which is an online emulator that validates your HTML and CSS as well as presenting you with a screenshot of your website loaded in up to 23 different browsers across various operating systems. It can also provide you with a report of any compatibility issues it has come across. However there is a fee to get any real use out of this service.

What Litmus does it actually does very well; however there are a couple of major draw backs I’ve found:

  • You can’t have an interactive experience – Not all issues can be seen from a screenshot and more often than not you need to just take your mouse and navigate around the site to find problems.
  • You can’t test javaScript – You can’t see javaScript animations from a screenshot.

As Paul said in the previous question, there’s no substitution for the real thing, which is having multiple setups with multiple browsers installed. However that’s not always a viable option especially for freelancers working from home who don’t have the budget (and space…) to have several machines and licenses for operating systems needed for testing, in which case sites like Litmus are invaluable.

My advice is if you can test on the real thing, do, if you can’t then take a look at Litmus.

Back to top

128. Details

Posted in Classic shows on by Paul Boag

On this weeks show I’m accompanied by our Producer Ryan and Researcher Stanton. We Interview Dan Rubin on the Details of Design, and answer your questions on managing a bigger team and terms and conditions.

Play

Podcast: Download (23.0MB)

Download this show.

Launch our podcast player

News and events

Silverback Launches

This week has seen the release of Silverback, the highly anticipated app from the guys at Clear:Left. After months of speculations about what Silverback actually was, the “spontaneous, unobtrusive, usability testing software for web designers” is finally available for download.

We’re sure a majority of you know all about Silverback, but for those of you who don’t, Silverback, which is available exclusively for the Mac, is Clear:Left’s answer to convenient usability testing on the go. Utilising the iSight and screen capture facilities of the Mac, user’s experiences can be recorded and reviewed at a later date, taking away the costly and often difficult to setup up approach of using specialist equipment like multiple camcorders which can lead to hours of time spent trawling through video footage.

PatternTap

Whether you’re a designer or developer, there are many occasions where you go on the hunt for inspiration in interface design. Normal CSS Gallery sites give you great examples of full site design, but usually don’t focus on the small details of interface design. The only site i’ve ever been aware of is Christian Watsons “Elements of Design“, which is a great resource showing examples of elements like comment forms, calendars & date pickers, footers, image captions and so on.

There’s a new site I’ve come across this week called PatternTap.com which also wants to collect these design patterns and focus on specific elements of design and to help you to reference, collect and organise them for your own needs.

PatternTap is shaping up to be an absolute goldmine of inspiration, and looks like it will build into a large resource of design element exmples. There’s currently 46 collections, everything from 404 pages, audio players, pagination and search boxes. It let’s you create your own “lightbox” style user sets, so you can keep your favourite examples organised for future reference.

I’ll definitely be adding this to my toolbox of design inspiration links, and recommend you give it a look too.

Google App Engine Update

This week also sees the release of a small update to the Google Apps Engine. The Google Apps Engine allows developers to build applications on Googles own infrastructure. I have to admit that the Google Apps Engine is not something I’ve developed with personally however that doesn’t stop us talking about it so let’s run through the list:

  • Firstly you can now have up to 10 apps on your account as opposed to the previous limit of three 3, the Engine also limits developers to 1000 files per application, so the increase in the number of apps you can now have is a welcome addition.
  • Time windows for Dashboard graphs: Zoom in on the data in your dashboard to get a more accurate picture of whats going on. You can zoom in to see graphs for the last 24, 12, and 6 hour periods.
  • Log files can now be downloaded in plain text.
  • And finally you can send email as the logged in user: If you’re using the users API, you can now send email from the email address of the currently-logged-in user were as before it was only possible from the administrators account.

S3

So some of you may be aware that Amazon’s S3 service suffered from some 6 hours of downtime recently, this echoes the issues of service availability that happened back in February.

For those of you who don’t know, the S3, or “Simple Storage Service” is a scalable and inexpensive data storage infrastructure, which allows you to store and retrieve any amount of data.

So this is a fantastic idea – in theory, it means that if you’re developing a large website or web app and need lots of storage, you don’t have to pay for huge webhosting plans with lots of physical diskspace, you store your assets “in the cloud” as it were, and you’re charged based on how much storage space you, and how much bandwidth you consume.

Lots of large sites rely on the S3 service for their storage needs, Twitter, BaseCamp and SlideShare to name but 3 and the recent downtime has raised the age old issue, “are we putting all our eggs in one basket?” Jonathan Boutelle put it best in a recent blog post, stating “When S3 goes down, the internet goes down”. Aral Balkan also wrote recently urging people to have contingency plans in case events like this happen again, stating that the Open Source Google App Engine SDK could be the answer.

Back to top

Interview: Dan Rubin The Details Of Design

Paul:Joining me today is Dan Rubin who I recently saw at the @media conference. Good to see you or speak to you again Dan should I say?

Dan Rubin:Good to speak to you Paul.

Paul:It was good to meet up with you at @media. It feels like a long time since we met up and it was great to hear you speaking there. That was a first for me.

Dan Rubin:Thanks. It was a privilege to be able to help out Patrick it being very last-minute.

Paul:Oh was it?

Dan Rubin:He sent me an email about two weeks prior saying someone had dropped out and of course I wasn’t going to say no.

Paul: laughs

Dan Rubin:It’s been over 10 years since my last trip to the UK, so it was a great opportunity.

Paul:Cool. Well I have to say considering you only had two weeks to put together the presentation, it was truly phenomenal. It was an excellent presentation and I really enjoyed it. You were talking about ‘design is in the detail’ I guess was the kind of subject you were tackling?

Dan Rubin: I’ve been talking a lot lately about the level of detail, the attention to detail and the design and I’ve done a couple of presentations with Brian Veloso over the last year on that same kind of topic. This was an extension of that injecting some of my own little personal preferences into the talk and got to cover things like typography and some of the simple practical things that you can improve very easily that result in a big improvement and typography, and little tricks in using grids, not on how to make them but how to actually implement them and how they can help workflow and bring things together and make layouts tighter and better without
that much effort and the same thing with digital transformations in photography and a lot of pixel detail that a lot of people don’t notice and its all about the subtle level of design.

Paul:I got this vague feeling that as you were talking you were a little bit appologetic for some of these manushi that kind of individually you sit there and go ‘how is anyone going to notice that?’, but accumulatively they have this effect on the design don’t they?

Dan Rubin:Well that’s the thing. It comes down more to feeling than seeing but its about as a designer what you feel with your eyes more than anything else and how that translates to what users or viewers or readers also feel but since they don’t know it is there, they are likely to never actually see it, but as a designer you’ll know it is there, you can see it, and the trick is to get it to the point of you can still see it but it is not really visible it is just felt.

Paul:A subconscious expression?

Dan Rubin:Yes.

Paul:You covered loads of tips in your presentation and there was some excellent stuff in there but if you had to pick out one that has the biggest impact on a design, which of the many things you talked about would that be?

Dan Rubin:I think what it would be is to really underscore trusting your eyes and it seems a really simple concept and whenever I put that up on the screen you get giggles from the audience. The truth is many of us don’t actually take the time as designers to just step away and look at what we’re working on. It doesn’t matter whether it is for screen or print. The medium is a material at this point and it is just having faith in what you see and what you feel. That’s what being a visual creative is all about. It is trusting what you see. It is the same as being a good musician comes down to trusting what you hear and sometimes we forget that, and we start getting into designing based on the rules or how we think we are supposed to do things or designing on technical limitations alone. When we do that we stop using our eyes.

Paul:It’s interesting in the presentation you talk quite a lot about some of the details and the mechanics of design. You were talking about font sizes going incrementally up, your heading and your sub headings and there being a mathematical relationship in their sizes. You talked about being consistent in your margins and padding and how all those things inter-relate. Are we saying that design is something that can be learnt and it is a mathematical thing and it’s a set of rules that you just adhere to? Or is there some sort of underlying artistic thing, some people just know how to do it and it’s not something that can be learnt. What’s your opinion on it because I get mixed feelings from you? On one hand you talk about these rules and on the other hand you talk about stepping back and looking at your design and it feels more kind of arty-farty if that makes sense!

Dan Rubin:What a load of questions and rightfully so! It’s something I’ve written about before years ago and had a bit of back and forth on the topic with Paul Scrivvens of 9 Rules, with him arguing that you don’t need any natural artistic ability because he didn’t think he had any, yet he was clearly doing things that looked good. I was arguing the opposite but when it comes down to it it’s really not something that you can say definitively either way. Just as there are people who naturally seem to be good musicians or good athletes or good at math and programming, there are people who seem to naturally be good at design and any kind of creative endeavours. It is really difficult to tell whether that seeming innate ability has come from something that happened in very early childhood development or if they were born with it. I do think that however difficult it is to put a finger on it, once you get old enough, especially to the point w here probably most of your listeners are doing what your doing for a living already or you are thinking of changing from one thing to another, you’re past that point of subconscious development where you need to put conscious effort into something and you can. I think you can be trained to do most of the things designers do. You can even train yourself to see the way that creatives see. The older you get the harder it becomes to incorporate into the way you view the world. That is a big part of it. That comes down to sometimes the different personalities. How hard is it to put a finger on what makes you ‘you’. I would say as a teacher, and I spend a lot of time teaching high school students over here about music as well, since that’s my other passion, and it’s specifically not just playing music but it’s specifically singing which is one of those things that you can either carry a tune or you can’t. I’ve also seen kids who can’t carry a tune when they start singing learn how they train themselves. They learn the proper muscle memory, and it’s amazing to see what people can actually accomplish when they put their mind to it. If you are listening out there and you want to become a better designer or maybe you’re not a designer and you’re a programmer or a web standards junkie, and I can say that because I am one too, and there isn’t any reason that you can’t become a better designer, or become a designer from scratch if you realy really want to.

Paul:I think that’s really important to say because I think so many people are intimidated from getting involved in design because there’s almost a bit of snobbery. If you’re not artistic, you’re not artistic there’s nothing you can do about that. I personnaly don’t believe that that’s true. Like you say I think there are some people that are naturally inclined that way but I think a lot of the principles that you were talking about in your presentation pretty much anybody can pick up on and do, which is what encouraged me so much hearing you talk.

Dan Rubin:That is one of the reasons why one of the reasons I say one of the most important thing is to trust your eyes and that’s instinctual. These rules, as a good teacher you have to teach these rules. When you start learning any discipline the first things that you are taught are the basics.The basics are things that many people, once they learn enough, don’t conciously think about, but what you find if you deconstruct their work is that they are doing them, they have incorporated into their flow into their process so it’s second nature to them. What we think of as instinct is really just experience.

Paul:Yeah. One of the things you did mention in the presentation that grabbed my attention is you talked a lot about texture and adding more texture to your design and about how that creates a real feel. There seems to be a slight skism, I don’t know if that is the right word, but like 2 different camps in design at the moment. People like yourself, Elliot Jay Stock is another example that does very rich, very textured design. It’s absolutely gorgeous. At the other end of the extreme you’ve got people like 37signals doing this minimalistic functional design. How do you feel those two sides fit togeth
er? Is there a role for one or the other or have they both got their place

Dan Rubin:I really think that both have their place and more than that it’s popular to create divisions. Not just these days, if you look at any industry that spends a lot of its time looking at itself, like we do, you start to find reasons to create little clicks within it or factions or what have you. If you just ignore those splits that happen because we spend way too much time looking at what we do and try to deconstruct it and answer that question of ‘why’. What you find is that it’s all the same thing. When I talk about texture it is important to understand that it doesn’t just mean rough or ??bulap or brick. Texture can also mean smooth and polished and speaking directly about 37signals for instance. I’ve used their apps and I’ve loved them since the first time they came out. If you look at the first versions of Base Camp and Backpack, before their incremental re-design they’ve actually added the little drop shadow over time. If y ou look at it as a designer you see the flaws in the way they’ve done it because it doesn’t look real and it just ends at some edges, it has hard edges, but that’s not the point. The point is they added it because it created a separation, they added it because they felt it needed it. The rest of the interface doesn’t need any other texture because it isn’t supposed to have a feel to it. It’s actually supposed to totally get out of the way and there are different approaches to minimalism. You can use minimalism in subtle detail where you add in things like I was showing in my presentation, or you can use minimalism where you keep taking away and 37signals apps feel right, they always have felt right to me so as far as I’m concerned that means they’ve hit the nail on the head. It shows when you see people trying to recreate the application interface and theat style that 37signals uses and they get stuck in this pattern of adding things, like they feel ‘well, that’s 37siganls l ook so I think we have to add things to make it better, to make it better, and they never work as well because it’s not just about that. So the answer is, and I try to underscore this when I talk to people about this or present about it or even write about it, as much as these things can be presented as rules and definitive this is the way to do something. the fact is you have to do what works best for you and your particular project or circumstance or situation, and you also have to be open to the fact that what works for you right now might change. It might be different next year, next month or next week, and being able to adapt to your situation as a designer specially is really important, because you have to adapt if you’re doing client work, you have to adapt from project to project, because your style might work for one client but you might need to tweek your style to do what’s best for another client. If your working on your own applications, what works for your users now might not work for your users once they become users that have used your app for a year and they’re experts now.

Paul:You talk about tweaking your style. How easy is that, do you think, to do in reality? I mean I’ve got a very strong style in my design, and I really struggle and I look at someone like Cameron Moll’s style and I just love it. I love the light-handed feel, he’s very delicate, beautiful design, and I wish I was more like that, but there is no way I can make myself become like that, or can I? Is there a way of changing your style?

Dan Rubin:I think we’re all naturally mimics. I’m not going to dig into my opinions on human adapability too much. I spend a lot of time thinking about that as far as evaluating how people use things, whether it’s interfaces or products and it’s interesting to start to see those patterns but you can see it on a global scale too. Historically human beings are species very, very adaptable and that happens on macro and micro levels. If you want to adapt your style you can. You look for the inflences you want to model yourself after. This is just how people learn to be designers when they’re starting out, or learn to be artists. When I took my first watercolour and oil painting classes when I was 11 or 12, the way we learnt was to recreate examples that were painted by masters. So learn how to use the brush strokes they use, to learn how to mix colours the way that they use them, to learn how to use the tools the way that they use them becau se you only discover your preferences and your style by mimicing, copying others. You find out what works and you decide what works for you and what doesn’t. So changing how you design and how you see is not necessarily easy, because at a certain point you’re reprogramming muscle memory and from my experience with singing I know how difficult that is to do. Once muscle memory has been built up to the point where you don’t think about it and you just react, it’s very difficult to break that down and re-build it. Difficult does not mean impossible.

Paul:That’s really interesting that you say that because I’ve always very much struggled to design in any other way than I already do, but I obviously need to push myself in this area. Talking of 37signals, I’m sure you have been following their recent post and various reactions to it about skipping Photoshop, and how they move straight into building with HTML and CSS and I just wondered what your opinion was on that.

Dan Rubin:I know I’d get roped into this discussion somehow. There has already been some great responses from people like Jeff Croft and Mark Boulten to the 37signals post on that, and even interestingly enough a follow-up post sourced by 37signals announcing that they were looking for an additional designer for their team that can push them into different directions that they havent been going naturally. That comes back to the whole adaptability and willing us to change and being open to it. In the argument itself I can’t say I always start in Photoshop or Fireworks or some sort of visual tool. I think Jeff said 37signals starts with a visual tool, it’s pencil and paper. I think even if your tool is a marker on a whiteboard to a certain extent everybody tends to start there, even if you don’t start there you start with a picture in your mind. So there’s some level in the process where a visualisation is occuring, if that’s fair to say. When it comes down to it why does the tool that you’re using to visualise really matter? It starts in your head if you’re a primarily visual person you can either realise that vision by programming it and seeing it in the browser or using Photoshop as a tool. All of these are just tools when it comes down to it, they’re not the end result. They’re just part of the process. I’ve done both. I’ve built straight from XHTML and CSS many times and I do tend to find that most visual designers that have weighed in on this conversation also find that in my opinion the result ends up being more simplistic. that’s not necessarily to say bad. It’s just different and you’ll find that the tools that you use as a visual creative influsence the end result because that comes down to constraints. 37signals of course is huge on constraints and you do save time when you’re doing straight HTML and CSS, you skip a lot of the temptation to play around like I know I do with layers and layer setting s and percentages of opacity. I spend a lot of time playing when I’m in Photoshop, I don’t think that’s bad. That’s part of the creative process when using that tool. When I used to paint which I havent done in way too long. I would play with my
palatte, when I was doing oils my palatte and my palatte knife was tool before I got to the canvas, and I would play with mixing my colours ‘and that’s not quite right’ and ‘wait and go over here’ and sometimes you get it onto the canvas and it doesn’t look the way you want it to and have to wait for it to dry and then you paint over it because that’s what you do with that tool. When you’re doing watercolours you don’t have that forgiveness of the tool, you have extra constraints, so you don’t experiment as much putting it on the paper, putting the paint to paper because you know once it’s dried and there you can’t go back. you can’t paint over it. So you adjust your style depending on the tools and the workflow and it’s all good, it ‘s just all different and you have to I think do yourself a favour and experiment to find which works best for you and don’t be afraid if you’re working on a project and you think ‘this doesn’t feel like it needs a lot of subtle gradients and lines and shadows and Photoshop work. I might just be able to build this without using Photoshop at all’. So do it if it feels like that will work best go that route. If you feel the opposite go the other route. If you feel like it should involve a lot more natural media pull out your watercolour pad and paint something and scan it in and incorporate that

Paul:It really down to the right tool for the job thought process.

Dan Rubin:Exactly. The thing that 37signals does really well is stick to their guns. They state their opinion so firmly that people can easily interpret it as law and I think that’s very important. In any industry it’s very important to have people who do that, who can stick to what they believe so strongly and apply it so universally that it creates this set of rules, but it doesn’t mean that they have to be followed or cant be partially followed or bent or broken and you find just as much as 37signals is enfatic about skipping Photoshop. There are other people who would never in a million years go straight to HTML and CSS, doesn’t mean that either camp is right.

Paul:OK. One last question just to wrap this up. We’re running out of time but there’s something I wanted to ask you which is: We’ve been already talking about that there are people that may be want to learn to be better designers, to find their style and to move into this area, perhaps they’ve been a developer background and they’ve been previously put off exploring design because they have been made to feel inadequate. What kind of resources would you encourage people to look for or look at in order to get going I guess?

Dan Rubin:Whether you’re starting from scratch or just trying to improve what you already have it’s important to touch on a couple of specific areas, and those are typography, layout and working with colour. This applies just to design because it’s worked whether you’re designing on the web or designing in print or branding or whatever you’re doing. Typography is kind of my first love with design and if you want to learn about typography you have to go out and buy ‘The Elements of Typographic Style’ by Robert Bringhurst. It’s the bible for typographers. It’s really easy to read too because he’s a well respected Canadian poet as well. He just happens to be an excellent typographer and book designer, so if you are in a rush, you cant get to the book store or Amazon right away Mark Boulton’s series ‘Five Simple Steps To Better Typography’ is a great place to start as well and he references a ton of other good resources. Start there if you a re going to start online but no matter what buy ‘The Elements of Typographic Style’. When it comes to layout there are a lot of things that you can learn about layout but you’ve got to learn about grids, even if you never use them. Do yourself a favour of learning and I’ll reference Mark again, actually I’ll reference Mark in all three of these. He’s got great starter tutorials about this stuff so ‘Five Simple Steps To Designing Grid Systems’ is really a great place to start. Cameron Moll has written about Griding The 960 and read up over on Khoi Vinh’s site about grids. ‘Grids Are Good’ is a great demonstration as well, and if you want to get a physical book to hold ‘Grid Systems In Graphic Design’ is a great, great phyisical book and I think it’s important to as web designers to also reference ‘Print’, because Print is where all these design rules come from and typography rules and colour rules, so learn from these different implem entations and you’ll figure out things that you can do that you didn’t think about, because you haven’t seen them on the web. So ‘Grid Systems In Graphic Design’ is by Josef Müller Brockmann I believe would be the pronounciation, look that up. Colour, and this is something that’s very preferential maybe but read up again Mark Boulton’s ‘Five Simple Steps To Designing With Colour’. He’s great at teaching, he’s great at communicating all these things. Also play around with some of the online tools like Adobe Kuler, is fun. Look at what other people are putting together, look at combinations, again feel is important. Whatever feels right for what you’re trying to do. Another cool tool is Colorjack. You got a couple of ways of mixing colours and it’s really, really cool to look at. Finally on the topic of colour whenever using colours in an interface please be aware of the different types of colourbl indness that exist, and there are lots of tools online. Photoshop CS4 will have some tools built in as well but there are plug-ins that you can get right now for all sorts of tools and online tools as well that allow you to see what you’re designing, or even just a colour palatte. See them through the eyes of someone that has these various colourblindness afflictions and make sure that whatever you do doesn’t render something unuseable to what ends up being a large percentage of the viewing public when it comes down to it.

Paul:WOW !! That’s a good set of resources !! My word.

Dan Rubin:You didn’t think I’d be that prepared did you?

Paul:That’s a superb list. I certainly didn’t know about all those posts from Mark Boulton. there was some great stuff in there – Thank you very much Dan. Just to say that Dan’s talk at @media will be no doubt going live at some point and you’ll be able to download it and listen to it. Definitely do that, it was superb. So check that out. You will be able to go the shownotes for this episode for all those links that will be useful as well. No doubt you won’t be able to remember them all. Dan thanks for coming on the show, it’s very much appreciated and we will get you back on in the future.

Dan Rubin:Thanks very much for having me Paul. It was a pleasure.

Thanks to Sarah Galley for transcribing this interview.

Linkage

You can find Dan Rubins site, Superfluous Banter here.

Typography
Layout
Colour

Back to top

Listeners feedback:

Managing a Bigger Team

Jon asks: We are a company of 4 people – myself (owner, design lead and general business development/project management person), one designer, and 2 developers.

We are hopefully about to merge with a slightly larger company in a neighbouring town who have slightly more staff than we do (7 in all), and who have more of a project management structure – 2 project managers, using the services of 1 designer, 3 developers, and 1 designer/developer. I would end up as owner/MD of the enlarged company.

My question is really about project management? What do you think is the best organizational structure for a company of 11 people? I was feeling pushed on the project management side before this merger came along, and the merger will bring 2 project managers with it. How does Headscape do it for example – I think you have project managers there – do the designers and developers report to project managers, or do the project managers pick from a pool of design and development resource as required? What are your thoughts generally on the whole project management side of things.

A-ha… this is part two to a question I answered a few weeks back relating to pricing work after two companies merge. I wanted more detail at the time and now I have it!

Comparing to Headscape, we have 4 designers, 4 developers, 3 project managers, 2 business development/analysts and 1 lazy good-for-nothing called Paul … seriously though, Paul effectively markets Headscape and I have to say he’s rather good at it (ungrits teeth…)

Following the merger Jon will have a team of 11. As he is new MD, I think it is imperative that he much reduces the design and PM aspects of his role and concentrates on bringing in business as there are quite a few more mouths to feed.

That leaves roughly 3 designers, 5 developers and 2 PMs. Depending on the work you’re doing I think that is ok especially considering Jon can bolster both the design and PM groups if needed.

Regarding the allocation of work, project managers should rule the roost. Full stop.

It is their job to manage resources. Delivering projects effectively and on time means that they must know that they are in charge regarding who does what and when they need to do it by. A certain amount of fitting the right person to the job should be done but generally, the rule should be that the next piece of work goes to the next available person. This would be particularly useful advice in a merged company where it would much easier to keep going back to ‘your’ guys because you trust them.

One thing that has worked really well for us is to set invoicing targets for the project managers. We don’t operate performance related targets but it still really helps to focus minds on hitting milestones at the end of months.

Terms and Conditions

Adam writes: I am developing my own web application. In summary, it’s a site with user submission of content in a social networking format with video uploads. Anyone can register an account.

I of course have to try and write Terms of Service for this and I am getting stuck. I am wondering what Headscape uses, especially for Getsignoff, and whether you found a pre-written terms of service, or had a specialist write one.

What’s your solution to the problem, and what should / should not be included.

I have to confess to conferring with Headscape’s fount of all legalese knowledge on this – our MD Chris Scott. I tried to get him on the show but he’s still a little jittery after the last time all those years ago… anyway, Chris put together the TOS for Getsignoff and these are his thoughts on it:

For Getsignoff I looked at the TOS of other online services like Harvest, Basecamp, Youtube and Flickr. I’m not a legal person, but this gave me enough material to be able to identify the key issues that I thought we needed to cover in our TOS.

I assembled this into a brief for our legal adviser that was part overview of what we wanted to achieve and part draft TOS using adapted clauses from other TOSs.

Our legal adviser pretty much re-wrote what I had given him but this was from a position where he had a good understanding of how we wanted Getsignoff to work.

The bottom line with this sort of thing is that you really need to get a professional legal person to assist.

Back to top

 

124. HTML 5

Posted in Classic shows on by Paul Boag

In this weeks show we explore how to create better online surveys and Lachlan Hunt joins us to discuss HTML5

Download this show.

Launch our podcast player

Watch the behind the scenes video (Part 1)

Watch the behind the scenes video (Part 2)

News and events

Removing Microformats

The story that has generated the most email this week is the BBC announcement that they will be dropping the hCalendar Microformat. This decisions comes because of long standing accessibility concerns over the machine readable content within that particular Microformat. The problem is that code meant to be used programatically is potentially read out to screen reader users and displayed as meaningless tooltips to sighted users.

The decision of the BBC to adopt Microformats was a huge boost to the movement. Equally the rejection the hCalendar is a blow. However, it is important not to get this out of proportion. Remember, they are only rejecting a single Microformat not the whole approach.

The other thing to consider is that the BBC is a public service organisation with an incredibly high obligation to ensure maximum accessibility. In many ways they are in a unique position. Although it maybe appropriate for your organisation to pull hCalendars too, it should not be based on the decision of the BBC.

My advice is as follows. If you already have hCalendar information on your site I would probably leave it (dependant on your exact circumstances). The Microformat community is working on a solution and I would implement that rather than removing hCalendar entirely. If however, you are not yet using hCalendar then I suggest you hold off until an updated specification is released.

Becoming employable

In the past we have spoken about becoming a professional web designer. I know that many people who listen to this show or read the blog are students. You are concerned that the skills you are being taught are out of date and will not improve your employment prospects. How then do you become a more employable web designer? What skills do you actually require?

Andy Rutledge tackles this subject in his post "the employable web designer". Without a doubt it is the best post I have read on the subject of web design career development. I highly recommend you read it.

The thing that impresses me is that it looks beyond the obvious design and technical skills required to be a web designer. It also tackles the business and communication skills too. He really drives home quite how wide an understand a good web designer has to have.

My only criticism is that it could feel demoralising. You may read the list and think it is an unachievable aim. However, I don’t think that is the case. What Andy outlines is the optimal requirement of a web designer, rather than what is needed to get your first step on the ladder. I certainly did not have all of the attributes listed when I started.

All we need now is a second post telling us how to gain the skills he lists.

Better CSS font stacks

David (a boagworld listener) sent in the next story. It covers a subject that I am currently still grappling with. It is a post about CSS font stacks.

If you code in CSS you already know about font stacks. It is where you specify the fonts you wish to use. You can say for instance; use Helvetica and if that isn’t available use Arial. If that fails use a generic san-serif font.

For many of us that is as far as our thinking goes. The majority of us use very basic font stacks that are uninspiring to the point of being insipid.

I love this post because it lays out a very clear methodology for improving your font stacks. It also goes on to provide an impressive selection of font stacks organised into heading and body fonts, allowing you to instantly improve your site

If your site is looking tired and boring, but you don’t have the time to redesign, consider adding a new font stack. Such a simple change could make a real difference.

Do flexible layouts still matter?

Our last story of the day is a post from Smashing Magazine entitled Flexible Layouts: Challenge For The Future. To be honest I was ensure whether to include this post or not. On one hand it covers an issue many people have been asking me about. On the other, its arguments seem stretched and the whole thing ends with an advert for a CSS framework.

The article tackles zooming and fluid design. The new generation of web browsers – Firefox 3, Opera 9.5 and Internet Explorer 7 – provide full screen zooming. This gives users has the ability to enlarge the whole interface, not just text. Some are arguing that this is the end of fluid layout because zooming tackles many of the accessibility concerns associated with fixed width sites. However, this article strongly disagrees.

The author argues that flexible designs are better for mobile devices, that pixels are becoming less important and that the user shouldn’t be required to customise a site to their needs (it should be done automatically). Although his arguments are weak at times and he uses some fairly dodgy comparisons I do generally agree with him. I see no reason to think fluid design will go away anytime soon.

That said, I am in no doubt that page zoom does reduce the number of occasions fluid sites are necessary. Ultimately there is no right or wrong answer. It is entirely based on the situation. For example Boagworld, Headscape and The Website Owners Manual all use fixed designs. However, many of my client websites do not. That decision is based on numerous factors such as device, user base and business priorities.

Back to top

Feature: Creating a Better Survey

The web allows us to interact with our customers more than any other medium. One of the tools in our arsenal is the online survey. However, these are often badly implemented. In this weeks feature we find out how we make your surveys more effective?

Back to top

Interview: Lachlan Hunt on HTML 5

Paul: Joining me today is Lachlan Hunt; It’s good to have you on the show

Lachlan: Thank You Very much

Paul: It’s great to have you here I really appreciate you taking the time to join us, now the reason that we asked Lachlan on the show is because he posted a brilliant article on the A List Apart site about the subject of HTML 5 and I have been keen to look at this subject for a while partly because of my own ignorance to be honest, um, so lets kinda kick off by if you could perhaps tell us a little bit about where HTML 5 is at the moment I know that kinda getting a language to a release like this finalized is a massive process so can you tell us where we are at in that process.

Lachlan: OK, it’s, um, a really an ongoing process with browsers implementing different parts of it progressively so it’s not, you know, going to be all implemented at once and ready to go in one, er the next few browser implementations. We have some features implemented already and shipping in browsers other features which are being worked on at the moment and other are planned for, but still a few years of yet. But it is gradually getting there. We are trying to focus on what authors really need, instead of trying to do it all at once

Paul:Ahh, okay so that a slightly different approach that we have seen in the past, the idea of an incremental roll out. So how does that work from the W3C’s point of view are they doing modular releases is that how it works

Lachlan: Um, at the moment no, but the way the spec is structured each part of the spec, what I am trying to indicate is the stability of each section of the spec as we go along. SO thing like the Canvas API which has been in browsers for a few years now, it should be getting to IE very soon. That section is pretty stable, Other things for example "data grid" or a lot of the web forms are not widely implemented.

Paul: OK so that quite an interesting approach to the problem I guess from what you were saying earlier to me there is a community base element people can get involved and contribute. How is that all working then?

Lachlan: Well we’ve got a REALLY REALLY open mailing list on whatwg.org anyone can subscribe at the moment there wa about 800 subscribers on that list anyone is free to subscribe and post feedback about the spec if they want to, but that’s not for everyone obviously because it’s quite a high volume mailing list and not everyone can keep up with that. We have also got an open blog on http://blog.whatwg.org/ where absolute anyone who wants to can write an article submit it and have it published. Anything to do with what the WHATWG are about, HTML5 and anything related to it at all. It’s also a good way to let the community know what’s going on by publishing articles also to find out what people think because they keep posting comments on there as well. We have also got an open forum which is at http://forums.whatwg.org/ again anyone can subscribe to that, am sue you know how a forum works

Paul: So there are lots of different ways to be involved, I have to confess things like that can feel quite intimidating to get involved in. You’re kinda worried about putting your foot in it, and saying something really dumb, is there kind of Opportunities to lurk and are people fairly friendly over there? I guess you are going to say yes aren’t you

Lachlan: Yeah everyone is friendly over there,they are nice sort of area to go to aim at web developers and people who aren’t quite as technical with the spec areas and stuff. You can ask any question you want and just learn whatever you want as well. Their is also the w3c side of it as well. Which is strictly related but is more focused on the actual technical side and issues so yeah. The What WG and the W3C are both publishing exactly the same spec and they both work on it together and feedback can be sent to either place, it will all be taken into account

Paul: Oooh, that’s useful. So looking at kinda the state of affairs at the moment with HTML 5, reading through your article there was some things in there that really sounded quite exciting, there was this thing about structure and some kind of additional elements that could be used, which provide a little bit more structure, headers and footers and things like that can you tell us a little about that, and maybe explain a bit of what those do.

Lachlan: Well at the beginning of the work back in 2004 / 2005 we basically took a look at what a lot of site where doing and we noticed that they were all using a similar structure. All the blog’s were using headers and footer and generally things like column layouts to show articles and stuff like that. So we wanted some semantic elements to come and cover each of those features that people actually used, solving the real problems that they were actually focusing on. instead of having to do "Div" elements for everything, which is what people do we give them an actual element and that also has a side effect of increasing accessibility because an element with specific semantics can be hooked into the accessibility API’s and help someone with assistive technology navigate the document a bit easier.

Paul: Okay, because I mean reaction just glancing at it quickly and not thinking about it was what’s wrong with the div with an ID Equals footer, or an ID equal header or whatever but like you say, as you think about it more it become obvious that if those are considered distant elements, one person might call it a footer another might call it "the bottom" or whatever else if they have consistent semantic names then you know you can have screen readers and stuff jumping to the footer or avoiding / not reading the footer depending on what is set in their preferences, is that what you are thinking?

Lachlan: Yeah that sort of it, it’s also helping the authoring side too, as there are lots of Div elements in source code which makes it easier to read if you have got elements with different names

Paul: yeah very much so, I spend half my life trying to which closing Div relates to which elements, that very exciting. Obviously the other big area you talk about in your A List Apart article is the audio visual elements and there is a lot that’s happening in there. It’s always had the vague feeling that HTML has never had any kind of, erm, erm, the audio visual elements have always been and after thought, what happing in HTML 5 in regards to that?

Lachlan: Well we have added the video and audio elements to the spec to try and allow video to be added directly to HTML, at the moment we have sites like youtube revel and all the other video site out there using flash to embed video and using the flash to give customized controls and stuff to the user, it’s really awkward, depending on proprietor technology, so we want to open that up a bit give a very very easy to use Javascript API to hook into and promote custom controls and all sorts of cool stuff with videos and of course audio as well. We have got experimental implementations of that in opera and in webkit. I have heard mozilla is considering implementing it as as it is now I am not sure of the status of their implementation. However the one big problem with video and audio at the moment is with Codecs, there are a whole load of software patent issues going around and we are not quite sure what codec we are going to standardize upon or if we are going o be able to get common codec support among the browsers, That’s an open issue but I am no lawyer to I cannot really go into that, so the ultimate aim is that you will be able to embed your movie file, your avid file or whatever directly into the HTML without the need to kinda pump it through something like flash

Paul: cool

Lachlan: that make it a whole lot easier to the authors hopefully

Paul: Yeah, you kind of, to some extent got to ask the question why do we need that when we have got a solution like flash

Lachlan: Well because Flash is a proprietary technology it’s managed only buy Adobe , they control it, they control the changes and what does and what does not go into future versions of it, however the thing with HTML is that it is an open standard platform which can be implemented by anyone and maintain interoperability between those venders.

Paul: It’s intrusting isn’t it that adobe has just announced they are opening up the flash format, do you wonder if that’s a reaction to some of the stuff you have been doing to kind of force their hand if they want to stay ahead o the game and dominant they need to be open

Lachlan: Yeah I don’t know how that going to work though, it depends, if they open the format up and actually make it an open development process where anyone can contribute to the future version and features which go into it or whether they just write the specs and tell other people to implement based on what they write, so I don’t know much about that. It will be interesting to see how it goes.

Paul: Very interesting, Now the next thing you cover in the A List Apart article is something which you titled "Document Representation" now I have to confess this confused me, so do you want to explain a little about what you meant by document representation. What you were getting at there.

Lachlan: Yeah, well in the past we have had HTM, and XHTML with two separate specs, HTML 4.1 which a lot of people use and XHTML 1.0 which a whole lot of other people use one of them is based on XML and is really really strict syntax that requires well formedness and is supposed to when you serve it correctly, if you make a well formedness error the browser is suppose to stop processing and throw and error message saying "Sorry I cannot handle this" where as HTML is more sorta loose and convenient in its error handling, it’s the traditional inspired by SGML, although really only syntactically similar these day but the error handling is a bit more lenient and you can get away with making a lot more errors. So instead of having two distinct language which you can use we have combined them into a single language which share the same elements and attributes and everything and as much a possible and when the browser reads those file it produces and internal representation called the DOM, a lot of javascript user will be familiar with the DOM as they work with that with their scripts to modify the document through the DOM. That’s an internal representation which is mapped, the DOM which is sort of mapped to by the syntax’s, the HTML and the XHTML syntax’s so it give the authors a choice of which syntax they want to use

Paul: So why do we need that choice what is the key difference, I mean you talk about HTML being more lenient are there other reason for choosing one over the other.

Lachlan: erm, well I don’t really know. However a lot of authors do prefer the strict syntax of XHTML like to make sure they quote the attributes and encode all their ampersands properly. They like to know they have done everything perfectly as with HTML a lot of people do make mistakes inadvertently and don’t want end users to see big error messages, so it’s a bit more user friendly if some little small error slips though their CMS and causes problems.

Paul: So it’s basically come down to personal preference then

Lachlan: yeah

Paul: Okay, that’s fair enough, so both, we are going to see equal support for both of them in browser manufacturers are we

Lachlan: Well that’s the hope we have said that we have got good support in most browsers, it’s just IE which is lagging behind

Paul: (Sarcasm) Oh that’s a suprise (Laughs) Okay are there ant other things in HTML 5 that might be of interest to those listening to the show which we should be paying attention to?

Lachlan: erm, well, as I said before we got canvas implemented in most browsers

Paul: So tell us, what’s canvas

Lachlan: It’s a 2D drawing API that you can use javascript to draw dynamic image with. People have used it to implement things like graphs that are built using tables of data which are on the page. People have also gone and done 3D games with it which is really cool

Paul: Wow, that incredible. I mean that sounds very similar to SVG is it a different thing.

Lachlan: It is different SVG is entirely done with XML, you modify that with script via the DOM by changing elements and attributes and stuff or with CSS. Canvas is an immediate mode graphics API where it is more like a bitmap sort of thing where as SVG is vector graphics, and canvas is bit map. They can both do images, the same sort of images, if you like but we have both vector images and bitmap images, so they both can serve different purposes.

Paul: Right, I see. Okay that’s good, so okay the big question, kind of the final question everyone is going to have is when can they start doing some of the cool stuff. Now you said right at the beginning this is going to be modular support based thing so we are going to be able to see some of these elements before others. You know some parts before other, so what can we do now, what are we going to be able to do soon give us an idea of where things are at.

Lachlan: erm, okay let’s see I think what’s being implemented at the moment. Cross document messaging is being implemented at the moment, that’s an API that lets you send message between documents with javascript without worrying about cross domain security issues,

Paul: Oooo…. that’s good.

Lachlan: Yeah it’s a really, really handy API that been implemented in opera for a while and I heard mozilla is implementing it soonish and should be in firefox 3 thought I am not entirely sure about that. That should be very very soon, erm, what else have we got, we got…. hmmm, this is tough

Paul: Sorry put you on the spot there (laughs) is that last one supported in webkit?

Lachlan: erm, I am not sure I would have to double cheek that

Paul: Okay that’s fair enough

Lachlan: yeah,

Paul: Okay so any other elements? Things like the structural changes are any of those being supported yet?

Lachlan: Not quite yet, erm as far as I know support for those requires changed to the phaser, and to implment the new pharsing algorithm in HTML 5, as far as I know browsers are not yet focusing on doing that because..

Paul: Okay that’s a shame, because that one I liked the sound of, what about the audio and the visual stuff?

Lachlan: We have experimental implementations in opera which supports OGG video, though it’s not really in a public build version yet, there is a experimental version which was released last year sometime. And webkit also has support in their nightly builds, which supports mpeg 4 unfortunate they don’t support the same codec but you can experiment with them.

Paul: (laughs) That would be far to easy

Lachlan: yes I know

Paul: So it’s all progressing slowly but, erm you know obviously the one name which has been very absent in the list you keep mentioning is Internet Explorer, so I expect we can probably see some slower movement there. We are talking you know in the years before this all becomes mainstream and we can actually start using it. Is that a fair comment to make?

Lachlan: Yes it will be several years before the entire spec is finished, we are hoping that it can get finished sooner rather than later but realistically it’s going to be quite a while yet, But it is important to know people will be able to use theses features before the spec is finished; so it depends on when browsers start supporting features authors can go ahead and use it.

Paul: That’s great and real exciting that you can start to do that sort of stuff. you know that we don’t need to wait for it all to be set in stone before moving forward. And it’s always exciting as well to see the future, know what coming up and be aware of everything. so is there somewhere people can go a websites address and keep an eye on what is currently supported by browsers.

Lachlan: Not at the moment but that’s something worth looking into, I think there is a wiki on the Working Group site, it does have some implementations listed but I am not sure how up to date. But it’s something I think we should look into

Paul: Yeah it would be great to have some kind of single page which says what features are supported by each browser that you could check back every few months see what’s going, there you go there is my contribution to the working group (laughs). Alright it was really good to speak to you and thank you so much for your time, What we will do is to get you back in further down the line and have a check to see where we have currently got to in the development of HTML 5, Thank you so much for your time.

Thanks to Jamie Knight for transcribing this interview.

Back to top

Listeners feedback:

Staying healthy on the web

Evan writes: My question to you is not entirely related to design, development or management but rather about health in the web industry. This is very important but we often seem to forget about it. We spend hours upon hours at our desks but are unaware of the damage this could be having on our health. Eyeballs almost touching the screen, typing without a break, sitting incorrectly – just a few examples. So, what do you do to maintain good health while working?

I am possibly the worst person in the world to answer this question. I consistently abuse my body while at work. In fact a physiotherapist friend said I had the worse posture in front of a computer she had ever encountered.

However, there is possibly something to learn from my terrible example. Let’s look at what I do and compare that to best practice.

  • I sit with my leg tucked up under me – Posture while working is important. Both feet should be flat on the floor, rest your wrists on the desktop in front of your keyboard and make sure your monitor is at eye level (in other words avoid laptop screens).
  • I stoically refuse to use anything other than my preferred mouse and keyboard – Using the same keyboard and mouse in the same position day after day can cause damage. Try using a variety of different hardware and positions. Push your mouse and keyboard nearer or further from you to change the position of your arms.
  • I believe that an individual pixel should fill my field of view - Leaning too close to your monitor is a particular weakness of designers who want to position that pixel ‘just so’. This not only damages your eyes but also your back. When you learn forward your neck and back support the weight of your head. When sat upright, the head is supported by a straight spine and therefore your chair bears the weight.

On the upside I do take regular breaks. I would like to claim this is because of my health. However, I think it has more to do with my short attention span. I get easily distracted and wander off to do something more interesting.

From Photoshop to HTML

I see a lot of PSD 2 HTML services on the internet but never tried any out. It seems to be an great option for an designer for making an quick website, to edit later myself.

What is the opinion of you guys? Love to hear you discuss this topic in one the next podcasts.

An long time listener from Holland.

I have to confess to being a snob over these services. Until recently I have always doubted the quality of the code but after seeing some recent examples I have begun to change my mind.

We are even considering giving them a try at Headscape, just to see what happens. Certainly from an economic point of view they make sense especially if you have more work than you can handle. That said, I do have three concerns.

First, results may vary. Without a personal recommendation it could be hard to find a provider who can produce the quality you require. Anybody can convert a photoshop document into HTML. However, it is much harder to do so using techniques like microformats, semantic markup and accessibility. Also, just because the quality was good once, does not mean it will be so again. As the good providers get busy it can lead to a decline in quality.

Second, people code in different ways. Unless careful attention is given to commenting, it is hard to pick up somebody elses markup. This is fine for relatively static sites where only small changes are required. However for projects where change happens regularly as the site evolves, it is more important that the markup is tailored to your style of coding.

My final concern is that this could lead to designers not learning HTML. As I have said before on the show, I believe all designers should be able to code themselves. You need to understand how the web works and markup is apart of that. Also, if you cannot code how can you judge the quality of the markup you receive?

Back to top

121. Coda

Posted in Classic shows on by Paul Boag

In this weeks show we discuss 5 quick fixes to accessibility, and we review the mac code editor Coda.

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Skipping Photoshop

The biggest news this week is a post from 37Signals entitled ‘Why we skip Photoshop‘. The article outlines some excellent reasons why they choose to bypass designing in Photoshop, instead going straight from sketches to HTML/CSS. Reasons include…

  • Mock-ups are not interactive
  • Photoshop draws you into the details too early
  • Text on Photoshop is not like text on the web
  • Photoshop is not productive
  • Photoshop does not aid collaboration
  • Photoshop is too complex

They are all valid points. However, although I accept this is right for 37Signals, it is not right for Headscape. Our view is echoed completely by the response of Jeff Croft at Blue Favor. He argued…

  • 37Signals are working with an established visual aesthetic
  • That 37Signals aesthetic is simple and so is better suited to pure HTML/CSS
  • That 37Signals do not work with clients
  • That working in HTML/CSS can lead to constrained design.

That said, the post has made me consider experimenting occasionally with the approach. For me that made it worth reading.

It is a great discussion and I am really glad Jason at 37Signals brought it up. It has certainly created a lively debate including posts from Jon Hicks and Mark Boulton.

Web Designers should do their own HTML/CSS

But we haven’t finished with 37Signals yet. They have posted a second blog entry this week entitled ‘Web designers should do their own HTML/CSS‘. The title is fairly self explanatory and they put forward a good argument as to why designers should never produce a design and then simply hand it off to ‘code monkeys’ who make it work.

At the end of the article they write…

We simply don’t consider designers who don’t get their hands dirty with the materials relevant to the kind of work we do.

If you’re a designer working with the web who still doesn’t do your own implementation, I strongly recommend that you pick up the skills to do so.

Whether you agree with 37Signals or not, the message is clear: You will struggle to get a job if you do not know how to code pages as well as design them.

We would certainly never hire somebody unless they know HTML/CSS just as well as they know Photoshop. The nature of the web means that an understanding of the medium is crucial to creating a great user experience.

Beyond CAPTCHA

I hate SPAM. I hate it with a passion. I particularly hate comment/forum SPAM because it not only inconveniences me but also affects my users.

One common approach to the problem is CAPTCHA. CAPTCHA presents the users with a distorted word(s) that they have to type in before they can comment.

An example of CAPTCHA in action

Although in principle CAPTCHA sounds great it does have a number of weaknesses…

  • It creates accessibility problems
  • It are hard for normal users to complete
  • It can be beaten by spammers
  • It make SPAM the users problem

In short, CAPTCHA doesn’t work. So what is the alternative? Well, that is what James Edward (AKA Brothercake) explores in a post on Sitepoint entitled ‘Beyond CAPTCHA‘.

He looks at server side solutions, services like Akismet and honeytrap approaches. He also looks at OpenID and other forms of authentication.

The conclusion is that there is no perfect solution. However, he argues we need to stop making this the problem of users and take on the responsibility ourselves.

I can certainly see his position and generally speaking I agree. However, when you are faced with limited time and budget it can be necessary to cut corners. Personally, I cannot stand CAPTCHA and I regularly fail to complete them first time. However, I have no problem completing a basic question such as found on the boagworld website.

Read the article and make up your own mind. At the very least it will offer you some alternatives to CAPTCHA that can be implemented quickly and easily.

Website Owner’s Manual

Our last news story is a little bit of news about the book I have been working on. For a start it has a title; ‘The website owners manual‘. However, the big news is that you can start reading it and contributing to the final version.

Back to top

Feature: Quick Fix Accessibility

Complying with accessibility guidelines can seem like a massive undertaking. However, addressing 5 simple problems can make a huge difference to your sites accessibility. We discuss these in this weeks feature

Back to top

Review: Coda

Find out why I am seriously considering abandoning the code editor I have been using for over a decade in favour of Coda for the mac in this weeks review.

Back to top

Listeners feedback:

Team working environment

Gareth writes: I have been “promoted” from a support desk position for an Oracle based financial system to the company’s single web designer. We are not by trade a dedicated web design firm and as such i am having to develop procedures and polices by myself. I have been reasonably successful in this thanks in large part to your podcast, which has in turn led me to blogs and websites such as A List Apart, Sitepoint, Headscape (obvious one that) and many more that have also helped me.

Due to the sheer volume of work that is coming in this year we have found ourselves needing to recruit an additional web designer. At the moment i have all of my work saved on my laptop and all my tasks and appointnments stored in my Outlook.

What tips can you give me in relation to creating a centralised working environment that can be used by both myself and this new person as well managing our work loads. What do Headscape do? I should probably point out that we will be office based in the sane room rather than working from home.

Why is it that Ryan our producer, keeps picking questions he knows I am not an expert on. I am a front end interface guy. What do I know about this kind of thing! Also we primarily work remotely so have a different setup anyway.

That said, I am willing to give anything a go and ignorance has never stopped me before.

Okay, if you are sitting in the same office communication is not going to be the primary problem.
However, you still may want to take a look at Basecamp. Its a great way of organising team working.

The main problems will come in the form of file sharing, backup and overwriting each others work. One thing you might want to consider is a version control system like Subversion. At Headscape we use something called Source Anywhere however this is just personal preference. These systems allow you to…

  • check out files, preventing others from overwriting them,
  • rollback to previous versions of a file,
  • branch files, allowing multiple versions of the same file.

However, for some this might be an over the top solution. The biggest danger is overwriting files. There are a number of code editors which prevent this including Dreamweaver and Coda. This just leaves the problem of shared storage and backup. You could solve these problems separately. However, personally I like the look of Drobo. Its not that cheap ($499 plus the drives) but it provides an incredibly expandable solution that minimises the problem of data loss.

No doubt my ignorance is showing in this question so if you have better advice please post it on the show notes.

Internal Search

Stephanie writes: I have a question regarding internal site search. I am wondering what types of solutions there might be for enabling a site search when one does not have a development team to turn to. All I can come up with is Google custom search and it has some drawbacks (ad serving in the free edition and blog posts do not get indexed right away).

Love the new site!

So you want to add search to your site eh? If you’re using a popular engine such as MovableType, then there will be a built in search, so let’s assume you’re not. If you’ve just built your site using HTML, or aren’t happy with the results of your CMS’s out-of-the-box search, you still have options.

If PHP is your game, you can install a spider on your server, such as Sphider. This will index your site and provide a very customisable solution, that doesn’t send queries off to a third party server. If you’re looking after a large site, with huge numbers of pages and documents to index, you might consider a program called SearchBlox. SearchBlox is expensive, but powerful. It runs as a java based web app on your server, with many fine tuning features that will keep even the most fastidious of clients happy.

If it’s a free, third party service you’re after then you might consider Atomz or Google. Atomz is easy to setup, free and customisable but does include text based ads, similar to Google. The indexing schedule is regular, but only weekly. Google is an established name in search, but also has the downside of irregular indexing and ad supported results. It is of course possible to spend a little extra money to remove these, with Google Site Search

There is however an interesting alternative service called JRank. JRank don’t stuff adverts into the results, they only require that you provide a link to their website on the page that you set as the index for crawling. They also have a REST API, so without much work you can integrate the results in your website, as the PHP code below demonstrates:

<?php
$jrank = file_get_contents('http://www.jrank.org/api/search/v2.xml?key=[API key]&q=[query]');
$xml = new SimpleXMLElement($jrank);
$result = $xml->xpath('//entries/entry');
while(list( , $node) = each($result)) {
echo '<h3>' . $node->title . '</h3>';
echo '<p>' . $node->content . '</p>';
echo '<a href=”' . $node->url . '”>' . $node->url . '</a>';
}
?>

An interesting point in the question was that Google doesn’t index blog posts right away. In my experience, search is used to find old articles or those that can’t easily be found by tags or menus. Newer articles should be easy to find from the home-page of the site, particularly if it is a blog site. If powerful search is required, then you’re going have to put up with the ads, or fork out for a bespoke solution.

Back to top

120. WCAG 2

Posted in Classic shows on by Paul Boag

In this weeks show we talk with Patrick Lauke about WCAG 2 and we discuss the perils of blindly following conventions.

Download this show.

Launch our podcast player

News and events

IE testing made easy

Testing in Internet Explorer is horrible for many reasons. Not least the fact that you cannot run multiple versions of IE on a single operating system.

In the past there have been a number of solutions to this problem. There were standalone versions of IE. However, it quickly became apparent that they did not behave as IE does natively. There are online services which provided screenshots of your site in different versions of IE. However that does not give a sense of whether interactive elements were working correctly.

The only really feasible solution was to run multiple operating systems as virtual PCs but this was slow and inconvenient.

However, it looks like things might be about to change. DebugBar have just released IETester. A free web browser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7, IE 6 and IE5.5 on Vista and XP all at once.

They are currently describing it as Alpha software (whatever that means), so it sounds like it is still a work in progress. As with any such software it is hard to know if it is accurate. If you do choose to use IETester, I would still recommend giving your site a final once over in native copies of IE before making it live.

That said, this does look very promising and I will be trying it out myself very soon.

Hosting your Javascript libraries

Our next story is an announcement from Google. They have started to host the main Javascript libraries including…

  • jQuery
  • prototype
  • script.aculo.us
  • MooTools
  • dojo

This means that if you are using a Javascript library it does not need to run from your own server, but can pull it directly from Google.

“Why would I want to do that?” I hear you cry. Mainly to improve performance. First, according to people much cleverer than myself the Google servers are faster and can deliver libraries much quicker. I know little about server performance so I will have to take their word on this.

However the main reason is that if enough web developers use this approach we will see a significant caching benefit. Lets say a user visits headscape.co.uk and this site pulls its jquery library from Google. Boagworld.com does the same thing so when the user visits that site it uses the cached version (from the visit to Headscape) rather than re-downloading it again. As more and more sites pull their Javascript libraries from Google the likelihood that a user already has a cached copy of that particular library increases.

Of course allowing Google to host your Javascript does require a level of trust. What if Google goes down? What if Google turns evil and starts using Javascript to manipulate your site? What about the data this approach gives Google about your site?

However, if these concerns do not worry you, then there are definitely tangible benefits.

Prototyping website interaction in flash

Next up we have a tutorial demonstrating a quick and easy way to prototype complex website interactions.

In some ways the static Photoshop comp is becoming less useful. Modern websites have numerous interactive elements that are hard to convey through static images. There is a need for something that can demonstrate this functionality.

We have spoken before about wireframing interactive websites, but not how to demonstrate changes in visual look and feel. This article on boxes and arrows suggests that Flash maybe the answer.

The advantage that flash has over something like a clickable PDF is that it allows for easier updating when the client wants to make changes. However, it does require basic Actionscript skills. Fortunately, the tutorial talks you through these step by step and none of it is too challenging.

If you are looking for a way to better demonstrate interaction in your design comps then this might be the answer.

The rule of thirds

The final news story today is another post from those lovely people at Smashing Magazine (we love them since they said nice things about our podcast!) The article entitled “Applying Diving Proportion To Your Web Design“, introduces the reader to the fascinating subject of the golden ratio (also known as the divine proportion or rule of thirds.)

If you haven’t come across this principle before then I highly recommend reading more. The rule of thirds emerged in the Renaissance but has always excited in nature. There seems to be something inherently pleasing about these proportions and they occur again and again. There is something about human perception that is naturally drawn to this composition. We can use this to our advantage when designing websites.

The article goes on to demonstrate how the golden ratio can be used in all aspects of design from photography to web design. In particular it focuses on the benefits this can provide to the grid structure of your sites.

Admittedly if you have not come across the rule of thirds before this can all sound like hocus pocus. However it really does work. Following principles like this can dramatically improve your designs. What is more they can be followed by anyone even if you would not consider yourself a designer.

Back to top

Feature: Defying Conventions

As the web matures an increasing number of conventions are emerging. But should we always follow the crowd? In this weeks feature we discuss just that.

Back to top

Interview: Patrick Lauke on WCAG2

Paul: So joining me today is Patrick Lauke from splintered.co.uk, is that best way to refer to you?

Patrick: Yeah, it’s one of my many monikers, yes.

Paul: Just so many presence on the web, you’re just so well known. Good to have you on the show, Patrick, it’s been a while.

Patrick: Thanks for having me.

Paul: I don’t think you’ve actually been on Boagworld before have you done Dot Net with me, but I don’t think you’ve done Boagworld.

Patrick: Exactly, yeah, I’ve only had the pleasure of sitting on the Dot Net one.

Paul: Well this is the proper grown up, you know, professional version compared to Dot Net.

Patrick: Super!

Paul: So the reason I wanted you on the show, Patrick, I have to be honest is as much for me as it is for my listeners this time round, because you are our resident accessibility expert, and we had a conversation a long time ago on the show about WCAG2 and we talked a little bit, not with yourself but we’ve talked on the show before about WCAG2 and it was coming along and all the rest of it, but it suddenly occurred to me we haven’t done anything on it for ages, and I’m wholly ignorant on the subject and the current state of affairs, so I thought, I know, I’ll get Patrick on the show, I’m sure he’s bothered to read it and knows what’s going on. Hence you’re here.

Patrick: Excellent.

Paul: So you’re not going to let me down, you have actually read WCAG2 have you?

Patrick: I have, I’ve been fairly involved with it, yeah.

Paul: Good! That’s encouraging. OK so perhaps the best place to start is, where’s it currently at, what’s the stage of development at the moment?

Patrick: Right, well literally a few weeks ago it entered what’s called the Candidate Recommendation Stage, all part of that W3C terminology they use. It wasn’t…it has been in last call for about 2 years now, but yes, Candidate Recommendation really means that now the WCAG working group and the general public has been kind of sending in comments etc on the status of the document. They’ve all reached kind of a broad consensus about, yeah, it’s fairly…it’s pretty much there, you know, it’s fairly accurate, technically there’s no big howlers in the actual wording of the things. I mean there might still be a few minor, minor details that change from now until the end, but pretty much the actually core of it is as good as it’s going to get.

Paul: OK.

Patrick: And really the…kind of the purpose of this Candidate Recommendation Stage, you know, why aren’t they going straight out and releasing this now as a standard, is really to give people an opportunity to start test driving, you know, what WCAG2 says in its current state, so working group thinks it’s pretty much there, let’s test it out actually in the real world, so give people the opportunity to run it…run their websites through their paces according to WCAG2, see if, you know, things are feasible, if it’s realistic to kind of say, yeah, this will be the standard from now on, and they’ve actually…they want to make it quite official, so if you have an intention of kind of doing that, you have a website and you want to actually officially say, OK, I’m going to use that website to test WCAG2, they’re now asking for people to basically register their interest and to actually, you need to then implement that, you need to say, right, I’m going to run WCAG2 on my site and by the 30th of June you want to be able to basically say right, I’ve finished it, and then give feedback and basically say yeah, no problem, or you know, we tried and tried, but this is actually not realistic, it might need to be modified, but unless there are major, major issues that come out in the wash as people are now trying to implement it and test drive it, it should be fine really. One of the main things with WCAG2 is, as with any kind of Candidate Recommendation documents, is really that there are a few items where even though we’ve got consensus, the working group isn’t 100% sure that they’re going to make it in their current stage, so they’ve kind of gone very ambitious with some of them, but they realise that yeah, it might not actually make it through, and they’re called….quite fittingly, items at risk, which in the latest CR document, Candidate Recommendation document, they’re clearly marked, and they’re basically…the testing phase is really about, let’s have a look, specifically these kind of items at risk, can they actually be implemented in the kind of more stringent way that we’ve worded them? If not, we might have to scale them back. I mean there’s one for instance where it says, it talks about, you know, colour contrast, and they’ve worded it currently that the contrast needs to be on a ratio of 5:1, so if you’ve say got, you know, text and background colours, you need to have…want to do your calculations for the various algorithms, there needs to be a contrast of 5:1. Now they’ve put that at risk, because some people still felt that it might be a little bit….setting the mark a little bit too high, and they were already saying, OK, well if it turns out that it is too ambitious to say, right, you need to have that ratio, that they’re happy to kind of jump back to 4.5:1 or even 4:1, so it’s kind of things like that, we’re really now at the nitty-gritty stage with these kinds of things, of saying, you know, can it actually be implemented.

Paul: So this is getting very close to the point where, you know, your average website owner and your average web designer needs to be…we need to be looking at this now, don’t we really? I mean we’re getting that close?

Patrick: Yeah

Paul: OK, I mean it sounds like things have gone a long way since the kind of early stages where WCAG2 was quite heavily criticised. I mean what kind of shape do you personally think it’s in at the moment?

Patrick: Yes, I mean looking back, I think it was May 2006 where Joe Clarke wrote his kind of vitriolic post, to Hell with WCAG2 on A List Apart, we have definitely come a long way since then. I think it was a good wake-up call back then for somebody like Joe, somebody of Joe’s stature, to really come along and, where web designers maybe at that stage weren’t really that interested in WCAG2 to actually say, look guys, you need to start looking at this because in the current shape it’s in, it’s really not feasible, and what Joe said at the time, there are many things that he criticised, but you know, overall he was spot-on with a lot of the things. The main thing was that the whole document at that time was extremely bulky, it was one big monolithic document which tried to do everything. There was loads of Orwellian-style language, everything was made up of Newtons, and they pretty much invented…because the problem with WCAG2 it’s a kind of full shadow of it, is that because it tries to be technology agnostic, it tries to avoid in the main document and talk about anything relating to actual technology, so it doesn’t mention specific HTML elements or things like that, so to make it very tech-agnostic, that document at the time really re-defined almost anything, so it didn’t talk about web pages, but it started ta
lking about web units, and basically the glossary was almost bigger than the actual document, so you know, that was very problematic because even people who’d been doing web development for years, if you just gave them the document as it was, they would have had to completely re-learn whatever all the terms were, it was of no practical use.

Paul: So has all that gone now?

Patrick: Yes. The language has been simplified. I mean it’s gone now from 2006 onwards it’s gone through, I think it was 2 or 3 last call stages. Well it went back from…in 2006 it was at last call stage, literally the stage before we’re saying, OK, we’re up to Candidate Recommendation. They actually scaled that back. W3C don’t admit that was because of Joe Clarke, and OK, it was probably not exclusively because of his article, but I think the general kind of feelings that it stirred up, or that it tapped into, kind of made the W3C reconsider. They’ve scaled it back to a public working draft, which is kind of one step previous to that. Everybody had a pretty good look at it. There’s been rounds and rounds of comments, I mean I’ve submitted in the 2 year period that it’s now been since that article, I’ve submitted loads of comments. I mean ranging from really small things like, oh you missed a comma there, or that’s not very clear, to kind of very substantial things about the actual core concepts that are being discussed, and in that process, a lot of really hard copywriting and editing has happened since then. They’ve also split out the document into far more manageable sub-documents themselves. One of the main things, for instance, is that the whole structure of, you know, WCAG2, it’s actually a suite of documents. The main guidelines document itself is only a handful of pages, I think it’s…yes, 19 pages I’ve printed out today. That is purely the core guidelines document, and that’s the only part if you will, that is actually normative, that’s the only one that is the actual guidelines. Then there was a lot of extra documents that really are just what’s called informative, so you can read through them, but you can’t actually refer to them in terms of, you know, just if somebody sort of says, your site isn’t accessible, you can’t point to an informative document and say, yeah, but I’m following that particular thing.

Paul: OK

Patrick: One of the documents will be the techniques document. You can’t actually point to that and say, well I’m following these, because the only thing that’s important are the actual guidelines, so they’ve really slimmed it down, broken it up into separate documents, you know, 19 pages printed out, it’s nothing, you can pick that up, you can read it through. It’s roughly the same size now of WCAG1 if you will. So they’ve simplified the language. There were loads more contentious kind of fundamental problems with WCAG2 as it was back in May 2006. I mean one of the main ones that really caught, you know, the eye of a lot of developers, was the concept of base lines where basically at the time they were saying, even though the concept itself is good, but it’s pretty much read like, as a website owner I can basically say, right, to work with my site, you need to have Flash and you need to have this and you need to have that, which was completely opposite to, you know the very austere WCAG1 which basically said, you can’t have anything. This seemed to open it up completely and allow for website owners to basically say, right, you know, we are going to do a whole Flash website if you will, and our baseline will be, you need to have Flash to use this site. But the concept was good at the time, but the wording pretty much came out like that, so these kinds of things, base lines, at its core, is actually still in the current document. They’ve basically re-worded it and turned it on its head, where before it was talking about website owners can say what technology they’re using, now it’s far more, if as a website owner or designer, I’m using a technology, I need to make sure that I know for a fact that it’s supported by accessibility…assistive technologies, for instance screen readers, so they kind of turned it on their head. The onus isn’t any more on the user to say…to have the latest technology, but on the developer to make sure that the technology they use needs to be accessibility supported. So loads of kind of fundamental changes like that have happened really, and no, definitely to go back to the original question, it has improved quite dramatically since May 2006. I mean I’ve now familiarised myself extensively with it. It’s good bedtime reading material!

Paul: You’re not convincing me of that one. Not unless I want to go to sleep I guess!

Patrick: I know. OK, I’ll be blunt, it’s better toilet reading. You kind of print it out and you put it there, instead of a novel you’ve got that there. But it is very good. I mean it’s now down to the level of…it almost reads like common sense. You kind of…you go through it and you just find yourself nodding and thinking, like, that’s not contentious. OK, there are still a few here and there where I might slightly disagree in a heated argument, but overall there’s nothing really there that makes me think, ooh no, that’s never going to be realised, so absolutely, it’s in very, very good shape I would say, and this Candidate Recommendation Stage looks like it’s going to be very successful really, and fingers crossed, I think; I’m not 100% sure now of the timeline that W3C are working by, but I wouldn’t be surprised if, say by the end of calendar year, we might see actually WCAG2 being released and getting out and becoming a proper recommendation.

Paul: Cool. So then what’s the big differences from WCAG1. I mean with WCAG1, you know, every kind of standards-based designer became very familiar with that. I was a great fan of that, you know, single sheet which listed everything by priorities and I would go through and I’d check myself off, and I kind of knew where I stood with WCAG1. With WCAG2, it’s much more of an unknown entity at the moment, so kind of give me the potted version. Where are the big changes?

Patrick: Right. No you’re quite right, it’s actually a lot more vague WCAG2, but it’s that way for a reason. Right, so WCAG1 really was very much, I mean it’s a product of its time, I mean it was 1999, the web was still quite in its infancy, and it is very much HTML focused, WCAG1, there’s no denying that. There’s a few mentions of things like CSS, but pretty much it’s all about how to use HTML to create content that at the time would be deemed accessible. I mean JavaScript was pretty much bad; I mean you could use it but you need to make sure there’s a fall-back. Non-W3C technologies were completely out basically, unless you provided a W3C alternative, so things like Flash and PDF etc, when they first started becoming more and more used, that directly clashed with WCAG1 at the time. Now WCAG2, as I mentioned before, it’s far more tech-agnostic. It tries to basically not t
alk about specific technologies. It doesn’t directly reference HTML or CSS or Flash or Flex or various other things in the actual core guidelines. Now the reason for that is WCAG1 as soon as it was released, the thought behind it was that it would be updated on a very regular basis, but from 1999 onwards, nothing has really happened, and because it was so heavily influenced by the technology of its day, it aged very, very badly. I mean nowadays, if I hear people saying, we’re building against WCAG1, I almost have to chuckle a bit, because it is pretty much just going back to, you know, we’re doing the web like it’s 1999, you’re not really allowed to do anything, and it’s completely opposite to what’s actually happening with the web. I’m not going…well I am going to say Web 2.0 to sound all trendy, but you know, all those things, Ajax, Flash, PDF etc, particularly say PDF, there is now…there are now easy ways, or relatively easy ways, to create reasonably accessible PDFs, I mean the technology itself has moved on, the format has moved on, screen readers are quite capable of dealing with well-structured PDFs that are created in a certain way. We’re not really talking about, you know, you need to test your pages with links because, you know, people might just use a text only browser. Things have moved on, but WCAG1 is pretty much kind of frozen in time of 1999. There have been a few kind of…people who’ve been working towards WCAG1 have started kind of re-interpreting it a bit for the modern days. I mean in my own practice in my…one of my other identities, in my day job as web editor for the University of Salford, I’ve never actually said, we’re going to make our pages WCAG1 compliant, but always said, you know, we’re going to take inspiration from WCAG1, filter it through our own knowledge of what the technology landscape actually is today, and try to do the best we can to actually serve the users and you know, how they currently use the web.

Paul: So….so are you, you know, you said that you’d never claimed in your day job, you know, to be WCAG1. Are you intending, you know, are you more confident in WCAG2 to be able to say that, that we’re going to be WCAG2 compliant, or is it not that kind of thing?

Patrick: I think …I think yes, WCAG2, it would be a lot easier to say we’re working towards WCAG2, because to kind of go back a bit and explain WCAG2’s kind of…the thinking behind WCAG2 and how it’s structured. WCAG2 as I said, doesn’t talk about HTML, CSS, it really just sets out very general principles, when then break down into guidelines, which then in turn break down into success criteria. Now again it probably sounds like there’s a whole new language to learn, but it is fairly straightforward, so if you think, web pages themselves need to be the four principles. They need to be perceivable, operable, understandable and robust. So those are the four kind of guiding principles, which you know, make sense. It was already implicit in WCAG1, but this kind of just spells it out. These are the kind of four things that we want to make sure. Now under each of those principles, say perceivable or whatever, there are guidelines which still provide…they don’t go into detail, but they provide some very, very basic overall goals, so what we want to achieve is X. They’re not testable, because they’re still very, very generic, they’re saying, we just want to make sure that people can, say, use a keyboard to do things. They don’t go into detail about what that means particularly. And then under that you’ve got the testable, what are called success criteria. Now these are very small kind of little atomic sentences if you will, that say, right, very specifically, if you’re providing this, then make sure that that happens. Now I’ll pull out an example, I’ve made some notes here, let me just go through…yeah, I’ll give you an example here. So in the big WCAG2 document, you’ve got principle number 2, operable. User interface components must be operable. So, you know, you can’t argue with that, fair enough. Underneath that, there’s loads of guidelines, I’ve pulled out one here, guideline 2.4, navigable, which states that you should provide ways to help users navigate, find content and determine where they are. Again, that’s a very, very broad goal that doesn’t say anything about you need to use a link, you need to put title in here, or you need to make sure you use access keys. None of that. It basically just very generically tells you that. Now under Guideline 2.4, there’s loads of smaller success criteria. Now I’m just going to pull out one of them. The first one, 2.4.1, which basically is called bypass blocks, and I’m just going to read it straight from the thing, ‘a mechanism is available to bypass blocks of content that are repeated on multiple web pages’

Paul: Yes

Patrick: Now again, this doesn’t say anything about HTML or whatever, but it is quite testable. You can actually pull up your web pages and say, right, are we following this? Is there a mechanism available to bypass blocks of text, blocks of content, sorry, that are repeated? So I don’t know if that gives a flavour of…

Paul: Yeah it does.

Patrick: …against WCAG1. Now you couldn’t write a validator to actually just run through this and check for that, that is one of the core differences I think with WCAG2 compared to WCAG2. I mean even WCAG1 we all agreed that you can’t just run it through Bobby and then, you know, if Bobby gives you the thumbs up, that’s good. You still have to do some manual checking. But there were a lot of things that because it was so HTML-centric, you could pretty much run it through something and it gave you a fairly good indication of whether you were achieving that particular check-point in WCAG1 or not. Now the way the success criteria are worded, yes you could say, OK, if we accept that, we want a skip link, and the skip link will fulfil that particular success criterion, we could write an automated tester that just looks for skip-links, the presence of skip-links, however you want to code that, but it’s not to say that that is the only way in which you can pass that success criterion. The actual guidelines don’t say exactly what you’re supposed to do. They pretty much focus on the end result and particularly what I’m interested in, they focus on the end result for the user for the most part, so it really puts the onus on the developer to understand, these are the user needs, and this is the kind of very generic thing that needs to happen. You can then, from that success criteria, jump over to the techniques document for instance, which actually goes into detail, if you’re using HTML, here’s some of the ways in which you could achieve this success criterion, and then you can test against those, but the techniques document is only informative, it’s not the be-all and end-all. You could follow whatever’s said in there, or you could actually come up with something that’s completely separate, is not mentioned anywhere in the techniques, but if the end result of an actual real user is still, OK, they can still bypass blocks of text that way, then that’s fine.

Paul: Which is great, because it kind of gives people the freedom to innovate and come up with original ways of solving accessibility problems.

Patrick: Absolutely, and it puts…it puts the focus straight back on doing something that is good for the user, rather than right, we’re just going to go and make sure that we tick that particular box because the guideline says we need to do X in HTML and, well, we’ve done it, so we’re cool. This kind of forces you to actually think about solutions. I mean you can… you can go into the techniques document, and what’s mentioned in the techniques document, is pretty much they’re tried and tested ways in which that situation has been solved, so you know, you can be I’ll say lazy, but you know, you can get guidance from that techniques document, but that’s the important thing to know, is it doesn’t mean that you have to necessarily use one of those techniques, and absolutely you’re right, this will stimulate a lot more creative kind of ways in which these success criteria can actually be met. And as I said, it then applies to any technology. You could say, right I’m going to provide that functionality in Flash if I’m doing Flash, or maybe I need to do that in PDF, or whatever, so it is a lot more open. Which obviously is a problem if you’re very set in the ways of I’m going to run it through a validator, and I’m going to get a clear yes or no answer, because you pretty much need either a lot of user testing to say, OK are the users actually able to do this particular thing that the success criterion says, or you get experts that kind of help you with that, and there it’s a lot more likely that you’re going to get 2 or 3 experts and they might not necessarily agree on what’s the best way to implement something, so that is kind of…not the problem I would say, but the slight shift in mentality that website designers and website owners will have to make, that it’s less easy to make a very kind of cut and dried, yes it’s accessible, not it’s not accessible. I mean it was problematic before, now it could be even more woolly, which you know, is a bad thing in a way, but also a good thing because it does force you really to focus on the actual core of the problem rather than trying an easy way out and just implementing some mark-up that a guideline suggests.

Paul: Yeah, I mean yeah, I can see how it potentially might create some legal problems further down the line, but it certainly gets people beyond that kind of arse-covering check-box mentality, which has good to be good. So it sounds like a lot of the time we’re kind of going to be working as web designers on the success criteria level where we’re going through and making sure we conform with these various success criteria. What about priorities? WCAG1 had Priority A, AA, AAA or whatever you want to call it; Priority 1, Priority 2, Priority 3. I mean, did, you know, is there anything like that any more or has that gone away completely?

Patrick: No, that’s actually still there. At one point there was a bit of a change in terms of how it’s going to be worded, whether you could achieve full compliance or not by following…having to do all the success criteria for a particular level or not, but no, they’re pretty much there in their old form if you will, so it’s still called Level A, AA and AAA. One of the things that WCAG2 has tried to do in its wording of these Levels is to say that it wants to remove the kind of idea of hierarchy that AA aren’t less important than A, and AAA aren’t less important than AA. They’ve written a lot of nice words around it to explain why it’s actually still worth doing AAAs when you’re not fulfilling all of AA etc, but I think they’ve actually muddied up the waters a bit because in effect, you can’t claim, say, AAA, if you haven’t claimed AA, so the hierarchy is actually still there, so probably this explanation was quite confused, but it actually reflects exactly how confused the WCAG2 document is about that. They’ve tried to kind of have their cake and eat it at the same time, I think, because they have to…necessarily have some hierarchy, but they’re really trying to stress that they’re all equally important, you know, but some are just more important than others. So…interesting.

Paul: Yes. So I mean what, you know, we’ve got potentially, you know, if you’re right, until about Christmas to sort out our act and to kind of really get thinking about WCAG2. What kind of steps would you recommend for people that are owning and running websites in order to kind of prepare for this?

Patrick: I would say that because WCAG2, as I say, is a whole suite of documents, you’ve got the actual guidelines which I mean now I can read them and they’re quite understandable to me, but I’m obviously very close to the subject at hand. I can kind of understand where they’re coming from. But as part of the suite of documents, there are kind of better documents possibly to start with, depending on what your current level is. There are ….there are simple things like Understanding WCAG2, which kind of takes a helicopter view of WCAG2 and gives a lot more context that explains why, you know, certain guidelines are important, how, you know, people will use them, how they will benefit from them etc. It goes more of a context. It’s obviously a lot weightier than the actual core guidelines, but that is…if you’re a bit rusty with, you know, I haven’t looked at WCAG2 at all, you’re a bit rusty with what WCAG1 even was about, beyond just being a document that you checked some boxes against, that’s certainly worth reading, just to really get a feel of understanding why….why are we changing things, why wasn’t WCAG1 good enough, so that really gives you a good kind of introduction to the subject. And I think that’s an important step towards actually implementing WCAG2 would be for people to buy in, as with anything, if you’re trying to push it through at an organisational level. People need to understand the rationale behind it. You can’t just dump this document on say your developer’s desk and say, right, these are the new rules, you know, white is black, black is white, this is what you need to do now. They need to buy in from actually understanding what the rationale behind it is, so the understanding document will really give them all the information they need. Some, you know, technically minded people might be tempted to jump straight to the techniques document, which is fine, but again with the caveat that I mentioned before that the techniques document is actually only informative, so whatever’s written in there is not the law. Some techniques that are currently in there might even be proven later on to be maybe not optimal in certain situations etc, so it’s not the law; it can help you initially get, if you’re really technically minded, you might read the success criteria and say, yeah, OK, that’s all nice language, but what does it actually mean, you know, if I’m doing HTML, what….what are you expecting me to do? The techniques document can help, it will give you actual examples. If you’re using HTML do this, if you’re using Flash do that, etc, so it brings it back down to something that as a techie, you might be more comfortable with, but again, understand
ing that that is not the law; those are not the guidelines, and that there might be even better or more creative ways around the problems, but it’ll get you into the right frame of mind I would say.

Paul: Cool

Patrick: There’s also documentation that just pretty much compares WCAG2 to WCAG1,

Paul: Ah, that’s good

Patrick: Yeah, if you’ve got a lot of experience with WCAG1, that will kind of help you roughly map, you know, what used to be WCAG1’s check-point about this, is now this far broader guideline that covers a lot more aspects, so it’ll help you kind of move towards the thinking behind WCAG2. And I think that is the main thing as a website owner or as a designer; it’s more of a shift in perception if you will, more of a shift of understanding of what accessibility is, more than, you know, the change of how is my mark-up now going to be affected by it. It’s really moving beyond that kind of very HTML specific, you must do exactly this, to a more, you need to understand how users actually use your website and how to creatively kindly of help them in that pursuit really.

Paul: Cool. I mean that sounds good; there’s lots of different ways you can kind of start the process of learning it

Patrick: Absolutely

Paul: …which is good. I mean I guess my last question, you’ve almost kind of answered, which is, you know, if you’re somebody from a WCAG1 background that is comfortable with WCAG1, the one thing that you’re thinking is, hang on a minute, I kind of knew this, I had my head around this, you know, I’ve suddenly got to change to this new system, you know, is it going to involve more work, is it going to be painful? The fact that you’ve talked about this document that does transition, you know, between WCAG1 and WCAG2 sounds helpful. Overall, do you think it’s going to put more pressure on designers or is…more going to be expected of them as they develop stuff?

Patrick: I think it’s going to be interesting for a variety of reasons. I wouldn’t say necessarily there’s going to be more work involved. If you’ve been working similar to the way I’ve been working, that you take WCAG1, you take what you want from it, and you filter it through your knowledge of, yeah, that screen-readers can actually work well with PDFs, so I’m ignoring the non-W3C technologies I’ve banned that used to be in WCAG1, so if you’ve actually been doing accessibility based on WCAG1 in the real world rather than simply just following it as a set of check-points that you just tick the boxes, I wouldn’t say it’s going to be more work. Certainly if on the other hand, if you have been somebody who hasn’t been too understanding or involved with WCAG, you pretty much had it as a function in your, say, Dream…copy of Dreamweaver or whatever, I’ll just quickly run it through this validator, I’ll run it through Bobby, although Bobby’s now gone, thank God, various things like that, you know, if you really just saw it as a check-box exercise, yes there will be…it will be more of….I don’t want to say paradigm shift…well there you go, I just said it….absolutely, no cliché will be left unturned in this particular episode…you really need to start understanding it more. But if you’ve actually been doing what I would term in a quite elitist way, real web accessibility over the last few years, there’s no major, major big surprises there, and there’s…I wouldn’t say there’s a lot more work involved. Now it would be interesting, I think, one of the aspects will be if you’ve been working in an organisation and you’ve been trying to appease management say, and one of the things that management might have erroneously picked up is, we need to make sure our pages are Bobby-compliant, for instance, is that will be a difficult, I would say, or challenging, should we say, situation because you will have, already at the time you might have been crying, saying, well, the validator can’t check everything, you still need to do manual checks, but at the end of the day, some managers, all they wanted was to see the thumbs up and the smiling policeman with the helmet on their website. This time around it will be a lot more difficult, and yes, as I mentioned before, there will be automated tools that will help you in determining whether you’re doing certain things right according to WCAG2, but because, as I said, the techniques…there is no definitive list of techniques that are OK, and there are no definitive lists of techniques that aren’t OK, it’s practically impossible to write an automated checker that will be able to check against everything, so tools…automated tools will really just be relegated to certain interpretations of WCAG2. I know that there’s a few organisations in the States that are currently working on, you know, validators. I think the….name escapes me now, but the Fraunhofer Institute in Germany, they’re currently working on their own version of a WCAG2 accessibility tester for instance, and I had an interesting discussion with representatives from Fraunhofer the other week when I was in Germany at a conference, and they’d pretty much agreed that their tool will only check against, basically, their favourite techniques if you will, from the techniques document. Now who’s to say, as we said before, that those are the best techniques? They’re ours. You might come up with a really creative way that no tool has been primed to kind of sniff out in your mark-up or in your Flash or PDF or whatever, so you’ll always get a very, very subjective, based on what the developer’s written into their tool, very subjective assessment of your website, so bring it back to the point, it will be extremely difficult I think for a manager to be able to say, right, I just want to make sure that we pass that particular test, unless you then go and dig out exactly what that tool is looking for, and you end up back in the situation that we used to be in, where you’re trying to write it to get a good grade from a tool, rather than actually thinking about what is best for, you know, users with disabilities or users in general, so that, I think that will be the more challenging part, as I said, the paradigm shift, getting managers who might not have understood it up to now, to really kind of confront the fact that automated tools aren’t the be-all and end-all, and that yes, everything is a lot more subjective now, so really I would say the only solution to that is really start thinking more exclusively about proper user testing, getting actual end-users in there. You could give them the success criteria from WCAG2 and basically say, can you confirm that this is something that you can do on our website, so it becomes a lot less about automation and a lot more about actual end users.

Paul: Cool. I mean it all sounds really exciting, you know, a bit apprehensive, you know, a whole new thing to learn and all the rest of it, but I think the whole freedom of approach side of things, that you can approach problems in different ways and sold things in different
ways, is very refreshing and it all sounds really exciting. Patrick, thank you so much for coming on the show, that’s been really enlightening, and I look forward…

Patrick: a delight

Paul: Yes, and I look forward to getting you on again, maybe to get into some specifics once WCAG2 is up and running. Good to talk to you.

Patrick: Yes, super duper. Okey-doke.

Thanks to Alison “Anna’s Mum” Debenham for transcribing this interview.

Back to top

Listeners feedback:

What are the key features of a CMS

Hi Paul. Hi Marcus. What in your opinion are the important and fundamental features of a CMS, not such as the ability to create pages, but the add-on features that make a CMS better than other CMS’s around it. Thank you very much for answering my question.

Interestingly Drew Mclellan was talking about content management systems at this years @Media. He had an excellent list of things to look for in a CMS. Some of his recommendations were…

  • Friendly URLs
  • Data Feeds(RSS)
  • Customisable and accessible administration interface
  • Well implemented search
  • Multi-site support
  • Multi-language support
  • Caching
  • Support for user generated content

Interestingly some of the features he looks for (such as friendly urls) are not always required. He wants to see them there because it indicates best practice from the developers who built the system, not because he actually needs them.

He also spoke in his presentation about the importance of not buying a CMS based on a wish list of functionality you might need one day. This will lead to unnecessary expense. It is also the problem with ‘off the shelf content management systems’. You end up buying functionality you don’t require and introducing additional complexity into the user interface. Perhaps that is the reason why both edgeofmyseat.com (Drew’s company) and Headscape have chosen to build their own CMS codebase, which can be customised to clients needs.

If you are looking for more information on the selection of a content management system be sure to check out episode 24 where we dedicate the entire show to the topic.

Is certification worth it?

Chris asks: I’ve been working in web design for the last 5 years and am really looking to get into the more user experience side of things. I was wondering if you or our listeners knew of any qualifications or certifications that might be a good idea. Are they even worth the good idea in the first place or are they not worth the paper they were written on?

As somebody who regularly recruits user experience designers I have to say that qualifications and certifications mean little. Sure, I like an employee to have a degree simply because it demonstrates a certain level of academic achievement. However, I don’t think that web specific qualifications count for a huge amount.

What I consider important is example work, that shows your skills in user interface design. I want to see sites you have produced and for you to explain to me the underlying thought process that went into them.

Given a choice between work experience with a high profile web agency or becoming a student again, I would recommend the former every time.

Building for the future

Posted in Web strategy on by Paul Boag

Does building with web standards really provide a firm foundation for the future or will websites be forever stuck in a cycle of sporadic redesign?

This year at @Media I moderated a panel on communicating best practice. My fellow panellists were exceptional and nobody could dispute the excellent advice they gave. I on the other hand managed (as always) to court some controversy with my off hand remarks.

At one point in the presentation I endeavoured to argue that one advantage of applying best practices today (such as separating content from design) was that it broke the cycle of continual redesign.

A major grievances of management is that every few years the old website is thrown out and a new one is built. They are horrified by this for a number of reasons:

  • It means a massive outlay of cash every few years.
  • It involves completely writing off previous investment.
  • The site rapidly becomes out of date but they cannot justify another big rebuild.

I argued that a standards based website moves away from this model towards an evolutionary, rather than revolutionary, approach.

Stuart Langridge who was also speaking at the conference, challenged this line of reasoning suggesting that over the next 5-10 years the web would change beyond recognition and that the speed of change would ensure the redesign cycle continued. He even suggested that we would all be building our sites in Silverlight by then. Fortunately he was only joking and this wasn’t some kind of prophetic vision.

Although I certainly understand Stuart’s position I have to say I think he is over estimating the speed of change. When looking at the future we all have a tendency to over estimate the speed of progress (I am still waiting for my hover board and cyborg eyes) and I believe Stuart is doing exactly that.

The web will certainly be a different place in 10 years, but it will not be so different as to undermine the benefits of standards in planning for the future. For example separating content from design is going to allow for a gradual transition of content from HTML to XML or whatever follows. It will also allow for easy design changes to keep in line with best practice or the latest design trends.

Am I saying that if your site is built with the standards now that you will have the same site in ten years? Well yes and no. Probably the entire site will have been replaced bit by bit. However, I don’t anticipate having to dump everything and start again every few years.

It reminds me of a scene with Trigger in Only Fools and Horses. Trigger was boasting to Del Boy and Rodney about his road sweeping broom. He proudly announced that he had had the same broom for over 20 years. The other two looked at his mint condition broom and appeared dubious. Trigger went on to say that he had cared for the broom lovingly, replacing the handle 14 times and the head 17 times.

Was it the same broom as he started with? Of course not. The handle and head had both been replaced. However, he had never had to throw out the whole broom and buy a new one. That is what it should be like with our websites. We should replace and upgrade parts of it on a regular basis rather than start again every few years. Standards and best practice make that possible.

119. Fluid Elastic

Posted in Classic shows on by Paul Boag

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

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Harness the power of "frilly bits"

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

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

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

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

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

The cure for content-delay syndrome

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

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

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

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

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

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

The roles of a web entrepreneur

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

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

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

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

Intranets revisited

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

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

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

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

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

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

Back to top

Feature: Fluid Elastic Design

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

Back to top

Review: PHP Designer 2008

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

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

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

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

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

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

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

Thanks to Simon for that review.

Back to top

Listeners feedback:

Can you set up a web design company in the evenings

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

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

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

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

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

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

Domain names

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

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

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

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

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

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

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

115. sxsw

Posted in Classic shows on by Paul Boag

On show 115: Lessons learnt at SXSW, Garett Dimon on form design and how to find usability test subjects.

Download this show.

Launch our podcast player

News and events | Lessons learnt at SXSW | Garrett Dimon on form design | Listener feedback

News and events

Microsoft launches beta of Internet Explorer 8

The big story over the last couple of weeks has been Microsoft’s release of Internet Explorer 8 as a beta. This has sparked a flurry of posts from various bloggers on the pros and cons of the new release. However the two that caught my attention were Kevin Yank at Sitepoint and Roger Johansson.

In short, IE8 looks like an impressive update with significant improvements in standards support. It would appear we can finally say good by to HasLayout, while at the same time welcoming decent CSS table support. This will open up a lot of possibilities for layout.

There are too many updates to go through here so I would encourage you to check out "what’s new in internet explorer 8" over at the MSDN blog. You might also want to look at the Internet Explorer 8 readiness toolkit that tells you all you need to know about the new browser.

Designers agnst

There seems to be a lot of designer angst flying around the tubes this week including two posts on A List Apart and one at ideas on ideas.

As designers we seem to spend too much time fretting over the creative process, always looking for inspiration and techniques to improve the quality of our work. Andy Rutledge piles on the pressure in a fascinating article about creativity where he redefines the word. A second post on A List Apart twists the knife further by arguing that as designers we need to be superhuman obsessives, willing to work late into the night to produce the truely exceptional.

It maybe the case that to be a truely outstanding designer we need to live in a world of unrealistic personal expectations. However, personally I like the down to earth reality of "Six suggestions that can make you a better designer." In this post Eric writes…

Your project doesn’t have to do everything. It doesn’t have to win awards, make you look good, or have a wry subtext. Getting something simple to work is hard enough. Concentrate on the basics, and see if your idea holds up when shown to the audience.

In my opinion there is too much written about being outstanding and not enough on just being better.

Usability challenges associated with web applications

The final story of the week is a post by Jared Spool. Jared is a truely exceptional usability expert and I can highly recommend his Podcast. He is also an excellent speaker that I had the pleasure to hear again this year at SXSW.

The reason I mention him is because of a post entitled "3 important usability challenges for designing web applications." What I find so refreshing about this post is that it focuses on the web applications we all have on our sites rather than the trendy web 2.0. apps we hear so much about.

Sites like delicious, gmail, of even the up and coming getsignoff (shamless plug!) are somewhat unusal in terms of web apps because the whole site is the app. Most web applications are a part of a greater whole. They are contact databases on corporate intranets or ticket reservation systems on airline sites.

The challenges associated with these types of web apps are different from their trendier cousins and Jared addresses these problems in his post.

It is definately worth reading if you have web applications on your site.

Back to top

Feature: Lessons learnt SXSW

Marcus shares his impressions of SXSW and the lessons we can all learn.

Back to top

Interview: Garrett Dimon on form design

Paul: So joining me today is Garrett Dimon. Good to have you on the show. How are you?

Garrett: Pretty good.

Paul: Now I have to say I’m really excited about having you on the show because I have to say I’ve become a bit of a fan. I’m sorry to admit this and I know it’s horribly embarrassing when people say things like this to you. But ever since you’ve released your website which so impressed me I’ve been kinda following your work since then, some of the stuff you’ve been doing. You’re everything I’m not. You’re minimalistic, you’re clean and considered and well thought through while I’m chaotic, over the top and brash. That’s why I’m attracted to your work I think because you’re the
opposite of me.

Garrett: Everything I do from my apartment and everything is just the less I have, the simpler things are, the better things seem to turn out for me.

Paul: If only I could live that way. I’m just not… my brain just doesn’t function in that way. But that’s really cool. So I wanted to get you on the show to talk about forms of all things. It’s something that we’ve touched upon a couple of times in the show but mainly as passing comments in news stories and things like that. In actual fact a couple of the times we have mentioned it, it’s your name that’s come up. It seems to be something that you write a lot about from time to time. You see different articles popping up in different places. Why forms? What is it about forms that seems to attract your attention?

Garret You know it’s hard to give an answer. I really don’t know. But in thinking about it probably my first bet is that I really don’t consider myself to be a designer per say in terms of the more traditional, more artistic design orientated type of visual designer. But with forms it’s more about the interaction design and the more logical aspects of design which are things that definitely work better in my head. So how do you write error messages; how do you label fields; what order do they go in; how should they be grouped; do they go on one page or two pages. Some of the more logical, more interaction issues. Then using what little design knowledge I have to supplement that and make it visually easier to digest the form and see and understand the pieces of it. Basically to me it’s basically the one thing that I feel like I can comfortably design and layout because there’s a lot more to it than just the aesthetics.

Paul: Yeah that kinda makes sense. Why do you think forms are so important in a way? It’s obviously something you consider important but there doesn’t seem to be huge amounts written on the subject. What is it that makes them worth of that kind of attention as far as you’re concerned.

Garrett: I think part of the reason is precisely because they don’t get enough attention. Any real attention you see to forms, I haven’t seen it recently but it’s how do you skin your forms to completely control how they look. Which to me is one of my huge pet peeves. It seems like such a waste of time. To worry about what the forms look like in the browser as opposed to how they actually work, I’m thinking if you’re going to invest the time worrying about how your forms looks it’s probably better to spend that time worrying about how they are going to work. Are you using the right form field for that job and some of the more critical things about forms. Really forms, especially now with web apps being what they are, forms are such a huge part of your everyday interacts. Things like efficiency, learnability, accuracy, all the vasts of usability that matter. It’s not just a matter of “Is this form efficient?”. Well it’s easy to make an efficient form but it’s not necessiarly going to be something that somebody else could learn and use or you might be able to learn it but will you remember how to use it next time you come back. Balancing all the different kind of vasts of usability that Nielsen identifies and really working them out so that you don’t dumb the form down so that it’s so simple that anyone can use it that it’s just a cumbersome process to fill out. Really kind of massaging it with all those things in mind.

Paul: You’re right when you say that in the world of web applications certainly forms are amazingly important but they pretty much appear on every site. It’s hard to thing of a site where they don’t appear.

Garrett: Well you think about a magazine site or anything like that where it’s more content orientated, it’s definitely a lower priority.

Paul: Yeah but you’ve still got contact us forms and things like that.

Garrett: Yeah, comment forms and…

Paul: Ok. So you touch there on the fact that one of your pet peeves was the fact that people worry about the design of their forms rather than how usable they are. What over common mistakes are you seeing from people about how they design and implement forms?

Garrett: I think there’s a whole slew of them and I think a lot of it is just worrying about the wrong things or not giving thought to things that matter. My main reason with the designing the form fields is that people are used to seeing form fields and what they look like in their browser, in their native rendering. Sure as a designer having pixel perfect control would be nice but I would hope that most of us who are now designing on the web would have forgone that state of mind where we have to have complete control over everything, it has to look exactly the way we want. A lot of time not only is it a waste of time but it actually hinders usability when those form fields don’t look like what someone expects a form field to look like or button for that matter. When the design becomes design for design’s sake it actually hinders usability in addition to just wasting time. When I initially started developing things it was all about consistency because consistency is easier to implement. If every form field looks the same, behaved the same, is the same size etc. it’s easier to implement because you use the same CSS and you don’t have to put as much thought into it. So while consistency is valuable there’s definitely an aspect of context that a lot of people don’t necessarily pay attention to. In some situations, I think 37 Signals have done a good job on this, they’ll make some fields larger than others relative to the size. In particular in Backpack, their headings aren’t just a form field they are actually bolder and look a little more like a header. They are a little larger font than the body of the note. It adds a little bit of context so that it’s more intuitive as to what the purpose of that field is. There’s a lot of different ways to do it. That’s just one of the more tangible ones. Basically the mistake being focusing too blindly on making everything consistent when there are appropriate situations to break the rules and use context to make some changes. Another one is just dumping a whole form onto the page without breaking it up into logical sections or groups. A lot of times people are afraid of making a form any longer visually because of scrolling. While you don’t want somebody to scroll 80 screenfuls, scrolling one versus eight screens is neligable.

Paul: So you wouldn’t suggest splitting forms across multiple pages then?

Garrett: Well there’s definitely context for that if it’s appropriate. Amazon is a great example there because you’ve got your payment screen and your address screen. It actually can be a fairly complex process but the time you’ve selected several addresses or updated an address, updated a payment method, changed the items in your cart. As you’re jumping around the different screen’s you definitely wouldn’t want all that interaction to try and be contained on one screen. It depends on the size of the form and the context of the form and how interactive it can be, how many potential branches off of that path are there to take. Another would be poor labelling. A lot of the time people label things. This goes back to just naming conventions in general. Just basic information architecture stuff. Whether it follows a corporate naming convention that may not be the right word for somebody that’s not inside the company wall or just simply flat out the wrong word for international [???]. Really anything. Just not putting enough thought into the label. The first thing that pops into your head isn’t always the right thing. Using the wrong kind of inputs so a lot of times whilst… and I have no idea in the world why people would do this… People who for instance who use checkboxes when they won’t use radio buttons and instead they write Javascript to control the radio button. Checkboxes as if they were radio buttons. Thinks like that where I just have no idea what these people were thinking in some of these situations. Just a lot of things like using a radio button or having a yes/no radio button where a checkbox could work. Multiple select lists which are an absolutely terrible interface element to use because a lot of people don’t know you can control+click. If there are small lines and you accidentally slip off that control key and click on a new one, it’ll select that new one and erase all your other selections in that list. There’s different things that kinda get abused and misused in situations where they really aren’t necessiary. A much simpler solution usually exists.

Paul: Yeah. I’ve seen the radio button, checkbox problem and it’s always very amusing.

Garrett: And vice-versa. Where it’s radio buttons and they try and make them checkboxes just because they think it looks prettier sometimes.

Paul: How bizarre.

Garrett: Which I guess is another great example – over using Javascript in forms. It’s one of those things. I don’t know where I heard it but the best description I ever heard of Javascript, Ajax or any of that stuff is that it’s really a spice. If you’re cooking you wouldn’t just dump a whole bottle into your pot. Or you wouldn’t start with a bottle of curry and dump it into a pot and say “OK, now what are we going to make?” You would decide what you are going to make and then think “You know this could really use a bit of curry here”. A lot of people just don’t use Javascript as a spice. It really starts to define the experience and in a lot of situations actually makes it worse or more confusing.

Paul: I presume you would encourage some use of Javascript for example. Things like doing some client side validation as long as it falls back on a server side validation. That kind of thing.

Garrett: Yeah absolutely.

Paul: OK so let’s turn that question around. We’ve been talking very much about the mistakes that people make, but what advice would you provide people about approaching forms? What are the things that they should be doing rather than shouldn’t be doing? I know that in some ways this is going to overlap but is there a particular approach that you take?

Garrett: One of the biggest things I guess is when ever; doing consulting for custom applications or things like that a lot of times we don’t realize that a lot of the complexity from forms comes from the complexity of the business. Whether it’s somebody doing markup or somebody designing a form, a lot of times you know if a business analyst or whoever creates these form requirements and says “here you go design this form.” It has 100 fields and this is out contact form and 80 of the fields are required. A lot of times people just say “okay, it’s my job to implement this. In my experience a lot of business analysts aren’t really familiar with principles of the web and what makes sense. A lot of times the real effort to creating a good form is in educating everybody else about what would be involved. Pushing back in situations like that. Not in a bad way but in a very professional productive way. “You realize that this is going to be a really bad contact form. Nobody’s acutually going to use it. I’ve even heard response like “That’s the point. If people contact us we have to take time a respond to them.” The problem isn’t with the form there, its with underlying things. Obviously that’s a little bit of an exaggeration. The idea is that the best place to start with forms and any kind of interaction like that is with the principles that are underneath there kind of guiding it. With the issue tracker that I am developing, I started out parring back the process of what’s the lifecycle of an issue. Trimming out parts that I didn’t think would really be necessary. I was just looking at it in the context of the lifecycle. I hadn’t even thought about what are the forms going to look like? How am I going to communicate this lifecycle within the context of the application? When it came down to the point when I had to explain how that actually worked, because I had trimmed the proccess and the lifecycle down so much, and it was only 3 steps really, I was able to translate that concept directly into the interface. If I had never actually gone and trimmed the lifecycle down and it had 6 different states that were very cross dependant and this state only is an option when you are in this state… It gets so complicated that even if I could express it in an interface, the code to build it would have been so absolutely unweildly that I could have never created a natural and intuitive inteface. So, I guess really challenging the underlying things rather than just thinking about the things on the surface. And then really just look at every form on it’s own. In it’s own light. What is the goal of this form? Should it be laid out like a traditional form? With one set of “label” “field” all the way down the page and a submit button. Should there be other buttons? Another thing when, I have a fairly consistent model that I am using when I am designing forms in my new application. The main form is for submitting issues and that one form is probably going to get 80% of the useage in this whole system. That and commenting. In the context of submitting issue alot of times you will be in a meeting capturing things as people are talking, capturing issues cause it’s an issue tracker. You want to be able to capture and issue, save it, and move on and capture another one really in kind of rapid succession. So I added an extra button at the bottom that I wouldn’t put on any other page, cause it doesn’t make sense, to save and add another. So it immediately saves that one and takes you back to the data entry screen. You can just continue in a circle and just keep on adding and adding. So really looking at forms and thinking about how are people going to be interacting with this? What are they doing in the real world while they’re using this form? Are they copying data from another application into here? Are they in the middle of a meeting just capturing items in rapid succession. What are they doing? Are they just quickly jotting it down from their iPhone? Understanding that context helps illustrate ideas and different sublte variations that you can do to forms and make them very very practical without adding a whole bunch of extra overhead on the implementation.

Paul: I remember you wrote an article at one stage redesigning eBay registration form. When you wrote about that you talked about the fact that this is a registration form. It is a one off form, and all of the ways that that then informed the way that you built the form. How it affected the positioning of things, and the layout and things, simply because it wasn’t going to be a form that people were using again and again. That’s the same kind of context that you are talking about.

Garrett: Yeah exactly. There’s always a different context to a form and it matters. It is easy to overlook it but that context, and really any design for that matter, context is so important but it is something that…I think that main reason that people don’t pay as much attention to context is because it requires a lot of extra work. A lot of times it’s easier, and it makes sense for kind of a first pass, to make every form look the same. It takes a lot more work to go through and re-invent the wheel every time you look at a form even though, re-inventing the wheel is probably a little bit extreme, to really give it some custom attention. Some tender loving care, just takes a lot more effort that lot of projects don’t have time for.

Paul: You mentioned earlier 37signals that you liked some of the stuff that they were doing. Are there any other good examples out there of forms that you really think are getting it right and are worth us having a look at?

Garrett: Probably the one thing that always jumps to my mind any time anybody asks me about forms is all of the work that Luke W is doing. I hate trying to butcher his name. The stuff that he is doing and hopefully his upcoming book is just really incredible. In depth. He’s done a lot of eye tracking research about label placement and button placement and he’s talked extensively about primary and secondary action buttons. All of his stuff is really incredible.

Paul: So where can people find out about him?

Garrett: I always just google for Luke W to get to his site. Functioning form is his blog. He’s the first hit for Luke W.

Paul: I’ll add it to the show notes. People can get to it via that. That’s interesting. I must admit I hadn’t hear of him so I’ll definitely check that out.

Garrett: He’s one of the, I don’t know his exact title, but he works at Yahoo and he’s got a plethora of presentations about form design and all of the kind of stuff. Really sharp guy.

Paul: And he’s writing a book you say as well?

Garrett: Yes he is for Rosenfeld Media. It’s due out early 2008.

Paul: Excellent. So just to finish us off. A little bit of bile at the end of the interview. Is there any forms that you want to name and shame? Any site that do things really badly that we can all go and laugh at and sneer at?

Garrett: You know that’s a very tough thing to do.

Paul: (lauging) So many out there.

Garrett: Well there are so many out there. But at the same time too there are a lot that seem like they could use improvement but they’re companies that are investing a lot of money and research to improving their forms. So I’m hesitant as an outsider, somebody who isn’t exposed to some of that data, to try and call them out, when they’re probably acutually right on the money. The top two that come to mind that I know are successful are eBay and Amazon. I think Amazon succeeds on the interaction design of their buttons and the flow of their checkout is natural and intuitive but I feel like a lot of their page designs, and it could be a very intentional thing in order to, although I hate thinking that Amazon would acutually do that, to kind of trap people and confuse them almost. If you look at each page in and of itself I think there is a lot of design things that they could make adjustments to that would make the pages easier to understand and comprehend at a glance. I feel like right now their design of their checkout process, or most of their site in general, is very busy and intense. It’s difficult to focus on one element because there’s so many elements. There is very little very intuitive page hierarchy within each page. And they’ve made leaps and bounds, watching the site evolve over the years. But, it still feels like there’s a lot more room for some design consistency for them to introduce. They’re slowly getting there. eBay is another one who, I know they acutually, I forget their CEO’s name, but she declared 2008 the year of user experience at eBay. They’ve acutually invested a lot in trying to improve their forms and really their user experience period. eBay is one that I’ve only successfully purchased something on there once and everytime I try to swim through there I get lost and just give up. Too me any situation like that is just begging for help. I think any form, even the best of the best, even 37signals, everybody is still learning. This is all so new that even the best forms have so much room for improvement. Even my stuff, I come a month later and say “what was I thinking there?” There’s so much work that needs to be done. I think that Luke’s work that he’s doing is probably some of the best and most important work that we’ll see in forms in the near future. He’s starting to really put down facts about what really is good and bad and why it is good and bad. Up until now most of us have just been pontificating based on “well this form is hard to fill out because of errors.” Or you know, the form breaks, or the error message isn’t helpful. Very obvious things. He’s tracking the much more subconcious things that until now nobody’s really dug into and made claims about. It’s kind of a cop out on your question.

Paul: No No. You gave two example there and you gave constructive reasons why they should be improved or could be improved. No I don’t thinks it’s a cop out. You’re just so much nicer than I am. You didn’t go for the jugular that was the only thing. Garrett it’s been great to have you on the show. I think that you’ve given us some real good hints to get going I guess and make some imrovements. It was good to talk to you.

Garrett: Yeah likewise.

Paul: No doubt we’ll get to talk again soon before too long. Especially when you’re issue tracker comes out. We’ll have to get you on hear all about that.

Garrett: Yeah. I’m hoping it will be sooner rather than later but it’s definitely tough to balance the feelancing and paying the bills and making progress on it.

Paul: I know exactly how you feel, we’re doing the same thing at Headscape at the moment. It’s always difficult. Client work is so tempting because it pays the bills here and now.

Garrett: Yup, exactly.

Paul: Okay good to talk to you and we’ll talk again sooon.

Garrett: Sounds good.

Thanks to Lee Theobald for doing the transcription

Back to top

Listeners feedback:

Finding usability test subjects

Our audio question comes from Clare who asks…

"Where do you find your test subjects for more formal user testing"

It can be hard to find good test subjects and I am not aware of any agencies out there that source people for you (although I am sure somebody will correct me).

I think it is worth stressing that finding users who match the demographic of your target audience is not a huge concern. As Steve Krug points out in his book "Don’t make me think" most problems are encountered by any user. That said, where possible it is good to find people that roughly match the specification.

To be honest our approach it is very adhoc. It normally consists of both Headscape and the client scrambling around to see who you can find. The client often has "tame" customers they can ask and we fallback on family, friends and other clients for recommendations.

I should also say my local church has been very handy! A church seems to have a good cross section of ages and backgrounds and an advert in the church newsletter often does the trick. Equally advertising in your local newspaper can attract people, but you have to be willing to pay for their time.

Accessible tables

This week’s email is from Daniel and takes the form of a recommendation rather than a question…

"Could you cover the tips discussed in this article [about accessible tables]? I have seen a lot of tables on the web. Almost none of them uses any of these tips."

The article Daniel is refering to can be found on the Opera developers site, which is a great resource covering all aspects of web development (not just stuff relating specifically to Opera). The specific post looks at how to markup data tables in an accessible format. Since designers have stopped using tables for layout they have become largely ignored. However, if not marked up correctly they can prove a real problem for speech readers. A simple table such as this…

Day AM PM
Monday Meeting Travelling
Tuesday Free time Meeting

…can become impossible to understand when read back because it is read in a linear fashion…

Day, AM, PM, Monday, Meeting, Travelling, Tuesday, Free time, Meeting

However, if marked up correctly it suddenly makes sense…

  • Day Monday AM Meeting
  • Day Monday PM Travelling
  • Day Tuesday AM Free time
  • Day Tuesday PM Meeting

Great find Daniel. These are tips we should all be implementing.

113. Hiring

Posted in Classic shows on by Paul Boag

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

Play

Podcast: Download (29.9MB)

Download this show.

Launch our podcast player

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

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

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

News and events

Highly extensible CSS

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

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

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

Video tools

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

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

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

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

Microformat boost

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

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

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

Back to top

Feature: Hiring new staff

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

Back to top

Expert interview: Christian Heilmann on common Javascript mistakes

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

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

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

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

Paul: Um hum…

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

Paul: Yeah…

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

Paul: Um hum…

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

Paul: Yeah.

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

Paul: Umm…

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

Paul: Yeah.

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

Paul: Mmm…

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

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

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

Paul: Um hum…

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

Paul: Yeah.

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

Paul: Mmm hmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

Paul: Mmm…

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

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

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

Paul: (Laughs)

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

Paul: Mmm.

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

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

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

Paul: Mmm…

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

Paul: (Laughs)

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

Paul: Mmm.

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

Paul: Okay.

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

Paul: Oh okay.

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

Paul: Mmm.

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

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

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

Paul: Mmm…

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

Paul: Mmm.

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Um huh.

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: Mmm.

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

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

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

Paul: Mmm.

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

Paul: Mmm.

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

Paul: Right.

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

Paul: Mmm.

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

Paul: Yeah.

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

Paul: Mmm hum.

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

Paul: Yeah.

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

Paul: Umm hmm.

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

Paul: Mmm.

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

Paul: (Laughs) …or drinking…

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

Paul: Mmm.

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

Paul: Mmm.

Christian: Otherwise you start preaching to the choir.

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

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

Paul: Okay.

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

Paul: What do you mean by that?

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

Paul: Okay yeah.

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

Paul: Yeah.

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

Paul: Mmm hum.

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

Paul: (Laughs)

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: (Laughs)

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

Paul: Yeah.

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

Paul: Yeah.

Christian: And that’s never the case.

Paul: Hmmm.

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

Paul: Mmm hmm.

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

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

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

Paul: Mmm.

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

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

Christian: Yeah.

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

Christian: See you soon. Bye.

Back to top

Listeners email:

Rolling out new features

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

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

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

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

Here’s the solution I had planned:

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

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

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

Content management and CSS

Our second listener contribution is a question from Adrian…

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

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

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

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

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

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

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

111. Utopia

Posted in Classic shows on by Paul Boag

On show 111: Designer and developer work together in utopian harmony. Two great listener reviews and Aral Balkan announces the biggest online web design conference ever.

Play

Podcast: Download (31.2MB)

Download this show.

Launch our podcast player

News and events | Designers and developers in perfect harmony | Aral on Singularity | Listener emails

News and events

Fixing your product pages

I want to kick off this week’s news with an article on Think Vitamin which I missed when it originally come out back in November. It is a post by Amy Hoy providing some basic advice on user experience design, focusing in particular on product pages.

Amy starts by giving some basic tips. These include…

  • Be nice to your users and customers (and potential customers).
  • Design as if your main goal is to inform and educate.
  • Be honest and forthcoming.
  • Help your users and customers to do what they want, not what you want them to do.
  • Be consistent with your message and quality of service (and I’m including software design here, folks).
  • Scientific, measurable “usability” doesn’t necessarily make for a good experience.
  • Good design makes people feel good.

She then moves on to look at specific examples. She compares the product download pages of Opera and Firefox. This is a fascinating insight into what can go wrong with user experience design.

What I particularly like about this article is Amy’s engaging writing style. She is incredibly personable and her writing really drew me in. It is a long time since I have read a post word for word.

Being inspired by newspaper design

I often talk on boagworld about looking beyond the web for inspiration. Too often as designers we look at other websites, when we should be looking to art, architecture and the world around us for inspiration.

Admittedly this can be somewhat of a stretch at times. It’s not always easy to see how a piece of art or kids toy can inspire a website. Many of us don’t even try as a result.

How about starting with an easier comparison? This week I came across a superb post that looks at award winning newspaper design and it really excited me about the possibilities when I finally get around to redesigning boagworld.

I think we have a lot of learn from newspaper designers and in many ways there are a lot of similarities. Both web design and newspaper design rely heavily on white space and grid layout. Both have to deal with large amounts of written content. Both have to copy with constantly changing content. The list goes on.

Take a few moments to read this post, even if you just look at the designs. It will definitely inspire you.

Using browser history to improve the user experience

My final news story of the day is an interesting idea centred around a users browser history. Niall Kennedy has proposed a technique where you could use CSS and Javascript to display content based on what sites a person has previously visited.

Although I am not sure I like the idea of websites snooping through my browser history, it does provide some ways of improving the user experience. If nothing else it can remove some of the clutter from our websites.

Let me give you an example of how it could be used. A website could check your browser history to see if you regularly used digg.com. If you did then it could post a “digg it” button. If not it could be hidden away. The same principle could be used to show only a RSS subscribe button for the specific news reader you use, rather than showing them all. The possibilities are endless.

Whether you can see an application for this or not, it is still a very impressive and clever idea. Definitely worth investigating further.

Back to top

Feature: Designer and developer in perfect harmony

In this week’s feature Marcus is looking at the working relationships between web design teams. He brings together a few Headscape employees to discuss how to ensure a good working relationship between all parties.

These are the roles that we look at and who represents them in Headscape:

  • Requirements analysis, information architecture development (consultancy) – Marcus
  • Design, templates – Leigh Howells and Paul
  • Technical development – Rob Borley
  • Project management – Charlie Allen

These are the issues we covered…

  • What are the things that really make a project work well for you?
  • From the other perspective, what are your pet hates?
  • Designer and developers – should clients be able to talk to you directly?
  • Most projects have a habit of their scope creeping. How can that best be avoided?
  • At Headscape we use a number of different tools to manage projects. How do these tools work?
  • Particularly with designers and developers, we have set up ‘buddy’ systems. How does this work? Is it effective?
  • Some projects stall or go on hold for a while. Are you able to just pick up where you left off?

Back to top

Expert interview: Aral Balkan on Singularity

Paul: So, joining me today is Aral Balkan. Hello Aral.

Aral: Hi, Paul. How are you?

Paul: Not too bad. It’s been a while since we’ve had you on the show.

Aral: It has been a while. I’ve missed it.

Paul: Uhm, so yeah, basically, I’ve been keeping a secret from Marcus. Which is I stoically refused to tell him what Singularity is all about.

Aral (laughing): Was he curious?

Paul: He was.

Marcus: It’s something to do with Star Trek, isn’t it?

Aral: Well I am a big fan, but no.

Paul: So why don’t you tell him what Singularity is all about.

Aral: Well, Singularity is going to be the world’s first large scale online web converence.

Marcus: Okay.

Aral: In a nutshell, that’s what it is.

Paul: So, I mean how does this work from a technology point of view, from an organizational point of view. Tell us a little bit about how it’s going to be organized.

Aral: Uh, sure! Well, basically it’s a web conference, so in terms of topics, it’s very eclectic. We’ve got a really cool group of speakers who have confirmed already, about 24 of them, from all parts of the web really. We have web standards people. We have JavaScript developers. We have artists who work on the web and they’re going to be presenting their sessions online. It’s going to be streamed through a custom interface built in Flash, based on the Flash platform, using technologies like Adobe Connect which used to be called “Breeze”. It allows the real time streaming of audio, video, and also sharing of interactions or objects through the web. Beyond that, we’re also going to have a very local character to it with local hubs where people will be able to gather and watch the audience and interact.

Paul: Oh, ok, so it…

Aral: I mean, watch the conference and interact.

Paul: Right, so people will actually get together as well, because that was one of my questions. One of the best thing about conferences is meeting up with people.

Aral: Definitely! The bit that I don’t like is the travelling. It’s being stuck in coach next to someone who’s, you know, not feeling too well or is kind slumping onto your seat or having the hotel from Hell experience that I’m currently having over here. (Paul laughs)

Aral: Don’t even get me started on that. There was techno music until 2 AM from the bar downstairs.

Paul: Nice!

Aral: Well, it was refreshing in the morning, though, because the shower went from boiling from freezing back to boiling and kept doing that. So, yeah, I think this is going to hopefully take the best parts of what attending a conference means, and maybe leave some of the bits that aren’t as great.

Paul: Are you going to leave it for local groups to set up local meetings or is that something that you can organize centrally?

Aral: I want to see it as decentralized as possible. I am talking to a few venue sponsors, potential venue sponsors. We’re talking with Yahoo at the moment. The BBC, I’m talking with Ian there. There are very interested and very excited about it. But, beyond that, I want it to have a grass-roots character. So, we’re already getting people volunteering for regional areas. I’ve called them Ambassadors. We have an ambassador from Bristol and there are people from Singapore, Mexico, all over, that are very interested in volunteering. So, we’re probably going to have regional volunteers and ambassadors who organize local groups, user groups, to have meetings around Singularity, where attendees can go and join and hopefully take it further, you know, add a local character to it.

Paul: OK, let’s cover some of the basics. How many speakers are you looking at, first of all. Let’s start with that.

Aral: Okay. We’re going to have a little over 100 hundred speakers.

Paul: Wow!

Aral: So, yeah, it is actually a large web conference.

Paul: Yeah.

Aral: And the that its online.

Paul: So when… how long is this going to be over? You know, if you’re going to have 100 speakers…

Aral: It’s three days.

Paul: It’s going to be over three days…

Aral: And it’s multiple track.

Paul: Multiple track, okay. That’s what I was going to ask.

Aral: And I think one of the things, just cut you off there, with uh… it is multiple track, but everything is recorded.

Paul: Oh, Okay.

Aral: So, its presented live and we’ve got some really great ideas for making those presentations a little bit more interactive than you can get in the real world. But, it will also be recorded. So, if you do miss something on the day, you’ll be able to watch it later.

Paul: Cool! How are you going to deal with things like time differences? Are you going to have it going 24 hours? Or, how are you dealing with that?

Aral: Well, initially, I was thinking about having it 24 hours. Just because it sounded really cool.

(All Laugh)

Aral: You know? “Three days! Twenty four hours!! One hundred plus speakers!!!” But then I thought about it. Especially the local meet ups. I want those meet ups to have a BarCamp-like character to them, you know? Where people can stay over. And I didn’t want the conference, the somewhat one-way part of it taking up part of the day.

Paul: Right…

Aral: So, I think it would be nice to have the presentations during the day and then after that, leave time for people at local gatherings to create their own sessions to talk about what they’ve been listening to, to add to it, to localize it for themselves in a matter of speaking.

Paul: Sure.

Aral: You know, to have, to do things to tell you the truth, I have no idea what they’ll come up with, which is great.

Paul: So, when is this scheduled for? What are the dates that people should book for it?

Aral: Well, we finally have dates. We’ve been going back and forth internally before we announced, but it’s the end of October. October 24th through the 26th.

Paul: Okay, that sounds good. And do you know a price yet, or are you still working on that?

Aral: Well, the pricing we’re still working on, but I think we’re going to be very positively surprised by the pricing. We’re actually working to get it even lower than we initially thought we wanted it. And we’re working closely with certain sponsors and we’ll definitely be announcing more about the sponsorship that we have as they become official, but some of our sponsors are interested in keeping the ticket price low as well and supporting us.

Paul: So, how many people are you expecting to attend this conference? Have you got any idea of what you’re aiming for?

Aral: Well, my conservative estimate right now is 10,000.

Paul: WOW!

Aral: And that’s based partly on past experience. We did 2 one-day open source flash conferences using similar technologies, for which we got about a thousand attendees at each one. Those were much smaller. One day, three or four speakers. My conservative estimate is that this will be about ten times the size of that.

Paul: That’s amazing. I mean that will be really cool to, you know, if that comes off. Are you trying to get a range of different speakers? Are you covering any particular areas of web design or are you going as eclectic as you can?

Aral: Well, the tagline that I was going with initially was that Singularity would define web 08. And I’m kind of trying to get people away from using version numbers when talking about the web. We’re getting away from using version numbers when talking about software because you know the moment you slap one on its outdated. So, I think maybe using the year would be easier because you’d at least know that you’re talking about a definite stat of time. So, my initial idea is that it would define Web ’08, and as such, I’m trying to get as eclectic a mix of speakers as possible. And also, I see that there is a lot of overlap with which to send applications for example. There’s a lot of overlap over what people using AJAX are doing and then traditionally web standards people are getting interested in applications as well. So, I want to have a real mix. I also don’t want people on the Flash platform to be excluded, as they sometimes are. But, this is definitely not… that’s not the focus of the conference.

Paul: So, where can people find out more about this? I mean obviously, some people are going to want to be signing up. Obviously, you can’t do that yet, until the price has been set. So, is there any kind of way (

Aral: Of course.) they can express their interested or find out more information or whatever?

Aral: They definitely can. The site is “singlularity08.com”. You can also get to it from “singularityconference.com”. And, basically, we have a blog there and you can express your interest. You can email me directly as well. My email address is “[email protected]”. Or just email my private address at “[email protected]”. Yes, so definitely, if you want to be kept in touch when we do release information, but there is also an RSS feed that you can subscribe to on the site.

Paul: Cool! Well thank you very much for coming on the show.

Aral: Thank you for having me, Paul. And of course you’re speaking.

Paul: Well, yes, of course. That goes without saying (Paul laughs).

Aral: Are you excited? Have you decided what you are speaking about?

Paul: I have not a clue yet, no. (Aral laughs)

Aral: Have I just put you on the spot?

Paul: Yes, totally. Thank you very much. (Aral laughs) And its going to be a weird one. It’s going to be a different way of speaking and so you kind of need to tailor what you’re doing to approach. It will be interesting.

Aral: Exactly. And we’re going have dry runs and we’re going to try out the interface as well.

Paul: Cool.

Aral: And maybe tweak it for different types of presentations. We just have so much potential with what we can do.

Paul: Mmmm. Yeah.

Aral: Because, we can actually control the medium. So, it’s really exciting.

Paul: Excellent! Excellent stuff! Really looking forward to it and we’ll get you back on the show closer to the time to see if we can drum up a bit more support for it. Excellent stuff. Thank you for your time.

Aral: Sounds great, Paul. Thank you so much.

Paul: Alright then.

Back to top

Listeners email:

An alternative wireframing tool

A few weeks back I talked on the show about wireframing tools. Not long afterwards I received an enthusiastic email from Wen talking about a product called OverSite. He was so passionate about the product that I thought we should get him on the show to talk about it. This is what he had to say…

I’ve been catching up on my episodes of BoagWorld, and I just recently listened to your discussion about wireframing. As a UI designer, I completely understand the importance of mocking up a UI, and testing the mockup, before ever launching Photoshop.or Dreamweaver. So I thought I’d provide a review of a wireframing tool that I use, called OverSite. I haven’t seen many other tools out there like it, so I figured you and your listeners might find it useful.

OverSite is a shareware application that runs on Windows as well as Mac OS X; I use the Mac version myself, but am able to exchange OverSite files back and forth with my PC-using colleagues. OverSite lets you create a full or partial representation of your site structure: all of the sections and pages that make up your site. You can do this in one of two ways. The first way is fairly predictable; you add one section or page at a time by clicking a button, entering a name in a popup dialog, and clicking OK. The second way is fairly clever. You open a window that OverSite calls the Rapid Structure Creator. There, you type out your entire site structure in one text area, putting line breaks between sections and pages, and using indentation to indicate nested levels. Then you just click OK and viola! OverSite generates a tree depicting your entire site structure.

At this point, you can dive into your wireframing. Each page contains its own wireframe canvas. You can place the usual widgets on the canvas: buttons, textfields, checkboxes, images, etc. You can also place basic geometric shapes like circles, rectangles, lines and stars on the canvas. Each component can be individually styled; you can also create global styles that apply to all components, or to components of a specific type. OverSite also lets you create what it calls composites, which are complex elements that are made up of individual widgets.

Let’s say that you have a search form that will appear on a few different pages. You can create a composite representing this form. The composite might contain a few labels and text fields, maybe a checkbox or two, and a couple of buttons. If you want, you can tell OverSite to automatically draw a border around the form elements. Once you’ve created that form composite, you can drop it into your wireframes where ever you want it.

OverSite does lack built-in, complex widget types, such as tables. You can create them out of the widgets that OverSite does provide, but it would be nice for OverSite to create them for you.

While each page has its own wireframe canvas, so does each section. The purpose of a section’s wireframe is to create elements that will appear on all of the pages within that section. For those who have used server-side-includes, it’s kind of like that. As an example, say you had a navigation bar that should go on the top of every page in your Products And Services section. You would create that navigation bar once, in the Products And Services wireframe canvas. Then the nav bar will appear in every page within that section. In addition, OverSite provides tools to modify that nav bar in specific pages, for example, to change the color of a specific link in the nav bar when you’re actually on the page that that link refers to.

Static wireframes are fine, but I prefer being able to test the interaction between screens before I actually build the site out. OverSite lets you link any widget or composite to another page. If you don’t want to do the work yourself, you can also tell OverSite to auto-generate a simple navigation bar. Then, you can use OverSite’s built-in web browser to test out your site’s navigation.

Another useful thing I’ve found is OverSite’s notes. The notes functionality lets you provide details about specific widgets. That way, when you print or export your wireframes, you can include more information to whomever you’re handing them off to.

As an added bonus, OverSite will also create a graphical sitemap based on your website structure. You can tweak the appearance of the sitemap… the operative word being “tweak”. Fonts, colors, spacing, and icon sizes are under your control, but not much more. Here’s where I think the application could do better to allow you to fully customize the sitemap. Still, it’s created automatically for you without your having to lift a finger, so that’s something. Plus, the sitemap can be exported into a number of formats: GIF, JPEG, PNG, PDF, Scalable Vector Graphics, and others.

Once you’ve finished your wireframes and want someone else to be able to play around with them, you can export them as web pages for non-OverSite-using people to click-through. You have two options here: export your stuff as pure HTML, or export them as imagemaps. The trade-off between the two is fairly obvious: pure HTML will provide you web pages that looks more “real world”, but won’t look exactly like your wireframes do, and they’ll look different in different browsers. Imagemaps ensure that you know exactly what your pages will look like, but it’s typically not going to look like a real web site.

As a UI designer, OverSite’s become a pretty indispensable tool in my software arsenol. You can get it at the developer’s website.

A vertical rhythm calculator

In the same show we also had Jason Beaird talking about vertical rhythm (among other things) and this promoted an email from James. He wrote…

Hi I’ve been listening to your podcast for about six months now and really enjoy the mixed style of content and witty banter.

With all the talk of CSS vertical rhythm and em based layouts I thought I would point you in the direction of a vertical rhythm calculator that I built in Flex to help people work out all of those nice em values. My own site has been developed using the same principles with all typography and measurements set in em’s for an elastic layout. I am developing an AIR version that has an integrated browser so that you get visual feedback of your calculations, I remember one of the John’s comment on how useful such a tool would be on the fabulous Rissington podcast.

I have checked it out myself and have to say it is very impressive. What is more he has now created that desktop version. Check it out.

Yahoo Live!

Posted in News on by Paul Boag

Yahoo have launched a new live webcam broadcasting service that has some real potential.

Yahoo! Live enables you to quickly and easy start broadcasting live video streams. As you can see from the example below it is also incredibly easy to embed in your site. What is more they provide an API that allows for the creation of more sophisticated web applications. It will be interesting to see what people do with it.

106. Back to work blues

Posted in Classic shows on by Paul Boag

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

Play

Podcast: Download (29.5MB)

Download this show.

Launch our podcast player

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

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

News and events

Internet Explorer 8

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

Using CSS to diagnose problems

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

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

Common accessibility mistakes

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

Basic design principles

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

Back to top

Feature: Common mistakes of site structure

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

Back to top

Expert interview: Rachel Andrews on building a web design career

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

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

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

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

Paul: All right.

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

Paul: Ahhhhh

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

Paul: Yeah, I know the feeling.

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

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

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

Paul: OK.

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

Paul: Right, I see.

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

Paul: No.

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

Paul: Oh, ok.

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

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

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

Paul: Right.

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

Paul: OK.(laughing)

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

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

Paul: Right. Yeah.

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

Paul: OK.

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

Paul: Mmhmm

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

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

Rachel: As you do. Obviously

Marcus: Or not, in my case.

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

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

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

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

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

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

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

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

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

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

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

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

(Rachel and Paul laugh)

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

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

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

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

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

(Rachel and Paul Laughing)

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

(Both continue laughing)

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

Paul: Yeah, well Marcus is old and decrepit.

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

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

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

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

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

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

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

Paul: OK

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

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

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

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

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

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

(Rachel and Paul laughing)

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

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

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

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

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

(Rachel, Paul and Marcus laughing)

Marcus: I remember that feeling very well.

Rachel: Yeah.

Paul: Yes

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

Paul: Ahh, ok.

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

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

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

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

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

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

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

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

Rachel: Yup.

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

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

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

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

Paul: Cool!

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

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

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

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

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

Rachel: OK.

Back to top

Listeners email:

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

104. Give us your money

Posted in Classic shows on by Paul Boag

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

Play

Podcast: Download (25.5MB)

Download this show.

Launch our podcast player

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

Housekeeping

All change

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

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

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

Christmas giving

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

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

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

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

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

Give to the Boagworld Christmas Appeal

News and events

24 ways is back

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

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

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

Tips for development and design

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

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

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

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

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

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

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

What tips do you have for getting designs signed off?

 

Quick and dirty wireframes

Posted in User experience on by Paul Boag

I am currently in the process of wireframing an internal project that we are working on at Headscape. It occurred to me that despite the fact that wireframes are a fundamental tool of web design, they are not something I have spoken about before.

What is a wireframe?

Fundamentally a wireframe is a tool for rapidly prototyping a website. They roughly approximate the layout, content and hierarchy of a web page as well as the relationship between pages. Effectively you are building a rough version of the site.

Wireframes don’t look attractive. They are not designed as such. Rather they give a sense of how things will be organised on your site. In many cases they lack colour and imagery, although there is no reason why they should. However, they do show visual hierarchy through layout, font size and shading.

Example wireframe

What benefits do they provide?

So why produce a wireframe? Well there are a number of good reasons…

  • They act as a reference point for the designer to work from, demonstrating the relative importance of various screen elements.
  • They can be used to test with. This enables you to ensure users can navigate a site and find key content on a page.
  • They help flush out the details of a site that are often missed. These include things like password recovery and error handling.
  • They help to define interactive elements such as AJAX and Javascript in a way a static Photoshop mockup cannot.
  • They help the client to visualise how the site will work.
  • They identify navigational issues which need resolving.

How to create a wireframe

Once you have recognised the benefit of producing wireframes the next question becomes how exactly do you build them? The answer is largely dictated by two factors; the time available and the complexity of the website.

If you are really strapped for time then simply sketching out some key pages is better than nothing. Even these can be used in testing and shown to the client. However, a sketch does not show interactive elements or the relationship between pages.

If you have a little more time you could produce key pages in a tool like Omnigraffle or Visio. Better still is powerpoint which allows you to link multiple pages together, so creating a basic navigable site.

However, probably the most common way to build wireframes is using HTML. Of course the downside of this approach is that it can take longer if you are overly precious about your code. Personally, when it comes to wireframes I prefer the quick and dirty approach. I create my HTML wireframes using the WYSIWYG editor in Dreamweaver, churning out the pages through a mixture of CSS and tables. I don’t care what is going on under the hood. All I care about is that I can get a sense of how the site would work.

Taking this somewhat cavalier attitude to HTML wireframes is not without its drawbacks. Because the underlying code is a mess, ultimately the wireframe has to be thrown away. A better approach would be to use nice clean semantic code which can then be reused for the final build. However, in my experience this rarely works in reality. The only time I do use this approach is when building a site on our content management system. In such situations it is as easy to rapidly produce pages in the cms as it is in Dreamweaver.

The key to wireframes is for them to be quick and disposable. Wireframes are the place for you to experiment and try out new ideas. They are the place for testing and adaptation, not for being overly precious.

If your site is a simple one then using sketches or a tool like Visio will probably be enough. However, if it is more complex with a lot of pages or interaction then consider using an HTML wireframe. In short use the right tool for the job!