What do I do first?

Figure out who your audience will be. This is the single most important step you can take and the one you will most likely skip. If you don’t do this, your website will not be as effective as it should be.

The owners of a fine crafts gallery recently came into our shop and wanted us to update their website, which is sorely needs. I asked who their market is. The answer I got is, just about everybody. Wrong answer. Unless you are selling goods or services that insure very basic survival, what you offer is discretionary. People buy from you or join your organization for some emotional reason. That’s what you need to appeal to with your website. They didn’t answer that question the first time their site was built and it never worked well.

Now we could make some good educated guesses for the client. Types of business fall into classes and with over 30 years combined experience between the three of us we have a pretty good idea of what makes an effective web site. But it would be better still if the shop owner would be specific.

Fine, you can’t narrow down a particular demographic. Your customers are wealthy and not, young and old. I believe you, mostly. But there is some experience that people are expecting when they patronize your business or organization. When you identify that, then you can make a truly effective web design, and probably increase your sales off the web as well.

Once you figure out your audience, then you can decide what content will appeal to them and what format they would most like to get the content in. If you can’t figure out who your intended audience is, then you are not ready to build a website.

Okay, what do I really do first?

You don’t believe me with the first answer. That’s a personal problem. You will be back later to discuss why your website isn’t effective. Yes, we’ll get back to that then. It will cost you more, probably a lot more, but most of us need to learn the hard way.

Before you bake the cake, buy the ingredients

Or in the case of baking a website, get your content. Create content. Buy content. Write your page text, or arrange for someone else to do so. Gather your photos, movies, audio files, charts, whatever. Write you bio, resume, rant or tutorials. If you are selling something get your photos and ad copy together first.

An effective web design flows from the content. If you make a site first then you will be forcing your material to fit in ways that aren’t logical or easy to navigate. That will diminish the site’s effectiveness and number of visitors. It’s simple, really. People won’t come back to a site that confuses them. They will come back to a site that has good content that is meaningful to them.

Chose your photos

Along with your text and media files you need to gather photos. A website without photos will have a poor impact. Making images ready for the web is a whole subject in itself. But getting the photos, charts, illustrations, or other graphics assembled is the first step. The next step is to sort them and decide what goes where. I recently got a CD with almost 700 images on it for a site. I and the client spent untold hours sorting through that pile to find the couple of dozen photos that we actually used. She didn’t save any time for herself, by giving me all the photos. She still had to go through them, but did pay for those hours of design time I spent in creating contact sheets and communicating just which photo (still with the camera generated file names) went where. Give your images descriptive file names while you’re at it. That makes figuring out which is which much easier later.

I’m currently within a day or so of design time from finishing 4 sites. All are built. The pages are in place. The navigation is set. But each site contains empty pages, waiting for the client to get me the last bit of content. This is so common that we make jokes about it in the office. Don’t be the butt of a joke. Create or gather your content first and your site will be up quickly.

I’ve got my content, now what?

If you have your content assembled or at least a good list that lays out what you will need to create or gather, along with a timetable that makes it firm when you will get it, the next step is to plan your site layout. What will go where and how will your visitors find what they need? What we’re talking about is site structure. How can your content be logically grouped into meaningful sections, categories and subcategories.

Your Site Map

A professional web designer might create a handy dandy site map for you, with cool colors, arrows, and graphics. It’s good marketing to make all content that the client sees look nice. But you don’t need to do that for yourself. There are simple alternatives that work just as well

• Outline everything with bullets. Place subsection pages in a secondary, indented list.
• Use a yellow pad and pencil to draw boxes and arrows.
• Use a spreadsheet to divide content by category.

I’m sure there an numerous other ways to diagram or outline your page structure. Lay it out with Lego if you want. This will give you the idea.

Wireframes

