Tag Archives: editor

109. Rissington?

Posted in Classic shows on by Paul Boag

On Show 109. IE8 divides the web design community, Anton Peck talks about imagery, and the Rissington Podcast crew stand in for Marcus.

Download this show.

Launch our podcast player

News and events | Anton Peck on imagery | Listener emails

Unfortunately Marcus is not yet back on active duty but does thank you all for your kind support. However, do not fret. You do not have to endure another show of me waffling on by myself. Stepping into Marcus’ still warm shoes are two giants in the world of web design and podcasting. From the infamous Rissington Podcast we have Jon Hicks and John Oxton.

News and events

Microsoft to automatically roll out IE7

First up I was sent an article by several listeners which seems to indicate Microsoft is intending to do an auto-update of Internet explorer on the 12th February.

When IE7 was initially released Microsoft made the decision to make the upgrade to their latest browser optional. So even though a user had requested automatic updates they would not receive IE7 unless they specifically approved it. This decision not to force users to update frustrated those in the web design community who wanted to wave goodbye to the evils of IE6.

However, it would now appear Microsoft has decided to take the plunge and will be rolling out IE7 as part of the automatic update. Not all users are signed up to receive these updates but those who are will be using IE7 from February 12th (if they are not already).

Expect to see a significant decline in IE6 users to your site very soon. Perhaps it will not be long before IE6 follows IE5.

IE8 divides the standards community

Talking of Microsoft and Internet Explorer, probably the biggest story of the week is Microsoft’s plans for IE8.

IE8 promises to be a huge step forward in standards support and has been significantly rebuilt in order to enable this. However, such dramatic changes in their rendering engine comes at a cost. They fear that by becoming more standards compliant they will break many websites which are not built with standards in mind.

The way they have dealt with this problem is to introduce a small piece of code that you drop into your pages which can be used to specify what version of IE your site is designed to work with. The browser then renders the webpage as if it was that version of the browser. So for example you could specify that a page was designed for IE7 and a person viewing the page in IE8 would see the page as if it was rendered in IE7.

If no browser is specified then it defaults to rendering the page in IE7 that way no matter what changes Microsoft make in future browsers legacy sites are still rendered correctly.

What on the face of it seems like a very sensible plan has caused uproar in the web design community. A List Apart and Eric Meyer seem to be generally supporting the principle while many others including the likes of Jeremy Keith strongly object.

One of the main sticking point seems to be that this approach breaks progressive enhancement. In other words I may choose to implement a piece of functionality on my site knowing that it wont currently work in IE7 but does work in other more compliant browsers such as Firefox. If i don’t add this special code when IE8 comes along it will look at my page see the code is absent and so render it as IE7. That means even if IE8 supports the functionality now it wont use it because it is rendering my site as IE7.

Its a complex issue with good arguments on both sides. In next week’s show Eric Meyer and myself will discuss it in more depth.

HTML 5 is coming

Still on the subject of the future of web design we now turn to HTML 5 which has just been released in draft format. Sitepoint provides a nice little summary of what is in and what’s out. There is also a summary of the differences between HTML 4 and 5 which is very useful as well.

I cannot claim to have read the entire specification yet but I have to say what I have seen contains some exciting stuff. Having HTML tags to define common areas like headers, footers and navigation offers some interesting possibilities and its good to see built in support for video and audio.

The big shame is that practical application of this is still a long way off but its nice to know that there is potential there.

Career advice for web designers

Of course all these upcoming technologies wont matter to you if my predications of a couple of weeks ago come true and we all find ourselves without a job! This week I was pleased to discover I was not the only one with a pessimistic attitude towards the coming year. Robert Scoble has posted a entry entitled “what to do if you are laid off in 2008 recession“, which I thought was a particularly cheery title.

Actually it is a really good post with some excellent advice. What I like most about it is that the advice applies as much to a student trying to break into web design for the first time as it does to a out of work professional.

In fact if you are considering a career change of any kind (or have had one forced upon you) then this is a good read.

Advice includes…

  • Spend at least 30% of your day job hunting
  • Start a blog
  • Share your knowledge with the world
  • Demonstrate your skills on youtube
  • Networking
  • Contact web start ups because they are hiring.
  • Volunteer
  • Prioritise friends and family

The list goes on and is definitely worth reading.

Back to top

Expert interview: Anton Peck on imagery

Paul: So joining me today, as I said at the start of the show, is Anton Peck. How are you Anton?

Anton Peck: I’m doing great Paul. Thank you.

Paul: It’s good to have you on the show.

Anton Peck: I know. It’s about time isn’t it? *laughs*

Paul: It seems like it’s been a while. We haven’t actually had you on BoagWorld before have we?

Anton Peck: No, no. This is the first time.

Paul: But I’ve known you from… Where did we first meet? Was it South By Southwest?

Anton Peck: Yeah. I think we had sorta done virtual communication before then through email, IM or whatever. But we actually first met at South By Southwest last time.

Paul: Cool. So Anton, tell me and the listeners a little bit about yourself. How do you describe yourself? Do you primarily describe yourself as a web designer or an illustrator?

Anton Peck: That’s a tough call. The illustration is more my fancy, my hobby. It’s where my passion lies but the design is what I’ve been doing for a long time. So it’s sort of my trade of skill.

Paul: I see. So you’re kind of torn between two worlds.

Anton Peck: A little bit.

Paul: But fortunately those two worlds do overlap quite a lot which is why we have you on the show today. We thought it would be good to get Anton in really not to just talk about illustration but to talk about imagery on the web generally as that’s kind of his thing really, amongst many others, because you have a growing reputation. You do art-casts don’t you which are like illustration tutorials? Is that a good way to describe them?

Anton Peck: Yeah, that’s probably a good way to describe them. That is the rumor that I do those isn’t it. I don’t do them as often as I should but I do manage to get them out every once in a while.

Paul: And they are excellent. I have to say, I really do enjoy watching them. So let’s talk a little about imagery on websites and the use of imagery on websites. Let’s start off with a really nebulous and broad question that I guess is pretty impossible to answer but I’m going to ask anyway, which is what makes good imagery for a website? How do you go about picking imagery for a website?

Anton Peck: Well there’s a few things and some of them might seem obvious. First of all the images should complement the content of the website so that the substance isn’t too diluted from its original intent. I know that might seem kinda out there and obvious but it’s probably disappointing and surprising that there’s a lot of website owners that would want to put an image on a website because it’s really pretty or cool.

Paul: I guess it’s important to have imagery that relates to the branding or message you are trying to communicate.

Anton Peck: Right because imagery is meant to support the content rather than take away from it. You don’t want to pull everybody’s focus right away to the images but at the same time you want to support what’s already there. The images should have some interesting quality about them which could mean how well they have been cropped or resized. They should be saved at a pretty decent quality if they are JPEG’s or GIF’s. Not over compressed as they can sometimes diminish the personality of the website. When you go to a website and you see that it’s over compressed it really doesn’t look very good.

Paul: So for a relative newbie, an amateur that’s getting into web design, there’s always this question of GIF vs. JPEG. What do you use and when?

Anton Peck: Well for photographic style images that have a lot of… I would say colours but that’s not quite accurate but more photographic style images I would use JPEG’s. Then for images like logos, things that seem very flat and have a limited palette, maybe go with the GIF’s. Although I tend to do that a little bit less now that PNG’s are finding a little bit more broad support among browsers.

Paul: So do you use PNG’s very much?

Anton Peck: Every so often. They compress nicely especially when you use the adaptive palette which is similar to a GIF format but they can actually get a little bit smaller.

Paul: Cool, yeah. That’s been my experience as well.

Anton Peck: It just gets a little tricky when you are trying to do transparency.

Paul: Yes, exactly.

Anton Peck: That’s a whole other discussion.

Paul: Yeah, I don’t think I’m going to open that can of worms today. So any other tips for selecting good imagery?

Anton Peck: Well I would say it’s got to be appropriate and tasteful of course. So that way you can minimise the risk of offending someone or losing possible business. If you might have a certain sense of humour and want to put something on your website, you might have to watch out for how that might appear to someone else.

Paul: And I guess cultural considerations come in there as well. It’s easy to forget that the worldwide web is worldwide.

Anton Peck: Definitely.

Paul: The next big issue that a lot of people face is this whole kind of stock imagery kind of question. You reach a point where your website’s becoming relatively important to your business or you’re a web designer that’s working for certain clients. At what stage do you say that actually stock imagery isn’t the way to go, perhaps I should be getting something specifically commissioned whether that be commissioned illustrations, commission photography or whatever. It’s a difficult line. What’s your opinion on stock imagery? Is it the devil’s spawn or does it have a place? What do you think?

