• Home »
• Self-Help Resources »
• Website Design »
• Web Design Basics

Web Design Basics

Web Design Primer | HTML5 | Accessibility | Resources

What is 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.

Thousands of people express themselves on “hobby” websites without much knowledge about either site design or technology. Obviously, the bar is much higher if you are going to develop a business or e-commerce site.

Don't Underestimate the Required Skills

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.

Many people don't understand what is involved in building or maintaining an effective site.

A professional image, needs professional assistance.

Challenged by Technology

When you publish a book, other than for e-books, a finished product is released requiring no special software or hardware to view it.

The web designer must keep the viewer's capabilities in mind. They must be aware of the capabilities and shortcomings of the various browsers in use as well as the various platforms they are hosted on.

Different Browser, Different Experience

There are differences in the ability of various web browsers to portray specific enhancements. In addition, users may modify how their browser displays content.

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 site visitors.

It is better to have the site degrade gracefully than not work at all.

An HTML Validator can check your HTML for errors and help prevent problems you're unable to see with your browser or operating system.

HTML Challenged by Today's Content

The inventors of the Internet designed HTML for scientific exchange of information rather than the much more demanding multimedia and ecommerce platform it has become.

The Web has grown from an estimated 50 websites worldwide in 1994 (when I started to tinker with web design) to where millions of websites, blogs and social media sites make information available to everyone.

• The first website (May 1993) was a far cry from today's rich multimedia experience.

The pursuit of browser dominance rather than security (never mind ease-of-use) resulted in a broad range of "hacks" to make pages appear relatively similar in most browsers and mediums. These hacks depended upon browser quirks (“quirks mode”).

As new browser versions were released, older sites could break if the hacks no longer worked. HTML5 was designed to end that problem.

Return to top

Introduction to Web Design

The resources on this page and the other related pages on this site should give you enough information to learn the basics of how websites work and help you to make some decisions.

HTML

HTML (HyperText Markup Language) is still the dominant format for creating websites.

As the name implies, HTML “marks up” text in a manner similar to how word processing software uses headings, paragraph styles, bullets, bold and italics to enhance a document.

Many other addons and standards are now used to enhance HTML 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 HTML document using cut and paste techniques.

It is unlikely that you'll be able to manage large commercial websites since they extensively use software to build them and are far more complex than this site.

It will also provide you with a rudimentary understanding of how HTML works but there are more detailed HTML primers and courses available.

Cascading Style Sheets

CSS (Cascading Style Sheets) allows for a whole new realm of layout and styling of websites. CSS greatly reduces design complexity and speeds up the display of site content.

Separating Content From Layout

CSS also reduces the amount of HTML necessary to display the text in the fonts, colours and styles you wish to use.

By separating the content from the layout using CSS, you can control the entire site using one or more external CSS file that load once for the entire site. The HTML becomes much simpler and easier to modify.

Two excellent early sites were launched to illustrate the power of CSS:

• css Zen Garden: The Beauty in CSS Design uses different style sheets to create spectacularly different views of the same content.
• Eric A. Meyer's Complexspiral Demo uses different backgrounds to render the page differently.

CSS has moved a long ways since these sites pioneered CSS layouts. The effect and flexibility of the content could not have been 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 programs can provide.

Older programs make proprietary sites inaccessible to modern browsers like FireFox, Chrome and Safari.

Hand-coded sites load quickly and are very flexible without a lot of extra unseen content but require advanced knowledge of how HTML and CSS work.

Content Management Systems

Most recent web development software has moved to some sort of content management system (CMS).

There are hundreds of CMS systems, but WordPress's market share is 64.2% of all CMSs.

With the use of free and purchased templates inexperienced folks can create a blog or website without understanding how the technology works.

This has resulted in a lot of sites that degrade over time much like an unskilled mechanic “tuning up” a car which then no longer runs well (or at all).

Visitor Patience is Limited

Physical stores and service locations are often protected from their competition by the time and distance it would take a customer or client to check out the competition.

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. Sites have faster download speeds, reducing the chances that a viewer will abandon your site to check out your competitor's site without waiting for yours to full load.

Most current web design software (including CMSs) don't add nearly as much proprietary code as they once did.

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.

Modern browsers have removed support for most plugins. Newer HTML5 technology 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 assessing it based upon how it works on the designer's computer.

Content is King

Unless you're specializing in videos or multimedia, 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.

Many of today's “modern” websites are designed for smartphone viewers, resulting in websites containing large graphics but minimal text. So much for the “information” age.

Who is Your Audience?

