That’s a good question. In fact, it’s one of the most important and most frequently asked questions of the digital business age. Before I answer, however, let’s flash back to the very first time I was asked this question. It was circa 1998, during the toddler years of the internet.

Back in 1998, which was decades ago in internet years, the future of e-commerce was anybody’s guess, but even the most negative futurists agreed that all the signs indicated that a large portion of future business revenues would be derived from online transactions or from offline transactions that were the result of online marketing efforts.

So should your business have a website, even if your business is small and sells products or services you don’t think can be sold online? My answer in 1998 is the same as my answer today: Yes, if you have a business, you should have a website. Period. No question. Without a doubt.

Also, don’t be so quick to dismiss your product as one that can’t be sold online. Nowadays, there’s very little that can’t be sold over the internet. More than 20 million shoppers are now online, purchasing everything from books to computers to cars to real estate to jet airplanes to natural gas to you name it. If you can imagine it, someone will figure out how to sell it online.

Let me clarify one point: I’m not saying you should put all your efforts into selling your wares over the internet, though if your product lends itself to easy online sales, you should certainly be considering it. The point to be made here is that you should at the very least have a presence on the web so that customers, potential employees, business partners and perhaps even investors can quickly and easily find out more about your business and the products or services you have to offer.

That said, it’s not enough that you just have a website. You must have a professional-looking site if you want to be taken seriously. Since many consumers now search for information online prior to making a purchase at a brick-and-mortar store, your site may be the first chance you have at making a good impression on a potential buyer. If your site looks like it was designed by a barrel of colorblind monkeys, your chance at making a good first impression will be lost.

One of the great things about the internet is that it has leveled the playing field when it comes to competing with the big boys. As mentioned, you have one shot at making a good first impression. With a well-designed site, your little operation can project the image and professionalism of a much larger company. The inverse is also true. I’ve seen many big company websites that were so badly designed and hard to navigate that they completely lacked professionalism and credibility. Good for you, too bad for them.

You also mention that yours is a small operation, but when it comes to benefiting from a website, size does not matter. I don’t care if you’re a one-man show or a 10,000-employee corporate giant; if you don’t have a website, you’re losing business to other companies that do.

Here’s the exception to my rule: It’s actually better to have no website at all than to have one that makes your business look bad. Your site speaks volumes about your business. It either says, “Hey, look, we take our business so seriously that we have created this wonderful site for our customers!” or it screams, “Hey, look, I let my 10-year-old nephew design my site. Good luck finding anything!”

Your website is an important part of your business. Make sure you treat it as such.

7. A Usable Page Weight

Ironically I used to hate the Web. I started with dial-up and it was a miserable experience. Moreover, back in the day it seemed that every site I visited required some sort of plugin or add-on to make it work. Frankly, the Internet was a pain in the butt. This has changed on some levels. The need for plugins or add-ons is greatly reduced what with operating systems pre-loaded with all the necessary support. But some people still have dial-up. For the last 10 years I’ve had cable broadband and it’s a dream. I’m spoiled. And it’s very easy to forget the less fortunate and go hog wild, loading my pages with heavy graphics. It’s easy to forget how doing this will make for a less-than-happy experience to traditional dial-up and distant DSL users. Gotta keep the weight down.

I’m not saying the Web isn’t a place for heavyweights, it is, but with due consideration. If you want to offer heavyweight graphics and whatnot, let visitors navigate to them, instead of offering them on the initial page load. And warn users if something big is coming up. It’s only fair to allow those who want to opt out the opportunity to do so.

I suggest aiming for an upper limit of 100kb per page of combined background and embedded images (this is testable). You can buy a lot for a 100kb. To get the most bang for the buck, reduce the over all number of images, optimize them exporting only flattened, compressed files, and please pre-size embedded images for their location (being sure to add the height and width attributes to the img element). I’ve seen thumbnail-sizes that were really 900kb monsters with styles off! That’s just wrong.

8. A Helpful Error Page

If you’ve ever been lost, it’s always nice to see some helpful soul willing to give directions (assuming you are willing to admit you’re lost). On the Web you can be that helpful soul. Not only, as mentioned in the last installment, can you offer a site map to proactively guide your visitors, you can offer a friendly, styled “404” error page (or pages if you want to cover more errors). Your error page should offer at the very minimum offer a link home, a navigation menu, and at least a link to the site map. If you want to be a really helpful soul, though, try combing most if not all your nav tools and putting them on one page. Make a perfect 404 page offering a site map on the page (easy with dynamic site maps), search, even contact info, and more.

This is not hard to do. Ask your Web host for starters. Specifically ask them about custom error pages since you’ll want to provide something useful and most default server error pages, even styled ones, aren’t really very helpful at all.

9. Good Headings

In the last installment I spoke of the importance of using the right mark-up for the purpose at hand. I mentioned headings but didn’t go into detail. That’s because headings are so important they, well… they deserve a heading of their own. The use of headings is logical, and styling them is wide open, just use your imagination.