Anton Peck: No, I think it definitely has a place. It offers a great solution for those trying to find a good quality image when they can’t afford a commissioned photograph.

Paul: So what kinds of site do you use for stock imagery?

Anton Peck: I’ve been a fan of Crestock.com lately.

Paul: Ooo! I haven’t heard of that one.

Anton Peck: Yes and actually they have this huge contest going on where you can win a Mac Pro and all kinds of equipment. It’s a Photoshop contest and I happen to be one of the few judges on that particular site.

Paul: Ahh. So what’s this website again?

Anton Peck: It’s Crestock.com.

Paul: OK. I’ll check that out. Sounds good. So does that do both illustration and photography or…

Anton Peck: Yeah. They have a wide range of different material. They have background textures and you can search for pretty much anything there. A lot of it is user supported so if you even feel that you are a good photographer you can submit your work and see if you can even sell it and make a little bit of money off of it.

Paul: Oh cool. So when selecting stock photography, what should you look for? What should you avoid? The trouble with stock photography is a lot of it can look really similar to one another. What advice would you give about selecting stock imagery?

Anton Peck: Well there’s no real secret to it. There’s not a lot of advice either other than just go through a lot of it. Don’t try to find the very first searches you come across as that would be a higher chance it would be used somewhere else. You want to get a unique image, something that’s probably not as commonly found. It’s always a little disconcerting when you come across a new image that you see on 13 different sites like, “Oh that’s the same image used there”.

Paul: Yeah. It becomes obvious that it’s stock imagery.

Anton Peck: Right. So you want to find that unique image.

Paul: Yeah, couldn’t agree more.

Anton Peck: And the only way to find the perfect, unique image is to just go through a lot of it.

Paul: Yes! Which does take time doesn’t it.

Anton Peck: Certainly.

Paul: When it comes to commissioning stuff is there any particular advice you would give there in regards to briefing the photographer or the illustrator? I mean when somebody commissions you to do a piece of work, what kind of information are you after from them?

Anton Peck: Since they would commission me as an illustrator rather than an actual photographer, I’d mainly look at what they are trying to achieve for their website and how they expect it to support what they’ve done. One of the things that I was gong to talk about for commission photography, even though I’m not one, was the benefits for the websites because you can have a one of a kind image that fits exactly what is needed for the page. A photographer can come out to the business and take photos of the staff and location which is obviously something you can’t do with stock photos.

Paul: Yeah, which obviously makes a huge difference. I think often at times people actually want to see that kind of stuff because on the web you’ve got no way of judging what the company behind the website is really like. So to be able to see real imagery of real people and real locations does add some credibility and trustworthiness to a company. It’s not just somebody working out their back bedroom or whatever.

Anton Peck: Exactly what I was thinking, yes.

Paul: OK so you have a budget. How much difference does it make actually commissioning imagery rather than getting stock imagery. Is there really a difference? Is it really worth going out and getting stuff specifically commissioned?

Anton Peck: I would say if you are looking to get high exposure and if you were a big enough business I would definitely say do it.

Paul: So why is that? What difference does it make?

Anton Peck: Well that’s exactly what I mentioned earlier. It’s the one image that you are going to own or the website is going to own and it’s not going to be found anywhere else. Completely unique.

Paul: You do feel that when you go through these thousands and thousands of stock images that “Well, it’s pretty much unique. Who else is going to use it?” but it’s amazing how often images turn up. I’ve got a little program that changes my desktop image on a regular basis and I’ve had this really nice one that I loved and kept for a while which was a cityscape of London that had been made all futuristic and I thought “Wow! What a great image”. And then I’m going on the tube and there’s the same image plastered across the wall. It’s amazing how often they do turn up again.

Anton Peck: Yeah it’s takes away a little bit doesn’t it?

Paul: Yeah definitely. Definitely. You’re an illustrator, let’s get onto the role of illustration. What advances or disadvantages do you think that illustration has over photography. When should you be using photography, when should you be using illustration?

Anton Peck: Illustration’s gonna provide a whole different type of personality to a website that you can never find in a photo. You can create situations, objects, environments that would either be too expensive to reproduce or they just don’t exist in the real world. Things that you just can’t do with a photograph. Again, that’s going to have to be through the interview of the illustrator trying to describe whether the job is appropriate or not. Actually that would be up to the art director trying to commission to decide whether they need an illustrator or a photographer. But custom website illustrations are so unique right now. When you do have a custom illustration it stands out a great deal more than a photograph. I think one of the greatest examples that stands out on the top of my mind would be Andy Clark’s website with Kevin Cornell’s image that he did of that scooterboy, the guy on the scooter.

Paul: Yeah, it looks superb. That’s stuffandnonense.com, if I remember.

Anton Peck: .co.uk

Paul: Oh .co.uk. Well check that out.

Anton Peck: Just try to imagine if Andy would have reproduced that with a photograph. It wouldn’t have the same personality I don’t think. He wouldn’t have been able to pull it off.

Paul: So do you think that photography has less personality generally or is it just the stock photography that has less personality?

Anton Peck: I wouldn’t call it a more or less personality thing as much it would be a different type of personality. It depends on what you’ve going for.

Paul: Do you think there’s some situations where illustration just isn’t appropriate because it would create the wrong kind of personality or is illustration flexible enough to be able to work in most situations?

Anton Peck: No I think illustration is not appropriate for everything. I think there’s probably a time and a place where an illustration is not going to do the job of a photograph. The photograph tends to look a little bit more… I was going to say professional but I don’t think that’s the word for it. There’s a sort of business approach… I don’t know. Illustration is very personal. It’s one of a kind. It seems that if you have a corporation maybe an illustration isn’t going to work unless it’s a certain kind of illustration.

Paul: Yeah I kind of know what you mean. There’s something… A photograph has a kind of… trustworthiness isn’t the right word but a realism to it perhaps that lends itself to certain circumstances.

Anton Peck: Definitely. It’s really hard to distinguish between the two. It would really boil down to the specific case that it was going to be used.

Paul: Tell us a little bit about some of the different types of illustration and why you would pick when. Obviously every kind of illustrator has very different styles but are they any kinds of broad categories you would recommend in certain circumstances?

Anton Peck: Well, let me think off the top of my head. It seems like you have a real nice vector, flowery styles with flat colours like Veerle. Her work is fabulous and it’s all Illustrator. Her style is just so unique. Then I think of Kevin Cornell. His style is so organic and painted. Then there’s styles like my own. I tend to learn for more photorealism in some cases. My own personal gallery doesn’t lean that way too much. There’s a few different styles out there and it’s hard to say when it’s going to be used properly.

Paul: Do you think that some styles date more quickly than others? You talked about that flowery style where you see a lot of art deco type shapes being used on the web at the moment. Do you think that illustration goes through more fashion trends than photograph does?

Anton Peck: I would venture to say yes and in a way. However like all fashion trends, it always comes back. Right now the big popular thing is artwork that looks like it’s straight from the 70′s. The muted brown colours and the nice organic curves, swirls and circles, things like that. Those are going over quite well I think.

Paul: It’s interesting isn’t it. I think there some sites that need to be fashion conscious and on the cutting edge of what’s going on and there are others that need to be generic and long lasting. It very depends on what kind of industry you are in as whether you should follow these trends or not I guess.

Anton Peck: Right. Or then if it seems to expire then you can just change it out and get a new one.

Paul: The glory of CSS, the separation of content from design.

Anton Peck: Absolutely.

Paul: OK Anton. Thank you very much for coming on the show. It’s really interesting that we haven’t tackled the discussion of imagery before.

Anton Peck: I did have one real quick public service announce if you’ll let me have another minute.

Paul: Yeah, go for it.

Anton Peck: For your listeners I’m wanted to just bring up that they shouldn’t take images, and I know it’s kind of obvious, take images from fountain sites or Flickr or Google Image search. That’s just bad practice and they are normally just going to get found out and it’s not a very nice thing to do. If they find images on sites that they like, they can contact the owner to obtain permission.

Paul: And it’s surprising. Often the owners are very happy and flexible to accommodate that. If you take the time to contact them they are often very flattered that you asked. Good piece of advice. OK thank you very much Anton and we’ll get you back on the show again in the future. Good to talk to you.

Back to top

Listeners email:

Textmate reviewed

Teifion shares his thoughts on Textmate for the mac, an incredibly powerful text editor with a sophisticated plug-in architecture.

