Russ Harvey Consulting - Computer and Internet Services

Web Design Basics

Design Primer | Accessibility | Resources

Web design is a multi-faceted term for a variety of skills.

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 multimedia 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 as well as other devices.

When you publish a book or a poster, you release a finished product. Unless it is an e-book, no special software or hardware is required to view it. The web designer must keep the viewer's capabilities in mind.

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 can create unexpected results when viewed in another browser.

There are differences within different versions of 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. It is better 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. This is further complicated by the pursuit of corporate objectives where browser dominance was more important than security or ease-of-use. This resulted in a broad range of "hacks" to make pages appear relatively similar in most browsers and mediums.

These hacks depend upon quirks in 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.


HTML5 is intended to make the development of applications much easier without the need to trick browsers. It provides for the ability to embrace newer and simpler technologies while still allowing older browsers to function (even if the user experience is degraded).

If you're just learning HTML, check out the Sitepoint for their learning and reference resources. Sitepoint books are well-written and affordable. Strongly recommended.

The Technology is Changing

HTML5 is changing the way we're viewing the Web. Plugins are being replaced with native technologies that are safer and faster.

The commercial media industry is undergoing a major transition as content providers move away from proprietary web plug-in based delivery mechanisms (such as Flash or Silverlight), and replace them with unified plug-in free video players that are based on HTML5 specifications and commercial media encoding capabilities. Browsers are moving away from plug-ins as well, as Chrome is with NPAPI and Microsoft Edge is with ActiveX, and toward more secure extension models. — Microsoft Edge Team [emphasis mine]

HTML5 Video

HTML5 video can be played back on the latest desktop and mobile devices without special plugins — even on older browsers that traditionally required Flash plugins.

Source: Pixabay via

“Video for everybody” shows how to use the HTML5 video element. Try it out on the test page.

HTML5 3D Rendering

CSS Preserve-3D allows for the 3D rendering of animated objects (supported by most modern browsers including Microsoft Edge but not IE).

The Internet Explorer Team Blog's Living on the Edge post displays a traditional flat rotating GIF along side two rotating GIFs using CSS Preserve-3D (shown below as GIFs so you can visualize the difference):

Traditional flat IE & HTML5 rotating logos

CSS Preserve-3D IE & HTML5 rotating logos

Purpose Drives Direction

Rather than being driven by technology, let the site's purpose determine how much exacting you are when building a site.

Thousands of people express 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 provide an alternative to website where non-technical users can present their point-of-view in a series of posts — often for free.

Push-button technology allows for editing your content with tools that look like those in a word processor.

With the use of free and purchased templates, the design of your blog can be changed without endangering the content or necessarily understanding the structure of how it works.

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 to allow the interchangeable use of 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?

If your business needs a professional image, you will probably need professional assistance.

Return to top

Simple Design Primer

The resources on this page and the other related pages on this site should give you enough information to make an informed decision.


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

The Cut 'N Paste HTML Editing page is a very basic introduction to HTML intended for those wishing to edit an existing hand-coded HTML document using cut and paste techniques. It will also provide you with a rudimentary understanding of how HTML works.

There are also more detailed HTML primers and courses available to you.

Cascading Style Sheets

CSS provides for whole new realm of layout and styling of your page. CSS greatly reduces design complexity. This speeds up the display of your site content.

Separating Content From Layout

CSS reduces 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 CSS:

In neither case could both the effect and flexibility of the content be created using traditional layout methods.

CSS Resources

There are a number of sites on the Web that include CSS resources. The resources and books from SitePoint are strongly recommended.

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 obsolete FrontPage, make proprietary sites inaccessible to modern browsers like FireFox, Chrome 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.

Most current web design software doesn't add nearly as much proprietary code as they once did. However, the smaller your page files, the quicker your site will load. Google Developer recommends removing all spaces in your CSS, but that can create issues when you want to make an adjustment.

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. Today's browsers are removing support for most plugins since HTML5 provides better options for multimedia content.

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 viewing it on the designer's computer.

Content is King

Most people view a site for the information it contains. How it is displayed is secondary (unless it impedes their ability to view the content). You need a decent presentation, but an exceptional presentation will not overcome the lack of useful (or expected) content.

Who is Your Audience?

What do you know about your expected (targeted) audience? What can you assume about their 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).

Whatever the audience, you'll want to ensure that the site degrades gracefully and that viewers using alternative operating systems and/or browsers (particularly older browsers) can still view your site.

Don't Make Your Site Visitors Work!

A website should provide easy access to information the viewer is looking for. People tend to skim websites rather than read them much like they read magazines in a waiting room. If they don't quickly find something interesting they move on — perhaps to your competitor's site.

