Web Design Basics

An Introduction to Web Design | Design Issues
Web Accessibility | Web Design Resources

An Introduction to Web Design

Web design is a multi-faceted term for a variety of skills used to produce anything from an accessible document to a multi-media experience. From the earliest beginnings (where the intention was simply to place scientific documents online for viewing by other scientists) the Web has grown from an estimated 50 websites worldwide in 1994 to where information has become ubiquitous.

A Note About Capitalization

The term "Web" refers to the World Wide Web and is therefore correctly capitalized in this context, as is the term "Internet" which refers to the world-wide network that includes the Web.

Challenged by Technology

While most users just want to use their current web browser to view the various websites they visit, the site designer must be aware of the capabilities and shortcomings of the various browsers in use.

When you publish a book or a poster, you don't need to worry about what software or hardware the reader has. It is a greater challenge to design a workable web site than a similar document in print.

Different Browser, Different Experience

There are differences in the ability of various web browsers to portray specific enhancements. Pages designed with only with one browser in mind (usually Internet Explorer), sometimes creating unexpected results when another browser is used.

There are differences within the same operating system (never mind between different platforms). Proprietary tags may work in one browser but not in another or only in the latest versions of certain browsers.

You need to accommodate all browsers to some degree if you want to make your site accessible to all visitors. Try to have the site degrade gracefully rather than not work at all. An HTML validator can check your HTML for errors and help prevent problems you can't see with your browser or operating system.

HTML Challenged by Today's Content

HTML was never intended by the inventors of the Internet to carry the variety of content that we see today. Further complicated by the fallout from Microsoft's war on Netscape where the user (and security) was completely ignored in the pursuit of corporate objectives. These challenges have resulted in a broad range of "hacks" to make pages appear relatively similar across the wide range of mediums.

One of the problems has been that these hacks depend upon quirks the affected browser. As new versions are released, these may no longer work and the site may be broken. Obviously, this creates challenges for sites that are no longer maintained or updated.

HTML 5

HTML 5 is intended to make the development of applications much easier and to remove the need for these hacks. It will provide for the ability to embrace newer and simpler technologies while still allowing older browsers to function (but with a poorer user experience).

If you're just learning HTML, I strongly recommend checking out the Sitepoint Forums. Sitepoint books are well-written and affordable.

Purpose Drives the Direction

The nature of the website you are building and its relative importance will determine both the investment of resources that you put into building a site and the nature and integrity of the content.

There are thousands of people expressing themselves on "hobby" websites without much knowledge about site design or technology. Obviously, the bar is much higher if you are going to develop a business or e-commerce site.

Blogs

Blogs (a compacting of web logs) provide an alternative to website where non-technical users can present their point-of-view — often for free. With the use of templates, the look of your blog can be changed without losing the content or necessarily understanding the structure of how it works. Push-button technology allows for editing your content in a manner similar to a word processor.

Hosting Considerations

A blog can be hosted on a website using the same HTML you built the rest of the site with, but it is often easier to simply use the free hosting and templates available with the following services:

Template Limitations

Unlike your custom website, there are limitations in the structure of the blog layout depending upon the template you use. If you want to customize your blog layout significantly or add features not found in the free templates you may need to either pay an annual fee or purchase the right to customize that template.

You can create your own template if you wish to learn how, but there are necessary limitations created by the underlying technology in order that it can allow the interchangable use of these templates.

Business Solutions

If you are promoting a business or building an e-commerce site, your needs are different and the resources you need to achieve these goals will probably be different.

Don't Underestimate the Required Skills

Many people will at least try learning to build their own site or to hire someone with relatively little experience to build a site for their business. This is often because they don't understand what is involved in building or maintaining an effective site.

Consider what is at stake. Would you let an amateur design your brochures and other promotional material? For some, a simple brochure is all that is required, but if your business needs a professional image, you will probably need professional assistance.

