Tag Archives: speed

105. Christmas Cheer

Posted in Classic shows on by Paul Boag

On this week’s show: Paul suggests some gifts to buy the geek in your life. Marcus talks about wireframes and Matthew Paterson talks about the Email Standards Project.

Download this show.

Clear:left winner

Congratulations to Ryan Downie who is the lucky winner of the Clear:Left training competition. Ryan will have his pick of either a place on the CSS Mastery.

If you didn’t win do not despair. There are places still available on both courses for a mere £345 + VAT. I have attended Jeremy Keith’s course on AJAX and have to say it was superb. I am sure the CSS course is just as good. Go to the clear:left website for more details.

News and events

Opera goes on the offensive against Microsoft

Without a doubt the biggest story of the week and in many ways the year is the fact that Opera is filing an antitrust suit against Microsoft. This story is huge, not because one browser manufacturer is litigating against another (something that is a common occurrence) but because of the strange ripple effect this seems to be causing in the web design community.

However, before we get into the ripples lets look at the antitrust suit itself. Operas beef seems to focus on two areas. First, they object to Internet Explorer being bundled with Windows (surprise, surprise). Second, they are complaining about Microsoft’s lack of commitments to web standards.

Call me an old cynic but this whole thing stinks of a massive PR exercise. This is especially true when it comes to the complaints about standards. As Eric Meyer points out, the timing of this claim seems odd to say the last. If the suit had been filed before the release of IE7 it would make some kind of sense. It was certainly true that standards support in IE was very poor. However, IE7 is a huge step forward and Microsoft seem to be active in its development of IE8.

To me this just looks like an exercise in pandering to the gripes of the web design community. It was as if Opera knew it wouldn’t get a lot of support for the whole “unbundle IE” argument and so threw in the standards issue to drum up some support.

However, as I have already said, the Opera antitrust suit is not the most interesting part of this story. The real clincher is the spin off discussion that has emerged sparked primarily by a very provocative post by Andy Clarke. He argues that this suit makes the position of the W3C CSS working group untenable. Andy asks how Microsoft and Opera can work together to create the next generation of CSS when they are in legal action over exactly that issue. This has led to a much wider discussion about how the W3C works and highlighted a divide between how browser manufacturers and designers see the world. Without a doubt there is huge frustration at the glacier speed at which the W3C moves. This is largely due to the challenges faced by browser manufacturers in implementing the specifications.

But the story does not end there. This frustration with slow progress seems to extend beyond even the W3C to also encompass the Web Standards Project which was setup precisely to push for better standards support. Some very prominent figures are even questioning its role.

If we as web designers want to pressure browser makers to provide better standards support then we need to invest in organisations like WaSP. They need to have the kind of funding that political lobby groups have. This will enable them to employ full time staff to constantly lobby and educate browser providers on what web designers need. In my opinion we as web designers need to put our money where our mouth is and start giving financing to organisations like WaSP so they can be more effective.

Boagworld christmas appeal

Talking about putting your money where your mouth is, I would like to thank everybody who has been kind enough to give to our Christmas Appeal. We have been raising money to support an orphanage and school in an extremely poor part of India. The idea is that you pay for anything of value you have received from Boagworld. Ask yourself how much have we taught you on the show? How much have we entertained you? Then decide how much you would pay for that and give that money.

So far we have received £465 and we are still collecting. Even if you hear this show after Christmas we are still collecting! To donate something or for more information go to christmas.boagworld.com.

The best CSS designs of 2007

Not only is Christmas almost upon us, the year is about to draw to a close. This makes it the time of year when bloggers look back at the year just gone and compile “the best of 2007″ lists. Normally I am lukewarm about such things however there is a great list over at web designer wall. They have compiled the best of CSS design in 2007. If you are in need of inspiration this is definitely worth a look. There is some truly stunning stuff here.

Talking of rating design you might also want to check out commandshift3.com which is basically hot or not for web design. When you visit the homepage you are shown two designs and you click on the design you prefer. Not only does it allow you to vote for designs it also lets you look at the best and worst based on votes received. This makes it a great site for inspiration and for learning what not to do!

Marcus’ bit: Quick and Dirty Wireframes

So a couple of week’s ago I wrote a post on the use of wireframes in web design. Marcus couldn’t come up with a decent topic to talk about himself this week so has decided to reuse my post and pass it off as his own! ;)

Back to top

Paul’s corner: Geek Gifts for Christmas

For my segment of the show this week I decided it might be fun to look at Christmas presents. Specifically what you should buy for the geek in your life. In order to avoid it sounding like a wish list for myself the items I have picked are items that I own myself and can personally recommend.

Back to top

Ask the expert: Introduction to the Email Standards Project

Hello world of Boag, I’m here today just to give you a really quick introduction to the Email Standards Project, a new community effort that has launched recently.

If you’re a web designer, and you’ve ever created HTML emails, you will know that getting them to look reasonably consistent across the major email clients is hair-pullingly frustrating.

At least with websites, there are only a few major browsers you have to worry about, and thanks to the Web Standards Project they are much improved from the days of the browser wars. With email you have at least 12 email clients with big shares of the audience.

Unfortunately, HTML email is still stuck back in 1998 with that Celine Dion song from ‘Titanic’ – nobody wants to be there. Over the last 10 years, web designers, and particularly web standardsy type designer, have generally taken a ‘Just Say No’ approach to HTML email. ‘Don’t send it, don’t read it, pretend it never happened’.

That approach has not been a spectacular success – millions of people still sent HTML emails, but because the designers wouldn’t touch them they were hideously ugly and just made designers hate them even more.

HTML email is here to stay. It is the default format in many clients, and sometimes it really does give a better experience for the reader than plain text. The Threadless newsletter is a great example – the send every week an email with pictures of the latest shirts. Trying to describe the shirts in text is nowhere near as useful. A picture is worth at least 1,000 words!

So here we are in 2007, and in order to get reasonable rendering, designers are having to dust off their table coding skills to get things working in Outlook, Lotus Notes, Gmail, Yahoo, Thunderbird…it goes on.

At Freshview we deal with designers every day through Campaign Monitor and MailBuild who are struggling with this problem, and we finally decided to do something about it. That is where the Email Standards Project came from.

Together with a few other people we’ve put a site up at http://www.email-standards.org (email hyphen standards dot org), and you will find a link for that in the show notes. The central idea of the Email Standards Project is that we want to work with designers and with email client developers to improve support for web standards in email clients.

It’s not one of those sites that is all talk and no practicality though – jump onto the site and you will see a bunch of tests we have done to work out exactly what does, and what does not work in all the major email clients as far as a core of normal HTML and CSS like padding, margins, floats, lists and so on.

If you’ve seen the Acid test for browsers, over at the Web Standards Project, then this is basically the same idea except for email. We’ve already had some contact with some of the big email client representatives about our results, which is really exciting. Check out the blog for updates in that area.

If you know the pain of designing HTML emails, and you want to support the project, then there is a section on the site that covers that too, and we’ve had a huge number of people offer to help, and some great feedback from people like Jeffrey Zeldman and Cameron Moll.

If you are a website owner, and you want to know why this matters to you, then check out the site for an article on why web standards are important for email, or talk to your web design firm. As is often the case, it comes down to money – better standards support means less time spent getting things to work, and more time on the actual design.

So thanks for giving me the chance to say a few words about the Email Standards Project, and I hope you all do get a chance to checkout the website, email-standards.org.

Happy Christmas!

That about wraps it up for this week’s show. We will be back with a slightly amended format as from Wednesday the 9th January. See you then.

104. Give us your money

Posted in Classic shows on by Paul Boag

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

Play

Podcast: Download (25.5MB)

Download this show.

Launch our podcast player

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

Housekeeping

All change

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

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

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

Christmas giving

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

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

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

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

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

Give to the Boagworld Christmas Appeal

News and events

24 ways is back

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

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

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

Tips for development and design

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

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

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

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

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

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

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

What tips do you have for getting designs signed off?

 

Ongoing role of a website manager

Posted in Web strategy on by Paul Boag

Although there is a general acceptance that a website manager is required to “make the site happen” (as in go live) there is little or no conception in many cases that there is an ongoing role there.

Many organizations and individuals simply underestimate the enormity of the job faced by website managers/owners, failing to grasp that it is an ongoing commitment. It is our job as web designers to make clients aware that running a website requires somebody to be responsible for it over the long term. Every website requires a website manager.

This lack of understand about the role of website manager probably explains why it is often a fairly unrecognized position despite the fact that the website itself is considered an important asset. Although there is a general acceptance that a website manager is required to “make the site happen” (as in go live) there is little or no conception in many cases that there is an ongoing role there.

It is almost as if there is a “build it and it will run” mentality, where the organization fails to grasp that a website manager is needed throughout the entire lifecycle of a website to ensure that it evolves and remains successful.

A good website manager need to be constantly fulfilling three roles…

  • Evaluating site objectives
  • Refining the site
  • Promoting the site

Evaluating site objectives

A website manager should be constantly evaluating the objectives of his website and asking if changes need to be made to its overall vision and direction. This kind of assessment does not need to occur on a daily basis but should be done at least every six months (more often if things in your organization move quickly).

These reviews should consider questions such as:

  • Have the underlying objectives of the website changed?
  • How is the site performing against its success criteria and do those criteria need to change?
  • What is the competition doing and how are we performing against them?
  • How has the target audience changed and what response are we getting from them in regards to the site?

Refining the site

On a more practical level the website manager should also be refining the site in response to changes in these objectives. If the success criteria for the site are not being met, then steps need to be taken to address the problem. Equally, if the competition is luring away your visitors then the site needs to be altered to encourage them back.

This continual “tweaking” of the site can manifest itself in three different ways:

  • Changes to the front end interface of the website
  • The addition, deletion and editing of written content
  • The introduction of new functionality

For example a luxury holiday booking service might respond to increased competition in the sector by adding a flight price comparison tool to the site (new functionality). A tool like that is very appealing to some users and will draw them away from the competition. Equally, they might look at adding regular reviews of existing destinations (new content) to encourage users to keep coming back. Finally, they might refine the design based on user feedback to make it easier to navigate and improve legibility (changes to design).

Responding to user feedback is often the best way of refining the website, which is why ongoing usability testing, polling and analysis of site stats is so important.

Site promotion

Although it is possible to get online marketing specialists to help with the promotion of a website I have seen some organizations fail to allocate budget to this task. As a result it often falls to the website manager to pick up the promotion of a site.

Site promotion needs a definite ongoing commitment. The number of visitors coming to your website will slowly decline if you do not actively promote it.

You can promote a website in a number of different ways.

  • Offline promotion – Offline promotion includes letterheads, business cards, signage, phone systems and other marketing collateral.
  • Email marketing – Email can be a powerful marketing tool to drive new traffic but also a good way of encouraging existing users to return to your website.
  • Search mechanisms – Search mechanisms are more than good placement on Google. It also includes pay per click campaigns and social networking tools.
  • Guerilla marketing – Guerilla marketing is a catchall term for lost cost marketing methods. It includes techniques like forum speeding, viral marketing, blogging and even podcasting.

Site promotion requires more than mere lip service. It needs dedicated resources (either internally or externally) on an ongoing basis. It is important to decide early in the process who is going to be responsible for this work.

Show 96: Moll on Mobile

Posted in Classic shows on by Paul Boag

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

Play

Podcast: Download (31.0MB)

Download this show.

Launch our podcast player

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

News and events

Social Participation as a business tool

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

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

Test your website for mobile compatibility

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

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

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

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

Laying out inline images

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

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

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

10 Usability nightmares you should be aware of

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

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

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

Back to top

Marcus’ bit: When is speculative design okay?

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

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

The worst case

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

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

When is it ok?

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

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

But, this isn’t just about getting paid.

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

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

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

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

Back to top

Paul’s corner: Who to ask to tender?

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

Back to top

Ask the expert: Cameron Moll on the mobile web

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

Cameron Moll: Hey, thanks Paul.

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

Cameron Moll: Yeah it is.

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

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

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

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