Ensure Navigation is Intuitive

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

  • Ensure links are clearly visible. Avoid using underlined text for emphasis within the regular text (underlined text indicates a link).
  • Provide alternative text for images on your site.
  • A site map will help people to find what they are looking for if it isn't in the main menu.
  • Provide solutions to visitors landing on missing pages (known as a 404 error).
  • Be careful when using JavaScript for navigation and ensure that navigation works if JavaScript is disabled by the user.
  • Link text should be descriptive. Using “click here” for all your links can frustrate site visitors.

Stop Using Obsolete Technology

Older techniques for laying out websites will no longer work in today's world of multiple screen resolutions and costly mobile data plans.

Don't Use Frames

Frames-based sites are difficult to bookmark, link to and aren't user-friendly.

Tables for Tabular Data Only

Use tables only to present tabular data like the following:

My Windows 10 Test Computer's Windows Experience Rating
Component: What's Rated: Rating:
Processor: Calculations per second 4.9
Memory (RAM): Memory operations per second 4.9
Graphics: Desktop performance for Windows Aero 3.1
Gaming graphics: 3D business and gaming graphics 3.5
Primary hard disk: Disk data transfer rate 5.4

Tables for Layout are NOT User-friendly

Tables have long been used to lay out sites in an attempt to gain the sort of control that people were used to with print documents. These sites are bulky, difficult to maintain and not user-friendly.

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

Avoid Special Characters

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

Windows Special Characters

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.

Mac Special Characters

Mac special characters may also create problems for Windows users.

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 numeric entries have no such equivalent):

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

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

All the numeric equivalents are listed below:

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

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

Server Side Includes

SSI can be used 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. Apache hosting software may require an entry to the .htaccess file to enable SSI (ask your hosting service).

I no longer use SSI on my site. I found it was easier to include footers on most pages, particularly when using JavaScript to update the current year on the copyright automatically.

PDF Documents

Adobe invented the PDF format. When Acrobat was originally developed, most word process and other office software was incompatible with each other. By generating a PDF, the developer could provide a document that can be viewed or printed on any system while retaining the layout and fonts.

Adobe developed Acrobat as the professional software suite for creating and editing PDFs but then made a free PDF viewer called Adobe Reader to encourage widespread use and it soon became virtually universal.

Most browsers can view PDFs natively and there are many free PDF viewers.

Great for Newsletters and Printable Forms

PDF documents are an excellent way to post print-based documents like newsletters. PDF documents retain the same control in layout you have come to expect with printed documents and you can update newsletters by replacing the PDF file of the same name (e.g. newsletter.pdf).

Printable forms work great in PDF where people are submitting cheques with the filled-out form. However, you might be better creating a web-based form that emails the content directly to the person dealing with the form submissions with a secondary online payment link for PayPal or INTERAC e-Transfer.

PDF-based Websites NOT Recommended

Adobe adapted Acrobat so that it could generate PDF-based Web sites. However, a PDF-based Web page are slower, don't have the flexibility that HTML provides and are may provide serious issues meeting accessibility requirements.

Privacy & Security Concerns

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 on linked PDFs are automatically included in search databases.

Because Adobe Reader is so widespread, its vulnerabilities now present a threat to the security of computers running all common operating systems as well as mobile devices. I strongly recommend using an alternative PDF reader because of security issues with Adobe Reader.

While most modern browsers are capable of displaying PDF files natively, an external reader provides a better user experience and older browsers depended upon PDF plugins.

Make Using PDFs Easier

Ask yourself if the information might not be better embedded on your site in native HTML format. This information will load quicker and is easier to interact with.

If you elect to use PDFs, make it easier for your viewers to use the information you've provided in PDF format:

  • Introduce PDF documents on your website where they are linked.
  • Keep a PDF file as small as possible.

Making Them Smaller

You can reduce the size of PDFs by resizing large images before you import them into the original document and by using a commercial PDF software to generate the PDF. If a large PDF is unavoidable, be sure to indicate its size on the introductory link.

Professional PDF Software Recommendations

Microsoft Office and LibreOffice can create PDFs these days, but you might want to explore purchasing professional software to create the smallest and most flexible documents without risking the vulnerabilities of Adobe Acrobat.

I recommend Nitro Pro or Able2Extract Pro for users that need professional quality software:

  • Nitro Pro (free to try; US$199.99 to buy) allows you to create professional quality PDF documents that anyone can view, with any PDF reader, on virtually any device. Supports Windows only. Learn more.
  • Able2Extract Professional (free to try; US$149.95 to buy) is a powerful professional PDF program that allows you to do almost anything with PDFs. Available for Windows, Mac and Linux. Learn more.

Avoid Flash Introductions

Flash can provide spectacular effects, but it can also be a hurdle for those with lower bandwidth connections, those paying for data, mobile users or those without the necessary plugins installed.

Flash is a dying technology, being replaced by capabilities built into HTML5. It is also vulnerable to security issues.

  • If you must include a Flash introduction, be sure that it is relevant and that there is a way to skip it if the viewer either chooses to or is unable to see it.
  • Examine what information the Flash provides that cannot be provided in another manner. (See the technologies listed in the Design Primer.)


