Site decor

How Good Does Your Website Have to Be?

Monday, March 8, 2010

A local restaurant has finally gotten a website up, and it's one of the worst websites I've ever seen. Its spelling is so creative that -- well, it includes words like "propetisioness" and "prok." The overall quality of the writing is what you would expect of a website using the word "propetisioness." It has no meta tags at all. Its design suggests that a bunch of random images were just stuck together till the space was filled. The basic information, such as hours and phone number, aren't on the home page at all. The code is poor.

The question is: does this matter? The menu's there, the phone number is on the Contact page, I went there and called and ordered food, regardless of how bad the website might be, so who cares what it looks like?

Well, Google seems to care.

This website is below the fold for my personal search for the name of the restaurant, even though both the URL and the title use the name of the restaurant, and even though I a) live just up the road and b) have been to the site before.

Google, we're assured, doesn't penalize for bad code, bad design, or bad writing. But they don't have to make a direct penalty for these things to get in the way of good search results. Here's why:
  • Google's goal is to choose quality. While there are fairly bad sites high on search for some things, a good site would quickly take their places if someone made one. In the case of this example, the restaurant's own social media accounts, as well as all the directories they're listed in, are above their own website. Google is, essentially, offering readers everything else it can find before offering this site. 
  • Links to your site affect your rankings, and people don't choose to link to bad sites. I recently complained about having to link to bad math sites because I couldn't find good ones. If someone puts up a good math site, will I rush over and change my links? You know it. A bad website just doesn't entice visitors to link to it. If it's bad enough, good directories will refuse it, too.
  • People who can't build a good-looking website won't be able to build you a well-optimized website. The opposite isn't always true, since there are web artists who know nothing about SEO. But someone without the skills to write and code your site correctly won't have the more specialized skills it takes to build an optimized site. The site I've been telling you about made a 14 at Hubspot's Website Grader, one of the lowest scores I've ever seen. They have a Moz rank of 0, no inbound links, and they're not indexed. The people who built this site shouldn't be calling themselves web designers.

Beyond that, there are physical-world issues connected with having a poor quality website. If you can fry chicken well enough (and this restaurant can) people who know about your chicken will come get that chicken no matter how bad your website is. People who don't know about your chicken, however, won't chance it. They'll go to the place with a website that makes the chicken look good.

Labels: , ,


Can You Do Without a Homepage?

Friday, February 26, 2010



Okay, maybe you're not thinking of putting your contact form up all by itself on the internet. But I have had some conversations lately about websites without the traditional homepage.

First, of course, there are blogs that are just blogs. They may have an associated "About Us" page or other related pages, but a blog can be the heart of the website, and the primary landing page. Shan Pesaru and I have been talking about a site that could end up like that.

A site of this kind can be limited in its function. Seth Godin has a site centered on a blog, with additional satellite sites for his books, his services as a speaker, and so on. A vet trying to reach a local audience? It might not work. However, if you want to avoid a home page, this may be an option.

Then there are splash pages -- a page that has little more than the name of the company and a bit of rudimentary navigation, sometimes no more than "enter."

Lee Ann Larkan and I are working on a site right now for an artist who has this idea in mind. She's thinking she can use a nearly blank page to direct people to her portfolio and her blog in a creative and unusual way. One concern with this type of page is that it's hard to get enough content on the splash page to get good rankings with the search engines. The client may not care about search right now, but it could become an issue in time.

Then there are mini sites or commerce-oriented landing pages living at a main site's domain. They may be almost an ad or sign-up sheet for a particular event or project. Marcel Sendrea and I are contemplating how to do a couple of these.

In each of these cases, we're currently thinking about how best to approach the site, and the big question is: do we need a home page?

I think the answer has to come from the user journey.

How is your user going to approach your site, and what will he or she do once arrived? Another site I'm working on right now is for a brick and mortar store. We think that someone going to this website is likely to want the location or phone number of the store, information about their products, or perhaps a look at any current special offers. Customers wanting to get that data quickly would get tired of an artistic splash page pretty quickly. They don't want to click repeatedly to get what they want.

But the visitor to the mini-site we're working on will likely approach it by searching for the product, and that will be an appropriate landing page for that visitor. Should they have to go in through a homepage introducing the company and all the other things they do, or would they perhaps like to get right to the product?

Make a guess, and test the guess before you make up your mind.

Labels: , ,


Writing About a Process on Your Website

Tuesday, February 2, 2010




















When people read your website, you're not there. This is hardly new information, but it has some implications. One is that things have to be extraordinarily clear.

Things have to be more clear on a website, in fact, than they do on paper.Given an instruction manual, some people will throw it away and experiment, but the others will sit down and read it. They'll expect to search around a bit for the information they need. They'll pay attention to the table of contents, compare the pictures and the text, and struggle through the hard parts.

