Can Your Website Look Too Good?

I'm not in favor of DIY web building, as a general rule. But I had to make my faculty website this week. Have you seen many faculty websites? They're pretty horrible. Having one of the designers I work with make me a really nice website would really just look like showing off. Kind of like going to a party where you know everyone else will be in jeans and wearing a suit.

This is probably the only case in which it's possible to have a website that looks too good. In fact, it might be a case in which you're just working with a different genre. I mean, I'm trained to sing opera. But I don't use my opera voice when I sing with friends around the campfire. It would just be strange.

Equally, having a professionally designed faculty website would look strange. On the other hand, I've got my name on the site, so I didn't do what faculty members are advised to do by the school's IT department: write up a Word document, automatically transform it to html, and upload it with FrontPage.

I'll give any passing web workers a moment to recover from the shock of that.

Many faculty members then get overcome with ill-advised techno joy and do things like put in a tiled background, center all their text, and try out many different fonts and colors for their text. When they're through playing, they call the IT department for help getting the page into cyberspace and ignore it for the rest of the year.

I couldn't do that. I needed a middle path. So I hauled out my web design books and software and made myself a website. It's not good enough to look like I'm showing off, but neither is it bad enough to embarrass me.

So, in case you're determined to make your own website, no matter how many times I tell you to have it done properly by a pro (and maybe you have a reason for wanting your website not to look that good), here are some resources that I found useful while I did mine:

