Web Design Buzz Words: Functionality

This is a question I get all the time: What does adding functionality to a web site mean?

Basically the conversation gets to this point when I start talking to people about how their sites need to be designed for their visitors, and not for the search engines or for rankings or what have you. Adding functionality to your site means that you’re giving it ease of usability and helping your visitors perform the tasks they’ve set out to perform when visiting your site. Regardless of what those tasks are.

For example: Your site is optimized for the phrase “blue widgets” because that’s one of your company’s most popular products. So when a visitor comes to your site after searching for “blue widgets”, they’re clearly looking for one of two things: a) They’re looking to buy blue widgets, or b) They’re looking for more information about blue widgets.

Adding functionality to the web site would mean to do some or all of the following:

• The first thing you need to do is make sure that you have a page for selling blue widgets (via a shopping cart system – if you’re not donig this yet, stop right now and get on it!), and a few pages about blue widgets. What do they do? Why are they better (or worse) than green widgets? Etcetera.
• Have a good navigation system. The functionality comes in when you provide links to all of these information pages from your sales page, AND from each other. Make the links stand out by putting them under a “Related information:” type header.
• Give your site visitors the chance to do a search for “blue widgets” from YOUR site. Give them the option of either searching just your site, or searching the web. More on Adding Search Functionality to Your Web Site.
• Allow your site visitors to share their stories about their experiences, or ask questions about blue widgets right on your site. This can best be achieved by either offering a “comments” section on your articles, or at the very least, asking for feedback and offering a contact form where they can submit their responses directly to you. Or both!
• Depending on your site’s back end, it can be very simple and easy to add photos in a unique way and further intrique and catch the interest of your site visitors. People want to see what they’re buying, and they want to see it in action. Create slideshows and not just thumbnails, and your visitors might just find themselves surfing your site’s other products just to see the pictures!
• Polls. Contests. Giveaways. Be it the color of your next big widget or just what else they’d like to see on the web site. People LOVE to give their input, as much as they love the chance to get something for free, so any way you can give them this opportunity, they’ll take it.
• Create a section of your site for “members only” access. Include “premium” articles, discount offers, and so on. This not only provides your users with a feeling of being important to you, but it also allows you to collect email addresses from people who are clearly interested in your company’s offerings, for sending newsletters or special announcements later on.
• Offer real time industry news feeds, live on your site. Again, people are coming to you seeking information – the more you give, the more they’ll remember you, and the higher the chance they’ll come back.

This list is by no means exhaustive. But the bottom line is that “brochure sites” are just a huge waste of time and resources these days. They bore people, and they don’t ever stand out to give the visitor any reason on Earth to remember you or come back. Gone are the days of simple one- or three-pages sites just to say “Hey, here we are.” Web sites like that have long fallen by the wayside, and have absolutely no hopes of ever coming back, thank goodness!

My Final Word on Flash Web Site Designs

Flash can be cool looking. However I will forever turn down business when the prospective client tries to “demand” a fully Flash site. I won’t even get into the usability factors, like the fact that not all people have Flash readers installed on their computers. Despite spending over an hour explaining why Flash (even just a little “too much” in elements) is bad for SEO, I’ve had no less than three people in the past year get frustrated, tell me they’ll have to call me back, and I hang up the phone knowing and not caring that I’ll likely never hear from them again.

I’m going to make it plain as day why fully Flash web sites are bad.

Are you ready?

I can’t believe this is so hard for people to understand and believe sometimes.

Okay here we go:

The search engines cannot read the contents of a Flash file.

Alright, I’ll elaborate. One of the biggest, most necessary components to search engine optimization revolves around the content of a web site. Yes folks, content is still king. In order to best optimize a web site for the search engines, I have to tweak and mold the content on that site, so that when the search engines scan through it, they can pick up on what your site’s about. What’s important about you, your company, and your business. Since the search engines can’t read the contents of a Flash file, that means that you can put as many keywords as you want in there, the search engines won’t see it. If the search engines don’t see it, then they can’t help rank you for the keywords that relate to your site. If they can’t help rank you, you won’t get ranked.