What good are they? They offer section demarcation, semantics and ordering, beauty in the right hands, a search indexing benefit, greater accessibility, and even a navigation source for some users of assistive technologies like screen readers. What more incentive could you possibly need to act on this recommendation?

10. Jump Links Provided

You may have detected by my suggestions so far that I’m big on helping Website users. I feel that the easier my sites are to use, the better their experience will be. I want them to not only find the goods, being supported along the way as needed, passively and on demand if at all possible, but I want them to want to come back. So, one of my twelve is going to have to be offering skip or jump links. I find these are very helpful to everyone with exception to most of those who use a mouse or pointer — and that is a greater number of people than you may realize. A jump link affords users the opportunity to jump down the page to the content or navigation, by-pass redundant or lengthy sections, access help content, and jump back up the page if you consider a top link or back to menu link a jump link. I do. Some may argue that it’s a replication of browser behavior offering links like this, but I’ve not heard recently of record numbers of browser-savvy surfers if you know what I mean. Plus, they’re simply innocuously helpful.

One rule: If you’re going to offer jump links, it’s best to make them visible, but not always necessary. There are ways to hide jump links from view while still maintaining a high level of accessibility and usability to a very large percentage of users. Do note, however, that displaying them will increase that percentage to 100.

11. Focus Styles

I’m not a dedicated keyboard user, but I do use my keyboard a lot. It’s helpful at times, convenient at other times. It’s an option. Sometimes I use my keyboard on the Web, tabbing onto pages, bouncing around from link to link following the natural source order of the page. Sometimes, however, depending on the site, this can be difficult. I’ll be tabbing along, minding my own business, when all of a sudden, wham, I’m lost. I don’t know where I am on the page. The reason is invariably the developer of the site failed to offer one to the most simplistic of accommodations: link :focus. Probably due to simple ignorance. But I’m here to change that.

To offer link focus it involves nothing more than a simple style sheet entry, like this:

a:focus, a:active { color : black; background-color : yellow; }

The a:active is for Internet Explorer, and to provide the when-activated styling on other graphical browsers. Obviously you can get more creative, but that above will help make your Web pages a lot more navigable to keyboard users and nobody will suffer a diminished experience.

12. Robots.txt File

You may be wondering why I included something so mundane as a robots.txt file in this line-up, but I feel it’s very helpful to have one. It provides instructions to honest indexing robots and spiders like the GoogleBot, telling them to stay out of certain directories you don’t really want them in anyway. Why have your bandwidth wasted needlessly?

Some people, I’ve heard, want to disable right-click on their sites thinking that they may somehow actually succeed in stopping people from copying their images (can’t be done), yet they don’t have a robots.txt file excluding their images directory. The latter would be far more worthwhile. It’s very easy to make one, there are even tools you can use to help you get the job done.

Is There More?

The short answer is, yes, of course. But if you satisfy all twelve items in this two-part article, you have done well. You’ll be offering a quality site that is a cut above many sites of the Web. And the benefits, you may find, will actually be noticeable, and perhaps even tangible. Happy coding.

1. A Proper Navigation Menu

Any domain on the Web that consists of more than one page is a Website and as such needs to be navigable. Now this might seem obvious, but if that is so, why do I occasionally encounter sites with mystery meat navigation? Or, on a deeper level, are inaccessible because they require JavaScript or images in order to function. These must be a upper layers consistent with a progressive enhancement, not a requirement. An easy to use and accessible navigation menu must be available. There are other concerns as it pertains to building a proper navigation menu, as well, such as…

• Its link styling the :hover, :focus, and :active pseudo elements.
• The semantic use of lists to properly organize your links into a proper menu.
• And even going so far as marking the current page.

2. A Meaningful, Well-Formed Title

By meaningful title I am specifically referring to the title element — what’s shown on the title bar of your browser. Ideally the content title should come before the site (this helps search users find stuff like your main content heading, instead of seeing your site name over and over again) and, if at all possible, each page should have its own title. This is an example of an effective use of the title element:

<title> Twelve Things Most Sites Need | Web page Design For Designers © </title>

Note: I prefer using a hyphen separator, but the vertical bar or pipe used on this site is fine.

3. A Method of Contact

I can’t recommend putting your email address on your site, even obfuscated unless done in a way that is actuallysecure (shop around but buyer beware, many touted methods don’t work indefinitely), but offering a means of contact is almost always necessary. It not only lends itself to sense of legitimacy, it’s simply the right thing to do in service to your visitors. To facilitate this, offering a phone number and address is good, if possible, and a contact form is a nice option in lieu of a mailto: email link that not all visitors will be able to use anyway. However, since some visitors are robots or people up to no good, use a secure contact form. It has been argued that client-side spam filtering negates the need to protect your email address on the Web, but your address can still be harvested and put into use. There is no winning this war — not as long as common account names like info@yourdomain.com, contact@yourdomain.com, and admin@yourdomain.com can be put to use as soon as you register a domain name — but it doesn’t mean we should make it easy.

4. A Site Map

