Developing Web Pages

As in Web Site development, best practices exist with regard to the individual pages that make up a web site.  While there are no strict rules about designing pages, there are some guidelines you can follow to create web pages that work well and look good.

Web page design closely follows web site design.  You must determine your primary audience, choose which information to include in your message, and then present that information in a meaningful way.  Sounds simple enough!  Following are some guidelines to make the delivery of content as easy as possible.  This is not an exhaustive list but it is a good start.

Understand the Medium

Many times, developers forget that they have targeted a medium unlike any other: the Web.  Rather they choose to present information as if it were appearing in a newspaper, magazine, brochure, or other printed form.  As a result, the pages they design look great - on paper.  Unfortunately, they don't live on paper - and far more people will view them on a computer screen than will print them.  Here are a few things to consider when targeting the web:

• Write Concisely
  Just like the English teacher said!  Well, that English teacher was exactly right - concise writing is imperative on the web.  If your viewers can't find what hey are looking for in a very short amount of time they will go elsewhere to find it.  You should try to create pages that can be scanned rather quickly.  Clever use of color can help viewers locate what they need in a timely manner.
• Design Standalone Pages
  No matter how hard you try to establish an information path for your site, you have no real control over how any given viewer will get to your page.  They may have followed a link from a search engine to a page that's 3 levels deep in your directory structure.  By creating pages that can stand on their own, you can make any visit to your site meaningful.
• Use Emphasis Wisely
  When you use emphasis on your pages, the viewer will be drawn to whatever is emphasized.  That makes sense!  Strive to make the things that are emphasized on the page be important to the primary audience or your message will be lost.  Also, be careful with underlining text.  Most users will expect any text to be a hyperlink and be puzzled when it isn't a link.
• Using HTML
  HTML is a language that describes the structure of a document.  It really isn't a tool for determining the style of a document.  Try to use the HTML tags for what they were intended.  Use the heading tags for headings - not as a way to increase the font size, for example. 
• Use a Consistent Layout
  One of the attributes of the printed world that has carried over into the online world is the concept of layouts - where do you put your stuff on the screen?  There are countless ways to answer this question and, quite frankly, all of them are right in some context.  The point is that once you choose a layout for your pages, be consistent with it by using it on every page.

Using Links

Links are what made the Internet into the World Wide Web.  They provide a way for users to navigate to any document located anywhere on the network.  Unfortunately, links can be confusing to viewers if you are not careful about how you use and design them.

• Use Descriptive Text
  Always try to let the viewer know where they are going whenever they click on a link.  The easiest (and, coincidentally, best) way to do this is to attach the link to the descriptive part of the message.  Here's an example:  Click here to see today's paper.  See the New York Times.  Which one would you follow?  In fact, the entire "click here syndrome" is something to avoid at all costs.
• Iconography
  When you attach a link to an image, you've created an icon on your page.  Try to make sure that anything that looks like a button acts like a button.  In other words, if one of your images looks like a button, then the user expects something to happen when the button is clicked.  It's your job to make sure that something happens!
• Navigation
  Linked text is a prime candidate for providing navigation for web sites.  It's fast, simple, and easy.  What more could you ask for?  When using linked text for your navigation tools, try to group related items together.

Using Images

Images fall into the category of multimedia and therefore are a two edged sword.  Inventive use of images can set your site apart from others.  Images, however, can be large files.  And if you base much of your site's structure on complicated images, users will surf elsewhere instead of waiting for your images to download.

• Use Images Only When Necessary
  Many times, web developers overuse images on sites, bombarding the viewer with eye candy that ultimately distracts them from the content of the site.  Images should contribute to the overall look and feel of the site, not take away from it!
• Use Alternative Text
  Believe it or not, some users don't have any interest in waiting for that masterpiece you created to download.  They turn off the images in their browsers to increase the speed.  If you have used your image as your navigation tool, those viewers will not be able to navigate your site unless you have provided alternate text to indicate what the picture is.
• Be Careful with Backgrounds
  Unless you have your heart set on a particular background, my advice is to stop using them.  They only serve to distract the viewer from the message and are sometimes difficult to match with.  Not only do you have to match the text color, but also the link color, visited link color, and the active link color.  Solid color backgrounds load faster and usually look cleaner.  White backgrounds with dark text are as professional as it gets on the web (yes, I know, this site has a dark background with light text!).
• Keep Your Images Small
  This one sounds like a no brainer but it can be tricky.  Try to achieve a balance between file size and image quality.  Obviously, the higher the quality, the larger the file - but there are times when nothing but a large file will do.  The trick is to warn the user that a large download is coming, don't force it on them.  You can also use thumbnailed images - small images that link to larger images.

Other Good Habits

Here is a short list of things that are somewhat self explanatory.  They make sense and you should try to get in the habit of making them part of your design routine.

• Link back to your home page from every page in your site
• Include a way for viewers to contact you on every page
• Sign your pages
• Provide alternate pages when targeting a specific technology
• Don't split topics across pages
• Use color and text effects to your advantage
• Update your pages frequently and tell the users they've been updated

Well that's a short introduction to some of the things to consider before you design your pages.  Take them to heart - or discard them - it's entirely up to you when you design your home on the web.  As Bob Ross used to say: "It's your world, you make the decisions."