“But Lara, there are Flash websites out there that show up at the top of the search engine results!!!” I can hear you cry out.

Yes, and those sites have either been around for quite some time and developed a “following” (in the form of many, many natural incoming links to the site), they belong to companies that are “known and trusted” by the search engines (for lack of a better term, they’ve been white-listed), or they’re using spam techniques to get there. The first reason can be achieved through internet marketing programs, but also takes lots of time – Lots. Of. Time. – especially when the site is full on Flash, and SEO is not an option.

The bottom line is this: If you want a Flash movie “header” or other element to your site, I’m perfectly okay with that. But no more than one element, and it can’t be your navigation (site links) unless we have those same links in hard-coded text elsewhere on the same page. If the site can’t be fully optimized for the search engines because there’s too much Flash, I’m going to turn your business away. I don’t make promises I can’t keep, and I’d advise anyone who is hell-bent on having a fully flash website to toss the idea of SEO right out the window. Internet marketing? Maybe. But if I can’t optimize a site for the search engines, I’m not going to want to take on a marketing project either, because part of the realm of internet marketing also involves SEO.

So there you have it. My final word on Flash. You can say it’s a tad bit angst-ridden, and I’m okay with that.

Adding Functionality to Your Website – Search

Does your site have a search function?

How do your visitors quickly figure out if you have what they want?

All the marketing in the world means squat if you don’t live up to the hype when visitors click your link. You’d be surprised at how much something so “trivial” like a search feature can mean to your site’s visitors. (And to your pockets!)

Google offers a search function via their adsense program. If you use Google ads as a form of revenue, you can easily add a search box that crawls the web AND your website, and produces the results on a page that you customize to match your website’s color scheme and logo. You can customize the search form itself to match your site, and you can add up to three URLs to the search, where your visitors can choose either the “web”, “site A”, “site B”, or “site C” to do their searching. When a visitor clicks on a link after using the “web” search, you will receive adsense revenue in your account. (No revenue is received when a visitor searches your site, however the default setting on the search box is set to search the web and it’s paid link results.)

If you’re not interested in Google or ad revenue, there are many other free search forms available. Freefind and Atomz are just two of them.

Where do I put my search box?

Your best bet is probably either in the top right or top center of your site, in a prominent location, and on ALL pages of your site. Visitors may enter your site from any one of your pages, and if they don’t find immediately what they’re looking for, they will be looking for either a search function or a way out (which means leaving your site within about 10 seconds… you don’t want that!)

Also, make sure it’s a text box, where users can type in what they’re looking for and then hit a button that does the search. Don’t make them click on another page to get to their search box, and then yet another to get their results, and limit the results to no more than 30 or 40 per page… slow loading results pages are a no-no.

To get targeted results…

Make sure your pages are optimized well for their content. If you title your pages “Page 1, Page 2″ – the search box won’t produce the best results for your site. If you title a page “Buy Widgets” – make sure the page is about buying widgets, so when the user enters “buy widgets” into the search box, your page will show up properly.

Use a clean, easy-to-follow navigational structure, and have a sitemap somewhere on your site using the descriptive page titles and descriptions.

Provide loads of relevant content, using keywords (but not OVERusing them), and you should find that your site visitors spend more time on your site than they did before… part in thanks to your handy-dandy search feature.

Fluid width, or fixed width? The debate…

Okay, so quite often I find myself in the midst of a discussion about screen resolutions and web site display widths. The screen resolution is the setting of each individual person who uses a computer, and based almost solely on their own preferences. (Of course, sometimes, you run into a person who doesn’t even know that they can change their screen resolution, why they’d want to, or much less, how…)

On most modern computers (yes, this is important… “modern”), the screen resolution options range from 800×600 pixels all the way up to 1280×1024 pixels. The first number relates to the width, the second to the height. The (somewhat unfortunate) thing is that by default, many systems come with the lower-resolution 800×600 – which makes viewing designs that are specific for higher resolutions pretty annoying, as you’ll have to use the scrollbar at the bottom of the window to see everything…