I have to confess that I have only opened Textmate once and found myself unsure where to begin. I do know however that Teifion and many other web developers rate it extremely highly and use it as their primary development tool. In the show I pick Mr Hicks and Oxton’s collective brains about its benefits and whether I should make the effort to learn it properly.

Javascript or JQuery

The second listener contribution comes from Will who writes…

I was listening to your last one and you said it would be important to learn javascript for 2008. I know bits of javascript but don’t particularly like it and don’t know ajax yet, however, I have been playing with jQuery and find it much simpler. Do you think it’s a good alternative to learning all of javascript and have you used it at all?

Personally I think it is important to learn a language from scratch and that relying too heavily on libraries can cause problems in the long run. Although there is nothing wrong with you learning jQuery I would suggest it should be an addition to learning Javascript rather than a replacement.

If you want to know if Mr Oxton and Hicks disagree with me you will have to listen to the show :)

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

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!

Show 82: Microsoft drones

Posted in Classic shows on by Paul Boag

This week on Boagworld: Paul talks about managing enquiries, Marcus asks whether you should add links to your website on client sites and Rob Borley talks about ASP .net.

Play

Podcast: Download (25.9MB)

Download this show.

Launch our podcast player

News and events

Staying Creative

I came across a great article this week by Keith Robinson about how to keep being consistently creative. Constantly being creative can be a challenge sometimes, especially when a chunk of your time is spent on less creative activities like coding or consultancy. This article provides some incredibly practical advice about how to keep those creative juices flowing.

The one part that particularly resonated with me was the need for time to play. I am very fortunate at Headscape that Chris and Marcus let me have time to experiment and try new stuff. The result is that I am much more creative than when I used to do production work all the time.

However, this article also offers advice for those of you who don’t have the same luxury. It talks about how to force yourself to engage on even the most dull project as well as the need to pursue your own projects and interact with other creative people.

WCAG Samurai

Over a year ago now Joe Clark published an article on A List Apart entitled “to hell with WCAG 2.0“. Following this slamming attack he went on to create the WCAG Samurai who would develop an alternative to WCAG 2 based on WCAG 1. A year later and we have a working draft of WCAG 2 as well as the recently released WCAG Samurai guidelines.

I have to say the WCAG Samurai Errata is a lot easier to understand than WCAG 2.0 but WCAG 2.0 has come a long way since Joe Clark’s article. Personally, the arrival of the WCAG Samurai guidelines have generated mixed feels in me.

I not an accessibility expert and so am naturally drawn to the Samurai guidelines. They are easy to understand and don’t use confusing or vague language. However, at the same time I have a feeling that yet another set of guidelines is only going to confuse matters.

I guess my hope is that all of the different interpretations on accessibility will make clients realize that accessibility is about more than confirming to a series of checkpoints and encourage them to start thinking in depth about their accessibility policy.

Movable Type 4 (Beta)

Yes I use Movable Type. I know the rest of the world uses WordPress but movable type works for me. I run the boagworld website on movable type and have no intention of changing so don’t bother writing in trying to convince me.

That said, I wanted to point out the recent release of a beta for Movable Type 4. I have to say I haven’t installed it yet but it looks good. Its still in beta and apparently buggy in places but some of the features look impressive.

They have revamped the interface which in my opinion was better than WordPress anyway. They have improved the content management capabilities, finally added a WYSIWYG editor and added support for Open ID.

If you are not already a Word Press drone then check it out.

Mobile web developers guide

This week the dev.mobi website has released a comprehensive guide for mobile web developers.

If you have listened to this podcast for any length of time you will know that I am constantly banging on about the mobile web. Developing websites that work on mobile devices is going to become ever bigger business and although it is a challenging area, I think it will be a huge niche for those willing to embrace it.

Of course, at the moment it is a relatively immature market and finding good information can be tricky. However, this guide looks very good. I can’t claim to have read it all yet but from what I have seen this is a must read if you are looking to explore the area of the mobile web further.

Agony uncle: Promotional links

I was ferreting around in the forum for something to chat about and found this question from Remy:

I was wondering what the opinion was on adding a “Site built by Such and Co.” at the footer of a client web site.





I remember thinking it was normal practice in the late 90s and early 00s, but the more I look around today the less and less I see other web design/developer firms doing it.





I do think it’s a cleaner design if you don’t add a link off to a random (to the user) web site, but I remember hearing on one of the podcasts on boagworld that this is how this had contributed to Headscape’s (page)ranking on Google – i.e. by having well ranked web sites linking back to Headscape.





Just want to see what other people thought before I go and slap a nasty ‘who dunit’ at the bottom of my client’s web site.




This is a fairly old post and there’s a lot of interesting and useful stuff on there. But I thought that chatting things through, and letting people know what Headscape does, could be useful.

It generates business

It really does. Lots of it. I can honestly say that I think our credit (which was, interestingly, on a separate credits page) on the old National Trust site played a major part in whether or not Headscape would have survived its first couple of years.

I try to make sure that I always ask new enquirers how they discovered Headscape. Off the top of my head, I would say that around 1 in 20 say they followed a link from one of the sites we have built. We are currently talking to a prospect that followed the link on one of the university sites we developed.

Don’t expect a link

Whether a link appears is up to the client. Ask them if they mind. If they do, ask if you could have a link on a credits page or possibly just on a single page (e.g. ‘About this site’ if they have one or the contact page).

If they still mind, leave it.

We formalise the arrangement in our terms and conditions, as follows:

The Contractor shall have the right to incorporate, in a readily viewable location, a credit and hypertext link in the Deliverables.

Use useful wording

Useful wording to a search engine that is. For example, ‘Designed by Headscape’ doesn’t really help page ranking at all, whereas ‘Web design by Headscape’ does as it includes the search term ‘web design’.

Beware CMS based sites!

There is always the possibility that doing this could backfire. If a client has control over aspects of a site’s presentation then there is always the possibility that they could make a nasty mess of your excellent work. You have to ask yourself whether a link, in this case, is valuable.

Client corner: Handling enquiries

The idea of the client corner section is that we tackle questions clients have. However, this week I answer a problem I am facing myself; how to handle enquiries better. We get enquiries from the Headscape website and I just don’t think we handle them very well. I always have the feeling some are getting lost and when I go away on holiday they just don’t get answered. After some thought on the subject I think I have come up with some enquiry handling techniques that might help.

Ask the expert: Rob Borley on ASP .net

I often get people asking to know more about the way we work as Headscape. What technologies do we use, what approaches do we take, how do we make business decisions? To be honest I often avoid this questions because I don’t want this podcast to feel too much like a Headscape sales pitch. However, several times I have been asked by people why Headscape works mainly with ASP .net instead of PHP or Ruby on Rails so I thought we might take a look at that decision.

Knowing little about server side coding myself I thought it was best to get Rob Borley (our technical lead) onto the show to talk about the decision we made in going down the .net route.

Its actually a really interesting segment that gives a real insight into how we run our business and how we go about making decisions in regards to technology.

Show 78: POSH?

Posted in Classic shows on by Paul Boag

This week on Boagworld: Paul redesigns the way clients and designers interact, Marcus asks if you really need a content management system, and Garrett Dimon sharings his experiences of information architecture.

Download this show.

Launch our podcast player

News and events

Breadcrumbs are good, its official

When Jakob Nielsen speaks the world listens. This week he has come out with the shocking revelation that Breadcrumbs are good. Okay, so this doesn’t come as a surprise to most of us, but its still an interesting read. Apparently more and more people have come to rely on this secondary navigation tool and notice if it isn’t there. Jakob believes that breadcrumbs never cause problems in user testing (although sometimes they are not seen) and provide a wealth of benefits to visitors that do use them. Finally, he goes on to talk about the fact that breadcrumbs should always show a sites hierarchy rather than the path a user has taken through a site.

Techcrunch drool over Silverlight

So the guys over at Techcrunch have spent the last week at MIX07 and seem to have been brainwashed by the nice fellows at Microsoft. They are positively drooling over Silverlight, Microsoft’s challenge to Flash. In one post they say:

“It makes Flash/Flex look like an absolute toy… without exaggeration, Ajax looks like a bicycle next to a Ferrari when compared to Silverlight”

Personally, I haven’t had a chance to look at Silverlight yet so cannot express much of an opinion. However, I find it hard to believe that Silverlight will topple Flashes dominance before Adobe responds with something equally impressive.

Although competition can never be a bad thing, it strikes me that this is yet another plugin for people to download and another platform we have to worry about developing for.

RSS in plain english

