Infinite Web Design

One section I’ve noticed as I look at many sites for design firms is the process area. I have chosen not to dedicate any snazzy diagrams or bullet points to this on this site. There are a number of reasons for this and I may eventually add a big huge section on this for everyone to read over.

So why haven’t I got a snappy process like “Describe, Design, Develop, Deploy” or something equally alliterative? First off, I have found that process is not really so pithy as all that. So while it makes for a snappy title a real web design process has a ton of steps, a bunch of loops, and is insanely complicated for those who aren’t familiar with what you are doing. So that means I have the process that web designers (or whatever title you’re using) would understand and another one for everyone else. But that seems a bit wonky to me.

The point, and I seem to be saying this in my posts a lot of late, is not to say that we designers know way more than everyone else (though we should about web design), but rather to point out that every step in a process involves applying a wide variety of skills and techniques to properly get the work done. The process also should not be so straightforward as walking through a little diagram. Good design is almost always an iterative, complexeffort where many steps occur in tandem and they repeat at a variety of intervals.

Most designers will not nail everything the first time through. That means that you may be tweaking the navigation and labeling after your ‘Information Architecture’ phase and you may go back and decide to add a column long after your layout appeared done because there is some new content that needs a home. The point is that a simple 4 or 10 step process is not realistic and it is misleading to show something like that to non-designers. The problem is not in the ethics but in the expectations they will have for how things will happen if they work with you.

When I work with clients I try to explain that there will be some phases to the design process but that within each they should expect iterations of the designs and that there will be revisions that take place throughout the whole of the project no matter how well planned it is. I give them an overview of my work process and how they fit into it as content providers, editors, or in other roles.

But here’s a question, would anyone like to hear more about the details of a design process? The steps I go through from the initial meeting to the deployment of a site? If it will be of value to people I will be happy to share it. Would you rather see it written up for a client to help you better understand what is happening or for a designer to help with your own process? Speak up and I’ll take the time to put it up here.

There is a working group called the Web Hypertext Application Technology (WHAT) Working Group that is working on some really interesting extensions to the HTML / XHTML specification for submission to the W3C. Their goal is to extend the Form specification to better support Web applications. JD mentioned this briefly and it’s been mentioned in other blogs recently, but I think it is worth the time for developers to read the actual working documents and provide their input to what could be a major change to the HTML / XHTML specifications.

Much of what is being proposed would make the browser capable of rendering HTML forms with input capabilities more like those already found in Flash forms (embedded .swf files). I think that the key to this working would be strong backward compatibility, if we see a generation of web forms that break in relatively modern browsers (say one major version behind the latest release) it would be very bad for everyone. On the positive side, if even a few of the recommendations, such as a the calendar element or changes to the form element, are made a part of the standard and supported in browsers it would be great for developers and users.

I look forward to seeing this idea grow and spread.

I want to follow up on yesterday’s note by pointing out that my focus was not on criticizing clients for focusing on the look of their sites. The visual design of a web site is very important. My emphasis is on making sure that the great layout and graphics are created to support the great content and site structure that you have in place. Otherwise it is like building a beautiful house with no foundation. Nobody wants to stay there very long.

As designers we have the experience and perspective to understand that a web site must contain valuable, meaningful content in the form of text and images that will help visitors meet their objectives in visiting the site. In many situations that will involve helping users to make a decision about an action such as a purchasing a product or service or contacting someone for more information. In order to do that the users of a site must see more than some cool graphics and a nice layout. Those elements should be created to emphasize parts of the content or navigation of the site to make information easier to find and use.

Designing with web standards like XHTML and CSS pushes us into a positive work flow where we can build a strong foundation with a solid Information Architecture and solid content before we move on to decorating the site with cool graphics and stunning layouts.

One of the advantages of using CSS to lay out and style a web site is that you can begin working on the content and structure of the site before you ever pick a font, background color, or link color. This can be great when you are working with a client who is focused in on the way the site will look early in the design process while you are focused on doing a content inventory and developing the Information Architecture.

It’s pretty easy to explain how you build the site starting with the content and then formatting the pages based on the content of the site using CSS to even a non-techie. The benefit is that clients, who aren’t generally interested in how you code a site, can understand when you say that you want to get the content together and figure out the structure of the site and then style the content using CSS to get the desired look and feel. This can help get clients focused on the unglamorous body copy and images that they need to help you put together early in the project.

