Brilliant Thinking

It can be safely said that we’re in the era of Web 2.0. New technologies abound to bring far richer experiences to the end user through the medium of the browser. The technologies and capabilities of browsers have evolved considerably since the mid-90s, so should we not review the creative and production process of how we design and build websites so that our processes keep pace with capabilities?

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

It’s an all-too-common conversation when a developer gets his first look at a graphic designer’s masterpiece:

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!

As a follow on from “The Dao Continues” in May 2005, I’m going to return to the topic of design, form and function on the web as it is often a topic for lengthy discussion between clients, designers and developers. It was sparked by a question one of our design partners asked me today - “so how come there are so many attractive sites out there that seem to be html based” in response to a discussion about removing hard-coded line breaks from the text because it was causing the layout to look bad at different font sizes.

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.

Consumers agreed with this sentiment, with an overwhelming 95% stating that they are more likely to trust a small business that uses a professional web url and associated e-mail address. They expressed their suspicion of entrepreneurs trading on free e-mail addresses, such as hotmail or yahoo.

“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

A great article on the similarities and differences of the medium of the web to the medium of print can be found on A List Apart called The Dao of Web Design.

Here is an excerpt:

The web is a new medium, although it has emerged from the medium of printing, whose skills, design language and conventions strongly influence it. Yet it is often too shaped by that from which it sprang. “Killer Web Sites” are usually those which tame the wildness of the web, constraining pages as if they were made of paper – Desktop Publishing for the Web. This conservatism is natural, “closely held beliefs are not easily released”, but it is time to move on, to embrace the web as its own medium. It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.

This is not for a moment to say we should abandon the wisdom of hundreds of years of printing and thousands of years of writing. But we need to understand which of these lessons are appropriate for the web, and which mere rituals.

The article proposes that web design is a very different beast to print design due to the inherently flexible nature of the web environment. Since its publication in 2000, many different devices are now used to connect to the same web content (and systems) and the key strength of the inherent flexibility that the web offers is often constrained by using outdated print design techniques.

Although this article is levelled at the web and print design communities, and one whose content we strongly endorse, there is one area that is not discussed - web/print agencies’ clients.

It is our view that, as much as we should adopt the flexibility of the web, when designing a web site/application for a client we also need to consider the level of knowledge that the client has regarding the web - do they see it in print (or fixed) terms, or do they see the flexibility and possibilities? Further, we also need to consider the impact on the clients’ brands - which are usually constrained to ensure consistency. And let’s not also forget the client’s customers … what do they expect?

The reality is that it’s a juggling act of differing priorites, each of which needs to be managed and addressed during the web design and development process. It is not simply a case of throwing out the old and embracing the new (flexibility). Often we need to consider how different systems (e.g. pocket PCs, network devices, etc) may be used to access the same content and structure how this can be achieved. Fortunately, current web standard that promote the separation of presentation, content and funtionality provide the foundations for this - we just need to ensure we include and balance all the priorities in the process.