Paul: Uh, October 20.

Cameron Moll: Um, unfortunately not.

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

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

Paul: Sure (thoughtfully like he is paying attention)

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

Paul: Yeah (thoughtfully like he is paying attention)

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

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

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

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

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

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

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

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

Cameron Moll: Right exactly.

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

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

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

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

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

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

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

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

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

Cameron Moll: That’s correct. And I’ll give your listeners a heads up that we’ve got a print version coming out in October to be announced soon.

Paul: Oh that’s excellent. So you’ve got the choice either way. Alright thank you very much for coming on the show Cameron. We’ll get you on again in the future no doubt.

Cameron Moll: Hey thanks Paul.

Back to top

Show 89: 404

Posted in Classic shows on by Paul Boag

On this week’s show: Paul talks about creating the perfect 404 page, Marcus covers some of the basics of rich media and Aral Balkan makes working with databases and APIs a whole lot easier in flash.

Download this show.

Launch our podcast player

Before we dive into today’s show I have a small request from you our loyal fans *cough*. As you may have noticed the show notes we produce for this podcast are a lot more comprehensive than once they were. They are almost a complete transcript, which is important to us because we want the show to be as accessible as possible. I have been contacted by a number of deaf users who are frustrated because they cannot access the show and to be honest I sympathize. We have done our best to produce a complete script but we are getting hung up on the expert section. I just do not have the time to go through and reproduce everything say. An alternative would be to use a service like Casting Words but to be frank I am not confident on the quality we would get back. I was therefore wondering if any of you would like to volunteer? I know a number of people have offered to transcribe in the past but quickly became overwhelmed with the amount of work involved. However, transcribing just this section of the show (typically about 10 minutes) shouldn’t be too bad. Hopefully if we can put a rota together it should be too big a job and best of all you would get to listen to the expert sections in advance :)

So, if you can spare the time drop me a line.

News and events

Writing for the web

First up this week is the fact that the latest issue of A List Apart is entirely dedicated to the subject of writing for the web. There are two great articles both of which are definitely worth reading. The first post takes the idea of personas and suggests that your website too should have a persona. What tone of voice should your website have? What character should it project? The second article (and my personal favorite of the two) is a passionate defense of good writing on the web. It fights hard against the attitude that web copy should be kept to a minimum arguing instead that if the content is web written it draws the user in and engages with them in the same way good design can.

Both articles are excellent and has made me reconsider the importance of good copy. It is an area I am constantly frustrated by and just wish I could get my clients to pay for a copywriter to really bring their sites alive.

Microformats in Google Maps

Next up is a really exciting announcement by Google. It would appear that Google Maps now supports Microformats. I can hear your cries of disappointment… thats not that exciting! Well, I think it is. This is a huge boost for the Microformats community and puts literally millions more hcards out there. Not only will this raise the awareness of Microformats but I also think it will lead to some interesting mashups using the massive database of businesses that are displayed on Google Maps.

If you are yet to play with Microformats or haven’t gotten around to adding them to your website then now is the time. They are quick and easy to implement and oh so very cool ;)

There has been a lot written about Microformats but it is nice to see big players picking it up and running with it. Good stuff.

Corporate Web Standards

What you don’t see a lot written about anymore is web standards. Its almost as if all of the arguments have been made. However, I did come across an article this week that convinced me there was more to cover. It was a discussion about implementing web standards in a large corporate environment where you are weighed down under legacy pages and internal politics.

It was a refreshing article because it was so pragmatic. Much of what you read about standards is bordering on fanatical. This article was much more down to earth accepting that you cannot implement the perfect solution especially within a large corporate environment. It talked about little steps and something being better than nothing.

If you work in a large organisation then this is definitely worth reading. You will find it very encouraging.

Web Design advice

Last up is a couple of websites I have stumbled across this last week. Both of them are provide general web design advice and I have to say both look very impressive. The first was sent to me by Charles Russell who recommended it as an alternative to “The Principles of Beautiful Web Design“. I am not sure it is an alternative personally but it is certainly an interesting website. It is called Web Design from Scratch and does exactly what it says on the tin. It literally covers every aspect of web design providing basic advice and then referring you on elsewhere. Ideal for the beginners.

The other site I wanted to mention is the Web Designers Wall which I believe has only just launched. It seems to be filled with all kinds of nice goodies including tutorials, code snippets, commentary, inspiration and more. What is more the site design is beautiful. I have a feeling that this site is only going to improve with age.

Marcus’ bit: Rich media

Multimedia doesn’t really mean that much anymore I think. It used to refer to CD-Rom type content but now I think it refers to any web content that isn’t just plain old text and images.

I have been pricing up some new/interesting/dynamic content for one of our clients and it struck me that I haven’t discussed this sort of thing here before. I guess there isn’t a great deal of point to this other than ‘have you thought of doing…’, so here goes…

Animated shortcut banners

These seem to be all the rage at the moment. Usually quite a large portion of the homepage is dedicated to a rolling carousel of messages or adverts for content deeper in a site. There will usually be 3 or 4 different ads that flow from one to another. Manual controls are also available to go straight to a particular shortcut or pause on an ad.

There’s a good example at Wildfowl and Wetlands Trust.

Video

I don’t really mean just plain video; I’m referring to a piece we did for the Surrey Hills AONB that incorporated:

  • Still shots
  • Video footage
  • Voiceover

All of which were pulled together to create a tourism video that can be downloaded at Surrey Hills.

The voiceover, incidentally, was done by Surrey Hills patron and famous british actress, Penelope Keith. Going to her rather grand house to record the session was a great experience.

Voiceover

Which brings me nicely on the subject of voiceover. I have two rules relating to voiceover recording:

ALWAYS use a professional actor. The girl in the office with the ‘nice’ voice will sound rubbish, so will the ‘posh’ guy in accounts (we know, we’ve done it!). Voiceover actors aren’t that expensive and, because they’re professional they’re quick. I have used Voicebookers in the past and they have been superb.

Less important but… use a proper voiceover recording studio. I have used studios in London that are really very reasonable and the quality is superb. Though of course this isn’t always possible as with Penelope Keith (recorded my laptop).

Panoramic imagery

We have done a few external 360 degree images, again for Surrey Hills and some for National Trails. We haven’t used dedicated equipment that take full spherical shots basically because you end up with an unnecessary amount of sky. I have simply used a decent camera and tripod and done two full sweeps of portrait images (roughly one just below the horizon, the other just above), moving the camera about 10 degrees each time.

The ‘fun’ part with these images is that they are usually taken from high vantage points so expect to have to do a lot of climbing to out of the way places!

There is a compromise to be made with panoramics. The best time to take a good landscape photo is early in the morning or just before sunset. However, for a panoramic that doesn’t work because you will have the sun in view for a large chunk of the image. This is one of the reasons why panoramic images can often look a little ‘flat’.

Dynamic screensaver

This is quite a cool idea where the standard screensaver idea (pretty pictures rolling from one to the next) is enhanced to allow the client to update information to it. Basically, when the screensaver fires up (as long as it connected to the internet) it checks with the client’s site to see if any changes have been made and automatically updates if there has. This is really handy for news stories but could be used for anything.

Mapping

I think I have discussed mapping previously because it is something Headscape has done a lot of in the past. Up until recently we tended to develop maps using Flash where points of interest are dynamically generated using grid references. We also added features such as layering of different categories.

However, recently we have developed a site for River Thames that utilises Google Maps. The site’s main purpose is to promote the River and encourage people to visit. Again, we have used Google Maps to show points of interest such as places to eat, places to stay etc that are controllable in layers. Using GM is very cool though because the points shown alter when the maps are dragged and/or zoomed (apparently lots of brain power went into making this work!).

Finally, we also created a trip planner or itinerary builder that gives site users the opportunity to list all the places they want to visit (inc. contact details, address, directions etc) and print this off in a print friendly design or email to a friend.

Paul’s corner: Handling missing pages

I noticed this last week that I have been getting a lot of traffic from the Smashing Magazine and so I went to check out where it was coming from. Turns out it was an article on 404 error pages and they had used my error page as an example. The article also referenced another site called the 404 Research Lab that provides lots of good information on setting up custom error pages. All of this reminded me I wrote a blog post ages ago about handling missing pages and yet for some reason i have never spoken about it on the show before. Seems strange because it is a subject we all need to deal with. So, I thought it was time I covered the subject properly using my old blog post as the basis.

Review: Aral Balkan on SWX

Paul Boag: OK, so joining me today is Aral Balkan. Hello! How are you?

Aral Balkan: I’m fine, Paul. How are you doing?

Paul: Not too bad. I feel like I’m speaking to you quite a lot recently, one way or the other.

Aral: [laughs] I know, but it’s fun, huh?

Paul: So I was explaining to everybody earlier in the show how we got you into Headscape to give us a little bit of training and kind of bring us up to speed with what was going on with Flash.

Aral: Yeah, that was a lot of fun, too.

Paul: You had a good day, did you? It wasn’t too painful then.

Aral: Yeah. Me and my bunny had a good day. [laughs]

Paul: Yeah, that was deeply disturbing, on so many levels.

Aral: [laughs]

Paul: But I think we’ll just leave it at that. We won’t tell people any more details on that. We’ll just leave them worrying about it. [laughs]

Aral: OK, let’s do that. [laughs]

Paul: So, as part of that day, you mentioned SWX, which is something that you’ve been involved in developing. And it sounded so cool and kind of dragged my attention back when there were points where I was thinking that this is beginning to get a bit out of depth to me.

Aral: [laughs]

Paul: There were techie people in the room that understood what was going on.

Aral: Yeah.

Paul: But then you started talking about SWX, and I started to think, “Ooh, that sounds cool” so I thought I’d get you on the show and ask you a little bit about it.

Aral: That’s great. That’s great, because SWX is what I’m most excited about these days.

Paul: Good stuff. So, do you want to kick us off by telling us a little bit about what SWX is?

Aral: Well, SWX is a couple of things. SWX itself is a new data format for Flash. It’s actually the native data format for Flash, which is kind of weird, because Flash has been around for a while, so why hasn’t it had a native data format until this point? I don’t know. Nobody else did it, so at the end; I was like, “OK. Well, I guess I have to bite the bullet here.”

And when I say native data format, if you’re not very fluent with Flash, think about JSON, or what JSON is for JavaScript. But it’s actually a step beyond that, because, with JSON, you still either have to parse it, or in JavaScript you have to evaluate it, before you can use it. So there’s another step before you can use it, after the data’s loaded.

In SWX, there isn’t. It uses SWF files, which are native Flash files, to store data, so it makes it very easy to work with.

Paul: What’s the kind of target audience for this? Who do you see as using it?

Aral: There are a couple. So, anyone right now who’s working with Flash basically can use this to build mash-ups, to build data-driven Flash applications. And also, mobile developers who are developing with Flash Lite can use SWX to develop mobile Flash applications.

And in fact, that’s where it’s currently, I think, most useful, because with SWX RPC–which is the remote procedure call, the gateway for it–you can make remote procedure calls, so call back-end services and methods, through SWX. And it’s the only RPC solution, really, because Flash Remoting doesn’t work on Flash mobile, on Flash Lite, so it’s the only RPC solution for mobile right now.

Paul: I think what kind of struck me about it was the fact that there are a lot of people out there that maybe have been doing some superficial stuff with Flash…

Aral: Yeah.

Paul: And have been doing some ActionScript and things like that.

Aral: Right.

Paul: But when it gets to things like making data calls, it all seems to get horribly complicated, all of a sudden.

Aral: It does. It gets very hairy, and I don’t know why. I think part of it is because the back-end, the server side, of applications has traditionally been the realm of traditional programmers: the brainiacs, the people who are very comfortable talking in code, thinking in code.

And they’re not always the best people, I find, to simplify concepts, because they’re so intelligent, they can understand all of this, or they have such a focus on this that they don’t mind spending hours trying to set something up. Sometimes, they’re not always the best people to create simpler systems for mere mortals like the rest of us.