RSS can be a difficult concept to get your head around the first time you encounter it. Its still a good idea to explain what RSS is on your site for those that don’t know. Obviously you can create a page yourself explaining or sometimes I link to the BBC website which provides an excellent description. Of course if you want something a little more exciting you might want to link to this superb video that explains exactly what RSS is and how it works. Its just a shame they don’t offer the option to embed it directly into your own site.

How POSH are you?

I have to say I was very cynical about this news story when I first encountered it but after hearing Jeremy Keith’s argument on the last .net podcast I have to say I am coming around. POSH is yet another another “catchy” web acronym. It stands for “plain old semantic HTML”. So why do we need yet another acronym? Well the argument goes that nobody is getting excited about semantic HTML these days. Its just not cool. Instead we are obsessed with Microformats or AJAX, things that are perceived as being “in” and “trendy”. The POSH acronym is designed to get us talking about semantic HTML again. The idea is that we start blogging about how we mark stuff up and sharing ideas with one another. The example Jeremy gave on the show was; what is the best way to mark up a conservation in HTML? He suggested that it was simply an ordered list of blockquotes. Do you put that much thought into your code? I can’t say I always do.

So with that in mind I have opened a new section on the Boagworld forum where you can post your examples of good code. You can ask questions like; what is the best way to markup… or simply post how you choose to markup different elements. Whatever the case lets start sharing our good practice in HTML.

Client corner: Do you really need a CMS

Apart from a few ‘design only’ projects we get involved in, every tender that comes through the door includes the words “control over content is a must have”… or words to that effect.

But thinking about all the ‘full’ CMS based projects we have delivered, is that really what the client wanted/needed?

So what types of CMS solutions are there? Here’s a quick summary:

Limited CMS (non-structural) e.g.
  • News
  • Events
  • Popular a few years ago when ‘full’ CMS was a much more expensive.
  • Pros – simple to understand (and build)
  • Cons – clients tend to request more and more areas of the site become CMS controlled and you can end up with a bit of a mess and the cost of replacing can be prohibitive.
Blogging tools
  • Article based
  • With commenting
Full CMS
  • Control over structure: move pages, edit pages, create news pages (and sections) and the front end navigation updates automatically
  • Usually modular: news, events, downloads, forms (dynamic), lists, newsletter, etc
  • User management: Roles, permissions, preview, workflow
  • Licensed or bespoke?

You need to ask yourself a couple of fundamental questions:

Even if I have these tools, will I have time to use them? All websites need to have an owner or editor. Someone who’s job it is to manage all content sources and keep the site up to date. We have been asked many times to carry out work content population work on a CMS that we built…

How much of my content needs updating more than monthly and how often do I need to add new pages to my site? It seems that having the ability to extend a site is often seen as a ‘must have’ when in reality new pages are only added, say, quarterly at most. Added to that, the only content that changes regularly is, for example, news, events and case studies. Employing an agency to add new pages and manage site structure/navigation is not a big job (though some seem to charge extortionate rates). Added to that, clients who do not use a CMS very often tend to forget how to use it and then go back to the agency simply because of that.

To summarise, think very carefully about your requirements in this area and talk to prospective agencies about what they recommend. You could end up making a costly mistake.

Ask the expert: Garrett Dimon on Information Architecture

I am a huge fan of Garrett Dimon’s work and so I am really excited to have him on the show this week. Garrett’s job title is “information architect” and so unsuprisingly he joins us to share some of his experiences on working with information architecture. His advice includes:

  • Embrace constraints
  • Know when to challenge the constraints
  • Explore lots of ideas
  • Work in conjunction with clients
  • Don’t use your computer
  • Throw away more than you keep
  • Don’t worry about the details until later on
  • Simplify and cut back on details
  • Communicating is more important than documentation
  • Make your IA deliverables visual as they are easier to understand

Agony uncle: The wish list brief

This week I am back on Agony Uncle duty with an email from Dan in Swansea:

I am increasingly frustrated by the briefs I am getting through from potential clients. They read more like wishlists than real briefs. They lack focus and often ask for functionality they just don’t need. How do you respond to briefs like that?

Its a great question and set me thinking a lot about the web design process. In fact it was the primary motivation for a recent blog post on the subject which we talk about on the show. I think the key to this question is to not be afraid to go back to the client and challenge them. Perhaps propose a rough costing based on some of the items in their list but suggest that the first step (if you are taken on) would be to define and price a more accurate brief. I think most clients will respect you for suggesting an alternative and more effective strategy. In many ways its like the speculative design argument, it may feel scary to challenge the client before anything is signed but in my experience clients respond positively to a carefully thought through argument.

Review: Spoken Text

A while back I asked people to submit their own reviews. I didn’t specify that people couldn’t review their own product and so I recently received a review from Mark promoting Spoken Text. Now, I don’t want to open the flood gates to shameless self promotion but I like spoken text so much that I want to include it on the show. It is basically a free, text to speech system that allows you to convert multiple file types into audio files.

Mark shares four great reasons why he thinks we might be interested in it as web designers:

  • Use spoken text to provide alternative audio versions of the content on your website
  • Allow users to record and save any content from your website they want
  • Create a podcast of your websites content
  • Create your own podcast of other people’s content that you want to listen to while on the go

There are two things that excite me most about this service (beyond the fact that it is free). First is the accessibility benefits it could bring for visually impaired users and secondly the ability to make instant podcasts of new stories from your site without the complication of finding somebody to present it.

This isn’t a service that is useful to everyone but I think in certain circumstances this could be a killer app.

Show 73: Drone

Posted in Classic shows on by Paul Boag

Marcus makes sweet love to our clients. I fiddle with my captions and our lead developer drones on about setting up a development server.

Play

Podcast: Download (28.3MB)

Download this show.

To subscribe directly within itunes click here

News and events

This year saw some of the best April fool technology jokes around and so I do my best to convince Marcus that they are real news. Spot the real from the fakes:

Dutch to revert to table based layouts

According to quirksmode.org, the Dutch government has been forced to revise its accessibility guidelines due to an estimated € 20 million it would cost for government sites to make the move from table based design to web standards.

WCAG 2.0 finally here

Accessify has announced that WCAG 2.0 has finally been released. This extremely controversial revision to the WAI gudelines has been pushed through despite strong objections by the web design community.

Amazon to become accessible

Amazon has always been held up as an example of quite how hard the web can be for those using assistive technologies such as screen readers. Nevertheless a press release on the National Federation of the Blind site seems to indicate that Amazon maybe willing to change its ways as they announce a partnership with the NFB to clean up their act.

Google TiSP

Google are finally releasing their much-anticipated free wi-fi network (Google TiSP) that will span much for the USA. Rumours of this network have been circulating for some time, however nobody anticipated the innovative way the network would be laid.

@media 2007: Antarctica

Following the failure of @Media Hong Kong, which was cancelled due to lack of demand, the guys at Vivabit have decided to launch @Media Antarctica. Like Web Directions North, this conference will combine web design talks with outdoor sports in probably the most ambitious project of its kind.

Get Naked Day

Dustin Diaz is once again encouraging all website owners to get naked on the 5th April by exposing your HTML to the world. This superb publicity stunt is a great way of demonstrating the flexibility of web standards. Good on you Dustin!

Making love to your clients

Marcus continues his series on selling web design services by looking at the process of managing your clients:

You may build the best websites in the world but if you do not know how to sell your services then nobody will hire you. Web design, like nearly everything, is a competitive marketplace and simply being a good designer/developer is not enough. You also need a sales and marketing hat.

That said, it does seem that there is more work out there than agencies to do it.

Play to your strengths
Don’t bite off more than you can chew when pitching for work. Do not pitch for contracts that are too big for you and avoid relying too heavily on outsourcing, as many clients are uncomfortable with this. Also, from personal experience, contracting or partnering can end up being very expensive – don’t make everything you do a loss leader! In particular don’t promise something unless you are 100% sure that you can deliver on it. Failure to deliver can seriously undermine your company’s reputation.

In summary, be honest with the client. If you can’t deliver by a particular deadline or you don’t have the skills in-house, tell the client. Try and find a workaround e.g. splitting the work between you and another agency. In the end, you will gain more respect from the client.

Love your clients – old and new
With existing clients, if you pay attention to them and care for them, you will have a very small cost of sale for a significant proportion of your work going forward.
This gets harder and harder the longer you are around and the bigger you get. I haven’t really needed to chase work for a long time now (because we’ve been so busy!) so I try to make sure that when an existing client contacts us to discuss further work we are responsive and helpful. For most clients I would recommend carrying out annual review meetings – both parties are encouraged to think about new features for the site and the meeting is used to discuss the merits of the ideas, likely budgets, timescales etc.