• Adobe Dreamweaver CS5 There are other software programs available, and of course you can build a site in Notepad if you actually know how to build sites. I've done it myself. However, I still really like Dreamweaver, because it closes my brackets for me, saves time on things like inserting images and getting columns nicely planned, and assists with FTP. 
• If you're really determined to use a point and click automated web software, I'd suggest Serif's WebPlus X2 Website Maker, or the newer version of the same program. The templates are not bad, you have more control over the results than with most such programs, and it's certainly easy. I didn't end up using this program because I had an idea already and I couldn't quite get it to make just exactly what I wanted. However, the results with this program are miles better than the typical faculty website.
• Adobe Dreamweaver CS5 on Demand I've used quite a few books about Dreamweaver, but this one has the clearest layout. Nothing really about how to make a good website, but when you're wondering how exactly to detach a template or insert a spry widget or something, you can look just at the page in this book that covers that one topic and find the answer. The steps are all laid out in the sidebar, with more explanation and screenshots on the pages in case you get confused.
• Head First Web Design This is my overall favorite general book on web design. It covers everything that's likely to come up, and it does so in a clear and interesting way. If you want just one book, this is a good choice. 
• Head First HTML with CSS & XHTML In case you'd like to know the languages you'll be using better, this is a good companion book to the first one. Like all Head First books, it's a massive tome, but everything in it is important. (There'll probably be a new edition along soon for HTML5, but this one is still current enough, I think.)
• Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition I like the Head First series, but some people find their approach too cute or too busy. An alternative is Ian Lloyd's excellent step by step guide to building sites. It's very clear, and more scannable than the Head First books. Cheaper, too. 
• Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition Moving on from how to make a website to how to make a good website, this book is an excellent basic manual on usability. If you plan to have anyone else use your website, read this book. 
• White Space is Not Your Enemy: A Beginner's Guide to Communicating Visually through Graphic, Web and Multimedia Design If you have any desire to make your site look good, this book will help you avoid the most common problems and gain a more discerning eye. Designer Sean Borsodi told me recently that you're not supposed to just move things around till you think they look good, but should instead have good reasons for all design decisions. If you aspire to this standard (I don't, but then I hire designers), this book may be your best friend. 
• Get to #1 on Google in Easy Steps I'm glad to see a good basic book on SEO; for years, there just weren't any. If you're determined to make your own website, follow the advice in this book to optimize it for search.

As for the image at the top of this page, it's not a real faculty website. I didn't want to show any of the sites I found online, because I don't want to ridicule any of the excellent teachers who are sporting horrible sites. I just slapped together something comparable. Sigh.

What Can You Do With a WordPress Theme?

In a word, a lot. Here you can see two examples created with Thesis, one of the most popular WordPress themes. The one below is currently on the site. The one above is designer Jay Jaro's idea about how to take the same site to the next level. The two have the same content, the same navigation, the same concept, and just about the same color scheme. The client likes his site and didn't want big changes, so Jay maintained the overall look and feel.

And yet the two examples really are quite different. Jay has created a number of new graphics that will fit into the spaces of Thesis and give this client's particular Thesis site a completely different look from the other 27,000 Thesis sites out there.

This is the Studiopress demo for their Allure theme.

And here is our educational blog using Allure. Jay created some of the graphics for this, and Shan Pesaru of Sharp Hue did the installation and remaining design work. We do our own updates, including the graphics. When you compare our version with the demo, you can see that we have things in the same places, but our content and color scheme are quite different, so the overall effect is different.

I'm going into detail here because I've seen that many people, when they choose a WordPress theme, find it hard to look past the images or the colors in the theme's demo or example screenshots. When you choose a theme, it's best to look at it as a group of boxes (and often boxes you can move around if you feel like it).

The examples here (and all the WordPress themes we work with) are premium themes on their own domains. You usually have more flexibility with premium themes than with free ones, and the free WordPress.com sites don't allow you to change the CSS (the style). But even free WP themes can often be changed in a variety of ways.

A WordPress site built on a purchased theme is not a custom website, but don't underestimate the flexibility of this approach.

Increasing Response with Good Form Planning

The image above is the current response form at a website I'm working on. I sent suggestions for it along with my site content rewrite.

The client called to discuss it. He liked his form.

"You're asking for a lot of information from them," I pointed out, "without giving any of your own. Especially since you go to people's homes for your service, they'll feel better about telling you so much about themselves if they see your name and address. What if you met someone and they asked for your name and number but wouldn't share theirs?"

"When you put it like that..." the client said, agreeing to make some changes. He hadn't thought of it in those terms before, but really that's exactly how we ought to think of it.

We compressed the form a bit so there would be fewer questions to answer, and made just a few into required items so people could see that they had the option of filling out just a few forms. Where the form now has two boxes to click, one for a consultation and one for a newsletter, we changed the phrasing to be both more inviting and more informative.We made the opt-in and privacy announcement friendlier and less daunting.

There are two buttons on the original form at the bottom: "submit" and "reset." Many site owners don't realize that buttons like these can say anything. "Submit" and "reset" may remind modern users of filing their taxes. Saying, "Yes, please!" or "Subscribe" sounds more positive. The "reset" button is hardly needed at all nowadays for simple forms, since most users know how to change data in their forms. In this case, we went with "Send" and "Clear."

The result is a Contact page that is more likely to encourage users to send the form.

Small Changes That Will Transform Your Website

My company specializes in web content. We do copywriting, SEO, web strategy, online marketing, social media -- stuff like that. But sometimes when someone comes to us for content or SEO changes to their website, they need design changes. And sometimes the smartest thing is just to start over.

This issue arose at the Amazon affiliate forum. People often come to ask for advice about their websites, and in one case an honest individual said, "Hire a designer." I said that was good advice. With thousands of excellent websites online, I said, there's no reason for anyone to choose to shop at an ugly one.

It's possible that this was tactless of me.

Someone else came along and castigated me. This, she said, didn't constitute useful advice. If I could see something wrong with a person's website, I should give them some good advice, not tell them to hire a designer.

But, you know, sometimes there aren't any small changes that will fix the problem. Take the website Tom and I are working on right now. This is how it currently looks:

Now, there are specific changes a person could make. Getting the photos from the bottom of the page to where people can see them, switching to a more standard style of navigation, breaking up the text so the lines aren't so long... But the truth is, doing each of those things and yet keeping the basic design wouldn't result in an attractive website.

Since the code was also outdated and the content needed work, it makes sense for the client to start over. We sent a photographer to get attractive new pictures of the client's office, showing the care they put into their building and the up to date equipment they use, as well as the friendly, professional staff. We wrote new text that would help new patients find the company. We fixed the site to deliver forms as PDF downloads, a move that fits better with the office's workflow than their previous arrangement.

You can see the new site's mock up at the top of this post. The redesign will transform their website. The small changes? Nope.

If you're investing time and money -- even if it's money in the sense of the money you could have spent doing something else with the time you're putting in -- on a website, you should be honest with yourself about its overall quality. There are a lot of posts at this blog about small things that really will make a difference to your website, if the basic foundation of the site is good. I'll list some of them in a minute.

But first, before you put time into making those small changes, ask yourself -- and someone else if you can't tell -- whether your website is good enough now that small changes will do what you need to do in order to get your money's worth from your site. If you decide that it's pretty good overall and just needs some tweaking to perform the way you want it to, then have a look at these posts. One of them may be just what you need.

• Making Your Blog Look Good
• Small Changes Make a Difference for Search
• Above the Fold
• Maybe Your Website Doesn't Need a Redesign
• The Golden Ratio and Your Website
• Vocabulary and Your Website

If Your Website's Customers Are Not Tech Savvy...

Everyone needs a website, it's true. Even if you know that your typical client isn't that comfortable on a computer.

But what should be different about your site if that's the case? I recently had an opportunity to observe a number of unskilled internet users. Here are some behaviors I noticed:

• They're not good at search. These folks typed searches into the address bar and URLs into the search bar. No problem; the major search engines can handle this. But skilled users will try  a search and, if it doesn't work, refine it. Unskilled users will give up. This means that you must show up well for the first thing your unskilled users think of.
• They read the page. Skilled users start scrolling and clicking very quickly. Unskilled users fold their hands in their laps and read your site as if it were a book. They're less likely to leave and go to another site right away -- but they're also less likely to click further into your site. Get your goods onto the home page.
• They're confused by fancy stuff. While unskilled users may be more impressed by flash intros and more receptive to things that happen automatically, they may not be able to figure out how to use your gallery, or how to get back to the main page after clicking something. I heard a lot of things like, "How do I get out of here?" If you have an unskilled audience, think twice about using mouseover or interactives.

So how can you tell whether you're likely to have technologically innocent customers? We don't want to stereotype, but consider this possibility if you have older customers. Also check Google Analytics for the browsers being used; people using older browsers are likely to be people who don't know how to get themselves a new one.

Galleries for Your Website

Putting a lot of pictures at your website can destroy your design, make your page load slowly, and prevent you from using the amount of text you need to optimize your page for search and conversions. Using Flash to avoid lots of images can be even worse. Fortunately, there's an alternative. Galleries can let you put lots of images up without the consequences of older methods.

There are a lot of different kinds of galleries. I'll show you some examples from sites I've been working on. First, let's consider the automatic type -- like Flash galleries, they show one image after another to visitors, if they stay and watch.

Here's the FreshPlans blog. It has quite a few images already, plus video, but the gallery lets me add five large images in rotation. One image fades into another -- I think that if you look closely, you can see the Tiger Lesson Plans coming up through the Fungus Lesson Plans in the screen below, or of course you can go to FreshPlans and check it out.

This particular gallery is the Featured Content Gallery by iePlexus, a WordPress Plug-in.

You can get fancier. Clevertech's site redesign uses CU3ER, a slider gallery which makes the image look as though it's a group of blocks being turned like Rubik's cube to show the next image.

Blue CedarMarketing uses a slide deck style of gallery with numbered images. Visitors can click on a particular number if they care to, or the whole deck will slide across in order, shuffling back quickly at the end.

Tom Hapgood made a gallery for Ozark Natural Foods that is mostly hidden under a translucent sheet. Visitors can choose to lift the sheet and browse through the photographs, or they can skip it.

Tom made a different type of user-controlled gallery for Bill West Roofing's site (about to launch). With this one, viewers see a large number of thumbnails tiled on the inner page.

When they click on one of the smaller photos, it enlarges and the screen darkens.

Talk with your designer about the various options if you want to try a gallery. Make sure you have alt text for all the images, and optimize the gallery for load time!

My New Favorite Design Book

One of our current web design projects is being enriched by a client with absolutely no design sense at all. The experience is a little like this, but much more fun, because the client is a fun person.

The thing is, we can usually show the client a new design and expect those oohs and ahs showing that the client, while he or she might have been okay with that ugly old design from the past, can now see how much better the new design is.

Not in this case. This is a client for whom things like balance, rhythm, proportion, and good taste are irrelevant. He may have paintings of Elvis on velvet on his walls at home. And that's fine. We love this guy, We want him to be happy, and if it makes him happy to have images stuck randomly onto his site --

No, I'm lying. We can't do that. We couldn't sleep at night if our website turned out ugly. So I want to add the book White Space is Not Your Enemy to the list of books I'd like to give clients. (The other book on that list is Don't Make Me Think, in case you were wondering.)

This book is written for beginning designers, and in fact probably for design students (the authors are teachers, and the chapters have assignments in them). But it's all about eye training. And mind training. It has scads of good examples of design, and some bad ones, too. It lays out the rules for making images and words look good together, and has some thoughtful discussions on how to break those rules.

In the very first chapter, is has a list of things good design should do:

• capture attention
• control the eye's movement across the page or screen
• convey information
• evoke emotion

Isn't that great? Your website should capture people's attention and make them want to stay instead of clicking right back to the SERP. It should help them find the call to action, and also the information they need and want; in fact, it should guide them unobtrusively through the user experience you have in mind for them. It should contain that information they need and want in a readily-available form. And it should give them the feeling your company gives your customers.

The book includes explanations of things like contrast, balance, and movement. It answers questions like, "How do I know where to put my stuff?" It explains why centering everything isn't as good a move as you thought it was. It explains how to send graphics to your web designer, and what all that stuff about different browsers has to do with you and your website. And it does all of this in a friendly, easy format with lots of nice pictures.

If you're toying with building your own site, or you update your blog yourself, then this book will be very helpful to you -- you might even want to do the assignments. If you just didn't spend as much time in art galleries in your youth as you should have, and you often get the feeling that other people are seeing things you don't when they talk about how your suggestions would mess up the design -- well, this book will give you some insight into what they're thinking.

I won't really be giving this book to the client in question, any more than I give Don't Make Me Think to people who don't grasp the concept of usability. I love my clients just as they are. But I feel better for having gotten this off my chest.

Choosing the Website Concept

Choosing between a good alternative and a bad one is easy. Choosing between two good alternatives is something else entirely. Frankly, this is why I don't usually present more than one concept to a client; I'd rather get it completely clear beforehand and go with one confidently.

However, some designers -- and some clients--  like to start with a couple of choices.

Above, you  can see the current website of Kansas City area roofers Bill West Roofing.  Below you see the two options designer Tom Hapgood came up with for them. Chances are, you see immediately that the screenshots below are more professional, more impressive, more readable, and more attractive that the one above.

But what if you're faced with these two lovely designs and you have to choose between them? How can you make sure you're going with the right one?

Here are some suggestions:

• If you have a visceral response -- an immediate preference on no particular grounds-- go with it. If you second-guess yourself, you'll always wonder whether you made the right choice and never really be satisfied.
• Consider your target audience. The first version above is a bit more hip, with its diagonal lines and bird's eye view. The second one is a little more traditional, more like the original, current site. Many of the people wanting roof repairs and new roofs are older, so the second version might be a more comfortable choice for them. If Bill West wants to be the hip roofer in town, though, then the first choice would convey that feeling better.
• Relax. They're both equally good. Don't suffer over the decision. Flip a coin if you need to. As the coin spins in the air, you may realize which outcome you're hoping for. If not, then either one will work.

For websites, you pretty much have to pick one.  For other things -- brochures, headers, etc. -- I may go ahead and pay for both so I can have them both to use in the future.

Balancing Text and Decoration

You have to watch out with headings. It's very easy for them to become the entire focus of the page. This page, for example, has a space for a screenshot, which is the picture worth a thousand words for an ad for web design. Then where does your eye go? Probably to that heading, the gold bar with the huge arrow. That should be the place for the really important tag line or the benefit that will make you rush off to sign up with the company, right?

Actually, that heading says, "Some of the challenges we addressed:" Totally not worth it.

The powerful text on the page is going to be in the bulleted text that's hemmed in by decorative elements, and the little gold stuff above that fancy heading.

In this design, the emphasis is all on the decoration, and the text is likely to go unread -- it just looks too unimportant compared with the page decor.

Here's another example. The name and phone number of the company stand out well enough, but there's so much going on on this page -- including the heavy black bar announcing "Residential & Commercial" -- that someone looking for roof repairs might not get around to seeing that option on the right hand side.

The first example is more elegant than the second, but they both have the same problem: too much decorative stuff on the page.

Compare that with this website Jon Schleuss and I did. There's a decorative header composed of photographs, and we've got the organization's logo and some colors, but the text isn't overwhelmed. The headings -- both the colorful ones like "Meetings" and the bold text like "Welcome," draw the eye to the text, not away from it.

Here's another good example: a Sharp Hue site with a photograph, a logo, and a lot of shades of gray. The eye is drawn to the main points and the text stands out. You can find plenty of good examples at this blog, actually.

We've looked at bad examples with too much decoration. Can you have too much text and too little decoration? Sure. Does your web page or ad look like the page of a novel? You don't need an example of that.

The problem of too much decoration, or ill-thought-out decoration, is more common than the opposite problem, though.

First Thoughts on Typography for Your Website

The subject of typography at your website is a large one, and I'm not trying to cover it. I'm assuming here that you're not doing the design work yourself, and that what you need is enough information to recognize whether you have a problem, to choose a designer who has the skills you need, or to keep the updates you do yourself from making your site look bad.

Let's start with a good example and a bad one. The example above, from the work of Jay Jaro, shows basic things to look for in good typography:

• The left margin is even, and it's large enough.
• The decoration at the margin is balanced; the proportions are pleasing.
• The right margin, while ragged, is not excessively or distractingly ragged.
• The spacing in between letters and words is smooth
• The spacing between lines is enough for easy reading.
• The spacing between graphic headings and text headings and the main text is well proportioned.
• The decorative headings are still search-friendly text.
• When there is an uneven line, it's intentional and part of the design (in this case, the titles use a fun font that looks hand-drawn, and the title curves like a tiger's tail when it says "Take the Tiger by the tail").
• The differences in colors and fonts are enough to be interesting but not enough to interfere with reading.
• The design is appealing and in keeping with the goal of the page.

The second example, from someone who will remain nameless, has not succeeded in meeting that standard. The right edge is way too ragged, and the words are very crowded (note the top left corner of the sample piece -- sometimes there are no spaces between words at all, and there's a line containing just one word.

The graphic headings cut the columns in half. The spacing between the graphic headings, the text headings, and the words are unbalanced. The use of color and line is uninspired. And the graphic headings are images, so we lose some search advantages, too.

If you see this sort of problem at your website, don't despair. It just means that you need a designer. Find someone whose work is more like the first example than like the second one, and ask him or her to take the text and redesign it.

But what if you use a content management system, and you add content yourself?

Here's another bad example. We're fixing up this website -- not a redesign, since the owner likes the look, but a fix of content and usability, with some updates to the code and the look. This is an example where we're seeing some problems in the part the client does himself.

He's chosen light text on a dark background, which is fine unless you think you might have some older customers or visitors with limited vision. He's also chosen justified margins. That means that the program automatically adjust the spacing to make the margins even -- but look at the size of the spaces between the words!

You can only pick justified margins if you're willing to fool around with your wording and font sizing and so on to make it look good. In general, you're better off just choosing left-justified, where the words line up on the left.

If you really want to use justified margins, do as Josepha has done and keep an eye on it -- if it doesn't look good when you put it on the page, go back and change your words to make it look nice.

Finally, resist the temptation to have lots of variety. This example has trouble with spacing and margins as well, but much of the daunting effect of the page is the result of the variety of colors, fonts, sizes, and borders. There's nothing wrong with a little bit of variety, but the rule of thumb should be only to use something different if you have a reason to do so.

In the example at the top of this post, the main text is in a simple, easy-to-read font, black on a light background color. The designer then used another color in the text headings: bold, in a darker shade of the background color. The decorative titles at the top of the page are completely different; they, and the whole color scheme of the page, are based on the major illustration. In the bad example just above, we have different colors all over the page with no apparent plan or intention. There is no illustration, and no color scheme.

Flash: a Slice of Life

Have you ever noticed how hard it can be to get through a video?

A client wanted a blog post based on a video about new Adwords features, so I was trying to watch it and get all the information from it. There were screenshots and graphs...

Josepha IMed me to ask about macroevolution vs. microevolution.

So I had missed a screen, but it was okay -- I'd opened my own Adwords account page so I could follow along...

My son came in to discuss Descartes and his idea of the essential nature of physical bodies vs. sensory input.

Then Kuty from Clevertech appeared as an instant message.

I paused the video. I had sort of lost the thread by then anyway, and I like to be alert when I talk to Kuty. He once said to me, "You're not a developer, so you have to have things explained really simply." He meant it in a kind way, but still I try to pay full attention in case he starts in on Coldfusion or something.

It was at this point that Sean Borsodi, the new designer at Sharp Hue, emailed me to call him.

He wanted to talk about Flash. Not that this was the initial topic. It was more that he feels I'm unfair to Flash, so it's more or less always on his agenda to talk about. I wasn't taking notes, so this may not be a fully accurate transcript of our discussion:

Sean: Flash is fun and cool.
Rebecca: Granted. It's also bad for search and speed, and sometimes it's irritating.
Sean: Flash is fun. Let me show you some cool Flash things I built.
Rebecca: It's buffering...
Sean: It's the server. On all other servers it's really fast.
Rebecca: Still buffering...
Sean: Okay, go to this other really cool thing I built. See how fun it is?
Rebecca: Yes... the first time. But what if I actually wanted to buy something from these people?
Sean: Have I mentioned the cool funness of Flash?
Rebecca: Sure...
Sean: And also the fun coolness?

That wasn't really all that Sean said. In fact, he made some excellent points about Flash. Let me share them with you:

• You don't have to build your whole site with Flash to get the cool, fun aspects of it. Used in moderation, it can make your site fancy (and cool and fun) without slowing it down.
• Use html for navigation and get the text in, and then spice up other areas of the site with Flash.
• If you build them correctly, Flash sites can be updated by the client or later web workers just like html sites.
• You can have alternate content. Just as alternate text gives information about your pictures to the search engines and people who can't see those images, alternate content allows you to work around the search and access issues of Flash.
• Flash can increase the fun quotient of your site enough to keep people there longer.
• Much irritating Flash has simply been done badly, just as much irritating text content has been written badly. That's not the fault of the medium.

I like Flash in its place -- games, for example, or online toys. Sites that are themselves games or toys, or otherwise recreational. It can be terrific for educational uses -- I'd like to see it used a lot more at math education sites. And certainly, if you're selling Flash, you want some very jazzy examples on your site.

The Flash intro to your business site? When people are actively looking for something -- either a solution to a problem or an object of desire -- they want their stuff. They don't want to have to wait through your Flash. People who like and enjoy your animation may come and admire it (I like to look at Greenshires' fish sometimes, and I made Sean look at them, too), but they're not necessarily interested in the stuff you want to sell.

So, if you must have Flash, don't have it as an intro. If you must have a Flash intro, make sure it's easy to escape from it and move right on to the main navigation. Check out my post on "Website Music"  for more suggestions on this point.

I did eventually get back to the Adwords video. It was informative, but it wasn't fun, and it wasn't cool. It might have benefited from some Flash.

Analytics and Your Web Site Redesign

Industry expert Dave Taylor says that he's never arrived at a meeting about a site's SEO redesign to find clients with analytics data. Me neither, unless I bring it with me.

What kind of evidence do people bring with them?

Well, here are some comments from initial SEO site redesign discussions I've been involved in recently:

• "We should have more pictures of people. People like looking at people."
• "We need to do what [competitor] did."
• "We need something edgy."
• "We need it to pop."
• "Perhaps we need Flash?"

These may all be true statements about what these websites need. But, as Erika Andersen has pointed out, starting your meeting with statements about needs means you're jumping ahead to strategies before defining the problem or the desired outcome. It's the equivalent of saying, "Hey, let's try this!"

Starting with analytics allows you to see what's happening and compare that with what you want to have happen. For one of the sites in question, the owner defined the problem and the desired outcome by referencing the bounce rate (the percentage of people who leave the site without exploring further) from one source. He wants to keep those people hanging around the site longer. He's arranging for four pages with slight variations so he can test them.

For another, I've just installed analytics, so I'm not yet seeing a lot of information, but I can see that this 18 month old site appears to be averaging only one visit each day, and none from his service area. We can easily identify his immediate problem. Once we start bringing him some traffic, we can look at other issues, but making his site findable is clearly the highest priority.

So on the one hand we have

"In order to increase the ROI on our ad campaign with Site X, we need to improve the bounce rate for people coming from our ad by a) testing the effect of a suggested design change, and b) following through with the design that gets the best results" 

and on the other hand we have

"We need it to pop!" 

I hope the difference is obvious.

Inner Pages of Your Website

You work hard to make your homepage a thing of beauty and a joy forever, but how about your inner pages?

Your inner pages should also be things of beauty and joys forever. This is not just because you deserve a great website (which you do), but because your visitors may very well come into your site through an inner page.

The example above, designed by Tom Hapgood, uses the same background and navigation throughout, and puts the content of the various pages on an overlay that looks like a stack of postcards or a sheet of paper lying on the  surface. Someone searching for "grass-finished beef" who ends up on the products page can readily find contact information or the home page.

A slightly different approach can be seen int his refresh of Hatfield and Associates, designed by Shan Pesaru. The homepage, above, has a different image and a different layout from the inner page, shown below.

The navigation remains the same, though, and the color scheme and the overall feel. On this website, all the inner pages use black and white photographs. The contact information is also prominent on the inner pages as well as the homepage. You don't want your visitors to feel as though they've gotten lost.

We've seen sites that had inner pages with no contact information, no navigation bar, a completely different navigational structure, different colors and fonts, and even a different version of the logo. Bad idea. We've also seen website that made the inner pages identical to the homepage except for the content -- same image, same layout, just new words. Also not good -- okay for people who reach that page first, perhaps, but confusing for people navigating through the website.

Navigate through your own website and make sure it gives a clear and consistent impression. You'll be glad you did.

The One Question to Ask Your Web Design Firm

Here's the paper rocket ship I send to congratulate clients when their new sites launch. You're only getting a mere hint of its awesomeness in this snapshot, but I think it helps to capture the excitement of launching a great new website.

There's also the sad dismay of launching a mediocre new website. A poorly built site that won't do as well as it should in search or present your business as well as you hoped it would.

Katie York of Peacock Media asked me how to avoid that, when having a site built. After all, you get a chance to approve and make changes to your content, and you get to approve and make changes to a mock-up -- which is to say, a picture -- of your design. How do you know whether your site is good under the hood or not?

And more importantly, how can you tell ahead of time whether it's going to be good under the hood or not. Because after it's launched and you learn that it was built with a template from 1995, it's too late. How can you make sure that the new site or redesign you're having done will really be as good as it looks?

First, you can check on the firm's own website. "Looking Under the Hood at Your Website" gives you a quick and easy way to get a general sense of whether they know what they're doing or not. If their own website is not built well, there's no reason to think that a site they build for you will be, either.

Second, just tell them that standards-compliant code is very important to you.

That should be true. Clean code does better for search, loads faster, is easier to maintain, and looks better to people on different browsers or using different assistive technologies to access your site.

A designer who looks vague when you mention standards-compliant code should be crossed off your list. One who assures you that all sites produced by her company are completely validated before launch or that "standards-compliant" is his middle name -- that's what you want.

Katie copied down the phrase, and you can do so, too. You can also contact me when you need a new site or a redesign. Standards-compliant code is very important to me, too, and I can make sure that you get it.

Which Comes First, Design or Content?

Sometimes I write the content first and the designer fits the design around it. Sometimes the design is already finished, and I write to fit the design. If you hire your writer and designer separately, or you do some of the work yourself, then you have a choice between these two approaches. Which way is better?

Actually, both have advantages.

Content first

• Many modern design gurus prefer this. You start with the content, you mark it up semantically ("html" stands for "hyper-text markup language"), and then style the resulting html in the way that makes most sense for your content. There's a logic to this approach.
• The content sets the tone. I wrote a content page yesterday for a jeweler's site that web design firm Onsharp is building. While this was a credibility page, not even a main page, it took the client's words and established a playful, informal feel which can guide the designer in the feeling of the site.
• The content can be part of the design. Clevertech is updating its own site. Owner Kuty Shalev and I worked out the primary text and sent it on to designer Jay Jaro, who will create an infographic including the text. "The point of an infographic," says Kuty, "is to take a whole lot of information and make it digestible." Here, the words will become part of that graphic, leading visitors to read more than they might without the design elements.

Design first 

• The content will fit the design. Vivid Marketing just made a new design for an area medical professional. I wrote the content first -- and didn't know until after launch that the site had ended up with an empty page. Fortunately, we have access, so I was able to go in and write something for that page; if I'd written it for the client, he might have had extra costs involved in submitting it to his webmaster for changes after the site was up.
• The content can take the feeling from the design. Sometimes the logo, colors, and images are easier for a client to come up with than the feeling they want for their content. Once I saw the design planned by WhatIf Creative for the site they're building for an area architect, I could tell the kind of tone the client wanted in their content, even though they hadn't provided much.
• It can be an efficient way to work. iProv set up a site with spaces for the content, and I was able to go in and enter the text directly, instead of sending a text file to the designer to place. That can be a savings of time and money. 

With the example at the top of this post, a new website made by Sharp Hue, the preliminary design came first, I wrote the content to suit, and then designer Sean Borsodi finalized the design and needed a bit more text. He was able to specify the precise area he needed content for, and I was able to write just enough (three letters over, actually; he adjusted the size a little and it came out just right) for the space. This kind of example makes me think that the very best arrangement might be simultaneous design and content.

Your Website: Not Just a Pretty Face

Your website provides essential information for your customers and prospective customers: who you are, what you do, what you have to offer, where to find you, how to contact you. These things are essential. But your website can do more than that.

There may be a lot of jobs around the office that your website can do for you.

Here's a physical therapy site that Lee Ann Larkan and I have recently redone. The new site, below, looks better and fresher than the old one, above, and the content is better for search. (You're looking at the Services page.)