Paul: [laughs]

Aral: So that was my main motivation behind it, because I think Flash is great for building mash-ups and data-driven applications. But we don’t get as much experimentation in Flash with that, and I think it’s because it’s too hard. The barrier of entry is too high. You have to jump through so many hoops to get even something basic working, whereas it should just be, off the bat, you should be able to get started with things. And that’s been my focus with SWX.

So, for example, on the Mac, there’s a bundle that you can download that gives you everything you need to start using SWX, with a one-click installer, a disk image.

Paul: Cool.

Aral: My focus, really, with SWX is on simplicity. And when I say simplicity, I mean for the whole process, from the moment you go on the website and download SWX, to the moment you can get up and running. I’m trying to make that whole process as easy as possible, basically.

Paul: From what you showed me when you came into Headscape…

Aral: Yeah.

Paul: Basically, within a few minutes, you can kind of download this bundle onto my Mac. I can run an install file, which sets everything up for me.

Aral: Yeah.

Paul: And you’ve even set up…

Aral: Well, you basically get a development server for free.

Paul: Yeah.

Aral: It uses the MAMP Bundle, which is a great bundle that has Apache, PHP, MySQL. So if you’ve ever been afraid to work with these things, that’s also a way to get started, because there they are on your machine, running, without any configuration or anything on your part.

Paul: And you have also included some kind of interfaces to common APIs, things like Flickr and Twitter and stuff.

Aral: Yes, and in fact, if you remember the installation process and everything that you were talking about, you don’t even have to download and install SWX to start working with the pre-existing APIs that come with it, because I host an instance of the SWX gateway on swxformat.org. It’s the public SWX gateway that you can just hit directly from your Flash applications.

Paul: Ah!

Aral: So if you don’t want to mess with the back-end, but say you want to build a mash-up that uses Flickr or Twitter, currently two of the main APIs that I have on there, you don’t even have to download SWX. You can just open up Flash, write four or five lines of code, and get, for example, the list of your latest photos from Flickr.

Paul: Cool.

Aral: Or your friends’ photos. With nothing else. So you don’t even have to download anything to start working with SWX, because it is native. What you’re getting from the back-end, from that SWX gateway, is a SWF, and Flash knows how to deal with that, and the data in there is a native Flash object and ready for you to use the moment it loads.

Paul: So, how does somebody get started on this? Where do they go? What do they have to do? Especially, you made it sound very simple for the Mac. Is it horribly complicated if you’re a Windows user?

Aral: Oh, not at all, not at all. Like I said, regardless or what platform you’re on, unless you want to build your own server-side services, if you want to use the APIs that it comes with, you don’t even have to download it, actually.

Paul: Oh, OK.

Aral: In fact, just last week, I got moo cards printed. And these little moo cards have all the code you need on the back of them, because there’s only about four lines of text you can put on the back.

Paul: [laughs]

Aral: But they have all the code you need to get the latest public timeline updates from Twitter. So it’s actually, seriously, four lines of code, and it fits on a moo card.

Paul: Wow!

Aral: So, to get started, you don’t have to do anything, really, apart from open up Flash, write four lines of code, and see it run and get the feeling that, “Wow, maybe I can build data-driven applications in Flash, too, because this is simple.”

The next step would be to download SWX onto your own machine. If you have a development server already, if you have a web server with PHP, then you just download the ZIP file, unzip it into your web root, and hit that location in the browser, and the start page comes up and guides you through the rest of it.

Paul: Cool.

Aral: If you’re on a Mac, get the MAMP Bundle, and that’ll get you started even faster. But, like I said, you don’t even need to download anything to start playing with it.

Paul: So these four lines of code to get you going…

Aral: Yeah.

Paul: If they don’t have one of your precious mood cards, where can they go to learn those kind of basics?

Aral: Well, on swxformat.org, there is a screencast right now. It runs you through the MAMP Bundle, but the concepts are exactly the same for all of the rest.

Paul: OK.

Aral: Although, I am going to record a few more screencasts. I’ve started putting them up on Viddler, which is actually really cool. I don’t know if you’re used it.

Paul: Yeah, I have.

Aral: But it’s really great for screencasts, because it keeps the original resolution of your movie. So I’m going to record quite a few more and put them up there, including one that will just get you started, like the moo card does.

Paul: Cool.

Aral: So, look on swxformat.org. And also, look on my blog, because I blog about SWX quite often there: it is aralbalkan.com.

Paul: So as I understand it, at the moment, this is all built on PHP and MySQL. Is that going to change? Are we going to see other platforms supporting this, too?

Aral: Well, basically, the SWX format itself is a data format, so it’s platform-agnostic, in terms of the back-end, etcetera. So if you have a SWX SWF, you’ll be able to load that. Even if it’s offline, if you have if on your hard drive, you’ll be able to load it into Flash and get the data off of it.

Paul: Excellent.

Aral: And then there’s SWX RPC, which is an implementation of a gateway, basically, or an endpoint, that serves SWX SWFs. And the current implementation of that is only in PHP.

Paul: Right.

Aral: So, it will be ported later on. It’s currently in beta. And once we get closer to the release date and certain things are standardized, I’m going to be concentrating on orchestrating the ports. There’s a lot of interest from quite a few people to port it to Ruby, to J2EE, to.NET.

Paul: Excellent.

Aral: And my focus right now is on getting SWX to a level where it’s somewhat of a standard–not like an Internet standard, but at least, within itself, we know what we’re talking about when we say a SWX SWF so that, if it’s being generated from Ruby, it’s the same thing…

Paul: Yeah.

Aral: So there’s no fragmentation. That’s my focus right now. In fact, I’m writing my first RFC…

Paul: [laughs]

Aral: For the SWX formats, just so things are a bit more standardized, before we go porting it to every possible technology.

Paul: Excellent! That just sounds really exciting…

Aral: I’m really excited about it!

Paul: Yeah, I bet you are.

Aral: This has gotten me excited and working with technology again, at a level that I hadn’t been in the past. It’s fun. Because this stuff, the data exchange between tiers, it’s really not rocket science, and it shouldn’t be rocket science. We’re just moving stuff from one place to another. And my philosophy is: make that as simple as possible for people so they can concentrate on the really fun bits…

Paul: Yeah.

Aral: Building the user interface, building a great user experience. Because those are the hardest bits, really, conceptually, and they’re also the most fun.

Paul: Yeah. That’s great stuff, and I wish you all the best with it in the future. And thanks for coming on the show and telling us a little bit about it.

Aral: Thanks so much, Paul, for having me. It was a lot of fun.

Paul: Yeah. OK. Good to talk to you, and we’ll speak to you again soon.

Aral: OK, take care of yourself.

Show 84: Maybe

Posted in Classic shows on by Paul Boag

On this week’s show: Paul explains why Headscape does Design Testing, Marcus talks about growing your web design and Mark Buckingham provides an introduction to Search engine optimization.

Play

Podcast: Download (24.1MB)

Download this show.

Launch our podcast player

News and events

Pagination 101

I came across a great post this week that provides a solid introduction to producing pagination. If you haven’t come across the term pagination before it refers to the navigational elements that allow you to move through multiple pages of results. They often include links marked previous and next or numbers to allow you quickly to jump to a specific page of results.

We use pagination all of the time and most websites seem to have them. However, they are an overlooked function that doesn’t get the attention they deserve. The post I found this week, entitled pagination 101, explains to the reader through examples what make pagination work. Although I am not convinced I agree with everything written here it generally provides some very sound advice.

Personally I love posts like this that cover very basic stuff. It helps remind us not to get so caught up in the cool stuff that we neglect the fundamentals.

Free CSS based design course

John Allsopp and Maxine Sherrin have released a free online course that introduces people to CSS based design. If you are still to make the switch from table based design or are finding the change challenging then I would highly recommend this course.

We are not talking about a short introduction here. Rather, this is an in-depth course that builds up over a series of weeks into a comprehensive guide to building with standards. Not only does the course tell you how to build with standards it also explains why which in my opinion is just as important.

Zeldman says no to Maybe

I wanted to quickly mention a post I saw from Jeffrey Zeldman this week. Its not exactly earth shattering stuff but it caught my eye nevertheless. Zeldman, suggests that it is probably a mistake to use 5 star ratings on websites or indeed any other option which allows a neutral answer. The problem is that if you allow people to rate something between 1 and 5 they will often rate it as a 3 because 3 is the most neutral response.

As Zeldman points out this problem is a lot broader than just 5 star ratings. It also applies to any response that allows for people to be uncommitted. Given a choice people will normally take a neutral stance.

As I said, this wasn’t an earth shattering post. But, what it did drive home is that web design is as much about understanding your users psychology as it is about good design or clean code.

IE Net render

I came across a site this week called IE Net Render that takes free instant screengrabs of your site displayed on IE 7, 6 or 5.5. This is a great way to see how your site is rendering on IE 6 or 5.5 once you have upgraded to 7. Its also damn useful if you are a mac or Linux user.

Of course, there are similar services out there but most of them charge and those that don’t are incredibly slow. What impressed me about IE Net Render was the speed with which it returned results. The only draw back is that it does not return content below its artificial fold.

Paul’s corner: Design testing

Headscape has always used design testing as part of its development process and yet we seem to be in the minority. We are often met with a lot of skepticism about the benefits of putting a design concept in front of real users as well as questions about how the process works. As I have received two emails on the subject over the last week I thought it was about time I explained the idea properly.

I have blogged about design testing. How we do it and why we think it works?

Marcus’ bit: Growing a web design buisness

Got this question from Andrew:

Last year I started my web design business from a back bedroom with very little experience and an old copy of Dreamweaver! I’m pleased to say I’m still here and the business is growing steadily. Your forum and podcasts have been invaluable and offered loads of great advice and support and no doubt helped many others in my position so thank you!
My question for you both is have you any advice on managing the growth and development of a web design business? As a one man band, when is a good time to take someone on, or could I realistically work with freelancers all the time? It seems that to take someone on is very costly (not just in terms of skills) but if I want to expand the business and our services for clients I can’t do it alone. Should I hire someone who can do everything, or someone who can sell leaving me to do design and development work? What are the pitfalls that I should look out for?

Any thoughts or insight into your experiences would be really helpful.

Interesting question, and one we have a lot of experience of but… one I feel I need to add a caveat to. What I am about to say is my personal opinion and does not constitute legal advice!

Ok, the easy bit first:

Sales people

Bless ‘em… we had enough bad experiences of sales people during our tenure at our previous company to know that the only people who reliably sell the services of a web design company are the people that own it.

I’m not saying there aren’t any good sales people out there, just that selling quite highly priced solution based work does not fit well with the standard sales ethos. Sales people like products. They like products with set prices (that they can cut). They like having demonstrable ROI.

Design, in particular, is very hard to put figures to. I can’t tell a company that redesigning their site will boost sales by X or Y percentage. I can talk about brand values and the importance of conveying quality online but I can’t put hard figures to it.

Most web design sales involve responding to a tender with a lengthy proposal and subsequent pitch that is tailored for that particular prospective client. It usually draws from all aspects of the business – design, technical, consultancy – and therefore needs someone with a good understanding of the business to put it together. I.e. the company owner/director.

Who to employ

Headscape currently includes the following general production roles:

  • Designer
  • Developer
  • Project manager
  • Information architect
  • Testing facilitator

Again, the directors tend to share IA and testing with the project managers. Project managers are invaluable members of any team but if you are looking to employ your first member of staff you need to get a designer or developer on board first.

Look at your own skills and see where you’re lacking. Maybe filling the gaps is the right way forward. However, that may only be appropriate if you’re looking to take on more complex work and simply doubling up on what you already have may be the most prudent move. Often, a new project win will point towards who the right person is.

When we started we had Paul doing design and some technical work, Chris doing project management and me doing sales. At the time, we had a great client that kept firing Flash work at us. We outsourced a couple of times but eventually ended offering a permanent position to one of these guys (he is still with us, as is the other guy who we outsourced to then!).
You mentioned hiring someone who can do everything – Chris, who was the first guy to join us, is a bit of a jack-of-all-trades so was perfect for us at the time. As we have grown though, we have looked for more and more specialist people.

