Web Design Basics
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.
- The first website (May 1993) was a far cry from today's rich experience.
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 can be played back on the latest desktop and mobile devices without special plugins — even on older browsers that traditionally required Flash plugins.
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):
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.
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:
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.
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.
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.
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:
- 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.
In neither case could both the effect and flexibility of the content be created using traditional layout methods.
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.
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).
- 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:
|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).
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.
But its success became its downfall. Its many vulnerabilities make it a poor choice in today's connected world. 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.)
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. 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 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 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).
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.
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
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 isOkay, 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.
Responsive Web Design techniques provide a better option.
Other Helpful Sites
- Web Pages That Suck teaches good design by showing bad design examples.