In addition to these good things, Lee Ann also took the opportunity to add the client's basic forms as PDF files. Now, the client's office doesn't have to print and mail these forms -- patients can get the forms whenever they like. It's a savings of time, paper, ink, and postage. The patients have more control, too, so it's a win-win solution.

Another example is Clevertech's site for a dermatologist: there's an interactive form that allows patients to upload their information securely. Again, a savings of resources for the office, including staff time.

These two examples are similar: they're new variants on the old form on the clipboard that medical offices used for years. Your needs may be different. Requesting a quote, making a payment, applying for a job, buying an item, subscribing to a service, checking on a package, scheduling an appointment -- all of these are tasks your customers can do at your website. There may be more. Talk to your web developer about common processes in your shop or office, and you may be surprised by how many can be incorporated into your website.

Adding these special functionalities to your website is often more environmentally responsible, as well as providing an extra measure of convenience for your customers -- and the savings in staff time can make this kind of site development pay for itself quickly.

Using Notable

I've mentioned Notable before, but I think I've mentioned it in a sort of "We all know about this" kind of way. I've discovered that in fact we don't all know about this, so I want to share a little more about it. Click on the name of the site back in that first sentence to visit and try it out yourself.

As you can see from the examples here, it's a simple concept. You can capture a screen from an existing page (either online or at a development site). You can also use a picture of a screen -- so a screenshot or a mock up will work, too. Just type or cut and paste the web address in, or browse for an image from your files.