Permanent or freelancer

Taking on freelancers can often mean the difference between being able to deliver a job or not. However, they are expensive and will badly erode your bottom line if you do it all the time. So, ask yourself – if I had an employee instead of a freelancer over the past X months, how much would I have saved?

Employees are a responsibility though and need looking after . One thing we have learned over the years is that happy staff make for more productive and more effective staff. As we have mentioned recently, Headscape has started encouraging everyone to spend a few hours each Friday afternoon working on anything they like. We get together monthly to present our ideas to each other – best idea wins something cool.

But sometimes you have to have to be prepared to make some very tough decisions. The bottom line is that the company always comes first. One final point though – and in the words of the late, great Douglas Adams – don’t panic! It is very easy to see things as much worse than they actually are.

Ask the expert: Mark Buckingham on SEO

This week we have Mark Buckingham on the show from netseek.co.uk to introduce us to the world of search engine optimization.

Mark helps dispels some myths surround SEO. He discusses best practice and talks about specific techniques such as keyword density and link popularity.

To be honest I felt like we only just scratched the surface of the subject of search engine optimization and would be keen to speak with Mark again. Its such a massive area that it is hard to know where to begin. So, if you have any specific questions you would like answered on SEO then drop me a line at [email protected] and I will get Mark back on soon.

Book recommendations

Finally, I just wanted to let you know that I have finally sorted my act out in regards to my reading list. One of the most common emails I receive asks me if I can recommend a book or what I am currently reading.

Now, I posted a list of recommended books ages ago but I never got around to updating it. Well I have finally done so and also gone a step further by creating an RSS feed of any books I read (be warned these will not all be web design related).

I promise to keep both the post and RSS feed up to date from now on!

Website feedback mechanisms

Posted in Marketing on by Paul Boag

For many businesses a website is a lead generation tool. However, although a lot of thought is put into the website itself, very little is put into the gathering of the leads that result from the website.

As normal, when I returned from holiday I found myself faced with a mountain of email. Among the pile I have found several enquiries from the Headscape website which have remained unanswered for the week that I was away. Obviously, this is not good and it has started me thinking about how we as website owners handle enquiries and feedback that come from our websites.

As far as I am aware there isn’t much written on the subject of enquiry processing, which is strange considering that correspondence between website owners and site users is fundamental to the success of many sites. As nobody else seems to be talking about this much I thought I would jot down my thoughts on the subject.

Mechanisms for feedback gathering

A good place to start is by examining the methods you allow users to communicate through. It is easy to underestimate just how many options are available and each has its own pros and cons. Think carefully about your site and the people that use it. Are you really providing the right mechanisms for your users?

Email

Email is probably the most common form of communication from a website to its owner. Its easy to add an email address on your website and a lot of users prefer to email directly rather than use a form, because they can then keep a copy of the correspondence.

However, email is not without its problems. Not every user has an email address or access to their email client at a particular time. Also publishing your email address on a website opens yourself up to spam. There are ways to mask your address from spammers, but this often creates accessibility problems.

Forms

The next most common option is to allow communication through forms. A contact us form has an advantage over email because it doesn’t require the user to have an email client. However it can still suffer from spam. One advantage of a form is that it allows you to funnel emails in different directions based on the type of user enquiry. For example if a user specifies the message as a support query it can be sent to a different person than a sales enquiry.

Forms are probably the most versatile and powerful communication technique available and certainly work well on larger sites. However they are not always the right solution 100% of the time.

Forums

Although forums are often perceived as “user to user environments” rather than “user to website owner”, that doesn’t have to be true. Forums are an excellent way of communicating directly with your users. They are particularly good on a site where the enquiries are not confidential in nature and where you are getting the same enquiry again and again. A typical example of this is a support forum. By answering a support question publicly you avoid having to answer the same question multiple times and empower users to find their answers quicker without having to wait for your response.

Obviously, this approach wouldn’t be appropriate for sales enquiries and it still can suffer from spam however in certain circumstances forums can be very powerful.

Comments

Comments are a growing feedback mechanism, made popular by the growth of blogging. In many ways they provide similar benefits to a forum however they are slightly more limiting. On a forum a user can start a new thread dedicated to any subject they choose. When posting a comment it is normally attached to an existing web page on a specific topic. Although this is restrictive it can be appropriate if you are looking for feedback on a specific issue and want to avoid too much secondary discussion.

Ratings and reviews

Ratings and reviews can work particularly well when you are looking for feedback on a product line or article. Although ratings provide only limited feedback (a score) this also means that it is very easy for a user to participate. The ease of contribution makes it more likely a user will feedback than otherwise would have been the case. This approach works well when a website owner wants feedback on a specific web page. Having questions like “did this page answer your question. Yes or No?” is much more likely to get a response than an open comments box.

Live chat

More and more sites are introducing “live chat” facilities. To be honest I have mixed feelings about live chat. On the right site I am convinced it can be a powerful tool, however it can also create usability and accessibility problems. The best use of live chat I have seen is for answering support queries. They allow users to get instant answers without having to pay international phone call rates to contact foreign websites. They also allow website owner to handle a greater number of simultaneous enquiries than would be possible on a phone call. However live chat can be intrusive when the website owner initiates the conversation and on smaller sites the demands of having somebody available to answer queries can be prohibitive.

Of course, unlike every other method mentioned so far, live chat doesn’t seem to attract spam and so in that regards it is appealing.

Instant messaging

A cheaper and easier to implement alternative to live chat is simply to publish an instant messaging address on your site. Of course this does require your visitors to have an instant messaging client installed but that is less of an issue these days. Although instant messaging is a nice extra to have, I don’t think it will ever be more than an alternative for people who particularly like to communicate that way.

Offline mechanisms

It is easy to forget offline mechanisms of communication such as telephone and post. In fact it is surprising just how many organisations fail to include their telephone number and postal address on their sites.

Different mediums are good for different things and although a website can be an amazing tool there are some times when you just want to pick up the phone and talk to somebody. If you fail to put traditional contact information on your site then you do it at your own peril.

Dealing with feedback

Although the different communication methods are interesting, I guess the real question is how do you deal with enquiries when they come in (from whatever source). It is in this area that my own site currently fails and that is what got me thinking about how we approach the problem with our clients. This is the advice we normally give:

Feedback manager

One of the biggest problems I encounter when it comes to handling enquiries is that nobody sees it as there responsibility. Probably the best thing that can be done to improve how feedback is handled, is to ensure that there is at least one person in the organisation that has a clearly defined responsibility to respond to these correspondence.

Depending on the size of the website and the structure of your organisation, this may need to be multiple individuals, but the key is to ensure that these individuals are in no doubt about what is required from them.

Collection mechanisms

As I have learnt from personal experience over the last week the way that feedback is collected and processed is crucial. When somebody completes an online form where does it go? What happens if the person collecting those emails is away? How do you make sure that email is not lost in transit? How do you ensure the feedback has been responded to?

I remember working on a classic example of a bad collection mechanism a few years back. We were working for a travel company would created personalized quotes based on a form completed via their website. The problem was that enquiry form was sent as an email to a public folder in outlook. Sales staff would check that folder periodically and respond to any outstanding emails.

The whole process was incredibly painful. The folder wasn’t checked regularly enough and sales people would cherry pick the best leads leaving many emails unanswered in the hope that some other “sap” would deal with them. Emails would be responded to multiple times in some cases while others were simply lost in the scramble.

Eventually we built them a backend system that allowed administrators to assign enquiries and track their progress through the system, as well as provide reporting on response times and conversion.

Having a clearly defined and efficient mechanism for dealing with feedback from your site ensures that nothing slips through the cracks.

Speed of response

Ensuring that you respond quickly to enquiries is one of the best ways of differentiating yourself from your competition. One of the most common ways of achieving this is with an automated response as soon as a form is completed or an email sent. Although these kind of responses do provide some value as they let the user know the enquiry has been received, they do nothing to improve the users perception of your service. Automated response are impersonal and are the email equivalent of an automated telephone system saying that “your call is important to us”.

In my opinion nothing is better than a quick personal email thanking somebody for their enquiry and promising a more detailed response as soon as possible. Of course this isn’t always possible if you are dealing with a large number of enquiries, but for most businesses this is more than achievable.

Tracking feedback history

There is nothing more annoying than having to repeat yourself and with electronic communication at least, there should be no need to do so. Make sure that whatever system you use to track feedback also has the ability to archive and retrieve previous correspondence so that you don’t need to ask the user to cover old ground.

Personally I am a fan of customer management systems that allow for the tracks of all correspondence with a client whatever method is used. There are loads of greats systems around with something appropriate for your business, whatever its size.

Choosing a response mechanism

Finally I wanted to mention the mechanism by which we choose to respond to an enquiry. I recently listens to an interview with the authors of “Send: The How, Why, When – and When Not – of Email” who talked about the importance of knowing which medium to use in communications. The temptation is to respond in the medium with which you were originally contacted. For example, if somebody sends you an email you should respond with email. However, depending on the nature of the enquiry and the dialogue you need with the enquirer, it might be better to pick up the phone, instant message them or even use good old snail mail.

As with so much in life, always pick the right tool for the job.

Advice for CMS users

Posted in Accessibility, Site content on by Paul Boag

I have been putting together a document for work that provides some basic advice for people who work with content management systems. It covers things like accessibility and writing for the web.

Introduction

Although content management systems enable anybody to publish content to the web, they do not guarantee the quality of what is published. Many content managed websites are hard to use, inaccessible and poorly structured not because of any failure in the design or technology but simply because the quality of content is poor.

This document aims to introduce the reader to good practice for generating web content. In particular it focuses on advice about writing for the web and ensuring that what is produced is accessible to the widest audience possible.

Writing for the web

Writing great web content is a particular skill. Although it shares some characteristics with writing for other medium, there are many unique elements too.

Two traits make writing for the web, particularly challenging. Firstly is the perception that most people have that computers are being cold and impersonal. Many see technology as the enemy and so a good copywriter has to work hard to ensure their copy has a friendly and approachable tone.

Second is the fact that users rarely read pages in their entirety, but rather scan read. The emphasis is on looking for the next link that will take them one step closer to their goal.

Below we investigate these two challenges in more depth and suggest some possible solutions.

Writing style

Well-written copy should be both engaging and accessible. In other words it should overcome people’s inherent suspicion of technology and ensure that, as wide an audience as possible understand what is written.

Engaging with the user

Computers are immensely unfriendly. This is mainly due to their total inability to interpret or communicate the more subtle forms of human communication such as body language and tone of voice.

The result is that most people find interacting with a computer a cold and frustrating experience. However, there are techniques you can use to avoid the problem. These include:

Using a personal tone

By ensuring that your copy is friendly, informal and approachable, you help to counteract the inherent lack of personality associated with computers and the web. Even on a relatively formal site add more informality than you normally would in order to offset the users default perception.

Writing how you speak

If you are experienced in writing more formal offline documentation, writing in a more informal manner can be difficult. Although there is no one catchall solution to this, writing as you speak will certainly aid comprehension and generate a more informal feel.

Avoid being patronizing

The danger of writing in a more informal tone is that you overcompensate and your writing style becomes ‘chummy’ and patronizing. The writing as you speak rule comes in useful here. Picture your audience and ask yourself whether you would speak to them like that in a face-to-face meeting.

Making your copy clear

The W3C accessibility guidelines clearly state:

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

In other words ensure that your reader can understand what you have written.

Many people make huge assumptions about what their audience understands and careful consideration needs to be put into this subject. Particular assumptions are made in regards to:

Jargon

A common pitfall is the use of abbreviations and acronyms within web copy. The assumption is that your target audience will already be aware of the jargon used. However, this is an entirely false assumption.

You cannot always assume that your audience will be aware of every acronym around. For example there are so many acronyms within web design that it would be impossible for one individual to know them all.

Secondly, the reader maybe relative new to your target audience and so still learning much of the ‘lingo’.