What the bleep is a wireframe? It’s the jargon web designers use to describe what goes where on pages. Where does your logo go, your tagline. Where will you put your navigation, AdSense ads, banners, contact information. Where will the main content for you pages be placed. Are there repeatable ads, sidebars, etc. on your pages. Draw them out. You shouldn’t worry about making this part pretty. We’re still framing your web pages not putting up the wallpaper yet.

Don’t get tricky with your page layout. Standard web page layout is what your visitors expect. I guarantee you that if you come up with something new and clever you will confuse your visitors. You say you are making an art site? Great. Art if for you. A logically laid out page is what your visitors need. Put things in normal places and label them well.

Designing your site – finally

Believe it or not, you are more than half done with your website now, without touching a web design program. The vast majority of unfinished sites don’t bog down because there is no design for the pages but because there is no content.

You have undoubtedly seen the dreaded Under Construction image. Write that site off right now. It will never get done. Just as bad is the Check Back Soon notice. Once your basic site design is translated to HTML it is trivial to put content in your pages and style it. Modern web design programs will hide most of that nasty old code from you. You will edit your text much the same way you do in a word processor like Word.

Starting the actual design

My first advice is simple. Don’t try to design a site from scratch yourself. Don’t do it. Your site will look amateur and home made. Even if you are experienced with graphic design, the likelihood of your creating a modern looking and functional website are low. I know several very capable graphic artists, people who are Quark or InDesign wizards, who can make Photoshop and Illustrator jump through hoops, who can create brilliant brochures or magazine layouts. Not one of them can create a quality website, even though they advertise web design and do take unsuspecting client’s money for doing so.

Don’t get me wrong. An attractive website will work much better than an ugly one on a number of levels. But too often graphics designers who haven’t studied web design create the dumb blonds of websites. They may be pretty but fail in accessibility, usability, search engine optimization and including modern web feature like interaction, and connectivity, RSS feeds, database connections and so much more. Don’t worry if you don’t know what all that means. Graphic designers don’t either. Web design is an incredibly quickly evolving discipline, one that even dedicated professionals have trouble keeping up with.

So if a professional graphic designer can’t make you a good website what chance to you have of creating one from scratch on your own? Slim, slimmer and none. Should you give up now? Not at all. You have lots of options. I just don’t recommend a home made design, unless you are more interested in learning web design than in creating an effective website.

Interlude: The evolving web

A digression is in order here. The world wide web started with what are now called static pages. They were pages of simple text, formatted with a simple formatting language, HTML or hypertext markup language. The hypertext simply means pages have the ability to link to other pages. You can consider HTML as a sort of longhand word processing. You want to define a paragraph? Wrap p tags around it. There’s really not a lot to it. Learn a couple of dozen tags and some attributes for them and you can write a web page.

Back even just ten years ago that was good enough. The web design started to evolve as a profession. And to differentiate themselves from the non-pros, web designers began to make ever more sophisticated designs. Then to add more functionality to sites, designers began to connect them to databases via complex programming languages. A competent modern designer will have at least a bit of familiarity with a couple of programming languages, HTML, a quickly evolving styling language called CSS, as well as having a solid design background and an understanding of the architecture of information and interaction design. Yes, it’s a lot, and no one is expert in all the fields but needs as least a smidgen of background in each.

What’s the answer?

The simple answer is to use the expertise of web professionals, some of whom have put a lot of clever thought and effort into hiding the mechanics of web sites from the end user. You no longer need to be a mechanic to operate a car. Once you would have needed to be one. You let the manufacturer make your car and you mechanic maintain it. In between you go a lot of places in it and make it do pretty much what you want. It is becoming possible to do the same with websites.

Use a ready made web system, add your content and bake your site. If you want a custom design, hire a pro web designer. Have him or her connect that design to a content management system and spend a short time learning to use it. You are in control.

If you are happy using a pre-packaged design and tweaking it some, adding your own logo and photos, you can even skip hiring the designer, or pay one a lot less to handle only the technical parts.. These pre-packaged designs are called templates and the better content management systems offer you a number from which to choose. Many are pretty awful but some are surprisingly attractive.