(Information on changing your screen resolution settings in Windows XP or Windows 98)

My personal preference? My settings are at 1024×768, and you’ll find that the majority of people who are familiar with the benefits of a higher screen resolution will have this setting – some go even higher, but again, it’s personal preference.

So here’s the thing about designing for resolutions: If you already have a website and a good stats tracker, and you know for a fact that the majority of your site visitors use 800×600 screen resolution, then by all means, design a fixed 800-pixel wide site for that crowd. (Example: Sites that are built for residents living in countries with less than “modern” levels of technology, or sites that are designed for those with visual impairments.)

However if you’re not sure, or if there’s an even balance, my vote will always lay with the fluid width design scheme. Fluid widths will automatically resize based on the end user’s display settings (screen resolution) and in almost all cases, you’ll find that the site will look fantastic on any computer with any screen resolution setting.

If you’re stubborn though, and you want to stick to a fixed width layout, please limit yourself to no wider than 800 pixels, including any and all padding, margins, and borders. Even the slightest scrollbar at the bottom of a browser window is unsightly and annoying. Oh, and don’t forget to make the background color or image flattering, if not interesting… us “1024 users” really can’t stand a site that has a black background for the content, with big white borders on either side. It’d be much nicer to see all black, or all white, or what have you!

Here’s an example of an 800×600 layout:
(click image to view on full screen – you may have to click the image again to get it to full size when it opens in a new window, regardless of your resolution settings)

Now, here’s that SAME layout, but fixed, and inside a 1024×768 resolution monitor (the yellow space is there to represent the default background color – it’s NOT a recommendation! ):
(note, if your settings are at 800×600, you will have to “magnify” the image and then you’ll see that “scroll effect” at the bottom of your screen – again, you may have to click the image again to get it to full size when it opens in a new window, regardless of your resolution settings)

Designing For Your Audience

Very often I find myself in the middle of a debate about design processes. While I tend to prefer using a content management system (CMS) like WordPress, which uses PHP templates and CSS based design, with XHTML layouts – there are people out there who see nothing wrong with sticking with old table-based layouts and font tags. I’ve even found companies who claim to be “modern” and are less than a few years old doing such things!

Why are CSS based layouts so important?

A one word answer:
Simplicity.

The long answer:
The reasons are many!

Changing font faces, sizes, or colors takes seconds instead of hours, because you only have to change it on one place, on the stylesheet, and not on every single page in every single paragraph of the entire website (Don’t forget, many websites out there have 20, 30, or even 100 pages!).

Continuity is another factor – If for no other reason, your site’s pages will all lay out identically with CSS based layouts.

Page file sizes – Including 30 font tags and 50 span tags and a dozen table tags is no doubt going to increase your page file size. Search engines need to see what the “meat” of your site is (the content, for those of you wondering) quickly and efficiently. Site visitors want to see that very same “meat” just as fast and easily. A page that takes longer than a second or two to load is going to leave quite the bad taste (rotten meat?) in the mouths of search engines and site visitors.

So what’s this “Design for your audience” thing, then?

Well, upon many discussions I’ve been a part of, I’ve learned that what I know about browser specifications and abilities is limited only to technologically advanced countries. There are many countries where Internet Explorer 4.0 is “the latest” and their computers are 512s with 256 color (or less!) monitors and 800 x 600 screen resolution is the biggest they can get. The sites I design will break on those computers. Fortunately, I’ve yet to have to design for that type of target audience. The majority of visitors to sites I design are using IE6 or higher, or better yet, Mozilla’s FireFox, and are typically on resolutions of 1024 or better.

However if you do find yourself designing a website for senior citizens, or for people living in a less-than-technologically-advanced country like Poland or some such – keep in mind that you’ll need to toss your “regular” style of design pretty much out the window. Seniors need larger fonts, and tend to view their sites in 800 x 600 or less. Computers, browsers, and internet access in other countries may limit your abilities to even use CSS all together, and require table based layouts only.

Bottom line is to determine your target audience, and design for them. Not for yourself.