When writing copy ensure that whenever possible jargon is avoided and where that is not possible that it is accompanied by an explanation. We discuss acronyms and abbreviations further in the accessibility section.

Reading level

There are reasons why tabloid newspapers like the Sun sell so well. One of those reasons is because they require such a low reading level. As many as 40% of the population have a low literacy level and yet little consideration is given to their accessibility needs.

Even when writing for a well-educated audience you cannot make assumptions about their reading level. Many people suffer from attention deficit disorder, dyslexia or other conditions that could affect their ability to process what you have written.

Below is some advice on how you might go about improving comprehension of your copy:

  • Simplify punctuation – People suffering from a low literacy levels struggle with long sentences that include a lot of complex punctuation. Keep your sentences short and your punctuation simple.
  • Be consistent – There is often a desire when writing copy to vary your language to prevent a document appearing repetitive. Although this has its place it does make copy harder to comprehend. Where possible, use terms in a consistent manner across the whole site.
  • Use numbers not words – By simply referring to 1223 instead of ‘one thousand two hundred and twenty three’ you increase comprehension dramatically as well as shorten sentences and aid scanability.
  • Specify clear actions – If you wish a user to complete an action (for example to click on a button) clearly specify this. Do not assume the user will instinctively understand what is required of them.
  • Use imagery – The saying ‘an image speaks a thousand words’ is very true for low literacy users. If an image will help to convey the meaning of a page be sure to use it to support existing copy.

Although the techniques above are of particular benefit to low literacy users, they do actually offer benefits to all users. Ease to comprehend copy aids the speed at which information can be digested and helps users scan copy as we are going to look at next.

Making web pages easy to scan

It can be a depressing realization that users will probably not read your carefully crafted text. However, the sooner you accept this reality the sooner you can start to adapt copy to aid users in their hunt for information.

There are a number of techniques that can be used to help a user quickly scan through a page and identify the information they require:

Front loading

Front loading applies in two different contexts. Firstly, front-load the page by including a summary of the entire page right at the beginning of the document. This helps the user ascertain quickly whether the page is relevant to them or not. Secondly, front-load each individual paragraph so that the main point is first. Ideally a paragraph should only make a single point (see 2.2.2) but if it is longer then the user can get the gist by reading the first sentence.

Keep it short

Usability expert, Steve Krug recommends in his book “Don’t Make Me Think!: A Common Sense Approach to Web Usability” that a copywriter should take his copy, edit it down to half its original length and then half it again. This sounds like an impossible task but it is often easier than it appears. By removing repetition, marketing speak, and ‘happy talk’ (content with no real substance like ‘welcome to this site’) you will quickly find your content substantially reduced.

Keep paragraphs short

As well as keeping the page as a whole sort, you should ensure individual paragraphs are short too. Each paragraph should make a single point as this aids both user scanning and comprehension.

 

Keep sentences short

 

At a micro level you should also endeavor to keep each individual sentence as short as possible. Again this aids scanability and comprehension but also helps to remove any unnecessary ‘waffle’.

Break your copy up

As well as breaking up copy into short sentences and paragraphs you can also aid scanability by using other techniques as well. Look at each paragraph and ask yourself the following:

  • Can I associate a heading or sub heading with this block of text?
  • Could this paragraph be reduced to an easy to scan bullet point list?
  • Is there a key message in this paragraph that users need to instantly see?

If the answer to the last question is yes, then you might wish to use a breakout box (also known as a pull out). This is a technique originally introduced in magazines to ‘hook the user’. They would take a key line from an article and highlight it in someway (usually in a separate box) to draw the reader into reading the rest of the article. The same technique can be used on a web page to draw a users attention to a key point that they maybe searching for.

Many good content management systems (including Headscape’s own CMS) provide this functionality.

Accessibility

We have already touched on the importance of accessibility when talking about writing clear copy, however accessibility extends beyond simply the copy you write.

As a content management system user, you are required to go beyond just writing the copy. You are also required to enter the copy into the system so that it can be displayed on the site. This requires you to ‘markup’ your copy correctly.

The importance of markup

So what exactly is markup? Markup is the method by which you tell the browser what the content you are entering is, so that the browser knows how to display it to the user. This markup is usually written as HTML.

So, if for example you want to tell the browser that something is a heading you would mark it up like this:

<h1>This is a heading</h1>

or a paragraph would be marked up like this:

<p>This is a paragraph of text</p>

Of course, one of the main attractions of most content management systems is that you don’t have to know how to write HTML. Instead the content management system will add the code for you.

Historically content management systems didn’t even try to understand what any individual piece of content was. Instead they let you as the content management user, style the content to look however you wanted. So instead of telling the system that this is a heading you simply made it look big and bold so users of the site would know.

Although this sounds like a good approach in principle, it actually opens up a whole load of problems that are too extensive to cover here.

More modern content management systems, such as the ones deployed by Headscape, ask the user to explain what each piece of content is so that the system can add the proper HTML code.

The way the content management user does this is normally through a drop down menu of styles much like you find in Microsoft word. You simply select a block of text and choose the style which best describes that text.

Marking up content in this way brings a whole host of advantages including (but not limited to):

  • The ability to redesign how an individual style looks universally across the entire site without editing each page.
  • The ability to change the appearance of styles based on what device is accessing the content (for example a mobile device style).
  • The ability for screen readers and other assistive technologies to understand the site.

In short, a well marked up piece of content will be available to a much larger audience and is easier to change and adapt.

Text alternatives

Well marked up content is not the only way to improve the accessibility of your site. Another is to provide text alternatives for elements that some users will not be able to access.

The most common example of this is with the inclusion of images into your pages.

There are a number of reasons why a user may not be able to see the images on a page. These could range from viewing the page via a mobile device to the user suffering from some form of visual impairment. However, whatever the reason the solution is the same; add alternative text that describes the image.

Alternative text is only visible to users who cannot see the image and so does not impact the design in anyway. The method of adding alternative text will vary between content management systems but in most cases (including on the Headscape system) you will be asked to add some text when you try and insert an image. A good system will go as far as requiring alternative text before approving an image for insertion.

A common mistake that is made with alternative text is to use it as a caption for the image rather than a description of the image. The difference is subtle but important. An image of Marcus Lillington our sales director might read ‘Marcus Lillington is more than happy to speak to you about your requirements’. This would be a caption rather than alternative text. Alternative text should describe the image and nothing more. So in the case of our example it should read simply; ‘Photograph of Marcus Lillington – sales director’.

Finally it is worth saying that the principle of alternative text does not apply just to images. It should apply to any screen element that can only be understood visually. That includes Flash, video, audio or other plugin.

Meaningful links

Another common accessibility mistake is with link text. When a content management user creates a link between pages it is not uncommon to see links with phrases like ‘click here’ or ‘read more’. This presents a problem for two reasons:

Firstly, users who access the web using screen readers often have all links on a page read back as a list in order to save listening to every piece of text when all they want to do is find the next link. A link like ‘click here’ means nothing when read out of context.

Secondly, many users will scan a page looking specifically at the links. They don’t read the text before or after the link so again they see it out of context. The result is that, like screen reader users, terms like ‘read more’ mean nothing.

This problem is easily avoided by ensuring that all links make sense out of context. So instead of linking the words ‘click here’ in the sentence ‘click here for more news’ you simply link to the phase ‘more news’ or ‘news archive’.

Acronyms and abbreviations

Earlier we talked about how where possible jargon, acronyms and abbreviations should be avoided. However there are occasions where that is not possible.

In such situations your choices are very much dictated by the functionality provided by the CMS you are using. Unfortunately, many content management systems are not particularly helpful in this regard and you maybe limited to typing out a description in brackets each time.

However, more modern content management systems such as that provided by Headscape, allow you to select an abbreviation style. You can then enter the full description and this becomes available to the user without destroying the flow of your text.

This is achieved in a variety of ways but the most common is using a dotted underline. If a piece of text has been marked up as an acronym or abbreviation it will appear to the end user as text with a dotted underline. When the user moves her cursor over the text the cursor changes to a help symbol and displays the full description as a tooltip.

This provides a full description to users encountering a piece of jargon for the first time, without getting in the way of those who already know what it means.

Using tables correctly

Web design has changed a lot over the last few years and so have content management systems. One of the most significant changes has been a move away from table-based layout.

Table-based layout is a technique that uses tables to position content on a page. However this is an abuse of the table feature in HTML and can cause significant accessibility problems especially for users running on older PCs or using mobile devices.

We therefore strongly recommend that using tables for layout is avoided at all costs. Instead clearly markup the content using the descriptive styles provided. The system will do the formatting and positioning.

That said there is still a place for tables. Tables were originally intended for tabular data (data made up of columns and rows, like that found in a spreadsheet). If you have information like this you wish to include on a page, then this is when you should use a table.

Working with imagery

Although we have already spoken about imagery in the context of alternative text it is worth noting that there are other accessibility issues relating to imagery you should be aware of:

Animation

Animation can be a problem area if not handled correctly, so generally speaking it is better to avoid the use of animated imagery unless it helps explain the content in someway.

The main reason that animation can be problematic is because certain forms of cognitive disability can be made worse by flashing animation. It can prove distracting and make it harder to process the content being read.

If animation is to be used we recommend:

  • That the user is given the ability to disable the animation
  • That the animation is not too rapid so that it proves less distracting
Colour

Finally, it is worth noting that a considerable proportion of your users will suffer from some form of colour blindness. For example almost 1 in 10 men are colour blind. In addition it is possible that other users will be accessing your site through black and white monitors on mobile devices. It is therefore important to ensure that any imagery you use is not reliant on colour to communicate information and that there is sufficient contrast between foreground and background colours.

These two issues are addressed in the W3C guidelines on accessibility:

2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.

2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Further information

Hopefully this document has been useful in outlining some of the basics of writing content for a website. However, we have obviously only been able to scratch the surface.

If you would like further information, please do not hesitate to contact Paul Boag (the author of this document) using [email protected].

Show 74: Marcus 2.0

Posted in Classic shows on by Paul Boag

This week: Is scrolling a bad thing, using frameworks to speed development, encouraging goodwill among your visitors and Marcus 2.0.

Play

Podcast: Download (20.6MB)

Download this show.

First of all let me apologize for the somewhat sparse show notes this week. Things are particularly manic at the moment and so I don’t have the time. If somebody fancies doing a better job then email me with a better version and I’ll upload them here.

News and events

Google My Maps

Google deliver a body blow to the various Google Map mashups that help you plot your own points by releasing My Maps onto the world. Now if you want to build your own Google map you can do so simply by clicking on the My Maps link on the Google Maps homepage. You can then save the maps, email them or link to them from your site. However if you want to directly embed a map into your site then you will still need a third party service. Personally I recommend Map Builder.

What it takes to be a great web designer

I was relieved to discover this week that I don’t need to talented be a great web designer. An article on boxesandarrows points out that skills such as working quickly and attention to detail are just as important.

Setting up a web design business

Rich Quick (author of the Web Design Book), has posted an excellent article on how to go about setting up a web design business. Although not very detailed and specific to the UK it does provide an excellent starting point for anybody considering going freelance.

Machine Tagging

Machine tagging seems to be what all the cool kids are doing these days. Jeremy Keith talks about some of the ways he and Rich Rutter are using machine tags to enhance their websites. He is also kind enough to explain what the hell machine tags are!

Client corner: Generating goodwill

I have just got my new copy of Steve Krug’s book “Don’t make me think”. This updated version has loads of extra content including a chapter dedicated to creating brand goodwill using your website. In this week’s client corner we look at what Steve covers in this chapter and exactly how you can improve or damage peoples perception of your brand via your website.

Ask an expert: Server side frameworks

On this week’s ask an expert section, I ask Jonathan Snook about how frameworks can speed up the development process of server side applications. He talks about what frameworks are, their benefits and drawbacks and which framework is best.

Agony Uncle: Is scrolling bad?