People facing a complex process online react differently. They look first, to see if they can grab the information in some obvious place. If not, they begin randomly clicking things and scrolling. Then they give up.

No, of course you don't do this. But randomly chosen people in tests of web sites almost always do exactly what I've described. So your visitors may be doing so as well.

This means that a process needs to be explained very clearly, and in an eye-catching way.














At Shopmobbing.com, we went with cute graphics, large numbers, and arrows.This might seem like overkill, but it really isn't. Add very clear text, and you have a fighting chance.

 










At Joblingo.com, we again used graphics to catch the eye, numbers to show the process, and simple text. Arrows wouldn't have hurt, frankly, but this client wanted to maintain a simple, professional look.

 









Onsharp used a bright graphic, and bright headings to emphasize the steps of their internal process. Like the previous example, this layout takes advantage of the natural tendency (among English-speaking people) to read from left to right and top to bottom. Setting the steps out in this order helps make it clear. Each short paragraph then links to a page with more complete information. Putting all the information on one page would have separated the headings enough to lose the step-by-step visual impression. Note also that the graphic contains a call to action -- visitors who are ready to make a decision can simplify the process by getting in contact immediately.

Make no mistake -- if your words don't explain the process clearly, no amount of graphic help will fix the problem. Given clear, compelling text, though, laying the process out in an attention-grabbing way that guides visitors through the process can do the trick.

Labels: ,


Changes at Your Web Site

Tuesday, January 26, 2010














Fresh content at your website encourages visitors, including search engines. People drop by to see what's new and exciting, robots perk up and think, "Ah, that's a live site that gets updated -- I'd better go check it out!"

How can you get it?
  • Blog. A blog is the easiest, most convenient way to refresh your site.
  • Seasonal changes. Have your webmaster make changes in the look of your site to match the season. A fresh image, a timely new paragraph, even a change of icons shows that you're keeping up to date. 
  • News. You don't have to have a blog to post some new information. Company news, changes in staff, new products, or a fresh page of tips and offers can bring in some new keywords as well as encouraging your visitors to drop by more often.

To make those changes, you'll either need to make alterations at your site by yourself, or ask your webmaster to do it. I've written before on the pluses and minuses of  having a content management system at your website, so let's just look at the best ways to accomplish site changes under both circumstances.