Not all site visitors are well served by a site map and not all sites require one. Say, for instance, you have a basic five page site with a clear and consistent, and readily available, navigation menu. You could probably do without a site map. But how many sites freeze at five pages? Experience over time has taught me domains tend to sprawl as new needs inspire new pages or applications. Start your site map as soon as it starts to grow, or consider adding it to your site from the beginning. At first you can link to it from the footer, then later move the link to a more obvious location as the site grows, since more visitors will find it useful. On small sites I will often incorporate the site map into a “site help” or “site info” page, killing off numerous birds with a one stone — accessibility and copyright statements, privacy policy, etc. If you aren’t yet convinced, also know that many users, most notably the blind, will seek a site map first since it gives them a snap-shot of the domain’s offerings, so to speak.

A site map can be as simple as a Web page with an unordered list. Maintaining it can be quite simple: add a new list item when a new page is added. The hardest part is actually remembering to update it. That’s where the beauty of dynamic site maps really shine. Applications such as WordPress, as just one example, afford users the opportunity to create everything from simple to complex site maps with not much more than a simple function call. “Plugins” are also available further simplifying the process for novice users. And if you want to step it up a notch, you can also offer an XML site map but know that an HTML site map is what I am referring to. People should come first, not robots and spiders.

5. Passive Accessibility

I’m not going to bore you with some soliloquy. I will say this, though: Your Website should be accessible. Whether or not you do it for your visitors or for yourself is irrelevant. If you do it purely to satisfy your own needs your visitors will also benefit… can’t be helped. So, it’s all good. If you’re not familiar with the advantages to having an accessible site, maybe this presentation will help explain why accessibility makes sense. If you’re not familiar with Web accessibility, there are helpful links on the last page of the presentation. You can also get some basic info from the Web Accessibility Initiative (WAI).

6. Standardized Markup

This, like offering a proper navigation menu, may seem obvious, but it’s a big failing across the Web. From using tables for layout, to the improper use of breaks, to using a “big-bold” font style instead of a heading. Using the right markup for its designated purpose, without going overboard by stretching it usage, is useful not to not only accessibility and usability, but the practice of using semantic markup helps ensure forward compatibility. Truthfully, if you’re about to build a new Website and you’re planning on using tables and old practices, fuggedaboudit. You won’t be doing yourself or your client a favor if you don’t make peace with CSS and valid HTML 4.01 (for awhile) orXHTML 1.0/1.1. (A little accessibility awareness isn’t going to kill you either.) Web standards aren’t a joke and your cooperation in their adoption is of great importance.

Look for part 2 coming soon….

Take a look around, drop me a comment and let me know what you think!

-greg

Redesigning your own website has to be one of the hardest things to do…you are way more critical, and second guess yourself all the time. Why is that?

Either way, this thing gets done today! I’m ready to launch the fully redesigned Cornerstone Graphics & Design! Well, actually it is already launched, but all features/pages will be available!

-greg

So…don’t take the 4th for granted. Love it, know your history, and appreciate the men and women still fighting for it.

-greg

Didn’t realize what a major undertaking it is to redo your own site. I can work on other sites all day long, but when it comes to my own I start second guessing myself. I guess that’s a problem alot of designers have – not being able to promote themselves.

I suppose if we could do that better, there would be less “starving artists” in the world.

- greg

If you have a favorite CMS that we didn’t list here, let us know.

concrete5

Concrete5 is a free open source CMS that focuses on ease of use, which makes it great for designers. Some key features include a file manager with bulk upload, drag-n-drop layout editor, and an open marketplace of add-ons.

ExpressionEngine

ExpressionEngine is a flexible, feature-rich content management system that empowers thousands of individuals, organizations, and companies around the world to easily manage their website. It’s a favorite of famous web designers such as Veerle Pieters.

Textpattern

Textpattern is a flexible, elegant and easy-to-use content management system. It is both free and open source.

Joomla!

Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications.

Movable Type

Movable Type claims to be an “All-in-One Social Publishing Platform”, and it definitely delivers. It powers some pretty big sites including Barack Obama’s site and Serious Eats.

Cushy CMS

CushyCMS is a Content Management Systems (CMS) that is truly simple. There is no software to install and no programming required.

WordPress

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. WordPress is probably the most popular CMS and blogging platform out there.

Radiant CMS

Radiant is a no-fluff, open source content management system designed for small teams.

Drupal

Drupal is a free CMS that allows an individual or a community of users to easily publish, manage and organize a wide variety of content on a website. Tens of thousands of people and organizations are using Drupal to power tons of different web sites.

SilverStripe

The SilverStripe CMS is a flexible open source Content Management System that gives everyone involved in a web project the tools they need to do their jobs.

DotNetNuke

DotNetNuke is the leading Web Content Management Platform (or CMS) for Microsoft ASP.NET, powering over 600,000 production web sites worldwide. The flexible DotNetNuke open source CMS platform also functions as a web application development framework. Depending on your role within your organization, DotNetNuke provides powerful benefits to support your Web initiatives.

Periodically, we will post articles on design, color, branding, etc here as well as random stuff that we think is cool. Also, once we get up and running fully, you can check out some links of stuff we like to look at and read.

So sit back and enjoy the ride! We hope you like what you see!

-Greg