You need specify a DOCTYPE at the start of each page (except for HTML5 where it is simply <!DOCTYPE html>). This indicates how your page is constructed to browsers or to a validation service. It 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 designed for earlier versions of HTML.

HTML elements and valid DOCTYPES from shows which HTML elements are valid with each DOCTYPE.

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 use graphics created by others on your website, please be sure to read the usage agreement for those images. Most free graphics will require a link back to the creator's site. Assume that the use of free graphics on commercial pages is prohibited except where it explicitly states otherwise.

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.

In modern browsers, buttons, drop shadows and other special effects can be created using HTML5 techniques.

This Site's Graphics

The graphics on this site are either created by myself (for which I retain the copyright), are licensed to me or they are used exclusively to link to the page where they were obtained (usually download buttons for proprietary software or plugins).

These images may not be used except with express written consent. You need to verify the use of third-party images with their legal owners.

I create the majority of the graphics used on the websites I design. In some cases they were created by a professional graphic artist expressly for that site; are provided by the client; or are licensed to me for use on such sites. I've altered some third-party images to create drop shadows or other effects, but NONE should be considered available for redistribution or use on other sites without my express written permission.

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.

Make Your Page Viewable

Consider carefully the colours you use on your site. Ensure a decent contrast between the text and background and that links are clearly visible.

  • Red text on a black background may give you some interesting 3D effects, but it is very difficult to read and often doesn't print as intended.
  • White text on a black background can also result in unexpected problems.
  • The current use of light-gray content is difficult for many people to read, especially if the text is small.

Style Sheets Offer Flexibility

Improvements in style sheet properties have provided the ability to alter the content to make it more flexible.

Careful CSS enhancements can make audio presentations more realistic and provide for variations in pitch-range, richness, volume and more.

You can provide your site visitors alternatives by adding specialized style sheets that offer the user multiple choices in how they view, hear or print the site.

Responsive Web Design techniques take advantage of media queries to determine screen size and fluid display techniques to optimize images for the viewer.

Modern Browsers Help

Modern browsers allow the user a great more control, including the ability to increase or decrease the size of content. Earlier font resizing efforts suffered problems because graphics don't resize — particularly an issue where graphics are part of the navigation. CSS helps with this issue.

Use Resources Appropriately

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


Music may add an ambience to your site (to those it doesn't annoy), but you're probably doing so illegally unless you've paid the copyright holder(s) for the right to broadcast the music you're using on your site. Do you really want to risk a takedown order for your entire site?

My favorite way of explaining the concept of intellectual property to the illiterate tribesmen I encounter daily is Okay, imagine that all the sheet music in the world burned up in a huge bonfire, and then imagine that they threw on all the CDs. You can still hum the music, right? The music still exists, right? Well, that thing you can't touch, or buy, or break…that is what we own.Why You Can't Use Music On Your Web Site

Don't forget the possible barriers this can create for your viewers:

  • Cellular users paying to download data won't appreciate the extra bandwidth required to play background music.
  • There are potential delays while the viewer waits for the music to download (time that could be spent viewing your site).
  • Unexpected sounds from your site may be disturbing in certain settings, such as work, classrooms or in late-night or early-morning environments.
  • The potential need to find and install the appropriate plug-in is disruptive to many users and may make your site appear to be broken.

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.


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.

It has also become a nuisance to users, injecting ads, malware and other undesirable content which injects vulnerabilities and increases the cost of bandwidth for users. As mobile use increases, the cost has escalated to the point where many have simply turned off JavaScript.

Responsive Web Design techniques provide a better option.

Other Helpful Sites


Design Resources

There are many resources on the Web that will give you the basics of how to build a website.

The Internet is a very dynamic environment and standards change very quickly. Make sure that what you read is still valid.

Web Design Tools

There are several resources on this site that will help:

  • Web Design Tools categorizes various sites and design tips that are helpful to website designers.
  • Cut 'N Paste HTML Editing for rudimentary HTML edits and repairs.
  • Designing for Multiple Screen Resolutions discusses how different screen resolutions affect site designs, something that every designer must take into account.
  • Search Engines where you can register your website so others can find it. Look in the help section for each search engine to determine where to register your site.
  • Browser Downloads provides links to various web browsers and plugins. You'll need to test your pages in more than one browser to see what they look like to others. Use at least Firefox as an alternative, particularly if you are running Windows and are using Internet Explorer (essentially an obsolete browser).
  • Copyright — Who Owns the Content? introduces you to your rights and responsibilities regarding copyright.

Return to top

Hire Me

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

Call Now
to discuss my services!


Related Resources

Related resources on this site:

or check the resources index.

If these pages helped you,
buy me a coffee!


Return to top
Updated: May 9, 2020