Having captured the image of your web design, you can click on any spot in the image and make a comment. The examples here were downloaded as PDF files. When you do this, you can send them to people and they can read your comments. I like to upload them at Basecamp so I don't have to say things like "The upper left hand side, right under the search box..."  However, you can also invite people into your Notable workspace to see your comments right on the screen.

It's easy to invite people in -- you type their email addresses in right at the Notable website. Then they also can make comments.

As you can see, Notable captures the whole site, so it's better than a screenshot. There's also an iPhone app, which helps with mobile discussions, when you may not be seeing the same thing if one person is at a computer and the other is using a phone to navigate to the site.

You can make comments on the site and what needs to be changed, on mock ups for a new site you're having built, or on content. The labels let you narrow in on the particular thing you'd like to discuss, and the comments are clear -- no "Love this!" scrawled on a corner or "Could we make the gray box -- no, not that gray box, the other gray box --"

The price is certainly right -- if you just use it occasionally, you can have a free account. Paid accounts range from $24 to $119 per month, depending on factors like the number of users, the amount of storage space, and the level of security you want.

Try it out. Let me know what you think.

Floating Along with Your Website

It's the nature of my job that I'm usually working on building sites or rebuilding them. I've got half a dozen right now that need rewriting, several needing new content, one about to go live, and several more waiting to be built.