I spotted an interesting post by Ronald on the boagworld forum asking whether scrolling is bad or not. In this week’s segment I attempt to expose some of the myths surrounding scrolling, why historically it has been perceived as an issue and what rules of thumb to use when working with scrolling.

Review: Adding RSS to your website

Its not uncommon to want to add an RSS feed onto your website. You might want to include your twitter posts on your blog or news stories on your corporate website. Whatever the reason it can be a pain to set up. One option to avoid this hassle is to use a service like Feed Digest. Not only does Feed Digest allow you to post RSS content to your site, it also allows you to work with multiple feeds, edit the format of the output and filter the content from the various feeds.

Again let me apologize for the lack of detail in the show notes this week. However, for those of you who cannot listen to the show you might want to view the script that I work from (PDF: 82kb).

Show 65: Dying (Man Flu!)

Posted in Classic shows on by Paul Boag

This week on the Boagworld Podcast, Paul and Marcus drag themselves from their death beds to share why you should care about Vista and Drew McLellan explains the pros and cons of Ruby on Rails.

Play

Podcast: Download (21.1MB)

This week on the Boagworld Podcast, Paul and Marcus drag themselves from their death beds to share why you should care about Vista, which browsers you should support and introduce you to the exciting world of terms and conditions. Oh yes and Drew McLellan explains the pros and cons of Ruby on Rails.

Download this show.

To subscribe directly within itunes click here

News and events

Barcamp

The weekend of the 17th of February sees the second barcamp to take place in London. If you haven’t come across barcamp, it is a gathering of web geeks where everybody takes turns to present a 30 minute session. You can pick which sessions you wish to attend and the whole thing has a very informal feel. Its free and arguably one of the most valuable meetups of the year.

Paper prototyping

There is an excellent new article on the List Apart website. It proposes closing down your PC and returning to good old pen and paper. Compelling stuff, which should make you evaluate the way you develop your designs.

Bulletproof AJAX

Jeremy Keith is about to release the follow up to DOM Scripting, Bulletproof AJAX. As with his previous book Bulletproof AJAX is aimed squarely at the designer community. It will be perfect for people who have read DOM Scripting and want to take the next step. If you can’t wait that long and can squeeze £295 out of your boss then you might want to attend Jeremy’s AJAX workshop down in Brighton. I have attended it myself and it is extremely good.

Custom reading containers

This is an incredible proof of concept that I was emailed last week. Basically it enables the user to resize elements of your web page to suit their requirements. Admittedly it has only undergone limited testing so far and relies on PHP; nevertheless it looks very interesting indeed.

Client corner: Terms and conditions

This week Marcus starts a new series on client contrasts with a “fascinating” look at terms and conditions… I know… control your excitement! Some of the points he covers include:

  • Make sure you read the T&Cs carefully no matter how boring they are!
  • Get advice if you don’t understand something
  • Make sure you note the governing laws that cover the T&Cs
  • Note the deliverables and rights
  • Understand your liability if there are problems

Agony Uncle: Browser support

Danny has sent in an excellent question about how far we should go in supporting the numerous browsers out there. Should we support IE5, Opera mobile, Opera on the Wii and so on? In the show I talk about the need to not set hard and fast rules in this area but adapt to the individual requirements of our clients. I talk about not blindly accepting the browser support requested by the client but rather analysing statistics to establish the best browser set to build for. Finally I also explain the concept of graded browser support as implemented by larger organisations like Yahoo!

Ask the expert: Ruby on Rails

Talking of Yahoo, this week our expert is Drew McLellan who works in their development team. He is on the show discussing the pros and cons of working with frameworks like Ruby on Rails.  Among other things he looks at speed of development vs. maintenance and generally gives a nice overview on the subject. He certainly helped me have a clearer understanding of the benefits and drawbacks.

Review: Vista

So Vista has hit the shelves and being the uber geek that I am I couldn’t resist upgrading as soon as I got my hands on the disk. I know there are loads of reviews on Vista but I thought it was worth reviewing specifically from a web designer’s perspective. I talk about the problems I had installing Photoshop, the improved FTP support and the multiple website support now in IIS. I also look at how Vista could potentially change the way people interact with the web by bringing things like desktop widgets and RSS feeds to the masses.

Web standards War – Watch our language

Posted in News on by Paul Boag

The war is over! …… Or is it?

The thing that disturbed me most at this year’s @media conference was the final panel in which it was announced that the “web standards war was won”. I remember saying at the time that this was far from my experience and so was particularly encouraged to read a recent Think Vitamin post.

If we want to seriously increase the take up of standards based design we need to simplify our language and make sure the underlying concepts are accessible to all.

One of my unofficial aims for this podcast and blog has always been to explain the benefits of standards based design. I passionately believe that using CSS for layout, semantic XHTML for content and Javascript for behaviour benefits everybody. Website owners have a site that is easier to update, can adapt to multiple devices and is more search engine friendly. Designers and developers find maintenance a much more pleasurable experience, changes less painful and large builds much quicker.

The idea that web standards were now the norm really shocked me. Certainly, that has not been my experience and I still receive regular emails explaining how my podcast is encouraging people to adopt standards. How could that be the case if everybody is already using them? Here is just one example of an email I have received this week:

I know CSS has been around for quite a few years already – but the whole "web standards" bit is new to a lot of people. My point is basically that you and your podcasts are helping to educate the public and web designers about the importance of web standards in web design.

I think the comment at @media demonstrated an underlying problem. The web design community has fractured. I believe there are two tiers; the “elite” that read the right blogs, attend the right conferences and own the right books. Then there are the rest, those that don’t have the time or money to keep on top of every new trend. So often, the former look down on the latter (something I have written about before) and condemn them for bad practice. However, in many cases they are just struggling to get by and need our encouragement not condemnation. As long as clients are willing to pay for old table based sites, then these designers don’t have the business justification for getting their skills up to speed.

I guess that leads nicely on to the other group that still needs a lot of convincing… the clients. To say the web standards debate has been won among this group is absurd. Most are totally unaware of good practice in development. As long as the site looks okay in their browser then they are happy. We need to continually educate our clients (and prospects) of the need to build, standards based sites.

Spread the word

The think Vitamin article encourages us to spread the word and makes a few suggestions about how we can do that. However, I believe the primary method was missing; we need to change our language. I have been interviewing a number of people recently for the show and have noticed one reoccurring problem; they cannot help but use jargon. In many cases the people I interviewed were unable to get through a conversation without talking about “web standards”, “web 2.0”, “progressive enhancement”, “web services”, “frameworks”… the list could go on. Even though I always explain that my podcast is aimed at a mass audience, they cannot help themselves. We need to learn to stop talking techie! For the majority of web designers out there, these phrases mean nothing. If designers and developers don’t understand them, then how are clients ever going to grasp the concept.

The boagworld.com podcast is often criticised for its lack of technical detail and for “dumming down”. I am often forced to over simplify a concept in order to make it accessible to the audience I am trying to reach. Now although this sometimes makes me less than accurate I believe that this is preferable to using jargon that nobody is going to understand.

If we want to seriously increase the take up of standards based design we need to simplify our language and make sure the underlying concepts are accessible to all.

Why IE doesn't play nicely

Posted in Development on by Paul Boag

As all web designers know, Internet Explorer is the thorn in our collective flesh. Even with the dramatic improvements in IE7, it still finds ways to annoy. However, the nice chaps at Microsoft have gone some way to soothing our fevered brows.

Update: Thanks to all of you who pointed out that VMWare actually made their virtual PC free before Microsoft and Microsoft are just following suit. Kind of takes the edge off of my somewhat limited enthusiasm for the move!

I have to confess I am generally a bit of a Microsoft groupie. Unlike most designers, I don’t hate windows. In fact, I positively love the new version of Office and think Microsoft has improved a lot as a company recently. However, Internet Explorer still manages to extract swear words from me that would make my mother blush.

So if you are a web designer or web site owner looking to test your site on multiple versions of Internet explorer then head on over to the Microsoft Virtual PC website and download yourself a copy for free!

I can live with the CSS bugs thanks to conditional comments. I can even live with the fact that IE doesn’t support any of the cool stuff in CSS. I console myself with the fact that IE7 is so much better. Although even here my patience is tested, as the third Beta seems to reduce my PC to the speed of a ZX spectrum (am I the only one with this problem?).

No, what really gets to me is that you cannot run multiple versions of Internet Explorer together on the same machine. It sucks! I listened to Chris Wilson (lead developer on IE7) try to justify this travesty at the @media conference, but he did little to calm my hysteria. Although the reasons are all very logical, it does nothing to change the fact that I have to battle with this problem every day.

Sure, there are solutions of a sort:

I can download the hacked standalone versions of IE, cobbled together by other frustrated developers. However, although these are valiant endeavours, their consistency with the real version of IE is spotty to say the least.

Alternatively, I could pay shed loads of cash and buy something like VMWare, which allows me to run multiple "virtual" versions of an operating system within windows.

However at last Microsoft has shouldered some of its responsibility and made their version of VMWare (a product called Microsoft Virtual PC) free.

So if you are a web designer or web site owner looking to test your site on multiple versions of Internet explorer then head on over to the Microsoft Virtual PC website and download yourself a copy for free! Obviously, having to install multiple versions of Windows isn’t an ideal solution but at least it works and with Virtual PC it is about as painless as possible to do.

Investing in your staff

Posted in Web strategy on by Paul Boag

Commercial web design is barely a decade old. The entire industry is evolving at a tremendous pace with both technology and methodology changing daily.

Unsurprisingly my last post generated a huge amount of feedback. By far the majority focused on the learning curve involved in adopting web standards. Many complained they simply didn’t have the time to “get up to speed”. The following is directed at those who employ web developers/designers…

The cost of training

As an employer myself, I know that the word “training” can make your wallet scream in pain. If you are a small business, the thought of staff taking time out to get trained up can be scary. There is the cost of the training itself, the travelling expenses, the cost associated with adopting what has been learnt and the time away from paid projects. All in all, it is easier and safer to go with “on the job training” which equates to no training at all!

You may also find the constant demands from web designers for training (or simply time to learn) rather unreasonable. After all, nobody else seems to require so much time to sit around doing nothing! In short, training can often be hard to justify.

A unique position

Although I can feel your pain, it is important to release what a unique position most web designers and developers are in. While many other professions have existed for hundreds of years, commercial web design is barely a decade old. The entire industry is evolving at a tremendous pace with both technology and methodology changing daily. I once heard it estimated that the average web designer has to relearn his skill-set every 18 months. Although I believe this is somewhat of an exaggeration it isn’t far off. With things moving so fast, having time to keep up with the latest developments is essential to your web site’s success.

For in-house designers too

You might think this is all well and good for a professional web design agency. After all, they need to be on the cutting edge of their industry. However, your company might just employee a couple of in-house designers to keep your own website in order. Surely, there is not as big a need for training in that situation? Unfortunately, this is simply not the case. There are no guarantees that your competition are not using an external web design house and so your internally produced website still has to compete with “cutting edge” design agencies. In addition, as I have said before, it is important that your site evolve with the rest marketplace otherwise, it will quickly appear out of date. Unfortunately, the web is very like the fashion industry. A nineties style website looks much like eighties style fashion… horribly dated! Users are constantly demanding more and more from websites and if your staff aren’t up to date with the latest developments they are going to struggle to deliver.

The good news

However, it’s not all doom, gloom, and expenses! Although there are a growing number of training courses available on various aspects of emerging web technology, they are not the only way to get your developers up to speed. The most cost effective thing you can do is allocate them time each week for “self learning”. The web is crammed with valuable resources to help people learn about things like Unobtrusive JavaScript and web standards. All you need to do is set aside some time for them away from their normal workload. Admittedly, this has some productivity implications but these will be quickly outweighed by the productivity gains provided by these emerging methodologies.

All your developers need is a few hours each week to work on their own projects. Google has adopted this approach with incredible results. No travel expenses, no training courses, just a few hours a week. You can’t say fairer than that!

Advice & Predications for 2006

Posted in News on by Paul Boag

Here is what I think web site owners should keep an eye on in 2006.

