Here’s an example of an email I received today (and about once per week on average):

From: Ankur [reciprocallinks.seo@gmail.com]
To: Emissary Consulting

Dear Sir/Madam,

We are a leading web design services firm is located at Noida, India  and having presence in US, UK, Canada and Australia. We provide the best Website Designing And Development (ASP, ASP.Net, Java ,Perl and PHP development)  developers and SEO’s, specially for Graphic/Flash/3D designing. With Graphic/Flash/3D designs, we thrive on the idea that design makes a difference We can provide you with a fresh, professional image via a recognizable trademark or logo design. We have our competency in CMS (Joomla, Modx, Mambo and other quality Content Management System) and e-commerce websites. We customize our processes and reports based on client’s styles and guidelines.

We have result oriented low price promotion packages to match your needs. We NEVER contact your end client in case if you are an agency client and sign up the NDAs with you. We appreciate your interest in services. If you would like to know more about our services.

Regards,

Ankur

Here’s the problem – the email is not traceable to any company. The email address is some generic Google Mail address, there are no telephone numbers and no links to a company or freelance website. There is no way to determine who this person (or these people are) from the email, even though it “sounds” professional on the surface.

Ankur has contacted me twice so far, using different email addresses. Needless to say I mark his emails as spam now.

If you deal with small clients, these types of emails are your enemy. Your clients are probably receiving them and may be seduced. They may also raise unnecessary questions which, though seemingly valid to the client, aren’t valid in a professional web design or development context. But, you will have to be ready for them and ensure you have the right defence against them to protect your business. The more you establish yourselves at the outset as a clearly professional organisation – by setting clear boundaries for everything such as terms of business, payment, design approach, number of revisions, etc – you will clearly differentiate yourself, manage your client’s expectations and more effectively deal with incursions from unprofessional organisations such as the one who sent the email above.

I was going out at the weekend and wondering where to go and what to eat when I got there. My partner suggested we try the Black Rock Grill concept where you cook your own meat to your exact requirements on a hot rock in front of you. It sounded fun, so I tried to track down a restaurant that used the system.

Google didn’t return much of any relevance in my area, so I checked the supplier’s website. They didn’t have a tool to help me, so I kept digging. After a while I happened across a link to a dedicated website to help me find a restaurant near me that was using the Black Rock Grill, a website that had been created by the suppliers of the equipment. The website is www.eatblackrockgrill.com

Great! So I clicked into the “find a restaurant near you” page and was confronted by a form that wanted to know my name, email, telephone, postcode and had an “information” box. There was no description about this latter box – what was I supposed to put in it? – nor any indication if any or all of the fields were mandatory.

I entered a postcode – after all, I only wanted to find a restaurant near me – but I got an error asking for my email. OK, now I know which fields are mandatory at least! So I entered the information and was then greeted with a “thank you for your form submission” page. That’s it. Period. No restaurant list, nothing.

Personally, I think this is one of the worst “where’s my nearest …” implementations I have seen in 2009. Why is this?

1. There was no clear link to this dedicated website to help me find a location (it was buried in the suppliers main website)
2. The “find a location” page has zero information to help the visitor find a location, just a generic form.
3. A “find a location” system should do 2 things very well, and 2 things only. Sadly this system did neither. Here are the 2 things:
   1. Ask you where you are
   2. Show the nearest locations to you in a list or on a map (or both)

It is critical for success on the web to think about what the user wants. If they want a location finder, don’t try to capture marketing information from them (unless you’re explicit and clear that it’s optional), and (especially) don’t tell them “we’ll get back to you” when they do manage to complete the form. People asking for “where’s my nearest …” have an immediate need, and not one that can be satisfied a few days later. This is a one-time opportunity to fulfil their needs and make them a happy visitor, one who might return again and again. Anything else and you’ve lost them.

Looking at a wider scope, your website may be about your business, or made to sell things to customers, but if it isn’t built for those customers you will lose them to a competitor who does the job better. The more you can think about what your site visitor wants, the better you will achieve the results you want.

Needless to say I didn’t go to eat at a Black Rock Grill outlet as I couldn’t find one!

The Oatmeal: Design Hell

In the mid-90s – and it’s a technique that is still widespread today – the website design (how it looks) is often the first things that gets produced – before any content is written, before any photography or illustration is planned, before any functionality is considered. Often, even the content structure (approximate number of pages. navigation structure, etc) is not known or has not even been thought about.

This approach is inherently flawed for a number of reasons:

• It sets wrong client expectations
• It creates problems for the designer after the design is signed-off
• It creates problems for the developer
• It creates problems for the website visitor

These are not trivial issues, so why do many agencies and freelancers still persist in adopting this “design first” approach?

Client Expectations

Once the design is complete and signed off, it is usually what they expect to see on screen once all the development work is complete. However, if content has not been thought about before the design work starts it is very easy to fall into the trap of discovering that there is much more content that there is available space in the design for, or there is supplemental content which would be nice to have alongside the primary content but there is nowhere to put it.

Consequently, design changes will be necessary during development to accommodate the actual content. This may, in the worst case, mean a complete redesign which could be costly.