But one of the great things about a website is that it will continue to work for you even when you're not working on it. With you or without you, your well-designed and optimized website will do its job.

You have to update your blog regularly, of course. If that's not on your daily to-do list or part of your morning routine, then you need to hire someone for it. Apart from that, though, your website can continue to do its job for you for a while without needing any updates. You can float along the river in your canoe, enjoying the peace of the surroundings (or fending off attacks on some other front entirely, if your business is like that), and your website will serve as part of your sales force 24 hours a day.

This is the danger, really. It's easy to miss the moment at which you should have updated your site, and then you end up with a site that badly needs updating. That's not what you want. It can be great to shoot the rapids in business: the thrill of new product launches, the challenge of speedy growth, the excitement of the Really Big Deal --that's fun. Finding yourself in urgent need of a redesign you didn't budget for because your outdated website is losing you business is not fun at all.

Ideally, you can see the need for an update ahead, and plan for it. I'm in that position. My website has been up for about 18 months, and in another few months I'll be ready to make some changes.

How can you tell that it's about time for an update at your website?

• Technology has changed. I see lots of websites with badly outdated code. They left it too long. For me, that's not a problem, but I do want to take advantage of some new things that have come up since mine was built. If you have Flash components that aren't friendly to search, you might want to update to newer, more search-friendly options. If your visitors are mostly using modern browsers (you can find out through your analytics), you might like to take advantage of some CSS3 options.
• Business has changed. I've kept my content updated as things changed in my business. However, some business changes require design changes. For me, the increasing importance of social media means that it would make sense for me to have my online networks as part of my call to action on the homepage. It might also make sense for me to add a portfolio. For another business, new services or products might require a new section of a website. This was true at Clevertech, where a new team and extended services made an update necessary. If you don't do your own content updates, you need to check your site now and then to make sure there isn't some outdated information -- old hours, a new product you should showcase, a change in staff -- that needs correction.
• Fashions have changed. Let's face it, there are fashions in web design just as in anything else. If your website looks dated, your business will look dated. Just as your office decor or your brochures have to be spiffed up every now and then to keep your company looking current and fresh, your website has to be updated now and then for the same reason. I'm trusting my designer to freshen the look of my site when he adds the new functionalities I know I want.