This time of year sees a wealth of predictions for the coming year. Andy Budd and Cameron Moll have both given some interesting predications for you developers and designers. Not wanting to be left out here is what I think web site owners should keep an eye on in 2006.

Adoption of web standards

In 2006, you will almost certainly see more and more of your competitors adopting web standards. This will provide them with a raft of benefits including faster download times and improved search engine placement. However, probably most disturbingly, it allows them to make quick global changes to their site, so ensuring they are considerably more responsive to consumer trends. If you have implemented standards already, you will find the competitive advantage it gives you waning as more of your competition adopts it. If you are yet to redevelop with standards, you will find yourself getting left behind very quickly indeed.

Accessibility demands

I believe that 2006 may also bring some prominent prosecutions of sites that are inaccessible (in the UK at least). These test cases will raise the profile of web accessibility and put it firmly on everybody’s agenda. I believe that the disabled community will become much more aware of their rights in this area and I would expect web site owners to see an increasing number of complaints on this subject.

One word of warning. Rumours abound that pressure groups such as the RNIB are considering prosecuting smaller sites too as these cases are easier to win and will undermine the lethargy that smaller business owners have to the subject of accessibility.

Runaway technology

2006 will see a lot of emerging technologies hitting the mainstream (such as web 2.0 and AJAX) and web site owners will be barraged by lots of new technobabble from web designers. There is a danger that the enthusiasm of the development community will sweep you along but I encourage you to think long and hard about the benefits these new technologies bring before you add them to your site. Ultimately, it is down to you, to keep your eye on the bottom line. Return on investment has to be the watchword of the day.

Web feeds

Predications for the coming year are often a hit and miss affair. However, I can say without a shadow of a doubt that 2006 is the year web feeds (RSS) become seriously mainstream. Sure, 27% of web users already use web feeds but only 4% of users knowingly do so. 2006 will see that 4% dramatically grow and users become a lot more sophisticated in the use of feeds. Why am I so confident? Because 2006 will see the launch of IE 7, Office 12 and Microsoft Vista. Microsoft have made it clear that all three of these products will include a large amount of web feed integration and Bill Gates has been pushing the concept of web feeds very strongly.

This means that you need to be adding RSS to your site if you have not already done so. Of course that in turn also means you need to have regularly updated content such as news, a blog or events. I know that this sounds like a lot of work but I think you will find that the benefits are considerable.

Beyond your website

Finally, I believe that 2006 will be the year that you start to think beyond your website to other internet based marketing tools. What do I mean by that? Well, at the moment most marketers see their website as their primary online marketing tool. Sure, they might also use banner advertising, PPC, email marketing etc. However, ultimately, all of these are about driving more users to your website.

2006 will see the continued growth of broadband with ever more homes connected and greater speeds becoming available. I believe this will lead to a break through in internet TV and podcasting. To be honest we were already beginning to see this towards the end of 2005 with traditional news networks such as the BBC doing an increasing number of stories on podcasting.

These emerging delivery mechanisms are not reliant on your website but operate as marketing channel in their own right. Let’s say that you are selling widgets to a very specific market segment. Imagine being able to produce your own TV series or downloadable radio show aimed specifically at that market segment! The opportunities in this field are immense however; it takes time for the applications of these delivery mechanisms to become obvious. No doubt you are reading this thinking, I am not sure that this can apply to me. If that is the case I would encourage you not to dismiss it prematurely. Podcasting and Internet TV offer some interesting opportunities to expand your reach and should not be ignored lightly.

So, these are my predication for web site owners in 2006. What do you think? What will be the big issues of the coming year?

Semantic code: What? Why? How?

Posted in Development on by Paul Boag

Web designers like to throw around a lot of jargon. With that in mind, I want to focus on the more popular techno babble and try to dispel some of the mystery. First up: semantic code.

What is semantic code?

Even if you are not a web designer, you are probably aware that your site has been written in HTML. HTML was originally intended as a means of describing the content of a document, not as a means to make it appear visually pleasing. Semantic code returns to this original concept and encourages web designers to write code that describes the content rather than how that content should look. For example, the title of a page could be coded like this:

<font size="6"><b>This is the page title</b></font>

This would make the title large and bold giving it the appearance of a page title, but there is nothing that describes it as a title in the code. This means a computer is unable to identify this as being the page title.

To write the same title semantically so that a computer understands that this is a title, you would use the following code:

<h1>This is a heading</h1>

The appearance of your heading can then be defined in a separate file called a "cascading style sheet" without interfering with your descriptive (semantic) HTML code.

Why is semantic code important?

I have already hinted at one reason why semantic code is important when I said that without explaining what a piece of content is, a computer has no way of identifying it. The ability for a computer to be able to understand your content is important for a number of reasons:

  • Many visually impaired people rely on speech browsers to read pages back to them. These programs cannot interpret pages very well unless they are clearly explained. In other words semantic code aids accessibility
  • Search engines need to understand what your content is about in order to rank you properly on search engines. Semantic code tends to improve your placement on search engines, as it is easier for the "search engine spiders" to understand.

However, semantic code has other benefits too:

  • As you can see from the example above, semantic code is shorter and so downloads faster.
  • Semantic code makes site updates easier because you can apply design style to headings across an entire site instead of on a per page basis.
  • Semantic code is easier for people to understand too so if a new web designer picks up the code they can learn it much faster.
  • Because semantic code does not contain design elements it is possible to change the look and feel of your site without recoding all of the HTML.
  • Once again, because design is held separately from your content, semantic code allows anybody to add or edit pages without having to have a good eye for design. You simply describe the content and the cascading style sheet defines what that content looks like.

How to ensure a site uses semantic code?

There is no tool that can check for semantic code. It is a matter of looking at the code and seeing if it refers to colours, fonts or layout instead of describing what the content is. If looking at code all sounds a bit too scary then a good place to start is by asking your web designer if he codes semantically. If he looks at you blankly or starts waffling, you can be sure he does not. At that point you need to decide if you wish to pressure him into getting up to speed or if you want to find yourself a new designer!

Web standards explained

Posted in Development on by Paul Boag

Today I have once again been working on the new Headscape site (yes, one day it will be finished I promise). One of things I did was write a brief introduction to web standards and I thought you might want to see what I have written.

For years, web designers have been secretly holding together your site with sticky tape and string. The code that underlay many sites looks like some kind of HTML soup with random nested tables and font tags roaming wild. However, things are changing… there is now a better way to build your web site.

Enter web standards

Web standards are about completely separating content from design. This means that the content on your site is held in the HTML and your design is defined by a special CSS file. This allows the content to be described semantically in the mark-up rather than being cluttered up with design elements.

So this:

<font color="#FF0000" size="6" face="Verdana, Arial, Helvetica, sans-serif"> This is a heading </font>

becomes this:

<h1> This is a heading </h1>

Now isn’t that tidier, at least us geeks think so.

Why should you care?

It is important that your site is built using web standards because it offers you:

  • Better accessibility – Sites built with web standards find it easier to conform to disability legislation
  • Better print facilities – Have a separate print style designed especially for printing. No more badly printed sites! Try printing this page to see what we mean.
  • Backwards compatibility – Web standards ensures that your site will be useable on any browser no matter how old.
  • Delivery to multiple devices – By separating content from design you can deliver your content to a mobile phone or a touch screen kiosk just by changing the design.
  • Increased speed - Web standards produce cleaner code and smaller files. These download quicker increasing the speed of your site.
  • More flexibility - Because design is controlled by a small set of files, it is possible to quickly and easily change the look of your site without a complete rebuild.
  • Improved search engine placement – Search engines do not care about design, they only care about content. By separating the two, it makes it easier for the search engines to understand your site.

Avoid the sticky tape; make sure your web design company builds this way.

Web standards at all costs?

Posted in Web strategy on by Paul Boag

So should you always build sites using web standards? Should tables really only be used for tabular data? Is it CSS at all costs?

I received an email today from a web designer called Keir with a question for the podcast. It is a question I have heard many times before, but because of work I am currently doing for Headscape, I have had to think twice about the answer.

Here is what Keir wrote:

Why would I want to design using CSS considering the amount of work that has to go into building a CSS site that is compatible with all major browsers, using hacks and work arounds when I could build one straight forward design through tables in a fraction of the time that would look practically identical in all browsers (aside from the ease of updating design?)

Actually taking time to think about the answer

Under normal circumstances, I would have just referred Keir to the article I wrote on the benefits of web standards, but today was different. Today I was building a disposable wireframe for usability testing, which for the sake of speed was being produced using tables for layout. Today, I have also been thinking about Headscape’s business strategy and the impact of web standards on some aspects of our productivity.

Not all approaches suit everybody

Sure, web standards have a huge list of benefits but is it always the right solution for every web design agency? Possibly not. Let’s live in the real world here, building table based sites is quicker for small, flat sites that rarely (if ever) change. Okay, you might have headaches later on but for some web design companies that is not an issue. Take for example a small web design company that is building cheap, flat sites for estate agents. Estate agents are not willing to pay more than a few hundred pounds for their site and care little about accessibility, or future proofing. All they care is whether it looks okay in Internet Explorer. Now, the web design company has a choice. They can do one of the following:

  • Explain to the client the benefits of web standards and why they should pay more for their site to be built properly
  • Take the risk of running at a loss and build the site with web standards anyway while still keeping the price low.
  • Churn the site out, tables and all, using a WYSIWYG like Dreamweaver

Commercial reality matters

I am sure some of the web standards evangelist would argue that the web design company should take the first option. I would suggest that in the real world of commercial design this would be a mistake. Not only would they probably loose the work but also even if they did win it I am not convinced that the estate agent would really feel the benefit. After all, will it help to sell more houses? Possibly, but I doubt it would generate a big enough return on investment to justify the extra expenditure.

So what am I saying?

I am not suggesting that if you are a small web design agency (or freelancer) who works on small websites, you should not bother with web standards. What I am saying is that you have to be pragmatic and that you can introduce some elements of web standards while leaving others aside. For example, probably the majority of delays with web standards come from positioning. Having to use floats and absolute/relative positioning can sometimes prove a lot trickier than simply adding the odd table.

Mix and match

Maybe for some it is simply easier to use tables for the basic layout and then use web standards for things like fonts, colours and design details. This does not have to be an either or decision. The transition from odd school design to web standards can be a gradual process and you can judge how far down the web standards root you go on a per project basis. Like all aspects of web design, the use of web standards has to be a compromise and it should be used as and when appropriate. However, remember, you cannot choose when you use web standards if you have never taken the time to learn it. Web standards should be another tool in your tool belt that you choose to use when appropriate.

For more on getting the balance right between business drivers and technical considerations read "the missing pillar of web design"

Photoshop CS2

Posted in Reviews on by Paul Boag

If you are a regular Photoshop user or know somebody who is then it is worth taking a look at this tutorial.

Photoshop CS2 has added a number of new features that has the potential to significantly improve the way you work and speeding up your development time. This excellent tutorial addresses just one of these new features but arguably the most important: smart objects.

Even if you consider yourself a Photoshop expert this is definitely worth viewing.

In-Depth CS2 Smart Object Training

Sample site review

Posted in Web strategy on by Paul Boag

A part of my job at Headscape is to provide site reviews for clients. These range from short overview reports to detailed studies on particular aspects of a site. I recently completed a review for a small ecommerce site called TrapAWasp and felt that it neatly tidied together a number of different issues I had been discussing in this blog. The client has been kind enough to allow me to publish it here so hopefully it will be of some use to others. Please bear in mind that this is only a condensed site overview and doesn’t tackle issues in much depth.

Summary

As with all ecommerce sites there are two key factors that dictate its success or failure. These are the number of visitors that are driven to the site and the number of those visitors who are then converted into customers. It is these two factors that Headscape uses to assess the effectiveness of an ecommerce site.

Without looking at the web logs of a site it is hard to tell just how successful the site is at converting users. However, the initial indications for TrapAWasp are good. The site is generally well designed, has few significant usability problems, and addresses most of the major questions raised by users considering purchasing online.