The resources on this page and the other related pages on this site should give you enough information to decide on the route you wish to take. At the very least, you will be able to make an informed decision.

Return to top

Design Issues

HTML

HTML is still the dominant format for creating websites. HTML is now enhanced by many other addons and standards including JavaScript, CSS, XML and DOM.

HTML Primers

This site offers a very basic introduction to HTML — Cut 'N Paste HTML Editing. It is intended for those wishing to edit an existing hand-coded HTML document using cut and paste techniques, but will also introduce you to a general understanding of how HTML works. There are also more detailed HTML primers and courses available to you.

Cascading Style Sheets

Further down the Cut 'N Paste HTML Editing page you learn about CSS and how they can made alteration of site design easier and reduce the repetitive code found in earlier HTML models, thereby speeding up the downloading and display of your site.

Separating Content From Layout

CSS is a whole new realm of layout and styling of your page. CSS can replace tables for layout, removing a huge design complexity for those simply editing the page information. CSS can also reduce the amount of code necessary to display the text in the fonts, colours and styles you wish to use. Instead of having to define every instance in your site, you can list the details in one or more external CSS file that controls the layout of your whole site.

Two excellent sites illustrate the power of this concept:

In neither case could both the effect and flexibility be created using traditional layout methods without creating two completely different web pages.

CSS Resources

There are a number of sites on the Web that offer these resources. If you are interested in coding I strongly recommend the books from SitePoint. There is more information and links in the Coding Solutions section of the Web Design Resources page.

Hand Coding or Software Tools?

Even today's word processors are capable of creating a relatively-functional website but they don't give you the control that a dedicated professional program like Adobe DreamWeaver can provide. Older programs, particularly Microsoft's FrontPage, make proprietary sites inaccessible to modern browsers like FireFox and Safari.

Visitor Patience is Limited

On the Web your competition is only a click away, so you'll want to leverage whatever advantage you can and present your information as quickly as possible to the largest potential audience.

Hand-coding provides for an additional level of control and minimizes the size of HTML files, increasing download speeds, and reduces the chances that a viewer will abandon your site to check out your competitor's before seeing your information.

Wiz-bang Effects

Today's software can provide some impressive effects for web design, but this needs to be tempered by the reality that such content may never be viewed by your intended audience if the download times are too long or if their browser needs to download another plug-in (software helper) to view it.

Never use technology unnecessarily — any special requirement is going to limit the availability of your content to someone. Be sure to evaluate such effects using the sort of bandwidth (download speed)_and equipment available to your target audience rather than on the designer's computer.

Content is King

Most people come to view a site for the information that it contains. How it is displayed is secondary unless that display impedes their ability to view the content. That doesn't mean that you don't need a decent presentation, but an exceptional presentation will not overcome the lack of either expected or useful content.

Who is Your Audience?

How you build a site will depend a great deal on your expected (targeted) audience and their assumed expectations and limitations. If you are building a site aimed at seniors, you may decide on content and layout that is different that what you would use to attract children and different again for an Intranet (private internal network where you know the exact hardware and software being used).

Whatever the audience, you'll want to ensure that the site degrades gracefully and that the use of alternative operating systems and/or browsers (particularly older browsers) doesn't break the usability of your site.

Keep It Simple

A website should be designed for easy access to information the viewer is looking for. If they can't find the information they are seeking they will go elsewhere.

Navigation

Navigation should be intuitive and there should be alternatives to your main navigation. Avoid "mystery meat navigation" that challenge's your visitor's expectations.

Frames

Watch out for the problems that frames-based sites create. While it is great to have your company logo or your navigation system set around a content area, this has a number of drawbacks:

Tables for Tabular Data Only

Tables were designed to present tabular data, but have long been used to lay out sites in an attempt to gain the sort of control that people were used to in print documents. Designers learned that they could make tables "invisible" to the view by making the border size zero and further control the placement of content by using invisible (empty) images.

Using Tables for Layout is Problematic

Unfortunately, this creates several problems:

The problem with using tables (originally a series of slides) explains the problem with tables in greater detail.

An example of a table displaying tabular data is found on the Windows Resources page.

Avoid Windows Special Characters

Many people assume that what they see on their computers is what will be seen by others.

Windows characters 128–159 don't display properly as characters on most web pages. Here they are in order (129,141,143,144 and 157 don't display and aren't shown):

€ ‚ ƒ „ … † ‡ ˆ ‰ Š ‹ Œ Ž ‘ ’ “ ” • – — ˜ ™ š › œ ž Ÿ

This can happen when someone copies the contents of a Microsoft Word file that contains "smart quotes" or similar characters into their web document (especially when the HTML document is using the UTF-8 rather than the ISO-8859-1 character set).

These characters may be displayed incorrectly (such as a diamond with a question mark inside), or not at all. If you check your pages using the W3C Validator, you can catch these problems and fix them before they deter your viewers.

Correctly Encoding Special Characters

Special characters such as stylized quotation marks, em dash, en dash and the trade mark symbol are available using special HTML character entities. The following are in the same order as the symbols shown in the last section:

€ ‚ ƒ „ … † ‡ ˆ ‰ Š ‹ Œ Ž ‘ ’ “ ” • – — ˜ ™ š › œ ž Ÿ

Some of these (Ž ž and Ÿ) are indicated with a numeric entry as there is no &text; equivalent. All the numeric entries are listed below:

€ ‚ ƒ „ … † ‡ ˆ ‰ Š ‹ Œ Ž ‘ ’ “ ” • – — ˜ ™ š › œ ž Ÿ

These have been more problematic in older browsers on some operating systems, including IBM OS/2.

Server Side Includes

Instead of frames, use SSI to insert a section of HTML that is repeated throughout your site such as a header, footer or navigation bar. These do take slightly more time to scan a page and plug in the SSI files before rendering the page, but you can alter SSI content for the whole site in a single edit rather doing so for every page on your site. Imagine how much easier it is to update footers and other similar site-wide content.

SSI only works on a server and may not be permitted by your host server, so you will want to test to see if it works before going to all the work of converting your site. Some sites require that you use the .shtml extension on all your files, although that is not strictly a requirement for the Apache hosting software.

PDF Documents

Adobe Acrobat creates PDF format that retains all the layout and fonts of any document you can print. The reader is free, but you will need to purchase the Adobe Acrobat program to create the PDF. There are other PDF vendors, but Adobe was the originator of the technology and still creates the smallest and most flexible documents.

PDF documents are an excellent way to post print-based documents like newsletters and forms on the Web. Because the reader is free, anyone can view and print these documents, yet PDF documents retain the same control in layout you have come to expect with printed documents.

The fact that PDF documents are routinely catalogued by search engines complicates matters. you will want to be careful what is included in any PDF documents posted on-line because email addresses and other private information are included in search databases.

Adobe has adapted Acrobat so that it can function as a Web page for layout because the Acrobat Reader can be integrated with web browsers. However, a PDF-based Web page doesn't work like an HTML-based page. I suggest that this is not the best medium for displaying your overall Web presence.

While the installation Acrobat Reader is very widespread and has become the standard for most computer hardware and software documentation, it is not universal. You will probably want to ensure that you make it easier for your viewers to use the information you've provided by following a few simple rules:

Flash Introductions

Flash allows for wonderful animation, but it can also be a hurdle for those with lower bandwidth (dial-up or lite-speed access) or that don't have the necessary plugins installed.

Specify A DOCTYPE

You need specify a document type declaration (DTD or DOCTYPE) at the start of each page (no longer needed for HTML 5). This indicates what level of code you are writing to a validation service and is the first item on the page.

Without a DTD each browser will make a guess at what you are trying to present, likely getting it wrong. Internet Explorer operates in "quirks" mode if it cannot determine the document type since it assumes that the page is an older one designed for earlier versions of HTML.