You need a content refresh every few months. A design refresh should be on your calendar and in your budget every year or two. Doing this essential maintenance will allow you to float happily along, secure in the knowledge that your website is doing its job for you.

Does Your Site Work?

We got back from Spring Break last night, various family members having spent the time in different places, and we decided to have dinner delivered to us.

As we aired out sleeping bags, unpacked bags, showered, and otherwise prepared to return to our daily lives, we tried to make a quick order at a restaurant online.Here were the steps:

• We waited through an animated introduction screen. While we had found this mildly entertaining the first time we saw it, we didn't want to wait through it before being able to place an order.
• We searched with growing irritation for the place where we could place an order.
• We tried unsuccessfully to log in, thinking we had an account. While it's possible that we should have remembered whether or not we had set up an account there, the response to our log in attempt could have told us that we didn't have an account, rather than leaving open the possibility that we were using the wrong password.
• Having spent quite a while trying to get into our account, we concluded that we didn't have an account and went to set one up. Then lengthy form was daunting, but we filled it out and hit submit -- and waited for several minutes before realizing that it simply didn't work.
• We phoned the restaurant and placed the order.

We are a calm and forgiving group. There are plenty of people who would have called some other restaurant instead, and gotten angry about it and told all their friends, too. It may be nothing to do with your company, really, but fails at the website can create negative responses to your company and even to your product.