Problems for the designer

Following on from the client expectations, it is quite easy to see that the actual fault lies with the designer for not ensuring that the site conformed to the primary requirement of being suitable for the content. Theoretically, the designer should fix this problem before development begins. The designer then needs to manage and realign the client’s expectations as well as deal with the fact that they now have an extra workload to accommodate which may be unpaid.

Where the designer and developer are separate, as in the case of freelancers or agencies working together, it is sometimes left up to the developer to sort out the mess.

Problems for the developer

At this stage, we are now 2 steps removed from the content and the developer is left in the difficult position of trying to fit a quart into a pint pot – an old expression which means trying to fit too much into too little space. The problem is exacerbated when the client expects the developer to be able to fix the layout problems caused by too much (or not enough) content, especially when the developer is purely technical and does not have visually acuity as I have discussed in earlier posts. The problem can be reversed when the client insists that the design is followed strictly but the content can’t allow this.

Problems for the website visitor

Once all the hacking has been done by the various people involved – the client, the designer and the developer – the end result may not be an ideal experience for the website visitor. After all, the website should be designed to present the client’s information in the best possible fashion so that the required messages are delivered clearly and succinctly, the site is easy to use and a pleasure to experience, produces a favourable brand experience, is easily navigable, visitors don’t get lost, products get sold, etc, etc. If we haven’t started from a content out approach, as we have seen from the preceding three problems, we can very easily dilute the experience and fail to deliver the message because design is more important than content.

So why do many agencies and freelancers still persist in adopting this “design first” approach?

Simply because that’s how everybody does it, and it seems that’s how the client expects it to be.

An analogy

When you buy or rent a house you have to accept the limitations of that house; after all it was built in advance of you moving in; the designer, architect and builders didn’t know what furniture you had and so could only created generic spaces to live in. You can’t move the walls (without major work) and so you have to make your furniture fit when you move in. This might mean there is too much space and you need to buy more furniture, or you need to get rid of some so that what you have left fits properly. And you will probably redecorate.

However, on the web we have the advantage that we can measure your furniture (content) before you move in, and design each room (page) to fit perfectly around your content. Consequently, we can build a perfectly tailor-made house (website) for you. But few people adopt this approach and we end up with the problems above which can easily be avoided if we adopted a content-out approach to web design and development.

If we try to do it the house-building way, we often run into additional costs and delays mid-project when the client’s content arrives and we find it doesn’t fit the original design. Who bears those costs is another topic entirely!

Why content-out is a good approach

The web is a content delivery medium; the more effectively we can deliver the content to our target audience, the more effective our website will be for our business. So, if the web is a content delivery medium, shouldn’t content be the most important element of our design and development process?By starting with the content we can align every member of the team to the core purpose of the site, from the stakeholders through to the sales and account managers, and on to the project teams – information architects, designers, developers. With every member aligned to a common purpose, it is much easier to achieve that purpose than if different members or teams operate in relative isolation only to come together towards the end to find their individual pieces of the puzzle don’t quite fit together.

To summarise; Content-out design is a good approach because it:

• Improves cross-team and inter-team communication
• Ensures everybody is working towards the same goal from the start
• Clarifies the goals much earlier
• Avoids unnecessary surprises and consequential rework
• Establishes the relationships between the different content elements early in the process
• Improves efficiency and allows developers to start earlier in the project lifecycle
• Creates a real sense of how the site will work much earlier than traditional methodologies

Designer: “It must be pixel perfect. This widget does this, and that widget does that. Oh, by the way we want this bit to stay fixed here on the page, irrespective of the content that goes on (which we haven’t seen a draft of yet) and the client mentioned something about standards compliance. Oh, and search engines.”

Apologies for the paraphrasing, but (as you will have seen from some of my previous posts) designers often don’t design with the web in mind, and because the web is a fluid medium the conversion process of a design also needs to accommodate a little fluidity of its own to embrace the benefits of the web. This means that the design produced may need to change a little to make the website work in practice – some things such as usability and functionality spring to mind which a design may not often lend itself to immediately, despite how wonderful it looks on paper (yes, designers still review website designs with clients on paper) and the promise it holds. The developer usually then has to shoehorn in additional code to accommodate the designers brief as well as the clients functional desires and try to help the actual user who may have been overlooked in the process, and deal with typography issues where fonts on paper hold up to readability at smaller font sizes than they do on screen.

Well, it looks like Andy Clark of “Stuff and Nonsense” has done something about it. He has just published a book called “Transcending CSS: The fine art of web design”. It is a very visual book and looks set to be essential reading for designers who wish to understand more about visual approaches to converting their design into working code (CSS specifically), and developers who are looking for new paradigms for converting pre-authored designs into working and workable websites.

About the book:

The web has changed, and so has the art of creating web sites. Few visual designers are natural programmers, and as a result, visualizing how to work with markup, CSS and a range of programmatic techniques to create beautiful design is difficult.