Indicate Encoding Format

Since the Internet is international, your page is bound to be viewed by many that don't use the same language as you do. Specifying a Encoding format tells the browser how to display your page. The most common in North America are iso-8859-1 (Western Europe) or UTF-8 (Unicode, world-wide).

About Graphics

Using Pre-made Graphics

If you do use graphics created by others on your website please be sure to read the usage agreement for those images. Most will require a link back to their site, announcing to everyone that you were unable to develop your own. Use on commercial pages is most often prohibited.

Create Your Own Graphics

Modern graphics programs are quite adept at creating buttons and drop shadows, particularly those especially designed for the task. Programs like Paintshop Pro are quite reasonable and you can try many before you buy the one that works best for you. Photoshop is excellent, but the purchase price is commensurate to its abilities.

The Graphics on This Site

The graphics on this site are either created by myself (for which I retain the copyright) or they are used exclusively to link to the page where they were obtained. No one has permission to use my images except with express written consent and you need to verify the use of third-party images with the legal owners.

The graphics on most of the websites that I design are created by myself, are created by a professional graphic artist I recommend, or are provided by the client. I've altered some third-party images to create drop shadows or other effects, but none are found on free sites.

Return to top

Web Accessibility

Visually Impaired Access

Accessibility has several meanings and objectives. Wonderful tools like aural (speaking) browsers give the visually impaired access to the Internet, but repetitive menu systems can become annoying unless they are suitably designed to allow users to skip them.

Style Sheets Offer Flexibility

Improvements in style sheet properties is adding flexibility to alter the content to make audio presentations more realistic and provide for variations in pitch-range, richness, and volume among others.

You might also wish to consider what colours you are planning to use on your site. While red text on a black background may give you some interesting 3D effects, it is very difficult to read and often doesn't print as intended. Many people have difficulty unless there is a high-contrast between the background and the text and the links.

Make Your Page Viewable

These can be difficult tasks, but they can be accomplished by adding specialized style sheets that offer the user multiple choices in how they view, hear or print the site.

Modern browsers allow the user a great more control, including the ability to increase or decrease the font size. This can backfire if there are significant graphics content on your site since the graphics don't resize. This is particularly true for navigation links that use graphics since the descriptive "text" on navigation graphics cannot be resized. CSS text navigation is both attractive and permits resizing

Use Resources Appropriately

You will want to determine your audience before using some of these resources. Music and JavaScript are just two such issues.

Music

Music may add an ambience to your site, but don't forget the possible barriers this can create for your viewers:

Everything you add to your site adds a complexity that your audience needs to deal with unless the option is transparent. Don't give folks a reason to leave your site, possibly to view the next site listed on the search they conducted to locate your site — your competition's site.

JavaScript

JavaScript is great for creating rollovers and other interesting effects, but you can wear down your viewer with a great deal of activity on your page. JavaScript does offer a number of useful and interesting features, including "browser-sniffing" if you wish to create different versions of your site (or different style sheets) optimized for different browsers.

Other Helpful Sites

There are other sites with useful tips about page layout and how to avoid making mistakes.

Return to top

Design Resources

There are many resources on the Web that will give your the basics of how to build a website. You should remember that the Internet is a very dynamic environment and standards change very quickly. Make sure that what you read is still valid and ignore everything else.

Web Design Tools

There are several resources on this site that will help:

Return to top

RHC Web Design

Let Us Help

You may wish to have us design a site for you. We can quote the costs for anything from a basic website to more complex projects. You gain from our experience and don't make the kind of costly mistakes that many beginners make.

Contact us to see how we can help you.

Return to top

More About Related Issues

Secure Net Commerce

The following related pages offer more information about providing online services in an ethical and safe manner:

Protecting Your Online Identity

The following related pages offer more information about protecting your online identity:

Securing Your Computer

The following related pages offer more information about securing your computer:

Return to top

www.russharvey.bc.ca/resources/self.html
Updated January 24, 2012