From listening at SXSW… with new clients you should try to befriend them (get drunk with them one Swedish guy said) before working with them. This is great if they want to be friends and I expect quite a lot do. However, we work with a lot of public sector clients who get nervous if we offer to buy them an ice-cream, let alone lunch.
I guess the message was ‘put the effort in, not only will it be appreciated, it will make your life easier going forward’.

Question the client
Don’t be afraid to ask questions about a brief supplied by a client. You may even be in a position to help the client write their brief. Asking questions and making suggestions is a great way to build a relationship with your clients and make you stand out from the crowd. Of course, ultimately it will allow you to put together a better proposal that meets the client’s needs even when they are not fully expressed in the brief.

Also, stand up for yourself! If you think your idea is just what they should be doing instead of the daft stuff in their brief – tell them. Again, this will probably bring a lot of respect your way.

Ask an expert: Rob on setting up a development environment

Rob Borley the lead developer at Headscape talks about how to go about setting up a development environment to allow you to work on dynamic websites. He talks about some of the potential dangers, recommends some great resources to get you started and reviews some different development tools.

Easy styling of images

Here is an interesting problem that keeps cropping up. How do you balance the need for easy update by web editors with the desire to make a site as visually appealing as possible? Take for example the images that website owners inevitably want to add to their site via a content management system. They don’t have the skill to add captions or add styling so how do you make the process simple for them.

A while ago I wrote a post suggesting one solution to the issue. Recently it got dugg and has since proved very popular. In this week’s show I talk through the process and explain some of the benefits.

Review: Oxygen XML editor

In last week’s show I suggested it would be great to receive some reviews from you the boagworld listener. This week I received the first one from Tom and so we have included it on the show.

He reviews Oxygen an XML editor with some quite remarkable features. If you work regularly with XML you will definitely want to check this out.

Non hierarchical navigation

Posted in User experience on by Paul Boag

By bringing together search, tagging and related links in a relatively automated process I really believe that active navigation provides a viable way of dealing with massive websites.

Just occasionally you come across a website that just doesn’t fit the normal pattern of things. Headscape was recently approach by a potential client who had literally hundreds of thousands of web pages which were almost impossible to organise into a traditional information architecture. They wanted us to suggest some alternatives and so I thought I would share with you my response.

There are lots of reasons why a normal information architecture might not work for your site. However, probably the most common is that your site has simply outgrown the constraints of a hierarchical tree and that your users are getting lost deep in the information architecture. Often the answer is simply to do some radical pruning to remove much of the deadwood, however occasionally a different approach needs to be found.

So what are the alternatives available to you?

Search

The most obvious approach is to use search as your primary navigational method. Indeed search is the primary mechanism we use to navigate the entire web and so we know that it has the scalability required. However, although potentially the best solution it is often poorly implemented. I have written about how best to implement search before and so I am not going to repeat myself here. Nevertheless, there are additional things to take into account when search is used as the primary navigation for an extremely large site.

Firstly, position is important. A search box is a relatively small screen element and so can easily be lost within a design. When search is the main way that a user will find their way around your site you need to make this obvious. Move the search into a more central screen position like Google or Amazon does.

Secondly, on a large site advanced search is important. The problem is that users struggle to build complex search queries. They find concepts such as using quotation marks or Boolean joins difficult to grasp. As web designers we need to search for new ways to help the user build these complex searches. As it happens the answer might be right under our noses.

Screenshot of find and replace functionality in Dreamweaver

Dreamweaver comes with an interesting tool that helps users build complex search and replace commands without having to know about regular expressions. Although a similar approach has been used on websites in the past, the arrival of AJAX and DOM Scripting now means this kind of functionality can be implemented in a much more intuitive and responsive way.

Related Links

Although not a replacement for traditional navigation, related links can work as an effective accompaniment to search. Related links allow you to establish a loose relationship between documents which is much more flexible than the static hierarchy of an information architecture. They can provide a context to a document which search alone does not offer. However related links are not without their problems. When publishing new pages it is a relatively simple process to link those pages back to previously published pages in order to provide context and additional information. However older documents are often neglected and when a new page is published these older pages aren’t updated with a link to the new page. In other words old pages atrophy. The problem is caused because the system is reliant on editors remembering that there are older pages which need updating. Ideally some automated system should identify related pages, but we will come on to that later.

Breadcrumbs

Normally breadcrumbs are associated with a traditional information architecture where they show your current location in the hierachy. However, that is not the only use of breadcrumbs. A less used approach is that breadcrumbs show the path the user has taken through the site. The reason this approach is less used is because in theory the browser back button provides the same functionality. However, the majority of users are unaware that the back button allows them to skip back multiple stages. Historical breadcrumbs clearly show the user which pages they have previously visited and allows them to quickly jump back to anyone of those pages.

There is also an opportunity here to once again learn from desktop applications. Windows Vista has added an interesting new feature within its file explorer that might be adapted for our historical breadcrumbs. Basically the file explorer’s breadcrumbs allow you to view the children of any folder in the hierarchy:

Screenshot of the new file explorer system in Vista

This approach could be used with our breadcrumbs to show any links within a document allowing the user to quickly jump to related pages. The primary reason a user utilises breadcrumbs or the back button is to select another link so this approach could prove invaluable.

Tagging

Next to search tagging is the most common way of organising non hierarchical information. Indeed this post has been tagged as shown at the bottom of the page and you can view a tag cloud for the entire site. Sites like delicious also allow for the bundling of groups of tags to create a basic information architecture for the site.

However, tagging does have some fundamental issues which need to be resolved. The greatest of these is who does the tagging? The most popular answer to this question is that the user does it. Indeed Russ Weakly of the Australian Museum put together a very compelling presentation at Webstock for a user driven information architecture based on tagging. There are also a growing number of tools that facilitate user tagging of a website. Of course the problem with this approach is that it requires the user to be motivated enough to do the job. When tagging my bookmarks on delicious I am motivated to do so in order to allow me quick access to them in the future. However, the same motivation does not exist to tag a page on a standard website like this one.

The alternative to user tagging is that the owner of an individual page tags it. The owner is certainly much more motivated to tag the document but that doesn’t mean they are the best qualified to do so. The problem is that an owner’s mental model can be radically different to that of a user and so their choice of tag can be inappropriate to those navigating the site. Web page owners tend to rely heavily on jargon and view the world from an institutional point of view. Of course the other problem of editorial based tagging is this can present a massive problem if there is a substantial backlog of web pages that need tagging.

Active Navigation

Much of the problems that arise with both tagging and related links comes from the need for human intervention and in particular the degree of intervention needed to tag or link older documents. One solution might be to automate some of the process.

Back in 2000 I was fortunate enough to work with a ground breaking company called Active Navigation. These guys were working with similar algorithms to those found in a search engine like Google but applying them in a very different way. Like Google they were using linguistic routines to analysis a page and identify the keywords which best described the content. However instead of using the results to build a simple search engine they were also using it to build a navigational structure of related links and tags. This would ensure related links were always up to date and avoid much of the human intervention required for tagging. Instead of having to tag and manage individual documents they can simply edit and manage the tag cloud to ensure only the most relevant keywords are featured.

Because the system fundamentally uses the same approach as a search engine algorithm it is more than capable of also providing search functionality. By bringing together search, tagging and related links in a relatively automated process I really believe that active navigation provides a viable way of dealing with massive websites.

.net podcast launches

Posted in News on by Paul Boag

Today is an exciting day for me because it sees the launch of the first ever episode of the .net podcast.

I have been mulling over the idea of a panel based show on web design for a while. Although I love doing the boagworld podcast I am conscious that it only provides my own somewhat limited perspective on the industry. I wanted to create a show that brought together some of the leading lights in web design to discuss the big issues of the week.

I had considered starting the show myself but wasn’t sure if I had the clout to attract the calibre of guest I wanted. I was therefore really excited when Dan Oliver, the editor of .net magazine, approached me in regards to producing a podcast for the mag.

I have worked with Dan before on the Practical Web Design Show and he was very open to my ideas. Before I knew it I was lining up guests for the first show.

I have to confess that even though this has been by idea, I have been somewhat terrified at the technical challenges involved. Organising a five way skype call that produces decent quality audio is a challenge at the best of times let alone when you don’t want to keep people hanging around while you twiddle with your settings.

However, it hasn’t come out bad. So, without further ado I give you the .net podcast.

Let me know what you think!

Practical Web Design

Posted in Classic shows on by Paul Boag