What do you know about your expected (targeted) audience? About their expectations and limitations?

A site aimed at seniors may have different content and layout than one designed for children or young adults. One aimed at corporations may not have the flexibility of a hobby-related site.

Websites that use light-coloured text with minimal contrast can be very difficult for older viewers to read or to discern between regular and linked text.

Whatever the audience, you'll want to ensure that the site degrades gracefully so viewers using legacy browsers can still view your site.

Don't Make Your Site Visitors Work!

A website should provide quick access to information the viewer is looking for.

People tend to skim websites much like they read magazines in a waiting room.

If your site doesn't capture their attention quickly, they move on (your competitors' sites are listed right next to yours in a Google search).

Intuitive 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.

• Ensure links are clearly visible and meaningful.
• A site map can help people to find what they are looking for (especially items not in the main navigation menu).
• Ensure that navigation works even if JavaScript is disabled by the user.

Don't Confuse Visitors

Using “click here” for links can frustrate site visitors. Instead, use descriptive text that explains where the link goes or what it opens.

Avoid underlining regular text for emphasis because underlined text indicates a hyperlink according to web standards.

Keep Them On Your Site

Provide solutions to visitors encountering broken links (a “404” error). A dedicated 404 page will keep visitors on your site rather than sending them to your hosting service's site.

Use Colour and Images Carefully

Your site's colour scheme should reflect the nature of the site. It should not be jarring or cause anxiety.

Be sure that the images you choose are illustrative of the content and appropriate. Consider cultural implications as well, particularly for sites intended for international audiences.

Provide alternative text for images on your site in case they don't load. The amount of detail depends upon how much information is conveyed in the image to regular 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.

Frames Obsolete

Frames-based sites are aren't user-friendly and the frame element is obsolete in HTML5.

Tables for Site Layout NOT User-friendly

Sites using tables for layout 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.

Tables for Tabular Data

Tables are intended for presenting data like the following:

 

Avoid Special Characters

Many people assume that what they see on their computers is what will be seen by others. However, there are many character encodings around the world. UTF-8 will work for a wider audience.

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, em dashes and other special characters into their web document (especially when the HTML document is using UTF-8).

Special characters may also be displayed incorrectly or not at all.

Check your pages using the W3C Validator to catch these problems and fix them.

Mac Special Characters

Mac special characters (such as ⌘) may also create problems for Windows users.

Correctly Encoding Special Characters

Many special characters are available using special HTML character entities but some are only available as numerical entities:

These characters (and many more like them) have been more problematic in older browsers and some operating systems such as 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.

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 after embedding JavaScript to automatically update the current year on the copyright notice.

PDF Documents

Adobe invented PDF. When Acrobat was originally developed, most word process and other office software was incompatible with each other. By generating a PDF, that document could be viewed or printed on any system while retaining its intended 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.

Modern browsers can view PDFs natively and there are many free alternatives to Adobe Reader.

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 if your continue to use the same file name (e.g., newsletter.pdf).

PDF forms work great for registration and membership forms distributed online or emailed, especially if you make the forms fillable before printing.

Where you're dealing with online transactions like PayPal or INTERAC e-Transfer, a web-based form that emails the content directly upon submission avoids human handling.

PDF-based Websites NOT Recommended

Adobe adapted Acrobat to be capable of generating PDF-based Web sites. These sites are slower, don't have the flexibility that HTML provides and have serious issues with accessibility requirements.

Privacy & Security Concerns

The fact that PDF documents are routinely catalogued by search engines complicates privacy.

Be selective when posting any PDF documents 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 (or be aggressive in maintaining updates).

While most modern browsers have become very capable of displaying and managing PDF files natively, an external reader provides a better user experience.

Make Using PDFs Easier

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

If you elect to use PDFs, ensure that it is used primarily for secondary documents like downloadable forms and newsletters. Keep the PDF file as small as possible.

Most people know how to use PDFs, so you no longer have to document their use on your site.

Reducing the Size of PDFs

You can reduce the size of PDFs by pre-sizing large images to appropriate dimensions before you import them into the original document.

• Microsoft Office provides the option for “standard (publishing online and printing)” or a “minimum size (publishing online)” when exporting your document to PDF.
• Commercial PDF software usually generates smaller PDF files and allows you to edit PDFs after creation.

If a large PDF is unavoidable, be sure to indicate its size on the link that points to it (e.g., PDF–3.5 MB). This holds true for any larger file on your site.

Professional PDF Software Recommendations

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

See my recommendations for PDF software based upon your requirements.

Specify A DOCTYPE

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.