One of the hardest things to do is convince people that want to see fancy rollovers and pick color palettes that they should focus on the text of the site instead. Copy writing is simply not as fun or cool. So, by explaining that building with web standards requires you to work from the content out you can redirect their energies and produce a site with better content that will also be usable and accessible.

D. Keith Robinson recently wrote an excellent post on the cost savings from designing using current web standards (XHTML, CSS, etc.). This fits in with my recent discussion on The Business Case for Usability and how we can explain to clients and bosses why they should design using standards and test for usability. In my mind these are tied closely to one another.

However, an interesting question is how we can best explain and justify designing with standards and usability. Should we focus on the benefits for the designer in saved time making design changes and easier maintenance? Or should we focus on the benefits to users of increased usability and accessibility? Both of these are real effects of good design, but they sound very different to a manager or client. Or do we diffuse the message and explain that there are many reasons, risking glazed over eyes and numbed brains in those listening to our pitch?

I’m glad that Keith was able to pull up solid numbers on how the use of standards saved clients money during the design of the site. Now, does anyone have any numbers for site maintenance, redesign, or usage before and after a redesign that moved to a standards based design or followed usability testing? I’ll try to put some together from work I am doing but I’d certainly like to see what others have done as well.

Nick Bradbury brought up the problem of RSS readers that are checking in too often and using up valuable bandwidth. So here is my clever idea that I don’t know how to implement just yet. RSS feeds are almost all dynamically generated (who would code that by hand with every update?). If you know the IPs that are causing problems you should be able to append a notice to only those feeds that politely tells them that they are checking for updates too often, why it is a problem, and how to correct it. In many cases this may just be a case of people not understanding that there is a problem at all or how to fix it.

Writing for the Web is not as different from writing for print as many would like you to believe. While there are certain changes to style and to layout that will aid readers using a monitor rather than paper the goal of your writing is still much the same. Depending on the web site you are trying to inform, entertain, amuse, shock, or otherwise reach your readers. In order to do so you must learn to write clearly.

For our purposes I will be ignoring writers of fiction, poetry, and other styles that allow authors to intentionally create obscure, twisted, and otherwise difficult to read documents. Why? Because they are not my audience. I am writing to designers, developers, and business types who need to quickly and clearly get a point across.

There are a few key steps you can take to get your writing in shape. This is not the be all or end all of good writing but by following a few simple guidelines you can improve your writing greatly.

1. Know your own point and make it obvious to others

Know what you are trying to say and make sure that it comes across clearly in everything you are writing. You main thesis should be the most obvious thing in the world to your readers. Don’t cushion it or blend it into the rest of the text, make it stand out.

2. Don’t equivocate

Strip out all of the softening words. Don’t back off of your point. If it is your opinion it should be clear that it is one of your thoughts without you saying so explicitly, if it is a fact, then stand by your evidence or find more that really backs up what you are saying. Don’t be afraid to come out and voice and opinion or state your conclusion clearly and authoritatively.

3. Get to the point

If what you have to say can be said clearly in one paragraph, don’t take three to do it. Quantity in writing is for children who must be forced to write and people trying to hid a lack of substance through sheer volume. State your points, provide your evidence and draw your conclusions. If you are explaining and idea or a process, do so in clear, concise ways so that the salient points are not lost in the white noise of useless words.

These guidelines can help to make your writing clearer and more effective. Just keep in mind that you are trying to reach an audience and, as in everything else on the web, they will have little patience for fluff and nonsense that gets in their way. Hopefully, you have learned from the example above that it is easy to go on at length about a single point, repeating yourself and stretching out a document without adding anything more of value.

I’m currently redesigning the Hallmac RV Rentals site. It is being moved from an old school tabled layout to a new CSS and XHTML compliant design. After a few initial frustrations fighting CSS bugs in browsers to get the layout working I’ve discovered a new joy in converting the site.

As I transfer the pages over to the new design I get to strip out tons of font and table tags. It’s great to look at the code disappear and yet still see that page looking great thanks to the attached style sheet. My code is so much cleaner and easier to work with, and as a bonus the page sizes are shrinking rapidly. It’s really quite satisfying in a very techie kind of way.