A number of you have been in touch with me about the upcoming “closure” of the Practical Web Design Magazine and how that will affect the podcast I do for them. In order to avoid any confusion I thought I should explain myself.

Basically there are going to be some fairly major changes to Practical Web Design Magazine over the coming months but it isn’t as simple as it closing down. The problem is that PWD and .net are both produced by the same publisher and contain very similar content. .net is very popular here in the UK while PWD is popular in the states.  

The decision has therefore been made to essentially close PWD (including the PWD website and forum) and replace it with .net. However, due to its popularity in the states the PWD name will be kept although the content of the magazine will fundamentally be the same as the .net content.

Confusing isn’t it! I am sure there must be a similar solution but I can understand their desire to keep the names people recognise.

So where does this mess leave the PWD podcast? Well the official line according to the PWD website is:

The Practical Web Design podcast will continue as a .net presentation.

Quite how this will work out in practice is yet to be decided. Basically, the show will continue but we might change the name and the format a bit. Personally, I feel the show could do with a bit of a shakeup in order to distinguish it more from the boagworld podcast. I have loads of ideas about what we could do but I need to meet up with Dan Oliver (The Editor of .net) to discuss them first. Hopefully I will be able to share more after my meeting with him on the 29th.

Podcast 49: d.construct & web services

Posted in Classic shows on by Paul Boag

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

Download this show.

To subscribe directly within itunes click here

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

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

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

Also in the show…

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

50th episode next week!

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

Styled images with caption

Posted in Development on by Paul Boag

Here is an interesting problem that keeps cropping up. How do you balance the need for easy update by web editors with the desire to make a site as visually appealing as possible?

The problem is a simple one. A client wants to add an image to their site via the content management system. They want it to look attractive, not appear too boxy (let us say they want a nice rounded corner, as this is all the rage) and have a nice caption underneath it. However, they do not know how to use an image editor (beyond basic resizing) or how to edit HTML.

What would be great is if they could just add a normal everyday image using the img tag, add a title tag including the caption and then it magically styled itself. Well by combining CSS and DOM scripting, I have managed to get this working.

Of course, I am not the best scripter in the world so if you can improve on the code below then please let me know by posting a comment.

Step One: The HTML

The website owner adds the image resized to the appropriate dimensions. Notice they have added img tag contains a caption in the form of a title tag and a class name of “imgRight” (something easy to add with a WYSIWYG editor like Xstandard or contribute). They have also set the width and height of the image. This is important from a styling point of view later.

<img src="/images/foo.jpg" alt="Description of picture" width="200" height="147" class="imgRight" title="The caption would go here" />

Step Two: The DOM Script

The script I have created does the following:

  • Finds all images with the class “imgRight” or “imgLeft”
  • Loops through each one extracting the title tag and inserting it into a new p tag it has created
  • It then effectively wraps the img tag in a div and inserts the p caption after the image
  • It removes the class name from the img and adds it instead to the div.
  • It also uses the width of the image as the width of the div. This prevents the caption expanding beyond the width of the image.
  • Finally it adds an additional span tag that we are going to use later to create the rounded corner.

Just to keep the code a little more streamlined I use the getElementsByClassName function created by Robert Nyman so don’t forget to include that in your javascript file.

function addCaption(xClass) {
var allImages = getElementsByClassName(document, "img", xClass);
for ( var i=0; i < allImages.length; i++) {
var imageCaption = document.createTextNode(allImages[i].title);
var imageContainer = document.createElement("div");
var imagePara = document.createElement("p");
var imageWidth = allImages[i].getAttribute("width");
var spareSpan = document.createElement("span");
imagePara.appendChild(imageCaption);
allImages[i].parentNode.insertBefore(imageContainer, allImages[i]);
imageContainer.appendChild(allImages[i]);
if ( allImages[i].title != "" ) {
imageContainer.appendChild(imagePara);
}
imageContainer.appendChild(spareSpan);
imageContainer.className = xClass
spareSpan.className = "spareSpan"
allImages[i].className = "img"
imageContainer.style.width = imageWidth + "px";

}
}

// Runs all the listed functions on the loading of the window

window.onload=function(){
addCaption("imgLeft");
addCaption("imgRight");
}

Step Three: Add the styling

Once the Javacript has run it should output the following HTML which we can now style:

<div style="width: 200px;" class="imgRight">
<img src="/images/foo.jpg" alt="Description of picture" width="200" height="147" class="img" title="The caption would go here" />
<p>The caption would go here</p>
<span class="spareSpan"></span>
</div>

Obviously, you can style this in whatever way you want but some basic styling might look like this:

.imgRight {
float:right;
margin:0.5em 0 1em 1em;
position:relative;
}

.imgLeft {
float:left;
margin:0.5em 1em 1em 0;
position:relative;
}

.imgRight p, .imgLeft p {
font-size:0.9em;
color:#FFFFFF;
margin:0;
background-color:#4D6D80;
padding:0.5em;
}

.spareSpan {
position:absolute;
top:0;
right:0;
display:block;
width:17px;
height:17px;
background:url(/images/curvedCorner.png);
}

This styling basically absolutely positions the sparespan in the top right corner and adds a nice curve to it while at the same time applying some styling to the caption.

So there you have it. Still very much a work in progress but I would very much like the feedback of the coders out there who are more knowledgeable about such things.

Click here for a very basic working example

Copy and paste for the web

Posted in Development on by Paul Boag

One of the developers at Microsoft has released a proof of concept for something called “live clipboard”.

One of the developers at Microsoft has released a proof of concept for something called “live clipboard”. This system allows end users to pass data back and forth between websites and even between a website and you’re desktop. Struggling to see the potential? Then read on.

 

Possible scenarios

Imagine the scenario. You find an event you are interested in attending on a website. Wouldn’t it be great if you could copy and paste that event into your online calendar, or even better, straight into outlook on your desktop! This is exactly the type of scenario live clipboard is trying to address. But, that is not the end of what live clipboard can do. You can also pass “live data” between websites. In other words if you update information on one site then every site you have previous copied that data to, would be updated as well. Just imagine, you could update your personal information on your MSN account and it would be automatically updated on Myspace and every other account that supports the system!

The possibilities are endless. Never fill in another online form again, simply paste the information from your clipboard. Subscribe to RSS feeds without having to deal with those horrible XML pages. Automatically copy any new photos on your flickr account into “my pictures” on your desktop. I could go on!

See it in action

If you are still having trouble picturing how this works then check out the five-screencast demos the guys at Microsoft have put together. Alternatively have a look at the demo that allows you to play with the basic functionality yourself.

The downside

Okay, I admit it. When I first looked at this functionality, I got somewhat over excited about the possibilities. However, the concept is not without its flaws.

Firstly, take up will be an issue. Until enough websites implement the technology it offers limited benefits. Sure, you can offer copy and paste facilities within your own site but that isn’t the real power of this application. It might be worth implementing if you could copy and paste directly to your desktop but that is reliant on a small application that sits on your desktop and Microsoft are yet to release that.

Secondly, and more importantly, there are some accessibility issues to consider. Based on what I have seen from the demo page, the technology appears to be reliant on JavaScript. Even the most basic level of accessibility requires a site to work without JavaScript enabled. That means any application of this functionality will have to be an added bonus that degrades nicely if not supported. Your site will need to be usable even when this functionality is not present.

Conclusion

Although this is definitely a technology worth keeping your eyes on, it is not something you should implement on your site anytime soon. As a “proof of concept” goes, it is breathtaking, but until more sites begin to support the functionality and solve the accessibility issues then it is probably not for the mainstream.

Holier-than-thou standardites

Posted in Working in web design on by Paul Boag

A number of things have happened recently that have got me thinking about the state of web design. I find myself increasingly concerned about the mentality that is developing within certain parts of the industry.

I guess a recent interview I did for Dustin Diaz started me thinking. We found ourselves on the subject of whether I ever got sick of talking about good practice in web design (things like web standards, progressive enhancement etc.). I explained that this is where my real passion lies and that boagworld.com exists to communicate best practice in a way that isn’t patronising or full of technbabble, which nobody understands.

I have become increasingly concerned that there is a growing divide between those who have grasped this new methodology for designing websites and those who have not. The problem is that many of the "Standardites" have a holy-than-thou attitude, which can seem very condescending to those that aren’t "in the know". In our desire to promote standards we have made those who are not yet using them, feel ignorant.

Not me too!

What has disturbed me most is that I have found myself doing the same thing. In my last podcast, I ranted about another web design show that promoted all kinds of bad practice. In next weeks show I moan about the "ignorance" of some designers when it comes to accessibility (following comments made on sitepoint.com about the target case). In both cases, I may have (and probably did) come across as very dogmatic and arrogant. This kind of approach only builds walls making it harder to educate and inform.