Unfortunately, Microsoft continues to support Internet Explorer as a legacy resource. It uses "quirks" mode if it cannot determine the document type (it assumes that the page is designed for earlier versions of HTML).

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

Indicate Encoding Format

Since the Internet is international, your page is bound to be viewed in countries 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 Canada and the United States 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.

Many free graphics request or 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 attractive images. 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 and no longer require graphics programs to generate them.

Create or search out your own sources so that you can properly attribute credit and avoid copyright claims.

Return to top

HTML5

HTML5 is intended to make the development of Web applications much easier without the need to “trick” browsers.

It can embrace newer and simpler technologies while allowing older browsers to still function, even if it is with a degraded user experience.

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

The Technology is Changing

HTML5 has changed the way we're viewing the Web. It is much simpler than earlier HTML versions, removing much of the excess markup needed in HTML 4.

For example:

• <!DOCTYPE html> not <!DOCTYPE html public "-//w3c//dtd html 4.01//en">
• JavaScript no longer requires type="text/javascript"

Much of the old HTML markup has been deprecated, replaced with CSS.

HTTPS

The widespread collection and sale of personal data as well as increasing cybercrime has made the Internet much less safe.

The HTTPS protocol and other changes like the removal of FTP capability in browsers has made the Web safer — provided both site owners and visitors are compliant.

HTTPS secures the connection between the browser and the server to improve security and privacy, but only if the site supports HTTPS and the site visitor uses a recent browser.

SEO Tip: Enable HTTPS

Site owners should encrypt their site to help improve SEO because Google has made HTTPS a priority determinant of placement in search results.

Access to your hosting account is required to enable HTTPS.

HTML5 Media Controls

The way we're viewing multimedia on the Web has changed.

Plugins like Flash, Adobe Reader and Shockwave have been replaced with native HTML5 technologies that are safer and faster.

HTML5 media controls are supported by all modern browsers and mobile devices — even on older browsers that traditionally required plugins.

HTML5 Audio

Audio controls are simple but intuitive:

HTML5 Video

Video controls are similar but add the video components:

The style of the controls may vary between browsers and operating systems.

Adding HTML5 Video

Adding the <video> element is quite simple:

<video controls="controls" preload="metadata">
    <source src="Sunset.webm" type="video/ogg" />
    Your browser does not support the video element.
</video>

The "your browser does not support the video element" text appears if the viewer's device doesn't support the HTML5 video.

Other Options

“Video for everybody” is a transitional page about the HTML5 <video> element which provides alternatives for legacy browsers and hardware.

HTML 5 has come far enough that most current systems should work with it since Flash and other technologies have disappeared.

Proprietary Media Players

Many commercial websites don't use the simple HTML5 players displayed above.

Instead, they use proprietary media players designed to cull information for their marketing department in exchange for the ability to play their videos. This “surveillance economy” is a one-sided bargain.

HTML5 3D Rendering

CSS Preserve-3D allows for the 3D rendering of animated objects (supported by most modern browsers).

• Beautiful CSS 3D transform examples.
• CSS transform-style property.
• CSS Demo: transform-style.
• CSS: 3D Transforms and Animations.

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 is very difficult to read and may not print as expected.
• White text on a black background can also result in unexpected problems.
• Small light-gray content is very difficult for many people to read.

The most recent trends are to use very large graphics and minimal text suitable for cellphones. I attribute this to the narrowing amount of time people will wait for a page to load.

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

Avoid browser-specific enhancements since you can seldom control the browsers in use.

You will want to determine your audience before using enhancements that either require third-party legacy plugins or other addons.

Music

Music may add an ambience to your site, 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.

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

Do you really want to risk a takedown order for your entire site to provide something that slows down site load times and many in quiet environments will find annoying?

Everything you add to your site adds potential complexity that your audience may need to deal with. Don't give folks a reason to leave your site.

• 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 (folks are very impatient about load times these days).
• Unexpected sounds from your site may be disturbing in certain settings, such as work, classrooms or in late-night or early-morning environments.
• Your choice of music may not enhance some people's experience. There are cultural and other considerations.

There is a reason that Firefox and other browsers disable auto-playing of videos on websites.

JavaScript

JavaScript is great for creating rollovers and other interesting effects, but you can wear down your viewer with too much 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 (Responsive Web Design techniques provide a better option).

It has also become a nuisance to users — injecting ads, malware and other undesirable content and subjecting your site visitors to vulnerabilities and increases bandwidth costs.

Many have simply turned off JavaScript.

Other Helpful Sites

• Web Pages That Suck teaches good design by showing bad design examples.