I’d also like to point out that IE is not the only browser with CSS rendering bugs. I spent a while fighting some very odd problems with div heights in FireFox, though it is still the best to date at not screwing up CSS layouts. I look forward to the day when we see some real standards compliance in the browsers, but I fear it is still some time off.

A recent discussion with my sister-in-law has prompted me to take another look at online advertising. As much as we hate to face this fact as web designers advertising pays for much of what we do. Most of the web sites you visit will have sponsors or advertisers displaying logos and ads on the pages. However, there are good ways and bad ways to incorporate advertising into web pages. I’d like to take a few moments to share my thoughts on the matter.

Ads that flicker and pop annoy users and they mentally link that annoyance with the advertiser, which is clearly not the intended effect. Each ad should be an attractive portal to a web site and a positive experience for those who see it. That means it shouldn?t block access to seeing content visitors want on the page (e.g. pop-ups, pop-unders, floating ads) nor should it present unwanted information, which means targeting ads to appropriate pages.

Ads should not have to annoy people to get their attention. A bit of subtlety in online ads will be appreciated. Too many people have been caught up in an arms race to create the most annoying, eye catching ad in the world. All this really gets you is noticed as the most irritating advertiser. A 30 second radio spot of scratching fingernails on a chalkboard gets attention, but it doesn?t generally make people want your product. Don?t let your online ads be the visual equivalent of nails on a chalkboard.

But take it one step further. Ask what it is the visitors to a site are there for. What is their goal in visiting the web site the ad is on? Are they looking for a good experience on a family vacation? Are they looking for a fun night out with their friends? Are they looking for quick meals for the family? Or is it a kid looking to be amused? If your ad and the site it takes them to can help them meet that goal they are more likely to click on it and to stick around when they reach the web site.

Learn from Google, for they are wise. Their ads are simple, unobtrusive, and matched to every page they placed on. You?ll pretty well never see Google ads that are inappropriate or out of place. This means that visitors to web sites tend to see them less as an annoyance and more as a potential source of useful information. I?m not an expert on your target audiences, but you are, so find out what they want and make sure the ads help them meet their goals, it will leave them feeling almost grateful for having seen the ad if it serves their purpose.

Anyhow, that?s my rant on online advertising. Not too many facts or figures to back it up, but a fair amount of experience and observation of what works on the web and what doesn?t. Applying some common sense and a few usability principles to online advertising can go a long way toward increasing the return on the investment in the ads and generating goodwill among those who see them.

Deep linking to pages within a web site is a contentious issue. A common position, and the one I hold, is that any information you put on a public web site is open and can be linked to freely(this does not include hot linking, which is just stealing of content and bandwidth). In fact deep linking to a site is often better than linking to the home page. Try telling someone about a story on a large news site like CNN.com without sending them the link to find it. They can go to the homepage and search for it but it will take far longer.

It also means that your pages will be ranked higher in search engines. If there are links from many sites to many pages in your site search engines will start to treat your site as an authority and it will show up higher in the rankings. An active affiliate program, link buttons, and other methods can help to encourage others to link to your site. By directing them to the appropriate pages quickly you can help new visitors find relevant content that will encourage them to visit and do business with your organization.

So why would anyone object to deep linking? The first objection is that people should have complete control over how people enter their site and what visitors see. This is silly since people bookmark pages they like, send links to friends and colleagues, and search engines pick out whatever pages are relevant without regard to their depth in the site. The nature of the Internet and hyperlinks is such that web sites have little to no control over how visitors enter and exit their sites, and that is in fact part of the power of hyperlinking.

A second objection is that when sites are redesigned old pages can be removed and URLs can be changed. This means visitors following deep links find 404 errors and think your site is at fault. However, a well designed 404 page can help visitors understand where the page went and can provide a site search and links to other pages. This leaves visitors with a pleasant entry to your site and reflects well on you. It is a simple solution. The other is to make sure that your site architecture supports long term growth and development so that URLs don’t have to change as the site grows. This won’t always work but it can help if you plan for long term change.

In the end there is little that can be done to prevent deep linking to sites and it is generally beneficial to both parties, the linker and linked. Many companies go out of their way to encourage linking to their site and actively recruit other webmasters to link to their sites. I think that this fits with the spirit and functionality of the Web and I encourage deep linking.