Take for example Andy Clarke’s comments to accessify.com:

Those people still delivering nested table layout, spacer gifs or ignoring accessibility can no longer call themselves web professionals.

In the past, I have praised Andy for these comments and I still believe that they are in essence true. However, now I find myself wondering if comments like that actually help. If I wasn’t using web standards and had not yet faced the challenges of accessibility, I would find those comments very demoralising.
There can be all kinds of reasons why people haven’t adopted these new "best practices". Whether it is a lack of time and training, or simply that they find them too challenging, when in the past they have relied on a WYSIWYG editor like Dreamweaver. Whatever the case we should be aiming to encourage and not condemn these people.

The web standards gang

There is a definite web standards community who all read the same blogs and go to the same conferences. When you are in this group it is hard to conceive that people have not yet grasped the concepts of standards and we are in serious danger of becoming increasingly insular.

My hope is that boagworld.com can bridge that gap and convince people about "web design good practice" without bashing them around the head with it.

Podcast 24: Selecting a content management system

Posted in Classic shows on by Paul Boag

With almost all clients wanting to have at least some control over their websites, the choice of content management system has become a key component in a successful website project plan.

Download this show.

This week Paul and Marcus are joined by fellow Headscape employees, Mark Crawley and Chris Scott in the new Headscape office!

Boagworld news

This week Paul rants about a new web design podcast while praising another that has been nice enough to massage his already over-inflated ego.

Talking of over inflated ego’s, Paul wants to remind everybody about the Geek Dinner being thrown in his honour (well that’s how he likes to think of it) this coming Thursday. Paul and Marcus can’t wait to meet all four of their regular listeners in person as well as making a load of new geek friends who have never heard of this podcast!

Techno buster: Server side and Client side

Why is it that all web developers like to speak their own special language? This week Paul and Mark unpack the differences between server side and client side by trying to explain the roles and limitations of both in plain English.

Main feature: Selecting a content management system

Paul kicks off by discussing the four types of content management systems:

  • Editing of static HTML websites using tools such as Dreamweaver and Contribute
  • Editing of specific site sections like news and events
  • Editing of entire site content including site architecture
  • Enterprise level content management with workflow and permissions

The discussion then expanded to look at the pros and cons of bespoke content management systems vs. off the shelf products. Finally we ended by looking at what factors should influence your decision when choosing a CMS.

Factors included:

  • The flexibility to control site design
  • The hosting requirements of the CMS
  • The functionality offered by the system
  • The expandability of the CMS
  • The learning curved required to implement and use the CMS
  • Your budget
  • The systems support for accessibility and web standards
  • The quality of the WYSIWYG editor

Related article: Designing for your CMS

Web resources: CMS related sites

Open Source CMS
This great site allows you to view demos of every open source CMS imaginable as well as providing user ratings and an extensive forum. As the name suggests this is a great place to start when looking for an open source CMS.

CMS Matrix
This site allows you to compare several content management systems based on a variety of criteria including security, flexibility and support. This is an excellent site if you are trying to narrow your field of options.

Xstandard
Xstandard is truly a top of the line WYSIWYG editor. It produces valid, accessible code as well as allowing designers to limit the control content editors have over the appearance of a site. We have covered this editor before but it’s so good it deserves a second mention!

Your thoughts

We have received loads of email relating to content management systems already and so we know this is a big area of interest for our listeners. Share your thoughts and experience of using content management systems by posting a comment here.

Design for your CMS

Posted in Design on by Paul Boag

With next weeks podcast being on content management systems I have been thinking a lot about how they work. In particular, I have been mulling over the unique challenges they create when it comes to the front-end design.

One of the biggest areas of business for us at Headscape is the creation of design templates for content management systems. A lot of organisations have in house developers who purchase or build their own CMS but don’t have the skills to do the design work involved in the front end of the site. As a result, they come to us looking for help.

Over the years, I must have worked with dozens of different content management systems, all with their own unique constraints. I really have seen every quirk imaginable, from systems that only allow colours chosen from the web safe palette, to a CMS that insisted on a strict three-column layout for all sites.

However, probably the most universal problem with any CMS is that it gives the website administrator limitless control. "Isn’t that half the point of a CMS?" I hear you cry. Well yes, it is, but that doesn’t mean it can’t prove annoying if you’re trying to design the interface. Let me explain what I mean:

Limitless sections

Many content management systems give website owners complete control over the structure of their site including the top-level sections. This means they can continue to add sections until inevitably they break the design. This is especially true of horizontal navigation because you obviously want to avoid horizontal scrolling. To be honest your options are limited:

  1. You instruct the users not to add top level sections or disable that feature.
  2. You avoid horizontal menu’s entirely and design your site in such a way to allow for expanding of vertical navigation.
  3. You create a horizontal navigation that wraps nicely when there are too many sections.

None of these options are particularly elegant, nevertheless this is something you need to consider carefully in the design stage.

Deep navigational structure

Of course, the problems don’t stop there. If a user has control over the structure of the site, it is also possible for them to create sections, within sections. With this kind of limitless flexibility, you cannot presume in your design that you only need to display one or two levels of navigation. In theory, your navigation has to be limitless.

This problem can be solved in a couple of different ways. One option is to show only the siblings, parent and children of any particular page. This works very well particularly when used in conjunction with breadcrumbs, however it does have some drawbacks.

Another approach is to use a breadcrumbs style of navigation. This is something I have covered before in my entry entitled "Dealing with complex navigation" so I won’t go into anymore details here.

Varying column heights

Of course as well as expandable navigation, there is also potentially endless content! With few clients following Steve Krug’s rule of taking your content and halving it, pages can get incredibly long. However, on other occasions it is common to find the navigation being longer than the body copy. With content and navigation being so flexible it is important that your design can comfortable expand or contract to fit what is there. The golden rule here is to test endlessly with different content and different navigation to see if your design breaks.

Ever-expanding names

With users having control over naming pages, another problem arises. As web designers, we have learnt that short snappy names for sections are much easier to read and digest. As a result, we tend to design on the assumption page names will be relatively short. However, you cannot guarantee this if the client has control over the site structure. Make sure you check that page names wrap nicely whether they appear at the top of the page or in your main navigation. Always design for the worst-case scenario and remember if your site is multi-lingual that some languages can have words considerably longer than their English equivalents.

Interchangeable boxes

Not only can the user control the site structure and page content but in many content management systems, they also have some control over the layout. This is often particularly true on the homepage where they can often reorder content "modules". This means any design that you propose has to be flexible enough to allow these "modules" to be moved around. The trick is to do this without the design becoming too blocky. I have found that using curved corners, overlaid imagery and removing borders can help to blur the lines between these "modules", creating a less boxy feel.

The evils of the WYSIWYG

Probably the biggest area of concern is the dreaded WYSIWYG editor. With this, a client can ignore all your lovely design rules and do whatever the hell they like with your page. This is probably the biggest danger area in content management design.

My recommendation is to try and persuade the client to swap out their CMS default editor with something like Xstandard. With this WYSIWYG the client enters content semantically rather than worrying about the design. In other words they tell the WYSIWYG that something is a heading and the CSS file defines its look, rather than the user defining the font, styling and colour themselves. Failing that it is important that the designer provide a very clear style guide covering exactly what is acceptable and what is not.

What’s your experience?

These are just a few of the challenges that I have discovered over the years but I would be interested to hear what your experiences have been? Which content management systems have you used and what problems have you encountered. What advise would you give to somebody designing for a content management system for the first time? Post your comments here.

Web Design Podcast (7) – Content is King

Posted in Classic shows on by Paul Boag

We have received a lot of request to look at the subject of content management. So, in this weeks podcast we will be looking at why content is important, how to make your content accessible, give some general advice on copywriting and final how to make the most from your content management system.

Play

Podcast: Download (14.0MB)

Download this show.

Below is a brief outline of the things covered in this week’s podcast as well as links to some of the sites mentioned:

Poor quality

Let me just apologise in advance for the poor quality of the audio this week. Due to the last minute death of my motherboard we had to change the audio setup and so things are a little ropey. Back to normal next week (hopefully).

This week’s news

View the new boagworld.com mission statement!
Listen to the Web Essentials 2005 podcast
Try out the new web design podcast at webaxe
Read Jacob Neilsen’s top web design mistakes of 2005
Learn how to use Dreamweaver 8 to create sites built using web standards

Main Feature: All about content