If you make your own changes, just get comfortable at making the particular changes you want to make. You don't have to be an expert to make small changes yourself. Pay for a bit of your webmaster's time to show you how, if you need help.  But you may find that it's easier than you think, especially if your designer sets up your site with you in mind.
    For example, here's the code for a calendar box at a website.







    If all you have to do is replace the circled stuff, it's no harder than any other typing. Grab the information between the "p"s and type in the new information. Just don't be intimidated by the fancy things around it.

    If you want to be able to do this, you should convey that to your designer when you have your page built, or plan on a little time to fix your site to make this practical. Some designers write beautiful, clean code that you can easily navigate (I love working with those designers) and some write code that's more like the cables tangled under your desk, or perhaps spaghetti. If your site is built in the latter fashion, it'll need some tidying before you can get in and make your changes with confidence.

    If you have changes made for you, you're probably paying by the hour. Some webmasters have arrangements where you can make a certain number of changes per month for a set fee, or allow you to buy a block of time. But time will always be the deciding factor for the cost of making changes. Save time, and therefore money, by having all your changes decided and organized before you send them in.

    Don't send this:

    "I think I might want to add some new pictures, and also we need to change the prices. I'm thinking that for the new year a 3% increase across the board would be fair, since my costs have risen by just about that much, and maybe we could put in something like 'Note new pricing, made necessary by increases in fuel costs' but maybe we don't have to say that especially if you change the pictures. I'll send the new pictures later, but you could go on and change the prices. But don't make the changes I told you about yesterday until I send you the new pictures, because I might not want them if I like the way the new pictures look."

    Send this:

    "Please replace the pictures on the Product page with the attached new images.
    Also replace the first paragraph on the Pricing page with this:"

    and then give the new paragraph exactly as you want it. The difference in cost between these two approaches is considerable.

    Of course, you may prefer to pay your web people to take care of these things for you without your having to organize things or disentangle code. Or you may have minions who handle this stuff for you. If you're on a budget, though, you can still have updates at your site.

    Labels: ,


    The Golden Ratio and Your Website

    Thursday, January 21, 2010

    golden ratio

    Sometimes the problem isn't what you think it is.

    I was reminded of this yesterday in a couple of conversations with the owners of websites I'm working on. One is a local business person.

    "I don't like words," she said grimly.

    I ran quickly through the advantages of having words on a website. Then we talked about how the words on the page she was looking at would look different once they were actually on her website. Yesterday's post showed examples of how different the same number of words looks with different designs.

    The second conversation was with a music production company in a big city. "It looks all cramped!" he complained about the minimalist text I'd written for his homepage. He has his own designer, so I couldn't just assure him that I knew our wonderful designer would make it look great. We had to get down to cases.

    We had to talk about the Golden Ratio.

    The golden ratio is an interesting number with lots of interesting math in it. If you'd rather not think about math, just look at the figure at the top of this post. Imagine it's your website's home page. See where there's a line running from the top to the bottom? If you have two divisions -- like a main division and a sidebar -- then that's about how your eye would like them to be. As you can see, there are lots of other possible divisions -- since it's a ratio and not a size of box, you can use it to create all kinds of different layouts.

    The designer for the music promoter had made the divisions of the page more like what's shown below by the red line:



    Your brain, for some reason, doesn't like that proportion as well. When you put the text in, the lines of text will seem too long. The paragraphs will seem too short. The whole thing will just be subtly unsettling.

    The problem is not the words.

    Scroll down to yesterday's post and see all the golden ratios on the websites. Then look at your website. See it?

    If not, then your page probably isn't something people want to look at very much.

    The designer in question made some changes, and the site looks fine now. It's good to catch these things before launching, as we did, but it's fine to fix them at any time.

    Labels:


    Making Your Blog Look Good

    Friday, January 15, 2010

    Blogging is a good idea for most businesses. Your blog provides extra value for your clients, more content for the search engines, and opportunities for linkbuilding. Excellent content is what makes your blog provide these benefits for your company. But how do you make your blog look good?

    First, set it up to look good from the beginning.

    The blog you're reading right now was styled to match the website it belongs to, by designer Shan Pesaru. Here's another example of his, using Blogger:



    Marcel Sendrea did this one, using Wordpress:




    Here's one by Jay Jaro, built with BlogEngine.net:



    As you can see, a blog can have just as much style and individuality as any other web page.

    If you want to do it yourself, you can upload a template, as I did with this blog:



    Sources of blog templates include these sites:
    To use them, you download the file and then upload it at your blog platform. If you don't know what that means, save yourself some grief and hire someone to do it for you. You're bright, I know, and you can learn how, but if you just plan to do it once, for your business blog -- well, you have work to do, right?

    You can also use the customization options at your blogging platform. Here's a blog at Weebly.com, using one of their templates and their simple directions:



    If you happen to find options that fit your company's look pretty well, then you're in luck. If you know a bit of html, you can match the colors and fonts and so forth, and you can often upload your own image, too.

    If you're not sure whether blogging is for you, and you want to try it out, this can be a good way to make yourself a free trial. If you do this with Blogger or Wordpress, your web people can bring it into your website later, and match it to your site.

    Once it's built, take the trouble to make your posts look good:
    • Don't get carried away with the options. Multiple colors and fonts, centering some sections and justifying others, playing with text effects -- all that just makes it hard to read. Simplicity is your friend.
    • Do pay attention to the details. Your text should look balanced. Your images should be carefully chosen and placed. Your punctuation should not suggest junior high school note-passing (!!!!!!) Things like margins and spacing make all the difference.
    • Choose your images carefully. Your images should be of good quality, connected with your text, and compatible with your company's image. They should fit with the look of the website, too.

    A good-looking blog won't make up for scanty or poor-quality content, but it will work with your good content to make a great effect.

    Labels: , ,


    Your Website: Update, Refresh, or Redesign?

    Wednesday, January 13, 2010



    Let's say that you like the basic look of your website, but you're not getting the results you want. Do you need a new website, or can you just update it -- refresh it a bit, in other words, and keep going?

    Ask yourself these questions:
    • How's the structure? If your site was built recently with modern code, it's not using Flash and graphics where it should have text, and the navigation works well, then you may be fine without a redesign. If it was built a long time ago, or built recently but badly, then you'll have to have it rebuilt. Your choice then is to have it rebuilt with the same overall look, or to take the opportunity to have a fresh look as well as a well-built site. Even if you've gotten carried away with the Flash or you want to move elements around to improve the user experience, you can very likely just update if the basic structure is good.
    • How's the design? The design of your website has to do with the main colors and where things like headers and navigation buttons are. With a well-made website, you may be able to add new elements, increase or decrease the number of words, and otherwise fool around with the site quite a bit without disturbing the design. If the design is poor, though, changing the pictures won't improve the usability.
    • How's the content? This is what you can readily change -- assuming your website is built well to begin with. You can have completely new words and images for a fraction of the cost of a redesign.

    The problem is, you have to be able to tell.

    Often, site owners think that a new picture will fix their site, when they have a poor user experience or bad code. Equally often, owners delay making improvements because they don't realize that a content update (for a few hundred dollars, compared with a few thousand for a redesign) will keep their website working well for another year or two.

    Use your end-of-year site checkup to decide how much of a revamping your website needs. I'll be happy to provide a diagnosis for you if you're not sure.

    Labels: ,


    What's Your Website's Job?

    Thursday, January 7, 2010

    business card

    At this time of year, I do a lot of website analysis. Looking at people's current sites lets me see how well the site is built, what problems it has with usability, and where it obviously needs changes in design or content.

    What I can't always tell from looking is this: what's the website's job?

    Once you answer that question, you can answer what is to me the most important question, which is simply "How well does this website do its job?"

    One business owner told me that her website was "a very big, very expensive business card." This was a disparaging remark, but for some businesses, that's exactly what the website is for. I'm asking around for a CPA and I get a name, so I look for the website to get contact information and a bit of an introduction. That website doesn't sell anything, but it's a major source of business -- a super-effective business card, if you will.

    If your website is your business card, then it needs a well-branded design and a clear, concise message. Here's a good example:



    The unhappy business owner I mentioned above didn't want her site to be a business card, because it was an e-commerce site. Its job was to sell stuff. An e-commerce site needs compelling sales copy, appealing photos, and a user-friendly checkout system.



    Some websites are intended to present their owner's credentials. A site like this needs plenty of information, presented in a scannable form.



    The point is, these plans aren't interchangeable. A business card doesn't -- and shouldn't -- give a complete picture of your skills and experience. A site detailing your credentials doesn't sell products. There's no such thing as a one-size-fits-all website, because different businesses have different jobs they need their sites to perform.

    What's your website's job? And how is it doing?

    Labels: ,


    How Do Search Engines See Your Site?

    Monday, January 4, 2010



    Here's a site for which I recently did an analysis. Just looking at the homepage screenshot, you'd think it has a good amount of keyword-rich content.

    You'd be wrong.

    The items circled in black are actually graphic images. That is, we see them as words, but the builder of the site made them into pictures, so the search engines can't read them.




    The stuff circled in blue is in a frameset.

    So here's how the homepage looks to the search engines:




    Now, the search engines can follow the links in the source code and read the content elsewhere. However, this site ranks so poorly for everything except the few words visible on the page's code that it seems clear that frames continue to be a problem from the point of view of SEO.

    Since they also hamper usability (printing out the page, consistent look across browsers, etc.), it's a good plan to avoid them.

    Labels:


    Website Checkup: the Navigation

    Wednesday, December 30, 2009

    Navigation is extremely important to the success of your website. Here are some simple rules to use to check the navigation at your site:




    • Have some navigation. The pre-redesign homepage above gives no clues, on this full-screen shot, about the structure of the site. As far as the visitor can tell, it's just one page.




    • Put it where people expect to see it. The page above does have some navigation buttons, in the lower right hand corner. People expect to see the navigation across the top or vertically along the side, where you can see there is none.



    • Make it look like navigation. There are lots of links in the sample above; the links going to the main pages of the site don't look different from the links that go offsite. In the example below, the links are a collection of icons -- it takes an extra step to figure out that they are in fact the navigation bar.




    • Offer a reasonable number of choices. Five to seven navigation buttons are plenty. Ten buttons isn't navigation. Even if you have hundreds or thousands of pages, organize them into fewer choices and let people choose a path to the information they need. They'd rather do that than read through long lists.





    Here are a couple of good examples:




    The example above is fancier than the one below, but both of them do their jobs.





    So for today, ask yourself whether your navigation looks more like the good examples or the bad examples. If you recognize elements of your site in the "befores" then it's time for a navigation makeover.

    Labels: , , ,


    Visitor Expectations and Your Website

    Monday, December 14, 2009



    Here's the homepage of Vivid Marketing. Snazzy, eh? It's sharp looking and interesting, but the web visitor's first reaction is likely to be "Huh?"

    Creative companies often have this kind of surprise at their websites. It shows creativity and looks different. The visitor, one hopes, thinks "Ah, these guys are really creative and different! That's what I need."

    There's an "enter here" button -- a definite improvement over the average site like this, which appears to be waiting breathlessly to see what you're going to do. And once you enter, you see the portfolio page below.




    This fits the visitor's expectations of a web page. There's the logo in the upper left hand corner. There's the navigation across the top (down the left side would also work). There's the portfolio in the center. A little skimpy, a visitor might think, but what there is looks good. Ads down the side ... we'll ignore those...

    But no, those aren't ads.That's the clever, creative arrangement of the portfolio. Mouseover one of those bright squares, and you'll see details on it in the center section.




    I love this for the cleverness of it, and the visitor who sits down with it for a bit will see that Vivid does everything from trade show exhibits to billboards. Nice stuff, too. They're also nice people.

    The thing is, a website like this is a trade-off. They're going to lose some visitors, because people get confused and frustrated by surprising web pages. Unless they have a strong motivation to stay, they'll usually leave if they feel confused and frustrated.

    On the other hand, visitors who are highly motivated -- because they have heard about Vivid in some other way and are determined to learn more about them, for example -- may be very impressed and charmed by the creativity of the portfolio.

    I'd take a middle path. I'd ditch the splash page and make a home page that had a clear statement (what we offer and how you can get it) and obvious contact info. I'd add a sentence to the portfolio page, particularly since there are people who don't use mouseover, that sort of gave instructions on how to use the page. In fact, I'd get some text on that page for the search engines, if nothing else. There's room for a couple hundred words on that page.

    Is that the best choice for Vivid? Maybe not. If they use more traditional advertising to draw visitors and their website serves primarily as an introduction and display piece, then they may not care about search. They may not care about the occasional new visitor, either.

    Vivid is a surprising website that might want to be surprising. What about your website? If your website is a bundle of surprises, and you're selling cameras or real estate, you've got a problem. Visitors haven't come to your website to play, but to buy that camera or look for that loft. When they're frustrated in their goal, they'll very likely just leave.

    As a general rule, you ought to put things where people expect them to be. If you choose to make your website surprising, make sure you have a good reason for it.

    Labels: ,


    How Cool and Flashy Can Your Website Be?

    Tuesday, November 17, 2009



    Rosie and I were admiring a new website I was writing for. The design was particularly beautiful, for a corporate site, with an elegance of line and color that made me want to just gaze at it for a bit.

    Rosie wasn't so sure. It seemed to her that it would be improved if there were some... flashy stuff. Things that whirled around, maybe, or opportunities to shoot someone.

    Rosie's a gamer when she's not managing projects or delving into analytics. I've tried to convince her that getting to the front page of Google is exactly the same as winning a leather jerkin for your Dark Elf, or whatever it is. In this case, I pointed out how the lines started in the logo continued -- not visibly of course, but because your brain finished them up -- into a wonderful echo of the lines of light in the picture, which in turn led the eye to the "more information" button.

    She pointed out, quite accurately, that there were no special effects of any kind.

    I showed her Assassin's Creed for Twitter. It has toys from the very beginning, when you confirm that you're old enough to enter. It has heroic music. It takes an incredibly long time to load on the average non-gamer's computer. You have to click on something and wait just to see the menu (every time you want to see the menu -- it doesn't stay there once you've opened it), and then search around for a while to figure out what to do with it. There's hardly any content visible to the search engines, the meta description is too long, it lists keywords like "360" and naturally it doesn't come up for them when you search.

    It's totally cool. Rosie loved it.

    And if you were thinking about something like that for your dry cleaning business, it would be a terrible mistake.

    It wouldn't be impossible, mind you. I can readily imagine something like that for a local dry cleaner, since I'm a highly imaginative person. And I can also imagine someone looking for a dry cleaner and not finding your site, because the search engines, immune to cool flashiness in websites, have no idea that it's about dry cleaning in your town.

    Suppose, though, that there grew up around it an underground cult following and people shared the URL at Facebook. I can further imagine someone going there to get the address of the dry cleaner, and becoming deeply frustrated at having to wait for 7.5 minutes to reach the point at which it was even possible to click around in search of the address. And then becoming completely cheesed off as they clicked around through the swirling fabrics and shadowy characters in search of the address.

    Here's who can have that flashy a website:
    • Large companies with tremendous name recognition who don't really need to concern themselves much with the search engines. Pepsi, for example, can do anything they want.
    • Companies, large or small, with enormous budgets, or who get their web design and development for free. This is one of the reasons that web design companies often do have very snazzy sites. Another is that it's a great way to show off the goods. These companies often have to work very hard to get anywhere in search rankings.
    • Companies whose visitors are mostly interested in playing with the site, rather than with getting information. Game sites, for example.
    I was sorry to dash Rosie's hopes of getting to work on a lot of sites with that degree of cool flashiness. In fact, I didn't even have the heart to point out to her that the Assassin's Creed for Twitter has one button that is immediately visible, and which goes immediately to the place it appears to go to, without any Renaissance fooling around: the "Buy Now" button.

    Labels:


    Building a Website with a Template

    Tuesday, November 10, 2009

    the North Forty

    I've been building a website for someone with a template. I don't normally do this (it's a long story) but it gave me an excellent opportunity to learn some basic things to pass on to anyone who's thinking about using a template.

    • Choosing the right template is key. The client originally chose a template (zenlike by node33) with the wood-image background shown above and similar colors -- but a structure that wouldn't fit her content at all. We looked again, trying to see all the templates just as collections of boxes into which she could put the text, images, and colors that she chose. We ended up with a different one (businesscompany by chocotemplates). If you check them out, you'll see that they had some things in common,and we kept the basic colors. Mostly, though, you should choose your template according to structure and navigation.
    • Using a template requires skills. In theory, you can just type your content into the template. In reality, that's not true. I was sitting with the client, adding some photos and changing the background and generally messing around with various templates in order to help her find one she liked. She watched me with growing consternation. "How am I supposed to be able to do this?" she finally asked. Well, you're not, actually. You have to know html and know how to resize your photos and all sorts of other things, if you want to end up with a good result.
    • Even if you use a template, you still need quality content. This website is going to be a nice one, and effective, in spite of my not being a real designer, because it has the words the client needs, and wonderful photos. (The ones you're seeing are by Jason Hudson, used with permission.) If you find the perfect template for your needs, you're in luck. Most of the time, typing stuff into a template will give you a website that looks as though you typed stuff into a template -- not a move that instills confidence in your visitors. It's rare that a template will exactly suit your content. Using a template with poor quality content, hoping that the template will work magic of some kind, is a recipe for failure.

    the North Forty


    Templates are improving, and thanks to the generosity of people like node33 and chocotemplates, there are lots of handsome choices out there. If you have the skill and the tools, you can get good results with a template. Just go into it with realistic expectations.

    Labels: ,


    Diary of a Website: Decisions

    Friday, October 16, 2009



    One of the most exciting points in the website building process for me is the moment when we see the first mockup of the design. Here, Tom Hapgood has taken the elegant logo Jay Jaro made, the content I wrote, the photos the client sent, and input from conversations with the client, and come up with a marvelously elegant take on ungulate farming.

    Looking at pictures of windmills and goats and seeing in them a sophisticated color scheme of sage, white, and champagne shades requires artistic talent. Playing textures off against one another in this way takes skill.

    But after inspiration comes decision making. So Tom sent over initial mockups to get input on the navigation.


    You can see here two possible approaches to the navigation for this site: the classic approach above and the more subtle one below.


    Much as I like the subtle one, much as Tom values the clean look of the plain white background in it, we just had to go with the clearer navigation in the first one. Tom assured me that he knew I'd say that.

    Sometimes these initial decisions are completely internal -- me figuring out how much of what the client said can go on the page and how much has to move to the blog. Sometimes they're entirely up to the client -- the logo, in this case, was Myra's choice among three options, with her own touches. Sometimes they require collaboration and discussion.

    Attention to detail at each point results in an excellent final product.

    Labels:


    Short and Snappy Web Content

    Thursday, October 1, 2009



    Sometimes your web page is intended to be read. Your blog posts, your articles, your lesson plans, the novel you're posting one chapter at a time to share with your writing group -- you're writing these for people who are intentionally taking time to read the stuff you've written.

    Your homepage? Maybe not. People reaching your website are often making a quick visit to find specific data, or to decide whether to look further at your site or to click straight back to the search engine results.

    Often, site owners need to shorten the text on their homepage. What's the best way to do this?
    • Don't be too fond of your words. This is really the first step. If you labor over your writing like a poet, you may find it very hard to cut things out. You may need professional help -- not a counselor, but a writer. We professionals are immune to the charms of your words, and can be ruthless.
    • Remove words that don't add information. Go right through and delete all words like "literally" and "believe it or not" and "needless to say." Anything that doesn't actually tell your reader something can go. Likewise, all the words that say you're the best, the premier, the most important -- people take it with a grain of salt when you say those things about yourself anyway. You can probably remove all words like "unique," too. If you're unique, talented, and so on, readers will notice that for themselves.
    • Remove things that don't contribute to your goal. For your homepage, the goal is to appeal to the search engines and entice the humans to stay. Any word that doesn't move you closer to that goal (and isn't required for a grammatical sentence) can be removed.
    • Consider collapsing sentences. When you have sentences saying that your product is A, and that your product is B, and that your product does C, you can often just say that your product is an A, B C-doer. Look how much space you save!
    • Divide and conquer. While it's essential that your homepage should tell visitors what you offer and how they can get it, you'll want them to move further into your site. As long as it's very clear where they can find more information, most people don't mind clicking to another page for further details. Many people, in fact, would rather click than scroll.
    One of the side effects of shortening your content may very well be that you end up with stronger sentences and livelier text, as well as something that works better from the standpoint of design. Try it and see.

    Labels: , ,


    Just a Pretty Face

    Wednesday, September 30, 2009

    Usually when I write about design, I'm talking about usability and user experience. Sometimes, though, there's an aesthetic experience that's worth mentioning.

    Here's the old look at the blog for FileReplicationPro:



    Businesslike, serious, highly technical. Nothing wrong with it, but you're not excited by it, are you?

    Here's the new look:



    There's no change in content here, apart from added images, but it just looks more like it's worth reading. The hardware guys agree.

    Labels:


    Do You Need Video at Your Website?

    Wednesday, September 23, 2009

    video
    Video is more and more often a component of websites. I've written before about SEO for video , and you certainly should consider that aspect of video. Today, though, I'm thinking about the logistics. Do you want video on your website, and if so, how will you get it?

    First, the benefits of video for your site:
    • People like video. Visitors will stay on your site for the express purpose of watching your video.
    • Video can be an efficient information delivery system. Fargo web design firm Onsharp made a site for a company that specializes in biohazardous waste disposal. Their product is highly technical and hard to imagine, as you can see from the very fact-dense paragraph below the video. The video has drawings that move around, plus lots of happy, puffy clouds. It makes the whole thing much friendlier to the average visitor.

    EnviroSolutions Ozonator
    • A video can be an economical way to present a lot of images and information. The video on this page shows a whole bunch of different logo eggs, which would have taken a lot of room as individual photos. This is also true when you need to demonstrate a product or give instructions. While space isn't always a big issue on the web, it can be.

    Sweetique Eggs

    • A video allows you to include sound. I've said it before about music, and I'll say it again about videos with soundtracks: give your visitors control over the sound. Don't make your rockabilly video soundtrack start playing automatically when your visitor reaches your website -- they may be listening to Palestrina already, or be at a workplace where a blare of music isn't welcome, or they may be returning to check some information and really not be in the mood to hear the whole thing over again. That said, you can provide a lot of information and ambience with music, sound effects, and speech.

    So, if you've decided to add a video, how do you do it?
    • Find a space on the site. Video doesn't need to take up much room, but it needs a settled place. Plan for it with your designer, or ask to have your current design updated to accommodate it. You can, technically speaking, tuck video in the way you would tuck in an extra sentence, but it won't look good.
    • Write a script, or have one written. Your voiceover saying "uhhhmmm" or your video of someone stumbling over words as they try to improvise will not make the impression you want. Use a script, and practice. It's also easier to fit the video to the sound than to do it the other way around, so the script is the proper starting place.
    • Create the video. Nowadays, you can do this yourself. With your phone, probably, and the "make a movie" button at some free picture organizing software. Will your video be as good as the $4,000 professional one? No, it won't. However, just as people a decade ago were fine with tinny little midi files on computers, people right now are largely okay with amateur video on computers. You might as well take advantage of the moment. This page shows a video made with Kodak software and uploaded via Blogger. The Sweetique eggs page above was made with Corel Digital Studio 2010 from still photos and also uploaded with Blogger. This is the easiest way for you to do it yourself.


    You can also have a video professionally made, and have your webmaster place it for you. This will of course give you more polished results. The JobLingo website, created by Fayetteville web firm Sharp Hue, is an example of this approach, as is the EnviroSolutions site above. If your company website is an elegant, polished site, and that's important to your company's identity, then this is what you should do. Your web designer can probably recommend a professional videographer, and many web firms also create videos from still images.


    • Make sure to get the text on the page. You can, and should, use alt attributes for your videos, and you should also have text on the page which clarifies what the video is about for human visitors, and also for search engines.

    Labels: ,


    Website Coolness vs. Usability

    Friday, September 18, 2009

    It often happens that once you start thinking of a thing, examples seem to spring up everywhere. I've been having that experience with the question of cool websites lately. I'm working on a new website which I particularly want to be cool. Snazzy, even.

    Some of the characteristics of coolness in websites that I want to incorporate into the new website are multimedia, photographs of objects, and a sense of play. You know how you get to a website sometimes and feel like it's a place to stay and play and explore, rather than a place to get information quickly? That's what I'm going for.

    Sitepoint had a great example of that in the HEMA website, a site that starts by looking quite normal but quickly changes as the cup in the picture falls over, knocking the tape down to squish the cake. In the screenshot below, the tape has just bounced up and is about to make the xylophone make funny noises. The whole thing is quite fun. Go there if you have time, and enjoy the show.



    The navigation looks normal, but actually none of it works, and if I wanted to buy a xylophone from these guys, I couldn't do it.

    That website is a toy. I guess HEMA must have a functional website somewhere, but that's not it.

    Then there's the website pictured below, the homepage of a local photographer. When I first went to it, I was torn, because on the one hand I've been feeling quite positive toward the idea of a website where there are photos of objects which do things when clicked -- but on the other hand, I have a deadline and I really need a photographer fast.



    You will notice that there is nothing on this website which assists a person in getting a photographer fast. There isn't even anything that lets you know that you have actually found a photographer at all.

    Having stopped and stared at the page for a moment, I decided that I'd start with the cell phone, on the theory that a cell phone might symbolize communication and therefore include contact info.

    On mouseover, the cell phone showed an email address in a snippet of html code. This obviously isn't what's supposed to happen. In fact, I have since clicked on the cell phone, and it gives a phone number and a working email link. I was in a hurry, though, so I didn't click, but just noted the email address and sent off an email -- which bounced.

    Now, there are tech troubles here. There's an email problem, and code showing up where it shouldn't. You may be thinking that it's unfair to include that in a discussion of usability, but I'm going to disagree. Computers lend themselves to tech troubles, and we all know that. An email address and phone number clearly shown at the top of the page would have provided the information whether the mouseover was working properly or not, and even if I were among the sizable fraction of the population that doesn't use mouseover.

    It would also have prevented problems created by varying hypotheses. After all, I might also have decided that the keys symbolized the key to entering the site (nothing happens when you click on the keys), or that clicking in the middle of the page would allow me to enter the site (you get an enlarged image of whichever project you've clicked on), or that clicking on the address label would get me contact info (nope), or that the money might symbolize hiring and offer a price list or something (it does give you a phone number).

    By the time I made a few guesses and clicked on things and waited for the little surprises to load, I might have been sick of the whole thing -- I mean, I have a deadline here.

    It's sort of like going to the grocery store to grab some milk and having to make your way through costumed people with food samples and a mime and a juggler and a couple of games. All of that might be fun when you're in the mood, but it slows down the milk run considerably.

    For the grocery store, putting some milk in a case that's immediately visible from the door is a good plan. For a website, putting contact information in the usual spot is a good plan.

    So, as I'm working on this very cool website I'm planning, I intend to think about usability ahead of coolness. Ideally, I'll end up with a site that gets the same "Oh, how cool! I'll play with this a bit!" response as these examples, without the irritation of lack of usability.

    Labels:


    Is an Old-Fashioned Website Harming Your Business?

    Tuesday, August 25, 2009

    When people ask for an analysis of their websites (I do that for free, by the way -- don't hesitate to ask me), one of the most common things I see is an old-fashioned website.

    Fairwinds Cottages

    Here's one. This website is a good example of how websites used to look, long ago. Words and pictures and things were just stuck on the page one after another. Pictures were small. Nothing gave the visitor any indication about how to move through the site. People in those days expected to have to spend time figuring out what was going on with a website, and to have to read everything in order to find the information they sought.

    In some ways, websites were like things on paper, in those days, but they wouldn't really have made nice brochures or anything. They were more like classroom handouts. It was kind of cool if there were pictures at all.

    This site was also built in an old-fashioned way. Web designers in those days used the techniques developed for making tables of information, to sort of put things approximately where they wanted them to be, and it sort of works on some people's browsers.

    Again, it was kind of cool, in those days, to be able to do anything besides just making a black and white page of text.

    We are way beyond that now.

    The Retreat at SkyRidge

    Here's the new website Shan Pesaru of Sharp Hue and I worked with owners Eric and Cindy Studer to build for The Retreat at Sky Ridge.

    Obviously, the new site looks more attractive than the old one. But notice the ways in which it works better:
    • The name of the place is in the top left hand corner, where people who read English naturally look to begin getting information from a page, and it's large and different enough to work as a title. The old site had the name (the former name) in that place as well, but it wasn't visually distinct from the rest of the page.
    • The navigation is obvious. It's in the place where people expect to see it, it looks like navigation, and the colors change on mouseover (the mouse, in the screenshot, is over "Contact") to help visitors find their way.
    • There are clear calls to action. If the visitors are ready to book their stay at The Retreat, they can do that. If they want to get on the mailing list for special offers, they can do that too. Getting the contact info to make a call is easy.
    • The site is built to modern standards. You can't see this in a screen shot, but it makes a big difference. As time goes on, old-fashioned kinds of website construction work less and less well, and before long they simply won't work at all. Trying to maintain a web site built with outdated methods is sort of like clinging to cassette tapes. It's only a matter of time.
    If your business has an old-fashioned website, that may mean that you've been online for a long time. Good for you. You have domain age and probably also faithful visitors on your side.

    But you may not realize that you have an old-fashioned page. The first time I heard my son talk about what astronauts did "in the olden days," I experienced some cognitive dissonance. To me, the terms "olden days" and "astronauts" didn't go together. I'm old enough to think of astronauts as kind of new by definition, and "olden days" as something that goes with maybe cowboys or knights in armor.

    If you have an old-fashioned web page, then you might be used to it. You might not realize that modern users of the internet are going to look at a page like the "before" picture here and feel confused. Is that the homepage? Where are they supposed to go? What company is this, and what do they offer?

    Highly-motivated visitors may search around to find the information which is after all, there somewhere. Most visitors, though, will spend a few seconds at this page and then return to the search engine results page whence they came, and go somewhere easier to understand.

    I should add that I sometimes see quite new websites which have been built in old-fashioned ways, with old-fashioned designs. This is really sad. If you have one of those, then you've got the negatives of an old website without any of the positives. It's a bit heartbreaking to say "I realize you just had this built a month ago, but you know all that money you think you saved by having your cousin do it for you? It's an illusion."

    If your website looks like the "before" picture here, you really have to have a redesign.

    Labels: , ,