A more important problem exists with regard to driving traffic to the site in the first place. Although good use is being made of Google Adwords the organic listing on search engines (in particular Google) is very poor. We believe there is significant opportunity here as a cursory analysis of the competition makes us believe it would not take much to push TrapAWasp to the top of Google’s ranking.

Visitor conversion

In many ways TrapAWasp is an example of good design. It is clean, simple and focused on enabling users to complete a purchase in the minimum number of steps. However, as with all sites there is always room for improvement and so below we outline several issues which should be addressed.

Design

The site has a strong visual identity. It is well branded: the site name, use of imagery and introduction leaves the user in no doubt as to what the site is about. However, two issues are of concern and should be addressed.

Screen resolution

28% of users are still viewing their computers at 800×600. Unfortunately TrapAWasp has not been optimised for this resolution and therefore requires limited horizontal scrolling in order to be able to read the product descriptions. This also creates problems with the number of products the user initially sees on page load. At 800×600 it appears TrapAWasp only offers 2 products while at 1024×768 the site offers only 4 products. Although users will scroll they tend to make judgements on whether a site has what they want without scrolling down a page. Jakob Neilsen a leading usability expert suggests that key content and products should be visible without the need for the user to scroll. One possibility would be to move the "view details" link to below the description so compressing the amount of space required for each product. Although this wouldn’t make all of the products visible it would help the situation as well as correcting the visual imbalance of white space next to the last two products.

Click here for more on scrolling and screen resolution

Browser compatibility

Although well over 80% of users’ access the World Wide Web using Internet explorer it is a mistake to ignore other browsers. Due to numerous security scares more and more users are turning to alternative browsers such as Firefox. Firefox has now captured well over 8% of the marketplace and is continuing to grow rapidly. Although not serious, http://www.trapawasp.co.uk/ does have some problems displaying in non-IE browsers. Some examples of the problems encountered include text being rendered with the wrong font and images being incorrectly positioned. Although it could be argued these problems do not affect the usability of the site it can knock consumer confidence leading to the belief that the site is in some way unprofessional.

Usability

Usability is an extremely important area of ecommerce design. If a user finds a site hard to use they will often choose to turn to the competition rather than struggle to overcome the obstacles they are facing. Generally the usability on this site is excellent. However, three issues should be addressed.

Delivery address

One minor but very frustrating issue with the checkout form is the need to enter address information twice. Even if you do not check the box marked "Check if you require goods dispatched to an alternative address" you are still required to enter the delivery address. Small problems like this can prove incredibly frustrating and should be avoided if possible.

Deteracat

Another potential cause of confusion is the sudden appearance of a link back to Deteracat on both the checkout and credit card pages. We have no problem in principle to the advert for Deteracat on the right hand side of these pages as cross selling is a good idea and one that should be encouraged. Our concern rather, revolves around the "continue shopping at Deteracat" button in the main body of the page. This immediately generates doubt in the minds of users at a critical stage in the buying process. The user is left wondering if they have selected the right products or whether they have been transferred to another site. We understand the motivation for this approach and the ability it gives the user to purchase products from both sites at the same time however we believe that the confusion this causes outweighs the benefits.

Addressing user concerns

One final issue with regard to usability is the "how to buy" section. It is good practice to have a section that addresses many of the frequently asked questions users have regarding online purchases, but we feel that there is still room for improvement. More information needs to be provided within this section with regard to security. Users are hesitant to give credit card and personal details unless they know it is secure. Although you do provide this information on the credit card page this is late on in the process and after the user has already given you significant amounts of information. On a similar vein it would also be wise to provide some form of privacy statement here. Again we are aware that this information is available from the footer but we do not believe this gives the information the prominence it deserves. Finally we believe that the how to buy section should include information on delivery times as this is another common question and a significant number of users will be unable to view the flash animation on the homepage. In short there needs to be greater emphasis placed on answering users queries and that this section may need a name change to accommodate this kind of information.

Accessibility

It is easy to dismiss accessibility as being an issue solely about the disabled however the truth is that it is a much broader issue than that. Accessibility refers to ensuring a web site is accessible to the widest possible audience including disabled users, those with poor vision or motor skills such as the elderly, and those working within various technological constraints.

Disabled users

Disabled users in the UK have a spending power of £50 billion annually according to the Disability Rights Commission. What is more this figure does not include the elderly who have poor vision or motor skills. Catering to this audience provides a unique way to separate you from your competition. That is not to say that you ignore your abled-bodied users. Rather, we recommend that you make some modifications to your site to make it more disabled-user friendly. There is not time in this report to catalogue every problem disabled users might encounter with this site, but we can say that the site fails to meet even the most basic level of international standards on
accessibility (WAI Level A or Priority 1).

Click here for more on accessibility and business

Technological barriers

As well as creating barriers to the disabled a site can also create technological barriers which force users to turn to the competition. One example of this is in the use of JavaScript. JavaScript has been used in order to carry out the validation of the checkout form. These scripts check that each field has been correctly completed and informs the user of any potential errors. The problem is that 5% of users do not have JavaScript available so these users simply cannot purchase from the site. This is the equivalent of turning away one in twenty customers who try to enter a shop.

Another technological barrier is download time. Although broadband has exploded over the last year still over 50% of users still access using dial up. http://www.trapawasp.co.uk/ takes approximately 17 seconds to download on a 56k modem compared with say http://www.waspbane.com/ which takes only 7 seconds to download over the same connection. With a 10-second difference per page and a 6-page purchase process that is a minute of unnecessary waiting. It may not sound like a lot but website users are incredibly fickle.

Driving traffic

You can have the best website in the world but if nobody is aware of its existence then it means nothing. Unfortunately TrapAWasp does not have the online profile it should have and this will be having a direct impact on the number of sales being made. The problem is the most pronounced on Google where TrapAWasp does not feature within the top 100 results on valuable keywords such as "wasp traps" (results on google.co.uk were slightly more positive but not by much).

Not that things are entirely doom and gloom. TrapAWasp does appear to be supported by a very effective Google Adwords campaign that goes a long way to redressing the balance of poor organic listings. It also has better ratings on sites such as MSN search (listed 7 th) and Yahoo (listed 8 th). However with Google owning 69% of the British search market it is vital that TrapAWasp receives a good listing there. Pay per click campaigns can prove very effective but they also dramatically reduce profit margins and so should only be seen as a stopgap or compliment to organic listings.

After comparing TrapAWasp against other sites listed under rated keywords it became obvious that the problem laid in the sites link popularity.

Google uses a complex algorithm to calculate your position in the ranking. However, two factors dominate that placement. One is keyword density and the other is link popularity.

Keyword density refers to the number of times a particular keyword/key phrase appears in the content of the site. For example the phrase wasp traps appears 17 times in your homepage giving it a keyword density of about 11%. After comparing this to other web sites we discovered that TrapAWasp is on a par with the competition. It is therefore fair to say that this is not the factor that is limiting your rating. That leaves the factor of link popularity.

Link popularity refers to the number of sites who link to TrapAWasp and the perceived popularity of those sites. The more sites that link to you and that you in turn link back to, the higher your ranking. However, it is not just about numbers. It is also about the perceived quality of the site that links to you as well. For example a link from the BBC website would be worth a lot more than a link from an unknown name. Another important factor is the words used in the link to you. The words "wasp trap specialist" will rank you better on the words "wasp trap" than a link using the words "The Jones family business". Currently not a single site listed on Google link to you and this explains your poor ranking.

There is, however, good news. Even the sites ranked in the top positions on Google have very little in the way of sites linking to them. It would not take many good quality links to move TrapAWasp to the top of Google’s organic listing.

Click here for more on link popularity

Below I outline a few techniques that would significantly help your placement on Google:

Look for link partners

Firstly look for as many sites that will link to you as possible and get them to add your site. One way of doing this is to search on Google for the words "add url" and a related keyword phrase such as "wasp traps". Doing so led me to this site: http://www.backyardgardener.com/ph/gardenproblem/gardenproblem.htm which actually has listed a wasp trap that is no long available! There is an add url link at the bottom of the left hand navigation that will allow you to add your site.

Copy the competition

Go to Google and search on a key phrase that is related to your site. Copy the url of the site listed number one in the list and then search again using the following search phrase "links: <url of competition>". This will show you all of the sites that link to that url. Contact each of those sites in turn and ask them if they will also link to you. Once you have done this return to Google and repeat the process all over again but this time with the next site down on the list.

Message Board seeding

Another very effective approach is to take part in message boards on related subjects such as gardening. When posting on these boards you can add a link back to your site and so improve your link popularity. However, a word of warning on this approach. If you just post adverts on peoples forums they will remove them and probably ban you for good. A more successful approach is to contribute to the forum providing useful advice and insights. Almost all forums allow you to add a signature to your post and it is in this signature that you include a link to your site.

Increasing keywords

Although this approach is not related to link popularity it is a vital component of increasing the traffic levels to your site.

One of the problems with securing high ranking is that short keyword phrases such as "wasp traps" are highly competitive. However, users often use much long search terms and it is sometimes easier to target these. The best way of targeting them is to include a lot of copy on your site that is related to the subject matter. This is normally achieved by adding an articles section on your site. This can prove very effective
. Take for example the Headscape site. Web design is a highly competitive sector and competition for the keyword "web design" is immense. However because we have an extensive archive of articles we gain a lot of traffic through longer phrases. Search on "how do I become number one on search engines" and you will see what we mean.

We would recommend that an article section relating to wasps is added to the site. This could build on the existing content which talks about how to find a wasps nest and general information about wasps.

Conclusions

This review has outlined a number of areas in which TrapAWasp could be improved. However, our recommendation is that increasing the levels of traffic should be the number one priority. Poor ranking on Google is significantly damaging the levels of traffic and with a minimum amount of work we are confident that the site’s ranking could be dramatically improved.

Speeding up the web development process

Posted in Development on by Paul Boag

I am currently working with our lead developer at Headscape to streamline the process of building and deploying content managed web sites. Part of this process revolves around seperating out the different aspects of a sites development to make it easier for multiple people to work on the site at the same time and to standardise some elements which had previously been bespoke to individual projects.

Current working process

Normally a web project runs something like this:

  • Establish initial design concepts
  • Work on the Information architecture
  • Create the site templates (XHTML) and style (CSS) for the site based on the designs and information architecture
  • Populate the site with content
  • Make the site live

Obviously this is hugely over simplified but you get the idea. However the problem with this approach is two fold:

  • It is a fairly linear process which involves each phase being dependant on the previous steps being completed
  • The site templates (XHTML) and style (CSS) have to be made bespoke each time to fit the project

A new working process

The process we are moving to helps to solve both of these problem areas. By seperating not only the presentation from the content but also the content from the structure you can start to standardise even more of the process. Let me explain:

Standardising the structure

As all the content is held in the content management system there is no need for the site templates (XHTML) to be bespoke for every project. These site templates no longer contain content but rather only define the structure of the site. After all the majority of sites contain the same basic structural content such as navigation bars, content areas and the like. By consistantly naming these areas you can then just use style sheets to change the way this structure is presented.

This approach means that instead of having to build the site templates and styles from scratch each time, you can have a basic predefined template which are then tweak accordingly. Obviously some changes will need to be made. The style in particular would have to be altered quite considerably for each project, nevertheless basic features such as column layouts could be predefined. The site templates would require only minor tweaking on a per project basis to take into account issues such as some clients wanting their news templates categorised by subject while others would want it organised by date.

Working independantly

This approach would also allow a lot more stages of the project to happen independantly. For example the person populating the content can do so even before the design is finalised because they can still navigate the unstyled site and see the content they have entered. The added bonus of this is that the designer can play around with different designs directly on the final structure and content. This means he can see exactly how his designs will work with real content instead of endless blocks of dummy text.

The result

The result of all of this is that an average content managed web site could be produced considerably faster and using less internal resources to do it.

Further reading

If you are interested in knowing more about seperating out the different layers of web design I highly recommend this article on the subject.