In the next installment we’ll get into some website options that can get you online with a minimum or grief.

It took me years to realize how much time I would save by setting up a default type styles sheet for my web design work. It wasn’t until I read an introduction to Ruby on Rails in 2005 that I got the whack on the side of my head that woke me up. The concept that broke through my time wasting behavior was DRY. Yes, technical writing is usually dry, but in this case it is an acronym for don’t repeat yourself.

Obvious, you say; and you’re absolutely right. Perhaps it was simple laziness that stopped me from seeing the light. It doesn’t matter. I finally realized that it was time to write out some the common CSS selectors and some standard values. Now at least I am being smart lazy buy using a standard type styles sheet instead of stupid lazy by needing to recreate the same content over and over.

What follows is my default CSS style for HTML with many and probably excessive comments. Most of the less than obvious additions are intended to handle Internet Explorer’s (IE) less that stellar handling of CSS. I won’t include any outright hacks but you will definately see some kludges, starting with html.

Technorati Tags: puppy

html {
font-size: 100%
} /* this may not be necessary anymore but it handles an old IE problem with displaying combinations of percent and em sized fonts correctly. */

* {
margin: 0; padding: 0;
} /* This sets the default margin and padding of all page elements to 0 giving nice control over every page element. I can eliminate a lot of head scratching when trying to figure out why things don’t line up. Zero it all and start from scratch. */

body {
color: #333;
/* Dark gray text against a white background. It’s readable without the starkness of pure black on white. Chances are this will be different on every site but this starts us out. These are the shorthand color notations. */
background: #fff;
font-size: 62.5%;
} /*This is a clever idea that sets the basic font size in modern browsers to something approximating 10 pixels. From now on all font measurements will be specified in em’s, a relative measurement that equals the size of a capital M. All page elements (almost) should now be 1em and will need to be individually specified. This allows us to over-ride the default browser style sheet and replace it with our own. */

th, td {
font-size: 1.2em;
} /* Another IE kludge. It doesn’t inheret font sizes from the body as it should. Ideally you would include all text within table cells in a p tag. Practically, I forget sometimes, especially when I’m populating a table dynamically. */

th {
font-weight: bold;
text-align: center;
} /* This is probably redundant but explicitly setting all values is what this style sheet is about */