Why is content so important?

  • Because users are not impressed by design anymore
  • Because content is not always shown in the context of your design (Web feeds)
  • Because written content improves search engine rankings
  • Because good content keeps users coming back for more
  • The accessibility of content
  • WAI guidelines insist on accessible content (14.1 Use the clearest and simplest language appropriate for a site’s content.)
  • Learn more about making content accessible.

General advice for web copy

  • Make it personal because computers aren’t
  • Don’t patronize
  • Remember the medium (its hard to read on screen)
  • Avoid marketing talk
  • Avoid jargon
  • Remove happy talk
  • Read more advice on writing effective web copy

Managing content

  • Remember you do not always need a full cms!
  • Establish your needs before looking for a solution
  • Content management systems wont solve your content problems
  • People see updating copy as a unimportant part of their job
  • It is important to have a web editor to bully people into contributing and in order to ensure consistency across the site.
  • Provide training on more than just your CMS. Cover good design and copywriting too.
  • Make sure your training is supported written documentation
  • Invest your money in the people that edit your site NOT the technology.
  • Learn more about managing site content.

Molly Holzschlag : Web Essentials 05

Posted in Reviews on by Paul Boag

I have just finished listening to Molly Holzschlag’s keynote speech at the Web Essentials conference in Sydney. As usual, Molly had some fascinating insights into the changing world of web development, but something about her presentation just did not sit right with me.

Specialists working together

Molly primarily focused on the increasing number of fields within web design. As web development becomes more complex, so the need for specialists in different fields becomes more important. From usability and accessibility consultants to designers and developers, the range of specialists continues to grow. Molly went on to say that these specialists are increasingly working together to develop more complex web applications.

So what’s my problem!

So why did this not sit right with me? I certainly agreed with everything Molly said and she is definitely more knowledgeable than I am about the latest developments in web design. I think what I felt uncomfortable with was that Molly spoke as if this collaboration of web design specialists was the norm within the industry. In my experience, the web development world Molly was describing only exists within the high end of web design. I got the impression Molly believed that the majority of web designers specialised in different fields and worked in teams to develop sites. Although she did acknowledge this was not the case throughout the industry, I think she had a slightly unrealistic view about what was the norm.

There are still many all rounders

I work with fairly big clients including government bodies and various higher educational institutions. However, even within organisations of this size their web teams are limited. In most cases, they consisted of web editors and web developers/designers. Largely speaking individuals in web teams still have to be general "all rounders" and do not get the luxury of specialising in specific fields such as accessibility or usability. The majority of people still need to be "jacks of all trades" to some extent.

Now obviously the clients I work with are not comparable with those who engage Molly. However, I did get the feeling that Molly was describing a web design world that is still beyond the majority of my clients and certainly beyond the reach of the majority.

The need for trailblazers

Of course, it is important to remember that Molly and her peers are trailblazers in the industry, which are vital to our continued growth. However, I do have some concern that the gap between these trailblazers and those who follow might become too big for us to bridge. It is important that there are individuals who can bridge that gap and bring these working practices at the forefront of web design to the rest of the industry.

No real conclusion

I am not sure what my point is here and I have no nice conclusion to wrap up with. This is certainly not meant as a criticism of Molly or her peers. I guess it is merely me expressing a concern that for most of us, the world Molly describes is not yet here.

If you have had time to listen to Molly’s keynote I would be interested to hear your thoughts on it. Does your organisation have specialists or are your web developers "jacks of all trades"?

Dreamweaver 8 reviewed

Posted in Reviews on by Paul Boag

As anybody who listened to my last podcast will know, I was incredibly excited about the arrival of Dreamweaver 8. However, was my childlike delight justified? Did Dreamweaver 8 live up to my expectations?

The short answer is, yes it did. Of course, that does not make much of a blog entry, so here are my top five reasons why Dreamweaver 8 kicks ass:

Number five: Design extras

Coming in at number five, are the variety of design tools that have been added to this release. It is now possible to add guides and use rules just like you would in Adobe Photoshop. You can even zoom in on your page for pixel perfect detail.

Of course, nothing is perfect. The guides were sometimes hard to place accurately and no matter how well Dreawmeaver’s render engine is it cannot take into account every browser. So using design tools cannot guarantee pixel perfect rendering for those viewing your site.

Number four: A better CSS palette

Nobody likes change, and when I first saw the new CSS palette, I was not sure I liked it. However, overtime it began to grow on me. Eventually I found it much more powerful, allowing me to quickly identify a particular CSS style that was controlling the design element I wanted to edit.

Number three: An improved coding environment

Sneaking into my top three were the improvements to the coding window. In the past, I think it was fair to say that Dreamweaver was perceived as being a designer’s tool. Its coding environment was always basic, with none of the features you have come to expect from other HTML coding products.

However, this new release has brought some dramatic improvements. It is now possible to collapse tags or even selected areas of code. You can easily find parent tags, comment out code, and highlight invalid code. Combine this with the ability to click on an item in the WYSIWYG window and jump directly to the associated place in the code, now puts Dreamweaver ahead of many pure coding applications.

Number Two: You can work with XML

Being the geek that I am, my second favourite feature of the new Dreamweaver was the ability to work with XML sources such as RSS feeds. I am finding Headscape doing more and more work with XML and it is nice to work with this natively in Dreamweaver.

However, I have to say this is not for the inexperienced user. I was hoping for a slicker solution where XML was handled in much the same way as any other data source. Unfortunately you need to learn a whole new way of working (if your not already familiar with XML) involving data sources, XSL templates and Transformers.

That said, at least the functionality is now available.

Number one: It renders web standards code

Without a doubt, my number one reason for being passionately in love with Dreamweaver 8 is the improvements to the render engine.

As anybody who reads this blog or listens to my podcast will know, I am an evangelist for building with web standards. All of the design I develop these days use tableless design. However, the problem has always been that Dreamweaver would make a complete hash of showing the design in its WYSIWYG editor. This was a huge problem as many of my clients relied on the WYSIWYG even if I chose to hand code. We often receive briefs that make Dreamweaver compatibility a requirement. Thankfully, now at last, it can be without a load of unnecessary hacks!

What do you think?

Okay, so that’s what I think of the new Dreamweaver 8. I would love to hear what you think of it. Post a comment!

Get yourself a great WYSIWYG

Posted in Reviews on by Paul Boag

While in the process of rebuilding the Headscape website, I have come across the ultimate in WYSIWYG editors for your content management system.

If you are a regular reader of this blog, you will know that I have been trying to rebuild the Headscape website for a very long time. One of the main reasons for a rebuild is that our current site does not demonstrate the web standards and accessibility experience that has become core to our company’s approach.

The problem with Content management systems

Of course, it is relatively easy to build a web standards site and ensure it conforms to the basics of accessibility but it is much harder to keep it that way. In my experience, it is the WYSIWYG editor that often lets you down. The whole point of having a content management system is to enable even those with no programming knowledge to make changes to their site. Unfortunately, the majority of content management systems rely on editors that provide the user with little or no help ensuring that the underlying code is clean and accessible. The result is that within days of launching a site becomes non-compliant and potentially no longer accessible.

An outstanding solution

Enter XStandard.

Unlike many WYSIWYG editor that rely on native Internet Explorer Active X components, XStandard has been built from the ground up to provide standards based code and highly accessible content. Not only that it has been beautifully designed to be easy to use and novice friendly.

Superb features

Just some of my favourite features include:

  • The user selects from a list of clearly named tags that define what content is NOT what it should look like. The designer’s style sheet then automatically controls the appearance of these tags.
  • Encouraging the user to conform to accessibility guidelines. Wherever possible it automates this process and if it cannot it prompts the user.
  • Enables drag and drop of both images and files directly from your desktop
  • Microsoft word documents can be copied directly into the editor and it cleans the code and marks it up appropriately.
  • It has a multi-lingual spell checker built-in.

The list above refers to the best features from the users’ point of view. There are also numerous benefits from the programmers’ viewpoint as well.

Responsive customer support

The other thing that particularly impressed me is their customer support. We have received fast responses to our email enquiries and they have done everything possible to deal with all of our queries.

Problems with pricing

I have only one criticism of the product and that is its pricing policy. The price is calculated on both user licenses and site licenses which gets very complicated especially when integrated to a cms that can generate unlimited numbers of users.

Highly recommended

However other than pricing I can thoroughly recommend this product. Not only will we be adopting this editor for our own site we will also be integrating it into all of our content managed sites moving forward. In fact I would go as far as saying that if you already have a content management system that uses another editor that you should seriously look at the possibility of retro fitting this editor into your site.