If your website has added functionality, like a shopping cart or a form to fill out, check sometimes and make sure that it's still working the way you think it is.

What Makes Your Website Special?

I admit it; there are times when people like me, who specialize in things like usability and search, come into conflict with people whose primary goal with a website is to make it snazzy.

Not that I'm opposed to snazziness on principle. It's just that when I see a designer's eyes light up at the thought of making a really flashy thing happen on the screen, or hear a client say, "Wouldn't it be cool if..." -- well, I can foresee that I'm going to have to be the one who says, "Yes, that would be fun, but do your clients really want a three minute auto-loading music video if they're usually calling you at midnight because a family member has been arrested? I mean, maybe they'd like to get your phone number right away."*

So I've been very happy about the new website Tom Hapgood and I are working on. The screen above shows you the homepage. If you click on that turned up corner, the translucent white sheet will lift right up and show you this:

The first screen in the photo gallery. Click on the arrow, and you can see more images:

More images with alt text, in fact, so this is good for search -- unlike the rotating flash screens which completely baffle the search engines.

You can easily pull that white sheet back down, too, when you're through looking at the picture gallery -- no need to wait for the information you want. The white sheet also has a feed from the "What's Happening?" page, so visitors can quickly check on upcoming events and specials. 

Tom built this with  the open source jQuery javascript library, which web professionals are getting very excited about. This technology is CSS3 compliant and cross-browser supportive, so all visitors can see it. Since all the images have good, clear alt text, people with limited vision using screen readers will also be able to understand the site easily.

When you feel that your website needs some bells and whistles, talk with your web professionals about ways to provide that without interfering with usability and search. Skillful designers can do that. And your entire team should recognize the value of that goal.

* Yes, actually, I had that conversation just last week.