h1, h2, h3, h4, h5 {
font-weight: bold;
font-family: Georgia, Times, serif;
/* Obviously this is arbitrary but if I put it in to start with I won’t forget to set the font family. Change to suit. A shorthand version would be font : bold georgia, times, serif;*/
margin: .1em 0 .5em 0;
/* a tiny top margin and a smaller bottom margin than default. 0 margins for left and right *}

h1 { font-size: 2.4 em; } /* Twice the size we’ll use for paragraphs. Remember that all font sizes have been reset to about 10 px. This makes the h1 element about 24 pixels large. */

h2 { font-size: 2em; }

h3 { font-size: 1.7em; }

h4 { font-size: 1.4em; }

h5 {font-size: 1.2em; }

p {
font-size:1.2em
/* This makes the default font size about 12 pixels, which is a good compromise between compactness and readability
font-family: verdana, helvetica, sans-serif;
/* Again, this is arbitrary, but sans-serif fonts tend to be easier to read on screen than serif ones. It also stands out nicely against the serif Georgia */
line-height: 1.5em;
/ * to create some breathing space between lines in print design this is called leading. 1.4em is also nice. */
margin: .1em 0 .7em 0;
/* top margin very small , left and right margins 0, bottom margin a little less than browser default */
}

li, li li, li li li, {
font-size: 1.2em;
line-height: 1em;
margin-bottom: .5em } /* All the li selectors are included to keep list elements from becoming progressively smaller as they are nested. That’s a gotcha when using relative sizes for font display. Three levels are all that you would practically encounter and I didn’t use the li * selector because I sometimes include other HTML inside of lists */

ul {
margin-left: 1.8em;
} /* Remember that we zeroed out all margins and have to specify them for each element. This is a good average value */

ol {
margin-left: 2.1em;
} /*Ordered lists need just a bit more margin */

blockquote {
margin-left: 2.2em;
padding: .2em;
background: #efefef;
border-left: 1px dotted #ccc;
} /* First, the left margin. That’s all that’s really needed here. The other selectors are one common way to set blockquotes off from the rest of the text. This gives them a very slight background color and left dotted border. Obviously this is a great place to set your own styles. Again, I include a default to so I don’t forget. */

dl {
font-size: 1.2em;
} /* New element. Need to set font size */

dt {
font-weight: bold;
margin-bottom: .4em;
} /* I like definition terms to stand out, hence the bold font-weight. The bottom margin is to separate the term from its definition.(The dt margin is not additive with the top dd margin. It will be .4em not .6em) */

dd {
margin: .2em .5em .4em 2em;
line-height: 1.3em;
} /* just setting the breathing space around the definitions */

input, select {
font-size: 1em;
} /* This is my personal preference. Your milage may vary */

label {
font-size: 1.2em;
}
/* You are using labels for your form elements, aren’t you? */

hr {
margin: .2em .1em .6em;
}
/* Just a little breathing room for the horizontal rule */

cite {
font-style: italic;
}
/* Probably redundant. Here for completeness */

abbr, acronym, .help {
border-bottom: 1px dotted #333; cursor: help;
}
/* A little touch that sets acronyms and abbreviations a little dotted underline and possibly a tool tip. I’ve added the class help for times when I want to define something. is used in conjunction with the TITLE attribute on an ABBR or ACRONYM tag, or a SPAN with class=”help”, to create an underline effect that is different from the hyperlink underline. Changing the cursor to “help” implies that the word is not clickable, and the TITLE attribute expands the abbreviation or acronym.*/

img {
border: 0;
}
/* Older browsers will place a border, in your link color, around a linked image. Just say no. */

a:link {
color: #036;
text-decoration: underline;
}

a:visited {
color: #603;
text-decoration: underline;
}

a:hover {
color: #900;
text-decoration: underline;
}

a:active {
color: #c66;
text-decoration: underline;
}
/* These link attributes will almost always end up being changed. If they are here I’ll always know where to find them. BTW use them in this order. Having everything in the same place every time makes things simple. I guess the complete instruction would be KISS; DRY. (keep things simple stupid; don’t repeat yourself) */

/* This concludes the default HTML section. Not that many elements, are there? Below are selectors and classes that I usually throw in for completeness. */

.imageleft {
float: left;
margin: 2px 4px;
}

.imageright {
float: right;
margin: 2px 4px;
}
/* With strict XHTML we aren’t supposed to use the img align attribute. Creating a couple if classes that float the images left or right lets us achieve the same effect and validate. The margin setting replaces v-space and h-space. These classes are only used for image placed in the document flow, not design elements, so I will assume they need the space. */

.floatleft {
float: left;
width: 200px;
padding: 5px;
border: 1px solid #ccc;
text-align: center;
}

.floatright {
float: rigcht;
width: 200px;
padding: 5px;
text-align: center;
}
/* What’s the difference between these and the .imageleft/right classes? These floats are intended for callouts or images with captions. Notice the explicit width, border, text centering and padding. The widths and borders are arbitrary and will be adjusted for each layout, or not. They are there. */

.clearing {
clear: both;
height: .1%
}
/* Once we start using floats or even right and left aligned images it becomes useful to be able to clear text below the floats or images. Depending on your layout you may also or need to use clear-left or clear-right. */

td { padding: 3px; }
/* Again, this is using CSS to replace a depreciated attribute, in this case cellpadding. If you want cellspacing use margin instead of padding, or both if you want both. I’m assuming here that you are only using tables for data. If you’re still laying out your site with tables, obviously you would want to set margin: 0; padding 0; for table, th and td. This should inherit from the body * selector, but isn’t reliable in all versions of IE. It’s also usually best to give each table a unique id or at least a class for setting width in CSS instead of HTML. */

.red {
color: red;
}

.green {
color: green;
}

.smaller {
font-size: smaller;
}

.larger {
font-size: larger;
}
/* It is often useful to have a couple, or more, font sizes and colors pre-defined. Some people use .warning or .caution for the .red class and .success for .green. It is supposed to be express the meaning in the code. Whatever. Colors for warnings should be supplemental information, not something you rely on.
With a good friend who is an avid web user and who is quite color blind, I’ve learned to not rely on color for warnings. Color is good information for most of us but shouldn’t be the only indicator of problems. But still colors can be helpful supplements, or just fun. We all know that red shoes make us run faster, don’t we? My boss’ 10 year old daughter told me that recently. It’s helpful to define a couple of color classes that compliment your design and include them in the style sheet.

I have set up content management systems for a number of client, and have clients who use Adobe’s Contribute. With a little extra work I can disable all their font size and color changing ability and only leave them with my choices of color and size. Never trust a client’s good taste or sense. Give them a couple of customization choices and they will normally be happy and won’t cry for more control.

/* ************************* */

That’s pretty much it for text display. CSS layout is another subject, as is CSS for forms. Fortunately the parts are additive. Start with text display. Customize your own text stylesheet and save hours on upcoming projects. And having a pre-defined stylesheet will help insure that you don’t forget something that will need fixing later.

I’m using Yahoo’s Grids for my basic CSS layout. Their system is a little verbose but seems pretty bulletproof. The Grid templates will give you a solid page layout but you will still need to style them. That could take some hours the first time out. Still, it seems the best generic CSS implementation around. You might want to check that out.

Read them and improve your site.

Mostly when non-designers want to over-ride conventions it is just from ignorance. Then again, you’re right that we do need to pay attention to their concerns. There are at least two relevant situations here:

One is that professionals get caught up in self-righteousness and the fad of the moment. We all do it. Stating that, “I’m the professional and I know best,” is at best problematic and at worst, plain wrong. It is so easy to get caught up in our little world that we lose site of the ordinary person, even while claiming that is who we are championing.

The other concern is with wisely choosing your battles. The client wants, “Click here.” Does click here really hurt the page if it is included in a longer text link like, “To learn more about our XYZ Neon Widget, click here?” Redundant? Arguably. Inelegant? Absolutely. Harmful? Not really. This is a small compromise that won’t harm a site, simply make it marginally less sweet.

These types of problems are seldom binary, this or that. Bending a little in non-crucial areas builds a relationship that will more likely survive a “No, I will not do that,” situation. Being flexible enough to both build quality sites and incorporate a client’s wishes is a far more important skill for the professional to learn than simple technical competence.

On the other hand, if there are truly major technical, accessibility, etc. concerns, it is also important to be able to say, “I don’t think that we are a good match.” I did that twice this year. The first time the client was shocked enough to actually listen to my position. We reach a compromise that we could both comfortably live with. The second time was simply a relief to me and most likely to our no-longer-client. My boss trusts me enough that I had her support in this.

There are situations that experience teaches will come back to haunt us. This is less a web design problem than a business one. A client who insists on building a dysfunctional web site will only blame the designer later, even if the problems are ones the client insisted on and signed off for. “I told you so,” never makes a client happy.

It is an interesting phenomenon that the less tightly one holds a position, the more ease there is in finding solutions.

I don’t know what’s on your site but in at least 9 out of 10 cases the answer is, you need better copy, better descriptive text. I’m not saying that great design, innovative features, search engine optimization and clever movies won’t help. But if you want the most effect for the least effort, go through your web copy and clean it up.

For one thing, concise, clear, well structured, descriptive, focused, appropriate copy will go most of the way toward making your site search engine friendly. For another, it will make your site easier for people to use. Friendly is good.

Let’s go through those points one at a time.

Concise

Short is good. People scan web pages so short sentences make scanning easier. Bulleted or numbered lists make scanning easier still.

Give people a quick overview. There may be a call for extended descriptions, essays or other information, too. Great. Don’t lead with them. Give people the short version first, then offer extended descriptions as an option. A serious customer will go back and read them. A first time visitor, serious or not will generally ignore seas of text.

The same should be said of policies, procedures, mission statements, letters from the founder, president, CEO, staff biographies, company history and other assorted non-essential information. It can all add value to a visitor’s browsing experience but gets in the way of what most people come to your site for.

Clear

Avoid “corporate speak” at all costs. If you can’t find the word you are using in a defined the way you are using it in a reasonably current dictionary, it’s jargon. Don’t use it.

Let’s take a real example from a web design firm.

“Utilizing Web 2.0 strategies, maximize bottom line potentialities through synergistic interaction with your clients.”

Huh? I understand the meaning of all of those words individually, but can only guess at what the sentence trying to convey.

I believe they are saying that a modern website will help your business. Isn’t that obvious? You wouldn’t even be visiting their site unless you knew that you needed either an update or a new website of your own. We already know that a business website is about increasing sales and keeping existing customers happy. What value does their statement add to their site?

Wouldn’t it be more clear it they had said, “A a current site is more effective than a dated one?” Again, this might be obvious, but at least it acknowledges that you know a website is good business and it is understandable.

Well Structured

The clearest, most concise writing is an outline. Now reducing your website to an outline is going a bit too far. It is, however, a good concept to keep in mind while you are writing. Outlines are structured. Similar ideas are grouped. Sections go from general to more specific. Each level of concept is essentially a headline for that section.

Structuring your content in an ordered manner and using the appropriate heading tags for sections will make your information more readable for people and will make Google very happy. Search engines love well structured content.

Descriptive

• What does your product or service do? Specifically?
• Who does benefits?
• Why should I care?
• What real world problem does it solve?
• Why is your product better for me than your competitor’s?
• How much does it cost?

And the list goes on. This should give an idea of some of the questions that your visitors will be asking when they visit your site. Is it easy to find the answers? Is it obvious how to find the information?

I recently evaluated several Mac outlining programs. Some of the software sites were great, one had almost no information, suggesting that I download the program and see for myself. I didn’t.

In the comparative shopping phase, I’m going to look at feature lists. I’m not going to take the hours and hours it would cost me to download all the programs and try them out. Kicking the tires comes much later in the buying process. Give me facts: List features. Show screenshots. Link to reviews. Make product documentation available.

Increased sales? Yeah, right. How? Tell me that your display rack will increase impulse buys at the cash register. Okay, that sounds reasonable. Tell me that XYZ company used your product, and how, and got good results. Hey, that’s interesting.

In fiction writing there is a well known instruction: show don’t tell. Offer specific ways that what you have will benefit customers. Vague terms like increase sales, better productivity, enhanced customer relations don’t cut it. Every product intends to help. Take that as given. Tell your visitor specifically how you will help out.

Focused

What do you want your website to do for you? Do you want to sell directly. Then focus your words toward enticing people to make a purchase or try your product out from every page.

Do you want people to contact you? Can they do so from every page? Does your text focus on having people contact you or leave information for you to contact them?

If you are selling a service or product, every word should be intended to get me interested. Does a company mission statement do that? Probably not. Make it an optional link.

The single most common mistake people make is to write their copy to satisfy themselves instead of the customer.

Appropriate

Who is your website for? If you are a rap artist then your language is going to be specific to a sub-culture. It would be the same idea, different language for an opera singer. If you have a music store that sells CDs for both genres then you need to be much more neutral in your word choice. The wider your audience the less quirky or in-group specific your language.

This is a matter of knowing your target market. If you are selling lavender soap then you are going to want to sell the romance of your product. Feeling words would work best. If you are selling programming software then you need to focus on technical benefits. The same person might buy both products but will be in a different frame of mind when shopping for each.

Wrapping it up

This is a lot to remember. It’s amazing how much work it can take to make something appear simple. We’re talking simple, not simplistic. This isn’t about dumbing down a site but making it the sharpest tool possible.

It all starts with having a clear idea of what you want to accomplish, then offering just enough easily digestible details. Offer non-essential information as a side dish. Write appropriately for your intended audience and avoid jargon, unless you are targeting a specific market that appreciates it. Even then, it is important to highlight tangible benefits and avoid generic and meaningless statements.

I picked this book up at the WebVisions conference after attending a session of the same name that Dan Cederholm gave. My original intent was just to see Cederholm in action. He is one of the current “rock stars” of web design, at least among the web standards crowd.

When I was listening to his talk I was thinking that this is so obvious, maybe I was wasting my time. It was only later that I realized that it was only obvious because Dan is such a good presenter and made his concepts logical and easy to understand.

What is “Bulletproof Web Design”? Mostly it is a set of best practices that help make sites work under less than ideal conditions. Consider, what happens if your site visitor has images or JavaScript turned off? Perhaps the visitor has an older computer running an old browser. What happens if your style sheet fails to load?

Here’s a quick experiment. Right now push the command (Apple) and + keys. The text all got bigger, right? Hit the command and – keys and it gets smaller. This page looks alright if you only increase or decrease the size once, but if you up the size twice, the top navigation bar starts to look a little bad. Do it three or more times and gets pretty awful. Even though my template validates as XHTML Strict, and most of my content is structured symantically, it is not totally bulletproof. I failed to account for the effects of text resizing when I designed the nav bar. A bulletproof design would have considered this possibility and designed the page so it would still look okay even when not view the way I designed it.

As my middle-aged eyes now require me to use reading glasses for normal sized text, I will often increase the font size on a page instead of reach for the glasses. I’m not alone in that. And that’s just one example of how a page could be designed to cover contingencies.

I took the first few steps toward bulletproofing the design. The code validates. Content and design are separate, The site works with CSS and images turned off, but I failed to take the next step from standard best practices to bulletproofing. I placed an unresizable background behind resizable text.

So, a bulletproof site is one that is well coded, structured and takes into account a reasonable range of non-standard viewing possibilities. It has some breathing room and considers possible “what happens if?” scenarios. In my case I could have designed the page with a larger background image behind the nav bar that would have given the appearance of stretching to contain the text of the links.

Other cases consider what happens if the content changes, text or images? What happens if images and/or Flash, JavaScript are turned off. Is the site still usable and if it’s usable, does it still look good? How does the page look in a new, very wide screen? How does it look on an old small screen, or even a cell phone?

Creating bulletproof sites requires both thought and knowledge HTML and CSS, so is not going to make much impact on the pure “design it so it looks good and to hell with the visitor if she doesn’t like my way crowd”. And those who don’t want to take the time to learn the craft won’t even know that bulletproof design is possible or why it is needed.

The book is excellent, well written, clear and lays out the concepts in a step-by-step manner that makes the concepts easy to grasp. If you have a decent understanding of HTML and CSS and want to take your designs to the next level, get a copy. To quote John Alsop of The Dao of Webdesign:

“The journey begins by letting go of control and becoming flexible”

_Bulletproof Web Design_ will make you a more flexible web designer.

This kind of piece is what I like to see, thoughtful and informed, unlike the FUD (fear, uncertainty and doubt) that some security “experts” spread. But then it must be difficult making a living writing Mac AV software or acting as a security consultant. That’s no excuse for deliberately misleading the unsuspecting, of course, but I try to remember their position when I get angry with the fear and loathing that sometime arises in security discussions.