To make things more complicated, most web design teaching materials focus on the technical rather than the creative. Countless resources and guides focus on semantics, compliance, and validity—and while all important—mean nothing to the creative designer who wants to impress his or her clients and employers with exceptional design without worrying that the way they approach the design will be compromised by creativity-limiting technical issues. So how do creative designers learn to be artistic yet functional? With Transcending CSS: The Fine Art of Web Design.

For more information about the book and how to source a copy from an Amazon near you, click the book cover above.

Recommended reading!

There is always a heated discussion on this every time it comes up on the forums I participate in and there are always people who sit firmly in one camp or the other, and then the rest of us that float in between. There’s no right or wrong and, at the end of the day, it comes down to the client requirement. However, there are some “best practice” guidelines which should be considered before they are discarded at the design stage (the list below links to the Business Link Best Practice guidelines).

• Introduction
• Planning your site
• General design considerations
• Accessibility issues
• Designing the site
• Designing for the user
• Web typography
• Site navigation

Beautiful websites can be achieved, but these usually trade off other aspects of the site. Find a “beautiful” website and try changing the font size and see what happens. Some will break, some won’t change (they used fixed font sizes, graphics or Flash), and some will scale fluidly although might not look quite so beautiful. I see a lot of very good looking websites that are purely CSS based (which we try to use exclusively), but they are usually fluid in at least 1 direction (usually page length) to accommodate accessibility and usability requirements.

Sites that resort to using graphics or Flash to display content to ensure they are beautiful compromise usability; people with screen readers cannot see or hear the text. It also reduces search engine results as there is no content that they can index either. The end result is a pretty, fixed site but not necessarily a very usable one.

Incidentally, did you know it’s actually UK law that websites should be accessible (i.e. not deliberately exclude anybody)? Nobody really enforces/polices this, but it has wide-reaching effects from the graphic design itself right through to the coding (choices of colour, font sizes and much, much, more). If you can’t sleep, I’d recommend reading about accessibility On a serious note, we actually partner with Test Partners (who run accessibility.co.uk) to perform full accessibility testing to ensure we meet the client’s requirements when necessary.

In my view, there is a spectrum of design approaches from fixed layouts at one end to fluid layouts at the other and a good website is one that blends aspects of both to deliver the best experience as possible to the user of the site (ie not the minority that is the designer and/or the client).

Fixed                                                 Fluid

+ - - - - - - - - - - < - - - - - - > - - - - - - - - - - +

Form                                               Function

Marketing                                       Application

Some sites are beautiful at the “default” browser settings. However, it’s not the “default” settings we need to worry about, but those that are outside the bell curve – if we have to consider cross-platform issues to be inclusive for PC (IE/FireFox) and Mac (IE/Safari), why not include other visitors who use these browsers with non-default settings?

I try to occupy a middle-ground on the spectrum, providing a balance between form and function so that sites look good, but work well too. I do not go as far as some accessibility “extremists” who produce completely fluid sites with very few (if any) graphics (I think these sites are dull), and I don’t like the totally fixed sites which make it look like a printed brochure because the designer wanted it that way (I think these sites are missing out on the huge potential of the web).

At the end of the day it comes down to User Experience – understand who is the end user and what do/will they expect from your site and that will help you find the right place on the spectrum.

There are a couple of great books about the web experience which I would recommend for designers and developers (“Don’t Make me Think” – Steve Krug, and “The Art and Science of Web Design” – Jeff Veen). I’d also recommend looking at alistapart.com which has some great articles. I look at these as part of the toolkit for designing and building effective websites today, along with using new technologies such as AJAX as and when appropriate.

“The internet now plays a critical role in most consumers’ decisions to purchase or hire a service,” said Rodger Armstrong, from Easily.co.uk. “It’s great to see that small businesses and tradesmen are increasingly realising that having a professional website is vital to their business.

There are a myriad of providers of low cost hosting and email, and it is relatively easy to acquire and use a professional web and email address. However, as much as the availability is there, there are still many, many small businesses trading on free or their home ISPs email addresses. It seems that many of the small web companies and freelancers who have been working with the small businesses are not advising them fully so that they present a professional face to the rest of the world.

This world-view fits in with our Internet Maturity Model. The 5 stages of growth show the stages of maturity that companies go through when adopting Internet technolgies, starting with email at the base level, and evolving through professional website design, and then embracing e-commerce, integrated business systems, and even creating new models of working. Although companies are following this maturity curve, consumers may be a little slower to adopt the same mindset. It seems from the British Chamber’s article that consumers are now at “Level 2″ on the model, but this has broader implications as any system they interact with on the web needs to be professional to build trust, and that means the Level 3, 4, and 5 systems too.

As a bootnote for small businesses on a shoe string, you can get set up on the web with a professional website quite easily. There are numerous web template sites on the Internet offering professional templates for a few tens of dollars. You can then customise them yourself, or get a developer to do it for you. This takes the hassle out of trying to figure out how to do all the individual bits and makes it easy to get online with a professional site quickly. (If you are interested in this service, please contact us.)

Even if you adopt the DIY approach, remember to get a professional site, a good domain name and use the email address at that domain (and not your local ISP or a free account). You will gain so much more credibility as a business in the eyes of your customers as a result.

Link: British Chambers of Commerce Article